@sprinklrjs/spaceweb 14.12.1 → 14.12.3

package/phone-input/country-select.js

@@ -8,6 +8,7 @@ var pick_1 = tslib_1.__importDefault(require("lodash/pick"));
 var select_1 = require("../select");
 var list_1 = require("../list");
 var typography_1 = require("../typography");
+var box_1 = require("../box");
 var flag_container_1 = tslib_1.__importDefault(require("./flag-container"));
 var locale_1 = require("../locale");
 var overrides_1 = require("../overrides");
@@ -15,8 +16,10 @@ var utils_1 = require("./utils");
 var constants_1 = require("./constants");
 var types_1 = require("../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 = tslib_1.__rest(_a, ["mapIsoToLabel", "$item"]);
-    return ((0, jsx_runtime_1.jsxs)(list_1.ListItem, tslib_1.__assign({}, rest, { startEnhancer: (0, utils_1.iso2FlagEmoji)(id), ref: ref }, { children: [dialCode, (0, jsx_runtime_1.jsxs)(typography_1.Typography, tslib_1.__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 = tslib_1.__rest(_a, ["mapIsoToLabel", "$item"]);
+    var id = country.id, dialCode = country.dialCode;
+    var _b = (0, utils_1.resolveCountryLabelParts)(country, mapIsoToLabel), primaryName = _b.primaryName, nativeName = _b.nativeName, nativeLang = _b.nativeLang;
+    return ((0, jsx_runtime_1.jsxs)(list_1.ListItem, tslib_1.__assign({}, rest, { startEnhancer: (0, utils_1.iso2FlagEmoji)(id), ref: ref }, { children: [dialCode, (0, jsx_runtime_1.jsxs)(typography_1.Typography, tslib_1.__assign({ "data-testid": id, "data-entity-type": "country-label", className: "spr-text-03 ml-1" }, { children: ["(", primaryName, nativeName && nativeLang ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [' (', (0, jsx_runtime_1.jsx)(box_1.Box, tslib_1.__assign({ "$as": "span", lang: nativeLang }, { children: nativeName })), ")"] })) : null, (0, jsx_runtime_1.jsx)(box_1.Box, tslib_1.__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/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/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/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/phone-input/utils.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getDefaultValue = exports.countrySelectFilterOptions = exports.getPhoneNumberWithCountryDialCode = exports.sanitize = exports.iso2FlagEmoji = void 0;
+exports.resolveCountryLabelParts = exports.getCountryLabelParts = exports.getDefaultValue = exports.countrySelectFilterOptions = exports.getPhoneNumberWithCountryDialCode = exports.sanitize = exports.iso2FlagEmoji = void 0;
 var tslib_1 = require("tslib");
 var isEmpty_1 = tslib_1.__importDefault(require("lodash/isEmpty"));
 var default_filter_options_1 = require("../select/utils/default-filter-options");
@@ -38,3 +38,54 @@ var getDefaultValue = function (countries) {
     return countries && !(0, isEmpty_1.default)(countries) ? { country: constants_1.COUNTRIES[countries[0].id], phoneNumber: '' } : default_props_1.defaultValue;
 };
 exports.getDefaultValue = getDefaultValue;
+/**
+ * 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.
+ */
+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 };
+};
+exports.getCountryLabelParts = getCountryLabelParts;
+/**
+ * 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.
+ */
+var resolveCountryLabelParts = function (country, mapIsoToLabel) {
+    if (!mapIsoToLabel) {
+        return (0, exports.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,
+    };
+};
+exports.resolveCountryLabelParts = resolveCountryLabelParts;

package/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/snackbar/Snackbar.js

@@ -21,11 +21,12 @@ var locale_1 = require("../locale");
 var style_1 = require("../style");
 var theme_1 = require("../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 ? constants_1.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_1.default : _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 ? constants_1.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_1.default : _h;
     var outerTheme = (0, style_1.useStyle)().theme;
     var inverseTheme = (0, react_1.useMemo)(function () { return ((0, themeHelpers_1.isDarkTheme)(outerTheme) ? light_1.default : dark_1.default); }, [outerTheme]);
     var _j = (0, useSnackbar_1.default)({
         intent: _intent,
+        id: id,
         message: _message,
         overrides: _overrides,
         autoHide: autoHide,
@@ -54,18 +55,12 @@ var Snackbar = function (_a) {
     var _s = tslib_1.__read((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.CloseIcon, close_1.default), 2), Close = _s[0], closeProps = _s[1];
     var _t = tslib_1.__read((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.CloseIconButton, button_1.IconButton), 2), CloseIconButton = _t[0], closeIconButtonProps = _t[1];
     var locale = (0, locale_1.useLocale)();
-    var role = constants_1.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.
     (0, react_1.useEffect)(function () {
-        if (isStringMessage && message) {
-            (0, a11y_1.announce)(message, { politeness: role === 'alert' ? 'assertive' : 'polite' });
+        if (typeof _message === 'string' && _message) {
+            (0, a11y_1.announce)(_message, { politeness: constants_1.INTENT_TO_ROLE[_intent] === 'alert' ? 'assertive' : 'polite' });
         }
-    }, [isStringMessage, message, role]);
+    }, [_message, _intent, id]);
     return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: shouldRender ? ((0, jsx_runtime_1.jsx)(layer_2.LayersManager, tslib_1.__assign({ zIndex: layer_2.Z_INDEX.SNACKBAR }, { children: (0, jsx_runtime_1.jsx)(Layer, tslib_1.__assign({}, sharedProps, layerProps, { children: (0, jsx_runtime_1.jsx)(PlacementContainer, tslib_1.__assign({ "data-spaceweb": "snackbar", "data-testid": "snackbar" }, sharedProps, placementContainerProps, { children: (0, jsx_runtime_1.jsx)(SnackbarContainer, tslib_1.__assign({}, snackbarContainerProps, { ref: snackbarContainerRef }, sharedProps, snackbarContainerOverrideProps, { style: [styled_component_1.getSnackbarContainerAnimationStyle, snackbarContainerOverrideProps.style] }, { children: (0, jsx_runtime_1.jsx)(theme_1.ThemeProvider, tslib_1.__assign({ theme: inverseTheme }, { children: (0, jsx_runtime_1.jsxs)(ContentContainer, tslib_1.__assign({}, sharedProps, contentContainerProps, { children: [(0, jsx_runtime_1.jsx)(IconsContainer, tslib_1.__assign({}, sharedProps, iconsContainerProps, { children: (0, jsx_runtime_1.jsx)(IntentIcon, tslib_1.__assign({ size: 20, className: styled_component_1.getIconStyles }, sharedProps, intentIconProps)) })), (0, jsx_runtime_1.jsx)(Message
                                     // The sr-only region handles screen reader announcements
                                     // to prevent the message from being read twice

package/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/snackbar/snackbarContext.js

@@ -14,15 +14,20 @@ var SnackbarProvider = function (_a) {
     var children = _a.children;
     var _b = tslib_1.__read((0, react_1.useState)(''), 2), message = _b[0], setMessage = _b[1];
     var _c = tslib_1.__read((0, react_1.useState)('success'), 2), intent = _c[0], setIntent = _c[1];
+    var _d = tslib_1.__read((0, react_1.useState)(0), 2), id = _d[0], setId = _d[1];
     var notify = (0, react_1.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 = (0, react_1.useCallback)(function () {
+    var onClose = (0, react_1.useCallback)(function (reason) {
+        // Keep content when swapping instances; only clear on real dismiss.
+        if (reason === 'messageChange')
+            return;
         setMessage('');
         setIntent('success');
     }, []);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SnackbarContext.Provider, tslib_1.__assign({ value: notify }, { children: children })), message && intent ? (0, jsx_runtime_1.jsx)(_1.Snackbar, { message: message, intent: intent, onClose: onClose }) : null] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SnackbarContext.Provider, tslib_1.__assign({ value: notify }, { children: children })), message && intent ? (0, jsx_runtime_1.jsx)(_1.Snackbar, { id: id, message: message, intent: intent, onClose: onClose }) : null] }));
 };
 exports.SnackbarProvider = SnackbarProvider;

package/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/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/snackbar/useSnackbar.js

@@ -35,10 +35,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 = tslib_1.__read((0, react_1.useState)(false), 2), domVisibility = _b[0], setDomVisibility = _b[1];
     var removeFromDomTimeoutRef = (0, react_1.useRef)();
-    // handle exit, enter on message change
+    // handle exit, enter on message / intent / id change
     (0, react_1.useEffect)(function () {
         if (!message)
             return undefined;
@@ -53,7 +53,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
     (0, useUpdateEffect_1.default)(function () {
         if (open)
@@ -66,7 +66,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 = tslib_1.__read((0, react_1.useState)(false), 2), open = _b[0], setOpen = _b[1];
     var _c = tslib_1.__read((0, react_1.useState)({
         intent: nextIntent,
@@ -91,7 +91,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);
     };