@sprinklrjs/spaceweb 10.1.0 → 12.0.0-ci.0

package/list/list.d.ts

@@ -1,12 +1,18 @@
-/// <reference types="react" />
-declare const _default: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<import("react").AllHTMLAttributes<HTMLElement>, "style" | "className"> & {
-    $as?: import("react").ElementType<any> | undefined;
+import * as React from 'react';
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<React.AllHTMLAttributes<HTMLElement>, "style" | "className"> & {
+    $as?: React.ElementType<any> | undefined;
     className?: import("..").Styles;
     style?: import("..").Styles;
 } & {
-    children?: import("react").ReactNode;
+    children?: React.ReactNode;
+    virtual?: boolean | undefined;
     overrides?: {
         Root?: import("../overrides").Override<Record<string, any>> | undefined;
     } | undefined;
-} & import("react").RefAttributes<HTMLElement>>>;
+    scrollElement?: HTMLElement | null | undefined;
+    overscanCount?: number | undefined;
+    estimateItemSize?: number | undefined;
+    autoScrollToSelectedItem?: boolean | undefined;
+    $showFocusOutline?: boolean | undefined;
+} & React.RefAttributes<HTMLElement>>>;
 export default _default;

package/list/list.js

@@ -2,13 +2,67 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
+var React = (0, tslib_1.__importStar)(require("react"));
+var react_virtual_1 = require("@tanstack/react-virtual");
 var overrides_1 = require("../overrides");
+var useCombinedRef_1 = (0, tslib_1.__importStar)(require("../hooks/useCombinedRef"));
 var styled_component_1 = require("./styled-component");
-var List = (0, react_1.forwardRef)(function (_a, ref) {
-    var _b = _a.overrides, overrides = _b === void 0 ? {} : _b, children = _a.children, restProps = (0, tslib_1.__rest)(_a, ["overrides", "children"]);
-    var _c = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides.Root, styled_component_1.StyledList), 2), Root = _c[0], rootProps = _c[1];
-    return ((0, jsx_runtime_1.jsx)(Root, (0, tslib_1.__assign)({ "data-spaceweb": "list", role: "list" }, restProps, rootProps, { ref: ref }, { children: children }), void 0));
+var box_1 = require("../box");
+var utils_1 = require("./utils");
+var constants_1 = require("./constants");
+var getCloneElement = function (item, virtualRow, totalCount) {
+    var _a, _b;
+    return React.cloneElement(item, {
+        className: [
+            'w-full absolute top-0 left-0 box-border',
+            { transform: "translateY(".concat(virtualRow.start, "px)") },
+            item.props.className,
+        ],
+        // @ts-ignore -- item.ref is not present in react types
+        ref: (0, useCombinedRef_1.combineRefs)(virtualRow.measureElement, item.ref),
+        'aria-posinset': (_a = item.props['aria-posinset']) !== null && _a !== void 0 ? _a : virtualRow.index + 1,
+        'aria-setsize': (_b = item.props['aria-setsize']) !== null && _b !== void 0 ? _b : totalCount,
+    });
+};
+var List = React.forwardRef(function (_a, forwardedRef) {
+    var _b = _a.overrides, overrides = _b === void 0 ? {} : _b, children = _a.children, virtual = _a.virtual, scrollElement = _a.scrollElement, _c = _a.overscanCount, overscanCount = _c === void 0 ? constants_1.DEFAULT_OVER_SCAN_COUNT : _c, _d = _a.estimateItemSize, estimateItemSize = _d === void 0 ? constants_1.DEFAULT_LIST_ITEM_HEIGHT : _d, _e = _a.role, role = _e === void 0 ? 'list' : _e, autoScrollToSelectedItem = _a.autoScrollToSelectedItem, restProps = (0, tslib_1.__rest)(_a, ["overrides", "children", "virtual", "scrollElement", "overscanCount", "estimateItemSize", "role", "autoScrollToSelectedItem"]);
+    var _f = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides.Root, styled_component_1.StyledList), 2), Root = _f[0], rootProps = _f[1];
+    var parentRef = React.useRef(null);
+    var combinedRef = (0, useCombinedRef_1.default)(parentRef, forwardedRef);
+    var childrenArr = React.Children.toArray(children);
+    var rowVirtualizer = (0, react_virtual_1.useVirtualizer)({
+        count: childrenArr.length,
+        getScrollElement: function () { return scrollElement || parentRef.current; },
+        estimateSize: function () { return estimateItemSize; },
+        overscan: overscanCount,
+        measureElement: utils_1.measureElement,
+    });
+    React.useEffect(function () {
+        if (!autoScrollToSelectedItem) {
+            return;
+        }
+        // using some for early return
+        childrenArr.some(function (listItem, index) {
+            if (listItem.props.selected) {
+                rowVirtualizer.scrollToIndex(index, { smoothScroll: false, align: 'start' });
+                return true;
+            }
+            return false;
+        });
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- scrollToIndex on mount only
+    }, []);
+    if (virtual) {
+        return ((0, jsx_runtime_1.jsx)(Root, (0, tslib_1.__assign)({ "data-spaceweb": "list", "$as": "div", role: role }, restProps, rootProps, { ref: combinedRef }, { children: (0, jsx_runtime_1.jsx)(box_1.Box
+            // NOTE: resetting margin and padding here. should be removed when normalize css merges
+            , (0, tslib_1.__assign)({ 
+                // NOTE: resetting margin and padding here. should be removed when normalize css merges
+                className: "w-full relative p-0 m-0", style: {
+                    height: "".concat(rowVirtualizer.getTotalSize(), "px"),
+                }, "$as": "ul" }, { children: rowVirtualizer
+                    .getVirtualItems()
+                    .map(function (virtualRow) { return getCloneElement(childrenArr[virtualRow.index], virtualRow, childrenArr.length); }) }), void 0) }), void 0));
+    }
+    return ((0, jsx_runtime_1.jsx)(Root, (0, tslib_1.__assign)({ "data-spaceweb": "list", role: role }, restProps, rootProps, { ref: combinedRef }, { children: children }), void 0));
 });
 List.displayName = 'List';
-exports.default = (0, react_1.memo)(List);
+exports.default = React.memo(List);

package/list/styled-component.d.ts

@@ -1,3 +1,4 @@
+export declare const LIST_MIN_WIDTH = 150;
 export declare const StyledList: import("../style/styled").StyledComponent;
 export declare const StyledListItem: import("../style/styled").StyledComponent;
 export declare const StyledListItemText: import("../style/styled").StyledComponent;

package/list/styled-component.js

@@ -1,15 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledChildContainer = exports.StyledEndEnhancer = exports.StyledStartEnhancer = exports.StyledListItemDivider = exports.StyledSecondaryText = exports.StyledPrimaryText = exports.StyledListItemText = exports.StyledListItem = exports.StyledList = void 0;
+exports.StyledChildContainer = exports.StyledEndEnhancer = exports.StyledStartEnhancer = exports.StyledListItemDivider = exports.StyledSecondaryText = exports.StyledPrimaryText = exports.StyledListItemText = exports.StyledListItem = exports.StyledList = exports.LIST_MIN_WIDTH = void 0;
 var tslib_1 = require("tslib");
 var classNames_1 = (0, tslib_1.__importDefault)(require("../classNames"));
 var longHandHelpers_1 = require("../helpers/longHandHelpers");
 var themeHelpers_1 = require("../helpers/themeHelpers");
 var style_1 = require("../style");
-// `pl-0 pr-0 mt-0 mb-0` should not be needed, normalize css is not applied to docs
-exports.StyledList = (0, style_1.styled)('ul', 'box-border spr-ui-01 pl-0 pr-0 mt-0 mb-0', function (_a) {
+exports.LIST_MIN_WIDTH = 150;
+exports.StyledList = (0, style_1.styled)('ul', 
+// bottom spacing will be added by ListItem
+'box-border spr-ui-01 py-1 px-1 my-0', (0, longHandHelpers_1.borderRadius)('inherit'), function (_a) {
     var px2rem = _a.px2rem;
-    return ((0, tslib_1.__assign)({ paddingTop: px2rem(10), paddingBottom: px2rem(10) }, (0, longHandHelpers_1.borderRadius)('inherit')));
+    return ({ minWidth: px2rem(exports.LIST_MIN_WIDTH) });
 }, function (_, _a) {
     var $showFocusOutline = _a.$showFocusOutline;
     return ($showFocusOutline ? 'focus-visible:outline-01' : '');
@@ -30,9 +32,16 @@ var backgroundColor = function (_a, _b) {
     }
     return styles;
 };
-exports.StyledListItem = (0, style_1.styled)('li', function (_a, props) {
-    var getStyle = _a.getStyle;
-    return getStyle((0, classNames_1.default)('relative flex justify-start py-2 px-4 typography-l1 fill-current spr-ui-01', {
+var getListItemCompactStyles = function (_a) {
+    var theme = _a.theme;
+    if (theme.density === 'COMPACT')
+        return 'py-1 px-2 typography-l2 rounded-4 mb-0.5 last-child:mb-0';
+    else
+        return 'py-1.5 px-2 typography-l1 rounded-6 mb-0.5 last-child:mb-0';
+};
+exports.StyledListItem = (0, style_1.styled)('li', getListItemCompactStyles, function (_a, props) {
+    var getStyle = _a.getStyle, theme = _a.theme;
+    return getStyle((0, classNames_1.default)('relative flex justify-start fill-current spr-ui-01', {
         'items-start': props.$alignItems === 'start',
         'items-center': props.$alignItems === 'center',
         'cursor-pointer': props.$button && !props.$disabled,
@@ -53,26 +62,23 @@ exports.StyledSecondaryText = (0, style_1.styled)('div', 'spr-text-02 typography
         marginTop: px2rem(2),
     });
 });
-exports.StyledListItemDivider = (0, style_1.styled)('li', 'block h-px spr-ui-03');
-exports.StyledStartEnhancer = (0, style_1.styled)('div', 'inline-flex', function (_a, props) {
-    var getStyle = _a.getStyle, direction = _a.direction;
+exports.StyledListItemDivider = (0, style_1.styled)('li', 'block h-px spr-ui-03 mb-0.5 last-child:mb-0');
+exports.StyledStartEnhancer = (0, style_1.styled)('div', 'inline-flex pr-2', function (_a, props) {
+    var getStyle = _a.getStyle;
     return getStyle((0, classNames_1.default)({
-        'pr-3': direction !== 'rtl',
-        'pl-3': direction === 'rtl',
         'mt-1': props.$alignItems === 'start',
     }));
 });
-exports.StyledEndEnhancer = (0, style_1.styled)('div', 'inline-flex', function (_a, props) {
-    var getStyle = _a.getStyle, direction = _a.direction;
+exports.StyledEndEnhancer = (0, style_1.styled)('div', 'inline-flex pl-2', function (_a, props) {
+    var getStyle = _a.getStyle;
     return getStyle((0, classNames_1.default)({
-        'pl-3': direction !== 'rtl',
-        'pr-3': direction === 'rtl',
         'mt-1': props.$alignItems === 'start',
     }));
 });
-exports.StyledChildContainer = (0, style_1.styled)('div', 'typography-l1 flex-auto', function (_a, props) {
-    var theme = _a.theme;
+exports.StyledChildContainer = (0, style_1.styled)('div', 'flex-auto', function (_a, props) {
+    var theme = _a.theme, px2rem = _a.px2rem;
     return ({
         fontWeight: props.$selected ? 700 : 400,
+        fontSize: px2rem(13),
     });
 });

package/list/types.d.ts

@@ -1,6 +1,7 @@
 import { KeyboardEvent, MouseEvent, ReactNode } from 'react';
 import { Override } from '../overrides/types';
 import { SpacewebComponentProps } from '../types';
+import { StatefulTooltipProps } from '../tooltip';
 export declare type AlignItems = 'start' | 'center';
 export declare type Enhancer<SharedProps> = ReactNode | ((props: SharedProps) => ReactNode);
 export declare type ListItemSharedProps = {
@@ -26,15 +27,23 @@ export declare type ListItemProps = SpacewebComponentProps & {
         EndEnhancer?: Override<ListItemSharedProps & Record<string, any>>;
         Root?: Override<ListItemSharedProps & Record<string, any>>;
         StartEnhancer?: Override<ListItemSharedProps & Record<string, any>>;
+        StatefulTooltip?: Override<ListItemSharedProps & Record<string, any>>;
     };
     selected?: boolean;
     startEnhancer?: Enhancer<ListItemSharedProps>;
+    tooltipContent?: StatefulTooltipProps['content'];
 };
 export declare type ListProps = SpacewebComponentProps & {
     children?: ReactNode;
+    virtual?: boolean;
     overrides?: {
         Root?: Override<Record<string, any>>;
     };
+    scrollElement?: HTMLElement | null;
+    overscanCount?: number;
+    estimateItemSize?: number;
+    autoScrollToSelectedItem?: boolean;
+    $showFocusOutline?: boolean;
 };
 export declare type ListItemTextProps = {
     children?: ReactNode;

package/list/utils.d.ts

@@ -0,0 +1,2 @@
+import type { measureElement as measureElementType } from '@tanstack/react-virtual';
+export declare const measureElement: typeof measureElementType;

package/list/utils.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.measureElement = void 0;
+var parseMeasurement = function (str) { return parseFloat(str) || 0; };
+// by default react-virtual uses getBoundingClientRect to calculate dimensions.
+// overriding it to use height + margin, so that we do not have to wrap each ListItem with another element
+var measureElement = function (element, instance) {
+    var elementStyle = window.getComputedStyle(element);
+    var marginX = parseMeasurement(elementStyle.marginLeft) + parseMeasurement(elementStyle.marginRight);
+    var marginY = parseMeasurement(elementStyle.marginTop) + parseMeasurement(elementStyle.marginBottom);
+    var boundingRect = element.getBoundingClientRect();
+    return instance.options.horizontal ? boundingRect.width + marginX : boundingRect.height + marginY;
+};
+exports.measureElement = measureElement;

package/loader/loader.d.ts

@@ -2,5 +2,7 @@
 import { LoaderProps } from './types';
 export declare const DEFAULT_SIZE = 16;
 export declare const DEFAULT_DELAY = 0;
-declare const Loader: import("react").ForwardRefExoticComponent<LoaderProps & import("react").RefAttributes<HTMLElement>>;
+declare const Loader: import("react").ForwardRefExoticComponent<LoaderProps & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;
 export default Loader;

package/loader/loader.js

@@ -4,6 +4,7 @@ exports.DEFAULT_DELAY = exports.DEFAULT_SIZE = void 0;
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
+var times_1 = (0, tslib_1.__importDefault)(require("lodash/times"));
 var typography_1 = require("../helpers/typography");
 var overrides_1 = require("../overrides");
 var typography_2 = require("../typography");
@@ -14,10 +15,18 @@ var Loader = (0, react_1.forwardRef)(function (_a, ref) {
     var _b = _a.delay, delay = _b === void 0 ? exports.DEFAULT_DELAY : _b, loadingContent = _a.loadingContent, _c = _a.variant, variant = _c === void 0 ? 'beat' : _c, _d = _a.size, size = _d === void 0 ? exports.DEFAULT_SIZE : _d, overrides = _a.overrides, restProps = (0, tslib_1.__rest)(_a, ["delay", "loadingContent", "variant", "size", "overrides"]);
     // should be visible from start if delay is 0
     var _e = (0, tslib_1.__read)((0, react_1.useState)(!delay), 2), visible = _e[0], updateVisibleState = _e[1];
+    var LoaderComponent;
+    if (variant === 'beat')
+        LoaderComponent = styled_component_1.StyledBeatLoader;
+    else if (variant === 'clip')
+        LoaderComponent = styled_component_1.StyledClipLoader;
+    else
+        LoaderComponent = styled_component_1.StyledSpinner;
     var _f = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Root, styled_component_1.StyledRoot), 2), Root = _f[0], rootProps = _f[1];
     var _g = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Text, typography_2.Typography), 2), Text = _g[0], textProps = _g[1];
-    var _h = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Loader, variant === 'beat' ? styled_component_1.StyledBeatLoader : styled_component_1.StyledClipLoader), 2), LoaderInternal = _h[0], loaderProps = _h[1];
+    var _h = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Loader, LoaderComponent), 2), LoaderInternal = _h[0], loaderProps = _h[1];
     var _j = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.BeatLoaderBall, styled_component_1.StyledBeatLoaderBall), 2), BeatLoaderBall = _j[0], beatLoaderBallProps = _j[1];
+    var _k = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.SpinnerStick, styled_component_1.StyledSpinnerStick), 2), SpinnerStick = _k[0], spinnerStickProps = _k[1];
     (0, react_1.useEffect)(function () {
         var delayTimer;
         if (delay) {
@@ -35,7 +44,7 @@ var Loader = (0, react_1.forwardRef)(function (_a, ref) {
         ? loadingContent
         : loadingContent && ((0, jsx_runtime_1.jsx)(Text, (0, tslib_1.__assign)({ variant: "bs3" }, sharedProps, textProps, { className: [textProps.className, 'spr-text-02 mt-1'] }, { children: loadingContent }), void 0));
     // todo: aria-label localization
-    return visible ? ((0, jsx_runtime_1.jsxs)(Root, (0, tslib_1.__assign)({ "data-spaceweb": "loader", "data-testid": "loader" }, sharedProps, restProps, rootProps, { ref: ref }, { children: [(0, jsx_runtime_1.jsx)(LoaderInternal, (0, tslib_1.__assign)({ "aria-label": "Loading", role: "progressbar", "aria-busy": true }, sharedProps, loaderProps, { children: variant === 'beat' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(BeatLoaderBall, (0, tslib_1.__assign)({}, sharedProps, { "$index": 1 }, beatLoaderBallProps), void 0), (0, jsx_runtime_1.jsx)(BeatLoaderBall, (0, tslib_1.__assign)({}, sharedProps, { "$index": 2 }, beatLoaderBallProps), void 0), (0, jsx_runtime_1.jsx)(BeatLoaderBall, (0, tslib_1.__assign)({}, sharedProps, { "$index": 3 }, beatLoaderBallProps), void 0)] }, void 0)) }), void 0), content] }), void 0)) : null;
+    return visible ? ((0, jsx_runtime_1.jsxs)(Root, (0, tslib_1.__assign)({ "data-spaceweb": "loader", "data-testid": "loader" }, sharedProps, restProps, rootProps, { ref: ref }, { children: [(0, jsx_runtime_1.jsxs)(LoaderInternal, (0, tslib_1.__assign)({ "aria-label": "Loading", role: "progressbar", "aria-busy": true }, sharedProps, loaderProps, { children: [variant === 'beat' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(BeatLoaderBall, (0, tslib_1.__assign)({}, sharedProps, { "$index": 1 }, beatLoaderBallProps), void 0), (0, jsx_runtime_1.jsx)(BeatLoaderBall, (0, tslib_1.__assign)({}, sharedProps, { "$index": 2 }, beatLoaderBallProps), void 0), (0, jsx_runtime_1.jsx)(BeatLoaderBall, (0, tslib_1.__assign)({}, sharedProps, { "$index": 3 }, beatLoaderBallProps), void 0)] }, void 0)), variant === 'spinner' && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, times_1.default)(8).map(function (index) { return ((0, jsx_runtime_1.jsx)(SpinnerStick, (0, tslib_1.__assign)({}, sharedProps, { "$index": index + 1 }, spinnerStickProps), index)); }) }, void 0))] }), void 0), content] }), void 0)) : null;
 });
 Loader.displayName = 'Loader';
 exports.default = Loader;

package/loader/styled-component.d.ts

@@ -2,3 +2,5 @@ export declare const StyledRoot: import("../style/styled").StyledComponent;
 export declare const StyledClipLoader: import("../style/styled").StyledComponent;
 export declare const StyledBeatLoader: import("../style/styled").StyledComponent;
 export declare const StyledBeatLoaderBall: import("../style/styled").StyledComponent;
+export declare const StyledSpinner: import("../style/styled").StyledComponent;
+export declare const StyledSpinnerStick: import("../style/styled").StyledComponent;

package/loader/styled-component.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledBeatLoaderBall = exports.StyledBeatLoader = exports.StyledClipLoader = exports.StyledRoot = void 0;
+exports.StyledSpinnerStick = exports.StyledSpinner = exports.StyledBeatLoaderBall = exports.StyledBeatLoader = exports.StyledClipLoader = exports.StyledRoot = void 0;
 var tslib_1 = require("tslib");
 var longHandHelpers_1 = require("../helpers/longHandHelpers");
 var style_1 = require("../style");
@@ -59,3 +59,64 @@ exports.StyledBeatLoaderBall = (0, style_1.styled)('div', 'spr-tooltip-01 rounde
         marginRight: px2rem(2),
     };
 });
+var spinnerAnimationStyles = function (_, _a) {
+    var $index = _a.$index;
+    return ({
+        animationDuration: '1000ms',
+        animationDelay: "".concat($index * 125, "ms"),
+        animationIterationCount: 'infinite',
+        animationTimingFunction: 'step-start',
+        // @ts-ignore animationName can be an object https://www.styletron.org/concepts/#keyframes
+        animationName: {
+            '10%': {
+                opacity: 0.125,
+            },
+            '100%': {
+                opacity: 1,
+            },
+        },
+    });
+};
+var spinnerStyles = function (utils, props) {
+    var px2rem = utils.px2rem;
+    var $size = props.$size, index = props.$index;
+    var radius = $size / 2;
+    var stickHeight = radius / 2;
+    var stickWidth = radius / 4;
+    var stickHeightOffset = stickHeight / 2;
+    var stickWidthOffset = stickWidth / 2;
+    // Adjust the baseRadius to be the radius minus the stick width
+    var baseRadius = radius - stickWidth;
+    // Calculate the angle in degrees
+    var angle = (index - 1) * 45;
+    // Calculate the x and y offsets based on the adjusted baseRadius
+    var yOffset = Math.sin((Math.PI * angle) / 180) * baseRadius;
+    var xOffset = Math.cos((Math.PI * angle) / 180) * baseRadius;
+    return {
+        top: px2rem(radius + yOffset - stickHeightOffset),
+        left: px2rem(radius + xOffset - stickWidthOffset),
+        transform: "rotate(".concat(angle + 90, "deg)"),
+    };
+};
+exports.StyledSpinner = (0, style_1.styled)('div', function (utils, props) {
+    var px2rem = utils.px2rem;
+    var $size = props.$size;
+    return {
+        height: px2rem($size),
+        width: px2rem($size),
+        position: 'relative',
+    };
+});
+exports.StyledSpinnerStick = (0, style_1.styled)('div', 'box-border spr-tooltip-01', spinnerStyles, spinnerAnimationStyles, function (utils, props) {
+    var px2rem = utils.px2rem;
+    var $size = props.$size;
+    var radius = $size / 2;
+    var stickHeight = radius / 2;
+    var stickWidth = radius / 4;
+    return {
+        height: px2rem(stickHeight),
+        width: px2rem(stickWidth),
+        borderRadius: px2rem(16),
+        position: 'absolute',
+    };
+});

package/loader/types.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Override } from '../overrides';
 import { ClassName } from '../types';
-export declare type Variant = 'clip' | 'beat';
+export declare type Variant = 'clip' | 'beat' | 'spinner';
 export declare type SharedProps = {
     $variant: Variant;
     $hasLoadingContent: boolean;
@@ -19,5 +19,6 @@ export declare type LoaderProps = {
         Text?: Override<SharedProps & Record<string, any>>;
         Loader?: Override<SharedProps & Record<string, any>>;
         BeatLoaderBall?: Override<SharedProps & Record<string, any>>;
+        SpinnerStick?: Override<SharedProps & Record<string, any>>;
     };
 };

package/locale/context.d.ts

@@ -10,7 +10,7 @@ export declare const LocaleProvider: {
     (props: {
         children?: React.ReactNode;
         locale?: DeepPartial<Locale>;
-    }): JSX.Element;
+    }): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export {};

package/locale/en_US.js

@@ -2,9 +2,24 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DEFAULT_LOCALE = void 0;
 exports.DEFAULT_LOCALE = {
+    colorPicker: {
+        resetButtonLabel: 'Reset Color',
+        colorLibraryLabel: 'Color Library',
+        solidColorLabel: 'Solid Color',
+        gradientColorLabel: 'Gradient Color',
+        selectColorLabel: 'Select Color',
+    },
     select: {
         noResultsMsg: 'No Results',
         selectAllLabel: 'Select All',
+        hideButtonAriaLabel: 'Hide',
+        create: 'Create',
+        selectPlaceholder: 'Select...',
+        clearOptionLabel: 'Unassign',
+        selectedValuesPrefix: 'Selected ${values}',
+        item: 'item',
+        items: 'items',
+        collapsibleMenuDescription: 'You are currently using a collapsible grouped menu. To move to next group press Shift and down arrow. To move to previous group press Shift and up arrow.',
     },
     asyncSelect: {
         searchingText: 'Searching',
@@ -15,9 +30,22 @@ exports.DEFAULT_LOCALE = {
         dateInputStartLabel: 'Start Date',
         timePickerEndLabel: 'End Time',
         dateInputEndLabel: 'End Date',
+        calendarButtonAriaLabel: 'Open Calendar',
     },
     datePicker: {
+        ariaLabelCalendar: 'Calendar.',
         popoverAriaLabel: 'Select a date',
+        nextMonth: 'Next Month',
+        previousMonth: 'Previous Month',
+        timezonePickerLabel: 'Timezone',
+        timezonePickerPlaceholder: 'Select a timezone',
+        ariaRoleDescCalMonth: 'Calendar Month',
+        selectedStartDateLabel: 'Selected start date',
+        selectedEndDateLabel: 'Selected end date',
+        dateNotAvailableLabel: 'Not available',
+        dateAvailableLabel: "It's available",
+        selectedLabel: 'Selected',
+        chooseLabel: 'Choose',
     },
     timeRangePicker: {
         today: 'Today',
@@ -59,6 +87,11 @@ exports.DEFAULT_LOCALE = {
         rangeErrorMsg: 'Please select valid range.',
         presetMenuAriaLabel: 'Select a duration',
         popoverAriaLabel: 'Select a date range',
+        maxDateErrorMessage: 'Please select a date earlier than ${maxDate}',
+        minDateErrorMessage: 'Please select a date later than ${minDate}',
+        minMaxDateErrorMessage: 'Please select a date range between ${minDate} & ${maxDate}',
+        timePickerAriaLabel12Hour: 'Select a time, 12-hour format.',
+        timePickerAriaLabel24Hour: 'Select a time, 24-hour format.',
     },
     phoneInput: {
         countrySelectPlaceholder: 'Search',
@@ -66,6 +99,32 @@ exports.DEFAULT_LOCALE = {
         flagContainerAriaLabel: 'Press the enter key to navigate country select dropdown. Press the up or down arrow key to interact with the dropdown and select a country. Press the escape button to close the dropdown.',
     },
     menu: {
-        nestedMenuItemAriaLabel: 'You are currently at an item that opens a nested menu. Press right arrow or spacebar to enter that element and left arrow or escape to return.',
+        nestedMenuItemAriaDescription: 'You are currently at an item that opens a nested menu. Press right arrow or spacebar to enter that element and left arrow or escape to return.',
+    },
+    banner: {
+        toggleButtonShowLabel: 'Show',
+        toggleButtonHideLabel: 'Hide',
+        toggleButtonShowAriaLabel: 'Show Alerts',
+        toggleButtonHideAriaLabel: 'Hide Alerts',
+    },
+    input: {
+        clearAriaLabel: 'Clear Value',
+    },
+    modal: {
+        closeAriaLabel: 'Close Modal',
+    },
+    snackbar: {
+        closeAriaLabel: 'Hide Snackbar',
+    },
+    tag: {
+        closeAriaLabel: 'Remove Tag',
+    },
+    search: {
+        searchPlaceholder: 'Search',
+    },
+    accordion: {
+        collapse: 'Collapse',
+        expand: 'Expand',
     },
+    langCode: 'en-US',
 };

package/locale/types.d.ts

@@ -1,10 +1,13 @@
-import { TimeRangePickerLocale } from '../time-range-picker';
-import { SelectLocale } from '../select';
-import { AsyncSelectLocale } from '../asyncSelect';
-import { PhoneInputLocale } from '../phone-input';
-import { DatePickerLocale } from '../date-picker/locale';
+import type { TimeRangePickerLocale } from '../time-range-picker/locale';
+import type { SelectLocale } from '../select/locale';
+import type { AsyncSelectLocale } from '../asyncSelect/locale';
+import type { PhoneInputLocale } from '../phone-input/locale';
+import type { DatePickerLocale } from '../date-picker/locale';
+import type { BannerLocale } from '../banner/locale';
+import type { ColorPickerLocale } from '../color-picker/locale';
 export declare type Locale = {
     select: SelectLocale;
+    colorPicker: ColorPickerLocale;
     asyncSelect: AsyncSelectLocale;
     datePicker: DatePickerLocale;
     timeRangePicker: TimeRangePickerLocale;
@@ -14,8 +17,30 @@ export declare type Locale = {
         dateInputStartLabel: string;
         timePickerEndLabel: string;
         dateInputEndLabel: string;
+        calendarButtonAriaLabel: string;
     };
     menu: {
-        nestedMenuItemAriaLabel: string;
+        nestedMenuItemAriaDescription: string;
     };
+    banner: BannerLocale;
+    input: {
+        clearAriaLabel: string;
+    };
+    modal: {
+        closeAriaLabel: string;
+    };
+    snackbar: {
+        closeAriaLabel: string;
+    };
+    tag: {
+        closeAriaLabel: string;
+    };
+    search: {
+        searchPlaceholder: string;
+    };
+    accordion: {
+        collapse: string;
+        expand: string;
+    };
+    langCode: string;
 };

package/menu/MenuContext.d.ts

@@ -1,9 +1,10 @@
 /// <reference types="react" />
 declare type MenuContextValue = {
     highlightedItem: HTMLElement | null;
-    setHighlightedItem: (item: HTMLElement | null) => void;
+    setHighlightedItem: (item: HTMLElement | null, showFocusVisibleStyles?: boolean) => void;
     setMenuContainerRef: (ref: HTMLElement | null) => void;
     nestedMenuOpen: boolean;
+    listItemFocusVisible: boolean;
     setNestedMenuOpen: (open: boolean) => void;
 };
 export declare const MenuProvider: import("react").Provider<MenuContextValue>;

package/menu/MenuContext.js

@@ -7,6 +7,7 @@ var MenuContext = (0, react_1.createContext)({
     setHighlightedItem: function () { return null; },
     setMenuContainerRef: function () { return null; },
     nestedMenuOpen: false,
+    listItemFocusVisible: false,
     setNestedMenuOpen: function () { return null; },
 });
 exports.MenuProvider = MenuContext.Provider;

package/menu/helpers.d.ts

@@ -1,8 +1,15 @@
-import { Reducer } from './types';
+import { Reducer, TraversalFunction } from './types';
+export declare const nextItem: TraversalFunction;
+export declare const prevItem: TraversalFunction;
 /**
  * Checks if given item can be highlighted
  */
 export declare const canHighlightItem: (item?: HTMLElement | null | undefined) => boolean;
+/**
+ * https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/MenuList/MenuList.js
+ * Get index of next element which is not disabled
+ */
+export declare const getNextItemIndexToHighlight: (highlightedItem: HTMLElement | null, parentContainer: HTMLElement, traversalFunction: TraversalFunction) => HTMLElement | null;
 export declare const getFirstHighlightableElement: (listItemsContainerRef: HTMLElement) => {
     firstHighlightableItem: HTMLElement | null;
     firstSelectedItem: HTMLElement | null;

package/menu/helpers.js

@@ -1,14 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getNextHighlightedItem = exports.defaultReducer = exports.getFirstHighlightableElement = exports.canHighlightItem = void 0;
+exports.getNextHighlightedItem = exports.defaultReducer = exports.getFirstHighlightableElement = exports.getNextItemIndexToHighlight = exports.canHighlightItem = exports.prevItem = exports.nextItem = void 0;
 var nextItem = function (highlightedItem, parentContainer) {
     var _a;
     if (highlightedItem) {
         return ((_a = highlightedItem === null || highlightedItem === void 0 ? void 0 : highlightedItem.nextElementSibling) !== null && _a !== void 0 ? _a : highlightedItem);
     }
-    return parentContainer.firstElementChild;
+    return parentContainer === null || parentContainer === void 0 ? void 0 : parentContainer.firstElementChild;
 };
+exports.nextItem = nextItem;
 var prevItem = function (highlightedItem) { var _a; return ((_a = highlightedItem === null || highlightedItem === void 0 ? void 0 : highlightedItem.previousElementSibling) !== null && _a !== void 0 ? _a : highlightedItem); };
+exports.prevItem = prevItem;
 /**
  * Checks if given item can be highlighted
  */
@@ -32,6 +34,7 @@ var getNextItemIndexToHighlight = function (highlightedItem, parentContainer, tr
     }
     return highlightedItem;
 };
+exports.getNextItemIndexToHighlight = getNextItemIndexToHighlight;
 var getFirstHighlightableElement = function (listItemsContainerRef) {
     var _a;
     var childItem = (_a = listItemsContainerRef.firstElementChild) !== null && _a !== void 0 ? _a : null, firstHighlightableItem = null, firstSelectedItem = null;
@@ -53,11 +56,11 @@ var getNextHighlightedItem = function (event, highlightedItem, parentContainer)
         case 'ArrowDown':
         case 'End':
             event.preventDefault(); // prevent body scroll
-            return getNextItemIndexToHighlight(highlightedItem, parentContainer, nextItem);
+            return (0, exports.getNextItemIndexToHighlight)(highlightedItem, parentContainer, exports.nextItem);
         case 'ArrowUp':
         case 'Home':
             event.preventDefault();
-            return getNextItemIndexToHighlight(highlightedItem, parentContainer, prevItem);
+            return (0, exports.getNextItemIndexToHighlight)(highlightedItem, parentContainer, exports.prevItem);
         case 'Enter': {
             // IME docs - If an Input Method Editor is processing key input and the event is keydown, return 229. https://www.w3.org/TR/uievents/#determine-keydown-keyup-keyCode
             // related PR in baseweb - https://github.com/uber/baseweb/pull/2284