@sprinklrjs/spaceweb 14.12.1 → 14.12.3

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

@@ -1,20 +1,23 @@
 import { __assign, __read, __rest } from "tslib";
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo, useRef } from 'react';
 import * as React from 'react';
 import _pick from 'lodash/pick';
 import { Select as DefaultSelect } from '../select';
 import { ListItem } from '../list';
 import { Typography } from '../typography';
+import { Box } from '../box';
 import FlagContainer from './flag-container';
 import { useLocale } from '../locale';
 import { mergeOverrides, useOverrides } from '../overrides';
-import { iso2FlagEmoji, countrySelectFilterOptions } from './utils';
+import { iso2FlagEmoji, countrySelectFilterOptions, resolveCountryLabelParts } from './utils';
 import { COUNTRY_SELECT_OPTIONS } from './constants';
 import { POPOVER_MARGIN } from '../popover/types';
 var SelectListItem = React.forwardRef(function (_a, ref) {
-    var mapIsoToLabel = _a.mapIsoToLabel, _b = _a.$item, id = _b.id, label = _b.label, dialCode = _b.dialCode, rest = __rest(_a, ["mapIsoToLabel", "$item"]);
-    return (_jsxs(ListItem, __assign({}, rest, { startEnhancer: iso2FlagEmoji(id), ref: ref }, { children: [dialCode, _jsxs(Typography, __assign({ "data-testid": id, "data-entity-type": "country-label", className: "spr-text-03 ml-1" }, { children: ["(", mapIsoToLabel ? mapIsoToLabel(id) : label, ")"] }))] })));
+    var mapIsoToLabel = _a.mapIsoToLabel, country = _a.$item, rest = __rest(_a, ["mapIsoToLabel", "$item"]);
+    var id = country.id, dialCode = country.dialCode;
+    var _b = resolveCountryLabelParts(country, mapIsoToLabel), primaryName = _b.primaryName, nativeName = _b.nativeName, nativeLang = _b.nativeLang;
+    return (_jsxs(ListItem, __assign({}, rest, { startEnhancer: iso2FlagEmoji(id), ref: ref }, { children: [dialCode, _jsxs(Typography, __assign({ "data-testid": id, "data-entity-type": "country-label", className: "spr-text-03 ml-1" }, { children: ["(", primaryName, nativeName && nativeLang ? (_jsxs(_Fragment, { children: [' (', _jsx(Box, __assign({ "$as": "span", lang: nativeLang }, { children: nativeName })), ")"] })) : null, _jsx(Box, __assign({ "$as": "span" }, { children: ")" }))] }))] })));
 });
 var CountrySelect = function (props) {
     var size = props.size, disabled = props.disabled, inputRef = props.inputRef, onChange = props.onChange, countries = props.countries, value = props.value, mapIsoToLabel = props.mapIsoToLabel, maxDropdownHeight = props.maxDropdownHeight, maxDropdownWidth = props.maxDropdownWidth, overrides = props.overrides;

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

@@ -7,6 +7,14 @@ export type Country = {
     id: keyof typeof COUNTRIES;
     label: string;
     dialCode: string;
+    /**
+     * The portion of `label` (without the wrapping parentheses) that is rendered in a language
+     * other than the component's default (English), e.g. `'भारत'` for India. Used to apply the
+     * correct `lang` attribute to that segment for screen reader pronunciation (WCAG 3.1.2).
+     */
+    nativeName?: string;
+    /** BCP 47 language tag for `nativeName`, e.g. `'hi'` for Hindi. */
+    nativeLang?: string;
 };
 export type State = {
     country: Country;
@@ -22,11 +30,26 @@ export type PhoneInputOverrides = {
     FlagContainer?: Override<SharedProps & Record<string, any>>;
     DialCode?: Override<SharedProps & Record<string, any>>;
 };
+/**
+ * Custom country label for `mapIsoToLabel`. Provide both `nativeName` and `nativeLang` when a
+ * native-language segment should be marked with `lang` (WCAG 3.1.2); otherwise only `label` is used.
+ */
+export type CustomCountryLabel = {
+    label: string;
+    nativeName?: string;
+    nativeLang?: string;
+};
 export type PhoneInputProps = Omit<InputProps, 'value' | 'onChange'> & {
     onInputChange?: (event: React.SyntheticEvent<HTMLInputElement>) => unknown;
     onChange?: (value: Value) => void;
     value?: Value;
-    mapIsoToLabel?: (iso: string) => string;
+    /**
+     * Maps an ISO country code to the dropdown label. Return a `string` to replace the whole label
+     * (legacy behavior), or a `CustomCountryLabel` with both `nativeName` and `nativeLang` to mark
+     * a native-language segment with `lang` (WCAG 3.1.2). Object results missing either native field
+     * are flattened into a single label string.
+     */
+    mapIsoToLabel?: (iso: string) => string | CustomCountryLabel;
     maxDropdownHeight?: string;
     countries?: Array<Country>;
     maxDropdownWidth?: string;

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

@@ -9,7 +9,7 @@ declare const useStatefulPhoneInput: ({ clearable, disabled, id, initialState, i
     intent: import("..").Intent | undefined;
     maxDropdownHeight: string;
     maxDropdownWidth: string;
-    mapIsoToLabel: ((iso: string) => string) | undefined;
+    mapIsoToLabel: ((iso: string) => string | import("./types").CustomCountryLabel) | undefined;
     name: string | undefined;
     overrides: import("../input").BaseInputOverrides & {
         Root?: import("../overrides").Override<import("../input").SharedProps & Record<string, any>> | undefined;

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

@@ -1,5 +1,5 @@
 import type { Value as ValueT } from '../select/types';
-import type { Value, Country } from './types';
+import type { Value, Country, CustomCountryLabel } from './types';
 export declare const iso2FlagEmoji: (iso: string) => string | undefined;
 export declare const sanitize: (value?: string) => string;
 export declare const getPhoneNumberWithCountryDialCode: (value: Value) => string | undefined;
@@ -11,3 +11,27 @@ export declare const getDefaultValue: (countries?: Country[]) => {
     country: Country;
     phoneNumber: string;
 };
+export type CountryLabelParts = {
+    primaryName: string;
+    nativeName?: string;
+    nativeLang?: string;
+};
+/**
+ * Splits a country's `label` (e.g. `'India (भारत)'`) into the default-language name and the
+ * trailing native-language segment (if any), so the native segment can be given its own `lang`
+ * attribute for correct screen reader pronunciation (WCAG 3.1.2 - Language of Parts).
+ *
+ * Requires both `nativeName` and `nativeLang`. Falls back to the whole `label` as `primaryName`
+ * if either is missing or `nativeName` is not actually a trailing `label` suffix, so incomplete
+ * data never breaks rendering or ships a native segment without a language tag.
+ */
+export declare const getCountryLabelParts: ({ label, nativeName, nativeLang }: Country) => CountryLabelParts;
+/**
+ * Resolves the label parts to render for a country option, honoring an optional `mapIsoToLabel`
+ * override (string or `{ label, nativeName?, nativeLang? }`).
+ *
+ * String overrides replace the whole label (legacy behavior). Object overrides only split out a
+ * `lang`-tagged native segment when both `nativeName` and `nativeLang` are provided; otherwise the
+ * 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;

package/esm/phone-input/utils.js

@@ -30,3 +30,52 @@ export var countrySelectFilterOptions = function (options, filterValue, excludeO
 export var getDefaultValue = function (countries) {
     return countries && !_isEmpty(countries) ? { country: COUNTRIES[countries[0].id], phoneNumber: '' } : defaultValue;
 };
+/**
+ * Splits a country's `label` (e.g. `'India (भारत)'`) into the default-language name and the
+ * trailing native-language segment (if any), so the native segment can be given its own `lang`
+ * attribute for correct screen reader pronunciation (WCAG 3.1.2 - Language of Parts).
+ *
+ * Requires both `nativeName` and `nativeLang`. Falls back to the whole `label` as `primaryName`
+ * if either is missing or `nativeName` is not actually a trailing `label` suffix, so incomplete
+ * data never breaks rendering or ships a native segment without a language tag.
+ */
+export var getCountryLabelParts = function (_a) {
+    var label = _a.label, nativeName = _a.nativeName, nativeLang = _a.nativeLang;
+    if (!nativeName || !nativeLang) {
+        return { primaryName: label };
+    }
+    var nativeNameSuffix = "(".concat(nativeName, ")");
+    var suffixStartIndex = label.lastIndexOf(nativeNameSuffix);
+    var isSuffixAtEnd = suffixStartIndex !== -1 && suffixStartIndex + nativeNameSuffix.length === label.length;
+    if (!isSuffixAtEnd) {
+        return { primaryName: label };
+    }
+    return { primaryName: label.slice(0, suffixStartIndex).trimEnd(), nativeName: nativeName, nativeLang: nativeLang };
+};
+/**
+ * Resolves the label parts to render for a country option, honoring an optional `mapIsoToLabel`
+ * override (string or `{ label, nativeName?, nativeLang? }`).
+ *
+ * String overrides replace the whole label (legacy behavior). Object overrides only split out a
+ * `lang`-tagged native segment when both `nativeName` and `nativeLang` are provided; otherwise the
+ * visible text is flattened into `primaryName` so display stays correct without invalid markup.
+ */
+export var resolveCountryLabelParts = function (country, mapIsoToLabel) {
+    if (!mapIsoToLabel) {
+        return getCountryLabelParts(country);
+    }
+    var mapped = mapIsoToLabel(country.id);
+    if (typeof mapped === 'string') {
+        return { primaryName: mapped };
+    }
+    if (!mapped.nativeName || !mapped.nativeLang) {
+        return {
+            primaryName: mapped.nativeName ? "".concat(mapped.label, " (").concat(mapped.nativeName, ")") : mapped.label,
+        };
+    }
+    return {
+        primaryName: mapped.label,
+        nativeName: mapped.nativeName,
+        nativeLang: mapped.nativeLang,
+    };
+};

package/esm/snackbar/Snackbar.d.ts

@@ -1,7 +1,7 @@
 import type { ReactElement } from 'react';
 import type { SnackbarProps } from './types';
 declare const Snackbar: {
-    ({ intent: _intent, message: _message, disableManualClose, placement, autoHide, autoHideDuration, hideOnClickAway, overrides: _overrides, onClose, }: SnackbarProps): ReactElement | null;
+    ({ intent: _intent, message: _message, id, disableManualClose, placement, autoHide, autoHideDuration, hideOnClickAway, overrides: _overrides, onClose, }: SnackbarProps): ReactElement | null;
     __standard: string;
 };
 export default Snackbar;

package/esm/snackbar/Snackbar.js

@@ -19,11 +19,12 @@ import { useLocale } from '../locale';
 import { useStyle } from '../style';
 import { ThemeProvider } from '../theme';
 var Snackbar = function (_a) {
-    var _b = _a.intent, _intent = _b === void 0 ? 'success' : _b, _message = _a.message, _c = _a.disableManualClose, disableManualClose = _c === void 0 ? false : _c, _d = _a.placement, placement = _d === void 0 ? 'bottom' : _d, _e = _a.autoHide, autoHide = _e === void 0 ? true : _e, _f = _a.autoHideDuration, autoHideDuration = _f === void 0 ? TYPE_TO_HIDE_DURATION[_intent] : _f, _g = _a.hideOnClickAway, hideOnClickAway = _g === void 0 ? true : _g, _overrides = _a.overrides, _h = _a.onClose, onClose = _h === void 0 ? _noop : _h;
+    var _b = _a.intent, _intent = _b === void 0 ? 'success' : _b, _message = _a.message, id = _a.id, _c = _a.disableManualClose, disableManualClose = _c === void 0 ? false : _c, _d = _a.placement, placement = _d === void 0 ? 'bottom' : _d, _e = _a.autoHide, autoHide = _e === void 0 ? true : _e, _f = _a.autoHideDuration, autoHideDuration = _f === void 0 ? TYPE_TO_HIDE_DURATION[_intent] : _f, _g = _a.hideOnClickAway, hideOnClickAway = _g === void 0 ? true : _g, _overrides = _a.overrides, _h = _a.onClose, onClose = _h === void 0 ? _noop : _h;
     var outerTheme = useStyle().theme;
     var inverseTheme = useMemo(function () { return (isDarkTheme(outerTheme) ? hyperspaceLight : hyperspaceDark); }, [outerTheme]);
     var _j = useSnackbar({
         intent: _intent,
+        id: id,
         message: _message,
         overrides: _overrides,
         autoHide: autoHide,
@@ -52,18 +53,12 @@ var Snackbar = function (_a) {
     var _s = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.CloseIcon, CloseIcon), 2), Close = _s[0], closeProps = _s[1];
     var _t = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.CloseIconButton, IconButton), 2), CloseIconButton = _t[0], closeIconButtonProps = _t[1];
     var locale = useLocale();
-    var role = INTENT_TO_ROLE[intent];
-    // We don't know if the message contains any interactive elements, so we only
-    // delegate to the shared screen-reader announcer when the message is a string.
     var isStringMessage = typeof message === 'string';
-    // Announce string messages through the shared global live region instead of
-    // hand-rolling sr-only regions here. The announcer keeps a single source of
-    // truth for status messages (WCAG 4.1.3) and re-announces repeated text.
     useEffect(function () {
-        if (isStringMessage && message) {
-            announce(message, { politeness: role === 'alert' ? 'assertive' : 'polite' });
+        if (typeof _message === 'string' && _message) {
+            announce(_message, { politeness: INTENT_TO_ROLE[_intent] === 'alert' ? 'assertive' : 'polite' });
         }
-    }, [isStringMessage, message, role]);
+    }, [_message, _intent, id]);
     return (_jsx(_Fragment, { children: shouldRender ? (_jsx(LayersManager, __assign({ zIndex: Z_INDEX.SNACKBAR }, { children: _jsx(Layer, __assign({}, sharedProps, layerProps, { children: _jsx(PlacementContainer, __assign({ "data-spaceweb": "snackbar", "data-testid": "snackbar" }, sharedProps, placementContainerProps, { children: _jsx(SnackbarContainer, __assign({}, snackbarContainerProps, { ref: snackbarContainerRef }, sharedProps, snackbarContainerOverrideProps, { style: [getSnackbarContainerAnimationStyle, snackbarContainerOverrideProps.style] }, { children: _jsx(ThemeProvider, __assign({ theme: inverseTheme }, { children: _jsxs(ContentContainer, __assign({}, sharedProps, contentContainerProps, { children: [_jsx(IconsContainer, __assign({}, sharedProps, iconsContainerProps, { children: _jsx(IntentIcon, __assign({ size: 20, className: getIconStyles }, sharedProps, intentIconProps)) })), _jsx(Message
                                     // The sr-only region handles screen reader announcements
                                     // to prevent the message from being read twice

package/esm/snackbar/snackbarContext.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { Intent } from '.';
+import type { Intent } from './types';
 type Notification = {
     message: string;
     intent?: Intent;

package/esm/snackbar/snackbarContext.js

@@ -10,14 +10,19 @@ export var SnackbarProvider = function (_a) {
     var children = _a.children;
     var _b = __read(useState(''), 2), message = _b[0], setMessage = _b[1];
     var _c = __read(useState('success'), 2), intent = _c[0], setIntent = _c[1];
+    var _d = __read(useState(0), 2), id = _d[0], setId = _d[1];
     var notify = useCallback(function (_a) {
         var _b = _a.intent, _intent = _b === void 0 ? 'success' : _b, _message = _a.message;
+        setId(function (prev) { return prev + 1; });
         setMessage(_message);
         setIntent(_intent);
     }, []);
-    var onClose = useCallback(function () {
+    var onClose = useCallback(function (reason) {
+        // Keep content when swapping instances; only clear on real dismiss.
+        if (reason === 'messageChange')
+            return;
         setMessage('');
         setIntent('success');
     }, []);
-    return (_jsxs(_Fragment, { children: [_jsx(SnackbarContext.Provider, __assign({ value: notify }, { children: children })), message && intent ? _jsx(Snackbar, { message: message, intent: intent, onClose: onClose }) : null] }));
+    return (_jsxs(_Fragment, { children: [_jsx(SnackbarContext.Provider, __assign({ value: notify }, { children: children })), message && intent ? _jsx(Snackbar, { id: id, message: message, intent: intent, onClose: onClose }) : null] }));
 };

package/esm/snackbar/types.d.ts

@@ -26,6 +26,12 @@ export type SnackbarOverrides = {
 };
 export type SnackbarProps = {
     message?: React.ReactNode;
+    /**
+     * Opaque instance identity. Bump this (e.g. increment a counter) when re-showing
+     * the same `message` so the snackbar re-opens and re-announces for screen readers.
+     * `SnackbarProvider` / `useNotification` set this automatically on every `notify()`.
+     */
+    id?: string | number;
     intent?: Intent;
     hideOnClickAway?: boolean;
     disableManualClose?: boolean;

package/esm/snackbar/useSnackbar.d.ts

@@ -5,6 +5,7 @@ type UseSnackbarParams = {
     autoHideDuration: number;
     hideOnClickAway: boolean;
     intent: Intent;
+    id?: string | number;
     message?: React.ReactNode;
     onClose?: (reason: HideReason) => void;
     overrides?: SnackbarOverrides;
@@ -23,5 +24,5 @@ type UseSnackbarReturnValue = {
     intent: Intent;
     overrides?: SnackbarOverrides;
 };
-declare const useSnackbar: ({ autoHide, autoHideDuration, hideOnClickAway, intent: nextIntent, message: nextMessage, onClose, overrides: nextOverrides, }: UseSnackbarParams) => UseSnackbarReturnValue;
+declare const useSnackbar: ({ autoHide, autoHideDuration, hideOnClickAway, intent: nextIntent, id, message: nextMessage, onClose, overrides: nextOverrides, }: UseSnackbarParams) => UseSnackbarReturnValue;
 export default useSnackbar;

package/esm/snackbar/useSnackbar.js

@@ -33,10 +33,10 @@ var useAutoHide = function (_a) {
     }, [open, autoHide, autoHideDuration, autoHideTimeoutRef]);
 };
 var useDomVisibility = function (_a) {
-    var message = _a.message, open = _a.open, enter = _a.enter, handleClose = _a.handleClose, intent = _a.intent;
+    var message = _a.message, open = _a.open, enter = _a.enter, handleClose = _a.handleClose, intent = _a.intent, id = _a.id;
     var _b = __read(useState(false), 2), domVisibility = _b[0], setDomVisibility = _b[1];
     var removeFromDomTimeoutRef = useRef();
-    // handle exit, enter on message change
+    // handle exit, enter on message / intent / id change
     useEffect(function () {
         if (!message)
             return undefined;
@@ -51,7 +51,7 @@ var useDomVisibility = function (_a) {
         open && handleClose('messageChange');
         return function () { return window.clearTimeout(timeoutId); };
         // eslint-disable-next-line react-hooks/exhaustive-deps -- handleClose not required
-    }, [message, intent]);
+    }, [message, intent, id]);
     // remove from DOM, once transition is over
     useUpdateEffect(function () {
         if (open)
@@ -64,7 +64,7 @@ var useDomVisibility = function (_a) {
     return domVisibility;
 };
 var useSnackbar = function (_a) {
-    var autoHide = _a.autoHide, autoHideDuration = _a.autoHideDuration, hideOnClickAway = _a.hideOnClickAway, nextIntent = _a.intent, nextMessage = _a.message, onClose = _a.onClose, nextOverrides = _a.overrides;
+    var autoHide = _a.autoHide, autoHideDuration = _a.autoHideDuration, hideOnClickAway = _a.hideOnClickAway, nextIntent = _a.intent, id = _a.id, nextMessage = _a.message, onClose = _a.onClose, nextOverrides = _a.overrides;
     var _b = __read(useState(false), 2), open = _b[0], setOpen = _b[1];
     var _c = __read(useState({
         intent: nextIntent,
@@ -89,7 +89,14 @@ var useSnackbar = function (_a) {
     };
     useAutoHide({ open: open, handleClose: handleClose, autoHideTimeoutRef: autoHideTimeoutRef, autoHideDuration: autoHideDuration, autoHide: autoHide });
     var snackbarContainerRef = useHideOnClickAway({ hideOnClickAway: hideOnClickAway, handleClose: handleClose, open: open });
-    var shouldRender = useDomVisibility({ handleClose: handleClose, open: open, intent: nextIntent, message: nextMessage, enter: enter });
+    var shouldRender = useDomVisibility({
+        handleClose: handleClose,
+        open: open,
+        intent: nextIntent,
+        id: id,
+        message: nextMessage,
+        enter: enter,
+    });
     var handleMouseEnter = function () {
         window.clearTimeout(autoHideTimeoutRef.current);
     };

package/input/base-input.js

@@ -143,7 +143,7 @@ var BaseInput = function (_a) {
     var hasScroll = inputRef.current && inputRef.current.scrollHeight > inputRef.current.clientHeight;
     var charCount = typeof value === 'string' ? value.length : 0;
     var ariaLabel = 'Clear value';
-    return ((0, jsx_runtime_1.jsxs)(InputContainer, tslib_1.__assign({ "data-spaceweb": "base-input" }, sharedProps, inputContainerProps, { children: [(0, jsx_runtime_1.jsx)(Before, tslib_1.__assign({}, sharedProps, beforeProps)), (0, jsx_runtime_1.jsx)(Input, tslib_1.__assign({ ref: inputRef, "aria-activedescendant": props['aria-activedescendant'], "aria-autocomplete": props['aria-autocomplete'], "aria-controls": props['aria-controls'], "aria-errormessage": props['aria-errormessage'], "aria-haspopup": props['aria-haspopup'], "aria-label": props['aria-label'], "aria-labelledby": props['aria-labelledby'], "aria-describedby": props['aria-describedby'], "aria-required": props['aria-required'], "aria-invalid": props['aria-invalid'], autoComplete: _autoComplete, disabled: disabled, readOnly: readOnly, id: id, inputMode: inputMode, maxLength: maxLength, name: name, onBlur: handleOnBlur, onChange: handleChange, onFocus: handleOnFocus, onKeyDown: handleKeyDown, onScroll: handleBoxShadow, onKeyPress: onKeyPress, onKeyUp: onKeyUp, pattern: pattern, placeholder: placeholder, type: getInputType(), required: required, role: role, value: value, min: min, max: max, step: step, draggable: draggable, onDragStart: draggable ? handleOnDragStart : undefined, rows: type === constants_1.CUSTOM_INPUT_TYPE.textarea ? rows : null }, sharedProps, inputProps)), showClearIcon ? ((0, jsx_runtime_1.jsx)(ClearIconContainer, tslib_1.__assign({ "$alignTop": type === constants_1.CUSTOM_INPUT_TYPE.textarea }, sharedProps, clearIconContainerProps, { children: (0, jsx_runtime_1.jsx)(ClearIcon, tslib_1.__assign({ title: ariaLabel, "aria-label": ariaLabel, onClick: onClearIconClick, onKeyDown: function (event) {
+    return ((0, jsx_runtime_1.jsxs)(InputContainer, tslib_1.__assign({ "data-spaceweb": "base-input" }, sharedProps, inputContainerProps, { children: [(0, jsx_runtime_1.jsx)(Before, tslib_1.__assign({}, sharedProps, beforeProps)), (0, jsx_runtime_1.jsx)(Input, tslib_1.__assign({ ref: inputRef, "aria-activedescendant": props['aria-activedescendant'], "aria-autocomplete": props['aria-autocomplete'], "aria-controls": props['aria-controls'], "aria-errormessage": props['aria-errormessage'], "aria-haspopup": props['aria-haspopup'], "aria-label": props['aria-label'], "aria-labelledby": props['aria-labelledby'], "aria-describedby": props['aria-describedby'], "aria-required": props['aria-required'], "aria-invalid": props['aria-invalid'], "aria-expanded": props['aria-expanded'], autoComplete: _autoComplete, disabled: disabled, readOnly: readOnly, id: id, inputMode: inputMode, maxLength: maxLength, name: name, onBlur: handleOnBlur, onChange: handleChange, onFocus: handleOnFocus, onKeyDown: handleKeyDown, onScroll: handleBoxShadow, onKeyPress: onKeyPress, onKeyUp: onKeyUp, pattern: pattern, placeholder: placeholder, type: getInputType(), required: required, role: role, value: value, min: min, max: max, step: step, draggable: draggable, onDragStart: draggable ? handleOnDragStart : undefined, rows: type === constants_1.CUSTOM_INPUT_TYPE.textarea ? rows : null }, sharedProps, inputProps)), showClearIcon ? ((0, jsx_runtime_1.jsx)(ClearIconContainer, tslib_1.__assign({ "$alignTop": type === constants_1.CUSTOM_INPUT_TYPE.textarea }, sharedProps, clearIconContainerProps, { children: (0, jsx_runtime_1.jsx)(ClearIcon, tslib_1.__assign({ title: ariaLabel, "aria-label": ariaLabel, onClick: onClearIconClick, onKeyDown: function (event) {
                         if (event.key && (event.key === 'Enter' || event.key === ' ')) {
                             event.preventDefault();
                             onClearIconClick();

package/list/divider.js

@@ -6,15 +6,17 @@ var react_1 = require("react");
 var overrides_1 = require("../overrides");
 var list_item_1 = tslib_1.__importDefault(require("./list-item"));
 var styled_component_1 = require("./styled-component");
+var utils_1 = require("./utils");
 var Divider = (0, react_1.forwardRef)(function (_a, ref) {
     var children = _a.children, _b = _a.first, first = _b === void 0 ? false : _b, _c = _a.overrides, overrides = _c === void 0 ? {} : _c, className = _a.className, restProps = tslib_1.__rest(_a, ["children", "first", "overrides", "className"]);
     var _d = tslib_1.__read((0, overrides_1.useOverrides)(overrides.Separator, styled_component_1.StyledListItemDivider), 2), Separator = _d[0], separatorProps = _d[1];
     var _e = tslib_1.__read((0, overrides_1.useOverrides)(overrides.SubHeader, list_item_1.default), 2), SubHeader = _e[0], subHeaderProps = _e[1];
+    var propsWithoutContainerAria = (0, utils_1.omitContainerAriaProps)(restProps);
     return children ? ((0, jsx_runtime_1.jsx)(SubHeader, tslib_1.__assign({ className: [
             '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,
-        ], "aria-disabled": true }, restProps, subHeaderProps, { ref: ref }, { children: children }))) : ((0, jsx_runtime_1.jsx)(Separator, tslib_1.__assign({ "data-spaceweb": "divider", "aria-disabled": true, className: className }, restProps, { ref: ref }, separatorProps)));
+        ], role: "presentation" }, propsWithoutContainerAria, subHeaderProps, { ref: ref }, { children: children }))) : ((0, jsx_runtime_1.jsx)(Separator, tslib_1.__assign({ "data-spaceweb": "divider", role: "presentation", className: className }, propsWithoutContainerAria, { ref: ref }, separatorProps)));
 });
 Divider.displayName = 'Divider';
 exports.default = Divider;

package/list/list.js

@@ -13,14 +13,14 @@ var constants_1 = require("./constants");
 var style_1 = require("../style");
 var getCloneElement = function (item, virtualRow, totalCount) {
     var _a, _b;
-    return React.cloneElement(item, {
-        style: [{ '--sw-translate-y': "".concat(virtualRow.start, "px") }, item.props.style],
-        className: ['w-full absolute top-0 left-0 box-border translate-y-[--sw-translate-y]'],
+    return React.cloneElement(item, tslib_1.__assign({ style: [{ '--sw-translate-y': "".concat(virtualRow.start, "px") }, item.props.style], className: ['w-full absolute top-0 left-0 box-border translate-y-[--sw-translate-y]'], 
         // @ts-expect-error TS(2339): Property 'ref' does not exist on type 'ReactElemen... Remove this comment to see the full error message
-        ref: (0, useCombinedRef_1.combineRefs)(virtualRow.measureElement, item.ref),
-        'aria-posinset': (_a = item.props['aria-posinset']) !== null && _a !== void 0 ? _a : virtualRow.index + 1,
-        'aria-setsize': (_b = item.props['aria-setsize']) !== null && _b !== void 0 ? _b : totalCount,
-    });
+        ref: (0, useCombinedRef_1.combineRefs)(virtualRow.measureElement, item.ref) }, ((0, utils_1.isPresentationalRole)(item.props.role)
+        ? {}
+        : {
+            'aria-posinset': (_a = item.props['aria-posinset']) !== null && _a !== void 0 ? _a : virtualRow.index + 1,
+            'aria-setsize': (_b = item.props['aria-setsize']) !== null && _b !== void 0 ? _b : totalCount,
+        })));
 };
 var List = React.forwardRef(function (_a, forwardedRef) {
     var _b = _a.overrides, overrides = _b === void 0 ? {} : _b, children = _a.children, virtual = _a.virtual, scrollElement = _a.scrollElement, _c = _a.overscanCount, overscanCount = _c === void 0 ? constants_1.DEFAULT_OVER_SCAN_COUNT : _c, _d = _a.estimateItemSize, estimateItemSize = _d === void 0 ? constants_1.DEFAULT_LIST_ITEM_HEIGHT : _d, _e = _a.role, role = _e === void 0 ? 'list' : _e, autoScrollToSelectedItem = _a.autoScrollToSelectedItem, style = _a.style, className = _a.className, _f = _a.keepFirstItemMounted, keepFirstItemMounted = _f === void 0 ? false : _f, restProps = tslib_1.__rest(_a, ["overrides", "children", "virtual", "scrollElement", "overscanCount", "estimateItemSize", "role", "autoScrollToSelectedItem", "style", "className", "keepFirstItemMounted"]);
@@ -52,13 +52,10 @@ var List = React.forwardRef(function (_a, forwardedRef) {
         // eslint-disable-next-line react-hooks/exhaustive-deps -- scrollToIndex on mount only
     }, []);
     if (virtual) {
-        return ((0, jsx_runtime_1.jsx)(Root, tslib_1.__assign({ "data-spaceweb": "list", "$as": "div", role: role }, restProps, rootProps, { ref: combinedRef, style: [{ '--sw-min-width': px2rem(styled_component_1.LIST_MIN_WIDTH) }, style, rootProps === null || rootProps === void 0 ? void 0 : rootProps.style], className: [className, rootProps === null || rootProps === void 0 ? void 0 : rootProps.className] }, { children: (0, jsx_runtime_1.jsx)(box_1.Box
-            // NOTE: resetting margin and padding here. should be removed when normalize css merges
-            , tslib_1.__assign({ 
-                // NOTE: resetting margin and padding here. should be removed when normalize css merges
-                className: "w-full relative p-0 m-0", style: {
+        var _h = (0, utils_1.splitA11yProps)(restProps), a11yProps = _h.a11yProps, otherProps = _h.otherProps;
+        return ((0, jsx_runtime_1.jsx)(Root, tslib_1.__assign({ "data-spaceweb": "list", "$as": "div" }, otherProps, rootProps, { ref: combinedRef, style: [{ '--sw-min-width': px2rem(styled_component_1.LIST_MIN_WIDTH) }, style, rootProps === null || rootProps === void 0 ? void 0 : rootProps.style], className: [className, rootProps === null || rootProps === void 0 ? void 0 : rootProps.className] }, { children: (0, jsx_runtime_1.jsx)(box_1.Box, tslib_1.__assign({ className: "w-full relative p-0", style: {
                     height: "".concat(rowVirtualizer.getTotalSize(), "px"),
-                }, "$as": "ul" }, { children: rowVirtualizer
+                }, "$as": "ul", role: role }, a11yProps, { children: rowVirtualizer
                     .getVirtualItems()
                     .map(function (virtualRow) { return getCloneElement(childrenArr[virtualRow.index], virtualRow, childrenArr.length); }) })) })));
     }

package/list/utils.d.ts

@@ -4,3 +4,11 @@ export declare const measureElement: typeof measureElementType;
  * Keeps the first item mounted even when it falls outside the range.
  */
 export declare const customRangeExtractor: (range: Range) => number[];
+export declare const splitA11yProps: (props: Record<string, unknown>) => {
+    a11yProps: Record<string, unknown>;
+    otherProps: Record<string, unknown>;
+};
+export declare const isPresentationalRole: (role?: string | null) => boolean;
+export declare const omitContainerAriaProps: ({ "aria-posinset": _ariaPosInSet, "aria-setsize": _ariaSetSize, ...rest }: Record<string, unknown>) => {
+    [x: string]: unknown;
+};

package/list/utils.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.customRangeExtractor = exports.measureElement = void 0;
+exports.omitContainerAriaProps = exports.isPresentationalRole = exports.splitA11yProps = exports.customRangeExtractor = exports.measureElement = void 0;
 var tslib_1 = require("tslib");
 var react_virtual_1 = require("@tanstack/react-virtual");
 var parseMeasurement = function (str) { return parseFloat(str) || 0; };
@@ -28,3 +28,33 @@ var customRangeExtractor = function (range) {
     return tslib_1.__spreadArray([0], tslib_1.__read(defaultIndices), false);
 };
 exports.customRangeExtractor = customRangeExtractor;
+var isA11yProp = function (key) { return key === 'id' || key === 'tabIndex' || key.startsWith('aria-'); };
+var splitA11yProps = function (props) {
+    var e_1, _a;
+    var a11yProps = {};
+    var otherProps = {};
+    try {
+        for (var _b = tslib_1.__values(Object.entries(props)), _c = _b.next(); !_c.done; _c = _b.next()) {
+            var _d = tslib_1.__read(_c.value, 2), key = _d[0], value = _d[1];
+            (isA11yProp(key) ? a11yProps : otherProps)[key] = value;
+        }
+    }
+    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+    finally {
+        try {
+            if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+        }
+        finally { if (e_1) throw e_1.error; }
+    }
+    return { a11yProps: a11yProps, otherProps: otherProps };
+};
+exports.splitA11yProps = splitA11yProps;
+var isPresentationalRole = function (role) {
+    return role === 'presentation' || role === 'none' || role === 'separator';
+};
+exports.isPresentationalRole = isPresentationalRole;
+var omitContainerAriaProps = function (_a) {
+    var _ariaPosInSet = _a["aria-posinset"], _ariaSetSize = _a["aria-setsize"], rest = tslib_1.__rest(_a, ['aria-posinset', 'aria-setsize']);
+    return rest;
+};
+exports.omitContainerAriaProps = omitContainerAriaProps;

package/menu/menu-item.js

@@ -83,7 +83,7 @@ function MenuActionContainer(_a) {
                 // Only show actions that are always visible or whose parent item is highlighted
                 className: [
                     index === 0 ? 'ml-0' : 'ml-1',
-                    alwaysVisible || sharedProps.$highlighted ? 'visible' : 'invisible w-0 ml-0',
+                    alwaysVisible || sharedProps.$highlighted ? 'visible' : 'invisible w-0 overflow-hidden ml-0',
                 ] }, { children: React.cloneElement(actionEl, { tabIndex: -1 }) }), (_a = actionEl.key) !== null && _a !== void 0 ? _a : "menu-action-".concat(index)));
         }) })));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sprinklrjs/spaceweb",
-  "version": "14.12.1",
+  "version": "14.12.3",
   "description": "Components for SpaceWeb",
   "main": "index.js",
   "module": "./esm/index.js",
@@ -100,7 +100,7 @@
     "ts-node": "^10.4.0"
   },
   "peerDependencies": {
-    "@sprinklrjs/spaceweb-themes": "14.12.1",
+    "@sprinklrjs/spaceweb-themes": "14.12.3",
     "react": ">=17.0.2 <19.0.0",
     "react-dom": ">=17.0.2 <19.0.0"
   }