@sprinklrjs/spaceweb 14.11.0 → 14.11.4

package/asyncSelect/hooks/useAsyncSelect.d.ts

@@ -151,7 +151,7 @@ export declare const useAsyncSelect: ({ loadOptions, initialOptions, resolveSele
     endEnhancerButtonProps?: import("../../select").SelectEnhancerButtonConfig | undefined;
     virtual?: boolean | undefined;
     selectOnTab?: boolean | undefined;
-    getActionsElement?: import("../../menu").MenuItemActions;
+    getActionsElement?: import("../../menu").MenuItemActions | undefined;
     captureScroll?: boolean | undefined;
     popoverMinWidth?: string | undefined;
     createOption?: ((label: string) => import("../../select").Options | Promise<import("../../select").Options>) | undefined;
@@ -329,7 +329,7 @@ export declare const useAsyncSelect: ({ loadOptions, initialOptions, resolveSele
     endEnhancerButtonProps?: import("../../select").SelectEnhancerButtonConfig | undefined;
     virtual?: boolean | undefined;
     selectOnTab?: boolean | undefined;
-    getActionsElement?: import("../../menu").MenuItemActions;
+    getActionsElement?: import("../../menu").MenuItemActions | undefined;
     captureScroll?: boolean | undefined;
     overlayWidth?: string | undefined;
     scrollContainer?: "overlayContainer" | "menuContainer" | undefined;
@@ -510,7 +510,7 @@ export declare const useAsyncSelect: ({ loadOptions, initialOptions, resolveSele
     endEnhancerButtonProps?: import("../../select").SelectEnhancerButtonConfig | undefined;
     virtual?: boolean | undefined;
     selectOnTab?: boolean | undefined;
-    getActionsElement?: import("../../menu").MenuItemActions;
+    getActionsElement?: import("../../menu").MenuItemActions | undefined;
     captureScroll?: boolean | undefined;
     overlayWidth?: string | undefined;
     scrollContainer?: "overlayContainer" | "menuContainer" | undefined;

package/asyncSelect/hooks/useGroupedAsyncSelect.d.ts

@@ -119,7 +119,7 @@ export declare const useGroupedAsyncSelect: ({ onChange, showSelectAll, selectAl
     endEnhancerButtonProps?: import("../../select").SelectEnhancerButtonConfig | undefined;
     virtual?: boolean | undefined;
     selectOnTab?: boolean | undefined;
-    getActionsElement?: import("../../menu").MenuItemActions;
+    getActionsElement?: import("../../menu").MenuItemActions | undefined;
     captureScroll?: boolean | undefined;
     popoverMinWidth?: string | undefined;
     createOption?: ((label: string) => import("../../select").Options | Promise<import("../../select").Options>) | undefined;
@@ -265,7 +265,7 @@ export declare const useGroupedAsyncSelect: ({ onChange, showSelectAll, selectAl
     endEnhancerButtonProps?: import("../../select").SelectEnhancerButtonConfig | undefined;
     virtual?: boolean | undefined;
     selectOnTab?: boolean | undefined;
-    getActionsElement?: import("../../menu").MenuItemActions;
+    getActionsElement?: import("../../menu").MenuItemActions | undefined;
     captureScroll?: boolean | undefined;
     overlayWidth?: string | undefined;
     popoverMinWidth?: string | undefined;
@@ -413,7 +413,7 @@ export declare const useGroupedAsyncSelect: ({ onChange, showSelectAll, selectAl
     endEnhancerButtonProps?: import("../../select").SelectEnhancerButtonConfig | undefined;
     virtual?: boolean | undefined;
     selectOnTab?: boolean | undefined;
-    getActionsElement?: import("../../menu").MenuItemActions;
+    getActionsElement?: import("../../menu").MenuItemActions | undefined;
     captureScroll?: boolean | undefined;
     overlayWidth?: string | undefined;
     popoverMinWidth?: string | undefined;

package/baseui/datepicker/styled-components.js

@@ -49,7 +49,7 @@ exports.StyledCalendarHeader = (0, style_1.styled)('div', 'box-border spr-text-p
     return ($density === constants_1.DENSITY.high ? 'min-h-6.5 w-full' : 'min-h-9 w-98');
 });
 exports.StyledCalendarHeader.displayName = 'StyledCalendarHeader';
-exports.StyledMonthHeader = (0, style_1.styled)('div', 'spr-text-01 spr-bg-primary px-1 whitespace-no-wrap border-0 border-b-1 spr-border-secondary border-b-solid spr-text-primary block text-center flex justify-center');
+exports.StyledMonthHeader = (0, style_1.styled)('div', 'spr-text-01 spr-bg-primary px-1 whitespace-nowrap border-0 border-b-1 spr-border-secondary border-b-solid spr-text-primary block text-center flex justify-center');
 exports.StyledMonthHeader.displayName = 'StyledMonthHeader';
 exports.StyledMonthYearSelectButton = (0, style_1.styled)('button', 'px-2 gap-1 items-center justify-around flex cursor-pointer spr-bg-primary spr-text-01 h-8', 'border-1 spr-border-primary rounded-8 outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-[--spr-focus-01]');
 exports.StyledMonthYearSelectButton.displayName = 'StyledMonthYearSelectButton';
@@ -57,7 +57,7 @@ exports.StyledMonthYearSelectIconContainer = (0, style_1.styled)('span', 'flex i
 exports.StyledMonthYearSelectIconContainer.displayName = 'StyledMonthYearSelectIconContainer';
 exports.StyledMonth = (0, style_1.styled)('div', 'inline-block w-full');
 exports.StyledMonth.displayName = 'StyledMonth';
-exports.StyledWeek = (0, style_1.styled)('div', 'mb-0.5 justify-center flex w-full whitespace-no-wrap');
+exports.StyledWeek = (0, style_1.styled)('div', 'mb-0.5 justify-center flex w-full whitespace-nowrap');
 exports.StyledWeek.displayName = 'StyledWeek';
 // @ts-ignore
 function generateDayStyles(defaultCode, defaultStyle) {

package/checkbox/checkbox.d.ts

@@ -1,6 +1,6 @@
 import type { CheckboxProps } from './types';
 declare const Checkbox: {
-    ({ overrides, checked, containsInteractiveElement, disabled, autoFocus, isIndeterminate, error, checkmarkType, onChange, onMouseEnter, onMouseLeave, onMouseDown, onMouseUp, onFocus, onBlur, required, labelPlacement, value, id, name, children, title, "aria-label": _ariaLabel, "aria-describedby": ariaDescribedby, "aria-errormessage": ariaErrormessage, ariaLabel, inputRef, className, style, size, intent: _intent, $outlineStyle, $outlineColor, $outlineOffset, $outlineWidth, "data-spaceweb": dataSpaceweb, }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
+    ({ overrides, checked, containsInteractiveElement, disabled, autoFocus, isIndeterminate, error, checkmarkType, onChange, onMouseEnter, onMouseLeave, onMouseDown, onMouseUp, onFocus, onBlur, required, labelPlacement, value, id, name, children, title, "aria-label": _ariaLabel, "aria-describedby": ariaDescribedby, "aria-errormessage": ariaErrormessage, ariaLabel, inputRef, className, style, size, intent: _intent, $outlineStyle, $outlineColor, $outlineOffset, $outlineWidth, "data-spaceweb": dataSpaceweb, ...restProps }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
     __standard: string;
 };

package/checkbox/checkbox.js

@@ -13,9 +13,10 @@ var context_1 = require("../form-control/context");
 var style_1 = require("../style");
 var tick_1 = tslib_1.__importDefault(require("../icon/components/tick"));
 var subtract_1 = tslib_1.__importDefault(require("../icon/components/subtract"));
+var box_1 = require("../box");
 var stopPropagation = function (e) { return e.stopPropagation(); };
 var Checkbox = function (_a) {
-    var _b = _a.overrides, overrides = _b === void 0 ? {} : _b, _c = _a.checked, checked = _c === void 0 ? false : _c, _d = _a.containsInteractiveElement, containsInteractiveElement = _d === void 0 ? false : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.autoFocus, autoFocus = _f === void 0 ? false : _f, _g = _a.isIndeterminate, isIndeterminate = _g === void 0 ? false : _g, _h = _a.error, error = _h === void 0 ? false : _h, _j = _a.checkmarkType, checkmarkType = _j === void 0 ? constants_1.STYLE_TYPE.default : _j, _k = _a.onChange, onChange = _k === void 0 ? noop_1.default : _k, _l = _a.onMouseEnter, onMouseEnter = _l === void 0 ? noop_1.default : _l, _m = _a.onMouseLeave, onMouseLeave = _m === void 0 ? noop_1.default : _m, _o = _a.onMouseDown, onMouseDown = _o === void 0 ? noop_1.default : _o, _p = _a.onMouseUp, onMouseUp = _p === void 0 ? noop_1.default : _p, _q = _a.onFocus, onFocus = _q === void 0 ? noop_1.default : _q, _r = _a.onBlur, onBlur = _r === void 0 ? noop_1.default : _r, required = _a.required, _s = _a.labelPlacement, labelPlacement = _s === void 0 ? 'right' : _s, value = _a.value, id = _a.id, name = _a.name, children = _a.children, title = _a.title, _ariaLabel = _a["aria-label"], ariaDescribedby = _a["aria-describedby"], ariaErrormessage = _a["aria-errormessage"], ariaLabel = _a.ariaLabel, inputRef = _a.inputRef, className = _a.className, style = _a.style, _t = _a.size, size = _t === void 0 ? 'md' : _t, _intent = _a.intent, $outlineStyle = _a.$outlineStyle, $outlineColor = _a.$outlineColor, $outlineOffset = _a.$outlineOffset, $outlineWidth = _a.$outlineWidth, dataSpaceweb = _a["data-spaceweb"];
+    var _b = _a.overrides, overrides = _b === void 0 ? {} : _b, _c = _a.checked, checked = _c === void 0 ? false : _c, _d = _a.containsInteractiveElement, containsInteractiveElement = _d === void 0 ? false : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.autoFocus, autoFocus = _f === void 0 ? false : _f, _g = _a.isIndeterminate, isIndeterminate = _g === void 0 ? false : _g, _h = _a.error, error = _h === void 0 ? false : _h, _j = _a.checkmarkType, checkmarkType = _j === void 0 ? constants_1.STYLE_TYPE.default : _j, _k = _a.onChange, onChange = _k === void 0 ? noop_1.default : _k, _l = _a.onMouseEnter, onMouseEnter = _l === void 0 ? noop_1.default : _l, _m = _a.onMouseLeave, onMouseLeave = _m === void 0 ? noop_1.default : _m, _o = _a.onMouseDown, onMouseDown = _o === void 0 ? noop_1.default : _o, _p = _a.onMouseUp, onMouseUp = _p === void 0 ? noop_1.default : _p, _q = _a.onFocus, onFocus = _q === void 0 ? noop_1.default : _q, _r = _a.onBlur, onBlur = _r === void 0 ? noop_1.default : _r, required = _a.required, _s = _a.labelPlacement, labelPlacement = _s === void 0 ? 'right' : _s, value = _a.value, id = _a.id, name = _a.name, children = _a.children, title = _a.title, _ariaLabel = _a["aria-label"], ariaDescribedby = _a["aria-describedby"], ariaErrormessage = _a["aria-errormessage"], ariaLabel = _a.ariaLabel, inputRef = _a.inputRef, className = _a.className, style = _a.style, _t = _a.size, size = _t === void 0 ? 'md' : _t, _intent = _a.intent, $outlineStyle = _a.$outlineStyle, $outlineColor = _a.$outlineColor, $outlineOffset = _a.$outlineOffset, $outlineWidth = _a.$outlineWidth, dataSpaceweb = _a["data-spaceweb"], restProps = tslib_1.__rest(_a, ["overrides", "checked", "containsInteractiveElement", "disabled", "autoFocus", "isIndeterminate", "error", "checkmarkType", "onChange", "onMouseEnter", "onMouseLeave", "onMouseDown", "onMouseUp", "onFocus", "onBlur", "required", "labelPlacement", "value", "id", "name", "children", "title", 'aria-label', 'aria-describedby', 'aria-errormessage', "ariaLabel", "inputRef", "className", "style", "size", "intent", "$outlineStyle", "$outlineColor", "$outlineOffset", "$outlineWidth", 'data-spaceweb']);
     var intent = (0, context_1.useContextualFormProps)({
         intent: _intent,
     }).intent;
@@ -109,7 +110,7 @@ var Checkbox = function (_a) {
     };
     var labelComp = children && ((0, jsx_runtime_1.jsx)(Label, tslib_1.__assign({}, sharedProps, labelProps, { children: containsInteractiveElement ? (
         // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions -- prevents the event from bubbling up to the label and moving focus to the radio button
-        (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ onClick: function (e) { return e.preventDefault(); } }, { children: children }))) : (children) })));
+        (0, jsx_runtime_1.jsx)(box_1.Box, tslib_1.__assign({ onClick: function (e) { return e.preventDefault(); } }, { children: children }))) : (children) })));
     var getCheckmarkIcon = function () {
         if (isIndeterminate) {
             return (0, jsx_runtime_1.jsx)(subtract_1.default, { size: size === 'medium' || size === 'large' ? 10 : 8 });
@@ -133,10 +134,10 @@ var Checkbox = function (_a) {
             },
             style,
             rootProps === null || rootProps === void 0 ? void 0 : rootProps.style,
-        ], className: [className, rootProps === null || rootProps === void 0 ? void 0 : rootProps.className] }, { children: [(labelPlacement === 'top' || labelPlacement === 'left') && labelComp, checkmarkType === constants_1.STYLE_TYPE.toggle ? ((0, jsx_runtime_1.jsx)(ToggleTrack, tslib_1.__assign({}, sharedProps, toggleTrackProps, { children: (0, jsx_runtime_1.jsx)(Toggle, tslib_1.__assign({}, sharedProps, toggleProps)) }))) : (checkmarkComp), (0, jsx_runtime_1.jsx)(Input, tslib_1.__assign({ value: value, id: id, name: name, checked: checked, required: required, "aria-label": ariaLabel || _ariaLabel, "aria-describedby": ariaDescribedby, "aria-checked": !!checked, "aria-errormessage": ariaErrormessage, "aria-invalid": error || null, "aria-required": required || null, disabled: disabled, type: "checkbox", ref: mergedRef, 
+        ], className: [className, rootProps === null || rootProps === void 0 ? void 0 : rootProps.className] }, { children: [(labelPlacement === 'top' || labelPlacement === 'left') && labelComp, checkmarkType === constants_1.STYLE_TYPE.toggle ? ((0, jsx_runtime_1.jsx)(ToggleTrack, tslib_1.__assign({}, sharedProps, toggleTrackProps, { children: (0, jsx_runtime_1.jsx)(Toggle, tslib_1.__assign({}, sharedProps, toggleProps)) }))) : (checkmarkComp), (0, jsx_runtime_1.jsx)(Input, tslib_1.__assign({ value: value, id: id, name: name, checked: checked, required: required, disabled: disabled, type: "checkbox", ref: mergedRef, 
                 // Prevent a second click event from firing when label is clicked.
                 // See https://github.com/uber/baseweb/issues/3847
-                onClick: stopPropagation, role: checkmarkType === constants_1.STYLE_TYPE.toggle ? 'switch' : undefined }, sharedProps, inputEvents, inputProps)), (labelPlacement === 'bottom' || labelPlacement === 'right') && labelComp] })));
+                onClick: stopPropagation, role: checkmarkType === constants_1.STYLE_TYPE.toggle ? 'switch' : undefined }, restProps, { "aria-label": ariaLabel || _ariaLabel, "aria-describedby": ariaDescribedby, "aria-checked": !!checked, "aria-errormessage": ariaErrormessage, "aria-invalid": error || null, "aria-required": required || null }, sharedProps, inputEvents, inputProps)), (labelPlacement === 'bottom' || labelPlacement === 'right') && labelComp] })));
 };
 exports.default = Checkbox;
 Checkbox.displayName = 'Checkbox';

package/checkbox/types.d.ts

@@ -1,9 +1,9 @@
-import * as React from 'react';
-import { SharedProps as BaseSharedProps } from '../baseui/input';
-import { OutlineProps } from '../helpers/commonStyles';
-import { Override } from '../overrides';
-import { Intent, SpacewebComponentProps } from '../types';
-import { STYLE_TYPE } from './constants';
+import type * as React from 'react';
+import type { SharedProps as BaseSharedProps } from '../baseui/input';
+import type { OutlineProps } from '../helpers/commonStyles';
+import type { Override } from '../overrides';
+import type { Intent, SpacewebComponentProps } from '../types';
+import type { STYLE_TYPE } from './constants';
 export type StyleType = keyof typeof STYLE_TYPE;
 export type LabelPlacement = 'top' | 'right' | 'bottom' | 'left';
 /** @deprecated */
@@ -39,8 +39,10 @@ export type CheckboxOverrides = {
 type BaseCheckboxProps = {
     'aria-describedby'?: string;
     'aria-errormessage'?: string;
+    'aria-hidden'?: boolean | 'true' | 'false';
     ariaLabel?: string;
     'aria-label'?: string;
+    tabIndex?: number;
     children?: React.ReactNode;
     containsInteractiveElement?: boolean;
     overrides?: CheckboxOverrides;

package/color-picker/CustomColorSelector.d.ts

@@ -1,7 +1,7 @@
 import { type ReactElement } from 'react';
 import { type RGBColor } from 'react-color';
 import type { CustomColorSelectorProps } from './types';
-import { ClassName, Styles } from '../types';
+import type { ClassName, Styles } from '../types';
 export declare const ColorPreview: ({ color, className, style, }: {
     color?: RGBColor | undefined;
     className?: ClassName;

package/color-picker/CustomColorSelector.js

@@ -52,6 +52,12 @@ var CustomEditableInput = function (_a) {
     var handleChange = (0, react_1.useCallback)(function (data) {
         typedValue.current = data;
     }, []);
+    (0, react_1.useEffect)(function () {
+        // Sync typedValue to value if value changes due to another input being edited
+        if (label in typedValue.current && typedValue.current[label] !== value) {
+            typedValue.current[label] = value;
+        }
+    }, [label, value]);
     (0, react_1.useEffect)(function () {
         if (!editableInput)
             return undefined;
@@ -86,21 +92,28 @@ var ColorPickerComponent = function (_props) {
     // but @types/react-color simply passes the types through CustomPicker as-is
     // We forward CustomColorSelectorProps to the component signature but internally use InternalCustomColorSelectorProps
     var props = _props;
-    var hex = props.hex, rgb = props.rgb, enableAlphaSelector = props.enableAlphaSelector, onChange = props.onChange, onChangeComplete = props.onChangeComplete, renderColorSuggestionPanel = props.renderColorSuggestionPanel;
+    var _hex = props.hex, rgb = props.rgb, enableAlphaSelector = props.enableAlphaSelector, onChange = props.onChange, onChangeComplete = props.onChangeComplete, renderColorSuggestionPanel = props.renderColorSuggestionPanel;
     // Bug in the react-color lib
     // https://github.com/casesandberg/react-color/blob/bc9a0e1dc5d11b06c511a8e02a95bd85c7129f4b/src/helpers/hue.js#L33
     // when left === containerWidth it return 360 which return 0 in hsl value the pointer shifts to the left most
     // 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;
+    // react-color doesn't support alpha hexes, so we need to insert it ourselves
+    var hex = (0, colors_1.normalizeHexWithAlpha)(_hex, 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) {
+            onChange(tslib_1.__assign(tslib_1.__assign({}, data), { a: 1 }));
+        }
+        else
+            onChange(data);
+    }, [onChange]);
     var handleChange = (0, react_1.useCallback)(function (data) {
-        var _a;
         // react-color emitted data is very dynamic and uses properties from labels
         if ('Hex' in data) {
-            var hexValue = data.Hex;
-            var alpha = (_a = (data.A < 100 ? data.A / 100 : a)) !== null && _a !== void 0 ? _a : 1;
-            var newHex = alpha !== undefined && alpha !== 1 ? hexValue + Math.floor(alpha * 255).toString(16) : hexValue;
-            var parsedRgba = (0, colors_1.hexToRgb)(newHex);
+            var newHex = data.Hex;
+            var parsedRgba = (0, colors_1.hexToRgb)(data.Hex);
             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
@@ -109,17 +122,21 @@ var ColorPickerComponent = function (_props) {
                 onChangeComplete({ rgb: newRgba });
         }
         else if (data.R || data.G || data.B || data.A) {
+            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
+            var resetAlpha = changedKey !== 'A' && a === 0 && data[changedKey] !== { R: r, G: g, B: b }[changedKey];
             var newRgba = {
                 r: getNumberWithFallback(data.R, r),
                 g: getNumberWithFallback(data.G, g),
                 b: getNumberWithFallback(data.B, b),
-                a: enableAlphaSelector ? getNumberWithFallback(data.A, (a !== null && a !== void 0 ? a : 1) * 100) / 100 : 1,
+                a: enableAlphaSelector && !resetAlpha ? getNumberWithFallback(data.A, (a !== null && a !== void 0 ? a : 1) * 100) / 100 : 1,
             };
             onChange(newRgba);
             onChangeComplete({ rgb: newRgba });
         }
     }, [onChange, onChangeComplete, enableAlphaSelector, r, g, b, a]);
-    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 rounded-16 overflow-hidden", style: { height: '150px' } }, { children: (0, jsx_runtime_1.jsx)(common_1.Saturation, tslib_1.__assign({}, props)) })), (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)) })), (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", 
+    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: {
                             gridTemplateColumns: "".concat(enableAlphaSelector ? '73' : '99', "fr").concat(' 51fr'.repeat(enableAlphaSelector ? 4 : 3)),

package/date-picker/DatePickerInput.d.ts

@@ -1,5 +1,5 @@
-import { ReactElement } from 'react';
-import { InputProps } from '../input';
+import { type ReactElement } from 'react';
+import { type InputProps } from '../input';
 type DatePickerInputProps = InputProps & {
     isOpen?: boolean;
     autoSizeInput?: boolean;

package/date-picker/DatePickerInput.js

@@ -84,6 +84,7 @@ var DatePickerInput = function (_a) {
                     var $intent = _a.$intent;
                     return (0, classNames_1.default)({
                         'spr-focus-01': isOpen && $intent === 'default',
+                        'focus-within:spr-focus-01': $intent === 'default',
                         'w-auto': autoSizeInput,
                     });
                 },

package/esm/asyncSelect/hooks/useAsyncSelect.d.ts

@@ -151,7 +151,7 @@ export declare const useAsyncSelect: ({ loadOptions, initialOptions, resolveSele
     endEnhancerButtonProps?: import("../../select").SelectEnhancerButtonConfig | undefined;
     virtual?: boolean | undefined;
     selectOnTab?: boolean | undefined;
-    getActionsElement?: import("../../menu").MenuItemActions;
+    getActionsElement?: import("../../menu").MenuItemActions | undefined;
     captureScroll?: boolean | undefined;
     popoverMinWidth?: string | undefined;
     createOption?: ((label: string) => import("../../select").Options | Promise<import("../../select").Options>) | undefined;
@@ -329,7 +329,7 @@ export declare const useAsyncSelect: ({ loadOptions, initialOptions, resolveSele
     endEnhancerButtonProps?: import("../../select").SelectEnhancerButtonConfig | undefined;
     virtual?: boolean | undefined;
     selectOnTab?: boolean | undefined;
-    getActionsElement?: import("../../menu").MenuItemActions;
+    getActionsElement?: import("../../menu").MenuItemActions | undefined;
     captureScroll?: boolean | undefined;
     overlayWidth?: string | undefined;
     scrollContainer?: "overlayContainer" | "menuContainer" | undefined;
@@ -510,7 +510,7 @@ export declare const useAsyncSelect: ({ loadOptions, initialOptions, resolveSele
     endEnhancerButtonProps?: import("../../select").SelectEnhancerButtonConfig | undefined;
     virtual?: boolean | undefined;
     selectOnTab?: boolean | undefined;
-    getActionsElement?: import("../../menu").MenuItemActions;
+    getActionsElement?: import("../../menu").MenuItemActions | undefined;
     captureScroll?: boolean | undefined;
     overlayWidth?: string | undefined;
     scrollContainer?: "overlayContainer" | "menuContainer" | undefined;

package/esm/asyncSelect/hooks/useGroupedAsyncSelect.d.ts

@@ -119,7 +119,7 @@ export declare const useGroupedAsyncSelect: ({ onChange, showSelectAll, selectAl
     endEnhancerButtonProps?: import("../../select").SelectEnhancerButtonConfig | undefined;
     virtual?: boolean | undefined;
     selectOnTab?: boolean | undefined;
-    getActionsElement?: import("../../menu").MenuItemActions;
+    getActionsElement?: import("../../menu").MenuItemActions | undefined;
     captureScroll?: boolean | undefined;
     popoverMinWidth?: string | undefined;
     createOption?: ((label: string) => import("../../select").Options | Promise<import("../../select").Options>) | undefined;
@@ -265,7 +265,7 @@ export declare const useGroupedAsyncSelect: ({ onChange, showSelectAll, selectAl
     endEnhancerButtonProps?: import("../../select").SelectEnhancerButtonConfig | undefined;
     virtual?: boolean | undefined;
     selectOnTab?: boolean | undefined;
-    getActionsElement?: import("../../menu").MenuItemActions;
+    getActionsElement?: import("../../menu").MenuItemActions | undefined;
     captureScroll?: boolean | undefined;
     overlayWidth?: string | undefined;
     popoverMinWidth?: string | undefined;
@@ -413,7 +413,7 @@ export declare const useGroupedAsyncSelect: ({ onChange, showSelectAll, selectAl
     endEnhancerButtonProps?: import("../../select").SelectEnhancerButtonConfig | undefined;
     virtual?: boolean | undefined;
     selectOnTab?: boolean | undefined;
-    getActionsElement?: import("../../menu").MenuItemActions;
+    getActionsElement?: import("../../menu").MenuItemActions | undefined;
     captureScroll?: boolean | undefined;
     overlayWidth?: string | undefined;
     popoverMinWidth?: string | undefined;

package/esm/baseui/datepicker/styled-components.js

@@ -46,7 +46,7 @@ export var StyledCalendarHeader = styled('div', 'box-border spr-text-primary ite
     return ($density === DENSITY.high ? 'min-h-6.5 w-full' : 'min-h-9 w-98');
 });
 StyledCalendarHeader.displayName = 'StyledCalendarHeader';
-export var StyledMonthHeader = styled('div', 'spr-text-01 spr-bg-primary px-1 whitespace-no-wrap border-0 border-b-1 spr-border-secondary border-b-solid spr-text-primary block text-center flex justify-center');
+export var StyledMonthHeader = styled('div', 'spr-text-01 spr-bg-primary px-1 whitespace-nowrap border-0 border-b-1 spr-border-secondary border-b-solid spr-text-primary block text-center flex justify-center');
 StyledMonthHeader.displayName = 'StyledMonthHeader';
 export var StyledMonthYearSelectButton = styled('button', 'px-2 gap-1 items-center justify-around flex cursor-pointer spr-bg-primary spr-text-01 h-8', 'border-1 spr-border-primary rounded-8 outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-[--spr-focus-01]');
 StyledMonthYearSelectButton.displayName = 'StyledMonthYearSelectButton';
@@ -54,7 +54,7 @@ export var StyledMonthYearSelectIconContainer = styled('span', 'flex items-cente
 StyledMonthYearSelectIconContainer.displayName = 'StyledMonthYearSelectIconContainer';
 export var StyledMonth = styled('div', 'inline-block w-full');
 StyledMonth.displayName = 'StyledMonth';
-export var StyledWeek = styled('div', 'mb-0.5 justify-center flex w-full whitespace-no-wrap');
+export var StyledWeek = styled('div', 'mb-0.5 justify-center flex w-full whitespace-nowrap');
 StyledWeek.displayName = 'StyledWeek';
 // @ts-ignore
 function generateDayStyles(defaultCode, defaultStyle) {

package/esm/checkbox/checkbox.d.ts

@@ -1,6 +1,6 @@
 import type { CheckboxProps } from './types';
 declare const Checkbox: {
-    ({ overrides, checked, containsInteractiveElement, disabled, autoFocus, isIndeterminate, error, checkmarkType, onChange, onMouseEnter, onMouseLeave, onMouseDown, onMouseUp, onFocus, onBlur, required, labelPlacement, value, id, name, children, title, "aria-label": _ariaLabel, "aria-describedby": ariaDescribedby, "aria-errormessage": ariaErrormessage, ariaLabel, inputRef, className, style, size, intent: _intent, $outlineStyle, $outlineColor, $outlineOffset, $outlineWidth, "data-spaceweb": dataSpaceweb, }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
+    ({ overrides, checked, containsInteractiveElement, disabled, autoFocus, isIndeterminate, error, checkmarkType, onChange, onMouseEnter, onMouseLeave, onMouseDown, onMouseUp, onFocus, onBlur, required, labelPlacement, value, id, name, children, title, "aria-label": _ariaLabel, "aria-describedby": ariaDescribedby, "aria-errormessage": ariaErrormessage, ariaLabel, inputRef, className, style, size, intent: _intent, $outlineStyle, $outlineColor, $outlineOffset, $outlineWidth, "data-spaceweb": dataSpaceweb, ...restProps }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
     __standard: string;
 };

package/esm/checkbox/checkbox.js

@@ -1,4 +1,4 @@
-import { __assign, __read } from "tslib";
+import { __assign, __read, __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getCheckmarkBackgroundColor, getCheckmarkBorderColor, getTrackBackgroundColor, getTrackBorderColor, StyledCheckmark, StyledInput, StyledLabel, StyledRoot, StyledToggle, StyledToggleTrack, } from './styled-components';
 import { STYLE_TYPE } from './constants';
@@ -11,9 +11,10 @@ import { useContextualFormProps } from '../form-control/context';
 import { useStyle } from '../style';
 import Tick from '../icon/components/tick';
 import Indeterminate from '../icon/components/subtract';
+import { Box } from '../box';
 var stopPropagation = function (e) { return e.stopPropagation(); };
 var Checkbox = function (_a) {
-    var _b = _a.overrides, overrides = _b === void 0 ? {} : _b, _c = _a.checked, checked = _c === void 0 ? false : _c, _d = _a.containsInteractiveElement, containsInteractiveElement = _d === void 0 ? false : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.autoFocus, autoFocus = _f === void 0 ? false : _f, _g = _a.isIndeterminate, isIndeterminate = _g === void 0 ? false : _g, _h = _a.error, error = _h === void 0 ? false : _h, _j = _a.checkmarkType, checkmarkType = _j === void 0 ? STYLE_TYPE.default : _j, _k = _a.onChange, onChange = _k === void 0 ? _noop : _k, _l = _a.onMouseEnter, onMouseEnter = _l === void 0 ? _noop : _l, _m = _a.onMouseLeave, onMouseLeave = _m === void 0 ? _noop : _m, _o = _a.onMouseDown, onMouseDown = _o === void 0 ? _noop : _o, _p = _a.onMouseUp, onMouseUp = _p === void 0 ? _noop : _p, _q = _a.onFocus, onFocus = _q === void 0 ? _noop : _q, _r = _a.onBlur, onBlur = _r === void 0 ? _noop : _r, required = _a.required, _s = _a.labelPlacement, labelPlacement = _s === void 0 ? 'right' : _s, value = _a.value, id = _a.id, name = _a.name, children = _a.children, title = _a.title, _ariaLabel = _a["aria-label"], ariaDescribedby = _a["aria-describedby"], ariaErrormessage = _a["aria-errormessage"], ariaLabel = _a.ariaLabel, inputRef = _a.inputRef, className = _a.className, style = _a.style, _t = _a.size, size = _t === void 0 ? 'md' : _t, _intent = _a.intent, $outlineStyle = _a.$outlineStyle, $outlineColor = _a.$outlineColor, $outlineOffset = _a.$outlineOffset, $outlineWidth = _a.$outlineWidth, dataSpaceweb = _a["data-spaceweb"];
+    var _b = _a.overrides, overrides = _b === void 0 ? {} : _b, _c = _a.checked, checked = _c === void 0 ? false : _c, _d = _a.containsInteractiveElement, containsInteractiveElement = _d === void 0 ? false : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.autoFocus, autoFocus = _f === void 0 ? false : _f, _g = _a.isIndeterminate, isIndeterminate = _g === void 0 ? false : _g, _h = _a.error, error = _h === void 0 ? false : _h, _j = _a.checkmarkType, checkmarkType = _j === void 0 ? STYLE_TYPE.default : _j, _k = _a.onChange, onChange = _k === void 0 ? _noop : _k, _l = _a.onMouseEnter, onMouseEnter = _l === void 0 ? _noop : _l, _m = _a.onMouseLeave, onMouseLeave = _m === void 0 ? _noop : _m, _o = _a.onMouseDown, onMouseDown = _o === void 0 ? _noop : _o, _p = _a.onMouseUp, onMouseUp = _p === void 0 ? _noop : _p, _q = _a.onFocus, onFocus = _q === void 0 ? _noop : _q, _r = _a.onBlur, onBlur = _r === void 0 ? _noop : _r, required = _a.required, _s = _a.labelPlacement, labelPlacement = _s === void 0 ? 'right' : _s, value = _a.value, id = _a.id, name = _a.name, children = _a.children, title = _a.title, _ariaLabel = _a["aria-label"], ariaDescribedby = _a["aria-describedby"], ariaErrormessage = _a["aria-errormessage"], ariaLabel = _a.ariaLabel, inputRef = _a.inputRef, className = _a.className, style = _a.style, _t = _a.size, size = _t === void 0 ? 'md' : _t, _intent = _a.intent, $outlineStyle = _a.$outlineStyle, $outlineColor = _a.$outlineColor, $outlineOffset = _a.$outlineOffset, $outlineWidth = _a.$outlineWidth, dataSpaceweb = _a["data-spaceweb"], restProps = __rest(_a, ["overrides", "checked", "containsInteractiveElement", "disabled", "autoFocus", "isIndeterminate", "error", "checkmarkType", "onChange", "onMouseEnter", "onMouseLeave", "onMouseDown", "onMouseUp", "onFocus", "onBlur", "required", "labelPlacement", "value", "id", "name", "children", "title", 'aria-label', 'aria-describedby', 'aria-errormessage', "ariaLabel", "inputRef", "className", "style", "size", "intent", "$outlineStyle", "$outlineColor", "$outlineOffset", "$outlineWidth", 'data-spaceweb']);
     var intent = useContextualFormProps({
         intent: _intent,
     }).intent;
@@ -107,7 +108,7 @@ var Checkbox = function (_a) {
     };
     var labelComp = children && (_jsx(Label, __assign({}, sharedProps, labelProps, { children: containsInteractiveElement ? (
         // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions -- prevents the event from bubbling up to the label and moving focus to the radio button
-        _jsx("div", __assign({ onClick: function (e) { return e.preventDefault(); } }, { children: children }))) : (children) })));
+        _jsx(Box, __assign({ onClick: function (e) { return e.preventDefault(); } }, { children: children }))) : (children) })));
     var getCheckmarkIcon = function () {
         if (isIndeterminate) {
             return _jsx(Indeterminate, { size: size === 'medium' || size === 'large' ? 10 : 8 });
@@ -131,10 +132,10 @@ var Checkbox = function (_a) {
             },
             style,
             rootProps === null || rootProps === void 0 ? void 0 : rootProps.style,
-        ], className: [className, rootProps === null || rootProps === void 0 ? void 0 : rootProps.className] }, { children: [(labelPlacement === 'top' || labelPlacement === 'left') && labelComp, checkmarkType === STYLE_TYPE.toggle ? (_jsx(ToggleTrack, __assign({}, sharedProps, toggleTrackProps, { children: _jsx(Toggle, __assign({}, sharedProps, toggleProps)) }))) : (checkmarkComp), _jsx(Input, __assign({ value: value, id: id, name: name, checked: checked, required: required, "aria-label": ariaLabel || _ariaLabel, "aria-describedby": ariaDescribedby, "aria-checked": !!checked, "aria-errormessage": ariaErrormessage, "aria-invalid": error || null, "aria-required": required || null, disabled: disabled, type: "checkbox", ref: mergedRef, 
+        ], className: [className, rootProps === null || rootProps === void 0 ? void 0 : rootProps.className] }, { children: [(labelPlacement === 'top' || labelPlacement === 'left') && labelComp, checkmarkType === STYLE_TYPE.toggle ? (_jsx(ToggleTrack, __assign({}, sharedProps, toggleTrackProps, { children: _jsx(Toggle, __assign({}, sharedProps, toggleProps)) }))) : (checkmarkComp), _jsx(Input, __assign({ value: value, id: id, name: name, checked: checked, required: required, disabled: disabled, type: "checkbox", ref: mergedRef, 
                 // Prevent a second click event from firing when label is clicked.
                 // See https://github.com/uber/baseweb/issues/3847
-                onClick: stopPropagation, role: checkmarkType === STYLE_TYPE.toggle ? 'switch' : undefined }, sharedProps, inputEvents, inputProps)), (labelPlacement === 'bottom' || labelPlacement === 'right') && labelComp] })));
+                onClick: stopPropagation, role: checkmarkType === STYLE_TYPE.toggle ? 'switch' : undefined }, restProps, { "aria-label": ariaLabel || _ariaLabel, "aria-describedby": ariaDescribedby, "aria-checked": !!checked, "aria-errormessage": ariaErrormessage, "aria-invalid": error || null, "aria-required": required || null }, sharedProps, inputEvents, inputProps)), (labelPlacement === 'bottom' || labelPlacement === 'right') && labelComp] })));
 };
 export default Checkbox;
 Checkbox.displayName = 'Checkbox';

package/esm/checkbox/types.d.ts

@@ -1,9 +1,9 @@
-import * as React from 'react';
-import { SharedProps as BaseSharedProps } from '../baseui/input';
-import { OutlineProps } from '../helpers/commonStyles';
-import { Override } from '../overrides';
-import { Intent, SpacewebComponentProps } from '../types';
-import { STYLE_TYPE } from './constants';
+import type * as React from 'react';
+import type { SharedProps as BaseSharedProps } from '../baseui/input';
+import type { OutlineProps } from '../helpers/commonStyles';
+import type { Override } from '../overrides';
+import type { Intent, SpacewebComponentProps } from '../types';
+import type { STYLE_TYPE } from './constants';
 export type StyleType = keyof typeof STYLE_TYPE;
 export type LabelPlacement = 'top' | 'right' | 'bottom' | 'left';
 /** @deprecated */
@@ -39,8 +39,10 @@ export type CheckboxOverrides = {
 type BaseCheckboxProps = {
     'aria-describedby'?: string;
     'aria-errormessage'?: string;
+    'aria-hidden'?: boolean | 'true' | 'false';
     ariaLabel?: string;
     'aria-label'?: string;
+    tabIndex?: number;
     children?: React.ReactNode;
     containsInteractiveElement?: boolean;
     overrides?: CheckboxOverrides;

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

@@ -1,7 +1,7 @@
 import { type ReactElement } from 'react';
 import { type RGBColor } from 'react-color';
 import type { CustomColorSelectorProps } from './types';
-import { ClassName, Styles } from '../types';
+import type { ClassName, Styles } from '../types';
 export declare const ColorPreview: ({ color, className, style, }: {
     color?: RGBColor | undefined;
     className?: ClassName;

package/esm/color-picker/CustomColorSelector.js

@@ -5,7 +5,7 @@ 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 } from '../helpers/colors';
+import { hexToRgb, isValidHex, normalizeHexWithAlpha } from '../helpers/colors';
 import TransparentBackground from '../icon/components/transparentBackground';
 var CustomPointer = function () { return (_jsx(Box, { style: function (_a) {
         var rtlCompatible = _a.rtlCompatible;
@@ -48,6 +48,12 @@ var CustomEditableInput = function (_a) {
     var handleChange = useCallback(function (data) {
         typedValue.current = data;
     }, []);
+    useEffect(function () {
+        // Sync typedValue to value if value changes due to another input being edited
+        if (label in typedValue.current && typedValue.current[label] !== value) {
+            typedValue.current[label] = value;
+        }
+    }, [label, value]);
     useEffect(function () {
         if (!editableInput)
             return undefined;
@@ -82,21 +88,28 @@ var ColorPickerComponent = function (_props) {
     // but @types/react-color simply passes the types through CustomPicker as-is
     // We forward CustomColorSelectorProps to the component signature but internally use InternalCustomColorSelectorProps
     var props = _props;
-    var hex = props.hex, rgb = props.rgb, enableAlphaSelector = props.enableAlphaSelector, onChange = props.onChange, onChangeComplete = props.onChangeComplete, renderColorSuggestionPanel = props.renderColorSuggestionPanel;
+    var _hex = props.hex, rgb = props.rgb, enableAlphaSelector = props.enableAlphaSelector, onChange = props.onChange, onChangeComplete = props.onChangeComplete, renderColorSuggestionPanel = props.renderColorSuggestionPanel;
     // Bug in the react-color lib
     // https://github.com/casesandberg/react-color/blob/bc9a0e1dc5d11b06c511a8e02a95bd85c7129f4b/src/helpers/hue.js#L33
     // when left === containerWidth it return 360 which return 0 in hsl value the pointer shifts to the left most
     // 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;
+    // react-color doesn't support alpha hexes, so we need to insert it ourselves
+    var hex = normalizeHexWithAlpha(_hex, 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) {
+            onChange(__assign(__assign({}, data), { a: 1 }));
+        }
+        else
+            onChange(data);
+    }, [onChange]);
     var handleChange = useCallback(function (data) {
-        var _a;
         // react-color emitted data is very dynamic and uses properties from labels
         if ('Hex' in data) {
-            var hexValue = data.Hex;
-            var alpha = (_a = (data.A < 100 ? data.A / 100 : a)) !== null && _a !== void 0 ? _a : 1;
-            var newHex = alpha !== undefined && alpha !== 1 ? hexValue + Math.floor(alpha * 255).toString(16) : hexValue;
-            var parsedRgba = hexToRgb(newHex);
+            var newHex = data.Hex;
+            var parsedRgba = hexToRgb(data.Hex);
             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
@@ -105,17 +118,21 @@ var ColorPickerComponent = function (_props) {
                 onChangeComplete({ rgb: newRgba });
         }
         else if (data.R || data.G || data.B || data.A) {
+            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
+            var resetAlpha = changedKey !== 'A' && a === 0 && data[changedKey] !== { R: r, G: g, B: b }[changedKey];
             var newRgba = {
                 r: getNumberWithFallback(data.R, r),
                 g: getNumberWithFallback(data.G, g),
                 b: getNumberWithFallback(data.B, b),
-                a: enableAlphaSelector ? getNumberWithFallback(data.A, (a !== null && a !== void 0 ? a : 1) * 100) / 100 : 1,
+                a: enableAlphaSelector && !resetAlpha ? getNumberWithFallback(data.A, (a !== null && a !== void 0 ? a : 1) * 100) / 100 : 1,
             };
             onChange(newRgba);
             onChangeComplete({ rgb: newRgba });
         }
     }, [onChange, onChangeComplete, enableAlphaSelector, r, g, b, a]);
-    return (_jsxs(Stack, __assign({ direction: "vertical", gap: 4 }, { children: [renderColorSuggestionPanel ? renderColorSuggestionPanel(hex) : null, _jsx(Box, __assign({ className: "relative w-full rounded-16 overflow-hidden", style: { height: '150px' } }, { children: _jsx(Saturation, __assign({}, props)) })), _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)) })), _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", 
+    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: {
                             gridTemplateColumns: "".concat(enableAlphaSelector ? '73' : '99', "fr").concat(' 51fr'.repeat(enableAlphaSelector ? 4 : 3)),

package/esm/date-picker/DatePickerInput.d.ts

@@ -1,5 +1,5 @@
-import { ReactElement } from 'react';
-import { InputProps } from '../input';
+import { type ReactElement } from 'react';
+import { type InputProps } from '../input';
 type DatePickerInputProps = InputProps & {
     isOpen?: boolean;
     autoSizeInput?: boolean;

package/esm/date-picker/DatePickerInput.js

@@ -79,6 +79,7 @@ var DatePickerInput = function (_a) {
                     var $intent = _a.$intent;
                     return cx({
                         'spr-focus-01': isOpen && $intent === 'default',
+                        'focus-within:spr-focus-01': $intent === 'default',
                         'w-auto': autoSizeInput,
                     });
                 },

package/esm/helpers/colors.d.ts

@@ -16,3 +16,4 @@ export declare function getContrastRatio(color1: string, color2: string): number
 export declare function RgbToHsl({ r, g, b, a }: RGBColor): HSLA;
 export declare function HslToRgb(hsl: HSLA): RGBColor;
 export declare function noAlphaHex(inputHex?: string): string | undefined;
+export declare function normalizeHexWithAlpha<T extends string | undefined>(hex: T, alpha: number | undefined): T;

package/esm/helpers/colors.js

@@ -14,18 +14,19 @@ export var isValidHex = function (hex) {
  * @return {{r, g, b, a}} an object with rgba
  */
 export function hexToRgb(_hex) {
-    var hex = _hex.replace(/^#?/, '#');
+    var hex = _hex.replace(/^#?/, '');
     if (!isValidHex(hex))
         return { r: 0, g: 0, b: 0 };
     var isShortHand = hex.length === 3 || hex.length === 4;
-    var r = parseInt(isShortHand ? hex.substring(1, 2).repeat(2) : hex.substring(1, 3), 16);
-    var g = parseInt(isShortHand ? hex.substring(2, 3).repeat(2) : hex.substring(3, 5), 16);
-    var b = parseInt(isShortHand ? hex.substring(3, 4).repeat(2) : hex.substring(5, 7), 16);
-    var a = parseInt(isShortHand ? hex.substring(4, 5).repeat(2) : hex.substring(7, 9), 16);
+    var r = parseInt(isShortHand ? hex.substring(0, 1).repeat(2) : hex.substring(0, 2), 16);
+    var g = parseInt(isShortHand ? hex.substring(1, 2).repeat(2) : hex.substring(2, 4), 16);
+    var b = parseInt(isShortHand ? hex.substring(2, 3).repeat(2) : hex.substring(4, 6), 16);
+    var a = parseInt(isShortHand ? hex.substring(3, 4).repeat(2) : hex.substring(6, 8), 16);
     return __assign({ r: r, g: g, b: b }, (a < 255 ? { a: a / 255 } : undefined));
 }
 export function RgbToHex(_a) {
     var r = _a.r, g = _a.g, b = _a.b, a = _a.a;
+    // eslint-disable-next-line react-google-translate/no-return-text-nodes -- This isn't a React Element
     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(''));
 }
@@ -84,3 +85,11 @@ export function noAlphaHex(inputHex) {
         return inputHex.slice(0, -2);
     return inputHex;
 }
+export function normalizeHexWithAlpha(hex, alpha) {
+    if (typeof alpha !== 'number' || alpha === 1 || !hex)
+        return hex;
+    return (hex +
+        Math.floor(alpha * 255)
+            .toString(16)
+            .padStart(2, '0'));
+}

package/esm/list/list.d.ts

@@ -6,6 +6,7 @@ declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponen
 } & {
     children?: React.ReactNode;
     virtual?: boolean | undefined;
+    keepFirstItemMounted?: boolean | undefined;
     overrides?: {
         Root?: import("../overrides").Override<Record<string, any>> | undefined;
     } | undefined;