@remember-web/primitive 0.0.0-alpha.1

package/src/Inputs/Select/DesignedSelect/index.tsx

@@ -0,0 +1,295 @@
+'use client';
+
+import type { KeyboardEvent, ReactNode, Ref, RefCallback } from 'react';
+import {
+  Children,
+  forwardRef,
+  isValidElement,
+  useCallback,
+  useRef,
+  useState,
+  useId,
+} from 'react';
+
+import { focusSibling } from '../utils';
+import useMouseEventAway from '@/hooks/useMouseEventAway';
+import { IconArrow2Down, IconArrow2Up } from '@remember-web/icon';
+
+import { OptionHolder } from '../Option';
+import { SelectContainer } from '../styles';
+import type { OptionElementType, SelectValue } from '../types';
+import { DEFAULT_MAX_HEIGHT_PX, OPTION_ITEM_HEIGHT_PX } from './const';
+import {
+  SelectDownIcon,
+  SelectOption,
+  SelectOptionWrapper,
+  StyledSelect,
+} from './styles';
+import type { DesignedSelectInternalProps, ExpandedType } from './types';
+
+const DesignedSelect = <Value extends SelectValue>(
+  {
+    children,
+    value,
+    maxHeight = DEFAULT_MAX_HEIGHT_PX,
+    placeholder,
+    onChange,
+    width,
+    extendDirection,
+    disabled,
+    ...props
+  }: DesignedSelectInternalProps<Value>,
+  ref?: Ref<HTMLDivElement>
+) => {
+  const id = useId();
+  const [expandedDirection, _setExpandedDirection] =
+    useState<ExpandedType>('none');
+  const selectContainerRef = useRef<HTMLDivElement | null>(null);
+  const selectListRef = useRef<HTMLUListElement | null>(null);
+  const clickAwayRef = useMouseEventAway<HTMLDivElement, 'pointerdown'>(
+    'pointerdown',
+    () => {
+      setExpandedDirection('none');
+    }
+  );
+
+  const setExpandedDirection = useCallback(
+    (...args: Parameters<typeof _setExpandedDirection>) => {
+      if (disabled) {
+        return;
+      }
+      _setExpandedDirection(...args);
+    },
+    [disabled]
+  );
+
+  const options = Children.toArray(children)
+    .filter(
+      (child): child is OptionElementType<Value> =>
+        isValidElement(child) && child.type === OptionHolder
+    )
+    .map(
+      ({
+        props: { children: _children, value: _value, disabled: _disabled },
+      }) => ({
+        label: _children,
+        value: _value,
+        disabled: _disabled,
+      })
+    );
+
+  const selectedOption = options.find((option) => value === option.value);
+
+  const isExpanded = expandedDirection !== 'none';
+
+  const onSelectOption = (_value: Value, _label: ReactNode) => {
+    onChange?.(_value, _label);
+    setExpandedDirection('none');
+    selectContainerRef.current?.focus();
+  };
+
+  // 리스트가 하단으로 나와야하는지 상단으로 나와야하는지 계산하는 함수
+  // 현재 Viewport기준으로 Select컴포넌트가 아래로 확장되었을 때 뷰포트 내에 리스트박스가 노출될 수 있다면 하단으로 확장, 아니라면 상단으로 확장
+  // direction이 props로 전달되었다면 해당 방향으로 확장
+  const expandSelectListAtComputedPosition = () => {
+    if (extendDirection) {
+      setExpandedDirection(extendDirection);
+      return;
+    }
+
+    const selectContainerRect =
+      selectContainerRef.current?.getBoundingClientRect();
+
+    if (!selectContainerRect) {
+      setExpandedDirection('below');
+      return;
+    }
+
+    // SelectOptionWrapper가 마운트되기 전에 계산해야 하기 때문에 clientHeight를 사용하지 못하고 직접 계산
+    const currentSelectHeight = Math.min(
+      maxHeight,
+      options.length * OPTION_ITEM_HEIGHT_PX
+    );
+    const bottomGap = document.body.clientHeight - selectContainerRect.bottom;
+
+    setExpandedDirection(currentSelectHeight > bottomGap ? 'above' : 'below');
+  };
+
+  const optionItemRef = useCallback<RefCallback<HTMLLIElement>>(
+    (ele) => {
+      if (!ele) {
+        return;
+      }
+
+      // 선택한 요소가 없을때는 첫번째 요소에 focus
+      if (!value && !ele.previousSibling) {
+        setTimeout(() => ele.focus());
+        return;
+      }
+
+      // 선택한 요소가 있다면 해당 요소에 focus
+      const optionValue = ele.dataset.optionValue || null;
+      if (optionValue === value) {
+        setTimeout(() => ele.focus());
+      }
+    },
+    [value]
+  );
+
+  const keyDownHandler = (e: KeyboardEvent) => {
+    const focusedElement = document.activeElement;
+
+    if (!focusedElement || !(focusedElement instanceof HTMLElement)) {
+      return;
+    }
+
+    switch (e.key) {
+      case 'Tab':
+        if (isExpanded) {
+          e.preventDefault();
+        }
+        break;
+      case 'ArrowUp':
+        e.preventDefault();
+        if (!isExpanded) {
+          expandSelectListAtComputedPosition();
+          break;
+        }
+        focusSibling(focusedElement, 'previous');
+        break;
+      case 'ArrowDown':
+        e.preventDefault();
+        if (!isExpanded) {
+          expandSelectListAtComputedPosition();
+          break;
+        }
+        focusSibling(focusedElement, 'next');
+        break;
+      case 'Escape':
+        e.preventDefault();
+        setExpandedDirection('none');
+        selectContainerRef.current?.focus();
+        break;
+      case 'Enter':
+      case ' ':
+        e.preventDefault();
+
+        if (e.target === e.currentTarget) {
+          if (isExpanded) {
+            setExpandedDirection('none');
+            return;
+          }
+          expandSelectListAtComputedPosition();
+        }
+
+        if (
+          focusedElement?.matches('[data-option-value]') &&
+          focusedElement instanceof HTMLLIElement &&
+          focusedElement.dataset.optionValue
+        ) {
+          onSelectOption(
+            focusedElement.dataset.optionValue as Value,
+            focusedElement.innerText
+          );
+        }
+        break;
+      default:
+        break;
+    }
+  };
+
+  return (
+    <SelectContainer
+      ref={(el) => {
+        if (!el) {
+          return;
+        }
+        selectContainerRef.current = el;
+        clickAwayRef.current = el;
+      }}
+      $width={width}
+      tabIndex={disabled ? undefined : 0}
+      aria-expanded={isExpanded}
+      aria-haspopup="listbox"
+      aria-disabled={disabled}
+      onKeyDown={keyDownHandler}
+      {...props}
+    >
+      <StyledSelect
+        ref={ref}
+        expandedDirection={expandedDirection}
+        isPlaceholder={!selectedOption && !!placeholder}
+        onPointerDown={(e) => {
+          if (isExpanded) {
+            setExpandedDirection('none');
+            return;
+          }
+
+          e.stopPropagation();
+
+          expandSelectListAtComputedPosition();
+        }}
+      >
+        {selectedOption?.label || placeholder || 'ㅤ'}
+      </StyledSelect>
+      <SelectDownIcon>
+        {isExpanded ? (
+          <IconArrow2Up size="small" />
+        ) : (
+          <IconArrow2Down size="small" />
+        )}
+      </SelectDownIcon>
+      {isExpanded && (
+        <SelectOptionWrapper
+          role="listbox"
+          aria-activedescendant={
+            value != null ? `${id}-select-option-${value}` : undefined
+          }
+          ref={selectListRef}
+          expandedDirection={expandedDirection}
+          maxHeight={maxHeight}
+        >
+          {options.map(({ value: optionValue, label, disabled: _disabled }) => (
+            <SelectOption
+              id={`${id}-select-option-${optionValue}`}
+              role="option"
+              key={optionValue}
+              tabIndex={_disabled ? undefined : 0}
+              aria-selected={optionValue === value}
+              aria-disabled={_disabled}
+              ref={optionItemRef}
+              isSelected={optionValue === value}
+              data-option-value={optionValue}
+              // onMouseEnter를 사용하게 되면 키보드로 스크롤 할 때도 focus가 이동하게 되기 때문에 onMouseMove를 사용
+              onMouseMove={(e) => {
+                if (e.currentTarget === document.activeElement) {
+                  return;
+                }
+                e.currentTarget.focus({
+                  preventScroll: true,
+                });
+              }}
+              onFocus={() => {
+                selectListRef.current?.setAttribute(
+                  'aria-activedescendant',
+                  `${id}-select-option-${optionValue}`
+                );
+              }}
+              onClick={() => {
+                if (_disabled) {
+                  return;
+                }
+
+                onSelectOption(optionValue, label);
+              }}
+            >
+              {label}
+            </SelectOption>
+          ))}
+        </SelectOptionWrapper>
+      )}
+    </SelectContainer>
+  );
+};
+
+export default forwardRef(DesignedSelect);

package/src/Inputs/Select/DesignedSelect/styles.ts

@@ -0,0 +1,146 @@
+'use client';
+
+import styled, { css } from 'styled-components';
+import {
+  bg100,
+  bg200,
+  bg300,
+  contents000,
+  contents200,
+  contents300,
+  ellipsis,
+} from '@remember-web/mixin';
+
+import { SelectContainer } from '../styles';
+import type { ExpandedType } from './types';
+
+export const StyledSelect = styled.div<{
+  expandedDirection?: ExpandedType;
+  isPlaceholder?: boolean;
+}>`
+  ${ellipsis()}
+  border: 1px solid ${contents300};
+  ${({ expandedDirection }) =>
+    ({
+      none: css`
+        border-radius: 4px;
+      `,
+      above: css`
+        border-radius: 0 0 4px 4px;
+        border-top-color: transparent;
+      `,
+      below: css`
+        border-radius: 4px 4px 0 0;
+        border-bottom-color: transparent;
+      `,
+    }[expandedDirection ?? 'none'])};
+
+  padding: 10px 36px 10px 12px;
+  transition: border-color 0.2s, background-color 0.2s;
+
+  ${({ isPlaceholder }) =>
+    isPlaceholder &&
+    css`
+      color: ${contents200};
+    `}
+
+  ${SelectContainer}:focus-within & {
+    outline: none;
+    border-color: ${contents000};
+  }
+  ${SelectContainer}:not([aria-disabled='true']) & {
+    @media (hover: hover) {
+      &:hover {
+        background-color: ${bg200};
+      }
+    }
+
+    &:active {
+      background-color: ${bg300};
+    }
+  }
+`;
+
+export const SelectDownIcon = styled.div`
+  position: absolute;
+  right: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+
+  & > svg {
+    display: block;
+  }
+
+  pointer-events: none;
+`;
+
+export const SelectOptionWrapper = styled.ul<{
+  expandedDirection?: ExpandedType;
+  maxHeight?: number | string;
+}>`
+  all: unset;
+  position: absolute;
+  left: 0;
+  right: 0;
+  z-index: 1;
+  border: 1px solid ${contents300};
+  background-color: ${bg100};
+  overflow-y: scroll;
+  overscroll-behavior: contain;
+  transition: border-color 0.2s, background-color 0.2s;
+
+  ${({ maxHeight }) => {
+    if (!maxHeight) {
+      return null;
+    }
+
+    if (typeof maxHeight === 'number') {
+      return css`
+        max-height: ${maxHeight}px;
+      `;
+    }
+
+    return css`
+      max-height: ${maxHeight};
+    `;
+  }};
+
+  ${({ expandedDirection }) =>
+    expandedDirection === 'below'
+      ? css`
+          top: calc(100% - 1px);
+          border-top: none;
+          border-radius: 0 0 4px 4px;
+        `
+      : css`
+          bottom: calc(100% - 1px);
+          border-bottom: none;
+          border-radius: 4px 4px 0 0;
+        `}
+
+  ${SelectContainer}:focus &, ${SelectContainer}:focus-within & {
+    outline: none;
+    border-color: ${contents000};
+  }
+`;
+
+export const SelectOption = styled.li<{ isSelected?: boolean }>`
+  ${ellipsis()}
+  padding: 10px 12px;
+  color: ${contents000};
+
+  &[aria-disabled='true'] {
+    color: ${contents300};
+  }
+
+  &:focus {
+    background-color: ${bg200};
+    outline: none;
+  }
+
+  ${({ isSelected }) =>
+    isSelected &&
+    css`
+      background-color: ${bg200};
+    `}
+`;

package/src/Inputs/Select/DesignedSelect/types.ts

@@ -0,0 +1,20 @@
+import type { ReactNode, SelectHTMLAttributes } from 'react';
+
+import type { OptionElementType, SelectValue } from '../types';
+
+export type DesignedSelectInternalProps<Value extends SelectValue> = Omit<
+  SelectHTMLAttributes<HTMLDivElement>,
+  `aria-${string}` | 'children' | 'onChange'
+> & {
+  children: OptionElementType<Value> | OptionElementType<Value>[];
+  onChange?: (
+    targetValue: Value,
+    targetLabel: ReactNode
+  ) => Promise<void> | void;
+  maxHeight?: number;
+  width?: number | string;
+  placeholder?: string;
+  extendDirection?: Exclude<ExpandedType, 'none'>;
+};
+
+export type ExpandedType = 'none' | 'above' | 'below';

package/src/Inputs/Select/NativeSelect/Option/index.tsx

@@ -0,0 +1,13 @@
+'use client';
+
+import type { OptionProps, SelectValue } from '../../types';
+
+export const NativeOption = <Value extends SelectValue = string>({
+  children,
+  disabled,
+  value,
+}: OptionProps<Value>) => (
+  <option value={value} disabled={disabled}>
+    {String(children)}
+  </option>
+);

package/src/Inputs/Select/NativeSelect/index.tsx

@@ -0,0 +1,45 @@
+'use client';
+
+import type { ForwardRefRenderFunction } from 'react';
+import { forwardRef } from 'react';
+
+import { IconArrow2Down } from '@remember-web/icon';
+
+import { SelectDownIcon, StyledSelect } from './styles';
+import type { NativeSelectInternalProps } from './types';
+import { SelectContainer } from '../styles';
+
+const NativeSelect: ForwardRefRenderFunction<
+  HTMLSelectElement,
+  NativeSelectInternalProps
+> = (
+  { children, className, width, placeholder, value, disabled, ...props },
+  ref
+) => {
+  const showPlaceholder = !value && !!placeholder;
+
+  return (
+    <SelectContainer aria-disabled={disabled} className={className}>
+      <StyledSelect
+        {...props}
+        value={value}
+        $width={width}
+        ref={ref}
+        isPlaceholder={showPlaceholder}
+        disabled={disabled}
+      >
+        {!value && (
+          <option value="" selected>
+            {placeholder || 'ㅤ'}
+          </option>
+        )}
+        {children}
+      </StyledSelect>
+      <SelectDownIcon>
+        <IconArrow2Down size="small" />
+      </SelectDownIcon>
+    </SelectContainer>
+  );
+};
+
+export default forwardRef(NativeSelect);

package/src/Inputs/Select/NativeSelect/styles.ts

@@ -0,0 +1,72 @@
+'use client';
+
+import styled, { css } from 'styled-components';
+import {
+  bg200,
+  bg300,
+  contents000,
+  contents200,
+  contents300,
+  getTypographyStyles,
+} from '@remember-web/mixin';
+
+export const StyledSelect = styled.select<{
+  $width?: number | string;
+  isPlaceholder?: boolean;
+}>`
+  all: unset;
+
+  ${getTypographyStyles('Body1_M')}
+  border: 1px solid ${contents300};
+  border-radius: 4px;
+  padding: 10px 36px 10px 12px;
+  box-sizing: border-box;
+
+  ${({ isPlaceholder }) =>
+    isPlaceholder &&
+    css`
+      color: ${contents200};
+    `}
+
+  width: ${({ $width }) => {
+    if (!$width) {
+      return null;
+    }
+
+    if (typeof $width === 'number') {
+      return `${$width}px`;
+    }
+
+    return $width;
+  }};
+
+  transition: border-color 0.2s, background-color 0.2s;
+
+  &:focus {
+    border-color: ${contents000};
+  }
+
+  &:not(:disabled) {
+    @media (hover: hover) {
+      &:hover {
+        background-color: ${bg200};
+      }
+    }
+
+    &:active {
+      background-color: ${bg300};
+    }
+  }
+`;
+export const SelectDownIcon = styled.div`
+  position: absolute;
+  right: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+
+  & > svg {
+    display: block;
+  }
+
+  pointer-events: none;
+`;

package/src/Inputs/Select/NativeSelect/types.ts

@@ -0,0 +1,18 @@
+import type { ReactElement, SelectHTMLAttributes } from 'react';
+
+import type { NativeOption } from './Option';
+import type { OptionProps } from '../types';
+
+type NativeOptionElement = ReactElement<
+  OptionProps<string>,
+  typeof NativeOption
+>;
+
+export type NativeSelectInternalProps = Omit<
+  SelectHTMLAttributes<HTMLSelectElement>,
+  `aria-${string}` | 'children'
+> & {
+  children: NativeOptionElement | NativeOptionElement[];
+  width?: number | string;
+  placeholder?: string;
+};

package/src/Inputs/Select/Option/index.tsx

@@ -0,0 +1,9 @@
+'use client';
+
+import type { OptionProps, SelectValue } from '../types';
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const OptionHolder = <T extends SelectValue>(props: OptionProps<T>) =>
+  null;
+
+OptionHolder.displayName = 'Select.Option';

package/src/Inputs/Select/Select.stories.tsx

@@ -0,0 +1,85 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+
+import type { DesignedSelectProps, NativeSelectProps } from './types';
+
+import Select from '.';
+
+type Story = StoryObj<typeof Select>;
+
+const meta = {
+  title: 'Inputs/Select',
+  component: Select,
+  argTypes: {
+    label: { type: 'string' },
+    required: { type: 'boolean' },
+    placeholder: { type: 'string' },
+    disabled: { type: 'boolean' },
+    width: { type: 'string' },
+    maxHeight: { type: 'string' },
+    native: { type: 'boolean' },
+  },
+} satisfies Meta<typeof Select>;
+
+export const Native: Story = {
+  render: (props) => {
+    const { ...args } = props as NativeSelectProps<string>;
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [value, setValue] = useState<string>();
+    return (
+      <Select
+        {...args}
+        native
+        value={value}
+        placeholder="Placeholder"
+        width={400}
+        onChange={(tV) => {
+          setValue(tV);
+        }}
+      >
+        <Select.Option value="1">Option 1</Select.Option>
+        <Select.Option value="2">Option 2</Select.Option>
+        <Select.Option value="3">Option 3</Select.Option>
+        <Select.Option value="4">Option 4</Select.Option>
+        <Select.Option value="5" disabled>
+          Option 5
+        </Select.Option>
+        <Select.Option value="6">Option 6</Select.Option>
+        <Select.Option value="7">Option 7</Select.Option>
+        <Select.Option value="8">Option 8</Select.Option>
+      </Select>
+    );
+  },
+};
+
+export const Custom: Story = {
+  render: (props) => {
+    const { ...args } = props as DesignedSelectProps<string>;
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [value, setValue] = useState<string>();
+    return (
+      <Select
+        {...args}
+        value={value}
+        width={400}
+        placeholder="Placeholder"
+        onChange={(tV) => {
+          setValue(tV);
+        }}
+      >
+        <Select.Option value="1">Option 1</Select.Option>
+        <Select.Option value="2">Option 2</Select.Option>
+        <Select.Option value="3">Option 3</Select.Option>
+        <Select.Option value="4">Option 4</Select.Option>
+        <Select.Option value="5" disabled>
+          Option 5
+        </Select.Option>
+        <Select.Option value="6">Option 6</Select.Option>
+        <Select.Option value="7">Option 7</Select.Option>
+        <Select.Option value="8">Option 8</Select.Option>
+      </Select>
+    );
+  },
+};
+
+export default meta;