@sprinklrjs/spaceweb 14.15.2 → 14.16.0

package/menu/useKeyboardNavigation.js

@@ -42,10 +42,14 @@ var useKeyboardNavigation = function (_a) {
         _setHighlightedItem(item);
         setListItemFocusVisible(showFocusVisibleStyles);
     }, []);
-    // highlight first item in the list if prevHighlighted item is no longer in dom
+    // Re-target highlight when the previous item has left the DOM or is no longer highlightable
+    // (filter, unmount, disabled). If nothing is highlightable, clear so aria-activedescendant
+    // is not left pointing at a detached or disabled id.
     (0, react_1.useLayoutEffect)(function () {
-        var isHighlightedItemInDom = ownerDocument === null || ownerDocument === void 0 ? void 0 : ownerDocument.body.contains(highlightedItem);
-        if (disableAutoHighlight || isHighlightedItemInDom || !navigationEnabled || !listItemsContainerRef) {
+        var shouldKeepHighlight = Boolean(highlightedItem) &&
+            Boolean(ownerDocument === null || ownerDocument === void 0 ? void 0 : ownerDocument.body.contains(highlightedItem)) &&
+            (0, helpers_1.canHighlightItem)(highlightedItem);
+        if (disableAutoHighlight || shouldKeepHighlight || !navigationEnabled || !listItemsContainerRef) {
             return;
         }
         var firstHighlightableItem = (0, helpers_1.getFirstHighlightableElement)(listItemsContainerRef).firstHighlightableItem;
@@ -56,6 +60,9 @@ var useKeyboardNavigation = function (_a) {
             }
             setHighlightedItem(firstHighlightableItem, showFocusRing);
         }
+        else {
+            setHighlightedItem(null);
+        }
         // eslint-disable-next-line react-hooks/exhaustive-deps -- run this hook only when children changes
     }, [children]);
     (0, react_1.useEffect)(function () {

package/menu/useStatefulMenu.js

@@ -51,18 +51,24 @@ var useStatefulMenu = function (_a) {
         (_a = onHighlightedItemChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onHighlightedItemChangeRef, highlightedItem);
     }, [highlightedItem, onHighlightedItemChangeRef]);
     (0, react_1.useEffect)(function () {
-        var activeElement;
-        // set aria-activedescendant to current focused element whenever highlighted item changes
-        if (navigationEnabled && (highlightedItem === null || highlightedItem === void 0 ? void 0 : highlightedItem.id) && document.activeElement) {
-            activeElement = document.activeElement;
-            activeElement.setAttribute('aria-activedescendant', highlightedItem.id);
+        if (!navigationEnabled || !(highlightedItem === null || highlightedItem === void 0 ? void 0 : highlightedItem.id) || !highlightedItem.isConnected) {
+            return undefined;
+        }
+        var ownerDocument = highlightedItem.ownerDocument;
+        // menus keep focus on the list, so fall back to the focused element. Never use body.
+        var activeElement = ownerDocument.activeElement instanceof HTMLElement ? ownerDocument.activeElement : null;
+        var host = keyboardFocusRestoreTarget !== null && keyboardFocusRestoreTarget !== void 0 ? keyboardFocusRestoreTarget : activeElement;
+        if (!host || host === ownerDocument.body) {
+            return undefined;
         }
+        var highlightedItemId = highlightedItem.id;
+        host.setAttribute('aria-activedescendant', highlightedItemId);
         return function () {
-            if (activeElement) {
-                activeElement.removeAttribute('aria-activedescendant');
+            if (host.getAttribute('aria-activedescendant') === highlightedItemId) {
+                host.removeAttribute('aria-activedescendant');
             }
         };
-    }, [navigationEnabled, highlightedItem]);
+    }, [navigationEnabled, highlightedItem, keyboardFocusRestoreTarget]);
     return {
         highlightedItem: highlightedItem,
         setHighlightedItem: setHighlightedItem,

package/modal/modal.js

@@ -70,8 +70,8 @@ var Modal = function (_a) {
         return {};
     }, [size, px2rem]);
     var dialogA11yProps = (0, react_1.useMemo)(function () { return ({
-        'aria-label': ariaLabel,
-        'aria-labelledby': ariaLabelledBy || headerTitleId,
+        'aria-label': ariaLabelledBy ? undefined : ariaLabel,
+        'aria-labelledby': ariaLabelledBy || (ariaLabel ? undefined : headerTitleId),
     }); }, [ariaLabel, ariaLabelledBy, headerTitleId]);
     var _overrides = (0, react_1.useMemo)(function () {
         return (0, overrides_2.mergeOverrides)({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sprinklrjs/spaceweb",
-  "version": "14.15.2",
+  "version": "14.16.0",
   "description": "Components for SpaceWeb",
   "main": "index.js",
   "module": "./esm/index.js",
@@ -81,7 +81,6 @@
     "@testing-library/react-hooks": "^7.0.1",
     "@testing-library/user-event": "^13.2.1",
     "@types/jest": "^26.0.24",
-    "@types/jest-axe": "^3.5.9",
     "@types/lodash": "^4.14.149",
     "@types/react-is": "^17.0.2",
     "@vvo/tzdb": "^6.158.0",
@@ -93,7 +92,6 @@
     "enzyme-adapter-react-16": "^1.15.2",
     "glob": "^7.1.6",
     "jest": "^26.5.2",
-    "jest-axe": "^5.0.1",
     "mq-polyfill": "^1.1.8",
     "postcss": "^7.0.27",
     "postcss-js": "^2.0.3",
@@ -102,7 +100,7 @@
     "typescript": "~5.0.0"
   },
   "peerDependencies": {
-    "@sprinklrjs/spaceweb-themes": "14.15.2",
+    "@sprinklrjs/spaceweb-themes": "14.16.0",
     "react": ">=17.0.2 <19.0.0",
     "react-dom": ">=17.0.2 <19.0.0"
   }

package/select/overlaySelect/hooks/useOverlaySelectOverrides.js

@@ -129,6 +129,7 @@ var useOverlaySelectOverrides = function (props) {
     }, [closePopover, onChange, closeOnSelect]);
     var _h = (0, useStickyElement_1.default)(), isSticky = _h.isSticky, setStickySentinelRef = _h.setStickySentinelRef;
     var _j = useSearchContainerHeight(), containerHeight = _j.containerHeight, setContainerElement = _j.setContainerElement;
+    var ariaLabel = props['aria-label'];
     var memoizedOverrides = (0, react_1.useMemo)(function () { return ({
         // BaseSelect wil render this Popover component with DropdownContainer as content and ControlContainer as children/target
         Popover: {
@@ -155,6 +156,7 @@ var useOverlaySelectOverrides = function (props) {
                 'aria-expanded': popoverOpen,
                 'aria-autocomplete': 'list',
                 'aria-haspopup': 'listbox',
+                'aria-label': ariaLabel,
                 overrides: {
                     After: isLoading ? SelectLoader : function () { return null; },
                     ClearIcon: {
@@ -244,6 +246,7 @@ var useOverlaySelectOverrides = function (props) {
         scrollContainer,
         scrollElement,
         popoverOpen,
+        ariaLabel,
     ]);
     var overrides = (0, react_1.useMemo)(function () { return (0, overrides_1.mergeOverrides)(memoizedOverrides, (0, omit_1.default)(props.overrides, overridesToOmit)); }, [memoizedOverrides, props.overrides]);
     return {

package/select/selectMenuAdapter/CollapsibleSelectMenu.js

@@ -143,7 +143,7 @@ var CollapsibleSelectMenu = function (_a) {
                 // https://ui5.sap.com/#/entity/sap.m.MultiComboBox/sample/sap.m.sample.MultiComboBoxSelectAll
                 role: "checkbox", className: ['m-2', baseuiMenuItemProps === null || baseuiMenuItemProps === void 0 ? void 0 : baseuiMenuItemProps.className] }), "select-all-option")) : null, groupConfig.map(function (_group, index) {
                 var _a;
-                var _b, _c;
+                var _b, _c, _d;
                 var groupId = _group.id, groupLabel = _group.label;
                 var itemsInGroup = groupedItems[groupId];
                 var group = _group;
@@ -161,12 +161,20 @@ var CollapsibleSelectMenu = function (_a) {
                     _a[constants_2.GROUP_SELECT_ALL_ID] = true,
                     _a.selected = groupSelectAllSelected,
                     _a);
-                return ((0, jsx_runtime_1.jsxs)(Collapsible, tslib_1.__assign({ className: index === 0 && selectAllItem ? 'border-t-1 border-solid spr-border-primary' : '', group: group, expanded: disableWhenSelectAllChecked && globalSelectAllSelected ? false : groupId === expandedGroupId, disabled: disableWhenSelectAllChecked && globalSelectAllSelected, onClick: handleOnClick }, { children: [(0, jsx_runtime_1.jsx)(hidden_element_1.HiddenElement, tslib_1.__assign({ id: menuDescriptionId !== null && menuDescriptionId !== void 0 ? menuDescriptionId : '' }, { children: "".concat(groupLabel, " ").concat(locale.groupExpandedSuffix) })), (0, isEmpty_1.default)(itemsInGroup) ? ((0, jsx_runtime_1.jsx)(NoResultsOverriden, tslib_1.__assign({ "aria-live": "polite", "aria-atomic": true, msg: noResultsMsg, noResultsConfig: noResultsConfig, "aria-disabled": true, "$groupId": groupId }, noResultsProps))) : ((0, jsx_runtime_1.jsxs)(MenuComponent, tslib_1.__assign({ resetMenuHighlightOnMouseLeave: true, focusWhenNavigationEnabled: false, disableAutoHighlight: isRootSelectAllHighlighted, keyboardFocusRestoreTarget: inputElement, tabIndex: -1, selectOnTab: selectOnTab, getActionsElement: getActionsElement }, menuProps, { role: "listbox", id: listboxId, virtual: virtual, className: ['overflow-auto max-h-50 pt-0', menuProps === null || menuProps === void 0 ? void 0 : menuProps.className], onScroll: function (e) {
+                var menuChildren = (0, isEmpty_1.default)(itemsInGroup)
+                    ? [
+                        (0, jsx_runtime_1.jsx)(NoResultsOverriden, tslib_1.__assign({ msg: noResultsMsg, noResultsConfig: noResultsConfig, "$groupId": groupId }, noResultsProps), "no-results"),
+                    ]
+                    : tslib_1.__spreadArray([
+                        shouldDisplayGroupSelectAll ? ((0, jsx_runtime_1.jsx)(SelectMenuItem_1.default, tslib_1.__assign({ overrides: menuItemOverrides, item: groupSelectAllItem, "data-testid": "".concat(group.label, "-group-select-all"), selected: groupSelectAllSelected, multi: multi, getItemLabel: getItemLabel, labelKey: labelKey, valueKey: valueKey, onItemSelect: onItemSelect, "$item": groupSelectAllItem, button: true, disabled: group.count <= countDisabledOptions, highlighted: isMenuItemHighlighted }, baseuiMenuItemProps), "select-all-option")) : null,
+                        clearAsOptionItem ? ((0, jsx_runtime_1.jsx)(SelectMenuItem_1.default, tslib_1.__assign({ overrides: menuItemOverrides, item: clearAsOptionItem, selected: false, multi: multi, getItemLabel: getItemLabel, labelKey: labelKey, valueKey: valueKey, onItemSelect: onItemSelect, "$item": clearAsOptionItem, button: true, highlighted: isMenuItemHighlighted }, baseuiMenuItemProps), "clear-option")) : null
+                    ], tslib_1.__read(itemsInGroup.map(function (item) {
+                        var selected = selectedValuesSet.has(item[valueKey]);
+                        return ((0, jsx_runtime_1.jsx)(SelectMenuItem_1.default, tslib_1.__assign({ overrides: menuItemOverrides, item: item, selected: selected, multi: multi, getItemLabel: getItemLabel, labelKey: labelKey, valueKey: valueKey, onItemSelect: onItemSelect, "$item": item, button: true, highlighted: isMenuItemHighlighted }, baseuiMenuItemProps), item.isCreatable ? 'creatable-option' : item[valueKey]));
+                    })), false).filter(Boolean);
+                return ((0, jsx_runtime_1.jsxs)(Collapsible, tslib_1.__assign({ className: index === 0 && selectAllItem ? 'border-t-1 border-solid spr-border-primary' : '', group: group, expanded: disableWhenSelectAllChecked && globalSelectAllSelected ? false : groupId === expandedGroupId, disabled: disableWhenSelectAllChecked && globalSelectAllSelected, onClick: handleOnClick }, { children: [(0, jsx_runtime_1.jsx)(hidden_element_1.HiddenElement, tslib_1.__assign({ id: menuDescriptionId !== null && menuDescriptionId !== void 0 ? menuDescriptionId : '' }, { children: "".concat(groupLabel, " ").concat(locale.groupExpandedSuffix) })), (0, jsx_runtime_1.jsx)(MenuComponent, tslib_1.__assign({ resetMenuHighlightOnMouseLeave: true, focusWhenNavigationEnabled: false, disableAutoHighlight: isRootSelectAllHighlighted, keyboardFocusRestoreTarget: inputElement, tabIndex: -1, selectOnTab: selectOnTab, getActionsElement: getActionsElement }, menuProps, { role: "listbox", id: listboxId, "aria-label": (_d = menuProps === null || menuProps === void 0 ? void 0 : menuProps['aria-label']) !== null && _d !== void 0 ? _d : groupLabel, virtual: virtual && !(0, isEmpty_1.default)(itemsInGroup), className: ['overflow-auto max-h-50 pt-0', menuProps === null || menuProps === void 0 ? void 0 : menuProps.className], onScroll: function (e) {
                                 $onPaginate === null || $onPaginate === void 0 ? void 0 : $onPaginate(e, groupId);
-                            }, onHighlightedItemChange: handleOnHighlightedItemChange, ref: menuRef }, { children: [shouldDisplayGroupSelectAll ? ((0, jsx_runtime_1.jsx)(SelectMenuItem_1.default, tslib_1.__assign({ overrides: menuItemOverrides, item: groupSelectAllItem, "data-testid": "".concat(group.label, "-group-select-all"), selected: groupSelectAllSelected, multi: multi, getItemLabel: getItemLabel, labelKey: labelKey, valueKey: valueKey, onItemSelect: onItemSelect, "$item": groupSelectAllItem, button: true, disabled: group.count <= countDisabledOptions, highlighted: isMenuItemHighlighted }, baseuiMenuItemProps), "select-all-option")) : null, clearAsOptionItem ? ((0, jsx_runtime_1.jsx)(SelectMenuItem_1.default, tslib_1.__assign({ overrides: menuItemOverrides, item: clearAsOptionItem, selected: false, multi: multi, getItemLabel: getItemLabel, labelKey: labelKey, valueKey: valueKey, onItemSelect: onItemSelect, "$item": clearAsOptionItem, button: true, highlighted: isMenuItemHighlighted }, baseuiMenuItemProps), "clear-option")) : null, itemsInGroup.map(function (item) {
-                                    var selected = selectedValuesSet.has(item[valueKey]);
-                                    return ((0, jsx_runtime_1.jsx)(SelectMenuItem_1.default, tslib_1.__assign({ overrides: menuItemOverrides, item: item, selected: selected, multi: multi, getItemLabel: getItemLabel, labelKey: labelKey, valueKey: valueKey, onItemSelect: onItemSelect, "$item": item, button: true, highlighted: isMenuItemHighlighted }, baseuiMenuItemProps), item.isCreatable ? 'creatable-option' : item[valueKey]));
-                                })] })))] }), groupId));
+                            }, onHighlightedItemChange: handleOnHighlightedItemChange, ref: menuRef }, { children: menuChildren }))] }), groupId));
             })] })));
 };
 exports.CollapsibleSelectMenu = CollapsibleSelectMenu;

package/select/selectMenuAdapter/NestedSelectMenuAdapter.js

@@ -81,6 +81,6 @@ var NestedSelectMenuAdapter = function (props) {
         }
         return null;
     };
-    return totalCount ? ((0, jsx_runtime_1.jsx)(MenuOverriden, tslib_1.__assign({ resetMenuHighlightOnMouseLeave: true, focusWhenNavigationEnabled: false, keyboardFocusRestoreTarget: inputElement, "$multi": multi, captureScroll: captureScroll, tabIndex: -1, "aria-label": "Menu", role: "listbox", getActionsElement: getActionsElement }, baseuiMenuListProps, { id: listboxId, virtual: virtual, overscanCount: overscanCount, items: props.items.__ungrouped, itemRenderer: itemRenderer }, menuProps, { getItemLabel: getItemLabel !== null && getItemLabel !== void 0 ? getItemLabel : defaultItemLabel }))) : ((0, jsx_runtime_1.jsx)(menu_1.Menu, tslib_1.__assign({ resetMenuHighlightOnMouseLeave: true, focusWhenNavigationEnabled: false, keyboardFocusRestoreTarget: inputElement, tabIndex: -1, "aria-label": "Menu", role: "listbox", getActionsElement: getActionsElement, id: listboxId }, { children: (0, jsx_runtime_1.jsx)(NoResultsOverriden, tslib_1.__assign({ "aria-live": "polite", "aria-atomic": true, msg: noResultsMsg, noResultsConfig: noResultsConfig, "aria-disabled": true }, noResultsProps)) })));
+    return totalCount ? ((0, jsx_runtime_1.jsx)(MenuOverriden, tslib_1.__assign({ resetMenuHighlightOnMouseLeave: true, focusWhenNavigationEnabled: false, keyboardFocusRestoreTarget: inputElement, "$multi": multi, captureScroll: captureScroll, tabIndex: -1, "aria-label": "Menu", role: "listbox", getActionsElement: getActionsElement }, baseuiMenuListProps, { id: listboxId, virtual: virtual, overscanCount: overscanCount, items: props.items.__ungrouped, itemRenderer: itemRenderer }, menuProps, { getItemLabel: getItemLabel !== null && getItemLabel !== void 0 ? getItemLabel : defaultItemLabel }))) : ((0, jsx_runtime_1.jsx)(menu_1.Menu, tslib_1.__assign({ resetMenuHighlightOnMouseLeave: true, focusWhenNavigationEnabled: false, keyboardFocusRestoreTarget: inputElement, tabIndex: -1, "aria-label": "Menu", role: "listbox", getActionsElement: getActionsElement, id: listboxId }, { children: (0, jsx_runtime_1.jsx)(NoResultsOverriden, tslib_1.__assign({ msg: noResultsMsg, noResultsConfig: noResultsConfig }, noResultsProps)) })));
 };
 exports.default = NestedSelectMenuAdapter;

package/select/selectMenuAdapter/SelectMenuAdapter.js

@@ -61,24 +61,26 @@ var SelectMenuAdapter = function (props) {
     }); }, [mergedOverrides.ListItemText, mergedOverrides.MenuItem, mergedOverrides.Checkbox]);
     var currentCount = 0;
     var totalCount = (0, utils_1.normalizeOptions)(groupedItems).length;
-    var itemsToRender = (0, flatten_1.default)(Object.keys(removeUngroupedIfEmpty(groupedItems)).map(function (itemGroup, index) {
+    var optionItems = (0, flatten_1.default)(Object.keys(removeUngroupedIfEmpty(groupedItems)).map(function (itemGroup, index) {
         var itemsInGroup = groupedItems[itemGroup];
         var menuItems = itemsInGroup.flatMap(function (item) {
             currentCount += 1;
             var selected = selectedValuesSet.has(item[valueKey]) || (item[types_1.SELECT_ALL_ID] && selectAllSelected);
             var selectMenuItem = ((0, jsx_runtime_1.jsx)(SelectMenuItem_1.default, tslib_1.__assign({ overrides: menuItemOverrides, item: item, selected: selected, multi: multi, getItemLabel: getItemLabel, labelKey: labelKey, valueKey: valueKey, onItemSelect: onItemSelect, "$item": item, "aria-posinset": currentCount, "aria-setsize": totalCount }, baseuiMenuItemProps), item.isCreatable ? 'creatable-option' : "".concat(item[valueKey], "-").concat(item.__optgroup)));
             return item[types_1.SELECT_ALL_ID]
-                ? [selectMenuItem, (0, jsx_runtime_1.jsx)(DividerOverriden, tslib_1.__assign({ "$item": item }, dividerProps), "divider-select-all")]
+                ? [
+                    selectMenuItem,
+                    (0, jsx_runtime_1.jsx)(DividerOverriden, tslib_1.__assign({ "$item": item }, dividerProps, { role: "presentation" }), "divider-select-all"),
+                ]
                 : selectMenuItem;
         });
         if (itemGroup !== constants_1.UNGROUPED_ID) {
-            menuItems.unshift((0, jsx_runtime_1.jsx)(DividerOverriden, tslib_1.__assign({ first: index === 0 }, dividerProps, { children: (0, jsx_runtime_1.jsx)(typography_1.Typography, tslib_1.__assign({ variant: "body-xs", weight: "semibold", className: "spr-text-tertiary" }, { children: itemGroup })) }), "divider-".concat(itemGroup)));
+            menuItems.unshift((0, jsx_runtime_1.jsx)(DividerOverriden, tslib_1.__assign({ first: index === 0 }, dividerProps, { role: "presentation" }, { children: (0, jsx_runtime_1.jsx)(typography_1.Typography, tslib_1.__assign({ variant: "body-xs", weight: "semibold", className: "spr-text-tertiary" }, { children: itemGroup })) }), "divider-".concat(itemGroup)));
         }
         return menuItems;
     }));
-    if ((0, isEmpty_1.default)(itemsToRender)) {
-        itemsToRender = ((0, jsx_runtime_1.jsx)(NoResultsOverriden, tslib_1.__assign({ "aria-live": "polite", "aria-atomic": true, msg: noResultsMsg, noResultsConfig: noResultsConfig, "aria-disabled": true }, noResultsProps)));
-    }
+    var hasOptions = !(0, isEmpty_1.default)(optionItems);
+    var itemsToRender = hasOptions ? (optionItems) : ((0, jsx_runtime_1.jsx)(NoResultsOverriden, tslib_1.__assign({ msg: noResultsMsg, noResultsConfig: noResultsConfig }, noResultsProps)));
     return (
     // focusWhenNavigationEnabled false, or else it will remove focus from select input
     (0, jsx_runtime_1.jsx)(MenuOverriden, tslib_1.__assign({ resetMenuHighlightOnMouseLeave: true, focusWhenNavigationEnabled: false, keyboardFocusRestoreTarget: inputElement, "$multi": multi, captureScroll: captureScroll, tabIndex: -1, "aria-label": "Menu", role: "listbox", getActionsElement: getActionsElement }, baseuiMenuListProps, { id: listboxId, virtual: virtual, overscanCount: overscanCount, selectOnTab: selectOnTab }, menuProps, { children: itemsToRender })));

package/select/styled-component.js

@@ -5,8 +5,7 @@ var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var locale_1 = require("../locale");
-var box_1 = require("../box");
-var menu_item_1 = tslib_1.__importDefault(require("../menu/menu-item"));
+var list_item_1 = tslib_1.__importDefault(require("../list/list-item"));
 var style_1 = require("../style");
 var themeHelpers_1 = require("../helpers/themeHelpers");
 var hidden_element_1 = require("./utils/hidden-element");
@@ -20,7 +19,8 @@ var NoResults = (0, react_1.forwardRef)(function (_a, ref) {
     var msg = _a.msg, noResultsConfig = _a.noResultsConfig, props = tslib_1.__rest(_a, ["msg", "noResultsConfig"]);
     var locale = (0, locale_1.useLocale)();
     var noResultsId = (0, SelectIdsContext_1.useSelectIds)().noResultsId;
-    return ((0, jsx_runtime_1.jsx)(menu_item_1.default, tslib_1.__assign({ button: false, hideInlineActions: true, ref: ref }, props, { children: noResultsConfig ? ((0, jsx_runtime_1.jsx)(no_results_message_1.NoResultsMessage, tslib_1.__assign({}, noResultsConfig, { id: noResultsId }))) : ((0, jsx_runtime_1.jsx)(box_1.Box, tslib_1.__assign({ id: noResultsId }, { children: msg || locale.select.noResultsMsg }))) })));
+    var message = msg || locale.select.noResultsMsg;
+    return ((0, jsx_runtime_1.jsx)(list_item_1.default, tslib_1.__assign({ ref: ref, button: false, id: noResultsId, role: "option", "aria-live": "polite", "aria-atomic": true, "aria-selected": false, "aria-disabled": !(noResultsConfig === null || noResultsConfig === void 0 ? void 0 : noResultsConfig.onButtonClick) }, props, { children: noResultsConfig ? (0, jsx_runtime_1.jsx)(no_results_message_1.NoResultsMessage, tslib_1.__assign({}, noResultsConfig)) : message })));
 });
 exports.NoResults = NoResults;
 exports.StyledInputContainer = (0, style_1.styled)('div', cvaConfigs_1.inputContainerCVA, 

package/slider/slider.d.ts

@@ -1,7 +1,7 @@
 import type { ReactElement } from 'react';
 import type { SliderProps } from './types';
 declare const Slider: {
-    ({ overrides, disabled, marks, onChange, onFinalChange, min: propMin, max: propMax, step, persistentThumb, valueToLabel, value: propProvidedValue, intent, className, style, getMarkLabel, markLabel, primaryIntentColor, secondaryIntentColor, trackColors, thumbColors, }: SliderProps): ReactElement;
+    ({ overrides, disabled, marks, onChange, onFinalChange, min: propMin, max: propMax, step, persistentThumb, valueToLabel, value: propProvidedValue, intent, className, style, getMarkLabel, markLabel, primaryIntentColor, secondaryIntentColor, trackColors, thumbColors, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, }: SliderProps): ReactElement;
     __standard: string;
 };
 export default Slider;

package/slider/slider.js

@@ -24,7 +24,7 @@ var defaultMarkLabel = function (_a) {
     return "".concat(($min || 0) + $markIndex * $step);
 };
 var Slider = function (_a) {
-    var _b = _a.overrides, overrides = _b === void 0 ? {} : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.marks, marks = _d === void 0 ? false : _d, _e = _a.onChange, onChange = _e === void 0 ? noop_1.default : _e, _f = _a.onFinalChange, onFinalChange = _f === void 0 ? noop_1.default : _f, _g = _a.min, propMin = _g === void 0 ? 0 : _g, _h = _a.max, propMax = _h === void 0 ? 100 : _h, _j = _a.step, step = _j === void 0 ? 1 : _j, _k = _a.persistentThumb, persistentThumb = _k === void 0 ? false : _k, _l = _a.valueToLabel, valueToLabel = _l === void 0 ? function (label) { return label; } : _l, propProvidedValue = _a.value, _m = _a.intent, intent = _m === void 0 ? 'default' : _m, className = _a.className, style = _a.style, _o = _a.getMarkLabel, getMarkLabel = _o === void 0 ? defaultMarkLabel : _o, markLabel = _a.markLabel, primaryIntentColor = _a.primaryIntentColor, secondaryIntentColor = _a.secondaryIntentColor, trackColors = _a.trackColors, thumbColors = _a.thumbColors;
+    var _b = _a.overrides, overrides = _b === void 0 ? {} : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.marks, marks = _d === void 0 ? false : _d, _e = _a.onChange, onChange = _e === void 0 ? noop_1.default : _e, _f = _a.onFinalChange, onFinalChange = _f === void 0 ? noop_1.default : _f, _g = _a.min, propMin = _g === void 0 ? 0 : _g, _h = _a.max, propMax = _h === void 0 ? 100 : _h, _j = _a.step, step = _j === void 0 ? 1 : _j, _k = _a.persistentThumb, persistentThumb = _k === void 0 ? false : _k, _l = _a.valueToLabel, valueToLabel = _l === void 0 ? function (label) { return label; } : _l, propProvidedValue = _a.value, _m = _a.intent, intent = _m === void 0 ? 'default' : _m, className = _a.className, style = _a.style, _o = _a.getMarkLabel, getMarkLabel = _o === void 0 ? defaultMarkLabel : _o, markLabel = _a.markLabel, primaryIntentColor = _a.primaryIntentColor, secondaryIntentColor = _a.secondaryIntentColor, trackColors = _a.trackColors, thumbColors = _a.thumbColors, ariaLabel = _a["aria-label"], ariaLabelledBy = _a["aria-labelledby"], ariaDescribedBy = _a["aria-describedby"];
     var _p = tslib_1.__read((0, react_1.useState)(-1), 2), hoveredThumbIndex = _p[0], setHoveredThumbIndex = _p[1];
     var hasMounted = (0, useHasMounted_1.useHasMounted)();
     var _q = tslib_1.__read((0, react_1.useState)(false), 2), isFocusVisible = _q[0], setIsFocusVisible = _q[1];
@@ -98,7 +98,17 @@ var Slider = function (_a) {
                 // In SSR, Thumbs are not properly positioned, hence hiding thumbs on server render.
                 // Refer https://github.com/tajo/react-range/issues/67#issuecomment-591703422
                 // Thumb is made ClientOnly to avoid Hydration mismatch error
-                return ((0, jsx_runtime_1.jsxs)(Thumb, tslib_1.__assign({}, props, { "data-thumbIndex": index, onMouseEnter: function () { return setHoveredThumbIndex(index); }, onMouseLeave: function () { return setHoveredThumbIndex(-1); }, "$thumbIndex": index, "$isDragged": isDragged, style: tslib_1.__assign(tslib_1.__assign({ '--sw-bg-color': value.length > 2 ? thumbColors[index] : primaryIntentColor !== null && primaryIntentColor !== void 0 ? primaryIntentColor : (0, intentHelper_1.intentColor)(styleUtils, sharedProps), '--sw-bg-color-hover': value.length > 2
+                var thumbLabel;
+                if (ariaLabel == null) {
+                    thumbLabel = undefined;
+                }
+                else if (value.length > 1) {
+                    thumbLabel = "".concat(ariaLabel, " ").concat(index + 1);
+                }
+                else {
+                    thumbLabel = ariaLabel;
+                }
+                return ((0, jsx_runtime_1.jsxs)(Thumb, tslib_1.__assign({}, props, (thumbLabel ? { 'aria-label': thumbLabel } : {}), (ariaLabelledBy ? { 'aria-labelledby': ariaLabelledBy } : {}), (ariaDescribedBy ? { 'aria-describedby': ariaDescribedBy } : {}), { "data-thumbIndex": index, onMouseEnter: function () { return setHoveredThumbIndex(index); }, onMouseLeave: function () { return setHoveredThumbIndex(-1); }, "$thumbIndex": index, "$isDragged": isDragged, style: tslib_1.__assign(tslib_1.__assign({ '--sw-bg-color': value.length > 2 ? thumbColors[index] : primaryIntentColor !== null && primaryIntentColor !== void 0 ? primaryIntentColor : (0, intentHelper_1.intentColor)(styleUtils, sharedProps), '--sw-bg-color-hover': value.length > 2
                             ? thumbColors[index]
                             : primaryIntentColor !== null && primaryIntentColor !== void 0 ? primaryIntentColor : (0, intentHelper_1.intentColor)(styleUtils, sharedProps, theme.spr.interactiveHover), '--sw-shadow': isFocusVisible && focusedThumbIndex === index
                             ? "0 0 0 3px ".concat(theme.spr.focus01)

package/slider/types.d.ts

@@ -14,6 +14,9 @@ type GetMarkLabelFn = (props: SharedProps & {
     $markIndex: number;
 }) => React.ReactNode;
 type CommonSliderProps = {
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
     /** @deprecated */
     intent?: Intent;
     markLabel?: boolean;

package/time-range-picker/RangeSelectorContainer.js

@@ -116,7 +116,7 @@ var RangeSelectorContainer = function (_a) {
                         fill: theme.spr.clrRed,
                     });
                 } }), (0, jsx_runtime_1.jsx)(typography_1.Typography, tslib_1.__assign({ className: "my-0", variant: "bs3" }, { children: errMsg }))] }))) : null;
-    return ((0, jsx_runtime_1.jsxs)(box_1.Box, tslib_1.__assign({ className: "spr-ui-01 rounded-8" }, { children: [(0, jsx_runtime_1.jsxs)(Header, tslib_1.__assign({ "$setTimezone": setTimezone, "$onClose": props.onClose }, headerProps, { children: [(0, jsx_runtime_1.jsx)(HeaderBeforeEnhancer, tslib_1.__assign({ variant: "heading-7", "$as": "span", className: "flex items-center" }, headerBeforeEnhancerProps, { children: locale.timeRangePicker.headerLabel })), disableTimezone ? null : ((0, jsx_runtime_1.jsx)(TimezonePicker, tslib_1.__assign({ setTimezone: setTimezone, timezone: timezone, timezoneOptions: timezoneOptions }, timezonePickerProps, { className: ['w-0 grow max-w-md', timezonePickerProps === null || timezonePickerProps === void 0 ? void 0 : timezonePickerProps.className] })))] })), (0, jsx_runtime_1.jsx)(RangeSelector, tslib_1.__assign({ overrides: props.overrides, timeSelect: props.timeSelect, timeRangePresets: timeRangePresets, timezone: timezone, timeRange: timeRange, preset: preset, onChange: onDateChange, adapter: adapter, peekNextMonth: props.peekNextMonth, excludeDates: props.excludeDates, filterDate: props.filterDate, minDate: minDate, maxDate: maxDate, formatString: props.formatString, locale: props.locale, fixedHeight: props.fixedHeight, monthsShown: monthsShown, hidePresetSearch: hidePresetSearch, footerContent: (0, jsx_runtime_1.jsx)(Footer, tslib_1.__assign({ "$hasError": hasError, "$onSubmit": handleSubmit, "$onClose": props.onClose }, footerProps, { className: ['px-6 py-3 mt-2', footerProps.className] }, { children: (0, jsx_runtime_1.jsxs)(box_1.Box, tslib_1.__assign({ className: "justify-between w-0 grow flex" }, { children: [(0, jsx_runtime_1.jsx)(FooterBeforeEnhancer, tslib_1.__assign({}, footerBeforeEnhancerProps)), (0, jsx_runtime_1.jsxs)(stack_1.Stack, tslib_1.__assign({ direction: monthsShown === 1 ? 'vertical' : 'horizontal', gap: 3, className: monthsShown !== 1 ? 'items-center' : undefined, style: { maxWidth: 'fit-content' } }, { children: [monthsShown === 1 ? null : errorEl, (0, jsx_runtime_1.jsxs)(stack_1.StackItem, tslib_1.__assign({ className: "flex self-end" }, { children: [(footerProps === null || footerProps === void 0 ? void 0 : footerProps.showClearButton) ? ((0, jsx_runtime_1.jsx)(button_1.Button, tslib_1.__assign({ size: "xs", onClick: footerProps.handleClearBtnClick, variant: "secondary", "data-testid": "clear", disabled: timeRange.length === 0 }, { children: locale.timeRangePicker.clearBtnLabel }))) : ((0, jsx_runtime_1.jsx)(button_1.Button, tslib_1.__assign({ size: "xs", onClick: props.onClose, variant: "secondary", "data-testid": "cancel" }, { children: locale.timeRangePicker.cancelBtnLabel }))), (0, jsx_runtime_1.jsx)(button_1.Button, tslib_1.__assign({ size: "xs", className: "ml-3", onClick: handleSubmit, disabled: hasError, "data-testid": "save" }, { children: locale.timeRangePicker.saveBtnLabel }))] })), monthsShown === 1 ? errorEl : null] }))] })) })) }, rangeSelectorProps))] })));
+    return ((0, jsx_runtime_1.jsxs)(box_1.Box, tslib_1.__assign({ className: "spr-ui-01 rounded-8" }, { children: [(0, jsx_runtime_1.jsxs)(Header, tslib_1.__assign({ "$setTimezone": setTimezone, "$onClose": props.onClose }, headerProps, { children: [(0, jsx_runtime_1.jsx)(HeaderBeforeEnhancer, tslib_1.__assign({ variant: "heading-7", "$as": "span", className: "flex items-center" }, headerBeforeEnhancerProps, { children: locale.timeRangePicker.headerLabel })), disableTimezone ? null : ((0, jsx_runtime_1.jsx)(TimezonePicker, tslib_1.__assign({ setTimezone: setTimezone, timezone: timezone, timezoneOptions: timezoneOptions }, timezonePickerProps, { "aria-label": locale.timeRangePicker.timezoneLabel, className: ['w-0 grow max-w-md', timezonePickerProps === null || timezonePickerProps === void 0 ? void 0 : timezonePickerProps.className] })))] })), (0, jsx_runtime_1.jsx)(RangeSelector, tslib_1.__assign({ overrides: props.overrides, timeSelect: props.timeSelect, timeRangePresets: timeRangePresets, timezone: timezone, timeRange: timeRange, preset: preset, onChange: onDateChange, adapter: adapter, peekNextMonth: props.peekNextMonth, excludeDates: props.excludeDates, filterDate: props.filterDate, minDate: minDate, maxDate: maxDate, formatString: props.formatString, locale: props.locale, fixedHeight: props.fixedHeight, monthsShown: monthsShown, hidePresetSearch: hidePresetSearch, footerContent: (0, jsx_runtime_1.jsx)(Footer, tslib_1.__assign({ "$hasError": hasError, "$onSubmit": handleSubmit, "$onClose": props.onClose }, footerProps, { className: ['px-6 py-3 mt-2', footerProps.className] }, { children: (0, jsx_runtime_1.jsxs)(box_1.Box, tslib_1.__assign({ className: "justify-between w-0 grow flex" }, { children: [(0, jsx_runtime_1.jsx)(FooterBeforeEnhancer, tslib_1.__assign({}, footerBeforeEnhancerProps)), (0, jsx_runtime_1.jsxs)(stack_1.Stack, tslib_1.__assign({ direction: monthsShown === 1 ? 'vertical' : 'horizontal', gap: 3, className: monthsShown !== 1 ? 'items-center' : undefined, style: { maxWidth: 'fit-content' } }, { children: [monthsShown === 1 ? null : errorEl, (0, jsx_runtime_1.jsxs)(stack_1.StackItem, tslib_1.__assign({ className: "flex self-end" }, { children: [(footerProps === null || footerProps === void 0 ? void 0 : footerProps.showClearButton) ? ((0, jsx_runtime_1.jsx)(button_1.Button, tslib_1.__assign({ size: "xs", onClick: footerProps.handleClearBtnClick, variant: "secondary", "data-testid": "clear", disabled: timeRange.length === 0 }, { children: locale.timeRangePicker.clearBtnLabel }))) : ((0, jsx_runtime_1.jsx)(button_1.Button, tslib_1.__assign({ size: "xs", onClick: props.onClose, variant: "secondary", "data-testid": "cancel" }, { children: locale.timeRangePicker.cancelBtnLabel }))), (0, jsx_runtime_1.jsx)(button_1.Button, tslib_1.__assign({ size: "xs", className: "ml-3", onClick: handleSubmit, disabled: hasError, "data-testid": "save" }, { children: locale.timeRangePicker.saveBtnLabel }))] })), monthsShown === 1 ? errorEl : null] }))] })) })) }, rangeSelectorProps))] })));
 };
 RangeSelectorContainer.displayName = 'RangeSelectorContainer';
 exports.default = RangeSelectorContainer;

package/time-range-picker/types.d.ts

@@ -18,6 +18,7 @@ export type TimezonePickerProps = {
     modernZonesOnly?: boolean;
     className?: ClassName;
     style?: Styles;
+    'aria-label'?: string;
 };
 export type TimeRangeListProps = {
     timeRangePresets: TimeRangePreset[];

package/time-zone-picker/types.d.ts

@@ -24,6 +24,7 @@ export type TimezonePickerProps = {
     size?: Size;
     clearable?: boolean;
     placeholder?: string;
+    'aria-label'?: string;
     /**
      * When true, filters out deprecated timezone abbreviations (e.g., EST, PST, CET)
      * and shows only modern IANA timezone identifiers (e.g., America/New_York).

package/tooltip/actionable-tooltip.js

@@ -7,6 +7,7 @@ var button_1 = require("../button");
 var stack_1 = require("../stack");
 var typography_1 = require("../typography");
 var popover_1 = require("../popover");
+var popover_2 = require("../baseui/popover");
 /** @deprecated */
 var ActionableTooltip = function (_a) {
     var action = _a.action, renderFooter = _a.renderFooter, content = _a.content, children = _a.children, restProps = tslib_1.__rest(_a, ["action", "renderFooter", "content", "children"]);
@@ -18,6 +19,6 @@ var ActionableTooltip = function (_a) {
             return renderPopoverContent(content({ close: close }));
         }
         : renderPopoverContent(content);
-    return ((0, jsx_runtime_1.jsx)(popover_1.StatefulPopover, tslib_1.__assign({ content: el, showArrow: true, autoFocus: false, triggerType: "hover" }, restProps, { children: children })));
+    return ((0, jsx_runtime_1.jsx)(popover_1.StatefulPopover, tslib_1.__assign({ content: el, showArrow: true, autoFocus: false, triggerType: "hover", accessibilityType: popover_2.ACCESSIBILITY_TYPE.tooltip }, restProps, { children: children })));
 };
 exports.default = ActionableTooltip;