@uniai-fe/uds-primitives 0.2.0 → 0.2.2

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

@@ -38,6 +38,7 @@ const SelectMultipleTrigger = forwardRef<
       size = "medium",
       state = "default",
       block,
+      width,
       isOpen,
       disabled,
       tags,
@@ -45,7 +46,7 @@ const SelectMultipleTrigger = forwardRef<
       selectedOptionIds,
       onOptionSelect,
       dropdownSize,
-      dropdownMatchTriggerWidth = true,
+      dropdownWidth = "match",
       dropdownRootProps,
       dropdownContainerProps,
       dropdownMenuListProps,
@@ -113,6 +114,7 @@ const SelectMultipleTrigger = forwardRef<
       <Container
         className={clsx("select-trigger-multiple", className)}
         block={block}
+        width={width}
       >
         <Dropdown.Root
           open={dropdownOpen}
@@ -168,7 +170,7 @@ const SelectMultipleTrigger = forwardRef<
             <Dropdown.Container
               {...dropdownContainerProps}
               size={panelSize}
-              matchTriggerWidth={dropdownMatchTriggerWidth}
+              width={dropdownWidth}
             >
               <Dropdown.Menu.List {...dropdownMenuListProps}>
                 {/* multi select 전용 옵션을 Dropdown.Menu.Item으로 노출한다. */}
@@ -178,8 +180,8 @@ const SelectMultipleTrigger = forwardRef<
                     label={option.label}
                     description={option.description}
                     disabled={option.disabled}
-                    leftSlot={option.leftSlot}
-                    rightSlot={option.rightSlot}
+                    left={option.left}
+                    right={option.right}
                     multiple
                     isSelected={resolvedSelectedIds.includes(option.id)}
                     onSelect={event => {

package/src/components/select/styles/select.scss

@@ -1,12 +1,35 @@
 .select {
   display: flex;
-  width: 100%;
+  width: var(--select-width);
+  flex: var(--select-flex);
   flex-direction: column;
   gap: var(--spacing-gap-2);
+  min-width: 0;
+}
+
+.select[data-width="auto"] {
+  --select-width: auto;
+  --select-flex: 0 1 auto;
+}
+
+.select[data-width="fill"] {
+  --select-width: auto;
+  --select-flex: 1 1 0%;
 }
 
+.select[data-width="full"],
 .select-block {
-  width: 100%;
+  --select-width: 100%;
+  --select-flex: 0 0 100%;
+}
+
+.select[data-width="fit"] {
+  --select-width: fit-content;
+  --select-flex: 0 0 auto;
+}
+
+.select[data-width="custom"] {
+  --select-flex: 0 0 auto;
 }
 
 .select-button {

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

@@ -1,5 +1,9 @@
 /* Select tokens mapped to Input primary tokens for visual parity */
 :root {
+  /* layout presets */
+  --select-width: 100%;
+  --select-flex: 0 1 auto;
+
   --select-primary-height-small: var(--input-default-height-small);
   --select-primary-height-medium: var(--input-default-height-medium);
   --select-primary-height-large: var(--input-default-height-large);

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

@@ -3,3 +3,4 @@ export type * from "./icon";
 export type * from "./props";
 export type * from "./trigger";
 export type * from "./multiple";
+export type * from "./option";

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

@@ -0,0 +1,43 @@
+import type { ReactNode } from "react";
+
+/**
+ * Select option 값 타입
+ * @typedef {string | number} SelectOptionValue
+ */
+export type SelectOptionValue = string | number;
+
+/**
+ * Select option 데이터 구조; legacy SelectDataType과 호환되는 구조다.
+ * @property {string} key 렌더링 키
+ * @property {SelectOptionValue} value 실제 값
+ * @property {ReactNode} optionName 사용자 노출 라벨
+ * @property {boolean} [selected] 선택 여부
+ * @property {boolean} [disabled] 비활성 여부
+ * @property {OptionData} [data] 추가 데이터 payload
+ */
+export interface SelectOption<OptionData = unknown> {
+  /**
+   * 렌더링 키
+   */
+  key: string;
+  /**
+   * 실제 값
+   */
+  value: SelectOptionValue;
+  /**
+   * 사용자 노출 라벨
+   */
+  optionName: ReactNode;
+  /**
+   * 선택 여부
+   */
+  selected?: boolean;
+  /**
+   * 비활성 여부
+   */
+  disabled?: boolean;
+  /**
+   * 추가 데이터 payload
+   */
+  data?: OptionData;
+}

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

@@ -1,11 +1,13 @@
-import type { ReactNode } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
 
 import type {
   DropdownContainerProps,
   DropdownMenuListProps,
+  DropdownPanelWidth,
   DropdownRootProps,
   DropdownTemplateItem,
 } from "../../dropdown/types";
+import type { FormFieldWidth } from "../../form/types";
 import type { SelectPriority, SelectSize, SelectState } from "./base";
 import type {
   SelectTriggerDefaultProps,
@@ -81,7 +83,7 @@ export interface SelectComponentState {
  * @property {ReactNode} children trigger/Dropdown 등 내부 콘텐츠
  * @property {boolean} [block] block 여부
  */
-export interface SelectContainerProps {
+export interface SelectContainerProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * 사용자 정의 className
    */
@@ -94,6 +96,21 @@ export interface SelectContainerProps {
    * block 여부
    */
   block?: boolean;
+  /**
+   * width preset
+   */
+  width?: FormFieldWidth;
+}
+
+/**
+ * Select width 옵션
+ * @property {FormFieldWidth} [width] width preset 옵션
+ */
+export interface SelectWidthOption {
+  /**
+   * width preset 옵션
+   */
+  width?: FormFieldWidth;
 }
 
 /**
@@ -102,7 +119,8 @@ export interface SelectContainerProps {
  */
 export type SelectProps = SelectStyleOptions &
   SelectValueOptions &
-  SelectComponentState;
+  SelectComponentState &
+  SelectWidthOption;
 
 /**
  * Select dropdown option; Dropdown.Template item 계약을 그대로 따른다.
@@ -116,7 +134,7 @@ export interface SelectDropdownOption extends DropdownTemplateItem {}
  * @property {string[]} [selectedOptionIds] 선택된 option id 리스트
  * @property {(option: SelectDropdownOption) => void} [onOptionSelect] option 선택 콜백
  * @property {SelectSize} [dropdownSize] dropdown surface size 스케일
- * @property {boolean} [dropdownMatchTriggerWidth] trigger width 동기화 여부
+ * @property {DropdownPanelWidth} [dropdownWidth="match"] dropdown panel width 옵션
  * @property {DropdownRootProps} [dropdownRootProps] Dropdown.Root 전달 props(제어 props 제외)
  * @property {DropdownContainerProps} [dropdownContainerProps] Dropdown.Container 전달 props(children/size 제외)
  * @property {DropdownMenuListProps} [dropdownMenuListProps] Dropdown.Menu.List 전달 props
@@ -139,9 +157,9 @@ export interface SelectDropdownConfigProps {
    */
   dropdownSize?: SelectSize;
   /**
-   * trigger width 동기화 여부
+   * dropdown panel width 옵션
    */
-  dropdownMatchTriggerWidth?: boolean;
+  dropdownWidth?: DropdownPanelWidth;
   /**
    * Dropdown.Root 전달 props(제어 props 제외)
    */
@@ -154,7 +172,7 @@ export interface SelectDropdownConfigProps {
    */
   dropdownContainerProps?: Omit<
     DropdownContainerProps,
-    "children" | "size" | "matchTriggerWidth"
+    "children" | "size" | "width"
   >;
   /**
    * Dropdown.Menu.List 전달 props
@@ -193,7 +211,8 @@ export interface SelectDefaultComponentProps
   extends
     SelectTriggerDefaultProps,
     SelectDropdownConfigProps,
-    SelectDropdownBehaviorProps {}
+    SelectDropdownBehaviorProps,
+    SelectWidthOption {}
 
 /**
  * Select.Multiple 컴포넌트 props
@@ -205,4 +224,5 @@ export interface SelectMultipleComponentProps
   extends
     SelectTriggerMultipleProps,
     SelectDropdownConfigProps,
-    SelectDropdownBehaviorProps {}
+    SelectDropdownBehaviorProps,
+    SelectWidthOption {}

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

@@ -1,4 +0,0 @@
-@use "./variables.scss" as inputVariables;
-@use "./foundation.scss" as inputFoundation;
-@use "./text.scss" as inputText;
-@use "./calendar.scss" as inputCalendar;