@cube-dev/ui-kit 0.80.2 → 0.82.0

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

@@ -1,10 +1,10 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.80.2
+ * @cube-dev/ui-kit v0.82.0
  * Released under the MIT license.
  */
 
-export * from './ComboBox';
+export { ComboBox } from './ComboBox';
 
         

package/es/components/fields/DatePicker/DateInput.js

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

package/es/components/fields/DatePicker/DateInputBase.js

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

package/es/components/fields/DatePicker/DatePicker.js

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

package/es/components/fields/DatePicker/DatePickerButton.js

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

package/es/components/fields/DatePicker/DatePickerElement.js

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

package/es/components/fields/DatePicker/DatePickerInput.js

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

package/es/components/fields/DatePicker/DatePickerSegment.js

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

package/es/components/fields/DatePicker/DateRangePicker.js

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

package/es/components/fields/DatePicker/DateRangeSeparatedPicker.js

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

package/es/components/fields/DatePicker/TimeInput.js

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

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

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

package/es/components/fields/DatePicker/intl.js

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

package/es/components/fields/DatePicker/parseDate.js

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

package/es/components/fields/DatePicker/props.js

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

package/es/components/fields/DatePicker/types.js

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

package/es/components/fields/DatePicker/utils.js

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

package/es/components/fields/FileInput/FileInput.js

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

package/es/components/fields/FilterListBox/FilterListBox.js

@@ -1,14 +1,14 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.80.2
+ * @cube-dev/ui-kit v0.82.0
  * Released under the MIT license.
  */
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { forwardRef, useCallback, useLayoutEffect, useMemo, useRef, useState, } from 'react';
+import React, { forwardRef, useCallback, useId, useLayoutEffect, useMemo, useRef, useState, } from 'react';
 import { useFilter, useKeyboard } from 'react-aria';
-import { Section as BaseSection, Item } from 'react-stately';
+import { Section as BaseSection, Item, useListState } from 'react-stately';
 import { LoadingIcon } from '../../../icons';
 import { useProviderProps } from '../../../provider';
 import { BASE_STYLES, COLOR_STYLES, extractStyles, OUTER_STYLES, tasty, } from '../../../tasty';
@@ -113,7 +113,10 @@ export const FilterListBox = forwardRef(function FilterListBox(props, ref) {
             return fieldProps;
         },
     });
-    let { qa, label, extra, labelStyles, isRequired, necessityIndicator, validationState, isDisabled, isLoading, searchPlaceholder = 'Search...', autoFocus, filter, mods: externalMods, emptyLabel, searchInputStyles, listStyles, optionStyles, sectionStyles, headingStyles, searchInputRef, listRef, message, description, styles, focusOnHover, shouldFocusWrap, labelSuffix, selectedKey, defaultSelectedKey, selectedKeys, defaultSelectedKeys, onSelectionChange: externalOnSelectionChange, allowsCustomValue = false, showSelectAll, selectAllLabel, header, footer, size = 'medium', headerStyles, footerStyles, listBoxStyles, items, children: renderChildren, onEscape, isCheckable, onOptionClick, selectionMode = 'single', allValueProps, customValueProps, newCustomValueProps, searchValue: controlledSearchValue, onSearchChange, ...otherProps } = props;
+    let { qa, label, extra, id, labelStyles, isRequired, necessityIndicator, validationState, isDisabled, isLoading, searchPlaceholder = 'Search...', autoFocus, filter, mods: externalMods, emptyLabel, searchInputStyles, listStyles, optionStyles, sectionStyles, headingStyles, searchInputRef, listRef, message, description, styles, focusOnHover, shouldFocusWrap, labelSuffix, selectedKey, defaultSelectedKey, selectedKeys, defaultSelectedKeys, onSelectionChange: externalOnSelectionChange, allowsCustomValue = false, showSelectAll, selectAllLabel, header, footer, size = 'medium', headerStyles, footerStyles, listBoxStyles, items, children: renderChildren, onEscape, isCheckable, onOptionClick, selectionMode = 'single', allValueProps, customValueProps, newCustomValueProps, searchValue: controlledSearchValue, onSearchChange, _internalCollection, ...otherProps } = props;
+    // Generate ID for label-input linking if not provided
+    const generatedId = useId();
+    const inputId = id || generatedId;
     // Preserve the original `children` (may be a render function) before we
     // potentially overwrite it.
     let children = renderChildren;
@@ -142,26 +145,25 @@ export const FilterListBox = forwardRef(function FilterListBox(props, ref) {
             // with the original children value so we don't break runtime.
         }
     }
+    // Use provided collection from FilterPicker or create our own
+    // Hook call order is stable: _internalCollection is consistent per component instance
+    const localCollectionState = _internalCollection
+        ? { collection: _internalCollection }
+        : useListState({
+            children: children,
+            items: items,
+            selectionMode: 'none',
+        });
     // Collect original option keys to avoid duplicating them as custom values.
     const originalKeys = useMemo(() => {
         const keys = new Set();
-        const collectKeys = (nodes) => {
-            React.Children.forEach(nodes, (child) => {
-                if (!child || typeof child !== 'object')
-                    return;
-                if (child.type === Item) {
-                    if (child.key != null)
-                        keys.add(String(child.key));
-                }
-                if (child.props?.children) {
-                    collectKeys(child.props.children);
-                }
-            });
-        };
-        if (children)
-            collectKeys(children);
+        for (const item of localCollectionState.collection) {
+            if (item.type === 'item') {
+                keys.add(String(item.key));
+            }
+        }
         return keys;
-    }, [children]);
+    }, [localCollectionState.collection]);
     // State to keep track of custom (user-entered) items that were selected.
     const [customKeys, setCustomKeys] = useState(new Set());
     // Initialize custom keys from current selection
@@ -315,33 +317,23 @@ export const FilterListBox = forwardRef(function FilterListBox(props, ref) {
         if (!term)
             return childrenToProcess;
         // Helper to determine if the term is already present (exact match on rendered textValue or the key).
-        const doesTermExist = (nodes) => {
-            let exists = false;
-            const checkNodes = (childNodes) => {
-                React.Children.forEach(childNodes, (child) => {
-                    if (!child || typeof child !== 'object')
-                        return;
-                    // Check items directly
-                    if (child.type === Item) {
-                        const childText = child.props.textValue ||
-                            (typeof child.props.children === 'string'
-                                ? child.props.children
-                                : '') ||
-                            String(child.props.children ?? '');
-                        if (term === childText || String(child.key) === term) {
-                            exists = true;
-                        }
-                    }
-                    // Recurse into sections or other wrappers
-                    if (child.props?.children) {
-                        checkNodes(child.props.children);
+        const doesTermExist = (term) => {
+            // Check if term exists in custom keys
+            if (customKeys.has(term)) {
+                return true;
+            }
+            // Check if term exists in original collection
+            for (const item of localCollectionState.collection) {
+                if (item.type === 'item') {
+                    const textValue = item.textValue || String(item.rendered || '');
+                    if (term === textValue || String(item.key) === term) {
+                        return true;
                     }
-                });
-            };
-            checkNodes(nodes);
-            return exists;
+                }
+            }
+            return false;
         };
-        if (doesTermExist(mergedChildren)) {
+        if (doesTermExist(term)) {
             return childrenToProcess;
         }
         // Append the custom option at the end.
@@ -629,14 +621,22 @@ export const FilterListBox = forwardRef(function FilterListBox(props, ref) {
             onOptionClick(key);
         }
     };
-    const searchInput = (_jsxs(SearchWrapperElement, { mods: mods, "data-size": size, children: [isLoading && (_jsx("div", { "data-element": "Prefix", children: _jsx("div", { "data-element": "InputIcon", children: isLoading ? _jsx(LoadingIcon, {}) : null }) })), _jsx(SearchInputElement, { ref: searchInputRef, "data-is-prefix": isLoading ? '' : undefined, type: "search", placeholder: searchPlaceholder, value: searchValue, disabled: isDisabled, autoFocus: autoFocus, "data-autofocus": autoFocus ? '' : undefined, styles: searchInputStyles, "data-size": size, role: "combobox", "aria-expanded": "true", "aria-haspopup": "listbox", "aria-activedescendant": listStateRef.current?.selectionManager.focusedKey != null
+    const searchInput = (_jsxs(SearchWrapperElement, { mods: mods, "data-size": size, children: [isLoading && (_jsx("div", { "data-element": "Prefix", children: _jsx("div", { "data-element": "InputIcon", children: isLoading ? _jsx(LoadingIcon, {}) : null }) })), _jsx(SearchInputElement, { ref: searchInputRef, id: inputId, "data-is-prefix": isLoading ? '' : undefined, type: "search", placeholder: searchPlaceholder, value: searchValue, disabled: isDisabled, autoFocus: autoFocus, "data-autofocus": autoFocus ? '' : undefined, styles: searchInputStyles, "data-size": size, role: "combobox", "aria-expanded": "true", "aria-haspopup": "listbox", "aria-activedescendant": listStateRef.current?.selectionManager.focusedKey != null
                     ? `ListBoxItem-${listStateRef.current?.selectionManager.focusedKey}`
                     : undefined, onChange: (e) => {
                     const value = e.target.value;
                     handleSearchChange(value);
                 }, ...keyboardProps, ...modAttrs(mods) })] }));
     const filterListBoxField = (_jsxs(FilterListBoxWrapperElement, { ref: ref, qa: qa || 'FilterListBox', ...modAttrs(mods), styles: styles, ...focusProps, children: [header ? (_jsx(StyledHeaderWithoutBorder, { "data-size": size, styles: headerStyles, children: header })) : (_jsx("div", { role: "presentation" })), searchInput, showEmptyMessage ? (_jsx(ItemBase, { preset: "t4", color: "#dark-03", size: size, padding: "(.5x - 1bw)", children: emptyLabel !== undefined ? emptyLabel : 'No results found' })) : (_jsx(ListBox, { ref: listBoxRef, "aria-label": innerAriaLabel, selectedKey: selectedKey, defaultSelectedKey: defaultSelectedKey, selectedKeys: selectedKeys, defaultSelectedKeys: defaultSelectedKeys, selectionMode: selectionMode, isDisabled: isDisabled, listRef: listRef, stateRef: listStateRef, listStyles: listStyles, shouldFocusWrap: shouldFocusWrap, optionStyles: optionStyles, sectionStyles: sectionStyles, headingStyles: headingStyles, validationState: validationState, disallowEmptySelection: props.disallowEmptySelection, disabledKeys: props.disabledKeys, focusOnHover: focusOnHover, shouldUseVirtualFocus: true, showSelectAll: showSelectAll, selectAllLabel: selectAllLabel, footer: footer, footerStyles: footerStyles, mods: mods, size: size, styles: listBoxStyles, isCheckable: isCheckable, items: items, allValueProps: allValueProps, onSelectionChange: handleSelectionChange, onEscape: onEscape, onOptionClick: handleOptionClick, children: finalChildren }))] }));
-    return wrapWithField(filterListBoxField, ref, mergeProps({ ...props, styles: undefined }, {}));
+    const finalProps = { ...props, styles: undefined };
+    // Ensure labelProps has the for attribute for label-input linking
+    if (!finalProps.labelProps) {
+        finalProps.labelProps = {};
+    }
+    if (!finalProps.labelProps.for) {
+        finalProps.labelProps.for = inputId;
+    }
+    return wrapWithField(filterListBoxField, ref, mergeProps(finalProps, {}));
 });
 FilterListBox.Item = ListBox.Item;
 FilterListBox.Section = BaseSection;

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

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