@sprinklrjs/spaceweb 14.13.2 → 14.14.1

package/select/selectMenuAdapter/hooks/useRootSelectAllKeyboardNav.js

@@ -0,0 +1,117 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRootSelectAllKeyboardNav = void 0;
+var tslib_1 = require("tslib");
+var react_1 = require("react");
+var helpers_1 = require("../../../menu/helpers");
+var stopKeyboardEvent = function (event) {
+    event.preventDefault();
+    event.stopPropagation();
+};
+var isFirstHighlightableInMenu = function (menu, highlightedItem) {
+    return (0, helpers_1.getNextItemIndexToHighlight)(highlightedItem, menu, helpers_1.prevItem) === highlightedItem;
+};
+var isFirstMenuItemHighlighted = function (menu, isFirstItemHighlighted) {
+    var highlightedMenuItem = menu === null || menu === void 0 ? void 0 : menu.querySelector('[data-highlighted="true"]');
+    if (menu && highlightedMenuItem && (0, helpers_1.canHighlightItem)(highlightedMenuItem)) {
+        return isFirstHighlightableInMenu(menu, highlightedMenuItem);
+    }
+    return isFirstItemHighlighted.current;
+};
+var useRootSelectAllKeyboardNav = function (_a) {
+    var menuRef = _a.menuRef, selectAllItem = _a.selectAllItem, ownerDocument = _a.ownerDocument, expandedGroupId = _a.expandedGroupId, setExpandedGroupId = _a.setExpandedGroupId, groupConfig = _a.groupConfig, onItemSelect = _a.onItemSelect, inputElement = _a.inputElement, isFirstItemHighlighted = _a.isFirstItemHighlighted;
+    var selectAllItemRef = (0, react_1.useRef)(null);
+    var _b = tslib_1.__read((0, react_1.useState)(!!selectAllItem), 2), isRootSelectAllHighlighted = _b[0], setIsRootSelectAllHighlighted = _b[1];
+    var clearMenuHighlight = (0, react_1.useCallback)(function () {
+        var _a, _b;
+        var menu = menuRef.current;
+        if (!menu)
+            return;
+        (_a = menu.turnOffKeyboardNavigation) === null || _a === void 0 ? void 0 : _a.call(menu);
+        (_b = menu.setHighlightedItem) === null || _b === void 0 ? void 0 : _b.call(menu, null);
+    }, [menuRef]);
+    var highlightFirstMenuItem = (0, react_1.useCallback)(function () {
+        var _a, _b;
+        var menu = menuRef.current;
+        if (!menu)
+            return;
+        (_a = menu.turnOnKeyboardNavigation) === null || _a === void 0 ? void 0 : _a.call(menu);
+        var firstHighlightableItem = (0, helpers_1.getFirstHighlightableElement)(menu).firstHighlightableItem;
+        var itemToHighlight = firstHighlightableItem;
+        (_b = menu.setHighlightedItem) === null || _b === void 0 ? void 0 : _b.call(menu, itemToHighlight);
+    }, [menuRef]);
+    var highlightRootSelectAll = (0, react_1.useCallback)(function () {
+        clearMenuHighlight();
+        setIsRootSelectAllHighlighted(true);
+    }, [clearMenuHighlight]);
+    var leaveRootSelectAllHighlight = (0, react_1.useCallback)(function () {
+        var _a, _b;
+        setIsRootSelectAllHighlighted(false);
+        (_b = (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.turnOnKeyboardNavigation) === null || _b === void 0 ? void 0 : _b.call(_a);
+    }, [menuRef]);
+    (0, react_1.useEffect)(function () {
+        if (!selectAllItem || !ownerDocument)
+            return undefined;
+        var captureKeydownHandler = function (event) {
+            var _a;
+            if (isRootSelectAllHighlighted && event.key === 'ArrowDown' && !event.shiftKey) {
+                stopKeyboardEvent(event);
+                leaveRootSelectAllHighlight();
+                var firstGroupId = (_a = groupConfig[0]) === null || _a === void 0 ? void 0 : _a.id;
+                if (firstGroupId && expandedGroupId !== firstGroupId) {
+                    setExpandedGroupId(firstGroupId);
+                }
+                highlightFirstMenuItem();
+                return;
+            }
+            var expandedGroupIndex = groupConfig.findIndex(function (group) { return group.id === expandedGroupId; });
+            if (event.key === 'ArrowUp' &&
+                !event.shiftKey &&
+                expandedGroupIndex === 0 &&
+                isFirstMenuItemHighlighted(menuRef.current, isFirstItemHighlighted)) {
+                stopKeyboardEvent(event);
+                highlightRootSelectAll();
+                return;
+            }
+            if (isRootSelectAllHighlighted && event.key === 'Enter' && event.keyCode !== 229) {
+                stopKeyboardEvent(event);
+                onItemSelect === null || onItemSelect === void 0 ? void 0 : onItemSelect({ item: selectAllItem, event: event });
+            }
+        };
+        ownerDocument.body.addEventListener('keydown', captureKeydownHandler, { capture: true });
+        return function () {
+            ownerDocument.body.removeEventListener('keydown', captureKeydownHandler, { capture: true });
+        };
+    }, [
+        menuRef,
+        ownerDocument,
+        selectAllItem,
+        expandedGroupId,
+        groupConfig,
+        isRootSelectAllHighlighted,
+        setExpandedGroupId,
+        onItemSelect,
+        highlightRootSelectAll,
+        highlightFirstMenuItem,
+        leaveRootSelectAllHighlight,
+        isFirstItemHighlighted,
+    ]);
+    (0, react_1.useEffect)(function () {
+        var _a;
+        var selectAllItemId = (_a = selectAllItemRef.current) === null || _a === void 0 ? void 0 : _a.id;
+        if (!isRootSelectAllHighlighted || !inputElement || !selectAllItemId)
+            return undefined;
+        inputElement.setAttribute('aria-activedescendant', selectAllItemId);
+        return function () {
+            if (inputElement.getAttribute('aria-activedescendant') === selectAllItemId) {
+                inputElement.removeAttribute('aria-activedescendant');
+            }
+        };
+    }, [isRootSelectAllHighlighted, inputElement]);
+    return {
+        selectAllItemRef: selectAllItemRef,
+        isRootSelectAllHighlighted: isRootSelectAllHighlighted,
+        leaveRootSelectAllHighlight: leaveRootSelectAllHighlight,
+    };
+};
+exports.useRootSelectAllKeyboardNav = useRootSelectAllKeyboardNav;

package/select/types.d.ts

@@ -130,6 +130,7 @@ export type MultiValueProps = Omit<TagProps, 'overrides'> & SharedProps & {
     $isContainerFocused?: boolean;
     $valueByIdMap: Record<string, Option>;
     $valueKey: string;
+    ariaLabel?: string;
     value: Option;
     removeValue: RemoveValue;
     selectSize: Size;

package/snackbar/constants.js

@@ -2,15 +2,15 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TYPE_TO_HIDE_DURATION = exports.INTENT_TO_ROLE = exports.INTENT_TO_ICON = exports.TRANSITION_DURATION = void 0;
 var tslib_1 = require("tslib");
-var alert_solid_1 = tslib_1.__importDefault(require("../icon/components/alert-solid"));
-var warning_solid_1 = tslib_1.__importDefault(require("../icon/components/warning-solid"));
+var error_solid_1 = tslib_1.__importDefault(require("../icon/components/error-solid"));
+var warning_clr_1 = tslib_1.__importDefault(require("../icon/components/warning-clr"));
 var tickCircle_solid_1 = tslib_1.__importDefault(require("../icon/components/tickCircle-solid"));
 var delete_solid_1 = tslib_1.__importDefault(require("../icon/components/delete-solid"));
 exports.TRANSITION_DURATION = 1000;
 exports.INTENT_TO_ICON = {
     success: tickCircle_solid_1.default,
-    error: alert_solid_1.default,
-    warning: warning_solid_1.default,
+    error: error_solid_1.default,
+    warning: warning_clr_1.default,
     delete: delete_solid_1.default,
 };
 exports.INTENT_TO_ROLE = {

package/time-range-picker/RangeSelectorContainer.js

@@ -12,7 +12,7 @@ var button_1 = require("../button");
 var styled_component_1 = require("./styled-component");
 var stack_1 = require("../stack");
 var TimezonePicker_1 = tslib_1.__importDefault(require("./TimezonePicker"));
-var error_1 = tslib_1.__importDefault(require("../icon/components/error"));
+var error_solid_1 = tslib_1.__importDefault(require("../icon/components/error-solid"));
 var styled_components_1 = require("../date-picker/styled-components");
 var locale_1 = require("../locale");
 var utils_1 = require("./utils");
@@ -110,15 +110,13 @@ var RangeSelectorContainer = function (_a) {
     }, [timeRange, preset, timezone, onSubmit, disableTimezone]);
     // show error message only when it is present, hasError can be true when user has not selected any date,
     // but we are showing any error message for that scenario.
-    var errorEl = errMsg ? ((0, jsx_runtime_1.jsxs)(stack_1.Stack, tslib_1.__assign({ direction: "horizontal", gap: 1, className: (0, classNames_1.default)('mr-1', { 'items-center': monthsShown !== 1 }), shrink: true }, { children: [(0, jsx_runtime_1.jsx)(error_1.default, { size: 14, className: "block", style: function (_a) {
+    var errorEl = errMsg ? ((0, jsx_runtime_1.jsxs)(stack_1.Stack, tslib_1.__assign({ direction: "horizontal", gap: 1, className: (0, classNames_1.default)('mr-1', { 'items-center': monthsShown !== 1 }), shrink: true }, { children: [(0, jsx_runtime_1.jsx)(error_solid_1.default, { size: 14, className: "block", style: function (_a) {
                     var theme = _a.theme;
                     return ({
                         fill: theme.spr.clrRed,
                     });
                 } }), (0, jsx_runtime_1.jsx)(typography_1.Typography, tslib_1.__assign({ className: "my-0", variant: "bs3" }, { children: errMsg }))] }))) : null;
-    return ((0, jsx_runtime_1.jsxs)(box_1.Box, tslib_1.__assign({ className: "spr-ui-01 rounded-8" }, { children: [(0, jsx_runtime_1.jsxs)(Header, tslib_1.__assign({ "$setTimezone": setTimezone, "$onClose": props.onClose }, headerProps, { children: [(0, jsx_runtime_1.jsx)(HeaderBeforeEnhancer, tslib_1.__assign({ variant: "heading-7", "$as": "span", className: "flex items-center" }, headerBeforeEnhancerProps, { children: locale.timeRangePicker.headerLabel })), disableTimezone ? null : ((0, jsx_runtime_1.jsx)(TimezonePicker, tslib_1.__assign({ setTimezone: setTimezone, timezone: timezone, timezoneOptions: timezoneOptions }, timezonePickerProps, { className: ['w-0 grow max-w-md', timezonePickerProps === null || timezonePickerProps === void 0 ? void 0 : timezonePickerProps.className] })))] })), (0, jsx_runtime_1.jsx)(RangeSelector, tslib_1.__assign({ overrides: props.overrides, timeSelect: props.timeSelect, timeRangePresets: timeRangePresets, timezone: timezone, timeRange: timeRange, preset: preset, onChange: onDateChange, adapter: adapter, peekNextMonth: props.peekNextMonth, excludeDates: props.excludeDates, filterDate: props.filterDate, minDate: minDate, maxDate: maxDate, formatString: props.formatString, locale: props.locale, fixedHeight: props.fixedHeight, monthsShown: monthsShown, hidePresetSearch: hidePresetSearch, footerContent: (0, jsx_runtime_1.jsx)(Footer, tslib_1.__assign({ "$hasError": hasError, "$onSubmit": handleSubmit, "$onClose": props.onClose }, footerProps, { className: ['px-6 py-3 mt-2', footerProps.className] }, { children: (0, jsx_runtime_1.jsxs)(box_1.Box, tslib_1.__assign({ className: "justify-between w-0 grow flex" }, { children: [(0, jsx_runtime_1.jsx)(FooterBeforeEnhancer, tslib_1.__assign({}, footerBeforeEnhancerProps)), (0, jsx_runtime_1.jsxs)(stack_1.Stack, tslib_1.__assign({ direction: monthsShown === 1 ? 'vertical' : 'horizontal', gap: 3, 
-                                // @ts-ignore -- CSS-in-JS
-                                className: [(0, classNames_1.default)({ 'items-center': monthsShown !== 1 }), { maxWidth: 'fit-content' }] }, { children: [monthsShown === 1 ? null : errorEl, (0, jsx_runtime_1.jsxs)(stack_1.StackItem, tslib_1.__assign({ className: "flex self-end" }, { children: [(footerProps === null || footerProps === void 0 ? void 0 : footerProps.showClearButton) ? ((0, jsx_runtime_1.jsx)(button_1.Button, tslib_1.__assign({ size: "xs", onClick: footerProps.handleClearBtnClick, variant: "secondary", "data-testid": "clear", disabled: timeRange.length === 0 }, { children: locale.timeRangePicker.clearBtnLabel }))) : ((0, jsx_runtime_1.jsx)(button_1.Button, tslib_1.__assign({ size: "xs", onClick: props.onClose, variant: "secondary", "data-testid": "cancel" }, { children: locale.timeRangePicker.cancelBtnLabel }))), (0, jsx_runtime_1.jsx)(button_1.Button, tslib_1.__assign({ size: "xs", className: "ml-3", onClick: handleSubmit, disabled: hasError, "data-testid": "save" }, { children: locale.timeRangePicker.saveBtnLabel }))] })), monthsShown === 1 ? errorEl : null] }))] })) })) }, rangeSelectorProps))] })));
+    return ((0, jsx_runtime_1.jsxs)(box_1.Box, tslib_1.__assign({ className: "spr-ui-01 rounded-8" }, { children: [(0, jsx_runtime_1.jsxs)(Header, tslib_1.__assign({ "$setTimezone": setTimezone, "$onClose": props.onClose }, headerProps, { children: [(0, jsx_runtime_1.jsx)(HeaderBeforeEnhancer, tslib_1.__assign({ variant: "heading-7", "$as": "span", className: "flex items-center" }, headerBeforeEnhancerProps, { children: locale.timeRangePicker.headerLabel })), disableTimezone ? null : ((0, jsx_runtime_1.jsx)(TimezonePicker, tslib_1.__assign({ setTimezone: setTimezone, timezone: timezone, timezoneOptions: timezoneOptions }, timezonePickerProps, { className: ['w-0 grow max-w-md', timezonePickerProps === null || timezonePickerProps === void 0 ? void 0 : timezonePickerProps.className] })))] })), (0, jsx_runtime_1.jsx)(RangeSelector, tslib_1.__assign({ overrides: props.overrides, timeSelect: props.timeSelect, timeRangePresets: timeRangePresets, timezone: timezone, timeRange: timeRange, preset: preset, onChange: onDateChange, adapter: adapter, peekNextMonth: props.peekNextMonth, excludeDates: props.excludeDates, filterDate: props.filterDate, minDate: minDate, maxDate: maxDate, formatString: props.formatString, locale: props.locale, fixedHeight: props.fixedHeight, monthsShown: monthsShown, hidePresetSearch: hidePresetSearch, footerContent: (0, jsx_runtime_1.jsx)(Footer, tslib_1.__assign({ "$hasError": hasError, "$onSubmit": handleSubmit, "$onClose": props.onClose }, footerProps, { className: ['px-6 py-3 mt-2', footerProps.className] }, { children: (0, jsx_runtime_1.jsxs)(box_1.Box, tslib_1.__assign({ className: "justify-between w-0 grow flex" }, { children: [(0, jsx_runtime_1.jsx)(FooterBeforeEnhancer, tslib_1.__assign({}, footerBeforeEnhancerProps)), (0, jsx_runtime_1.jsxs)(stack_1.Stack, tslib_1.__assign({ direction: monthsShown === 1 ? 'vertical' : 'horizontal', gap: 3, className: monthsShown !== 1 ? 'items-center' : undefined, style: { maxWidth: 'fit-content' } }, { children: [monthsShown === 1 ? null : errorEl, (0, jsx_runtime_1.jsxs)(stack_1.StackItem, tslib_1.__assign({ className: "flex self-end" }, { children: [(footerProps === null || footerProps === void 0 ? void 0 : footerProps.showClearButton) ? ((0, jsx_runtime_1.jsx)(button_1.Button, tslib_1.__assign({ size: "xs", onClick: footerProps.handleClearBtnClick, variant: "secondary", "data-testid": "clear", disabled: timeRange.length === 0 }, { children: locale.timeRangePicker.clearBtnLabel }))) : ((0, jsx_runtime_1.jsx)(button_1.Button, tslib_1.__assign({ size: "xs", onClick: props.onClose, variant: "secondary", "data-testid": "cancel" }, { children: locale.timeRangePicker.cancelBtnLabel }))), (0, jsx_runtime_1.jsx)(button_1.Button, tslib_1.__assign({ size: "xs", className: "ml-3", onClick: handleSubmit, disabled: hasError, "data-testid": "save" }, { children: locale.timeRangePicker.saveBtnLabel }))] })), monthsShown === 1 ? errorEl : null] }))] })) })) }, rangeSelectorProps))] })));
 };
 RangeSelectorContainer.displayName = 'RangeSelectorContainer';
 exports.default = RangeSelectorContainer;