open-index/open-npm huggingface dataset:
npm package: @over-ui/create-roving-context
Description: `createRovingContext` 패키지는, `over-ui` 패키기 내부에서 사용하는 훅입니다. `radio, toggle` 컴포넌트를 작성할 때의 접근성 규칙을 준수하기 위해 `roving TabIndex`를 구현합니다.
Latest version: 1.1.1

# `over-ui/create-roving-context`

`createRovingContext` 패키지는, `over-ui` 패키기 내부에서 사용하는 훅입니다.
`radio, toggle` 컴포넌트를 작성할 때의 접근성 규칙을 준수하기 위해 `roving TabIndex`를 구현합니다.

## Usage

```
// 사용 전에, rovingProvider로 사용해야 하는 컴포넌트를 묶어주세요.

const {rovingProvider, useRoving} = createRovingContext();
// group 요소
const Container: Poly.Component<typeof DEFAULT_ROOT, ContainerProps> =
  React.forwardRef(
    <T extends React.ElementType = typeof DEFAULT_ROOT>(
      props: Poly.Props<T, ContainerProps>,
      ref: Poly.Ref<T>,
    ) => {
      const {
        children,
        pressed,
        as,
        onFocus: theirOnFocus,
        onKeyDown: theirOnKeyDown,
        ...restProps
      } = props;
      const containerRef = React.useRef<HTMLDivElement>(null);
      const { handleRovingKeyDown, handleRovingFocus } = useRoving();

      // 그룹 요소에, rovingKeyDown, RovingFocus를 등록합니다.
      return (
        <Tag
          role='group'
          onFocus={composeEvent(
            handleRovingFocus({ dom: containerRef, selected: pressed }),
            theirOnFocus,
          )}
          onKeyDown={composeEvent(handleRovingKeyDown, theirOnKeyDown)}
          tabIndex={0}
          // 이 컴포넌트는 반드시, `focus` 될 수 있어야 합니다.
          // 이부분에 `focus` 되었을 때에 `tabIndex`를 재조정하기 때문입니다.
          ref={mergeRefs([containerRef, ref])}
          {...restProps}
        >
          {children}
        </Tag>
      );
    },
  );

// ---------

export const Item: Poly.Component<typeof DEFAULT_ITEM, ItemProps> =
  React.forwardRef(
    <T extends React.ElementType = typeof DEFAULT_ITEM>(
      props: Poly.Props<T, ItemProps>,
      ref: Poly.Ref<T>,
    ) => {
      const { children, value, disabled = false, ...restProps } = props;
      const ItemRef = React.useRef<HTMLButtonElement>(null);

      const { pressedValue, multiple, setValue, deleteValue } = useSafeContext(
        ToggleContext,
        ITEM_DISPLAY_NAME,
      );

      const { useRegister } = useRoving();

      useRegister(value, {
        dom: ItemRef,
        value,
        disabled,
      });
      ....
      // item 요소에서 register를 진행합니다.

```
npm package: @over-ui/dialog
Description: ``` npm install @over-ui/dialog or yarn add @over-ui/dialog ```
Latest version: 1.1.0

# `over-test`

```
npm install @over-ui/dialog
or
yarn add @over-ui/dialog
```

## Usage

[usage](https://63bba467b98099ff5c8b92b6-iiswrrhehq.chromatic.com/?path=/docs/over-ui-dialog--main)
npm package: @over-ui/focus-trap-layer
Description: `focusTrapLayer` 패키지는, `over-ui`내부에서만 사용되는 패키지입니다.
Latest version: 1.1.0

# `over-ui/focusTrapLayer`

`focusTrapLayer` 패키지는, `over-ui`내부에서만 사용되는 패키지입니다.

over-ui 상의 Dialog 등 모달을 사용하는 컴포넌트에서는, 컴포넌트 `밖으로 포커스가 나가면 모달이 닫히게` 됩니다. 이러한 의도치 않은 동작을 막기 위해 FocusTrapLayer 컴포넌트를 개발하게 되었습니다. `FocusTrapLayer`는 container 안에서 `focusable하고 조건에 맞는 엘리먼트들`을 모아 해당 엘리먼트들만 포커스가 되도록 `포커스를 가둠`으로써 포커스가 밖으로 튀어 나가 모달을 닫는 동작을 방지합니다.

## Usage

```tsx
import * as React from 'react';
import { FocusTrapLayer } from '@over-ui/focusTrapLayer';

const DemoPage = () => {
  return (
    <>
      <FocusTrapLayer loop>
        <h2 tabIndex={0}>title</div>
        <div>description</div>
        <input id="id"/>
        <input id="password"/>
        <input id="nickname"tabIndex={-1}/>
        <button>cancel</button>
        <button>submit</button>
      </FocusTrapLayer>
    </>
  );
};

export default DemoPage;
```

## Result

FocusTrapLayer 내부에 있는 포커스가 가능한 요소들, 위와 같은 영우에는 `h2, input(id), input(password), button(cancel), button(submit)` 총 5개의 요소가 포커스가 가능하기때문에 이 5개의 요소 안에 포커스를 가두게되고 밖으로 포커스가 나가지 않게 된다.  
또한 loop 옵션을 줬기 때문에 마지막 submit가 포커스 된 상태로 tab키를 누르면 첫 번째인 h2로 포커스가 이동하고, h2에 포커스가 된 상태로 shift키와 tab키를 같이 누르면 마지막 요소인 submit으로 포커스가 이동하게 된다.
npm package: @over-ui/merge-refs
Description: `mergeRefs` 패키지는, `over-ui` 에서 `ref` 를 병합하기 위한 유틸함수입니다. 내부에서만 사용하는 패키지입니다.
Latest version: 1.1.0

# `over-ui/mergeRefs`

`mergeRefs` 패키지는, `over-ui` 에서 `ref` 를 병합하기 위한 유틸함수입니다.
내부에서만 사용하는 패키지입니다.

## Usage

```jsx
const Toggle = React.forwardRef((props, ref) => {
  const innerRef = React.useRef(null);
  return <button ref={mergeRefs([innerRef, ref])}>토글</button>;
});
```

위와 같은 상황에서 주로 사용합니다. 부모로부터 내려받은 `ref`와 내부에 있는 `innerRef`를 병합할 수 있습니다.

```jsx
const Toggle = React.forwardRef((props, ref) => {
  return <button ref={mergeRefs([(node) => node?.focus(), ref])}>토글</button>;
});
```

`ref Callback`의 사용또한 가능합니다.
npm package: @over-ui/portal
Description: `portal` 패키지는, 컴포넌트에서 모달 기능을 사용할 때 필요한 포탈을 생성하는 컴포넌트입니다. 임의로 `container`를 지정해서 그 곳에 포탈을 열 수 있고, 지정되지 않았다면 기본값으로 `body`에 포탈이 생성됩니다
Latest version: 1.1.0

# `over-ui/portal`

`portal` 패키지는, 컴포넌트에서 모달 기능을 사용할 때 필요한 포탈을 생성하는 컴포넌트입니다.
임의로 `container`를 지정해서 그 곳에 포탈을 열 수 있고, 지정되지 않았다면 기본값으로 `body`에 포탈이 생성됩니다

## Usage

### portal

```tsx
import * as React from 'react';
import { Poly } from '@over-ui/core';
import { Portal as PortalPrimitive } from '@over-ui/portal';

type DemoPortalProps = {
  container?: HTMLElement | null;
  children?: React.ReactNode;
};

const DemoPortal = (props: DemoPortalProps) => {
  const { children, container } = props;

  /* context나 state가 있을 경우 모달이 열리는 조건으로 활용할 수 있습니다 */
  return <PortalPrimitive container={container}>{children}</PortalPrimitive>;
};

type DemoPortalContentProps = {
  children?: React.ReactNode;
};

const DEFAULT_DEMO_TAG = 'div';

const DemoPortalContent: Poly.Component<typeof DEFAULT_DEMO_TAG, DemoPortalContentProps> =
  React.forwardRef(
    <T extends React.ElementType = typeof DEFAULT_DEMO_TAG>(
      props: Poly.Props<T, DemoPortalContentProps>,
      forwardedRef: Poly.Ref<T>
    ) => {
      const { as, children, ...restProps } = props;

      const Tag = as || DEFAULT_DEMO_TAG;

      return (
        /* container props를 활용하여 container를 직접 지정해 줄 수 있습니다 */
        <DemoPortal>
          <Tag {...restProps} ref={forwardedRef}>
            {children}
          </Tag>
        </DemoPortal>
      );
    }
  );
```
npm package: @over-ui/select
Description: ``` yarn add @over-ui/select or npm install @over-ui/select ```
Latest version: 1.1.3

# `over-ui/select`

```
yarn add @over-ui/select
or
npm install @over-ui/select
```

## Usage
[스토리북](https://63bba467b98099ff5c8b92b6-qdciptjqgm.chromatic.com/?path=/docs/over-ui-select--controlled)을 통해 usage를 확인하실 수 있습니다.
npm package: @over-ui/toggle
Description: ``` yarn add @over-ui/toggle or npm install @over-ui/toggle ```
Latest version: 1.1.1

# `over-ui/toggle`

```
yarn add @over-ui/toggle
or
npm install @over-ui/toggle
```

## Usage
[스토리북](https://63bba467b98099ff5c8b92b6-qdciptjqgm.chromatic.com/?path=/docs/over-ui-toggle--main)페이지를 통해 usage를 확인하실 수 있습니다.
npm package: @over-ui/toggle-group
Description: ``` yarn add @over-ui/toggle-group or npm install @over-ui/toggle-group ```
Latest version: 1.1.3

# `over-ui/toggle-group`

```
yarn add @over-ui/toggle-group
or
npm install @over-ui/toggle-group
```

## Usage
[스토리북](https://63bba467b98099ff5c8b92b6-qdciptjqgm.chromatic.com/?path=/docs/over-ui-togglegroup--main)을 통해 usage를 확인하실 수 있습니다.
npm package: @over-ui/use-controlled
Description: `useControlled` 패키지는, `over-ui` 에서 상태를 관리하는 훅입니다. 내부에서만 사용하는 패키지입니다.
Latest version: 1.1.0

# `over-ui/useControlled`

`useControlled` 패키지는, `over-ui` 에서 상태를 관리하는 훅입니다.
내부에서만 사용하는 패키지입니다.

## Usage

```jsx
const Toggle: Poly.Component<typeof DEFAULT_TOGGLE, ToggleProps> =
  React.forwardRef(
    <T extends React.ElementType = typeof DEFAULT_TOGGLE>(
      props: Poly.Props<T, ToggleProps>,
      ref: Poly.Ref<T>,
    ) => {
      const {
        onClick,
        onKeyDown,
        onPressedChange,
        disabled = false,
        children,
        defaultPressed = false,
        pressed: pressedProp,
        as,
        ...restProps
      } = props;

      const [pressed, setPressed] = useControlled({
        value: pressedProp,
        defaultValue: defaultPressed,
        onChange: onPressedChange,
      });

      ...
      );
    },
  );

```

이를 통해, 다음과 같이 이용할 수 있습니다.

```jsx
function Home() {
  const [state, setState] = useState(false);
  return (
    <>
      <Toggle pressed={state} onPressedChange={(pressed) => setState(pressed)} />
    </>
  );
}
```

- useControlled의 value, onValueChange를 이용할 경우 외부의 상태를 이용할 수 있습니다.

```jsx
function Home() {
  return (
    <>
      <Toggle
        defaultPressed={false}
        onPressedChange={(pressed) => console.log(pressed)}
        // false
      />
    </>
  );
}
```

- 외부의 상태를 정의하지 않고, 내부의 상태만을 활용할 수 있습니다.
npm package: @over-ui/use-id
Description: `React 18`버전에서 등장한 `useId` 훅이 존재하지 않을 시 커스텀훅으로 대체하기 위한 훅입니다. `useId`가 존재한다면, `React.useId`를 사용하고 존재하지 않는다면 `useSafeId`를 사용해 고유한 `id`를 생성합니다.
Latest version: 1.1.1

# `over-ui/use-id`

`React 18`버전에서 등장한 `useId` 훅이 존재하지 않을 시 커스텀훅으로 대체하기 위한 훅입니다.
`useId`가 존재한다면, `React.useId`를 사용하고 존재하지 않는다면 `useSafeId`를 사용해 고유한 `id`를 생성합니다.

## usage
```tsx
import * as useId from "@over-ui/use-id"

const Toggle = () => {

    const id = useId()
    return ...
}
```
npm package: @over-ui/use-outside-click
Description: `use-outside-click` 패키지는, 내부에서만 사용하는 패키지입니다.
Latest version: 1.1.0

# `@over-ui/use-outside-click`

`use-outside-click` 패키지는, 내부에서만 사용하는 패키지입니다.