@olundot/ui 0.20.0-next.10 → 0.20.0-next.11

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @olundot/ui
 
+## 0.20.0-next.11
+
+### Minor Changes
+
+- 708df3d: 떠 있는 `BulkActionBar`(`placement="floating"`, 기본값)를 알약 띠에서 카드로 바꾼다. 화면 폭과 관계없이 모양이 하나다.
+
+  - 1행: 개수(왼쪽, `role="status"` 그대로)와 선택 해제 ✕(오른쪽, ghost `IconButton` md). 2행: `summary`(있을 때만, 카드 안쪽 폭 전체, `keep-all`로 줄 바꿈, 자르지 않음). 3행: 작업 버튼(오른쪽 맞춤, 넘치면 다음 줄로 감싸며 오른쪽 맞춤 유지).
+  - 작업 버튼이 `Button` `appearance="outline"` `size="sm"`(30px)이 된다. 일반은 outline neutral, `variant: "destructive"`는 outline danger, 비활성은 Button의 disabled 꼴이다. 아이콘은 라벨 앞 그대로다. 터치 영역은 위아래로 4px씩만 넓혀(38px) 줄바꿈된 줄과 겹치지 않는다.
+  - 간격: 안쪽 여백 위 8 · 좌우 16 · 아래 12, 1행 32, 행 사이 8, 작업 줄 위 12, 버튼 사이 8. 모서리 `--radius-xl`. 폭 `min(360px, 자리 − 32px)`. 구분선이 없다.
+  - DOM 순서는 개수 → 작업 → ✕ 그대로다. ✕는 1행 오른쪽에 그려지지만 Tab으로는 맨 뒤다.
+  - 카드가 떠 있는 동안 문서 루트에 `--olun-bulk-bar-offset`(카드 높이 + 아래 간격 `16px + env(safe-area-inset-bottom)`)을 둔다. 언마운트, count 0으로 숨김, 높이 0(`display: none`)이면 지운다. 카드가 여럿이면 가장 큰 값이다.
+  - `ToastViewport`가 이 값보다 8px 위에 뜬다(값이 없으면 예전처럼 아래 24px).
+  - `DataLayout`의 `bulkBar` 자리가 아래 16px에 `env(safe-area-inset-bottom)`을 더한다. 떠 있는 카드와 같은 간격이다.
+
+  호환성 영향:
+
+  - floating에서 `trailing`을 받지 않는다. 타입에서 막히고(`placement`가 `"inline"`일 때만 허용), 타입을 우회해 넘기면 그리지 않고 개발 모드에서 경고를 한 번 낸다. 편집·완료 같은 컨트롤은 도구 줄 오른쪽 끝에 둔다. `placement="inline"`의 `trailing`은 그대로다.
+  - `BulkActionBarProps`가 `placement` 유니언 타입이 되어 `interface X extends BulkActionBarProps`가 타입 오류를 낸다. `type X = BulkActionBarProps & { … }`로 바꾼다.
+  - floating에서 `data-slot="bulk-action-bar-divider"`와 `data-slot="bulk-action-bar-clear"`가 없어진다. ✕는 `IconButton`의 `data-slot="icon-button"`이고 `aria-label="선택 해제"`로 찾는다. 작업 버튼의 `data-slot="bulk-action-bar-action"`과 `data-variant`는 그대로다.
+  - 카드 높이가 예전 알약(약 42px)보다 크다. 목록 아래 여백을 카드 높이에 맞추거나 `--olun-bulk-bar-offset`을 쓴다.
+  - `placement="inline"`(사용 중단 예정)은 바뀌지 않는다.
+
 ## 0.20.0-next.10
 
 ### Minor Changes

package/dist/index.d.ts

@@ -1238,21 +1238,17 @@ interface BulkActionBarAction {
     /** Disabled reason tooltip. */
     title?: string;
 }
-interface BulkActionBarProps extends React.HTMLAttributes<HTMLDivElement> {
+interface BulkActionBarBaseProps extends React.HTMLAttributes<HTMLDivElement> {
     count: number;
     actions: BulkActionBarAction[];
     onClear: () => void;
     emptyHint?: React.ReactNode;
-    /**
-     * `floating` (default) — pill stuck to the bottom of the list.
-     * `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?: "floating" | "inline";
     /** Count unit — `12명 선택됨`. Defaults to `개`. */
     unit?: string;
-    /** Next to the count — e.g. an "이 조건의 3,214명 모두 선택" link or a cap notice. */
+    /**
+     * 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.
+     */
     summary?: React.ReactNode;
     /**
      * Inline only: a shorter `summary` (e.g. "모두 선택") swapped in when the band is too
@@ -1266,28 +1262,44 @@ interface BulkActionBarProps extends React.HTMLAttributes<HTMLDivElement> {
      * Takes precedence over `emptyHint`; with neither, the bar hides at count 0.
      */
     idleContent?: React.ReactNode;
+}
+type BulkActionBarProps = 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;
+} | {
     /**
-     * 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. Same spot in both placements.
+     * `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.
  *
- * placement="floating" (default) is the bottom pill; placement="inline" is a
- * top-sticky band that replaces the status line under the toolbar, so it comes
- * before the rows in tab order. `unit` sets the count unit, `summary` holds a
- * suggestion next to the count, `idleContent` shows while nothing is selected,
- * `trailing` follows the clear button (right end of the idle line).
- * Inline, the band and the idle line are one 40px line: a long `summary` is
- * clipped or swapped for `compactSummary`, never wrapped.
+ * placement="floating" (default) is a card at the bottom of the list: the count
+ * with the clear (✕) button on its right, `summary` under it at full width, then
+ * the actions as outline sm Buttons aligned right, wrapping onto more lines when
+ * they do not fit. `variant: "destructive"` is outline danger. The card is
+ * min(360px, its slot − 32px) wide; while it is mounted the document root carries
+ * `--olun-bulk-bar-offset` (its height + bottom gap) 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.
  *
- * Low-chrome by design: actions are borderless text/icon buttons separated by
- * hairline dividers — not filled Button components. Destructive actions read as
- * error-toned text (var(--error)), not a red filled button. Two dividers are
- * always rendered: count↔actions and actions↔clear.
+ * `unit` sets the count unit, `idleContent` shows while nothing is selected.
  *
  * @example
  * <BulkActionBar count={sel.size} onClear={clear}

package/dist/index.js

@@ -2777,7 +2777,7 @@ var DataLayout = React17.forwardRef(
                   "div",
                   {
                     "data-slot": "data-layout-bulkbar",
-                    className: "pointer-events-none sticky bottom-[var(--space-4)] z-20 mt-[var(--space-2)] flex justify-center",
+                    className: "pointer-events-none sticky bottom-[calc(var(--space-4)+env(safe-area-inset-bottom))] z-20 mt-[var(--space-2)] flex justify-center",
                     children: /* @__PURE__ */ jsx16("div", { className: "flex w-full flex-col items-center [&>*:has([data-slot=bulk-action-bar])]:self-stretch [&>*:not(:has([data-slot=bulk-action-bar]))]:pointer-events-auto [&>*]:max-w-full [&_[data-slot=bulk-action-bar]]:pointer-events-auto", children: bulkBar })
                   }
                 ) : null
@@ -7639,8 +7639,8 @@ function useVirtualWindow({
     padBottom: 0
   });
   const desktopSize = React35.useRef(0);
-  const cardHeights = React35.useRef(null);
-  cardHeights.current ??= new CardHeights();
+  const cardHeights2 = React35.useRef(null);
+  cardHeights2.current ??= new CardHeights();
   const update = React35.useRef(() => void 0);
   const reported = React35.useRef("");
   const latest = React35.useRef({
@@ -7666,9 +7666,9 @@ function useVirtualWindow({
       extent = uniformExtent(size);
     } else {
       if (list) {
-        cardHeights.current.measure(list);
+        cardHeights2.current.measure(list);
       }
-      const { offsets, estimate } = cardHeights.current.offsets(rowIds);
+      const { offsets, estimate } = cardHeights2.current.offsets(rowIds);
       extent = measuredExtent(offsets, estimate);
     }
     latest.current = { count, layout, extent };
@@ -8348,6 +8348,35 @@ function ActionButton({ action }) {
     }
   );
 }
+function CardActionButton({ action }) {
+  const Icon = action.icon;
+  return /* @__PURE__ */ jsxs35(
+    Button,
+    {
+      appearance: "outline",
+      tone: action.variant === "destructive" ? "danger" : "neutral",
+      size: "sm",
+      className: "before:-inset-y-[5px]",
+      "data-slot": "bulk-action-bar-action",
+      "data-variant": action.variant ?? "default",
+      disabled: action.disabled,
+      title: action.title,
+      onClick: action.onClick,
+      children: [
+        Icon ? /* @__PURE__ */ jsx39(
+          Icon,
+          {
+            "aria-hidden": "true",
+            "data-slot": "bulk-action-bar-action-icon",
+            size: 16,
+            strokeWidth: 1.75
+          }
+        ) : null,
+        action.label
+      ]
+    }
+  );
+}
 function Divider() {
   return /* @__PURE__ */ jsx39(
     "span",
@@ -8390,24 +8419,24 @@ function ClearButton({ onClear }) {
     }
   );
 }
+var CLEAR_CLEARANCE = 32;
 var INLINE_HEIGHT = 40;
 var HIT_AREA = 44;
 var HIT_INSET = 8;
+var FLOATING_BOTTOM = "calc(var(--space-4) + env(safe-area-inset-bottom))";
 var floatingStyle = {
   position: "sticky",
-  bottom: "calc(var(--space-4) + env(safe-area-inset-bottom))",
+  bottom: FLOATING_BOTTOM,
   zIndex: 1100,
   margin: "0 auto",
   display: "flex",
-  minHeight: 32,
-  width: "fit-content",
-  maxWidth: "calc(100% - var(--space-8))",
-  alignItems: "center",
-  gap: "var(--space-2)",
-  borderRadius: 9999,
+  boxSizing: "border-box",
+  width: "min(360px, calc(100% - var(--space-8)))",
+  flexDirection: "column",
+  borderRadius: "var(--radius-xl)",
   border: "1px solid var(--border)",
   background: "var(--bg-raised)",
-  padding: "var(--space-1) var(--space-2)",
+  padding: "var(--space-2) var(--space-4) var(--space-3)",
   boxShadow: "var(--shadow-8)"
 };
 var inlineStyle = {
@@ -8449,7 +8478,49 @@ function warnInlineOnce() {
   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 cardHeights = /* @__PURE__ */ new Map();
+function writeOffset() {
+  const root = document.documentElement;
+  const height = Math.max(0, ...cardHeights.values());
+  if (height > 0) root.style.setProperty(OFFSET_PROPERTY, `calc(${height}px + ${FLOATING_BOTTOM})`);
+  else root.style.removeProperty(OFFSET_PROPERTY);
+}
+function reportHeight(key, card) {
+  const height = card.offsetHeight;
+  if (height > 0) cardHeights.set(key, height);
+  else cardHeights.delete(key);
+  writeOffset();
+}
 var useIsomorphicLayoutEffect2 = typeof window === "undefined" ? React36.useEffect : React36.useLayoutEffect;
+function useBottomOffset(card) {
+  const [key] = React36.useState(() => ({}));
+  React36.useEffect(() => {
+    if (!card) return;
+    const report = () => reportHeight(key, card);
+    report();
+    const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(report);
+    observer?.observe(card);
+    if (!observer) window.addEventListener("resize", report);
+    return () => {
+      observer?.disconnect();
+      if (!observer) window.removeEventListener("resize", report);
+      cardHeights.delete(key);
+      writeOffset();
+    };
+  }, [key, card]);
+  useIsomorphicLayoutEffect2(() => {
+    if (card && typeof ResizeObserver === "undefined") reportHeight(key, card);
+  });
+}
 function useCompactSummary(slot, enabled) {
   const [fullWidth, setFullWidth] = React36.useState(null);
   const measure = React36.useCallback(() => {
@@ -8487,7 +8558,9 @@ function BulkActionBar({
 }) {
   const inline = placement === "inline";
   if (inline) warnInlineOnce();
-  const trailingSlot = trailing !== void 0 && trailing !== null ? /* @__PURE__ */ jsx39(
+  const hasTrailing = trailing !== void 0 && trailing !== null;
+  if (!inline && hasTrailing) warnTrailingOnce();
+  const trailingSlot = inline && hasTrailing ? /* @__PURE__ */ jsx39(
     "div",
     {
       "data-slot": "bulk-action-bar-trailing",
@@ -8505,6 +8578,8 @@ function BulkActionBar({
     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",
@@ -8559,16 +8634,31 @@ function BulkActionBar({
     "span",
     {
       "data-slot": "bulk-action-bar-count",
-      style: {
-        paddingLeft: inline ? void 0 : "var(--space-2)",
+      style: inline ? {
         paddingRight: "var(--space-1)",
         fontFamily: "var(--font-sans)",
         fontSize: 13,
-        fontWeight: inline ? 600 : 500,
+        fontWeight: 600,
         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"
+        }
+      ),
       children: count > 0 ? `${count.toLocaleString("ko-KR")}${unit} \uC120\uD0DD\uB428` : emptyHint
     }
   );
@@ -8578,7 +8668,7 @@ function BulkActionBar({
       ref: setSummaryElement,
       "data-slot": "bulk-action-bar-summary",
       style: {
-        display: inline ? "flex" : "inline-flex",
+        display: "flex",
         minWidth: 0,
         alignItems: "center",
         columnGap: "var(--space-3)",
@@ -8601,27 +8691,30 @@ function BulkActionBar({
             whiteSpace: "nowrap",
             contain: "inline-size"
           }
-        ) : { flexWrap: "wrap", wordBreak: "keep-all" }
+        ) : (
+          // 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
     }
   ) : null;
-  const actionGroup = /* @__PURE__ */ jsx39(
-    "div",
-    {
-      "data-slot": "bulk-action-bar-actions",
-      style: {
-        display: "flex",
-        minWidth: 0,
-        flexWrap: inline ? "nowrap" : "wrap",
-        alignItems: "center",
-        justifyContent: "flex-end",
-        gap: 2
-      },
-      children: actions.map((action) => /* @__PURE__ */ jsx39(ActionButton, { action }, action.key))
-    }
-  );
   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",
       {
@@ -8686,6 +8779,7 @@ function BulkActionBar({
         "animate-[olun-bulk-action-bar-in_var(--dur-fast)_var(--ease-out)_both] motion-reduce:animate-none",
         className
       ),
+      ref: setCard,
       style: { ...floatingStyle, ...style },
       ...props,
       children: [
@@ -8697,8 +8791,8 @@ function BulkActionBar({
             style: {
               display: "flex",
               minWidth: 0,
-              alignItems: "center",
-              gap: "var(--space-2)"
+              flexDirection: "column",
+              rowGap: "var(--space-2)"
             },
             children: [
               countLabel,
@@ -8706,11 +8800,29 @@ function BulkActionBar({
             ]
           }
         ),
-        count > 0 && actions.length > 0 ? /* @__PURE__ */ jsx39(Divider, {}) : null,
-        actionGroup,
-        /* @__PURE__ */ jsx39(Divider, {}),
-        /* @__PURE__ */ jsx39(ClearButton, { onClear }),
-        trailingSlot
+        actions.length > 0 ? /* @__PURE__ */ jsx39(
+          "div",
+          {
+            "data-slot": "bulk-action-bar-actions",
+            style: {
+              display: "flex",
+              flexWrap: "wrap",
+              justifyContent: "flex-end",
+              gap: "var(--space-2)",
+              marginTop: "var(--space-3)"
+            },
+            children: actions.map((action) => /* @__PURE__ */ jsx39(CardActionButton, { action }, action.key))
+          }
+        ) : null,
+        /* @__PURE__ */ jsx39(
+          IconButton,
+          {
+            icon: X4,
+            "aria-label": "\uC120\uD0DD \uD574\uC81C",
+            onClick: onClear,
+            style: { position: "absolute", top: "var(--space-2)", right: "var(--space-2)" }
+          }
+        )
       ]
     }
   );
@@ -10321,7 +10433,8 @@ var toastVariants = cva21(
 );
 var toastViewportVariants = cva21(
   [
-    "fixed bottom-[var(--space-6)] right-[var(--space-6)] z-[var(--z-toast,50)]",
+    // A floating BulkActionBar publishes --olun-bulk-bar-offset while it is up; sit 8px above it.
+    "fixed bottom-[max(var(--space-6),calc(var(--olun-bulk-bar-offset,0px)+var(--space-2)))] right-[var(--space-6)] z-[var(--z-toast,50)]",
     "flex w-[min(420px,calc(100vw-var(--space-12)))] list-none flex-col gap-[var(--space-2)]",
     "pointer-events-none outline-none"
   ].join(" ")

package/package.json

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