@uniai-fe/uds-primitives 0.3.19 → 0.3.21

package/src/components/dropdown/markup/Template.tsx

@@ -31,9 +31,7 @@ const normalizeSelectedIdsByMode = (
  * @param {DropdownTemplateProps} props Dropdown template props
  * @param {ReactNode} props.trigger trigger 요소
  * @param {DropdownTemplateItem[]} props.items 렌더링할 menu item 리스트
- * @param {string[]} [props.selectedIds] 선택된 item id 배열
  * @param {(payload: DropdownTemplateChangePayload) => void} [props.onChange] 선택 결과 변경 콜백
- * @param {(item: DropdownTemplateItem) => void} [props.onSelect] item 선택 콜백
  * @param {"small" | "medium" | "large"} [props.size="medium"] menu size scale
  * @param {"match" | "fit-content" | "max-content" | string | number} [props.width="match"] panel width 옵션
  * @param {DropdownMenuProps} [props.rootProps] Dropdown.Root 전달 props
@@ -44,9 +42,7 @@ const normalizeSelectedIdsByMode = (
 const DropdownTemplate = ({
   trigger,
   items,
-  selectedIds,
   onChange,
-  onSelect,
   size = "medium",
   width = "match",
   rootProps,
@@ -55,15 +51,7 @@ const DropdownTemplate = ({
   alt,
 }: DropdownTemplateProps) => {
   /**
-   * 1) 선택 상태 모드 결정
-   * - selectedIds prop이 들어오면 외부가 상태를 소유하는 controlled 모드다.
-   * - selectedIds prop이 없으면 Template 내부 state가 상태를 소유하는 uncontrolled 모드다.
-   * - 이 분기 기준은 렌더마다 동일해야 하므로 가장 먼저 계산한다.
-   */
-  const isSelectionControlled = selectedIds !== undefined;
-
-  /**
-   * 2) 선택 정책(single/multiple) 결정
+   * 1) 선택 정책(single/multiple) 결정
    * - item 중 하나라도 multiple=true이면 multiple 정책으로 해석한다.
    * - multiple 정책에서는 item id 배열 전체를 유지한다.
    * - single 정책에서는 언제나 최대 1개 id만 유지한다.
@@ -71,7 +59,7 @@ const DropdownTemplate = ({
   const isMultiple = items.some(item => item.multiple);
 
   /**
-   * 3) uncontrolled 초기 선택값 계산
+   * 2) 초기 선택값 계산
    * - source of truth: items[].selected
    * - multiple: selected=true인 모든 id를 초기값으로 사용한다.
    * - single: selected=true가 여러 개여도 첫 번째 id 하나만 사용한다.
@@ -86,9 +74,8 @@ const DropdownTemplate = ({
   }, [isMultiple, items]);
 
   /**
-   * 4) uncontrolled 내부 state 선언
-   * - controlled 모드에서는 이 state가 실제 화면 결정에 사용되지 않는다.
-   * - uncontrolled 모드에서는 이 state가 선택 결과의 단일 source가 된다.
+   * 3) 내부 선택 state 선언
+   * - Template은 items[].selected를 초기값으로 받아 내부 상태를 관리한다.
    * - 초기값은 selectedIdsFromItems를 그대로 사용한다.
    */
   const [uncontrolledSelectedIds, setUncontrolledSelectedIds] = useState<
@@ -96,19 +83,14 @@ const DropdownTemplate = ({
   >(() => selectedIdsFromItems);
 
   /**
-   * 5) options(items) 변경 동기화
-   * - controlled 모드에서는 외부 selectedIds를 신뢰해야 하므로 내부 state를 건드리지 않는다.
-   * - uncontrolled 모드에서는 내부 state를 items 변경에 맞춰 정합성 보정한다.
+   * 4) options(items) 변경 동기화
+   * - 내부 state를 items 변경에 맞춰 정합성 보정한다.
    *   1) 기존 선택 id 중 현재 items에 존재하는 id만 필터링한다.
    *   2) 유효 id가 남아 있으면 그대로 유지한다(single은 1개만 유지).
    *   3) 유효 id가 없으면 selectedIdsFromItems(초기 선택 규칙)로 재초기화한다.
    * - 이 effect는 외부 데이터 재조회/필터 변경 시 stale id를 자동 정리하는 역할을 한다.
    */
   useEffect(() => {
-    if (isSelectionControlled) {
-      return;
-    }
-
     setUncontrolledSelectedIds(previousSelectedIds => {
       const itemIdSet = new Set(items.map(item => item.id));
       const filteredIds = previousSelectedIds.filter(selectedId =>
@@ -128,38 +110,36 @@ const DropdownTemplate = ({
 
       return nextSelectedIds;
     });
-  }, [isMultiple, isSelectionControlled, items, selectedIdsFromItems]);
+  }, [isMultiple, items, selectedIdsFromItems]);
 
   /**
-   * 6) 최종 선택 id 계산
-   * - controlled: selectedIds prop을 그대로 사용한다(single은 첫 id만 허용).
-   * - uncontrolled: 내부 state(uncontrolledSelectedIds)를 그대로 사용한다.
+   * 5) 최종 선택 id 계산
+   * - 내부 state(uncontrolledSelectedIds)를 single/multiple 정책으로 정규화한다.
    * - 렌더/이벤트/selected 스타일 계산은 이 값만 참조한다.
    */
   const resolvedSelectedIds = normalizeSelectedIdsByMode(
-    isSelectionControlled ? (selectedIds ?? []) : uncontrolledSelectedIds,
+    uncontrolledSelectedIds,
     isMultiple,
   );
 
   /**
-   * 7) empty panel 분기
+   * 6) empty panel 분기
    * - item이 비어 있으면 alt 또는 기본 문구를 disabled item으로 렌더링한다.
    * - 별도 li를 만들지 않고 MenuItem을 재사용해 구조를 통일한다.
    */
   const hasItems = items.length > 0;
 
   /**
-   * 8) item 선택 처리
+   * 7) item 선택 처리
    * - 클릭된 item(id) 기준으로 다음 선택 배열을 계산한다.
    * - multiple: 토글(add/remove)
    * - single: 클릭한 id 하나로 교체
-   * - uncontrolled 모드면 내부 state를 즉시 반영한다.
+   * - 내부 state를 즉시 반영한다.
    * - onChange(payload)로 "현재 결과 전체"를 전달한다.
-   * - onSelect(item)은 하위호환을 위해 마지막에 유지 호출한다.
    */
   const handleItemSelect = (itemId: string) => {
     /**
-     * 8-1) 클릭된 item 조회
+     * 7-1) 클릭된 item 조회
      * - items 목록에 없는 id면 안전하게 종료한다.
      * - 외부 데이터 race 조건에서 방어적으로 동작하기 위한 가드다.
      */
@@ -170,7 +150,7 @@ const DropdownTemplate = ({
     }
 
     /**
-     * 8-2) 다음 selectedIds 계산
+     * 7-2) 다음 selectedIds 계산
      * - wasSelected: 토글 기준 값
      * - nextSelectedIds: 모드 정책을 적용한 다음 상태
      * - nextSelectedItems: payload 전달용 상세 데이터
@@ -186,16 +166,13 @@ const DropdownTemplate = ({
     );
 
     /**
-     * 8-3) 내부 state 업데이트(uncontrolled 전용)
-     * - controlled 모드에서는 외부 selectedIds prop이 곧 source of truth이므로
-     *   내부 state를 갱신하지 않는다.
+     * 7-3) 내부 state 업데이트
+     * - Template 내부 선택 상태를 즉시 반영한다.
      */
-    if (!isSelectionControlled) {
-      setUncontrolledSelectedIds(nextSelectedIds);
-    }
+    setUncontrolledSelectedIds(nextSelectedIds);
 
     /**
-     * 8-4) 신규 계약 이벤트(onChange)
+     * 7-4) 선택 결과 이벤트(onChange)
      * - 서비스/상위 컴포넌트가 선택 결과 전체를 즉시 사용할 수 있게
      *   현재 item + 선택 결과 배열을 함께 제공한다.
      */
@@ -206,17 +183,10 @@ const DropdownTemplate = ({
       selectedItems: nextSelectedItems,
       multiple: isMultiple,
     });
-
-    /**
-     * 8-5) legacy 계약 이벤트(onSelect)
-     * - 하위호환 경로를 유지하기 위해 onChange 이후 동일 선택을 전달한다.
-     * - 추후 마이그레이션 완료 시 제거 대상이다.
-     */
-    onSelect?.(currentItem);
   };
 
   /**
-   * 9) 렌더 구성
+   * 8) 렌더 구성
    * - Root → Trigger → Container → MenuList depth를 유지한다.
    * - 각 item은 resolvedSelectedIds 기준으로 selected 스타일을 결정한다.
    * - disabled item은 select 이벤트를 차단하고 상태만 노출한다.

package/src/components/dropdown/styles/dropdown.scss

@@ -1,39 +1,60 @@
 .dropdown-panel {
   display: flex;
   flex-direction: column;
-  gap: var(--dropdown-panel-gap);
-  padding: var(--dropdown-panel-padding);
-  border-radius: var(--dropdown-panel-radius);
+  gap: var(--dropdown-panel-gap-selected);
+  padding: var(--dropdown-panel-padding-selected);
+  border-radius: var(--dropdown-panel-radius-selected);
   border: 1px solid var(--dropdown-panel-border-color);
   background-color: var(--dropdown-panel-background);
-  box-shadow: var(--dropdown-panel-shadow);
+  box-shadow: var(--dropdown-panel-shadow-selected);
   max-height: var(--dropdown-panel-max-height);
   overflow-y: auto;
 }
 
+.dropdown-panel-xsmall {
+  --dropdown-option-height-selected: var(--dropdown-option-height-xsmall);
+  --dropdown-text-size-selected: var(--dropdown-text-xsmall-size);
+  --dropdown-text-line-height-selected: var(--dropdown-text-xsmall-line-height);
+  --dropdown-text-letter-spacing-selected: var(
+    --dropdown-text-xsmall-letter-spacing
+  );
+  --dropdown-option-padding-inline-selected: var(
+    --dropdown-option-padding-inline-xsmall
+  );
+  --dropdown-option-padding-block-selected: var(
+    --dropdown-option-padding-block-xsmall
+  );
+  --dropdown-option-radius-selected: var(--dropdown-option-radius-xsmall);
+  --dropdown-panel-padding-selected: var(--dropdown-panel-padding-xsmall);
+  --dropdown-panel-gap-selected: var(--dropdown-panel-gap-xsmall);
+  --dropdown-panel-radius-selected: var(--dropdown-panel-radius-xsmall);
+  --dropdown-panel-shadow-selected: var(--dropdown-panel-shadow-xsmall);
+  --dropdown-text-weight-selected: var(--dropdown-text-weight-selected-xsmall);
+}
+
 .dropdown-panel-small {
-  --dropdown-option-height-current: var(--dropdown-option-height-small);
-  --dropdown-text-size-current: var(--dropdown-text-small-size);
-  --dropdown-text-line-height-current: var(--dropdown-text-small-line-height);
-  --dropdown-text-letter-spacing-current: var(
+  --dropdown-option-height-selected: var(--dropdown-option-height-small);
+  --dropdown-text-size-selected: var(--dropdown-text-small-size);
+  --dropdown-text-line-height-selected: var(--dropdown-text-small-line-height);
+  --dropdown-text-letter-spacing-selected: var(
     --dropdown-text-small-letter-spacing
   );
 }
 
 .dropdown-panel-medium {
-  --dropdown-option-height-current: var(--dropdown-option-height-medium);
-  --dropdown-text-size-current: var(--dropdown-text-medium-size);
-  --dropdown-text-line-height-current: var(--dropdown-text-medium-line-height);
-  --dropdown-text-letter-spacing-current: var(
+  --dropdown-option-height-selected: var(--dropdown-option-height-medium);
+  --dropdown-text-size-selected: var(--dropdown-text-medium-size);
+  --dropdown-text-line-height-selected: var(--dropdown-text-medium-line-height);
+  --dropdown-text-letter-spacing-selected: var(
     --dropdown-text-medium-letter-spacing
   );
 }
 
 .dropdown-panel-large {
-  --dropdown-option-height-current: var(--dropdown-option-height-large);
-  --dropdown-text-size-current: var(--dropdown-text-large-size);
-  --dropdown-text-line-height-current: var(--dropdown-text-large-line-height);
-  --dropdown-text-letter-spacing-current: var(
+  --dropdown-option-height-selected: var(--dropdown-option-height-large);
+  --dropdown-text-size-selected: var(--dropdown-text-large-size);
+  --dropdown-text-line-height-selected: var(--dropdown-text-large-line-height);
+  --dropdown-text-letter-spacing-selected: var(
     --dropdown-text-large-letter-spacing
   );
 }
@@ -61,12 +82,12 @@
   gap: var(--dropdown-option-gap-inline);
   width: 100%;
   min-height: var(
-    --dropdown-option-height-current,
+    --dropdown-option-height-selected,
     var(--dropdown-option-height-medium)
   );
-  padding: var(--dropdown-option-padding-block)
-    var(--dropdown-option-padding-inline);
-  border-radius: var(--dropdown-option-radius);
+  padding: var(--dropdown-option-padding-block-selected)
+    var(--dropdown-option-padding-inline-selected);
+  border-radius: var(--dropdown-option-radius-selected);
   background-color: transparent;
   color: var(--dropdown-option-color);
   cursor: pointer;
@@ -132,15 +153,15 @@
   min-width: 0;
   color: inherit;
   font-size: var(
-    --dropdown-text-size-current,
+    --dropdown-text-size-selected,
     var(--dropdown-text-medium-size)
   );
   line-height: var(
-    --dropdown-text-line-height-current,
+    --dropdown-text-line-height-selected,
     var(--dropdown-text-medium-line-height)
   );
   letter-spacing: var(
-    --dropdown-text-letter-spacing-current,
+    --dropdown-text-letter-spacing-selected,
     var(--dropdown-text-medium-letter-spacing)
   );
   font-weight: var(--dropdown-text-weight);

package/src/components/dropdown/styles/variables.scss

@@ -6,11 +6,27 @@
   --dropdown-panel-padding: var(--spacing-padding-3);
   --dropdown-panel-gap: var(--spacing-gap-2);
   --dropdown-panel-max-height: 32rem;
+  --dropdown-panel-radius-selected: var(--dropdown-panel-radius);
+  --dropdown-panel-shadow-selected: var(--dropdown-panel-shadow);
+  --dropdown-panel-padding-selected: var(--dropdown-panel-padding);
+  --dropdown-panel-gap-selected: var(--dropdown-panel-gap);
+  --dropdown-panel-radius-xsmall: var(--theme-radius-medium-2);
+  --dropdown-panel-shadow-xsmall: 2px 2px 8px rgba(0, 0, 0, 0.05);
+  --dropdown-panel-padding-xsmall: var(--spacing-padding-4)
+    var(--spacing-padding-3);
+  --dropdown-panel-gap-xsmall: var(--spacing-gap-2);
 
   --dropdown-option-radius: var(--theme-radius-medium-1);
   --dropdown-option-gap-inline: var(--spacing-gap-3);
   --dropdown-option-padding-inline: var(--spacing-padding-6);
   --dropdown-option-padding-block: var(--spacing-padding-2);
+  --dropdown-option-radius-selected: var(--dropdown-option-radius);
+  --dropdown-option-padding-inline-selected: var(
+    --dropdown-option-padding-inline
+  );
+  --dropdown-option-padding-block-selected: var(
+    --dropdown-option-padding-block
+  );
   --dropdown-option-color: var(--color-label-standard);
   --dropdown-option-color-hover: var(--color-label-strong);
   --dropdown-option-color-selected: var(--color-primary-default);
@@ -22,6 +38,9 @@
   --dropdown-text-small-size: 15px;
   --dropdown-text-small-line-height: 24px;
   --dropdown-text-small-letter-spacing: 0;
+  --dropdown-text-xsmall-size: 12px;
+  --dropdown-text-xsmall-line-height: 18px;
+  --dropdown-text-xsmall-letter-spacing: 0;
   --dropdown-text-medium-size: 16px;
   --dropdown-text-medium-line-height: 24px;
   --dropdown-text-medium-letter-spacing: 0;
@@ -34,7 +53,13 @@
   --dropdown-description-size: 14px;
   --dropdown-description-line-height: 22px;
 
+  --dropdown-option-height-selected: var(--dropdown-option-height-medium);
+  --dropdown-option-height-xsmall: 24px;
   --dropdown-option-height-small: var(--theme-size-medium-1, 40px);
   --dropdown-option-height-medium: var(--theme-size-medium-2, 48px);
   --dropdown-option-height-large: var(--theme-size-medium-3, 56px);
+  --dropdown-option-padding-inline-xsmall: var(--spacing-padding-3);
+  --dropdown-option-padding-block-xsmall: 0px;
+  --dropdown-option-radius-xsmall: 4px;
+  --dropdown-text-weight-selected-xsmall: var(--dropdown-text-weight);
 }

package/src/components/dropdown/types/base.ts

@@ -1,8 +1,8 @@
 /**
  * Dropdown size scale
- * @typedef {"small" | "medium" | "large"} DropdownSize
+ * @typedef {"xsmall" | "small" | "medium" | "large"} DropdownSize
  */
-export type DropdownSize = "small" | "medium" | "large";
+export type DropdownSize = "xsmall" | "small" | "medium" | "large";
 
 /**
  * Dropdown panel width 옵션

package/src/components/dropdown/types/props.ts

@@ -167,9 +167,7 @@ export interface DropdownTemplateChangePayload {
  * Dropdown template props
  * @property {ReactNode} trigger trigger 요소
  * @property {DropdownTemplateItem[]} items 렌더링할 menu item 리스트
- * @property {string[]} [selectedIds] 선택된 item id 배열
  * @property {(payload: DropdownTemplateChangePayload) => void} [onChange] 선택 결과 변경 콜백
- * @property {(item: DropdownTemplateItem) => void} [onSelect] item 선택 콜백
  * @property {DropdownSize} [size="medium"] surface height scale
  * @property {DropdownPanelWidth} [width="match"] panel width 옵션
  * @property {DropdownMenuProps} [rootProps] Root 에 전달할 props
@@ -180,20 +178,10 @@ export interface DropdownTemplateChangePayload {
 export interface DropdownTemplateProps {
   trigger: ReactNode;
   items: DropdownTemplateItem[];
-  /**
-   * 선택된 item id 배열
-   * @deprecated onChange + items[].selected 기반 계약을 우선 사용한다.
-   */
-  selectedIds?: string[];
   /**
    * 선택 결과 변경 콜백
    */
   onChange?: (payload: DropdownTemplateChangePayload) => void;
-  /**
-   * item 선택 콜백
-   * @deprecated onChange로 대체되며 하위호환을 위해 유지된다.
-   */
-  onSelect?: (item: DropdownTemplateItem) => void;
   size?: DropdownSize;
   width?: DropdownPanelWidth;
   /**

package/src/components/select/hooks/interaction.ts

@@ -13,7 +13,7 @@ import type {
  * @param {UseSelectDropdownOpenStateParams} params open 제어 옵션
  * @param {boolean} [params.open] 외부 제어형 open 상태
  * @param {boolean} [params.defaultOpen] 비제어형 초기 open 상태
- * @param {(open: boolean) => void} [params.onOpenChange] open 상태 변경 콜백
+ * @param {(open: boolean) => void} [params.onOpen] open 상태 변경 콜백
  * @returns {{
  *   open: boolean;
  *   setOpen: (next: boolean) => void;
@@ -23,13 +23,13 @@ import type {
  * const { open, setOpen } = useSelectDropdownOpenState({
  *   open: controlledOpen,
  *   defaultOpen: false,
- *   onOpenChange: onOpenChangeHandler,
+ *   onOpen: onOpenHandler,
  * });
  */
 export const useSelectDropdownOpenState = ({
   open,
   defaultOpen,
-  onOpenChange,
+  onOpen,
 }: UseSelectDropdownOpenStateParams): UseSelectDropdownOpenStateReturn => {
   // 1) 제어형/비제어형 분기 기준을 먼저 확정한다.
   const isControlled = useMemo(() => typeof open === "boolean", [open]);
@@ -53,9 +53,9 @@ export const useSelectDropdownOpenState = ({
     (nextOpen: boolean) => {
       if (!isControlled) setUncontrolledOpen(nextOpen);
 
-      onOpenChange?.(nextOpen);
+      onOpen?.(nextOpen);
     },
-    [isControlled, onOpenChange],
+    [isControlled, onOpen],
   );
 
   return { open: resolvedOpen, setOpen, isControlled };

package/src/components/select/img/chevron/primary/xsmall.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.17139 6L6.99981 8.82843L9.82824 6" stroke="#BCBEC2" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>