@sprinklrjs/spaceweb 14.15.2 → 14.16.1

package/baseui/timepicker/timepicker.js

@@ -49,7 +49,7 @@ var TimePicker = /** @class */ (function (_super) {
     tslib_1.__extends(TimePicker, _super);
     function TimePicker(props) {
         var _this = _super.call(this, props) || this;
-        // @ts-ignore
+        // @ts-ignore -- legacy baseui code
         _this.state = { steps: [], value: null };
         _this.onChange = function (params) {
             _this.setState({ value: params.value[0] });
@@ -170,9 +170,9 @@ var TimePicker = /** @class */ (function (_super) {
             var maxDate = _this.props.adapter.toJsDate(max);
             var midnightDate = _this.props.adapter.toJsDate(dayStart);
             return {
-                // @ts-expect-error todo(flow->ts)
+                // @ts-expect-error todo(flow->ts) -- legacy code from base ui
                 start: (minDate - midnightDate) / 1000,
-                // @ts-expect-error todo(flow->ts)
+                // @ts-expect-error todo(flow->ts) -- legacy code from base ui
                 end: (maxDate - midnightDate) / 1000,
             };
         };
@@ -299,12 +299,12 @@ var TimePicker = /** @class */ (function (_super) {
                     ? _this.buildSelectedOption(_this.props.value, _this.props.format, langCode)
                     : _this.state.value;
                 var ariaLabel = format === '12' ? timeRangePicker.timePickerAriaLabel12Hour : timeRangePicker.timePickerAriaLabel24Hour;
-                return ((0, jsx_runtime_1.jsx)(OverriddenSelect, tslib_1.__assign({ "aria-label": ariaLabel, disabled: _this.props.disabled, error: _this.props.error, positive: _this.props.positive, size: _this.props.size, placeholder: _this.props.placeholder || defaultPlaceholder, options: _this.state.steps.map(function (n) { return ({
+                return ((0, jsx_runtime_1.jsx)(OverriddenSelect, tslib_1.__assign({ disabled: _this.props.disabled, error: _this.props.error, positive: _this.props.positive, size: _this.props.size, placeholder: _this.props.placeholder || defaultPlaceholder, options: _this.state.steps.map(function (n) { return ({
                         id: n,
                         label: _this.secondsToLabel(n, _this.props.format, langCode),
                     }); }), filterOptions: _this.props.creatable ? _this.creatableFilterOptions : undefined, onChange: _this.onChange, 
                     // if value is defined, it should be an array type
-                    value: value ? [value] : value, clearable: false, backspaceRemoves: false, valueKey: "label" }, selectProps)));
+                    value: value ? [value] : value, clearable: false, backspaceRemoves: false, valueKey: "label" }, selectProps, { "aria-label": _this.props['aria-labelledby'] ? undefined : ariaLabel, "aria-labelledby": _this.props['aria-labelledby'], "aria-describedby": _this.props['aria-describedby'], "aria-errormessage": _this.props['aria-errormessage'], required: _this.props.required, id: _this.props.id })));
             } }));
     };
     TimePicker.defaultProps = {

package/baseui/timepicker/types.d.ts

@@ -40,6 +40,11 @@ export type TimePickerProps<T = Date> = {
      * By default the component will clamp the time window and setting this flag will ignore dates.
      */
     ignoreMinMaxDateComponent?: boolean;
+    id?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+    'aria-errormessage'?: string;
+    required?: boolean;
 };
 export type TimePickerState = {
     /** List of times (in seconds) displayed in the dropdown menu. */

package/color-picker/ColorPalette.js

@@ -9,13 +9,19 @@ var grid_1 = require("../grid");
 var Swatch_1 = require("./Swatch");
 var locale_1 = require("../locale");
 var overrides_1 = require("../overrides");
+var theme_1 = require("../theme");
 var colors_1 = require("./colors");
+var handleSwatchGroupKeyDown_1 = require("./handleSwatchGroupKeyDown");
 var constants_1 = require("./constants");
 var typography_1 = require("../typography");
 var defaultColorPalette = colors_1.COLOR_PALETTE.flat();
+var getSwatchTabIndex = function (isSelected, index, hasGroupSelection) {
+    return isSelected || (!hasGroupSelection && index === 0) ? 0 : -1;
+};
 exports.ColorPalette = (0, react_1.memo)(function (_a) {
     var selectedColor = _a.color, overrides = _a.overrides, onChange = _a.onChange, _colorPalette = _a.colorPalette, _presets = _a.presets, noReset = _a.noReset;
     var locale = (0, locale_1.useLocale)();
+    var direction = (0, theme_1.useTheme)().direction;
     var presets = (0, react_1.useMemo)(function () {
         var defaultPreset = {
             label: locale.colorPicker.sprinklrPresets,
@@ -24,10 +30,21 @@ exports.ColorPalette = (0, react_1.memo)(function (_a) {
         return typeof _presets === 'function' ? _presets(defaultPreset) : _presets !== null && _presets !== void 0 ? _presets : [defaultPreset];
     }, [_presets, noReset, locale.colorPicker]);
     var colorPalette = _colorPalette !== null && _colorPalette !== void 0 ? _colorPalette : defaultColorPalette;
+    var hasPaletteSelection = colorPalette.some(function (paletteColor) { return selectedColor === paletteColor; });
     var _b = tslib_1.__read((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Swatches, grid_1.Grid), 2), Swatches = _b[0], swatchesProps = _b[1];
     var _c = tslib_1.__read((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Swatch, Swatch_1.Swatch), 2), Swatch = _c[0], swatchProps = _c[1];
-    return ((0, jsx_runtime_1.jsxs)(box_1.Box, tslib_1.__assign({ className: "min-h-40" }, { children: [presets.map(function (preset, _index) {
+    return ((0, jsx_runtime_1.jsxs)(box_1.Box, tslib_1.__assign({ className: "min-h-40" }, { children: [presets.map(function (preset) {
                 var _a;
-                return ((_a = preset.colors) === null || _a === void 0 ? void 0 : _a.length) ? ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(typography_1.Typography, tslib_1.__assign({ className: "spr-text-primary", variant: "body-md", weight: "semibold" }, { children: preset.label })), (0, jsx_runtime_1.jsx)(Swatches, tslib_1.__assign({ className: "mb-4 mt-2", cols: constants_1.SWATCHES_PER_ROW, colGap: 1, rowGap: 1 }, swatchesProps, { children: preset.colors.map(function (color) { return ((0, jsx_runtime_1.jsx)(Swatch, tslib_1.__assign({ color: color, onChange: onChange, isSelected: selectedColor === color || (!selectedColor && color === colors_1.RESET_COLOR) }, swatchProps, { className: ['w-6 h-6', swatchProps === null || swatchProps === void 0 ? void 0 : swatchProps.className] }), color)); }) }))] }, preset.label)) : null;
-            }), (colorPalette === null || colorPalette === void 0 ? void 0 : colorPalette.length) ? ((0, jsx_runtime_1.jsx)(Swatches, tslib_1.__assign({ cols: constants_1.SWATCHES_PER_ROW, colGap: 1, rowGap: 1 }, swatchesProps, { children: colorPalette.map(function (color) { return ((0, jsx_runtime_1.jsx)(Swatch, tslib_1.__assign({ color: color, overrides: overrides, onChange: onChange, isSelected: selectedColor === color }, swatchProps, { className: ['w-6 h-6', swatchProps === null || swatchProps === void 0 ? void 0 : swatchProps.className] }), color)); }) }))) : null] })));
+                if (!((_a = preset.colors) === null || _a === void 0 ? void 0 : _a.length)) {
+                    return null;
+                }
+                var hasPresetSelection = preset.colors.some(function (presetColor) { return selectedColor === presetColor || (!selectedColor && presetColor === colors_1.RESET_COLOR); });
+                return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(typography_1.Typography, tslib_1.__assign({ className: "spr-text-primary", variant: "body-md", weight: "semibold" }, { children: preset.label })), (0, jsx_runtime_1.jsx)(Swatches, tslib_1.__assign({ className: "mb-4 mt-2", cols: constants_1.SWATCHES_PER_ROW, colGap: 1, rowGap: 1, role: "radiogroup", "aria-label": preset.label, onKeyDown: function (event) { return (0, handleSwatchGroupKeyDown_1.handleSwatchGroupKeyDown)(event, direction); } }, swatchesProps, { children: preset.colors.map(function (color, index) {
+                                var isSelected = selectedColor === color || (!selectedColor && color === colors_1.RESET_COLOR);
+                                return ((0, jsx_runtime_1.jsx)(Swatch, tslib_1.__assign({ color: color, onChange: onChange, isSelected: isSelected, tabIndex: getSwatchTabIndex(isSelected, index, hasPresetSelection), className: ['w-6 h-6', swatchProps === null || swatchProps === void 0 ? void 0 : swatchProps.className] }, swatchProps), color));
+                            }) }))] }, preset.label));
+            }), (colorPalette === null || colorPalette === void 0 ? void 0 : colorPalette.length) ? ((0, jsx_runtime_1.jsx)(Swatches, tslib_1.__assign({ cols: constants_1.SWATCHES_PER_ROW, colGap: 1, rowGap: 1, role: "radiogroup", "aria-label": locale.colorPicker.colorLibraryLabel, onKeyDown: function (event) { return (0, handleSwatchGroupKeyDown_1.handleSwatchGroupKeyDown)(event, direction); } }, swatchesProps, { children: colorPalette.map(function (color, index) {
+                    var isSelected = selectedColor === color;
+                    return ((0, jsx_runtime_1.jsx)(Swatch, tslib_1.__assign({ color: color, overrides: overrides, onChange: onChange, isSelected: isSelected, tabIndex: getSwatchTabIndex(isSelected, index, hasPaletteSelection), className: ['w-6 h-6', swatchProps === null || swatchProps === void 0 ? void 0 : swatchProps.className] }, swatchProps), color));
+                }) }))) : null] })));
 });

package/color-picker/GradientColorPicker.js

@@ -12,12 +12,15 @@ var CustomColorSelector_1 = require("./CustomColorSelector");
 var Swatch_1 = require("./Swatch");
 var constants_1 = require("./constants");
 var locale_1 = require("../locale");
+var theme_1 = require("../theme");
 var utils_1 = require("./utils");
+var handleSwatchGroupKeyDown_1 = require("./handleSwatchGroupKeyDown");
 var colors_1 = require("../helpers/colors");
 var LabelOverrides = { Label: { className: 'spr-text-primary font-600 text-16 leading-150' } };
 var GradientColorPicker = (0, react_1.memo)(function (_a) {
     var color = _a.color, _b = _a.onChange, onChange = _b === void 0 ? noop_1.default : _b, _c = _a.onChangeComplete, onChangeComplete = _c === void 0 ? noop_1.default : _c, _d = _a.enableAlphaSelector, enableAlphaSelector = _d === void 0 ? false : _d;
     var locale = (0, locale_1.useLocale)();
+    var direction = (0, theme_1.useTheme)().direction;
     var _e = tslib_1.__read((0, react_1.useState)(function () {
         var gradientColorData = (0, utils_1.extractColorsFromGradient)(color);
         return (gradientColorData !== null && gradientColorData !== void 0 ? gradientColorData : {
@@ -72,7 +75,7 @@ var GradientColorPicker = (0, react_1.memo)(function (_a) {
         var newRgb = _a.rgb;
         return updateGradient(tslib_1.__assign(tslib_1.__assign({}, gradientColorObj), (_b = {}, _b[currentColorSelected === utils_1.SELECTED_COLOR.FIRST_COLOR ? 'firstColor' : 'secondColor'] = (0, colors_1.RgbToHex)(newRgb), _b)), onChangeComplete);
     };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(form_control_1.FormControl, tslib_1.__assign({ className: "mb-2", overrides: LabelOverrides, label: locale.colorPicker.gradientDirection, layout: "vertical" }, { children: (0, jsx_runtime_1.jsxs)(radio_1.RadioGroup, tslib_1.__assign({ value: gradientType, onChange: handleGradientTypeChange, size: "medium" }, { children: [(0, jsx_runtime_1.jsx)(radio_1.Radio, tslib_1.__assign({ value: constants_1.GRADIENT_TYPE.LINEAR }, { children: constants_1.GRADIENT_TYPE.LINEAR })), (0, jsx_runtime_1.jsx)(radio_1.Radio, tslib_1.__assign({ value: constants_1.GRADIENT_TYPE.RADIAL }, { children: constants_1.GRADIENT_TYPE.RADIAL }))] })) })), (0, jsx_runtime_1.jsx)(form_control_1.FormControl, tslib_1.__assign({ className: "mb-4", overrides: LabelOverrides, label: locale.colorPicker.gradientDegree, layout: "vertical" }, { children: (0, jsx_runtime_1.jsx)(slider_1.Slider, { className: "py-1.5 px-2", disabled: gradientType === constants_1.GRADIENT_TYPE.RADIAL, value: degree, max: 360, onChange: handleDegreeChange, onFinalChange: handleDegreeChangeComplete }) })), (0, jsx_runtime_1.jsx)(form_control_1.FormControl, tslib_1.__assign({ className: "mb-4", overrides: LabelOverrides, label: locale.colorPicker.gradientEndPoints, layout: "vertical" }, { children: (0, jsx_runtime_1.jsx)(slider_1.Slider, { className: "py-1.5 px-2", value: endPoints, max: 100, onChange: handleEndPointsChange, onFinalChange: handleEndPointsChangeComplete }) })), (0, jsx_runtime_1.jsxs)(box_1.Box, tslib_1.__assign({ className: "flex justify-between items-center mb-3" }, { children: [(0, jsx_runtime_1.jsx)(box_1.Box, tslib_1.__assign({ className: "flex justify-center items-center" }, { children: (0, jsx_runtime_1.jsx)(Swatch_1.Swatch, { color: firstColor, className: "w-8 h-8", isSelected: currentColorSelected === utils_1.SELECTED_COLOR.FIRST_COLOR, onChange: function () { return setCurrentSelectedColor(utils_1.SELECTED_COLOR.FIRST_COLOR); }, "aria-label": locale.colorPicker.selectFirstColorAriaLabel }) })), (0, jsx_runtime_1.jsx)(box_1.Box, tslib_1.__assign({ className: "flex justify-center items-center" }, { children: (0, jsx_runtime_1.jsx)(Swatch_1.Swatch, { color: secondColor, className: "w-8 h-8", isSelected: currentColorSelected === utils_1.SELECTED_COLOR.SECOND_COLOR, onChange: function () { return setCurrentSelectedColor(utils_1.SELECTED_COLOR.SECOND_COLOR); }, "aria-label": locale.colorPicker.selectSecondColorAriaLabel }) }))] })), (0, jsx_runtime_1.jsx)(box_1.Box, { style: { background: (0, utils_1.getGradientColorString)(gradientColorObj) }, className: "mb-4 w-full h-6 rounded-48" }), (0, jsx_runtime_1.jsx)(CustomColorSelector_1.CustomColorSelector, { color: currentColorAsRgb, onChange: handleCustomColorChange, onChangeComplete: handleCustomColorChangeComplete, enableAlphaSelector: enableAlphaSelector })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(form_control_1.FormControl, tslib_1.__assign({ className: "mb-2", overrides: LabelOverrides, label: locale.colorPicker.gradientDirection, layout: "vertical" }, { children: (0, jsx_runtime_1.jsxs)(radio_1.RadioGroup, tslib_1.__assign({ value: gradientType, onChange: handleGradientTypeChange, size: "medium" }, { children: [(0, jsx_runtime_1.jsx)(radio_1.Radio, tslib_1.__assign({ value: constants_1.GRADIENT_TYPE.LINEAR }, { children: constants_1.GRADIENT_TYPE.LINEAR })), (0, jsx_runtime_1.jsx)(radio_1.Radio, tslib_1.__assign({ value: constants_1.GRADIENT_TYPE.RADIAL }, { children: constants_1.GRADIENT_TYPE.RADIAL }))] })) })), (0, jsx_runtime_1.jsx)(form_control_1.FormControl, tslib_1.__assign({ className: "mb-4", overrides: LabelOverrides, label: locale.colorPicker.gradientDegree, layout: "vertical" }, { children: (0, jsx_runtime_1.jsx)(slider_1.Slider, { className: "py-1.5 px-2", disabled: gradientType === constants_1.GRADIENT_TYPE.RADIAL, value: degree, max: 360, onChange: handleDegreeChange, onFinalChange: handleDegreeChangeComplete }) })), (0, jsx_runtime_1.jsx)(form_control_1.FormControl, tslib_1.__assign({ className: "mb-4", overrides: LabelOverrides, label: locale.colorPicker.gradientEndPoints, layout: "vertical" }, { children: (0, jsx_runtime_1.jsx)(slider_1.Slider, { className: "py-1.5 px-2", value: endPoints, max: 100, onChange: handleEndPointsChange, onFinalChange: handleEndPointsChangeComplete }) })), (0, jsx_runtime_1.jsxs)(box_1.Box, tslib_1.__assign({ className: "flex justify-between items-center mb-3", role: "radiogroup", "aria-label": locale.colorPicker.selectColorLabel, onKeyDown: function (event) { return (0, handleSwatchGroupKeyDown_1.handleSwatchGroupKeyDown)(event, direction); } }, { children: [(0, jsx_runtime_1.jsx)(box_1.Box, tslib_1.__assign({ className: "flex justify-center items-center" }, { children: (0, jsx_runtime_1.jsx)(Swatch_1.Swatch, { color: firstColor, className: "w-8 h-8", isSelected: currentColorSelected === utils_1.SELECTED_COLOR.FIRST_COLOR, onChange: function () { return setCurrentSelectedColor(utils_1.SELECTED_COLOR.FIRST_COLOR); }, "aria-label": locale.colorPicker.selectFirstColorAriaLabel }) })), (0, jsx_runtime_1.jsx)(box_1.Box, tslib_1.__assign({ className: "flex justify-center items-center" }, { children: (0, jsx_runtime_1.jsx)(Swatch_1.Swatch, { color: secondColor, className: "w-8 h-8", isSelected: currentColorSelected === utils_1.SELECTED_COLOR.SECOND_COLOR, onChange: function () { return setCurrentSelectedColor(utils_1.SELECTED_COLOR.SECOND_COLOR); }, "aria-label": locale.colorPicker.selectSecondColorAriaLabel }) }))] })), (0, jsx_runtime_1.jsx)(box_1.Box, { style: { background: (0, utils_1.getGradientColorString)(gradientColorObj) }, className: "mb-4 w-full h-6 rounded-48" }), (0, jsx_runtime_1.jsx)(CustomColorSelector_1.CustomColorSelector, { color: currentColorAsRgb, onChange: handleCustomColorChange, onChangeComplete: handleCustomColorChangeComplete, enableAlphaSelector: enableAlphaSelector })] }));
 });
 GradientColorPicker.displayName = 'GradientColorPicker';
 exports.default = GradientColorPicker;

package/color-picker/Swatch.d.ts

@@ -7,5 +7,7 @@ export type SwatchProps = {
     onChange: (color?: string) => void | (() => void);
     className?: ClassName;
     style?: Styles;
+    tabIndex?: number;
+    'aria-label'?: string;
 };
-export declare const Swatch: import("react").MemoExoticComponent<({ color, isSelected, onChange, className, ...props }: SwatchProps) => ReactElement>;
+export declare const Swatch: import("react").MemoExoticComponent<({ color, isSelected, onChange, className, tabIndex, "aria-label": ariaLabelProp, ...props }: SwatchProps) => ReactElement>;

package/color-picker/Swatch.js

@@ -8,18 +8,21 @@ var react_1 = require("react");
 var box_1 = require("../box");
 var transparentBackground_1 = tslib_1.__importDefault(require("../icon/components/transparentBackground"));
 var colors_1 = require("./colors");
+var locale_1 = require("../locale");
 exports.Swatch = (0, react_1.memo)(function (_a) {
-    var color = _a.color, isSelected = _a.isSelected, onChange = _a.onChange, className = _a.className, props = tslib_1.__rest(_a, ["color", "isSelected", "onChange", "className"]);
+    var color = _a.color, isSelected = _a.isSelected, onChange = _a.onChange, className = _a.className, tabIndex = _a.tabIndex, ariaLabelProp = _a["aria-label"], props = tslib_1.__rest(_a, ["color", "isSelected", "onChange", "className", "tabIndex", 'aria-label']);
+    var locale = (0, locale_1.useLocale)();
     var handleChange = (0, react_1.useCallback)(function () { return onChange(color); }, [color, onChange]);
+    var isReset = !color || color === colors_1.RESET_COLOR;
+    var ariaLabel = ariaLabelProp !== null && ariaLabelProp !== void 0 ? ariaLabelProp : (isReset ? locale.colorPicker.resetButtonLabel : color);
     var swatchInnerEl = (0, jsx_runtime_1.jsx)(box_1.Box, { className: "h-full w-full rounded-full", style: { backgroundColor: color } });
-    if (!color || color === colors_1.RESET_COLOR) {
-        // reset color
-        swatchInnerEl = (0, jsx_runtime_1.jsx)(transparentBackground_1.default, { size: 20 });
+    if (isReset) {
+        swatchInnerEl = (0, jsx_runtime_1.jsx)(transparentBackground_1.default, { size: 20, "aria-hidden": true });
     }
     return ((0, jsx_runtime_1.jsx)(base_button_1.BaseButton, tslib_1.__assign({ onClick: handleChange, "data-testid": "swatch-".concat(color), className: [
             'z-0 cursor-pointer h-5 w-5 rounded-full flex justify-center items-center p-px border-1 border-solid spr-border-primary hover:spr-border-quaternary',
             'focus-visible:outline-1 focus-visible:-outline-offset-1',
             isSelected ? 'spr-border-quinary' : '',
             className,
-        ], "aria-checked": isSelected, tabIndex: 0 }, props, { children: swatchInnerEl })));
+        ], role: "radio", "aria-checked": isSelected, "aria-label": ariaLabel, tabIndex: tabIndex !== null && tabIndex !== void 0 ? tabIndex : (isSelected ? 0 : -1) }, props, { children: swatchInnerEl })));
 });

package/color-picker/handleSwatchGroupKeyDown.d.ts

@@ -0,0 +1,7 @@
+import type { KeyboardEvent } from 'react';
+import type { Direction } from '@sprinklrjs/spaceweb-themes/types';
+/**
+ * APG radio pattern: one tab stop, arrows move focus and selection within the group.
+ * https://www.w3.org/WAI/ARIA/apg/patterns/radio/
+ */
+export declare const handleSwatchGroupKeyDown: (event: KeyboardEvent<HTMLElement>, direction?: Direction) => void;

package/color-picker/handleSwatchGroupKeyDown.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.handleSwatchGroupKeyDown = void 0;
+/** +1 for “next” in DOM order, −1 for “previous”; horizontal arrows flip in RTL (see tabs keyboard nav). */
+var getArrowDelta = function (key, direction) {
+    var horizontalStep = direction === 'rtl' ? -1 : 1;
+    switch (key) {
+        case 'ArrowUp':
+            return -1;
+        case 'ArrowDown':
+            return 1;
+        case 'ArrowLeft':
+            return -horizontalStep;
+        case 'ArrowRight':
+            return horizontalStep;
+        default:
+            return null;
+    }
+};
+/**
+ * APG radio pattern: one tab stop, arrows move focus and selection within the group.
+ * https://www.w3.org/WAI/ARIA/apg/patterns/radio/
+ */
+var handleSwatchGroupKeyDown = function (event, direction) {
+    if (direction === void 0) { direction = 'ltr'; }
+    var delta = getArrowDelta(event.key, direction);
+    if (delta === null) {
+        return;
+    }
+    var radios = Array.from(event.currentTarget.querySelectorAll('[role="radio"]'));
+    if (radios.length === 0) {
+        return;
+    }
+    var currentIndex = radios.findIndex(function (radio) { return radio === event.target || radio.contains(event.target); });
+    if (currentIndex === -1) {
+        return;
+    }
+    event.preventDefault();
+    var nextRadio = radios[(currentIndex + delta + radios.length) % radios.length];
+    nextRadio.focus();
+    nextRadio.click();
+};
+exports.handleSwatchGroupKeyDown = handleSwatchGroupKeyDown;

package/date-picker/DateInput.d.ts

@@ -13,9 +13,12 @@ type DateInputProps = {
     disabled?: boolean;
     size?: InputSize;
     formatString?: string;
+    id?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
 };
 /**
  * This component renders the Date dropdown inside the DatePicker Popover.
  */
-export declare const DateInput: React.MemoExoticComponent<({ dateHelpers, date, onChange, maxDate, minDate, disabled, size, formatString, }: DateInputProps) => JSX.Element>;
+export declare const DateInput: React.MemoExoticComponent<({ dateHelpers, date, onChange, maxDate, minDate, disabled, size, formatString, id, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, }: DateInputProps) => JSX.Element>;
 export {};

package/date-picker/DateInput.js

@@ -18,6 +18,7 @@ var InputFieldIcon_1 = require("./InputFieldIcon");
 var calendar_solid_1 = tslib_1.__importDefault(require("../icon/components/calendar-solid"));
 var utils_2 = require("../date-input/utils");
 var constants_1 = require("./constants");
+var locale_1 = require("../locale");
 var COMMON_STYLE = [
     'px-0 py-0 rounded-2 text-center tabular-nums',
     function (_a) {
@@ -79,8 +80,9 @@ exports.DateInput = React.memo(
 // eslint-disable-next-line max-statements -- works for functional component
 function (_a) {
     var _b, _c, _d, _e;
-    var dateHelpers = _a.dateHelpers, date = _a.date, onChange = _a.onChange, maxDate = _a.maxDate, minDate = _a.minDate, disabled = _a.disabled, size = _a.size, _f = _a.formatString, formatString = _f === void 0 ? constants_1.DEFAULT_FORMAT_STRING : _f;
+    var dateHelpers = _a.dateHelpers, date = _a.date, onChange = _a.onChange, maxDate = _a.maxDate, minDate = _a.minDate, disabled = _a.disabled, size = _a.size, _f = _a.formatString, formatString = _f === void 0 ? constants_1.DEFAULT_FORMAT_STRING : _f, id = _a.id, ariaLabelledBy = _a["aria-labelledby"], ariaDescribedBy = _a["aria-describedby"];
     var theme = (0, theme_1.useTheme)().theme;
+    var spacewebLocale = (0, locale_1.useLocale)();
     var _g = tslib_1.__read(React.useState(function () { return (date ? dateHelpers.formatDate(date, 'dd') : ''); }), 2), day = _g[0], setDay = _g[1];
     var _h = tslib_1.__read(React.useState(function () { return (date ? dateHelpers.formatDate(date, 'MM') : ''); }), 2), month = _h[0], setMonth = _h[1];
     var _j = tslib_1.__read(React.useState(function () { return (date ? dateHelpers.getYear(date) : ''); }), 2), year = _j[0], setYear = _j[1];
@@ -261,7 +263,7 @@ function (_a) {
     var inputSizeTheme = (0, themeHelpers_1.getComponentSizeTheme)(theme, 'input', size, defaultSize);
     var inputClasses = cvaConfigs_1.input$Size[size !== null && size !== void 0 ? size : defaultSize];
     var inputStyles = (0, styled_components_1.inputStyleVariables)({ theme: theme }, { $size: size });
-    return ((0, jsx_runtime_1.jsxs)(box_1.Box, tslib_1.__assign({ "data-testid": "date-input", className: [
+    return ((0, jsx_runtime_1.jsxs)(box_1.Box, tslib_1.__assign({ "data-testid": "date-input", role: "group", id: id, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, className: [
             'px-3 flex items-center border-1 border-solid border-box rounded-8',
             error ? 'spr-support-error-border' : 'spr-border-03',
             disabled ? 'spr-ui-02' : 'spr-ui-01',
@@ -281,10 +283,10 @@ function (_a) {
                 }
                 : {})),
         ], style: inputStyles }, { children: [(0, jsx_runtime_1.jsx)(InputFieldIcon_1.FieldIcon, { icon: calendar_solid_1.default, disabled: disabled }), (function (isDayFirst) {
-                var DayInputMask = ((0, jsx_runtime_1.jsx)(react_input_mask_1.default, tslib_1.__assign({ onBlur: dateBlur, onKeyDown: dateKeyDown, mask: "99", value: day, onChange: dayChange, maskChar: "_", disabled: disabled }, { children: function (props) { return ((0, jsx_runtime_1.jsx)(input_1.Input, tslib_1.__assign({}, props, { className: DATE_CLASSNAME, overrides: DATE_OVERRIDES, placeholder: "dd", size: "small", disabled: disabled }))); } })));
-                var MonthInputMask = ((0, jsx_runtime_1.jsx)(react_input_mask_1.default, tslib_1.__assign({ onBlur: monthBlur, onKeyDown: monthKeyDown, mask: "99", value: month, onChange: monthChange, maskChar: "_", disabled: disabled }, { children: function (props) { return ((0, jsx_runtime_1.jsx)(input_1.Input, tslib_1.__assign({}, props, { className: MONTH_CLASSNAME, style: MONTH_STYLE, overrides: MONTH_OVERRIDES, placeholder: "mm", size: "small", disabled: disabled }))); } })));
+                var DayInputMask = ((0, jsx_runtime_1.jsx)(react_input_mask_1.default, tslib_1.__assign({ onBlur: dateBlur, onKeyDown: dateKeyDown, mask: "99", value: day, onChange: dayChange, maskChar: "_", disabled: disabled }, { children: function (props) { return ((0, jsx_runtime_1.jsx)(input_1.Input, tslib_1.__assign({}, props, { className: DATE_CLASSNAME, overrides: DATE_OVERRIDES, placeholder: "dd", size: "small", disabled: disabled, "aria-label": spacewebLocale.calendar.dateInputDayAriaLabel }))); } })));
+                var MonthInputMask = ((0, jsx_runtime_1.jsx)(react_input_mask_1.default, tslib_1.__assign({ onBlur: monthBlur, onKeyDown: monthKeyDown, mask: "99", value: month, onChange: monthChange, maskChar: "_", disabled: disabled }, { children: function (props) { return ((0, jsx_runtime_1.jsx)(input_1.Input, tslib_1.__assign({}, props, { className: MONTH_CLASSNAME, style: MONTH_STYLE, overrides: MONTH_OVERRIDES, placeholder: "mm", size: "small", disabled: disabled, "aria-label": spacewebLocale.calendar.dateInputMonthAriaLabel }))); } })));
                 if (isDayFirst)
                     return [DayInputMask, '/', MonthInputMask];
                 return [MonthInputMask, '/', DayInputMask];
-            })((0, utils_2.isDDMM)(formatString)), "/", (0, jsx_runtime_1.jsx)(react_input_mask_1.default, tslib_1.__assign({ onBlur: yearBlur, onKeyDown: yearKeyDown, mask: "9999", value: year, onChange: yearChange, maskChar: "_", disabled: disabled }, { children: function (props) { return ((0, jsx_runtime_1.jsx)(input_1.Input, tslib_1.__assign({}, props, { className: YEAR_CLASSNAME, overrides: YEAR_OVERRIDES, placeholder: "yyyy", size: "small", disabled: disabled }))); } }))] })));
+            })((0, utils_2.isDDMM)(formatString)), "/", (0, jsx_runtime_1.jsx)(react_input_mask_1.default, tslib_1.__assign({ onBlur: yearBlur, onKeyDown: yearKeyDown, mask: "9999", value: year, onChange: yearChange, maskChar: "_", disabled: disabled }, { children: function (props) { return ((0, jsx_runtime_1.jsx)(input_1.Input, tslib_1.__assign({}, props, { className: YEAR_CLASSNAME, overrides: YEAR_OVERRIDES, placeholder: "yyyy", size: "small", disabled: disabled, "aria-label": spacewebLocale.calendar.dateInputYearAriaLabel }))); } }))] })));
 });

package/date-picker/TimeInput.d.ts

@@ -14,6 +14,11 @@ type TimeInputProps = {
     adapter: DateIOAdapter<Date>;
     getTimeRangesForDate?: GetTimeRangesForDate;
     size?: InputSize;
+    id?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+    'aria-errormessage'?: string;
+    required?: boolean;
 };
-export declare const TimeInput: ({ overrides, time, onChange, dateHelpers, minTime, maxTime, disabled, adapter, getTimeRangesForDate, size, }: TimeInputProps) => JSX.Element;
+export declare const TimeInput: ({ overrides, time, onChange, dateHelpers, minTime, maxTime, disabled, adapter, getTimeRangesForDate, size, id, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-errormessage": ariaErrorMessage, required, }: TimeInputProps) => JSX.Element;
 export {};

package/date-picker/TimeInput.js

@@ -12,7 +12,7 @@ var InputFieldIcon_1 = require("./InputFieldIcon");
 var MS_IN_5_MINUTES = 60 * 1000 * 5;
 var roundUpTime = function (minTime) { return new Date(Math.ceil(minTime.getTime() / MS_IN_5_MINUTES) * MS_IN_5_MINUTES); };
 var TimeInput = function (_a) {
-    var overrides = _a.overrides, time = _a.time, onChange = _a.onChange, dateHelpers = _a.dateHelpers, minTime = _a.minTime, maxTime = _a.maxTime, disabled = _a.disabled, adapter = _a.adapter, getTimeRangesForDate = _a.getTimeRangesForDate, size = _a.size;
+    var overrides = _a.overrides, time = _a.time, onChange = _a.onChange, dateHelpers = _a.dateHelpers, minTime = _a.minTime, maxTime = _a.maxTime, disabled = _a.disabled, adapter = _a.adapter, getTimeRangesForDate = _a.getTimeRangesForDate, size = _a.size, id = _a.id, ariaLabelledBy = _a["aria-labelledby"], ariaDescribedBy = _a["aria-describedby"], ariaErrorMessage = _a["aria-errormessage"], required = _a.required;
     var _b = tslib_1.__read((0, react_1.useState)(time), 2), value = _b[0], setValue = _b[1];
     var _c = tslib_1.__read((0, react_1.useState)(false), 2), error = _c[0], setError = _c[1];
     (0, react_1.useEffect)(function () {
@@ -75,6 +75,6 @@ var TimeInput = function (_a) {
     }, [error, value, overrides, time, minTime, maxTime, dateHelpers]);
     var _d = tslib_1.__read((0, overrides_1.useOverrides)(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.TimePicker, time_picker_1.TimePicker), 2), TimePicker = _d[0], timeSelectProps = _d[1];
     var timeRanges = (0, react_1.useMemo)(function () { return (time ? getTimeRangesForDate === null || getTimeRangesForDate === void 0 ? void 0 : getTimeRangesForDate(time) : undefined); }, [time, getTimeRangesForDate]);
-    return ((0, jsx_runtime_1.jsx)(TimePicker, tslib_1.__assign({ adapter: adapter, value: value, onChange: handleChange, creatable: true, clearable: true, disabled: disabled, minTime: minTime && dateHelpers.isSameDay(value, minTime) ? roundUpTime(minTime) : undefined, maxTime: dateHelpers.isSameDay(value, maxTime) ? maxTime : undefined, timeRanges: timeRanges, size: size }, timeSelectProps)));
+    return ((0, jsx_runtime_1.jsx)(TimePicker, tslib_1.__assign({ adapter: adapter, value: value, onChange: handleChange, creatable: true, clearable: true, disabled: disabled, minTime: minTime && dateHelpers.isSameDay(value, minTime) ? roundUpTime(minTime) : undefined, maxTime: dateHelpers.isSameDay(value, maxTime) ? maxTime : undefined, timeRanges: timeRanges, size: size, id: id, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-errormessage": ariaErrorMessage, required: required }, timeSelectProps)));
 };
 exports.TimeInput = TimeInput;

package/esm/baseui/timepicker/timepicker.js

@@ -45,7 +45,7 @@ var TimePicker = /** @class */ (function (_super) {
     __extends(TimePicker, _super);
     function TimePicker(props) {
         var _this = _super.call(this, props) || this;
-        // @ts-ignore
+        // @ts-ignore -- legacy baseui code
         _this.state = { steps: [], value: null };
         _this.onChange = function (params) {
             _this.setState({ value: params.value[0] });
@@ -166,9 +166,9 @@ var TimePicker = /** @class */ (function (_super) {
             var maxDate = _this.props.adapter.toJsDate(max);
             var midnightDate = _this.props.adapter.toJsDate(dayStart);
             return {
-                // @ts-expect-error todo(flow->ts)
+                // @ts-expect-error todo(flow->ts) -- legacy code from base ui
                 start: (minDate - midnightDate) / 1000,
-                // @ts-expect-error todo(flow->ts)
+                // @ts-expect-error todo(flow->ts) -- legacy code from base ui
                 end: (maxDate - midnightDate) / 1000,
             };
         };
@@ -295,12 +295,12 @@ var TimePicker = /** @class */ (function (_super) {
                     ? _this.buildSelectedOption(_this.props.value, _this.props.format, langCode)
                     : _this.state.value;
                 var ariaLabel = format === '12' ? timeRangePicker.timePickerAriaLabel12Hour : timeRangePicker.timePickerAriaLabel24Hour;
-                return (_jsx(OverriddenSelect, __assign({ "aria-label": ariaLabel, disabled: _this.props.disabled, error: _this.props.error, positive: _this.props.positive, size: _this.props.size, placeholder: _this.props.placeholder || defaultPlaceholder, options: _this.state.steps.map(function (n) { return ({
+                return (_jsx(OverriddenSelect, __assign({ disabled: _this.props.disabled, error: _this.props.error, positive: _this.props.positive, size: _this.props.size, placeholder: _this.props.placeholder || defaultPlaceholder, options: _this.state.steps.map(function (n) { return ({
                         id: n,
                         label: _this.secondsToLabel(n, _this.props.format, langCode),
                     }); }), filterOptions: _this.props.creatable ? _this.creatableFilterOptions : undefined, onChange: _this.onChange, 
                     // if value is defined, it should be an array type
-                    value: value ? [value] : value, clearable: false, backspaceRemoves: false, valueKey: "label" }, selectProps)));
+                    value: value ? [value] : value, clearable: false, backspaceRemoves: false, valueKey: "label" }, selectProps, { "aria-label": _this.props['aria-labelledby'] ? undefined : ariaLabel, "aria-labelledby": _this.props['aria-labelledby'], "aria-describedby": _this.props['aria-describedby'], "aria-errormessage": _this.props['aria-errormessage'], required: _this.props.required, id: _this.props.id })));
             } }));
     };
     TimePicker.defaultProps = {

package/esm/baseui/timepicker/types.d.ts

@@ -40,6 +40,11 @@ export type TimePickerProps<T = Date> = {
      * By default the component will clamp the time window and setting this flag will ignore dates.
      */
     ignoreMinMaxDateComponent?: boolean;
+    id?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+    'aria-errormessage'?: string;
+    required?: boolean;
 };
 export type TimePickerState = {
     /** List of times (in seconds) displayed in the dropdown menu. */

package/esm/color-picker/ColorPalette.js

@@ -6,13 +6,19 @@ import { Grid } from '../grid';
 import { Swatch as DefaultSwatch } from './Swatch';
 import { useLocale } from '../locale';
 import { useOverrides } from '../overrides';
+import { useTheme } from '../theme';
 import { COLOR_PALETTE, SPRINKLR_PRESET_COLORS, RESET_COLOR } from './colors';
+import { handleSwatchGroupKeyDown } from './handleSwatchGroupKeyDown';
 import { SWATCHES_PER_ROW } from './constants';
 import { Typography } from '../typography';
 var defaultColorPalette = COLOR_PALETTE.flat();
+var getSwatchTabIndex = function (isSelected, index, hasGroupSelection) {
+    return isSelected || (!hasGroupSelection && index === 0) ? 0 : -1;
+};
 export var ColorPalette = memo(function (_a) {
     var selectedColor = _a.color, overrides = _a.overrides, onChange = _a.onChange, _colorPalette = _a.colorPalette, _presets = _a.presets, noReset = _a.noReset;
     var locale = useLocale();
+    var direction = useTheme().direction;
     var presets = useMemo(function () {
         var defaultPreset = {
             label: locale.colorPicker.sprinklrPresets,
@@ -21,10 +27,21 @@ export var ColorPalette = memo(function (_a) {
         return typeof _presets === 'function' ? _presets(defaultPreset) : _presets !== null && _presets !== void 0 ? _presets : [defaultPreset];
     }, [_presets, noReset, locale.colorPicker]);
     var colorPalette = _colorPalette !== null && _colorPalette !== void 0 ? _colorPalette : defaultColorPalette;
+    var hasPaletteSelection = colorPalette.some(function (paletteColor) { return selectedColor === paletteColor; });
     var _b = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Swatches, Grid), 2), Swatches = _b[0], swatchesProps = _b[1];
     var _c = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Swatch, DefaultSwatch), 2), Swatch = _c[0], swatchProps = _c[1];
-    return (_jsxs(Box, __assign({ className: "min-h-40" }, { children: [presets.map(function (preset, _index) {
+    return (_jsxs(Box, __assign({ className: "min-h-40" }, { children: [presets.map(function (preset) {
                 var _a;
-                return ((_a = preset.colors) === null || _a === void 0 ? void 0 : _a.length) ? (_jsxs(Fragment, { children: [_jsx(Typography, __assign({ className: "spr-text-primary", variant: "body-md", weight: "semibold" }, { children: preset.label })), _jsx(Swatches, __assign({ className: "mb-4 mt-2", cols: SWATCHES_PER_ROW, colGap: 1, rowGap: 1 }, swatchesProps, { children: preset.colors.map(function (color) { return (_jsx(Swatch, __assign({ color: color, onChange: onChange, isSelected: selectedColor === color || (!selectedColor && color === RESET_COLOR) }, swatchProps, { className: ['w-6 h-6', swatchProps === null || swatchProps === void 0 ? void 0 : swatchProps.className] }), color)); }) }))] }, preset.label)) : null;
-            }), (colorPalette === null || colorPalette === void 0 ? void 0 : colorPalette.length) ? (_jsx(Swatches, __assign({ cols: SWATCHES_PER_ROW, colGap: 1, rowGap: 1 }, swatchesProps, { children: colorPalette.map(function (color) { return (_jsx(Swatch, __assign({ color: color, overrides: overrides, onChange: onChange, isSelected: selectedColor === color }, swatchProps, { className: ['w-6 h-6', swatchProps === null || swatchProps === void 0 ? void 0 : swatchProps.className] }), color)); }) }))) : null] })));
+                if (!((_a = preset.colors) === null || _a === void 0 ? void 0 : _a.length)) {
+                    return null;
+                }
+                var hasPresetSelection = preset.colors.some(function (presetColor) { return selectedColor === presetColor || (!selectedColor && presetColor === RESET_COLOR); });
+                return (_jsxs(Fragment, { children: [_jsx(Typography, __assign({ className: "spr-text-primary", variant: "body-md", weight: "semibold" }, { children: preset.label })), _jsx(Swatches, __assign({ className: "mb-4 mt-2", cols: SWATCHES_PER_ROW, colGap: 1, rowGap: 1, role: "radiogroup", "aria-label": preset.label, onKeyDown: function (event) { return handleSwatchGroupKeyDown(event, direction); } }, swatchesProps, { children: preset.colors.map(function (color, index) {
+                                var isSelected = selectedColor === color || (!selectedColor && color === RESET_COLOR);
+                                return (_jsx(Swatch, __assign({ color: color, onChange: onChange, isSelected: isSelected, tabIndex: getSwatchTabIndex(isSelected, index, hasPresetSelection), className: ['w-6 h-6', swatchProps === null || swatchProps === void 0 ? void 0 : swatchProps.className] }, swatchProps), color));
+                            }) }))] }, preset.label));
+            }), (colorPalette === null || colorPalette === void 0 ? void 0 : colorPalette.length) ? (_jsx(Swatches, __assign({ cols: SWATCHES_PER_ROW, colGap: 1, rowGap: 1, role: "radiogroup", "aria-label": locale.colorPicker.colorLibraryLabel, onKeyDown: function (event) { return handleSwatchGroupKeyDown(event, direction); } }, swatchesProps, { children: colorPalette.map(function (color, index) {
+                    var isSelected = selectedColor === color;
+                    return (_jsx(Swatch, __assign({ color: color, overrides: overrides, onChange: onChange, isSelected: isSelected, tabIndex: getSwatchTabIndex(isSelected, index, hasPaletteSelection), className: ['w-6 h-6', swatchProps === null || swatchProps === void 0 ? void 0 : swatchProps.className] }, swatchProps), color));
+                }) }))) : null] })));
 });

package/esm/color-picker/GradientColorPicker.js

@@ -10,12 +10,15 @@ import { CustomColorSelector } from './CustomColorSelector';
 import { Swatch } from './Swatch';
 import { GRADIENT_TYPE } from './constants';
 import { useLocale } from '../locale';
+import { useTheme } from '../theme';
 import { extractColorsFromGradient, getGradientColorString, SELECTED_COLOR } from './utils';
+import { handleSwatchGroupKeyDown } from './handleSwatchGroupKeyDown';
 import { hexToRgb, RgbToHex } from '../helpers/colors';
 var LabelOverrides = { Label: { className: 'spr-text-primary font-600 text-16 leading-150' } };
 var GradientColorPicker = memo(function (_a) {
     var color = _a.color, _b = _a.onChange, onChange = _b === void 0 ? _noop : _b, _c = _a.onChangeComplete, onChangeComplete = _c === void 0 ? _noop : _c, _d = _a.enableAlphaSelector, enableAlphaSelector = _d === void 0 ? false : _d;
     var locale = useLocale();
+    var direction = useTheme().direction;
     var _e = __read(useState(function () {
         var gradientColorData = extractColorsFromGradient(color);
         return (gradientColorData !== null && gradientColorData !== void 0 ? gradientColorData : {
@@ -70,7 +73,7 @@ var GradientColorPicker = memo(function (_a) {
         var newRgb = _a.rgb;
         return updateGradient(__assign(__assign({}, gradientColorObj), (_b = {}, _b[currentColorSelected === SELECTED_COLOR.FIRST_COLOR ? 'firstColor' : 'secondColor'] = RgbToHex(newRgb), _b)), onChangeComplete);
     };
-    return (_jsxs(_Fragment, { children: [_jsx(FormControl, __assign({ className: "mb-2", overrides: LabelOverrides, label: locale.colorPicker.gradientDirection, layout: "vertical" }, { children: _jsxs(RadioGroup, __assign({ value: gradientType, onChange: handleGradientTypeChange, size: "medium" }, { children: [_jsx(Radio, __assign({ value: GRADIENT_TYPE.LINEAR }, { children: GRADIENT_TYPE.LINEAR })), _jsx(Radio, __assign({ value: GRADIENT_TYPE.RADIAL }, { children: GRADIENT_TYPE.RADIAL }))] })) })), _jsx(FormControl, __assign({ className: "mb-4", overrides: LabelOverrides, label: locale.colorPicker.gradientDegree, layout: "vertical" }, { children: _jsx(Slider, { className: "py-1.5 px-2", disabled: gradientType === GRADIENT_TYPE.RADIAL, value: degree, max: 360, onChange: handleDegreeChange, onFinalChange: handleDegreeChangeComplete }) })), _jsx(FormControl, __assign({ className: "mb-4", overrides: LabelOverrides, label: locale.colorPicker.gradientEndPoints, layout: "vertical" }, { children: _jsx(Slider, { className: "py-1.5 px-2", value: endPoints, max: 100, onChange: handleEndPointsChange, onFinalChange: handleEndPointsChangeComplete }) })), _jsxs(Box, __assign({ className: "flex justify-between items-center mb-3" }, { children: [_jsx(Box, __assign({ className: "flex justify-center items-center" }, { children: _jsx(Swatch, { color: firstColor, className: "w-8 h-8", isSelected: currentColorSelected === SELECTED_COLOR.FIRST_COLOR, onChange: function () { return setCurrentSelectedColor(SELECTED_COLOR.FIRST_COLOR); }, "aria-label": locale.colorPicker.selectFirstColorAriaLabel }) })), _jsx(Box, __assign({ className: "flex justify-center items-center" }, { children: _jsx(Swatch, { color: secondColor, className: "w-8 h-8", isSelected: currentColorSelected === SELECTED_COLOR.SECOND_COLOR, onChange: function () { return setCurrentSelectedColor(SELECTED_COLOR.SECOND_COLOR); }, "aria-label": locale.colorPicker.selectSecondColorAriaLabel }) }))] })), _jsx(Box, { style: { background: getGradientColorString(gradientColorObj) }, className: "mb-4 w-full h-6 rounded-48" }), _jsx(CustomColorSelector, { color: currentColorAsRgb, onChange: handleCustomColorChange, onChangeComplete: handleCustomColorChangeComplete, enableAlphaSelector: enableAlphaSelector })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(FormControl, __assign({ className: "mb-2", overrides: LabelOverrides, label: locale.colorPicker.gradientDirection, layout: "vertical" }, { children: _jsxs(RadioGroup, __assign({ value: gradientType, onChange: handleGradientTypeChange, size: "medium" }, { children: [_jsx(Radio, __assign({ value: GRADIENT_TYPE.LINEAR }, { children: GRADIENT_TYPE.LINEAR })), _jsx(Radio, __assign({ value: GRADIENT_TYPE.RADIAL }, { children: GRADIENT_TYPE.RADIAL }))] })) })), _jsx(FormControl, __assign({ className: "mb-4", overrides: LabelOverrides, label: locale.colorPicker.gradientDegree, layout: "vertical" }, { children: _jsx(Slider, { className: "py-1.5 px-2", disabled: gradientType === GRADIENT_TYPE.RADIAL, value: degree, max: 360, onChange: handleDegreeChange, onFinalChange: handleDegreeChangeComplete }) })), _jsx(FormControl, __assign({ className: "mb-4", overrides: LabelOverrides, label: locale.colorPicker.gradientEndPoints, layout: "vertical" }, { children: _jsx(Slider, { className: "py-1.5 px-2", value: endPoints, max: 100, onChange: handleEndPointsChange, onFinalChange: handleEndPointsChangeComplete }) })), _jsxs(Box, __assign({ className: "flex justify-between items-center mb-3", role: "radiogroup", "aria-label": locale.colorPicker.selectColorLabel, onKeyDown: function (event) { return handleSwatchGroupKeyDown(event, direction); } }, { children: [_jsx(Box, __assign({ className: "flex justify-center items-center" }, { children: _jsx(Swatch, { color: firstColor, className: "w-8 h-8", isSelected: currentColorSelected === SELECTED_COLOR.FIRST_COLOR, onChange: function () { return setCurrentSelectedColor(SELECTED_COLOR.FIRST_COLOR); }, "aria-label": locale.colorPicker.selectFirstColorAriaLabel }) })), _jsx(Box, __assign({ className: "flex justify-center items-center" }, { children: _jsx(Swatch, { color: secondColor, className: "w-8 h-8", isSelected: currentColorSelected === SELECTED_COLOR.SECOND_COLOR, onChange: function () { return setCurrentSelectedColor(SELECTED_COLOR.SECOND_COLOR); }, "aria-label": locale.colorPicker.selectSecondColorAriaLabel }) }))] })), _jsx(Box, { style: { background: getGradientColorString(gradientColorObj) }, className: "mb-4 w-full h-6 rounded-48" }), _jsx(CustomColorSelector, { color: currentColorAsRgb, onChange: handleCustomColorChange, onChangeComplete: handleCustomColorChangeComplete, enableAlphaSelector: enableAlphaSelector })] }));
 });
 GradientColorPicker.displayName = 'GradientColorPicker';
 export default GradientColorPicker;

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

@@ -7,5 +7,7 @@ export type SwatchProps = {
     onChange: (color?: string) => void | (() => void);
     className?: ClassName;
     style?: Styles;
+    tabIndex?: number;
+    'aria-label'?: string;
 };
-export declare const Swatch: import("react").MemoExoticComponent<({ color, isSelected, onChange, className, ...props }: SwatchProps) => ReactElement>;
+export declare const Swatch: import("react").MemoExoticComponent<({ color, isSelected, onChange, className, tabIndex, "aria-label": ariaLabelProp, ...props }: SwatchProps) => ReactElement>;

package/esm/color-picker/Swatch.js

@@ -5,18 +5,21 @@ import { memo, useCallback } from 'react';
 import { Box } from '../box';
 import TransparentBackgroundIcon from '../icon/components/transparentBackground';
 import { RESET_COLOR } from './colors';
+import { useLocale } from '../locale';
 export var Swatch = memo(function (_a) {
-    var color = _a.color, isSelected = _a.isSelected, onChange = _a.onChange, className = _a.className, props = __rest(_a, ["color", "isSelected", "onChange", "className"]);
+    var color = _a.color, isSelected = _a.isSelected, onChange = _a.onChange, className = _a.className, tabIndex = _a.tabIndex, ariaLabelProp = _a["aria-label"], props = __rest(_a, ["color", "isSelected", "onChange", "className", "tabIndex", 'aria-label']);
+    var locale = useLocale();
     var handleChange = useCallback(function () { return onChange(color); }, [color, onChange]);
+    var isReset = !color || color === RESET_COLOR;
+    var ariaLabel = ariaLabelProp !== null && ariaLabelProp !== void 0 ? ariaLabelProp : (isReset ? locale.colorPicker.resetButtonLabel : color);
     var swatchInnerEl = _jsx(Box, { className: "h-full w-full rounded-full", style: { backgroundColor: color } });
-    if (!color || color === RESET_COLOR) {
-        // reset color
-        swatchInnerEl = _jsx(TransparentBackgroundIcon, { size: 20 });
+    if (isReset) {
+        swatchInnerEl = _jsx(TransparentBackgroundIcon, { size: 20, "aria-hidden": true });
     }
     return (_jsx(BaseButton, __assign({ onClick: handleChange, "data-testid": "swatch-".concat(color), className: [
             'z-0 cursor-pointer h-5 w-5 rounded-full flex justify-center items-center p-px border-1 border-solid spr-border-primary hover:spr-border-quaternary',
             'focus-visible:outline-1 focus-visible:-outline-offset-1',
             isSelected ? 'spr-border-quinary' : '',
             className,
-        ], "aria-checked": isSelected, tabIndex: 0 }, props, { children: swatchInnerEl })));
+        ], role: "radio", "aria-checked": isSelected, "aria-label": ariaLabel, tabIndex: tabIndex !== null && tabIndex !== void 0 ? tabIndex : (isSelected ? 0 : -1) }, props, { children: swatchInnerEl })));
 });

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

@@ -0,0 +1,7 @@
+import type { KeyboardEvent } from 'react';
+import type { Direction } from '@sprinklrjs/spaceweb-themes/types';
+/**
+ * APG radio pattern: one tab stop, arrows move focus and selection within the group.
+ * https://www.w3.org/WAI/ARIA/apg/patterns/radio/
+ */
+export declare const handleSwatchGroupKeyDown: (event: KeyboardEvent<HTMLElement>, direction?: Direction) => void;

package/esm/color-picker/handleSwatchGroupKeyDown.js

@@ -0,0 +1,39 @@
+/** +1 for “next” in DOM order, −1 for “previous”; horizontal arrows flip in RTL (see tabs keyboard nav). */
+var getArrowDelta = function (key, direction) {
+    var horizontalStep = direction === 'rtl' ? -1 : 1;
+    switch (key) {
+        case 'ArrowUp':
+            return -1;
+        case 'ArrowDown':
+            return 1;
+        case 'ArrowLeft':
+            return -horizontalStep;
+        case 'ArrowRight':
+            return horizontalStep;
+        default:
+            return null;
+    }
+};
+/**
+ * APG radio pattern: one tab stop, arrows move focus and selection within the group.
+ * https://www.w3.org/WAI/ARIA/apg/patterns/radio/
+ */
+export var handleSwatchGroupKeyDown = function (event, direction) {
+    if (direction === void 0) { direction = 'ltr'; }
+    var delta = getArrowDelta(event.key, direction);
+    if (delta === null) {
+        return;
+    }
+    var radios = Array.from(event.currentTarget.querySelectorAll('[role="radio"]'));
+    if (radios.length === 0) {
+        return;
+    }
+    var currentIndex = radios.findIndex(function (radio) { return radio === event.target || radio.contains(event.target); });
+    if (currentIndex === -1) {
+        return;
+    }
+    event.preventDefault();
+    var nextRadio = radios[(currentIndex + delta + radios.length) % radios.length];
+    nextRadio.focus();
+    nextRadio.click();
+};

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

@@ -13,9 +13,12 @@ type DateInputProps = {
     disabled?: boolean;
     size?: InputSize;
     formatString?: string;
+    id?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
 };
 /**
  * This component renders the Date dropdown inside the DatePicker Popover.
  */
-export declare const DateInput: React.MemoExoticComponent<({ dateHelpers, date, onChange, maxDate, minDate, disabled, size, formatString, }: DateInputProps) => JSX.Element>;
+export declare const DateInput: React.MemoExoticComponent<({ dateHelpers, date, onChange, maxDate, minDate, disabled, size, formatString, id, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, }: DateInputProps) => JSX.Element>;
 export {};