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

package/src/components/PageHeader/PageHeaderAction/PageHeaderAction.spec.tsx

@@ -5,7 +5,7 @@ import { BrowserRouter as Router } from 'react-router-dom';
 import { describe, expect, it, vi } from 'vitest';
 import { noop } from '../../../helpers/utils';
 import type { ConfirmationConfig } from '../../ConfirmDialog';
-import { IconName } from '../../Icons';
+import { IconName, Icons } from '../../Icons';
 import {
   PageHeaderAction,
   isPageHeaderJsAction,
@@ -71,6 +71,63 @@ describe('PageHeaderAction', () => {
       expect(Icon).not.toBeInTheDocument();
     });
 
+    it('shows the icon instead of the label, which becomes its tooltip', () => {
+      const { container } = render(
+        <PageHeaderAction
+          {...defaultProps}
+          label={'Bulk Actions'}
+          icon={IconName.Bulk}
+        />,
+      );
+
+      const action = container.querySelector('.container') as HTMLElement;
+
+      expect(container.querySelector('.icons')).toBeInTheDocument();
+      expect(container.querySelector('.label')).toHaveClass('hiddenLabel');
+      // Still names the action for assistive technology.
+      expect(action).toHaveTextContent('Bulk Actions');
+      expect(action).toHaveAttribute('title', 'Bulk Actions');
+    });
+
+    it('shows the label of an action without an icon', () => {
+      const { container } = render(
+        <PageHeaderAction {...defaultProps} label={'Create Snapshot'} />,
+      );
+
+      const action = container.querySelector('.container') as HTMLElement;
+
+      expect(container.querySelector('.icon')).not.toBeInTheDocument();
+      expect(container.querySelector('.label')).not.toHaveClass('hiddenLabel');
+      expect(action).not.toHaveAttribute('title');
+    });
+
+    it(`treats the icon with the enum value 0 as an icon`, () => {
+      const { container } = render(
+        <PageHeaderAction {...defaultProps} icon={IconName.Archive} />,
+      );
+
+      expect(IconName.Archive).toBe(0);
+      expect(container.querySelector('.icons')).toBeInTheDocument();
+    });
+
+    it('shows the confirmation message in place of the icon', () => {
+      const { container } = render(
+        <PageHeaderAction
+          {...defaultProps}
+          icon={IconName.Delete}
+          confirmationMode="Simple"
+        />,
+      );
+
+      const action = container.querySelector('.container') as HTMLElement;
+      fireEvent.click(action);
+
+      expect(container.querySelector('.icons')).not.toBeInTheDocument();
+      expect(container.querySelector('.label')).not.toHaveClass('hiddenLabel');
+      expect(action).not.toHaveAttribute('title');
+      expect(container.querySelector('[data-test-id="confirm"]')).toBeVisible();
+    });
+
     it('raises onActionSelected', () => {
       const spy = vi.fn();
       const { container } = render(
@@ -605,6 +662,95 @@ describe('PageHeaderAction', () => {
       expect(actionContainer.classList.contains('active')).toBe(true);
     });
 
+    describe('toggled', () => {
+      it(`renders the 'Active' style when toggled is true`, () => {
+        const { container } = render(
+          <PageHeaderAction
+            label={'action-label'}
+            toggled={true}
+            onClick={vi.fn()}
+          />,
+        );
+
+        const actionContainer = container.querySelector(
+          '.container',
+        ) as HTMLElement;
+
+        expect(actionContainer.classList.contains('active')).toBe(true);
+        expect(actionContainer.classList.contains('context')).toBe(false);
+        expect(actionContainer.getAttribute('aria-pressed')).toBe('true');
+      });
+
+      it(`falls back to the actionType style when toggled is false`, () => {
+        const { container } = render(
+          <PageHeaderAction
+            label={'action-label'}
+            toggled={false}
+            onClick={vi.fn()}
+          />,
+        );
+
+        const actionContainer = container.querySelector(
+          '.container',
+        ) as HTMLElement;
+
+        expect(actionContainer.classList.contains('context')).toBe(true);
+        expect(actionContainer.classList.contains('active')).toBe(false);
+        expect(actionContainer.getAttribute('aria-pressed')).toBe('false');
+      });
+
+      it(`doesn't set 'aria-pressed' when toggled is not provided`, () => {
+        const { container } = render(
+          <PageHeaderAction label={'action-label'} onClick={vi.fn()} />,
+        );
+
+        const actionContainer = container.querySelector(
+          '.container',
+        ) as HTMLElement;
+
+        expect(actionContainer.getAttribute('aria-pressed')).toBeNull();
+      });
+
+      it(`takes precedence over actionType when toggled is true`, () => {
+        const { container } = render(
+          <PageHeaderAction
+            label={'action-label'}
+            actionType={PageHeaderActionType.Hightlight}
+            toggled={true}
+            onClick={vi.fn()}
+          />,
+        );
+
+        const actionContainer = container.querySelector(
+          '.container',
+        ) as HTMLElement;
+
+        expect(actionContainer.classList.contains('active')).toBe(true);
+        expect(actionContainer.classList.contains('highlight')).toBe(false);
+      });
+
+      it(`disallows interactions when a toggled action is disabled`, () => {
+        const spy = vi.fn();
+        const { container } = render(
+          <PageHeaderAction
+            label={'action-label'}
+            toggled={true}
+            disabled={true}
+            onClick={spy}
+          />,
+        );
+
+        const actionContainer = container.querySelector(
+          '.container',
+        ) as HTMLElement;
+
+        fireEvent.click(actionContainer);
+
+        expect(actionContainer.getAttribute('disabled')).not.toBeNull();
+        expect(spy).not.toHaveBeenCalled();
+      });
+    });
+
     it(`disallows interactions when action is set to disabled`, () => {
       const spy = vi.fn();
       const { container } = render(
@@ -720,6 +866,52 @@ describe('PageHeaderAction', () => {
       expect(link.target).toBe('_blank');
     });
 
+    it('shows the external icon, with the label as its tooltip, for a link opening in a new tab', () => {
+      const { container } = render(
+        <Router>
+          <PageHeaderAction {...defaultProps} path="/test" openInNewTab />
+        </Router>,
+      );
+
+      const link = container.querySelector('a') as HTMLAnchorElement;
+
+      expect(container.querySelector('.icons')).toBeInTheDocument();
+      expect(link).toHaveAttribute('title', 'Action Label');
+    });
+
+    it('shows the label of a link without an icon', () => {
+      const { container } = render(
+        <Router>
+          <PageHeaderAction {...defaultProps} path="/test" />
+        </Router>,
+      );
+
+      const link = container.querySelector('a') as HTMLAnchorElement;
+
+      expect(container.querySelector('.icon')).not.toBeInTheDocument();
+      expect(link).not.toHaveAttribute('title');
+    });
+
+    it(`treats the icon with the enum value 0 as an icon`, () => {
+      const { container } = render(
+        <Router>
+          <PageHeaderAction
+            {...defaultProps}
+            path="/test"
+            openInNewTab
+            icon={IconName.Archive}
+          />
+        </Router>,
+      );
+
+      const { container: archive } = render(<Icons icon={IconName.Archive} />);
+
+      // The icon of the action is used instead of the external icon.
+      expect(container.querySelector('.icons')?.innerHTML).toBe(
+        archive.querySelector('.icons')?.innerHTML,
+      );
+    });
+
     it('does not open link in a new tab if openInNewTab is false', () => {
       const { container } = render(
         <Router>

package/src/components/PageHeader/PageHeaderAction/PageHeaderAction.stories.tsx

@@ -30,6 +30,11 @@ const meta: Meta<typeof PageHeaderAction> = {
         type: 'text',
       },
     },
+    toggled: {
+      control: {
+        type: 'boolean',
+      },
+    },
   },
   decorators: [
     // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
@@ -51,3 +56,34 @@ export const CustomImage: StoryObj<typeof PageHeaderAction> = {
     actionType: PageHeaderActionType.Context,
   },
 };
+
+export const Toggled: StoryObj<typeof PageHeaderAction> = {
+  args: {
+    icon: IconName.Bulk,
+    label: 'Toggle',
+    toggled: true,
+  },
+};
+
+export const WithoutIcon: StoryObj<typeof PageHeaderAction> = {
+  name: 'Label without Icon',
+  parameters: {
+    docs: {
+      description: {
+        story: `An action without an icon shows its label instead, which wraps onto further rows and is cut after the fourth one.
+        The label wraps even where the surrounding layout prevents wrapping, which the story shows by rendering the action in such a container.`,
+      },
+    },
+  },
+  args: {
+    label: 'Create Snapshot and Publish Episodes',
+  },
+  decorators: [
+    // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+    (Story) => (
+      <div style={{ whiteSpace: 'nowrap' }}>
+        <Story />
+      </div>
+    ),
+  ],
+};

package/src/components/PageHeader/PageHeaderAction/PageHeaderAction.tsx

@@ -1,13 +1,8 @@
 import clsx from 'clsx';
-import React, { useEffect, useState } from 'react';
+import React, { type PropsWithChildren } from 'react';
 import { Link } from 'react-router-dom';
 import { noop } from '../../../helpers/utils';
-import {
-  ConfirmDialog,
-  type ConfirmationConfig,
-  type ConfirmationMode,
-  useConfirmationDelay,
-} from '../../ConfirmDialog';
+import { useConfirmableAction } from '../../ConfirmDialog';
 import { IconName, Icons } from '../../Icons';
 import { ImgElement } from '../../VisualElements';
 import {
@@ -18,31 +13,14 @@ import {
 } from './PageHeaderAction.model';
 import classes from './PageHeaderAction.module.scss';
 
-/**
- * Simple Confirm message
- * @example
- * <SimpleConfirmDialog />
- */
-const SimpleConfirmDialog: React.FC<{
-  onConfirmOpen: ConfirmationConfig['onConfirmOpen'];
-  data: { mode: ConfirmationMode };
-}> = ({ onConfirmOpen, data }) => {
-  useEffect(() => {
-    onConfirmOpen && onConfirmOpen(true, data);
-    return () => {
-      onConfirmOpen && onConfirmOpen(false, data);
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  return <span data-test-id="confirm">Click again to confirm</span>;
-};
-
 /**
  * Used to create actions for the PageHeader component.
  * To generate anchor tag provide `path` property
  * To generate HTML element with event handler provide `onClick` property
  * (and optionally `confirmationMode`, `confirmationConfig`)
+ *
+ * An action shows its icon if it has one, and its label otherwise. The label of
+ * an action with an icon is shown as a tooltip.
  * @example
  * // Action with JS clickHandler
  * <PageHeaderAction label={'Action Label'} onClick={clickHandler} />
@@ -71,47 +49,27 @@ const PageHeaderJSAction: React.FC<PageHeaderJsActionProps> = ({
   className,
   onClick = noop,
   tag,
+  toggled,
 }) => {
-  const [confirmation, setConfirmation] = useState<boolean>(false);
-  const [referenceElement, setReferenceElement] = useState<HTMLElement>();
-  const { isMouseOver, setIsMouseOver } = useConfirmationDelay({
+  // A toggled-on action always renders in the 'Active' style, otherwise the
+  // explicit (or default) actionType decides the appearance.
+  const visualActionType = toggled ? PageHeaderActionType.Active : actionType;
+
+  const {
+    isConfirming,
+    isSimpleConfirmation,
+    onTriggerClicked,
+    triggerProps,
+    simpleConfirmation,
+    advancedConfirmation,
+  } = useConfirmableAction<HTMLButtonElement>({
     confirmationMode,
-    confirmation,
-    setConfirmation,
+    confirmationConfig,
+    onConfirmed: onClick,
   });
 
-  const { title, body, cancelButtonText, confirmButtonText, onConfirmOpen } =
-    confirmationConfig;
-
-  const onClickHandler = (
-    event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
-  ): void => {
-    event.preventDefault();
-
-    switch (confirmationMode) {
-      case 'Simple':
-        !confirmation
-          ? setConfirmation(true)
-          : (onClick(), setConfirmation(false));
-        break;
-      case 'Advanced':
-        setConfirmation(true);
-        break;
-      default:
-        onClick();
-        setConfirmation(false);
-        break;
-    }
-  };
-
-  const onConfirmOpenHandler = (
-    isOpen: boolean,
-    data: { mode: ConfirmationMode },
-  ): void => {
-    if (confirmationMode === 'Advanced' && onConfirmOpen !== undefined) {
-      onConfirmOpen(isOpen, data);
-    }
-  };
+  // A pending confirmation shows its message, which takes the place of the icon.
+  const visibleIcon = isConfirming ? undefined : icon;
 
   return (
     <>
@@ -119,70 +77,36 @@ const PageHeaderJSAction: React.FC<PageHeaderJsActionProps> = ({
         className={clsx(
           classes.container,
           {
-            [classes.context]: actionType === PageHeaderActionType.Context,
-            [classes.active]: actionType === PageHeaderActionType.Active,
-            [classes.highlight]: actionType === PageHeaderActionType.Hightlight,
-            [classes.hasConfirm]: confirmation,
+            [classes.context]:
+              visualActionType === PageHeaderActionType.Context,
+            [classes.active]: visualActionType === PageHeaderActionType.Active,
+            [classes.highlight]:
+              visualActionType === PageHeaderActionType.Hightlight,
+            [classes.hasConfirm]: isConfirming,
           },
           'page-header-action-container',
           className,
         )} // Show different bg-color when confirmation is displayed
-        ref={setReferenceElement as React.LegacyRef<HTMLButtonElement>}
-        onClick={onClickHandler}
-        onMouseEnter={() => setIsMouseOver(true)}
-        onMouseLeave={() => setIsMouseOver(false)}
-        onMouseOver={() => {
-          // Needed in cases where the mouse enters the component after another confirmation dialog was dismissed
-          if (!isMouseOver) {
-            setIsMouseOver(true);
-          }
+        {...triggerProps}
+        onClick={(event) => {
+          event.preventDefault();
+          onTriggerClicked();
         }}
         disabled={disabled}
+        title={visibleIcon !== undefined ? label : undefined}
+        aria-pressed={toggled}
         data-test-id="action"
+        data-test-toggled={toggled}
       >
-        <div className={classes.icon}>
-          {!confirmation &&
-            (typeof icon === 'string' ? (
-              <ImgElement
-                src={icon}
-                {...(imgAlt
-                  ? { alt: imgAlt ?? `${label} icon` }
-                  : { decorative: true })}
-              />
-            ) : (
-              <Icons icon={icon} className={classes.pageHeaderActionsIcons} />
-            ))}
-        </div>
-        <div className={classes.label}>
-          {confirmation && confirmationMode === 'Simple' ? (
-            <SimpleConfirmDialog
-              onConfirmOpen={onConfirmOpen}
-              data={{ mode: 'Simple' }}
-            />
+        <PageHeaderActionContent icon={visibleIcon} imgAlt={imgAlt} tag={tag}>
+          {isSimpleConfirmation ? (
+            simpleConfirmation
           ) : (
             <span data-test-id="label">{label}</span>
           )}
-        </div>
-        {tag && <div className={classes.tag}>{tag}</div>}
+        </PageHeaderActionContent>
       </button>
-      {confirmation && confirmationMode === 'Advanced' && (
-        <ConfirmDialog
-          referenceElement={referenceElement}
-          title={title}
-          cancelButtonText={cancelButtonText}
-          confirmButtonText={confirmButtonText}
-          onCancel={() => setConfirmation(false)}
-          onConfirm={() => {
-            onClick();
-            setConfirmation(false);
-          }}
-          onConfirmOpen={(isOpen) =>
-            onConfirmOpenHandler(isOpen, { mode: 'Advanced' })
-          }
-        >
-          {body}
-        </ConfirmDialog>
-      )}
+      {advancedConfirmation}
     </>
   );
 };
@@ -199,7 +123,8 @@ const PageHeaderNavigationAction: React.FC<PageHeaderNavigationActionProps> = ({
   path,
   tag,
 }) => {
-  const headerIcon = icon ? icon : openInNewTab ? IconName.External : undefined;
+  const headerIcon =
+    icon !== undefined ? icon : openInNewTab ? IconName.External : undefined;
 
   return (
     <Link
@@ -211,26 +136,52 @@ const PageHeaderNavigationAction: React.FC<PageHeaderNavigationActionProps> = ({
       data-test-id="action"
       to={path}
       target={openInNewTab ? '_blank' : undefined}
+      title={headerIcon !== undefined ? label : undefined}
     >
+      <PageHeaderActionContent icon={headerIcon} imgAlt={imgAlt} tag={tag}>
+        <span data-test-id="label">{label}</span>
+      </PageHeaderActionContent>
+    </Link>
+  );
+};
+
+/**
+ * The icon of an action, or its label if it has no icon.
+ *
+ * A label that gives way to an icon is kept in place, transparent, so that it
+ * still names the action for assistive technology and receives the clicks on
+ * the action.
+ */
+const PageHeaderActionContent: React.FC<
+  PropsWithChildren<{
+    icon?: IconName | string;
+    imgAlt?: string;
+    tag?: string;
+  }>
+> = ({ icon, imgAlt, tag, children }) => (
+  <>
+    {icon !== undefined && (
       <div className={classes.icon}>
-        {typeof headerIcon === 'string' ? (
+        {typeof icon === 'string' ? (
           <ImgElement
-            src={headerIcon}
-            {...(imgAlt
-              ? { alt: imgAlt ?? `${label} icon` }
-              : { decorative: true })}
+            src={icon}
+            {...(imgAlt ? { alt: imgAlt } : { decorative: true as const })}
           />
         ) : (
-          <Icons icon={headerIcon} className={classes.pageHeaderActionsIcons} />
+          <Icons icon={icon} className={classes.pageHeaderActionsIcons} />
         )}
       </div>
-      <div className={classes.label}>
-        <span data-test-id="label">{label}</span>
-      </div>
-      {tag && <div className={classes.tag}>{tag}</div>}
-    </Link>
-  );
-};
+    )}
+    <div
+      className={clsx(classes.label, {
+        [classes.hiddenLabel]: icon !== undefined,
+      })}
+    >
+      {children}
+    </div>
+    {tag && <div className={classes.tag}>{tag}</div>}
+  </>
+);
 
 /**
  * Determines whether an action data object is a PageHeaderNavigationActionProps object.

package/src/components/PageHeader/helpers.spec.ts

@@ -0,0 +1,60 @@
+import { describe, expect, it, vi } from 'vitest';
+import { IconName } from '../Icons';
+import { PageHeaderActionType } from './PageHeaderAction';
+import { toActionBarAction } from './helpers';
+
+describe('toActionBarAction', () => {
+  it('keeps what the action bar renders of an action with a handler', () => {
+    const onClick = vi.fn();
+
+    expect(
+      toActionBarAction({
+        label: 'Delete',
+        icon: IconName.Delete,
+        imgAlt: 'Delete icon',
+        tag: 'BETA',
+        disabled: true,
+        toggled: false,
+        confirmationMode: 'Advanced',
+        confirmationConfig: { title: 'Delete the items?' },
+        onClick,
+      }),
+    ).toEqual({
+      label: 'Delete',
+      icon: IconName.Delete,
+      imgAlt: 'Delete icon',
+      tag: 'BETA',
+      disabled: true,
+      toggled: false,
+      confirmationMode: 'Advanced',
+      confirmationConfig: { title: 'Delete the items?' },
+      onClick,
+    });
+  });
+
+  it('keeps the path of a navigation action', () => {
+    expect(
+      toActionBarAction({
+        label: 'Open',
+        path: '/details',
+        openInNewTab: true,
+      }),
+    ).toEqual({
+      label: 'Open',
+      path: '/details',
+      openInNewTab: true,
+    });
+  });
+
+  it('drops the properties that only style the page header', () => {
+    const action = toActionBarAction({
+      label: 'Delete',
+      actionType: PageHeaderActionType.Hightlight,
+      className: 'custom-class',
+      onClick: vi.fn(),
+    });
+
+    expect(action).not.toHaveProperty('actionType');
+    expect(action).not.toHaveProperty('className');
+  });
+});

package/src/components/PageHeader/helpers.ts

@@ -0,0 +1,36 @@
+import type { ActionBarAction } from '../ActionBar';
+import { isPageHeaderNavigationAction } from './PageHeaderAction/PageHeaderAction';
+import type { PageHeaderActionProps } from './PageHeaderAction/PageHeaderAction.model';
+
+/**
+ * Converts an action of the page header into an action of the ActionBar.
+ * `actionType` and `className` only style the page header, so they are dropped.
+ * @param action the action to convert
+ */
+export const toActionBarAction = (
+  action: PageHeaderActionProps,
+): ActionBarAction => {
+  const { label, icon, imgAlt, tag, disabled } = action;
+
+  return isPageHeaderNavigationAction(action)
+    ? {
+        label,
+        icon,
+        imgAlt,
+        tag,
+        disabled,
+        path: action.path,
+        openInNewTab: action.openInNewTab,
+      }
+    : {
+        label,
+        icon,
+        imgAlt,
+        tag,
+        disabled,
+        toggled: action.toggled,
+        confirmationMode: action.confirmationMode,
+        confirmationConfig: action.confirmationConfig,
+        onClick: action.onClick,
+      };
+};

package/src/components/index.ts

@@ -1,5 +1,6 @@
 /** Export all components to be included into the node package here */
 export * from './Accordion';
+export * from './ActionBar';
 export * from './Actions';
 export * from './Badge';
 export * from './Buttons';

package/src/hooks/index.ts

@@ -1,6 +1,7 @@
 export * from './models';
 export { useClickOutside } from './useClickOutside/useClickOutside';
 export { useDebounce } from './useDebounce/useDebounce';
+export { useElementWidthObserver } from './useElementWidthObserver/useElementWidthObserver';
 export { useExpand } from './useExpand/useExpand';
 export { useReactRouterPause } from './useReactRouterPause/useReactRouterPause';
 export { useValueOrOnDemand } from './useValueOrOnDemand/useValueOrOnDemand';