@uniai-fe/uds-primitives 0.3.51 → 0.3.52

package/package.json

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

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

@@ -162,10 +162,25 @@ export function SelectDefault<OptionData = unknown>({
     [mergedOptions, uncontrolledSelectedValue],
   );
 
-  // 9) custom mode는 customOptions 존재 + custom option value 선택 상태로 판단한다.
+  // 9) customOptions가 있는 경우 inputProps.value가 있고 option 매칭이 없으면 custom mode로 간주한다.
+  const forcedCustomLabelValue = toInputText(inputProps?.value as ReactNode);
+  const shouldForceCustomFromInput = Boolean(
+    customOptions && !selectedOption && forcedCustomLabelValue,
+  );
+  const resolvedSelectedOption = useMemo(
+    () =>
+      shouldForceCustomFromInput
+        ? mergedOptions.find(option =>
+            isSameSelectedValue(option.value, SELECT_CUSTOM_OPTION_VALUE),
+          )
+        : selectedOption,
+    [mergedOptions, selectedOption, shouldForceCustomFromInput],
+  );
+
+  // 10) custom mode는 custom option selected 상태(또는 forced custom 상태)로 판단한다.
   const isCustomInputActive = Boolean(
     customOptions &&
-    toSelectedValueKey(selectedOption?.value) ===
+    toSelectedValueKey(resolvedSelectedOption?.value) ===
       toSelectedValueKey(SELECT_CUSTOM_OPTION_VALUE),
   );
 
@@ -176,21 +191,22 @@ export function SelectDefault<OptionData = unknown>({
     }
   }, [isCustomInputActive]);
 
-  // 10) 외부 displayLabel이 있으면 우선 사용하고, 없으면 선택 option label을 사용한다.
+  // 11) 외부 displayLabel이 있으면 우선 사용하고, 없으면 선택 option label을 사용한다.
   const resolvedDisplayLabel =
-    displayLabel ?? (isCustomInputActive ? undefined : selectedOption?.label);
+    displayLabel ??
+    (isCustomInputActive ? undefined : resolvedSelectedOption?.label);
 
-  // 11) open 제어형/비제어형 계약은 공용 hook으로 통합 처리한다.
+  // 12) open 제어형/비제어형 계약은 공용 hook으로 통합 처리한다.
   const { open: dropdownOpen, setOpen } = useSelectDropdownOpenState({
     open,
     defaultOpen,
     onOpen,
   });
 
-  // 12) disabled/readOnly 상태에서는 open/option 선택 인터랙션을 모두 차단한다.
+  // 13) disabled/readOnly 상태에서는 open/option 선택 인터랙션을 모두 차단한다.
   const isInteractionBlocked = disabled || readOnly;
 
-  // 13) open 상태 변경 처리: 차단 상태면 닫힘 고정, 아니면 nextOpen 반영.
+  // 14) open 상태 변경 처리: 차단 상태면 닫힘 고정, 아니면 nextOpen 반영.
   const handleOpenChange = (nextOpen: boolean) => {
     if (isInteractionBlocked) {
       setOpen(false);
@@ -199,7 +215,7 @@ export function SelectDefault<OptionData = unknown>({
     setOpen(nextOpen);
   };
 
-  // 14) option 선택 처리: onSelectOption 호출 후, value가 변경될 때만 onSelectChange를 호출한다.
+  // 15) option 선택 처리: onSelectOption 호출 후, value가 변경될 때만 onSelectChange를 호출한다.
   const handleOptionSelect = (
     option: SelectDropdownOption<OptionData>,
     event: Event,
@@ -208,7 +224,7 @@ export function SelectDefault<OptionData = unknown>({
       return;
     }
 
-    const previousOption = selectedOption;
+    const previousOption = resolvedSelectedOption;
     const hasChanged = !isSameSelectedValue(
       previousOption?.value,
       option.value,
@@ -224,7 +240,7 @@ export function SelectDefault<OptionData = unknown>({
     setOpen(false);
   };
 
-  // 15) label input 값은 custom mode에서만 사용자 입력값/controlled inputProps.value를 사용한다.
+  // 16) label input 값은 custom mode에서만 사용자 입력값/controlled inputProps.value를 사용한다.
   const labelInputValue = isCustomInputActive
     ? typeof inputProps?.value === "string" ||
       typeof inputProps?.value === "number"
@@ -232,7 +248,7 @@ export function SelectDefault<OptionData = unknown>({
       : customLabelValue
     : toInputText(resolvedDisplayLabel);
 
-  // 16) 렌더: Container → Dropdown.Root → Trigger → Menu.List 구조를 유지한다.
+  // 17) 렌더: Container → Dropdown.Root → Trigger → Menu.List 구조를 유지한다.
   return (
     <Container
       className={clsx("select-trigger-container", className)}
@@ -284,7 +300,7 @@ export function SelectDefault<OptionData = unknown>({
               valueFieldValue={
                 isCustomInputActive && !customRegister
                   ? labelInputValue
-                  : (selectedOption?.value ?? "")
+                  : (resolvedSelectedOption?.value ?? "")
               }
               // 변경: custom mode 진입 시 label input에 focus를 연결한다.
               shouldFocusInput={isCustomInputActive}
@@ -310,7 +326,7 @@ export function SelectDefault<OptionData = unknown>({
                     right={option.right}
                     multiple={Boolean(option.multiple)}
                     isSelected={isSameSelectedValue(
-                      selectedOption?.value,
+                      resolvedSelectedOption?.value,
                       option.value,
                     )}
                     onSelect={event => {