@axinom/mosaic-ui 0.75.0-rc.5 → 0.77.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.75.0-rc.5",
+  "version": "0.77.0",
   "engines": {
     "node": ">=20.19.0"
   },
@@ -101,19 +101,23 @@
     "react-router-dom": "^5.3.4",
     "rimraf": "^6.1.3",
     "rollup": "^2.80.0",
+    "rollup-plugin-license": "^3.7.1",
     "rollup-plugin-peer-deps-external": "^2.2.3",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-typescript2": "^0.29.0",
     "rollup-plugin-visualizer": "^5.8.3",
     "sass": "^1.57.1",
+    "spdx-license-list": "^6.12.0",
+    "spdx-satisfies": "^5.0.1",
     "storybook": "^10.5.5",
     "typescript": "^5.9.3",
     "typescript-plugin-css-modules": "^5.0.2",
     "vite": "6.4.3",
-    "vitest": "^4.1.10"
+    "vitest": "^4.1.10",
+    "yaml": "^1.10.2"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "5fb6f2808a8355353f3f89c373913941ecd6b802"
+  "gitHead": "334221c125bafad4bdb862699e05cdff515cc4d7"
 }

package/src/components/ActionBar/ActionBar.model.ts

@@ -0,0 +1,61 @@
+import type { Not } from '../../types';
+import type { IconName } from '../Icons';
+import type { ConfirmAction, DefaultHandler, LinkAction } from '../models';
+
+/**
+ * An action that is rendered on the ActionBar. Actions with an `onClick`
+ * handler run it, optionally behind a confirmation, while actions with a `path`
+ * navigate to it.
+ */
+export type ActionBarAction = ActionBarJsAction | ActionBarNavigationAction;
+
+/** An action of the ActionBar that runs a handler when clicked. */
+export interface ActionBarJsAction
+  extends ActionBarBaseAction,
+    HandledAction,
+    ConfirmAction,
+    Not<LinkAction> {
+  /**
+   * Whether the action is toggled on, e.g. while the panel it has opened is the
+   * one on display. Set this to make the action a toggle button rather than a
+   * one-shot action. (default: undefined)
+   */
+  toggled?: boolean;
+}
+
+/** An action of the ActionBar that navigates when clicked. */
+export interface ActionBarNavigationAction
+  extends ActionBarBaseAction,
+    LinkAction,
+    Not<ConfirmAction>,
+    Not<HandledAction>,
+    Not<Pick<ActionBarJsAction, 'toggled'>> {}
+
+interface HandledAction {
+  /** Callback to emit when a user clicks on the action. */
+  onClick: DefaultHandler;
+}
+
+interface ActionBarBaseAction {
+  /** The label of the action. */
+  label: string;
+  /** Optional built in icon. This prop also accepts an img src. */
+  icon?: IconName | string;
+  /** Optional image alt attribute. */
+  imgAlt?: string;
+  /** Whether the action is disabled. If set to true, disallows interactions. (default: false) */
+  disabled?: boolean;
+  /** Optional tag rendered next to the label, e.g. 'BETA'. */
+  tag?: string;
+}
+
+/**
+ * The content of an ActionBar: a label at its start and the actions that run to
+ * its end.
+ */
+export interface ActionBarData {
+  /** Optional text rendered at the start of the bar, e.g. 'Selected 3'. */
+  label?: string;
+  /** The actions to render. Actions that do not fit move into an overflow menu. */
+  actions: ActionBarAction[];
+}

package/src/components/ActionBar/ActionBar.module.scss

@@ -0,0 +1,64 @@
+@import '../../styles/common.scss';
+
+.container {
+  @include boxSizing;
+
+  padding-left: 5px;
+  display: grid;
+
+  background-color: var(
+    --action-bar-background-color,
+    $action-bar-background-color
+  );
+
+  border-bottom: solid 1px
+    var(--action-bar-border-color, $action-bar-border-color);
+
+  .content {
+    min-width: 0;
+    height: 100%;
+
+    display: flex;
+    align-items: center;
+    column-gap: 10px;
+  }
+
+  .label {
+    padding-left: 10px;
+
+    color: var(--action-bar-label-color, $action-bar-label-color);
+    font-size: 14px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  // Takes up the space that is left next to the label, so that its width is the
+  // space the actions can occupy. Actions are collapsed into the overflow menu
+  // until they fit, `overflow: hidden` only covers the frame they are measured in.
+  .actions {
+    flex: 1 1 auto;
+    min-width: 0;
+    height: 100%;
+
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    overflow: hidden;
+
+    // Actions would shrink to fit while they are measured, which hides that
+    // they do not fit at their natural width.
+    &.measuring > * {
+      flex-shrink: 0;
+    }
+  }
+
+  .overflowMenuButton {
+    height: 100%;
+    width: 50px;
+  }
+
+  .overflowMenu {
+    z-index: 3;
+  }
+}

package/src/components/ActionBar/ActionBar.spec.tsx

@@ -0,0 +1,398 @@
+import { fireEvent, render, screen, within } from '@testing-library/react';
+import React from 'react';
+import { MemoryRouter, Route } from 'react-router-dom';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { noop } from '../../helpers/utils';
+import { IconName } from '../Icons';
+import { ActionBar, type ActionBarProps } from './ActionBar';
+import type { ActionBarAction } from './ActionBar.model';
+
+const defaultProps: ActionBarProps = {
+  actions: [],
+};
+
+const mockActions: ActionBarAction[] = [
+  { label: 'Publish', icon: IconName.Publish, onClick: vi.fn() },
+  { label: 'Delete', icon: IconName.Delete, onClick: vi.fn() },
+];
+
+const renderBar = (
+  props: Partial<ActionBarProps> = {},
+): ReturnType<typeof render> =>
+  render(
+    <MemoryRouter>
+      <ActionBar {...defaultProps} {...props} />
+    </MemoryRouter>,
+  );
+
+describe('ActionBar', () => {
+  it('renders the given actions', () => {
+    renderBar({ actions: mockActions });
+
+    const labels = screen
+      .getAllByTestId('label')
+      .map((label) => label.textContent);
+
+    expect(labels).toEqual(['Publish', 'Delete']);
+  });
+
+  it('renders the label', () => {
+    renderBar({ actions: mockActions, label: '3 Selected' });
+
+    expect(screen.getByTestId('action-bar-label')).toHaveTextContent(
+      '3 Selected',
+    );
+  });
+
+  it('renders no label element when no label is given', () => {
+    renderBar({ actions: mockActions });
+
+    expect(screen.queryByTestId('action-bar-label')).toBeNull();
+  });
+
+  it('applies the height to the bar', () => {
+    renderBar({ height: '60px' });
+
+    expect(screen.getByTestId('action-bar').style.gridAutoRows).toBe('60px');
+  });
+
+  it(`defaults to a height of '44px'`, () => {
+    renderBar();
+
+    expect(screen.getByTestId('action-bar').style.gridAutoRows).toBe('44px');
+  });
+
+  it('raises onClick when an action is clicked', () => {
+    const onClick = vi.fn();
+    renderBar({ actions: [{ label: 'Publish', onClick }] });
+
+    fireEvent.click(screen.getByTestId('action'));
+
+    expect(onClick).toHaveBeenCalled();
+  });
+
+  it('does not raise onClick of a disabled action', () => {
+    const onClick = vi.fn();
+    renderBar({ actions: [{ label: 'Publish', disabled: true, onClick }] });
+
+    fireEvent.click(screen.getByTestId('action'));
+
+    expect(onClick).not.toHaveBeenCalled();
+  });
+
+  it('marks a toggled action as pressed', () => {
+    renderBar({
+      actions: [
+        { label: 'Details', toggled: true, onClick: vi.fn() },
+        { label: 'Focal Point', toggled: false, onClick: vi.fn() },
+      ],
+    });
+
+    const actions = screen.getAllByTestId('action');
+
+    expect(actions[0]).toHaveAttribute('aria-pressed', 'true');
+    expect(actions[1]).toHaveAttribute('aria-pressed', 'false');
+  });
+
+  it(`doesn't mark a one-shot action as a toggle`, () => {
+    renderBar({ actions: [{ label: 'Publish', onClick: vi.fn() }] });
+
+    expect(screen.getByTestId('action')).not.toHaveAttribute('aria-pressed');
+  });
+
+  describe('tags', () => {
+    it('renders the tag next to the label', () => {
+      renderBar({
+        actions: [{ label: 'Edit', tag: 'BETA', onClick: vi.fn() }],
+      });
+
+      expect(screen.getByTestId('tag')).toHaveTextContent('BETA');
+    });
+
+    it('renders no tag element when no tag is given', () => {
+      renderBar({ actions: [{ label: 'Edit', onClick: vi.fn() }] });
+
+      expect(screen.queryByTestId('tag')).toBeNull();
+    });
+
+    it('hides the tag while a confirmation is shown', () => {
+      renderBar({
+        actions: [
+          {
+            label: 'Delete',
+            tag: 'BETA',
+            confirmationMode: 'Simple',
+            onClick: vi.fn(),
+          },
+        ],
+      });
+
+      fireEvent.click(screen.getByTestId('action'));
+
+      expect(screen.queryByTestId('tag')).toBeNull();
+    });
+  });
+
+  describe('links', () => {
+    it('renders a link to the path of the action', () => {
+      renderBar({ actions: [{ label: 'Export', path: '/export' }] });
+
+      const action = screen.getByTestId('action');
+
+      expect(action.tagName).toBe('A');
+      expect(action).toHaveAttribute('href', '/export');
+      expect(action).not.toHaveAttribute('target');
+    });
+
+    it('opens the link in a new tab when openInNewTab is set', () => {
+      renderBar({
+        actions: [{ label: 'Export', path: '/export', openInNewTab: true }],
+      });
+
+      expect(screen.getByTestId('action')).toHaveAttribute('target', '_blank');
+    });
+
+    it('navigates to the path when clicked', () => {
+      render(
+        <MemoryRouter initialEntries={['/']}>
+          <ActionBar actions={[{ label: 'Export', path: '/export' }]} />
+          <Route path="/export">
+            <span data-test-id="export-page" />
+          </Route>
+        </MemoryRouter>,
+      );
+
+      fireEvent.click(screen.getByTestId('action'));
+
+      expect(screen.getByTestId('export-page')).toBeInTheDocument();
+    });
+
+    it('renders a disabled link as a disabled button', () => {
+      render(
+        <MemoryRouter initialEntries={['/']}>
+          <ActionBar
+            actions={[{ label: 'Export', path: '/export', disabled: true }]}
+          />
+          <Route path="/export">
+            <span data-test-id="export-page" />
+          </Route>
+        </MemoryRouter>,
+      );
+
+      const action = screen.getByTestId('action');
+
+      expect(action.tagName).toBe('BUTTON');
+      expect(action).toBeDisabled();
+
+      fireEvent.click(action);
+
+      expect(screen.queryByTestId('export-page')).toBeNull();
+    });
+  });
+
+  describe('confirmations', () => {
+    it('requires a second click in Simple mode', () => {
+      const onClick = vi.fn();
+      renderBar({
+        actions: [{ label: 'Delete', confirmationMode: 'Simple', onClick }],
+      });
+
+      fireEvent.click(screen.getByTestId('action'));
+
+      expect(onClick).not.toHaveBeenCalled();
+      expect(screen.getByTestId('confirm')).toHaveTextContent(
+        'Click again to confirm',
+      );
+
+      fireEvent.click(screen.getByTestId('action'));
+
+      expect(onClick).toHaveBeenCalledTimes(1);
+    });
+
+    it('opens a dialog in Advanced mode and runs the action once confirmed', () => {
+      const onClick = vi.fn();
+      renderBar({
+        actions: [
+          {
+            label: 'Delete',
+            confirmationMode: 'Advanced',
+            confirmationConfig: { title: 'Delete the items?' },
+            onClick,
+          },
+        ],
+      });
+
+      fireEvent.click(screen.getByTestId('action'));
+
+      expect(screen.getByText('Delete the items?')).toBeInTheDocument();
+      expect(onClick).not.toHaveBeenCalled();
+
+      fireEvent.click(screen.getByTestId('confirm'));
+
+      expect(onClick).toHaveBeenCalledTimes(1);
+    });
+
+    it('does not run the action when the dialog is cancelled', () => {
+      const onClick = vi.fn();
+      renderBar({
+        actions: [{ label: 'Delete', confirmationMode: 'Advanced', onClick }],
+      });
+
+      fireEvent.click(screen.getByTestId('action'));
+      fireEvent.click(screen.getByTestId('cancel'));
+
+      expect(onClick).not.toHaveBeenCalled();
+    });
+
+    it('does not carry a pending confirmation over to other actions', () => {
+      const onArchive = vi.fn();
+      const { rerender } = renderBar({
+        actions: [
+          { label: 'Delete', confirmationMode: 'Simple', onClick: noop },
+        ],
+      });
+
+      fireEvent.click(screen.getByTestId('action'));
+
+      expect(screen.getByTestId('confirm')).toBeInTheDocument();
+
+      rerender(
+        <MemoryRouter>
+          <ActionBar
+            actions={[
+              {
+                label: 'Archive',
+                confirmationMode: 'Simple',
+                onClick: onArchive,
+              },
+            ]}
+          />
+        </MemoryRouter>,
+      );
+
+      expect(screen.queryByTestId('confirm')).toBeNull();
+
+      // The first click only asks for the confirmation.
+      fireEvent.click(screen.getByTestId('action'));
+
+      expect(onArchive).not.toHaveBeenCalled();
+    });
+
+    it('keeps a pending confirmation while the same actions render again', () => {
+      const actions = (): ActionBarAction[] => [
+        { label: 'Delete', confirmationMode: 'Simple', onClick: noop },
+      ];
+      const { rerender } = renderBar({ actions: actions() });
+
+      fireEvent.click(screen.getByTestId('action'));
+      rerender(
+        <MemoryRouter>
+          <ActionBar actions={actions()} />
+        </MemoryRouter>,
+      );
+
+      expect(screen.getByTestId('confirm')).toBeInTheDocument();
+    });
+  });
+
+  describe('overflow', () => {
+    // jsdom has no layout, so every action is given a width of 100px and the
+    // actions a width of 220px, which leaves room for a single action next to
+    // the 50px wide overflow menu.
+    beforeEach(() => {
+      vi.spyOn(HTMLElement.prototype, 'offsetWidth', 'get').mockReturnValue(
+        100,
+      );
+      vi.stubGlobal(
+        'ResizeObserver',
+        class {
+          constructor(
+            private readonly callback: (
+              entries: { contentRect: { width: number } }[],
+            ) => void,
+          ) {}
+          observe(): void {
+            this.callback([{ contentRect: { width: 220 } }]);
+          }
+          unobserve(): void {
+            // nothing to clean up
+          }
+          disconnect(): void {
+            // nothing to clean up
+          }
+        },
+      );
+    });
+
+    afterEach(() => {
+      vi.restoreAllMocks();
+      vi.unstubAllGlobals();
+    });
+
+    const overflowActions: ActionBarAction[] = [
+      { label: 'Publish', onClick: vi.fn() },
+      { label: 'Edit', tag: 'BETA', onClick: vi.fn() },
+      { label: 'Export', path: '/export' },
+    ];
+
+    it('moves the actions that do not fit into the overflow menu', () => {
+      renderBar({ actions: overflowActions });
+
+      const bar = screen.getByTestId('action-bar');
+
+      expect(
+        within(bar)
+          .getAllByTestId('action')
+          .map((action) => action.textContent),
+      ).toEqual(['Publish']);
+      expect(within(bar).getByTestId('inline-menu-button')).toBeInTheDocument();
+    });
+
+    it('keeps the tag and the link of an action in the overflow menu', () => {
+      renderBar({ actions: overflowActions });
+
+      fireEvent.click(screen.getByTestId('inline-menu-button'));
+
+      const menuActions = within(
+        screen.getByTestId('inline-menu'),
+      ).getAllByTestId('action');
+
+      expect(menuActions.map((action) => action.textContent)).toEqual([
+        'Edit (BETA)',
+        'Export',
+      ]);
+      expect(menuActions[1]).toHaveAttribute('href', '/export');
+    });
+
+    it('keeps a disabled link in the overflow menu from navigating', () => {
+      render(
+        <MemoryRouter initialEntries={['/']}>
+          <ActionBar
+            actions={[
+              { label: 'Publish', onClick: vi.fn() },
+              { label: 'Edit', onClick: vi.fn() },
+              { label: 'Export', path: '/export', disabled: true },
+            ]}
+          />
+          <Route path="/export">
+            <span data-test-id="export-page" />
+          </Route>
+        </MemoryRouter>,
+      );
+
+      fireEvent.click(screen.getByTestId('inline-menu-button'));
+
+      const link = within(screen.getByTestId('inline-menu'))
+        .getAllByTestId('action')
+        .find((action) => action.textContent === 'Export') as HTMLElement;
+
+      // Out of reach of the keyboard, and inert if it is activated anyway.
+      expect(link).toHaveAttribute('aria-disabled', 'true');
+      expect(link).toHaveAttribute('tabindex', '-1');
+
+      fireEvent.click(link);
+
+      expect(screen.queryByTestId('export-page')).toBeNull();
+    });
+  });
+});