@sprinklrjs/spaceweb 14.15.1 → 14.16.0

package/esm/date-picker/DateInput.js

@@ -15,6 +15,7 @@ import { FieldIcon } from './InputFieldIcon';
 import CalendarSolid from '../icon/components/calendar-solid';
 import { isDDMM } from '../date-input/utils';
 import { DEFAULT_FORMAT_STRING } from './constants';
+import { useLocale } from '../locale';
 var COMMON_STYLE = [
     'px-0 py-0 rounded-2 text-center tabular-nums',
     function (_a) {
@@ -74,8 +75,9 @@ export var DateInput = React.memo(
 // eslint-disable-next-line max-statements -- works for functional component
 function (_a) {
     var _b, _c, _d, _e;
-    var dateHelpers = _a.dateHelpers, date = _a.date, onChange = _a.onChange, maxDate = _a.maxDate, minDate = _a.minDate, disabled = _a.disabled, size = _a.size, _f = _a.formatString, formatString = _f === void 0 ? DEFAULT_FORMAT_STRING : _f;
+    var dateHelpers = _a.dateHelpers, date = _a.date, onChange = _a.onChange, maxDate = _a.maxDate, minDate = _a.minDate, disabled = _a.disabled, size = _a.size, _f = _a.formatString, formatString = _f === void 0 ? DEFAULT_FORMAT_STRING : _f, id = _a.id, ariaLabelledBy = _a["aria-labelledby"], ariaDescribedBy = _a["aria-describedby"];
     var theme = useTheme().theme;
+    var spacewebLocale = useLocale();
     var _g = __read(React.useState(function () { return (date ? dateHelpers.formatDate(date, 'dd') : ''); }), 2), day = _g[0], setDay = _g[1];
     var _h = __read(React.useState(function () { return (date ? dateHelpers.formatDate(date, 'MM') : ''); }), 2), month = _h[0], setMonth = _h[1];
     var _j = __read(React.useState(function () { return (date ? dateHelpers.getYear(date) : ''); }), 2), year = _j[0], setYear = _j[1];
@@ -256,7 +258,7 @@ function (_a) {
     var inputSizeTheme = getComponentSizeTheme(theme, 'input', size, defaultSize);
     var inputClasses = input$Size[size !== null && size !== void 0 ? size : defaultSize];
     var inputStyles = inputStyleVariables({ theme: theme }, { $size: size });
-    return (_jsxs(Box, __assign({ "data-testid": "date-input", className: [
+    return (_jsxs(Box, __assign({ "data-testid": "date-input", role: "group", id: id, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, className: [
             'px-3 flex items-center border-1 border-solid border-box rounded-8',
             error ? 'spr-support-error-border' : 'spr-border-03',
             disabled ? 'spr-ui-02' : 'spr-ui-01',
@@ -276,10 +278,10 @@ function (_a) {
                 }
                 : {})),
         ], style: inputStyles }, { children: [_jsx(FieldIcon, { icon: CalendarSolid, disabled: disabled }), (function (isDayFirst) {
-                var DayInputMask = (_jsx(InputMask, __assign({ onBlur: dateBlur, onKeyDown: dateKeyDown, mask: "99", value: day, onChange: dayChange, maskChar: "_", disabled: disabled }, { children: function (props) { return (_jsx(Input, __assign({}, props, { className: DATE_CLASSNAME, overrides: DATE_OVERRIDES, placeholder: "dd", size: "small", disabled: disabled }))); } })));
-                var MonthInputMask = (_jsx(InputMask, __assign({ onBlur: monthBlur, onKeyDown: monthKeyDown, mask: "99", value: month, onChange: monthChange, maskChar: "_", disabled: disabled }, { children: function (props) { return (_jsx(Input, __assign({}, props, { className: MONTH_CLASSNAME, style: MONTH_STYLE, overrides: MONTH_OVERRIDES, placeholder: "mm", size: "small", disabled: disabled }))); } })));
+                var DayInputMask = (_jsx(InputMask, __assign({ onBlur: dateBlur, onKeyDown: dateKeyDown, mask: "99", value: day, onChange: dayChange, maskChar: "_", disabled: disabled }, { children: function (props) { return (_jsx(Input, __assign({}, props, { className: DATE_CLASSNAME, overrides: DATE_OVERRIDES, placeholder: "dd", size: "small", disabled: disabled, "aria-label": spacewebLocale.calendar.dateInputDayAriaLabel }))); } })));
+                var MonthInputMask = (_jsx(InputMask, __assign({ onBlur: monthBlur, onKeyDown: monthKeyDown, mask: "99", value: month, onChange: monthChange, maskChar: "_", disabled: disabled }, { children: function (props) { return (_jsx(Input, __assign({}, props, { className: MONTH_CLASSNAME, style: MONTH_STYLE, overrides: MONTH_OVERRIDES, placeholder: "mm", size: "small", disabled: disabled, "aria-label": spacewebLocale.calendar.dateInputMonthAriaLabel }))); } })));
                 if (isDayFirst)
                     return [DayInputMask, '/', MonthInputMask];
                 return [MonthInputMask, '/', DayInputMask];
-            })(isDDMM(formatString)), "/", _jsx(InputMask, __assign({ onBlur: yearBlur, onKeyDown: yearKeyDown, mask: "9999", value: year, onChange: yearChange, maskChar: "_", disabled: disabled }, { children: function (props) { return (_jsx(Input, __assign({}, props, { className: YEAR_CLASSNAME, overrides: YEAR_OVERRIDES, placeholder: "yyyy", size: "small", disabled: disabled }))); } }))] })));
+            })(isDDMM(formatString)), "/", _jsx(InputMask, __assign({ onBlur: yearBlur, onKeyDown: yearKeyDown, mask: "9999", value: year, onChange: yearChange, maskChar: "_", disabled: disabled }, { children: function (props) { return (_jsx(Input, __assign({}, props, { className: YEAR_CLASSNAME, overrides: YEAR_OVERRIDES, placeholder: "yyyy", size: "small", disabled: disabled, "aria-label": spacewebLocale.calendar.dateInputYearAriaLabel }))); } }))] })));
 });

package/esm/date-picker/TimeInput.d.ts

@@ -14,6 +14,11 @@ type TimeInputProps = {
     adapter: DateIOAdapter<Date>;
     getTimeRangesForDate?: GetTimeRangesForDate;
     size?: InputSize;
+    id?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+    'aria-errormessage'?: string;
+    required?: boolean;
 };
-export declare const TimeInput: ({ overrides, time, onChange, dateHelpers, minTime, maxTime, disabled, adapter, getTimeRangesForDate, size, }: TimeInputProps) => JSX.Element;
+export declare const TimeInput: ({ overrides, time, onChange, dateHelpers, minTime, maxTime, disabled, adapter, getTimeRangesForDate, size, id, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-errormessage": ariaErrorMessage, required, }: TimeInputProps) => JSX.Element;
 export {};

package/esm/date-picker/TimeInput.js

@@ -9,7 +9,7 @@ import { DropdownFieldIcon } from './InputFieldIcon';
 var MS_IN_5_MINUTES = 60 * 1000 * 5;
 var roundUpTime = function (minTime) { return new Date(Math.ceil(minTime.getTime() / MS_IN_5_MINUTES) * MS_IN_5_MINUTES); };
 export var TimeInput = function (_a) {
-    var overrides = _a.overrides, time = _a.time, onChange = _a.onChange, dateHelpers = _a.dateHelpers, minTime = _a.minTime, maxTime = _a.maxTime, disabled = _a.disabled, adapter = _a.adapter, getTimeRangesForDate = _a.getTimeRangesForDate, size = _a.size;
+    var overrides = _a.overrides, time = _a.time, onChange = _a.onChange, dateHelpers = _a.dateHelpers, minTime = _a.minTime, maxTime = _a.maxTime, disabled = _a.disabled, adapter = _a.adapter, getTimeRangesForDate = _a.getTimeRangesForDate, size = _a.size, id = _a.id, ariaLabelledBy = _a["aria-labelledby"], ariaDescribedBy = _a["aria-describedby"], ariaErrorMessage = _a["aria-errormessage"], required = _a.required;
     var _b = __read(useState(time), 2), value = _b[0], setValue = _b[1];
     var _c = __read(useState(false), 2), error = _c[0], setError = _c[1];
     useEffect(function () {
@@ -72,5 +72,5 @@ export var TimeInput = function (_a) {
     }, [error, value, overrides, time, minTime, maxTime, dateHelpers]);
     var _d = __read(useOverrides(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.TimePicker, DefaultTimePicker), 2), TimePicker = _d[0], timeSelectProps = _d[1];
     var timeRanges = useMemo(function () { return (time ? getTimeRangesForDate === null || getTimeRangesForDate === void 0 ? void 0 : getTimeRangesForDate(time) : undefined); }, [time, getTimeRangesForDate]);
-    return (_jsx(TimePicker, __assign({ adapter: adapter, value: value, onChange: handleChange, creatable: true, clearable: true, disabled: disabled, minTime: minTime && dateHelpers.isSameDay(value, minTime) ? roundUpTime(minTime) : undefined, maxTime: dateHelpers.isSameDay(value, maxTime) ? maxTime : undefined, timeRanges: timeRanges, size: size }, timeSelectProps)));
+    return (_jsx(TimePicker, __assign({ adapter: adapter, value: value, onChange: handleChange, creatable: true, clearable: true, disabled: disabled, minTime: minTime && dateHelpers.isSameDay(value, minTime) ? roundUpTime(minTime) : undefined, maxTime: dateHelpers.isSameDay(value, maxTime) ? maxTime : undefined, timeRanges: timeRanges, size: size, id: id, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-errormessage": ariaErrorMessage, required: required }, timeSelectProps)));
 };

package/esm/list/divider.js

@@ -14,7 +14,7 @@ var Divider = forwardRef(function (_a, ref) {
             'spr-border-primary border-solid border-b-0 border-l-0 border-r-0 mx-0 rounded-0',
             first ? 'border-t-0 pt-0' : 'border-t',
             className,
-        ], role: "presentation" }, propsWithoutContainerAria, subHeaderProps, { ref: ref }, { children: children }))) : (_jsx(Separator, __assign({ "data-spaceweb": "divider", role: "presentation", className: className }, propsWithoutContainerAria, { ref: ref }, separatorProps)));
+        ] }, propsWithoutContainerAria, subHeaderProps, { ref: ref, role: "presentation" }, { children: children }))) : (_jsx(Separator, __assign({ "data-spaceweb": "divider", className: className }, propsWithoutContainerAria, { ref: ref }, separatorProps, { role: "presentation" })));
 });
 Divider.displayName = 'Divider';
 export default Divider;

package/esm/list/list-item.js

@@ -9,8 +9,10 @@ import { StyledChildContainer, StyledEndEnhancer, StyledListItem, StyledStartEnh
 import { useFocusVisible } from '../hooks/useFocusVisible';
 import { Tooltip as DefaultTooltip } from '../tooltip';
 import useListItemTooltip, { getListItemTooltipHandlers } from './useListItemTooltip';
+import { isPresentationalRole } from './utils';
 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 _b, _c;
+    var startEnhancer = _a.startEnhancer, children = _a.children, className = _a.className, style = _a.style, _d = _a.alignItems, alignItems = _d === void 0 ? 'center' : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, endEnhancer = _a.endEnhancer, _f = _a.selected, selected = _f === void 0 ? false : _f, _g = _a.highlighted, highlighted = _g === void 0 ? false : _g, _h = _a.autoFocus, autoFocus = _h === void 0 ? false : _h, _j = _a.button, button = _j === void 0 ? false : _j, _k = _a.overrides, overrides = _k === void 0 ? {} : _k, _l = _a.tabIndex, tabIndex = _l === void 0 ? button ? 0 : undefined : _l, _m = _a.role, roleProp = _m === void 0 ? 'listitem' : _m, _o = _a.$as, $as = _o === void 0 ? 'li' : _o, onClick = _a.onClick, onKeyDown = _a.onKeyDown, onFocus = _a.onFocus, onBlur = _a.onBlur, _p = _a.tooltipContent, tooltipContent = _p === void 0 ? '' : _p, restProps = __rest(_a, ["startEnhancer", "children", "className", "style", "alignItems", "disabled", "endEnhancer", "selected", "highlighted", "autoFocus", "button", "overrides", "tabIndex", "role", "$as", "onClick", "onKeyDown", "onFocus", "onBlur", "tooltipContent"]);
     var ownRef = useRef(null);
     var combinedRef = useCombinedRefs(ref, ownRef);
     React.useEffect(function () {
@@ -31,10 +33,10 @@ var ListItem = React.forwardRef(function (_a, ref) {
             onKeyDown(event);
         }
     }, [button, disabled, onClick, onKeyDown]);
-    var _m = __read(useOverrides(overrides.Root, StyledListItem), 2), Root = _m[0], rootProps = _m[1];
-    var _o = __read(useOverrides(overrides.ChildContainer, StyledChildContainer), 2), ChildContainer = _o[0], childContainerProps = _o[1];
-    var _p = __read(useOverrides(overrides.StartEnhancer, StyledStartEnhancer), 2), StartEnhancer = _p[0], startEnhancerProps = _p[1];
-    var _q = __read(useOverrides(overrides.EndEnhancer, StyledEndEnhancer), 2), EndEnhancer = _q[0], endEnhancerProps = _q[1];
+    var _q = __read(useOverrides(overrides.Root, StyledListItem), 2), Root = _q[0], rootProps = _q[1];
+    var _r = __read(useOverrides(overrides.ChildContainer, StyledChildContainer), 2), ChildContainer = _r[0], childContainerProps = _r[1];
+    var _s = __read(useOverrides(overrides.StartEnhancer, StyledStartEnhancer), 2), StartEnhancer = _s[0], startEnhancerProps = _s[1];
+    var _t = __read(useOverrides(overrides.EndEnhancer, StyledEndEnhancer), 2), EndEnhancer = _t[0], endEnhancerProps = _t[1];
     var sharedProps = {
         $withStartEnhancer: !!startEnhancer,
         $withEndEnhancer: !!endEnhancer,
@@ -47,14 +49,17 @@ 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, DefaultTooltip), 2), Tooltip = _r[0], tooltipProps = _r[1];
+    var _u = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.StatefulTooltip, DefaultTooltip), 2), Tooltip = _u[0], tooltipProps = _u[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) })))] })));
+    var roleCandidate = (_b = rootProps === null || rootProps === void 0 ? void 0 : rootProps.role) !== null && _b !== void 0 ? _b : roleProp;
+    var role = typeof roleCandidate === 'string' ? roleCandidate : 'listitem';
+    var presentational = isPresentationalRole(role);
+    var explicitAriaDisabled = (_c = rootProps === null || rootProps === void 0 ? void 0 : rootProps['aria-disabled']) !== null && _c !== void 0 ? _c : restProps['aria-disabled'];
+    var ariaDisabled = presentational ? undefined : explicitAriaDisabled !== null && explicitAriaDisabled !== void 0 ? explicitAriaDisabled : (disabled ? true : undefined);
+    var listEl = (_jsxs(Root, __assign({ "data-spaceweb": "list-item", ref: combinedRef, tabIndex: tabIndex, "$as": $as, onClick: disabled ? _noop : onClick, onKeyDown: handleKeyDown, "data-highlighted": highlighted }, sharedProps, restProps, rootProps, useFocusVisibleProps, { "aria-disabled": ariaDisabled, role: role, 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';

package/esm/locale/en_US.js

@@ -43,6 +43,9 @@ export var DEFAULT_LOCALE = {
         dateInputLabel: 'Date',
         timePickerLabel: 'Time',
         calendarButtonAriaLabel: 'Open Calendar',
+        dateInputDayAriaLabel: 'Day',
+        dateInputMonthAriaLabel: 'Month',
+        dateInputYearAriaLabel: 'Year',
     },
     datePicker: {
         ariaLabelCalendar: 'Calendar.',
@@ -115,6 +118,8 @@ export var DEFAULT_LOCALE = {
         countrySelectPlaceholder: 'Search',
         inputAriaLabel: 'Please enter a phone number without the country dial code.',
         flagContainerAriaLabel: 'Press the enter key to navigate country select dropdown. Press the up or down arrow key to interact with the dropdown and select a country. Press the escape button to close the dropdown.',
+        flagContainerSelectedAriaLabel: '${countryName} ${dialCode} selected.',
+        inputSelectedDialCodeAriaLabel: '${dialCode} selected.',
     },
     menu: {
         nestedMenuItemAriaDescription: 'You are currently at an item that opens a nested menu. Press right arrow or spacebar to enter that element and left arrow or escape to return.',

package/esm/locale/types.d.ts

@@ -23,6 +23,9 @@ export type Locale = {
         dateInputLabel: string;
         timePickerLabel: string;
         calendarButtonAriaLabel: string;
+        dateInputDayAriaLabel: string;
+        dateInputMonthAriaLabel: string;
+        dateInputYearAriaLabel: string;
     };
     menu: {
         nestedMenuItemAriaDescription: string;

package/esm/menu/useKeyboardNavigation.js

@@ -40,10 +40,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.
     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)) &&
+            canHighlightItem(highlightedItem);
+        if (disableAutoHighlight || shouldKeepHighlight || !navigationEnabled || !listItemsContainerRef) {
             return;
         }
         var firstHighlightableItem = getFirstHighlightableElement(listItemsContainerRef).firstHighlightableItem;
@@ -54,6 +58,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]);
     useEffect(function () {

package/esm/menu/useStatefulMenu.js

@@ -48,18 +48,24 @@ var useStatefulMenu = function (_a) {
         (_a = onHighlightedItemChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onHighlightedItemChangeRef, highlightedItem);
     }, [highlightedItem, onHighlightedItemChangeRef]);
     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/esm/modal/modal.js

@@ -67,8 +67,8 @@ var Modal = function (_a) {
         return {};
     }, [size, px2rem]);
     var dialogA11yProps = 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 = useMemo(function () {
         return mergeOverrides({

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

@@ -83,6 +83,7 @@ var CountrySelect = function (props) {
         size: size,
         disabled: disabled,
         value: value,
+        mapIsoToLabel: mapIsoToLabel,
         overrides: _pick(overrides, ['FlagContainer']),
     };
     return (_jsx(Select, __assign({ type: "overlay", options: countries !== null && countries !== void 0 ? countries : COUNTRY_SELECT_OPTIONS, value: [value.country], onChange: function (params) {

package/esm/phone-input/flag-container.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-declare const FlagContainer: import("react").ForwardRefExoticComponent<Pick<import("./types").CountrySelectContainerProps, "value" | "size" | "disabled"> & {
+declare const FlagContainer: import("react").ForwardRefExoticComponent<Pick<import("./types").CountrySelectContainerProps, "value" | "size" | "disabled" | "mapIsoToLabel"> & {
     overrides?: Pick<import("./types").PhoneInputOverrides, "FlagContainer"> | undefined;
 } & import("react").RefAttributes<HTMLButtonElement>>;
 export default FlagContainer;

package/esm/phone-input/flag-container.js

@@ -4,20 +4,20 @@ import { forwardRef } from 'react';
 import { Button as DefaultButton } from '../button';
 import { useOverrides } from '../overrides';
 import { useLocale } from '../locale';
-import { iso2FlagEmoji } from './utils';
+import { getFlagContainerAriaLabel, iso2FlagEmoji } from './utils';
 import { add$props } from '../helpers';
 import { flagContainerCVA } from './cvaConfigs';
 import { getFlagContainerOverrides } from './styled-components';
 var FlagContainer = forwardRef(function (props, ref) {
-    var inputSize = props.size, country = props.value.country, overrides = props.overrides, rest = __rest(props, ["size", "value", "overrides"]);
+    var inputSize = props.size, country = props.value.country, mapIsoToLabel = props.mapIsoToLabel, overrides = props.overrides, rest = __rest(props, ["size", "value", "mapIsoToLabel", "overrides"]);
     var iso = country.id;
     var locale = useLocale();
     var sharedProps = add$props({ iso: iso, inputSize: inputSize });
     var _a = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.FlagContainer, DefaultButton), 2), Button = _a[0], buttonProps = _a[1];
-    return (_jsx(Button, __assign({ "aria-label": locale.phoneInput.flagContainerAriaLabel, variant: "minimal", size: "xxxs", type: "button", className: [
+    return (_jsx(Button, __assign({ "aria-label": getFlagContainerAriaLabel(locale.phoneInput, country, mapIsoToLabel), variant: "minimal", size: "xxxs", type: "button", className: [
             'min-w-0 spr-ui-05 px-2 py-0.5 text-16 rounded-4 mr-0',
             flagContainerCVA,
-            // @ts-ignore -- CSS-in-JS -- TS2345: Argument of type '(_: StyleUtils, { $zIndex }: any) => { zIndex: any; ...
+            // @ts-expect-error -- ClassName does not include CSSStylesStyleFn (TS2345)
             getFlagContainerOverrides,
         ], "data-iso": iso, ref: ref }, sharedProps, buttonProps, rest, { children: iso2FlagEmoji(iso) })));
 });

package/esm/phone-input/locale.d.ts

@@ -2,4 +2,6 @@ export type PhoneInputLocale = {
     countrySelectPlaceholder: string;
     inputAriaLabel: string;
     flagContainerAriaLabel: string;
+    flagContainerSelectedAriaLabel: string;
+    inputSelectedDialCodeAriaLabel: string;
 };

package/esm/phone-input/phone-input.js

@@ -5,7 +5,7 @@ import _pick from 'lodash/pick';
 import { Input as DefaultInput } from '../input';
 import CountrySelectContainer from './country-select-container';
 import { getRootClasses, getInputClasses } from './styled-components';
-import { getDefaultValue, sanitize } from './utils';
+import { getDefaultValue, getPhoneInputAriaLabel, sanitize } from './utils';
 import { useOverrides, mergeOverrides } from '../overrides';
 import { useLocale } from '../locale';
 import defaultProps from './default-props';
@@ -54,7 +54,9 @@ var PhoneInput = function (props) {
         },
     }, overrides);
     var _d = __read(useOverrides(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.Input, DefaultInput), 2), Input = _d[0], inputProps = _d[1];
-    return (_jsx(Input, __assign({ "aria-label": locale.phoneInput.inputAriaLabel, size: size, variant: variant, intent: intent, disabled: disabled, onChange: function (e) {
+    return (_jsx(Input, __assign({ "aria-label": value.country
+            ? getPhoneInputAriaLabel(locale.phoneInput, value.country.dialCode)
+            : locale.phoneInput.inputAriaLabel, size: size, variant: variant, intent: intent, disabled: disabled, onChange: function (e) {
             var number = sanitize(e.currentTarget.value);
             if (onChange) {
                 onChange(__assign(__assign({}, value), { phoneNumber: number }));

package/esm/phone-input/types.d.ts

@@ -67,7 +67,7 @@ export type CountrySelectContainerProps = Required<Pick<PhoneInputProps, 'size'
 export type CountrySelectProps = Omit<CountrySelectContainerProps, 'overrides'> & {
     overrides?: Pick<PhoneInputOverrides, 'CountrySelect' | 'FlagContainer'>;
 };
-export type FlagContainerProps = Pick<CountrySelectContainerProps, 'size' | 'disabled' | 'value'> & {
+export type FlagContainerProps = Pick<CountrySelectContainerProps, 'size' | 'disabled' | 'value' | 'mapIsoToLabel'> & {
     overrides?: Pick<PhoneInputOverrides, 'FlagContainer'>;
 };
 export type DialCodeProps = Omit<CountrySelectContainerProps, 'overrides'> & {

package/esm/phone-input/utils.d.ts

@@ -1,5 +1,6 @@
 import type { Value as ValueT } from '../select/types';
 import type { Value, Country, CustomCountryLabel } from './types';
+import type { PhoneInputLocale } from './locale';
 export declare const iso2FlagEmoji: (iso: string) => string | undefined;
 export declare const sanitize: (value?: string) => string;
 export declare const getPhoneNumberWithCountryDialCode: (value: Value) => string | undefined;
@@ -35,3 +36,5 @@ export declare const getCountryLabelParts: ({ label, nativeName, nativeLang }: C
  * visible text is flattened into `primaryName` so display stays correct without invalid markup.
  */
 export declare const resolveCountryLabelParts: (country: Country, mapIsoToLabel?: ((iso: string) => string | CustomCountryLabel) | undefined) => CountryLabelParts;
+export declare const getFlagContainerAriaLabel: (locale: PhoneInputLocale, country: Country, mapIsoToLabel?: ((iso: string) => string | CustomCountryLabel) | undefined) => string;
+export declare const getPhoneInputAriaLabel: (locale: PhoneInputLocale, dialCode: string) => string;

package/esm/phone-input/utils.js

@@ -1,6 +1,7 @@
 import { __assign, __read, __spreadArray } from "tslib";
 import _isEmpty from 'lodash/isEmpty';
 import { filterOptions } from '../select/utils/default-filter-options';
+import getInterpolatedString from '../baseui/helpers/i18n-interpolation';
 import { COUNTRIES, ISO_REGEX, ISO_TO_FLAG_OFFSET } from './constants';
 import { defaultValue } from './default-props';
 export var iso2FlagEmoji = function (iso) {
@@ -79,3 +80,15 @@ export var resolveCountryLabelParts = function (country, mapIsoToLabel) {
         nativeLang: mapped.nativeLang,
     };
 };
+export var getFlagContainerAriaLabel = function (locale, country, mapIsoToLabel) {
+    var primaryName = resolveCountryLabelParts(country, mapIsoToLabel).primaryName;
+    var selected = getInterpolatedString(locale.flagContainerSelectedAriaLabel, {
+        countryName: primaryName,
+        dialCode: country.dialCode,
+    });
+    return "".concat(selected, " ").concat(locale.flagContainerAriaLabel);
+};
+export var getPhoneInputAriaLabel = function (locale, dialCode) {
+    var selected = getInterpolatedString(locale.inputSelectedDialCodeAriaLabel, { dialCode: dialCode });
+    return "".concat(locale.inputAriaLabel, " ").concat(selected);
+};

package/esm/select/overlaySelect/hooks/useOverlaySelectOverrides.js

@@ -127,6 +127,7 @@ var useOverlaySelectOverrides = function (props) {
     }, [closePopover, onChange, closeOnSelect]);
     var _h = useStickyElement(), isSticky = _h.isSticky, setStickySentinelRef = _h.setStickySentinelRef;
     var _j = useSearchContainerHeight(), containerHeight = _j.containerHeight, setContainerElement = _j.setContainerElement;
+    var ariaLabel = props['aria-label'];
     var memoizedOverrides = useMemo(function () { return ({
         // BaseSelect wil render this Popover component with DropdownContainer as content and ControlContainer as children/target
         Popover: {
@@ -153,6 +154,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: {
@@ -242,6 +244,7 @@ var useOverlaySelectOverrides = function (props) {
         scrollContainer,
         scrollElement,
         popoverOpen,
+        ariaLabel,
     ]);
     var overrides = useMemo(function () { return mergeOverrides(memoizedOverrides, _omit(props.overrides, overridesToOmit)); }, [memoizedOverrides, props.overrides]);
     return {

package/esm/select/selectMenuAdapter/CollapsibleSelectMenu.js

@@ -1,4 +1,4 @@
-import { __assign, __read } from "tslib";
+import { __assign, __read, __spreadArray } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import _isNumber from 'lodash/isNumber';
 import { useCallback, useEffect, useMemo, useRef } from 'react';
@@ -140,7 +140,7 @@ export 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;
@@ -158,11 +158,19 @@ export var CollapsibleSelectMenu = function (_a) {
                     _a[GROUP_SELECT_ALL_ID] = true,
                     _a.selected = groupSelectAllSelected,
                     _a);
-                return (_jsxs(Collapsible, __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: [_jsx(HiddenElement, __assign({ id: menuDescriptionId !== null && menuDescriptionId !== void 0 ? menuDescriptionId : '' }, { children: "".concat(groupLabel, " ").concat(locale.groupExpandedSuffix) })), _isEmpty(itemsInGroup) ? (_jsx(NoResultsOverriden, __assign({ "aria-live": "polite", "aria-atomic": true, msg: noResultsMsg, noResultsConfig: noResultsConfig, "aria-disabled": true, "$groupId": groupId }, noResultsProps))) : (_jsxs(MenuComponent, __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 = _isEmpty(itemsInGroup)
+                    ? [
+                        _jsx(NoResultsOverriden, __assign({ msg: noResultsMsg, noResultsConfig: noResultsConfig, "$groupId": groupId }, noResultsProps), "no-results"),
+                    ]
+                    : __spreadArray([
+                        shouldDisplayGroupSelectAll ? (_jsx(SelectMenuItem, __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 ? (_jsx(SelectMenuItem, __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
+                    ], __read(itemsInGroup.map(function (item) {
+                        var selected = selectedValuesSet.has(item[valueKey]);
+                        return (_jsx(SelectMenuItem, __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 (_jsxs(Collapsible, __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: [_jsx(HiddenElement, __assign({ id: menuDescriptionId !== null && menuDescriptionId !== void 0 ? menuDescriptionId : '' }, { children: "".concat(groupLabel, " ").concat(locale.groupExpandedSuffix) })), _jsx(MenuComponent, __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 && !_isEmpty(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 ? (_jsx(SelectMenuItem, __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 ? (_jsx(SelectMenuItem, __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 (_jsx(SelectMenuItem, __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));
             })] })));
 };

package/esm/select/selectMenuAdapter/NestedSelectMenuAdapter.js

@@ -79,6 +79,6 @@ var NestedSelectMenuAdapter = function (props) {
         }
         return null;
     };
-    return totalCount ? (_jsx(MenuOverriden, __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 }))) : (_jsx(Menu, __assign({ resetMenuHighlightOnMouseLeave: true, focusWhenNavigationEnabled: false, keyboardFocusRestoreTarget: inputElement, tabIndex: -1, "aria-label": "Menu", role: "listbox", getActionsElement: getActionsElement, id: listboxId }, { children: _jsx(NoResultsOverriden, __assign({ "aria-live": "polite", "aria-atomic": true, msg: noResultsMsg, noResultsConfig: noResultsConfig, "aria-disabled": true }, noResultsProps)) })));
+    return totalCount ? (_jsx(MenuOverriden, __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 }))) : (_jsx(Menu, __assign({ resetMenuHighlightOnMouseLeave: true, focusWhenNavigationEnabled: false, keyboardFocusRestoreTarget: inputElement, tabIndex: -1, "aria-label": "Menu", role: "listbox", getActionsElement: getActionsElement, id: listboxId }, { children: _jsx(NoResultsOverriden, __assign({ msg: noResultsMsg, noResultsConfig: noResultsConfig }, noResultsProps)) })));
 };
 export default NestedSelectMenuAdapter;

package/esm/select/selectMenuAdapter/SelectMenuAdapter.js

@@ -59,24 +59,26 @@ var SelectMenuAdapter = function (props) {
     }); }, [mergedOverrides.ListItemText, mergedOverrides.MenuItem, mergedOverrides.Checkbox]);
     var currentCount = 0;
     var totalCount = normalizeOptions(groupedItems).length;
-    var itemsToRender = _flatten(Object.keys(removeUngroupedIfEmpty(groupedItems)).map(function (itemGroup, index) {
+    var optionItems = _flatten(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[SELECT_ALL_ID] && selectAllSelected);
             var selectMenuItem = (_jsx(SelectMenuItem, __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[SELECT_ALL_ID]
-                ? [selectMenuItem, _jsx(DividerOverriden, __assign({ "$item": item }, dividerProps), "divider-select-all")]
+                ? [
+                    selectMenuItem,
+                    _jsx(DividerOverriden, __assign({ "$item": item }, dividerProps, { role: "presentation" }), "divider-select-all"),
+                ]
                 : selectMenuItem;
         });
         if (itemGroup !== UNGROUPED_ID) {
-            menuItems.unshift(_jsx(DividerOverriden, __assign({ first: index === 0 }, dividerProps, { children: _jsx(Typography, __assign({ variant: "body-xs", weight: "semibold", className: "spr-text-tertiary" }, { children: itemGroup })) }), "divider-".concat(itemGroup)));
+            menuItems.unshift(_jsx(DividerOverriden, __assign({ first: index === 0 }, dividerProps, { role: "presentation" }, { children: _jsx(Typography, __assign({ variant: "body-xs", weight: "semibold", className: "spr-text-tertiary" }, { children: itemGroup })) }), "divider-".concat(itemGroup)));
         }
         return menuItems;
     }));
-    if (_isEmpty(itemsToRender)) {
-        itemsToRender = (_jsx(NoResultsOverriden, __assign({ "aria-live": "polite", "aria-atomic": true, msg: noResultsMsg, noResultsConfig: noResultsConfig, "aria-disabled": true }, noResultsProps)));
-    }
+    var hasOptions = !_isEmpty(optionItems);
+    var itemsToRender = hasOptions ? (optionItems) : (_jsx(NoResultsOverriden, __assign({ msg: noResultsMsg, noResultsConfig: noResultsConfig }, noResultsProps)));
     return (
     // focusWhenNavigationEnabled false, or else it will remove focus from select input
     _jsx(MenuOverriden, __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/esm/select/styled-component.js

@@ -2,8 +2,7 @@ import { __assign, __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, memo, useRef, cloneElement, Children } from 'react';
 import { useLocale } from '../locale';
-import { Box } from '../box';
-import MenuItem from '../menu/menu-item';
+import ListItem from '../list/list-item';
 import { styled } from '../style';
 import { getComponentSizeTheme, getDefaultSize } from '../helpers/themeHelpers';
 import { HiddenElement } from './utils/hidden-element';
@@ -17,7 +16,8 @@ var NoResults = forwardRef(function (_a, ref) {
     var msg = _a.msg, noResultsConfig = _a.noResultsConfig, props = __rest(_a, ["msg", "noResultsConfig"]);
     var locale = useLocale();
     var noResultsId = useSelectIds().noResultsId;
-    return (_jsx(MenuItem, __assign({ button: false, hideInlineActions: true, ref: ref }, props, { children: noResultsConfig ? (_jsx(NoResultsMessage, __assign({}, noResultsConfig, { id: noResultsId }))) : (_jsx(Box, __assign({ id: noResultsId }, { children: msg || locale.select.noResultsMsg }))) })));
+    var message = msg || locale.select.noResultsMsg;
+    return (_jsx(ListItem, __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 ? _jsx(NoResultsMessage, __assign({}, noResultsConfig)) : message })));
 });
 export var StyledInputContainer = styled('div', inputContainerCVA, 
 // theme override styleFn

package/esm/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/esm/slider/slider.js

@@ -22,7 +22,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 : _e, _f = _a.onFinalChange, onFinalChange = _f === void 0 ? _noop : _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 : _e, _f = _a.onFinalChange, onFinalChange = _f === void 0 ? _noop : _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 = __read(useState(-1), 2), hoveredThumbIndex = _p[0], setHoveredThumbIndex = _p[1];
     var hasMounted = useHasMounted();
     var _q = __read(useState(false), 2), isFocusVisible = _q[0], setIsFocusVisible = _q[1];
@@ -96,7 +96,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 (_jsxs(Thumb, __assign({}, props, { "data-thumbIndex": index, onMouseEnter: function () { return setHoveredThumbIndex(index); }, onMouseLeave: function () { return setHoveredThumbIndex(-1); }, "$thumbIndex": index, "$isDragged": isDragged, style: __assign(__assign({ '--sw-bg-color': value.length > 2 ? thumbColors[index] : primaryIntentColor !== null && primaryIntentColor !== void 0 ? primaryIntentColor : 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 (_jsxs(Thumb, __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: __assign(__assign({ '--sw-bg-color': value.length > 2 ? thumbColors[index] : primaryIntentColor !== null && primaryIntentColor !== void 0 ? primaryIntentColor : intentColor(styleUtils, sharedProps), '--sw-bg-color-hover': value.length > 2
                             ? thumbColors[index]
                             : primaryIntentColor !== null && primaryIntentColor !== void 0 ? primaryIntentColor : intentColor(styleUtils, sharedProps, theme.spr.interactiveHover), '--sw-shadow': isFocusVisible && focusedThumbIndex === index
                             ? "0 0 0 3px ".concat(theme.spr.focus01)

package/esm/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/esm/time-range-picker/RangeSelectorContainer.js

@@ -114,7 +114,7 @@ var RangeSelectorContainer = function (_a) {
                         fill: theme.spr.clrRed,
                     });
                 } }), _jsx(Typography, __assign({ className: "my-0", variant: "bs3" }, { children: errMsg }))] }))) : null;
-    return (_jsxs(Box, __assign({ className: "spr-ui-01 rounded-8" }, { children: [_jsxs(Header, __assign({ "$setTimezone": setTimezone, "$onClose": props.onClose }, headerProps, { children: [_jsx(HeaderBeforeEnhancer, __assign({ variant: "heading-7", "$as": "span", className: "flex items-center" }, headerBeforeEnhancerProps, { children: locale.timeRangePicker.headerLabel })), disableTimezone ? null : (_jsx(TimezonePicker, __assign({ setTimezone: setTimezone, timezone: timezone, timezoneOptions: timezoneOptions }, timezonePickerProps, { className: ['w-0 grow max-w-md', timezonePickerProps === null || timezonePickerProps === void 0 ? void 0 : timezonePickerProps.className] })))] })), _jsx(RangeSelector, __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: _jsx(Footer, __assign({ "$hasError": hasError, "$onSubmit": handleSubmit, "$onClose": props.onClose }, footerProps, { className: ['px-6 py-3 mt-2', footerProps.className] }, { children: _jsxs(Box, __assign({ className: "justify-between w-0 grow flex" }, { children: [_jsx(FooterBeforeEnhancer, __assign({}, footerBeforeEnhancerProps)), _jsxs(Stack, __assign({ direction: monthsShown === 1 ? 'vertical' : 'horizontal', gap: 3, className: monthsShown !== 1 ? 'items-center' : undefined, style: { maxWidth: 'fit-content' } }, { children: [monthsShown === 1 ? null : errorEl, _jsxs(StackItem, __assign({ className: "flex self-end" }, { children: [(footerProps === null || footerProps === void 0 ? void 0 : footerProps.showClearButton) ? (_jsx(Button, __assign({ size: "xs", onClick: footerProps.handleClearBtnClick, variant: "secondary", "data-testid": "clear", disabled: timeRange.length === 0 }, { children: locale.timeRangePicker.clearBtnLabel }))) : (_jsx(Button, __assign({ size: "xs", onClick: props.onClose, variant: "secondary", "data-testid": "cancel" }, { children: locale.timeRangePicker.cancelBtnLabel }))), _jsx(Button, __assign({ size: "xs", className: "ml-3", onClick: handleSubmit, disabled: hasError, "data-testid": "save" }, { children: locale.timeRangePicker.saveBtnLabel }))] })), monthsShown === 1 ? errorEl : null] }))] })) })) }, rangeSelectorProps))] })));
+    return (_jsxs(Box, __assign({ className: "spr-ui-01 rounded-8" }, { children: [_jsxs(Header, __assign({ "$setTimezone": setTimezone, "$onClose": props.onClose }, headerProps, { children: [_jsx(HeaderBeforeEnhancer, __assign({ variant: "heading-7", "$as": "span", className: "flex items-center" }, headerBeforeEnhancerProps, { children: locale.timeRangePicker.headerLabel })), disableTimezone ? null : (_jsx(TimezonePicker, __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] })))] })), _jsx(RangeSelector, __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: _jsx(Footer, __assign({ "$hasError": hasError, "$onSubmit": handleSubmit, "$onClose": props.onClose }, footerProps, { className: ['px-6 py-3 mt-2', footerProps.className] }, { children: _jsxs(Box, __assign({ className: "justify-between w-0 grow flex" }, { children: [_jsx(FooterBeforeEnhancer, __assign({}, footerBeforeEnhancerProps)), _jsxs(Stack, __assign({ direction: monthsShown === 1 ? 'vertical' : 'horizontal', gap: 3, className: monthsShown !== 1 ? 'items-center' : undefined, style: { maxWidth: 'fit-content' } }, { children: [monthsShown === 1 ? null : errorEl, _jsxs(StackItem, __assign({ className: "flex self-end" }, { children: [(footerProps === null || footerProps === void 0 ? void 0 : footerProps.showClearButton) ? (_jsx(Button, __assign({ size: "xs", onClick: footerProps.handleClearBtnClick, variant: "secondary", "data-testid": "clear", disabled: timeRange.length === 0 }, { children: locale.timeRangePicker.clearBtnLabel }))) : (_jsx(Button, __assign({ size: "xs", onClick: props.onClose, variant: "secondary", "data-testid": "cancel" }, { children: locale.timeRangePicker.cancelBtnLabel }))), _jsx(Button, __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';
 export default RangeSelectorContainer;