@cube-dev/ui-kit 0.64.0 → 0.64.1

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

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

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

@@ -0,0 +1,494 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.64.1
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, cloneElement, forwardRef, isValidElement, useEffect, useMemo, useRef, useState, } from 'react';
+import { useFilter, useListBox, useListBoxSection, useOption, } from 'react-aria';
+import { Section as BaseSection, Item, useListState } from 'react-stately';
+import { LoadingIcon, SearchIcon } from '../../../icons';
+import { useProviderProps } from '../../../provider';
+import { BASE_STYLES, COLOR_STYLES, extractStyles, OUTER_STYLES, tasty, } from '../../../tasty';
+import { mergeProps, modAttrs, useCombinedRefs } from '../../../utils/react';
+import { useFocus } from '../../../utils/react/interactions';
+import { useFieldProps, useFormProps, wrapWithField } from '../../form';
+import { DEFAULT_INPUT_STYLES, INPUT_WRAPPER_STYLES, } from '../TextInput/TextInputBase';
+const ListBoxWrapperElement = tasty({
+    styles: {
+        display: 'flex',
+        flow: 'column',
+        gap: 0,
+        position: 'relative',
+        radius: true,
+        fill: '#white',
+        color: '#dark-02',
+        transition: 'theme',
+        outline: {
+            '': '#purple-03.0',
+            'invalid & focused': '#danger.50',
+            focused: '#purple-03',
+        },
+        border: {
+            '': true,
+            focused: '#purple-text',
+            valid: '#success-text.50',
+            invalid: '#danger-text.50',
+            disabled: true,
+        },
+    },
+});
+const SearchWrapperElement = tasty({
+    styles: {
+        ...INPUT_WRAPPER_STYLES,
+        border: '#clear',
+        radius: '1r top',
+        borderBottom: '1bw solid #border',
+    },
+});
+const SearchInputElement = tasty({
+    as: 'input',
+    styles: DEFAULT_INPUT_STYLES,
+});
+const ListElement = tasty({
+    as: 'ul',
+    styles: {
+        display: 'flex',
+        gap: '1bw',
+        flow: 'column',
+        margin: '0',
+        padding: '.5x',
+        listStyle: 'none',
+        height: 'auto',
+        overflow: 'auto',
+        scrollbar: 'styled',
+    },
+});
+const OptionElement = tasty({
+    as: 'li',
+    styles: {
+        display: 'flex',
+        flow: 'column',
+        gap: '.25x',
+        padding: '.75x 1x',
+        radius: '1r',
+        cursor: 'pointer',
+        transition: 'theme',
+        outline: 0,
+        border: 0,
+        userSelect: 'none',
+        color: {
+            '': '#dark-02',
+            'selected | pressed': '#dark',
+            disabled: '#dark-04',
+            valid: '#success-text',
+            invalid: '#danger-text',
+        },
+        fill: {
+            '': '#clear',
+            focused: '#dark.03',
+            selected: '#dark.06',
+            'selected & focused': '#dark.09',
+            pressed: '#dark.06',
+            valid: '#success-bg',
+            invalid: '#danger-bg',
+            disabled: '#clear',
+        },
+        Label: {
+            preset: 't3',
+            color: 'inherit',
+        },
+        Description: {
+            preset: 't4',
+            color: {
+                '': '#dark-03',
+            },
+        },
+    },
+});
+const SectionWrapperElement = tasty({
+    as: 'li',
+    styles: {
+        display: 'block',
+    },
+});
+const SectionHeadingElement = tasty({
+    styles: {
+        preset: 't4 strong',
+        color: '#dark-03',
+        padding: '.5x 1x .25x',
+        userSelect: 'none',
+    },
+});
+const SectionListElement = tasty({
+    as: 'ul',
+    styles: {
+        display: 'flex',
+        gap: '1bw',
+        flow: 'column',
+        margin: '0',
+        padding: '0',
+        listStyle: 'none',
+    },
+});
+const DividerElement = tasty({
+    as: 'li',
+    styles: {
+        height: '1bw',
+        fill: '#border',
+        margin: '.5x 0',
+    },
+});
+const PROP_STYLES = [...BASE_STYLES, ...OUTER_STYLES, ...COLOR_STYLES];
+export const ListBox = forwardRef(function ListBox(props, ref) {
+    props = useProviderProps(props);
+    props = useFormProps(props);
+    props = useFieldProps(props, {
+        valuePropsMapper: ({ value, onChange }) => {
+            const fieldProps = {};
+            if (props.selectionMode === 'multiple') {
+                fieldProps.selectedKeys = Array.isArray(value)
+                    ? value
+                    : value
+                        ? [value]
+                        : [];
+            }
+            else {
+                fieldProps.selectedKey = value ?? null;
+            }
+            fieldProps.onSelectionChange = (key) => {
+                if (props.selectionMode === 'multiple') {
+                    if (Array.isArray(key)) {
+                        onChange(key);
+                    }
+                    else if (key instanceof Set) {
+                        onChange(Array.from(key));
+                    }
+                    else {
+                        onChange(key ? [key] : []);
+                    }
+                }
+                else {
+                    if (key instanceof Set) {
+                        onChange(key.size === 0 ? null : Array.from(key)[0]);
+                    }
+                    else {
+                        onChange(key);
+                    }
+                }
+            };
+            return fieldProps;
+        },
+    });
+    let { qa, label, extra, labelStyles, isRequired, necessityIndicator, validationState, isDisabled, isLoading, isSearchable = false, searchPlaceholder = 'Search...', autoFocus, filter, searchInputStyles, listStyles, optionStyles, sectionStyles, headingStyles, searchInputRef, listRef, message, description, styles, labelSuffix, selectedKey, defaultSelectedKey, selectedKeys, defaultSelectedKeys, onSelectionChange, ...otherProps } = props;
+    const [searchValue, setSearchValue] = useState('');
+    const { contains } = useFilter({ sensitivity: 'base' });
+    // Create filtered children based on search
+    const filteredChildren = useMemo(() => {
+        if (!isSearchable || !searchValue.trim() || !props.children) {
+            return props.children;
+        }
+        const filterFn = filter || contains;
+        // Returns `true` if the given element's text value matches the search.
+        const filterChild = (child) => {
+            if (!isValidElement(child))
+                return false;
+            const { textValue, children } = child.props;
+            // Prefer an explicit textValue prop (React Aria's Item), then children, then key.
+            let candidate = '';
+            if (typeof textValue === 'string') {
+                candidate = textValue;
+            }
+            else if (typeof children === 'string') {
+                candidate = children;
+            }
+            else if (Array.isArray(children)) {
+                candidate = children.join(' ');
+            }
+            else if (child.key != null) {
+                candidate = String(child.key);
+            }
+            return filterFn(candidate, searchValue);
+        };
+        // Filters a Section element and returns a cloned element with only the matching children.
+        const filterSection = (section) => {
+            if (!isValidElement(section))
+                return null;
+            const childrenArray = Children.toArray(section.props.children);
+            const filteredSectionChildren = childrenArray.filter(filterChild);
+            if (filteredSectionChildren.length === 0)
+                return null;
+            return cloneElement(section, { children: filteredSectionChildren });
+        };
+        const childrenArray = Children.toArray(props.children);
+        const result = childrenArray
+            .map((child) => {
+            if (isValidElement(child) &&
+                (child.type === BaseSection || child.props?.title)) {
+                return filterSection(child);
+            }
+            return filterChild(child) ? child : null;
+        })
+            .filter(Boolean);
+        return result.length === 0 ? null : result;
+    }, [isSearchable, searchValue, props.children, filter, contains]);
+    // Create filtered items based on search
+    const filteredItems = useMemo(() => {
+        if (!isSearchable || !searchValue.trim()) {
+            return props.items;
+        }
+        const filterFn = filter || contains;
+        if (props.items) {
+            return Array.from(props.items).filter((item) => {
+                const textValue = typeof item === 'string'
+                    ? item
+                    : item?.textValue || item?.name || String(item);
+                return filterFn(textValue, searchValue);
+            });
+        }
+        return undefined;
+    }, [isSearchable, searchValue, props.items, filter, contains]);
+    // Wrap onSelectionChange to prevent selection when disabled and handle React Aria's Set format
+    const externalSelectionHandler = onSelectionChange || props.onChange;
+    const wrappedOnSelectionChange = useMemo(() => {
+        if (!externalSelectionHandler)
+            return undefined;
+        return (keys) => {
+            // Don't allow selection changes when disabled
+            if (isDisabled) {
+                return;
+            }
+            // React Aria always passes a Set for selection changes
+            // For single selection mode, we extract the first (and only) key
+            if (keys instanceof Set) {
+                if (keys.size === 0) {
+                    externalSelectionHandler(props.selectionMode === 'multiple' ? [] : null);
+                }
+                else if (props.selectionMode === 'multiple') {
+                    externalSelectionHandler(Array.from(keys));
+                }
+                else {
+                    externalSelectionHandler(Array.from(keys)[0]);
+                }
+            }
+            else {
+                externalSelectionHandler(keys);
+            }
+        };
+    }, [externalSelectionHandler, isDisabled, props.selectionMode]);
+    // Prepare props for useListState with correct selection props
+    const listStateProps = {
+        ...props,
+        items: filteredItems,
+        children: filteredChildren,
+        onSelectionChange: wrappedOnSelectionChange,
+        isDisabled,
+        selectionMode: props.selectionMode || 'single',
+    };
+    // Set selection props based on mode
+    if (listStateProps.selectionMode === 'multiple') {
+        if (selectedKeys !== undefined) {
+            listStateProps.selectedKeys =
+                selectedKeys === 'all' ? 'all' : new Set(selectedKeys);
+        }
+        if (defaultSelectedKeys !== undefined) {
+            listStateProps.defaultSelectedKeys =
+                defaultSelectedKeys === 'all'
+                    ? 'all'
+                    : new Set(defaultSelectedKeys);
+        }
+        // Remove single-selection props if any
+        delete listStateProps.selectedKey;
+        delete listStateProps.defaultSelectedKey;
+    }
+    else {
+        if (selectedKey !== undefined) {
+            listStateProps.selectedKey = selectedKey;
+        }
+        if (defaultSelectedKey !== undefined) {
+            // useListState expects a Set for uncontrolled selections, even in single-selection mode
+            // so convert the provided key into a Set. Passing an empty Set means no default selection.
+            listStateProps.defaultSelectedKeys =
+                defaultSelectedKey == null ? new Set() : new Set([defaultSelectedKey]);
+        }
+        // Remove set-based props if any
+        delete listStateProps.selectedKeys;
+        delete listStateProps.defaultSelectedKey;
+    }
+    const listState = useListState(listStateProps);
+    // Manually sync controlled selection if needed
+    useEffect(() => {
+        if (selectedKey !== undefined) {
+            const currentSelection = listState.selectionManager.selectedKeys;
+            const expectedSelection = selectedKey !== null ? new Set([selectedKey]) : new Set();
+            // Check if the current selection matches the expected selection
+            const currentKeys = Array.from(currentSelection);
+            const expectedKeys = Array.from(expectedSelection);
+            const selectionChanged = currentKeys.length !== expectedKeys.length ||
+                currentKeys.some((key) => !expectedSelection.has(key)) ||
+                expectedKeys.some((key) => !currentSelection.has(key));
+            if (selectionChanged) {
+                listState.selectionManager.setSelectedKeys(expectedSelection);
+            }
+        }
+    }, [selectedKey, listState.selectionManager]);
+    styles = extractStyles(otherProps, PROP_STYLES, styles);
+    ref = useCombinedRefs(ref);
+    searchInputRef = useCombinedRefs(searchInputRef);
+    listRef = useCombinedRefs(listRef);
+    const { listBoxProps } = useListBox({
+        ...props,
+        'aria-label': props['aria-label'] || label?.toString(),
+        isDisabled,
+        shouldUseVirtualFocus: isSearchable,
+        shouldFocusWrap: true,
+    }, listState, listRef);
+    const { isFocused, focusProps } = useFocus({ isDisabled });
+    const isInvalid = validationState === 'invalid';
+    const mods = useMemo(() => ({
+        invalid: isInvalid,
+        valid: validationState === 'valid',
+        disabled: isDisabled,
+        focused: isFocused,
+        loading: isLoading,
+        searchable: isSearchable,
+    }), [
+        isInvalid,
+        validationState,
+        isDisabled,
+        isFocused,
+        isLoading,
+        isSearchable,
+    ]);
+    const searchInput = isSearchable ? (_jsxs(SearchWrapperElement, { mods: mods, "data-size": "small", children: [_jsx(SearchInputElement, { ref: searchInputRef, "data-is-prefix": true, type: "search", placeholder: searchPlaceholder, value: searchValue, disabled: isDisabled, autoFocus: autoFocus && isSearchable, "data-autofocus": autoFocus && isSearchable ? '' : undefined, styles: searchInputStyles, "data-size": "small", "aria-controls": listBoxProps.id, "aria-activedescendant": listState.selectionManager.focusedKey != null
+                    ? `${listBoxProps.id}-option-${listState.selectionManager.focusedKey}`
+                    : undefined, onChange: (e) => setSearchValue(e.target.value), onKeyDown: (e) => {
+                    if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+                        e.preventDefault();
+                        const isArrowDown = e.key === 'ArrowDown';
+                        const keyGetter = isArrowDown
+                            ? listState.collection.getKeyAfter.bind(listState.collection)
+                            : listState.collection.getKeyBefore.bind(listState.collection);
+                        // Helper function to find next selectable item (skip section headers)
+                        const findNextSelectableKey = (startKey) => {
+                            let nextKey = startKey;
+                            // Keep looking for a selectable item (not a section header)
+                            while (nextKey != null) {
+                                const item = listState.collection.getItem(nextKey);
+                                if (item && item.type !== 'section') {
+                                    return nextKey;
+                                }
+                                nextKey = keyGetter(nextKey);
+                            }
+                            return null;
+                        };
+                        // Helper function to find first/last selectable item
+                        const findFirstLastSelectableKey = () => {
+                            const allKeys = Array.from(listState.collection.getKeys());
+                            const keysToCheck = isArrowDown ? allKeys : allKeys.reverse();
+                            for (const key of keysToCheck) {
+                                const item = listState.collection.getItem(key);
+                                if (item && item.type !== 'section') {
+                                    return key;
+                                }
+                            }
+                            return null;
+                        };
+                        let nextKey;
+                        const currentKey = listState.selectionManager.focusedKey;
+                        if (currentKey == null) {
+                            // No current focus, find first/last selectable item
+                            nextKey = findFirstLastSelectableKey();
+                        }
+                        else {
+                            // Find next selectable item from current position
+                            const candidateKey = keyGetter(currentKey);
+                            nextKey = findNextSelectableKey(candidateKey);
+                            // If no next key found, wrap to first/last selectable item
+                            if (nextKey == null) {
+                                nextKey = findFirstLastSelectableKey();
+                            }
+                        }
+                        if (nextKey != null) {
+                            listState.selectionManager.setFocusedKey(nextKey);
+                        }
+                    }
+                    else if (e.key === 'Enter' ||
+                        (e.key === ' ' && props.selectionMode === 'multiple')) {
+                        const focusedKey = listState.selectionManager.focusedKey;
+                        if (focusedKey != null) {
+                            e.preventDefault();
+                            if (props.selectionMode === 'multiple') {
+                                listState.selectionManager.toggleSelection(focusedKey);
+                            }
+                            else {
+                                listState.selectionManager.select(focusedKey);
+                            }
+                        }
+                    }
+                }, ...modAttrs(mods) }), _jsx("div", { "data-element": "Prefix", children: _jsx("div", { "data-element": "InputIcon", children: isLoading ? _jsx(LoadingIcon, {}) : _jsx(SearchIcon, {}) }) })] })) : null;
+    const listBoxField = (_jsxs(ListBoxWrapperElement, { ref: ref, qa: qa || 'ListBox', ...modAttrs(mods), styles: styles, ...focusProps, children: [searchInput, _jsx(ListElement, { ...listBoxProps, ref: listRef, styles: listStyles, "aria-disabled": isDisabled || undefined, children: (() => {
+                    const renderedItems = [];
+                    let isFirstSection = true;
+                    for (const item of listState.collection) {
+                        if (item.type === 'section') {
+                            if (!isFirstSection) {
+                                renderedItems.push(_jsx(DividerElement, { role: "separator", "aria-orientation": "horizontal" }, `divider-${String(item.key)}`));
+                            }
+                            renderedItems.push(_jsx(ListBoxSection, { item: item, state: listState, optionStyles: optionStyles, headingStyles: headingStyles, sectionStyles: sectionStyles, isParentDisabled: isDisabled, validationState: validationState }, item.key));
+                            isFirstSection = false;
+                        }
+                        else {
+                            renderedItems.push(_jsx(Option, { item: item, state: listState, styles: optionStyles, isParentDisabled: isDisabled, validationState: validationState }, item.key));
+                        }
+                    }
+                    return renderedItems;
+                })() })] }));
+    return wrapWithField(listBoxField, ref, mergeProps({ ...props, styles: undefined }, {}));
+});
+function Option({ item, state, styles, isParentDisabled, validationState }) {
+    const ref = useRef(null);
+    const isDisabled = isParentDisabled || state.disabledKeys.has(item.key);
+    const isSelected = state.selectionManager.isSelected(item.key);
+    const { optionProps, isPressed, isFocused: optionFocused, } = useOption({
+        key: item.key,
+        isDisabled,
+        isSelected,
+        shouldSelectOnPressUp: true,
+        shouldFocusOnHover: true,
+    }, state, ref);
+    const description = item?.props?.description;
+    return (_jsxs(OptionElement, { ...optionProps, ref: ref, mods: {
+            selected: isSelected,
+            focused: optionFocused,
+            disabled: isDisabled,
+            pressed: isPressed,
+            valid: isSelected && validationState === 'valid',
+            invalid: isSelected && validationState === 'invalid',
+        }, styles: styles, children: [_jsx("div", { "data-element": "Label", children: item.rendered }), description ? _jsx("div", { "data-element": "Description", children: description }) : null] }));
+}
+function ListBoxSection(props) {
+    const { item, state, optionStyles, headingStyles, sectionStyles, isParentDisabled, validationState, } = props;
+    const heading = item.rendered;
+    const { itemProps, headingProps, groupProps } = useListBoxSection({
+        heading,
+        'aria-label': item['aria-label'],
+    });
+    return (_jsxs(SectionWrapperElement, { ...itemProps, styles: sectionStyles, children: [heading && (_jsx(SectionHeadingElement, { ...headingProps, styles: headingStyles, children: heading })), _jsx(SectionListElement, { ...groupProps, children: [...item.childNodes]
+                    .filter((node) => state.collection.getItem(node.key))
+                    .map((node) => (_jsx(Option, { item: node, state: state, styles: optionStyles, isParentDisabled: isParentDisabled, validationState: validationState }, node.key))) })] }));
+}
+const ListBoxSectionComponent = Object.assign(BaseSection, {
+    displayName: 'Section',
+});
+ListBox.Item = Item;
+ListBox.Section = ListBoxSectionComponent;
+Object.defineProperty(ListBox, 'cubeInputType', {
+    value: 'ListBox',
+    enumerable: false,
+    configurable: false,
+});
+
+        

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

@@ -0,0 +1,10 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.64.1
+ * Released under the MIT license.
+ */
+
+export * from './ListBox';
+
+        

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

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