@sprinklrjs/spaceweb 14.13.1 → 14.14.0

package/select/selectMenuAdapter/SelectMenuItem.js

@@ -18,10 +18,11 @@ var shouldHideSelectItemActions = function (item) {
     return Boolean(item[types_1.SELECT_ALL_ID] || item[constants_1.GROUP_SELECT_ALL_ID] || item[types_1.CLEAR_OPTION_ID] || item.isCreatable);
 };
 var SelectMenuItem = React.forwardRef(function (_a, ref) {
-    var item = _a.item, valueKey = _a.valueKey, overrides = _a.overrides, labelKey = _a.labelKey, multi = _a.multi, selected = _a.selected, getItemLabel = _a.getItemLabel, onItemSelect = _a.onItemSelect, restProps = tslib_1.__rest(_a, ["item", "valueKey", "overrides", "labelKey", "multi", "selected", "getItemLabel", "onItemSelect"]);
-    var _b = tslib_1.__read((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.MenuItem, menu_item_1.default), 2), MenuItemOverriden = _b[0], menuItemProps = _b[1];
-    var _c = tslib_1.__read((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Checkbox, checkbox_1.Checkbox), 2), CheckboxOverriden = _c[0], checkboxProps = _c[1];
-    var _d = tslib_1.__read((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.ListItemText, list_1.ListItemText), 2), ListItemTextOverriden = _d[0], listItemTextProps = _d[1];
+    var item = _a.item, valueKey = _a.valueKey, overrides = _a.overrides, labelKey = _a.labelKey, multi = _a.multi, selected = _a.selected, getItemLabel = _a.getItemLabel, onItemSelect = _a.onItemSelect, _b = _a.role, role = _b === void 0 ? 'option' : _b, restProps = tslib_1.__rest(_a, ["item", "valueKey", "overrides", "labelKey", "multi", "selected", "getItemLabel", "onItemSelect", "role"]);
+    var isCheckboxRole = role === 'checkbox';
+    var _c = tslib_1.__read((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.MenuItem, menu_item_1.default), 2), MenuItemOverriden = _c[0], menuItemProps = _c[1];
+    var _d = tslib_1.__read((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Checkbox, checkbox_1.Checkbox), 2), CheckboxOverriden = _d[0], checkboxProps = _d[1];
+    var _e = tslib_1.__read((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.ListItemText, list_1.ListItemText), 2), ListItemTextOverriden = _e[0], listItemTextProps = _e[1];
     var handleItemSelect = (0, react_1.useCallback)(function (event) { return onItemSelect({ item: item, event: event }); }, [item, onItemSelect]);
     var textOverrides = listItemTextProps === null || listItemTextProps === void 0 ? void 0 : listItemTextProps.overrides;
     var listItemTextOverrides = (0, react_1.useMemo)(function () {
@@ -34,14 +35,20 @@ var SelectMenuItem = React.forwardRef(function (_a, ref) {
     var id = (0, useUniqueId_1.default)();
     var checkboxPropsOverrides = checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.overrides;
     var checkboxOverrides = (0, react_1.useMemo)(function () {
-        return (0, overrides_1.mergeOverrides)({ Input: { props: { 'aria-labelledby': id, tabIndex: -1 } }, Label: { className: 'hidden' } }, checkboxPropsOverrides);
+        return (0, overrides_1.mergeOverrides)({
+            Input: {
+                props: { 'aria-labelledby': id, tabIndex: -1 },
+                className: 'invisible',
+            },
+            Label: { className: 'hidden' },
+        }, checkboxPropsOverrides);
     }, [id, checkboxPropsOverrides]);
     // Passes intent to override intent from useContextualFormProps,
     // see: https://prod-gitlab.sprinklr.com/sprinklr/frontend/spaceweb/-/issues/282
     var startEnhancer = (0, react_1.useMemo)(function () {
         return multi && ((0, jsx_runtime_1.jsx)(CheckboxOverriden, tslib_1.__assign({ checked: selected, size: "medium", disabled: item.disabled, intent: "default" }, checkboxProps, { overrides: checkboxOverrides })));
     }, [multi, CheckboxOverriden, selected, item.disabled, checkboxProps, checkboxOverrides]);
-    var menuItemEl = ((0, jsx_runtime_1.jsx)(MenuItemOverriden, tslib_1.__assign({ role: "option", "aria-selected": selected, 
+    var menuItemEl = ((0, jsx_runtime_1.jsx)(MenuItemOverriden, tslib_1.__assign({ role: role }, (isCheckboxRole ? { 'aria-checked': selected } : { 'aria-selected': selected }), { 
         // for Multi Select variant do not show selected styles
         selected: multi ? false : selected, onClick: handleItemSelect, startEnhancer: startEnhancer, disabled: item.disabled, "$multi": multi, tabIndex: -1, "$item": item, "$valueKey": valueKey, "$labelKey": labelKey, ref: ref, id: id, tooltipContent: item.tooltipContent, hideInlineActions: shouldHideSelectItemActions(item) }, restProps, menuItemProps, { children: (0, jsx_runtime_1.jsx)(ListItemTextOverriden, tslib_1.__assign({ "$multi": multi, "$item": item, "$labelKey": labelKey }, listItemTextProps, { overrides: listItemTextOverrides }, { children: getItemLabel(item) })) })));
     return item.disabled && item.disabledTooltipConfig ? ((0, jsx_runtime_1.jsx)(tooltip_1.ActionableTooltip, tslib_1.__assign({}, item.disabledTooltipConfig, { children: menuItemEl }))) : (menuItemEl);

package/select/selectMenuAdapter/hooks/useRootSelectAllKeyboardNav.d.ts

@@ -0,0 +1,22 @@
+import type { Dispatch, MutableRefObject, RefObject, SetStateAction } from 'react';
+import type { Item, OnItemSelectFn } from '../../../baseui/menu/types';
+import type { MenuRef } from '../../../menu/types';
+import type { GroupConfig } from '../types';
+type UseRootSelectAllKeyboardNavParams = {
+    menuRef: RefObject<MenuRef>;
+    selectAllItem: Item | null;
+    ownerDocument: Document | undefined;
+    expandedGroupId: string | undefined;
+    setExpandedGroupId: Dispatch<SetStateAction<string | undefined>>;
+    groupConfig: GroupConfig;
+    onItemSelect?: OnItemSelectFn;
+    inputElement?: HTMLInputElement | null;
+    isFirstItemHighlighted: MutableRefObject<boolean>;
+};
+type UseRootSelectAllKeyboardNavReturn = {
+    selectAllItemRef: RefObject<HTMLElement | null>;
+    isRootSelectAllHighlighted: boolean;
+    leaveRootSelectAllHighlight: () => void;
+};
+export declare const useRootSelectAllKeyboardNav: ({ menuRef, selectAllItem, ownerDocument, expandedGroupId, setExpandedGroupId, groupConfig, onItemSelect, inputElement, isFirstItemHighlighted, }: UseRootSelectAllKeyboardNavParams) => UseRootSelectAllKeyboardNavReturn;
+export {};

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/styled-component.js

@@ -45,7 +45,7 @@ exports.StyledInput = (0, style_1.styled)('input', 'bg-transparent border-none i
 });
 var StyledOverlayContentContainer = (0, style_1.styled)('div', 'overflow-auto rounded-inherit w-[--sw-width]');
 exports.StyledOverlayContentContainer = StyledOverlayContentContainer;
-var getCommaSeparatedValues = function (value, limitTags, labelKey, locale) {
+var getCommaSeparatedValues = function (value, limitTags, labelKey, locale, multi) {
     if (limitTags === void 0) { limitTags = Number(Infinity); }
     var _limitTags = limitTags < 0 ? Number(Infinity) : limitTags;
     var commaSeparatedValues = value === null || value === void 0 ? void 0 : value.slice(0, _limitTags).map(function (val) { return val[labelKey]; });
@@ -54,16 +54,26 @@ var getCommaSeparatedValues = function (value, limitTags, labelKey, locale) {
         commaSeparatedValues.push("".concat("+".concat(extraTagNumber, " ").concat(extraTagNumber === 1 ? locale.select.item : locale.select.items)));
     }
     var _commaSeparatedValues = commaSeparatedValues === null || commaSeparatedValues === void 0 ? void 0 : commaSeparatedValues.join(',');
-    return value && value.length > 0
-        ? "".concat((0, i18n_interpolation_1.default)(locale.select.selectedValuesPrefix, { values: _commaSeparatedValues }), ".")
-        : '';
+    if (!(value === null || value === void 0 ? void 0 : value.length)) {
+        return '';
+    }
+    if (multi) {
+        var count = value.length;
+        var countLabel = count === 1 ? locale.select.item : locale.select.items;
+        return "".concat((0, i18n_interpolation_1.default)(locale.select.selectedMultiValuesPrefix, {
+            count: String(count),
+            countLabel: countLabel,
+            values: _commaSeparatedValues,
+        }), ".");
+    }
+    return "".concat((0, i18n_interpolation_1.default)(locale.select.selectedValuesPrefix, { values: _commaSeparatedValues }), ".");
 };
 var InputContainer = function (_a) {
     var _b;
     var size = _a.size, $value = _a.$value, $labelKey = _a.$labelKey, placeholder = _a.placeholder, $limitTags = _a.$limitTags, props = tslib_1.__rest(_a, ["size", "$value", "$labelKey", "placeholder", "$limitTags"]);
     var locale = (0, locale_1.useLocale)();
     var listboxId = (0, SelectIdsContext_1.useSelectIds)().listboxId;
-    var commaSeparatedValues = getCommaSeparatedValues($value, $limitTags, $labelKey, locale);
+    var commaSeparatedValues = getCommaSeparatedValues($value, $limitTags, $labelKey, locale, props.$multi);
     var baseAriaDescribedBy = (_b = props['aria-describedby']) !== null && _b !== void 0 ? _b : '';
     var selectedValuesId = (0, useUniqueId_1.default)();
     var ariaDescribedBy = commaSeparatedValues ? "".concat(selectedValuesId, " ").concat(baseAriaDescribedBy) : baseAriaDescribedBy;
@@ -83,7 +93,7 @@ var Input = (0, react_1.forwardRef)(function (_a, ref) {
     var placeholder = _a.placeholder, $value = _a.$value, $labelKey = _a.$labelKey, _c = _a.$limitTags, $limitTags = _c === void 0 ? Number(Infinity) : _c, props = tslib_1.__rest(_a, ["placeholder", "$value", "$labelKey", "$limitTags"]);
     var locale = (0, locale_1.useLocale)();
     var _d = (0, SelectIdsContext_1.useSelectIds)(), listboxId = _d.listboxId, inputId = _d.inputId;
-    var commaSeparatedValues = getCommaSeparatedValues($value, $limitTags, $labelKey, locale);
+    var commaSeparatedValues = getCommaSeparatedValues($value, $limitTags, $labelKey, locale, props.$multi);
     var baseAriaDescribedBy = (_b = props['aria-describedby']) !== null && _b !== void 0 ? _b : '';
     var selectedValuesId = (0, useUniqueId_1.default)();
     var ariaDescribedBy = commaSeparatedValues ? "".concat(selectedValuesId, " ").concat(baseAriaDescribedBy) : baseAriaDescribedBy;

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;