@pega/cosmos-react-core 2.0.0-dev.2.1 → 2.0.0-dev.20.0

package/lib/components/Modal/Modal.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.types.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"Modal.types.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.types.ts"],"names":[],"mappings":"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"}

package/lib/components/Modal/Modal.types.js

@@ -1,2 +1,2 @@
-export {};
+export const initializedKey = Symbol.for('@pega/cosmos-react-core.modal-manager.initialized');
 //# sourceMappingURL=Modal.types.js.map

package/lib/components/Modal/Modal.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.types.js","sourceRoot":"","sources":["../../../src/components/Modal/Modal.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ComponentType, ReactNode, RefObject } from 'react';\n\nimport { BaseProps, AsProp } from '../../types';\n\nexport interface ModalManagerProps {\n  /** Content that will be provided modal manager context. */\n  children: ReactNode;\n}\n\nexport interface ModalOptions {\n  /**\n   * If true, the Modal will render as an alert that is not dismissible.\n   * @default false\n   */\n  alert?: boolean;\n  /**\n   * Toggle Esc keypress action or clicking backdrop to dismiss Modal. Also displays dismiss button on Modal header.\n   * Not valid for Modals of type alert.\n   * @default alert ? false : true\n   */\n  dismissible?: boolean;\n  /**\n   * Toggle minimize button in header thereby helping in rendering minimizable/non-minimizable Modals.\n   * Not valid for Modals of type alert.\n   * @default false\n   */\n  minimizable?: boolean;\n  /**\n   * If true, the Modal will initially render in a minimized state.\n   * @default false\n   */\n  defaultMinimized?: boolean;\n  /**\n   * If true, the Modal content will be removed from the DOM when in a minimized state.\n   * @default true\n   */\n  unmountWhenMinimized?: boolean;\n  /**\n   * Used to identify the modal. Will be passed back as an argument in life cycle functions.\n   */\n  id?: string;\n  /**\n   * Life cycle function that will be run when the modal is minimized.\n   */\n  onMinimize?: (id: string) => void;\n  /**\n   * Life cycle function that will be run when the modal is activated (un minimized).\n   */\n  onActivate?: (id: string) => void;\n  /**\n   * Life cycle function that will be run when the modal is dismissed.\n   */\n  onDismiss?: (id: string) => void;\n}\n\nexport interface ModalProps extends BaseProps, AsProp {\n  /**\n   * Heading for the Modal.\n   */\n  heading: ReactNode;\n  /**\n   * Content for the Modal.\n   */\n  children: ReactNode;\n  /**\n   * Actions for the Modal.\n   */\n  actions?: ReactNode;\n  /**\n   * Render the modal in full width and height.\n   * @default false\n   */\n  stretch?: boolean;\n  /**\n   * Toggle to position the Modal vertically centered or not.\n   * @default false\n   */\n  center?: boolean;\n  /**\n   * Takes a React Ref of the element to be focused initially on mounting Modal.\n   */\n  defaultFocus?: RefObject<HTMLElement>;\n  /**\n   * Accepts a callback function that gets invoked before opening a Modal.\n   */\n  onBeforeOpen?: () => void;\n  /**\n   * Accepts a callback function that gets invoked after opening a Modal.\n   */\n  onAfterOpen?: () => void;\n  /**\n   * Accepts a callback function that gets invoked before closing a Modal.\n   */\n  onBeforeClose?: () => void;\n  /**\n   * Accepts a callback function that gets invoked after closing a Modal.\n   */\n  onAfterClose?: () => void;\n  /**\n   * Accepts a callback function that returns a boolean before dismissing a modal.\n   * If the boolean is false, the modal will not be dismissed.\n   */\n  onRequestDismiss?: () => boolean | void;\n  /**\n   * Accepts a callback function that returns a boolean before minimizing a modal.\n   * If the boolean is false, the modal will not be minimized.\n   */\n  onRequestMinimize?: () => boolean | void;\n  /**\n   * Accepts a callback function that returns a boolean before activating a modal.\n   * If the boolean is false, the modal will not be activated.\n   */\n  onRequestActivate?: () => boolean | void;\n}\n\nexport type ModalState = 'open' | 'closed' | 'minimized';\n\nexport interface ModalMethods<P extends object = object> {\n  /**\n   * Closes the referenced Modal when called.\n   */\n  dismiss: () => void;\n  /**\n   * Updates the referenced Modal with a set of props.\n   */\n  update: (props: P) => void;\n  /**\n   * Minimizes the referenced Modal.\n   */\n  minimize: () => void;\n  /**\n   * Will reopen the referenced Modal if minimized, and minimize any open Modals that are minimizable.\n   */\n  activate: () => void;\n  /**\n   * Removes the referenced Modal from the DOM.\n   */\n  unmount: () => void;\n}\n\nexport interface ModalManagerContextValue {\n  /**\n   * The function that will create the Modal. This function accepts the component to render a Modal, props for that component, and options for that Modal.\n   */\n  create: <P extends object>(\n    component: ComponentType<P>,\n    props?: P,\n    options?: ModalOptions\n  ) => ModalMethods<P>;\n}\n\nexport interface ModalContextValue extends ModalMethods, ModalOptions {\n  state: ModalState;\n  top: boolean;\n}\n\nexport interface ModalObject<P extends object = object> {\n  id: string;\n  state: ModalState;\n  methods: ModalMethods<P>;\n  props?: P;\n  Component: ComponentType<P>;\n  options: ModalOptions;\n}\n"]}
+{"version":3,"file":"Modal.types.js","sourceRoot":"","sources":["../../../src/components/Modal/Modal.types.ts"],"names":[],"mappings":"AAkMA,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAC,mDAAmD,CAAC,CAAC","sourcesContent":["import type { ComponentType, ReactNode, RefObject, Context } from 'react';\n\nimport type { ProgressProps } from '@pega/cosmos-react-core';\n\nimport type { BaseProps, AsProp, DeferInfer } from '../../types';\n\nexport interface ModalManagerProps {\n  /** Content that will be provided modal manager context. */\n  children: ReactNode;\n  /** Context to read previous values from. */\n  context?: Context<ModalManagerContextValue>;\n}\n\nexport interface ModalOptions {\n  /**\n   * If true, the Modal will render as an alert that is not dismissible.\n   * @default false\n   */\n  alert?: boolean;\n  /**\n   * Toggle Esc keypress action or clicking backdrop to dismiss Modal. Also displays dismiss button on Modal header.\n   * Not valid for Modals of type alert.\n   * @default alert ? false : true\n   */\n  dismissible?: boolean;\n  /**\n   * Toggle minimize button in header thereby helping in rendering minimizable/non-minimizable Modals.\n   * Not valid for Modals of type alert.\n   * @default false\n   */\n  minimizable?: boolean;\n  /**\n   * Toggle maximize button in header thereby helping in rendering maximizable/non-maximizable Modals.\n   * Not valid for Modals of type alert.\n   * @default false\n   */\n  maximizable?: boolean;\n  /** Positions the modal in the right corner without backdrop\n   * @default false\n   */\n  dockable?: boolean;\n  /**\n   * If true, the Modal will initially render in a minimized state.\n   * @default false\n   */\n  defaultMinimized?: boolean;\n  /**\n   * If true, the Modal content will be removed from the DOM when in a minimized state.\n   * @default true\n   */\n  unmountWhenMinimized?: boolean;\n  /**\n   * Used to identify the modal. Will be passed back as an argument in life cycle functions.\n   */\n  id?: string;\n  /**\n   * Life cycle function that will be run when the modal is minimized.\n   */\n  onMinimize?: (id: string) => void;\n  /**\n   * Life cycle function that will be run when the modal is maximized.\n   */\n  onMaximize?: (id: string) => void;\n  /**\n   * Life cycle function that will be run when the modal is maximized.\n   */\n  onDock?: (id: string) => void;\n  /**\n   * Life cycle function that will be run when the modal is activated (un minimized).\n   */\n  onActivate?: (id: string) => void;\n  /**\n   * Life cycle function that will be run when the modal is dismissed.\n   */\n  onDismiss?: (id: string) => void;\n}\n\nexport interface ModalProps extends BaseProps, AsProp {\n  /**\n   * Place a modal into a loading state by way of a bool or an object which allows for a custom message and determinate progress.\n   */\n  progress?: boolean | Pick<ProgressProps, 'message' | 'minValue' | 'maxValue' | 'value'>;\n  /**\n   * Heading for the Modal.\n   */\n  heading: ReactNode;\n  /**\n   * Count for list data presented in the Modal.\n   */\n  count?: number;\n  /**\n  /**\n   * Content for the Modal.\n   */\n  children: ReactNode;\n  /**\n   * Actions for the Modal.\n   */\n  actions?: ReactNode;\n  /**\n   * Render the modal in full width and height.\n   * @default false\n   */\n  stretch?: boolean;\n  /**\n   * Toggle to position the Modal vertically centered or not.\n   * @default false\n   */\n  center?: boolean;\n  /**\n   * Automatically compute the width of the Modal based on the content.\n   * @default false\n   */\n  autoWidth?: boolean;\n  /**\n   * Takes a React Ref of the element to be focused initially on mounting Modal.\n   */\n  defaultFocus?: RefObject<HTMLElement>;\n  /**\n   * Accepts a callback function that gets invoked before opening a Modal.\n   */\n  onBeforeOpen?: () => void;\n  /**\n   * Accepts a callback function that gets invoked after opening a Modal.\n   */\n  onAfterOpen?: () => void;\n  /**\n   * Accepts a callback function that gets invoked before closing a Modal.\n   */\n  onBeforeClose?: () => void;\n  /**\n   * Accepts a callback function that gets invoked after closing a Modal.\n   */\n  onAfterClose?: () => void;\n  /**\n   * Accepts a callback function that returns a boolean before dismissing a modal.\n   * If the boolean is false, the modal will not be dismissed.\n   */\n  onRequestDismiss?: () => boolean | void;\n  /**\n   * Accepts a callback function that returns a boolean before minimizing a modal.\n   * If the boolean is false, the modal will not be minimized.\n   */\n  onRequestMinimize?: () => boolean | void;\n  /**\n   * Accepts a callback function that returns a boolean before maximizing a modal.\n   * If the boolean is false, the modal will not be maximized.\n   */\n  onRequestMaximize?: () => boolean | void;\n  /**\n   * Accepts a callback function that returns a boolean before docking a modal.\n   * If the boolean is false, the modal will not be dockable.\n   */\n  onRequestDock?: () => boolean | void;\n  /**\n   * Accepts a callback function that returns a boolean before activating a modal.\n   * If the boolean is false, the modal will not be activated.\n   */\n  onRequestActivate?: () => boolean | void;\n}\n\nexport type ModalState = 'open' | 'closed' | 'minimized' | 'maximized' | 'docked';\n\nexport interface ModalMethods<P extends object = object> {\n  /**\n   * Closes the referenced Modal when called.\n   */\n  dismiss: () => void;\n  /**\n   * Updates the referenced Modal with a set of props.\n   */\n  update: (props: Partial<P>) => void;\n  /**\n   * Minimizes the referenced Modal.\n   */\n  minimize: () => void;\n  /**\n   * Maximizes the referenced Modal.\n   */\n  maximize: () => void;\n  /**\n   * docks the referenced Modal.\n   */\n  dock: () => void;\n  /**\n   * Will reopen the referenced Modal if minimized, and minimize any open Modals that are minimizable.\n   */\n  activate: () => void;\n  /**\n   * Removes the referenced Modal from the DOM.\n   */\n  unmount: () => void;\n}\n\nexport const initializedKey = Symbol.for('@pega/cosmos-react-core.modal-manager.initialized');\n\nexport interface ModalManagerContextValue {\n  /**\n   * The function that will create the Modal. This function accepts the component to render a Modal, props for that component, and options for that Modal.\n   */\n  create: <P extends object>(\n    component: ComponentType<P>,\n    props?: DeferInfer<P>,\n    options?: ModalOptions\n  ) => ModalMethods<P>;\n  ModalContext: Context<ModalContextValue>;\n  [initializedKey]: boolean;\n}\n\nexport interface ModalContextValue extends ModalMethods, ModalOptions {\n  state: ModalState;\n  top: boolean;\n}\n\nexport interface ModalObject<P extends object = object> {\n  id: string;\n  state: ModalState;\n  methods: ModalMethods<P>;\n  props?: P;\n  Component: ComponentType<P>;\n  options: ModalOptions;\n}\n"]}

package/lib/components/Modal/ModalManager.d.ts

@@ -1,6 +1,5 @@
-import { FunctionComponent, ReactNode } from 'react';
-declare const ModalManager: FunctionComponent<{
-    children: ReactNode;
-}>;
+import { FunctionComponent } from 'react';
+import { ModalManagerProps } from './Modal.types';
+declare const ModalManager: FunctionComponent<ModalManagerProps>;
 export default ModalManager;
 //# sourceMappingURL=ModalManager.d.ts.map

package/lib/components/Modal/ModalManager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ModalManager.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/ModalManager.tsx"],"names":[],"mappings":"AAAA,OAAc,EAKZ,iBAAiB,EAEjB,SAAS,EAGV,MAAM,OAAO,CAAC;AA6Jf,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,CAkG5D,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"ModalManager.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/ModalManager.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,iBAAiB,EAIlB,MAAM,OAAO,CAAC;AAQf,OAAO,EAIL,iBAAiB,EAGlB,MAAM,eAAe,CAAC;AA0KvB,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,CAiKtD,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/Modal/ModalManager.js

@@ -1,19 +1,23 @@
-import React, { useReducer, useMemo, useEffect, useContext, useRef } from 'react';
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useReducer, useMemo, useEffect, useContext, useRef } from 'react';
 import { createPortal } from 'react-dom';
 import { createUID, getScrollbarWidth, testElForOverflow } from '../../utils';
 import { useConfiguration } from '../../hooks';
 import DockedModals from './DockedModals';
-import { ModalContext, ModalManagerContext, initialModalManagerContext } from './Contexts';
+import { initializedKey } from './Modal.types';
+import { ModalContext, ModalManagerContext } from './Contexts';
 const reducer = (modals, payload) => {
     switch (payload.action) {
         case 'create':
             return [
                 ...modals.map(modal => {
-                    if (!payload.modal.options.alert &&
+                    if ((!payload.modal.options.alert &&
                         payload.modal.state === 'open' &&
                         !modal.options.alert &&
                         modal.state === 'open' &&
-                        modal.options.minimizable) {
+                        modal.options.minimizable) ||
+                        payload.modal.options.dockable) {
                         modal.state = 'minimized';
                     }
                     return modal;
@@ -35,9 +39,12 @@ const reducer = (modals, payload) => {
             });
         case 'activate':
             return modals.map(modal => {
-                if (modal.id === payload.modal.id) {
+                if (modal.id === payload.modal.id && !modal.options.dockable) {
                     modal.state = 'open';
                 }
+                else if (modal.id === payload.modal.id && modal.options.dockable) {
+                    modal.state = 'docked';
+                }
                 else if (!modal.options.alert && modal.state === 'open' && modal.options.minimizable) {
                     modal.state = 'minimized';
                 }
@@ -49,69 +56,94 @@ const reducer = (modals, payload) => {
                     modal.id === payload.modal.id && modal.options.minimizable ? 'minimized' : modal.state;
                 return modal;
             });
+        case 'maximize':
+            return modals.map(modal => {
+                modal.state =
+                    modal.id === payload.modal.id && modal.options.maximizable ? 'maximized' : modal.state;
+                return modal;
+            });
+        case 'dock':
+            return modals.map(modal => {
+                modal.state =
+                    modal.id === payload.modal.id && modal.options.dockable ? 'docked' : 'minimized';
+                return modal;
+            });
         default:
             return modals;
     }
 };
-const WrappedModal = ({ Component, id, options: { alert, dismissible, minimizable }, state, methods, props, top }) => (React.createElement(ModalContext.Provider, { value: {
+const WrappedModal = ({ Component, id, options: { alert, dismissible, dockable, minimizable, maximizable }, state, methods, props, top }) => (_jsx(ModalContext.Provider, { value: {
         id,
         alert,
         dismissible,
         minimizable,
+        maximizable,
+        dockable,
         state,
         top,
         ...methods
-    } },
-    React.createElement(Component, { ...props })));
+    }, children: _jsx(Component, { ...props }, void 0) }, void 0));
 const RenderModals = ({ modals }) => {
     const { open, minimized, alerts } = modals.reduce((obj, modal) => {
         if (modal.options.alert)
             obj.alerts.push(modal);
-        else if (modal.state === 'minimized')
+        else if (modal.state === 'minimized' || modal.state === 'docked') {
             obj.minimized.push(modal);
+        }
         else
             obj.open.push(modal);
         return obj;
     }, { open: [], minimized: [], alerts: [] });
-    return (React.createElement(React.Fragment, null,
-        open.map((modal, i) => (React.createElement(WrappedModal, { ...modal, top: alerts.length === 0 && i === open.length - 1, key: modal.id }))),
-        minimized.length > 0 && (React.createElement(DockedModals, null, minimized.map(modal => (React.createElement(WrappedModal, { ...modal, top: false, key: modal.id }))))),
-        alerts.map((modal, i) => (React.createElement(WrappedModal, { ...modal, top: i === open.length - 1, key: modal.id })))));
+    return (_jsxs(_Fragment, { children: [open.map((modal, i) => (_createElement(WrappedModal, { ...modal, top: alerts.length === 0 && i === open.length - 1, key: modal.id }))), minimized.length > 0 && (_jsx(DockedModals, { children: minimized.map(modal => (_createElement(WrappedModal, { ...modal, top: false, key: modal.id }))) }, void 0)), alerts.map((modal, i) => (_createElement(WrappedModal, { ...modal, top: i === open.length - 1, key: modal.id })))] }, void 0));
 };
-const ModalManager = ({ children }) => {
+const ModalManager = ({ children, context = ModalManagerContext }) => {
     const [modals, dispatch] = useReducer(reducer, []);
     const styleCache = useRef('');
-    const hasBodyStyle = useRef(false);
+    const overflowProperty = useRef('');
     const providerValue = useMemo(() => ({
         create: (Component, props, options) => {
-            var _a;
-            const id = (options === null || options === void 0 ? void 0 : options.id) || createUID();
+            const id = options?.id || createUID();
             const methods = {
                 dismiss: () => {
-                    var _a;
                     dispatch({ action: 'dismiss', modal: { id } });
-                    (_a = options === null || options === void 0 ? void 0 : options.onDismiss) === null || _a === void 0 ? void 0 : _a.call(options, id);
+                    options?.onDismiss?.(id);
                 },
-                update: (updateProps) => {
+                update: updateProps => {
                     dispatch({
                         action: 'update',
                         modal: { id, props: updateProps }
                     });
                 },
                 minimize: () => {
-                    var _a;
                     dispatch({ action: 'minimize', modal: { id } });
-                    (_a = options === null || options === void 0 ? void 0 : options.onMinimize) === null || _a === void 0 ? void 0 : _a.call(options, id);
+                    options?.onMinimize?.(id);
+                },
+                maximize: () => {
+                    dispatch({ action: 'maximize', modal: { id } });
+                    options?.onMaximize?.(id);
+                },
+                dock: () => {
+                    dispatch({ action: 'dock', modal: { id } });
+                    options?.onDock?.(id);
                 },
                 activate: () => {
-                    var _a;
                     dispatch({ action: 'activate', modal: { id } });
-                    (_a = options === null || options === void 0 ? void 0 : options.onActivate) === null || _a === void 0 ? void 0 : _a.call(options, id);
+                    options?.onActivate?.(id);
                 },
                 unmount: () => {
                     dispatch({ action: 'unmount', modal: { id } });
                 }
             };
+            let defaultState;
+            if (options?.defaultMinimized) {
+                defaultState = 'minimized';
+            }
+            else if (options?.dockable) {
+                defaultState = 'docked';
+            }
+            else {
+                defaultState = 'open';
+            }
             dispatch({
                 action: 'create',
                 modal: {
@@ -119,52 +151,80 @@ const ModalManager = ({ children }) => {
                     methods,
                     Component,
                     props,
-                    state: (options === null || options === void 0 ? void 0 : options.defaultMinimized) ? 'minimized' : 'open',
+                    state: defaultState,
                     options: {
                         alert: false,
                         minimizable: false,
+                        maximizable: false,
+                        dockable: false,
                         defaultMinimized: false,
                         unmountWhenMinimized: true,
                         ...options,
-                        dismissible: !!((options === null || options === void 0 ? void 0 : options.alert) ? false : (_a = options === null || options === void 0 ? void 0 : options.dismissible) !== null && _a !== void 0 ? _a : true)
+                        dismissible: !!(options?.alert ? false : options?.dismissible ?? true)
                     }
                 }
             });
             return methods;
-        }
+        },
+        ModalContext,
+        [initializedKey]: true
     }), []);
     useEffect(() => {
-        if (modals.some(modal => modal.state === 'open')) {
-            if (!hasBodyStyle.current) {
+        if (modals.some(modal => modal.state === 'open' && !modal.options.dockable)) {
+            if (!overflowProperty.current) {
                 requestAnimationFrame(() => {
-                    if (document.body.style.overflow)
-                        styleCache.current = document.body.style.overflow;
+                    overflowProperty.current = 'overflow';
+                    styleCache.current = document.body.style.overflow;
+                    if (document.body.style.overflowX) {
+                        styleCache.current = document.body.style.overflowX;
+                        overflowProperty.current = 'overflowX';
+                    }
+                    else if (document.body.style.overflowY) {
+                        styleCache.current = document.body.style.overflowY;
+                        overflowProperty.current = 'overflowY';
+                    }
                     if (testElForOverflow(document.body))
                         document.body.style.paddingInlineEnd = `${getScrollbarWidth()}px`;
                     document.body.style.overflow = 'hidden';
-                    hasBodyStyle.current = true;
                 });
             }
         }
-        else if (hasBodyStyle.current) {
+        else if (overflowProperty.current) {
             requestAnimationFrame(() => {
                 document.body.style.paddingInlineEnd = '';
-                document.body.style.overflow = styleCache.current;
+                switch (overflowProperty.current) {
+                    case 'overflowX':
+                        document.body.style.overflowX = styleCache.current;
+                        break;
+                    case 'overflowY':
+                        document.body.style.overflowY = styleCache.current;
+                        break;
+                    default:
+                        document.body.style.overflow = styleCache.current;
+                        break;
+                }
                 styleCache.current = '';
-                hasBodyStyle.current = false;
+                overflowProperty.current = '';
             });
         }
     }, [modals]);
     const { portalTarget } = useConfiguration();
-    // Don't create additional ModalManagerContext.Providers or Modal portals
-    const priorCtx = useContext(ModalManagerContext);
-    if (priorCtx !== initialModalManagerContext)
-        return React.createElement(React.Fragment, null, children);
-    return (React.createElement(ModalManagerContext.Provider, { value: providerValue },
-        children,
-        modals.length > 0 &&
-            portalTarget &&
-            createPortal(React.createElement(RenderModals, { modals: modals }), portalTarget)));
+    const priorCtx = useContext(context);
+    const priorCtxValue = useMemo(() => context === ModalManagerContext
+        ? priorCtx
+        : {
+            ...priorCtx,
+            create: (Comp, props, opts) => {
+                const WrappedComp = compProps => (_jsx(ModalManager, { context: context, children: _jsx(Comp, { ...compProps }, void 0) }, void 0));
+                return priorCtx.create(WrappedComp, props, opts);
+            }
+        }, [priorCtx, context]);
+    // Don't create additional Modal portals.
+    if (priorCtx[initializedKey])
+        return (_jsx(ModalManagerContext.Provider, { value: priorCtxValue, children: children }, void 0));
+    return (_jsxs(ModalManagerContext.Provider, { value: providerValue, children: [children, modals.length > 0 &&
+                portalTarget &&
+                createPortal(_jsx(RenderModals, { modals: modals }, void 0), portalTarget)] }, void 0));
 };
 export default ModalManager;
 //# sourceMappingURL=ModalManager.js.map

package/lib/components/Modal/ModalManager.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalManager.js","sourceRoot":"","sources":["../../../src/components/Modal/ModalManager.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, {\n  useReducer,\n  useMemo,\n  useEffect,\n  useContext,\n  FunctionComponent,\n  ComponentType,\n  ReactNode,\n  Dispatch,\n  useRef\n} from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { createUID, getScrollbarWidth, testElForOverflow } from '../../utils';\nimport { useConfiguration } from '../../hooks';\nimport { OmitStrict } from '../../types';\n\nimport DockedModals from './DockedModals';\nimport { ModalMethods, ModalOptions, ModalObject } from './Modal.types';\nimport { ModalContext, ModalManagerContext, initialModalManagerContext } from './Contexts';\n\ntype ModalAction =\n  | 'create'\n  | 'update'\n  | 'minimize'\n  | 'maximize'\n  | 'activate'\n  | 'dismiss'\n  | 'unmount';\n\ntype ModalReducerPayload<P extends object> =\n  | { action: 'create'; modal: ModalObject<P> }\n  | {\n      action: 'update';\n      modal: Partial<OmitStrict<ModalObject<P>, 'props'>> &\n        Pick<ModalObject, 'id'> & { props: Partial<ModalObject<P>['props']> };\n    }\n  | {\n      action: Exclude<ModalAction, 'create' | 'update'>;\n      modal: Pick<ModalObject, 'id'>;\n    };\n\nconst reducer = <P extends object>(\n  modals: ModalObject[],\n  payload: ModalReducerPayload<P>\n): ModalObject<any>[] => {\n  switch (payload.action) {\n    case 'create':\n      return [\n        ...modals.map(modal => {\n          if (\n            !payload.modal.options.alert &&\n            payload.modal.state === 'open' &&\n            !modal.options.alert &&\n            modal.state === 'open' &&\n            modal.options.minimizable\n          ) {\n            modal.state = 'minimized';\n          }\n\n          return modal;\n        }),\n        payload.modal\n      ];\n\n    case 'unmount':\n      return modals.filter(modal => modal.id !== payload.modal.id);\n\n    case 'dismiss':\n      return modals.map(modal => {\n        modal.state = modal.id === payload.modal.id ? 'closed' : modal.state;\n        return modal;\n      });\n\n    case 'update':\n      return modals.map(modal => {\n        modal.props =\n          modal.id === payload.modal.id ? { ...modal.props, ...payload.modal.props } : modal.props;\n        return modal;\n      });\n\n    case 'activate':\n      return modals.map(modal => {\n        if (modal.id === payload.modal.id) {\n          modal.state = 'open';\n        } else if (!modal.options.alert && modal.state === 'open' && modal.options.minimizable) {\n          modal.state = 'minimized';\n        }\n\n        return modal;\n      });\n\n    case 'minimize':\n      return modals.map(modal => {\n        modal.state =\n          modal.id === payload.modal.id && modal.options.minimizable ? 'minimized' : modal.state;\n        return modal;\n      });\n\n    default:\n      return modals;\n  }\n};\n\nconst WrappedModal = ({\n  Component,\n  id,\n  options: { alert, dismissible, minimizable },\n  state,\n  methods,\n  props,\n  top\n}: ModalObject & { top: boolean }) => (\n  <ModalContext.Provider\n    value={{\n      id,\n      alert,\n      dismissible,\n      minimizable,\n      state,\n      top,\n      ...methods\n    }}\n  >\n    <Component {...props} />\n  </ModalContext.Provider>\n);\n\nconst RenderModals = ({ modals }: { modals: ModalObject[] }) => {\n  const { open, minimized, alerts } = modals.reduce<{\n    open: ModalObject[];\n    minimized: ModalObject[];\n    alerts: ModalObject[];\n  }>(\n    (obj, modal) => {\n      if (modal.options.alert) obj.alerts.push(modal);\n      else if (modal.state === 'minimized') obj.minimized.push(modal);\n      else obj.open.push(modal);\n\n      return obj;\n    },\n    { open: [], minimized: [], alerts: [] }\n  );\n\n  return (\n    <>\n      {open.map((modal, i) => (\n        <WrappedModal\n          {...modal}\n          top={alerts.length === 0 && i === open.length - 1}\n          key={modal.id}\n        />\n      ))}\n      {minimized.length > 0 && (\n        <DockedModals>\n          {minimized.map(modal => (\n            <WrappedModal {...modal} top={false} key={modal.id} />\n          ))}\n        </DockedModals>\n      )}\n      {alerts.map((modal, i) => (\n        <WrappedModal {...modal} top={i === open.length - 1} key={modal.id} />\n      ))}\n    </>\n  );\n};\n\nconst ModalManager: FunctionComponent<{ children: ReactNode }> = ({ children }) => {\n  const [modals, dispatch] = useReducer(reducer, []);\n  const styleCache = useRef('');\n  const hasBodyStyle = useRef(false);\n\n  const providerValue = useMemo(\n    () => ({\n      create: <P extends object>(\n        Component: ComponentType<P>,\n        props?: P,\n        options?: ModalOptions\n      ) => {\n        const id = options?.id || createUID();\n\n        const methods: ModalMethods<P> = {\n          dismiss: () => {\n            dispatch({ action: 'dismiss', modal: { id } });\n            options?.onDismiss?.(id);\n          },\n          update: (updateProps: Partial<P>) => {\n            (dispatch as Dispatch<ModalReducerPayload<P>>)({\n              action: 'update',\n              modal: { id, props: updateProps }\n            });\n          },\n          minimize: () => {\n            dispatch({ action: 'minimize', modal: { id } });\n            options?.onMinimize?.(id);\n          },\n          activate: () => {\n            dispatch({ action: 'activate', modal: { id } });\n            options?.onActivate?.(id);\n          },\n          unmount: () => {\n            dispatch({ action: 'unmount', modal: { id } });\n          }\n        };\n\n        (dispatch as Dispatch<ModalReducerPayload<P>>)({\n          action: 'create',\n          modal: {\n            id,\n            methods,\n            Component,\n            props,\n            state: options?.defaultMinimized ? 'minimized' : 'open',\n            options: {\n              alert: false,\n              minimizable: false,\n              defaultMinimized: false,\n              unmountWhenMinimized: true,\n              ...options,\n              dismissible: !!(options?.alert ? false : options?.dismissible ?? true)\n            }\n          }\n        });\n\n        return methods;\n      }\n    }),\n    []\n  );\n\n  useEffect(() => {\n    if (modals.some(modal => modal.state === 'open')) {\n      if (!hasBodyStyle.current) {\n        requestAnimationFrame(() => {\n          if (document.body.style.overflow) styleCache.current = document.body.style.overflow;\n          if (testElForOverflow(document.body))\n            document.body.style.paddingInlineEnd = `${getScrollbarWidth()}px`;\n          document.body.style.overflow = 'hidden';\n          hasBodyStyle.current = true;\n        });\n      }\n    } else if (hasBodyStyle.current) {\n      requestAnimationFrame(() => {\n        document.body.style.paddingInlineEnd = '';\n        document.body.style.overflow = styleCache.current;\n        styleCache.current = '';\n        hasBodyStyle.current = false;\n      });\n    }\n  }, [modals]);\n\n  const { portalTarget } = useConfiguration();\n\n  // Don't create additional ModalManagerContext.Providers or Modal portals\n  const priorCtx = useContext(ModalManagerContext);\n  if (priorCtx !== initialModalManagerContext) return <>{children}</>;\n\n  return (\n    <ModalManagerContext.Provider value={providerValue}>\n      {children}\n      {modals.length > 0 &&\n        portalTarget &&\n        createPortal(<RenderModals modals={modals} />, portalTarget)}\n    </ModalManagerContext.Provider>\n  );\n};\n\nexport default ModalManager;\n"]}
+{"version":3,"file":"ModalManager.js","sourceRoot":"","sources":["../../../src/components/Modal/ModalManager.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  useReducer,\n  useMemo,\n  useEffect,\n  useContext,\n  FunctionComponent,\n  ComponentType,\n  Dispatch,\n  useRef\n} from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { createUID, getScrollbarWidth, testElForOverflow } from '../../utils';\nimport { useConfiguration } from '../../hooks';\nimport { OmitStrict } from '../../types';\n\nimport DockedModals from './DockedModals';\nimport {\n  ModalMethods,\n  ModalOptions,\n  ModalObject,\n  ModalManagerProps,\n  initializedKey,\n  ModalState\n} from './Modal.types';\nimport { ModalContext, ModalManagerContext } from './Contexts';\n\ntype ModalAction =\n  | 'create'\n  | 'update'\n  | 'minimize'\n  | 'maximize'\n  | 'dock'\n  | 'activate'\n  | 'dismiss'\n  | 'unmount';\n\ntype ModalReducerPayload<P extends object> =\n  | { action: 'create'; modal: ModalObject<P> }\n  | {\n      action: 'update';\n      modal: Partial<OmitStrict<ModalObject<P>, 'props'>> &\n        Pick<ModalObject, 'id'> & { props: Partial<ModalObject<P>['props']> };\n    }\n  | {\n      action: Exclude<ModalAction, 'create' | 'update'>;\n      modal: Pick<ModalObject, 'id'>;\n    };\n\nconst reducer = <P extends object>(\n  modals: ModalObject[],\n  payload: ModalReducerPayload<P>\n): ModalObject<any>[] => {\n  switch (payload.action) {\n    case 'create':\n      return [\n        ...modals.map(modal => {\n          if (\n            (!payload.modal.options.alert &&\n              payload.modal.state === 'open' &&\n              !modal.options.alert &&\n              modal.state === 'open' &&\n              modal.options.minimizable) ||\n            payload.modal.options.dockable\n          ) {\n            modal.state = 'minimized';\n          }\n\n          return modal;\n        }),\n        payload.modal\n      ];\n\n    case 'unmount':\n      return modals.filter(modal => modal.id !== payload.modal.id);\n\n    case 'dismiss':\n      return modals.map(modal => {\n        modal.state = modal.id === payload.modal.id ? 'closed' : modal.state;\n        return modal;\n      });\n\n    case 'update':\n      return modals.map(modal => {\n        modal.props =\n          modal.id === payload.modal.id ? { ...modal.props, ...payload.modal.props } : modal.props;\n        return modal;\n      });\n\n    case 'activate':\n      return modals.map(modal => {\n        if (modal.id === payload.modal.id && !modal.options.dockable) {\n          modal.state = 'open';\n        } else if (modal.id === payload.modal.id && modal.options.dockable) {\n          modal.state = 'docked';\n        } else if (!modal.options.alert && modal.state === 'open' && modal.options.minimizable) {\n          modal.state = 'minimized';\n        }\n\n        return modal;\n      });\n\n    case 'minimize':\n      return modals.map(modal => {\n        modal.state =\n          modal.id === payload.modal.id && modal.options.minimizable ? 'minimized' : modal.state;\n        return modal;\n      });\n\n    case 'maximize':\n      return modals.map(modal => {\n        modal.state =\n          modal.id === payload.modal.id && modal.options.maximizable ? 'maximized' : modal.state;\n        return modal;\n      });\n\n    case 'dock':\n      return modals.map(modal => {\n        modal.state =\n          modal.id === payload.modal.id && modal.options.dockable ? 'docked' : 'minimized';\n        return modal;\n      });\n\n    default:\n      return modals;\n  }\n};\n\nconst WrappedModal = ({\n  Component,\n  id,\n  options: { alert, dismissible, dockable, minimizable, maximizable },\n  state,\n  methods,\n  props,\n  top\n}: ModalObject & { top: boolean }) => (\n  <ModalContext.Provider\n    value={{\n      id,\n      alert,\n      dismissible,\n      minimizable,\n      maximizable,\n      dockable,\n      state,\n      top,\n      ...methods\n    }}\n  >\n    <Component {...props} />\n  </ModalContext.Provider>\n);\n\nconst RenderModals = ({ modals }: { modals: ModalObject[] }) => {\n  const { open, minimized, alerts } = modals.reduce<{\n    open: ModalObject[];\n    minimized: ModalObject[];\n    alerts: ModalObject[];\n  }>(\n    (obj, modal) => {\n      if (modal.options.alert) obj.alerts.push(modal);\n      else if (modal.state === 'minimized' || modal.state === 'docked') {\n        obj.minimized.push(modal);\n      } else obj.open.push(modal);\n\n      return obj;\n    },\n    { open: [], minimized: [], alerts: [] }\n  );\n\n  return (\n    <>\n      {open.map((modal, i) => (\n        <WrappedModal\n          {...modal}\n          top={alerts.length === 0 && i === open.length - 1}\n          key={modal.id}\n        />\n      ))}\n      {minimized.length > 0 && (\n        <DockedModals>\n          {minimized.map(modal => (\n            <WrappedModal {...modal} top={false} key={modal.id} />\n          ))}\n        </DockedModals>\n      )}\n      {alerts.map((modal, i) => (\n        <WrappedModal {...modal} top={i === open.length - 1} key={modal.id} />\n      ))}\n    </>\n  );\n};\n\nconst ModalManager: FunctionComponent<ModalManagerProps> = ({\n  children,\n  context = ModalManagerContext\n}) => {\n  const [modals, dispatch] = useReducer(reducer, []);\n  const styleCache = useRef('');\n  const overflowProperty = useRef<'' | 'overflow' | 'overflowX' | 'overflowY' | 'hidden'>('');\n\n  const providerValue = useMemo(\n    () => ({\n      create: <P extends object>(\n        Component: ComponentType<P>,\n        props?: P,\n        options?: ModalOptions\n      ) => {\n        const id = options?.id || createUID();\n\n        const methods: ModalMethods<P> = {\n          dismiss: () => {\n            dispatch({ action: 'dismiss', modal: { id } });\n            options?.onDismiss?.(id);\n          },\n          update: updateProps => {\n            (dispatch as Dispatch<ModalReducerPayload<P>>)({\n              action: 'update',\n              modal: { id, props: updateProps }\n            });\n          },\n          minimize: () => {\n            dispatch({ action: 'minimize', modal: { id } });\n            options?.onMinimize?.(id);\n          },\n          maximize: () => {\n            dispatch({ action: 'maximize', modal: { id } });\n            options?.onMaximize?.(id);\n          },\n          dock: () => {\n            dispatch({ action: 'dock', modal: { id } });\n            options?.onDock?.(id);\n          },\n          activate: () => {\n            dispatch({ action: 'activate', modal: { id } });\n            options?.onActivate?.(id);\n          },\n          unmount: () => {\n            dispatch({ action: 'unmount', modal: { id } });\n          }\n        };\n\n        let defaultState: ModalState;\n        if (options?.defaultMinimized) {\n          defaultState = 'minimized';\n        } else if (options?.dockable) {\n          defaultState = 'docked';\n        } else {\n          defaultState = 'open';\n        }\n\n        (dispatch as Dispatch<ModalReducerPayload<P>>)({\n          action: 'create',\n          modal: {\n            id,\n            methods,\n            Component,\n            props,\n            state: defaultState,\n            options: {\n              alert: false,\n              minimizable: false,\n              maximizable: false,\n              dockable: false,\n              defaultMinimized: false,\n              unmountWhenMinimized: true,\n              ...options,\n              dismissible: !!(options?.alert ? false : options?.dismissible ?? true)\n            }\n          }\n        });\n\n        return methods;\n      },\n      ModalContext,\n      [initializedKey]: true\n    }),\n    []\n  );\n\n  useEffect(() => {\n    if (modals.some(modal => modal.state === 'open' && !modal.options.dockable)) {\n      if (!overflowProperty.current) {\n        requestAnimationFrame(() => {\n          overflowProperty.current = 'overflow';\n          styleCache.current = document.body.style.overflow;\n          if (document.body.style.overflowX) {\n            styleCache.current = document.body.style.overflowX;\n            overflowProperty.current = 'overflowX';\n          } else if (document.body.style.overflowY) {\n            styleCache.current = document.body.style.overflowY;\n            overflowProperty.current = 'overflowY';\n          }\n          if (testElForOverflow(document.body))\n            document.body.style.paddingInlineEnd = `${getScrollbarWidth()}px`;\n          document.body.style.overflow = 'hidden';\n        });\n      }\n    } else if (overflowProperty.current) {\n      requestAnimationFrame(() => {\n        document.body.style.paddingInlineEnd = '';\n        switch (overflowProperty.current) {\n          case 'overflowX':\n            document.body.style.overflowX = styleCache.current;\n            break;\n          case 'overflowY':\n            document.body.style.overflowY = styleCache.current;\n            break;\n          default:\n            document.body.style.overflow = styleCache.current;\n            break;\n        }\n        styleCache.current = '';\n        overflowProperty.current = '';\n      });\n    }\n  }, [modals]);\n\n  const { portalTarget } = useConfiguration();\n\n  const priorCtx = useContext(context);\n\n  const priorCtxValue = useMemo(\n    () =>\n      context === ModalManagerContext\n        ? priorCtx\n        : {\n            ...priorCtx,\n            create: (Comp, props, opts) => {\n              const WrappedComp: typeof Comp = compProps => (\n                <ModalManager context={context}>\n                  <Comp {...compProps} />\n                </ModalManager>\n              );\n              return priorCtx.create(WrappedComp, props, opts);\n            }\n          },\n    [priorCtx, context]\n  );\n\n  // Don't create additional Modal portals.\n  if (priorCtx[initializedKey])\n    return (\n      <ModalManagerContext.Provider value={priorCtxValue}>{children}</ModalManagerContext.Provider>\n    );\n\n  return (\n    <ModalManagerContext.Provider value={providerValue}>\n      {children}\n      {modals.length > 0 &&\n        portalTarget &&\n        createPortal(<RenderModals modals={modals} />, portalTarget)}\n    </ModalManagerContext.Provider>\n  );\n};\n\nexport default ModalManager;\n"]}

package/lib/components/Modal/index.d.ts

@@ -1,7 +1,6 @@
 export { default } from './Modal';
 export { default as ModalManager } from './ModalManager';
 export { ModalManagerContext } from './Contexts';
-export { ModalContext } from './Contexts';
 export { ModalProps } from './Modal.types';
 export { ModalMethods } from './Modal.types';
 //# sourceMappingURL=index.d.ts.map

package/lib/components/Modal/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAClC,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAClC,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC"}

package/lib/components/Modal/index.js

@@ -1,5 +1,4 @@
 export { default } from './Modal';
 export { default as ModalManager } from './ModalManager';
 export { ModalManagerContext } from './Contexts';
-export { ModalContext } from './Contexts';
 //# sourceMappingURL=index.js.map

package/lib/components/Modal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Modal/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAClC,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC","sourcesContent":["export { default } from './Modal';\nexport { default as ModalManager } from './ModalManager';\nexport { ModalManagerContext } from './Contexts';\nexport { ModalContext } from './Contexts';\nexport { ModalProps } from './Modal.types';\nexport { ModalMethods } from './Modal.types';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Modal/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAClC,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAC","sourcesContent":["export { default } from './Modal';\nexport { default as ModalManager } from './ModalManager';\nexport { ModalManagerContext } from './Contexts';\nexport { ModalProps } from './Modal.types';\nexport { ModalMethods } from './Modal.types';\n"]}

package/lib/components/MultiStep/MultiStep.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MultiStep.d.ts","sourceRoot":"","sources":["../../../src/components/MultiStep/MultiStep.tsx"],"names":[],"mappings":"AACA,OAAc,EAEZ,iBAAiB,EAKlB,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAc3C,OAAO,cAAc,MAAM,mBAAmB,CAAC;AAyF/C,QAAA,MAAM,SAAS,EAAE,iBAAiB,CAAC,cAAc,GAAG,YAAY,CA+B/D,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"MultiStep.d.ts","sourceRoot":"","sources":["../../../src/components/MultiStep/MultiStep.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,iBAAiB,EAKlB,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAc3C,OAAO,cAAc,MAAM,mBAAmB,CAAC;AA4F/C,QAAA,MAAM,SAAS,EAAE,iBAAiB,CAAC,cAAc,GAAG,YAAY,CA+B/D,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/components/MultiStep/MultiStep.js

@@ -1,5 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { remToPx, stripUnit } from 'polished';
-import React, { forwardRef, useRef, useEffect } from 'react';
+import { forwardRef, useRef, useEffect } from 'react';
 import { useElement, useTheme } from '../../hooks';
 import { getFocusables, tryCatch } from '../../utils';
 import Flex from '../Flex';
@@ -19,28 +20,24 @@ const FormProgress = ({ steps, currentId, ...restProps }) => {
         popoverPlacement = 'top-start';
     else if (curIdx === steps.length - 1)
         popoverPlacement = 'top-end';
-    return (React.createElement(StyledFormProgress, { ...restProps, container: { alignItems: 'center' }, role: 'progressbar', "aria-valuenow": curIdx, "aria-valuemin": 0, "aria-valuetext": curStep.name, "aria-valuemax": steps.length },
-        React.createElement(CurrentStepPopover, { show: true, target: currentStepEl, placement: popoverPlacement, modifiers: [
-                {
-                    name: 'offset',
-                    options: {
-                        offset: [
-                            0,
-                            tryCatch(() => stripUnit(remToPx(theme.base.spacing)), () => 8)
-                        ]
+    useEffect(() => {
+        setCurrentStepEl(stepRefs.current[curIdx]);
+    }, [stepRefs.current, curIdx]);
+    return (_jsxs(StyledFormProgress, { ...restProps, container: { alignItems: 'center' }, role: 'progressbar', "aria-valuenow": curIdx, "aria-valuemin": 0, "aria-valuetext": curStep.name, "aria-valuemax": steps.length, children: [_jsx(CurrentStepPopover, { show: true, target: currentStepEl, placement: popoverPlacement, modifiers: [
+                    {
+                        name: 'offset',
+                        options: {
+                            offset: [
+                                0,
+                                tryCatch(() => stripUnit(remToPx(theme.base.spacing)), () => 8)
+                            ]
+                        }
                     }
-                }
-            ] },
-            React.createElement(Text, { variant: 'h4' }, curStep.name)),
-        React.createElement(Flex, { container: { justify: 'between', alignItems: 'center' }, item: { grow: 1 } }, steps.map((step, index) => {
-            return (React.createElement(StepMarker, { key: step.id, ref: (el) => {
-                    if (index === curIdx)
-                        setCurrentStepEl(el);
-                    stepRefs.current[index] = el;
-                }, "aria-label": step.name, "aria-describedby": step.id, current: index === curIdx, depth: step.depth, prior: index < curIdx, onClick: step.onClick }, index !== curIdx && (React.createElement(Tooltip, { id: step.id, target: stepRefs.current[index], showDelay: 'none', hideDelay: 'short', portal: false }, step.name))));
-        })),
-        React.createElement(StyledBar, null,
-            React.createElement(StyledFill, { style: { '--fillScale': fillScale } }))));
+                ], children: _jsx(Text, { variant: 'h4', children: curStep.name }, void 0) }, void 0), _jsx(Flex, { container: { justify: 'between', alignItems: 'center' }, item: { grow: 1 }, children: steps.map((step, index) => {
+                    return (_jsx(StepMarker, { ref: (el) => {
+                            stepRefs.current[index] = el;
+                        }, "aria-label": step.name, "aria-describedby": step.id, current: index === curIdx, depth: step.depth, prior: index < curIdx, onClick: step.onClick, children: index !== curIdx && (_jsx(Tooltip, { id: step.id, target: stepRefs.current[index], showDelay: 'none', hideDelay: 'short', portal: false, children: step.name }, void 0)) }, step.id));
+                }) }, void 0), _jsx(StyledBar, { children: _jsx(StyledFill, { style: { '--fillScale': fillScale } }, void 0) }, void 0)] }, void 0));
 };
 const MultiStep = forwardRef(({ currentId, steps, ...restProps }, ref) => {
     const multiStepContentRef = useRef(null);
@@ -50,12 +47,10 @@ const MultiStep = forwardRef(({ currentId, steps, ...restProps }, ref) => {
         if (focusableElements.length)
             focusableElements[0].focus();
     }, [currentId]);
-    return (React.createElement(Flex, { as: StyledMultiStep, ref: ref, container: {
+    return (_jsxs(Flex, { as: StyledMultiStep, ref: ref, container: {
             direction: 'column',
-            itemGap: 3
-        }, ...restProps },
-        React.createElement(FormProgress, { steps: steps, currentId: currentId }),
-        React.createElement(Form, { ref: multiStepContentRef, actions: currentStep.actions }, currentStep.content)));
+            gap: 3
+        }, ...restProps, children: [_jsx(FormProgress, { steps: steps, currentId: currentId }, void 0), _jsx(Form, { ref: multiStepContentRef, actions: currentStep.actions, banners: currentStep.banners, children: currentStep.content }, void 0)] }, void 0));
 });
 export default MultiStep;
 //# sourceMappingURL=MultiStep.js.map

package/lib/components/MultiStep/MultiStep.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiStep.js","sourceRoot":"","sources":["../../../src/components/MultiStep/MultiStep.tsx"],"names":[],"mappings":"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","sourcesContent":["import { remToPx, stripUnit } from 'polished';\nimport React, {\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  CSSProperties,\n  useRef,\n  useEffect\n} from 'react';\n\nimport { useElement, useTheme } from '../../hooks';\nimport { ForwardProps } from '../../types';\nimport { getFocusables, tryCatch } from '../../utils';\nimport Flex from '../Flex';\nimport Form from '../Form';\nimport Text from '../Text';\nimport Tooltip from '../Tooltip';\n\nimport StyledMultiStep, {\n  CurrentStepPopover,\n  StepMarker,\n  StyledBar,\n  StyledFill,\n  StyledFormProgress\n} from './MultiStep.styles';\nimport MultiStepProps from './MultiStep.types';\n\nconst FormProgress: FunctionComponent<MultiStepProps & ForwardProps> = ({\n  steps,\n  currentId,\n  ...restProps\n}: MultiStepProps) => {\n  const curIdx = steps.findIndex(step => step.id === currentId);\n  const curStep = steps[curIdx];\n  const fillScale = curIdx / (steps.length - 1);\n\n  const [currentStepEl, setCurrentStepEl] = useElement();\n  const stepRefs = useRef<HTMLElement[]>([]);\n  const theme = useTheme();\n\n  let popoverPlacement: 'top' | 'top-start' | 'top-end' = 'top';\n  if (curIdx === 0) popoverPlacement = 'top-start';\n  else if (curIdx === steps.length - 1) popoverPlacement = 'top-end';\n\n  return (\n    <StyledFormProgress\n      {...restProps}\n      container={{ alignItems: 'center' }}\n      role='progressbar'\n      aria-valuenow={curIdx}\n      aria-valuemin={0}\n      aria-valuetext={curStep.name}\n      aria-valuemax={steps.length}\n    >\n      <CurrentStepPopover\n        show\n        target={currentStepEl}\n        placement={popoverPlacement}\n        modifiers={[\n          {\n            name: 'offset',\n            options: {\n              offset: [\n                0,\n                tryCatch(\n                  () => stripUnit(remToPx(theme.base.spacing)),\n                  () => 8\n                )\n              ]\n            }\n          }\n        ]}\n      >\n        <Text variant='h4'>{curStep.name}</Text>\n      </CurrentStepPopover>\n      <Flex container={{ justify: 'between', alignItems: 'center' }} item={{ grow: 1 }}>\n        {steps.map((step, index) => {\n          return (\n            <StepMarker\n              key={step.id}\n              ref={(el: HTMLElement) => {\n                if (index === curIdx) setCurrentStepEl(el);\n                stepRefs.current[index] = el;\n              }}\n              aria-label={step.name}\n              aria-describedby={step.id}\n              current={index === curIdx}\n              depth={step.depth}\n              prior={index < curIdx}\n              onClick={step.onClick}\n            >\n              {index !== curIdx && (\n                <Tooltip\n                  id={step.id}\n                  target={stepRefs.current[index]}\n                  showDelay='none'\n                  hideDelay='short'\n                  portal={false}\n                >\n                  {step.name}\n                </Tooltip>\n              )}\n            </StepMarker>\n          );\n        })}\n      </Flex>\n\n      <StyledBar>\n        <StyledFill style={{ '--fillScale': fillScale } as CSSProperties} />\n      </StyledBar>\n    </StyledFormProgress>\n  );\n};\n\nconst MultiStep: FunctionComponent<MultiStepProps & ForwardProps> = forwardRef(\n  (\n    { currentId, steps, ...restProps }: PropsWithoutRef<MultiStepProps>,\n    ref: MultiStepProps['ref']\n  ) => {\n    const multiStepContentRef = useRef(null);\n    const currentStep = steps.find(step => step.id === currentId)!!;\n\n    useEffect(() => {\n      const focusableElements = getFocusables(multiStepContentRef);\n\n      if (focusableElements.length) focusableElements[0].focus();\n    }, [currentId]);\n\n    return (\n      <Flex\n        as={StyledMultiStep}\n        ref={ref}\n        container={{\n          direction: 'column',\n          itemGap: 3\n        }}\n        {...restProps}\n      >\n        <FormProgress steps={steps} currentId={currentId} />\n        <Form ref={multiStepContentRef} actions={currentStep.actions}>\n          {currentStep.content}\n        </Form>\n      </Flex>\n    );\n  }\n);\n\nexport default MultiStep;\n"]}
+{"version":3,"file":"MultiStep.js","sourceRoot":"","sources":["../../../src/components/MultiStep/MultiStep.tsx"],"names":[],"mappings":"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","sourcesContent":["import { remToPx, stripUnit } from 'polished';\nimport {\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  CSSProperties,\n  useRef,\n  useEffect\n} from 'react';\n\nimport { useElement, useTheme } from '../../hooks';\nimport { ForwardProps } from '../../types';\nimport { getFocusables, tryCatch } from '../../utils';\nimport Flex from '../Flex';\nimport Form from '../Form';\nimport Text from '../Text';\nimport Tooltip from '../Tooltip';\n\nimport StyledMultiStep, {\n  CurrentStepPopover,\n  StepMarker,\n  StyledBar,\n  StyledFill,\n  StyledFormProgress\n} from './MultiStep.styles';\nimport MultiStepProps from './MultiStep.types';\n\nconst FormProgress: FunctionComponent<MultiStepProps & ForwardProps> = ({\n  steps,\n  currentId,\n  ...restProps\n}: MultiStepProps) => {\n  const curIdx = steps.findIndex(step => step.id === currentId);\n  const curStep = steps[curIdx];\n  const fillScale = curIdx / (steps.length - 1);\n\n  const [currentStepEl, setCurrentStepEl] = useElement();\n  const stepRefs = useRef<HTMLElement[]>([]);\n  const theme = useTheme();\n\n  let popoverPlacement: 'top' | 'top-start' | 'top-end' = 'top';\n  if (curIdx === 0) popoverPlacement = 'top-start';\n  else if (curIdx === steps.length - 1) popoverPlacement = 'top-end';\n\n  useEffect(() => {\n    setCurrentStepEl(stepRefs.current[curIdx]);\n  }, [stepRefs.current, curIdx]);\n\n  return (\n    <StyledFormProgress\n      {...restProps}\n      container={{ alignItems: 'center' }}\n      role='progressbar'\n      aria-valuenow={curIdx}\n      aria-valuemin={0}\n      aria-valuetext={curStep.name}\n      aria-valuemax={steps.length}\n    >\n      <CurrentStepPopover\n        show\n        target={currentStepEl}\n        placement={popoverPlacement}\n        modifiers={[\n          {\n            name: 'offset',\n            options: {\n              offset: [\n                0,\n                tryCatch(\n                  () => stripUnit(remToPx(theme.base.spacing)),\n                  () => 8\n                )\n              ]\n            }\n          }\n        ]}\n      >\n        <Text variant='h4'>{curStep.name}</Text>\n      </CurrentStepPopover>\n      <Flex container={{ justify: 'between', alignItems: 'center' }} item={{ grow: 1 }}>\n        {steps.map((step, index) => {\n          return (\n            <StepMarker\n              key={step.id}\n              ref={(el: HTMLElement) => {\n                stepRefs.current[index] = el;\n              }}\n              aria-label={step.name}\n              aria-describedby={step.id}\n              current={index === curIdx}\n              depth={step.depth}\n              prior={index < curIdx}\n              onClick={step.onClick}\n            >\n              {index !== curIdx && (\n                <Tooltip\n                  id={step.id}\n                  target={stepRefs.current[index]}\n                  showDelay='none'\n                  hideDelay='short'\n                  portal={false}\n                >\n                  {step.name}\n                </Tooltip>\n              )}\n            </StepMarker>\n          );\n        })}\n      </Flex>\n\n      <StyledBar>\n        <StyledFill style={{ '--fillScale': fillScale } as CSSProperties} />\n      </StyledBar>\n    </StyledFormProgress>\n  );\n};\n\nconst MultiStep: FunctionComponent<MultiStepProps & ForwardProps> = forwardRef(\n  (\n    { currentId, steps, ...restProps }: PropsWithoutRef<MultiStepProps>,\n    ref: MultiStepProps['ref']\n  ) => {\n    const multiStepContentRef = useRef(null);\n    const currentStep = steps.find(step => step.id === currentId)!;\n\n    useEffect(() => {\n      const focusableElements = getFocusables(multiStepContentRef);\n\n      if (focusableElements.length) focusableElements[0].focus();\n    }, [currentId]);\n\n    return (\n      <Flex\n        as={StyledMultiStep}\n        ref={ref}\n        container={{\n          direction: 'column',\n          gap: 3\n        }}\n        {...restProps}\n      >\n        <FormProgress steps={steps} currentId={currentId} />\n        <Form ref={multiStepContentRef} actions={currentStep.actions} banners={currentStep.banners}>\n          {currentStep.content}\n        </Form>\n      </Flex>\n    );\n  }\n);\n\nexport default MultiStep;\n"]}

package/lib/components/MultiStep/MultiStep.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MultiStep.styles.d.ts","sourceRoot":"","sources":["../../../src/components/MultiStep/MultiStep.styles.ts"],"names":[],"mappings":"AAUA,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEzC,eAAO,MAAM,kBAAkB,8TAU9B,CAAC;AAEF,eAAO,MAAM,SAAS,yGAapB,CAAC;AAIH,eAAO,MAAM,UAAU,yGAoBrB,CAAC;AAIH,eAAO,MAAM,kBAAkB,iMAe7B,CAAC;AAIH,eAAO,MAAM,UAAU;aACZ,OAAO;WACT,IAAI,CAAC,OAAO,CAAC;WACb,OAAO;SA6Ed,CAAC;AAIH,QAAA,MAAM,eAAe,yGAAe,CAAC;AAErC,eAAe,eAAe,CAAC"}
+{"version":3,"file":"MultiStep.styles.d.ts","sourceRoot":"","sources":["../../../src/components/MultiStep/MultiStep.styles.ts"],"names":[],"mappings":"AAWA,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEzC,eAAO,MAAM,kBAAkB,8TAU9B,CAAC;AAEF,eAAO,MAAM,SAAS,yGAapB,CAAC;AAIH,eAAO,MAAM,UAAU,yGAsBrB,CAAC;AAIH,eAAO,MAAM,kBAAkB,iMAe7B,CAAC;AAIH,eAAO,MAAM,UAAU;aACZ,OAAO;WACT,IAAI,CAAC,OAAO,CAAC;WACb,OAAO;SA6Ed,CAAC;AAIH,QAAA,MAAM,eAAe,yGAAe,CAAC;AAErC,eAAe,eAAe,CAAC"}

package/lib/components/MultiStep/MultiStep.styles.js

@@ -6,6 +6,7 @@ import BareButton from '../Button/BareButton';
 import Popover from '../Popover';
 import { StyledText } from '../Text';
 import { calculateFontSize } from '../../styles';
+import { useDirection } from '../../hooks';
 export const CurrentStepPopover = styled(Popover) `
   max-width: 100%;
   filter: none;
@@ -29,6 +30,7 @@ export const StyledBar = styled.div(({ theme }) => {
 StyledBar.defaultProps = defaultThemeProp;
 export const StyledFill = styled.div(({ theme }) => {
     const { base: { animation: { speed: animationSpeed, timing: { ease: animationTiming } }, palette: { interactive } } } = theme;
+    const { ltr } = useDirection();
     return css `
     position: absolute;
     width: 100%;
@@ -36,7 +38,7 @@ export const StyledFill = styled.div(({ theme }) => {
     background: ${interactive};
     transition: all calc(2 * ${animationSpeed}) ${animationTiming};
     transform: scaleX(var(--fillScale));
-    transform-origin: 0 0;
+    transform-origin: ${ltr ? 0 : '100%'} 0;
   `;
 });
 StyledFill.defaultProps = defaultThemeProp;
@@ -50,7 +52,7 @@ export const StyledFormProgress = styled(Flex)(({ theme }) => {
 });
 StyledFormProgress.defaultProps = defaultThemeProp;
 export const StepMarker = styled(BareButton)(({ current, depth, prior, theme }) => {
-    const { base: { 'font-size': fontSize, 'font-scale': fontScale, animation: { speed: animationSpeed, timing: { ease: animationTiming } }, palette: { interactive, 'primary-background': primaryBackground }, shadow: { focus: focusShadow }, sizes: { 'touch-mouse': buttonSize, 'touch-finger': touchButtonSize } }, components: { 'form-control': { 'border-color': borderColor } } } = theme;
+    const { base: { 'font-size': fontSize, 'font-scale': fontScale, animation: { speed: animationSpeed, timing: { ease: animationTiming } }, palette: { interactive, 'primary-background': primaryBackground }, shadow: { focus: focusShadow }, 'hit-area': { 'mouse-min': buttonSize, 'finger-min': touchButtonSize } }, components: { 'form-control': { 'border-color': borderColor } } } = theme;
     const { m: stepMarkerSize } = calculateFontSize(fontSize, fontScale);
     const smallStepMarkerSize = `calc(${stepMarkerSize} / 1.5)`;
     return css `