@uniai-fe/uds-primitives 0.3.43 → 0.3.44

package/package.json

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

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

@@ -43,6 +43,7 @@ const SELECT_CUSTOM_OPTION_VALUE = "CUSTOM";
  * @param {FormFieldWidth} [props.width] container width
  * @param {boolean} [props.disabled] disabled 여부
  * @param {boolean} [props.readOnly] readOnly 여부
+ * @param {boolean} [props.icon] chevron 아이콘 비활성화 여부
  * @param {"button" | "submit" | "reset"} [props.buttonType] trigger button type
  * @param {SelectDropdownOption[]} props.items dropdown 아이템 목록
  * @param {SelectCallbackParams} [props.onSelectOption] option interaction 콜백
@@ -51,7 +52,7 @@ const SELECT_CUSTOM_OPTION_VALUE = "CUSTOM";
  * @param {boolean} [props.open] controlled open 값
  * @param {boolean} [props.defaultOpen] uncontrolled 초기 open 값
  * @param {(open: boolean) => void} [props.onOpen] open 변경 콜백
- * @param {HTMLAttributes<HTMLElement>} [props.triggerProps] trigger native props
+ * @param {Omit<HTMLAttributes<HTMLElement>, "children">} [props.triggerProps] trigger native props
  * @param {UseFormRegisterReturn} [props.register] value field register
  * @param {UseFormRegisterReturn} [props.customRegister] custom label register
  * @param {SelectCustomOptions} [props.customOptions] 직접입력 옵션 구성

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

@@ -19,6 +19,7 @@ import type { SelectTriggerBaseProps } from "../../types/trigger";
  * @param {boolean} [props.multiple=false] multi select 여부
  * @param {boolean} [props.disabled=false] disabled 여부
  * @param {boolean} [props.readOnly=false] readOnly 여부
+ * @param {boolean} [props.icon] chevron 아이콘 비활성화 여부
  * @param {ElementType} [props.as="button"] polymorphic 태그
  * @param {"button" | "submit" | "reset"} [props.buttonType="button"] native button type
  * @param {string} [props.className] trigger className

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

@@ -28,6 +28,9 @@ const toInputText = (value?: ReactNode): string => {
  * @param {SelectOptionValue | ""} [props.valueFieldValue=""] hidden value input 값
  * @param {boolean} [props.shouldFocusInput=false] custom mode 진입 시 label input focus 여부
  * @param {(value: string) => void} [props.onLabelChange] label 입력 변경 콜백
+ * @desc
+ * - readOnly + label이 ReactNode(string/number 제외)면 input 대신 노드를 직접 렌더링한다.
+ * - 편집 가능 상태에서는 pointer/click 이벤트 전파를 차단해 trigger 토글과 입력 포커스 충돌을 방지한다.
  * @example
  * <SelectTriggerSelected
  *   label="사과"

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

@@ -22,6 +22,7 @@ const SELECT_MULTIPLE_ALL_OPTION_BASE_ID = "__select_multiple_all__";
  * Select trigger for multi select; 선택된 tag들을 chip 형태로 렌더링한다.
  * @component
  * @param {SelectMultipleComponentProps} props multi trigger props
+ * @param {string} [props.className] container className
  * @param {SelectMultipleTag[]} [props.tags] 선택된 tag 리스트
  * @param {SelectDropdownOption[]} [props.items] dropdown item 목록
  * @param {SelectCallbackParams} [props.onSelectOption] option 선택 액션 콜백
@@ -35,7 +36,9 @@ const SELECT_MULTIPLE_ALL_OPTION_BASE_ID = "__select_multiple_all__";
  * @param {FormFieldWidth} [props.width] container width preset
  * @param {boolean} [props.disabled] disabled 여부
  * @param {boolean} [props.readOnly] readOnly 여부
- * @param {SelectDropdownExtension} [props.dropdown] dropdown 확장 옵션
+ * @param {boolean} [props.icon] chevron 아이콘 비활성화 여부
+ * @param {Omit<HTMLAttributes<HTMLElement>, "children">} [props.triggerProps] trigger native props
+ * @param {SelectDropdownExtension} [props.dropdownOptions] dropdown 확장 옵션
  * @param {boolean} [props.open] controlled open 상태
  * @param {boolean} [props.defaultOpen] uncontrolled 초기 open 상태
  * @param {(open: boolean) => void} [props.onOpen] open 상태 변경 콜백

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

@@ -17,11 +17,13 @@ import type {
   SelectPriority,
   SelectSize,
   SelectState,
+  SelectTriggerButtonType,
 } from "./base";
+import type { SelectMultipleTag } from "./multiple";
 import type { SelectDropdownOption } from "./option";
 import type {
-  SelectTriggerDefaultProps,
-  SelectTriggerMultipleProps,
+  SelectTriggerBaseFoundationProps,
+  SelectTriggerNativeProps,
 } from "./trigger";
 
 /**
@@ -276,14 +278,57 @@ export interface SelectDropdownBehaviorProps {
 }
 
 /**
- * Select trigger native event props
- * @property {HTMLAttributes<HTMLElement>} [triggerProps] trigger native 속성/이벤트
+ * Select trigger template props
+ * @property {string} [className] 사용자 정의 className
+ * @property {ReactNode} [displayLabel] 선택된 라벨
+ * @property {ReactNode} [placeholder] placeholder 텍스트
+ * @property {SelectTriggerNativeProps} [triggerProps] trigger native 속성/이벤트
  */
-export interface SelectTriggerEventProps {
+export interface SelectTriggerTemplateProps {
+  /**
+   * 사용자 정의 className
+   */
+  className?: string;
+  /**
+   * 선택된 라벨
+   */
+  displayLabel?: ReactNode;
+  /**
+   * placeholder 텍스트
+   */
+  placeholder?: ReactNode;
   /**
    * trigger native 속성/이벤트
    */
-  triggerProps?: HTMLAttributes<HTMLElement>;
+  triggerProps?: SelectTriggerNativeProps;
+}
+
+/**
+ * Select default trigger view props
+ * @property {ReactNode} [displayLabel] 선택된 라벨
+ * @property {ReactNode} [placeholder] placeholder 텍스트
+ * @property {SelectTriggerNativeProps} [triggerProps] trigger native 속성/이벤트
+ * @property {SelectTriggerButtonType} [buttonType] button type
+ */
+export interface SelectDefaultTriggerViewProps extends SelectTriggerTemplateProps {
+  /**
+   * button type
+   */
+  buttonType?: SelectTriggerButtonType;
+}
+
+/**
+ * Select multiple trigger view props
+ * @property {ReactNode} [displayLabel] 선택된 라벨
+ * @property {ReactNode} [placeholder] placeholder 텍스트
+ * @property {SelectTriggerNativeProps} [triggerProps] trigger native 속성/이벤트
+ * @property {SelectMultipleTag[]} [tags] multi select tag 리스트
+ */
+export interface SelectMultipleTriggerViewProps extends SelectTriggerTemplateProps {
+  /**
+   * multi select tag 리스트
+   */
+  tags?: SelectMultipleTag[];
 }
 
 /**
@@ -322,6 +367,7 @@ export type SelectProps = SelectStyleOptions &
 
 /**
  * Select.Default 컴포넌트 props
+ * @property {string} [className] 사용자 정의 className
  * @property {ReactNode} [displayLabel] 선택된 라벨
  * @property {ReactNode} [placeholder] placeholder 텍스트
  * @property {SelectPriority} [priority] priority scale
@@ -331,16 +377,17 @@ export type SelectProps = SelectStyleOptions &
  * @property {boolean} [open] dropdown open 여부
  * @property {boolean} [disabled] disabled 여부
  * @property {boolean} [readOnly] readOnly 여부
+ * @property {boolean} [icon] chevron 아이콘 비활성화
  * @property {SelectTriggerButtonType} [buttonType] button type
+ * @property {SelectTriggerNativeProps} [triggerProps] trigger native 속성/이벤트
  * @property {FormFieldWidth} [width] width preset 옵션
  * @property {SelectDropdownOption<OptionData>[]} [items] dropdown item 리스트
  * @property {SelectCallbackParams<OptionData>} [onSelectOption] option 선택 액션 콜백
  * @property {SelectCallbackParams<OptionData>} [onSelectChange] 선택값 변경 콜백
- * @property {SelectDropdownExtension} [dropdown] dropdown 확장 옵션
+ * @property {SelectDropdownExtension} [dropdownOptions] dropdown 확장 옵션
  * @property {boolean} [open] dropdown open 상태
  * @property {boolean} [defaultOpen] uncontrolled 초기 open 상태
  * @property {(open: boolean) => void} [onOpen] open state change 콜백
- * @property {HTMLAttributes<HTMLElement>} [triggerProps] trigger native 속성/이벤트
  * @property {SelectCustomOptions} [customOptions] 직접 입력 옵션 구성
  * @property {SelectCustomInputProps} [inputProps] 직접 입력 input 구성
  * @property {UseFormRegisterReturn} [register] source field register
@@ -351,11 +398,11 @@ export type SelectProps = SelectStyleOptions &
  * // optionality 제어는 콜백/옵션 타입에서 필요할 때만 명시적으로 사용한다.
  */
 export type SelectDefaultComponentProps<OptionData = unknown> =
-  SelectTriggerDefaultProps &
+  SelectTriggerBaseFoundationProps &
+    SelectDefaultTriggerViewProps &
     SelectDropdownConfigProps<OptionData> &
     SelectDropdownBehaviorProps &
     SelectWidthOption &
-    SelectTriggerEventProps &
     SelectCustomOptionExtension &
     SelectFormRegisterExtension;
 
@@ -377,6 +424,7 @@ export interface SelectMultipleAllOptionProps {
 
 /**
  * Select.Multiple 컴포넌트 props
+ * @property {string} [className] 사용자 정의 className
  * @property {ReactNode} [displayLabel] 선택된 라벨
  * @property {ReactNode} [placeholder] placeholder 텍스트
  * @property {SelectMultipleTag[]} [tags] multi select tag 리스트
@@ -387,15 +435,16 @@ export interface SelectMultipleAllOptionProps {
  * @property {boolean} [open] dropdown open 여부
  * @property {boolean} [disabled] disabled 여부
  * @property {boolean} [readOnly] readOnly 여부
+ * @property {boolean} [icon] chevron 아이콘 비활성화
+ * @property {SelectTriggerNativeProps} [triggerProps] trigger native 속성/이벤트
  * @property {FormFieldWidth} [width] width preset 옵션
  * @property {SelectDropdownOption<OptionData>[]} [items] dropdown item 리스트
  * @property {SelectCallbackParams<OptionData>} [onSelectOption] option 선택 액션 콜백
  * @property {SelectCallbackParams<OptionData>} [onSelectChange] 선택값 변경 콜백
- * @property {SelectDropdownExtension} [dropdown] dropdown 확장 옵션
+ * @property {SelectDropdownExtension} [dropdownOptions] dropdown 확장 옵션
  * @property {boolean} [open] dropdown open 상태
  * @property {boolean} [defaultOpen] uncontrolled 초기 open 상태
  * @property {(open: boolean) => void} [onOpen] open state change 콜백
- * @property {HTMLAttributes<HTMLElement>} [triggerProps] trigger native 속성/이벤트
  * @property {boolean} [showSelectAllOption] dropdown 첫 행에 "전체" 옵션 노출 여부
  * @property {ReactNode} [selectAllLabel] "전체" 옵션 라벨 커스터마이징
  * @example
@@ -404,9 +453,9 @@ export interface SelectMultipleAllOptionProps {
  * // optionality 제어는 콜백/옵션 타입에서 필요할 때만 명시적으로 사용한다.
  */
 export type SelectMultipleComponentProps<OptionData = unknown> =
-  SelectTriggerMultipleProps &
+  SelectTriggerBaseFoundationProps &
+    SelectMultipleTriggerViewProps &
     SelectDropdownConfigProps<OptionData> &
     SelectDropdownBehaviorProps &
     SelectWidthOption &
-    SelectMultipleAllOptionProps &
-    SelectTriggerEventProps;
+    SelectMultipleAllOptionProps;

package/src/components/select/types/trigger.ts

@@ -16,20 +16,17 @@ import type {
 import type { SelectMultipleTag } from "./multiple";
 
 /**
- * Select trigger layout props
+ * Select trigger foundation props
  * @property {SelectPriority} [priority] priority scale
  * @property {SelectSize} [size] size scale
  * @property {SelectState} [state] visual state
  * @property {boolean} [open] dropdown open 여부
  * @property {boolean} [block] block 여부
- * @property {boolean} [multiple] multi select 여부
  * @property {boolean} [disabled] disabled 여부
  * @property {boolean} [readOnly] readOnly 여부
- * @property {ElementType} [as] polymorphic element
- * @property {SelectTriggerButtonType} [buttonType] button type
- * @property {ReactNode} children 콘텐츠
+ * @property {boolean} [icon] chevron 아이콘 비활성화
  */
-export interface SelectTriggerBaseProps extends HTMLAttributes<HTMLElement> {
+export interface SelectTriggerBaseFoundationProps {
   /**
    * priority scale
    * - primary
@@ -60,10 +57,6 @@ export interface SelectTriggerBaseProps extends HTMLAttributes<HTMLElement> {
    * block 여부
    */
   block?: boolean;
-  /**
-   * multi select 여부
-   */
-  multiple?: boolean;
   /**
    * disabled 여부
    */
@@ -72,6 +65,31 @@ export interface SelectTriggerBaseProps extends HTMLAttributes<HTMLElement> {
    * readOnly 여부
    */
   readOnly?: boolean;
+  /**
+   * chevron 아이콘 비활성화
+   */
+  icon?: boolean;
+}
+
+/**
+ * Select trigger native props
+ * @typedef {Omit<HTMLAttributes<HTMLElement>, "children">}
+ * trigger native 속성 집합 (children 제외)
+ */
+export type SelectTriggerNativeProps = Omit<
+  HTMLAttributes<HTMLElement>,
+  "children"
+>;
+
+/**
+ * Select trigger component props
+ * @property {boolean} [multiple] multi select 여부
+ * @property {ElementType} [as] polymorphic element
+ * @property {SelectTriggerButtonType} [buttonType] button type
+ * @property {ReactNode} children 콘텐츠
+ */
+export interface SelectTriggerBaseComponentProps {
+  multiple?: boolean;
   /**
    * polymorphic element
    */
@@ -84,18 +102,19 @@ export interface SelectTriggerBaseProps extends HTMLAttributes<HTMLElement> {
    * 콘텐츠
    */
   children: ReactNode;
-  /**
-   * chevron 아이콘 비활성화
-   */
-  icon?: boolean;
 }
 
+// 변경 설명: Trigger Base는 Foundation(스타일/상태) + Component(렌더 계약) + Native(HTML attrs/event) 조합으로 역할을 분리한다.
+export type SelectTriggerBaseProps = SelectTriggerBaseFoundationProps &
+  SelectTriggerBaseComponentProps &
+  SelectTriggerNativeProps;
+
 /**
  * Select trigger default props
  * @property {ReactNode} [displayLabel] 선택된 라벨
  * @property {ReactNode} [placeholder] placeholder 텍스트
  */
-export interface SelectTriggerDefaultProps extends HTMLAttributes<HTMLElement> {
+export interface SelectTriggerDefaultProps extends SelectTriggerBaseFoundationProps {
   /**
    * 선택된 라벨
    */
@@ -104,44 +123,6 @@ export interface SelectTriggerDefaultProps extends HTMLAttributes<HTMLElement> {
    * placeholder 텍스트
    */
   placeholder?: ReactNode;
-  /**
-   * priority scale
-   * - primary
-   * - secondary
-   * - table
-   */
-  priority?: SelectPriority;
-  /**
-   * size scale
-   * - xsmall (primary 전용)
-   * - small
-   * - medium
-   * - large
-   */
-  size?: SelectSize;
-  /**
-   * visual state
-   * - default
-   * - focused
-   * - disabled
-   */
-  state?: SelectState;
-  /**
-   * block 여부
-   */
-  block?: boolean;
-  /**
-   * dropdown open 여부
-   */
-  open?: boolean;
-  /**
-   * disabled 여부
-   */
-  disabled?: boolean;
-  /**
-   * readOnly 여부
-   */
-  readOnly?: boolean;
   /**
    * button type
    */
@@ -152,7 +133,7 @@ export interface SelectTriggerDefaultProps extends HTMLAttributes<HTMLElement> {
  * Select trigger multiple props
  * @property {ReactNode[]} [tags] multi select tag 리스트
  */
-export interface SelectTriggerMultipleProps extends HTMLAttributes<HTMLElement> {
+export interface SelectTriggerMultipleProps extends SelectTriggerBaseFoundationProps {
   /**
    * 선택된 라벨
    */
@@ -165,44 +146,6 @@ export interface SelectTriggerMultipleProps extends HTMLAttributes<HTMLElement>
    * multi select tag 리스트
    */
   tags?: SelectMultipleTag[];
-  /**
-   * priority scale
-   * - primary
-   * - secondary
-   * - table
-   */
-  priority?: SelectPriority;
-  /**
-   * size scale
-   * - xsmall (primary 전용)
-   * - small
-   * - medium
-   * - large
-   */
-  size?: SelectSize;
-  /**
-   * visual state
-   * - default
-   * - focused
-   * - disabled
-   */
-  state?: SelectState;
-  /**
-   * block 여부
-   */
-  block?: boolean;
-  /**
-   * dropdown open 여부
-   */
-  open?: boolean;
-  /**
-   * disabled 여부
-   */
-  disabled?: boolean;
-  /**
-   * readOnly 여부
-   */
-  readOnly?: boolean;
 }
 
 /**