@sprinklrjs/spaceweb 14.13.0 → 14.13.2

package/asyncSelect/hooks/useBaseAsyncSelect.js

@@ -257,9 +257,9 @@ var useBaseAsyncSelect = function (params) {
     var updateOptions = (0, react_1.useCallback)(function (getUpdatedOptions) {
         var updatedOptions = getUpdatedOptions(options);
         setOptions(updatedOptions);
-        setAllOptionsMap((0, keyBy_1.default)((0, utils_1.normalizeOptions)(updatedOptions)));
+        setAllOptionsMap((0, keyBy_1.default)((0, utils_1.normalizeOptions)(updatedOptions), valueKey));
         sortedOptionsRef.current = updatedOptions;
-    }, [options]);
+    }, [options, valueKey]);
     var updateResultCountMap = (0, react_1.useCallback)(function (getUpdatedResultCountMap) { return setResultCountMap(getUpdatedResultCountMap(resultCountMap)); }, [resultCountMap, setResultCountMap]);
     return tslib_1.__assign(tslib_1.__assign({}, restSelectProps), { options: options, isLoading: isLoading, value: selectedOptions, controlRef: controlRef, inputRef: combinedRef, overrides: mergedOverrides, noResultsMsg: adaptedNoResultsMsg, createOption: createOption, onInputChange: _onInputChange, valueKey: valueKey, labelKey: labelKey, type: restSelectProps.type, groupConfigWithCount: groupConfigWithCount, onChange: onChange, onOpen: (0, react_1.useCallback)(function () {
             moveSelectedOptionsToTop &&

package/date-picker/DateInput.js

@@ -102,15 +102,31 @@ function (_a) {
     }, [date, minDate, maxDate, dateHelpers]);
     var updateDate = function (nextDate) {
         if ((0, exports.isDateValid)(nextDate)) {
-            var newDate = dateHelpers.setDate(date || new Date(), nextDate);
-            onChange(newDate);
+            if (date) {
+                onChange(dateHelpers.setDate(date, nextDate));
+            }
+            else {
+                var monthNum = Number(month);
+                var yearNum = Number(year);
+                if ((0, exports.isMonthValid)(monthNum) &&
+                    yearNum >= minYear &&
+                    yearNum <= maxYear &&
+                    nextDate <= (0, getDaysInMonth_1.default)(new Date(yearNum, monthNum - 1))) {
+                    onChange(new Date(yearNum, monthNum - 1, nextDate));
+                }
+            }
         }
         else {
             setDay(date ? dateHelpers.formatDate(date, 'dd') : '');
         }
     };
     var dateBlur = function (_event) {
-        setDay(date ? dateHelpers.formatDate(date, 'dd') : '');
+        if (date) {
+            setDay(dateHelpers.formatDate(date, 'dd'));
+        }
+        else if (!(0, exports.isDateValid)(Number(day))) {
+            setDay('');
+        }
     };
     // Match main: derive a number via Number(raw), not parseInt. For mask partials like "1_",
     // Number returns NaN so we do not commit; parseInt("1_") === 1 incorrectly committed day 1.
@@ -139,15 +155,31 @@ function (_a) {
     };
     var updateMonth = function (nextMonth) {
         if ((0, exports.isMonthValid)(nextMonth)) {
-            var newDate = dateHelpers.setMonth(date || new Date(), nextMonth - 1);
-            onChange(newDate);
+            if (date) {
+                onChange(dateHelpers.setMonth(date, nextMonth - 1));
+            }
+            else {
+                var dayNum = Number(day);
+                var yearNum = Number(year);
+                if ((0, exports.isDateValid)(dayNum) &&
+                    yearNum >= minYear &&
+                    yearNum <= maxYear &&
+                    dayNum <= (0, getDaysInMonth_1.default)(new Date(yearNum, nextMonth - 1))) {
+                    onChange(new Date(yearNum, nextMonth - 1, dayNum));
+                }
+            }
         }
         else {
             setMonth(date ? dateHelpers.formatDate(date, 'MM') : '');
         }
     };
     var monthBlur = function (_event) {
-        setMonth(date ? dateHelpers.formatDate(date, 'MM') : '');
+        if (date) {
+            setMonth(dateHelpers.formatDate(date, 'MM'));
+        }
+        else if (!(0, exports.isMonthValid)(Number(month))) {
+            setMonth('');
+        }
     };
     // Same rules as dayChange: Number(raw) rejects partial mask values like "1_".
     var monthChange = function (event) {
@@ -176,15 +208,33 @@ function (_a) {
     // year
     var updateYear = function (nextYear) {
         if (nextYear >= minYear && nextYear <= maxYear) {
-            var newDate = dateHelpers.setYear(date || new Date(), nextYear);
-            onChange(newDate);
+            if (date) {
+                onChange(dateHelpers.setYear(date, nextYear));
+            }
+            else {
+                var dayNum = Number(day);
+                var monthNum = Number(month);
+                if ((0, exports.isDateValid)(dayNum) &&
+                    (0, exports.isMonthValid)(monthNum) &&
+                    dayNum <= (0, getDaysInMonth_1.default)(new Date(nextYear, monthNum - 1))) {
+                    onChange(new Date(nextYear, monthNum - 1, dayNum));
+                }
+            }
         }
         else {
             setYear(date ? dateHelpers.getYear(date) : '');
         }
     };
     var yearBlur = function (_event) {
-        setYear(date ? dateHelpers.formatDate(date, 'yyyy') : '');
+        if (date) {
+            setYear(dateHelpers.formatDate(date, 'yyyy'));
+        }
+        else {
+            var yearNum = Number(year);
+            if (!(yearNum >= minYear && yearNum <= maxYear)) {
+                setYear('');
+            }
+        }
     };
     var yearChange = function (event) {
         setYear(event.target.value);

package/esm/asyncSelect/hooks/useBaseAsyncSelect.js

@@ -254,9 +254,9 @@ export var useBaseAsyncSelect = function (params) {
     var updateOptions = useCallback(function (getUpdatedOptions) {
         var updatedOptions = getUpdatedOptions(options);
         setOptions(updatedOptions);
-        setAllOptionsMap(_keyBy(normalizeOptions(updatedOptions)));
+        setAllOptionsMap(_keyBy(normalizeOptions(updatedOptions), valueKey));
         sortedOptionsRef.current = updatedOptions;
-    }, [options]);
+    }, [options, valueKey]);
     var updateResultCountMap = useCallback(function (getUpdatedResultCountMap) { return setResultCountMap(getUpdatedResultCountMap(resultCountMap)); }, [resultCountMap, setResultCountMap]);
     return __assign(__assign({}, restSelectProps), { options: options, isLoading: isLoading, value: selectedOptions, controlRef: controlRef, inputRef: combinedRef, overrides: mergedOverrides, noResultsMsg: adaptedNoResultsMsg, createOption: createOption, onInputChange: _onInputChange, valueKey: valueKey, labelKey: labelKey, type: restSelectProps.type, groupConfigWithCount: groupConfigWithCount, onChange: onChange, onOpen: useCallback(function () {
             moveSelectedOptionsToTop &&

package/esm/date-picker/DateInput.js

@@ -97,15 +97,31 @@ function (_a) {
     }, [date, minDate, maxDate, dateHelpers]);
     var updateDate = function (nextDate) {
         if (isDateValid(nextDate)) {
-            var newDate = dateHelpers.setDate(date || new Date(), nextDate);
-            onChange(newDate);
+            if (date) {
+                onChange(dateHelpers.setDate(date, nextDate));
+            }
+            else {
+                var monthNum = Number(month);
+                var yearNum = Number(year);
+                if (isMonthValid(monthNum) &&
+                    yearNum >= minYear &&
+                    yearNum <= maxYear &&
+                    nextDate <= getDaysInMonth(new Date(yearNum, monthNum - 1))) {
+                    onChange(new Date(yearNum, monthNum - 1, nextDate));
+                }
+            }
         }
         else {
             setDay(date ? dateHelpers.formatDate(date, 'dd') : '');
         }
     };
     var dateBlur = function (_event) {
-        setDay(date ? dateHelpers.formatDate(date, 'dd') : '');
+        if (date) {
+            setDay(dateHelpers.formatDate(date, 'dd'));
+        }
+        else if (!isDateValid(Number(day))) {
+            setDay('');
+        }
     };
     // Match main: derive a number via Number(raw), not parseInt. For mask partials like "1_",
     // Number returns NaN so we do not commit; parseInt("1_") === 1 incorrectly committed day 1.
@@ -134,15 +150,31 @@ function (_a) {
     };
     var updateMonth = function (nextMonth) {
         if (isMonthValid(nextMonth)) {
-            var newDate = dateHelpers.setMonth(date || new Date(), nextMonth - 1);
-            onChange(newDate);
+            if (date) {
+                onChange(dateHelpers.setMonth(date, nextMonth - 1));
+            }
+            else {
+                var dayNum = Number(day);
+                var yearNum = Number(year);
+                if (isDateValid(dayNum) &&
+                    yearNum >= minYear &&
+                    yearNum <= maxYear &&
+                    dayNum <= getDaysInMonth(new Date(yearNum, nextMonth - 1))) {
+                    onChange(new Date(yearNum, nextMonth - 1, dayNum));
+                }
+            }
         }
         else {
             setMonth(date ? dateHelpers.formatDate(date, 'MM') : '');
         }
     };
     var monthBlur = function (_event) {
-        setMonth(date ? dateHelpers.formatDate(date, 'MM') : '');
+        if (date) {
+            setMonth(dateHelpers.formatDate(date, 'MM'));
+        }
+        else if (!isMonthValid(Number(month))) {
+            setMonth('');
+        }
     };
     // Same rules as dayChange: Number(raw) rejects partial mask values like "1_".
     var monthChange = function (event) {
@@ -171,15 +203,33 @@ function (_a) {
     // year
     var updateYear = function (nextYear) {
         if (nextYear >= minYear && nextYear <= maxYear) {
-            var newDate = dateHelpers.setYear(date || new Date(), nextYear);
-            onChange(newDate);
+            if (date) {
+                onChange(dateHelpers.setYear(date, nextYear));
+            }
+            else {
+                var dayNum = Number(day);
+                var monthNum = Number(month);
+                if (isDateValid(dayNum) &&
+                    isMonthValid(monthNum) &&
+                    dayNum <= getDaysInMonth(new Date(nextYear, monthNum - 1))) {
+                    onChange(new Date(nextYear, monthNum - 1, dayNum));
+                }
+            }
         }
         else {
             setYear(date ? dateHelpers.getYear(date) : '');
         }
     };
     var yearBlur = function (_event) {
-        setYear(date ? dateHelpers.formatDate(date, 'yyyy') : '');
+        if (date) {
+            setYear(dateHelpers.formatDate(date, 'yyyy'));
+        }
+        else {
+            var yearNum = Number(year);
+            if (!(yearNum >= minYear && yearNum <= maxYear)) {
+                setYear('');
+            }
+        }
     };
     var yearChange = function (event) {
         setYear(event.target.value);

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

@@ -22,6 +22,6 @@ declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponen
     } | undefined;
     selected?: boolean | undefined;
     startEnhancer?: Enhancer<ListItemSharedProps>;
-    tooltipContent?: React.ReactNode | import("../baseui/popover").StatefulContentRenderProp;
+    tooltipContent?: React.ReactNode | import("../baseui/popover").ContentRenderProp;
 } & React.RefAttributes<HTMLElement>>>;
 export default _default;

package/esm/list/list-item.js

@@ -7,7 +7,8 @@ import useCombinedRefs from '../hooks/useCombinedRef';
 import { useOverrides } from '../overrides';
 import { StyledChildContainer, StyledEndEnhancer, StyledListItem, StyledStartEnhancer } from './styled-component';
 import { useFocusVisible } from '../hooks/useFocusVisible';
-import { StatefulTooltip as DefaultStatefulTooltip } from '../tooltip';
+import { Tooltip as DefaultTooltip } from '../tooltip';
+import useListItemTooltip, { getListItemTooltipHandlers } from './useListItemTooltip';
 var ListItem = React.forwardRef(function (_a, ref) {
     var startEnhancer = _a.startEnhancer, children = _a.children, className = _a.className, style = _a.style, _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 = __rest(_a, ["startEnhancer", "children", "className", "style", "alignItems", "disabled", "endEnhancer", "selected", "highlighted", "autoFocus", "button", "overrides", "tabIndex", "$as", "onClick", "onKeyDown", "onFocus", "onBlur", "tooltipContent"]);
     var ownRef = useRef(null);
@@ -46,9 +47,15 @@ var ListItem = React.forwardRef(function (_a, ref) {
     var renderEnhancer = function (enhancer) {
         return typeof enhancer === 'function' ? enhancer(sharedProps) : enhancer;
     };
-    var _r = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.StatefulTooltip, DefaultStatefulTooltip), 2), StatefulTooltip = _r[0], statefulTooltipProps = _r[1];
-    var listEl = (_jsxs(Root, __assign({ "data-spaceweb": "list-item", role: "listitem", ref: combinedRef, tabIndex: tabIndex, "aria-disabled": disabled, "$as": $as, onClick: disabled ? _noop : onClick, onKeyDown: handleKeyDown, "data-highlighted": highlighted }, sharedProps, restProps, rootProps, useFocusVisibleProps, { style: [style, rootProps === null || rootProps === void 0 ? void 0 : rootProps.style], className: [className, rootProps === null || rootProps === void 0 ? void 0 : rootProps.className] }, { children: [startEnhancer && (_jsx(StartEnhancer, __assign({}, sharedProps, startEnhancerProps, { children: renderEnhancer(startEnhancer) }))), _jsx(ChildContainer, __assign({}, sharedProps, childContainerProps, { children: children })), endEnhancer && (_jsx(EndEnhancer, __assign({}, sharedProps, endEnhancerProps, { children: renderEnhancer(endEnhancer) })))] })));
-    return tooltipContent ? (_jsx(StatefulTooltip, __assign({ placement: "bottom", content: tooltipContent, viewportAsBoundary: true }, statefulTooltipProps, { children: listEl }))) : (listEl);
+    var _r = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.StatefulTooltip, DefaultTooltip), 2), Tooltip = _r[0], tooltipProps = _r[1];
+    var tooltipControlProps = useListItemTooltip({
+        highlighted: highlighted,
+        tooltipHandlers: getListItemTooltipHandlers(tooltipProps),
+    });
+    var listEl = (
+    // eslint-disable-next-line jsx-a11y/role-supports-aria-props -- aria-disabled required for disabled button list items
+    _jsxs(Root, __assign({ "data-spaceweb": "list-item", role: "listitem", ref: combinedRef, tabIndex: tabIndex, "$as": $as, "aria-disabled": disabled, onClick: disabled ? _noop : onClick, onKeyDown: handleKeyDown, "data-highlighted": highlighted }, sharedProps, restProps, rootProps, useFocusVisibleProps, { style: [style, rootProps === null || rootProps === void 0 ? void 0 : rootProps.style], className: [className, rootProps === null || rootProps === void 0 ? void 0 : rootProps.className] }, { children: [startEnhancer && (_jsx(StartEnhancer, __assign({}, sharedProps, startEnhancerProps, { children: renderEnhancer(startEnhancer) }))), _jsx(ChildContainer, __assign({}, sharedProps, childContainerProps, { children: children })), endEnhancer && (_jsx(EndEnhancer, __assign({}, sharedProps, endEnhancerProps, { children: renderEnhancer(endEnhancer) })))] })));
+    return tooltipContent ? (_jsx(Tooltip, __assign({ placement: "bottom", showArrow: true, content: tooltipContent, viewportAsBoundary: true }, tooltipProps, tooltipControlProps, { children: listEl }))) : (listEl);
 });
 ListItem.displayName = 'ListItem';
 ListItem.__standard = 'Component';

package/esm/list/types.d.ts

@@ -1,7 +1,7 @@
 import type { KeyboardEvent, MouseEvent, ReactNode } from 'react';
 import type { Override } from '../overrides/types';
 import type { SpacewebComponentProps } from '../types';
-import type { StatefulTooltipProps } from '../tooltip';
+import type { TooltipProps } from '../tooltip/types';
 export type AlignItems = 'start' | 'center';
 export type Enhancer<SharedProps> = ReactNode | ((props: SharedProps) => ReactNode);
 export type ListItemSharedProps = {
@@ -31,7 +31,7 @@ export type ListItemProps = SpacewebComponentProps & {
     };
     selected?: boolean;
     startEnhancer?: Enhancer<ListItemSharedProps>;
-    tooltipContent?: StatefulTooltipProps['content'];
+    tooltipContent?: TooltipProps['content'];
 };
 export type ListProps = SpacewebComponentProps & {
     children?: ReactNode;

package/esm/list/useListItemTooltip.d.ts

@@ -0,0 +1,10 @@
+import type { TooltipProps } from '../tooltip/types';
+export type ListItemTooltipHandlerProps = Pick<TooltipProps, 'onMouseEnter' | 'onMouseLeave' | 'onFocus' | 'onBlur'>;
+export declare const getListItemTooltipHandlers: (tooltipProps: Record<string, unknown>) => Partial<ListItemTooltipHandlerProps>;
+type ListItemTooltipControlProps = Required<Pick<TooltipProps, 'isOpen'>> & ListItemTooltipHandlerProps;
+type Params = {
+    highlighted: boolean;
+    tooltipHandlers?: Partial<ListItemTooltipHandlerProps>;
+};
+declare const useListItemTooltip: ({ highlighted, tooltipHandlers }: Params) => ListItemTooltipControlProps;
+export default useListItemTooltip;

package/esm/list/useListItemTooltip.js

@@ -0,0 +1,38 @@
+import { __read } from "tslib";
+import { useCallback, useState } from 'react';
+import useCombinedHandler from '../hooks/useCombinedHandler';
+import { isFocusVisible } from '../baseui/utils/focusVisible';
+import { useMenuContext } from '../menu/MenuContext';
+export var getListItemTooltipHandlers = function (tooltipProps) {
+    return ({
+        onMouseEnter: tooltipProps.onMouseEnter,
+        onMouseLeave: tooltipProps.onMouseLeave,
+        onFocus: tooltipProps.onFocus,
+        onBlur: tooltipProps.onBlur,
+    });
+};
+var useListItemTooltip = function (_a) {
+    var highlighted = _a.highlighted, _b = _a.tooltipHandlers, tooltipHandlers = _b === void 0 ? {} : _b;
+    var listItemFocusVisible = useMenuContext().listItemFocusVisible;
+    var _c = __read(useState(false), 2), hoverOpen = _c[0], setHoverOpen = _c[1];
+    var onMouseEnter = tooltipHandlers.onMouseEnter, onMouseLeave = tooltipHandlers.onMouseLeave, onFocus = tooltipHandlers.onFocus, onBlur = tooltipHandlers.onBlur;
+    var openHoverTooltip = useCallback(function () { return setHoverOpen(true); }, []);
+    var closeHoverTooltip = useCallback(function () { return setHoverOpen(false); }, []);
+    var openOnFocusVisible = useCallback(function (event) {
+        if (isFocusVisible(event)) {
+            setHoverOpen(true);
+        }
+    }, []);
+    var onMouseEnterHandler = useCombinedHandler(openHoverTooltip, onMouseEnter);
+    var onMouseLeaveHandler = useCombinedHandler(closeHoverTooltip, onMouseLeave);
+    var onBlurHandler = useCombinedHandler(closeHoverTooltip, onBlur);
+    var onFocusHandler = useCombinedHandler(onFocus, openOnFocusVisible);
+    return {
+        isOpen: hoverOpen || (highlighted && listItemFocusVisible),
+        onMouseEnter: onMouseEnterHandler,
+        onMouseLeave: onMouseLeaveHandler,
+        onFocus: onFocusHandler,
+        onBlur: onBlurHandler,
+    };
+};
+export default useListItemTooltip;

package/esm/locale/en_US.js

@@ -23,6 +23,7 @@ export var DEFAULT_LOCALE = {
         selectPlaceholder: 'Select...',
         clearOptionLabel: 'Unassign',
         selectedValuesPrefix: 'Selected ${values}',
+        selectedMultiValuesPrefix: 'Selected ${count} ${countLabel} ${values}',
         item: 'item',
         items: 'items',
         multiValueNavigationDescription: 'Use Left and Right arrow keys to navigate between selected values. Enter BackSpace to remove currently focused value',

package/esm/menu/StatefulSubMenu.d.ts

@@ -81,7 +81,7 @@ declare const StatefulSubMenu: import("react").ForwardRefExoticComponent<Omit<Me
                     } | undefined;
                     selected?: boolean | undefined;
                     startEnhancer?: import("../list/types").Enhancer<import("../list").ListItemSharedProps>;
-                    tooltipContent?: ReactNode | import("../baseui/popover").StatefulContentRenderProp;
+                    tooltipContent?: ReactNode | import("../baseui/popover").ContentRenderProp;
                 } & Record<string, any>> | undefined;
                 Popover?: Override<Omit<import("../baseui/popover").PopoverProps, "children" | "overrides" | "placement" | "triggerType"> & {
                     overrides?: ({

package/esm/menu/SubMenu.d.ts

@@ -82,7 +82,7 @@ declare const SubMenu: import("react").ForwardRefExoticComponent<Omit<MenuProps,
                     } | undefined;
                     selected?: boolean | undefined;
                     startEnhancer?: import("../list/types").Enhancer<import("../list").ListItemSharedProps>;
-                    tooltipContent?: ReactNode | import("../baseui/popover").StatefulContentRenderProp;
+                    tooltipContent?: ReactNode | import("../baseui/popover").ContentRenderProp;
                 } & Record<string, any>> | undefined;
                 Popover?: Override<Omit<import("../baseui/popover").PopoverProps, "children" | "overrides" | "placement" | "triggerType"> & {
                     overrides?: ({

package/esm/menu/menu-item.d.ts

@@ -30,7 +30,7 @@ declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponen
             } | undefined;
             selected?: boolean | undefined;
             startEnhancer?: import("../list/types").Enhancer<ListItemSharedProps>;
-            tooltipContent?: React.ReactNode | import("../baseui/popover").StatefulContentRenderProp;
+            tooltipContent?: React.ReactNode | import("../baseui/popover").ContentRenderProp;
         } & Record<string, any>> | undefined;
         Popover?: import("../overrides").Override<Omit<import("../baseui/popover").PopoverProps, "children" | "overrides" | "placement" | "triggerType"> & {
             overrides?: ({

package/esm/select/locale.d.ts

@@ -5,6 +5,7 @@ export type SelectLocale = {
     selectPlaceholder: string;
     clearOptionLabel: string;
     selectedValuesPrefix: string;
+    selectedMultiValuesPrefix: string;
     item: string;
     items: string;
     collapsibleMenuDescription: string;

package/esm/select/selectMenuAdapter/CollapsibleSelectMenu.d.ts

@@ -67,7 +67,7 @@ export declare const CollapsibleSelectMenu: ({ overrides, value, items: groupedI
                     } | undefined;
                     selected?: boolean | undefined;
                     startEnhancer?: import("../../list/types").Enhancer<import("../../list").ListItemSharedProps>;
-                    tooltipContent?: ReactNode | import("../../baseui/popover").StatefulContentRenderProp;
+                    tooltipContent?: ReactNode | import("../../baseui/popover").ContentRenderProp;
                 } & Record<string, any>> | undefined;
                 Popover?: import("../../overrides").Override<Omit<import("../../baseui/popover").PopoverProps, "children" | "overrides" | "placement" | "triggerType"> & {
                     overrides?: ({

package/esm/select/selectMenuAdapter/SelectMenuItem.d.ts

@@ -38,7 +38,7 @@ declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponen
                     } | undefined;
                     selected?: boolean | undefined;
                     startEnhancer?: import("../../list/types").Enhancer<import("../../list").ListItemSharedProps>;
-                    tooltipContent?: React.ReactNode | import("../../baseui/popover").StatefulContentRenderProp;
+                    tooltipContent?: React.ReactNode | import("../../baseui/popover").ContentRenderProp;
                 } & Record<string, any>> | undefined;
                 Popover?: Override<Omit<import("../../baseui/popover").PopoverProps, "children" | "overrides" | "placement" | "triggerType"> & {
                     overrides?: ({

package/esm/select/styled-component.js

@@ -40,7 +40,7 @@ export var StyledInput = styled('input', 'bg-transparent border-none inline-bloc
     return ($disabled ? 'webkit-text-transparent' : '');
 });
 var StyledOverlayContentContainer = styled('div', 'overflow-auto rounded-inherit w-[--sw-width]');
-var getCommaSeparatedValues = function (value, limitTags, labelKey, locale) {
+var getCommaSeparatedValues = function (value, limitTags, labelKey, locale, multi) {
     if (limitTags === void 0) { limitTags = Number(Infinity); }
     var _limitTags = limitTags < 0 ? Number(Infinity) : limitTags;
     var commaSeparatedValues = value === null || value === void 0 ? void 0 : value.slice(0, _limitTags).map(function (val) { return val[labelKey]; });
@@ -49,16 +49,26 @@ var getCommaSeparatedValues = function (value, limitTags, labelKey, locale) {
         commaSeparatedValues.push("".concat("+".concat(extraTagNumber, " ").concat(extraTagNumber === 1 ? locale.select.item : locale.select.items)));
     }
     var _commaSeparatedValues = commaSeparatedValues === null || commaSeparatedValues === void 0 ? void 0 : commaSeparatedValues.join(',');
-    return value && value.length > 0
-        ? "".concat(getInterpolatedString(locale.select.selectedValuesPrefix, { values: _commaSeparatedValues }), ".")
-        : '';
+    if (!(value === null || value === void 0 ? void 0 : value.length)) {
+        return '';
+    }
+    if (multi) {
+        var count = value.length;
+        var countLabel = count === 1 ? locale.select.item : locale.select.items;
+        return "".concat(getInterpolatedString(locale.select.selectedMultiValuesPrefix, {
+            count: String(count),
+            countLabel: countLabel,
+            values: _commaSeparatedValues,
+        }), ".");
+    }
+    return "".concat(getInterpolatedString(locale.select.selectedValuesPrefix, { values: _commaSeparatedValues }), ".");
 };
 var InputContainer = function (_a) {
     var _b;
     var size = _a.size, $value = _a.$value, $labelKey = _a.$labelKey, placeholder = _a.placeholder, $limitTags = _a.$limitTags, props = __rest(_a, ["size", "$value", "$labelKey", "placeholder", "$limitTags"]);
     var locale = useLocale();
     var listboxId = useSelectIds().listboxId;
-    var commaSeparatedValues = getCommaSeparatedValues($value, $limitTags, $labelKey, locale);
+    var commaSeparatedValues = getCommaSeparatedValues($value, $limitTags, $labelKey, locale, props.$multi);
     var baseAriaDescribedBy = (_b = props['aria-describedby']) !== null && _b !== void 0 ? _b : '';
     var selectedValuesId = useUniqueId();
     var ariaDescribedBy = commaSeparatedValues ? "".concat(selectedValuesId, " ").concat(baseAriaDescribedBy) : baseAriaDescribedBy;
@@ -77,7 +87,7 @@ var Input = forwardRef(function (_a, ref) {
     var placeholder = _a.placeholder, $value = _a.$value, $labelKey = _a.$labelKey, _c = _a.$limitTags, $limitTags = _c === void 0 ? Number(Infinity) : _c, props = __rest(_a, ["placeholder", "$value", "$labelKey", "$limitTags"]);
     var locale = useLocale();
     var _d = useSelectIds(), listboxId = _d.listboxId, inputId = _d.inputId;
-    var commaSeparatedValues = getCommaSeparatedValues($value, $limitTags, $labelKey, locale);
+    var commaSeparatedValues = getCommaSeparatedValues($value, $limitTags, $labelKey, locale, props.$multi);
     var baseAriaDescribedBy = (_b = props['aria-describedby']) !== null && _b !== void 0 ? _b : '';
     var selectedValuesId = useUniqueId();
     var ariaDescribedBy = commaSeparatedValues ? "".concat(selectedValuesId, " ").concat(baseAriaDescribedBy) : baseAriaDescribedBy;

package/list/list-item.d.ts

@@ -22,6 +22,6 @@ declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponen
     } | undefined;
     selected?: boolean | undefined;
     startEnhancer?: Enhancer<ListItemSharedProps>;
-    tooltipContent?: React.ReactNode | import("../baseui/popover").StatefulContentRenderProp;
+    tooltipContent?: React.ReactNode | import("../baseui/popover").ContentRenderProp;
 } & React.RefAttributes<HTMLElement>>>;
 export default _default;

package/list/list-item.js

@@ -10,6 +10,7 @@ var overrides_1 = require("../overrides");
 var styled_component_1 = require("./styled-component");
 var useFocusVisible_1 = require("../hooks/useFocusVisible");
 var tooltip_1 = require("../tooltip");
+var useListItemTooltip_1 = tslib_1.__importStar(require("./useListItemTooltip"));
 var ListItem = React.forwardRef(function (_a, ref) {
     var startEnhancer = _a.startEnhancer, children = _a.children, className = _a.className, style = _a.style, _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 = tslib_1.__rest(_a, ["startEnhancer", "children", "className", "style", "alignItems", "disabled", "endEnhancer", "selected", "highlighted", "autoFocus", "button", "overrides", "tabIndex", "$as", "onClick", "onKeyDown", "onFocus", "onBlur", "tooltipContent"]);
     var ownRef = (0, react_1.useRef)(null);
@@ -48,9 +49,15 @@ var ListItem = React.forwardRef(function (_a, ref) {
     var renderEnhancer = function (enhancer) {
         return typeof enhancer === 'function' ? enhancer(sharedProps) : enhancer;
     };
-    var _r = 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, 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, { style: [style, rootProps === null || rootProps === void 0 ? void 0 : rootProps.style], className: [className, rootProps === null || rootProps === void 0 ? void 0 : rootProps.className] }, { children: [startEnhancer && ((0, jsx_runtime_1.jsx)(StartEnhancer, tslib_1.__assign({}, sharedProps, startEnhancerProps, { children: renderEnhancer(startEnhancer) }))), (0, jsx_runtime_1.jsx)(ChildContainer, tslib_1.__assign({}, sharedProps, childContainerProps, { children: children })), endEnhancer && ((0, jsx_runtime_1.jsx)(EndEnhancer, tslib_1.__assign({}, sharedProps, endEnhancerProps, { children: renderEnhancer(endEnhancer) })))] })));
-    return tooltipContent ? ((0, jsx_runtime_1.jsx)(StatefulTooltip, tslib_1.__assign({ placement: "bottom", content: tooltipContent, viewportAsBoundary: true }, statefulTooltipProps, { children: listEl }))) : (listEl);
+    var _r = tslib_1.__read((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.StatefulTooltip, tooltip_1.Tooltip), 2), Tooltip = _r[0], tooltipProps = _r[1];
+    var tooltipControlProps = (0, useListItemTooltip_1.default)({
+        highlighted: highlighted,
+        tooltipHandlers: (0, useListItemTooltip_1.getListItemTooltipHandlers)(tooltipProps),
+    });
+    var listEl = (
+    // eslint-disable-next-line jsx-a11y/role-supports-aria-props -- aria-disabled required for disabled button list items
+    (0, jsx_runtime_1.jsxs)(Root, tslib_1.__assign({ "data-spaceweb": "list-item", role: "listitem", ref: combinedRef, tabIndex: tabIndex, "$as": $as, "aria-disabled": disabled, onClick: disabled ? noop_1.default : onClick, onKeyDown: handleKeyDown, "data-highlighted": highlighted }, sharedProps, restProps, rootProps, useFocusVisibleProps, { style: [style, rootProps === null || rootProps === void 0 ? void 0 : rootProps.style], className: [className, rootProps === null || rootProps === void 0 ? void 0 : rootProps.className] }, { children: [startEnhancer && ((0, jsx_runtime_1.jsx)(StartEnhancer, tslib_1.__assign({}, sharedProps, startEnhancerProps, { children: renderEnhancer(startEnhancer) }))), (0, jsx_runtime_1.jsx)(ChildContainer, tslib_1.__assign({}, sharedProps, childContainerProps, { children: children })), endEnhancer && ((0, jsx_runtime_1.jsx)(EndEnhancer, tslib_1.__assign({}, sharedProps, endEnhancerProps, { children: renderEnhancer(endEnhancer) })))] })));
+    return tooltipContent ? ((0, jsx_runtime_1.jsx)(Tooltip, tslib_1.__assign({ placement: "bottom", showArrow: true, content: tooltipContent, viewportAsBoundary: true }, tooltipProps, tooltipControlProps, { children: listEl }))) : (listEl);
 });
 ListItem.displayName = 'ListItem';
 ListItem.__standard = 'Component';

package/list/types.d.ts

@@ -1,7 +1,7 @@
 import type { KeyboardEvent, MouseEvent, ReactNode } from 'react';
 import type { Override } from '../overrides/types';
 import type { SpacewebComponentProps } from '../types';
-import type { StatefulTooltipProps } from '../tooltip';
+import type { TooltipProps } from '../tooltip/types';
 export type AlignItems = 'start' | 'center';
 export type Enhancer<SharedProps> = ReactNode | ((props: SharedProps) => ReactNode);
 export type ListItemSharedProps = {
@@ -31,7 +31,7 @@ export type ListItemProps = SpacewebComponentProps & {
     };
     selected?: boolean;
     startEnhancer?: Enhancer<ListItemSharedProps>;
-    tooltipContent?: StatefulTooltipProps['content'];
+    tooltipContent?: TooltipProps['content'];
 };
 export type ListProps = SpacewebComponentProps & {
     children?: ReactNode;

package/list/useListItemTooltip.d.ts

@@ -0,0 +1,10 @@
+import type { TooltipProps } from '../tooltip/types';
+export type ListItemTooltipHandlerProps = Pick<TooltipProps, 'onMouseEnter' | 'onMouseLeave' | 'onFocus' | 'onBlur'>;
+export declare const getListItemTooltipHandlers: (tooltipProps: Record<string, unknown>) => Partial<ListItemTooltipHandlerProps>;
+type ListItemTooltipControlProps = Required<Pick<TooltipProps, 'isOpen'>> & ListItemTooltipHandlerProps;
+type Params = {
+    highlighted: boolean;
+    tooltipHandlers?: Partial<ListItemTooltipHandlerProps>;
+};
+declare const useListItemTooltip: ({ highlighted, tooltipHandlers }: Params) => ListItemTooltipControlProps;
+export default useListItemTooltip;

package/list/useListItemTooltip.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getListItemTooltipHandlers = void 0;
+var tslib_1 = require("tslib");
+var react_1 = require("react");
+var useCombinedHandler_1 = tslib_1.__importDefault(require("../hooks/useCombinedHandler"));
+var focusVisible_1 = require("../baseui/utils/focusVisible");
+var MenuContext_1 = require("../menu/MenuContext");
+var getListItemTooltipHandlers = function (tooltipProps) {
+    return ({
+        onMouseEnter: tooltipProps.onMouseEnter,
+        onMouseLeave: tooltipProps.onMouseLeave,
+        onFocus: tooltipProps.onFocus,
+        onBlur: tooltipProps.onBlur,
+    });
+};
+exports.getListItemTooltipHandlers = getListItemTooltipHandlers;
+var useListItemTooltip = function (_a) {
+    var highlighted = _a.highlighted, _b = _a.tooltipHandlers, tooltipHandlers = _b === void 0 ? {} : _b;
+    var listItemFocusVisible = (0, MenuContext_1.useMenuContext)().listItemFocusVisible;
+    var _c = tslib_1.__read((0, react_1.useState)(false), 2), hoverOpen = _c[0], setHoverOpen = _c[1];
+    var onMouseEnter = tooltipHandlers.onMouseEnter, onMouseLeave = tooltipHandlers.onMouseLeave, onFocus = tooltipHandlers.onFocus, onBlur = tooltipHandlers.onBlur;
+    var openHoverTooltip = (0, react_1.useCallback)(function () { return setHoverOpen(true); }, []);
+    var closeHoverTooltip = (0, react_1.useCallback)(function () { return setHoverOpen(false); }, []);
+    var openOnFocusVisible = (0, react_1.useCallback)(function (event) {
+        if ((0, focusVisible_1.isFocusVisible)(event)) {
+            setHoverOpen(true);
+        }
+    }, []);
+    var onMouseEnterHandler = (0, useCombinedHandler_1.default)(openHoverTooltip, onMouseEnter);
+    var onMouseLeaveHandler = (0, useCombinedHandler_1.default)(closeHoverTooltip, onMouseLeave);
+    var onBlurHandler = (0, useCombinedHandler_1.default)(closeHoverTooltip, onBlur);
+    var onFocusHandler = (0, useCombinedHandler_1.default)(onFocus, openOnFocusVisible);
+    return {
+        isOpen: hoverOpen || (highlighted && listItemFocusVisible),
+        onMouseEnter: onMouseEnterHandler,
+        onMouseLeave: onMouseLeaveHandler,
+        onFocus: onFocusHandler,
+        onBlur: onBlurHandler,
+    };
+};
+exports.default = useListItemTooltip;

package/locale/en_US.js

@@ -26,6 +26,7 @@ exports.DEFAULT_LOCALE = {
         selectPlaceholder: 'Select...',
         clearOptionLabel: 'Unassign',
         selectedValuesPrefix: 'Selected ${values}',
+        selectedMultiValuesPrefix: 'Selected ${count} ${countLabel} ${values}',
         item: 'item',
         items: 'items',
         multiValueNavigationDescription: 'Use Left and Right arrow keys to navigate between selected values. Enter BackSpace to remove currently focused value',

package/menu/StatefulSubMenu.d.ts

@@ -81,7 +81,7 @@ declare const StatefulSubMenu: import("react").ForwardRefExoticComponent<Omit<Me
                     } | undefined;
                     selected?: boolean | undefined;
                     startEnhancer?: import("../list/types").Enhancer<import("../list").ListItemSharedProps>;
-                    tooltipContent?: ReactNode | import("../baseui/popover").StatefulContentRenderProp;
+                    tooltipContent?: ReactNode | import("../baseui/popover").ContentRenderProp;
                 } & Record<string, any>> | undefined;
                 Popover?: Override<Omit<import("../baseui/popover").PopoverProps, "children" | "overrides" | "placement" | "triggerType"> & {
                     overrides?: ({

package/menu/SubMenu.d.ts

@@ -82,7 +82,7 @@ declare const SubMenu: import("react").ForwardRefExoticComponent<Omit<MenuProps,
                     } | undefined;
                     selected?: boolean | undefined;
                     startEnhancer?: import("../list/types").Enhancer<import("../list").ListItemSharedProps>;
-                    tooltipContent?: ReactNode | import("../baseui/popover").StatefulContentRenderProp;
+                    tooltipContent?: ReactNode | import("../baseui/popover").ContentRenderProp;
                 } & Record<string, any>> | undefined;
                 Popover?: Override<Omit<import("../baseui/popover").PopoverProps, "children" | "overrides" | "placement" | "triggerType"> & {
                     overrides?: ({