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

package/src/styles/variables.scss

@@ -136,11 +136,21 @@ $landingpage-smalltile-stroke-color: var(--mosaic-accent);
 /* PageHeader */
 $page-header-color: #ffffff;
 $page-header-background-color: var(--mosaic-accent);
-$page-header-height: 100px;
+$page-header-height: 70px;
+$page-header-padding: 16px;
+$page-header-title-font-size: 24px;
+$page-header-subtitle-font-size: 12px;
+$page-header-actions-gap: 1px;
+// Distance between groups of actions, e.g. the actions of a station and the
+// toggle of the bulk actions.
+$page-header-spacer-width: 5px;
 
 /* PageHeaderAction */
 $page-header-action-color: #ffffff;
 $page-header-action-background-color: var(--mosaic-primary);
+$page-header-action-width: 70px;
+$page-header-action-icon-size: 34px;
+$page-header-action-font-size: 12px;
 $page-header-action-tag-background-color: var(--mosaic-neutral-2);
 $page-header-action-tag-font-size: 10px;
 
@@ -148,7 +158,12 @@ $page-header-action-confirmation-background-color: var(--mosaic-warning);
 $page-header-action-pressed-color: $page-header-action-background-color;
 $page-header-action-pressed-background-color: $page-header-action-color;
 $page-header-action-icon-color: #ffffff;
-$page-header-action-active-background-color: #ffffff;
+// Matches the action bar that opens below a toggled action, which the action
+// then runs into.
+$page-header-action-active-background-color: var(
+  --action-bar-background-color,
+  var(--mosaic-neutral-3)
+);
 $page-header-action-context-background-color: var(--mosaic-secondary);
 
 $page-header-action-hover-background-color: color-mix(
@@ -173,11 +188,7 @@ $page-header-action-context-disabled-color: color-mix(
   white
 );
 
-$page-header-action-active-hover-background-color: color-mix(
-  in srgb,
-  $page-header-action-active-background-color 75%,
-  white
-);
+$page-header-action-active-hover-background-color: var(--mosaic-neutral-2);
 $page-header-action-disabled-fg-color: color-mix(
   in srgb,
   white 50%,
@@ -505,6 +516,29 @@ $list-error-bg-color: color-mix(in srgb, var(--mosaic-error) 15%, transparent);
 $list-header-border-color: var(--mosaic-neutral-2);
 $list-header-resize-handle-border-color: var(--mosaic-neutral-2);
 
+/* List ActionBar additional vars */
+// Gap between the action bar of the List and whatever sits next to it, e.g. the filters.
+$list-action-bar-start-gap: 2px;
+
+/* ActionBar additional vars */
+$action-bar-background-color: var(--mosaic-neutral-3);
+$action-bar-border-color: var(--mosaic-neutral-2);
+$action-bar-label-color: var(--mosaic-neutral-1);
+$action-bar-action-color: var(--mosaic-secondary);
+// Matches the icon of the button that expands the filters, which sits in the
+// same band as the bar of the List.
+$action-bar-action-icon-size: 27px;
+$action-bar-action-icon-stroke-width: 1.5px;
+$action-bar-action-min-width: 90px;
+// The same tint as a hovered option of the Select, which sets it apart from the
+// background of a toggled action.
+$action-bar-action-hover-background-color: $popper-item-hover-color;
+$action-bar-action-toggled-color: var(--mosaic-accent);
+$action-bar-action-toggled-background-color: var(--mosaic-neutral-2);
+$action-bar-action-confirmation-background-color: var(--mosaic-warning);
+$action-bar-action-disabled-color: var(--mosaic-neutral);
+$action-bar-action-tag-font-size: 10px;
+
 /* ListRow additional vars */
 $list-row-disabled-text-color: var(--mosaic-neutral);
 

package/dist/cjs/components/PageHeader/PageHeaderActionsGroup/PageHeaderActionsGroup.d.ts

@@ -1,35 +0,0 @@
-import React from 'react';
-import { IconName } from '../../Icons';
-import { type PageHeaderActionProps } from '../PageHeaderAction/PageHeaderAction.model';
-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) => Promise<void>;
-}
-/**
- * Used to perform group operations from the PageHeader component.
- * @example
- * <PageHeaderActionsGroup>
- *   <PageHeaderAction action={action} onActionsGroupToggled={onActionsGroupToggledHandler} />
- * </PageHeaderActionsGroup>
- */
-export declare const PageHeaderActionsGroup: React.FC<PageHeaderActionsGroupProps>;
-//# sourceMappingURL=PageHeaderActionsGroup.d.ts.map

package/dist/cjs/components/PageHeader/PageHeaderActionsGroup/PageHeaderActionsGroup.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"PageHeaderActionsGroup.d.ts","sourceRoot":"","sources":["../../../../../src/components/PageHeader/PageHeaderActionsGroup/PageHeaderActionsGroup.tsx"],"names":[],"mappings":"AACA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAKhE,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAKvC,OAAO,EACL,KAAK,qBAAqB,EAE3B,MAAM,4CAA4C,CAAC;AAIpD,MAAM,WAAW,2BAA2B;IAC1C,oDAAoD;IACpD,OAAO,EAAE,qBAAqB,EAAE,CAAC;IACjC,iDAAiD;IACjD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uEAAuE;IACvE,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+BAA+B;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,iEAAiE;IACjE,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IACzB,mEAAmE;IACnE,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,0FAA0F;IAC1F,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;;OAGG;IACH,qBAAqB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CAC9D;AAED;;;;;;GAMG;AACH,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,EAAE,CAAC,2BAA2B,CAyLxE,CAAC"}

package/dist/cjs/components/PageHeader/PageHeaderActionsGroup/PageHeaderActionsGroupsContext.d.ts

@@ -1,6 +0,0 @@
-export interface PageHeaderActionsGroupContextType {
-    registerCollapse: (readonly: () => Promise<void>, uuid: string) => void;
-    collapseAll: (uuid: string) => Promise<void[]>;
-}
-export declare const PageHeaderActionsGroupContext: import("react").Context<PageHeaderActionsGroupContextType>;
-//# sourceMappingURL=PageHeaderActionsGroupsContext.d.ts.map

package/dist/cjs/components/PageHeader/PageHeaderActionsGroup/PageHeaderActionsGroupsContext.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"PageHeaderActionsGroupsContext.d.ts","sourceRoot":"","sources":["../../../../../src/components/PageHeader/PageHeaderActionsGroup/PageHeaderActionsGroupsContext.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,iCAAiC;IAChD,gBAAgB,EAAE,CAAC,QAAQ,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACxE,WAAW,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,EAAE,CAAC,CAAC;CAChD;AAED,eAAO,MAAM,6BAA6B,4DAMtC,CAAC"}

package/dist/cjs/components/PageHeader/PageHeaderActionsGroup/PageHeaderActionsGroupsContextProvider.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-export declare const PageHeaderActionsGroupContextProvider: React.FC;
-//# sourceMappingURL=PageHeaderActionsGroupsContextProvider.d.ts.map

package/dist/cjs/components/PageHeader/PageHeaderActionsGroup/PageHeaderActionsGroupsContextProvider.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"PageHeaderActionsGroupsContextProvider.d.ts","sourceRoot":"","sources":["../../../../../src/components/PageHeader/PageHeaderActionsGroup/PageHeaderActionsGroupsContextProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAKrD,eAAO,MAAM,qCAAqC,EAAE,KAAK,CAAC,EA+BzD,CAAC"}

package/dist/cjs/components/PageHeader/helpers/useElementWidthObserver.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useElementWidthObserver.d.ts","sourceRoot":"","sources":["../../../../../src/components/PageHeader/helpers/useElementWidthObserver.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,uBAAuB,GAAI,CAAC,SAAS,WAAW,OAAK;IAChE,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;CAyBzB,CAAC"}

package/dist/esm/components/PageHeader/PageHeaderActionsGroup/PageHeaderActionsGroup.d.ts

@@ -1,35 +0,0 @@
-import React from 'react';
-import { IconName } from '../../Icons';
-import { type PageHeaderActionProps } from '../PageHeaderAction/PageHeaderAction.model';
-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) => Promise<void>;
-}
-/**
- * Used to perform group operations from the PageHeader component.
- * @example
- * <PageHeaderActionsGroup>
- *   <PageHeaderAction action={action} onActionsGroupToggled={onActionsGroupToggledHandler} />
- * </PageHeaderActionsGroup>
- */
-export declare const PageHeaderActionsGroup: React.FC<PageHeaderActionsGroupProps>;
-//# sourceMappingURL=PageHeaderActionsGroup.d.ts.map

package/dist/esm/components/PageHeader/PageHeaderActionsGroup/PageHeaderActionsGroup.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"PageHeaderActionsGroup.d.ts","sourceRoot":"","sources":["../../../../../src/components/PageHeader/PageHeaderActionsGroup/PageHeaderActionsGroup.tsx"],"names":[],"mappings":"AACA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAKhE,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAKvC,OAAO,EACL,KAAK,qBAAqB,EAE3B,MAAM,4CAA4C,CAAC;AAIpD,MAAM,WAAW,2BAA2B;IAC1C,oDAAoD;IACpD,OAAO,EAAE,qBAAqB,EAAE,CAAC;IACjC,iDAAiD;IACjD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uEAAuE;IACvE,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+BAA+B;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,iEAAiE;IACjE,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IACzB,mEAAmE;IACnE,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,0FAA0F;IAC1F,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;;OAGG;IACH,qBAAqB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CAC9D;AAED;;;;;;GAMG;AACH,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,EAAE,CAAC,2BAA2B,CAyLxE,CAAC"}

package/dist/esm/components/PageHeader/PageHeaderActionsGroup/PageHeaderActionsGroupsContext.d.ts

@@ -1,6 +0,0 @@
-export interface PageHeaderActionsGroupContextType {
-    registerCollapse: (readonly: () => Promise<void>, uuid: string) => void;
-    collapseAll: (uuid: string) => Promise<void[]>;
-}
-export declare const PageHeaderActionsGroupContext: import("react").Context<PageHeaderActionsGroupContextType>;
-//# sourceMappingURL=PageHeaderActionsGroupsContext.d.ts.map

package/dist/esm/components/PageHeader/PageHeaderActionsGroup/PageHeaderActionsGroupsContext.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"PageHeaderActionsGroupsContext.d.ts","sourceRoot":"","sources":["../../../../../src/components/PageHeader/PageHeaderActionsGroup/PageHeaderActionsGroupsContext.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,iCAAiC;IAChD,gBAAgB,EAAE,CAAC,QAAQ,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACxE,WAAW,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,EAAE,CAAC,CAAC;CAChD;AAED,eAAO,MAAM,6BAA6B,4DAMtC,CAAC"}

package/dist/esm/components/PageHeader/PageHeaderActionsGroup/PageHeaderActionsGroupsContextProvider.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-export declare const PageHeaderActionsGroupContextProvider: React.FC;
-//# sourceMappingURL=PageHeaderActionsGroupsContextProvider.d.ts.map

package/dist/esm/components/PageHeader/PageHeaderActionsGroup/PageHeaderActionsGroupsContextProvider.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"PageHeaderActionsGroupsContextProvider.d.ts","sourceRoot":"","sources":["../../../../../src/components/PageHeader/PageHeaderActionsGroup/PageHeaderActionsGroupsContextProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAKrD,eAAO,MAAM,qCAAqC,EAAE,KAAK,CAAC,EA+BzD,CAAC"}

package/dist/esm/components/PageHeader/helpers/useElementWidthObserver.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useElementWidthObserver.d.ts","sourceRoot":"","sources":["../../../../../src/components/PageHeader/helpers/useElementWidthObserver.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,uBAAuB,GAAI,CAAC,SAAS,WAAW,OAAK;IAChE,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;CAyBzB,CAAC"}

package/src/components/PageHeader/PageHeaderActionsGroup/PageHeaderActionsGroup.module.scss

@@ -1,77 +0,0 @@
-@import '../../../styles/common.scss';
-
-.container {
-  display: grid;
-  grid-template-rows: $page-header-height 1fr;
-  grid-template-columns: max-content 1fr;
-  grid-gap: 1px;
-  justify-content: end;
-  width: max-content;
-
-  .actions {
-    display: grid;
-    grid-auto-flow: column;
-    grid-gap: 1px;
-    transition: max-width 200ms linear, opacity 150ms linear;
-    overflow: hidden;
-  }
-
-  .dropDownList {
-    width: 100%;
-    max-width: 360px;
-    display: grid;
-    grid-template-columns: 1fr;
-    grid-auto-rows: 60px;
-    grid-gap: 1px;
-
-    border-top: 2px solid white;
-
-    grid-column: 1 / span 2;
-    place-self: end;
-
-    background-color: white;
-
-    z-index: 2;
-
-    .dropDown {
-      height: unset;
-      width: unset;
-
-      display: grid;
-      grid-template-columns: 1fr 40px;
-      grid-template-rows: 1fr;
-
-      // icon
-      div:first-child {
-        display: grid;
-        align-items: center;
-        grid-row: 1 / span 1;
-        justify-items: start;
-        grid-column: 2 / span 1;
-        padding: 0px;
-
-        svg,
-        img {
-          height: 30px;
-        }
-      }
-
-      // label
-      div:last-child {
-        display: grid;
-        align-items: center;
-        grid-column: 1 / span 1;
-        justify-items: start;
-
-        padding: 0px 0px 0px 20px;
-
-        span {
-          height: 30px;
-
-          display: grid;
-          align-items: center;
-        }
-      }
-    }
-  }
-}

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

@@ -1,122 +0,0 @@
-import { render } from '@testing-library/react';
-import React from 'react';
-import { act } from 'react-dom/test-utils';
-import { describe, expect, it, vi } from 'vitest';
-import { noop } from '../../../helpers/utils';
-import type { PageHeaderActionProps } from '../PageHeaderAction/PageHeaderAction.model';
-import {
-  PageHeaderActionsGroup,
-  type PageHeaderActionsGroupProps,
-} from './PageHeaderActionsGroup';
-
-vi.mock('../../../utils/GenerateId', () => ({
-  uuid: vi.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 { container } = render(<PageHeaderActionsGroup {...defaultProps} />);
-    expect(container).toBeTruthy();
-  });
-
-  it(`'Group Actions' has the 'Context' actionType when closed and 'Active' actionType when open`, async () => {
-    const { container } = render(<PageHeaderActionsGroup {...defaultProps} />);
-
-    // The component should render with a group action container
-    const groupContainer = container.querySelector(
-      '.page-header-group-action-container',
-    );
-    expect(groupContainer).toBeInTheDocument();
-
-    // Click to toggle the group open
-    const groupActionButton = container.querySelector(
-      '[data-test-id="action"]',
-    ) as HTMLElement;
-
-    await act(async () => {
-      groupActionButton.click();
-    });
-
-    // After clicking, the actions should be visible
-    const visibleActions = container.querySelectorAll(
-      '[data-test-id="action"]',
-    );
-    expect(visibleActions.length).toBeGreaterThan(1);
-  });
-
-  it(`renders all actions when 'Group Actions' is selected and there is enough available action slots`, async () => {
-    const { container } = render(
-      <PageHeaderActionsGroup {...defaultProps} availableActionSpace={5} />,
-    );
-    const groupActionsToggle = container.querySelector(
-      '[data-test-id="action"]',
-    ) as HTMLElement;
-
-    await act(async () => {
-      groupActionsToggle.click();
-    });
-
-    // Should have 1 group action button + 4 action buttons inside = 5 total
-    const actions = container.querySelectorAll('[data-test-id="action"]');
-    expect(actions).toHaveLength(5);
-  });
-
-  it(`raises onActionsGroupToggled`, async () => {
-    const groupActionSpy = vi.fn().mockResolvedValue(undefined);
-    const { container } = render(
-      <PageHeaderActionsGroup
-        {...defaultProps}
-        onActionsGroupToggled={groupActionSpy}
-      />,
-    );
-    const groupActionsToggle = container.querySelector(
-      '[data-test-id="action"]',
-    ) as HTMLElement;
-
-    await act(async () => {
-      groupActionsToggle.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 { container } = render(
-      <PageHeaderActionsGroup
-        {...defaultProps}
-        openActionsGroupOnStart={true}
-        availableActionSpace={3}
-      />,
-    );
-
-    // Should render group action button + visible action buttons based on available space
-    const actions = container.querySelectorAll('[data-test-id="action"]');
-
-    expect(actions.length).toBeGreaterThanOrEqual(3);
-  });
-});

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

@@ -1,235 +0,0 @@
-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 type { ConfirmationMode } from '../../ConfirmDialog';
-import { IconName } from '../../Icons';
-import {
-  PageHeaderAction,
-  isPageHeaderJsAction,
-} from '../PageHeaderAction/PageHeaderAction';
-import {
-  type PageHeaderActionProps,
-  PageHeaderActionType,
-} from '../PageHeaderAction/PageHeaderAction.model';
-import classes from './PageHeaderActionsGroup.module.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) => Promise<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(
-    () => Promise.resolve(onActionsGroupToggled(false)).then(() => collapse()),
-    [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 showMore = actions.length > availableActionSpace && actions.length > 1;
-  const visibleActions = showMore
-    ? Math.max(availableActionSpace, 1)
-    : actions.length;
-
-  const actionsSlice = showMore
-    ? Math.max(availableActionSpace - 1, 0)
-    : actions.length;
-
-  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={async () => {
-          try {
-            if (!isExpanded) {
-              await collapseAll(uniqueId);
-            }
-            await onActionsGroupToggled(!isExpanded);
-            toggleExpanded();
-          } catch (_) {
-            // Abort the action if an error occurs
-            return;
-          }
-        }}
-        disabled={disabled}
-      />
-      <div
-        style={{
-          maxWidth: isExpanded ? `${visibleActions * 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} />
-          ),
-        )}
-        {showMore && (
-          <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}
-                tag={undefined}
-                label={
-                  action.tag ? `${action.label} (${action.tag})` : action.label
-                }
-                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

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