@uniai-fe/uds-primitives 0.2.9 → 0.2.10

package/src/components/input/markup/date/Trigger.tsx

@@ -9,6 +9,8 @@ import type { InputCalendarTriggerViewProps } from "../../types";
 
 /**
  * Input Date trigger field.
+ * priority가 table인 경우 아이콘을 left 슬롯에 배치하고,
+ * 그 외 priority에서는 기존처럼 right 슬롯을 유지한다.
  * @component
  * @param {InputCalendarTriggerViewProps} props
  * @param {string} [props.className] trigger className
@@ -16,6 +18,7 @@ import type { InputCalendarTriggerViewProps } from "../../types";
  * @param {string} [props.displayValue] 표시 문자열
  * @param {(event: MouseEvent<Element>) => void} [props.onClick] 클릭 핸들러
  * @param {boolean} [props.disabled] disabled 여부
+ * @param {"primary" | "secondary" | "tertiary" | "table"} [props.priority] trigger input priority
  * @param {string} [props.id] input id
  * @param {string} [props.name] form name
  * @param {UseFormRegisterReturn} [props.register] RHF register
@@ -31,6 +34,7 @@ const InputDateTrigger = forwardRef<
       displayValue,
       onClick,
       disabled,
+      priority,
       id,
       name,
       register,
@@ -55,19 +59,33 @@ const InputDateTrigger = forwardRef<
         {...restProps}
         ref={ref}
         value={displayValue}
+        // PopOver.Trigger(asChild)가 주입한 `type="button"`으로 placeholder가 사라지는 문제를 막기 위해
+        // Date trigger는 항상 readOnly text input으로 고정한다.
+        type="text"
         readOnly
         disabled={disabled}
         id={id}
         name={name ?? register?.name}
         register={register}
+        priority={priority}
         placeholder={placeholder}
         className={clsx("input-date-trigger-input", className)}
         onClick={handleInputClick}
+        // table priority는 icon을 왼쪽 슬롯에 배치한다.
+        left={
+          priority === "table" ? (
+            <figure className="input-date-trigger-icon" aria-hidden="true">
+              <Calendar.Icon.Calendar />
+            </figure>
+          ) : undefined
+        }
+        // 기본(priority != table)은 기존처럼 icon을 오른쪽 슬롯에 유지한다.
         right={
-          // 토글 인터랙션은 input 단일 경로로 유지하고, 오른쪽 아이콘은 장식 요소로만 둔다.
-          <figure className="input-date-trigger-icon" aria-hidden="true">
-            <Calendar.Icon.Calendar />
-          </figure>
+          priority === "table" ? undefined : (
+            <figure className="input-date-trigger-icon" aria-hidden="true">
+              <Calendar.Icon.Calendar />
+            </figure>
+          )
         }
       />
     );

package/src/components/input/markup/foundation/Input.tsx

@@ -29,15 +29,16 @@ import InputBaseUtil from "./Utility";
  *
  * @component
  * @param {InputProps} props Input 컴포넌트 공통 props
- * @param {"primary" | "secondary" | "tertiary"} [props.priority="primary"] 디자인 토큰 우선순위
+ * @param {"primary" | "secondary" | "tertiary" | "table"} [props.priority="primary"] 디자인 토큰 우선순위
  * @param {"small" | "medium" | "large"} [props.size="medium"] 높이/타이포 세트
- * @param {"default" | "active" | "focused" | "success" | "error" | "disabled"} [props.state="default"] 시각 상태
- * @param {boolean} [props.block=false] true면 width 100%
+ * @param {"default" | "active" | "focused" | "success" | "error" | "disabled" | "loading"} [props.state="default"] 시각 상태
+ * @param {boolean} [props.block=false] true면 width 100% (`priority="table"`은 width 미지정 시 full 기본)
+ * @param {FormFieldWidth} [props.width] width preset
  * @param {React.ReactNode} [props.left] 입력 왼쪽 슬롯(아이콘/텍스트)
  * @param {React.ReactNode} [props.right] 입력 오른쪽 슬롯
- * @param {React.ReactNode} [props.clearIcon] 입력값 초기화 아이콘. 지정하지 않으면 기본 Reset 아이콘
- * @param {React.ReactNode} [props.successIcon] success 상태 아이콘 override
- * @param {React.ReactNode} [props.errorIcon] error 상태 아이콘 override
+ * @param {React.ReactNode} [props.clear] 입력값 초기화 아이콘. 지정하지 않으면 기본 Reset 아이콘
+ * @param {React.ReactNode} [props.success] success 상태 아이콘 override
+ * @param {React.ReactNode} [props.error] error 상태 아이콘 override
  * @param {string} [props.inputClassName] 실제 `<input>` 요소 className
  * @param {string} [props.boxClassName] `.input-box` className
  * @param {boolean} [props.disabled] native disabled
@@ -52,6 +53,7 @@ import InputBaseUtil from "./Utility";
  * @param {string | number | readonly string[]} [props.value] 제어형 값
  * @param {string | number | readonly string[]} [props.defaultValue] 비제어 초기값
  * @param {string} [props.type="text"] native input type
+ * @param {boolean} [props.readOnly] native readOnly
  */
 const InputBase = forwardRef<HTMLInputElement, InputProps>(
   (
@@ -84,6 +86,10 @@ const InputBase = forwardRef<HTMLInputElement, InputProps>(
     },
     ref,
   ) => {
+    // table priority는 width 지정이 없으면 셀 가로폭을 기본으로 채운다.
+    const isTablePriority = priority === "table";
+    const resolvedBlock = block || (isTablePriority && width === undefined);
+
     const generatedId = useId();
     const registerRef = register?.ref;
     const registerOnChange = register?.onChange;
@@ -174,7 +180,7 @@ const InputBase = forwardRef<HTMLInputElement, InputProps>(
     const widthAttr =
       width !== undefined
         ? getFormFieldWidthAttr(width)
-        : block
+        : resolvedBlock
           ? "full"
           : undefined;
     const widthValue =
@@ -191,13 +197,13 @@ const InputBase = forwardRef<HTMLInputElement, InputProps>(
           `input-priority-${priority}`,
           `input-size-${size}`,
           `input-state-${visualState}`,
-          block && "input-block",
+          resolvedBlock && "input-block",
           className,
         )}
         data-priority={priority}
         data-size={size}
         data-state={visualState}
-        data-block={block ? "true" : undefined}
+        data-block={resolvedBlock ? "true" : undefined}
         {...(simulatedState ? { "data-simulated-state": simulatedState } : {})}
         data-width={widthAttr}
         style={containerStyle}
@@ -208,7 +214,7 @@ const InputBase = forwardRef<HTMLInputElement, InputProps>(
             `input-box-priority-${priority}`,
             `input-box-size-${size}`,
             `input-box-state-${visualState}`,
-            block && "input-box-block",
+            resolvedBlock && "input-box-block",
             boxClassNameProp,
           )}
           data-slot="box"
@@ -218,7 +224,7 @@ const InputBase = forwardRef<HTMLInputElement, InputProps>(
             data-state={visualState}
             data-priority={priority}
             data-size={size}
-            data-block={block ? "true" : undefined}
+            data-block={resolvedBlock ? "true" : undefined}
           >
             {/* 필드 컨트롤 wrapper; 슬롯과 input 정렬 */}
             <div className="input-field-control">
@@ -242,6 +248,8 @@ const InputBase = forwardRef<HTMLInputElement, InputProps>(
               />
             </div>
             <InputBaseUtil
+              // table priority는 success/error 상태 아이콘 대신 border만으로 상태를 표현한다.
+              priority={priority}
               state={currentState}
               isDisabled={isDisabled}
               isFocused={isFocused}

package/src/components/input/markup/foundation/Utility.tsx

@@ -9,23 +9,25 @@ import InputBaseSideSlot from "./SideSlot";
 /**
  * Input; 오른쪽 유틸리티 영역(wrapper)
  * @component
- * @param {InputUtilProps} props
- * @param {React.ReactNode} [props.right] 오른쪽 슬롯 콘텐츠
+ * @param {InputUtilityProps} props
+ * @param {React.ReactNode} [props.children] 오른쪽 슬롯 콘텐츠
  * @param {React.ReactNode} [props.clear] clear 버튼 아이콘
  * @param {React.ReactNode} [props.success] success 상태 아이콘 override
  * @param {React.ReactNode} [props.error] error 상태 아이콘 override
- * @param {string} props.state 현재 input 상태
+ * @param {"primary" | "secondary" | "tertiary" | "table"} props.priority input priority
+ * @param {"default" | "active" | "focused" | "success" | "error" | "disabled" | "loading"} props.state 현재 input 상태
  * @param {boolean} props.isDisabled disable 여부
  * @param {boolean} props.isFocused focus 여부
  * @param {boolean} props.hasValue 입력값 존재 여부
  * @param {boolean} [props.readOnly] readOnly 여부
- * @param {Function} [props.onClear] clear 버튼 클릭 핸들러
+ * @param {(event: React.MouseEvent<HTMLButtonElement> | React.PointerEvent<HTMLButtonElement>) => void} [props.onClear] clear 버튼 클릭 핸들러
  */
 export default function InputBaseUtil({
   children: right,
   clear,
   success,
   error,
+  priority,
   state,
   isDisabled,
   isFocused,
@@ -42,6 +44,8 @@ export default function InputBaseUtil({
       : state === "error"
         ? (error ?? baseStatusIcon)
         : null;
+  // table priority는 상태를 border로만 표현하므로 status icon을 렌더하지 않는다.
+  const resolvedStatusIcon = priority === "table" ? null : statusIcon;
   const clearIconNode = clear ?? InputStatusIcon.reset;
   const showClearIcon = Boolean(
     clearIconNode &&
@@ -50,7 +54,7 @@ export default function InputBaseUtil({
     (isFocused || isClearInteracting),
   );
 
-  if (!right && !showClearIcon && !statusIcon) {
+  if (!right && !showClearIcon && !resolvedStatusIcon) {
     return null;
   }
 
@@ -91,13 +95,13 @@ export default function InputBaseUtil({
           {clearIconNode}
         </button>
       ) : null}
-      {statusIcon ? (
+      {resolvedStatusIcon ? (
         <div
           className="input-affix input-affix-status"
           data-slot="status"
           data-state={state}
         >
-          {statusIcon}
+          {resolvedStatusIcon}
         </div>
       ) : null}
     </div>

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

@@ -21,6 +21,27 @@
   pointer-events: none;
 }
 
+.input-date-trigger-input.input-priority-table {
+  .input-field {
+    padding-inline: var(--spacing-padding-4);
+  }
+
+  .input-field-control {
+    gap: var(--spacing-gap-3);
+  }
+
+  .input-element {
+    font-size: var(--font-body-xsmall-size);
+    line-height: var(--font-body-xsmall-line-height);
+    font-weight: var(--font-body-xsmall-weight);
+  }
+
+  .input-date-trigger-icon {
+    // input date 아이콘 크기는 size/priority와 무관하게 공통 크기를 유지한다.
+    color: var(--color-label-alternative);
+  }
+}
+
 .input-date-footer-template {
   // footer 템플릿은 input 스킨에서만 관리한다.
   display: grid;

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

@@ -154,6 +154,13 @@
     }
   }
 
+  &[data-priority="table"] {
+    // table priority는 default에서 border를 숨기고 상태(border-color)만 드러낸다.
+    border-radius: var(--input-table-radius-base);
+    border-color: var(--input-border-table-default-color);
+    background-color: transparent;
+  }
+
   &:not([data-priority="secondary"]) {
     &[data-state="active"],
     &[data-state="focused"] {
@@ -252,6 +259,24 @@
   min-height: var(--theme-size-medium-2);
 }
 
+.input-field[data-priority="table"][data-size="small"] .input-element {
+  font-size: var(--input-table-text-small-size);
+  line-height: var(--input-table-text-small-line-height);
+  font-weight: var(--input-table-text-small-weight);
+}
+
+.input-field[data-priority="table"][data-size="medium"] .input-element {
+  font-size: var(--input-table-text-medium-size);
+  line-height: var(--input-table-text-medium-line-height);
+  font-weight: var(--input-table-text-medium-weight);
+}
+
+.input-field[data-priority="table"][data-size="large"] .input-element {
+  font-size: var(--input-table-text-large-size);
+  line-height: var(--input-table-text-large-line-height);
+  font-weight: var(--input-table-text-large-weight);
+}
+
 .input-helper-text {
   color: var(--input-helper-color);
   font-size: var(--font-label-small-size);
@@ -362,6 +387,11 @@
     &[data-priority="secondary"] {
       background-color: transparent;
     }
+
+    &[data-priority="table"] {
+      // table priority는 disabled 상태에서도 배경을 투명하게 유지한다.
+      background-color: transparent;
+    }
   }
 }
 

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

@@ -13,6 +13,16 @@
   --input-default-gap: var(--spacing-gap-4);
   --input-default-radius-base: var(--theme-radius-large-1);
   --input-tertiary-radius-base: var(--theme-radius-large-2);
+  --input-table-radius-base: 0;
+  --input-table-text-small-size: var(--font-body-xxsmall-size);
+  --input-table-text-small-line-height: var(--font-body-xxsmall-line-height);
+  --input-table-text-small-weight: var(--font-body-xxsmall-weight);
+  --input-table-text-medium-size: var(--font-body-xsmall-size);
+  --input-table-text-medium-line-height: var(--font-body-xsmall-line-height);
+  --input-table-text-medium-weight: var(--font-body-xsmall-weight);
+  --input-table-text-large-size: var(--font-body-small-size);
+  --input-table-text-large-line-height: var(--font-body-small-line-height);
+  --input-table-text-large-weight: var(--font-body-small-weight);
 
   /* Label/helper colors */
   --input-label-color: var(--color-label-standard);
@@ -33,6 +43,7 @@
   --input-border-width-emphasis: 1.4px;
   --input-border-active-color: var(--color-blue-80);
   --input-border-success-color: var(--color-blue-80);
+  --input-border-table-default-color: transparent;
   /* error는 Figma 44% alpha */
   --input-border-error-color: rgba(218, 29, 11, 0.44); // --color-feedback-error
   --input-border-disabled-color: var(--color-border-standard-cool-gray);

package/src/components/input/types/date.ts

@@ -7,6 +7,7 @@ import type {
   CalendarOnChange,
   CalendarValue,
 } from "../../calendar";
+import type { InputPriority } from "./foundation";
 
 /**
  * Calendar trigger(Input) 영역에서 필요한 속성 묶음.
@@ -17,6 +18,7 @@ import type {
  * @property {(event: MouseEvent<Element>) => void} [onClick] trigger 클릭 핸들러
  * @property {boolean} [disabled] disabled 여부
  * @property {string} [placeholder] trigger 내부 placeholder
+ * @property {InputPriority} [priority] trigger input priority
  */
 export interface InputCalendarTriggerProps {
   /**
@@ -43,6 +45,11 @@ export interface InputCalendarTriggerProps {
    * trigger 내부 placeholder
    */
   placeholder?: string;
+  /**
+   * trigger input priority
+   * - table일 때 Trigger는 left icon 배치를 사용한다.
+   */
+  priority?: InputPriority;
 }
 
 /**
@@ -69,6 +76,7 @@ export interface InputCalendarTriggerViewProps extends InputCalendarTriggerProps
  * @property {string} [placeholder] 트리거 placeholder
  * @property {boolean} [disabled] disabled 여부
  * @property {(event: MouseEvent<Element>) => void} [onClick] 트리거 클릭 핸들러
+ * @property {InputPriority} [priority] trigger input priority
  */
 export interface InputCalendarTriggerRenderProps {
   /**
@@ -95,6 +103,11 @@ export interface InputCalendarTriggerRenderProps {
    * 트리거 클릭 핸들러
    */
   onClick?: (event: MouseEvent<Element>) => void;
+  /**
+   * trigger input priority
+   * - table일 때 Trigger는 left icon 배치를 사용한다.
+   */
+  priority?: InputPriority;
 }
 
 /**
@@ -108,6 +121,7 @@ export interface InputCalendarTriggerRenderProps {
  * @property {boolean} [readOnly] 읽기 전용 여부
  * @property {boolean} [disabled] disabled 여부
  * @property {CalendarDatePickerProps} [datePickerProps] Mantine DatePicker 직접 옵션
+ * @property {InputPriority} [priority] trigger input priority
  * @property {ReactNode} [header] 커스텀 header 콘텐츠
  * @property {ReactNode} [footer] 커스텀 footer 콘텐츠
  * @property {unknown} [timePicker] TimePicker 확장용 예약 슬롯(현재 미구현)
@@ -168,6 +182,7 @@ export interface InputCalendarProps extends InputCalendarTriggerProps {
   timePicker?: unknown;
   /**
    * calendar 열림 제어 여부
+   * - 지정되면 제어형(open state controlled)으로 동작한다.
    */
   calendarOpened?: boolean;
   /**

package/src/components/input/types/foundation.ts

@@ -10,7 +10,7 @@ import type { FormFieldWidth } from "../../form/types/props";
 /**
  * input; priority option
  */
-export type InputPriority = "primary" | "secondary" | "tertiary";
+export type InputPriority = "primary" | "secondary" | "tertiary" | "table";
 /**
  * input; size option
  */
@@ -34,6 +34,7 @@ export const INPUT_PRIORITIES: InputPriority[] = [
   "primary",
   "secondary",
   "tertiary",
+  "table",
 ];
 /**
  * size 축은 높이/타이포/spacing을 결정한다.
@@ -56,11 +57,11 @@ type NativeInputProps = ComponentPropsWithoutRef<"input">;
 
 /**
  * input; icon options
- * @property {React.ReactNode} [left] input 왼쪽 컨텐츠
- * @property {React.ReactNode} [right] input 오른쪽 컨텐츠
- * @property {React.ReactNode} [clear] input reset버튼 커스텀 컨텐츠
- * @property {React.ReactNode} [success] input 입력상태 성공시 커스텀 컨텐츠
- * @property {React.ReactNode} [error] input 입력상태 에러시 커스텀 컨텐츠
+ * @property {ReactNode} [left] input 왼쪽 컨텐츠
+ * @property {ReactNode} [right] input 오른쪽 컨텐츠
+ * @property {ReactNode} [clear] input reset버튼 커스텀 컨텐츠
+ * @property {ReactNode} [success] input 입력상태 성공시 커스텀 컨텐츠
+ * @property {ReactNode} [error] input 입력상태 에러시 커스텀 컨텐츠
  */
 export interface InputIcon {
   /**
@@ -95,12 +96,13 @@ export interface InputIcon {
  * @property {string} [inputClassName]
  * @property {string} [boxClassName]
  * @property {UseFormRegisterReturn} [register]
- * @property {React.ReactNode} [left] input 왼쪽 컨텐츠
- * @property {React.ReactNode} [right] input 오른쪽 컨텐츠
- * @property {React.ReactNode} [clear] input reset버튼 커스텀 컨텐츠
- * @property {React.ReactNode} [success] input 입력상태 성공시 커스텀 컨텐츠
- * @property {React.ReactNode} [error] input 입력상태 에러시 커스텀 컨텐츠
+ * @property {ReactNode} [left] input 왼쪽 컨텐츠
+ * @property {ReactNode} [right] input 오른쪽 컨텐츠
+ * @property {ReactNode} [clear] input reset버튼 커스텀 컨텐츠
+ * @property {ReactNode} [success] input 입력상태 성공시 커스텀 컨텐츠
+ * @property {ReactNode} [error] input 입력상태 에러시 커스텀 컨텐츠
  * @property {FormFieldWidth} [width] width preset 옵션
+ * @property {InputState} [data-simulated-state] Storybook 시각 상태 강제용
  */
 export interface InputProps extends Omit<NativeInputProps, "size">, InputIcon {
   /**
@@ -147,6 +149,7 @@ export interface InputProps extends Omit<NativeInputProps, "size">, InputIcon {
  * @property {ReactNode} [clear] clear 버튼 아이콘
  * @property {ReactNode} [success] success 상태 아이콘
  * @property {ReactNode} [error] error 상태 아이콘
+ * @property {InputPriority} priority input priority
  * @property {InputState} state 현재 상태
  * @property {boolean} isDisabled disabled 여부
  * @property {boolean} isFocused focus 여부
@@ -171,6 +174,10 @@ export interface InputUtilityProps {
    * error 상태 아이콘
    */
   error?: ReactNode;
+  /**
+   * priority 축
+   */
+  priority: InputPriority;
   /**
    * 현재 input 상태
    */

package/src/components/input/utils/date.ts

@@ -51,7 +51,21 @@ export const serializeCalendarValue = (value: CalendarValue) => value ?? "";
  * @param {CalendarValue} value 현재 값
  * @returns {string} 표시 문자열
  */
-export const formatTriggerValue = (value: CalendarValue) => value ?? "";
+export const formatTriggerValue = (
+  value: CalendarValue,
+  format = DATE_FORMAT,
+) => {
+  if (!value) {
+    return "";
+  }
+
+  const parsed = dayjs(value);
+  if (!parsed.isValid()) {
+    return value;
+  }
+
+  return parsed.format(format);
+};
 
 /**
  * columns 값을 Mantine numberOfColumns와 맞춘다.

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

@@ -18,7 +18,7 @@ import type { SelectDefaultComponentProps } from "../types/props";
  * @param {SelectDropdownOption[]} [props.options] dropdown option 목록
  * @param {string[]} [props.selectedOptionIds] 선택된 option id 리스트
  * @param {(option: SelectDropdownOption) => void} [props.onOptionSelect] option 선택 콜백
- * @param {"primary" | "secondary"} [props.priority="primary"] priority 스케일
+ * @param {"primary" | "secondary" | "table"} [props.priority="primary"] priority 스케일
  * @param {"small" | "medium" | "large"} [props.size="medium"] size 스케일
  * @param {"default" | "focused" | "disabled"} [props.state="default"] 시각 상태
  * @param {boolean} [props.block] block 여부
@@ -65,6 +65,9 @@ const SelectDefault = forwardRef<HTMLElement, SelectDefaultComponentProps>(
     },
     ref,
   ) => {
+    // 변경: table priority는 width 미지정 시 기본 full width를 사용한다.
+    const resolvedBlock =
+      block || (priority === "table" && width === undefined);
     const resolvedSelectedIds = selectedOptionIds ?? [];
 
     const resolvedDisplayLabel =
@@ -96,7 +99,7 @@ const SelectDefault = forwardRef<HTMLElement, SelectDefaultComponentProps>(
     return (
       <Container
         className={clsx("select-trigger-container", className)}
-        block={block}
+        block={resolvedBlock}
         width={width}
       >
         <Dropdown.Root
@@ -112,7 +115,7 @@ const SelectDefault = forwardRef<HTMLElement, SelectDefaultComponentProps>(
               priority={priority}
               size={size}
               state={disabled ? "disabled" : state}
-              block={block}
+              block={resolvedBlock}
               open={dropdownOpen}
               disabled={disabled}
               buttonType={buttonType}

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

@@ -11,7 +11,7 @@ import type { SelectTriggerBaseProps } from "../../types/trigger";
  * Select Foundation; Trigger Base 슬롯 렌더링 컴포넌트
  * @component
  * @param {SelectTriggerBaseProps} props trigger base props
- * @param {"primary" | "secondary"} [props.priority="primary"] 스타일 우선순위
+ * @param {"primary" | "secondary" | "table"} [props.priority="primary"] 스타일 우선순위
  * @param {"small" | "medium" | "large"} [props.size="medium"] 높이 스케일
  * @param {"default" | "focused" | "disabled"} [props.state="default"] 시각 상태
  * @param {boolean} [props.open=false] dropdown open 상태

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

@@ -41,10 +41,13 @@ const SelectChevronSecondaryIcon: SelectIconSizeMap = {
  * Select; Chevron 아이콘 컬렉션
  * - primary (small, medium, large)
  * - secondary (small, medium, large)
+ * - table (small, medium, large)
  */
 const SelectChevronIcon: SelectIconPriorityMap = {
   primary: SelectChevronPrimaryIcon,
   secondary: SelectChevronSecondaryIcon,
+  // 변경: table priority는 secondary chevron 자산을 재사용한다.
+  table: SelectChevronSecondaryIcon,
 };
 
 /**
@@ -61,10 +64,12 @@ const SelectMultipleRemoveIcon: SelectIconSizeMap = {
 
 /**
  * Select; Remove 아이콘 컬렉션
- * - primary (small, medium, large)
+ * - primary/secondary/table (small, medium, large)
  */
 const SelectRemoveIcon: SelectIconRemovePriorityMap = {
   primary: SelectMultipleRemoveIcon,
+  secondary: SelectMultipleRemoveIcon,
+  table: SelectMultipleRemoveIcon,
 };
 
 /**

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

@@ -22,7 +22,7 @@ import { useSelectDropdownOpenState } from "../../hooks";
  * @param {(option: SelectDropdownOption) => void} [props.onOptionSelect] option 선택 콜백
  * @param {React.ReactNode} [props.displayLabel] fallback 라벨
  * @param {React.ReactNode} [props.placeholder] placeholder 텍스트
- * @param {"primary" | "secondary"} [props.priority="primary"] priority scale
+ * @param {"primary" | "secondary" | "table"} [props.priority="primary"] priority scale
  * @param {"small" | "medium" | "large"} [props.size="medium"] size scale
  * @param {"default" | "focused" | "disabled"} [props.state="default"] 시각 상태
  * @param {boolean} [props.block] block 여부
@@ -72,6 +72,9 @@ const SelectMultipleTrigger = forwardRef<
     },
     ref,
   ) => {
+    // 변경: table priority는 width 미지정 시 기본 full width를 사용한다.
+    const resolvedBlock =
+      block || (priority === "table" && width === undefined);
     // hook dependency 안정화를 위해 memoized selected id 배열을 유지한다.
     const resolvedSelectedIds = useMemo(
       () => selectedOptionIds ?? [],
@@ -128,7 +131,7 @@ const SelectMultipleTrigger = forwardRef<
     return (
       <Container
         className={clsx("select-trigger-multiple", className)}
-        block={block}
+        block={resolvedBlock}
         width={width}
       >
         <Dropdown.Root
@@ -144,7 +147,7 @@ const SelectMultipleTrigger = forwardRef<
               priority={priority}
               size={size}
               state={disabled ? "disabled" : state}
-              block={block}
+              block={resolvedBlock}
               open={dropdownOpen}
               multiple
               disabled={disabled}