@sprinklrjs/spaceweb 10.1.0

package/esm/menu/useItemContainerEventHandlers.js

@@ -0,0 +1,32 @@
+import _noop from 'lodash/noop';
+import { useCallback, useEffect } from 'react';
+/**
+ * Attaches/removes event handlers to listItemContainer
+ */
+var useItemContainerEventHandlers = function (_a) {
+    var _b = _a.turnOnKeyboardNavigation, turnOnKeyboardNavigation = _b === void 0 ? _noop : _b, resetMenuHighlightOnMouseLeave = _a.resetMenuHighlightOnMouseLeave, setHighlightedItem = _a.setHighlightedItem, listItemsContainer = _a.listItemsContainer, focusWhenNavigationEnabled = _a.focusWhenNavigationEnabled;
+    var resetMenuHighlight = useCallback(function () {
+        if (resetMenuHighlightOnMouseLeave) {
+            setHighlightedItem(null);
+        }
+    }, [resetMenuHighlightOnMouseLeave, setHighlightedItem]);
+    useEffect(function () {
+        if (!focusWhenNavigationEnabled)
+            return undefined;
+        listItemsContainer === null || listItemsContainer === void 0 ? void 0 : listItemsContainer.addEventListener('focus', turnOnKeyboardNavigation);
+        listItemsContainer === null || listItemsContainer === void 0 ? void 0 : listItemsContainer.addEventListener('mouseenter', turnOnKeyboardNavigation);
+        return function () {
+            listItemsContainer === null || listItemsContainer === void 0 ? void 0 : listItemsContainer.removeEventListener('focus', turnOnKeyboardNavigation);
+            listItemsContainer === null || listItemsContainer === void 0 ? void 0 : listItemsContainer.removeEventListener('mouseenter', turnOnKeyboardNavigation);
+        };
+    }, [focusWhenNavigationEnabled, listItemsContainer, turnOnKeyboardNavigation]);
+    useEffect(function () {
+        listItemsContainer === null || listItemsContainer === void 0 ? void 0 : listItemsContainer.addEventListener('blur', resetMenuHighlight);
+        listItemsContainer === null || listItemsContainer === void 0 ? void 0 : listItemsContainer.addEventListener('mouseleave', resetMenuHighlight);
+        return function () {
+            listItemsContainer === null || listItemsContainer === void 0 ? void 0 : listItemsContainer.removeEventListener('blur', resetMenuHighlight);
+            listItemsContainer === null || listItemsContainer === void 0 ? void 0 : listItemsContainer.removeEventListener('mouseleave', resetMenuHighlight);
+        };
+    }, [resetMenuHighlight, listItemsContainer]);
+};
+export default useItemContainerEventHandlers;

package/esm/menu/useKeyboardNavigation.d.ts

@@ -0,0 +1,23 @@
+import { Dispatch, SetStateAction } from 'react';
+import { Reducer } from './types';
+declare type Params = {
+    /**
+     * Navigation will be available for items of listContainer
+     */
+    listItemsContainerRef: HTMLElement | null;
+    focusWhenNavigationEnabled?: boolean;
+    disableNavigationOnMount?: boolean;
+    disableAutoHighlight?: boolean;
+    reducer: Reducer;
+};
+declare type NavigationUtils = {
+    highlightedItem: HTMLElement | null;
+    setHighlightedItem: Dispatch<SetStateAction<HTMLElement | null>>;
+    turnOnKeyboardNavigation: () => void;
+    turnOffKeyboardNavigation: () => void;
+    navigationEnabled: boolean;
+    nestedMenuOpen: boolean;
+    setNestedMenuOpen: (open: boolean) => void;
+};
+declare const useKeyboardNavigation: ({ listItemsContainerRef, disableNavigationOnMount, focusWhenNavigationEnabled, disableAutoHighlight, reducer, }: Params) => NavigationUtils;
+export default useKeyboardNavigation;

package/esm/menu/useKeyboardNavigation.js

@@ -0,0 +1,125 @@
+import { __read } from "tslib";
+import { useCallback, useEffect, useLayoutEffect, useState } from 'react';
+import { useLatest } from '../hooks/useLatest';
+import { useDocument } from '../spacewebProvider/DocumentProvider';
+import { getFirstHighlightableElement, getNextHighlightedItem } from './helpers';
+import { useNestedMenuContext } from './nested-menu-context';
+var useKeyboardNavigation = function (_a) {
+    var listItemsContainerRef = _a.listItemsContainerRef, _b = _a.disableNavigationOnMount, disableNavigationOnMount = _b === void 0 ? false : _b, _c = _a.focusWhenNavigationEnabled, focusWhenNavigationEnabled = _c === void 0 ? true : _c, disableAutoHighlight = _a.disableAutoHighlight, reducer = _a.reducer;
+    var _d = __read(useState(null), 2), highlightedItem = _d[0], setHighlightedItem = _d[1];
+    var _e = __read(useState(!disableNavigationOnMount), 2), navigationEnabled = _e[0], setNavigationEnabled = _e[1];
+    var _f = __read(useState(false), 2), nestedMenuOpen = _f[0], setNestedMenuOpen = _f[1];
+    var highlightedItemRef = useLatest(highlightedItem);
+    var reducerRef = useLatest(reducer);
+    var ownerDocument = useDocument();
+    // highlight first item in the list if prevHighlighted item is no longer in dom
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- run this hook whenever menu re-renders
+    useLayoutEffect(function () {
+        var isHighlightedItemInDom = ownerDocument === null || ownerDocument === void 0 ? void 0 : ownerDocument.body.contains(highlightedItem);
+        if (!highlightedItem ||
+            disableAutoHighlight ||
+            isHighlightedItemInDom ||
+            !navigationEnabled ||
+            !listItemsContainerRef) {
+            return;
+        }
+        var firstHighlightableItem = getFirstHighlightableElement(listItemsContainerRef).firstHighlightableItem;
+        firstHighlightableItem && setHighlightedItem(firstHighlightableItem);
+    });
+    useEffect(function () {
+        // Scroll the selected item into view for the first time when menu opens up
+        window.requestAnimationFrame(function () {
+            var _a, _b;
+            (_b = (_a = highlightedItemRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView) === null || _b === void 0 ? void 0 : _b.call(_a, { block: 'nearest' });
+        });
+    }, [highlightedItemRef]);
+    var turnOnKeyboardNavigation = useCallback(function () {
+        setNavigationEnabled(true);
+        setNestedMenuOpen(false);
+    }, [setNavigationEnabled, setNestedMenuOpen]);
+    var turnOffKeyboardNavigation = useCallback(function () { return setNavigationEnabled(false); }, []);
+    var _g = useNestedMenuContext(), getMenuInfo = _g.getMenuInfo, getParentMenuInfo = _g.getParentMenuInfo, getChildMenuInfo = _g.getChildMenuInfo;
+    // Highlight previously selected item or first highlightable item on mount
+    useEffect(function () {
+        if (disableAutoHighlight || !listItemsContainerRef) {
+            return;
+        }
+        var _a = getFirstHighlightableElement(listItemsContainerRef), firstHighlightableItem = _a.firstHighlightableItem, firstSelectedItem = _a.firstSelectedItem;
+        var itemToHighlight = reducerRef.current('INITIALIZE_MENU', {
+            highlightedItem: firstSelectedItem !== null && firstSelectedItem !== void 0 ? firstSelectedItem : firstHighlightableItem,
+        }).highlightedItem;
+        setHighlightedItem(itemToHighlight);
+    }, [listItemsContainerRef, disableAutoHighlight, reducerRef, disableNavigationOnMount]);
+    var handleKeyDown = useCallback(function (event) {
+        var _a;
+        var _highlightedItem = highlightedItemRef.current;
+        if (!listItemsContainerRef)
+            return;
+        var nextItemToHighlight = getNextHighlightedItem(event, (ownerDocument === null || ownerDocument === void 0 ? void 0 : ownerDocument.body.contains(_highlightedItem)) ? _highlightedItem : null, listItemsContainerRef);
+        var turnOffCurrentMenuNavigation = ((getMenuInfo === null || getMenuInfo === void 0 ? void 0 : getMenuInfo(listItemsContainerRef)) || {}).turnOffKeyboardNavigation;
+        if (event.key === 'ArrowLeft') {
+            var turnOnParentMenuNavigation = ((getParentMenuInfo === null || getParentMenuInfo === void 0 ? void 0 : getParentMenuInfo(listItemsContainerRef)) || {}).turnOnKeyboardNavigation;
+            // stopping event as event propogates to parent nested menu and closes that too.
+            if (turnOnParentMenuNavigation) {
+                turnOffCurrentMenuNavigation === null || turnOffCurrentMenuNavigation === void 0 ? void 0 : turnOffCurrentMenuNavigation();
+                event.stopPropagation();
+            }
+            turnOnParentMenuNavigation === null || turnOnParentMenuNavigation === void 0 ? void 0 : turnOnParentMenuNavigation();
+        }
+        else if (
+        // Open child menu on ArrowRight and SpaceBar
+        (event.key === 'ArrowRight' || event.key === ' ') &&
+            (_highlightedItem === null || _highlightedItem === void 0 ? void 0 : _highlightedItem.dataset.haschildmenu) === 'true') {
+            setNestedMenuOpen(true);
+            turnOffCurrentMenuNavigation === null || turnOffCurrentMenuNavigation === void 0 ? void 0 : turnOffCurrentMenuNavigation();
+            // Stop scrolling the menu
+            event.preventDefault();
+        }
+        setHighlightedItem(nextItemToHighlight);
+        /**
+         * When Menu mounts for the first time inside popover, it renders outside visible viewport until popover measures position of anchor/target element.
+         * By calling `scrollIntoView` after keydown(instead useEffect), avoiding scrollIntoView call for the first render.
+         */
+        (_a = nextItemToHighlight === null || nextItemToHighlight === void 0 ? void 0 : nextItemToHighlight.scrollIntoView) === null || _a === void 0 ? void 0 : _a.call(nextItemToHighlight, { block: 'nearest' });
+    }, [getMenuInfo, getParentMenuInfo, highlightedItemRef, listItemsContainerRef, ownerDocument === null || ownerDocument === void 0 ? void 0 : ownerDocument.body]);
+    useEffect(function () {
+        if (!navigationEnabled) {
+            return undefined;
+        }
+        var listContainer = listItemsContainerRef;
+        if (focusWhenNavigationEnabled && listContainer) {
+            /**
+             * When Menu is opened inside popover, prevent it from scrolling to top.
+             */
+            listContainer.focus({ preventScroll: true });
+            listContainer.addEventListener('keydown', handleKeyDown);
+            // automatically disable navigation if element is blurred
+            listContainer.addEventListener('blur', turnOffKeyboardNavigation);
+            return function () {
+                listContainer.removeEventListener('keydown', handleKeyDown);
+                listContainer.removeEventListener('blur', turnOffKeyboardNavigation);
+            };
+        }
+        ownerDocument === null || ownerDocument === void 0 ? void 0 : ownerDocument.body.addEventListener('keydown', handleKeyDown);
+        return function () {
+            ownerDocument === null || ownerDocument === void 0 ? void 0 : ownerDocument.body.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [
+        ownerDocument,
+        focusWhenNavigationEnabled,
+        handleKeyDown,
+        listItemsContainerRef,
+        navigationEnabled,
+        turnOffKeyboardNavigation,
+    ]);
+    return {
+        highlightedItem: highlightedItem,
+        setHighlightedItem: setHighlightedItem,
+        turnOffKeyboardNavigation: turnOffKeyboardNavigation,
+        turnOnKeyboardNavigation: turnOnKeyboardNavigation,
+        navigationEnabled: navigationEnabled,
+        nestedMenuOpen: nestedMenuOpen,
+        setNestedMenuOpen: setNestedMenuOpen,
+    };
+};
+export default useKeyboardNavigation;

package/esm/menu/useStatefulMenu.d.ts

@@ -0,0 +1,20 @@
+import { Dispatch, SetStateAction } from 'react';
+import { Reducer } from './types';
+declare type UseStatefulMenu = (params: {
+    disableNavigationOnMount?: boolean;
+    disableAutoHighlight?: boolean;
+    focusWhenNavigationEnabled: boolean;
+    listItemsContainerRef: HTMLElement | null;
+    onHighlightedItemChange?: (item?: HTMLElement | null) => void;
+    reducer?: Reducer;
+}) => {
+    highlightedItem: HTMLElement | null;
+    setHighlightedItem: Dispatch<SetStateAction<HTMLElement | null>>;
+    turnOnKeyboardNavigation: () => void;
+    turnOffKeyboardNavigation: () => void;
+    navigationEnabled: boolean;
+    nestedMenuOpen: boolean;
+    setNestedMenuOpen: (open: boolean) => void;
+};
+declare const useStatefulMenu: UseStatefulMenu;
+export default useStatefulMenu;

package/esm/menu/useStatefulMenu.js

@@ -0,0 +1,66 @@
+import { useEffect } from 'react';
+import { useLatest } from '../hooks/useLatest';
+import { defaultReducer } from './helpers';
+import { useNestedMenuContext } from './nested-menu-context';
+import useKeyboardNavigation from './useKeyboardNavigation';
+var useStatefulMenu = function (_a) {
+    var _b = _a.disableNavigationOnMount, disableNavigationOnMount = _b === void 0 ? false : _b, focusWhenNavigationEnabled = _a.focusWhenNavigationEnabled, listItemsContainerRef = _a.listItemsContainerRef, onHighlightedItemChange = _a.onHighlightedItemChange, disableAutoHighlight = _a.disableAutoHighlight, _c = _a.reducer, reducer = _c === void 0 ? defaultReducer : _c;
+    useEffect(function () {
+        // focusWhenNavigationEnabled is true, then make listContainer focusable if required
+        if (focusWhenNavigationEnabled && listItemsContainerRef && listItemsContainerRef.tabIndex < 0) {
+            listItemsContainerRef.tabIndex = 0;
+        }
+    }, [focusWhenNavigationEnabled, listItemsContainerRef]);
+    var _d = useKeyboardNavigation({
+        disableAutoHighlight: disableAutoHighlight,
+        disableNavigationOnMount: disableNavigationOnMount,
+        focusWhenNavigationEnabled: focusWhenNavigationEnabled,
+        listItemsContainerRef: listItemsContainerRef,
+        reducer: reducer,
+    }), highlightedItem = _d.highlightedItem, setHighlightedItem = _d.setHighlightedItem, turnOnKeyboardNavigation = _d.turnOnKeyboardNavigation, turnOffKeyboardNavigation = _d.turnOffKeyboardNavigation, navigationEnabled = _d.navigationEnabled, nestedMenuOpen = _d.nestedMenuOpen, setNestedMenuOpen = _d.setNestedMenuOpen;
+    var _e = useNestedMenuContext(), unregisterMenu = _e.unregisterMenu, registerMenu = _e.registerMenu, getParentMenuInfo = _e.getParentMenuInfo;
+    useEffect(function () {
+        if (!listItemsContainerRef)
+            return undefined;
+        var menuRef = listItemsContainerRef;
+        registerMenu === null || registerMenu === void 0 ? void 0 : registerMenu({ menuRef: menuRef, turnOffKeyboardNavigation: turnOffKeyboardNavigation, turnOnKeyboardNavigation: turnOnKeyboardNavigation });
+        return function () {
+            unregisterMenu === null || unregisterMenu === void 0 ? void 0 : unregisterMenu(menuRef);
+            // on unmount start parent menu's navigation
+            var turnOnParentMenuNavigation = ((getParentMenuInfo === null || getParentMenuInfo === void 0 ? void 0 : getParentMenuInfo(listItemsContainerRef)) || {}).turnOnKeyboardNavigation;
+            turnOnParentMenuNavigation === null || turnOnParentMenuNavigation === void 0 ? void 0 : turnOnParentMenuNavigation();
+        };
+    }, [
+        listItemsContainerRef,
+        registerMenu,
+        turnOffKeyboardNavigation,
+        turnOnKeyboardNavigation,
+        unregisterMenu,
+        getParentMenuInfo,
+    ]);
+    var onHighlightedItemChangeRef = useLatest(onHighlightedItemChange);
+    useEffect(function () {
+        var _a;
+        (_a = onHighlightedItemChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onHighlightedItemChangeRef, highlightedItem);
+    }, [highlightedItem, onHighlightedItemChangeRef]);
+    useEffect(function () {
+        var _a, _b;
+        // set aria-activedescendant to current focused element whenever highlighted item changes
+        if (navigationEnabled && (highlightedItem === null || highlightedItem === void 0 ? void 0 : highlightedItem.id)) {
+            if (highlightedItem === null || highlightedItem === void 0 ? void 0 : highlightedItem.id)
+                (_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-activedescendant', highlightedItem === null || highlightedItem === void 0 ? void 0 : highlightedItem.id);
+        }
+        else
+            (_b = document.activeElement) === null || _b === void 0 ? void 0 : _b.removeAttribute('aria-activedescendant');
+    }, [navigationEnabled, highlightedItem]);
+    return {
+        highlightedItem: highlightedItem,
+        setHighlightedItem: setHighlightedItem,
+        turnOffKeyboardNavigation: turnOffKeyboardNavigation,
+        turnOnKeyboardNavigation: turnOnKeyboardNavigation,
+        navigationEnabled: navigationEnabled,
+        nestedMenuOpen: nestedMenuOpen,
+        setNestedMenuOpen: setNestedMenuOpen,
+    };
+};
+export default useStatefulMenu;

package/esm/modal/adapter.d.ts

@@ -0,0 +1,6 @@
+import { ROLE } from 'baseui/modal';
+import { StyleUtils } from '../types';
+import { Role, Size } from './types';
+import { ValueOf } from '../utility-types';
+export declare const getWidthFromSize: ({ px2rem }: StyleUtils, size: Size) => string;
+export declare const roleMap: Record<Role, ValueOf<ROLE>>;

package/esm/modal/adapter.js

@@ -0,0 +1,18 @@
+import { ROLE } from 'baseui/modal';
+export var getWidthFromSize = function (_a, size) {
+    var px2rem = _a.px2rem;
+    switch (size) {
+        case 'sm':
+            return px2rem(520);
+        case 'md':
+            return px2rem(720);
+        case 'lg':
+            return px2rem(1220);
+        default:
+            return 'auto';
+    }
+};
+export var roleMap = {
+    dialog: ROLE.dialog,
+    alertdialog: ROLE.alertdialog,
+};

package/esm/modal/index.d.ts

@@ -0,0 +1,7 @@
+export { default as Modal } from './modal';
+export { default as ModalHeader } from './modal-header';
+export { default as ModalFooter } from './modal-footer';
+export { FocusOnce } from 'baseui/modal';
+export { ModalBody, StyledRoot, StyledBackdrop, StyledClose, StyledDialog, StyledDialogContainer, StyledModal, } from './styled-components';
+export type { SharedProps, ModalProps, ModalState, Size, Role, } from './types';
+export { CLOSE_SOURCE } from './types';

package/esm/modal/index.js

@@ -0,0 +1,6 @@
+export { default as Modal } from './modal';
+export { default as ModalHeader } from './modal-header';
+export { default as ModalFooter } from './modal-footer';
+export { FocusOnce } from 'baseui/modal';
+export { ModalBody, StyledRoot, StyledBackdrop, StyledClose, StyledDialog, StyledDialogContainer, StyledModal, } from './styled-components';
+export { CLOSE_SOURCE } from './types';

package/esm/modal/modal-footer.d.ts

@@ -0,0 +1,7 @@
+import { ReactElement } from 'react';
+import { ModalFooterProps } from './types';
+declare const ModalFooter: {
+    (props: ModalFooterProps): ReactElement;
+    displayName: string;
+};
+export default ModalFooter;

package/esm/modal/modal-footer.js

@@ -0,0 +1,10 @@
+import { __assign } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { StyledModalFooter } from './styled-components';
+import { add$props } from '../helpers';
+var ModalFooter = function (props) {
+    var sharedProps = add$props({ noBorder: props.noBorder });
+    return _jsx(StyledModalFooter, __assign({}, props, sharedProps), void 0);
+};
+ModalFooter.displayName = 'ModalFooter';
+export default ModalFooter;

package/esm/modal/modal-header.d.ts

@@ -0,0 +1,7 @@
+import { ReactElement } from 'react';
+import { ModalHeaderProps } from './types';
+declare const ModalHeader: {
+    ({ noBorder, ...restProps }: ModalHeaderProps): ReactElement;
+    displayName: string;
+};
+export default ModalHeader;

package/esm/modal/modal-header.js

@@ -0,0 +1,11 @@
+import { __assign, __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { StyledModalHeader } from './styled-components';
+import { add$props } from '../helpers';
+var ModalHeader = function (_a) {
+    var noBorder = _a.noBorder, restProps = __rest(_a, ["noBorder"]);
+    var sharedProps = add$props({ noBorder: noBorder });
+    return _jsx(StyledModalHeader, __assign({}, restProps, sharedProps), void 0);
+};
+ModalHeader.displayName = 'ModalHeader';
+export default ModalHeader;

package/esm/modal/modal.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { ModalProps } from './types';
+declare const _default: React.MemoExoticComponent<{
+    ({ size, role, ariaLabel, overrides, ...props }: ModalProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    displayName: string;
+}>;
+export default _default;

package/esm/modal/modal.js

@@ -0,0 +1,34 @@
+import { __assign, __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { IconButton } from '../button';
+import { useConvertOverrides } from '../helpers/baseui/useConvertOverrides';
+import Close from '../icon/components/close';
+import { useStyle } from '../style';
+import { getWidthFromSize, roleMap } from './adapter';
+import { getCloseButtonProps, getDialogContainerStyles, getDialogStyles, getBackdropStyles } from './overrides';
+import { StyledModal } from './styled-components';
+import { add$props } from '../helpers';
+var CloseButton = function (closeProps) { return (_jsx(IconButton, __assign({}, closeProps, { children: _jsx(Close, {}, void 0) }), void 0)); };
+var Modal = function (_a) {
+    var _b = _a.size, size = _b === void 0 ? 'md' : _b, _c = _a.role, role = _c === void 0 ? 'dialog' : _c, ariaLabel = _a.ariaLabel, overrides = _a.overrides, props = __rest(_a, ["size", "role", "ariaLabel", "overrides"]);
+    var utils = useStyle();
+    var theme = utils.theme;
+    var sharedProps = add$props({ dialogSize: size });
+    var _overrides = useConvertOverrides({
+        DialogContainer: { style: getDialogContainerStyles, props: sharedProps },
+        Dialog: {
+            style: getDialogStyles,
+            props: __assign(__assign({}, (ariaLabel ? { 'aria-label': ariaLabel } : undefined)), sharedProps),
+        },
+        Close: {
+            component: CloseButton,
+            props: getCloseButtonProps(utils, sharedProps),
+        },
+        Backdrop: { style: getBackdropStyles, props: sharedProps },
+    }, overrides, [overrides, theme]);
+    // NOTE: `unstable_ModalBackdropScroll` is to make compatible for future version.
+    return (_jsx(StyledModal, __assign({}, props, { size: getWidthFromSize(utils, size), role: roleMap[role], unstable_ModalBackdropScroll: true, overrides: _overrides }), void 0));
+};
+Modal.displayName = 'Modal';
+export default React.memo(Modal);

package/esm/modal/overrides.d.ts

@@ -0,0 +1,9 @@
+import { IconButtonProps } from '../button/IconButton';
+import { Styles, StyleUtils } from '../types';
+import { SharedProps } from './types';
+export declare const getDialogContainerStyles: Styles;
+export declare const getDialogStyles: Styles;
+export declare const getBackdropStyles: Styles;
+export declare const getCloseButtonProps: ({ px2rem, direction, theme }: StyleUtils, { $dialogSize }: {
+    $dialogSize: SharedProps['$size'];
+}) => IconButtonProps;

package/esm/modal/overrides.js

@@ -0,0 +1,67 @@
+import { __assign } from "tslib";
+var getDialogHeightControl = function (_a, _b) {
+    var px2rem = _a.px2rem;
+    var $dialogSize = _b.$dialogSize;
+    switch ($dialogSize) {
+        case 'sm':
+            return { maxHeight: px2rem(560) };
+        case 'md':
+            return { maxHeight: px2rem(660) };
+        case 'lg':
+            return { height: '90%' };
+        case 'fullPage':
+            return {
+                width: '94vw',
+                height: '88vh',
+                marginTop: px2rem(44),
+            };
+        default:
+            return undefined;
+    }
+};
+var getDialogContainerHeightControl = function (utils, _a) {
+    var $dialogSize = _a.$dialogSize;
+    return ($dialogSize === 'lg' ? 'h-full' : '');
+};
+var transitionDuration = function (_a, _b) {
+    var theme = _a.theme;
+    var $animate = _b.$animate;
+    return ($animate ? { transitionDuration: '200ms' } : {});
+};
+export var getDialogContainerStyles = [
+    'border-box spr-overlay',
+    getDialogContainerHeightControl,
+    transitionDuration,
+];
+export var getDialogStyles = [
+    'transform-none flex flex-col spr-shadow-02 rounded-8',
+    getDialogHeightControl,
+    transitionDuration,
+];
+export var getBackdropStyles = [transitionDuration];
+export var getCloseButtonProps = function (_a, _b) {
+    var _c;
+    var px2rem = _a.px2rem, direction = _a.direction, theme = _a.theme;
+    var $dialogSize = _b.$dialogSize;
+    var buttonDirection = direction === 'rtl' ? 'left' : 'right';
+    return {
+        size: 'sm',
+        overrides: {
+            BaseButton: {
+                style: __assign((_c = { position: 'absolute', top: px2rem(16) }, _c[buttonDirection] = px2rem(20), _c), ($dialogSize === 'fullPage'
+                    ? {
+                        top: px2rem(-44),
+                        right: px2rem(0),
+                        backgroundColor: theme.spr.ui01,
+                        color: theme.spr.icon02,
+                        borderColor: theme.borderColor.transparent,
+                        ':hover': {
+                            color: theme.spr.ui04,
+                            backgroundColor: theme.spr.ui06,
+                        },
+                    }
+                    : {})),
+            },
+        },
+    };
+};

package/esm/modal/styled-components.d.ts

@@ -0,0 +1,7 @@
+import { ModalProps as BaseModalProps } from 'baseui/modal';
+import * as React from 'react';
+export { StyledRoot, StyledBackdrop, StyledClose, StyledDialog, StyledDialogContainer } from 'baseui/modal';
+export declare const StyledModal: React.ComponentType<BaseModalProps>;
+export declare const StyledModalHeader: import("../style/styled").StyledComponent;
+export declare const ModalBody: import("../style/styled").StyledComponent;
+export declare const StyledModalFooter: import("../style/styled").StyledComponent;

package/esm/modal/styled-components.js

@@ -0,0 +1,31 @@
+import { Modal as BaseModal } from 'baseui/modal';
+import withThemeOverride from '../helpers/baseui/withThemeOverride';
+import { styled } from '../style';
+export { StyledRoot, StyledBackdrop, StyledClose, StyledDialog, StyledDialogContainer } from 'baseui/modal';
+// @ts-ignore
+BaseModal.displayName = 'BaseUIModal';
+export var StyledModal = withThemeOverride(BaseModal, function (theme) { return ({
+    colors: {
+        backgroundPrimary: theme.spr.popup,
+        modalCloseColor: theme.spr.icon02,
+        modalCloseColorHover: theme.spr.icon01,
+        contentPrimary: theme.spr.text01,
+        contentSecondary: theme.spr.text02,
+    },
+}); });
+export var StyledModalHeader = styled('div', 'typography-h4 spr-text-01 font-bold border-t-0 border-r-0 border-l-0', function (_a, _b) {
+    var px2rem = _a.px2rem;
+    var $noBorder = _b.$noBorder;
+    return ({ lineHeight: $noBorder ? px2rem(28) : px2rem(24) });
+}, function (utils, _a) {
+    var $noBorder = _a.$noBorder;
+    return ($noBorder ? 'py-6 px-7' : 'border-b-1 border-solid spr-border-02 py-5 px-7');
+});
+export var ModalBody = styled('div', 'typography-bl1 spr-text-01 overflow-auto flex-grow');
+export var StyledModalFooter = styled('div', 'border-b-0 border-l-0 border-r-0', function (_a) {
+    var px2rem = _a.px2rem, direction = _a.direction;
+    return ({ lineHeight: px2rem(28), textAlign: direction === 'rtl' ? 'left' : 'right' });
+}, function (utils, _a) {
+    var $noBorder = _a.$noBorder;
+    return ($noBorder ? 'py-6 px-7' : 'border-t-1 border-solid spr-border-02 py-5 px-7');
+});

package/esm/modal/types.d.ts

@@ -0,0 +1,24 @@
+import { ModalOverrides, ModalProps as BaseModalProps, SharedStylePropsArg } from 'baseui/modal';
+import { Override } from '../overrides';
+import { SpacewebComponentProps } from '../types';
+export declare type Size = 'sm' | 'md' | 'lg' | 'fullPage';
+export declare type Role = 'dialog' | 'alertdialog';
+export declare type SharedProps = Omit<SharedStylePropsArg, '$size'> & {
+    $size?: Size;
+};
+export declare type ModalProps = Omit<BaseModalProps, 'overrides' | 'size' | 'role'> & {
+    overrides?: {
+        [key in keyof ModalOverrides]?: Override<SharedProps & Record<string, any>>;
+    };
+    size?: Size;
+    role?: Role;
+    ariaLabel?: string;
+};
+export declare type ModalHeaderProps = SpacewebComponentProps & {
+    noBorder?: boolean;
+};
+export declare type ModalFooterProps = SpacewebComponentProps & {
+    noBorder?: boolean;
+};
+export type { ModalState } from 'baseui/modal';
+export { CLOSE_SOURCE } from 'baseui/modal';

package/esm/modal/types.js

@@ -0,0 +1 @@
+export { CLOSE_SOURCE } from 'baseui/modal';

package/esm/overrides/index.d.ts

@@ -0,0 +1,3 @@
+export * from './types';
+export { mergeOverrides } from './mergeOverrides';
+export { useOverrides, getOverrides } from './useOverrides';

package/esm/overrides/index.js

@@ -0,0 +1,3 @@
+export * from './types';
+export { mergeOverrides } from './mergeOverrides';
+export { useOverrides, getOverrides } from './useOverrides';

package/esm/overrides/mergeOverrides.d.ts

@@ -0,0 +1,3 @@
+import { Overrides, OverridesObject } from './types';
+declare const mergeOverrides: <T>(target: Overrides<T>, source?: Overrides<T>) => OverridesObject<T>;
+export { mergeOverrides };

package/esm/overrides/mergeOverrides.js

@@ -0,0 +1,42 @@
+import { __assign } from "tslib";
+import { isValidElement } from 'react';
+import _mergeWith from 'lodash/mergeWith';
+import _isObject from 'lodash/isObject';
+import { combineRefs } from '../hooks/useCombinedRef';
+var mergeOverride = function (_target, _source) {
+    var target = typeof _target === 'function' ? { component: _target } : _target;
+    var source = typeof _source === 'function' ? { component: _source } : _source;
+    var merged = __assign(__assign({}, target), source);
+    if ((target === null || target === void 0 ? void 0 : target.props) && (source === null || source === void 0 ? void 0 : source.props)) {
+        // deep merge
+        merged.props = _mergeWith({}, target.props, source.props, function (a, b) {
+            /**
+             * React elements are object. _merge deep merges react elements as well, which is not we usually want.
+             * Check tests for more information
+             */
+            if (isValidElement(b))
+                return b;
+            return undefined;
+        });
+        if (target.props.ref && source.props.ref) {
+            merged.props.ref = combineRefs(target.props.ref, source.props.ref);
+        }
+        if (_isObject(target.props.overrides) && _isObject(source.props.overrides)) {
+            // eslint-disable-next-line @typescript-eslint/no-use-before-define
+            merged.props.overrides = mergeOverrides(target.props.overrides, source.props.overrides);
+        }
+    }
+    if ((target === null || target === void 0 ? void 0 : target.style) && (source === null || source === void 0 ? void 0 : source.style)) {
+        merged.style = [target.style, source.style];
+    }
+    return merged;
+};
+var mergeOverrides = function (target, source) {
+    if (source === void 0) { source = {}; }
+    var allIdentifiers = Object.keys(__assign(__assign({}, target), source));
+    return allIdentifiers.reduce(function (acc, name) {
+        acc[name] = mergeOverride(target[name], source[name]);
+        return acc;
+    }, {});
+};
+export { mergeOverrides };

package/esm/overrides/types.d.ts

@@ -0,0 +1,22 @@
+/**
+ * @author Ivan Torres
+ */
+import * as React from 'react';
+import { Styles } from '../types';
+export declare type StyleOverride<P> = Styles;
+declare type ComponentOverride<P> = React.ComponentType<P> | React.ForwardRefRenderFunction<unknown, P>;
+export interface OverrideObject<P> {
+    component?: ComponentOverride<P>;
+    props?: {
+        [key: string]: unknown;
+    };
+    style?: StyleOverride<P>;
+}
+export declare type Override<P> = OverrideObject<P> | React.ComponentType<P>;
+export interface Overrides<T = unknown> {
+    [key: string]: Override<T> | undefined;
+}
+export interface OverridesObject<T = unknown> {
+    [key: string]: OverrideObject<T>;
+}
+export {};

package/esm/overrides/types.js

@@ -0,0 +1,4 @@
+/**
+ * @author Ivan Torres
+ */
+export {};