@sprinklrjs/spaceweb 14.14.1 → 14.14.2

package/color-picker/CustomColorSelector.js

@@ -10,6 +10,7 @@ var stack_1 = require("../stack");
 var box_1 = require("../box");
 var colors_1 = require("../helpers/colors");
 var transparentBackground_1 = tslib_1.__importDefault(require("../icon/components/transparentBackground"));
+var constants_1 = require("./constants");
 var CustomPointer = function () { return ((0, jsx_runtime_1.jsx)(box_1.Box, { style: function (_a) {
         var rtlCompatible = _a.rtlCompatible;
         return rtlCompatible({ transform: 'translate(-50%, -2px)' });
@@ -64,6 +65,11 @@ var CustomEditableInput = function (_a) {
         // @ts-ignore -- @types/react-color doesn't properly include types for input
         var input = editableInput.input;
         var fireChange = function () {
+            var inputValue = input.value;
+            if (inputValue === String(value))
+                return;
+            if (label === 'Hex' && (0, colors_1.normalizeHex)(inputValue) === (0, colors_1.normalizeHex)(String(value)))
+                return;
             onChange(typedValue.current);
         };
         var keydownHandler = function (event) {
@@ -76,16 +82,15 @@ var CustomEditableInput = function (_a) {
             input.removeEventListener('blur', fireChange);
             input.removeEventListener('keydown', keydownHandler);
         };
-    }, [editableInput, label, onChange]);
+    }, [editableInput, label, onChange, value]);
     return ((0, jsx_runtime_1.jsx)(common_1.EditableInput, { style: EDITABLE_INPUT_STYLES, label: label, value: value, onChange: handleChange, ref: setInput }));
 };
 function getNumberWithFallback(input, fallback) {
-    var _fallback = fallback !== null && fallback !== void 0 ? fallback : 0;
-    if (!input)
-        return _fallback;
-    if (Number.isNaN(+input))
-        return _fallback;
-    return parseInt(input);
+    if (fallback === void 0) { fallback = 0; }
+    var trimmedInput = input === null || input === void 0 ? void 0 : input.trim();
+    if (!trimmedInput || Number.isNaN(+trimmedInput))
+        return fallback;
+    return parseInt(trimmedInput);
 }
 var ColorPickerComponent = function (_props) {
     // react-color intercepts the onChange function, wraps the data, and forwards it accordingly
@@ -99,8 +104,9 @@ var ColorPickerComponent = function (_props) {
     // color which cause a flickering issue
     //https://github.com/casesandberg/react-color/blob/bc9a0e1dc5d11b06c511a8e02a95bd85c7129f4b/src/components/sketch/SketchFields.js#L51
     var _a = rgb !== null && rgb !== void 0 ? rgb : {}, r = _a.r, g = _a.g, b = _a.b, a = _a.a;
+    var hexInput = (_hex === null || _hex === void 0 ? void 0 : _hex.toLowerCase()) === 'transparent' ? '#000000' : _hex;
     // react-color doesn't support alpha hexes, so we need to insert it ourselves
-    var hex = (0, colors_1.normalizeHexWithAlpha)(_hex, a);
+    var hex = (0, colors_1.normalizeHexWithAlpha)(hexInput, a);
     var handleHueChange = (0, react_1.useCallback)(function (data) {
         // If alpha was zero and the saturation/lightness is changed, reset alpha to full
         if ('a' in data && data.a === 0) {
@@ -113,15 +119,19 @@ var ColorPickerComponent = function (_props) {
         // react-color emitted data is very dynamic and uses properties from labels
         if ('Hex' in data) {
             var newHex = data.Hex;
-            var parsedRgba = (0, colors_1.hexToRgb)(data.Hex);
+            if (newHex.toLowerCase() === 'transparent' && hex !== constants_1.TRANSPARENT_HEX) {
+                onChange(constants_1.TRANSPARENT_RGBA);
+                onChangeComplete({ rgb: constants_1.TRANSPARENT_RGBA });
+                return;
+            }
+            if (!(0, colors_1.isValidHex)(newHex))
+                return;
+            var parsedRgba = (0, colors_1.hexToRgb)(newHex);
             var newRgba = enableAlphaSelector ? parsedRgba : tslib_1.__assign(tslib_1.__assign({}, parsedRgba), { a: 1 }); // No alpha values when enableAlphaSelector is disabled
             onChange(newRgba);
-            // No need to invoke onChange based on isValidHex as onChange is standard handler for react-color
-            // CustomPicker HOC takes care that onChange is invoked with correct values in case of invalid value of rgba.
-            if ((0, colors_1.isValidHex)(newHex))
-                onChangeComplete({ rgb: newRgba });
+            onChangeComplete({ rgb: newRgba });
         }
-        else if (data.R || data.G || data.B || data.A) {
+        else if ('R' in data || 'G' in data || 'B' in data || 'A' in data) {
             var _a = tslib_1.__read(Object.keys(data), 1), changedKey = _a[0];
             // Reset alpha IF:
             // Changed value is R/G/B AND current alpha is 0 AND new value is different from old value
@@ -135,7 +145,7 @@ var ColorPickerComponent = function (_props) {
             onChange(newRgba);
             onChangeComplete({ rgb: newRgba });
         }
-    }, [onChange, onChangeComplete, enableAlphaSelector, r, g, b, a]);
+    }, [onChange, onChangeComplete, enableAlphaSelector, r, g, b, a, hex]);
     return ((0, jsx_runtime_1.jsxs)(stack_1.Stack, tslib_1.__assign({ direction: "vertical", gap: 4 }, { children: [renderColorSuggestionPanel ? renderColorSuggestionPanel(hex) : null, (0, jsx_runtime_1.jsx)(box_1.Box, tslib_1.__assign({ className: "relative w-full h-32 rounded-16 overflow-hidden", style: { height: '150px' } }, { children: (0, jsx_runtime_1.jsx)(common_1.Saturation, tslib_1.__assign({}, props, { onChange: handleHueChange })) })), (0, jsx_runtime_1.jsxs)(stack_1.Stack, tslib_1.__assign({ direction: "vertical", gap: 2 }, { children: [(0, jsx_runtime_1.jsx)(box_1.Box, tslib_1.__assign({ className: "flex gap-2 justify-between ml-2" }, { children: (0, jsx_runtime_1.jsxs)(box_1.Box, tslib_1.__assign({ className: "flex flex-col items-start gap-2" }, { children: [(0, jsx_runtime_1.jsxs)(box_1.Box, tslib_1.__assign({ className: "flex items-center gap-2" }, { children: [(0, jsx_runtime_1.jsx)(box_1.Box, tslib_1.__assign({ className: "relative h-3", style: { width: enableAlphaSelector ? '261px' : '228px' } }, { children: (0, jsx_runtime_1.jsx)(common_1.Hue, tslib_1.__assign({ pointer: CustomPointer, radius: "24px" }, props, { onChange: handleHueChange })) })), (0, jsx_runtime_1.jsx)(exports.ColorPreview, { color: rgb })] })), enableAlphaSelector ? ((0, jsx_runtime_1.jsx)(box_1.Box, tslib_1.__assign({ className: "relative h-3", style: { width: '261px' } }, { children: (0, jsx_runtime_1.jsx)(common_1.Alpha, tslib_1.__assign({ pointer: CustomPointer, radius: "24px", style: { container: { margin: 0 } } }, props)) }))) : null] })) })), (0, jsx_runtime_1.jsxs)(box_1.Box, tslib_1.__assign({ className: "grid w-full gap-2", 
                         // 5 columns with alpha, 4 columns without
                         style: {

package/color-picker/constants.d.ts

@@ -1,3 +1,4 @@
+import type { RGBColor } from 'react-color';
 export declare const GRADIENT_TYPE: {
     LINEAR: string;
     RADIAL: string;
@@ -12,3 +13,5 @@ export declare const COLOR_TYPE: {
     readonly GRADIENT: "gradient";
 };
 export declare const SWATCHES_PER_ROW = 10;
+export declare const TRANSPARENT_HEX = "#00000000";
+export declare const TRANSPARENT_RGBA: RGBColor;

package/color-picker/constants.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SWATCHES_PER_ROW = exports.COLOR_TYPE = exports.TAB_IDS = exports.GRADIENT_TYPE = void 0;
+exports.TRANSPARENT_RGBA = exports.TRANSPARENT_HEX = exports.SWATCHES_PER_ROW = exports.COLOR_TYPE = exports.TAB_IDS = exports.GRADIENT_TYPE = void 0;
 exports.GRADIENT_TYPE = {
     LINEAR: 'linear',
     RADIAL: 'radial',
@@ -11,3 +11,5 @@ exports.COLOR_TYPE = {
     GRADIENT: 'gradient',
 };
 exports.SWATCHES_PER_ROW = 10;
+exports.TRANSPARENT_HEX = '#00000000';
+exports.TRANSPARENT_RGBA = { r: 0, g: 0, b: 0, a: 0 };

package/date-picker/StatelessDatePicker.js

@@ -27,9 +27,9 @@ var themeHelpers_1 = require("../helpers/themeHelpers");
 var style_1 = require("../style");
 // eslint-disable-next-line max-statements -- required for function component
 var StatelessDatePicker = function (_props) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     var theme = (0, style_1.useStyle)().theme;
-    var _d = (0, context_1.useContextualFormProps)(_props), onChange = _d.onChange, onBlur = _d.onBlur, _e = _d.adapter, adapter = _e === void 0 ? date_fns_adapter_1.default : _e, _f = _d.size, size = _f === void 0 ? (0, themeHelpers_1.getDefaultSize)(theme) : _f, _g = _d.formatString, formatString = _g === void 0 ? constants_1.DEFAULT_FORMAT_STRING : _g, _h = _d.isOpen, isOpen = _h === void 0 ? false : _h, onFocus = _d.onFocus, clearable = _d.clearable, _displayValueAtRangeIndex = _d.displayValueAtRangeIndex, _j = _d.variant, variant = _j === void 0 ? 'default' : _j, overrides = _d.overrides, intent = _d.intent, _value = _d.value, formatDisplayValue = _d.formatDisplayValue, _k = _d.autoSizeInput, autoSizeInput = _k === void 0 ? false : _k, weekStartsOn = _d.weekStartsOn, _l = _d.timezone, timezone = _l === void 0 ? (0, getSystemTzName_1.getSystemTzName)() : _l, _m = _d.showTimezone, showTimezone = _m === void 0 ? false : _m, timezoneOptions = _d.timezoneOptions, props = tslib_1.__rest(_d, ["onChange", "onBlur", "adapter", "size", "formatString", "isOpen", "onFocus", "clearable", "displayValueAtRangeIndex", "variant", "overrides", "intent", "value", "formatDisplayValue", "autoSizeInput", "weekStartsOn", "timezone", "showTimezone", "timezoneOptions"]);
+    var _e = (0, context_1.useContextualFormProps)(_props), onChange = _e.onChange, onBlur = _e.onBlur, _f = _e.adapter, adapter = _f === void 0 ? date_fns_adapter_1.default : _f, _g = _e.size, size = _g === void 0 ? (0, themeHelpers_1.getDefaultSize)(theme) : _g, _h = _e.formatString, formatString = _h === void 0 ? constants_1.DEFAULT_FORMAT_STRING : _h, _j = _e.isOpen, isOpen = _j === void 0 ? false : _j, onFocus = _e.onFocus, clearable = _e.clearable, _displayValueAtRangeIndex = _e.displayValueAtRangeIndex, _k = _e.variant, variant = _k === void 0 ? 'default' : _k, overrides = _e.overrides, intent = _e.intent, _value = _e.value, formatDisplayValue = _e.formatDisplayValue, _l = _e.autoSizeInput, autoSizeInput = _l === void 0 ? false : _l, weekStartsOn = _e.weekStartsOn, _m = _e.timezone, timezone = _m === void 0 ? (0, getSystemTzName_1.getSystemTzName)() : _m, _o = _e.showTimezone, showTimezone = _o === void 0 ? false : _o, timezoneOptions = _e.timezoneOptions, props = tslib_1.__rest(_e, ["onChange", "onBlur", "adapter", "size", "formatString", "isOpen", "onFocus", "clearable", "displayValueAtRangeIndex", "variant", "overrides", "intent", "value", "formatDisplayValue", "autoSizeInput", "weekStartsOn", "timezone", "showTimezone", "timezoneOptions"]);
     var locale = (0, locale_1.useLocale)();
     var dateHelpers = React.useMemo(function () { return new date_helpers_1.default(adapter); }, [adapter]);
     var dateFnsLocale = React.useMemo(function () { return (0, utils_1.prepareLocale)(props.locale, { weekStartsOn: weekStartsOn }); }, [weekStartsOn, props.locale]);
@@ -44,8 +44,8 @@ var StatelessDatePicker = function (_props) {
     }, [_value, timezone, timezoneOptions]);
     // this state is required for a11y of calendar, this will be set to true when user first press down arrow key on opened calendar
     // and we will set this to false when calendar will be closed.
-    var _o = tslib_1.__read(React.useState(false), 2), autoFocusCalendar = _o[0], setAutoFocusCalendar = _o[1];
-    var _p = tslib_1.__read(React.useState(false), 2), error = _p[0], setError = _p[1];
+    var _p = tslib_1.__read(React.useState(false), 2), autoFocusCalendar = _p[0], setAutoFocusCalendar = _p[1];
+    var _q = tslib_1.__read(React.useState(false), 2), error = _q[0], setError = _q[1];
     React.useEffect(function () {
         var _a = (0, utils_2.getMinMaxDateInTimezone)({
             maxDate: props.maxDate,
@@ -61,7 +61,9 @@ var StatelessDatePicker = function (_props) {
         }
     }, [value, props.minDate, props.maxDate, dateHelpers, timezone, timezoneOptions]);
     var screenReaderMsgId = (0, useUniqueId_1.default)();
-    var _q = props["aria-describedby"], ariaDescribedBy = _q === void 0 ? "datepicker--screenreader--message--input-".concat(screenReaderMsgId) : _q;
+    var screenReaderMsgDescribedById = "datepicker--screenreader--message--input-".concat(screenReaderMsgId);
+    var baseAriaDescribedBy = (_a = props['aria-describedby']) !== null && _a !== void 0 ? _a : '';
+    var ariaDescribedBy = "".concat(screenReaderMsgDescribedById, " ").concat(baseAriaDescribedBy).trim();
     var defaultFormatDisplayValue = React.useCallback(function (date) {
         var normalizedFormatString = (0, utils_1.normalizeDashes)(formatString);
         if (formatDisplayValue) {
@@ -140,11 +142,11 @@ var StatelessDatePicker = function (_props) {
     var _r = tslib_1.__read((0, overrides_1.useOverrides)(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.Input, DatePickerInput_1.default), 2), InputComponent = _r[0], inputProps = _r[1];
     var _s = tslib_1.__read((0, overrides_1.useOverrides)(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.Popover, popover_2.Popover), 2), PopoverComponent = _s[0], popoverProps = _s[1];
     var _t = tslib_1.__read((0, overrides_1.useOverrides)(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.InputWrapper, styled_components_1.StyledInputWrapper), 2), InputWrapper = _t[0], inputWrapperProps = _t[1];
-    var placeholder = (_a = props.placeholder) !== null && _a !== void 0 ? _a : formatString.toLowerCase();
+    var placeholder = (_b = props.placeholder) !== null && _b !== void 0 ? _b : formatString.toLowerCase();
     // if calendar is close, open it on click otherwise close the calendar
     var popoverHandleClick = isOpen ? onBlur : onFocus;
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(PopoverComponent, tslib_1.__assign({ accessibilityType: "none", focusLock: true, returnFocus: true, mountNode: props.mountNode, placement: popover_1.PLACEMENT.auto, isOpen: isOpen, onClickOutside: onClose, onEsc: onClose, showArrow: false, triggerType: "click", onClick: props.disabled ? noop_1.default : popoverHandleClick, content: (0, jsx_runtime_1.jsx)(DatePickerContent_1.DatePickerContent, tslib_1.__assign({}, props, { value: value, onChange: handleDateChange, overrides: mergedOverrides, autoFocusCalendar: autoFocusCalendar, onClose: onClose, formatString: formatString, adapter: adapter, locale: dateFnsLocale, showTimezone: showTimezone, timezone: timezone, timezoneOptions: timezoneOptions, formatDisplayValue: defaultFormatDisplayValue })) }, popoverProps, { children: (0, jsx_runtime_1.jsx)(InputWrapper, tslib_1.__assign({}, inputWrapperProps, { children: (0, jsx_runtime_1.jsx)(InputComponent, tslib_1.__assign({ id: props.id, "aria-disabled": props.disabled, "aria-label": (_b = props['aria-label']) !== null && _b !== void 0 ? _b : locale.timeRangePicker.ariaLabel, "aria-describedby": ariaDescribedBy, "aria-labelledby": props['aria-labelledby'], "aria-invalid": props['aria-invalid'], "aria-errormessage": props['aria-errormessage'], "aria-required": (_c = props.required) !== null && _c !== void 0 ? _c : props['aria-required'], disabled: props.disabled, size: size, variant: variant, intent: error ? 'error' : intent, value: displayValue, 
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(PopoverComponent, tslib_1.__assign({ accessibilityType: "none", focusLock: true, returnFocus: true, mountNode: props.mountNode, placement: popover_1.PLACEMENT.auto, isOpen: isOpen, onClickOutside: onClose, onEsc: onClose, showArrow: false, triggerType: "click", onClick: props.disabled ? noop_1.default : popoverHandleClick, content: (0, jsx_runtime_1.jsx)(DatePickerContent_1.DatePickerContent, tslib_1.__assign({}, props, { value: value, onChange: handleDateChange, overrides: mergedOverrides, autoFocusCalendar: autoFocusCalendar, onClose: onClose, formatString: formatString, adapter: adapter, locale: dateFnsLocale, showTimezone: showTimezone, timezone: timezone, timezoneOptions: timezoneOptions, formatDisplayValue: defaultFormatDisplayValue })) }, popoverProps, { children: (0, jsx_runtime_1.jsx)(InputWrapper, tslib_1.__assign({}, inputWrapperProps, { children: (0, jsx_runtime_1.jsx)(InputComponent, tslib_1.__assign({ id: props.id, "aria-disabled": props.disabled, "aria-label": (_c = props['aria-label']) !== null && _c !== void 0 ? _c : locale.timeRangePicker.ariaLabel, "aria-describedby": ariaDescribedBy, "aria-labelledby": props['aria-labelledby'], "aria-invalid": props['aria-invalid'], "aria-errormessage": props['aria-errormessage'], "aria-required": (_d = props.required) !== null && _d !== void 0 ? _d : props['aria-required'], disabled: props.disabled, size: size, variant: variant, intent: error ? 'error' : intent, value: displayValue, 
                         // onFocus={onFocus}
-                        onKeyDown: handleKeyDown, onChange: handleInputChange, placeholder: placeholder, required: props.required, clearable: clearable, isOpen: isOpen, autoSizeInput: autoSizeInput }, inputProps)) })) })), (0, jsx_runtime_1.jsxs)(box_1.Box, tslib_1.__assign({ className: "relative" }, { children: [(0, jsx_runtime_1.jsx)(typography_1.Typography, tslib_1.__assign({ id: ariaDescribedBy, className: "sr-only" }, { children: locale.timeRangePicker.screenReaderMessageInput })), (0, jsx_runtime_1.jsx)(typography_1.Typography, tslib_1.__assign({ "aria-live": "assertive", className: "sr-only" }, { children: dateAriaLabel }))] }))] }));
+                        onKeyDown: handleKeyDown, onChange: handleInputChange, placeholder: placeholder, required: props.required, clearable: clearable, isOpen: isOpen, autoSizeInput: autoSizeInput }, inputProps)) })) })), (0, jsx_runtime_1.jsxs)(box_1.Box, tslib_1.__assign({ className: "relative" }, { children: [(0, jsx_runtime_1.jsx)(typography_1.Typography, tslib_1.__assign({ id: screenReaderMsgDescribedById, className: "sr-only" }, { children: locale.timeRangePicker.screenReaderMessageInput })), (0, jsx_runtime_1.jsx)(typography_1.Typography, tslib_1.__assign({ "aria-live": "assertive", className: "sr-only" }, { children: dateAriaLabel }))] }))] }));
 };
 exports.StatelessDatePicker = StatelessDatePicker;

package/esm/color-picker/CustomColorSelector.js

@@ -5,8 +5,9 @@ import { CustomPicker } from 'react-color';
 import { Alpha, EditableInput, Hue, Saturation } from 'react-color/lib/components/common';
 import { Stack } from '../stack';
 import { Box } from '../box';
-import { hexToRgb, isValidHex, normalizeHexWithAlpha } from '../helpers/colors';
+import { hexToRgb, isValidHex, normalizeHexWithAlpha, normalizeHex } from '../helpers/colors';
 import TransparentBackground from '../icon/components/transparentBackground';
+import { TRANSPARENT_HEX, TRANSPARENT_RGBA } from './constants';
 var CustomPointer = function () { return (_jsx(Box, { style: function (_a) {
         var rtlCompatible = _a.rtlCompatible;
         return rtlCompatible({ transform: 'translate(-50%, -2px)' });
@@ -60,6 +61,11 @@ var CustomEditableInput = function (_a) {
         // @ts-ignore -- @types/react-color doesn't properly include types for input
         var input = editableInput.input;
         var fireChange = function () {
+            var inputValue = input.value;
+            if (inputValue === String(value))
+                return;
+            if (label === 'Hex' && normalizeHex(inputValue) === normalizeHex(String(value)))
+                return;
             onChange(typedValue.current);
         };
         var keydownHandler = function (event) {
@@ -72,16 +78,15 @@ var CustomEditableInput = function (_a) {
             input.removeEventListener('blur', fireChange);
             input.removeEventListener('keydown', keydownHandler);
         };
-    }, [editableInput, label, onChange]);
+    }, [editableInput, label, onChange, value]);
     return (_jsx(EditableInput, { style: EDITABLE_INPUT_STYLES, label: label, value: value, onChange: handleChange, ref: setInput }));
 };
 function getNumberWithFallback(input, fallback) {
-    var _fallback = fallback !== null && fallback !== void 0 ? fallback : 0;
-    if (!input)
-        return _fallback;
-    if (Number.isNaN(+input))
-        return _fallback;
-    return parseInt(input);
+    if (fallback === void 0) { fallback = 0; }
+    var trimmedInput = input === null || input === void 0 ? void 0 : input.trim();
+    if (!trimmedInput || Number.isNaN(+trimmedInput))
+        return fallback;
+    return parseInt(trimmedInput);
 }
 var ColorPickerComponent = function (_props) {
     // react-color intercepts the onChange function, wraps the data, and forwards it accordingly
@@ -95,8 +100,9 @@ var ColorPickerComponent = function (_props) {
     // color which cause a flickering issue
     //https://github.com/casesandberg/react-color/blob/bc9a0e1dc5d11b06c511a8e02a95bd85c7129f4b/src/components/sketch/SketchFields.js#L51
     var _a = rgb !== null && rgb !== void 0 ? rgb : {}, r = _a.r, g = _a.g, b = _a.b, a = _a.a;
+    var hexInput = (_hex === null || _hex === void 0 ? void 0 : _hex.toLowerCase()) === 'transparent' ? '#000000' : _hex;
     // react-color doesn't support alpha hexes, so we need to insert it ourselves
-    var hex = normalizeHexWithAlpha(_hex, a);
+    var hex = normalizeHexWithAlpha(hexInput, a);
     var handleHueChange = useCallback(function (data) {
         // If alpha was zero and the saturation/lightness is changed, reset alpha to full
         if ('a' in data && data.a === 0) {
@@ -109,15 +115,19 @@ var ColorPickerComponent = function (_props) {
         // react-color emitted data is very dynamic and uses properties from labels
         if ('Hex' in data) {
             var newHex = data.Hex;
-            var parsedRgba = hexToRgb(data.Hex);
+            if (newHex.toLowerCase() === 'transparent' && hex !== TRANSPARENT_HEX) {
+                onChange(TRANSPARENT_RGBA);
+                onChangeComplete({ rgb: TRANSPARENT_RGBA });
+                return;
+            }
+            if (!isValidHex(newHex))
+                return;
+            var parsedRgba = hexToRgb(newHex);
             var newRgba = enableAlphaSelector ? parsedRgba : __assign(__assign({}, parsedRgba), { a: 1 }); // No alpha values when enableAlphaSelector is disabled
             onChange(newRgba);
-            // No need to invoke onChange based on isValidHex as onChange is standard handler for react-color
-            // CustomPicker HOC takes care that onChange is invoked with correct values in case of invalid value of rgba.
-            if (isValidHex(newHex))
-                onChangeComplete({ rgb: newRgba });
+            onChangeComplete({ rgb: newRgba });
         }
-        else if (data.R || data.G || data.B || data.A) {
+        else if ('R' in data || 'G' in data || 'B' in data || 'A' in data) {
             var _a = __read(Object.keys(data), 1), changedKey = _a[0];
             // Reset alpha IF:
             // Changed value is R/G/B AND current alpha is 0 AND new value is different from old value
@@ -131,7 +141,7 @@ var ColorPickerComponent = function (_props) {
             onChange(newRgba);
             onChangeComplete({ rgb: newRgba });
         }
-    }, [onChange, onChangeComplete, enableAlphaSelector, r, g, b, a]);
+    }, [onChange, onChangeComplete, enableAlphaSelector, r, g, b, a, hex]);
     return (_jsxs(Stack, __assign({ direction: "vertical", gap: 4 }, { children: [renderColorSuggestionPanel ? renderColorSuggestionPanel(hex) : null, _jsx(Box, __assign({ className: "relative w-full h-32 rounded-16 overflow-hidden", style: { height: '150px' } }, { children: _jsx(Saturation, __assign({}, props, { onChange: handleHueChange })) })), _jsxs(Stack, __assign({ direction: "vertical", gap: 2 }, { children: [_jsx(Box, __assign({ className: "flex gap-2 justify-between ml-2" }, { children: _jsxs(Box, __assign({ className: "flex flex-col items-start gap-2" }, { children: [_jsxs(Box, __assign({ className: "flex items-center gap-2" }, { children: [_jsx(Box, __assign({ className: "relative h-3", style: { width: enableAlphaSelector ? '261px' : '228px' } }, { children: _jsx(Hue, __assign({ pointer: CustomPointer, radius: "24px" }, props, { onChange: handleHueChange })) })), _jsx(ColorPreview, { color: rgb })] })), enableAlphaSelector ? (_jsx(Box, __assign({ className: "relative h-3", style: { width: '261px' } }, { children: _jsx(Alpha, __assign({ pointer: CustomPointer, radius: "24px", style: { container: { margin: 0 } } }, props)) }))) : null] })) })), _jsxs(Box, __assign({ className: "grid w-full gap-2", 
                         // 5 columns with alpha, 4 columns without
                         style: {

package/esm/color-picker/constants.d.ts

@@ -1,3 +1,4 @@
+import type { RGBColor } from 'react-color';
 export declare const GRADIENT_TYPE: {
     LINEAR: string;
     RADIAL: string;
@@ -12,3 +13,5 @@ export declare const COLOR_TYPE: {
     readonly GRADIENT: "gradient";
 };
 export declare const SWATCHES_PER_ROW = 10;
+export declare const TRANSPARENT_HEX = "#00000000";
+export declare const TRANSPARENT_RGBA: RGBColor;

package/esm/color-picker/constants.js

@@ -8,3 +8,5 @@ export var COLOR_TYPE = {
     GRADIENT: 'gradient',
 };
 export var SWATCHES_PER_ROW = 10;
+export var TRANSPARENT_HEX = '#00000000';
+export var TRANSPARENT_RGBA = { r: 0, g: 0, b: 0, a: 0 };

package/esm/date-picker/StatelessDatePicker.js

@@ -24,9 +24,9 @@ import { getDefaultSize } from '../helpers/themeHelpers';
 import { useStyle } from '../style';
 // eslint-disable-next-line max-statements -- required for function component
 export var StatelessDatePicker = function (_props) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     var theme = useStyle().theme;
-    var _d = useContextualFormProps(_props), onChange = _d.onChange, onBlur = _d.onBlur, _e = _d.adapter, adapter = _e === void 0 ? dateFnsAdapter : _e, _f = _d.size, size = _f === void 0 ? getDefaultSize(theme) : _f, _g = _d.formatString, formatString = _g === void 0 ? DEFAULT_FORMAT_STRING : _g, _h = _d.isOpen, isOpen = _h === void 0 ? false : _h, onFocus = _d.onFocus, clearable = _d.clearable, _displayValueAtRangeIndex = _d.displayValueAtRangeIndex, _j = _d.variant, variant = _j === void 0 ? 'default' : _j, overrides = _d.overrides, intent = _d.intent, _value = _d.value, formatDisplayValue = _d.formatDisplayValue, _k = _d.autoSizeInput, autoSizeInput = _k === void 0 ? false : _k, weekStartsOn = _d.weekStartsOn, _l = _d.timezone, timezone = _l === void 0 ? getSystemTzName() : _l, _m = _d.showTimezone, showTimezone = _m === void 0 ? false : _m, timezoneOptions = _d.timezoneOptions, props = __rest(_d, ["onChange", "onBlur", "adapter", "size", "formatString", "isOpen", "onFocus", "clearable", "displayValueAtRangeIndex", "variant", "overrides", "intent", "value", "formatDisplayValue", "autoSizeInput", "weekStartsOn", "timezone", "showTimezone", "timezoneOptions"]);
+    var _e = useContextualFormProps(_props), onChange = _e.onChange, onBlur = _e.onBlur, _f = _e.adapter, adapter = _f === void 0 ? dateFnsAdapter : _f, _g = _e.size, size = _g === void 0 ? getDefaultSize(theme) : _g, _h = _e.formatString, formatString = _h === void 0 ? DEFAULT_FORMAT_STRING : _h, _j = _e.isOpen, isOpen = _j === void 0 ? false : _j, onFocus = _e.onFocus, clearable = _e.clearable, _displayValueAtRangeIndex = _e.displayValueAtRangeIndex, _k = _e.variant, variant = _k === void 0 ? 'default' : _k, overrides = _e.overrides, intent = _e.intent, _value = _e.value, formatDisplayValue = _e.formatDisplayValue, _l = _e.autoSizeInput, autoSizeInput = _l === void 0 ? false : _l, weekStartsOn = _e.weekStartsOn, _m = _e.timezone, timezone = _m === void 0 ? getSystemTzName() : _m, _o = _e.showTimezone, showTimezone = _o === void 0 ? false : _o, timezoneOptions = _e.timezoneOptions, props = __rest(_e, ["onChange", "onBlur", "adapter", "size", "formatString", "isOpen", "onFocus", "clearable", "displayValueAtRangeIndex", "variant", "overrides", "intent", "value", "formatDisplayValue", "autoSizeInput", "weekStartsOn", "timezone", "showTimezone", "timezoneOptions"]);
     var locale = useLocale();
     var dateHelpers = React.useMemo(function () { return new DateHelpers(adapter); }, [adapter]);
     var dateFnsLocale = React.useMemo(function () { return prepareLocale(props.locale, { weekStartsOn: weekStartsOn }); }, [weekStartsOn, props.locale]);
@@ -41,8 +41,8 @@ export var StatelessDatePicker = function (_props) {
     }, [_value, timezone, timezoneOptions]);
     // this state is required for a11y of calendar, this will be set to true when user first press down arrow key on opened calendar
     // and we will set this to false when calendar will be closed.
-    var _o = __read(React.useState(false), 2), autoFocusCalendar = _o[0], setAutoFocusCalendar = _o[1];
-    var _p = __read(React.useState(false), 2), error = _p[0], setError = _p[1];
+    var _p = __read(React.useState(false), 2), autoFocusCalendar = _p[0], setAutoFocusCalendar = _p[1];
+    var _q = __read(React.useState(false), 2), error = _q[0], setError = _q[1];
     React.useEffect(function () {
         var _a = getMinMaxDateInTimezone({
             maxDate: props.maxDate,
@@ -58,7 +58,9 @@ export var StatelessDatePicker = function (_props) {
         }
     }, [value, props.minDate, props.maxDate, dateHelpers, timezone, timezoneOptions]);
     var screenReaderMsgId = useUniqueId();
-    var _q = props["aria-describedby"], ariaDescribedBy = _q === void 0 ? "datepicker--screenreader--message--input-".concat(screenReaderMsgId) : _q;
+    var screenReaderMsgDescribedById = "datepicker--screenreader--message--input-".concat(screenReaderMsgId);
+    var baseAriaDescribedBy = (_a = props['aria-describedby']) !== null && _a !== void 0 ? _a : '';
+    var ariaDescribedBy = "".concat(screenReaderMsgDescribedById, " ").concat(baseAriaDescribedBy).trim();
     var defaultFormatDisplayValue = React.useCallback(function (date) {
         var normalizedFormatString = normalizeDashes(formatString);
         if (formatDisplayValue) {
@@ -137,10 +139,10 @@ export var StatelessDatePicker = function (_props) {
     var _r = __read(useOverrides(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.Input, DatePickerInput), 2), InputComponent = _r[0], inputProps = _r[1];
     var _s = __read(useOverrides(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.Popover, Popover), 2), PopoverComponent = _s[0], popoverProps = _s[1];
     var _t = __read(useOverrides(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.InputWrapper, StyledInputWrapper), 2), InputWrapper = _t[0], inputWrapperProps = _t[1];
-    var placeholder = (_a = props.placeholder) !== null && _a !== void 0 ? _a : formatString.toLowerCase();
+    var placeholder = (_b = props.placeholder) !== null && _b !== void 0 ? _b : formatString.toLowerCase();
     // if calendar is close, open it on click otherwise close the calendar
     var popoverHandleClick = isOpen ? onBlur : onFocus;
-    return (_jsxs(_Fragment, { children: [_jsx(PopoverComponent, __assign({ accessibilityType: "none", focusLock: true, returnFocus: true, mountNode: props.mountNode, placement: PLACEMENT.auto, isOpen: isOpen, onClickOutside: onClose, onEsc: onClose, showArrow: false, triggerType: "click", onClick: props.disabled ? _noop : popoverHandleClick, content: _jsx(DatePickerContent, __assign({}, props, { value: value, onChange: handleDateChange, overrides: mergedOverrides, autoFocusCalendar: autoFocusCalendar, onClose: onClose, formatString: formatString, adapter: adapter, locale: dateFnsLocale, showTimezone: showTimezone, timezone: timezone, timezoneOptions: timezoneOptions, formatDisplayValue: defaultFormatDisplayValue })) }, popoverProps, { children: _jsx(InputWrapper, __assign({}, inputWrapperProps, { children: _jsx(InputComponent, __assign({ id: props.id, "aria-disabled": props.disabled, "aria-label": (_b = props['aria-label']) !== null && _b !== void 0 ? _b : locale.timeRangePicker.ariaLabel, "aria-describedby": ariaDescribedBy, "aria-labelledby": props['aria-labelledby'], "aria-invalid": props['aria-invalid'], "aria-errormessage": props['aria-errormessage'], "aria-required": (_c = props.required) !== null && _c !== void 0 ? _c : props['aria-required'], disabled: props.disabled, size: size, variant: variant, intent: error ? 'error' : intent, value: displayValue, 
+    return (_jsxs(_Fragment, { children: [_jsx(PopoverComponent, __assign({ accessibilityType: "none", focusLock: true, returnFocus: true, mountNode: props.mountNode, placement: PLACEMENT.auto, isOpen: isOpen, onClickOutside: onClose, onEsc: onClose, showArrow: false, triggerType: "click", onClick: props.disabled ? _noop : popoverHandleClick, content: _jsx(DatePickerContent, __assign({}, props, { value: value, onChange: handleDateChange, overrides: mergedOverrides, autoFocusCalendar: autoFocusCalendar, onClose: onClose, formatString: formatString, adapter: adapter, locale: dateFnsLocale, showTimezone: showTimezone, timezone: timezone, timezoneOptions: timezoneOptions, formatDisplayValue: defaultFormatDisplayValue })) }, popoverProps, { children: _jsx(InputWrapper, __assign({}, inputWrapperProps, { children: _jsx(InputComponent, __assign({ id: props.id, "aria-disabled": props.disabled, "aria-label": (_c = props['aria-label']) !== null && _c !== void 0 ? _c : locale.timeRangePicker.ariaLabel, "aria-describedby": ariaDescribedBy, "aria-labelledby": props['aria-labelledby'], "aria-invalid": props['aria-invalid'], "aria-errormessage": props['aria-errormessage'], "aria-required": (_d = props.required) !== null && _d !== void 0 ? _d : props['aria-required'], disabled: props.disabled, size: size, variant: variant, intent: error ? 'error' : intent, value: displayValue, 
                         // onFocus={onFocus}
-                        onKeyDown: handleKeyDown, onChange: handleInputChange, placeholder: placeholder, required: props.required, clearable: clearable, isOpen: isOpen, autoSizeInput: autoSizeInput }, inputProps)) })) })), _jsxs(Box, __assign({ className: "relative" }, { children: [_jsx(Typography, __assign({ id: ariaDescribedBy, className: "sr-only" }, { children: locale.timeRangePicker.screenReaderMessageInput })), _jsx(Typography, __assign({ "aria-live": "assertive", className: "sr-only" }, { children: dateAriaLabel }))] }))] }));
+                        onKeyDown: handleKeyDown, onChange: handleInputChange, placeholder: placeholder, required: props.required, clearable: clearable, isOpen: isOpen, autoSizeInput: autoSizeInput }, inputProps)) })) })), _jsxs(Box, __assign({ className: "relative" }, { children: [_jsx(Typography, __assign({ id: screenReaderMsgDescribedById, className: "sr-only" }, { children: locale.timeRangePicker.screenReaderMessageInput })), _jsx(Typography, __assign({ "aria-live": "assertive", className: "sr-only" }, { children: dateAriaLabel }))] }))] }));
 };

package/esm/helpers/colors.d.ts

@@ -7,6 +7,7 @@ export declare const isValidHex: (hex: unknown) => string | undefined;
  */
 export declare function hexToRgb(_hex: string): RGBColor;
 export declare function RgbToHex({ r, g, b, a }: RGBColor): string;
+export declare function normalizeHex(hex: string): string | undefined;
 /**
  * https://medium.muz.li/the-science-of-color-contrast-an-expert-designers-guide-33e84c41d156
  * https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum#dfn-contrast-ratio

package/esm/helpers/colors.js

@@ -7,7 +7,7 @@ export var isValidHex = function (hex) {
     if (![3, 4, 6, 8].includes(hexVal.length))
         return undefined;
     if (/^[0-9a-f]+$/i.test(hexVal))
-        return hexVal;
+        return hexVal.toUpperCase();
     return undefined;
 };
 /**
@@ -30,6 +30,18 @@ export function RgbToHex(_a) {
     return "#".concat(__spreadArray([r, g, b], __read((a < 1 ? [Math.round(a * 255)] : [])), false).map(function (n) { return (Number.isNaN(n) ? 10 : Math.round(Math.min(Math.max(n, 0), 255))).toString(16).padStart(2, '0'); })
         .join(''));
 }
+export function normalizeHex(hex) {
+    if (!isValidHex(hex))
+        return undefined;
+    var _a = hexToRgb(hex), r = _a.r, g = _a.g, b = _a.b, a = _a.a;
+    return "#".concat([r, g, b, Math.round((a !== null && a !== void 0 ? a : 1) * 255)]
+        .map(function (n) {
+        return Math.round(Math.min(Math.max(n, 0), 255))
+            .toString(16)
+            .padStart(2, '0');
+    })
+        .join(''));
+}
 /**
  * https://medium.muz.li/the-science-of-color-contrast-an-expert-designers-guide-33e84c41d156
  * https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum#dfn-contrast-ratio
@@ -86,7 +98,7 @@ export function noAlphaHex(inputHex) {
     return inputHex;
 }
 export function normalizeHexWithAlpha(hex, alpha) {
-    if (typeof alpha !== 'number' || alpha === 1 || !hex)
+    if (typeof alpha !== 'number' || alpha === 1 || !hex || !isValidHex(hex))
         return hex;
     return (hex +
         Math.floor(alpha * 255)

package/helpers/colors.d.ts

@@ -7,6 +7,7 @@ export declare const isValidHex: (hex: unknown) => string | undefined;
  */
 export declare function hexToRgb(_hex: string): RGBColor;
 export declare function RgbToHex({ r, g, b, a }: RGBColor): string;
+export declare function normalizeHex(hex: string): string | undefined;
 /**
  * https://medium.muz.li/the-science-of-color-contrast-an-expert-designers-guide-33e84c41d156
  * https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum#dfn-contrast-ratio

package/helpers/colors.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.normalizeHexWithAlpha = exports.noAlphaHex = exports.HslToRgb = exports.RgbToHsl = exports.getContrastRatio = exports.getRelativeLuminance = exports.RgbToHex = exports.hexToRgb = exports.isValidHex = void 0;
+exports.normalizeHexWithAlpha = exports.noAlphaHex = exports.HslToRgb = exports.RgbToHsl = exports.getContrastRatio = exports.getRelativeLuminance = exports.normalizeHex = exports.RgbToHex = exports.hexToRgb = exports.isValidHex = void 0;
 var tslib_1 = require("tslib");
 var memoize_1 = tslib_1.__importDefault(require("lodash/memoize"));
 var isValidHex = function (hex) {
@@ -10,7 +10,7 @@ var isValidHex = function (hex) {
     if (![3, 4, 6, 8].includes(hexVal.length))
         return undefined;
     if (/^[0-9a-f]+$/i.test(hexVal))
-        return hexVal;
+        return hexVal.toUpperCase();
     return undefined;
 };
 exports.isValidHex = isValidHex;
@@ -36,6 +36,19 @@ function RgbToHex(_a) {
         .join(''));
 }
 exports.RgbToHex = RgbToHex;
+function normalizeHex(hex) {
+    if (!(0, exports.isValidHex)(hex))
+        return undefined;
+    var _a = hexToRgb(hex), r = _a.r, g = _a.g, b = _a.b, a = _a.a;
+    return "#".concat([r, g, b, Math.round((a !== null && a !== void 0 ? a : 1) * 255)]
+        .map(function (n) {
+        return Math.round(Math.min(Math.max(n, 0), 255))
+            .toString(16)
+            .padStart(2, '0');
+    })
+        .join(''));
+}
+exports.normalizeHex = normalizeHex;
 /**
  * https://medium.muz.li/the-science-of-color-contrast-an-expert-designers-guide-33e84c41d156
  * https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum#dfn-contrast-ratio
@@ -96,7 +109,7 @@ function noAlphaHex(inputHex) {
 }
 exports.noAlphaHex = noAlphaHex;
 function normalizeHexWithAlpha(hex, alpha) {
-    if (typeof alpha !== 'number' || alpha === 1 || !hex)
+    if (typeof alpha !== 'number' || alpha === 1 || !hex || !(0, exports.isValidHex)(hex))
         return hex;
     return (hex +
         Math.floor(alpha * 255)

package/package.json

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