@sprinklrjs/spaceweb 14.12.0 → 14.12.2

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;