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

package/dist/components/DynamicDataList/helpers/generateId.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"generateId.d.ts","sourceRoot":"","sources":["../../../../src/components/DynamicDataList/helpers/generateId.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,IAAI,QAAO,MAKvB,CAAC"}

package/dist/components/PageHeader/PageHeaderBulkActions/PageHeaderBulkActions.d.ts

@@ -1,22 +0,0 @@
-import React from 'react';
-import { PageHeaderProps } from '../PageHeader.model';
-import { PageHeaderActionProps } from '../PageHeaderAction/PageHeaderAction.model';
-export interface PageHeaderBulkActionsProps extends Pick<PageHeaderProps, 'openBulkActionsOnStart' | 'onBulkActionsToggled'> {
-    /** Array of Actions to be rendered (default: []) */
-    actions?: PageHeaderActionProps[];
-    /** Number of available slots actions can use in the PageHeader */
-    availableActionSpace: number;
-    /** Whether or not bulk actions are disabled (default: false)*/
-    bulkActionsDisabled?: boolean;
-    /** CSS Class name for additional styles */
-    className?: string;
-}
-/**
- * Used to perform bulk operations from the PageHeader component.
- * @example
- * <PageHeaderBulkActions>
- *   <PageHeaderAction action={action} onBulkActionsToggled={onBulkActionsToggledHandler} />
- * </PageHeaderBulkActions>
- */
-export declare const PageHeaderBulkActions: React.FC<PageHeaderBulkActionsProps>;
-//# sourceMappingURL=PageHeaderBulkActions.d.ts.map

package/dist/components/PageHeader/PageHeaderBulkActions/PageHeaderBulkActions.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"PageHeaderBulkActions.d.ts","sourceRoot":"","sources":["../../../../src/components/PageHeader/PageHeaderBulkActions/PageHeaderBulkActions.tsx"],"names":[],"mappings":"AACA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAKnD,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAKtD,OAAO,EACL,qBAAqB,EAEtB,MAAM,4CAA4C,CAAC;AAGpD,MAAM,WAAW,0BACf,SAAQ,IAAI,CACV,eAAe,EACf,wBAAwB,GAAG,sBAAsB,CAClD;IACD,oDAAoD;IACpD,OAAO,CAAC,EAAE,qBAAqB,EAAE,CAAC;IAClC,kEAAkE;IAClE,oBAAoB,EAAE,MAAM,CAAC;IAC7B,+DAA+D;IAC/D,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;GAMG;AACH,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,0BAA0B,CAoJtE,CAAC"}

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

@@ -1,369 +0,0 @@
-import { mount, shallow } from 'enzyme';
-import React from 'react';
-import { act } from 'react-dom/test-utils';
-import { noop } from '../../../helpers/utils';
-import { PageHeaderAction } from '../PageHeaderAction/PageHeaderAction';
-import {
-  PageHeaderActionProps,
-  PageHeaderActionType,
-} from '../PageHeaderAction/PageHeaderAction.model';
-import {
-  PageHeaderBulkActions,
-  PageHeaderBulkActionsProps,
-} from './PageHeaderBulkActions';
-
-const defaultActions: PageHeaderActionProps[] = [
-  {
-    label: 'Bulk Action 1',
-    onClick: noop,
-  },
-  {
-    label: 'Bulk Action 2',
-    onClick: noop,
-  },
-  {
-    label: 'Bulk Action 3',
-    onClick: noop,
-  },
-];
-
-const defaultProps: PageHeaderBulkActionsProps = {
-  availableActionSpace: 0,
-  actions: defaultActions,
-};
-
-describe('PageHeaderBulkActions', () => {
-  it('renders the component without crashing', () => {
-    const wrapper = shallow(<PageHeaderBulkActions {...defaultProps} />);
-    expect(wrapper).toBeTruthy();
-  });
-
-  it(`renders only 'Bulk Actions' by default`, () => {
-    const wrapper = mount(<PageHeaderBulkActions {...defaultProps} />);
-    const actions = wrapper.find(PageHeaderAction);
-    expect(actions).toHaveLength(1);
-  });
-
-  it(`'Bulk Actions' has the 'Context' actionType when closed and 'Active' actionType when open`, () => {
-    const wrapper = mount(
-      <PageHeaderBulkActions
-        {...defaultProps}
-        availableActionSpace={defaultActions.length}
-      />,
-    );
-    const bulkActionsToggle = wrapper.find(PageHeaderAction).first();
-    let action = wrapper.find(PageHeaderAction);
-
-    expect(action.prop('actionType')).toBe(PageHeaderActionType.Context);
-
-    bulkActionsToggle.simulate('click');
-    action = wrapper.find(PageHeaderAction).first();
-
-    expect(action.prop('actionType')).toBe(PageHeaderActionType.Active);
-  });
-
-  it(`renders all actions when 'Bulk Actions' is selected and there is enough available action slots`, () => {
-    const wrapper = mount(
-      <PageHeaderBulkActions
-        {...defaultProps}
-        availableActionSpace={defaultActions.length}
-      />,
-    );
-    const bulkActionsToggle = wrapper.find(PageHeaderAction).first();
-    let actions = wrapper.find(PageHeaderAction);
-    const bulkActionCount = 1;
-    expect(actions).toHaveLength(1);
-    bulkActionsToggle.simulate('click');
-    actions = wrapper.find(PageHeaderAction);
-    expect(actions).toHaveLength(bulkActionCount + defaultActions.length);
-  });
-
-  it(`'Bulk Actions' hides all actions when actions are shown`, () => {
-    const wrapper = mount(
-      <PageHeaderBulkActions
-        {...defaultProps}
-        availableActionSpace={defaultActions.length}
-        openBulkActionsOnStart={true}
-      />,
-    );
-    const bulkActionsToggle = wrapper.find(PageHeaderAction).first();
-    let actions = wrapper.find(PageHeaderAction);
-    const bulkActionCount = 1;
-    expect(actions).toHaveLength(bulkActionCount + defaultActions.length);
-    bulkActionsToggle.simulate('click');
-    actions = wrapper.find(PageHeaderAction);
-    expect(actions).toHaveLength(1);
-  });
-
-  it(`raises onBulkActionsToggled`, () => {
-    const bulkActionSpy = jest.fn();
-    const wrapper = mount(
-      <PageHeaderBulkActions
-        {...defaultProps}
-        onBulkActionsToggled={bulkActionSpy}
-      />,
-    );
-    const bulkActionsToggle = wrapper.find(PageHeaderAction).first();
-    bulkActionsToggle.simulate('click');
-    expect(bulkActionSpy).toHaveBeenCalledTimes(1);
-    expect(bulkActionSpy).toHaveBeenCalledWith(true);
-  });
-
-  it(`renders 'Bulk Actions' and 'More Actions' if openBulkActionsOnStart is set to true and there isn't enough available space`, () => {
-    const wrapper = mount(
-      <PageHeaderBulkActions {...defaultProps} openBulkActionsOnStart={true} />,
-    );
-    const bulkActionCount = 1;
-    const moreActionCount = 1;
-    const actions = wrapper.find(PageHeaderAction);
-    expect(actions).toHaveLength(bulkActionCount + moreActionCount);
-  });
-
-  it(`renders the dropdown list when 'More' actions are available on mouse enter and closes on mouse leave`, () => {
-    const wrapper = mount(
-      <PageHeaderBulkActions {...defaultProps} openBulkActionsOnStart={true} />,
-    );
-    const moreActionsToggle = wrapper.find('.hasMore');
-
-    let dropDownActions = wrapper.find('.dropDownList');
-    expect(dropDownActions.exists()).toBe(false);
-
-    act(() => {
-      // @ts-expect-error We don't pass event args
-      moreActionsToggle.prop('onMouseEnter')();
-    });
-
-    wrapper.update();
-
-    dropDownActions = wrapper.find('.dropDownList');
-
-    expect(dropDownActions.exists()).toBe(true);
-
-    act(() => {
-      // @ts-expect-error We don't pass event args
-      moreActionsToggle.prop('onMouseLeave')();
-    });
-
-    wrapper.update();
-
-    dropDownActions = wrapper.find('.dropDownList');
-
-    expect(dropDownActions.exists()).toBe(false);
-  });
-
-  it(`'More' action has the 'Context' actionType when closed and the 'Active' actionType when open`, () => {
-    const wrapper = mount(
-      <PageHeaderBulkActions {...defaultProps} openBulkActionsOnStart={true} />,
-    );
-    const moreActionsToggle = wrapper.find('.hasMore');
-    let action = wrapper.find(PageHeaderAction).last();
-
-    expect(action.prop('actionType')).toBe(PageHeaderActionType.Context);
-
-    act(() => {
-      // @ts-expect-error We don't pass event args
-      moreActionsToggle.prop('onMouseEnter')();
-    });
-
-    wrapper.update();
-
-    action = wrapper.find(PageHeaderAction).at(1);
-
-    expect(action.prop('actionType')).toBe(PageHeaderActionType.Active);
-  });
-
-  it(`renders actions, that don't fit in the PageHeader, in the drop down list`, () => {
-    const [mockAction1, mockAction2, mockAction3] = defaultActions;
-    const wrapper = mount(
-      <PageHeaderBulkActions {...defaultProps} openBulkActionsOnStart={true} />,
-    );
-    const moreActionsToggle = wrapper.find('.hasMore');
-
-    act(() => {
-      // @ts-expect-error We don't pass event args
-      moreActionsToggle.prop('onMouseEnter')();
-    });
-
-    wrapper.update();
-
-    const dropDownActions = wrapper.find('.dropDownList');
-    const action1 = dropDownActions.childAt(0);
-    const action2 = dropDownActions.childAt(1);
-    const action3 = dropDownActions.childAt(2);
-
-    expect(dropDownActions.children()).toHaveLength(defaultActions.length);
-    expect(action1.text()).toBe(mockAction1.label);
-    expect(action2.text()).toBe(mockAction2.label);
-    expect(action3.text()).toBe(mockAction3.label);
-  });
-
-  it(`splits actions between the PageHeader and dropdown list when theres not enough space for all`, () => {
-    const [mockAction1, mockAction2, mockAction3] = defaultActions;
-    const wrapper = mount(
-      <PageHeaderBulkActions
-        {...defaultProps}
-        openBulkActionsOnStart={true}
-        availableActionSpace={2}
-      />,
-    );
-    const moreActionsToggle = wrapper.find('.hasMore');
-
-    act(() => {
-      // @ts-expect-error We don't pass event args
-      moreActionsToggle.prop('onMouseEnter')();
-    });
-
-    wrapper.update();
-
-    const pageHeaderActions = wrapper.find('.container').first();
-    const action1 = pageHeaderActions.find('.container:not(.hasMore)').at(1);
-    const action2 = pageHeaderActions.find('.container:not(.hasMore)').at(2);
-    let action3 = pageHeaderActions.find('.container:not(.hasMore)').at(3);
-
-    expect(action1.text()).toBe(mockAction1.label);
-    expect(action2.text()).toBe(mockAction2.label);
-    expect(action3.text()).not.toBe(mockAction3.label);
-
-    const dropDownActions = wrapper.find('.dropDownList');
-    action3 = dropDownActions.childAt(0);
-
-    expect(dropDownActions.children()).toHaveLength(1);
-    expect(action3.text()).toBe(mockAction3.label);
-  });
-
-  it(`raises onClick for actions in the page header available space and drop down list`, () => {
-    const pageHeaderSpy = jest.fn();
-    const dropDownListSpy = jest.fn();
-    const actionsWithSpies: PageHeaderActionProps[] = [
-      {
-        label: 'Bulk Action 1',
-        onClick: pageHeaderSpy,
-      },
-      {
-        label: 'Bulk Action 2',
-        onClick: dropDownListSpy,
-      },
-    ];
-
-    const wrapper = mount(
-      <PageHeaderBulkActions
-        {...defaultProps}
-        actions={actionsWithSpies}
-        openBulkActionsOnStart={true}
-        availableActionSpace={1}
-      />,
-    );
-    const moreActionsToggle = wrapper.find('.hasMore');
-
-    act(() => {
-      // @ts-expect-error We don't pass event args
-      moreActionsToggle.prop('onMouseEnter')();
-    });
-
-    wrapper.update();
-
-    const pageHeaderActions = wrapper.find('.container').first();
-    const action1 = pageHeaderActions.find('.container:not(.hasMore)').at(1);
-
-    action1.simulate('click');
-
-    expect(pageHeaderSpy).toHaveBeenCalledTimes(1);
-
-    const dropDownActions = wrapper.find('.dropDownList');
-    const action2 = dropDownActions.childAt(0);
-
-    action2.simulate('click');
-
-    expect(dropDownListSpy).toHaveBeenCalledTimes(1);
-  });
-
-  it(`closes drop down list after clicking an action`, () => {
-    const dropDownListSpy = jest.fn();
-    const actionsWithSpies: PageHeaderActionProps[] = [
-      {
-        label: 'Bulk Action 1',
-        onClick: dropDownListSpy,
-      },
-    ];
-
-    const wrapper = mount(
-      <PageHeaderBulkActions
-        {...defaultProps}
-        actions={actionsWithSpies}
-        openBulkActionsOnStart={true}
-        availableActionSpace={0}
-      />,
-    );
-    const moreActionsToggle = wrapper.find('.hasMore');
-    let dropDownActions = wrapper.find('.dropDownList');
-
-    expect(dropDownActions.exists()).toBe(false);
-
-    act(() => {
-      // @ts-expect-error We don't pass event args
-      moreActionsToggle.prop('onMouseEnter')();
-    });
-
-    wrapper.update();
-
-    dropDownActions = wrapper.find('.dropDownList');
-    expect(dropDownActions.exists()).toBe(true);
-
-    const action = dropDownActions.childAt(0);
-
-    action.simulate('click');
-
-    dropDownActions = wrapper.find('.dropDownList');
-
-    expect(dropDownActions.exists()).toBe(false);
-  });
-
-  it(`disables actions if 'isBulkActionsDisabled' prop is true`, () => {
-    const pageHeaderSpy = jest.fn();
-    const dropDownListSpy = jest.fn();
-    const actionsWithSpies: PageHeaderActionProps[] = [
-      {
-        label: 'Bulk Action 1',
-        onClick: pageHeaderSpy,
-      },
-      {
-        label: 'Bulk Action 2',
-        onClick: dropDownListSpy,
-      },
-    ];
-
-    const wrapper = mount(
-      <PageHeaderBulkActions
-        {...defaultProps}
-        actions={actionsWithSpies}
-        openBulkActionsOnStart={true}
-        availableActionSpace={1}
-        bulkActionsDisabled={true}
-      />,
-    );
-    const moreActionsToggle = wrapper.find('.hasMore');
-
-    act(() => {
-      // @ts-expect-error We don't pass event args
-      moreActionsToggle.prop('onMouseEnter')();
-    });
-
-    wrapper.update();
-
-    const pageHeaderActions = wrapper.find('.container').first();
-    const action1 = pageHeaderActions.find('.container:not(.hasMore)').at(1);
-
-    action1.simulate('click');
-
-    expect(action1.prop('disabled')).toBe(true);
-    expect(pageHeaderSpy).not.toHaveBeenCalled();
-
-    const dropDownActions = wrapper.find('.dropDownList');
-    const action2 = dropDownActions.childAt(0);
-
-    action2.simulate('click');
-
-    expect(action2.prop('disabled')).toBe(true);
-    expect(dropDownListSpy).not.toHaveBeenCalled();
-  });
-});

package/src/components/PageHeader/PageHeaderBulkActions/PageHeaderBulkActions.tsx

@@ -1,188 +0,0 @@
-import clsx from 'clsx';
-import React, { useEffect, useState } from 'react';
-import { noop } from '../../../helpers/utils';
-import { useExpand } from '../../../hooks/useExpand/useExpand';
-import { ConfirmationMode } from '../../ConfirmDialog';
-import { IconName } from '../../Icons';
-import { PageHeaderProps } from '../PageHeader.model';
-import {
-  PageHeaderAction,
-  isPageHeaderJsAction,
-} from '../PageHeaderAction/PageHeaderAction';
-import {
-  PageHeaderActionProps,
-  PageHeaderActionType,
-} from '../PageHeaderAction/PageHeaderAction.model';
-import classes from './PageHeaderBulkActions.scss';
-
-export interface PageHeaderBulkActionsProps
-  extends Pick<
-    PageHeaderProps,
-    'openBulkActionsOnStart' | 'onBulkActionsToggled'
-  > {
-  /** Array of Actions to be rendered (default: []) */
-  actions?: PageHeaderActionProps[];
-  /** Number of available slots actions can use in the PageHeader */
-  availableActionSpace: number;
-  /** Whether or not bulk actions are disabled (default: false)*/
-  bulkActionsDisabled?: boolean;
-  /** CSS Class name for additional styles */
-  className?: string;
-}
-
-/**
- * Used to perform bulk operations from the PageHeader component.
- * @example
- * <PageHeaderBulkActions>
- *   <PageHeaderAction action={action} onBulkActionsToggled={onBulkActionsToggledHandler} />
- * </PageHeaderBulkActions>
- */
-export const PageHeaderBulkActions: React.FC<PageHeaderBulkActionsProps> = ({
-  actions = [],
-  openBulkActionsOnStart = false,
-  onBulkActionsToggled = noop,
-  availableActionSpace = 0,
-  bulkActionsDisabled = false,
-  className = '',
-}) => {
-  const { isExpanded, toggleExpanded, expand } = useExpand();
-  const {
-    isExpanded: isMoreExpanded,
-    expand: moreExpanded,
-    collapse: moreCollapse,
-    toggleExpanded: toggleMoreExpanded,
-  } = useExpand();
-
-  useEffect(() => {
-    if (openBulkActionsOnStart) {
-      expand();
-    }
-  }, [expand, openBulkActionsOnStart]);
-
-  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]);
-
-  return (
-    <div
-      className={clsx(
-        classes.container,
-        'page-header-bulk-action-container',
-        className,
-      )}
-    >
-      <PageHeaderAction
-        label="Bulk Actions"
-        actionType={
-          isExpanded
-            ? PageHeaderActionType.Active
-            : PageHeaderActionType.Context
-        }
-        icon={IconName.Bulk}
-        onClick={() => {
-          toggleExpanded();
-          onBulkActionsToggled(!isExpanded);
-        }}
-      />
-      {isExpanded &&
-        actions.slice(0, availableActionSpace).map((action, idx) =>
-          isPageHeaderJsAction(action) ? (
-            <PageHeaderAction
-              key={idx}
-              {...action}
-              disabled={bulkActionsDisabled}
-              confirmationConfig={{
-                ...action.confirmationConfig,
-                onConfirmOpen: (isOpen, args) => {
-                  onConfirmToggled(
-                    isOpen,
-                    args as { id: string; mode: ConfirmationMode },
-                  );
-                  action.confirmationConfig?.onConfirmOpen?.(isOpen, args);
-                },
-              }}
-            />
-          ) : (
-            <PageHeaderAction key={idx} {...action} />
-          ),
-        )}
-      {isExpanded && actions.length > availableActionSpace && (
-        <div
-          className={clsx(classes.hasMore)}
-          onMouseEnter={() => setIsMouseOverMore(true)}
-          onMouseLeave={() => setIsMouseOverMore(false)}
-        >
-          <PageHeaderAction
-            label="More"
-            icon={IconName.Ellipsis}
-            actionType={
-              isMoreExpanded
-                ? PageHeaderActionType.Active
-                : PageHeaderActionType.Context
-            }
-            onClick={() => toggleMoreExpanded()}
-          />
-          {isMoreExpanded && (
-            <div className={clsx(classes.dropDownList)}>
-              {actions.slice(availableActionSpace).map((action, idx) =>
-                isPageHeaderJsAction(action) ? (
-                  <PageHeaderAction
-                    key={idx}
-                    {...action}
-                    disabled={bulkActionsDisabled}
-                    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>
-      )}
-    </div>
-  );
-};