@axinom/mosaic-ui 0.51.0-rc.1 → 0.51.0-rc.11

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

@@ -1,5 +1,6 @@
 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 {
@@ -45,16 +46,18 @@ describe('PageHeaderActionsGroup', () => {
     expect(wrapper).toBeTruthy();
   });
 
-  it(`'Group Actions' has the 'Context' actionType when closed and 'Active' actionType when open`, () => {
+  it(`'Group Actions' has the 'Context' actionType when closed and 'Active' actionType when open`, async () => {
     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');
+    await act(async () => {
+      await groupActionsToggle.prop('onClick')?.();
+      wrapper.update();
+    });
 
     groupActionsToggle = wrapper.find(PageHeaderAction).first();
 
@@ -63,19 +66,23 @@ describe('PageHeaderActionsGroup', () => {
     );
   });
 
-  it(`renders all actions when 'Group Actions' is selected and there is enough available action slots`, () => {
+  it(`renders all actions when 'Group Actions' is selected and there is enough available action slots`, async () => {
     const wrapper = mount(
       <PageHeaderActionsGroup {...defaultProps} availableActionSpace={5} />,
     );
     const groupActionsToggle = wrapper.find(PageHeaderAction).first();
     let actions = wrapper.find(PageHeaderAction);
 
-    groupActionsToggle.simulate('click');
+    await act(async () => {
+      await groupActionsToggle.prop('onClick')?.();
+      wrapper.update();
+    });
+
     actions = wrapper.find(PageHeaderAction);
     expect(actions).toHaveLength(5);
   });
 
-  it(`raises onActionsGroupToggled`, () => {
+  it(`raises onActionsGroupToggled`, async () => {
     const groupActionSpy = jest.fn();
     const wrapper = mount(
       <PageHeaderActionsGroup
@@ -84,7 +91,12 @@ describe('PageHeaderActionsGroup', () => {
       />,
     );
     const groupActionsToggle = wrapper.find(PageHeaderAction).first();
-    groupActionsToggle.simulate('click');
+
+    await act(async () => {
+      await groupActionsToggle.prop('onClick')?.();
+      wrapper.update();
+    });
+
     expect(groupActionSpy).toHaveBeenCalledTimes(1);
     expect(groupActionSpy).toHaveBeenCalledWith(true);
   });

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

@@ -37,7 +37,7 @@ export interface PageHeaderActionsGroupProps {
    * Callback to emit when Group Actions is toggled
    * The expanded state is supplied as an argument
    */
-  onActionsGroupToggled?: (expanded: boolean) => void;
+  onActionsGroupToggled?: (expanded: boolean) => Promise<void>;
 }
 
 /**
@@ -134,12 +134,17 @@ export const PageHeaderActionsGroup: React.FC<PageHeaderActionsGroupProps> = ({
             : PageHeaderActionType.Context
         }
         icon={icon}
-        onClick={() => {
+        onClick={async () => {
           if (!isExpanded) {
             collapseAll();
           }
-          toggleExpanded();
-          onActionsGroupToggled(!isExpanded);
+          try {
+            await onActionsGroupToggled(!isExpanded);
+            toggleExpanded();
+          } catch (e) {
+            // Abort the action if an error occurs
+            return;
+          }
         }}
         disabled={disabled}
       />

package/src/components/PageHeader/helpers/useElementWidthObserver.tsx

@@ -0,0 +1,30 @@
+import { useEffect, useRef, useState } from 'react';
+
+export const useElementWidthObserver = <T extends HTMLElement>(): {
+  width: number;
+  ref: React.RefObject<T>;
+} => {
+  const [width, setWidth] = useState(0);
+  const ref = useRef<T>(null);
+
+  useEffect(() => {
+    const observer = new ResizeObserver((entries) => {
+      setWidth(entries[0].contentRect.width);
+    });
+
+    const current = ref.current;
+
+    if (current) {
+      observer.observe(current);
+    }
+
+    return () => {
+      current && observer.unobserve(current);
+    };
+  }, []);
+
+  return {
+    width,
+    ref,
+  };
+};

package/src/initialize.ts

@@ -21,11 +21,11 @@ export let removeIndicator: RemoveIndicator | (() => void) =
 
 export let on: CustomEventEmitter['on'] | (() => void) = polyfill('on');
 
+export let setTitle: (title?: string) => void = polyfill('setTitle');
+
 export let setSaveIndicator: (type: SaveIndicatorType) => void =
   polyfill('setSaveIndicator');
 
-export let setTitle: (title?: string) => void = polyfill('setTitle');
-
 /**
  * Passes the PiralApi methods to the UI library.
  * @param app {UiConfig} object containing PiralApi methods for use in UI library.

package/dist/components/Explorer/InMemoryDataProvider.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"InMemoryDataProvider.d.ts","sourceRoot":"","sources":["../../../src/components/Explorer/InMemoryDataProvider.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,WAAW,EAAgB,MAAM,YAAY,CAAC;AAEvD,OAAO,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAExD,KAAK,cAAc,CAAC,CAAC,SAAS,IAAI,IAAI,CACpC,KAAK,EAAE,OAAO,EACd,MAAM,EAAE,WAAW,EACnB,IAAI,EAAE,CAAC,KACJ,OAAO,CAAC;AAEb,UAAU,uBAAuB,CAAC,CAAC,SAAS,IAAI;IAC9C,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,eAAe,CAAC,EAAE;QAChB,CAAC,QAAQ,EAAE,MAAM,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC;KACvC,CAAC;CACH;AAED,wBAAgB,0BAA0B,CAAC,CAAC,SAAS,IAAI,EACvD,IAAI,EAAE,CAAC,EAAE,EACT,EACE,iBAAyB,EACzB,eAAoB,GACrB,GAAE,uBAAuB,CAAC,CAAC,CAAM,GACjC,oBAAoB,CAAC,CAAC,CAAC,CAqBzB;AAED;;GAEG;AACH,eAAO,MAAM,SAAS,EAAE,cAAc,CAAC,IAAI,CAE1C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,oBAAoB,EAAE,cAAc,CAAC,IAAI,CAErD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,mCAAmC,EAAE,cAAc,CAAC,IAAI,CAKpE,CAAC"}

package/dist/components/Explorer/useDataProvider.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useDataProvider.d.ts","sourceRoot":"","sources":["../../../src/components/Explorer/useDataProvider.tsx"],"names":[],"mappings":";AAUA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAExC,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAE9C,OAAO,EACL,oBAAoB,EACpB,8BAA8B,EAC/B,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAErD,UAAU,sBAAsB,CAAC,CAAC;IAChC,QAAQ,CAAC,SAAS,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,WAAW,EAAE,YAAY,CAAC;IACnC,QAAQ,CAAC,WAAW,EAAE,OAAO,CAAC;IAC9B,QAAQ,CAAC,YAAY,EAAE,MAAM,IAAI,CAAC;IAClC,QAAQ,CAAC,aAAa,EAAE,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IACpD,QAAQ,CAAC,eAAe,EAAE,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IAC7D,QAAQ,CAAC,iBAAiB,EAAE,MAAM,IAAI,CAAC;IACvC,QAAQ,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC;CACpB;AAED,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,UAAU,wBAAwB,CAAC,CAAC,SAAS,IAAI;IAC/C,YAAY,EAAE,oBAAoB,CAAC,CAAC,CAAC,CAAC;IACtC,WAAW,EAAE,KAAK,CAAC,YAAY,CAAC,8BAA8B,CAAC,CAAC,CAAC,CAAC,CAAC;IACnE,iBAAiB,EAAE,KAAK,CAAC,QAAQ,CAC/B,KAAK,CAAC,cAAc,CAAC,cAAc,GAAG,SAAS,CAAC,CACjD,CAAC;IACF,gBAAgB,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC;IAC/B,OAAO,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC,CAAC;CACvB;AAED,wBAAgB,eAAe,CAAC,CAAC,SAAS,IAAI,EAAE,EAC9C,YAAY,EACZ,WAAW,EACX,iBAAiB,EACjB,gBAAgB,EAChB,OAAO,EACP,WAAW,GACZ,EAAE,wBAAwB,CAAC,CAAC,CAAC,GAAG,sBAAsB,CAAC,CAAC,CAAC,CAsIzD"}

package/dist/components/Explorer/useStationMessage.d.ts

@@ -1,15 +0,0 @@
-import React from 'react';
-import { MessageBarProps } from '../MessageBar/MessageBar';
-export interface StationMessage {
-    type: MessageBarProps['type'];
-    title: MessageBarProps['title'];
-    body?: React.ReactNode;
-    canClose: boolean;
-    onRetry?: MessageBarProps['onRetry'];
-}
-export declare const useStationMessage: () => {
-    stationMessage: StationMessage | undefined;
-    setStationMessage: React.Dispatch<React.SetStateAction<StationMessage | undefined>>;
-    StationMessage: JSX.Element;
-};
-//# sourceMappingURL=useStationMessage.d.ts.map

package/dist/components/Explorer/useStationMessage.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useStationMessage.d.ts","sourceRoot":"","sources":["../../../src/components/Explorer/useStationMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,EAAc,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAEvE,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAC9B,KAAK,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC;IAChC,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;CACtC;AAED,eAAO,MAAM,iBAAiB;;;oBAKZ,WAAW;CAwB5B,CAAC"}