@uniai-fe/uds-primitives 0.3.6 → 0.3.8

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

@@ -2,6 +2,7 @@
   /* Layout presets */
   --input-width: 100%;
   --input-flex: 0 1 auto;
+  --input-layout-gap: var(--spacing-gap-3);
 
   /* Input sizing tokens; Button 변수 규칙과 동일한 prefix 패턴을 맞춘다. */
   --input-default-height-small: var(--theme-size-medium-1);
@@ -10,10 +11,16 @@
   --input-tertiary-height-base: calc(var(--theme-size-medium-2) + 24px);
   --input-default-padding-inline: var(--spacing-padding-6);
   --input-default-padding-block: var(--spacing-padding-4);
+  --input-secondary-padding-block: var(--spacing-padding-4);
   --input-default-gap: var(--spacing-gap-4);
+  --input-affix-gap: var(--spacing-gap-3);
+  --input-utility-gap: var(--spacing-gap-2);
+  --input-tertiary-row-gap: var(--spacing-gap-1);
+  --input-tertiary-control-row-gap: var(--spacing-gap-1);
   --input-default-radius-base: var(--theme-radius-large-1);
   --input-tertiary-radius-base: var(--theme-radius-large-2);
   --input-table-radius-base: 0;
+  --input-tertiary-element-min-height: var(--theme-size-medium-2);
   --input-table-text-small-size: var(--font-body-xxsmall-size);
   --input-table-text-small-line-height: var(--font-body-xxsmall-line-height);
   --input-table-text-small-weight: var(--font-body-xxsmall-weight);
@@ -28,14 +35,27 @@
   --input-label-color: var(--color-label-standard);
   --input-label-accent-color: var(--color-primary-default);
   --input-label-error-color: var(--color-error);
+  --input-label-font-size: var(--font-label-small-size);
+  --input-label-line-height: var(--font-label-small-line-height);
+  --input-label-font-weight: var(--font-label-small-weight);
   --input-helper-color: var(--color-label-neutral);
   --input-helper-success-color: var(--color-success);
   --input-helper-error-color: var(--color-error);
   --input-helper-disabled-color: var(--color-label-disabled);
+  --input-helper-font-size: var(--font-label-small-size);
+  --input-helper-line-height: var(--font-label-small-line-height);
 
   /* Text & placeholder colors */
   --input-text-color: var(--color-label-strong);
+  --input-text-readonly-color: var(--color-label-strong);
+  --input-text-disabled-color: var(--color-label-disabled);
   --input-placeholder-color: var(--color-label-alternative);
+  --input-placeholder-disabled-color: var(--color-label-disabled);
+  --input-placeholder-readonly-color: var(--input-placeholder-disabled-color);
+  --input-font-size: var(--font-body-medium-size);
+  --input-line-height: var(--font-body-medium-line-height);
+  --input-font-weight: 400;
+  --input-letter-spacing: 0px;
 
   /* Border tokens */
   --input-border-color: var(--color-border-standard-cool-gray);
@@ -44,6 +64,8 @@
   --input-border-active-color: var(--color-blue-80);
   --input-border-success-color: var(--color-blue-80);
   --input-border-table-default-color: transparent;
+  --input-border-table-disabled-color: var(--input-border-table-default-color);
+  --input-border-table-readonly-color: var(--input-border-table-disabled-color);
   /* error는 Figma 44% alpha */
   --input-border-error-color: rgba(218, 29, 11, 0.44); // --color-feedback-error
   --input-border-disabled-color: var(--color-border-standard-cool-gray);
@@ -53,4 +75,14 @@
   --input-surface-color: var(--color-common-100);
   --input-surface-muted-color: var(--color-neutral-99);
   --input-surface-disabled-color: var(--color-neutral-95);
+  --input-table-surface-color: transparent;
+  --input-table-surface-disabled-color: var(--input-table-surface-color);
+  --input-table-surface-readonly-color: var(
+    --input-table-surface-disabled-color
+  );
+  --input-secondary-surface-color: transparent;
+
+  /* Status/affix colors */
+  --input-status-error-color: var(--color-error);
+  --input-status-success-color: var(--color-primary-default);
 }

package/src/components/select/markup/Default.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import clsx from "clsx";
-import { forwardRef } from "react";
+import { forwardRef, useEffect, useMemo, useState } from "react";
 
 import type { DropdownSize } from "../../dropdown/types";
 import { Dropdown } from "../../dropdown/markup";
@@ -11,12 +11,20 @@ import { useSelectDropdownOpenState } from "../hooks";
 import type { SelectDropdownOption } from "../types/option";
 import type { SelectDefaultComponentProps } from "../types/props";
 
+const isSameIdList = (previousIds: string[], nextIds: string[]) =>
+  previousIds.length === nextIds.length &&
+  previousIds.every((selectedId, index) => selectedId === nextIds[index]);
+
+const normalizeSingleSelectedIds = (selectedIds: string[]) =>
+  selectedIds.length > 0 ? [selectedIds[0]] : [];
+
 /**
  * Select default trigger; 단일 선택 드롭다운을 렌더링한다.
  * @component
  * @param {SelectDefaultComponentProps} props default trigger props
  * @param {SelectDropdownOption[]} [props.options] dropdown option 목록
  * @param {string[]} [props.selectedOptionIds] 선택된 option id 리스트
+ * @param {(payload: SelectOptionChangePayload) => void} [props.onChange] 선택 결과 변경 콜백
  * @param {(option: SelectDropdownOption) => void} [props.onOptionSelect] option 선택 콜백
  * @param {"primary" | "secondary" | "table"} [props.priority="primary"] priority 스케일
  * @param {"small" | "medium" | "large"} [props.size="medium"] size 스케일
@@ -24,6 +32,7 @@ import type { SelectDefaultComponentProps } from "../types/props";
  * @param {boolean} [props.block] block 여부
  * @param {FormFieldWidth} [props.width] container width preset
  * @param {boolean} [props.disabled] disabled 여부
+ * @param {boolean} [props.readOnly] readOnly 여부
  * @param {SelectTriggerButtonType} [props.buttonType] trigger button type
  * @param {"small" | "medium" | "large"} [props.dropdownSize] dropdown panel size
  * @param {"match" | "fit-content" | "max-content" | string | number} [props.dropdownWidth="match"] dropdown panel width
@@ -48,9 +57,11 @@ const SelectDefault = forwardRef<HTMLElement, SelectDefaultComponentProps>(
       width,
       isOpen,
       disabled,
+      readOnly,
       buttonType,
       options = [],
       selectedOptionIds,
+      onChange,
       onOptionSelect,
       dropdownSize,
       dropdownWidth = "match",
@@ -65,37 +76,209 @@ const SelectDefault = forwardRef<HTMLElement, SelectDefaultComponentProps>(
     },
     ref,
   ) => {
-    // 변경: table priority는 width 미지정 시 기본 full width를 사용한다.
+    /**
+     * 1) 레이아웃 기본값 계산
+     * - table priority는 셀 컨텍스트에서 full width가 기본 동작이므로
+     *   width 미지정 시 block=true처럼 동작하도록 보정한다.
+     * - 이 값은 trigger/container 양쪽에서 동일하게 사용한다.
+     */
     const resolvedBlock =
       block || (priority === "table" && width === undefined);
-    const resolvedSelectedIds = selectedOptionIds ?? [];
 
+    /**
+     * 2) 선택 상태 모드 결정
+     * - selectedOptionIds prop이 들어오면 controlled 모드(외부가 source of truth)
+     * - selectedOptionIds prop이 없으면 uncontrolled 모드(내부 state가 source of truth)
+     */
+    const isSelectionControlled = selectedOptionIds !== undefined;
+
+    /**
+     * 3) option 조회 최적화 맵 생성
+     * - 옵션 탐색(find/filter) 반복을 줄이기 위해 id 기반 맵을 만든다.
+     * - display label 계산, payload selectedOptions 계산, 렌더 시 선택 확인에 재사용한다.
+     */
+    const optionMap = useMemo(
+      () => new Map(options.map(option => [option.id, option])),
+      [options],
+    );
+
+    /**
+     * 4) uncontrolled 초기 선택값 계산
+     * - options[].selected를 초기 선택 입력으로 사용한다.
+     * - single-select이므로 selected=true가 여러 개여도 첫 id 하나만 채택한다.
+     */
+    const selectedIdsFromOptions = useMemo(() => {
+      const initialSelectedIds = options
+        .filter(option => option.selected)
+        .map(option => option.id);
+      return normalizeSingleSelectedIds(initialSelectedIds);
+    }, [options]);
+
+    /**
+     * 5) uncontrolled 내부 state 선언
+     * - controlled 모드에서는 실제 UI source로 쓰이지 않는다.
+     * - uncontrolled 모드에서는 최종 선택 id를 내부 state가 소유한다.
+     */
+    const [uncontrolledSelectedOptionIds, setUncontrolledSelectedOptionIds] =
+      useState<string[]>(() => selectedIdsFromOptions);
+
+    /**
+     * 6) options 변경 시 내부 state 정합성 보정(uncontrolled 전용)
+     * - controlled 모드는 외부 selectedOptionIds를 신뢰하므로 내부 state를 건드리지 않는다.
+     * - uncontrolled 모드는 옵션 리스트가 바뀌면 stale id를 정리해야 한다.
+     *   1) 기존 선택 id가 현재 options에 존재하는지 필터링
+     *   2) 남아 있으면 single 정책으로 첫 id 하나만 유지
+     *   3) 남지 않으면 selectedIdsFromOptions(초기 선택 규칙)로 재동기화
+     */
+    useEffect(() => {
+      if (isSelectionControlled) {
+        return;
+      }
+
+      setUncontrolledSelectedOptionIds(previousSelectedIds => {
+        const optionIdSet = new Set(options.map(option => option.id));
+        const filteredIds = previousSelectedIds.filter(selectedId =>
+          optionIdSet.has(selectedId),
+        );
+        const nextCandidateIds =
+          filteredIds.length > 0 ? filteredIds : selectedIdsFromOptions;
+        const nextSelectedIds = normalizeSingleSelectedIds(nextCandidateIds);
+
+        // 선택 결과가 동일하면 기존 배열 참조를 유지해 effect 루프를 방지한다.
+        if (isSameIdList(previousSelectedIds, nextSelectedIds)) {
+          return previousSelectedIds;
+        }
+
+        return nextSelectedIds;
+      });
+    }, [isSelectionControlled, options, selectedIdsFromOptions]);
+
+    /**
+     * 7) 최종 선택 id 계산
+     * - controlled: selectedOptionIds를 우선 사용
+     * - uncontrolled: 내부 state를 사용
+     * - single-select invariant 보장을 위해 항상 최대 1개 id만 반환한다.
+     */
+    const resolvedSelectedIds = useMemo(() => {
+      const sourceIds = isSelectionControlled
+        ? (selectedOptionIds ?? [])
+        : uncontrolledSelectedOptionIds;
+      return normalizeSingleSelectedIds(sourceIds);
+    }, [
+      isSelectionControlled,
+      selectedOptionIds,
+      uncontrolledSelectedOptionIds,
+    ]);
+    const selectedIdSet = useMemo(
+      () => new Set(resolvedSelectedIds),
+      [resolvedSelectedIds],
+    );
+
+    /**
+     * 8) 표시 라벨 계산
+     * - 외부 displayLabel이 있으면 최우선 사용
+     * - 없으면 현재 선택 id 기준으로 optionMap에서 label을 조회한다.
+     * - optionMap을 사용해 O(1) 조회로 단순화한다.
+     */
     const resolvedDisplayLabel =
       displayLabel ??
       (resolvedSelectedIds.length > 0
-        ? options.find(option => option.id === resolvedSelectedIds[0])?.label
+        ? optionMap.get(resolvedSelectedIds[0])?.label
         : undefined);
 
+    /**
+     * 9) placeholder/label 표시 상태 계산
+     * - null/undefined/빈 문자열이면 placeholder로 간주한다.
+     */
     const hasLabel =
       resolvedDisplayLabel !== undefined &&
       resolvedDisplayLabel !== null &&
       resolvedDisplayLabel !== "";
 
+    /**
+     * 10) dropdown open 상태 관리
+     * - open/defaultOpen/onOpenChange 계약은 기존 useSelectDropdownOpenState를 그대로 사용한다.
+     * - 내부 state와 controlled open 상태를 동시에 지원한다.
+     */
     const { open: dropdownOpen, setOpen } = useSelectDropdownOpenState({
       open: open ?? isOpen,
       defaultOpen,
       onOpenChange,
     });
-    // 변경: outside close는 Radix onOpenChange 기본 동작을 사용한다.
 
+    /**
+     * 11) 상호작용 차단 조건 계산
+     * - disabled/readOnly일 때는 open 토글과 option select를 모두 차단한다.
+     */
+    const isInteractionBlocked = disabled || readOnly;
+
+    /**
+     * 12) open 상태 변경 핸들러
+     * - 차단 상태면 강제로 닫힘(false) 유지
+     * - 허용 상태면 전달받은 nextOpen 반영
+     */
+    const handleOpenChange = (nextOpen: boolean) => {
+      if (isInteractionBlocked) {
+        setOpen(false);
+        return;
+      }
+      setOpen(nextOpen);
+    };
+
+    /**
+     * 13) option 선택 처리(single)
+     * - single-select 정책: 클릭된 option 하나를 최종 선택값으로 고정
+     * - uncontrolled 모드면 내부 state 갱신
+     * - onChange(payload)로 현재 선택 결과 전체를 전달
+     * - legacy onOptionSelect는 하위호환으로 유지
+     */
     const handleOptionSelect = (option: SelectDropdownOption) => {
+      if (isInteractionBlocked) {
+        return;
+      }
+
+      const nextSelectedOptionIds = [option.id];
+      const nextSelectedOptions = nextSelectedOptionIds
+        .map(selectedOptionId => optionMap.get(selectedOptionId))
+        .filter(
+          (
+            selectedOption,
+          ): selectedOption is NonNullable<typeof selectedOption> =>
+            Boolean(selectedOption),
+        );
+
+      if (!isSelectionControlled) {
+        setUncontrolledSelectedOptionIds(nextSelectedOptionIds);
+      }
+
+      onChange?.({
+        mode: "single",
+        selectedOptionIds: nextSelectedOptionIds,
+        selectedValues: nextSelectedOptions.map(
+          selectedOption => selectedOption.value,
+        ),
+        selectedOptions: nextSelectedOptions,
+        currentOption: option,
+        isSelected: true,
+      });
+
       onOptionSelect?.(option);
       setOpen(false);
     };
 
+    /**
+     * 14) dropdown 패널 렌더링 파생값
+     * - panelSize: trigger size와 동일 축을 기본으로 사용
+     * - hasOptions: empty 상태 분기
+     */
     const panelSize = (dropdownSize ?? size) as DropdownSize;
     const hasOptions = options.length > 0;
 
+    /**
+     * 15) 렌더
+     * - Container → Dropdown.Root → Trigger → Container → Menu.List depth 유지
+     * - empty 상태는 별도 구조를 만들지 않고 Dropdown.Menu.Item을 disabled로 재사용
+     */
     return (
       <Container
         className={clsx("select-trigger-container", className)}
@@ -104,7 +287,7 @@ const SelectDefault = forwardRef<HTMLElement, SelectDefaultComponentProps>(
       >
         <Dropdown.Root
           open={dropdownOpen}
-          onOpenChange={setOpen}
+          onOpenChange={handleOpenChange}
           modal={false}
           {...dropdownRootProps}
         >
@@ -118,6 +301,7 @@ const SelectDefault = forwardRef<HTMLElement, SelectDefaultComponentProps>(
               block={resolvedBlock}
               open={dropdownOpen}
               disabled={disabled}
+              readOnly={readOnly}
               buttonType={buttonType}
               {...rest}
             >
@@ -146,7 +330,7 @@ const SelectDefault = forwardRef<HTMLElement, SelectDefaultComponentProps>(
                       left={option.left}
                       right={option.right}
                       multiple={Boolean(option.multiple)}
-                      isSelected={resolvedSelectedIds.includes(option.id)}
+                      isSelected={selectedIdSet.has(option.id)}
                       onSelect={event => {
                         if (option.disabled) {
                           event.preventDefault();

package/src/components/select/markup/foundation/Base.tsx

@@ -18,6 +18,7 @@ import type { SelectTriggerBaseProps } from "../../types/trigger";
  * @param {boolean} [props.block=false] block 레이아웃 여부
  * @param {boolean} [props.multiple=false] multi select 여부
  * @param {boolean} [props.disabled=false] disabled 여부
+ * @param {boolean} [props.readOnly=false] readOnly 여부
  * @param {ElementType} [props.as="button"] polymorphic 태그
  * @param {"button" | "submit" | "reset"} [props.buttonType="button"] native button type
  * @param {string} [props.className] trigger className
@@ -37,6 +38,7 @@ const SelectTriggerBase = forwardRef<HTMLElement, SelectTriggerBaseProps>(
       block = false,
       multiple = false,
       disabled = false,
+      readOnly = false,
       as = "button",
       buttonType = "button",
       className,
@@ -46,6 +48,7 @@ const SelectTriggerBase = forwardRef<HTMLElement, SelectTriggerBaseProps>(
     ref,
   ) => {
     const Icon = SelectIcon.Chevron[priority][size];
+    const resolvedState = disabled || readOnly ? "disabled" : state;
     const {
       ["aria-haspopup"]: ariaHasPopup,
       ["aria-expanded"]: ariaExpanded,
@@ -56,10 +59,13 @@ const SelectTriggerBase = forwardRef<HTMLElement, SelectTriggerBaseProps>(
       className: clsx("select-button", className),
       "data-priority": priority,
       "data-size": size,
-      "data-state": state,
+      // 변경: readOnly도 disabled와 동일한 시각 상태를 사용하고 텍스트 컬러만 별도 스타일로 분리한다.
+      "data-state": resolvedState,
+      "data-readonly": readOnly ? "true" : undefined,
       "data-open": open || undefined,
       "data-multiple": multiple || undefined,
       "data-block": block ? "true" : undefined,
+      "aria-readonly": readOnly ? "true" : undefined,
       "aria-haspopup": ariaHasPopup ?? "listbox",
       "aria-expanded": ariaExpanded ?? open,
       ...restProps,