@cube-dev/ui-kit 0.0.0-canary-7b883e0 → 0.0.0-canary-738f1ac

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

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

package/es/components/fields/ListBox.js

@@ -0,0 +1,363 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-738f1ac
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cloneElement, forwardRef, isValidElement, useMemo, useRef, useState, } from 'react';
+import { useFilter, useListBox, useListBoxSection, useOption, } from 'react-aria';
+import { Section as BaseSection, Item, useListState } from 'react-stately';
+import { 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 { InvalidIcon } from '../shared/InvalidIcon';
+import { ValidIcon } from '../shared/ValidIcon';
+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: '#dark',
+            disabled: '#dark-04',
+        },
+        fill: {
+            '': '#clear',
+            focused: '#dark.03',
+            selected: '#dark.06',
+            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 }) => {
+            return {
+                selectedKey: value ?? null,
+                onSelectionChange: (key) => {
+                    // React Aria always passes a Set for selection changes
+                    // For single selection mode, we extract the first (and only) key
+                    if (key instanceof Set) {
+                        if (key.size === 0) {
+                            onChange(null);
+                        }
+                        else if (props.selectionMode === 'multiple') {
+                            onChange(key); // Return the Set for multiple selection
+                        }
+                        else {
+                            // Single selection - extract the first key
+                            onChange(Array.from(key)[0]);
+                        }
+                    }
+                    else {
+                        onChange(key);
+                    }
+                },
+            };
+        },
+    });
+    let { qa, label, extra, labelStyles, isRequired, necessityIndicator, validationState, isDisabled, isLoading, isSearchable = false, searchPlaceholder = 'Search...', 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;
+        // Filter React children elements
+        const filterChild = (child) => {
+            if (!child || typeof child !== 'object')
+                return false;
+            // Handle regular items
+            const textValue = child.props?.children?.toString() || child.key?.toString() || '';
+            return filterFn(textValue, searchValue);
+        };
+        const filterSection = (section) => {
+            if (!section || typeof section !== 'object')
+                return null;
+            const sectionChildren = section.props?.children;
+            if (!sectionChildren)
+                return null;
+            let filteredSectionChildren;
+            if (Array.isArray(sectionChildren)) {
+                filteredSectionChildren = sectionChildren.filter(filterChild);
+            }
+            else {
+                filteredSectionChildren = filterChild(sectionChildren)
+                    ? [sectionChildren]
+                    : [];
+            }
+            // Only return the section if it has matching children
+            if (filteredSectionChildren.length === 0)
+                return null;
+            // Clone the section with filtered children
+            return {
+                ...section,
+                props: {
+                    ...section.props,
+                    children: filteredSectionChildren,
+                },
+            };
+        };
+        if (Array.isArray(props.children)) {
+            return props.children
+                .map((child) => {
+                // Handle sections
+                if (isValidElement(child) &&
+                    (child.type === BaseSection || child.props?.title)) {
+                    return filterSection(child);
+                }
+                // Handle regular items
+                return filterChild(child) ? child : null;
+            })
+                .filter(Boolean);
+        }
+        // Single child case
+        if (isValidElement(props.children) &&
+            (props.children.type === BaseSection || props.children.props?.title)) {
+            return filterSection(props.children);
+        }
+        return filterChild(props.children) ? props.children : null;
+    }, [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
+    const wrappedOnSelectionChange = useMemo(() => {
+        if (!onSelectionChange)
+            return undefined;
+        return (key) => {
+            // Don't allow selection changes when disabled
+            if (isDisabled) {
+                return;
+            }
+            onSelectionChange(key);
+        };
+    }, [onSelectionChange, isDisabled]);
+    const listState = useListState({
+        ...props,
+        items: filteredItems,
+        children: filteredChildren,
+        selectedKey,
+        defaultSelectedKey,
+        selectedKeys,
+        defaultSelectedKeys,
+        onSelectionChange: wrappedOnSelectionChange,
+        isDisabled,
+    });
+    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,
+    }, listState, listRef);
+    const { isFocused, focusProps } = useFocus({ isDisabled });
+    const isInvalid = validationState === 'invalid';
+    const validationIcon = isInvalid ? InvalidIcon : ValidIcon;
+    const validation = cloneElement(validationIcon);
+    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, styles: searchInputStyles, "data-size": "small", onChange: (e) => setSearchValue(e.target.value), ...modAttrs(mods) }), _jsx("div", { "data-element": "Prefix", children: _jsx("div", { "data-element": "InputIcon", children: _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 }, item.key));
+                            isFirstSection = false;
+                        }
+                        else {
+                            renderedItems.push(_jsx(Option, { item: item, state: listState, styles: optionStyles, isParentDisabled: isDisabled }, item.key));
+                        }
+                    }
+                    return renderedItems;
+                })() }), (validationState && !isLoading) || isLoading ? (_jsxs("div", { "data-element": "ValidationState", style: { position: 'absolute', top: '1x', right: '1x' }, children: [validationState && !isLoading ? validation : null, isLoading && _jsx("div", { children: "Loading..." })] })) : null] }));
+    return wrapWithField(listBoxField, ref, mergeProps({ ...props, styles: undefined }, {}));
+});
+function Option({ item, state, styles, isParentDisabled }) {
+    const ref = useRef(null);
+    const isDisabled = isParentDisabled || state.disabledKeys.has(item.key);
+    const isSelected = state.selectionManager.isSelected(item.key);
+    const { optionProps, isPressed } = useOption({
+        key: item.key,
+        isDisabled,
+        isSelected,
+        shouldSelectOnPressUp: true,
+        shouldFocusOnHover: true,
+    }, state, ref);
+    const { isFocused, focusProps } = useFocus({ isDisabled });
+    const description = item?.props?.description;
+    return (_jsxs(OptionElement, { ...mergeProps(optionProps, focusProps), ref: ref, mods: {
+            selected: isSelected,
+            focused: isFocused,
+            disabled: isDisabled,
+            pressed: isPressed,
+        }, 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, } = 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 }, 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/NumberInput/NumberInput.js

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

package/es/components/fields/Select/Select.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-7b883e0
+ * @cube-dev/ui-kit v0.0.0-canary-738f1ac
  * Released under the MIT license.
  */
 
@@ -149,17 +149,16 @@ const OptionElement = tasty({
         padding: '(1x - 1px) (1.5x - 1px)',
         cursor: 'pointer',
         radius: true,
-        fill: {
-            '': '#dark.0',
-            'pressed | selected': '#purple.10',
-            'hovered | focused': '#dark.04',
-            disabled: '#dark.0',
-        },
         color: {
             '': '#dark-02',
-            'hovered | focused': '#dark-02',
-            'pressed | selected': '#purple',
-            disabled: '#dark.3',
+            selected: '#dark',
+            disabled: '#dark-04',
+        },
+        fill: {
+            '': '#clear',
+            focused: '#dark.03',
+            selected: '#dark.06',
+            disabled: '#clear',
         },
         preset: 't3',
         transition: 'theme',

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-7b883e0
+ * @cube-dev/ui-kit v0.0.0-canary-738f1ac
  * Released under the MIT license.
  */
 

package/es/components/fields/Slider/Gradation.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-7b883e0
+ * @cube-dev/ui-kit v0.0.0-canary-738f1ac
  * Released under the MIT license.
  */
 

package/es/components/fields/Slider/Header.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-7b883e0
+ * @cube-dev/ui-kit v0.0.0-canary-738f1ac
  * Released under the MIT license.
  */
 

package/es/components/fields/Slider/RangeSlider.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-7b883e0
+ * @cube-dev/ui-kit v0.0.0-canary-738f1ac
  * Released under the MIT license.
  */
 

package/es/components/fields/Slider/Slider.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-7b883e0
+ * @cube-dev/ui-kit v0.0.0-canary-738f1ac
  * Released under the MIT license.
  */