@uniai-fe/uds-primitives 0.3.19 → 0.3.20

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

@@ -1,31 +1,135 @@
 "use client";
 
 import clsx from "clsx";
+import { useEffect, useRef } from "react";
+import type { ReactNode } from "react";
 import type { SelectSelectedProps } from "../../types/trigger";
-import { Slot } from "../../../slot";
+
+const toInputText = (value?: ReactNode): string => {
+  if (typeof value === "string" || typeof value === "number") {
+    return String(value);
+  }
+
+  return "";
+};
 
 /**
- * Select trigger label renderer
+ * Select trigger value renderer; trigger 내부 label/value input 렌더링 컴포넌트
  * @component
  * @param {SelectSelectedProps} props selected view props
- * @param {React.ReactNode} [props.label] 선택된 라벨
- * @param {React.ReactNode} [props.placeholder] placeholder 텍스트
- * @param {boolean} [props.isPlaceholder] placeholder 스타일 활성 여부
+ * @param {ReactNode} [props.label] 선택된 라벨 노드
+ * @param {ReactNode} [props.placeholder] label input placeholder
+ * @param {boolean} [props.isPlaceholder] placeholder 상태 여부
+ * @param {boolean} [props.readOnly=false] label input readOnly 여부
+ * @param {UseFormRegisterReturn} [props.register] hidden value input register
+ * @param {UseFormRegisterReturn} [props.customRegister] custom label input register
+ * @param {Omit<ComponentPropsWithoutRef<"input">, "placeholder">} [props.inputProps] label input native 속성
+ * @param {string} [props.valueText=""] label input 표시 문자열
+ * @param {SelectOptionValue | ""} [props.valueFieldValue=""] hidden value input 값
+ * @param {boolean} [props.shouldFocusInput=false] custom mode 진입 시 label input focus 여부
+ * @param {(value: string) => void} [props.onLabelChange] label 입력 변경 콜백
+ * @example
+ * <SelectTriggerSelected
+ *   label="사과"
+ *   valueFieldValue="APPLE"
+ *   readOnly
+ * />
  */
 const SelectTriggerSelected = ({
   label,
   placeholder,
   isPlaceholder,
+  readOnly = false,
+  register,
+  customRegister,
+  inputProps,
+  valueText = "",
+  valueFieldValue = "",
+  shouldFocusInput = false,
+  onLabelChange,
 }: SelectSelectedProps) => {
+  // 1) custom mode 진입 시 focus 타깃은 label input으로 고정한다.
+  const labelInputRef = useRef<HTMLInputElement>(null);
+
+  // 2) placeholder/label은 text input에 들어갈 수 있는 문자열로 정규화한다.
+  const resolvedPlaceholder = toInputText(placeholder);
+  const resolvedLabelText = valueText || toInputText(label);
+
+  // 3) custom mode 활성 시에만 label input focus를 부여한다.
+  useEffect(() => {
+    if (!shouldFocusInput || readOnly) {
+      return;
+    }
+
+    labelInputRef.current?.focus();
+  }, [readOnly, shouldFocusInput]);
+
   return (
     <div className="select-value">
-      <Slot.Text
-        className={clsx("select-label", {
-          "select-label-placeholder": isPlaceholder,
+      <input
+        ref={labelInputRef}
+        type="text"
+        // 4) 외부 inputProps는 placeholder/value/readOnly보다 먼저 병합하고,
+        //    내부 계약값을 마지막에 고정해 동작 우선순위를 명확히 한다.
+        {...inputProps}
+        className={clsx("select-input-label", inputProps?.className, {
+          "select-input-label-placeholder": isPlaceholder,
         })}
-      >
-        {label ?? placeholder}
-      </Slot.Text>
+        placeholder={resolvedPlaceholder}
+        value={resolvedLabelText}
+        readOnly={readOnly}
+        // 5) customRegister는 name/ref/onBlur/onChange 계약을 label input에 연결한다.
+        {...customRegister}
+        onPointerDownCapture={event => {
+          inputProps?.onPointerDownCapture?.(event);
+          if (!readOnly) {
+            // 변경: 편집 가능 상태에서는 trigger 토글 이벤트 전파를 차단한다.
+            event.stopPropagation();
+          }
+        }}
+        onPointerDown={event => {
+          inputProps?.onPointerDown?.(event);
+          if (!readOnly) {
+            event.stopPropagation();
+          }
+        }}
+        onMouseDown={event => {
+          inputProps?.onMouseDown?.(event);
+          if (!readOnly) {
+            event.stopPropagation();
+          }
+        }}
+        onClickCapture={event => {
+          inputProps?.onClickCapture?.(event);
+          if (!readOnly) {
+            event.stopPropagation();
+          }
+        }}
+        onClick={event => {
+          inputProps?.onClick?.(event);
+          if (!readOnly) {
+            event.stopPropagation();
+          }
+        }}
+        onKeyDown={event => {
+          inputProps?.onKeyDown?.(event);
+          if (!readOnly) {
+            event.stopPropagation();
+          }
+        }}
+        onChange={event => {
+          // 6) RHF(customRegister) → 외부 inputProps → 내부 state 콜백 순으로 변경을 전파한다.
+          customRegister?.onChange?.(event);
+          inputProps?.onChange?.(event);
+          onLabelChange?.(event.currentTarget.value);
+        }}
+      />
+      <input
+        type="hidden"
+        className="select-input-value"
+        value={valueFieldValue}
+        {...register}
+      />
     </div>
   );
 };

package/src/components/select/markup/multiple/Multiple.tsx

@@ -5,7 +5,6 @@ import { forwardRef, useEffect, useMemo, useState } from "react";
 
 import Container from "../foundation/Container";
 import { Dropdown } from "../../../dropdown/markup";
-import type { DropdownSize } from "../../../dropdown/types";
 import type { SelectMultipleComponentProps } from "../../types/props";
 import type { SelectMultipleTag } from "../../types/multiple";
 import type { SelectDropdownOption } from "../../types/option";
@@ -16,7 +15,7 @@ import { useSelectDropdownOpenState } from "../../hooks";
 const isSameIdList = (previousIds: string[], nextIds: string[]) =>
   previousIds.length === nextIds.length &&
   previousIds.every((selectedId, index) => selectedId === nextIds[index]);
-// 변경: synthetic "전체" 옵션 id의 기본 키다. 실제 options id와 충돌하면 suffix를 붙여 회피한다.
+// 변경: synthetic "전체" 옵션 id의 기본 키다. 실제 items id와 충돌하면 suffix를 붙여 회피한다.
 const SELECT_MULTIPLE_ALL_OPTION_BASE_ID = "__select_multiple_all__";
 
 /**
@@ -24,29 +23,23 @@ const SELECT_MULTIPLE_ALL_OPTION_BASE_ID = "__select_multiple_all__";
  * @component
  * @param {SelectMultipleComponentProps} props multi trigger props
  * @param {SelectMultipleTag[]} [props.tags] 선택된 tag 리스트
- * @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 {SelectDropdownOption[]} [props.items] dropdown item 목록
+ * @param {SelectCallbackParams} [props.onSelectOption] option 선택 액션 콜백
+ * @param {SelectCallbackParams} [props.onSelectChange] 선택값 변경 콜백
  * @param {React.ReactNode} [props.displayLabel] fallback 라벨
  * @param {React.ReactNode} [props.placeholder] placeholder 텍스트
  * @param {"primary" | "secondary" | "table"} [props.priority="primary"] priority scale
- * @param {"small" | "medium" | "large"} [props.size="medium"] size scale
+ * @param {"xsmall" | "small" | "medium" | "large"} [props.size="medium"] size scale
  * @param {"default" | "focused" | "disabled"} [props.state="default"] 시각 상태
  * @param {boolean} [props.block] block 여부
  * @param {FormFieldWidth} [props.width] container width preset
  * @param {boolean} [props.isOpen] dropdown open 여부
  * @param {boolean} [props.disabled] disabled 여부
  * @param {boolean} [props.readOnly] readOnly 여부
- * @param {"small" | "medium" | "large"} [props.dropdownSize] dropdown panel size
- * @param {"match" | "fit-content" | "max-content" | string | number} [props.dropdownWidth="match"] dropdown panel width
- * @param {Omit<DropdownMenuProps, "open" | "defaultOpen" | "onOpenChange">} [props.dropdownRootProps] Dropdown.Root 전달 props
- * @param {Omit<DropdownContainerProps, "children" | "size" | "width">} [props.dropdownContainerProps] Dropdown.Container 전달 props
- * @param {DropdownMenuListProps} [props.dropdownMenuListProps] Dropdown.Menu.List 전달 props
- * @param {ReactNode} [props.alt] empty 상태 대체 콘텐츠
+ * @param {SelectDropdownExtension} [props.dropdown] dropdown 확장 옵션
  * @param {boolean} [props.open] controlled open 상태
  * @param {boolean} [props.defaultOpen] uncontrolled 초기 open 상태
- * @param {(open: boolean) => void} [props.onOpenChange] open 상태 변경 콜백
+ * @param {(open: boolean) => void} [props.onOpen] open 상태 변경 콜백
  * @param {boolean} [props.showSelectAllOption] dropdown 첫 번째에 "전체" 옵션 노출 여부
  * @param {React.ReactNode} [props.selectAllLabel="전체"] 전체 옵션 라벨
  */
@@ -68,22 +61,16 @@ const SelectMultipleTrigger = forwardRef<
       disabled,
       readOnly,
       tags,
-      options = [],
-      selectedOptionIds,
-      onChange,
-      onOptionSelect,
-      dropdownSize,
-      dropdownWidth = "match",
-      dropdownRootProps,
-      dropdownContainerProps,
-      dropdownMenuListProps,
-      alt,
+      items,
+      onSelectOption,
+      onSelectChange,
+      dropdownOptions: dropdown,
       open,
       defaultOpen,
-      onOpenChange,
+      onOpen,
       showSelectAllOption,
       selectAllLabel = "전체",
-      ...rest
+      triggerProps,
     },
     ref,
   ) => {
@@ -94,13 +81,9 @@ const SelectMultipleTrigger = forwardRef<
      */
     const resolvedBlock =
       block || (priority === "table" && width === undefined);
-
-    /**
-     * 2) 선택 상태 모드 결정
-     * - selectedOptionIds prop이 있으면 controlled 모드
-     * - selectedOptionIds prop이 없으면 uncontrolled 모드
-     */
-    const isSelectionControlled = selectedOptionIds !== undefined;
+    // 변경: xsmall은 primary 전용이므로 secondary/table에서는 small로 fallback한다.
+    const resolvedSize =
+      priority !== "primary" && size === "xsmall" ? "small" : size;
 
     /**
      * 3) option 조회 최적화 맵 생성
@@ -108,13 +91,13 @@ const SelectMultipleTrigger = forwardRef<
      * - label 계산, tag 파생, payload selectedOptions 계산에 공통 사용한다.
      */
     const optionMap = useMemo(
-      () => new Map(options.map(option => [option.id, option])),
-      [options],
+      () => new Map(items.map(option => [option.id, option])),
+      [items],
     );
     // 변경: 전체 선택 대상은 disabled option을 제외한 "선택 가능 옵션"으로 한정한다.
     const selectableOptions = useMemo(
-      () => options.filter(option => !option.disabled),
-      [options],
+      () => items.filter(option => !option.disabled),
+      [items],
     );
     // 변경: 전체 선택 토글 계산을 위해 선택 가능 옵션 id 배열을 별도로 보관한다.
     const selectableOptionIds = useMemo(
@@ -128,7 +111,7 @@ const SelectMultipleTrigger = forwardRef<
     );
     const allOptionId = useMemo(() => {
       // 현재 전달된 옵션 id 집합을 먼저 만든다.
-      const existingIdSet = new Set(options.map(option => option.id));
+      const existingIdSet = new Set(items.map(option => option.id));
       // "__select_multiple_all__"가 비어 있으면 그대로 사용한다.
       if (!existingIdSet.has(SELECT_MULTIPLE_ALL_OPTION_BASE_ID)) {
         return SELECT_MULTIPLE_ALL_OPTION_BASE_ID;
@@ -143,15 +126,15 @@ const SelectMultipleTrigger = forwardRef<
       }
       // 최종적으로 충돌하지 않는 synthetic all-option id를 반환한다.
       return nextId;
-    }, [options]);
+    }, [items]);
 
     /**
      * 4) uncontrolled 초기 선택값 계산
-     * - options[].selected를 다중 선택 초기값으로 그대로 반영한다.
+     * - items[].selected를 다중 선택 초기값으로 그대로 반영한다.
      */
     const selectedIdsFromOptions = useMemo(
-      () => options.filter(option => option.selected).map(option => option.id),
-      [options],
+      () => items.filter(option => option.selected).map(option => option.id),
+      [items],
     );
 
     /**
@@ -163,17 +146,13 @@ const SelectMultipleTrigger = forwardRef<
       useState<string[]>(() => selectedIdsFromOptions);
 
     /**
-     * 6) options 변경 시 내부 state 정합성 보정(uncontrolled 전용)
-     * - 기존 선택 id 중 현재 options에 남아있는 id만 유지한다.
+     * 6) items 변경 시 내부 state 정합성 보정
+     * - 기존 선택 id 중 현재 items에 남아있는 id만 유지한다.
      * - 남은 id가 없으면 selectedIdsFromOptions(초기 선택 규칙)로 재동기화한다.
      */
     useEffect(() => {
-      if (isSelectionControlled) {
-        return;
-      }
-
       setUncontrolledSelectedOptionIds(previousSelectedIds => {
-        const optionIdSet = new Set(options.map(option => option.id));
+        const optionIdSet = new Set(items.map(option => option.id));
         const filteredIds = previousSelectedIds.filter(selectedId =>
           optionIdSet.has(selectedId),
         );
@@ -187,27 +166,19 @@ const SelectMultipleTrigger = forwardRef<
 
         return nextSelectedIds;
       });
-    }, [isSelectionControlled, options, selectedIdsFromOptions]);
+    }, [items, selectedIdsFromOptions]);
 
     /**
      * 7) 최종 선택 id 계산
-     * - controlled: selectedOptionIds 우선
-     * - uncontrolled: 내부 state 사용
+     * - 내부 state 사용
      */
     const resolvedSelectedIds = useMemo(() => {
-      const sourceSelectedIds = isSelectionControlled
-        ? (selectedOptionIds ?? [])
-        : uncontrolledSelectedOptionIds;
-
       // 변경: 실제 option id만 유지해 내부 synthetic all-option id가 상태에 저장되지 않도록 차단한다.
       // 이 필터 덕분에 최종 선택 상태는 "실 데이터 옵션"만 source of truth로 유지된다.
-      return sourceSelectedIds.filter(selectedId => optionMap.has(selectedId));
-    }, [
-      isSelectionControlled,
-      optionMap,
-      selectedOptionIds,
-      uncontrolledSelectedOptionIds,
-    ]);
+      return uncontrolledSelectedOptionIds.filter(selectedId =>
+        optionMap.has(selectedId),
+      );
+    }, [optionMap, uncontrolledSelectedOptionIds]);
     const selectedIdSet = useMemo(
       () => new Set(resolvedSelectedIds),
       [resolvedSelectedIds],
@@ -223,7 +194,7 @@ const SelectMultipleTrigger = forwardRef<
     );
     const selectAllOption = useMemo<SelectDropdownOption>(
       // 변경: "전체" 옵션은 렌더링을 위한 synthetic option 객체다.
-      // 실제 options 배열에 저장하지 않고 render 단계에서만 주입한다.
+      // 실제 items 배열에 저장하지 않고 render 단계에서만 주입한다.
       () => ({
         id: allOptionId,
         value: allOptionId,
@@ -283,12 +254,12 @@ const SelectMultipleTrigger = forwardRef<
 
     /**
      * 11) dropdown open 상태 관리
-     * - open/defaultOpen/onOpenChange 계약을 hook으로 통합 처리한다.
+     * - open/defaultOpen/onOpen 계약을 hook으로 통합 처리한다.
      */
     const { open: dropdownOpen, setOpen } = useSelectDropdownOpenState({
       open: open ?? isOpen,
       defaultOpen,
-      onOpenChange,
+      onOpen,
     });
 
     /**
@@ -315,17 +286,15 @@ const SelectMultipleTrigger = forwardRef<
      * - 최대 3개 tag만 표시하고 나머지는 summary chip(+N)로 축약한다.
      * - 과도한 폭 확장을 방지해 trigger layout 안정성을 유지한다.
      */
-    const panelSize = (dropdownSize ?? size) as DropdownSize;
-    const hasOptions = options.length > 0;
+    const hasOptions = items.length > 0;
     // "전체" 항목은 옵션이 존재할 때만 의미가 있으므로 hasOptions와 함께 gating한다.
     const shouldRenderSelectAllOption = Boolean(
       showSelectAllOption && hasOptions,
     );
     const renderedOptions = useMemo(
       // 변경: all-option은 dropdown 첫 행 고정 요구사항에 맞춰 항상 배열 맨 앞에 주입한다.
-      () =>
-        shouldRenderSelectAllOption ? [selectAllOption, ...options] : options,
-      [options, selectAllOption, shouldRenderSelectAllOption],
+      () => (shouldRenderSelectAllOption ? [selectAllOption, ...items] : items),
+      [items, selectAllOption, shouldRenderSelectAllOption],
     );
     const MAX_VISIBLE_TAGS = 3;
     const visibleTags = hasTags ? derivedTags.slice(0, MAX_VISIBLE_TAGS) : [];
@@ -336,11 +305,9 @@ const SelectMultipleTrigger = forwardRef<
     /**
      * 15) option 선택 처리(multiple toggle)
      * - 이미 선택된 id면 제거, 아니면 추가한다.
-     * - uncontrolled 모드면 내부 state 갱신
-     * - onChange(payload)로 결과 전체를 전달
-     * - legacy onOptionSelect는 하위호환으로 유지
+     * - onSelectOption/onSelectChange 콜백으로 상호작용과 값 변경을 분리해 전달한다.
      */
-    const handleOptionSelect = (optionId: string) => {
+    const handleOptionSelect = (optionId: string, event: Event) => {
       // 현재 클릭된 옵션이 synthetic all-option인지 먼저 판별한다.
       const isSelectAllOption =
         shouldRenderSelectAllOption && optionId === allOptionId;
@@ -355,36 +322,16 @@ const SelectMultipleTrigger = forwardRef<
           : Array.from(
               new Set([...resolvedSelectedIds, ...selectableOptionIds]),
             );
-        // 최종 id 배열을 실제 option 객체 배열로 역매핑해 payload 계약을 유지한다.
-        const nextSelectedOptions = nextSelectedOptionIds
-          .map(selectedId => optionMap.get(selectedId))
-          .filter(
-            (
-              selectedOption,
-            ): selectedOption is NonNullable<typeof selectedOption> =>
-              Boolean(selectedOption),
-          );
+        const didChange = !isSameIdList(
+          resolvedSelectedIds,
+          nextSelectedOptionIds,
+        );
 
-        // uncontrolled 모드에서는 내부 state를 즉시 동기화한다.
-        if (!isSelectionControlled) {
+        onSelectOption?.(selectAllOption, undefined, event);
+        if (didChange) {
           setUncontrolledSelectedOptionIds(nextSelectedOptionIds);
+          onSelectChange?.(selectAllOption, undefined, event);
         }
-
-        // onChange payload는 기존 multiple 계약을 그대로 사용한다.
-        // currentOption은 synthetic all-option으로 전달해 "전체 선택 액션"임을 호출부에서 구분 가능하게 한다.
-        onChange?.({
-          mode: "multiple",
-          selectedOptionIds: nextSelectedOptionIds,
-          selectedValues: nextSelectedOptions.map(
-            selectedOption => selectedOption.value,
-          ),
-          selectedOptions: nextSelectedOptions,
-          currentOption: selectAllOption,
-          isSelected: !isAllSelectableOptionsSelected,
-        });
-
-        // legacy 하위호환 콜백도 동일하게 호출한다.
-        onOptionSelect?.(selectAllOption);
         return;
       }
 
@@ -394,36 +341,15 @@ const SelectMultipleTrigger = forwardRef<
       const nextSelectedOptionIds = wasSelected
         ? resolvedSelectedIds.filter(selectedId => selectedId !== optionId)
         : [...resolvedSelectedIds, optionId];
-      const nextSelectedOptions = nextSelectedOptionIds
-        .map(selectedId => optionMap.get(selectedId))
-        .filter(
-          (
-            selectedOption,
-          ): selectedOption is NonNullable<typeof selectedOption> =>
-            Boolean(selectedOption),
-        );
       const currentOption = optionMap.get(optionId);
 
       if (!currentOption) {
         return;
       }
 
-      if (!isSelectionControlled) {
-        setUncontrolledSelectedOptionIds(nextSelectedOptionIds);
-      }
-
-      onChange?.({
-        mode: "multiple",
-        selectedOptionIds: nextSelectedOptionIds,
-        selectedValues: nextSelectedOptions.map(
-          selectedOption => selectedOption.value,
-        ),
-        selectedOptions: nextSelectedOptions,
-        currentOption,
-        isSelected: !wasSelected,
-      });
-
-      onOptionSelect?.(currentOption);
+      onSelectOption?.(currentOption, undefined, event);
+      setUncontrolledSelectedOptionIds(nextSelectedOptionIds);
+      onSelectChange?.(currentOption, undefined, event);
     };
 
     /**
@@ -442,14 +368,14 @@ const SelectMultipleTrigger = forwardRef<
           open={dropdownOpen}
           onOpenChange={handleOpenChange}
           modal={false}
-          {...dropdownRootProps}
+          {...dropdown?.rootProps}
         >
           {/* Select trigger와 Dropdown trigger를 결합해 동일한 DOM을 공유한다. */}
           <Dropdown.Trigger asChild>
             <SelectTriggerBase
               ref={ref}
               priority={priority}
-              size={size}
+              size={resolvedSize}
               state={disabled ? "disabled" : state}
               block={resolvedBlock}
               open={dropdownOpen}
@@ -457,7 +383,7 @@ const SelectMultipleTrigger = forwardRef<
               disabled={disabled}
               readOnly={readOnly}
               as="div"
-              {...rest}
+              {...triggerProps}
             >
               {hasTags ? (
                 <div className="select-tags">
@@ -485,16 +411,18 @@ const SelectMultipleTrigger = forwardRef<
                   label={resolvedDisplayLabel}
                   placeholder={placeholder}
                   isPlaceholder={!hasLabel}
+                  // 변경: Multiple의 Selected 뷰는 표시 전용이므로 항상 편집을 차단한다.
+                  readOnly
                 />
               )}
             </SelectTriggerBase>
           </Dropdown.Trigger>
           <Dropdown.Container
-            {...dropdownContainerProps}
-            size={panelSize}
-            width={dropdownWidth}
+            {...dropdown?.containerProps}
+            size={dropdown?.size ?? resolvedSize}
+            width={dropdown?.width ?? "match"}
           >
-            <Dropdown.Menu.List {...dropdownMenuListProps}>
+            <Dropdown.Menu.List {...dropdown?.menuListProps}>
               {hasOptions ? (
                 <>
                   {/* multi select 전용 옵션을 Dropdown.Menu.Item으로 노출한다. */}
@@ -519,7 +447,7 @@ const SelectMultipleTrigger = forwardRef<
                           event.preventDefault();
                           return;
                         }
-                        handleOptionSelect(option.id);
+                        handleOptionSelect(option.id, event);
                       }}
                     />
                   ))}
@@ -527,7 +455,7 @@ const SelectMultipleTrigger = forwardRef<
               ) : (
                 <Dropdown.Menu.Item
                   // 변경: 사용처 1회 상수 대신 인라인 fallback으로 empty label을 처리한다.
-                  label={alt ?? "선택할 항목이 없습니다."}
+                  label={dropdown?.alt ?? "선택할 항목이 없습니다."}
                   disabled
                   className="dropdown-menu-alt"
                 />