@sprinklrjs/spaceweb 11.0.0 → 12.14.4

package/input/basewebAdapters.js

@@ -9,8 +9,12 @@ var ClearIconButton_1 = (0, tslib_1.__importDefault)(require("../helpers/ClearIc
 var context_1 = require("../form-control/context");
 var useDebouncedEventHandler_1 = require("../hooks/useDebouncedEventHandler");
 var noop_1 = (0, tslib_1.__importDefault)(require("lodash/noop"));
+var style_1 = require("../style");
+var themeHelpers_1 = require("../helpers/themeHelpers");
 var useInputBasewebAdapter = function (props) {
-    var _a = (0, context_1.useContextualFormProps)(props), size = _a.size, variant = _a.variant, className = _a.className, style = _a.style, intent = _a.intent, overrides = _a.overrides, onChange = _a.onChange, debouncedOnChange = _a.debouncedOnChange, debounceInterval = _a.debounceInterval, restProps = (0, tslib_1.__rest)(_a, ["size", "variant", "className", "style", "intent", "overrides", "onChange", "debouncedOnChange", "debounceInterval"]);
+    var _a = (0, context_1.useContextualFormProps)(props), _size = _a.size, variant = _a.variant, className = _a.className, style = _a.style, intent = _a.intent, overrides = _a.overrides, onChange = _a.onChange, debouncedOnChange = _a.debouncedOnChange, debounceInterval = _a.debounceInterval, restProps = (0, tslib_1.__rest)(_a, ["size", "variant", "className", "style", "intent", "overrides", "onChange", "debouncedOnChange", "debounceInterval"]);
+    var theme = (0, style_1.useStyle)().theme;
+    var size = _size !== null && _size !== void 0 ? _size : (0, themeHelpers_1.getDefaultSize)(theme);
     var handleChange = (0, useDebouncedEventHandler_1.useDebouncedEventHandler)(debouncedOnChange !== null && debouncedOnChange !== void 0 ? debouncedOnChange : noop_1.default, onChange, debounceInterval || 200);
     var sharedProps = (0, helpers_1.add$props)({ size: size, variant: variant, intent: intent });
     var convertedOverrides = (0, useConvertOverrides_1.useConvertOverrides)({
@@ -27,8 +31,19 @@ var useInputBasewebAdapter = function (props) {
             props: sharedProps,
         },
         Input: {
-            style: [styled_components_1.getInputStyles, (0, longHandHelpers_1.borderRadius)('inherit')],
-            props: sharedProps,
+            style: [
+                styled_components_1.getInputStyles,
+                (0, longHandHelpers_1.borderRadius)('inherit'),
+                // To remove the spin buttons on input field with type number
+                props.type === 'number'
+                    ? {
+                        '::-webkit-inner-spin-button': { '-webkit-appearance': 'none' },
+                        '::-webkit-outer-spin-button': { '-webkit-appearance': 'none' },
+                        '-moz-appearance': 'textfield',
+                    }
+                    : {},
+            ],
+            props: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, sharedProps), { 'aria-required': restProps['aria-required'] }),
         },
         StartEnhancer: {
             style: styled_components_1.getEnhancerStyles,

package/input/styled-components.js

@@ -7,12 +7,13 @@ var themeHelpers_1 = require("../helpers/themeHelpers");
 var longHandHelpers_1 = require("../helpers/longHandHelpers");
 var intentHelper_1 = require("../helpers/intentHelper");
 var inputBorderRadius = function (_a, _b) {
+    var _c;
     var theme = _a.theme;
-    var _c = _b.$variant, $variant = _c === void 0 ? 'default' : _c, $adjoined = _b.$adjoined;
+    var _d = _b.$variant, $variant = _d === void 0 ? 'default' : _d, $adjoined = _b.$adjoined, $size = _b.$size;
     if ($variant === 'line') {
         return (0, longHandHelpers_1.borderRadius)(0);
     }
-    var styles = (0, longHandHelpers_1.borderRadius)(theme.input.borderRadius);
+    var styles = (0, longHandHelpers_1.borderRadius)(((_c = (0, themeHelpers_1.getComponentSizeTheme)(theme, 'input', $size, (0, themeHelpers_1.getDefaultSize)(theme))) === null || _c === void 0 ? void 0 : _c.borderRadius) || theme.input.borderRadius);
     switch ($adjoined) {
         case input_1.ADJOINED.left:
             return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, styles), { borderTopLeftRadius: 0, borderBottomLeftRadius: 0 });
@@ -66,13 +67,14 @@ exports.getInputContainerStyles = [
     },
 ];
 var enhancerBorderRadius = function (utils, _a) {
-    var $isStart = _a.$isStart, $variant = _a.$variant;
+    var _b, _c;
+    var $isStart = _a.$isStart, $variant = _a.$variant, $size = _a.$size;
     var theme = utils.theme;
     if ($variant === 'line') {
         return 'rounded-0';
     }
     return $isStart
-        ? (0, tslib_1.__assign)((0, tslib_1.__assign)({}, (0, longHandHelpers_1.borderRadius)(theme.input.borderRadius)), { borderTopRightRadius: 0, borderBottomRightRadius: 0 }) : (0, tslib_1.__assign)((0, tslib_1.__assign)({}, (0, longHandHelpers_1.borderRadius)(theme.input.borderRadius)), { borderTopLeftRadius: 0, borderBottomLeftRadius: 0 });
+        ? (0, tslib_1.__assign)((0, tslib_1.__assign)({}, (0, longHandHelpers_1.borderRadius)(((_b = (0, themeHelpers_1.getComponentSizeTheme)(theme, 'input', $size, (0, themeHelpers_1.getDefaultSize)(theme))) === null || _b === void 0 ? void 0 : _b.borderRadius) || theme.input.borderRadius)), { borderTopRightRadius: 0, borderBottomRightRadius: 0 }) : (0, tslib_1.__assign)((0, tslib_1.__assign)({}, (0, longHandHelpers_1.borderRadius)(((_c = (0, themeHelpers_1.getComponentSizeTheme)(theme, 'input', $size, (0, themeHelpers_1.getDefaultSize)(theme))) === null || _c === void 0 ? void 0 : _c.borderRadius) || theme.input.borderRadius)), { borderTopLeftRadius: 0, borderBottomLeftRadius: 0 });
 };
 var enhancerBorderWidth = function (_a, _b) {
     var _c;
@@ -121,7 +123,7 @@ var getInputStyles = function (utils, props) {
         // baseweb applies this style in order to support style in safari
         styles['-webkit-text-fill-color'] = theme.spr.text02;
     }
-    var inputSizeTheme = (0, themeHelpers_1.getComponentSizeTheme)(theme, 'input', $size, 'md');
+    var inputSizeTheme = (0, themeHelpers_1.getComponentSizeTheme)(theme, 'input', $size, (0, themeHelpers_1.getDefaultSize)(theme));
     styles.lineHeight = inputSizeTheme.lineHeight;
     styles.paddingLeft = styles.paddingRight = inputSizeTheme.paddingX;
     styles.paddingTop = styles.paddingBottom = inputSizeTheme.paddingY;

package/input/types.d.ts

@@ -2,7 +2,10 @@ import { Ref, ChangeEvent } from 'react';
 import { InputProps as BaseInputProps, StatefulInputProps as BaseStatefulInputProps, SharedProps as BaseSharedProps, InputOverrides as BaseUIInputOverrides } from 'baseui/input';
 import { SpacewebComponentProps, Intent } from '../types';
 import { Override } from '../overrides';
-export declare type InputSize = 'sm' | 'md' | 'lg';
+/**
+ * lg size is deprecated. Please use md.
+ */
+export declare type InputSize = 'xxxs' | 'xs' | 'sm' | 'md' | 'lg';
 export declare type InputVariant = 'default' | 'line';
 export declare type InputOverrides = {
     [key in keyof BaseUIInputOverrides]?: Override<SharedProps & Record<string, any>>;

package/layer/useLayersContextValue.js

@@ -51,6 +51,7 @@ var useLayersContextValue = function () {
             resetHandlers();
         };
     }, [doc, onDocumentClick, onKeyUp]);
-    return (0, react_1.useMemo)(function () { return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, ctxValue), { addEscapeHandler: addEscapeHandler, removeEscapeHandler: removeEscapeHandler, addDocClickHandler: addDocClickHandler, removeDocClickHandler: removeDocClickHandler })); }, [ctxValue]);
+    var contextValues = ctxValue && typeof ctxValue === 'object' ? Object.values(ctxValue) : [];
+    return (0, react_1.useMemo)(function () { return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, ctxValue), { addEscapeHandler: addEscapeHandler, removeEscapeHandler: removeEscapeHandler, addDocClickHandler: addDocClickHandler, removeDocClickHandler: removeDocClickHandler })); }, (0, tslib_1.__spreadArray)([], (0, tslib_1.__read)(contextValues), false));
 };
 exports.default = useLayersContextValue;

package/list/avatar-list-item.d.ts

@@ -1,33 +1,23 @@
 /// <reference types="react" />
 import { AvatarProps } from '../avatar';
+import { ListItemProps } from './types';
+import { Override } from '../overrides';
 declare type SharedProps = {
     $item?: Record<string, any>;
     $labelKey?: string;
     $valueKey?: string;
     $multi?: boolean;
 };
-declare const AvatarListItem: import("react").ForwardRefExoticComponent<Omit<import("react").AllHTMLAttributes<HTMLElement>, "style" | "className"> & {
-    $as?: import("react").ElementType<any> | undefined;
-    className?: import("..").Styles;
-    style?: import("..").Styles;
-} & {
-    alignItems?: import("./types").AlignItems | undefined;
-    autoFocus?: boolean | undefined;
-    button?: boolean | undefined;
-    children?: import("react").ReactNode;
-    disabled?: boolean | undefined;
-    endEnhancer?: import("./types").Enhancer<import("./types").ListItemSharedProps>;
-    highlighted?: boolean | undefined;
-    onClick?: ((event: import("react").MouseEvent<Element, MouseEvent> | import("react").KeyboardEvent<Element>) => void) | undefined;
-    overrides?: {
-        ChildContainer?: import("../overrides").Override<import("./types").ListItemSharedProps & Record<string, any>> | undefined;
-        EndEnhancer?: import("../overrides").Override<import("./types").ListItemSharedProps & Record<string, any>> | undefined;
-        Root?: import("../overrides").Override<import("./types").ListItemSharedProps & Record<string, any>> | undefined;
-        StartEnhancer?: import("../overrides").Override<import("./types").ListItemSharedProps & Record<string, any>> | undefined;
-    } | undefined;
-    selected?: boolean | undefined;
-    startEnhancer?: import("./types").Enhancer<import("./types").ListItemSharedProps>;
-} & SharedProps & {
+declare const AvatarListItem: import("react").ForwardRefExoticComponent<Omit<ListItemProps, "overrides"> & SharedProps & {
     avatarProps: AvatarProps;
+    overrides?: ({
+        ChildContainer?: Override<import("./types").ListItemSharedProps & Record<string, any>> | undefined;
+        EndEnhancer?: Override<import("./types").ListItemSharedProps & Record<string, any>> | undefined;
+        Root?: Override<import("./types").ListItemSharedProps & Record<string, any>> | undefined;
+        StartEnhancer?: Override<import("./types").ListItemSharedProps & Record<string, any>> | undefined;
+        StatefulTooltip?: Override<import("./types").ListItemSharedProps & Record<string, any>> | undefined;
+    } & {
+        Avatar?: Override<Record<string, any>> | undefined;
+    }) | undefined;
 } & import("react").RefAttributes<HTMLLIElement>>;
 export default AvatarListItem;

package/list/avatar-list-item.js

@@ -6,11 +6,13 @@ var react_1 = require("react");
 var avatar_1 = require("../avatar");
 var stack_1 = require("../stack");
 var list_item_1 = (0, tslib_1.__importDefault)(require("./list-item"));
+var overrides_1 = require("../overrides");
 var AvatarListItem = (0, react_1.forwardRef)(function (_a, ref) {
-    var $item = _a.$item, $labelKey = _a.$labelKey, $valueKey = _a.$valueKey, $multi = _a.$multi, children = _a.children, startEnhancer = _a.startEnhancer, avatarProps = _a.avatarProps, menuItemProps = (0, tslib_1.__rest)(_a, ["$item", "$labelKey", "$valueKey", "$multi", "children", "startEnhancer", "avatarProps"]);
+    var $item = _a.$item, $labelKey = _a.$labelKey, $valueKey = _a.$valueKey, $multi = _a.$multi, children = _a.children, startEnhancer = _a.startEnhancer, avatarProps = _a.avatarProps, overrides = _a.overrides, menuItemProps = (0, tslib_1.__rest)(_a, ["$item", "$labelKey", "$valueKey", "$multi", "children", "startEnhancer", "avatarProps", "overrides"]);
     var sharedProps = { $item: $item, $labelKey: $labelKey, $valueKey: $valueKey, $multi: $multi };
-    var startEnhancerOverride = function (enhancerProps) { return ((0, jsx_runtime_1.jsxs)(stack_1.Stack, (0, tslib_1.__assign)({ direction: "horizontal", gap: 1, className: "items-center" }, { children: [typeof startEnhancer === 'function' ? startEnhancer((0, tslib_1.__assign)((0, tslib_1.__assign)({}, enhancerProps), sharedProps)) : startEnhancer, (0, jsx_runtime_1.jsx)(avatar_1.Avatar, (0, tslib_1.__assign)({ size: "md" }, avatarProps), void 0)] }), void 0)); };
-    return ((0, jsx_runtime_1.jsx)(list_item_1.default, (0, tslib_1.__assign)({ startEnhancer: startEnhancerOverride }, menuItemProps, { className: ['py-1', menuItemProps === null || menuItemProps === void 0 ? void 0 : menuItemProps.className], ref: ref }, { children: children }), void 0));
+    var _b = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Avatar, avatar_1.Avatar), 2), AvatarComponent = _b[0], avatarOverrideProps = _b[1];
+    var startEnhancerOverride = function (enhancerProps) { return ((0, jsx_runtime_1.jsxs)(stack_1.Stack, (0, tslib_1.__assign)({ direction: "horizontal", gap: 1, className: "items-center" }, { children: [typeof startEnhancer === 'function' ? startEnhancer((0, tslib_1.__assign)((0, tslib_1.__assign)({}, enhancerProps), sharedProps)) : startEnhancer, (0, jsx_runtime_1.jsx)(AvatarComponent, (0, tslib_1.__assign)({ size: "md" }, avatarProps, avatarOverrideProps), void 0)] }), void 0)); };
+    return ((0, jsx_runtime_1.jsx)(list_item_1.default, (0, tslib_1.__assign)({ startEnhancer: startEnhancerOverride, overrides: overrides }, menuItemProps, { className: ['py-1', menuItemProps === null || menuItemProps === void 0 ? void 0 : menuItemProps.className], ref: ref }, { children: children }), void 0));
 });
 AvatarListItem.displayName = 'AvatarListItem';
 exports.default = AvatarListItem;

package/list/index.d.ts

@@ -3,5 +3,5 @@ export { default as ListItem } from './list-item';
 export { default as AvatarListItem } from './avatar-list-item';
 export { default as Divider } from './divider';
 export { default as ListItemText } from './list-item-text';
-export { StyledListItem, StyledList, StyledEndEnhancer, StyledListItemDivider, StyledStartEnhancer, } from './styled-component';
+export { StyledListItem, StyledList, StyledEndEnhancer, StyledListItemDivider, StyledStartEnhancer, LIST_MIN_WIDTH, } from './styled-component';
 export type { ListItemProps, AlignItems, ListItemSharedProps, ListProps, DividerProps, ListItemTextProps, } from './types';

package/list/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledStartEnhancer = exports.StyledListItemDivider = exports.StyledEndEnhancer = exports.StyledList = exports.StyledListItem = exports.ListItemText = exports.Divider = exports.AvatarListItem = exports.ListItem = exports.List = void 0;
+exports.LIST_MIN_WIDTH = exports.StyledStartEnhancer = exports.StyledListItemDivider = exports.StyledEndEnhancer = exports.StyledList = exports.StyledListItem = exports.ListItemText = exports.Divider = exports.AvatarListItem = exports.ListItem = exports.List = void 0;
 var list_1 = require("./list");
 Object.defineProperty(exports, "List", { enumerable: true, get: function () { return __importDefault(list_1).default; } });
 var list_item_1 = require("./list-item");
@@ -20,3 +20,4 @@ Object.defineProperty(exports, "StyledList", { enumerable: true, get: function (
 Object.defineProperty(exports, "StyledEndEnhancer", { enumerable: true, get: function () { return styled_component_1.StyledEndEnhancer; } });
 Object.defineProperty(exports, "StyledListItemDivider", { enumerable: true, get: function () { return styled_component_1.StyledListItemDivider; } });
 Object.defineProperty(exports, "StyledStartEnhancer", { enumerable: true, get: function () { return styled_component_1.StyledStartEnhancer; } });
+Object.defineProperty(exports, "LIST_MIN_WIDTH", { enumerable: true, get: function () { return styled_component_1.LIST_MIN_WIDTH; } });

package/list/list-item.d.ts

@@ -12,14 +12,16 @@ declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponen
     disabled?: boolean | undefined;
     endEnhancer?: Enhancer<ListItemSharedProps>;
     highlighted?: boolean | undefined;
-    onClick?: ((event: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>) => void) | undefined;
+    onClick?: ((event: React.KeyboardEvent<Element> | React.MouseEvent<Element, MouseEvent>) => void) | undefined;
     overrides?: {
         ChildContainer?: import("../overrides").Override<ListItemSharedProps & Record<string, any>> | undefined;
         EndEnhancer?: import("../overrides").Override<ListItemSharedProps & Record<string, any>> | undefined;
         Root?: import("../overrides").Override<ListItemSharedProps & Record<string, any>> | undefined;
         StartEnhancer?: import("../overrides").Override<ListItemSharedProps & Record<string, any>> | undefined;
+        StatefulTooltip?: import("../overrides").Override<ListItemSharedProps & Record<string, any>> | undefined;
     } | undefined;
     selected?: boolean | undefined;
     startEnhancer?: Enhancer<ListItemSharedProps>;
+    tooltipContent?: React.ReactNode | import("baseui/popover").StatefulContentRenderProp;
 } & React.RefAttributes<HTMLElement>>>;
 export default _default;

package/list/list-item.js

@@ -9,8 +9,9 @@ var useCombinedRef_1 = (0, tslib_1.__importDefault)(require("../hooks/useCombine
 var overrides_1 = require("../overrides");
 var styled_component_1 = require("./styled-component");
 var useFocusVisible_1 = require("../hooks/useFocusVisible");
+var tooltip_1 = require("../tooltip");
 var ListItem = React.forwardRef(function (_a, ref) {
-    var startEnhancer = _a.startEnhancer, children = _a.children, _b = _a.alignItems, alignItems = _b === void 0 ? 'center' : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, endEnhancer = _a.endEnhancer, _d = _a.selected, selected = _d === void 0 ? false : _d, _e = _a.highlighted, highlighted = _e === void 0 ? false : _e, _f = _a.autoFocus, autoFocus = _f === void 0 ? false : _f, _g = _a.button, button = _g === void 0 ? false : _g, _h = _a.overrides, overrides = _h === void 0 ? {} : _h, _j = _a.tabIndex, tabIndex = _j === void 0 ? button ? 0 : undefined : _j, _k = _a.$as, $as = _k === void 0 ? 'li' : _k, onClick = _a.onClick, onKeyDown = _a.onKeyDown, onFocus = _a.onFocus, onBlur = _a.onBlur, restProps = (0, tslib_1.__rest)(_a, ["startEnhancer", "children", "alignItems", "disabled", "endEnhancer", "selected", "highlighted", "autoFocus", "button", "overrides", "tabIndex", "$as", "onClick", "onKeyDown", "onFocus", "onBlur"]);
+    var startEnhancer = _a.startEnhancer, children = _a.children, _b = _a.alignItems, alignItems = _b === void 0 ? 'center' : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, endEnhancer = _a.endEnhancer, _d = _a.selected, selected = _d === void 0 ? false : _d, _e = _a.highlighted, highlighted = _e === void 0 ? false : _e, _f = _a.autoFocus, autoFocus = _f === void 0 ? false : _f, _g = _a.button, button = _g === void 0 ? false : _g, _h = _a.overrides, overrides = _h === void 0 ? {} : _h, _j = _a.tabIndex, tabIndex = _j === void 0 ? button ? 0 : undefined : _j, _k = _a.$as, $as = _k === void 0 ? 'li' : _k, onClick = _a.onClick, onKeyDown = _a.onKeyDown, onFocus = _a.onFocus, onBlur = _a.onBlur, _l = _a.tooltipContent, tooltipContent = _l === void 0 ? '' : _l, restProps = (0, tslib_1.__rest)(_a, ["startEnhancer", "children", "alignItems", "disabled", "endEnhancer", "selected", "highlighted", "autoFocus", "button", "overrides", "tabIndex", "$as", "onClick", "onKeyDown", "onFocus", "onBlur", "tooltipContent"]);
     var ownRef = (0, react_1.useRef)(null);
     var combinedRef = (0, useCombinedRef_1.default)(ref, ownRef);
     React.useEffect(function () {
@@ -31,10 +32,10 @@ var ListItem = React.forwardRef(function (_a, ref) {
             onKeyDown(event);
         }
     }, [button, disabled, onClick, onKeyDown]);
-    var _l = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides.Root, styled_component_1.StyledListItem), 2), Root = _l[0], rootProps = _l[1];
-    var _m = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides.ChildContainer, styled_component_1.StyledChildContainer), 2), ChildContainer = _m[0], childContainerProps = _m[1];
-    var _o = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides.StartEnhancer, styled_component_1.StyledStartEnhancer), 2), StartEnhancer = _o[0], startEnhancerProps = _o[1];
-    var _p = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides.EndEnhancer, styled_component_1.StyledEndEnhancer), 2), EndEnhancer = _p[0], endEnhancerProps = _p[1];
+    var _m = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides.Root, styled_component_1.StyledListItem), 2), Root = _m[0], rootProps = _m[1];
+    var _o = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides.ChildContainer, styled_component_1.StyledChildContainer), 2), ChildContainer = _o[0], childContainerProps = _o[1];
+    var _p = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides.StartEnhancer, styled_component_1.StyledStartEnhancer), 2), StartEnhancer = _p[0], startEnhancerProps = _p[1];
+    var _q = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides.EndEnhancer, styled_component_1.StyledEndEnhancer), 2), EndEnhancer = _q[0], endEnhancerProps = _q[1];
     var sharedProps = {
         $withStartEnhancer: !!startEnhancer,
         $withEndEnhancer: !!endEnhancer,
@@ -47,7 +48,9 @@ var ListItem = React.forwardRef(function (_a, ref) {
     var renderEnhancer = function (enhancer) {
         return typeof enhancer === 'function' ? enhancer(sharedProps) : enhancer;
     };
-    return ((0, jsx_runtime_1.jsxs)(Root, (0, tslib_1.__assign)({ "data-spaceweb": "list-item", role: "listitem", ref: combinedRef, tabIndex: tabIndex, "aria-disabled": disabled, "$as": $as, onClick: disabled ? noop_1.default : onClick, onKeyDown: handleKeyDown, "data-highlighted": highlighted }, sharedProps, restProps, rootProps, useFocusVisibleProps, { children: [startEnhancer && ((0, jsx_runtime_1.jsx)(StartEnhancer, (0, tslib_1.__assign)({}, sharedProps, startEnhancerProps, { children: renderEnhancer(startEnhancer) }), void 0)), (0, jsx_runtime_1.jsx)(ChildContainer, (0, tslib_1.__assign)({}, sharedProps, childContainerProps, { children: children }), void 0), endEnhancer && ((0, jsx_runtime_1.jsx)(EndEnhancer, (0, tslib_1.__assign)({}, sharedProps, endEnhancerProps, { children: renderEnhancer(endEnhancer) }), void 0))] }), void 0));
+    var _r = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.StatefulTooltip, tooltip_1.StatefulTooltip), 2), StatefulTooltip = _r[0], statefulTooltipProps = _r[1];
+    var listEl = ((0, jsx_runtime_1.jsxs)(Root, (0, tslib_1.__assign)({ "data-spaceweb": "list-item", role: "listitem", ref: combinedRef, tabIndex: tabIndex, "aria-disabled": disabled, "$as": $as, onClick: disabled ? noop_1.default : onClick, onKeyDown: handleKeyDown, "data-highlighted": highlighted }, sharedProps, restProps, rootProps, useFocusVisibleProps, { children: [startEnhancer && ((0, jsx_runtime_1.jsx)(StartEnhancer, (0, tslib_1.__assign)({}, sharedProps, startEnhancerProps, { children: renderEnhancer(startEnhancer) }), void 0)), (0, jsx_runtime_1.jsx)(ChildContainer, (0, tslib_1.__assign)({}, sharedProps, childContainerProps, { children: children }), void 0), endEnhancer && ((0, jsx_runtime_1.jsx)(EndEnhancer, (0, tslib_1.__assign)({}, sharedProps, endEnhancerProps, { children: renderEnhancer(endEnhancer) }), void 0))] }), void 0));
+    return tooltipContent ? ((0, jsx_runtime_1.jsx)(StatefulTooltip, (0, tslib_1.__assign)({ placement: "bottom", content: tooltipContent }, statefulTooltipProps, { children: listEl }), void 0)) : (listEl);
 });
 ListItem.displayName = 'ListItem';
 exports.default = React.memo(ListItem);

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,14 +1,18 @@
 "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");
+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) {
+'box-border spr-ui-01 py-1 px-1 my-0', (0, longHandHelpers_1.borderRadius)('inherit'), function (_a) {
+    var px2rem = _a.px2rem;
+    return ({ minWidth: px2rem(exports.LIST_MIN_WIDTH) });
+}, function (_, _a) {
     var $showFocusOutline = _a.$showFocusOutline;
     return ($showFocusOutline ? 'focus-visible:outline-01' : '');
 });
@@ -28,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 mb-1 last-child:mb-0 py-2 px-3 typography-l1 fill-current spr-ui-01 rounded-6', {
+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,
@@ -51,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 mb-1 last-child:mb-0');
-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-2': direction !== 'rtl',
-        'pl-2': 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-2': direction !== 'rtl',
-        'pr-2': 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,9 +27,11 @@ 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;

package/locale/en_US.js

@@ -2,9 +2,16 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DEFAULT_LOCALE = void 0;
 exports.DEFAULT_LOCALE = {
+    colorPicker: {
+        resetButtonLabel: 'Reset Color',
+    },
     select: {
         noResultsMsg: 'No Results',
         selectAllLabel: 'Select All',
+        hideButtonAriaLabel: 'Hide',
+        selectPlaceholder: 'Select...',
+        clearOptionLabel: 'Unassign',
+        selectedValuesPrefix: 'Selected ${values}.',
     },
     asyncSelect: {
         searchingText: 'Searching',
@@ -15,9 +22,12 @@ exports.DEFAULT_LOCALE = {
         dateInputStartLabel: 'Start Date',
         timePickerEndLabel: 'End Time',
         dateInputEndLabel: 'End Date',
+        calendarButtonAriaLabel: 'Open Calendar',
     },
     datePicker: {
         popoverAriaLabel: 'Select a date',
+        timezonePickerLabel: 'Timezone',
+        timezonePickerPlaceholder: 'Select a timezone',
     },
     timeRangePicker: {
         today: 'Today',
@@ -77,4 +87,20 @@ exports.DEFAULT_LOCALE = {
         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',
+    },
+    langCode: 'en-US',
 };

package/locale/types.d.ts

@@ -4,8 +4,10 @@ import { AsyncSelectLocale } from '../asyncSelect';
 import { PhoneInputLocale } from '../phone-input';
 import { DatePickerLocale } from '../date-picker/locale';
 import { BannerLocale } from '../banner';
+import { ColorPickerLocale } from '../color-picker/locale';
 export declare type Locale = {
     select: SelectLocale;
+    colorPicker: ColorPickerLocale;
     asyncSelect: AsyncSelectLocale;
     datePicker: DatePickerLocale;
     timeRangePicker: TimeRangePickerLocale;
@@ -15,9 +17,26 @@ export declare type Locale = {
         dateInputStartLabel: string;
         timePickerEndLabel: string;
         dateInputEndLabel: string;
+        calendarButtonAriaLabel: string;
     };
     menu: {
         nestedMenuItemAriaLabel: string;
     };
     banner: BannerLocale;
+    input: {
+        clearAriaLabel: string;
+    };
+    modal: {
+        closeAriaLabel: string;
+    };
+    snackbar: {
+        closeAriaLabel: string;
+    };
+    tag: {
+        closeAriaLabel: string;
+    };
+    search: {
+        searchPlaceholder: 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/menu-item.d.ts

@@ -17,15 +17,17 @@ declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponen
             disabled?: boolean | undefined;
             endEnhancer?: import("../list/types").Enhancer<import("../list").ListItemSharedProps>;
             highlighted?: boolean | undefined;
-            onClick?: ((event: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>) => void) | undefined;
+            onClick?: ((event: React.KeyboardEvent<Element> | React.MouseEvent<Element, MouseEvent>) => void) | undefined;
             overrides?: {
                 ChildContainer?: import("../overrides").Override<import("../list").ListItemSharedProps & Record<string, any>> | undefined;
                 EndEnhancer?: import("../overrides").Override<import("../list").ListItemSharedProps & Record<string, any>> | undefined;
                 Root?: import("../overrides").Override<import("../list").ListItemSharedProps & Record<string, any>> | undefined;
                 StartEnhancer?: import("../overrides").Override<import("../list").ListItemSharedProps & Record<string, any>> | undefined;
+                StatefulTooltip?: import("../overrides").Override<import("../list").ListItemSharedProps & Record<string, any>> | undefined;
             } | undefined;
             selected?: boolean | undefined;
             startEnhancer?: import("../list/types").Enhancer<import("../list").ListItemSharedProps>;
+            tooltipContent?: React.ReactNode | import("baseui/popover").StatefulContentRenderProp;
         } & Record<string, any>> | undefined;
         Popover?: import("../overrides").Override<Omit<import("baseui/popover").PopoverProps, "children" | "overrides" | "triggerType" | "placement"> & {
             overrides?: ({
@@ -42,6 +44,7 @@ declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponen
             triggerType?: import("../popover").TriggerType | undefined;
             placement?: "auto" | "bottom" | "left" | "right" | "top" | "topLeft" | "topRight" | "rightTop" | "rightBottom" | "bottomRight" | "bottomLeft" | "leftBottom" | "leftTop" | undefined;
             innerRef?: React.Ref<HTMLElement> | undefined;
+            viewportAsBoundary?: boolean | undefined;
         } & Record<string, any>> | undefined;
     } | undefined;
 } & React.RefAttributes<HTMLElement>>>;

package/menu/menu-item.js

@@ -16,19 +16,20 @@ var popover_1 = require("../popover");
 var locale_1 = require("../locale");
 var helpers_1 = require("./helpers");
 var MenuContext_1 = require("./MenuContext");
+var classNames_1 = (0, tslib_1.__importDefault)(require("../classNames"));
 var listItemOverrides = {
     ListItem: {
         props: {
             overrides: {
                 Root: {
                     style: function (_a, _b) {
-                        var theme = _a.theme;
-                        var $disabled = _b.$disabled, $highlighted = _b.$highlighted, $selected = _b.$selected;
+                        var getStyle = _a.getStyle, theme = _a.theme;
+                        var $disabled = _b.$disabled, $highlighted = _b.$highlighted, $selected = _b.$selected, $outlined = _b.$outlined;
                         var hoverBackgroundColor = (0, themeHelpers_1.getComponentTheme)(theme, 'list').hoverBackgroundColor;
-                        return {
+                        return getStyle((0, classNames_1.default)({ 'outline-01 outline-offset-0': $outlined }), {
                             backgroundColor: $highlighted || $selected ? hoverBackgroundColor : 'none',
                             cursor: $disabled ? 'not-allowed' : 'pointer',
-                        };
+                        });
                     },
                 },
             },
@@ -36,13 +37,12 @@ var listItemOverrides = {
     },
 };
 var MenuItem = React.forwardRef(function (_a, ref) {
-    var _b;
     var selected = _a.selected, highlighted = _a.highlighted, overrides = _a.overrides, getChildMenu = _a.getChildMenu, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, onMouseOver = _a.onMouseOver, renderAll = _a.renderAll, restProps = (0, tslib_1.__rest)(_a, ["selected", "highlighted", "overrides", "getChildMenu", "onMouseEnter", "onMouseLeave", "onMouseOver", "renderAll"]);
-    var _c = (0, tslib_1.__read)((0, react_1.useState)(false), 2), hovered = _c[0], setHovered = _c[1];
+    var _b = (0, tslib_1.__read)((0, react_1.useState)(false), 2), hovered = _b[0], setHovered = _b[1];
     var ChildMenu = getChildMenu === null || getChildMenu === void 0 ? void 0 : getChildMenu();
     var ownRef = (0, react_1.useRef)(null);
     var itemRef = (0, useCombinedRef_1.default)(ref, ownRef);
-    var _d = (0, MenuContext_1.useMenuContext)(), highlightedItem = _d.highlightedItem, setHighlightedItem = _d.setHighlightedItem, setMenuContainerRef = _d.setMenuContainerRef, nestedMenuOpen = _d.nestedMenuOpen, setNestedMenuOpen = _d.setNestedMenuOpen;
+    var _c = (0, MenuContext_1.useMenuContext)(), highlightedItem = _c.highlightedItem, setHighlightedItem = _c.setHighlightedItem, setMenuContainerRef = _c.setMenuContainerRef, listItemFocusVisible = _c.listItemFocusVisible, nestedMenuOpen = _c.nestedMenuOpen, setNestedMenuOpen = _c.setNestedMenuOpen;
     var locale = (0, locale_1.useLocale)();
     (0, react_1.useEffect)(function () {
         var _a, _b;
@@ -50,8 +50,8 @@ var MenuItem = React.forwardRef(function (_a, ref) {
     }, [setMenuContainerRef]);
     var isItemHighlighted = highlighted || (highlightedItem !== null && highlightedItem === ownRef.current);
     var mergedOverrides = (0, react_1.useMemo)(function () { return (0, overrides_1.mergeOverrides)(listItemOverrides, overrides); }, [overrides]);
-    var _e = (0, tslib_1.__read)((0, overrides_1.useOverrides)(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.ListItem, list_item_1.default), 2), ListItemOverride = _e[0], listItemProps = _e[1];
-    var _f = (0, tslib_1.__read)((0, overrides_1.useOverrides)(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.Popover, popover_1.Popover), 2), PopoverOverride = _f[0], popoverProps = _f[1];
+    var _d = (0, tslib_1.__read)((0, overrides_1.useOverrides)(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.ListItem, list_item_1.default), 2), ListItemOverride = _d[0], listItemProps = _d[1];
+    var _e = (0, tslib_1.__read)((0, overrides_1.useOverrides)(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.Popover, popover_1.Popover), 2), PopoverOverride = _e[0], popoverProps = _e[1];
     var onMouseOverRef = (0, useLatest_1.useLatest)(onMouseOver);
     var handleMouseOver = (0, react_1.useCallback)(function (e) {
         var _a;
@@ -63,7 +63,7 @@ var MenuItem = React.forwardRef(function (_a, ref) {
     var resetMenu = (0, react_1.useCallback)(function () { return setHighlightedItem(null); }, [setHighlightedItem]);
     var closeNestedMenu = (0, react_1.useCallback)(function () { return setNestedMenuOpen(false); }, [setNestedMenuOpen]);
     var id = (0, useUniqueId_1.default)();
-    var listItem = ((0, jsx_runtime_1.jsx)(ListItemOverride, (0, tslib_1.__assign)({ id: id.toString(), ref: itemRef, role: "menuitem", "aria-label": ChildMenu ? locale.menu.nestedMenuItemAriaLabel : undefined, selected: selected, "aria-selected": selected, "data-haschildmenu": Boolean(ChildMenu), highlighted: isItemHighlighted, endEnhancer: ChildMenu && (0, jsx_runtime_1.jsx)(chevron_down_1.default, { size: 10, className: "transform -rotate-90" }, void 0), onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }, restProps, { onMouseOver: handleMouseOver }, listItemProps), void 0));
+    var listItem = ((0, jsx_runtime_1.jsx)(ListItemOverride, (0, tslib_1.__assign)({ id: id.toString(), ref: itemRef, role: "menuitem", "aria-label": ChildMenu ? locale.menu.nestedMenuItemAriaLabel : undefined, selected: selected, "aria-selected": selected, "data-haschildmenu": Boolean(ChildMenu), highlighted: isItemHighlighted, "$outlined": isItemHighlighted && listItemFocusVisible, endEnhancer: ChildMenu && (0, jsx_runtime_1.jsx)(chevron_down_1.default, { size: 10, className: "transform -rotate-90" }, void 0), onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }, restProps, { onMouseOver: handleMouseOver }, listItemProps), void 0));
     var handleMouseEnter = (0, useCombinedHandler_1.default)(function () { return setHovered(true); }, onMouseEnter);
     var handleMouseLeave = (0, useCombinedHandler_1.default)(function () { return setHovered(false); }, onMouseLeave);
     // when we have opened child menu using hover, then after switching to keyboard hovered state remains true
@@ -76,7 +76,7 @@ var MenuItem = React.forwardRef(function (_a, ref) {
     if (!ChildMenu) {
         return listItem;
     }
-    return ((0, jsx_runtime_1.jsx)(PopoverOverride, (0, tslib_1.__assign)({ content: ChildMenu, isOpen: isItemHighlighted && (hovered || nestedMenuOpen), placement: "rightTop", onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onMouseLeaveDelay: 30, triggerType: "hover", mountNode: (_b = ownRef.current) === null || _b === void 0 ? void 0 : _b.parentElement, renderAll: renderAll, onClickOutside: resetMenu, onEsc: closeNestedMenu }, popoverProps, { children: listItem }), void 0));
+    return ((0, jsx_runtime_1.jsx)(PopoverOverride, (0, tslib_1.__assign)({ content: ChildMenu, isOpen: isItemHighlighted && (hovered || nestedMenuOpen), placement: "rightTop", onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onMouseLeaveDelay: 30, triggerType: "hover", renderAll: renderAll, onClickOutside: resetMenu, onEsc: closeNestedMenu }, popoverProps, { children: listItem }), void 0));
 });
 MenuItem.displayName = 'MenuItem';
 exports.default = React.memo(MenuItem);

package/menu/menu.d.ts

@@ -26,5 +26,6 @@ declare const _default: import("react").MemoExoticComponent<import("react").Forw
     resetMenuOnMouseLeave?: boolean | undefined;
     reducer?: import("./types").Reducer | undefined;
     captureScroll?: boolean | undefined;
+    selectOnTab?: boolean | undefined;
 } & import("react").RefAttributes<MenuRef>>>;
 export default _default;