@olundot/ui 0.23.0 → 0.23.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @olundot/ui
 
+## 0.23.1
+
+### Patch Changes
+
+- e2448e1: `BulkActionBar`의 작업 줄이 맨 앞 작업만 남겨도 카드에 들어가지 않을 때, 이동 버튼이 보이면 키 표시를 먼저 숨긴다. 그래도 넘치면 맨 앞 작업도 더보기 메뉴로 옮긴다. 375px 폭에서 이동 버튼이 카드 왼쪽 밖으로 나가던 문제를 고친다. 키 표시를 숨겨도 라벨, 접근 이름, `aria-keyshortcuts`는 그대로다. 이동 버튼이 보이지 않을 때는 기존처럼 맨 앞 작업 하나를 남긴다.
+
 ## 0.23.0
 
 ### Minor Changes

package/dist/index.d.ts

@@ -1396,7 +1396,8 @@ interface BulkActionBarProps extends BulkActionBarBaseProps {
  * with the clear (✕) button on its right, `summary` under it at full width, then
  * one line of outline sm Buttons: the move button back to the list at the left (shown
  * only while keyboard focus is in the card), the actions at the right. A line that does
- * not fit folds actions into a ⋯ menu from the end. `variant: "destructive"` is outline danger. The card is
+ * not fit folds actions into a ⋯ menu from the end, then hides the move button's key caps, then
+ * folds the first action too. `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.
  * The card is a named region around a toolbar; DOM order is count → move → actions → ⋯ → ✕.

package/dist/index.js

@@ -9798,6 +9798,7 @@ var visuallyHiddenStyle = {
 function MoveButton({
   mac,
   shown,
+  keys,
   onMove
 }) {
   return /* @__PURE__ */ jsxs36(
@@ -9805,7 +9806,11 @@ function MoveButton({
     {
       appearance: "outline",
       size: "sm",
-      className: "mr-auto shrink-0 pr-[var(--space-2)] before:-inset-y-[5px] [@media(hover:none)_and_(pointer:coarse)]:hidden",
+      className: cn(
+        "mr-auto shrink-0",
+        keys && "pr-[var(--space-2)]",
+        "before:-inset-y-[5px] [@media(hover:none)_and_(pointer:coarse)]:hidden"
+      ),
       style: shown ? void 0 : visuallyHiddenStyle,
       "data-slot": "bulk-action-bar-move",
       "data-hidden": shown ? void 0 : "",
@@ -9814,23 +9819,32 @@ function MoveButton({
       onClick: onMove,
       children: [
         /* @__PURE__ */ jsx40("span", { "data-slot": "bulk-action-bar-move-label", children: TO_LIST_LABEL }),
-        /* @__PURE__ */ jsxs36("span", { "aria-hidden": "true", "data-slot": "bulk-action-bar-keys", style: { display: "inline-flex", gap: "var(--space-1)" }, children: [
-          /* @__PURE__ */ jsx40("kbd", { style: keyCapStyle, children: mac ? "\u2303" : "Ctrl" }),
-          /* @__PURE__ */ jsx40("kbd", { style: keyCapStyle, children: "." })
-        ] })
+        /* @__PURE__ */ jsxs36(
+          "span",
+          {
+            "aria-hidden": "true",
+            "data-slot": "bulk-action-bar-keys",
+            style: { display: "inline-flex", gap: "var(--space-1)", ...keys ? void 0 : foldedStyle },
+            children: [
+              /* @__PURE__ */ jsx40("kbd", { style: keyCapStyle, children: mac ? "\u2303" : "Ctrl" }),
+              /* @__PURE__ */ jsx40("kbd", { style: keyCapStyle, children: "." })
+            ]
+          }
+        )
       ]
     }
   );
 }
-var sameFold = (a, b) => a !== null && a.folded === b.folded && a.texts.join("\n") === b.texts.join("\n");
+var sameFold = (a, b) => a !== null && a.folded === b.folded && a.keys === b.keys && a.texts.join("\n") === b.texts.join("\n");
 var ROW_GAP = 8;
 var MORE_WIDTH = 30;
 var MOVE_EDGES = 2 + 12 + 6 + 8;
+var MOVE_EDGES_NO_KEYS = 2 + 12 + 12;
 function measureFold(row, actionCount) {
   const buttons = Array.from(row.querySelectorAll('[data-slot="bulk-action-bar-action"]'));
   const texts = buttons.map((node) => node.textContent ?? "");
   const available = row.clientWidth;
-  if (available === 0) return { folded: 0, texts };
+  if (available === 0) return { folded: 0, keys: true, texts };
   const scale = row.getBoundingClientRect().width / available || 1;
   const width = (node) => (node?.getBoundingClientRect().width ?? 0) / scale;
   const move = row.querySelector('[data-slot="bulk-action-bar-move"]');
@@ -9838,15 +9852,17 @@ function measureFold(row, actionCount) {
   const label = hasMove ? width(row.querySelector('[data-slot="bulk-action-bar-move-label"]')) : 0;
   const keys = hasMove ? width(row.querySelector('[data-slot="bulk-action-bar-keys"]')) : 0;
   const actions = buttons.map(width);
-  const need = (folded2) => {
+  const fits = (folded2, withKeys) => {
     const items = actions.slice(0, actionCount - folded2);
-    if (hasMove) items.unshift(keys + label + MOVE_EDGES);
+    if (hasMove) items.unshift(withKeys ? keys + label + MOVE_EDGES : label + MOVE_EDGES_NO_KEYS);
     if (folded2 > 0) items.push(MORE_WIDTH);
-    return items.reduce((sum, item) => sum + item, 0) + ROW_GAP * Math.max(0, items.length - 1);
+    return items.reduce((sum, item) => sum + item, 0) + ROW_GAP * Math.max(0, items.length - 1) <= available + 0.5;
   };
   let folded = 0;
-  while (folded < actionCount - 1 && need(folded) > available + 0.5) folded += 1;
-  return { folded, texts };
+  while (folded < actionCount - 1 && !fits(folded, true)) folded += 1;
+  if (!hasMove || fits(folded, true)) return { folded, keys: true, texts };
+  while (folded < actionCount && !fits(folded, false)) folded += 1;
+  return { folded, keys: false, texts };
 }
 var CLEAR_CLEARANCE = 32;
 var IDLE_HEIGHT = 40;
@@ -10037,7 +10053,7 @@ function BulkActionBar({
     activeRef.current = active;
     scopePropRef.current = shortcutScope;
     menuOpenRef.current = menuOpen;
-    menuKeysRef.current = actions.slice(actions.length - Math.min(fold?.folded ?? 0, Math.max(0, actions.length - 1))).map((action) => action.key);
+    menuKeysRef.current = actions.slice(actions.length - Math.min(fold?.folded ?? 0, actions.length)).map((action) => action.key);
   });
   const toBar = React38.useCallback(() => {
     const node = cardRef.current;
@@ -10210,7 +10226,8 @@ function BulkActionBar({
       moreLostFocusRef.current = false;
       if (!focused || focused === document.body) {
         const shown = (button) => !button.disabled && !button.hasAttribute("data-folded");
-        const back = buttons.find((button, i) => actions[i]?.key === foldedFocusRef.current && shown(button)) ?? buttons.find(shown);
+        const move = row.querySelector('[data-slot="bulk-action-bar-move"]');
+        const back = buttons.find((button, i) => actions[i]?.key === foldedFocusRef.current && shown(button)) ?? buttons.find(shown) ?? (move && !move.hasAttribute("data-hidden") && isShown(move) ? move : null) ?? clearRef.current;
         back?.focus();
       }
       foldedFocusRef.current = null;
@@ -10300,7 +10317,7 @@ function BulkActionBar({
     }
   ) : null;
   const showMove = active;
-  const folded = Math.min(fold?.folded ?? 0, Math.max(0, actions.length - 1));
+  const folded = Math.min(fold?.folded ?? 0, actions.length);
   const shownCount = actions.length - folded;
   const menuItems = actions.slice(shownCount).map((action, i) => ({
     id: action.key,
@@ -10373,7 +10390,7 @@ function BulkActionBar({
                     marginTop: "var(--space-3)"
                   },
                   children: [
-                    showMove ? /* @__PURE__ */ jsx40(MoveButton, { mac, shown: keyboardIn, onMove: toList }) : null,
+                    showMove ? /* @__PURE__ */ jsx40(MoveButton, { mac, shown: keyboardIn, keys: fold?.keys ?? true, onMove: toList }) : null,
                     actions.map((action, index) => /* @__PURE__ */ jsx40(CardActionButton, { action, folded: index >= shownCount }, action.key)),
                     folded > 0 ? /* @__PURE__ */ jsx40(
                       ActionMenu,

package/package.json

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