@sprinklrjs/spaceweb 14.14.4 → 14.14.6

package/date-input/DateInput.js

@@ -202,11 +202,18 @@ var DateInput = function (_a) {
     }, [_onKeyDown, closeDatePicker]);
     var onBlur = (0, useLatestCallback_1.useLatestCallback)(function (e) {
         var _a;
-        setIsContainerFocused(false);
         var contentEl = contentRef.current;
         // The Year/Month selector menu (which gets autofocused on open) is rendered as a sibling of contentEl
         // We check contentEl.parentElement(Popover.Inner) as a potential container for events
-        if (!contentEl || !(((_a = contentEl.parentElement) === null || _a === void 0 ? void 0 : _a.contains(e.relatedTarget)) || contentEl.contains(e.relatedTarget))) {
+        // While open, the popover's focus lock blurs the chevron towards a non-element (null / document)
+        if ((isOpen && !(e.relatedTarget instanceof Element)) ||
+            e.currentTarget.contains(e.relatedTarget) ||
+            ((_a = contentEl === null || contentEl === void 0 ? void 0 : contentEl.parentElement) === null || _a === void 0 ? void 0 : _a.contains(e.relatedTarget)) ||
+            (contentEl === null || contentEl === void 0 ? void 0 : contentEl.contains(e.relatedTarget))) {
+            return;
+        }
+        setIsContainerFocused(false);
+        if (isOpen) {
             closeDatePicker();
         }
         // on blur, clear the input if the value is malformed
@@ -228,7 +235,7 @@ var DateInput = function (_a) {
                    else
                       we close the Popover.
             */
-            getTimeRangesForDate: getTimeRangesForDate, disableTimezoneSwitch: disableTimezoneSwitch }, contentProps), timezoneAdaptedValue === null || timezoneAdaptedValue === void 0 ? void 0 : timezoneAdaptedValue.getTime()) }, popoverProps, { children: (0, jsx_runtime_1.jsx)(Root, tslib_1.__assign({}, rootProps, { children: (0, jsx_runtime_1.jsx)(Input, tslib_1.__assign({ value: inputValue, onChange: handleInputChange, disabled: restProps.disabled, onFocus: onFocus, onBlur: onBlur, onKeyDown: handleKeyDown }, restProps, { placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : formatString.toLowerCase(), intent: error ? 'error' : intent }, inputProps, { inputRef: (0, useCombinedRef_1.combineRefs)(inputRef, inputProps.ref) })) })) })));
+            getTimeRangesForDate: getTimeRangesForDate, disableTimezoneSwitch: disableTimezoneSwitch }, contentProps), timezoneAdaptedValue === null || timezoneAdaptedValue === void 0 ? void 0 : timezoneAdaptedValue.getTime()) }, popoverProps, { children: (0, jsx_runtime_1.jsx)(Root, tslib_1.__assign({ onBlur: onBlur }, rootProps, { children: (0, jsx_runtime_1.jsx)(Input, tslib_1.__assign({ value: inputValue, onChange: handleInputChange, disabled: restProps.disabled, onFocus: onFocus, onKeyDown: handleKeyDown }, restProps, { placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : formatString.toLowerCase(), intent: error ? 'error' : intent }, inputProps, { inputRef: (0, useCombinedRef_1.combineRefs)(inputRef, inputProps.ref) })) })) })));
 };
 exports.DateInput = DateInput;
 exports.DateInput.__standard = 'Component';

package/esm/date-input/DateInput.js

@@ -199,11 +199,18 @@ export var DateInput = function (_a) {
     }, [_onKeyDown, closeDatePicker]);
     var onBlur = useLatestCallback(function (e) {
         var _a;
-        setIsContainerFocused(false);
         var contentEl = contentRef.current;
         // The Year/Month selector menu (which gets autofocused on open) is rendered as a sibling of contentEl
         // We check contentEl.parentElement(Popover.Inner) as a potential container for events
-        if (!contentEl || !(((_a = contentEl.parentElement) === null || _a === void 0 ? void 0 : _a.contains(e.relatedTarget)) || contentEl.contains(e.relatedTarget))) {
+        // While open, the popover's focus lock blurs the chevron towards a non-element (null / document)
+        if ((isOpen && !(e.relatedTarget instanceof Element)) ||
+            e.currentTarget.contains(e.relatedTarget) ||
+            ((_a = contentEl === null || contentEl === void 0 ? void 0 : contentEl.parentElement) === null || _a === void 0 ? void 0 : _a.contains(e.relatedTarget)) ||
+            (contentEl === null || contentEl === void 0 ? void 0 : contentEl.contains(e.relatedTarget))) {
+            return;
+        }
+        setIsContainerFocused(false);
+        if (isOpen) {
             closeDatePicker();
         }
         // on blur, clear the input if the value is malformed
@@ -225,6 +232,6 @@ export var DateInput = function (_a) {
                    else
                       we close the Popover.
             */
-            getTimeRangesForDate: getTimeRangesForDate, disableTimezoneSwitch: disableTimezoneSwitch }, contentProps), timezoneAdaptedValue === null || timezoneAdaptedValue === void 0 ? void 0 : timezoneAdaptedValue.getTime()) }, popoverProps, { children: _jsx(Root, __assign({}, rootProps, { children: _jsx(Input, __assign({ value: inputValue, onChange: handleInputChange, disabled: restProps.disabled, onFocus: onFocus, onBlur: onBlur, onKeyDown: handleKeyDown }, restProps, { placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : formatString.toLowerCase(), intent: error ? 'error' : intent }, inputProps, { inputRef: combineRefs(inputRef, inputProps.ref) })) })) })));
+            getTimeRangesForDate: getTimeRangesForDate, disableTimezoneSwitch: disableTimezoneSwitch }, contentProps), timezoneAdaptedValue === null || timezoneAdaptedValue === void 0 ? void 0 : timezoneAdaptedValue.getTime()) }, popoverProps, { children: _jsx(Root, __assign({ onBlur: onBlur }, rootProps, { children: _jsx(Input, __assign({ value: inputValue, onChange: handleInputChange, disabled: restProps.disabled, onFocus: onFocus, onKeyDown: handleKeyDown }, restProps, { placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : formatString.toLowerCase(), intent: error ? 'error' : intent }, inputProps, { inputRef: combineRefs(inputRef, inputProps.ref) })) })) })));
 };
 DateInput.__standard = 'Component';

package/esm/input/enhancer-button.d.ts

@@ -9,6 +9,7 @@ export type FieldEnhancerSharedProps = {
     $intent?: Intent;
     $isFocused?: boolean;
     $isPseudoFocused?: boolean;
+    $isSelected?: boolean;
 };
 export type FieldEnhancerButtonProps = Omit<ButtonProps, 'size' | 'disabled' | 'intent'>;
 export type FieldEnhancerButtonConfig = FieldEnhancerButtonProps | ((sharedProps: FieldEnhancerSharedProps) => FieldEnhancerButtonProps);

package/esm/input/enhancer-button.js

@@ -34,7 +34,12 @@ export var renderFieldEnhancerButton = function (position, sharedProps, config)
         BaseButton: {
             className: [
                 'h-full min-h-0 spr-bg-secondary hover:spr-bg-secondary focus:spr-bg-secondary',
-                isStart ? 'rounded-r-0 border-r-[--sw-border-right-color]' : 'rounded-l-0 border-l-[--sw-border-left-color]',
+                function (_, _a) {
+                    var $isSelected = _a.$isSelected;
+                    return isStart
+                        ? "rounded-r-0 ".concat(!$isSelected ? 'border-r-[--sw-border-right-color]' : '')
+                        : "rounded-l-0 ".concat(!$isSelected ? 'border-l-[--sw-border-left-color]' : '');
+                },
             ],
             // @ts-ignore -- Variable needed for styling
             style: isStart ? { '--sw-border-right-color': 'transparent' } : { '--sw-border-left-color': 'transparent' },

package/esm/locale/en_US.js

@@ -115,6 +115,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/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/singleton/createSingletonInstance.d.ts

@@ -0,0 +1,9 @@
+/**
+ * This file should be used within spaceweb repository only. Using this outside may lead to breaking behavior.
+ */
+export declare enum SingletonInstanceIdentifier {
+    STYLETRON_ENGINE = "STYLETRON_ENGINE"
+}
+export declare function createSingletonInstance<T>(instanceGetter: () => T, identifier: SingletonInstanceIdentifier): T;
+export declare function getSingletonInstance<T>(identifier: string): T | undefined;
+export declare function setSingletonInstance<T>(identifier: string, instance: T): T;

package/esm/singleton/createSingletonInstance.js

@@ -0,0 +1,26 @@
+/**
+ * This file should be used within spaceweb repository only. Using this outside may lead to breaking behavior.
+ */
+/*
+ * Please refer the following doc - https://sprinklr.atlassian.net/wiki/spaces/Frontend/pages/5506367561/ModuleFederation+Handbook#Using-Singleton-Context
+ */
+export var SingletonInstanceIdentifier;
+(function (SingletonInstanceIdentifier) {
+    SingletonInstanceIdentifier["STYLETRON_ENGINE"] = "STYLETRON_ENGINE";
+})(SingletonInstanceIdentifier || (SingletonInstanceIdentifier = {}));
+var allInstances = {};
+export function createSingletonInstance(instanceGetter, identifier) {
+    if (allInstances[identifier]) {
+        return allInstances[identifier];
+    }
+    var singletonInstance = instanceGetter();
+    allInstances[identifier] = singletonInstance;
+    return singletonInstance;
+}
+export function getSingletonInstance(identifier) {
+    return allInstances[identifier];
+}
+export function setSingletonInstance(identifier, instance) {
+    allInstances[identifier] = instance;
+    return instance;
+}

package/esm/styleEngine/styleEngine.js

@@ -4,6 +4,7 @@ import { useMemo } from 'react';
 import { Client, Server } from 'styletron-engine-atomic';
 import { DebugEngine, Provider as StyletronProvider } from 'styletron-react';
 import { useDocument } from '../spacewebProvider/DocumentProvider';
+import { getSingletonInstance, setSingletonInstance, SingletonInstanceIdentifier, } from '@sprinklrjs/spaceweb/singleton/createSingletonInstance';
 export var SPACEWEB_STYLE_PREFIX = 'sw--';
 export var SPACEWEB_STYLE_CONTAINER_ID = 'spaceweb-style-cache';
 export var isServer = typeof window === 'undefined';
@@ -13,9 +14,13 @@ var NoopDebugEngine = /** @class */ (function () {
     }
     return NoopDebugEngine;
 }());
-// NOTE: Define styletron as module variable (singleton)
-var styletron;
-var hasStyletron = function () { return typeof styletron !== 'undefined'; };
+var getStyletron = function () {
+    return getSingletonInstance(SingletonInstanceIdentifier.STYLETRON_ENGINE);
+};
+var setStyletron = function (engine) {
+    return setSingletonInstance(SingletonInstanceIdentifier.STYLETRON_ENGINE, engine);
+};
+var hasStyletron = function () { return typeof getStyletron() !== 'undefined'; };
 // Throws and error if not called from the server.
 var ensureServer = function () {
     if (!isServer) {
@@ -38,26 +43,22 @@ export var hydrate = function (ownerDocument) {
 };
 // Gets isomorphic Styletron engine.
 export var getStyleEngine = function (ownerDocument, nonce) {
+    var styletron = getStyletron();
     if (isServer) {
-        if (typeof styletron !== 'undefined')
-            return styletron;
-        styletron = new Server({ prefix: SPACEWEB_STYLE_PREFIX });
+        return styletron !== null && styletron !== void 0 ? styletron : setStyletron(new Server({ prefix: SPACEWEB_STYLE_PREFIX }));
     }
-    else {
-        var doc = ownerDocument || document;
-        var el = doc.getElementById(SPACEWEB_STYLE_CONTAINER_ID);
-        if (el && styletron) {
-            return styletron;
-        }
-        // adds a style tag in document.head to make sure only one instance of styletron is created in an app.
-        appendCacheContainer(ownerDocument, nonce);
-        styletron = new Client({
-            hydrate: hydrate(ownerDocument),
-            prefix: SPACEWEB_STYLE_PREFIX,
-            container: ownerDocument === null || ownerDocument === void 0 ? void 0 : ownerDocument.head,
-        });
+    var doc = ownerDocument || document;
+    var el = doc.getElementById(SPACEWEB_STYLE_CONTAINER_ID);
+    if (el && styletron) {
+        return styletron;
     }
-    return styletron;
+    // adds a style tag in document.head to make sure only one instance of styletron is created in an app.
+    appendCacheContainer(ownerDocument, nonce);
+    return setStyletron(new Client({
+        hydrate: hydrate(ownerDocument),
+        prefix: SPACEWEB_STYLE_PREFIX,
+        container: ownerDocument === null || ownerDocument === void 0 ? void 0 : ownerDocument.head,
+    }));
 };
 // @ts-ignore
 StyletronProvider.displayName = 'StyletronProvider';
@@ -72,17 +73,17 @@ StyleProvider.displayName = 'StyleProvider';
 export var getStylesheets = function () {
     ensureServer();
     ensureEngine();
-    return styletron.getStylesheets();
+    return getStyletron().getStylesheets();
 };
 // Gets hydration stylesheets HTML code as string.
 export var getStylesheetsHtml = function () {
     ensureServer();
     ensureEngine();
-    return styletron.getStylesheetsHtml();
+    return getStyletron().getStylesheetsHtml();
 };
 export var deprecatedRenderKeyframes = function (keyframes) {
     ensureEngine();
-    return styletron.renderKeyframes(keyframes);
+    return getStyletron().renderKeyframes(keyframes);
 };
 // Appends cache styles to the DOM and returns element's instance.
 export var appendCacheContainer = function (ownerDocument, nonce) {

package/input/enhancer-button.d.ts

@@ -9,6 +9,7 @@ export type FieldEnhancerSharedProps = {
     $intent?: Intent;
     $isFocused?: boolean;
     $isPseudoFocused?: boolean;
+    $isSelected?: boolean;
 };
 export type FieldEnhancerButtonProps = Omit<ButtonProps, 'size' | 'disabled' | 'intent'>;
 export type FieldEnhancerButtonConfig = FieldEnhancerButtonProps | ((sharedProps: FieldEnhancerSharedProps) => FieldEnhancerButtonProps);

package/input/enhancer-button.js

@@ -40,7 +40,12 @@ var renderFieldEnhancerButton = function (position, sharedProps, config) {
         BaseButton: {
             className: [
                 'h-full min-h-0 spr-bg-secondary hover:spr-bg-secondary focus:spr-bg-secondary',
-                isStart ? 'rounded-r-0 border-r-[--sw-border-right-color]' : 'rounded-l-0 border-l-[--sw-border-left-color]',
+                function (_, _a) {
+                    var $isSelected = _a.$isSelected;
+                    return isStart
+                        ? "rounded-r-0 ".concat(!$isSelected ? 'border-r-[--sw-border-right-color]' : '')
+                        : "rounded-l-0 ".concat(!$isSelected ? 'border-l-[--sw-border-left-color]' : '');
+                },
             ],
             // @ts-ignore -- Variable needed for styling
             style: isStart ? { '--sw-border-right-color': 'transparent' } : { '--sw-border-left-color': 'transparent' },

package/locale/en_US.js

@@ -118,6 +118,8 @@ exports.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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sprinklrjs/spaceweb",
-  "version": "14.14.4",
+  "version": "14.14.6",
   "description": "Components for SpaceWeb",
   "main": "index.js",
   "module": "./esm/index.js",
@@ -98,10 +98,11 @@
     "postcss": "^7.0.27",
     "postcss-js": "^2.0.3",
     "react-test-renderer": "^17.0.2",
-    "ts-node": "^10.4.0"
+    "ts-node": "^10.4.0",
+    "typescript": "~5.0.0"
   },
   "peerDependencies": {
-    "@sprinklrjs/spaceweb-themes": "14.14.4",
+    "@sprinklrjs/spaceweb-themes": "14.14.6",
     "react": ">=17.0.2 <19.0.0",
     "react-dom": ">=17.0.2 <19.0.0"
   }

package/phone-input/country-select.js

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

package/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/phone-input/flag-container.js

@@ -11,15 +11,15 @@ var helpers_1 = require("../helpers");
 var cvaConfigs_1 = require("./cvaConfigs");
 var styled_components_1 = require("./styled-components");
 var FlagContainer = (0, react_1.forwardRef)(function (props, ref) {
-    var inputSize = props.size, country = props.value.country, overrides = props.overrides, rest = tslib_1.__rest(props, ["size", "value", "overrides"]);
+    var inputSize = props.size, country = props.value.country, mapIsoToLabel = props.mapIsoToLabel, overrides = props.overrides, rest = tslib_1.__rest(props, ["size", "value", "mapIsoToLabel", "overrides"]);
     var iso = country.id;
     var locale = (0, locale_1.useLocale)();
     var sharedProps = (0, helpers_1.add$props)({ iso: iso, inputSize: inputSize });
     var _a = tslib_1.__read((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.FlagContainer, button_1.Button), 2), Button = _a[0], buttonProps = _a[1];
-    return ((0, jsx_runtime_1.jsx)(Button, tslib_1.__assign({ "aria-label": locale.phoneInput.flagContainerAriaLabel, variant: "minimal", size: "xxxs", type: "button", className: [
+    return ((0, jsx_runtime_1.jsx)(Button, tslib_1.__assign({ "aria-label": (0, utils_1.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',
             cvaConfigs_1.flagContainerCVA,
-            // @ts-ignore -- CSS-in-JS -- TS2345: Argument of type '(_: StyleUtils, { $zIndex }: any) => { zIndex: any; ...
+            // @ts-expect-error -- ClassName does not include CSSStylesStyleFn (TS2345)
             styled_components_1.getFlagContainerOverrides,
         ], "data-iso": iso, ref: ref }, sharedProps, buttonProps, rest, { children: (0, utils_1.iso2FlagEmoji)(iso) })));
 });

package/phone-input/locale.d.ts

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

package/phone-input/phone-input.js

@@ -56,7 +56,9 @@ var PhoneInput = function (props) {
         },
     }, overrides);
     var _d = tslib_1.__read((0, overrides_1.useOverrides)(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.Input, input_1.Input), 2), Input = _d[0], inputProps = _d[1];
-    return ((0, jsx_runtime_1.jsx)(Input, tslib_1.__assign({ "aria-label": locale.phoneInput.inputAriaLabel, size: size, variant: variant, intent: intent, disabled: disabled, onChange: function (e) {
+    return ((0, jsx_runtime_1.jsx)(Input, tslib_1.__assign({ "aria-label": value.country
+            ? (0, utils_1.getPhoneInputAriaLabel)(locale.phoneInput, value.country.dialCode)
+            : locale.phoneInput.inputAriaLabel, size: size, variant: variant, intent: intent, disabled: disabled, onChange: function (e) {
             var number = (0, utils_1.sanitize)(e.currentTarget.value);
             if (onChange) {
                 onChange(tslib_1.__assign(tslib_1.__assign({}, value), { phoneNumber: number }));

package/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/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/phone-input/utils.js

@@ -1,9 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.resolveCountryLabelParts = exports.getCountryLabelParts = exports.getDefaultValue = exports.countrySelectFilterOptions = exports.getPhoneNumberWithCountryDialCode = exports.sanitize = exports.iso2FlagEmoji = void 0;
+exports.getPhoneInputAriaLabel = exports.getFlagContainerAriaLabel = 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");
+var i18n_interpolation_1 = tslib_1.__importDefault(require("../baseui/helpers/i18n-interpolation"));
 var constants_1 = require("./constants");
 var default_props_1 = require("./default-props");
 var iso2FlagEmoji = function (iso) {
@@ -89,3 +90,17 @@ var resolveCountryLabelParts = function (country, mapIsoToLabel) {
     };
 };
 exports.resolveCountryLabelParts = resolveCountryLabelParts;
+var getFlagContainerAriaLabel = function (locale, country, mapIsoToLabel) {
+    var primaryName = (0, exports.resolveCountryLabelParts)(country, mapIsoToLabel).primaryName;
+    var selected = (0, i18n_interpolation_1.default)(locale.flagContainerSelectedAriaLabel, {
+        countryName: primaryName,
+        dialCode: country.dialCode,
+    });
+    return "".concat(selected, " ").concat(locale.flagContainerAriaLabel);
+};
+exports.getFlagContainerAriaLabel = getFlagContainerAriaLabel;
+var getPhoneInputAriaLabel = function (locale, dialCode) {
+    var selected = (0, i18n_interpolation_1.default)(locale.inputSelectedDialCodeAriaLabel, { dialCode: dialCode });
+    return "".concat(locale.inputAriaLabel, " ").concat(selected);
+};
+exports.getPhoneInputAriaLabel = getPhoneInputAriaLabel;

package/singleton/createSingletonInstance.d.ts

@@ -0,0 +1,9 @@
+/**
+ * This file should be used within spaceweb repository only. Using this outside may lead to breaking behavior.
+ */
+export declare enum SingletonInstanceIdentifier {
+    STYLETRON_ENGINE = "STYLETRON_ENGINE"
+}
+export declare function createSingletonInstance<T>(instanceGetter: () => T, identifier: SingletonInstanceIdentifier): T;
+export declare function getSingletonInstance<T>(identifier: string): T | undefined;
+export declare function setSingletonInstance<T>(identifier: string, instance: T): T;

package/singleton/createSingletonInstance.js

@@ -0,0 +1,32 @@
+"use strict";
+/**
+ * This file should be used within spaceweb repository only. Using this outside may lead to breaking behavior.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setSingletonInstance = exports.getSingletonInstance = exports.createSingletonInstance = exports.SingletonInstanceIdentifier = void 0;
+/*
+ * Please refer the following doc - https://sprinklr.atlassian.net/wiki/spaces/Frontend/pages/5506367561/ModuleFederation+Handbook#Using-Singleton-Context
+ */
+var SingletonInstanceIdentifier;
+(function (SingletonInstanceIdentifier) {
+    SingletonInstanceIdentifier["STYLETRON_ENGINE"] = "STYLETRON_ENGINE";
+})(SingletonInstanceIdentifier = exports.SingletonInstanceIdentifier || (exports.SingletonInstanceIdentifier = {}));
+var allInstances = {};
+function createSingletonInstance(instanceGetter, identifier) {
+    if (allInstances[identifier]) {
+        return allInstances[identifier];
+    }
+    var singletonInstance = instanceGetter();
+    allInstances[identifier] = singletonInstance;
+    return singletonInstance;
+}
+exports.createSingletonInstance = createSingletonInstance;
+function getSingletonInstance(identifier) {
+    return allInstances[identifier];
+}
+exports.getSingletonInstance = getSingletonInstance;
+function setSingletonInstance(identifier, instance) {
+    allInstances[identifier] = instance;
+    return instance;
+}
+exports.setSingletonInstance = setSingletonInstance;