@uniai-fe/uds-primitives 0.3.25 → 0.3.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniai-fe/uds-primitives",
-  "version": "0.3.25",
+  "version": "0.3.26",
   "description": "UNIAI Design System; Primitives Components Package",
   "type": "module",
   "private": false,

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

@@ -1,7 +1,7 @@
 "use client";
 
 import clsx from "clsx";
-import { forwardRef, useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import type { ReactNode } from "react";
 
 import { Dropdown } from "../../dropdown/markup";
@@ -62,270 +62,260 @@ const SELECT_CUSTOM_OPTION_VALUE = "CUSTOM";
  *   placeholder="품목을 선택하세요"
  * />
  */
-const SelectDefault = forwardRef<HTMLElement, SelectDefaultComponentProps>(
-  (
-    {
-      className,
-      displayLabel,
-      placeholder,
-      priority = "primary",
-      size = "medium",
-      state = "default",
-      block,
-      width,
-      disabled,
-      readOnly,
-      buttonType,
-      items,
-      onSelectOption,
-      onSelectChange,
-      dropdownOptions,
-      open,
-      defaultOpen,
-      onOpen,
-      triggerProps,
-      register,
-      customRegister,
-      customOptions,
-      inputProps,
-    },
-    ref,
-  ) => {
-    // 1) table priority + width 미지정 조합에서는 block을 기본 동작으로 사용한다.
-    const resolvedBlock =
-      block || (priority === "table" && width === undefined);
-    // 1-1) xsmall은 primary 전용이므로 secondary/table에서는 small로 fallback한다.
-    const resolvedSize =
-      priority !== "primary" && size === "xsmall" ? "small" : size;
-
-    // 2) custom mode의 입력값은 내부 state로 유지한다.
-    const [customLabelValue, setCustomLabelValue] = useState("");
-
-    // 3) custom option id가 기존 item id와 충돌하지 않도록 안전한 id를 만든다.
-    const customOptionId = useMemo(() => {
-      const existingIdSet = new Set(items.map(option => option.id));
-      if (!existingIdSet.has(SELECT_CUSTOM_OPTION_BASE_ID)) {
-        return SELECT_CUSTOM_OPTION_BASE_ID;
-      }
-
-      let offset = 1;
-      let nextId = `${SELECT_CUSTOM_OPTION_BASE_ID}_${offset}`;
-      while (existingIdSet.has(nextId)) {
-        offset += 1;
-        nextId = `${SELECT_CUSTOM_OPTION_BASE_ID}_${offset}`;
+export function SelectDefault<OptionData = unknown>({
+  className,
+  displayLabel,
+  placeholder,
+  priority = "primary",
+  size = "medium",
+  state = "default",
+  block,
+  width,
+  disabled,
+  readOnly,
+  buttonType,
+  items,
+  onSelectOption,
+  onSelectChange,
+  dropdownOptions,
+  open,
+  defaultOpen,
+  onOpen,
+  triggerProps,
+  register,
+  customRegister,
+  customOptions,
+  inputProps,
+}: SelectDefaultComponentProps<OptionData>) {
+  // 1) table priority + width 미지정 조합에서는 block을 기본 동작으로 사용한다.
+  const resolvedBlock = block || (priority === "table" && width === undefined);
+  // 1-1) xsmall은 primary 전용이므로 secondary/table에서는 small로 fallback한다.
+  const resolvedSize =
+    priority !== "primary" && size === "xsmall" ? "small" : size;
+
+  // 2) custom mode의 입력값은 내부 state로 유지한다.
+  const [customLabelValue, setCustomLabelValue] = useState("");
+
+  // 3) custom option id가 기존 item id와 충돌하지 않도록 안전한 id를 만든다.
+  const customOptionId = useMemo(() => {
+    const existingIdSet = new Set(items.map(option => option.id));
+    if (!existingIdSet.has(SELECT_CUSTOM_OPTION_BASE_ID)) {
+      return SELECT_CUSTOM_OPTION_BASE_ID;
+    }
+
+    let offset = 1;
+    let nextId = `${SELECT_CUSTOM_OPTION_BASE_ID}_${offset}`;
+    while (existingIdSet.has(nextId)) {
+      offset += 1;
+      nextId = `${SELECT_CUSTOM_OPTION_BASE_ID}_${offset}`;
+    }
+    return nextId;
+  }, [items]);
+
+  // 4) customOptions가 있으면 dropdown 마지막에 "직접 입력" 항목을 주입한다.
+  const mergedOptions = useMemo<SelectDropdownOption<OptionData>[]>(() => {
+    if (!customOptions) {
+      return items;
+    }
+
+    return [
+      ...items,
+      {
+        id: customOptionId,
+        value: SELECT_CUSTOM_OPTION_VALUE,
+        label: customOptions.optionName ?? "직접 입력",
+        // 변경 설명: custom option sentinel은 id/value로만 판별해 OptionData 제네릭을 오염시키지 않는다.
+      } satisfies SelectDropdownOption<OptionData>,
+    ];
+  }, [customOptionId, customOptions, items]);
+
+  // 5) 선택 id로 option을 즉시 조회할 수 있도록 map을 만든다.
+  const optionMap = useMemo(
+    () => new Map(mergedOptions.map(option => [option.id, option])),
+    [mergedOptions],
+  );
+
+  // 6) uncontrolled 초기 선택값은 items[].selected의 첫 번째 항목만 사용한다.
+  const selectedIdsFromItems = useMemo(() => {
+    const initialSelectedIds = items
+      .filter(option => option.selected)
+      .map(option => option.id);
+    return normalizeSingleSelectedIds(initialSelectedIds);
+  }, [items]);
+
+  // 7) 내부 선택 state를 선언한다.
+  const [selectedOptionIds, setSelectedOptionIds] = useState<string[]>(
+    () => selectedIdsFromItems,
+  );
+
+  // 8) 외부 items 변경 시 동일 규칙으로 내부 선택 state를 재동기화한다.
+  useEffect(() => {
+    setSelectedOptionIds(previousSelectedIds => {
+      if (isSameIdList(previousSelectedIds, selectedIdsFromItems)) {
+        return previousSelectedIds;
       }
-      return nextId;
-    }, [items]);
-
-    // 4) customOptions가 있으면 dropdown 마지막에 "직접 입력" 항목을 주입한다.
-    const mergedOptions = useMemo(() => {
-      if (!customOptions) {
-        return items;
-      }
-
-      return [
-        ...items,
-        {
-          id: customOptionId,
-          value: SELECT_CUSTOM_OPTION_VALUE,
-          label: customOptions.optionName ?? "직접 입력",
-          data: { isCustomInput: true },
-        } satisfies SelectDropdownOption,
-      ];
-    }, [customOptionId, customOptions, items]);
-
-    // 5) 선택 id로 option을 즉시 조회할 수 있도록 map을 만든다.
-    const optionMap = useMemo(
-      () => new Map(mergedOptions.map(option => [option.id, option])),
-      [mergedOptions],
-    );
-
-    // 6) uncontrolled 초기 선택값은 items[].selected의 첫 번째 항목만 사용한다.
-    const selectedIdsFromItems = useMemo(() => {
-      const initialSelectedIds = items
-        .filter(option => option.selected)
-        .map(option => option.id);
-      return normalizeSingleSelectedIds(initialSelectedIds);
-    }, [items]);
-
-    // 7) 내부 선택 state를 선언한다.
-    const [selectedOptionIds, setSelectedOptionIds] = useState<string[]>(
-      () => selectedIdsFromItems,
-    );
-
-    // 8) 외부 items 변경 시 동일 규칙으로 내부 선택 state를 재동기화한다.
-    useEffect(() => {
-      setSelectedOptionIds(previousSelectedIds => {
-        if (isSameIdList(previousSelectedIds, selectedIdsFromItems)) {
-          return previousSelectedIds;
-        }
-        return selectedIdsFromItems;
-      });
-    }, [selectedIdsFromItems]);
-
-    // 9) 단일 선택이므로 첫 번째 id를 현재 선택 option으로 본다.
-    const selectedOption =
-      selectedOptionIds.length > 0
-        ? optionMap.get(selectedOptionIds[0])
-        : undefined;
-
-    // 10) custom mode는 customOptions 존재 + custom option 선택 상태로 판단한다.
-    const isCustomInputActive = Boolean(
-      customOptions && selectedOption?.id === customOptionId,
-    );
-
-    // 11) 외부 displayLabel이 있으면 우선 사용하고, 없으면 선택 option label을 사용한다.
-    const resolvedDisplayLabel =
-      displayLabel ?? (isCustomInputActive ? undefined : selectedOption?.label);
-
-    // 12) open 제어형/비제어형 계약은 공용 hook으로 통합 처리한다.
-    const { open: dropdownOpen, setOpen } = useSelectDropdownOpenState({
-      open,
-      defaultOpen,
-      onOpen,
+      return selectedIdsFromItems;
     });
-
-    // 13) disabled/readOnly 상태에서는 open/option 선택 인터랙션을 모두 차단한다.
-    const isInteractionBlocked = disabled || readOnly;
-
-    // 14) open 상태 변경 처리: 차단 상태면 닫힘 고정, 아니면 nextOpen 반영.
-    const handleOpenChange = (nextOpen: boolean) => {
-      if (isInteractionBlocked) {
-        setOpen(false);
-        return;
-      }
-      setOpen(nextOpen);
-    };
-
-    // 15) option 선택 처리: onSelectOption 호출 후, 변경이 있을 때만 onSelectChange를 호출한다.
-    const handleOptionSelect = (option: SelectDropdownOption, event: Event) => {
-      if (isInteractionBlocked) {
-        return;
-      }
-
-      const previousOption = selectedOption;
-      const hasChanged = previousOption?.id !== option.id;
-
-      onSelectOption?.(option, previousOption, event);
-
-      if (hasChanged) {
-        setSelectedOptionIds([option.id]);
-        onSelectChange?.(option, previousOption, event);
-      }
-
+  }, [selectedIdsFromItems]);
+
+  // 9) 단일 선택이므로 첫 번째 id를 현재 선택 option으로 본다.
+  const selectedOption =
+    selectedOptionIds.length > 0
+      ? optionMap.get(selectedOptionIds[0])
+      : undefined;
+
+  // 10) custom mode는 customOptions 존재 + custom option 선택 상태로 판단한다.
+  const isCustomInputActive = Boolean(
+    customOptions && selectedOption?.id === customOptionId,
+  );
+
+  // 11) 외부 displayLabel이 있으면 우선 사용하고, 없으면 선택 option label을 사용한다.
+  const resolvedDisplayLabel =
+    displayLabel ?? (isCustomInputActive ? undefined : selectedOption?.label);
+
+  // 12) open 제어형/비제어형 계약은 공용 hook으로 통합 처리한다.
+  const { open: dropdownOpen, setOpen } = useSelectDropdownOpenState({
+    open,
+    defaultOpen,
+    onOpen,
+  });
+
+  // 13) disabled/readOnly 상태에서는 open/option 선택 인터랙션을 모두 차단한다.
+  const isInteractionBlocked = disabled || readOnly;
+
+  // 14) open 상태 변경 처리: 차단 상태면 닫힘 고정, 아니면 nextOpen 반영.
+  const handleOpenChange = (nextOpen: boolean) => {
+    if (isInteractionBlocked) {
       setOpen(false);
-    };
-
-    // 16) label input 값은 custom mode에서만 사용자 입력값/controlled inputProps.value를 사용한다.
-    const labelInputValue = isCustomInputActive
-      ? typeof inputProps?.value === "string" ||
-        typeof inputProps?.value === "number"
-        ? String(inputProps.value)
-        : customLabelValue
-      : toInputText(resolvedDisplayLabel);
-
-    // 17) 렌더: Container → Dropdown.Root → Trigger → Menu.List 구조를 유지한다.
-    return (
-      <Container
-        className={clsx("select-trigger-container", className)}
-        block={resolvedBlock}
-        width={width}
+      return;
+    }
+    setOpen(nextOpen);
+  };
+
+  // 15) option 선택 처리: onSelectOption 호출 후, 변경이 있을 때만 onSelectChange를 호출한다.
+  const handleOptionSelect = (
+    option: SelectDropdownOption<OptionData>,
+    event: Event,
+  ) => {
+    if (isInteractionBlocked) {
+      return;
+    }
+
+    const previousOption = selectedOption;
+    const hasChanged = previousOption?.id !== option.id;
+
+    onSelectOption?.(option, previousOption, event);
+
+    if (hasChanged) {
+      setSelectedOptionIds([option.id]);
+      onSelectChange?.(option, previousOption, event);
+    }
+
+    setOpen(false);
+  };
+
+  // 16) label input 값은 custom mode에서만 사용자 입력값/controlled inputProps.value를 사용한다.
+  const labelInputValue = isCustomInputActive
+    ? typeof inputProps?.value === "string" ||
+      typeof inputProps?.value === "number"
+      ? String(inputProps.value)
+      : customLabelValue
+    : toInputText(resolvedDisplayLabel);
+
+  // 17) 렌더: Container → Dropdown.Root → Trigger → Menu.List 구조를 유지한다.
+  return (
+    <Container
+      className={clsx("select-trigger-container", className)}
+      block={resolvedBlock}
+      width={width}
+    >
+      <Dropdown.Root
+        open={dropdownOpen}
+        onOpenChange={handleOpenChange}
+        modal={false}
+        {...dropdownOptions?.rootProps}
       >
-        <Dropdown.Root
-          open={dropdownOpen}
-          onOpenChange={handleOpenChange}
-          modal={false}
-          {...dropdownOptions?.rootProps}
+        <Dropdown.Trigger asChild>
+          <SelectTriggerBase
+            priority={priority}
+            size={resolvedSize}
+            state={disabled ? "disabled" : state}
+            block={resolvedBlock}
+            open={dropdownOpen}
+            disabled={disabled}
+            readOnly={readOnly}
+            buttonType={buttonType}
+            {...triggerProps}
+          >
+            <SelectTriggerSelected
+              label={resolvedDisplayLabel}
+              placeholder={
+                isCustomInputActive
+                  ? (customOptions?.placeholder ?? toInputText(placeholder))
+                  : placeholder
+              }
+              isPlaceholder={
+                isCustomInputActive
+                  ? false
+                  : resolvedDisplayLabel === undefined ||
+                    resolvedDisplayLabel === null ||
+                    resolvedDisplayLabel === ""
+              }
+              // 변경: custom mode가 아닐 때는 label input을 읽기 전용으로 고정한다.
+              readOnly={readOnly || !isCustomInputActive}
+              register={register}
+              customRegister={isCustomInputActive ? customRegister : undefined}
+              inputProps={inputProps}
+              valueText={labelInputValue}
+              valueFieldValue={
+                isCustomInputActive && !customRegister
+                  ? labelInputValue
+                  : (selectedOption?.value ?? "")
+              }
+              // 변경: custom mode 진입 시 label input에 focus를 연결한다.
+              shouldFocusInput={isCustomInputActive}
+              onLabelChange={setCustomLabelValue}
+            />
+          </SelectTriggerBase>
+        </Dropdown.Trigger>
+        <Dropdown.Container
+          {...dropdownOptions?.containerProps}
+          size={dropdownOptions?.size ?? resolvedSize}
+          width={dropdownOptions?.width ?? "match"}
         >
-          <Dropdown.Trigger asChild>
-            <SelectTriggerBase
-              ref={ref}
-              priority={priority}
-              size={resolvedSize}
-              state={disabled ? "disabled" : state}
-              block={resolvedBlock}
-              open={dropdownOpen}
-              disabled={disabled}
-              readOnly={readOnly}
-              buttonType={buttonType}
-              {...triggerProps}
-            >
-              <SelectTriggerSelected
-                label={resolvedDisplayLabel}
-                placeholder={
-                  isCustomInputActive
-                    ? (customOptions?.placeholder ?? toInputText(placeholder))
-                    : placeholder
-                }
-                isPlaceholder={
-                  isCustomInputActive
-                    ? false
-                    : resolvedDisplayLabel === undefined ||
-                      resolvedDisplayLabel === null ||
-                      resolvedDisplayLabel === ""
-                }
-                // 변경: custom mode가 아닐 때는 label input을 읽기 전용으로 고정한다.
-                readOnly={readOnly || !isCustomInputActive}
-                register={register}
-                customRegister={
-                  isCustomInputActive ? customRegister : undefined
-                }
-                inputProps={inputProps}
-                valueText={labelInputValue}
-                valueFieldValue={
-                  isCustomInputActive && !customRegister
-                    ? labelInputValue
-                    : (selectedOption?.value ?? "")
-                }
-                // 변경: custom mode 진입 시 label input에 focus를 연결한다.
-                shouldFocusInput={isCustomInputActive}
-                onLabelChange={setCustomLabelValue}
+          <Dropdown.Menu.List {...dropdownOptions?.menuListProps}>
+            {mergedOptions.length > 0 ? (
+              <>
+                {mergedOptions.map(option => (
+                  <Dropdown.Menu.Item
+                    key={option.id}
+                    label={option.label}
+                    description={option.description}
+                    disabled={option.disabled}
+                    left={option.left}
+                    right={option.right}
+                    multiple={Boolean(option.multiple)}
+                    isSelected={selectedOption?.id === option.id}
+                    onSelect={event => {
+                      if (option.disabled) {
+                        event.preventDefault();
+                        return;
+                      }
+                      handleOptionSelect(option, event);
+                    }}
+                  />
+                ))}
+              </>
+            ) : (
+              <Dropdown.Menu.Item
+                label={dropdownOptions?.alt ?? "선택할 항목이 없습니다."}
+                disabled
+                className="dropdown-menu-alt"
               />
-            </SelectTriggerBase>
-          </Dropdown.Trigger>
-          <Dropdown.Container
-            {...dropdownOptions?.containerProps}
-            size={dropdownOptions?.size ?? resolvedSize}
-            width={dropdownOptions?.width ?? "match"}
-          >
-            <Dropdown.Menu.List {...dropdownOptions?.menuListProps}>
-              {mergedOptions.length > 0 ? (
-                <>
-                  {mergedOptions.map(option => (
-                    <Dropdown.Menu.Item
-                      key={option.id}
-                      label={option.label}
-                      description={option.description}
-                      disabled={option.disabled}
-                      left={option.left}
-                      right={option.right}
-                      multiple={Boolean(option.multiple)}
-                      isSelected={selectedOption?.id === option.id}
-                      onSelect={event => {
-                        if (option.disabled) {
-                          event.preventDefault();
-                          return;
-                        }
-                        handleOptionSelect(option, event);
-                      }}
-                    />
-                  ))}
-                </>
-              ) : (
-                <Dropdown.Menu.Item
-                  label={dropdownOptions?.alt ?? "선택할 항목이 없습니다."}
-                  disabled
-                  className="dropdown-menu-alt"
-                />
-              )}
-            </Dropdown.Menu.List>
-          </Dropdown.Container>
-        </Dropdown.Root>
-      </Container>
-    );
-  },
-);
-
-SelectDefault.displayName = "SelectDefault";
-
-export { SelectDefault };
+            )}
+          </Dropdown.Menu.List>
+        </Dropdown.Container>
+      </Dropdown.Root>
+    </Container>
+  );
+}