@olundot/ui 0.24.0 → 0.25.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @olundot/ui
 
+## 0.25.0
+
+### Minor Changes
+
+- a848a56: DataTable `isRowSelectable`가 `'hidden'`을 돌려주면 그 행의 선택 칸을 비웁니다.
+
+  - 폴더처럼 처음부터 고를 대상이 아닌 행에 씁니다. 체크박스 없이 같은 폭의 빈 칸을 둬 열이 어긋나지 않습니다. 1024px 미만 카드도 제목이 같은 자리에서 시작합니다.
+  - 선택 규칙은 `false`(막힌 행)와 같습니다. 전체 선택, 선택 개수, `onSelectionChange`에서 빠지고 `selectedIds`에 들어 있어도 선택으로 그리지 않습니다.
+  - 반환 타입만 `boolean | 'hidden'`으로 넓혔습니다. `boolean`을 돌려주는 코드는 그대로 동작합니다.
+
 ## 0.24.0
 
 ### Minor Changes

package/dist/index.d.ts

@@ -66,7 +66,7 @@ type GhostDefaultActionStyle = {
 declare const buttonCva: (props?: ({
     appearance?: "filled" | "outline" | "ghost" | "link" | null | undefined;
     tone?: "primary" | "neutral" | "danger" | null | undefined;
-    size?: "xs" | "sm" | "md" | "lg" | "xl" | "default" | null | undefined;
+    size?: "default" | "md" | "xs" | "sm" | "lg" | "xl" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type ButtonVariantsOptions = Parameters<typeof buttonCva>[0];
 declare function buttonVariants(options?: ButtonVariantsOptions): string;
@@ -101,13 +101,13 @@ type CopyButtonProps = Omit<ButtonProps, 'appearance' | 'children' | 'loading' |
 declare const CopyButton: React.ForwardRefExoticComponent<CopyButtonProps & React.RefAttributes<HTMLButtonElement>>;
 
 declare const inputVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | null | undefined;
+    size?: "md" | "sm" | "lg" | null | undefined;
     fullWidth?: boolean | null | undefined;
     surface?: SurfaceLevel | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const inputMessageVariants: (props?: ({
-    state?: "error" | "success" | "default" | null | undefined;
-    size?: "sm" | "md" | "lg" | null | undefined;
+    state?: "default" | "error" | "success" | null | undefined;
+    size?: "md" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type InputState = NonNullable<VariantProps<typeof inputMessageVariants>["state"]>;
 /** Canonical size type (0.2.0+). Use `size` prop with these values. */
@@ -155,11 +155,11 @@ interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "
 declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
 
 declare const fileUploadZoneVariants: (props?: ({
-    size?: "compact" | "default" | null | undefined;
+    size?: "default" | "compact" | null | undefined;
     surface?: SurfaceLevel | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const fileUploadIconVariants: (props?: ({
-    size?: "compact" | "default" | null | undefined;
+    size?: "default" | "compact" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface FileUploadZoneProps extends Omit<React.LabelHTMLAttributes<HTMLLabelElement>, "onChange">, VariantProps<typeof fileUploadZoneVariants> {
     accept?: string;
@@ -203,12 +203,12 @@ interface InlineAlertProps extends Omit<HTMLAttributes<HTMLDivElement>, 'childre
 declare const InlineAlert: React.ForwardRefExoticComponent<InlineAlertProps & React.RefAttributes<HTMLDivElement>>;
 
 declare const textareaVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | null | undefined;
+    size?: "md" | "sm" | "lg" | null | undefined;
     fullWidth?: boolean | null | undefined;
     surface?: SurfaceLevel | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const textareaMessageVariants: (props?: ({
-    state?: "error" | "success" | "default" | null | undefined;
+    state?: "default" | "error" | "success" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type TextareaState = NonNullable<VariantProps<typeof textareaMessageVariants>["state"]>;
 /** Canonical size type (0.2.0+). Use `size` prop with these values. */
@@ -257,14 +257,14 @@ interface TextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaEl
 declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
 
 declare const selectVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | null | undefined;
+    size?: "md" | "sm" | "lg" | null | undefined;
     fullWidth?: boolean | null | undefined;
     appearance?: "inline" | "field" | null | undefined;
     surface?: SurfaceLevel | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const selectMessageVariants: (props?: ({
-    state?: "error" | "success" | "default" | null | undefined;
-    size?: "sm" | "md" | "lg" | null | undefined;
+    state?: "default" | "error" | "success" | null | undefined;
+    size?: "md" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type SelectState = NonNullable<VariantProps<typeof selectMessageVariants>["state"]>;
 /** Canonical size type (0.2.0+). Use `size` prop with these values. */
@@ -1207,9 +1207,11 @@ interface DataTableBaseProps<T> extends Omit<React.HTMLAttributes<HTMLDivElement
     /**
      * With `selectable`, `false` blocks a row's selection: its checkbox is disabled, it is never
      * drawn selected or passed to `onSelectionChange`, and select-all counts only the other rows.
+     * `'hidden'` blocks it the same way and draws no checkbox, for a row that is never selected (a
+     * folder among items); its slot stays empty at the checkbox width, so the columns line up.
      * Navigating, expanding and the row menu still work.
      */
-    isRowSelectable?: (row: T) => boolean;
+    isRowSelectable?: (row: T) => boolean | 'hidden';
     selectedIds?: Set<string>;
     onSelectionChange?: (ids: Set<string>) => void;
     /** Unit in the screen-reader selection message — `12명 선택됨`. Defaults to `개`. */
@@ -1789,7 +1791,7 @@ interface StatusDotProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'ch
 declare const StatusDot: React.ForwardRefExoticComponent<StatusDotProps & React.RefAttributes<HTMLSpanElement>>;
 
 declare const notificationBadgeVariants: (props?: ({
-    size?: "sm" | "md" | null | undefined;
+    size?: "md" | "sm" | null | undefined;
     placement?: "none" | "inline" | "corner" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type NotificationBadgeSize = NonNullable<VariantProps<typeof notificationBadgeVariants>['size']>;
@@ -1802,13 +1804,13 @@ declare const NotificationBadge: React.ForwardRefExoticComponent<NotificationBad
 
 declare const chipVariants: (props?: ({
     variant?: "filter" | "choice" | "removable" | "status-filter" | null | undefined;
-    tone?: "muted" | "accent" | "warning" | "success" | "neutral" | "danger" | null | undefined;
-    size?: "sm" | "md" | "lg" | null | undefined;
+    tone?: "accent" | "neutral" | "danger" | "success" | "warning" | "muted" | null | undefined;
+    size?: "md" | "sm" | "lg" | null | undefined;
     pressed?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const chipCountVariants: (props?: ({
-    tone?: "muted" | "accent" | "warning" | "success" | "neutral" | "danger" | null | undefined;
-    size?: "sm" | "md" | "lg" | null | undefined;
+    tone?: "accent" | "neutral" | "danger" | "success" | "warning" | "muted" | null | undefined;
+    size?: "md" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type ChipVariant = NonNullable<VariantProps<typeof chipVariants>["variant"]>;
 type ChipTone = NonNullable<VariantProps<typeof chipVariants>["tone"]>;
@@ -1822,7 +1824,7 @@ interface ChipProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>,
 declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLButtonElement>>;
 
 declare const emptyStateBaseVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | null | undefined;
+    size?: "md" | "sm" | "lg" | null | undefined;
     bordered?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type EmptyStateTone = "neutral" | "muted" | "raised";
@@ -1834,7 +1836,7 @@ interface EmptyStateVariantOptions extends VariantProps<typeof emptyStateBaseVar
 }
 declare function emptyStateVariants({ size, tone, surface, bordered, className, }?: EmptyStateVariantOptions): string;
 declare const emptyStateIconVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | null | undefined;
+    size?: "md" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type EmptyStateSize = NonNullable<VariantProps<typeof emptyStateBaseVariants>["size"]>;
 interface EmptyStateProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">, VariantProps<typeof emptyStateBaseVariants> {
@@ -1860,7 +1862,7 @@ interface EmptyStateProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "ti
 declare const EmptyState: React.ForwardRefExoticComponent<EmptyStateProps & React.RefAttributes<HTMLDivElement>>;
 
 declare const errorStateVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | null | undefined;
+    size?: "md" | "sm" | "lg" | null | undefined;
     surface?: SurfaceLevel | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ErrorStateProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">, VariantProps<typeof errorStateVariants> {
@@ -1880,7 +1882,7 @@ declare const skeletonVariants: (props?: ({
     shape?: "text" | "block" | "circle" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const spinnerVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | 16 | 24 | 32 | null | undefined;
+    size?: "md" | "sm" | "lg" | 16 | 24 | 32 | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof skeletonVariants> {
 }
@@ -1913,7 +1915,7 @@ interface SpinnerProps extends React.HTMLAttributes<HTMLSpanElement> {
 declare const Spinner: React.ForwardRefExoticComponent<SpinnerProps & React.RefAttributes<HTMLSpanElement>>;
 
 declare const iconButtonCva: (props?: ({
-    size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
+    size?: "md" | "xs" | "sm" | "lg" | "xl" | null | undefined;
     pressed?: boolean | null | undefined;
     appearance?: "filled" | "outline" | "ghost" | null | undefined;
     tone?: "primary" | "neutral" | "danger" | null | undefined;
@@ -1922,7 +1924,7 @@ type IconButtonSize = NonNullable<VariantProps<typeof iconButtonCva>["size"]>;
 type IconButtonVariantsOptions = NonNullable<Parameters<typeof iconButtonCva>[0]>;
 declare function iconButtonVariants(options?: IconButtonVariantsOptions): string;
 declare const iconButtonBadgeVariants: (props?: ({
-    tone?: "error" | "info" | "success" | null | undefined;
+    tone?: "error" | "success" | "info" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type IconButtonBadgeTone = NonNullable<VariantProps<typeof iconButtonBadgeVariants>["tone"]>;
 type IconButtonIcon = React.ComponentType<React.SVGProps<SVGSVGElement> & {
@@ -2185,7 +2187,7 @@ interface ActionFooterProps extends Omit<React.HTMLAttributes<HTMLDivElement>, '
 declare const ActionFooter: React.ForwardRefExoticComponent<ActionFooterProps & React.RefAttributes<HTMLDivElement>>;
 
 declare const toastVariants: (props?: ({
-    variant?: "error" | "warning" | "info" | "success" | "default" | null | undefined;
+    variant?: "default" | "error" | "success" | "info" | "warning" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const toastViewportVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
 type ToastVariant = NonNullable<VariantProps<typeof toastVariants>['variant']>;
@@ -2239,19 +2241,19 @@ interface ToastProviderProps extends React.HTMLAttributes<HTMLDivElement> {
 declare function ToastProvider({ children, maxToasts, className, ...props }: ToastProviderProps): react_jsx_runtime.JSX.Element;
 
 declare const otpFieldVariants: (props?: ({
-    size?: "compact" | "default" | null | undefined;
+    size?: "default" | "compact" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const otpFieldGroupVariants: (props?: ({
-    size?: "compact" | "default" | null | undefined;
+    size?: "default" | "compact" | null | undefined;
     fluid?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const otpCellVariants: (props?: ({
-    size?: "compact" | "default" | null | undefined;
+    size?: "default" | "compact" | null | undefined;
     fluid?: boolean | null | undefined;
     surface?: SurfaceLevel | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const otpFieldMessageVariants: (props?: ({
-    state?: "error" | "default" | null | undefined;
+    state?: "default" | "error" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type OTPFieldSize = NonNullable<VariantProps<typeof otpCellVariants>["size"]>;
 interface OTPFieldProps extends Omit<React.FieldsetHTMLAttributes<HTMLFieldSetElement>, "onChange" | "children" | "defaultValue" | "value">, VariantProps<typeof otpFieldVariants> {
@@ -2278,10 +2280,10 @@ interface OTPFieldProps extends Omit<React.FieldsetHTMLAttributes<HTMLFieldSetEl
 declare const OTPField: React.ForwardRefExoticComponent<OTPFieldProps & React.RefAttributes<HTMLFieldSetElement>>;
 
 declare const searchFieldVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | null | undefined;
+    size?: "md" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const searchFieldInputVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | null | undefined;
+    size?: "md" | "sm" | "lg" | null | undefined;
     hasClear?: boolean | null | undefined;
     surface?: SurfaceLevel | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
@@ -2305,7 +2307,7 @@ declare const checkboxVariants: (props?: ({
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const checkboxRootVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
 declare const checkboxBoxVariants: (props?: ({
-    size?: "sm" | "md" | null | undefined;
+    size?: "md" | "sm" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const checkboxGroupItemVariants: (props?: ({
     appearance?: "card" | "plain" | null | undefined;

package/dist/index.js

@@ -8653,8 +8653,19 @@ function RowCheckbox({
   columns,
   selected,
   selectionBlocked,
+  selectionHidden,
   onToggle
 }) {
+  if (selectionHidden) {
+    return /* @__PURE__ */ jsx39(
+      "span",
+      {
+        "aria-hidden": "true",
+        "data-slot": "data-table-row-checkbox-placeholder",
+        className: "block h-[calc(var(--space-4)+var(--space-1))] w-[calc(var(--space-4)+var(--space-1)+var(--space-3))] shrink-0"
+      }
+    );
+  }
   return /* @__PURE__ */ jsx39(
     Checkbox,
     {
@@ -8765,6 +8776,7 @@ function DataTableRowView({
   selectable,
   selected,
   selectionBlocked,
+  selectionHidden,
   visuallySelected,
   href,
   activatable,
@@ -8801,7 +8813,7 @@ function DataTableRowView({
       } : handlers.onClick,
       onKeyDown: handlers.onKeyDown,
       children: [
-        selectable ? /* @__PURE__ */ jsx39("div", { role: "cell", className: "px-[var(--space-4)]", children: /* @__PURE__ */ jsx39(RowCheckbox, { row, rowId, columns, selected, selectionBlocked, onToggle }) }) : null,
+        selectable ? /* @__PURE__ */ jsx39("div", { role: "cell", className: "px-[var(--space-4)]", children: /* @__PURE__ */ jsx39(RowCheckbox, { row, rowId, columns, selected, selectionBlocked, selectionHidden, onToggle }) }) : null,
         columns.map((column, columnIndex) => {
           const align = column.align ?? "left";
           const content = getRenderedCell(row, column);
@@ -8875,6 +8887,7 @@ function DataTableMobileCardView({
   selectable,
   selected,
   selectionBlocked,
+  selectionHidden,
   visuallySelected,
   href,
   activatable,
@@ -8901,7 +8914,7 @@ function DataTableMobileCardView({
   const navigable = linked || activatable;
   const opened = useOpenedOnce(expand?.expanded ?? false);
   const leading = selectable || content.leading != null ? /* @__PURE__ */ jsxs35("span", { className: "flex items-center gap-[var(--space-2)]", children: [
-    selectable ? /* @__PURE__ */ jsx39(RowCheckbox, { row, rowId, columns, selected, selectionBlocked, onToggle }) : null,
+    selectable ? /* @__PURE__ */ jsx39(RowCheckbox, { row, rowId, columns, selected, selectionBlocked, selectionHidden, onToggle }) : null,
     content.leading
   ] }) : void 0;
   let title = content.title;
@@ -9381,9 +9394,19 @@ function DataTableInner({
       mobile: () => mobileListRef.current ?? mobileRef.current
     }
   });
-  const blockedIds = new Set(
-    selectable && isRowSelectable ? data.filter((row) => !isRowSelectable(row)).map((row) => getRowId(row, keyField)) : []
-  );
+  const blockedIds = /* @__PURE__ */ new Set();
+  const hiddenIds = /* @__PURE__ */ new Set();
+  if (selectable && isRowSelectable) {
+    data.forEach((row) => {
+      const verdict = isRowSelectable(row);
+      if (verdict === "hidden") {
+        hiddenIds.add(getRowId(row, keyField));
+      }
+      if (!verdict || verdict === "hidden") {
+        blockedIds.add(getRowId(row, keyField));
+      }
+    });
+  }
   const selectableRowIds = rowIds.filter((id) => !blockedIds.has(id));
   const resolvedSelectedIds = selectedIds ?? /* @__PURE__ */ new Set();
   const selectedCount = selectableRowIds.filter((id) => resolvedSelectedIds.has(id)).length;
@@ -9506,6 +9529,7 @@ function DataTableInner({
   const getItemProps = (row, layout, index) => {
     const rowId = getRowId(row, keyField);
     const selectionBlocked = blockedIds.has(rowId);
+    const selectionHidden = hiddenIds.has(rowId);
     const selected = !selectionBlocked && resolvedSelectedIds.has(rowId);
     const href = rowHref?.(row);
     const linked = Boolean(linkComponent && href);
@@ -9516,6 +9540,7 @@ function DataTableInner({
       selectable,
       selected,
       selectionBlocked,
+      selectionHidden,
       visuallySelected: selected || rowId === activeRowId || rowId === contextMenu?.rowId,
       href,
       activatable: !linked && Boolean(href || onRowClick),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olundot/ui",
-  "version": "0.24.0",
+  "version": "0.25.0",
   "description": "OLUN. shared React UI components built on OLUN design tokens",
   "license": "MIT",
   "keywords": [