@cube-dev/ui-kit 0.80.2 → 0.82.0

package/es/components/fields/LegacyComboBox/LegacyComboBox.js

@@ -0,0 +1,290 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.82.0
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { cloneElement, forwardRef, useEffect, useMemo, } from 'react';
+import { useButton, useComboBox, useFilter, useHover, useOverlayPosition, } from 'react-aria';
+import { Section as BaseSection, useComboBoxState } from 'react-stately';
+import { useEvent } from '../../../_internal/index';
+import { CloseIcon, DownIcon, LoadingIcon } from '../../../icons';
+import { useProviderProps } from '../../../provider';
+import { BASE_STYLES, COLOR_STYLES, extractStyles, OUTER_STYLES, tasty, } from '../../../tasty';
+import { generateRandomId } from '../../../utils/random';
+import { mergeProps, useCombinedRefs, useLayoutEffect, } from '../../../utils/react';
+import { useFocus } from '../../../utils/react/interactions';
+import { useEventBus } from '../../../utils/react/useEventBus';
+import { ItemAction } from '../../actions';
+import { useFieldProps, useFormProps, wrapWithField } from '../../form';
+import { Item } from '../../Item';
+import { OverlayWrapper } from '../../overlays/OverlayWrapper';
+import { InvalidIcon } from '../../shared/InvalidIcon';
+import { ValidIcon } from '../../shared/ValidIcon';
+import { DEFAULT_INPUT_STYLES, INPUT_WRAPPER_STYLES } from '../index';
+import { ListBoxPopup } from '../Select';
+const LegacyComboBoxWrapperElement = tasty({
+    styles: INPUT_WRAPPER_STYLES,
+});
+const InputElement = tasty({
+    as: 'input',
+    styles: DEFAULT_INPUT_STYLES,
+});
+const TriggerElement = tasty({
+    as: 'button',
+    type: 'neutral',
+    styles: {
+        display: 'grid',
+        placeItems: 'center',
+        placeContent: 'center',
+        placeSelf: 'stretch',
+        radius: '(1r - 1bw) right',
+        padding: '0',
+        width: '3x',
+        boxSizing: 'border-box',
+        color: {
+            '': '#dark-02',
+            hovered: '#dark-02',
+            pressed: '#purple',
+            disabled: '#dark.30',
+        },
+        border: 'left',
+        reset: 'button',
+        margin: 0,
+        fill: {
+            '': '#dark.0',
+            hovered: '#dark.04',
+            pressed: '#purple.10',
+            disabled: '#clear',
+        },
+        cursor: 'pointer',
+    },
+});
+const PROP_STYLES = [...BASE_STYLES, ...OUTER_STYLES, ...COLOR_STYLES];
+export const LegacyComboBox = forwardRef(function LegacyComboBox(props, ref) {
+    props = useProviderProps(props);
+    props = useFormProps(props);
+    props = useFieldProps(props, {
+        valuePropsMapper: ({ value, onChange }) => {
+            return {
+                selectedKey: !props.allowsCustomValue ? value ?? null : undefined,
+                inputValue: props.allowsCustomValue ? value ?? '' : undefined,
+                onInputChange(val) {
+                    if (!props.allowsCustomValue) {
+                        return;
+                    }
+                    onChange(val);
+                },
+                onSelectionChange(val) {
+                    if (val == null && props.allowsCustomValue) {
+                        return;
+                    }
+                    onChange(val);
+                },
+            };
+        },
+    });
+    let { qa, label, extra, labelStyles, isRequired, necessityIndicator, validationState, icon, prefix, isDisabled, multiLine, autoFocus, wrapperRef, inputRef, triggerRef, popoverRef, listBoxRef, isLoading, loadingIndicator, overlayOffset = 8, inputStyles, optionStyles, triggerStyles, listBoxStyles, overlayStyles, wrapperStyles, suffix, hideTrigger, message, description, size = 'medium', autoComplete = 'off', direction = 'bottom', shouldFlip = true, menuTrigger = 'input', suffixPosition = 'before', loadingState, filter, styles, labelSuffix, selectedKey, defaultSelectedKey, isClearable, ...otherProps } = props;
+    let isAsync = loadingState != null;
+    let { contains } = useFilter({ sensitivity: 'base' });
+    let comboBoxStateProps = {
+        ...props,
+        defaultFilter: filter || contains,
+        filter: undefined,
+        allowsEmptyCollection: isAsync,
+        menuTrigger,
+    };
+    let state = useComboBoxState(comboBoxStateProps);
+    // Generate a unique ID for this combobox instance
+    const comboBoxId = useMemo(() => generateRandomId(), []);
+    // Get event bus for menu synchronization
+    const { emit, on } = useEventBus();
+    // Listen for other menus opening and close this one if needed
+    useEffect(() => {
+        const unsubscribe = on('popover:open', (data) => {
+            // If another menu is opening and this combobox is open, close this one
+            if (data.menuId !== comboBoxId && state.isOpen) {
+                state.close();
+            }
+        });
+        return unsubscribe;
+    }, [on, comboBoxId, state]);
+    // Emit event when this combobox opens
+    useEffect(() => {
+        if (state.isOpen) {
+            emit('popover:open', { menuId: comboBoxId });
+        }
+    }, [state.isOpen, emit, comboBoxId]);
+    styles = extractStyles(otherProps, PROP_STYLES, styles);
+    ref = useCombinedRefs(ref);
+    wrapperRef = useCombinedRefs(wrapperRef);
+    inputRef = useCombinedRefs(inputRef);
+    triggerRef = useCombinedRefs(triggerRef);
+    popoverRef = useCombinedRefs(popoverRef);
+    listBoxRef = useCombinedRefs(listBoxRef);
+    let { overlayProps, placement, updatePosition } = useOverlayPosition({
+        targetRef: triggerRef,
+        overlayRef: popoverRef,
+        scrollRef: listBoxRef,
+        placement: `${direction} end`,
+        shouldFlip: shouldFlip,
+        isOpen: state.isOpen,
+        onClose: state.close,
+        offset: overlayOffset,
+    });
+    let { labelProps, inputProps, listBoxProps, buttonProps: triggerProps, } = useComboBox({
+        ...comboBoxStateProps,
+        inputRef,
+        buttonRef: triggerRef,
+        listBoxRef,
+        popoverRef,
+        menuTrigger,
+    }, state);
+    let { isFocused, focusProps } = useFocus({ isDisabled });
+    let { hoverProps, isHovered } = useHover({ isDisabled });
+    // Get props for the button based on the trigger props from useComboBox
+    let { buttonProps, isPressed: isTriggerPressed } = useButton(triggerProps, triggerRef);
+    let { hoverProps: triggerHoverProps, isHovered: isTriggerHovered } = useHover({ isDisabled });
+    let { focusProps: triggerFocusProps, isFocused: isTriggerFocused } = useFocus({ isDisabled }, true);
+    useLayoutEffect(() => {
+        if (state.isOpen) {
+            updatePosition();
+        }
+    }, [state.isOpen, state.collection.size]);
+    let isInvalid = validationState === 'invalid';
+    let validationIcon = isInvalid ? InvalidIcon : ValidIcon;
+    let validation = cloneElement(validationIcon);
+    // Clear button logic
+    let hasValue = props.allowsCustomValue
+        ? state.inputValue !== ''
+        : state.selectedKey != null;
+    let showClearButton = isClearable && hasValue && !isDisabled && !props.isReadOnly;
+    // Clear function
+    let clearValue = useEvent(() => {
+        // Always clear input value in state so UI resets to placeholder
+        state.setInputValue('');
+        // Notify external input value only when custom value mode is enabled
+        if (props.allowsCustomValue) {
+            props.onInputChange?.('');
+        }
+        props.onSelectionChange?.(null);
+        state.setSelectedKey(null);
+        // Close the popup if it's open
+        if (state.isOpen) {
+            state.close();
+        }
+        // Focus back to the input
+        inputRef.current?.focus();
+        props.onClear?.();
+    });
+    let comboBoxWidth = wrapperRef?.current?.offsetWidth;
+    if (icon) {
+        icon = _jsx("div", { "data-element": "InputIcon", children: icon });
+        if (prefix) {
+            prefix = (_jsxs(_Fragment, { children: [icon, prefix] }));
+        }
+        else {
+            prefix = icon;
+        }
+    }
+    let mods = useMemo(() => ({
+        invalid: isInvalid,
+        valid: validationState === 'valid',
+        disabled: isDisabled,
+        hovered: isHovered,
+        focused: isFocused,
+        loading: isLoading,
+        prefix: !!prefix,
+        suffix: true,
+        clearable: showClearButton,
+    }), [
+        isInvalid,
+        validationState,
+        isDisabled,
+        isHovered,
+        isFocused,
+        isLoading,
+        prefix,
+        showClearButton,
+    ]);
+    // If input is not full and the user presses Enter, pick the first option.
+    let onKeyPress = useEvent((e) => {
+        if (!props.onSelectionChange) {
+            return;
+        }
+        if (e.key === 'Enter') {
+            if (!props.allowsCustomValue) {
+                if (state.isOpen) {
+                    // If there is a selected option then do nothing. It will be selected on Enter anyway.
+                    if (listBoxRef.current?.querySelector('li[aria-selected="true"]')) {
+                        return;
+                    }
+                    const option = [...state.collection][0]?.key;
+                    if (option && selectedKey !== option) {
+                        props.onSelectionChange?.(option);
+                        e.stopPropagation();
+                        e.preventDefault();
+                    }
+                }
+                else if (inputRef.current?.value &&
+                    ![...state.collection]
+                        .map((i) => i.textValue)
+                        .includes(inputRef.current?.value)) {
+                    // If the input value is not in the collection, we need to prevent the submitting of the form.
+                    // Also, we reset value manually.
+                    e.preventDefault();
+                    props.onSelectionChange?.(null);
+                }
+                // If a custom value is allowed, we need to check if the input value is in the collection.
+            }
+            else if (props.allowsCustomValue) {
+                const inputValue = inputRef?.current?.value;
+                const item = [...state.collection].find((item) => item.textValue.toLowerCase() === inputValue?.toLowerCase());
+                props.onSelectionChange?.(item ? item.key : inputRef?.current?.value ?? '');
+            }
+        }
+    });
+    let onBlur = useEvent((e) => {
+        // If the input value is not in the collection, we need to reset the value.
+        if (!props.allowsCustomValue &&
+            inputRef.current?.value &&
+            ![...state.collection]
+                .map((i) => i.textValue)
+                .includes(inputRef.current?.value)) {
+            props.onSelectionChange?.(null);
+        }
+    });
+    useEffect(() => {
+        inputRef.current?.addEventListener('keydown', onKeyPress, true);
+        inputRef.current?.addEventListener('blur', onBlur, true);
+        return () => {
+            inputRef.current?.removeEventListener('keydown', onKeyPress, true);
+            inputRef.current?.removeEventListener('blur', onBlur, true);
+        };
+    }, []);
+    let allInputProps = useMemo(() => mergeProps(inputProps, hoverProps, focusProps), [inputProps, hoverProps, focusProps]);
+    let comboBoxField = (_jsxs(LegacyComboBoxWrapperElement, { ref: wrapperRef, qa: qa || 'LegacyComboBox', mods: mods, styles: wrapperStyles, style: {
+            zIndex: isFocused ? 1 : 'initial',
+        }, "data-size": size, children: [prefix ? _jsx("div", { "data-element": "Prefix", children: prefix }) : null, _jsx(InputElement, { ref: inputRef, qa: "Input", autoFocus: autoFocus, "data-autofocus": autoFocus ? '' : undefined, ...allInputProps, autoComplete: autoComplete, styles: inputStyles, mods: mods, "data-size": size }), _jsxs("div", { "data-element": "Suffix", children: [suffixPosition === 'before' ? suffix : null, validationState || isLoading ? (_jsxs(_Fragment, { children: [validationState && !isLoading ? validation : null, isLoading ? _jsx(LoadingIcon, {}) : null] })) : null, suffixPosition === 'after' ? suffix : null, showClearButton && (_jsx(ItemAction, { icon: _jsx(CloseIcon, {}), size: size, theme: validationState === 'invalid' ? 'danger' : undefined, qa: "LegacyComboBoxClearButton", "data-no-trigger": hideTrigger ? '' : undefined, onPress: clearValue })), !hideTrigger ? (_jsx(TriggerElement, { "data-popover-trigger": true, qa: "LegacyComboBoxTrigger", ...mergeProps(buttonProps, triggerFocusProps, triggerHoverProps), ref: triggerRef, mods: {
+                            pressed: isTriggerPressed,
+                            focused: isTriggerFocused,
+                            hovered: isTriggerHovered,
+                            disabled: isDisabled,
+                            loading: isLoading,
+                        }, "data-size": size, isDisabled: isDisabled, styles: triggerStyles, children: _jsx(DownIcon, {}) })) : null] }), _jsx(OverlayWrapper, { isOpen: state.isOpen && !isDisabled, children: _jsx(ListBoxPopup, { ...listBoxProps, shouldUseVirtualFocus: true, listBoxRef: listBoxRef, popoverRef: popoverRef, overlayProps: overlayProps, placement: placement, state: state, listBoxStyles: listBoxStyles, overlayStyles: overlayStyles, optionStyles: optionStyles, minWidth: comboBoxWidth, triggerRef: triggerRef }) })] }));
+    return wrapWithField(comboBoxField, ref, mergeProps({ ...props, styles }, { labelProps }));
+});
+const LegacyComboBoxSectionComponent = Object.assign(BaseSection, {
+    displayName: 'Section',
+});
+LegacyComboBox.Item = Item;
+LegacyComboBox.Section = LegacyComboBoxSectionComponent;
+Object.defineProperty(LegacyComboBox, 'cubeInputType', {
+    value: 'LegacyComboBox',
+    enumerable: false,
+    configurable: false,
+});
+
+        

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

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

package/es/components/fields/ListBox/ListBox.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.
  */
 
@@ -9,7 +9,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { useHover } from '@react-aria/interactions';
 import { IconMinus } from '@tabler/icons-react';
 import { useVirtualizer } from '@tanstack/react-virtual';
-import { forwardRef, useEffect, useMemo, useRef, useState, } from 'react';
+import { forwardRef, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, } from 'react';
 import { useKeyboard, useListBox, useListBoxSection, useOption, } from 'react-aria';
 import { Section as BaseSection, useListState } from 'react-stately';
 import { useWarn } from '../../../_internal/hooks/use-warn';
@@ -240,8 +240,12 @@ export const ListBox = forwardRef(function ListBox(props, ref) {
             return fieldProps;
         },
     });
-    let { qa, label, extra, labelStyles, isRequired, necessityIndicator, validationState, isDisabled, listStyles, optionStyles, sectionStyles, headingStyles, listRef, message, description, styles, mods: externalMods, size = 'medium', labelSuffix, selectedKey, defaultSelectedKey, selectedKeys, defaultSelectedKeys, shouldUseVirtualFocus, onSelectionChange, stateRef, focusOnHover, header, footer, headerStyles, footerStyles, onEscape, isCheckable, onOptionClick, showSelectAll, selectAllLabel, allValueProps, ...otherProps } = props;
+    let { qa, label, extra, id, labelStyles, isRequired, necessityIndicator, validationState, isDisabled, listStyles, optionStyles, sectionStyles, headingStyles, listRef, message, description, styles, mods: externalMods, size = 'medium', labelSuffix, selectedKey, defaultSelectedKey, selectedKeys, defaultSelectedKeys, shouldUseVirtualFocus, onSelectionChange, disableSelectionToggle = false, stateRef, focusOnHover, header, footer, headerStyles, footerStyles, onEscape, isCheckable, onOptionClick, showSelectAll, selectAllLabel, allValueProps, ...otherProps } = props;
+    // Generate ID for label-listbox linking if not provided
+    const generatedId = useId();
+    const listBoxId = id || generatedId;
     const [, forceUpdate] = useState({});
+    const lastSelectedKeyRef = useRef(null);
     // Wrap onSelectionChange to prevent selection when disabled and handle React Aria's Set format
     const externalSelectionHandler = onSelectionChange || props.onChange;
     const wrappedOnSelectionChange = useMemo(() => {
@@ -259,16 +263,26 @@ export const ListBox = forwardRef(function ListBox(props, ref) {
             }
             else if (keys instanceof Set) {
                 if (keys.size === 0) {
+                    if (disableSelectionToggle && props.selectionMode === 'single') {
+                        const prevKey = lastSelectedKeyRef.current;
+                        if (prevKey != null) {
+                            externalSelectionHandler(prevKey);
+                            return;
+                        }
+                    }
                     externalSelectionHandler(props.selectionMode === 'multiple' ? [] : null);
                 }
                 else if (props.selectionMode === 'multiple') {
                     externalSelectionHandler(Array.from(keys));
                 }
                 else {
-                    externalSelectionHandler(Array.from(keys)[0]);
+                    const key = Array.from(keys)[0];
+                    lastSelectedKeyRef.current = key ?? null;
+                    externalSelectionHandler(key);
                 }
             }
             else {
+                lastSelectedKeyRef.current = keys;
                 externalSelectionHandler(keys);
             }
         };
@@ -321,6 +335,13 @@ export const ListBox = forwardRef(function ListBox(props, ref) {
     const listState = useListState({
         ...listStateProps,
     });
+    useLayoutEffect(() => {
+        const selected = listState.selectionManager.selectedKeys;
+        if (selected && selected.size > 0) {
+            const first = Array.from(selected)[0];
+            lastSelectedKeyRef.current = first ?? null;
+        }
+    }, [listState.selectionManager.selectedKeys]);
     // Calculate select all state for multiple selection mode
     const selectAllState = useMemo(() => {
         // Select-all only makes sense for multiple selection mode *and* when the UI is enabled
@@ -410,6 +431,7 @@ export const ListBox = forwardRef(function ListBox(props, ref) {
     listRef = useCombinedRefs(listRef);
     const { listBoxProps } = useListBox({
         ...props,
+        id: listBoxId,
         'aria-label': props['aria-label'] || label?.toString(),
         isDisabled,
         shouldUseVirtualFocus: shouldUseVirtualFocus ?? false,
@@ -542,7 +564,15 @@ export const ListBox = forwardRef(function ListBox(props, ref) {
                             }
                             return renderedItems;
                         })() }) }), footer ? (_jsx(StyledFooter, { styles: footerStyles, "data-size": size, children: footer })) : (_jsx("div", { role: "presentation" }))] }));
-    return wrapWithField(listBoxField, ref, mergeProps({ ...props, styles: undefined }, {}));
+    const finalProps = { ...props, styles: undefined };
+    // Ensure labelProps has the for attribute for label-listbox linking
+    if (!finalProps.labelProps) {
+        finalProps.labelProps = {};
+    }
+    if (!finalProps.labelProps.for) {
+        finalProps.labelProps.for = listBoxId;
+    }
+    return wrapWithField(listBoxField, ref, mergeProps(finalProps, {}));
 });
 function Option({ size = 'medium', item, state, styles, isParentDisabled, validationState, focusOnHover = false, isCheckable, onClick: onOptionClick, virtualStyle, virtualRef, virtualIndex, lastFocusSourceRef, }) {
     const localRef = useRef(null);

package/es/components/fields/ListBox/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/NumberInput/NumberInput.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/NumberInput/StepButton.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/PasswordInput/PasswordInput.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/RadioGroup/Radio.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/RadioGroup/RadioGroup.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/RadioGroup/context.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/RadioGroup/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/SearchInput/SearchInput.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/SearchInput/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.
  */