@cube-dev/ui-kit 0.67.0 → 0.69.0

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

@@ -0,0 +1,584 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.69.0
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { forwardRef, useLayoutEffect, useMemo, useRef, useState, } from 'react';
+import { useFilter, useKeyboard } from 'react-aria';
+import { Section as BaseSection, Item } from 'react-stately';
+import { LoadingIcon } 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 { StyledHeader } from '../../actions/Menu/styled';
+import { Block } from '../../Block';
+import { useFieldProps, useFormProps, wrapWithField } from '../../form';
+import { ListBox } from '../ListBox/ListBox';
+import { DEFAULT_INPUT_STYLES, INPUT_WRAPPER_STYLES, } from '../TextInput/TextInputBase';
+const FilterListBoxWrapperElement = tasty({
+    styles: {
+        display: 'grid',
+        flow: 'column',
+        gridColumns: '1sf',
+        gridRows: 'max-content max-content 1sf',
+        gap: 0,
+        position: 'relative',
+        radius: true,
+        color: '#dark-02',
+        transition: 'theme',
+        outline: {
+            '': '#purple-03.0',
+            'invalid & focused': '#danger.50',
+            focused: '#purple-03',
+        },
+        height: {
+            '': false,
+            popover: 'initial max-content (50vh - 4x)',
+        },
+        border: {
+            '': true,
+            focused: '#purple-text',
+            valid: '#success-text.50',
+            invalid: '#danger-text.50',
+            disabled: true,
+            popover: false,
+        },
+    },
+});
+const SearchWrapperElement = tasty({
+    styles: {
+        ...INPUT_WRAPPER_STYLES,
+        border: 'bottom',
+        radius: '1r top',
+        fill: '#clear',
+    },
+});
+const SearchInputElement = tasty({
+    as: 'input',
+    styles: {
+        ...DEFAULT_INPUT_STYLES,
+        fill: '#clear',
+        padding: {
+            '': '.5x 1.5x',
+            prefix: '.5x 1.5x .5x .5x',
+        },
+    },
+});
+const StyledHeaderWithoutBorder = tasty(StyledHeader, {
+    styles: {
+        border: false,
+    },
+});
+const PROP_STYLES = [...BASE_STYLES, ...OUTER_STYLES, ...COLOR_STYLES];
+export const FilterListBox = forwardRef(function FilterListBox(props, ref) {
+    props = useProviderProps(props);
+    props = useFormProps(props);
+    props = useFieldProps(props, {
+        valuePropsMapper: ({ value, onChange }) => {
+            const fieldProps = {};
+            if (props.selectionMode === 'multiple') {
+                fieldProps.selectedKeys = value || [];
+            }
+            else {
+                fieldProps.selectedKey = value ?? null;
+            }
+            fieldProps.onSelectionChange = (key) => {
+                if (props.selectionMode === 'multiple') {
+                    onChange(key ? (Array.isArray(key) ? key : [key]) : []);
+                }
+                else {
+                    onChange(Array.isArray(key) ? key[0] : key);
+                }
+            };
+            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, labelSuffix, selectedKey, defaultSelectedKey, selectedKeys, defaultSelectedKeys, onSelectionChange: externalOnSelectionChange, allowsCustomValue = false, header, footer, size = 'medium', headerStyles, footerStyles, listBoxStyles, children, onEscape, isCheckable, onOptionClick, selectionMode = 'single', ...otherProps } = props;
+    // 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);
+        return keys;
+    }, [children]);
+    // State to keep track of custom (user-entered) items that were selected.
+    const [customKeys, setCustomKeys] = useState(new Set());
+    // Initialize custom keys from current selection
+    React.useEffect(() => {
+        if (!allowsCustomValue)
+            return;
+        const currentSelectedKeys = selectedKeys
+            ? Array.from(selectedKeys).map(String)
+            : selectedKey != null
+                ? [String(selectedKey)]
+                : [];
+        if (currentSelectedKeys.length === 0)
+            return;
+        const keysToAdd = currentSelectedKeys.filter((k) => !originalKeys.has(k));
+        if (keysToAdd.length) {
+            setCustomKeys((prev) => new Set([...Array.from(prev), ...keysToAdd]));
+        }
+    }, [allowsCustomValue, selectedKeys, selectedKey, originalKeys]);
+    // Merge original children with any custom items so they persist in the list.
+    // If there are selected custom values, they should appear on top with other
+    // selected items (which are already sorted by the parent component, e.g. FilterPicker).
+    const mergedChildren = useMemo(() => {
+        if (!children && customKeys.size === 0)
+            return children;
+        // Build React elements for custom values (kept stable via their key).
+        const customArray = Array.from(customKeys).map((key) => (_jsx(Item, { textValue: key, children: key }, key)));
+        // Identify which custom keys are currently selected so we can promote them.
+        const selectedKeysSet = new Set();
+        if (selectionMode === 'multiple') {
+            Array.from(selectedKeys ?? []).forEach((k) => selectedKeysSet.add(String(k)));
+        }
+        else {
+            if (selectedKey != null)
+                selectedKeysSet.add(String(selectedKey));
+        }
+        const selectedCustom = [];
+        const unselectedCustom = [];
+        customArray.forEach((item) => {
+            if (selectedKeysSet.has(String(item.key))) {
+                selectedCustom.push(item);
+            }
+            else {
+                unselectedCustom.push(item);
+            }
+        });
+        if (!children) {
+            // No original items – just return selected custom followed by the rest.
+            return [...selectedCustom, ...unselectedCustom];
+        }
+        const originalArray = Array.isArray(children) ? children : [children];
+        // Final order: selected custom items -> original array (already possibly
+        // sorted by parent) -> unselected custom items.
+        return [...selectedCustom, ...originalArray, ...unselectedCustom];
+    }, [children, customKeys, selectionMode, selectedKey, selectedKeys]);
+    // Determine an aria-label for the internal ListBox to avoid React Aria warnings.
+    const innerAriaLabel = props['aria-label'] ||
+        (typeof label === 'string' ? label : undefined);
+    const [searchValue, setSearchValue] = useState('');
+    const { contains } = useFilter({ sensitivity: 'base' });
+    // Choose the text filter function: user-provided `filter` prop (if any)
+    // or the default `contains` helper from `useFilter`.
+    const textFilterFn = useMemo(() => filter || contains, [filter, contains]);
+    // Filter children based on search value
+    const filteredChildren = useMemo(() => {
+        const term = searchValue.trim();
+        if (!term || !mergedChildren) {
+            return mergedChildren;
+        }
+        // Helper to check if a node matches the search term
+        const nodeMatches = (node) => {
+            if (!node?.props)
+                return false;
+            // Get text content from the node
+            const textValue = node.props.textValue ||
+                (typeof node.props.children === 'string' ? node.props.children : '') ||
+                String(node.props.children || '');
+            return textFilterFn(textValue, term);
+        };
+        // Helper to filter React children recursively
+        const filterChildren = (childNodes) => {
+            if (!childNodes)
+                return null;
+            const childArray = Array.isArray(childNodes) ? childNodes : [childNodes];
+            const filteredNodes = [];
+            childArray.forEach((child) => {
+                if (!child || typeof child !== 'object') {
+                    return;
+                }
+                // Handle ListBox.Section
+                if (child.type === BaseSection ||
+                    child.type?.displayName === 'Section') {
+                    const sectionChildren = Array.isArray(child.props.children)
+                        ? child.props.children
+                        : [child.props.children];
+                    const filteredSectionChildren = sectionChildren.filter((sectionChild) => {
+                        return (sectionChild &&
+                            typeof sectionChild === 'object' &&
+                            nodeMatches(sectionChild));
+                    });
+                    if (filteredSectionChildren.length > 0) {
+                        // Store filtered children in a way that doesn't require cloning the section
+                        const filteredSection = {
+                            ...child,
+                            filteredChildren: filteredSectionChildren,
+                        };
+                        filteredNodes.push(filteredSection);
+                    }
+                }
+                // Handle ListBox.Item
+                else if (child.type === Item) {
+                    if (nodeMatches(child)) {
+                        filteredNodes.push(child);
+                    }
+                }
+                // Handle other components
+                else if (nodeMatches(child)) {
+                    filteredNodes.push(child);
+                }
+            });
+            return filteredNodes;
+        };
+        return filterChildren(mergedChildren);
+    }, [mergedChildren, searchValue, textFilterFn]);
+    // Handle custom values if allowed
+    const enhancedChildren = useMemo(() => {
+        let childrenToProcess = filteredChildren;
+        // Handle custom values if allowed
+        if (!allowsCustomValue)
+            return childrenToProcess;
+        const term = searchValue.trim();
+        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);
+                    }
+                });
+            };
+            checkNodes(nodes);
+            return exists;
+        };
+        if (doesTermExist(mergedChildren)) {
+            return childrenToProcess;
+        }
+        // Append the custom option at the end.
+        const customOption = (_jsx(Item, { textValue: term, children: term }, term));
+        if (Array.isArray(childrenToProcess)) {
+            return [...childrenToProcess, customOption];
+        }
+        if (childrenToProcess) {
+            return [childrenToProcess, customOption];
+        }
+        return customOption;
+    }, [allowsCustomValue, filteredChildren, mergedChildren, searchValue]);
+    // Convert custom objects back to React elements for rendering
+    const finalChildren = useMemo(() => {
+        if (!enhancedChildren)
+            return enhancedChildren;
+        const convertToReactElements = (nodes) => {
+            if (!nodes)
+                return nodes;
+            const nodeArray = Array.isArray(nodes) ? nodes : [nodes];
+            return nodeArray.map((node, index) => {
+                if (!node || typeof node !== 'object') {
+                    return node;
+                }
+                // Handle our custom filtered section objects
+                if (node.filteredChildren) {
+                    const childrenToUse = node.filteredChildren;
+                    // Return the original section but with the processed children
+                    return React.cloneElement(node, {
+                        key: node.key || index,
+                        children: childrenToUse,
+                    });
+                }
+                // Handle regular React elements
+                return node;
+            });
+        };
+        return convertToReactElements(enhancedChildren);
+    }, [enhancedChildren]);
+    styles = extractStyles(otherProps, PROP_STYLES, styles);
+    ref = useCombinedRefs(ref);
+    searchInputRef = useCombinedRefs(searchInputRef);
+    listRef = useCombinedRefs(listRef);
+    const { isFocused, focusProps } = useFocus({ isDisabled });
+    const isInvalid = validationState === 'invalid';
+    const listBoxRef = useRef(null);
+    // Ref to access internal ListBox state (selection manager, etc.)
+    const listStateRef = useRef(null);
+    // No separate focusedKey state needed; rely directly on selectionManager.focusedKey.
+    // When the search value changes, the visible collection of items may change as well.
+    // If the currently focused item is no longer visible, move virtual focus to the first
+    // available item so that arrow navigation and Enter behaviour continue to work.
+    // If there are no available items, reset the selection so Enter won't select anything.
+    useLayoutEffect(() => {
+        const listState = listStateRef.current;
+        if (!listState)
+            return;
+        const { selectionManager, collection } = listState;
+        // Helper to collect visible item keys (supports sections)
+        const collectVisibleKeys = (nodes, out) => {
+            const term = searchValue.trim();
+            for (const node of nodes) {
+                if (node.type === 'item') {
+                    const text = node.textValue ?? String(node.rendered ?? '');
+                    if (!term || textFilterFn(text, term)) {
+                        out.push(node.key);
+                    }
+                }
+                else if (node.childNodes) {
+                    collectVisibleKeys(node.childNodes, out);
+                }
+            }
+        };
+        const visibleKeys = [];
+        collectVisibleKeys(collection, visibleKeys);
+        // If there are no visible items, reset the focused key so Enter won't select anything
+        if (visibleKeys.length === 0) {
+            selectionManager.setFocusedKey(null);
+            return;
+        }
+        // Early exit if the current focused key is still present in the visible items.
+        const currentFocused = selectionManager.focusedKey;
+        if (currentFocused != null && visibleKeys.includes(currentFocused)) {
+            return;
+        }
+        // Set focus to the first visible item
+        selectionManager.setFocusedKey(visibleKeys[0]);
+    }, [searchValue, enhancedChildren, textFilterFn]);
+    // Keyboard navigation handler for search input
+    const { keyboardProps } = useKeyboard({
+        onKeyDown: (e) => {
+            if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+                e.preventDefault();
+                const listState = listStateRef.current;
+                if (!listState)
+                    return;
+                const { selectionManager, collection } = listState;
+                // Helper to collect visible item keys (supports sections)
+                const collectVisibleKeys = (nodes, out) => {
+                    const term = searchValue.trim();
+                    for (const node of nodes) {
+                        if (node.type === 'item') {
+                            const text = node.textValue ?? String(node.rendered ?? '');
+                            if (!term || textFilterFn(text, term)) {
+                                out.push(node.key);
+                            }
+                        }
+                        else if (node.childNodes) {
+                            collectVisibleKeys(node.childNodes, out);
+                        }
+                    }
+                };
+                const visibleKeys = [];
+                collectVisibleKeys(collection, visibleKeys);
+                if (visibleKeys.length === 0)
+                    return;
+                const isArrowDown = e.key === 'ArrowDown';
+                const direction = isArrowDown ? 1 : -1;
+                const currentKey = selectionManager.focusedKey;
+                let nextKey = null;
+                if (currentKey == null) {
+                    // If nothing focused yet, pick first/last depending on direction
+                    nextKey = isArrowDown
+                        ? visibleKeys[0]
+                        : visibleKeys[visibleKeys.length - 1];
+                }
+                else {
+                    const currentIndex = visibleKeys.indexOf(currentKey);
+                    if (currentIndex !== -1) {
+                        const newIndex = currentIndex + direction;
+                        if (newIndex >= 0 && newIndex < visibleKeys.length) {
+                            nextKey = visibleKeys[newIndex];
+                        }
+                        else {
+                            // Wrap around
+                            nextKey = isArrowDown
+                                ? visibleKeys[0]
+                                : visibleKeys[visibleKeys.length - 1];
+                        }
+                    }
+                    else {
+                        // Fallback
+                        nextKey = isArrowDown
+                            ? visibleKeys[0]
+                            : visibleKeys[visibleKeys.length - 1];
+                    }
+                }
+                if (nextKey != null) {
+                    // Mark this focus change as keyboard navigation
+                    if (listState.lastFocusSourceRef) {
+                        listState.lastFocusSourceRef.current = 'keyboard';
+                    }
+                    selectionManager.setFocusedKey(nextKey);
+                }
+            }
+            else if (e.key === 'Home' ||
+                e.key === 'End' ||
+                e.key === 'PageUp' ||
+                e.key === 'PageDown') {
+                e.preventDefault();
+                const listState = listStateRef.current;
+                if (!listState)
+                    return;
+                const { selectionManager, collection } = listState;
+                // Helper to collect visible item keys (supports sections)
+                const collectVisibleKeys = (nodes, out) => {
+                    const term = searchValue.trim();
+                    for (const node of nodes) {
+                        if (node.type === 'item') {
+                            const text = node.textValue ?? String(node.rendered ?? '');
+                            if (!term || textFilterFn(text, term)) {
+                                out.push(node.key);
+                            }
+                        }
+                        else if (node.childNodes) {
+                            collectVisibleKeys(node.childNodes, out);
+                        }
+                    }
+                };
+                const visibleKeys = [];
+                collectVisibleKeys(collection, visibleKeys);
+                if (visibleKeys.length === 0)
+                    return;
+                const targetKey = e.key === 'Home' || e.key === 'PageUp'
+                    ? visibleKeys[0]
+                    : visibleKeys[visibleKeys.length - 1];
+                // Mark this focus change as keyboard navigation
+                if (listState.lastFocusSourceRef) {
+                    listState.lastFocusSourceRef.current = 'keyboard';
+                }
+                selectionManager.setFocusedKey(targetKey);
+            }
+            else if (e.key === 'Enter' || (e.key === ' ' && !searchValue)) {
+                const listState = listStateRef.current;
+                if (!listState)
+                    return;
+                const keyToSelect = listState.selectionManager.focusedKey;
+                if (keyToSelect != null) {
+                    e.preventDefault();
+                    listState.selectionManager.select(keyToSelect, e);
+                    if (e.key === 'Enter' &&
+                        isCheckable &&
+                        onEscape &&
+                        selectionMode === 'multiple') {
+                        onEscape();
+                    }
+                }
+            }
+            else if (e.key === 'Escape') {
+                if (searchValue) {
+                    // Clear the current search if any text is present.
+                    e.preventDefault();
+                    setSearchValue('');
+                }
+                else {
+                    // Notify parent that Escape was pressed on an empty input.
+                    if (onEscape) {
+                        e.preventDefault();
+                        onEscape();
+                    }
+                }
+            }
+        },
+    });
+    const mods = useMemo(() => ({
+        invalid: isInvalid,
+        valid: validationState === 'valid',
+        disabled: !!isDisabled,
+        focused: isFocused,
+        loading: !!isLoading,
+        searchable: true,
+        ...externalMods,
+    }), [
+        isInvalid,
+        validationState,
+        isDisabled,
+        isFocused,
+        isLoading,
+        externalMods,
+    ]);
+    const hasResults = enhancedChildren &&
+        (Array.isArray(enhancedChildren)
+            ? enhancedChildren.length > 0
+            : enhancedChildren !== null);
+    const showEmptyMessage = !hasResults && searchValue.trim();
+    // Handler must be defined before we render ListBox so we can pass it.
+    const handleSelectionChange = (selection) => {
+        if (allowsCustomValue) {
+            // Normalize current selection into an array of string keys
+            let selectedValues = [];
+            if (selection != null) {
+                if (Array.isArray(selection)) {
+                    selectedValues = selection.map(String);
+                }
+                else {
+                    selectedValues = [String(selection)];
+                }
+            }
+            // Build next custom keys set based on selected values
+            const nextSet = new Set();
+            selectedValues.forEach((val) => {
+                if (!originalKeys.has(val)) {
+                    nextSet.add(val);
+                }
+            });
+            // Update internal custom keys state
+            setCustomKeys(nextSet);
+        }
+        if (externalOnSelectionChange) {
+            externalOnSelectionChange(selection);
+        }
+    };
+    // Custom option click handler that ensures search input receives focus
+    const handleOptionClick = (key) => {
+        // Focus the search input to enable keyboard navigation
+        // Use setTimeout to ensure this happens after React state updates
+        setTimeout(() => {
+            if (searchInputRef.current) {
+                searchInputRef.current.focus();
+            }
+        }, 0);
+        // Call the original onOptionClick if provided
+        if (onOptionClick) {
+            onOptionClick(key);
+        }
+    };
+    const searchInput = (_jsxs(SearchWrapperElement, { mods: mods, "data-size": "small", children: [_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
+                    ? `ListBoxItem-${listStateRef.current?.selectionManager.focusedKey}`
+                    : undefined, onChange: (e) => {
+                    const value = e.target.value;
+                    setSearchValue(value);
+                }, ...keyboardProps, ...modAttrs(mods) }), isLoading && (_jsx("div", { "data-element": "Prefix", children: _jsx("div", { "data-element": "InputIcon", children: isLoading ? _jsx(LoadingIcon, {}) : null }) }))] }));
+    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("div", { style: { padding: '0.75rem 1rem' }, children: _jsx(Block, { preset: "t4", color: "#dark-03", 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, optionStyles: optionStyles, sectionStyles: sectionStyles, headingStyles: headingStyles, validationState: validationState, disallowEmptySelection: props.disallowEmptySelection, disabledKeys: props.disabledKeys, focusOnHover: focusOnHover, shouldUseVirtualFocus: true, footer: footer, footerStyles: footerStyles, mods: mods, size: size, isCheckable: isCheckable, onSelectionChange: handleSelectionChange, onEscape: onEscape, onOptionClick: handleOptionClick, children: finalChildren }))] }));
+    return wrapWithField(filterListBoxField, ref, mergeProps({ ...props, styles: undefined }, {}));
+});
+FilterListBox.Item = ListBox.Item;
+FilterListBox.Section = BaseSection;
+Object.defineProperty(FilterListBox, 'cubeInputType', {
+    value: 'FilterListBox',
+    enumerable: false,
+    configurable: false,
+});
+
+        

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

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