@cube-dev/ui-kit 0.66.1 → 0.68.0

package/es/components/fields/FilterPicker/FilterPicker.js

@@ -0,0 +1,426 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.68.0
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { forwardRef, useRef, useState, } from 'react';
+import { Section as BaseSection, Item } from 'react-stately';
+import { useWarn } from '../../../_internal/hooks/use-warn';
+import { DirectionIcon } from '../../../icons';
+import { useProviderProps } from '../../../provider';
+import { BASE_STYLES, COLOR_STYLES, extractStyles, OUTER_STYLES, } from '../../../tasty';
+import { mergeProps } from '../../../utils/react';
+import { Button } from '../../actions';
+import { Text } from '../../content/Text';
+import { useFieldProps, useFormProps, wrapWithField } from '../../form';
+import { Dialog, DialogTrigger } from '../../overlays/Dialog';
+import { FilterListBox, } from '../FilterListBox/FilterListBox';
+import { ListBox } from '../ListBox';
+const PROP_STYLES = [...BASE_STYLES, ...OUTER_STYLES, ...COLOR_STYLES];
+export const FilterPicker = forwardRef(function FilterPicker(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, icon, labelStyles, isRequired, necessityIndicator, validationState, isDisabled, isLoading, message, mods: externalMods, description, placeholder, size = 'small', styles, listBoxStyles, popoverStyles, type = 'outline', theme = 'default', labelSuffix, children, selectedKey, defaultSelectedKey, selectedKeys, defaultSelectedKeys, disabledKeys, onSelectionChange, selectionMode = 'single', listStateRef, focusOnHover, header, footer, headerStyles, footerStyles, allowsCustomValue, renderSummary, isCheckable, ...otherProps } = props;
+    styles = extractStyles(otherProps, PROP_STYLES, styles);
+    // Warn if isCheckable is false in single selection mode
+    useWarn(isCheckable === false && selectionMode === 'single', {
+        key: ['filterpicker-checkable-single-mode'],
+        args: [
+            'CubeUIKit: isCheckable=false is not recommended in single selection mode as it may confuse users about selection behavior.',
+        ],
+    });
+    // Internal selection state (uncontrolled scenario)
+    const [internalSelectedKey, setInternalSelectedKey] = useState(defaultSelectedKey ?? null);
+    const [internalSelectedKeys, setInternalSelectedKeys] = useState(defaultSelectedKeys ?? []);
+    // Track popover open/close and capture children order for session
+    const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+    const cachedChildrenOrder = useRef(null);
+    const triggerRef = useRef(null);
+    const isControlledSingle = selectedKey !== undefined;
+    const isControlledMultiple = selectedKeys !== undefined;
+    const effectiveSelectedKey = isControlledSingle
+        ? selectedKey
+        : internalSelectedKey;
+    const effectiveSelectedKeys = isControlledMultiple
+        ? selectedKeys
+        : internalSelectedKeys;
+    // Utility to normalize React keys by stripping array prefixes like ".$" or "."
+    const normalizeKeyValue = (key) => {
+        if (key == null)
+            return '';
+        const str = String(key);
+        return str.startsWith('.$')
+            ? str.slice(2)
+            : str.startsWith('.')
+                ? str.slice(1)
+                : str;
+    };
+    // Given an iterable of keys (array or Set) toggle membership for duplicates
+    const processSelectionArray = (iterable) => {
+        const resultSet = new Set();
+        for (const key of iterable) {
+            const nKey = normalizeKeyValue(key);
+            if (resultSet.has(nKey)) {
+                resultSet.delete(nKey); // toggle off if clicked twice
+            }
+            else {
+                resultSet.add(nKey); // select
+            }
+        }
+        return Array.from(resultSet);
+    };
+    // Helper to get selected item labels for display
+    const getSelectedLabels = () => {
+        if (!children)
+            return [];
+        const selectedSet = new Set(selectionMode === 'multiple'
+            ? (effectiveSelectedKeys || []).map(String)
+            : effectiveSelectedKey != null
+                ? [String(effectiveSelectedKey)]
+                : []);
+        const labels = [];
+        const extractLabels = (nodes) => {
+            React.Children.forEach(nodes, (child) => {
+                if (!child || typeof child !== 'object')
+                    return;
+                if (child.type === Item) {
+                    if (selectedSet.has(String(child.key))) {
+                        const label = child.props.textValue ||
+                            (typeof child.props.children === 'string'
+                                ? child.props.children
+                                : '') ||
+                            String(child.props.children || '');
+                        labels.push(label);
+                    }
+                }
+                if (child.props?.children) {
+                    extractLabels(child.props.children);
+                }
+            });
+        };
+        const processedKeys = new Set();
+        // Modified extractLabels to track which keys we've processed
+        const extractLabelsWithTracking = (nodes) => {
+            React.Children.forEach(nodes, (child) => {
+                if (!child || typeof child !== 'object')
+                    return;
+                if (child.type === Item) {
+                    const childKey = String(child.key);
+                    if (selectedSet.has(childKey)) {
+                        const label = child.props.textValue ||
+                            (typeof child.props.children === 'string'
+                                ? child.props.children
+                                : '') ||
+                            String(child.props.children || '');
+                        labels.push(label);
+                        processedKeys.add(childKey);
+                    }
+                }
+                if (child.props?.children) {
+                    extractLabelsWithTracking(child.props.children);
+                }
+            });
+        };
+        extractLabelsWithTracking(children);
+        // Handle custom values that don't have corresponding children
+        const selectedKeysArr = selectionMode === 'multiple'
+            ? (effectiveSelectedKeys || []).map(String)
+            : effectiveSelectedKey != null
+                ? [String(effectiveSelectedKey)]
+                : [];
+        // Add labels for any selected keys that weren't processed (custom values)
+        selectedKeysArr.forEach((key) => {
+            if (!processedKeys.has(key)) {
+                // This is a custom value, use the key as the label
+                labels.push(key);
+            }
+        });
+        return labels;
+    };
+    const selectedLabels = getSelectedLabels();
+    const hasSelection = selectedLabels.length > 0;
+    // Always keep the latest selection in a ref (with normalized keys) so that we can read it synchronously in the popover close effect.
+    const latestSelectionRef = useRef({
+        single: effectiveSelectedKey != null
+            ? normalizeKeyValue(effectiveSelectedKey)
+            : null,
+        multiple: (effectiveSelectedKeys ?? []).map(normalizeKeyValue),
+    });
+    React.useEffect(() => {
+        latestSelectionRef.current = {
+            single: effectiveSelectedKey != null
+                ? normalizeKeyValue(effectiveSelectedKey)
+                : null,
+            multiple: (effectiveSelectedKeys ?? []).map(normalizeKeyValue),
+        };
+    }, [effectiveSelectedKey, effectiveSelectedKeys]);
+    const selectionsWhenClosed = useRef({ single: null, multiple: [] });
+    // Function to sort children with selected items on top
+    const getSortedChildren = React.useCallback(() => {
+        if (!children)
+            return children;
+        // When the popover is **closed** we don't want to trigger any resorting –
+        // that could cause visible re-flows during the fade-out animation. Simply
+        // reuse whatever order we had while it was open (if available).
+        if (!isPopoverOpen) {
+            return cachedChildrenOrder.current ?? children;
+        }
+        // Popover is open – compute (or recompute) the sorted order for this
+        // session.
+        // Determine if there were any selections when the popover was previously closed.
+        const hadSelectionsWhenClosed = selectionMode === 'multiple'
+            ? selectionsWhenClosed.current.multiple.length > 0
+            : selectionsWhenClosed.current.single !== null;
+        // Only apply sorting when there were selections in the previous session.
+        // We intentionally do not depend on the `isPopoverOpen` flag here because that
+        // flag is updated **after** the first render triggered by clicking the
+        // trigger button. Relying on it caused a timing issue where the very first
+        // render of a freshly-opened popover was unsorted. By removing the
+        // `isPopoverOpen` check we ensure items are already sorted during that first
+        // render while still maintaining stable order within an open popover thanks
+        // to the `cachedChildrenOrder` guard above.
+        if (!hadSelectionsWhenClosed) {
+            return children;
+        }
+        // Create selected keys set for fast lookup
+        const selectedSet = new Set();
+        if (selectionMode === 'multiple') {
+            selectionsWhenClosed.current.multiple.forEach((key) => selectedSet.add(normalizeKeyValue(key)));
+        }
+        else if (selectionMode === 'single' &&
+            selectionsWhenClosed.current.single != null) {
+            selectedSet.add(normalizeKeyValue(selectionsWhenClosed.current.single));
+        }
+        // Helper function to check if an item is selected
+        const isItemSelected = (child) => {
+            return (child?.key != null && selectedSet.has(normalizeKeyValue(child.key)));
+        };
+        // Helper function to sort children array
+        const sortChildrenArray = (childrenArray) => {
+            const cloneWithNormalizedKey = (item) => React.cloneElement(item, {
+                key: normalizeKeyValue(item.key),
+            });
+            const selected = [];
+            const unselected = [];
+            childrenArray.forEach((child) => {
+                if (!child || typeof child !== 'object') {
+                    unselected.push(child);
+                    return;
+                }
+                // Handle sections - sort items within each section
+                if (child.type === BaseSection ||
+                    child.type?.displayName === 'Section') {
+                    const sectionChildren = Array.isArray(child.props.children)
+                        ? child.props.children
+                        : [child.props.children];
+                    const selectedItems = [];
+                    const unselectedItems = [];
+                    sectionChildren.forEach((sectionChild) => {
+                        if (sectionChild &&
+                            typeof sectionChild === 'object' &&
+                            (sectionChild.type === Item ||
+                                sectionChild.type?.displayName === 'Item')) {
+                            const clonedItem = cloneWithNormalizedKey(sectionChild);
+                            if (isItemSelected(sectionChild)) {
+                                selectedItems.push(clonedItem);
+                            }
+                            else {
+                                unselectedItems.push(clonedItem);
+                            }
+                        }
+                        else {
+                            unselectedItems.push(sectionChild);
+                        }
+                    });
+                    // Create new section with sorted children, preserving React element properly
+                    unselected.push(React.cloneElement(child, {
+                        ...child.props,
+                        children: [...selectedItems, ...unselectedItems],
+                    }));
+                }
+                // Handle non-section elements (items, dividers, etc.)
+                else {
+                    const clonedItem = cloneWithNormalizedKey(child);
+                    if (isItemSelected(child)) {
+                        selected.push(clonedItem);
+                    }
+                    else {
+                        unselected.push(clonedItem);
+                    }
+                }
+            });
+            return [...selected, ...unselected];
+        };
+        // Sort the children
+        const childrenArray = React.Children.toArray(children);
+        const sortedChildren = sortChildrenArray(childrenArray);
+        // Cache the sorted order when popover opens
+        if (isPopoverOpen) {
+            cachedChildrenOrder.current = sortedChildren;
+        }
+        return sortedChildren;
+    }, [
+        children,
+        effectiveSelectedKeys,
+        effectiveSelectedKey,
+        selectionMode,
+        isPopoverOpen,
+    ]);
+    // FilterListBox handles custom values internally when allowsCustomValue={true}
+    // We only provide the sorted original children
+    const finalChildren = getSortedChildren();
+    // Function to close popover and focus trigger button
+    const closeAndFocus = React.useCallback((close) => {
+        close();
+        // Use setTimeout to ensure the popover closes first, then focus the trigger
+        setTimeout(() => {
+            if (triggerRef.current) {
+                triggerRef.current.focus();
+            }
+        }, 0);
+    }, []);
+    const renderTriggerContent = () => {
+        // When there is a selection and a custom summary renderer is provided – use it.
+        if (hasSelection && typeof renderSummary === 'function') {
+            if (selectionMode === 'single') {
+                return renderSummary({
+                    selectedLabel: selectedLabels[0],
+                    selectedKey: effectiveSelectedKey ?? null,
+                    selectedLabels,
+                    selectedKeys: effectiveSelectedKeys,
+                    selectionMode: 'single',
+                });
+            }
+            return renderSummary({
+                selectedLabels,
+                selectedKeys: effectiveSelectedKeys,
+                selectionMode: 'multiple',
+            });
+        }
+        else if (hasSelection && renderSummary === false) {
+            return null;
+        }
+        let content = '';
+        if (!hasSelection) {
+            content = placeholder;
+        }
+        else if (selectionMode === 'single') {
+            content = selectedLabels[0];
+        }
+        else {
+            content = selectedLabels.join(', ');
+        }
+        if (!content) {
+            return null;
+        }
+        return (_jsx(Text, { ellipsis: true, style: { opacity: hasSelection ? 1 : 'var(--disabled-opacity)' }, children: content }));
+    };
+    // The trigger is rendered as a function so we can access the dialog state
+    const renderTrigger = (state) => {
+        // Track popover open/close state to control sorting
+        React.useEffect(() => {
+            if (state.isOpen !== isPopoverOpen) {
+                setIsPopoverOpen(state.isOpen);
+                if (!state.isOpen) {
+                    // Popover just closed – preserve the current sorted order so the
+                    // fade-out animation keeps its layout unchanged. We only need to
+                    // record the latest selection for the next session.
+                    selectionsWhenClosed.current = { ...latestSelectionRef.current };
+                }
+            }
+        }, [state.isOpen, isPopoverOpen]);
+        return (_jsx(Button, { ref: triggerRef, qa: props.qa || 'FilterPicker', type: type, theme: validationState === 'invalid' ? 'danger' : theme, size: size, isDisabled: isDisabled, isLoading: isLoading, mods: {
+                placeholder: !hasSelection,
+                selected: hasSelection,
+                ...externalMods,
+            }, icon: icon, rightIcon: _jsx(DirectionIcon, { to: state.isOpen ? 'top' : 'bottom' }), styles: styles, ...otherProps, "aria-label": `${props['aria-label'] ?? props.label ?? ''}`, children: renderTriggerContent() }));
+    };
+    const filterPickerField = (_jsxs(DialogTrigger, { type: "popover", placement: "bottom start", shouldFlip: true, isDismissable: true, children: [renderTrigger, (close) => (_jsx(Dialog, { display: "grid", styles: { gridRows: '1sf', ...popoverStyles }, children: _jsx(FilterListBox, { autoFocus: true, "aria-label": `${props['aria-label'] ?? props.label ?? ''} Picker`, selectedKey: selectionMode === 'single' ? effectiveSelectedKey : undefined, selectedKeys: selectionMode === 'multiple' ? effectiveSelectedKeys : undefined, disabledKeys: disabledKeys, focusOnHover: focusOnHover, allowsCustomValue: allowsCustomValue, selectionMode: selectionMode, validationState: validationState, isDisabled: isDisabled, stateRef: listStateRef, isCheckable: isCheckable, mods: {
+                        popover: true,
+                    }, header: header, footer: footer, headerStyles: headerStyles, footerStyles: footerStyles, qa: `${props.qa || 'FilterPicker'}ListBox`, onEscape: () => closeAndFocus(close), onOptionClick: (key) => {
+                        // For FilterPicker, clicking the content area should close the popover
+                        // in multiple selection mode (single mode already closes via onSelectionChange)
+                        if (selectionMode === 'multiple' && isCheckable) {
+                            closeAndFocus(close);
+                        }
+                    }, onSelectionChange: (selection) => {
+                        // No need to change any flags - children order is cached
+                        // Update internal state if uncontrolled
+                        if (selectionMode === 'single') {
+                            if (!isControlledSingle) {
+                                setInternalSelectedKey(selection);
+                            }
+                        }
+                        else {
+                            if (!isControlledMultiple) {
+                                let normalized = selection;
+                                if (Array.isArray(selection)) {
+                                    normalized = processSelectionArray(selection);
+                                }
+                                else if (selection &&
+                                    typeof selection === 'object' &&
+                                    selection instanceof Set) {
+                                    normalized = processSelectionArray(selection);
+                                }
+                                setInternalSelectedKeys(normalized);
+                            }
+                        }
+                        // Update latest selection ref synchronously
+                        if (selectionMode === 'single') {
+                            latestSelectionRef.current.single = selection;
+                        }
+                        else {
+                            if (Array.isArray(selection)) {
+                                latestSelectionRef.current.multiple = Array.from(new Set(processSelectionArray(selection)));
+                            }
+                            else if (selection &&
+                                typeof selection === 'object' &&
+                                selection instanceof Set) {
+                                latestSelectionRef.current.multiple = Array.from(new Set(processSelectionArray(selection)));
+                            }
+                            else {
+                                latestSelectionRef.current.multiple = selection;
+                            }
+                        }
+                        onSelectionChange?.(selection);
+                        if (selectionMode === 'single') {
+                            closeAndFocus(close);
+                        }
+                    }, children: finalChildren }) }))] }));
+    return wrapWithField(filterPickerField, ref, mergeProps({
+        ...props,
+        styles: undefined,
+    }, {}));
+});
+FilterPicker.Item = ListBox.Item;
+FilterPicker.Section = BaseSection;
+Object.defineProperty(FilterPicker, 'cubeInputType', {
+    value: 'FilterPicker',
+    enumerable: false,
+    configurable: false,
+});
+
+        

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

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

package/es/components/fields/Input/Input.js

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