@cube-dev/ui-kit 0.72.2 → 0.73.0

package/es/components/fields/ListBox/ListBox.js

@@ -1,17 +1,17 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.72.2
+ * @cube-dev/ui-kit v0.73.0
  * Released under the MIT license.
  */
 
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useHover } from '@react-aria/interactions';
 import { IconMinus } from '@tabler/icons-react';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { forwardRef, useEffect, useMemo, useRef, useState, } from 'react';
 import { useKeyboard, useListBox, useListBoxSection, useOption, } from 'react-aria';
-import { Section as BaseSection, Item, useListState } from 'react-stately';
+import { Section as BaseSection, useListState } from 'react-stately';
 import { useWarn } from '../../../_internal/hooks/use-warn';
 import { CheckIcon } from '../../../icons';
 import { Icon } from '../../../icons/index';
@@ -22,7 +22,9 @@ import { mergeProps, useCombinedRefs } from '../../../utils/react';
 import { useFocus } from '../../../utils/react/interactions';
 // Import Menu styled components for header and footer
 import { StyledDivider, StyledFooter, StyledHeader, StyledSectionHeading, } from '../../actions/Menu/styled';
+import { ItemBase } from '../../content/ItemBase/ItemBase';
 import { useFieldProps, useFormProps, wrapWithField } from '../../form';
+import { Item } from '../../Item';
 const ListBoxWrapperElement = tasty({
     qa: 'ListBox',
     styles: {
@@ -75,111 +77,15 @@ const ListBoxScrollElement = tasty({
         scrollbar: 'styled',
     },
 });
-const OptionElement = tasty({
+// Create an extended ItemBase for ListBox options with 'all' modifier support
+const ListBoxItemBase = tasty(ItemBase, {
     as: 'li',
     styles: {
-        display: 'flex',
-        flow: 'row',
-        placeItems: 'center start',
-        gap: '.75x',
-        padding: '.5x 1x',
         margin: {
             '': '0 0 1bw 0',
             ':last-of-type': '0',
             all: '.5x',
         },
-        height: {
-            '': 'min $size-md',
-            '[data-size="large"]': 'min $size-lg',
-        },
-        boxSizing: 'border-box',
-        radius: '1r',
-        cursor: {
-            '': 'default',
-            disabled: 'not-allowed',
-        },
-        transition: 'theme',
-        border: 0,
-        userSelect: 'none',
-        color: {
-            '': '#dark-02',
-            'selected | pressed': '#dark',
-            disabled: '#dark-04',
-            valid: '#success-text',
-            invalid: '#danger-text',
-        },
-        fill: {
-            '': '#clear',
-            'hovered | focused': '#dark.03',
-            selected: '#dark.09',
-            'selected & (hovered | focused)': '#dark.12',
-            'selected & hovered & focused': '#dark.15',
-            pressed: '#dark.09',
-            valid: '#success-bg',
-            invalid: '#danger-bg',
-            disabled: '#clear',
-        },
-        outline: 0,
-        backgroundClip: 'padding-box',
-        CheckboxWrapper: {
-            cursor: 'pointer',
-            padding: '.75x',
-            margin: '-.75x',
-        },
-        Checkbox: {
-            display: 'grid',
-            placeItems: 'center',
-            radius: '.5r',
-            width: '(2x - 2bw)',
-            height: '(2x - 2bw)',
-            flexShrink: 0,
-            transition: 'theme',
-            opacity: {
-                '': 0,
-                'selected | indeterminate | :hover | focused': 1,
-            },
-            fill: {
-                '': '#white',
-                'selected | indeterminate': '#purple-text',
-                'invalid & !(selected | indeterminate)': '#white',
-                'invalid & (selected | indeterminate)': '#danger',
-                disabled: '#dark.12',
-            },
-            color: {
-                '': '#white',
-                'disabled & !selected': '#clear',
-            },
-            border: {
-                '': '#dark.30',
-                invalid: '#danger',
-                'disabled | ((selected | indeterminate) & !invalid)': '#clear',
-            },
-        },
-        Content: {
-            display: 'flex',
-            flow: 'column',
-            gap: '.25x',
-            flex: 1,
-            width: 'max 100%',
-        },
-        Label: {
-            preset: 't3',
-            color: 'inherit',
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            whiteSpace: 'nowrap',
-            width: 'max 100%',
-        },
-        Description: {
-            preset: 't4',
-            color: {
-                '': '#dark-03',
-            },
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            whiteSpace: 'nowrap',
-            width: 'max 100%',
-        },
     },
 });
 const SectionWrapperElement = tasty({
@@ -204,11 +110,78 @@ const SectionListElement = tasty({
         listStyle: 'none',
     },
 });
+// Checkbox component for multiple selection options
+const ListBoxCheckbox = tasty({
+    as: 'div',
+    styles: {
+        display: 'grid',
+        placeItems: 'center',
+        radius: '.5r',
+        width: '(2x - 2bw)',
+        height: '(2x - 2bw)',
+        flexShrink: 0,
+        transition: 'theme',
+        opacity: {
+            '': 0,
+            'selected | indeterminate | :hover | focused': 1,
+        },
+        fill: {
+            '': '#white',
+            'selected | indeterminate': '#purple-text',
+            'invalid & !(selected | indeterminate)': '#white',
+            'invalid & (selected | indeterminate)': '#danger',
+            disabled: '#dark.12',
+        },
+        color: {
+            '': '#white',
+            'disabled & !selected': '#clear',
+        },
+        border: {
+            '': '#dark.30',
+            invalid: '#danger',
+            'disabled | ((selected | indeterminate) & !invalid)': '#clear',
+        },
+    },
+});
+const ListBoxCheckboxWrapper = tasty({
+    as: 'div',
+    styles: {
+        display: 'grid',
+        placeItems: 'center',
+        placeContent: 'center',
+        cursor: 'pointer',
+        placeSelf: 'stretch',
+    },
+});
 const PROP_STYLES = [...BASE_STYLES, ...OUTER_STYLES, ...COLOR_STYLES];
-const SelectAllOption = ({ label = 'Select All', isSelected, isIndeterminate, isDisabled, isCheckable, size = 'medium', state, lastFocusSourceRef, onClick, }) => {
+const SelectAllOption = ({ label = 'Select All', isSelected, isIndeterminate, isDisabled, isCheckable, size = 'medium', state, lastFocusSourceRef, onClick, allValueProps = {}, }) => {
     const { hoverProps, isHovered } = useHover({ isDisabled });
     const markIcon = isIndeterminate ? (_jsx(Icon, { size: 12, stroke: 3, children: _jsx(IconMinus, {}) })) : (_jsx(CheckIcon, { size: 12, stroke: 3 }));
     const localRef = useRef(null);
+    // Create checkbox icon for select all option
+    const checkboxIcon = useMemo(() => {
+        if (!isCheckable) {
+            return null;
+        }
+        return (_jsx(ListBoxCheckboxWrapper, { "data-element": "CheckboxWrapper", mods: {
+                selected: isSelected,
+                disabled: isDisabled,
+                hovered: isHovered,
+                indeterminate: isIndeterminate,
+            }, children: _jsx(ListBoxCheckbox, { "data-element": "Checkbox", mods: {
+                    selected: isSelected,
+                    disabled: isDisabled,
+                    hovered: isHovered,
+                    indeterminate: isIndeterminate,
+                }, children: (isIndeterminate || isSelected) && markIcon }) }));
+    }, [
+        isCheckable,
+        isSelected,
+        isDisabled,
+        isHovered,
+        isIndeterminate,
+        markIcon,
+    ]);
     const handleOptionClick = (e) => {
         // Mark focus changes from mouse clicks
         if (lastFocusSourceRef) {
@@ -234,14 +207,15 @@ const SelectAllOption = ({ label = 'Select All', isSelected, isIndeterminate, is
             onClick?.(true);
         }
     };
-    return (_jsxs(_Fragment, { children: [_jsxs(OptionElement, { ref: localRef, as: "div", ...hoverProps, "data-size": size, role: "option", "aria-selected": isSelected, mods: {
-                    selected: isSelected,
+    return (_jsxs(_Fragment, { children: [_jsx(ListBoxItemBase, { ref: localRef, "data-size": size, size: size, role: "option", "aria-selected": isSelected, isSelected: isSelected, isDisabled: isDisabled, icon: checkboxIcon, mods: {
                     disabled: isDisabled,
                     checkable: isCheckable,
                     hovered: isHovered,
                     indeterminate: isIndeterminate,
-                    all: true,
-                }, style: { cursor: isDisabled ? 'not-allowed' : 'pointer' }, onClick: handleOptionClick, children: [isCheckable && (_jsx("div", { "data-element": "CheckboxWrapper", children: _jsx("div", { "data-element": "Checkbox", children: (isIndeterminate || isSelected) && markIcon }) })), _jsx("div", { "data-element": "Content", children: _jsx("div", { "data-element": "Label", children: label }) })] }), _jsx(StyledDivider, {})] }));
+                    all: true, // Important: this preserves the 'all' modifier
+                }, ...mergeProps(hoverProps, allValueProps, {
+                    onClick: handleOptionClick,
+                }), children: label }), _jsx(StyledDivider, {})] }));
 };
 export const ListBox = forwardRef(function ListBox(props, ref) {
     props = useProviderProps(props);
@@ -266,7 +240,7 @@ export const ListBox = forwardRef(function ListBox(props, ref) {
             return fieldProps;
         },
     });
-    let { qa, label, extra, labelStyles, isRequired, necessityIndicator, validationState, isDisabled, listStyles, optionStyles, sectionStyles, headingStyles, listRef, message, description, styles, mods: externalMods, size = 'medium', labelSuffix, selectedKey, defaultSelectedKey, selectedKeys, defaultSelectedKeys, shouldUseVirtualFocus, onSelectionChange, stateRef, focusOnHover, header, footer, headerStyles, footerStyles, onEscape, isCheckable, onOptionClick, showSelectAll, selectAllLabel, ...otherProps } = props;
+    let { qa, label, extra, labelStyles, isRequired, necessityIndicator, validationState, isDisabled, listStyles, optionStyles, sectionStyles, headingStyles, listRef, message, description, styles, mods: externalMods, size = 'medium', labelSuffix, selectedKey, defaultSelectedKey, selectedKeys, defaultSelectedKeys, shouldUseVirtualFocus, onSelectionChange, stateRef, focusOnHover, header, footer, headerStyles, footerStyles, onEscape, isCheckable, onOptionClick, showSelectAll, selectAllLabel, allValueProps, ...otherProps } = props;
     const [, forceUpdate] = useState({});
     // Wrap onSelectionChange to prevent selection when disabled and handle React Aria's Set format
     const externalSelectionHandler = onSelectionChange || props.onChange;
@@ -532,7 +506,7 @@ export const ListBox = forwardRef(function ListBox(props, ref) {
         props.selectionMode,
         externalMods,
     ]);
-    const listBoxField = (_jsxs(ListBoxWrapperElement, { ref: ref, qa: qa || 'ListBox', mods: mods, styles: styles, children: [header ? (_jsx(StyledHeader, { styles: headerStyles, "data-size": size, children: header })) : (_jsx("div", { role: "presentation" })), showSelectAll && props.selectionMode === 'multiple' ? (_jsx(SelectAllOption, { label: selectAllLabel || 'Select All', state: listState, lastFocusSourceRef: lastFocusSourceRef, isSelected: selectAllState.isSelected, isIndeterminate: selectAllState.isIndeterminate, isDisabled: isDisabled, isCheckable: isCheckable, size: size, onClick: handleSelectAllClick })) : (_jsxs(_Fragment, { children: [_jsx("div", { role: "presentation" }), _jsx("div", { role: "presentation" })] })), _jsx(ListBoxScrollElement, { ref: scrollRef, mods: mods, ...focusProps, children: _jsx(ListElement, { ...mergedListBoxProps, ref: listRef, styles: listStyles, "aria-disabled": isDisabled || undefined, mods: { sections: hasSections }, style: shouldVirtualize
+    const listBoxField = (_jsxs(ListBoxWrapperElement, { ref: ref, qa: qa || 'ListBox', mods: mods, styles: styles, children: [header ? (_jsx(StyledHeader, { styles: headerStyles, "data-size": size, children: header })) : (_jsx("div", { role: "presentation" })), showSelectAll && props.selectionMode === 'multiple' ? (_jsx(SelectAllOption, { label: selectAllLabel || 'Select All', state: listState, lastFocusSourceRef: lastFocusSourceRef, isSelected: selectAllState.isSelected, isIndeterminate: selectAllState.isIndeterminate, isDisabled: isDisabled, isCheckable: isCheckable, size: size, allValueProps: allValueProps, onClick: handleSelectAllClick })) : (_jsxs(_Fragment, { children: [_jsx("div", { role: "presentation" }), _jsx("div", { role: "presentation" })] })), _jsx(ListBoxScrollElement, { ref: scrollRef, mods: mods, ...focusProps, children: _jsx(ListElement, { ...mergedListBoxProps, ref: listRef, styles: listStyles, "aria-disabled": isDisabled || undefined, mods: { sections: hasSections }, style: shouldVirtualize
                         ? {
                             position: 'relative',
                             height: `${rowVirtualizer.getTotalSize() + 3}px`,
@@ -578,14 +552,44 @@ function Option({ size = 'medium', item, state, styles, isParentDisabled, valida
     const isSelected = state.selectionManager.isSelected(item.key);
     const isFocused = state.selectionManager.focusedKey === item.key;
     const { hoverProps, isHovered } = useHover({ isDisabled });
-    const { optionProps, isPressed } = useOption({
+    const { optionProps, isPressed, labelProps, descriptionProps } = useOption({
         key: item.key,
         isDisabled,
         isSelected,
         shouldSelectOnPressUp: true,
         shouldFocusOnHover: focusOnHover,
     }, state, combinedRef);
-    const description = item?.props?.description;
+    // Create checkbox icon for multiple selection mode
+    const effectiveIcon = useMemo(() => {
+        if (!isCheckable ||
+            state.selectionManager.selectionMode !== 'multiple' ||
+            item.icon) {
+            return (item?.props?.icon ??
+                (state.selectionManager.selectionMode !== 'multiple' ? null : undefined));
+        }
+        return (_jsx(ListBoxCheckboxWrapper, { "data-element": "CheckboxWrapper", mods: {
+                selected: isSelected,
+                disabled: isDisabled,
+                focused: isFocused,
+                hovered: isHovered,
+                invalid: validationState === 'invalid',
+            }, children: _jsx(ListBoxCheckbox, { "data-element": "Checkbox", mods: {
+                    selected: isSelected,
+                    disabled: isDisabled,
+                    focused: isFocused,
+                    hovered: isHovered,
+                    invalid: validationState === 'invalid',
+                }, children: _jsx(CheckIcon, { size: 12, stroke: 3 }) }) }));
+    }, [
+        isCheckable,
+        state.selectionManager.selectionMode,
+        isSelected,
+        isDisabled,
+        isFocused,
+        isHovered,
+        validationState,
+        item.icon,
+    ]);
     // Custom click handler for the entire option
     const handleOptionClick = (e) => {
         // Mark focus changes from mouse clicks
@@ -632,16 +636,26 @@ function Option({ size = 'medium', item, state, styles, isParentDisabled, valida
             }
         }
     };
-    return (_jsxs(OptionElement, { id: `ListBoxItem-${String(item.key)}`, ...mergeProps(optionProps, hoverProps), ref: combinedRef, style: virtualStyle, "data-size": size, "data-index": virtualIndex, mods: {
-            selected: isSelected,
+    // Filter out React Aria props that shouldn't reach the DOM
+    const { onKeyDown, onKeyUp, tabIndex, 'aria-selected': ariaSelected, 'aria-disabled': ariaDisabled, role, ...filteredOptionProps } = optionProps;
+    const theme = { valid: 'success', invalid: 'danger' }[validationState] || 'default';
+    return (_jsx(ListBoxItemBase, { ref: combinedRef, qa: item.props?.qa, id: `ListBoxItem-${String(item.key)}`, ...mergeProps(filteredOptionProps, hoverProps, {
+            onClick: handleOptionClick,
+            onKeyDown,
+            onKeyUp,
+            tabIndex,
+            'aria-selected': ariaSelected,
+            'aria-disabled': ariaDisabled,
+            role,
+        }), theme: theme, style: virtualStyle, "data-size": size, "data-index": virtualIndex, size: size, isSelected: isSelected, isDisabled: isDisabled, icon: effectiveIcon, rightIcon: item.props?.rightIcon, hotkeys: item.props?.hotkeys, suffix: item.props?.suffix, description: item.props?.description, descriptionPlacement: item.props?.descriptionPlacement, labelProps: labelProps, descriptionProps: descriptionProps, styles: styles, tooltip: item.props?.tooltip, defaultTooltipPlacement: "right", mods: {
             focused: isFocused,
-            disabled: isDisabled,
             pressed: isPressed,
             valid: isSelected && validationState === 'valid',
             invalid: isSelected && validationState === 'invalid',
             checkable: isCheckable,
-            hovered: isHovered, // We'll treat focus as hover for the checkbox visibility
-        }, styles: styles, onClick: handleOptionClick, children: [isCheckable && state.selectionManager.selectionMode === 'multiple' && (_jsx("div", { "data-element": "CheckboxWrapper", children: _jsx("div", { "data-element": "Checkbox", children: _jsx(CheckIcon, { size: 12, stroke: 3 }) }) })), _jsxs("div", { "data-element": "Content", children: [_jsx("div", { "data-element": "Label", children: item.rendered }), description ? (_jsx("div", { "data-element": "Description", children: description })) : null] })] }));
+            hovered: isHovered,
+            all: false, // This will be set to true for SelectAllOption
+        }, children: item.rendered }));
 }
 function ListBoxSection(props) {
     const { item, state, optionStyles, headingStyles, sectionStyles, isParentDisabled, validationState, focusOnHover, isCheckable, onClick: onOptionClick, lastFocusSourceRef, } = props;
@@ -650,7 +664,7 @@ function ListBoxSection(props) {
         heading,
         'aria-label': item['aria-label'],
     });
-    return (_jsxs(SectionWrapperElement, { ...itemProps, styles: sectionStyles, children: [heading && (_jsx(StyledSectionHeading, { ...headingProps, styles: headingStyles, children: heading })), _jsx(SectionListElement, { ...groupProps, children: [...item.childNodes]
+    return (_jsxs(SectionWrapperElement, { ...itemProps, styles: sectionStyles, children: [heading && (_jsx(StyledSectionHeading, { ...headingProps, size: props.size, styles: headingStyles, children: heading })), _jsx(SectionListElement, { ...groupProps, children: [...item.childNodes]
                     .filter((node) => state.collection.getItem(node.key))
                     .map((node) => (_jsx(Option, { size: props.size, item: node, state: state, styles: optionStyles, isParentDisabled: isParentDisabled, validationState: validationState, focusOnHover: focusOnHover, isCheckable: isCheckable, lastFocusSourceRef: lastFocusSourceRef, onClick: onOptionClick }, node.key))) })] }));
 }

package/es/components/fields/ListBox/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.72.2
+ * @cube-dev/ui-kit v0.73.0
  * Released under the MIT license.
  */
 

package/es/components/fields/NumberInput/NumberInput.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.72.2
+ * @cube-dev/ui-kit v0.73.0
  * Released under the MIT license.
  */
 

package/es/components/fields/NumberInput/StepButton.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.72.2
+ * @cube-dev/ui-kit v0.73.0
  * Released under the MIT license.
  */
 

package/es/components/fields/PasswordInput/PasswordInput.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.72.2
+ * @cube-dev/ui-kit v0.73.0
  * Released under the MIT license.
  */
 

package/es/components/fields/RadioGroup/Radio.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.72.2
+ * @cube-dev/ui-kit v0.73.0
  * Released under the MIT license.
  */
 

package/es/components/fields/RadioGroup/RadioGroup.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.72.2
+ * @cube-dev/ui-kit v0.73.0
  * Released under the MIT license.
  */
 

package/es/components/fields/RadioGroup/context.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.72.2
+ * @cube-dev/ui-kit v0.73.0
  * Released under the MIT license.
  */
 

package/es/components/fields/RadioGroup/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.72.2
+ * @cube-dev/ui-kit v0.73.0
  * Released under the MIT license.
  */
 

package/es/components/fields/SearchInput/SearchInput.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.72.2
+ * @cube-dev/ui-kit v0.73.0
  * Released under the MIT license.
  */
 

package/es/components/fields/SearchInput/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.72.2
+ * @cube-dev/ui-kit v0.73.0
  * Released under the MIT license.
  */