@axinom/mosaic-ui 0.49.0-rc.5 → 0.49.0-rc.6

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

@@ -2,21 +2,24 @@ import { action } from '@storybook/addon-actions';
 import { Meta, StoryObj } from '@storybook/react';
 import { IconName } from '../Icons';
 import { PageHeader } from './PageHeader';
+import { PageHeaderActionItemProps } from './PageHeader.model';
 import {
   PageHeaderActionProps,
   PageHeaderActionType,
 } from './PageHeaderAction';
 import {} from './PageHeaderAction/PageHeaderAction';
 
-const headerActions: PageHeaderActionProps[] = [
+const headerActions: PageHeaderActionItemProps[] = [
   {
     label: 'Undo',
     icon: IconName.Undo,
+    kind: 'action',
     onClick: action('onActionSelected'),
   },
   {
     label: 'Cancel',
     icon: IconName.X,
+    kind: 'action',
     onClick: action('onActionSelected'),
   },
 ];
@@ -101,7 +104,7 @@ export const Actions: StoryObj<typeof PageHeader> = {
   },
 };
 
-export const BulkActions: StoryObj<typeof PageHeader> = {
+export const ActionsGroup: StoryObj<typeof PageHeader> = {
   parameters: {
     docs: {
       description: {
@@ -113,13 +116,19 @@ export const BulkActions: StoryObj<typeof PageHeader> = {
   args: {
     title: 'Title',
     subtitle: 'Subtitle',
-    bulkActions: bulkHeaderActions,
-    openBulkActionsOnStart: false,
+    actions: [
+      {
+        label: 'Bulk Actions',
+        icon: IconName.Bulk,
+        kind: 'group',
+        actions: bulkHeaderActions,
+      },
+    ],
   },
 };
 
 export const All: StoryObj<typeof PageHeader> = {
-  name: 'Titles, Bulk Actions, & Actions',
+  name: 'Titles, Actions, & Actions Groups',
   parameters: {
     docs: {
       description: {
@@ -131,7 +140,23 @@ export const All: StoryObj<typeof PageHeader> = {
   args: {
     title: 'Title',
     subtitle: 'Subtitle',
-    actions: headerActions,
-    bulkActions: bulkHeaderActions,
+    actions: [
+      ...headerActions,
+      { kind: 'spacer' },
+      {
+        label: 'Bulk Actions',
+        icon: IconName.Bulk,
+        kind: 'group',
+        actions: bulkHeaderActions,
+        onActionsGroupToggled: action('onBulkActions1Toggled'),
+      },
+      {
+        label: 'Bulk Actions 2',
+        icon: IconName.Bulk,
+        kind: 'group',
+        actions: [bulkHeaderActions[0]],
+        onActionsGroupToggled: action('onBulkActions2Toggled'),
+      },
+    ],
   },
 };

package/src/components/PageHeader/PageHeader.tsx

@@ -1,90 +1,57 @@
 import clsx from 'clsx';
-import React, { useEffect, useState } from 'react';
-import { noop } from '../../helpers/utils';
+import React from 'react';
 import { useTabTitle } from '../../hooks/useTabTitle/useTabTitle';
 import { useWindowSize } from '../../hooks/useWindowSize/useWindowSize';
 import { PageHeaderProps } from './PageHeader.model';
 import classes from './PageHeader.scss';
+import { PageHeaderActionProps } from './PageHeaderAction';
 import { PageHeaderAction } from './PageHeaderAction/PageHeaderAction';
-import { PageHeaderBulkActions } from './PageHeaderBulkActions/PageHeaderBulkActions';
+import { PageHeaderActionsGroup } from './PageHeaderActionsGroup/PageHeaderActionsGroup';
+import { PageHeaderActionsGroupContextProvider } from './PageHeaderActionsGroup/PageHeaderActionsGroupsContextProvider';
 
 /**
- * Primary header for stations. Accepts a title, subtitle, actions, and bulk actions.
+ * Primary header for stations. Accepts a title, subtitle, actions, and actions groups.
  * @example
- * <PageHeader title="title" subtitle="subtitle" />
+ * <PageHeader title="title" subtitle="subtitle" actions={[
+ *  { label: 'Undo', icon: IconName.Undo, kind: 'action', onClick: onActionSelected },
+ *  { label: 'Cancel', icon: IconName.X, kind: 'action' onClick: onActionSelected },
+ *  { kind: 'spacer' },
+ *  { label: 'Actions Group', kind: 'group', actions: [
+ *    { label: 'Action 1', actionType: PageHeaderActionType.Context, icon: IconName.Delete, confirmationMode: 'Advanced', onClick: onActionSelected },
+ *  ]}
+ * ]} />
  */
 export const PageHeader: React.FC<PageHeaderProps> = ({
   title = '',
   subtitle = '',
   actions = [],
-  bulkActions = [],
-  bulkActionsDisabled = false,
-  openBulkActionsOnStart = false,
-  onBulkActionsToggled = noop,
   className = '',
   setTabTitle = true,
 }) => {
-  const [containerScrollWidth, setContainerScrollWidth] = useState<number>(0);
-  const [childrenScrollWidth, setChildrenScrollWidth] = useState<number>(0);
-  const [availableActionSpace, setAvailableActionSpace] = useState<number>(0);
-  const ActionsWidth = 120;
-  const { width } = useWindowSize();
-
-  // Order of this useEffect hook is important
-  useEffect(() => {
-    setContainerScrollWidth(width);
-  }, [width]);
-
-  const actionsRef = (node: HTMLDivElement): void => {
-    if (node !== null) {
-      setChildrenScrollWidth(node.scrollWidth);
-    }
-  };
-
   useTabTitle(title, setTabTitle);
+  const { width } = useWindowSize();
+  const containerRef = React.useRef<HTMLDivElement>(null);
 
-  useEffect(() => {
-    // only perform calculation if there are bulkActions
-    if (bulkActions.length > 0) {
-      const minimumTitleWidth = width >= 1920 ? 510 : 120;
-      const availableWidth: number =
-        containerScrollWidth - (minimumTitleWidth + childrenScrollWidth);
+  const [availableActionSpace, setAvailableActionSpace] =
+    React.useState<number>(0);
 
-      const bulkActionSpace = 1;
-      const moreActionSpace = 1;
+  React.useEffect(() => {
+    if (containerRef.current) {
+      // Use up to 75% of the container width for actions
+      const maxActionsWidth = containerRef.current.clientWidth * 0.75;
 
-      // calculates the number of bulk action spaces available
-      let currentAvailableActionSpace: number = Math.floor(
-        availableWidth / ActionsWidth - bulkActionSpace,
+      // Each action is 120px wide
+      setAvailableActionSpace(
+        Math.floor(maxActionsWidth / 120 - actions.length),
       );
-
-      // determines if the 'more' action will take up an action slot
-      if (bulkActions.length > currentAvailableActionSpace) {
-        currentAvailableActionSpace -= moreActionSpace;
-      }
-
-      // prevents current available space from going negative
-      if (currentAvailableActionSpace < 0) {
-        currentAvailableActionSpace = 0;
-      }
-
-      // update available action space if the currentAvailableActionSpace has changed
-      if (currentAvailableActionSpace !== availableActionSpace) {
-        setAvailableActionSpace(currentAvailableActionSpace);
-      }
     }
-  }, [
-    bulkActions,
-    availableActionSpace,
-    childrenScrollWidth,
-    containerScrollWidth,
-    width,
-  ]);
+  }, [width, actions.length]);
 
   return (
     <div
       className={clsx(classes.container, 'page-header-container', className)}
       data-test-id="page-header"
+      ref={containerRef}
     >
       <div className={clsx(classes.titles)}>
         <div className={clsx(classes.title)} data-test-id="page-header-title">
@@ -98,24 +65,30 @@ export const PageHeader: React.FC<PageHeaderProps> = ({
           {subtitle}
         </div>
       </div>
-      {bulkActions.length > 0 && (
-        <PageHeaderBulkActions
-          availableActionSpace={availableActionSpace}
-          actions={bulkActions}
-          openBulkActionsOnStart={openBulkActionsOnStart}
-          onBulkActionsToggled={onBulkActionsToggled}
-          bulkActionsDisabled={bulkActionsDisabled}
-        />
-      )}
-      <div
-        className={clsx(classes.actions)}
-        style={{ marginLeft: actions.length > 0 ? '10px' : undefined }}
-        ref={actionsRef}
-        data-test-id="page-header-actions"
-      >
-        {actions.map((action, index) => {
-          return <PageHeaderAction key={index} {...action} />;
-        })}
+      <div className={classes.actions} data-test-id="page-header-actions">
+        <PageHeaderActionsGroupContextProvider>
+          {actions.map((action, index) => {
+            switch (action.kind) {
+              case 'group':
+                return (
+                  <PageHeaderActionsGroup
+                    key={index}
+                    {...action}
+                    availableActionSpace={availableActionSpace}
+                  />
+                );
+              case 'spacer':
+                return <div key={index} className={classes.spacer} />;
+              case 'action':
+                return (
+                  <PageHeaderAction
+                    key={index}
+                    {...(action as PageHeaderActionProps)}
+                  />
+                );
+            }
+          })}
+        </PageHeaderActionsGroupContextProvider>
       </div>
     </div>
   );

package/src/components/PageHeader/{PageHeaderBulkActions/PageHeaderBulkActions.scss → PageHeaderActionsGroup/PageHeaderActionsGroup.scss}

@@ -2,36 +2,36 @@
 
 .container {
   display: grid;
-  grid-template-rows: 1fr;
-  grid-auto-flow: column;
+  grid-template-rows: $page-header-height 1fr;
+  grid-template-columns: max-content 1fr;
   grid-gap: 1px;
   justify-content: end;
+  width: max-content;
 
-  .hasMore {
-    width: 120px;
+  .actions {
     display: grid;
-    grid-template-columns: 1fr;
-    grid-template-rows: 1fr;
-
-    position: relative;
+    grid-auto-flow: column;
+    grid-gap: 1px;
+    transition: max-width 200ms linear, opacity 150ms linear;
+    overflow: hidden;
+  }
 
-    .dropDownList {
-      width: 360px;
-      display: grid;
-      grid-template-columns: 1fr;
-      grid-auto-rows: 60px;
-      grid-gap: 1px;
+  .dropDownList {
+    width: 100%;
+    max-width: 360px;
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-auto-rows: 60px;
+    grid-gap: 1px;
 
-      border-top: 2px solid white;
+    border-top: 2px solid white;
 
-      position: absolute;
-      top: $page-header-height;
-      right: 0px;
+    grid-column: 1 / span 2;
+    place-self: end;
 
-      background-color: white;
+    background-color: white;
 
-      z-index: 2;
-    }
+    z-index: 2;
   }
 }
 

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

@@ -0,0 +1,105 @@
+import { mount, shallow } from 'enzyme';
+import React from 'react';
+import { noop } from '../../../helpers/utils';
+import { PageHeaderAction } from '../PageHeaderAction/PageHeaderAction';
+import {
+  PageHeaderActionProps,
+  PageHeaderActionType,
+} from '../PageHeaderAction/PageHeaderAction.model';
+import {
+  PageHeaderActionsGroup,
+  PageHeaderActionsGroupProps,
+} from './PageHeaderActionsGroup';
+
+jest.mock('../../../utils/GenerateId', () => ({
+  uuid: jest.fn().mockReturnValue('test-uuid'),
+}));
+
+const defaultActions: PageHeaderActionProps[] = [
+  {
+    label: 'Group Action 1',
+    onClick: noop,
+  },
+  {
+    label: 'Group Action 2',
+    onClick: noop,
+  },
+  {
+    label: 'Group Action 3',
+    onClick: noop,
+  },
+  {
+    label: 'Group Action 4',
+    onClick: noop,
+  },
+];
+
+const defaultProps: PageHeaderActionsGroupProps = {
+  label: 'Group Actions',
+  actions: defaultActions,
+};
+
+describe('PageHeaderActionsGroup', () => {
+  it('renders the component without crashing', () => {
+    const wrapper = shallow(<PageHeaderActionsGroup {...defaultProps} />);
+    expect(wrapper).toBeTruthy();
+  });
+
+  it(`'Group Actions' has the 'Context' actionType when closed and 'Active' actionType when open`, () => {
+    const wrapper = mount(<PageHeaderActionsGroup {...defaultProps} />);
+    let groupActionsToggle = wrapper.find(PageHeaderAction).first();
+    // let action = wrapper.find(PageHeaderAction);
+
+    expect(groupActionsToggle.prop('actionType')).toBe(
+      PageHeaderActionType.Context,
+    );
+
+    groupActionsToggle.simulate('click');
+
+    groupActionsToggle = wrapper.find(PageHeaderAction).first();
+
+    expect(groupActionsToggle.prop('actionType')).toBe(
+      PageHeaderActionType.Active,
+    );
+  });
+
+  it(`renders all actions when 'Group Actions' is selected and there is enough available action slots`, () => {
+    const wrapper = mount(
+      <PageHeaderActionsGroup {...defaultProps} availableActionSpace={5} />,
+    );
+    const groupActionsToggle = wrapper.find(PageHeaderAction).first();
+    let actions = wrapper.find(PageHeaderAction);
+
+    groupActionsToggle.simulate('click');
+    actions = wrapper.find(PageHeaderAction);
+    expect(actions).toHaveLength(5);
+  });
+
+  it(`raises onActionsGroupToggled`, () => {
+    const groupActionSpy = jest.fn();
+    const wrapper = mount(
+      <PageHeaderActionsGroup
+        {...defaultProps}
+        onActionsGroupToggled={groupActionSpy}
+      />,
+    );
+    const groupActionsToggle = wrapper.find(PageHeaderAction).first();
+    groupActionsToggle.simulate('click');
+    expect(groupActionSpy).toHaveBeenCalledTimes(1);
+    expect(groupActionSpy).toHaveBeenCalledWith(true);
+  });
+
+  it(`renders 'Group Actions' and 'More Actions' if openActionsGroupOnStart is set to true and there isn't enough available space`, () => {
+    const wrapper = mount(
+      <PageHeaderActionsGroup
+        {...defaultProps}
+        openActionsGroupOnStart={true}
+        availableActionSpace={3}
+      />,
+    );
+
+    const actions = wrapper.find(PageHeaderAction);
+
+    expect(actions).toHaveLength(4);
+  });
+});

package/src/components/PageHeader/PageHeaderActionsGroup/PageHeaderActionsGroup.tsx

@@ -0,0 +1,224 @@
+import clsx from 'clsx';
+import React, { useCallback, useEffect, useState } from 'react';
+import { noop } from '../../../helpers/utils';
+import { useExpand } from '../../../hooks/useExpand/useExpand';
+import { uuid } from '../../../utils/GenerateId';
+import { ConfirmationMode } from '../../ConfirmDialog';
+import { IconName } from '../../Icons';
+import {
+  PageHeaderAction,
+  isPageHeaderJsAction,
+} from '../PageHeaderAction/PageHeaderAction';
+import {
+  PageHeaderActionProps,
+  PageHeaderActionType,
+} from '../PageHeaderAction/PageHeaderAction.model';
+import classes from './PageHeaderActionsGroup.scss';
+import { PageHeaderActionsGroupContext } from './PageHeaderActionsGroupsContext';
+
+export interface PageHeaderActionsGroupProps {
+  /** Array of Actions to be rendered (default: []) */
+  actions: PageHeaderActionProps[];
+  /** Whether group is disabled (default: false) */
+  disabled?: boolean;
+  /** Whether actions in the group are disabled or not (default: false)*/
+  groupActionsDisabled?: boolean;
+  /** CSS Class name for additional styles */
+  className?: string;
+  /** The label of the action. */
+  label: string;
+  /** Optional built in icon. This prop also accepts an img src. */
+  icon?: IconName | string;
+  /** Whether group actions are shown by default. (default: false) */
+  openActionsGroupOnStart?: boolean;
+  /** The number of actions that can be displayed in the group. (default: actions.length) */
+  availableActionSpace?: number;
+  /**
+   * Callback to emit when Group Actions is toggled
+   * The expanded state is supplied as an argument
+   */
+  onActionsGroupToggled?: (expanded: boolean) => void;
+}
+
+/**
+ * Used to perform group operations from the PageHeader component.
+ * @example
+ * <PageHeaderActionsGroup>
+ *   <PageHeaderAction action={action} onActionsGroupToggled={onActionsGroupToggledHandler} />
+ * </PageHeaderActionsGroup>
+ */
+export const PageHeaderActionsGroup: React.FC<PageHeaderActionsGroupProps> = ({
+  actions = [],
+  openActionsGroupOnStart = false,
+  label,
+  icon,
+  onActionsGroupToggled = noop,
+  groupActionsDisabled = false,
+  disabled = false,
+  availableActionSpace = actions.length,
+  className = '',
+}) => {
+  const [uniqueId] = useState<string>(uuid());
+  const { isExpanded, toggleExpanded, collapse } = useExpand(
+    openActionsGroupOnStart,
+  );
+
+  const { registerCollapse, collapseAll } = React.useContext(
+    PageHeaderActionsGroupContext,
+  );
+
+  const customCollapse = useCallback(() => {
+    collapse();
+    onActionsGroupToggled(false);
+  }, [collapse, onActionsGroupToggled]);
+
+  useEffect(() => {
+    registerCollapse(customCollapse, uniqueId);
+  }, [customCollapse, registerCollapse, uniqueId]);
+
+  const {
+    isExpanded: isMoreExpanded,
+    expand: moreExpanded,
+    collapse: moreCollapse,
+    toggleExpanded: toggleMoreExpanded,
+  } = useExpand();
+
+  const [isMouseOverMore, setIsMouseOverMore] = useState<boolean>(false);
+  const [isConfirmOpen, setIsConfirmOpen] = useState<Record<string, boolean>>(
+    {},
+  );
+
+  const onConfirmToggled = (
+    isOpen: boolean,
+    data: { id: string; mode: ConfirmationMode },
+  ): void => {
+    setIsConfirmOpen((prevState) => {
+      return { ...prevState, [data.id]: isOpen };
+    });
+  };
+
+  useEffect(() => {
+    const hasConfirm: boolean = Object.values(isConfirmOpen).includes(true);
+
+    // open drop down
+    if (isMouseOverMore) {
+      moreExpanded();
+      // close drop down if no confirmation is active
+    } else if (!isMouseOverMore && !hasConfirm) {
+      moreCollapse();
+      // keep the drop down open if confirmation is active
+    } else if (!isMouseOverMore && hasConfirm) {
+      return;
+    }
+  }, [isConfirmOpen, isMouseOverMore, moreCollapse, moreExpanded]);
+
+  const actionsSlice =
+    availableActionSpace < actions.length
+      ? availableActionSpace - 1
+      : availableActionSpace;
+
+  return (
+    <div
+      className={clsx(
+        classes.container,
+        'page-header-group-action-container',
+        className,
+      )}
+      onMouseLeave={() => setIsMouseOverMore(false)}
+    >
+      <PageHeaderAction
+        label={label}
+        actionType={
+          isExpanded
+            ? PageHeaderActionType.Active
+            : PageHeaderActionType.Context
+        }
+        icon={icon}
+        onClick={() => {
+          if (!isExpanded) {
+            collapseAll();
+          }
+          toggleExpanded();
+          onActionsGroupToggled(!isExpanded);
+        }}
+        disabled={disabled}
+      />
+      <div
+        style={{
+          maxWidth: isExpanded
+            ? `${Math.min(availableActionSpace, actions.length) * 121}px`
+            : `0px`,
+          opacity: isExpanded ? 1 : 0,
+        }}
+        className={classes.actions}
+      >
+        {actions.slice(0, actionsSlice).map((action, idx) =>
+          isPageHeaderJsAction(action) ? (
+            <PageHeaderAction
+              key={idx}
+              {...action}
+              disabled={groupActionsDisabled}
+              confirmationConfig={{
+                ...action.confirmationConfig,
+                onConfirmOpen: (isOpen: boolean, args: unknown) => {
+                  onConfirmToggled(
+                    isOpen,
+                    args as { id: string; mode: ConfirmationMode },
+                  );
+                  action.confirmationConfig?.onConfirmOpen?.(isOpen, args);
+                },
+              }}
+            />
+          ) : (
+            <PageHeaderAction key={idx} {...action} />
+          ),
+        )}
+        {actions.length > availableActionSpace && (
+          <div onMouseEnter={() => setIsMouseOverMore(true)}>
+            <PageHeaderAction
+              label="More"
+              icon={IconName.Ellipsis}
+              actionType={
+                isMoreExpanded
+                  ? PageHeaderActionType.Active
+                  : PageHeaderActionType.Context
+              }
+              onClick={() => toggleMoreExpanded()}
+            />
+          </div>
+        )}
+      </div>
+      {isMoreExpanded && (
+        <div className={clsx(classes.dropDownList)}>
+          {actions.slice(actionsSlice).map((action, idx) =>
+            isPageHeaderJsAction(action) ? (
+              <PageHeaderAction
+                key={idx}
+                {...action}
+                disabled={groupActionsDisabled}
+                onClick={() => {
+                  action.onClick();
+                  moreCollapse();
+                  setIsMouseOverMore(false);
+                }}
+                className={clsx(classes.dropDown)}
+                confirmationConfig={{
+                  ...action.confirmationConfig,
+                  onConfirmOpen: (isOpen, args) => {
+                    onConfirmToggled(
+                      isOpen,
+                      args as { id: string; mode: ConfirmationMode },
+                    );
+                    action.confirmationConfig?.onConfirmOpen?.(isOpen, args);
+                  },
+                }}
+              />
+            ) : (
+              <PageHeaderAction key={idx} {...action} />
+            ),
+          )}
+        </div>
+      )}
+    </div>
+  );
+};

package/src/components/PageHeader/PageHeaderActionsGroup/PageHeaderActionsGroupsContext.ts

@@ -0,0 +1,13 @@
+import { createContext } from 'react';
+import { noop } from '../../../helpers/utils';
+
+export interface PageHeaderActionsGroupContextType {
+  registerCollapse: (readonly: () => void, uuid: string) => void;
+  collapseAll: () => void;
+}
+
+export const PageHeaderActionsGroupContext =
+  createContext<PageHeaderActionsGroupContextType>({
+    registerCollapse: noop,
+    collapseAll: noop,
+  });

package/src/components/PageHeader/PageHeaderActionsGroup/PageHeaderActionsGroupsContextProvider.tsx

@@ -0,0 +1,30 @@
+import React, { useCallback, useState } from 'react';
+import { PageHeaderActionsGroupContext } from './PageHeaderActionsGroupsContext';
+
+type CollapseAction = Record<string, () => void>;
+
+export const PageHeaderActionsGroupContextProvider: React.FC = ({
+  children,
+}) => {
+  const [registeredCollapses, setRegisteredCollapses] =
+    useState<CollapseAction>({});
+
+  const registerCollapse = useCallback(
+    (collapse: () => void, uuid: string): void => {
+      setRegisteredCollapses((prev) => ({ ...prev, [uuid]: collapse }));
+    },
+    [],
+  );
+
+  const collapseAll = useCallback(() => {
+    Object.values(registeredCollapses).forEach((collapse) => collapse());
+  }, [registeredCollapses]);
+
+  return (
+    <PageHeaderActionsGroupContext.Provider
+      value={{ registerCollapse, collapseAll }}
+    >
+      {children}
+    </PageHeaderActionsGroupContext.Provider>
+  );
+};

package/src/components/PageHeader/index.ts

@@ -1,5 +1,5 @@
 export { PageHeader } from './PageHeader';
-export { PageHeaderProps } from './PageHeader.model';
+export { PageHeaderActionItemProps, PageHeaderProps } from './PageHeader.model';
 export {
   PageHeaderAction,
   PageHeaderActionProps,