@bigtablet/design-system 3.4.0 → 3.4.1

package/dist/index.css

@@ -4507,6 +4507,17 @@
   border-radius: 8px;
   background: var(--bt-color-bg-solid);
 }
+.table_sr_only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
 .table {
   width: 100%;
   border-collapse: collapse;

package/dist/index.d.ts

@@ -1317,7 +1317,7 @@ declare const Divider: ({ weight, className, ...props }: DividerProps) => React$
 
 /** Drawer 가 미끄러져 들어오는 방향 (top 은 범위 외) */
 type DrawerPlacement = "left" | "right" | "bottom";
-interface DrawerProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "title"> {
+interface DrawerProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "title" | "onClick" | "onKeyDown" | "role"> {
     /** 드로어 열림 여부 */
     open: boolean;
     /** 드로어 닫기 콜백 */
@@ -1644,7 +1644,7 @@ interface MediaCardProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "t
 declare const MediaCard: ({ image, imagePosition, aspectRatio, heading, headingAs: HeadingTag, eyebrow, shadow, bordered, clickable, meta, children, className, ...props }: MediaCardProps) => React$1.JSX.Element;
 
 type ModalFooterAlign = "end" | "between" | "start";
-interface ModalProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "title"> {
+interface ModalProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "title" | "onClick" | "onKeyDown" | "role"> {
     /** 모달 열림 여부 */
     open: boolean;
     /** 모달 닫기 콜백 */
@@ -1897,6 +1897,14 @@ type TableProps<T extends object> = {
     className?: string;
     /** 행 클릭 콜백 */
     onRowClick?: (item: T, index: number) => void;
+    /**
+     * clickable 행(onRowClick)의 동작 설명. 각 clickable 행에 `aria-describedby` 로 연결된다 (기본값: "클릭 가능한 행").
+     * 행마다 셀 데이터가 이미 행을 식별하므로 여기엔 동작만 담으면 된다 (예: "선택하면 상세 항목으로 이동").
+     * `""`(빈 문자열)로 두면 힌트를 붙이지 않는다.
+     * `aria-label` 대신 `aria-describedby` 를 쓰는 이유: `<tr>` 의 `aria-label`/`role="button"` 은 행/셀의
+     * accessible name 을 덮거나 셀을 presentational 로 만들어 스크린리더가 셀 데이터를 못 읽는다.
+     */
+    rowClickHint?: string;
     /** 현재 정렬 상태 (제어형). `undefined` 는 정렬 없음 */
     sort?: TableSort;
     /** 정렬 가능한 헤더 클릭 시 발화 (none→asc→desc→none 순환). DS는 데이터를 직접 정렬하지 않음 - 정렬된 `data` 를 다시 전달해야 함 */
@@ -1911,7 +1919,7 @@ type TableProps<T extends object> = {
  * @param props 테이블 속성
  * @returns 테이블 컴포넌트
  */
-declare const Table: <T extends object>({ columns, data, keyExtractor, emptyMessage, isLoading, skeletonRows, size, hoverable, stickyHeader, ariaLabel, className, onRowClick, sort, onSortChange, selectAllAriaLabel, selectRowAriaLabel, selectable, rowKey, selectedKeys, onSelectionChange, }: TableProps<T>) => React$1.JSX.Element;
+declare const Table: <T extends object>({ columns, data, keyExtractor, emptyMessage, isLoading, skeletonRows, size, hoverable, stickyHeader, ariaLabel, className, onRowClick, rowClickHint, sort, onSortChange, selectAllAriaLabel, selectRowAriaLabel, selectable, rowKey, selectedKeys, onSelectionChange, }: TableProps<T>) => React$1.JSX.Element;
 
 type ThemeMode = "light" | "dark" | "system";
 type ResolvedTheme = "light" | "dark";

package/dist/index.js

@@ -2720,14 +2720,14 @@ var Drawer = ({
         animated.div,
         {
           ref: panelRef,
+          ...props,
           className: cn("drawer_panel", className),
-          style: { ...panelStyle, ...panelSizeStyle },
+          style: { ...props.style, ...panelStyle, ...panelSizeStyle },
           role: "document",
           onClick: (e) => e.stopPropagation(),
           onKeyDown: (e) => {
             if (e.key !== "Escape") e.stopPropagation();
           },
-          ...props,
           children: [
             showCloseIcon && onClose && /* @__PURE__ */ jsx(
               "button",
@@ -3166,14 +3166,14 @@ var Modal = ({
         animated.div,
         {
           ref: panelRef,
+          ...props,
           className: cn("modal_panel", className),
-          style: { ...panelStyle, width },
+          style: { ...props.style, ...panelStyle, width },
           role: "document",
           onClick: (e) => e.stopPropagation(),
           onKeyDown: (e) => {
             if (e.key !== "Escape") e.stopPropagation();
           },
-          ...props,
           children: [
             showCloseIcon && onClose && /* @__PURE__ */ jsx(
               "button",
@@ -3562,6 +3562,7 @@ var Table = ({
   ariaLabel,
   className,
   onRowClick,
+  rowClickHint = "\uD074\uB9AD \uAC00\uB2A5\uD55C \uD589",
   sort,
   onSortChange,
   selectAllAriaLabel = "\uC804\uCCB4 \uC120\uD0DD",
@@ -3580,6 +3581,7 @@ var Table = ({
   const isEmpty = !isLoading && data.length === 0;
   const getRowKey = (item, index) => rowKey?.(item) ?? String(index);
   const allRowKeys = selectable ? data.map((item, index) => getRowKey(item, index)) : [];
+  const rowClickHintId = React19.useId();
   const selectedSet = React19.useMemo(() => new Set(selectedKeys ?? []), [selectedKeys]);
   const selectedCount = allRowKeys.filter((key) => selectedSet.has(key)).length;
   const isAllSelected = allRowKeys.length > 0 && selectedCount === allRowKeys.length;
@@ -3692,7 +3694,7 @@ var Table = ({
               isSelected && "table_row_selected"
             ),
             "aria-selected": isSelected ? "true" : void 0,
-            role: onRowClick && !selectable ? "button" : void 0,
+            "aria-describedby": onRowClick && rowClickHint ? rowClickHintId : void 0,
             tabIndex: onRowClick ? 0 : void 0,
             onClick: onRowClick ? () => onRowClick(item, rowIndex) : void 0,
             onKeyDown: onRowClick ? (e) => {
@@ -3737,6 +3739,7 @@ var Table = ({
         );
       }) })
     ] }),
+    onRowClick && rowClickHint && /* @__PURE__ */ jsx("span", { id: rowClickHintId, className: "table_sr_only", children: rowClickHint }),
     isEmpty && /* @__PURE__ */ jsx("div", { className: "table_empty", role: "status", children: emptyMessage })
   ] });
 };

package/dist/styles/layout/_index.scss

@@ -49,4 +49,7 @@
   &:hover {
     box-shadow: 0 0 30px $color;
   }
-}
+}
+
+/* Overlay list scroll cap - dropdown/menu/select 등 오버레이 옵션 리스트의 최대 높이 */
+$overlay_list_max_height: 18rem;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@bigtablet/design-system",
-	"version": "3.4.0",
+	"version": "3.4.1",
 	"description": "Bigtablet Design System UI Components",
 	"type": "module",
 	"types": "dist/index.d.ts",