@cube-dev/ui-kit 0.69.2 → 0.70.0

package/es/components/fields/FilterPicker/FilterPicker.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.69.2
+ * @cube-dev/ui-kit v0.70.0
  * Released under the MIT license.
  */
 
@@ -75,6 +75,8 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
     // Track popover open/close and capture children order for session
     const [isPopoverOpen, setIsPopoverOpen] = useState(false);
     const cachedChildrenOrder = useRef(null);
+    // Cache for sorted items array when using `items` prop
+    const cachedItemsOrder = useRef(null);
     const triggerRef = useRef(null);
     const isControlledSingle = selectedKey !== undefined;
     const isControlledMultiple = selectedKeys !== undefined;
@@ -112,13 +114,14 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
             Children.forEach(nodes, (child) => {
                 if (!child || typeof child !== 'object')
                     return;
-                if (child.key != null) {
-                    if (normalizeKeyValue(child.key) === normalizedLookup) {
-                        foundKey = child.key;
+                const element = child;
+                if (element.key != null) {
+                    if (normalizeKeyValue(element.key) === normalizedLookup) {
+                        foundKey = element.key;
                     }
                 }
-                if (child.props?.children) {
-                    traverse(child.props.children);
+                if (element.props?.children) {
+                    traverse(element.props.children);
                 }
             });
         };
@@ -129,7 +132,7 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
     const mappedSelectedKey = useMemo(() => {
         if (selectionMode !== 'single')
             return null;
-        return findReactKey(effectiveSelectedKey);
+        return effectiveSelectedKey ? findReactKey(effectiveSelectedKey) : null;
     }, [selectionMode, effectiveSelectedKey, findReactKey]);
     const mappedSelectedKeys = useMemo(() => {
         if (selectionMode !== 'multiple')
@@ -157,29 +160,66 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
     };
     // Helper to get selected item labels for display
     const getSelectedLabels = () => {
-        if (!children)
-            return [];
         // Handle "all" selection - return all available labels
         if (selectionMode === 'multiple' && effectiveSelectedKeys === 'all') {
             const allLabels = [];
-            const extractAllLabels = (nodes) => {
-                Children.forEach(nodes, (child) => {
-                    if (!child || typeof child !== 'object')
+            // Extract from items prop if available
+            if (items) {
+                const extractFromItems = (itemsArray) => {
+                    itemsArray.forEach((item) => {
+                        if (item && typeof item === 'object') {
+                            const itemObj = item;
+                            if (Array.isArray(itemObj.children)) {
+                                // Section-like object
+                                extractFromItems(itemObj.children);
+                            }
+                            else {
+                                // Regular item - extract label
+                                const label = itemObj.textValue ||
+                                    itemObj.label ||
+                                    (typeof itemObj.children === 'string'
+                                        ? itemObj.children
+                                        : '') ||
+                                    String(itemObj.children ||
+                                        itemObj.key ||
+                                        itemObj.id ||
+                                        item);
+                                allLabels.push(label);
+                            }
+                        }
+                    });
+                };
+                const itemsArray = Array.isArray(items)
+                    ? items
+                    : Array.from(items);
+                extractFromItems(itemsArray);
+                return allLabels;
+            }
+            // Extract from children if available
+            if (children) {
+                const extractAllLabels = (nodes) => {
+                    if (!nodes)
                         return;
-                    if (child.type === Item) {
-                        const label = child.props.textValue ||
-                            (typeof child.props.children === 'string'
-                                ? child.props.children
-                                : '') ||
-                            String(child.props.children || '');
-                        allLabels.push(label);
-                    }
-                    if (child.props?.children) {
-                        extractAllLabels(child.props.children);
-                    }
-                });
-            };
-            extractAllLabels(children);
+                    Children.forEach(nodes, (child) => {
+                        if (!child || typeof child !== 'object')
+                            return;
+                        const element = child;
+                        if (element.type === Item) {
+                            const label = element.props.textValue ||
+                                (typeof element.props.children === 'string'
+                                    ? element.props.children
+                                    : '') ||
+                                String(element.props.children || '');
+                            allLabels.push(label);
+                        }
+                        if (element.props?.children) {
+                            extractAllLabels(element.props.children);
+                        }
+                    });
+                };
+                extractAllLabels(children);
+                return allLabels;
+            }
             return allLabels;
         }
         const selectedSet = new Set(selectionMode === 'multiple' && effectiveSelectedKeys !== 'all'
@@ -188,50 +228,69 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
                 ? [normalizeKeyValue(effectiveSelectedKey)]
                 : []);
         const labels = [];
-        const extractLabels = (nodes) => {
-            Children.forEach(nodes, (child) => {
-                if (!child || typeof child !== 'object')
-                    return;
-                if (child.type === Item) {
-                    if (selectedSet.has(normalizeKeyValue(child.key))) {
-                        const label = child.props.textValue ||
-                            (typeof child.props.children === 'string'
-                                ? child.props.children
-                                : '') ||
-                            String(child.props.children || '');
-                        labels.push(label);
-                    }
-                }
-                if (child.props?.children) {
-                    extractLabels(child.props.children);
-                }
-            });
-        };
         const processedKeys = new Set();
-        // Modified extractLabels to track which keys we've processed
-        const extractLabelsWithTracking = (nodes) => {
-            Children.forEach(nodes, (child) => {
-                if (!child || typeof child !== 'object')
+        // Extract from items prop if available
+        if (items) {
+            const extractFromItems = (itemsArray) => {
+                itemsArray.forEach((item) => {
+                    if (item && typeof item === 'object') {
+                        const itemObj = item;
+                        if (Array.isArray(itemObj.children)) {
+                            // Section-like object
+                            extractFromItems(itemObj.children);
+                        }
+                        else {
+                            // Regular item - check if selected
+                            const itemKey = itemObj.key || itemObj.id;
+                            if (itemKey != null &&
+                                selectedSet.has(normalizeKeyValue(itemKey))) {
+                                const label = itemObj.textValue ||
+                                    itemObj.label ||
+                                    (typeof itemObj.children === 'string'
+                                        ? itemObj.children
+                                        : '') ||
+                                    String(itemObj.children || itemKey);
+                                labels.push(label);
+                                processedKeys.add(normalizeKeyValue(itemKey));
+                            }
+                        }
+                    }
+                });
+            };
+            const itemsArray = Array.isArray(items)
+                ? items
+                : Array.from(items);
+            extractFromItems(itemsArray);
+        }
+        // Extract from children if available (for mixed mode or fallback)
+        if (children) {
+            const extractLabelsWithTracking = (nodes) => {
+                if (!nodes)
                     return;
-                if (child.type === Item) {
-                    const childKey = String(child.key);
-                    if (selectedSet.has(childKey)) {
-                        const label = child.props.textValue ||
-                            (typeof child.props.children === 'string'
-                                ? child.props.children
-                                : '') ||
-                            String(child.props.children || '');
-                        labels.push(label);
-                        processedKeys.add(childKey);
+                Children.forEach(nodes, (child) => {
+                    if (!child || typeof child !== 'object')
+                        return;
+                    const element = child;
+                    if (element.type === Item) {
+                        const childKey = String(element.key);
+                        if (selectedSet.has(normalizeKeyValue(childKey))) {
+                            const label = element.props.textValue ||
+                                (typeof element.props.children === 'string'
+                                    ? element.props.children
+                                    : '') ||
+                                String(element.props.children || '');
+                            labels.push(label);
+                            processedKeys.add(normalizeKeyValue(childKey));
+                        }
                     }
-                }
-                if (child.props?.children) {
-                    extractLabelsWithTracking(child.props.children);
-                }
-            });
-        };
-        extractLabelsWithTracking(children);
-        // Handle custom values that don't have corresponding children
+                    if (element.props?.children) {
+                        extractLabelsWithTracking(element.props.children);
+                    }
+                });
+            };
+            extractLabelsWithTracking(children);
+        }
+        // Handle custom values that don't have corresponding items/children
         const selectedKeysArr = selectionMode === 'multiple' && effectiveSelectedKeys !== 'all'
             ? (effectiveSelectedKeys || []).map(String)
             : effectiveSelectedKey != null
@@ -271,7 +330,8 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
     }, []); // run only once on mount
     // Function to sort children with selected items on top
     const getSortedChildren = useCallback(() => {
-        if (!children)
+        // If children is not provided or is a render function, return it as-is
+        if (!children || typeof children === 'function')
             return children;
         // When the popover is **closed**, reuse the cached order if we have it to
         // avoid unnecessary reflows. If we don't have a cache yet (first open),
@@ -319,7 +379,7 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
         // Helper function to sort children array
         const sortChildrenArray = (childrenArray) => {
             const cloneWithNormalizedKey = (item) => cloneElement(item, {
-                key: normalizeKeyValue(item.key),
+                key: item.key ? normalizeKeyValue(item.key) : undefined,
             });
             const selected = [];
             const unselected = [];
@@ -328,25 +388,30 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
                     unselected.push(child);
                     return;
                 }
+                const element = child;
                 // Handle sections - sort items within each section
-                if (child.type === BaseSection ||
-                    child.type?.displayName === 'Section') {
-                    const sectionChildren = Array.isArray(child.props.children)
-                        ? child.props.children
-                        : [child.props.children];
+                if (element.type === BaseSection ||
+                    element.type?.displayName === 'Section') {
+                    const sectionChildren = Array.isArray(element.props.children)
+                        ? element.props.children
+                        : [element.props.children];
                     const selectedItems = [];
                     const unselectedItems = [];
                     sectionChildren.forEach((sectionChild) => {
-                        if (sectionChild &&
-                            typeof sectionChild === 'object' &&
-                            (sectionChild.type === Item ||
-                                sectionChild.type?.displayName === 'Item')) {
-                            const clonedItem = cloneWithNormalizedKey(sectionChild);
-                            if (isItemSelected(sectionChild)) {
-                                selectedItems.push(clonedItem);
+                        if (sectionChild && typeof sectionChild === 'object') {
+                            const sectionElement = sectionChild;
+                            if (sectionElement.type === Item ||
+                                sectionElement.type?.displayName === 'Item') {
+                                const clonedItem = cloneWithNormalizedKey(sectionElement);
+                                if (isItemSelected(sectionElement)) {
+                                    selectedItems.push(clonedItem);
+                                }
+                                else {
+                                    unselectedItems.push(clonedItem);
+                                }
                             }
                             else {
-                                unselectedItems.push(clonedItem);
+                                unselectedItems.push(sectionChild);
                             }
                         }
                         else {
@@ -354,15 +419,15 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
                         }
                     });
                     // Create new section with sorted children, preserving React element properly
-                    unselected.push(cloneElement(child, {
-                        ...child.props,
+                    unselected.push(cloneElement(element, {
+                        ...element.props,
                         children: [...selectedItems, ...unselectedItems],
                     }));
                 }
                 // Handle non-section elements (items, dividers, etc.)
                 else {
-                    const clonedItem = cloneWithNormalizedKey(child);
-                    if (isItemSelected(child)) {
+                    const clonedItem = cloneWithNormalizedKey(element);
+                    if (isItemSelected(element)) {
                         selected.push(clonedItem);
                     }
                     else {
@@ -388,8 +453,85 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
         selectionMode,
         isPopoverOpen,
     ]);
+    // Compute sorted items array when using `items` prop
+    const getSortedItems = useCallback(() => {
+        if (!items)
+            return items;
+        // Reuse cached order when popover is closed to avoid needless re-renders
+        if (!isPopoverOpen && cachedItemsOrder.current) {
+            return cachedItemsOrder.current;
+        }
+        const selectedSet = new Set();
+        const addSelected = (key) => {
+            if (key != null)
+                selectedSet.add(String(key));
+        };
+        if (selectionMode === 'multiple') {
+            if (selectionsWhenClosed.current.multiple === 'all') {
+                // Do not sort when all selected – keep original order
+                return items;
+            }
+            selectionsWhenClosed.current.multiple.forEach(addSelected);
+        }
+        else {
+            if (selectionsWhenClosed.current.single != null) {
+                addSelected(selectionsWhenClosed.current.single);
+            }
+        }
+        if (selectedSet.size === 0) {
+            return items;
+        }
+        // Helpers to extract key from item object
+        const getItemKey = (obj) => {
+            if (obj == null || typeof obj !== 'object')
+                return undefined;
+            const item = obj;
+            if (item.key != null)
+                return String(item.key);
+            if (item.id != null)
+                return String(item.id);
+            return undefined;
+        };
+        const sortArray = (arr) => {
+            const selectedArr = [];
+            const unselectedArr = [];
+            arr.forEach((obj) => {
+                const item = obj;
+                if (obj && Array.isArray(item.children)) {
+                    // Section-like object – keep order, but sort its children
+                    const sortedChildren = sortArray(item.children);
+                    unselectedArr.push({ ...item, children: sortedChildren });
+                }
+                else {
+                    const key = getItemKey(obj);
+                    if (key && selectedSet.has(key)) {
+                        selectedArr.push(obj);
+                    }
+                    else {
+                        unselectedArr.push(obj);
+                    }
+                }
+            });
+            return [...selectedArr, ...unselectedArr];
+        };
+        const itemsArray = Array.isArray(items)
+            ? items
+            : Array.from(items);
+        const sorted = sortArray(itemsArray);
+        if (isPopoverOpen || !cachedItemsOrder.current) {
+            cachedItemsOrder.current = sorted;
+        }
+        return sorted;
+    }, [
+        items,
+        selectionMode,
+        isPopoverOpen,
+        selectionsWhenClosed.current.multiple,
+        selectionsWhenClosed.current.single,
+    ]);
+    const finalItems = getSortedItems();
     // FilterListBox handles custom values internally when allowsCustomValue={true}
-    // We only provide the sorted original children
+    // We provide sorted children (if any) and sorted items
     const finalChildren = getSortedChildren();
     const renderTriggerContent = () => {
         // When there is a selection and a custom summary renderer is provided – use it.
@@ -464,7 +606,7 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
                 ...externalMods,
             }, icon: icon, rightIcon: rightIcon !== undefined ? (rightIcon) : (_jsx(DirectionIcon, { to: state.isOpen ? 'top' : 'bottom' })), styles: styles, ...keyboardProps, "aria-label": `${props['aria-label'] ?? props.label ?? ''}`, children: renderTriggerContent() }));
     };
-    const filterPickerField = (_jsx(FilterPickerWrapper, { qa: props.qa || 'FilterPicker', styles: styles, ...otherProps, children: _jsxs(DialogTrigger, { type: "popover", placement: "bottom start", styles: triggerStyles, shouldUpdatePosition: shouldUpdatePosition, shouldFlip: shouldFlip, isDismissable: true, children: [renderTrigger, (close) => (_jsx(Dialog, { display: "grid", styles: { gridRows: '1sf', ...popoverStyles }, children: _jsx(FocusScope, { restoreFocus: true, children: _jsx(FilterListBox, { autoFocus: true, items: items, "aria-label": `${props['aria-label'] ?? props.label ?? ''} Picker`, selectedKey: selectionMode === 'single' ? mappedSelectedKey : undefined, selectedKeys: selectionMode === 'multiple' ? mappedSelectedKeys : undefined, disabledKeys: disabledKeys, focusOnHover: focusOnHover, shouldFocusWrap: shouldFocusWrap, allowsCustomValue: allowsCustomValue, selectionMode: selectionMode, validationState: validationState, isDisabled: isDisabled, stateRef: listStateRef, isCheckable: isCheckable, mods: {
+    const filterPickerField = (_jsx(FilterPickerWrapper, { qa: props.qa || 'FilterPicker', styles: styles, ...otherProps, children: _jsxs(DialogTrigger, { type: "popover", placement: "bottom start", styles: triggerStyles, shouldUpdatePosition: shouldUpdatePosition, shouldFlip: shouldFlip, isDismissable: true, children: [renderTrigger, (close) => (_jsx(Dialog, { display: "grid", styles: { gridRows: '1sf', ...popoverStyles }, children: _jsx(FocusScope, { restoreFocus: true, children: _jsx(FilterListBox, { autoFocus: true, items: items ? finalItems : undefined, "aria-label": `${props['aria-label'] ?? props.label ?? ''} Picker`, selectedKey: selectionMode === 'single' ? mappedSelectedKey : undefined, selectedKeys: selectionMode === 'multiple' ? mappedSelectedKeys : undefined, disabledKeys: disabledKeys, focusOnHover: focusOnHover, shouldFocusWrap: shouldFocusWrap, allowsCustomValue: allowsCustomValue, selectionMode: selectionMode, validationState: validationState, isDisabled: isDisabled, stateRef: listStateRef, isCheckable: isCheckable, mods: {
                                 popover: true,
                             }, size: size === 'small' ? 'medium' : size, showSelectAll: showSelectAll, selectAllLabel: selectAllLabel, header: header, footer: footer, headerStyles: headerStyles, footerStyles: footerStyles, qa: `${props.qa || 'FilterPicker'}ListBox`, onEscape: () => close(), onOptionClick: (key) => {
                                 // For FilterPicker, clicking the content area should close the popover
@@ -500,7 +642,8 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
                                 }
                                 // Update latest selection ref synchronously
                                 if (selectionMode === 'single') {
-                                    latestSelectionRef.current.single = selection;
+                                    latestSelectionRef.current.single =
+                                        selection != null ? String(selection) : null;
                                 }
                                 else {
                                     if (selection === 'all') {
@@ -515,16 +658,24 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
                                         latestSelectionRef.current.multiple = Array.from(new Set(processSelectionArray(selection)));
                                     }
                                     else {
-                                        latestSelectionRef.current.multiple = selection;
+                                        latestSelectionRef.current.multiple =
+                                            selection === 'all'
+                                                ? 'all'
+                                                : Array.isArray(selection)
+                                                    ? selection.map(String)
+                                                    : [];
                                     }
                                 }
                                 onSelectionChange?.(selection);
                                 if (selectionMode === 'single') {
                                     close();
                                 }
-                            }, children: finalChildren }) }) }))] }) }));
+                            }, children: (children
+                                ? finalChildren
+                                : undefined) }) }) }))] }) }));
     return wrapWithField(filterPickerField, ref, mergeProps({
         ...props,
+        children: undefined,
         styles: undefined,
     }, {}));
 });

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

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

package/es/components/fields/Input/Input.js

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

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

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

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.69.2
+ * @cube-dev/ui-kit v0.70.0
  * Released under the MIT license.
  */
 
@@ -89,8 +89,8 @@ const OptionElement = tasty({
             all: '.5x',
         },
         height: {
-            '': 'min @size-md',
-            '[data-size="large"]': 'min @size-lg',
+            '': 'min $size-md',
+            '[data-size="large"]': 'min $size-lg',
         },
         boxSizing: 'border-box',
         radius: '1r',

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.69.2
+ * @cube-dev/ui-kit v0.70.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.69.2
+ * @cube-dev/ui-kit v0.70.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.69.2
+ * @cube-dev/ui-kit v0.70.0
  * Released under the MIT license.
  */
 
@@ -27,7 +27,7 @@ const StepButtonElement = tasty(Button, {
             pressed: '#purple.10',
             '[disabled]': '#dark.0',
         },
-        '@icon-size': '1fs',
+        '$icon-size': '1fs',
     },
 });
 /**

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.69.2
+ * @cube-dev/ui-kit v0.70.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.69.2
+ * @cube-dev/ui-kit v0.70.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.69.2
+ * @cube-dev/ui-kit v0.70.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.69.2
+ * @cube-dev/ui-kit v0.70.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.69.2
+ * @cube-dev/ui-kit v0.70.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.69.2
+ * @cube-dev/ui-kit v0.70.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.69.2
+ * @cube-dev/ui-kit v0.70.0
  * Released under the MIT license.
  */