@olundot/ui 0.20.1 → 0.21.0

package/CHANGELOG.md

@@ -1,5 +1,41 @@
 # @olundot/ui
 
+## 0.21.0
+
+### Minor Changes
+
+- e5aadba: 호환성을 깨는 변경이다. `BulkActionBar`의 `placement="inline"`, `compactSummary`, `trailing`을 지웠다. 세 가지 모두 0.20에서 사용 중단으로 표시한 것이다.
+
+  - `placement`는 `"floating"`만 받는다. 넘기던 곳에서는 `placement`를 지운다.
+  - `compactSummary`와 `trailing`은 `inline`에서만 쓰였다. 넘기던 곳에서는 지운다.
+  - `DataTable`의 가상 목록 머리가 `inline` 바 아래로 내려가던 `top-[40px]` 보정을 지웠다.
+  - `idleContent`, `emptyHint`, `DataTable`의 `announceSelection`은 그대로다.
+
+### Patch Changes
+
+- 77acbcb: `AlertDialog`와 `ConfirmDialog`는 `description`과 본문이 모두 없으면 `aria-describedby`를 붙이지 않는다. 전에는 화면에 없는 요소의 id를 가리켰다. 제목을 설명으로 다시 쓰지 않으며, Radix의 개발 경고는 그대로 난다. 설명이나 본문이 있으면 지금처럼 그 요소를 가리킨다.
+- 77acbcb: `AlertDialog`(`ConfirmDialog` 포함)와 구조형 `Dialog` 폼 모드는 `open`이 `false`가 되면 `onConfirm`·`onSubmit`이 잡고 있던 실행 중 상태를 푼다. 소비자가 준 `loading`이 `true`면 그대로 잠긴다. 전에는 `onConfirm`·`onSubmit`이 끝날 때까지 남아, 그사이 다시 연 창의 확인 버튼이 로딩으로 돌고 취소·Escape가 막혔다가 앞 실행이 끝나면 창이 닫혔다.
+
+  - 닫히기 전에 시작한 실행은 취소하지 않고 끝까지 간다. 끝나도 다시 연 창을 닫지 않고, 실행 중 상태를 풀지 않으며, 실패를 `onError`로 넘기지 않는다. `onError`가 없으면 실패는 지금처럼 호출자에게 전파된다.
+  - 닫힌 동안에는 실행하지 않는다. 닫히는 애니메이션 중 남은 확인·제출 버튼을 눌러도 `onConfirm`·`onSubmit`을 부르지 않는다.
+  - 같은 열림 안에서 한 번만 실행, 실행 중 닫기 막기, 성공하면 한 번 닫기는 그대로다.
+  - 닫았다 다시 연 창에서 같은 요청을 다시 보내는 중복은 막지 않는다. 핸들러와 서버가 막는다.
+
+## 0.20.2
+
+### Patch Changes
+
+- 8a28822: `FilterToolbar layout="grid"`은 640px 미만에서 `filters`도 시트로 보낸다. 줄에는 검색, 접힌 필터 버튼, `actions`만 남고, 시트에는 `filters`를 순서대로 둔 뒤 `collapsible`을 둔다.
+
+  - 폭을 재기 전 첫 화면에서도 640px 미만이면 줄 필터를 펼치지 않는다. 컨테이너 쿼리로 숨기고, 폭을 잰 뒤에는 줄에 그리지 않는다.
+  - `collapsible` 없이 `filters`만 있어도 640px 미만에서 버튼과 시트가 생긴다.
+  - `activeLineFilterCount`: `filters` 중 적용한 조건 수. 640px 미만에서 버튼 배지, 버튼 이름, 적용 개수 줄의 개수에 더한다.
+  - `onClearLineFilters`: 640px 미만의 "해제"가 `onClearFilters`와 함께 부른다.
+  - 격자의 `filters`와 `collapsible` 컨트롤은 줄과 시트를 오가며 새로 그려지므로 값은 `value`로 넘긴다. `defaultValue`로 둔 값은 시트를 닫으면 남지 않는다.
+  - 두 prop을 주지 않으면 640px 미만 개수와 "해제"는 `collapsible` 조건만 다룬다. 640px 이상 격자와 `layout="flow"`는 그대로다.
+  - 격자에서 `collapseBelow="never"`도 `collapsible`을 줄에 펼치지 않는다.
+  - 격자는 툴바 폭을 컨테이너 쿼리와 같은 기준(내용 상자, CSS `zoom` 전)으로 잰다.
+
 ## 0.20.1
 
 ### Patch Changes

package/dist/index.d.ts

@@ -903,6 +903,10 @@ interface FilterToolbarProps extends React.HTMLAttributes<HTMLDivElement> {
     collapseBelow?: FilterToolbarCollapseBelow;
     activeFilterCount?: number;
     onClearFilters?: () => void;
+    /** grid: applied conditions among `filters`. Under 640px the count adds them. */
+    activeLineFilterCount?: number;
+    /** grid: under 640px 해제 calls it with `onClearFilters`. */
+    onClearLineFilters?: () => void;
     collapsedLabel?: string;
     resultSummary?: React.ReactNode;
     clearAction?: React.ReactNode;
@@ -1130,9 +1134,9 @@ interface DataTableBaseProps<T> extends Omit<React.HTMLAttributes<HTMLDivElement
     selectionUnit?: string;
     /**
      * `false` drops the built-in screen-reader selection message — when a
-     * `BulkActionBar placement="inline"` already announces the count (it is a status
-     * region), or when the real selection includes rows that are not loaded (the
-     * built-in message only counts loaded rows). Default `true`.
+     * `BulkActionBar` already announces the count (it is a status region), or when the
+     * real selection includes rows that are not loaded (the built-in message only
+     * counts loaded rows). Default `true`.
      */
     announceSelection?: boolean;
     activeRowId?: string;
@@ -1290,42 +1294,24 @@ interface BulkActionBarBaseProps extends React.HTMLAttributes<HTMLDivElement> {
     /** Count unit — `12명 선택됨`. Defaults to `개`. */
     unit?: string;
     /**
-     * Under the count in the floating card, next to it inline — e.g. an "이 조건의 3,214명
-     * 모두 선택" link or a cap notice. The card wraps it at full width, never clips it.
+     * Under the count — e.g. an "이 조건의 3,214명 모두 선택" link or a cap notice. The card
+     * wraps it at full width, never clips it.
      */
     summary?: React.ReactNode;
-    /**
-     * Inline only: a shorter `summary` (e.g. "모두 선택") swapped in when the band is too
-     * narrow to show `summary` on one line. Without it, `summary` is clipped, never wrapped.
-     *
-     * @deprecated Only `placement="inline"` uses it; removed together with `inline` in the next minor.
-     */
-    compactSummary?: React.ReactNode;
+    /** Removed in 0.21 with `placement="inline"`. */
+    compactSummary?: never;
+    /** Removed in 0.21 with `placement="inline"`. */
+    trailing?: never;
     /**
      * Shown instead of the bar while nothing is selected (e.g. `100 / 3,214명`).
      * Takes precedence over `emptyHint`; with neither, the bar hides at count 0.
      */
     idleContent?: React.ReactNode;
 }
-type BulkActionBarProps = BulkActionBarBaseProps & ({
+interface BulkActionBarProps extends BulkActionBarBaseProps {
     /** `floating` (default) — card stuck to the bottom of the list. */
     placement?: "floating";
-    /** Not taken by the floating card: edit-mode controls go at the right end of the toolbar. */
-    trailing?: never;
-} | {
-    /**
-     * `inline` — full-width band stuck to the top, placed where the status line sits
-     * under the toolbar. Render it BEFORE the list so it comes first in tab order.
-     * Deprecated: `inline` is removed in the next minor.
-     */
-    placement: "inline";
-    /**
-     * Inline only: after the clear (✕) button — e.g. an edit-mode "완료" button. On the
-     * idle line it sits at the right end, outside the `role="status"` region, so it is
-     * not re-read whenever `idleContent` changes.
-     */
-    trailing?: React.ReactNode;
-});
+}
 /**
  * OLUN BulkActionBar — multi-select table/list actions.
  *
@@ -1335,13 +1321,7 @@ type BulkActionBarProps = BulkActionBarBaseProps & ({
  * they do not fit. `variant: "destructive"` is outline danger. The card is
  * min(360px, its slot − 32px) wide; while it is near the viewport bottom the document root
  * carries `--olun-bulk-bar-offset` (viewport bottom → card top) for toasts to clear it.
- * DOM order stays count → actions → ✕. It takes no `trailing`.
- *
- * placement="inline" (deprecated) is a top-sticky band that replaces the status
- * line under the toolbar, so it comes before the rows in tab order. The band and
- * the idle line are one 40px line: a long `summary` is clipped or swapped for
- * `compactSummary`, never wrapped. Its actions are borderless text/icon buttons
- * between hairline dividers; `trailing` follows the clear button.
+ * DOM order stays count → actions → ✕.
  *
  * `unit` sets the count unit, `idleContent` shows while nothing is selected.
  *
@@ -1352,7 +1332,7 @@ type BulkActionBarProps = BulkActionBarBaseProps & ({
  *     { key: "del", label: "삭제", variant: "destructive", onClick: confirmDelete },
  *   ]} />
  */
-declare function BulkActionBar({ count, actions, onClear, emptyHint, placement, unit, summary, compactSummary, idleContent, trailing, className, style, ...props }: BulkActionBarProps): react_jsx_runtime.JSX.Element | null;
+declare function BulkActionBar({ count, actions, onClear, emptyHint, placement: _placement, compactSummary: _compactSummary, trailing: _trailing, unit, summary, idleContent, className, style, ...props }: BulkActionBarProps): react_jsx_runtime.JSX.Element | null;
 
 interface ConfirmDialogProps {
     open: boolean;

package/dist/index.js

@@ -3800,6 +3800,7 @@ import { Dialog as DialogPrimitive3 } from "radix-ui";
 // src/lib/use-overlay-action.ts
 import * as React22 from "react";
 function useOverlayAction({
+  open,
   action,
   onOpenChange,
   loading = false,
@@ -3808,7 +3809,14 @@ function useOverlayAction({
 }) {
   const [pending, setPending] = React22.useState(false);
   const busyRef = React22.useRef(false);
+  const runIdRef = React22.useRef(0);
   const isBusy = loading || pending;
+  React22.useEffect(() => {
+    if (open) return;
+    runIdRef.current += 1;
+    busyRef.current = false;
+    setPending(false);
+  }, [open]);
   const guardOpenChange = React22.useCallback(
     (nextOpen) => {
       if (!nextOpen && isBusy) {
@@ -3819,22 +3827,25 @@ function useOverlayAction({
     [isBusy, onOpenChange]
   );
   const run = React22.useCallback(async () => {
-    if (busyRef.current || loading || disabled) {
+    if (!open || busyRef.current || loading || disabled) {
       return;
     }
+    const runId = ++runIdRef.current;
     busyRef.current = true;
     setPending(true);
     try {
       await action();
-      onOpenChange(false);
+      if (runId === runIdRef.current) onOpenChange(false);
     } catch (error) {
       if (!onError) throw error;
-      onError(error);
+      if (runId === runIdRef.current) onError(error);
     } finally {
-      busyRef.current = false;
-      setPending(false);
+      if (runId === runIdRef.current) {
+        busyRef.current = false;
+        setPending(false);
+      }
     }
-  }, [action, disabled, loading, onError, onOpenChange]);
+  }, [action, disabled, loading, onError, onOpenChange, open]);
   return { isBusy, run, guardOpenChange };
 }
 
@@ -5019,6 +5030,7 @@ function StructuredDialog({
   const policy = OVERLAY_POLICY.dialog;
   const formMode = onSubmit !== void 0;
   const { isBusy, run, guardOpenChange } = useOverlayAction({
+    open,
     action: onSubmit ?? noAction,
     onOpenChange,
     loading: formMode && loading,
@@ -5326,6 +5338,7 @@ function AlertDialogFrame({
         className: overlayBoxClassName("alert"),
         onOpenAutoFocus,
         onCloseAutoFocus: returnFocus.onCloseAutoFocus,
+        ...description == null && children == null && { "aria-describedby": void 0 },
         children: [
           /* @__PURE__ */ jsx28(OverlayHeader, { kind: "alert", title, description }),
           children != null ? description != null ? /* @__PURE__ */ jsx28(OverlayBody, { kind: "alert", children }) : /* @__PURE__ */ jsx28(AlertDialogPrimitive2.Description, { asChild: true, children: /* @__PURE__ */ jsx28(OverlayBody, { kind: "alert", children }) }) : null,
@@ -5352,6 +5365,7 @@ function AlertDialog({
   acknowledgeLabel = "\uD655\uC778"
 }) {
   const { isBusy, run, guardOpenChange } = useOverlayAction({
+    open,
     action: onConfirm ?? noop,
     onOpenChange,
     loading,
@@ -5737,14 +5751,8 @@ var collapsibleClassNames = {
     trigger: "hidden"
   }
 };
-var gridCollapsibleClassNames = {
-  sm: { inline: "hidden", trigger: "" },
-  md: { inline: "hidden", trigger: "" },
-  lg: { inline: "hidden", trigger: "" },
-  never: { inline: "flex @[640px]:hidden", trigger: "hidden @[640px]:inline" }
-};
 var gridSearchClassName = "order-1 min-w-[min(160px,100%)] max-w-full flex-[1_1_0%] @[640px]:min-w-0 @[640px]:flex-[3_1_0%]";
-var gridFiltersClassName = "order-3 flex min-w-0 flex-[1_0_100%] flex-wrap items-center gap-[var(--space-2)] @[640px]:contents";
+var gridFiltersClassName = "order-3 hidden min-w-0 flex-[1_0_100%] flex-wrap items-center gap-[var(--space-2)] @[640px]:contents";
 var gridCellClassName = cn(
   "contents @[640px]:block @[640px]:order-3 @[640px]:min-w-0 @[640px]:flex-[3_1_0%]",
   "@[640px]:[&:has([data-slot=select-trigger])]:flex-[2_1_0%]",
@@ -5766,6 +5774,10 @@ function filterCells(node, prefix = "") {
     return React31.isValidElement(child) && child.type === React31.Fragment ? filterCells(child.props.children, `${key}/`) : [{ key, cell: child }];
   });
 }
+function contentWidth(element) {
+  const style = getComputedStyle(element);
+  return element.clientWidth - (parseFloat(style.paddingLeft) || 0) - (parseFloat(style.paddingRight) || 0);
+}
 function warnGridFilters(count) {
   if (typeof process === "undefined" || process.env.NODE_ENV === "production") return;
   console.warn(
@@ -5781,6 +5793,8 @@ var FilterToolbar = React31.forwardRef(
     collapseBelow = "lg",
     activeFilterCount: activeFilterCountProp,
     onClearFilters,
+    activeLineFilterCount,
+    onClearLineFilters,
     collapsedLabel = "\uD544\uD130",
     resultSummary,
     clearAction,
@@ -5796,6 +5810,7 @@ var FilterToolbar = React31.forwardRef(
       null
     );
     const [overlayOpen, setOverlayOpen] = React31.useState(false);
+    const rootRef = React31.useRef(null);
     const triggerRef = React31.useRef(null);
     const rowRef = React31.useRef(null);
     const chipsRef = React31.useRef(null);
@@ -5803,28 +5818,31 @@ var FilterToolbar = React31.forwardRef(
     const pendingFocusRef = React31.useRef(null);
     const setRootRefs = React31.useCallback(
       (element) => {
+        rootRef.current = element;
         setRootElement(element);
         if (typeof ref === "function") ref(element);
         else if (ref) ref.current = element;
       },
       [ref]
     );
+    const isGrid = layout === "grid";
     React31.useEffect(() => {
       if (!rootElement) return;
-      const updateWidth = () => {
-        setContainerWidth(rootElement.getBoundingClientRect().width);
+      const updateWidth = (entry) => {
+        setContainerWidth(
+          isGrid ? entry?.contentBoxSize?.[0]?.inlineSize ?? contentWidth(rootElement) : rootElement.getBoundingClientRect().width
+        );
       };
       updateWidth();
       if (typeof ResizeObserver === "undefined") return;
-      const observer = new ResizeObserver(updateWidth);
+      const observer = new ResizeObserver(([entry]) => updateWidth(entry));
       observer.observe(rootElement);
       return () => observer.disconnect();
-    }, [rootElement]);
+    }, [rootElement, isGrid]);
     const handleOverlayOpenChange = React31.useCallback((open) => {
       setOverlayOpen(open);
       if (!open) queueMicrotask(() => triggerRef.current?.focus());
     }, []);
-    const isGrid = layout === "grid";
     const gridCells = isGrid ? filterCells(filters) : [];
     const filterCellCount = gridCells.length;
     React31.useEffect(() => {
@@ -5866,33 +5884,67 @@ var FilterToolbar = React31.forwardRef(
     const hasAppliedFilters = activeFilterCount > 0;
     const hasAppliedChips = Boolean(appliedFilters && appliedFilters.length > 0);
     const usesSheet = containerWidth !== null && containerWidth < 640;
-    const collapseClasses = (isGrid ? gridCollapsibleClassNames : collapsibleClassNames)[collapseBelow];
-    const collapseTriggerLabel = hasAppliedFilters ? `${collapsedLabel}, ${activeFilterCount}\uAC1C \uC801\uC6A9` : collapsedLabel;
-    const clearFiltersButton = onClearFilters ? /* @__PURE__ */ jsx32(
+    const gridSheet = isGrid && Boolean(filters);
+    const linesInSheet = gridSheet && usesSheet;
+    const lineFilterCount = gridSheet ? activeLineFilterCount ?? 0 : 0;
+    const narrowFilterCount = activeFilterCount + lineFilterCount;
+    const hasCollapsed = Boolean(collapsible) || gridSheet;
+    const outgrownSheet = isGrid && !collapsible && containerWidth !== null && containerWidth >= 640 && overlayOpen;
+    React31.useEffect(() => {
+      if (!outgrownSheet) return;
+      setOverlayOpen(false);
+      const ownerDocument = rootElement?.ownerDocument;
+      const active = ownerDocument?.activeElement;
+      if (!ownerDocument || active && active !== ownerDocument.body && active.isConnected) return;
+      const cell = rowRef.current?.querySelector('[data-slot="filter-toolbar-cell"]');
+      [...cell?.querySelectorAll(focusableSelector) ?? []].find(canTakeFocus)?.focus();
+    }, [outgrownSheet, rootElement]);
+    const inlineClassName = isGrid ? "hidden" : collapsibleClassNames[collapseBelow].inline;
+    const triggerClassName = isGrid ? collapsible ? "" : "@[640px]:hidden" : collapsibleClassNames[collapseBelow].trigger;
+    const triggerCount = linesInSheet ? narrowFilterCount : activeFilterCount;
+    const collapseTriggerLabel = triggerCount > 0 ? `${collapsedLabel}, ${triggerCount}\uAC1C \uC801\uC6A9` : collapsedLabel;
+    const narrowOnlyCount = !hasAppliedFilters && narrowFilterCount > 0;
+    const countText = narrowFilterCount === activeFilterCount || narrowOnlyCount ? narrowFilterCount : /* @__PURE__ */ jsxs28(Fragment14, { children: [
+      /* @__PURE__ */ jsx32("span", { className: "@[640px]:hidden", children: narrowFilterCount }),
+      /* @__PURE__ */ jsx32("span", { className: "hidden @[640px]:inline", children: activeFilterCount })
+    ] });
+    const clearLineFilters = gridSheet ? onClearLineFilters : void 0;
+    const clearNarrow = onClearFilters && clearLineFilters ? () => {
+      onClearFilters();
+      clearLineFilters();
+    } : onClearFilters ?? clearLineFilters;
+    const clearFilters = () => {
+      const width = containerWidth ?? (rootRef.current ? contentWidth(rootRef.current) : null);
+      (width !== null && width < 640 ? clearNarrow : onClearFilters)?.();
+    };
+    const clearFiltersButton = (linesInSheet ? clearNarrow : onClearFilters) ? /* @__PURE__ */ jsx32(
       "button",
       {
         type: "button",
         "data-slot": "filter-toolbar-clear-filters",
         className: "cursor-pointer border-0 bg-transparent p-0 text-body-sm font-medium text-text-secondary no-underline",
-        onClick: onClearFilters,
+        onClick: clearFilters,
         children: "\uD574\uC81C"
       }
     ) : null;
-    const collapsedContent = collapsible ? /* @__PURE__ */ jsx32(
+    const collapsedContent = hasCollapsed ? /* @__PURE__ */ jsxs28(
       "div",
       {
         "data-slot": "filter-toolbar-collapsed-content",
         className: "flex flex-col gap-[var(--space-3)] [&>*]:w-full",
-        children: collapsible
+        children: [
+          linesInSheet ? filters : null,
+          collapsible
+        ]
       }
     ) : null;
-    const collapseTrigger = collapsible ? /* @__PURE__ */ jsxs28(
+    const collapseTrigger = hasCollapsed ? /* @__PURE__ */ jsxs28(
       "span",
       {
         "data-slot": "filter-toolbar-collapse-trigger",
         className: cn(
           "relative order-2 shrink-0 @[640px]:order-4",
-          collapseClasses.trigger
+          triggerClassName
         ),
         children: [
           /* @__PURE__ */ jsx32(
@@ -5907,16 +5959,17 @@ var FilterToolbar = React31.forwardRef(
               onClick: () => handleOverlayOpenChange(true)
             }
           ),
-          hasAppliedFilters ? /* @__PURE__ */ jsx32(
+          narrowFilterCount > 0 ? /* @__PURE__ */ jsx32(
             "span",
             {
               "aria-hidden": "true",
               "data-slot": "filter-toolbar-collapse-count",
               className: cn(
                 chipCountVariants({ tone: "accent", size: "md" }),
-                "pointer-events-none absolute right-0 top-0 translate-x-1/3 -translate-y-1/3"
+                "pointer-events-none absolute right-0 top-0 translate-x-1/3 -translate-y-1/3",
+                narrowOnlyCount && "@[640px]:hidden"
               ),
-              children: activeFilterCount
+              children: countText
             }
           ) : null
         ]
@@ -5952,7 +6005,7 @@ var FilterToolbar = React31.forwardRef(
                     children: search
                   }
                 ) : null,
-                collapsible && usesSheet ? collapseTrigger : null,
+                hasCollapsed && (usesSheet || !collapsible) ? collapseTrigger : null,
                 collapsible && !usesSheet ? /* @__PURE__ */ jsxs28(Popover, { open: overlayOpen, onOpenChange: handleOverlayOpenChange, children: [
                   /* @__PURE__ */ jsx32(PopoverAnchor, { asChild: true, children: collapseTrigger }),
                   overlayOpen ? /* @__PURE__ */ jsxs28(
@@ -5971,7 +6024,7 @@ var FilterToolbar = React31.forwardRef(
                     }
                   ) : null
                 ] }) : null,
-                filters ? /* @__PURE__ */ jsx32(
+                filters && !linesInSheet ? /* @__PURE__ */ jsx32(
                   "div",
                   {
                     "data-slot": "filter-toolbar-filters",
@@ -5993,7 +6046,7 @@ var FilterToolbar = React31.forwardRef(
                     "data-slot": "filter-toolbar-collapsible",
                     className: cn(
                       "order-5 min-w-0 items-center gap-[var(--space-2)]",
-                      collapseClasses.inline
+                      inlineClassName
                     ),
                     children: collapsible
                   }
@@ -6009,7 +6062,7 @@ var FilterToolbar = React31.forwardRef(
               ]
             }
           ) : null,
-          collapsible && usesSheet && overlayOpen ? /* @__PURE__ */ jsx32(
+          hasCollapsed && usesSheet && overlayOpen ? /* @__PURE__ */ jsx32(
             Sheet,
             {
               open: overlayOpen,
@@ -6070,28 +6123,31 @@ var FilterToolbar = React31.forwardRef(
               ]
             }
           ) : null,
-          hasAppliedFilters ? /* @__PURE__ */ jsxs28(
+          narrowFilterCount > 0 ? /* @__PURE__ */ jsxs28(
             "div",
             {
               "data-slot": "filter-toolbar-applied",
               className: cn(
                 "flex items-center gap-[var(--space-1)] text-[11px] text-text-tertiary",
-                hasAppliedChips && "@[640px]:hidden"
+                (hasAppliedChips || narrowOnlyCount) && "@[640px]:hidden"
               ),
               children: [
                 /* @__PURE__ */ jsxs28("span", { children: [
                   "\uD544\uD130 ",
-                  activeFilterCount,
+                  countText,
                   "\uAC1C \uC801\uC6A9"
                 ] }),
-                onClearFilters ? /* @__PURE__ */ jsxs28(Fragment14, { children: [
-                  /* @__PURE__ */ jsx32("span", { "aria-hidden": "true", children: " \xB7 " }),
+                clearNarrow ? /* @__PURE__ */ jsxs28(Fragment14, { children: [
+                  /* @__PURE__ */ jsx32("span", { "aria-hidden": "true", className: onClearFilters ? void 0 : "@[640px]:hidden", children: " \xB7 " }),
                   /* @__PURE__ */ jsx32(
                     "button",
                     {
                       type: "button",
-                      className: "cursor-pointer border-0 bg-transparent p-0 text-[11px] text-text-secondary no-underline",
-                      onClick: onClearFilters,
+                      className: cn(
+                        "cursor-pointer border-0 bg-transparent p-0 text-[11px] text-text-secondary no-underline",
+                        !onClearFilters && "@[640px]:hidden"
+                      ),
+                      onClick: clearFilters,
                       children: "\uD574\uC81C"
                     }
                   )
@@ -8490,10 +8546,8 @@ function DataTableInner({
                   role: "row",
                   className: cn(
                     "grid min-h-[40px] items-center bg-[var(--bg-raised)] text-[12px] font-semibold leading-snug text-text-tertiary",
-                    // Virtual lists are long: the header sticks inside the scroll container,
-                    // below an inline BulkActionBar band (40px, --z-sticky) rendered before
-                    // the table — band on top, header under it, rows beneath both.
-                    isVirtual && "sticky top-0 z-[2] [[data-slot=bulk-action-bar][data-placement=inline]:not([data-state=idle])~[data-slot=data-table]_&]:top-[40px]"
+                    // Virtual lists are long: the header sticks inside the scroll container.
+                    isVirtual && "sticky top-0 z-[2]"
                   ),
                   style: { gridTemplateColumns },
                   children: [
@@ -8635,51 +8689,6 @@ DataTable.displayName = "DataTable";
 import * as React36 from "react";
 import { X as X4 } from "lucide-react";
 import { jsx as jsx39, jsxs as jsxs35 } from "react/jsx-runtime";
-function ActionButton({ action }) {
-  const danger = action.variant === "destructive";
-  const off = action.disabled;
-  const Icon = action.icon;
-  return /* @__PURE__ */ jsxs35(
-    "button",
-    {
-      type: "button",
-      "data-slot": "bulk-action-bar-action",
-      "data-variant": action.variant ?? "default",
-      disabled: off,
-      title: action.title,
-      onClick: action.onClick,
-      className: cn(
-        "border-0 bg-transparent outline-none transition-[background-color,box-shadow,color] motion-reduce:transition-none",
-        "focus-visible:shadow-[0_0_0_2px_var(--focus-ring)]",
-        off ? "cursor-not-allowed text-text-disabled" : danger ? "cursor-pointer text-[var(--error)] hover:bg-[var(--error-bg)]" : "cursor-pointer text-text-secondary hover:bg-[var(--action-hover)] hover:text-foreground"
-      ),
-      style: {
-        display: "inline-flex",
-        alignItems: "center",
-        gap: 6,
-        height: 30,
-        padding: "0 10px",
-        borderRadius: "var(--radius-md)",
-        fontFamily: "var(--font-sans)",
-        fontSize: 13,
-        fontWeight: 500,
-        whiteSpace: "nowrap"
-      },
-      children: [
-        Icon ? /* @__PURE__ */ jsx39(
-          Icon,
-          {
-            "aria-hidden": "true",
-            "data-slot": "bulk-action-bar-action-icon",
-            size: 16,
-            strokeWidth: 1.75
-          }
-        ) : null,
-        action.label
-      ]
-    }
-  );
-}
 function CardActionButton({ action }) {
   const Icon = action.icon;
   return /* @__PURE__ */ jsxs35(
@@ -8709,52 +8718,8 @@ function CardActionButton({ action }) {
     }
   );
 }
-function Divider() {
-  return /* @__PURE__ */ jsx39(
-    "span",
-    {
-      "aria-hidden": "true",
-      "data-slot": "bulk-action-bar-divider",
-      style: {
-        width: 1,
-        height: 18,
-        flexShrink: 0,
-        background: "var(--border-subtle)"
-      }
-    }
-  );
-}
-function ClearButton({ onClear }) {
-  return /* @__PURE__ */ jsx39(
-    "button",
-    {
-      type: "button",
-      "aria-label": "\uC120\uD0DD \uD574\uC81C",
-      "data-slot": "bulk-action-bar-clear",
-      onClick: onClear,
-      className: cn(
-        "cursor-pointer border-0 bg-transparent text-text-secondary outline-none",
-        "transition-[background-color,box-shadow,color] motion-reduce:transition-none",
-        "hover:bg-[var(--action-hover)] hover:text-foreground",
-        "focus-visible:shadow-[0_0_0_2px_var(--focus-ring)]"
-      ),
-      style: {
-        display: "inline-flex",
-        width: 32,
-        height: 32,
-        flexShrink: 0,
-        alignItems: "center",
-        justifyContent: "center",
-        borderRadius: "var(--radius-md)"
-      },
-      children: /* @__PURE__ */ jsx39(X4, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" })
-    }
-  );
-}
 var CLEAR_CLEARANCE = 32;
-var INLINE_HEIGHT = 40;
-var HIT_AREA = 44;
-var HIT_INSET = 8;
+var IDLE_HEIGHT = 40;
 var FLOATING_BOTTOM = "calc(var(--space-4) + env(safe-area-inset-bottom))";
 var floatingStyle = {
   position: "sticky",
@@ -8771,28 +8736,10 @@ var floatingStyle = {
   padding: "var(--space-2) var(--space-4) var(--space-3)",
   boxShadow: "var(--shadow-8)"
 };
-var inlineStyle = {
-  position: "sticky",
-  top: 0,
-  zIndex: "var(--z-sticky)",
-  display: "flex",
-  boxSizing: "border-box",
-  height: INLINE_HEIGHT,
-  alignItems: "center",
-  gap: "var(--space-2)",
-  borderRadius: "var(--radius-md)",
-  border: "1px solid var(--border)",
-  background: "var(--bg-surface)",
-  padding: "0 var(--space-1) 0 var(--space-3)",
-  boxShadow: "var(--shadow-2)",
-  fontFamily: "var(--font-sans)",
-  fontSize: 13,
-  fontVariantNumeric: "tabular-nums"
-};
 var idleLineStyle = {
   display: "flex",
   boxSizing: "border-box",
-  height: INLINE_HEIGHT,
+  height: IDLE_HEIGHT,
   overflow: "hidden",
   alignItems: "center",
   columnGap: "var(--space-3)",
@@ -8802,22 +8749,6 @@ var idleLineStyle = {
   fontVariantNumeric: "tabular-nums",
   color: "var(--text-secondary)"
 };
-var warnedInline = false;
-function warnInlineOnce() {
-  if (warnedInline || typeof process === "undefined" || process.env.NODE_ENV === "production") {
-    return;
-  }
-  warnedInline = true;
-  console.warn('BulkActionBar: placement="inline" is deprecated and removed in the next minor. Use "floating".');
-}
-var warnedTrailing = false;
-function warnTrailingOnce() {
-  if (warnedTrailing || typeof process === "undefined" || process.env.NODE_ENV === "production") {
-    return;
-  }
-  warnedTrailing = true;
-  console.warn("BulkActionBar: the floating card ignores `trailing`. Put edit-mode controls at the right end of the toolbar.");
-}
 var OFFSET_PROPERTY = "--olun-bulk-bar-offset";
 var LIFT_ZONE = 204;
 var cardOffsets = /* @__PURE__ */ new Map();
@@ -8921,104 +8852,31 @@ function useBottomOffset(card) {
     if (card && typeof ResizeObserver === "undefined") reportOffset(key, card);
   });
 }
-function useCompactSummary(slot, enabled) {
-  const [fullWidth, setFullWidth] = React36.useState(null);
-  const measure = React36.useCallback(() => {
-    if (!slot) return;
-    setFullWidth((prev) => {
-      if (prev === null) return slot.scrollWidth > slot.clientWidth ? slot.scrollWidth : null;
-      return slot.clientWidth >= prev ? null : prev;
-    });
-  }, [slot]);
-  useIsomorphicLayoutEffect2(() => {
-    if (enabled) measure();
-  });
-  React36.useEffect(() => {
-    if (!enabled || !slot || typeof ResizeObserver === "undefined") return;
-    const observer = new ResizeObserver(measure);
-    observer.observe(slot);
-    return () => observer.disconnect();
-  }, [enabled, slot, measure]);
-  return enabled && fullWidth !== null;
-}
 function BulkActionBar({
   count,
   actions,
   onClear,
   emptyHint,
-  placement = "floating",
+  // Removed props are dropped here so a spread or untyped caller never leaks them to the DOM.
+  placement: _placement,
+  compactSummary: _compactSummary,
+  trailing: _trailing,
   unit = "\uAC1C",
   summary,
-  compactSummary,
   idleContent,
-  trailing,
   className,
   style,
   ...props
 }) {
-  const inline = placement === "inline";
-  if (inline) warnInlineOnce();
-  const hasTrailing = trailing !== void 0 && trailing !== null;
-  if (!inline && hasTrailing) warnTrailingOnce();
-  const trailingSlot = inline && hasTrailing ? /* @__PURE__ */ jsx39(
-    "div",
-    {
-      "data-slot": "bulk-action-bar-trailing",
-      style: {
-        display: "flex",
-        flexShrink: 0,
-        alignItems: "center",
-        gap: "var(--space-2)"
-      },
-      children: trailing
-    }
-  ) : null;
-  const [summaryElement, setSummaryElement] = React36.useState(null);
-  const compact = useCompactSummary(
-    summaryElement,
-    inline && compactSummary !== void 0 && compactSummary !== null
-  );
   const [card, setCard] = React36.useState(null);
   useBottomOffset(card);
-  if (count === 0 && idleContent !== void 0 && trailingSlot) {
-    return /* @__PURE__ */ jsxs35(
-      "div",
-      {
-        "data-slot": "bulk-action-bar",
-        "data-placement": placement,
-        "data-state": "idle",
-        className,
-        style: { ...idleLineStyle, overflow: "visible", ...style },
-        ...props,
-        children: [
-          /* @__PURE__ */ jsx39(
-            "div",
-            {
-              role: "status",
-              "data-slot": "bulk-action-bar-idle",
-              style: {
-                display: "flex",
-                flex: "1 1 auto",
-                minWidth: 0,
-                alignItems: "center",
-                columnGap: "var(--space-3)",
-                overflow: "hidden"
-              },
-              children: idleContent
-            }
-          ),
-          trailingSlot
-        ]
-      }
-    );
-  }
   if (count === 0 && idleContent !== void 0) {
     return /* @__PURE__ */ jsx39(
       "div",
       {
         role: "status",
         "data-slot": "bulk-action-bar",
-        "data-placement": placement,
+        "data-placement": "floating",
         "data-state": "idle",
         className,
         style: { ...idleLineStyle, ...style },
@@ -9034,38 +8892,25 @@ function BulkActionBar({
     "span",
     {
       "data-slot": "bulk-action-bar-count",
-      style: inline ? {
-        paddingRight: "var(--space-1)",
+      style: {
+        display: "flex",
+        minHeight: 32,
+        alignItems: "center",
+        paddingRight: CLEAR_CLEARANCE,
         fontFamily: "var(--font-sans)",
         fontSize: 13,
-        fontWeight: 600,
+        fontWeight: 500,
         fontVariantNumeric: "tabular-nums",
         color: "var(--text-primary)",
-        whiteSpace: "nowrap"
-      } : (
-        // First row, 32px like the ✕ beside it; the right padding keeps text clear of it,
-        // and a long unbroken unit or hint breaks instead of running under it.
-        {
-          display: "flex",
-          minHeight: 32,
-          alignItems: "center",
-          paddingRight: CLEAR_CLEARANCE,
-          fontFamily: "var(--font-sans)",
-          fontSize: 13,
-          fontWeight: 500,
-          fontVariantNumeric: "tabular-nums",
-          color: "var(--text-primary)",
-          wordBreak: "keep-all",
-          overflowWrap: "anywhere"
-        }
-      ),
+        wordBreak: "keep-all",
+        overflowWrap: "anywhere"
+      },
       children: count > 0 ? `${count.toLocaleString("ko-KR")}${unit} \uC120\uD0DD\uB428` : emptyHint
     }
   );
   const summarySlot = summary !== void 0 && summary !== null ? /* @__PURE__ */ jsx39(
     "span",
     {
-      ref: setSummaryElement,
       "data-slot": "bulk-action-bar-summary",
       style: {
         display: "flex",
@@ -9075,98 +8920,15 @@ function BulkActionBar({
         fontFamily: "var(--font-sans)",
         fontSize: 13,
         color: "var(--text-secondary)",
-        ...inline ? (
-          // inline-size containment: the summary never widens the band's parent. The
-          // slot clips text, so it is as tall as an IconButton's hit area (overhanging
-          // the 40px band) and has that inset as its left gutter: a compact IconButton
-          // keeps its full 44px target. The right gutter stays 3px (focus ring) so
-          // clipped text keeps clear of the controls.
-          {
-            flex: "1 1 0",
-            alignSelf: "center",
-            height: HIT_AREA,
-            margin: `0 -3px 0 -${HIT_INSET}px`,
-            padding: `0 3px 0 ${HIT_INSET}px`,
-            overflow: "hidden",
-            whiteSpace: "nowrap",
-            contain: "inline-size"
-          }
-        ) : (
-          // Its own row at the card's full inner width; wraps, never clips.
-          { flexWrap: "wrap", lineHeight: 1.5, wordBreak: "keep-all", overflowWrap: "anywhere" }
-        )
+        // Its own row at the card's full inner width; wraps, never clips.
+        flexWrap: "wrap",
+        lineHeight: 1.5,
+        wordBreak: "keep-all",
+        overflowWrap: "anywhere"
       },
-      children: compact ? compactSummary : summary
+      children: summary
     }
   ) : null;
-  if (inline) {
-    const actionGroup = /* @__PURE__ */ jsx39(
-      "div",
-      {
-        "data-slot": "bulk-action-bar-actions",
-        style: {
-          display: "flex",
-          minWidth: 0,
-          flexWrap: "nowrap",
-          alignItems: "center",
-          justifyContent: "flex-end",
-          gap: 2
-        },
-        children: actions.map((action) => /* @__PURE__ */ jsx39(ActionButton, { action }, action.key))
-      }
-    );
-    return /* @__PURE__ */ jsxs35(
-      "div",
-      {
-        role: "toolbar",
-        "aria-label": "\uC120\uD0DD \uD56D\uBAA9 \uC77C\uAD04 \uC791\uC5C5",
-        "data-slot": "bulk-action-bar",
-        "data-placement": "inline",
-        className,
-        style: { ...inlineStyle, ...style },
-        ...props,
-        children: [
-          /* @__PURE__ */ jsxs35(
-            "div",
-            {
-              role: "status",
-              "data-slot": "bulk-action-bar-state",
-              style: {
-                display: "flex",
-                flex: "1 1 auto",
-                minWidth: 0,
-                alignItems: "center",
-                columnGap: "var(--space-3)"
-              },
-              children: [
-                countLabel,
-                summarySlot
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs35(
-            "div",
-            {
-              "data-slot": "bulk-action-bar-controls",
-              style: {
-                display: "flex",
-                marginLeft: "auto",
-                alignItems: "center",
-                gap: "var(--space-1)"
-              },
-              children: [
-                count > 0 && actions.length > 0 ? /* @__PURE__ */ jsx39(Divider, {}) : null,
-                actionGroup,
-                /* @__PURE__ */ jsx39(Divider, {}),
-                /* @__PURE__ */ jsx39(ClearButton, { onClear })
-              ]
-            }
-          ),
-          trailingSlot
-        ]
-      }
-    );
-  }
   return /* @__PURE__ */ jsxs35(
     "div",
     {

package/package.json

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