@sprinklrjs/spaceweb 11.0.0 → 12.14.4

package/menu/menu.js

@@ -11,20 +11,21 @@ var helpers_1 = require("./helpers");
 var MenuContext_1 = require("./MenuContext");
 var useItemContainerEventHandlers_1 = (0, tslib_1.__importDefault)(require("./useItemContainerEventHandlers"));
 var useStatefulMenu_1 = (0, tslib_1.__importDefault)(require("./useStatefulMenu"));
-var nested_menu_context_1 = require("./nested-menu-context");
 var Menu = (0, react_1.forwardRef)(function (_a, ref) {
-    var _b = _a.disableNavigationOnMount, disableNavigationOnMount = _b === void 0 ? false : _b, _c = _a.focusWhenNavigationEnabled, focusWhenNavigationEnabled = _c === void 0 ? true : _c, _d = _a.virtual, virtual = _d === void 0 ? false : _d, overscanCount = _a.overscanCount, _e = _a.scrollElement, scrollElement = _e === void 0 ? null : _e, estimateItemSize = _a.estimateItemSize, children = _a.children, overrides = _a.overrides, onHighlightedItemChange = _a.onHighlightedItemChange, disableAutoHighlight = _a.disableAutoHighlight, resetMenuOnMouseLeave = _a.resetMenuOnMouseLeave, resetMenuHighlightOnMouseLeave = _a.resetMenuHighlightOnMouseLeave, _f = _a.reducer, reducer = _f === void 0 ? helpers_1.defaultReducer : _f, captureScroll = _a.captureScroll, restProps = (0, tslib_1.__rest)(_a, ["disableNavigationOnMount", "focusWhenNavigationEnabled", "virtual", "overscanCount", "scrollElement", "estimateItemSize", "children", "overrides", "onHighlightedItemChange", "disableAutoHighlight", "resetMenuOnMouseLeave", "resetMenuHighlightOnMouseLeave", "reducer", "captureScroll"]);
-    var _g = (0, tslib_1.__read)((0, react_1.useState)(null), 2), listRef = _g[0], setListRef = _g[1];
-    var _h = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.List, list_1.List), 2), ListOverride = _h[0], listProps = _h[1];
-    var _j = (0, tslib_1.__read)((0, react_1.useState)(null), 2), listItemsContainer = _j[0], setListItemsContainer = _j[1];
-    var _k = (0, useStatefulMenu_1.default)({
+    var _b = _a.disableNavigationOnMount, disableNavigationOnMount = _b === void 0 ? false : _b, _c = _a.focusWhenNavigationEnabled, focusWhenNavigationEnabled = _c === void 0 ? true : _c, _d = _a.virtual, virtual = _d === void 0 ? false : _d, overscanCount = _a.overscanCount, _e = _a.scrollElement, scrollElement = _e === void 0 ? null : _e, estimateItemSize = _a.estimateItemSize, children = _a.children, overrides = _a.overrides, onHighlightedItemChange = _a.onHighlightedItemChange, disableAutoHighlight = _a.disableAutoHighlight, resetMenuOnMouseLeave = _a.resetMenuOnMouseLeave, resetMenuHighlightOnMouseLeave = _a.resetMenuHighlightOnMouseLeave, _f = _a.reducer, reducer = _f === void 0 ? helpers_1.defaultReducer : _f, captureScroll = _a.captureScroll, _g = _a.selectOnTab, selectOnTab = _g === void 0 ? false : _g, restProps = (0, tslib_1.__rest)(_a, ["disableNavigationOnMount", "focusWhenNavigationEnabled", "virtual", "overscanCount", "scrollElement", "estimateItemSize", "children", "overrides", "onHighlightedItemChange", "disableAutoHighlight", "resetMenuOnMouseLeave", "resetMenuHighlightOnMouseLeave", "reducer", "captureScroll", "selectOnTab"]);
+    var _h = (0, tslib_1.__read)((0, react_1.useState)(null), 2), listRef = _h[0], setListRef = _h[1];
+    var _j = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.List, list_1.List), 2), ListOverride = _j[0], listProps = _j[1];
+    var _k = (0, tslib_1.__read)((0, react_1.useState)(null), 2), listItemsContainer = _k[0], setListItemsContainer = _k[1];
+    var _l = (0, useStatefulMenu_1.default)({
         disableNavigationOnMount: disableNavigationOnMount,
         disableAutoHighlight: disableAutoHighlight,
         focusWhenNavigationEnabled: focusWhenNavigationEnabled,
         onHighlightedItemChange: onHighlightedItemChange,
         listItemsContainerRef: listItemsContainer,
         reducer: reducer,
-    }), turnOnKeyboardNavigation = _k.turnOnKeyboardNavigation, turnOffKeyboardNavigation = _k.turnOffKeyboardNavigation, highlightedItem = _k.highlightedItem, setHighlightedItem = _k.setHighlightedItem, nestedMenuOpen = _k.nestedMenuOpen, setNestedMenuOpen = _k.setNestedMenuOpen;
+        selectOnTab: selectOnTab,
+        children: children,
+    }), turnOnKeyboardNavigation = _l.turnOnKeyboardNavigation, turnOffKeyboardNavigation = _l.turnOffKeyboardNavigation, highlightedItem = _l.highlightedItem, setHighlightedItem = _l.setHighlightedItem, nestedMenuOpen = _l.nestedMenuOpen, listItemFocusVisible = _l.listItemFocusVisible, setNestedMenuOpen = _l.setNestedMenuOpen;
     var setScrollTarget = (0, useScrollCapture_1.default)({ enabled: captureScroll });
     var setListCombinedRef = (0, useCombinedRef_1.default)(setListRef, setScrollTarget);
     var menuContextValue = (0, react_1.useMemo)(function () { return ({
@@ -32,8 +33,9 @@ var Menu = (0, react_1.forwardRef)(function (_a, ref) {
         setHighlightedItem: setHighlightedItem,
         setMenuContainerRef: setListItemsContainer,
         nestedMenuOpen: nestedMenuOpen,
+        listItemFocusVisible: listItemFocusVisible,
         setNestedMenuOpen: setNestedMenuOpen,
-    }); }, [highlightedItem, setHighlightedItem, nestedMenuOpen, setNestedMenuOpen]);
+    }); }, [highlightedItem, setHighlightedItem, nestedMenuOpen, listItemFocusVisible, setNestedMenuOpen]);
     (0, useItemContainerEventHandlers_1.default)({
         listItemsContainer: listItemsContainer,
         resetMenuHighlightOnMouseLeave: resetMenuHighlightOnMouseLeave || resetMenuOnMouseLeave,
@@ -50,9 +52,7 @@ var Menu = (0, react_1.forwardRef)(function (_a, ref) {
         }
         return menuRef;
     }, [turnOnKeyboardNavigation, turnOffKeyboardNavigation, setHighlightedItem, listRef]);
-    var nestedMenuContext = (0, nested_menu_context_1.useNestedMenuContext)();
-    var $showFocusOutline = Object.keys(nestedMenuContext).length !== 0;
-    return ((0, jsx_runtime_1.jsx)(MenuContext_1.MenuProvider, (0, tslib_1.__assign)({ value: menuContextValue }, { children: (0, jsx_runtime_1.jsx)(ListOverride, (0, tslib_1.__assign)({ ref: setListCombinedRef, "$showFocusOutline": $showFocusOutline, role: "menu", virtual: virtual, overscanCount: overscanCount, scrollElement: scrollElement, estimateItemSize: estimateItemSize }, restProps, listProps, { children: children }), void 0) }), void 0));
+    return ((0, jsx_runtime_1.jsx)(MenuContext_1.MenuProvider, (0, tslib_1.__assign)({ value: menuContextValue }, { children: (0, jsx_runtime_1.jsx)(ListOverride, (0, tslib_1.__assign)({ ref: setListCombinedRef, role: "menu", virtual: virtual, overscanCount: overscanCount, scrollElement: scrollElement, estimateItemSize: estimateItemSize }, restProps, listProps, { children: children }), void 0) }), void 0));
 });
 Menu.displayName = 'Menu';
 exports.default = (0, react_1.memo)(Menu);

package/menu/types.d.ts

@@ -48,6 +48,7 @@ export declare type MenuProps = Omit<ListProps, 'overrides'> & {
     resetMenuOnMouseLeave?: boolean;
     reducer?: Reducer;
     captureScroll?: boolean;
+    selectOnTab?: boolean;
 };
 declare type MenuActions = {
     turnOnKeyboardNavigation?: () => void;

package/menu/useKeyboardNavigation.d.ts

@@ -1,4 +1,4 @@
-import { Dispatch, SetStateAction } from 'react';
+import { ReactNode } from 'react';
 import { Reducer } from './types';
 declare type Params = {
     /**
@@ -9,15 +9,18 @@ declare type Params = {
     disableNavigationOnMount?: boolean;
     disableAutoHighlight?: boolean;
     reducer: Reducer;
+    selectOnTab?: boolean;
+    children?: ReactNode;
 };
 declare type NavigationUtils = {
     highlightedItem: HTMLElement | null;
-    setHighlightedItem: Dispatch<SetStateAction<HTMLElement | null>>;
+    setHighlightedItem: (item: HTMLElement | null, showFocusVisibleStyles?: boolean) => void;
     turnOnKeyboardNavigation: () => void;
     turnOffKeyboardNavigation: () => void;
+    listItemFocusVisible: boolean;
     navigationEnabled: boolean;
     nestedMenuOpen: boolean;
     setNestedMenuOpen: (open: boolean) => void;
 };
-declare const useKeyboardNavigation: ({ listItemsContainerRef, disableNavigationOnMount, focusWhenNavigationEnabled, disableAutoHighlight, reducer, }: Params) => NavigationUtils;
+declare const useKeyboardNavigation: ({ listItemsContainerRef, disableNavigationOnMount, focusWhenNavigationEnabled, disableAutoHighlight, reducer, selectOnTab, children, }: Params) => NavigationUtils;
 export default useKeyboardNavigation;

package/menu/useKeyboardNavigation.js

@@ -7,27 +7,29 @@ var DocumentProvider_1 = require("../spacewebProvider/DocumentProvider");
 var helpers_1 = require("./helpers");
 var nested_menu_context_1 = require("./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 = (0, tslib_1.__read)((0, react_1.useState)(null), 2), highlightedItem = _d[0], setHighlightedItem = _d[1];
-    var _e = (0, tslib_1.__read)((0, react_1.useState)(!disableNavigationOnMount), 2), navigationEnabled = _e[0], setNavigationEnabled = _e[1];
-    var _f = (0, tslib_1.__read)((0, react_1.useState)(false), 2), nestedMenuOpen = _f[0], setNestedMenuOpen = _f[1];
+    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, selectOnTab = _a.selectOnTab, children = _a.children;
+    var _d = (0, tslib_1.__read)((0, react_1.useState)(null), 2), highlightedItem = _d[0], _setHighlightedItem = _d[1];
+    var _e = (0, tslib_1.__read)((0, react_1.useState)(false), 2), listItemFocusVisible = _e[0], setListItemFocusVisible = _e[1];
+    var _f = (0, tslib_1.__read)((0, react_1.useState)(!disableNavigationOnMount), 2), navigationEnabled = _f[0], setNavigationEnabled = _f[1];
+    var _g = (0, tslib_1.__read)((0, react_1.useState)(false), 2), nestedMenuOpen = _g[0], setNestedMenuOpen = _g[1];
     var highlightedItemRef = (0, useLatest_1.useLatest)(highlightedItem);
     var reducerRef = (0, useLatest_1.useLatest)(reducer);
     var ownerDocument = (0, DocumentProvider_1.useDocument)();
+    var setHighlightedItem = function (item, showFocusVisibleStyles) {
+        if (showFocusVisibleStyles === void 0) { showFocusVisibleStyles = false; }
+        _setHighlightedItem(item);
+        setListItemFocusVisible(showFocusVisibleStyles);
+    };
     // 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
     (0, react_1.useLayoutEffect)(function () {
         var isHighlightedItemInDom = ownerDocument === null || ownerDocument === void 0 ? void 0 : ownerDocument.body.contains(highlightedItem);
-        if (!highlightedItem ||
-            disableAutoHighlight ||
-            isHighlightedItemInDom ||
-            !navigationEnabled ||
-            !listItemsContainerRef) {
+        if (disableAutoHighlight || isHighlightedItemInDom || !navigationEnabled || !listItemsContainerRef) {
             return;
         }
         var firstHighlightableItem = (0, helpers_1.getFirstHighlightableElement)(listItemsContainerRef).firstHighlightableItem;
         firstHighlightableItem && setHighlightedItem(firstHighlightableItem);
-    });
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- run this hook only when children changes
+    }, [children]);
     (0, react_1.useEffect)(function () {
         // Scroll the selected item into view for the first time when menu opens up
         window.requestAnimationFrame(function () {
@@ -40,7 +42,7 @@ var useKeyboardNavigation = function (_a) {
         setNestedMenuOpen(false);
     }, [setNavigationEnabled, setNestedMenuOpen]);
     var turnOffKeyboardNavigation = (0, react_1.useCallback)(function () { return setNavigationEnabled(false); }, []);
-    var _g = (0, nested_menu_context_1.useNestedMenuContext)(), getMenuInfo = _g.getMenuInfo, getParentMenuInfo = _g.getParentMenuInfo, getChildMenuInfo = _g.getChildMenuInfo;
+    var _h = (0, nested_menu_context_1.useNestedMenuContext)(), getMenuInfo = _h.getMenuInfo, getParentMenuInfo = _h.getParentMenuInfo, getChildMenuInfo = _h.getChildMenuInfo;
     // Highlight previously selected item or first highlightable item on mount
     (0, react_1.useEffect)(function () {
         if (disableAutoHighlight || !listItemsContainerRef) {
@@ -77,13 +79,17 @@ var useKeyboardNavigation = function (_a) {
             // Stop scrolling the menu
             event.preventDefault();
         }
-        setHighlightedItem(nextItemToHighlight);
+        else if (event.key === 'Tab' && selectOnTab) {
+            _highlightedItem === null || _highlightedItem === void 0 ? void 0 : _highlightedItem.click();
+            event.preventDefault();
+        }
+        setHighlightedItem(nextItemToHighlight, true);
         /**
          * 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]);
+    }, [getMenuInfo, getParentMenuInfo, highlightedItemRef, listItemsContainerRef, ownerDocument === null || ownerDocument === void 0 ? void 0 : ownerDocument.body, selectOnTab]);
     (0, react_1.useEffect)(function () {
         if (!navigationEnabled) {
             return undefined;
@@ -117,6 +123,7 @@ var useKeyboardNavigation = function (_a) {
     return {
         highlightedItem: highlightedItem,
         setHighlightedItem: setHighlightedItem,
+        listItemFocusVisible: listItemFocusVisible,
         turnOffKeyboardNavigation: turnOffKeyboardNavigation,
         turnOnKeyboardNavigation: turnOnKeyboardNavigation,
         navigationEnabled: navigationEnabled,

package/menu/useStatefulMenu.d.ts

@@ -1,4 +1,4 @@
-import { Dispatch, SetStateAction } from 'react';
+import { ReactNode } from 'react';
 import { Reducer } from './types';
 declare type UseStatefulMenu = (params: {
     disableNavigationOnMount?: boolean;
@@ -7,11 +7,14 @@ declare type UseStatefulMenu = (params: {
     listItemsContainerRef: HTMLElement | null;
     onHighlightedItemChange?: (item?: HTMLElement | null) => void;
     reducer?: Reducer;
+    selectOnTab?: boolean;
+    children?: ReactNode;
 }) => {
     highlightedItem: HTMLElement | null;
-    setHighlightedItem: Dispatch<SetStateAction<HTMLElement | null>>;
+    setHighlightedItem: (item: HTMLElement | null, showFocusVisibleStyles?: boolean) => void;
     turnOnKeyboardNavigation: () => void;
     turnOffKeyboardNavigation: () => void;
+    listItemFocusVisible: boolean;
     navigationEnabled: boolean;
     nestedMenuOpen: boolean;
     setNestedMenuOpen: (open: boolean) => void;

package/menu/useStatefulMenu.js

@@ -7,7 +7,7 @@ var helpers_1 = require("./helpers");
 var nested_menu_context_1 = require("./nested-menu-context");
 var useKeyboardNavigation_1 = (0, tslib_1.__importDefault)(require("./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 ? helpers_1.defaultReducer : _c;
+    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 ? helpers_1.defaultReducer : _c, selectOnTab = _a.selectOnTab, children = _a.children;
     (0, react_1.useEffect)(function () {
         // focusWhenNavigationEnabled is true, then make listContainer focusable if required
         if (focusWhenNavigationEnabled && listItemsContainerRef && listItemsContainerRef.tabIndex < 0) {
@@ -20,7 +20,9 @@ var useStatefulMenu = function (_a) {
         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;
+        selectOnTab: selectOnTab,
+        children: children,
+    }), highlightedItem = _d.highlightedItem, setHighlightedItem = _d.setHighlightedItem, turnOnKeyboardNavigation = _d.turnOnKeyboardNavigation, turnOffKeyboardNavigation = _d.turnOffKeyboardNavigation, listItemFocusVisible = _d.listItemFocusVisible, navigationEnabled = _d.navigationEnabled, nestedMenuOpen = _d.nestedMenuOpen, setNestedMenuOpen = _d.setNestedMenuOpen;
     var _e = (0, nested_menu_context_1.useNestedMenuContext)(), unregisterMenu = _e.unregisterMenu, registerMenu = _e.registerMenu, getParentMenuInfo = _e.getParentMenuInfo;
     (0, react_1.useEffect)(function () {
         if (!listItemsContainerRef)
@@ -47,20 +49,24 @@ var useStatefulMenu = function (_a) {
         (_a = onHighlightedItemChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onHighlightedItemChangeRef, highlightedItem);
     }, [highlightedItem, onHighlightedItemChangeRef]);
     (0, react_1.useEffect)(function () {
-        var _a, _b;
+        var activeElement;
         // 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);
+        if (navigationEnabled && (highlightedItem === null || highlightedItem === void 0 ? void 0 : highlightedItem.id) && document.activeElement) {
+            activeElement = document.activeElement;
+            activeElement.setAttribute('aria-activedescendant', highlightedItem.id);
         }
-        else
-            (_b = document.activeElement) === null || _b === void 0 ? void 0 : _b.removeAttribute('aria-activedescendant');
+        return function () {
+            if (activeElement) {
+                activeElement.removeAttribute('aria-activedescendant');
+            }
+        };
     }, [navigationEnabled, highlightedItem]);
     return {
         highlightedItem: highlightedItem,
         setHighlightedItem: setHighlightedItem,
         turnOffKeyboardNavigation: turnOffKeyboardNavigation,
         turnOnKeyboardNavigation: turnOnKeyboardNavigation,
+        listItemFocusVisible: listItemFocusVisible,
         navigationEnabled: navigationEnabled,
         nestedMenuOpen: nestedMenuOpen,
         setNestedMenuOpen: setNestedMenuOpen,

package/modal/modal.js

@@ -11,12 +11,14 @@ var adapter_1 = require("./adapter");
 var overrides_1 = require("./overrides");
 var styled_components_1 = require("./styled-components");
 var helpers_1 = require("../helpers");
+var locale_1 = require("../locale");
 var CloseButton = function (closeProps) { return ((0, jsx_runtime_1.jsx)(button_1.IconButton, (0, tslib_1.__assign)({}, closeProps, { children: (0, jsx_runtime_1.jsx)(close_1.default, {}, 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 = (0, tslib_1.__rest)(_a, ["size", "role", "ariaLabel", "overrides"]);
     var utils = (0, style_1.useStyle)();
     var theme = utils.theme;
     var sharedProps = (0, helpers_1.add$props)({ dialogSize: size });
+    var locale = (0, locale_1.useLocale)();
     var _overrides = (0, useConvertOverrides_1.useConvertOverrides)({
         DialogContainer: { style: overrides_1.getDialogContainerStyles, props: sharedProps },
         Dialog: {
@@ -25,7 +27,7 @@ var Modal = function (_a) {
         },
         Close: {
             component: CloseButton,
-            props: (0, overrides_1.getCloseButtonProps)(utils, sharedProps),
+            props: (0, overrides_1.getCloseButtonProps)(utils, sharedProps, locale.modal.closeAriaLabel),
         },
     }, overrides, [overrides, theme]);
     return ((0, jsx_runtime_1.jsx)(styled_components_1.StyledModal, (0, tslib_1.__assign)({}, props, { size: (0, adapter_1.getWidthFromSize)(utils, size), role: adapter_1.roleMap[role], overrides: _overrides }), void 0));

package/modal/overrides.d.ts

@@ -3,6 +3,6 @@ import { Styles, StyleUtils } from '../types';
 import { SharedProps } from './types';
 export declare const getDialogContainerStyles: Styles;
 export declare const getDialogStyles: Styles;
-export declare const getCloseButtonProps: ({ px2rem, direction, theme }: StyleUtils, { $dialogSize }: {
+export declare const getCloseButtonProps: ({ px2rem, theme }: StyleUtils, { $dialogSize }: {
     $dialogSize: SharedProps['$size'];
-}) => IconButtonProps;
+}, ariaLabel: string) => IconButtonProps;

package/modal/overrides.js

@@ -41,16 +41,15 @@ exports.getDialogStyles = [
     getDialogHeightControl,
     transitionDuration,
 ];
-var getCloseButtonProps = function (_a, _b) {
-    var _c;
-    var px2rem = _a.px2rem, direction = _a.direction, theme = _a.theme;
+var getCloseButtonProps = function (_a, _b, ariaLabel) {
+    var px2rem = _a.px2rem, theme = _a.theme;
     var $dialogSize = _b.$dialogSize;
-    var buttonDirection = direction === 'rtl' ? 'left' : 'right';
-    return {
+    return ({
         size: 'sm',
+        'aria-label': ariaLabel,
         overrides: {
             BaseButton: {
-                style: (0, tslib_1.__assign)((_c = { position: 'absolute', top: px2rem(16) }, _c[buttonDirection] = px2rem(20), _c), ($dialogSize === 'fullPage'
+                style: (0, tslib_1.__assign)({ position: 'absolute', top: px2rem(12), right: px2rem(16) }, ($dialogSize === 'fullPage'
                     ? {
                         top: px2rem(-44),
                         right: px2rem(0),
@@ -65,6 +64,6 @@ var getCloseButtonProps = function (_a, _b) {
                     : {})),
             },
         },
-    };
+    });
 };
 exports.getCloseButtonProps = getCloseButtonProps;

package/modal/styled-components.js

@@ -21,19 +21,19 @@ exports.StyledModal = (0, withThemeOverride_1.default)(modal_1.Modal, function (
         contentSecondary: theme.spr.text02,
     },
 }); });
-exports.StyledModalHeader = (0, style_1.styled)('div', 'typography-h4 spr-text-01 font-bold border-t-0 border-r-0 border-l-0', function (_a, _b) {
+exports.StyledModalHeader = (0, style_1.styled)('div', 'typography-h4 spr-text-01 font-bold border-t-0 border-r-0 border-l-0 pt-4 px-6', 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');
+    return ($noBorder ? 'pb-0' : 'border-b-1 border-solid spr-border-02 pb-4');
 });
-exports.ModalBody = (0, style_1.styled)('div', 'typography-bl1 spr-text-01 overflow-auto flex-grow');
-exports.StyledModalFooter = (0, style_1.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' });
+exports.ModalBody = (0, style_1.styled)('div', 'typography-bl1 spr-text-01 overflow-auto flex-grow px-6 py-4');
+exports.StyledModalFooter = (0, style_1.styled)('div', 'border-b-0 border-l-0 border-r-0 pb-4 px-6', function (_a) {
+    var px2rem = _a.px2rem;
+    return ({ lineHeight: px2rem(28), textAlign: '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');
+    return ($noBorder ? 'pt-0' : 'border-t-1 border-solid spr-border-02 pt-4');
 });

package/number/Number.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { NumberProps } from './types';
+export declare const Number: ({ value, variant, numberOptions }: NumberProps) => JSX.Element;

package/number/Number.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Number = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+//hooks
+var useNumber_1 = require("./useNumber");
+//constants
+var constants_1 = require("./constants");
+var Number = function (_a) {
+    var value = _a.value, _b = _a.variant, variant = _b === void 0 ? constants_1.DEFAULT_VARIANT : _b, numberOptions = _a.numberOptions;
+    var formattedNumber = (0, useNumber_1.useNumber)({ value: value, variant: variant, numberOptions: numberOptions });
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: formattedNumber }, void 0);
+};
+exports.Number = Number;

package/number/constants.d.ts

@@ -0,0 +1,2 @@
+import { CompactAutoFormat } from '../utils/intlNumberFormatUtils/types';
+export declare const DEFAULT_VARIANT: CompactAutoFormat;

package/number/constants.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_VARIANT = void 0;
+var types_1 = require("../utils/intlNumberFormatUtils/types");
+exports.DEFAULT_VARIANT = {
+    type: types_1.NUMBER_VARIANTS.COMPACT_AUTO_FORMAT,
+};

package/number/index.d.ts

@@ -0,0 +1,5 @@
+export { Number } from './Number';
+export { useNumber } from './useNumber';
+export { getFormattedNumber } from '../utils/intlNumberFormatUtils';
+export * from './types';
+export * from '../utils/intlNumberFormatUtils/types';

package/number/index.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getFormattedNumber = exports.useNumber = exports.Number = void 0;
+var tslib_1 = require("tslib");
+var Number_1 = require("./Number");
+Object.defineProperty(exports, "Number", { enumerable: true, get: function () { return Number_1.Number; } });
+var useNumber_1 = require("./useNumber");
+Object.defineProperty(exports, "useNumber", { enumerable: true, get: function () { return useNumber_1.useNumber; } });
+var intlNumberFormatUtils_1 = require("../utils/intlNumberFormatUtils");
+Object.defineProperty(exports, "getFormattedNumber", { enumerable: true, get: function () { return intlNumberFormatUtils_1.getFormattedNumber; } });
+(0, tslib_1.__exportStar)(require("./types"), exports);
+(0, tslib_1.__exportStar)(require("../utils/intlNumberFormatUtils/types"), exports);

package/number/package.json

@@ -0,0 +1,4 @@
+{
+  "sideEffects": false,
+  "module": "../esm/number/index.js"
+}

package/number/types.d.ts

@@ -0,0 +1,6 @@
+import { NumberVariant } from '../utils/intlNumberFormatUtils/types';
+export declare type NumberProps = {
+    value: number;
+    variant?: NumberVariant;
+    numberOptions?: Intl.NumberFormatOptions;
+};

package/number/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/number/useNumber.d.ts

@@ -0,0 +1,2 @@
+import { NumberProps } from './types';
+export declare const useNumber: ({ value, variant, numberOptions }: NumberProps) => string;

package/number/useNumber.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useNumber = void 0;
+var locale_1 = require("../locale");
+var intlNumberFormatUtils_1 = require("../utils/intlNumberFormatUtils");
+var constants_1 = require("./constants");
+var useNumber = function (_a) {
+    var value = _a.value, _b = _a.variant, variant = _b === void 0 ? constants_1.DEFAULT_VARIANT : _b, numberOptions = _a.numberOptions;
+    var langCode = (0, locale_1.useLocale)().langCode;
+    return (0, intlNumberFormatUtils_1.getFormattedNumber)({ value: value, locale: langCode, variant: variant, numberOptions: numberOptions });
+};
+exports.useNumber = useNumber;

package/overrides/index.d.ts

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

package/overrides/index.js

@@ -1,10 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getOverrides = exports.useOverrides = exports.mergeOverrides = void 0;
+exports.getOverrides = exports.useOverrides = exports.mergeOverride = exports.mergeOverrides = void 0;
 var tslib_1 = require("tslib");
 (0, tslib_1.__exportStar)(require("./types"), exports);
 var mergeOverrides_1 = require("./mergeOverrides");
 Object.defineProperty(exports, "mergeOverrides", { enumerable: true, get: function () { return mergeOverrides_1.mergeOverrides; } });
+Object.defineProperty(exports, "mergeOverride", { enumerable: true, get: function () { return mergeOverrides_1.mergeOverride; } });
 var useOverrides_1 = require("./useOverrides");
 Object.defineProperty(exports, "useOverrides", { enumerable: true, get: function () { return useOverrides_1.useOverrides; } });
 Object.defineProperty(exports, "getOverrides", { enumerable: true, get: function () { return useOverrides_1.getOverrides; } });

package/overrides/mergeOverrides.d.ts

@@ -1,3 +1,4 @@
-import { Overrides, OverridesObject } from './types';
+import { Override, OverrideObject, Overrides, OverridesObject } from './types';
+declare const mergeOverride: <T>(_target?: Override<T> | undefined, _source?: Override<T> | undefined) => OverrideObject<T>;
 declare const mergeOverrides: <T>(target: Overrides<T>, source?: Overrides<T>) => OverridesObject<T>;
-export { mergeOverrides };
+export { mergeOverrides, mergeOverride };

package/overrides/mergeOverrides.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.mergeOverrides = void 0;
+exports.mergeOverride = exports.mergeOverrides = void 0;
 var tslib_1 = require("tslib");
 var react_1 = require("react");
 var react_is_1 = require("react-is");
@@ -35,6 +35,7 @@ var mergeOverride = function (_target, _source) {
     }
     return merged;
 };
+exports.mergeOverride = mergeOverride;
 var mergeOverrides = function (target, source) {
     if (source === void 0) { source = {}; }
     var allIdentifiers = Object.keys((0, tslib_1.__assign)((0, tslib_1.__assign)({}, target), source));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sprinklrjs/spaceweb",
-  "version": "11.0.0",
-  "description": "A React Component library implementing Sprinklr's Hyperspace design language",
+  "version": "12.14.4",
+  "description": "Components for SpaceWeb",
   "main": "index.js",
   "module": "./esm/index.js",
   "scripts": {
@@ -39,7 +39,10 @@
     "styletron-react": "~6.1.0",
     "timezone-support": "2.0.2",
     "tslib": "^2.4.0",
-    "react-is": "^17.0.2"
+    "react-is": "^17.0.2",
+    "date-fns": "^2.6.0",
+    "date-fns-tz": "^1.2.2",
+    "react-uid": "^2.3.3"
   },
   "devDependencies": {
     "@babel/cli": "^7.6.0",
@@ -77,7 +80,7 @@
     "ts-jest": "^26.5.6"
   },
   "peerDependencies": {
-    "@sprinklrjs/spaceweb-themes": "11.0.1",
+    "@sprinklrjs/spaceweb-themes": "12.14.4",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
@@ -102,4 +105,4 @@
       "^@sprinklrjs/spaceweb-themes/(.*)$": "<rootDir>/../spaceweb-themes/dist/$1"
     }
   }
-}
+}

package/payment-card/basewebAdapters.d.ts

@@ -1,7 +1,9 @@
 import { PaymentCardOverrides as BasePaymentCardOverrides } from 'baseui/payment-card';
 import { PaymentCardProps, StatefulPaymentCardProps } from './types';
 declare type AdapterProps = Omit<PaymentCardProps | StatefulPaymentCardProps, 'autoFocus'>;
+declare type BaseWebCardSize = 'default' | 'mini' | 'compact';
 declare const usePaymentCardBasewebAdapter: (props: AdapterProps) => Omit<AdapterProps, 'size' | 'variant' | 'className' | 'overrides' | 'style' | 'intent'> & {
     overrides?: BasePaymentCardOverrides;
+    size: BaseWebCardSize;
 };
 export default usePaymentCardBasewebAdapter;

package/payment-card/basewebAdapters.js

@@ -7,9 +7,31 @@ var basewebAdapters_1 = (0, tslib_1.__importDefault)(require("../input/basewebAd
 var styled_components_1 = require("./styled-components");
 var helpers_1 = require("../helpers");
 var overrides_1 = require("../overrides");
+var input_1 = require("baseui/input");
+var themeHelpers_1 = require("../helpers/themeHelpers");
+var style_1 = require("../style/");
+var getBasewebPaymentCardSizeMap = function (_size) {
+    switch (_size) {
+        case 'lg':
+            return input_1.SIZE.default;
+        case 'md':
+            return input_1.SIZE.default;
+        case 'sm':
+            return input_1.SIZE.compact;
+        case 'xs':
+            return input_1.SIZE.compact;
+        case 'xxxs':
+            return input_1.SIZE.mini;
+        default:
+            return input_1.SIZE.default;
+    }
+};
 var usePaymentCardBasewebAdapter = function (props) {
+    var _a, _b;
     var contextualProps = (0, context_1.useContextualFormProps)(props);
     var sharedProps = (0, helpers_1.add$props)((0, pick_1.default)(contextualProps, ['size', 'variant', 'intent']));
+    var theme = (0, style_1.useStyle)().theme;
+    var _size = (_b = (_a = contextualProps.size) !== null && _a !== void 0 ? _a : sharedProps.$size) !== null && _b !== void 0 ? _b : (0, themeHelpers_1.getDefaultSize)(theme);
     var basePaymentCardStyles = {
         Input: {
             style: { paddingLeft: '0px' },
@@ -20,6 +42,6 @@ var usePaymentCardBasewebAdapter = function (props) {
         },
     };
     var adaptedProps = (0, basewebAdapters_1.default)((0, tslib_1.__assign)((0, tslib_1.__assign)({}, contextualProps), { overrides: (0, overrides_1.mergeOverrides)(basePaymentCardStyles, contextualProps.overrides) }));
-    return adaptedProps;
+    return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, adaptedProps), { size: getBasewebPaymentCardSizeMap(_size) });
 };
 exports.default = usePaymentCardBasewebAdapter;

package/payment-card/styled-components.js

@@ -1,16 +1,35 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getIconWrapperStyles = void 0;
+var tslib_1 = require("tslib");
 var themeHelpers_1 = require("../helpers/themeHelpers");
+// todo: fix this and derive from input styles
+var SIZES_STYLES_MAP = {
+    xxxs: {
+        height: '22px',
+    },
+    xs: {
+        height: '30px',
+    },
+    sm: {
+        height: '34px',
+    },
+    md: {
+        height: '38px',
+    },
+    lg: {
+        height: '38px',
+    },
+};
 var getIconWrapperStyles = function (_a, _b) {
     var theme = _a.theme;
     var $size = _b.$size;
-    var styles = {
-        marginLeft: '',
-        marginRight: '',
-    };
-    var inputSizeTheme = (0, themeHelpers_1.getComponentSizeTheme)(theme, 'input', $size, 'md');
+    var styles = (0, tslib_1.__assign)({ marginLeft: '', marginRight: '', lineHeight: '', fontSize: '', borderRadius: '' }, SIZES_STYLES_MAP[$size]);
+    var inputSizeTheme = (0, themeHelpers_1.getComponentSizeTheme)(theme, 'input', $size, (0, themeHelpers_1.getDefaultSize)(theme));
     styles.marginLeft = styles.marginRight = inputSizeTheme.paddingX;
+    styles.fontSize = inputSizeTheme.fontSize;
+    styles.lineHeight = inputSizeTheme.lineHeight;
+    styles.borderRadius = (inputSizeTheme === null || inputSizeTheme === void 0 ? void 0 : inputSizeTheme.borderRadius) || theme.input.borderRadius;
     return styles;
 };
 exports.getIconWrapperStyles = getIconWrapperStyles;

package/phone-input/country-select-container.js

@@ -12,6 +12,6 @@ var CountrySelectContainer = function (props) {
     var _a = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.CountrySelectContainer, styled_components_1.StyledCountrySelectContainer), 2), CountrySelectComponent = _a[0], countrySelectContainerProps = _a[1];
     var countrySelectProps = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, props), { overrides: (0, pick_1.default)(overrides, ['CountrySelect', 'FlagContainer']) });
     var dialCodeProps = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, (0, pick_1.default)(props, ['size', 'value'])), { overrides: (0, pick_1.default)(overrides, ['DialCode']) });
-    return ((0, jsx_runtime_1.jsxs)(CountrySelectComponent, (0, tslib_1.__assign)({}, countrySelectContainerProps, { children: [(0, jsx_runtime_1.jsx)(country_select_1.default, (0, tslib_1.__assign)({}, countrySelectProps), void 0), (0, jsx_runtime_1.jsx)(dial_code_1.default, (0, tslib_1.__assign)({}, dialCodeProps), void 0)] }), void 0));
+    return ((0, jsx_runtime_1.jsxs)(CountrySelectComponent, (0, tslib_1.__assign)({ dir: "ltr" }, countrySelectContainerProps, { children: [(0, jsx_runtime_1.jsx)(country_select_1.default, (0, tslib_1.__assign)({}, countrySelectProps), void 0), (0, jsx_runtime_1.jsx)(dial_code_1.default, (0, tslib_1.__assign)({}, dialCodeProps), void 0)] }), void 0));
 };
 exports.default = CountrySelectContainer;