@uniai-fe/uds-primitives 0.3.52 → 0.3.54

package/dist/styles.css

@@ -533,7 +533,7 @@
   --select-table-border-default-color: var(--input-border-table-default-color);
   --select-table-border-focus-color: var(--input-border-active-color);
   --select-table-border-error-color: var(--input-border-error-color);
-  --select-table-border-disabled-color: var(--input-border-disabled-color);
+  --select-table-border-disabled-color: transparent;
   --select-table-border-readonly-color: transparent;
   --select-table-surface-color: transparent;
   --select-table-surface-disabled-color: var(--input-surface-disabled-color);

package/package.json

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

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

@@ -56,12 +56,16 @@ const SelectTriggerSelected = ({
 
   // 2) placeholder/label은 text input에 들어갈 수 있는 문자열로 정규화한다.
   const resolvedPlaceholder = toInputText(placeholder);
-  const resolvedLabelText = valueText || toInputText(label);
+  // 변경 설명: readOnly + customOptions 조합에서 valueText가 비어도 inputProps.value를 표시 문자열로 사용한다.
+  const resolvedInputValueText = toInputText(inputProps?.value as ReactNode);
+  const resolvedLabelText =
+    valueText || resolvedInputValueText || toInputText(label);
   const isLabelTextLike =
     typeof label === "string" || typeof label === "number";
   // 변경 설명: readOnly에서 non-text label을 직접 렌더링하되, placeholder 상태일 때는 input placeholder 경로를 유지한다.
+  // custom mode처럼 valueText가 있는 경우에는 input 렌더 경로를 유지해 값 표시를 보장한다.
   const shouldRenderReadonlyLabelNode =
-    readOnly && !isLabelTextLike && !isPlaceholder;
+    readOnly && !isLabelTextLike && !isPlaceholder && !resolvedLabelText;
 
   // 3) custom mode 활성 시에만 label input focus를 부여한다.
   useEffect(() => {

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

@@ -36,7 +36,7 @@
   --select-table-border-default-color: var(--input-border-table-default-color);
   --select-table-border-focus-color: var(--input-border-active-color);
   --select-table-border-error-color: var(--input-border-error-color);
-  --select-table-border-disabled-color: var(--input-border-disabled-color);
+  --select-table-border-disabled-color: transparent;
   --select-table-border-readonly-color: transparent;
   --select-table-surface-color: transparent;
   --select-table-surface-disabled-color: var(--input-surface-disabled-color);

package/src/components/table/markup/Container.tsx

@@ -7,6 +7,7 @@ import TableHead from "./foundation/Head";
 import TableTh from "./foundation/Th";
 import TableRoot from "./foundation/Root";
 import TableRow from "./foundation/Row";
+import { Slot } from "../../slot/markup";
 
 /**
  * Table Preset; 기본 Container 조합 컴포넌트
@@ -45,6 +46,8 @@ const TableContainer = forwardRef<HTMLTableElement, TableContainerProps>(
       isCustomBody = false,
       scrollable = false,
       scrollAxis = "x",
+      scrollAs = "div",
+      scrollProps,
       scrollClassName,
       footer,
       children,
@@ -153,14 +156,16 @@ const TableContainer = forwardRef<HTMLTableElement, TableContainerProps>(
     }
 
     return (
-      <div
+      <Slot.Base
+        as={scrollAs}
         className={clsx("table-scroll-wrapper", scrollClassName)}
         data-layout={tableProps?.layout ?? "line"}
         data-role={tableProps?.role ?? "table"}
         data-scroll-axis={scrollAxis}
+        {...scrollProps}
       >
         {tableNode}
-      </div>
+      </Slot.Base>
     );
   },
 );

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

@@ -1,5 +1,5 @@
-import type { ComponentPropsWithoutRef } from "react";
-import type { SlotTextProps } from "../../slot";
+import type { ComponentPropsWithoutRef, ElementType } from "react";
+import type { SlotComponentProps, SlotTextProps } from "../../slot";
 
 export const TABLE_CELL_ALIGN_OPTIONS = ["left", "center", "right"] as const;
 export const TABLE_CELL_ALIGN_Y_OPTIONS = ["top", "center", "bottom"] as const;
@@ -154,6 +154,8 @@ export interface TableColumnData<
  * @property {boolean} [isCustomBody] true면 body wrapper 없이 children을 직접 렌더링
  * @property {boolean} [scrollable=false] true면 외부 스크롤 래퍼를 추가한다.
  * @property {"x" | "y" | "both"} [scrollAxis="x"] scrollable일 때 스크롤 축
+ * @property {ElementType} [scrollAs="div"] scrollable wrapper element
+ * @property {Omit<SlotComponentProps<ElementType>, "as" | "children" | "className">} [scrollProps] scrollable wrapper native props
  * @property {string} [scrollClassName] 스크롤 래퍼 className
  * @property {React.ReactNode} [footer] footer 노드
  * @property {React.ReactNode} [children] body 콘텐츠
@@ -177,6 +179,17 @@ export interface TableContainerProps<
    * scrollable일 때 스크롤 축
    */
   scrollAxis?: TableScrollAxis;
+  /**
+   * scrollable wrapper element
+   */
+  scrollAs?: ElementType;
+  /**
+   * scrollable wrapper native props
+   */
+  scrollProps?: Omit<
+    SlotComponentProps<ElementType>,
+    "as" | "children" | "className"
+  >;
   /**
    * 스크롤 래퍼 className
    */