@duro-app/ui 4.3.0 → 4.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duro-app/ui",
-  "version": "4.3.0",
+  "version": "4.4.0",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -66,7 +66,7 @@
   },
   "dependencies": {
     "@tanstack/react-virtual": "^3.14.6",
-    "@duro-app/tokens": "^4.3.0"
+    "@duro-app/tokens": "^4.4.0"
   },
   "devDependencies": {
     "@babel/preset-typescript": "^7.28.0",

package/src/components/ActionBar/ActionBar.meta.ts

@@ -7,6 +7,7 @@ export const meta: ComponentMeta = {
     'Bulk actions on table selections (delete, revoke, export)',
     'Multi-select workflows where actions apply to all selected items',
     'Selection-scoped verbs on a canvas/editor surface (set `bottomOffset` to clear any bottom chrome such as zoom controls)',
+    'A docked side panel (DetailPanel) is open: pass its width as `insetInlineEnd` so the bar centres beside it, not under it (follows the writing direction: the left edge in right-to-left)',
   ],
   whenNotToUse: [
     'Single-item actions that have an inline home — use inline buttons or a Menu',
@@ -18,6 +19,12 @@ export const meta: ComponentMeta = {
       kind: 'composition',
       relationship: 'Common pattern: Table checkboxes + ActionBar for bulk ops',
     },
+    {
+      component: 'DetailPanel',
+      kind: 'composition',
+      relationship:
+        "With a DetailPanel docked at the end edge, pass the panel's width as insetInlineEnd",
+    },
   ],
   example: `<ActionBar selectedItemCount={selected.size} onClearSelection={() => setSelected(new Set())}>
   <Button variant="danger" size="small" onClick={handleDelete}>Delete</Button>

package/src/components/ActionBar/ActionBar.stories.tsx

@@ -1,6 +1,6 @@
 import {useState} from 'react'
 import type {Meta, StoryObj} from '@storybook/react'
-import {expect, fn, userEvent, within} from 'storybook/test'
+import {expect, fn, within} from 'storybook/test'
 import {css, html} from 'react-strict-dom'
 import {ActionBar} from './ActionBar'
 import {Button} from '../Button/Button'
@@ -155,8 +155,7 @@ export const Default: Story = {
       onClearSelection={args.onClearSelection as () => void}
     />
   ),
-  play: async ({canvasElement}) => {
-    const canvas = within(canvasElement)
+  play: async () => {
     // The ActionBar is portalled to document.body, so query from there
     const toolbar = document.querySelector('[role="toolbar"]')
     await expect(toolbar).toBeInTheDocument()
@@ -310,3 +309,96 @@ export const AllVariants: Story = {
     </html.div>
   ),
 }
+
+// A panel docked at the window's end edge, standing in for an open DetailPanel.
+const docked = css.create({
+  panel: {
+    position: 'fixed',
+    top: 0,
+    bottom: 0,
+    insetInlineEnd: 0,
+    width: 360,
+    borderInlineStartWidth: 1,
+    borderInlineStartStyle: 'solid',
+  },
+})
+
+// Real buttons: they don't shrink below their labels, so together they are
+// wider than the free area beside the panel.
+const WIDE_ACTIONS = [
+  'Duplicate',
+  'Move to section',
+  'Copy style',
+  'Paste style',
+  'Group',
+  'Ungroup',
+  'Bring forward',
+  'Send backward',
+  'Delete',
+]
+
+const barRect = () =>
+  (document.querySelector('[role="toolbar"]') as Element).getBoundingClientRect()
+const panelRect = () =>
+  (document.querySelector('[data-testid="docked-panel"]') as Element).getBoundingClientRect()
+
+export const NoInset: Story = {
+  render: () => (
+    <ActionBar selectedItemCount={2} onClearSelection={() => {}}>
+      <Button variant="secondary" size="small">
+        Delete
+      </Button>
+    </ActionBar>
+  ),
+  play: async () => {
+    const bar = barRect()
+    const centre = document.documentElement.clientWidth / 2
+    // Today's placement: centred on the window.
+    await expect(Math.abs(bar.left + bar.width / 2 - centre)).toBeLessThanOrEqual(1)
+  },
+}
+
+export const DockedPanel: Story = {
+  render: () => (
+    <>
+      <html.div style={docked.panel} data-testid="docked-panel" />
+      <ActionBar selectedItemCount={2} insetInlineEnd={360} onClearSelection={() => {}}>
+        <Button variant="secondary" size="small">
+          Delete
+        </Button>
+      </ActionBar>
+    </>
+  ),
+  play: async () => {
+    const bar = barRect()
+    const panel = panelRect()
+    // Clear of the panel, and centred in what is left of the window.
+    await expect(bar.right).toBeLessThanOrEqual(panel.left - 24)
+    await expect(Math.abs(bar.left + bar.width / 2 - panel.left / 2)).toBeLessThanOrEqual(1)
+  },
+}
+
+export const DockedPanelWideBar: Story = {
+  render: () => (
+    <>
+      <html.div style={docked.panel} data-testid="docked-panel" />
+      <ActionBar selectedItemCount={2} insetInlineEnd={360} onClearSelection={() => {}}>
+        {WIDE_ACTIONS.map((a) => (
+          <Button key={a} variant="secondary" size="small">
+            {a}
+          </Button>
+        ))}
+      </ActionBar>
+    </>
+  ),
+  play: async () => {
+    // A bar wider than the free area still keeps 24px clear of the panel,
+    // and so does what it holds: the actions scroll, they don't spill.
+    const limit = panelRect().left - 24
+    await expect(barRect().right).toBeLessThanOrEqual(limit)
+    const last = await within(document.body).findByRole('button', {name: 'Delete'})
+    const actions = last.parentElement!
+    await expect(actions.getBoundingClientRect().right).toBeLessThanOrEqual(limit)
+    await expect(actions.scrollWidth).toBeGreaterThan(actions.clientWidth)
+  },
+}

package/src/components/ActionBar/ActionBar.tsx

@@ -22,6 +22,13 @@ export interface ActionBarProps {
    * height. Defaults to the spacing.lg token.
    */
   bottomOffset?: SpacingToken | number
+  /**
+   * Width in px of chrome docked at the window's inline-end edge (right in
+   * left-to-right, left in right-to-left), such as an open DetailPanel: the
+   * bar centres in what is left and keeps 24px clear of it. 0 or omitted
+   * centres on the window.
+   */
+  insetInlineEnd?: number
   /** Action buttons to display. */
   children: ReactNode
 }
@@ -33,6 +40,7 @@ function ActionBarContent({
   onClearSelection,
   dismissible = true,
   bottomOffset,
+  insetInlineEnd = 0,
   children,
 }: ActionBarProps) {
   const countStr = selectedItemCount === 'all' ? 'All' : `${selectedItemCount}`
@@ -44,6 +52,7 @@ function ActionBarContent({
       aria-label={label}
       style={[
         styles.overlay,
+        insetInlineEnd > 0 ? styles.inset(insetInlineEnd) : styles.centered,
         bottomOffset != null &&
           styles.overlayOffset(
             typeof bottomOffset === 'number' ? bottomOffset : SPACING_PX[bottomOffset],
@@ -55,7 +64,9 @@ function ActionBarContent({
         {label}
       </html.span>
       <html.div style={[styles.separator, isEmphasized && styles.separatorEmphasized]} />
-      <html.div style={styles.actions}>{children}</html.div>
+      <html.div style={[styles.actions, insetInlineEnd > 0 && styles.actionsScroll]}>
+        {children}
+      </html.div>
       {dismissible && (
         <html.button
           type="button"

package/src/components/ActionBar/styles.css.ts

@@ -9,8 +9,6 @@ export const styles = css.create({
   overlay: {
     position: 'fixed',
     bottom: spacing.lg,
-    left: '50%',
-    transform: 'translateX(-50%)',
     display: 'flex',
     flexDirection: 'row',
     alignItems: 'center',
@@ -26,8 +24,25 @@ export const styles = css.create({
     borderRadius: radii.md,
     boxShadow: shadows.lg,
     zIndex: 50,
+  },
+  // Centred on the window: the default, with nothing docked at its edge.
+  centered: {
+    left: '50%',
+    transform: 'translateX(-50%)',
     maxWidth: 'calc(100vw - 48px)',
   },
+  // Centred in the window minus chrome docked at the inline-end edge (a
+  // DetailPanel). Both insets and auto margins centre a fixed box of
+  // fit-content width in what is left, measured on the containing block
+  // (the window without a classic scrollbar), not on 100vw.
+  inset: (end: number) => ({
+    insetInlineStart: 0,
+    insetInlineEnd: end,
+    marginInlineStart: 'auto',
+    marginInlineEnd: 'auto',
+    width: 'fit-content',
+    maxWidth: `calc(100% - ${end}px - 48px)`,
+  }),
   overlayOffset: (bottom: number) => ({
     bottom,
   }),
@@ -51,6 +66,23 @@ export const styles = css.create({
     alignItems: 'center',
     gap: spacing.sm,
   },
+  // Beside a docked panel the room is narrower: more actions than fit scroll
+  // instead of spilling past the bar. A scroll box clips vertically too, so
+  // the row gets room on every side for the buttons' focus rings, taken back
+  // by its margin so the bar keeps its size.
+  actionsScroll: {
+    minWidth: 0,
+    overflowX: 'auto',
+    overflowY: 'hidden',
+    paddingTop: spacing.xs,
+    paddingBottom: spacing.xs,
+    paddingLeft: spacing.xs,
+    paddingRight: spacing.xs,
+    marginTop: `calc(-1 * ${spacing.xs})`,
+    marginBottom: `calc(-1 * ${spacing.xs})`,
+    marginLeft: `calc(-1 * ${spacing.xs})`,
+    marginRight: `calc(-1 * ${spacing.xs})`,
+  },
   closeButton: {
     display: 'inline-flex',
     alignItems: 'center',

package/src/components/DetailPanel/DetailPanel.meta.ts

@@ -18,6 +18,12 @@ export const meta: ComponentMeta = {
     optional: ['Title', 'Footer', 'Close'],
   },
   relatedTo: [
+    {
+      component: 'ActionBar',
+      kind: 'composition',
+      relationship:
+        "An ActionBar shown while the panel is open takes the panel's width as insetInlineEnd",
+    },
     {
       component: 'Drawer',
       kind: 'contrast',