@sprinklrjs/spaceweb 12.33.2 → 14.11.0

package/select/selectMenuAdapter/SelectMenuItem.d.ts

@@ -1,26 +1,29 @@
 import * as React from 'react';
-import { ListItemTextProps } from '../../list';
-import { Override } from '../../overrides';
-import { MenuItemProps } from '../../menu';
-import { SelectProps } from '../types';
+import { type ListItemTextProps } from '../../list';
+import { type Override } from '../../overrides';
+import type { MenuItemProps } from '../../menu';
+import type { SelectProps } from '../types';
 declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<Pick<MenuItemProps, "selected"> & Pick<SelectProps, "labelKey" | "multi" | "valueKey"> & {
     item: Record<string, any>;
     getItemLabel: (item: Record<string, any>) => React.ReactNode;
     onItemSelect: (item: Record<string, any>) => void;
     overrides?: {
         MenuItem?: Override<Omit<import("../../list").ListItemProps, "onMouseEnter" | "onMouseLeave" | "overrides"> & {
+            $item?: Record<string, any> | undefined;
             getChildMenu?: (() => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) | undefined;
             onMouseEnter?: (() => void) | undefined;
             onMouseLeave?: (() => void) | undefined;
             renderAll?: boolean | undefined;
+            hideInlineActions?: boolean | undefined;
             overrides?: {
-                ListItem?: Override<Omit<React.AllHTMLAttributes<HTMLElement>, "style" | "className"> & {
-                    $as?: React.ElementType<any> | undefined;
-                    className?: import("../..").Styles;
+                ListItem?: Override<Omit<React.AllHTMLAttributes<HTMLElement>, "className" | "style"> & {
+                    $as?: React.ElementType | undefined;
+                    className?: import("../..").ClassName;
                     style?: import("../..").Styles;
                 } & {
                     alignItems?: import("../../list").AlignItems | undefined;
                     autoFocus?: boolean | undefined;
+                    /** Select-all, group-select-all, clear, and creatable rows do not show `getActionsElement` by default. */
                     button?: boolean | undefined;
                     children?: React.ReactNode;
                     disabled?: boolean | undefined;
@@ -44,13 +47,14 @@ declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponen
                         Arrow?: Override<any> | undefined;
                         Inner?: Override<any> | undefined;
                     } & {
+                        LayersManager?: Override<import("../../baseui/layer").LayersManagerProps> | undefined;
                         ArrowTriangle?: Override<any> | undefined;
                     }) | undefined;
                     children?: React.ReactNode | ((args: {
                         isOpen: boolean;
                     }) => React.ReactNode);
                     targetElement?: HTMLElement | null | undefined;
-                    triggerType?: import("../../popover").TriggerType | undefined;
+                    triggerType?: import("../../tooltip").TriggerType | undefined;
                     placement?: "auto" | "bottom" | "left" | "right" | "top" | "topLeft" | "topRight" | "rightTop" | "rightBottom" | "bottomRight" | "bottomLeft" | "leftBottom" | "leftTop" | undefined;
                     innerRef?: React.Ref<HTMLElement> | undefined;
                     viewportAsBoundary?: boolean | undefined;
@@ -58,6 +62,43 @@ declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponen
             } | undefined;
         } & Record<string, any>> | undefined;
         ListItemText?: Override<ListItemTextProps & Record<string, any>> | undefined;
+        Checkbox?: Override<Omit<{
+            'aria-describedby'?: string | undefined;
+            'aria-errormessage'?: string | undefined;
+            ariaLabel?: string | undefined;
+            'aria-label'?: string | undefined;
+            children?: React.ReactNode;
+            containsInteractiveElement?: boolean | undefined;
+            overrides?: import("../../checkbox").CheckboxOverrides | undefined;
+            size?: import("../../checkbox").CheckboxSize | undefined;
+            intent?: import("../../checkbox").CheckboxIntent | undefined;
+            inputRef?: React.Ref<HTMLInputElement> | undefined;
+            checked?: boolean | undefined;
+            disabled?: boolean | undefined;
+            required?: boolean | undefined;
+            error?: boolean | undefined;
+            checkmarkType?: "default" | "toggle" | undefined;
+            autoFocus?: boolean | undefined;
+            id?: string | undefined;
+            name?: string | undefined;
+            value?: string | undefined;
+            isIndeterminate?: boolean | undefined;
+            labelPlacement?: import("../../checkbox").LabelPlacement | undefined;
+            title?: string | null | undefined;
+            onChange?: ((e: React.ChangeEvent<HTMLInputElement>) => unknown) | undefined;
+            onMouseDown?: ((e: React.ChangeEvent<HTMLInputElement>) => unknown) | undefined;
+            onMouseUp?: ((e: React.ChangeEvent<HTMLInputElement>) => unknown) | undefined;
+            onMouseEnter?: ((e: React.MouseEvent<HTMLInputElement, MouseEvent>) => unknown) | undefined;
+            onMouseLeave?: ((e: React.MouseEvent<HTMLInputElement, MouseEvent>) => unknown) | undefined;
+            onFocus?: ((e: React.FocusEvent<HTMLInputElement, Element>) => unknown) | undefined;
+            onBlur?: ((e: React.FocusEvent<HTMLInputElement, Element>) => unknown) | undefined;
+        }, "className" | "style"> & {
+            $as?: React.ElementType | undefined;
+            className?: import("../..").ClassName;
+            style?: import("../..").Styles;
+        } & import("../../helpers/commonStyles").OutlineProps & {
+            'data-spaceweb'?: string | undefined;
+        } & Record<string, any>> | undefined;
     } | undefined;
 } & React.RefAttributes<HTMLElement>>>;
 export default _default;

package/select/selectMenuAdapter/SelectMenuItem.js

@@ -3,35 +3,48 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
-var React = (0, tslib_1.__importStar)(require("react"));
+var React = tslib_1.__importStar(require("react"));
 var checkbox_1 = require("../../checkbox");
-var classNames_1 = (0, tslib_1.__importDefault)(require("../../classNames"));
+var classNames_1 = tslib_1.__importDefault(require("../../classNames"));
 var list_1 = require("../../list");
-var menu_item_1 = (0, tslib_1.__importDefault)(require("../../menu/menu-item"));
+var menu_item_1 = tslib_1.__importDefault(require("../../menu/menu-item"));
 var overrides_1 = require("../../overrides");
-var useUniqueId_1 = (0, tslib_1.__importDefault)(require("../../hooks/useUniqueId"));
+var useUniqueId_1 = tslib_1.__importDefault(require("../../hooks/useUniqueId"));
+var tooltip_1 = require("../../tooltip");
 var types_1 = require("../types");
+var constants_1 = require("../../baseui/select/constants");
+/** Select-all, group-select-all, clear, and creatable rows do not show `getActionsElement` by default. */
+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 _b;
-    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 = (0, tslib_1.__rest)(_a, ["item", "valueKey", "overrides", "labelKey", "multi", "selected", "getItemLabel", "onItemSelect"]);
-    var _c = (0, 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 = (0, 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 handleItemSelect = (0, react_1.useCallback)(function () { return onItemSelect({ item: item }); }, [item, onItemSelect]);
-    var textOverrides = (_b = listItemTextProps) === null || _b === void 0 ? void 0 : _b.overrides;
+    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 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 () {
         return (0, overrides_1.mergeOverrides)({
-            PrimaryText: { props: { className: (0, classNames_1.default)({ 'font-semibold': item[types_1.SELECT_ALL_ID] }) } },
+            PrimaryText: {
+                className: (0, classNames_1.default)({ 'font-semibold': item[types_1.SELECT_ALL_ID] || item[constants_1.GROUP_SELECT_ALL_ID] }),
+            },
         }, textOverrides);
-    }, [item, valueKey, textOverrides]);
+    }, [item, textOverrides]);
     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);
+    }, [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)(checkbox_1.Checkbox, { checked: selected, size: "sm", overrides: { Input: { props: { 'aria-labelledby': id } }, Label: { style: 'hidden' } }, disabled: item.disabled, intent: "default" }, void 0));
-    }, [multi, selected, item.disabled, item[valueKey], id]);
-    return ((0, jsx_runtime_1.jsx)(MenuItemOverriden, (0, tslib_1.__assign)({ role: "option", "aria-selected": selected, 
+        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, 
         // for Multi Select variant do not show selected styles
-        selected: multi ? false : selected, onClick: handleItemSelect, startEnhancer: startEnhancer, disabled: item.disabled, "$multi": multi, "$item": item, "$valueKey": valueKey, "$labelKey": labelKey, ref: ref, id: id }, restProps, menuItemProps, { children: (0, jsx_runtime_1.jsx)(ListItemTextOverriden, (0, tslib_1.__assign)({ "$multi": multi, "$item": item, "$labelKey": labelKey }, listItemTextProps, { overrides: listItemTextOverrides }, { children: getItemLabel(item) }), void 0) }), void 0));
+        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);
 });
 SelectMenuItem.displayName = 'SelectMenuItem';
 exports.default = React.memo(SelectMenuItem);

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

@@ -1,6 +1,8 @@
 import type { GroupConfig } from '../types';
-import type { Items } from '../../../baseui/menu/types';
-export declare const useGetExpandedGroup: ({ groupConfig, groupedItems, }: {
+import type { Items } from '../../../baseui/menu';
+import type { Value } from '../../../baseui/select/types';
+export declare const useGetExpandedGroup: ({ groupConfig, groupedItems, value, }: {
     groupConfig: GroupConfig;
     groupedItems: Items;
+    value?: Value | undefined;
 }) => [string | undefined, React.Dispatch<React.SetStateAction<string | undefined>>];

package/select/selectMenuAdapter/hooks/useGetExpandedGroup.js

@@ -3,17 +3,44 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useGetExpandedGroup = void 0;
 var tslib_1 = require("tslib");
 var react_1 = require("react");
+var isEqual_1 = tslib_1.__importDefault(require("lodash/isEqual"));
+var groupHasItems = function (groupId, groupedItems) { var _a; return !!(groupId && ((_a = groupedItems[groupId]) === null || _a === void 0 ? void 0 : _a.length)); };
+var isNotEqual = function (a, b) { return a !== b && !(0, isEqual_1.default)(a, b); };
+var getInitialExpandedGroup = function (groupConfig, value) {
+    var _a, _b;
+    if ((value === null || value === void 0 ? void 0 : value.length) === 1) {
+        var selectedOptgroup_1 = (_a = value[0]) === null || _a === void 0 ? void 0 : _a.__optgroup;
+        if (selectedOptgroup_1 && groupConfig.some(function (group) { return group.id === selectedOptgroup_1; })) {
+            return selectedOptgroup_1;
+        }
+    }
+    return (_b = groupConfig[0]) === null || _b === void 0 ? void 0 : _b.id;
+};
 var useGetExpandedGroup = function (_a) {
-    var _b;
-    var groupConfig = _a.groupConfig, groupedItems = _a.groupedItems;
-    var _c = (0, tslib_1.__read)((0, react_1.useState)((_b = groupConfig[0]) === null || _b === void 0 ? void 0 : _b.id), 2), expandedGroupId = _c[0], setExpandedGroupId = _c[1];
-    // by default open very first group with non zero elements
-    var _d = (0, tslib_1.__read)((0, react_1.useState)(false), 2), initialised = _d[0], setInitialised = _d[1];
-    if (!initialised) {
-        var validGroup = groupConfig.find(function (group) { var _a; return !!group.count || !!((_a = groupedItems[group.id]) === null || _a === void 0 ? void 0 : _a.length); });
-        if (validGroup) {
-            setExpandedGroupId(validGroup.id);
-            setInitialised(true);
+    var _b, _c;
+    var groupConfig = _a.groupConfig, groupedItems = _a.groupedItems, value = _a.value;
+    var _d = tslib_1.__read((0, react_1.useState)(function () {
+        return getInitialExpandedGroup(groupConfig, value);
+    }), 2), expandedGroupId = _d[0], setExpandedGroupId = _d[1];
+    var _e = tslib_1.__read((0, react_1.useState)(), 2), prevGroupConfig = _e[0], setPreviousGroupConfig = _e[1];
+    var _f = tslib_1.__read((0, react_1.useState)(), 2), prevGroupItems = _f[0], setPrevGroupItems = _f[1];
+    if (isNotEqual(prevGroupConfig, groupConfig) || isNotEqual(prevGroupItems, groupedItems)) {
+        // Auto-switch to first group with items when groupConfig changed, or when groupedItems
+        // changed and the current expanded group has none. This allows empty groups to be
+        // expanded so users can see the "no results" message.
+        var groupConfigChanged = isNotEqual(prevGroupConfig, groupConfig);
+        var groupItemsChanged = isNotEqual(prevGroupItems, groupedItems);
+        var currentGroupHasItems = groupHasItems(expandedGroupId, groupedItems);
+        var shouldAutoSwitch = (groupConfigChanged && !currentGroupHasItems) || (groupItemsChanged && expandedGroupId && !currentGroupHasItems);
+        if (shouldAutoSwitch) {
+            var groupWithItems = groupConfig.find(function (group) { return groupHasItems(group.id, groupedItems); });
+            setExpandedGroupId((_b = groupWithItems === null || groupWithItems === void 0 ? void 0 : groupWithItems.id) !== null && _b !== void 0 ? _b : (_c = groupConfig[0]) === null || _c === void 0 ? void 0 : _c.id);
+        }
+        if (groupConfigChanged) {
+            setPreviousGroupConfig(groupConfig);
+        }
+        if (groupItemsChanged) {
+            setPrevGroupItems(groupedItems);
         }
     }
     return [expandedGroupId, setExpandedGroupId];

package/select/selectMenuAdapter/index.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
-var SelectMenuAdapter_1 = (0, tslib_1.__importDefault)(require("./SelectMenuAdapter"));
+var SelectMenuAdapter_1 = tslib_1.__importDefault(require("./SelectMenuAdapter"));
 exports.default = SelectMenuAdapter_1.default;

package/select/selectMenuAdapter/types.d.ts

@@ -1,11 +1,11 @@
-import { SelectProps } from '../types';
-import { Override } from '../../overrides';
-import { MenuItemProps, MenuProps } from '../../menu';
-import { StatefulMenuProps as BaseStatefulMenuProps } from '../../baseui/menu/types';
-import { RefObject } from 'react';
-declare type PropsAddedByOverride = {
+import type { SelectProps, BaseSelectProps } from '../types';
+import type { Override } from '../../overrides';
+import type { MenuItemProps, MenuProps, MenuItemActions } from '../../menu';
+import type { StatefulMenuProps as BaseStatefulMenuProps } from '../../baseui/menu/types';
+import type { NoResultsMessageProps } from '../no-results-message';
+type PropsAddedByOverride = {
     id?: string;
-    value: SelectProps['value'];
+    value?: BaseSelectProps['value'];
     overrides?: {
         Menu?: Override<MenuProps>;
         MenuItem?: Override<MenuItemProps & {
@@ -25,18 +25,21 @@ declare type PropsAddedByOverride = {
     };
     valueKey: string;
     labelKey: string;
-    multi: SelectProps['multi'];
-    selectAllSelected: boolean;
+    multi?: SelectProps['multi'];
+    selectAllSelected?: boolean;
     shouldDisplaySelectAll?: boolean;
     noResultsMsg?: string;
+    noResultsConfig?: NoResultsMessageProps;
     captureScroll?: boolean;
     virtual?: boolean;
     overscanCount?: number;
     selectOnTab?: boolean;
-    inputRef?: RefObject<HTMLInputElement>;
+    getActionsElement?: MenuItemActions;
+    /** Combobox input ref from BaseSelect; restores focus when leaving per-option action buttons. */
+    inputElement?: HTMLInputElement | null;
 };
-export declare type MenuAdapterProps = BaseStatefulMenuProps & PropsAddedByOverride;
-export declare type GroupConfig = {
+export type MenuAdapterProps = BaseStatefulMenuProps & PropsAddedByOverride;
+export type GroupConfig = {
     id: string;
     label: string;
     count?: number;

package/select/stateful-select.d.ts

@@ -6,7 +6,6 @@ declare namespace StatefulSelect {
         autoFocus: boolean;
         backspaceRemoves: boolean;
         clearable: boolean;
-        closeOnSelect: boolean;
         creatable: boolean;
         deleteRemoves: boolean;
         disabled: boolean;
@@ -16,6 +15,7 @@ declare namespace StatefulSelect {
         filterOptions: ((options: import("./types").Value, filterValue: string, excludeOptions: import("./types").Value | null | undefined, a: {
             valueKey: string;
             labelKey: string;
+            filterOnlyCreated?: boolean | undefined;
         }) => import("./types").Value) | null | undefined;
         filterOutSelected: boolean;
         isLoading: boolean;
@@ -41,6 +41,7 @@ declare namespace StatefulSelect {
         placement: "auto" | "bottom" | "left" | "right" | "top" | "topLeft" | "topRight" | "rightTop" | "rightBottom" | "bottomRight" | "bottomLeft" | "leftBottom" | "leftTop" | undefined;
         virtual: boolean;
         popoverMinWidth: string;
+        expandLimitTagsOnFocus: boolean;
     };
 }
 export default StatefulSelect;

package/select/stateful-select.js

@@ -3,14 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
 var select_1 = require("../baseui/select");
-var overlaySelect_1 = (0, tslib_1.__importDefault)(require("./overlaySelect"));
-var select_2 = (0, tslib_1.__importDefault)(require("./select"));
-var default_props_1 = (0, tslib_1.__importDefault)(require("./default-props"));
+var overlaySelect_1 = tslib_1.__importDefault(require("./overlaySelect"));
+var select_2 = tslib_1.__importDefault(require("./select"));
+var default_props_1 = tslib_1.__importDefault(require("./default-props"));
 function StatefulSelect(_a) {
-    var overrides = _a.overrides, onChange = _a.onChange, restProps = (0, tslib_1.__rest)(_a, ["overrides", "onChange"]);
-    return ((0, jsx_runtime_1.jsx)(select_1.StatefulSelectContainer, (0, tslib_1.__assign)({}, restProps, { onChange: onChange }, { children: function (selectProps) {
-            return restProps.type === 'overlay' ? ((0, jsx_runtime_1.jsx)(overlaySelect_1.default, (0, tslib_1.__assign)({}, selectProps, { overrides: overrides }, { children: restProps.children }), void 0)) : ((0, jsx_runtime_1.jsx)(select_2.default, (0, tslib_1.__assign)({}, selectProps, { filterOptions: selectProps.filterOptions, overrides: overrides }), void 0));
-        } }), void 0));
+    var overrides = _a.overrides, onChange = _a.onChange, restProps = tslib_1.__rest(_a, ["overrides", "onChange"]);
+    return ((0, jsx_runtime_1.jsx)(select_1.StatefulSelectContainer, tslib_1.__assign({}, restProps, { onChange: onChange }, { children: function (selectProps) {
+            return restProps.type === 'overlay' ? ((0, jsx_runtime_1.jsx)(overlaySelect_1.default, tslib_1.__assign({}, selectProps, { overrides: overrides }, { children: restProps.children }))) : ((0, jsx_runtime_1.jsx)(select_2.default, tslib_1.__assign({}, selectProps, { filterOptions: selectProps.filterOptions, overrides: overrides })));
+        } })));
 }
 StatefulSelect.defaultProps = default_props_1.default;
 exports.default = StatefulSelect;

package/select/styled-component.d.ts

@@ -1,29 +1,31 @@
-import * as React from 'react';
-import { SharedProps, Size } from './types';
-import { Value } from '../baseui/select/types';
-declare const StyledSelect: import("../style/styled").StyledComponent;
-declare const NoResults: React.ForwardRefExoticComponent<{
+import type { ReactElement } from 'react';
+import type { SharedProps, Size } from './types';
+import type { Value } from '../baseui/select/types';
+import type { NoResultsMessageProps } from './no-results-message';
+declare const NoResults: import("react").ForwardRefExoticComponent<{
     msg?: string | undefined;
-} & React.RefAttributes<HTMLElement>>;
-export declare const StyledInputContainer: import("../style/styled").StyledComponent;
-export declare const StyledInput: import("../style/styled").StyledComponent;
-declare const StyledOverlayContentContainer: import("../style/styled").StyledComponent;
-declare const InputContainer: ({ menuId, size, $value, $labelKey, placeholder, ...props }: SharedProps & {
-    menuId: string;
+    noResultsConfig?: NoResultsMessageProps | undefined;
+} & import("react").RefAttributes<HTMLElement>>;
+export declare const StyledInputContainer: import("../style").StyledComponent;
+export declare const StyledInput: import("../style").StyledComponent;
+declare const StyledOverlayContentContainer: import("../style").StyledComponent;
+declare const InputContainer: ({ size, $value, $labelKey, placeholder, $limitTags, ...props }: SharedProps & {
     size: Size;
     $value: Value;
     $labelKey: string;
     placeholder: string;
 } & {
-    children?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
+    children?: ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
 }) => import("react/jsx-runtime").JSX.Element;
-declare const Input: React.ForwardRefExoticComponent<SharedProps & {
-    id: string;
-    $menuId: string;
+declare const Input: import("react").ForwardRefExoticComponent<SharedProps & {
     placeholder: string;
     $value: Value;
     $labelKey: string;
-} & React.RefAttributes<HTMLInputElement>>;
-export declare const LoadingIndicator: React.MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
+} & Omit<import("react").AllHTMLAttributes<HTMLElement>, "className" | "style"> & {
+    $as?: import("react").ElementType | undefined;
+    className?: import("../types").ClassName;
+    style?: import("../types").Styles;
+} & import("react").RefAttributes<HTMLInputElement>>;
+export declare const LoadingIndicator: import("react").MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
 export { StyledRoot, StyledClearIcon, StyledControlContainer, StyledDropdownContainer, StyledIconsContainer, StyledInputSizer, StyledPlaceholder, StyledSearchIconContainer, StyledSelectArrow, StyledSingleValue, StyledValueContainer, } from '../baseui/select';
-export { StyledSelect, NoResults, StyledOverlayContentContainer, InputContainer, Input };
+export { NoResults, StyledOverlayContentContainer, InputContainer, Input };

package/select/styled-component.js

@@ -1,126 +1,113 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Input = exports.InputContainer = exports.StyledOverlayContentContainer = exports.NoResults = exports.StyledSelect = exports.StyledValueContainer = exports.StyledSingleValue = exports.StyledSelectArrow = exports.StyledSearchIconContainer = exports.StyledPlaceholder = exports.StyledInputSizer = exports.StyledIconsContainer = exports.StyledDropdownContainer = exports.StyledControlContainer = exports.StyledClearIcon = exports.StyledRoot = exports.LoadingIndicator = exports.StyledInput = exports.StyledInputContainer = void 0;
+exports.Input = exports.InputContainer = exports.StyledOverlayContentContainer = exports.NoResults = exports.StyledValueContainer = exports.StyledSingleValue = exports.StyledSelectArrow = exports.StyledSearchIconContainer = exports.StyledPlaceholder = exports.StyledInputSizer = exports.StyledIconsContainer = exports.StyledDropdownContainer = exports.StyledControlContainer = exports.StyledClearIcon = exports.StyledRoot = exports.LoadingIndicator = exports.StyledInput = exports.StyledInputContainer = void 0;
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
-var select_1 = require("../baseui/select");
-var React = (0, tslib_1.__importStar)(require("react"));
-var longHandHelpers_1 = require("../helpers/longHandHelpers");
+var react_1 = require("react");
 var locale_1 = require("../locale");
-var menu_item_1 = (0, tslib_1.__importDefault)(require("../menu/menu-item"));
+var box_1 = require("../box");
+var menu_item_1 = tslib_1.__importDefault(require("../menu/menu-item"));
 var style_1 = require("../style");
 var themeHelpers_1 = require("../helpers/themeHelpers");
-var omit_1 = (0, tslib_1.__importDefault)(require("lodash/omit"));
 var hidden_element_1 = require("./utils/hidden-element");
-var i18n_interpolation_1 = (0, tslib_1.__importDefault)(require("../baseui/helpers/i18n-interpolation"));
-var useUniqueId_1 = (0, tslib_1.__importDefault)(require("../hooks/useUniqueId"));
+var i18n_interpolation_1 = tslib_1.__importDefault(require("../baseui/helpers/i18n-interpolation"));
+var useUniqueId_1 = tslib_1.__importDefault(require("../hooks/useUniqueId"));
 var loader_1 = require("../loader");
-var react_1 = require("react");
-var StyledSelect = (0, style_1.styled)(select_1.Select, function (utils) {
-    var theme = utils.theme;
-    return {
-        inputBorderRadius: theme.input.borderRadius,
-        borderFocus: theme.spr.focus01,
-        contentPrimary: theme.spr.text01,
-        contentSecondary: theme.spr.text03,
-        inputBorder: theme.spr.field,
-        inputFill: theme.spr.ui01,
-        inputFillError: theme.spr.ui01,
-        inputFillDisabled: theme.spr.ui02,
-        inputFillActive: theme.spr.ui01,
-        inputFillPositive: theme.spr.ui01,
-        inputTextDisabled: theme.spr.text02,
-        inputPlaceholder: theme.spr.textPlaceholder,
-        inputBorderError: theme.spr.supportError,
-        inputBorderPositive: theme.spr.supportSuccess,
-        inputEnhancerFill: theme.spr.icon03,
-        inputEnhancerFillDisabled: theme.spr.iconDisable,
-        inputEnhancerTextDisabled: theme.spr.text02,
-    };
-});
-exports.StyledSelect = StyledSelect;
-var NoResults = React.forwardRef(function (_a, ref) {
-    var msg = _a.msg, props = (0, tslib_1.__rest)(_a, ["msg"]);
+var SelectIdsContext_1 = require("./SelectIdsContext");
+var cvaConfigs_1 = require("./cvaConfigs");
+var no_results_message_1 = require("./no-results-message");
+var NoResults = (0, react_1.forwardRef)(function (_a, ref) {
+    var msg = _a.msg, noResultsConfig = _a.noResultsConfig, props = tslib_1.__rest(_a, ["msg", "noResultsConfig"]);
     var locale = (0, locale_1.useLocale)();
-    return ((0, jsx_runtime_1.jsx)(menu_item_1.default, (0, tslib_1.__assign)({ button: false, ref: ref }, props, { children: msg || locale.select.noResultsMsg }), void 0));
+    var noResultsId = (0, SelectIdsContext_1.useSelectIds)().noResultsId;
+    return ((0, jsx_runtime_1.jsx)(menu_item_1.default, tslib_1.__assign({ button: false, hideInlineActions: true, ref: ref }, props, { children: noResultsConfig ? ((0, jsx_runtime_1.jsx)(no_results_message_1.NoResultsMessage, tslib_1.__assign({}, noResultsConfig, { id: noResultsId }))) : ((0, jsx_runtime_1.jsx)(box_1.Box, tslib_1.__assign({ id: noResultsId }, { children: msg || locale.select.noResultsMsg }))) })));
 });
 exports.NoResults = NoResults;
-exports.StyledInputContainer = (0, style_1.styled)('div', 'relative inline-block bg-transparent max-w-full border-none box-border m-0 p-0 outline-none', function (_a, props) {
-    var theme = _a.theme, px2rem = _a.px2rem;
-    var $selectSize = props.$selectSize, $isEmpty = props.$isEmpty;
-    var _b = (0, themeHelpers_1.getComponentSizeTheme)(theme, 'input', $selectSize, 'md'), fontSize = _b.fontSize, lineHeight = _b.lineHeight;
-    return {
-        boxShadow: 'none',
-        marginLeft: $isEmpty ? 0 : px2rem(2),
-        height: lineHeight,
-        maxHeight: lineHeight,
-        fontSize: fontSize,
-        lineHeight: lineHeight,
-    };
+exports.StyledInputContainer = (0, style_1.styled)('div', cvaConfigs_1.inputContainerCVA, 
+// theme override styleFn
+// @ts-ignore -- Required for theme override
+function (_a, _b) {
+    var theme = _a.theme;
+    var $selectSize = _b.$selectSize;
+    var inputSizeTheme = (0, themeHelpers_1.getComponentSizeTheme)(theme, 'input', $selectSize, (0, themeHelpers_1.getDefaultSize)(theme));
+    return inputSizeTheme
+        ? tslib_1.__assign(tslib_1.__assign({}, (inputSizeTheme.lineHeight
+            ? {
+                height: inputSizeTheme.lineHeight,
+                lineHeight: inputSizeTheme === null || inputSizeTheme === void 0 ? void 0 : inputSizeTheme.lineHeight,
+                maxHeight: inputSizeTheme === null || inputSizeTheme === void 0 ? void 0 : inputSizeTheme.lineHeight,
+            }
+            : {})), (inputSizeTheme.fontSize ? { fontSize: inputSizeTheme === null || inputSizeTheme === void 0 ? void 0 : inputSizeTheme.fontSize } : {})) : {};
 });
-exports.StyledInput = (0, style_1.styled)('input', 'bg-transparent border-none inline-block m-0 p-0 max-w-full box-content outline-none', function (_, props) {
-    var $searchable = props.$searchable, $width = props.$width, $disabled = props.$disabled;
-    return (0, tslib_1.__assign)({ color: 'inherit', lineHeight: 'inherit', fontSize: 'inherit', fontWeight: 'inherit', letterSpacing: 'normal', width: !$searchable ? '1px' : $width || '100%', boxShadow: 'none', '::placeholder': {
-            color: 'transparent',
-        } }, ($disabled ? { '-webkit-text-fill-color': 'transparent' } : {}));
-});
-var DEFAULT_OVERLAY_WIDTH = '300px';
-var StyledOverlayContentContainer = (0, style_1.styled)('div', 'overflow-auto', function (_a, _b) {
-    var px2rem = _a.px2rem;
-    var $overlayWidth = _b.$overlayWidth;
-    return ((0, tslib_1.__assign)({ width: $overlayWidth || DEFAULT_OVERLAY_WIDTH }, (0, longHandHelpers_1.borderRadius)('inherit')));
+exports.StyledInput = (0, style_1.styled)('input', 'bg-transparent border-none inline-block m-0 p-0 max-w-full box-content outline-none placeholder:invisible font-inherit leading-inherit text-inherit font-size-inherit tracking-normal w-[--sw-width] shadow-none', function (_, _a) {
+    var $disabled = _a.$disabled;
+    return ($disabled ? 'webkit-text-transparent' : '');
 });
+var StyledOverlayContentContainer = (0, style_1.styled)('div', 'overflow-auto rounded-inherit w-[--sw-width]');
 exports.StyledOverlayContentContainer = StyledOverlayContentContainer;
-var getCommaSeparatedValues = function (value, labelKey, locale) {
-    var commaSeparatedValues = value === null || value === void 0 ? void 0 : value.map(function (val) { return val[labelKey]; }).join(',');
+var getCommaSeparatedValues = function (value, limitTags, labelKey, locale) {
+    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]; });
+    var extraTagNumber = (value === null || value === void 0 ? void 0 : value.length) > limitTags ? value.length - limitTags : 0;
+    if (extraTagNumber > 0) {
+        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 }))
+        ? "".concat((0, i18n_interpolation_1.default)(locale.select.selectedValuesPrefix, { values: _commaSeparatedValues }), ".")
         : '';
 };
 var InputContainer = function (_a) {
     var _b;
-    var menuId = _a.menuId, size = _a.size, $value = _a.$value, $labelKey = _a.$labelKey, placeholder = _a.placeholder, props = (0, tslib_1.__rest)(_a, ["menuId", "size", "$value", "$labelKey", "placeholder"]);
+    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 commaSeparatedValues = getCommaSeparatedValues($value, $labelKey, locale);
+    var listboxId = (0, SelectIdsContext_1.useSelectIds)().listboxId;
+    var commaSeparatedValues = getCommaSeparatedValues($value, $limitTags, $labelKey, locale);
     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;
-    var containerRef = React.useRef(null);
+    var containerRef = (0, react_1.useRef)(null);
     if (!props.$searchable) {
-        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [commaSeparatedValues ? (0, jsx_runtime_1.jsx)(hidden_element_1.HiddenElement, (0, tslib_1.__assign)({ id: selectedValuesId }, { children: commaSeparatedValues }), void 0) : null, (0, jsx_runtime_1.jsx)(exports.StyledInputContainer, (0, tslib_1.__assign)({}, props, { "$selectSize": size, "aria-owns": props.$isOpen ? menuId : null, "aria-describedby": ariaDescribedBy, "aria-expanded": props.$isOpen, role: "combobox", ref: containerRef, "aria-placeholder": placeholder !== null && placeholder !== void 0 ? placeholder : locale.select.selectPlaceholder, "aria-haspopup": "listbox" }, { children: props.children
-                        ? React.cloneElement(React.Children.only(props.children), { onFocus: function () { var _a; return (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.focus(); } })
-                        : null }), void 0)] }, void 0));
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [commaSeparatedValues ? ((0, jsx_runtime_1.jsx)(hidden_element_1.HiddenElement, tslib_1.__assign({ id: selectedValuesId }, { children: "".concat(commaSeparatedValues, " ").concat(props.$multi ? locale.select.multiValueNavigationDescription : '') }))) : null, (0, jsx_runtime_1.jsx)(exports.StyledInputContainer, tslib_1.__assign({}, props, { "$selectSize": size, "aria-controls": props.$isOpen ? listboxId : undefined, "aria-owns": props.$isOpen ? listboxId : null, "aria-describedby": ariaDescribedBy, "aria-expanded": props.$isOpen, "aria-autocomplete": "list", role: "combobox", ref: containerRef }, ($value && $value.length > 0
+                    ? {}
+                    : { 'aria-placeholder': placeholder !== null && placeholder !== void 0 ? placeholder : locale.select.selectPlaceholder }), { "aria-haspopup": "listbox" }, { children: props.children
+                        ? (0, react_1.cloneElement)(react_1.Children.only(props.children), tslib_1.__assign({ onFocus: function () { var _a; return (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.focus(); } }, ($value && $value.length > 0 ? {} : { placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : locale.select.selectPlaceholder })))
+                        : null }))] }));
     }
     else {
-        return (0, jsx_runtime_1.jsx)(exports.StyledInputContainer, (0, tslib_1.__assign)({}, props, { "$selectSize": size }), void 0);
+        return (0, jsx_runtime_1.jsx)(exports.StyledInputContainer, tslib_1.__assign({}, props, { "$selectSize": size }));
     }
 };
 exports.InputContainer = InputContainer;
-var Input = React.forwardRef(function (_a, ref) {
+var Input = (0, react_1.forwardRef)(function (_a, ref) {
     var _b;
-    var id = _a.id, $menuId = _a.$menuId, placeholder = _a.placeholder, $value = _a.$value, $labelKey = _a.$labelKey, props = (0, tslib_1.__rest)(_a, ["id", "$menuId", "placeholder", "$value", "$labelKey"]);
+    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 commaSeparatedValues = getCommaSeparatedValues($value, $labelKey, locale);
+    var _d = (0, SelectIdsContext_1.useSelectIds)(), listboxId = _d.listboxId, inputId = _d.inputId;
+    var commaSeparatedValues = getCommaSeparatedValues($value, $limitTags, $labelKey, locale);
     var baseAriaDescribedBy = (_b = props['aria-describedby']) !== null && _b !== void 0 ? _b : '';
     var selectedValuesId = (0, useUniqueId_1.default)();
-    var ariaDescribedBy = commaSeparatedValues || props['aria-label'] ? "".concat(selectedValuesId, " ").concat(baseAriaDescribedBy) : baseAriaDescribedBy;
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [commaSeparatedValues || props['aria-label'] ? ((0, jsx_runtime_1.jsx)(hidden_element_1.HiddenElement, (0, tslib_1.__assign)({ id: selectedValuesId }, { children: "".concat(commaSeparatedValues, " ").concat(props['aria-label'] || '') }), void 0)) : null, (0, jsx_runtime_1.jsx)(exports.StyledInput, (0, tslib_1.__assign)({}, (0, omit_1.default)(props, 'aria-label'), { id: id, "aria-controls": props.$searchable && props.$isOpen ? $menuId : null, ref: ref, "aria-describedby": ariaDescribedBy, placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : locale.select.selectPlaceholder }), void 0)] }, void 0));
+    var ariaDescribedBy = commaSeparatedValues ? "".concat(selectedValuesId, " ").concat(baseAriaDescribedBy) : baseAriaDescribedBy;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [commaSeparatedValues ? ((0, jsx_runtime_1.jsx)(hidden_element_1.HiddenElement, tslib_1.__assign({ id: selectedValuesId }, { children: "".concat(commaSeparatedValues, " ").concat(props.$multi ? locale.select.multiValueNavigationDescription : '') }))) : null, (0, jsx_runtime_1.jsx)(exports.StyledInput, tslib_1.__assign({}, props, { id: inputId, type: props.$searchable ? 'search' : 'text', "aria-controls": props.$searchable && props.$isOpen ? listboxId : null, ref: ref, "aria-describedby": ariaDescribedBy }, ($value && $value.length > 0 ? {} : { placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : locale.select.selectPlaceholder }), { 
+                //@ts-ignore -- props might contain styles
+                style: [props.style, { '--sw-width': !props.$searchable ? '1px' : props.$width || '100%' }] }))] }));
 });
 exports.Input = Input;
 exports.LoadingIndicator = (0, react_1.memo)(function () { return ((0, jsx_runtime_1.jsx)(loader_1.Loader, { size: 16, variant: "clip", className: "mx-1", overrides: {
         Loader: {
-            style: (0, longHandHelpers_1.borderWidth)('2px'),
+            className: 'border-2',
         },
-    } }, void 0)); });
-var select_2 = require("../baseui/select");
-Object.defineProperty(exports, "StyledRoot", { enumerable: true, get: function () { return select_2.StyledRoot; } });
-Object.defineProperty(exports, "StyledClearIcon", { enumerable: true, get: function () { return select_2.StyledClearIcon; } });
-Object.defineProperty(exports, "StyledControlContainer", { enumerable: true, get: function () { return select_2.StyledControlContainer; } });
-Object.defineProperty(exports, "StyledDropdownContainer", { enumerable: true, get: function () { return select_2.StyledDropdownContainer; } });
-Object.defineProperty(exports, "StyledIconsContainer", { enumerable: true, get: function () { return select_2.StyledIconsContainer; } });
-Object.defineProperty(exports, "StyledInputSizer", { enumerable: true, get: function () { return select_2.StyledInputSizer; } });
-Object.defineProperty(exports, "StyledPlaceholder", { enumerable: true, get: function () { return select_2.StyledPlaceholder; } });
-Object.defineProperty(exports, "StyledSearchIconContainer", { enumerable: true, get: function () { return select_2.StyledSearchIconContainer; } });
-Object.defineProperty(exports, "StyledSelectArrow", { enumerable: true, get: function () { return select_2.StyledSelectArrow; } });
-Object.defineProperty(exports, "StyledSingleValue", { enumerable: true, get: function () { return select_2.StyledSingleValue; } });
-Object.defineProperty(exports, "StyledValueContainer", { enumerable: true, get: function () { return select_2.StyledValueContainer; } });
+    } })); });
+var select_1 = require("../baseui/select");
+Object.defineProperty(exports, "StyledRoot", { enumerable: true, get: function () { return select_1.StyledRoot; } });
+Object.defineProperty(exports, "StyledClearIcon", { enumerable: true, get: function () { return select_1.StyledClearIcon; } });
+Object.defineProperty(exports, "StyledControlContainer", { enumerable: true, get: function () { return select_1.StyledControlContainer; } });
+Object.defineProperty(exports, "StyledDropdownContainer", { enumerable: true, get: function () { return select_1.StyledDropdownContainer; } });
+Object.defineProperty(exports, "StyledIconsContainer", { enumerable: true, get: function () { return select_1.StyledIconsContainer; } });
+Object.defineProperty(exports, "StyledInputSizer", { enumerable: true, get: function () { return select_1.StyledInputSizer; } });
+Object.defineProperty(exports, "StyledPlaceholder", { enumerable: true, get: function () { return select_1.StyledPlaceholder; } });
+Object.defineProperty(exports, "StyledSearchIconContainer", { enumerable: true, get: function () { return select_1.StyledSearchIconContainer; } });
+Object.defineProperty(exports, "StyledSelectArrow", { enumerable: true, get: function () { return select_1.StyledSelectArrow; } });
+Object.defineProperty(exports, "StyledSingleValue", { enumerable: true, get: function () { return select_1.StyledSingleValue; } });
+Object.defineProperty(exports, "StyledValueContainer", { enumerable: true, get: function () { return select_1.StyledValueContainer; } });