@cube-dev/ui-kit 0.0.0-canary-e864021 → 0.0.0-canary-3d5ac77

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

@@ -1,18 +1,18 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-e864021
+ * @cube-dev/ui-kit v0.0.0-canary-3d5ac77
  * Released under the MIT license.
  */
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Children, cloneElement, forwardRef, useCallback, useEffect, useRef, useState, } from 'react';
+import { Children, cloneElement, forwardRef, useCallback, useEffect, useMemo, useRef, useState, } from 'react';
 import { FocusScope, useKeyboard } from 'react-aria';
 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 { BASE_STYLES, COLOR_STYLES, extractStyles, OUTER_STYLES, tasty, } from '../../../tasty';
 import { mergeProps } from '../../../utils/react';
 import { Button } from '../../actions';
 import { Text } from '../../content/Text';
@@ -21,6 +21,22 @@ import { Dialog, DialogTrigger } from '../../overlays/Dialog';
 import { FilterListBox, } from '../FilterListBox/FilterListBox';
 import { ListBox } from '../ListBox';
 const PROP_STYLES = [...BASE_STYLES, ...OUTER_STYLES, ...COLOR_STYLES];
+const FilterPickerWrapper = tasty({
+    qa: 'FilterPicker',
+    styles: {
+        display: 'grid',
+        flow: 'column',
+        gridRows: '1sf',
+        placeContent: 'stretch',
+        placeItems: 'stretch',
+    },
+});
+const TriggerButton = tasty(Button, {
+    qa: 'FilterPickerTrigger',
+    styles: {
+        placeContent: 'stretch',
+    },
+});
 export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
     props = useProviderProps(props);
     props = useFormProps(props);
@@ -35,7 +51,13 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
             }
             fieldProps.onSelectionChange = (key) => {
                 if (props.selectionMode === 'multiple') {
-                    onChange(key ? (Array.isArray(key) ? key : [key]) : []);
+                    // Handle "all" selection and array selections
+                    if (key === 'all') {
+                        onChange('all');
+                    }
+                    else {
+                        onChange(key ? (Array.isArray(key) ? key : [key]) : []);
+                    }
                 }
                 else {
                     onChange(Array.isArray(key) ? key[0] : key);
@@ -44,7 +66,7 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
             return fieldProps;
         },
     });
-    let { qa, label, extra, icon, labelStyles, isRequired, necessityIndicator, validationState, isDisabled, isLoading, message, mods: externalMods, description, placeholder, size = 'medium', styles, listBoxStyles, popoverStyles, type = 'outline', theme = 'default', labelSuffix, shouldFocusWrap, children, selectedKey, defaultSelectedKey, selectedKeys, defaultSelectedKeys, disabledKeys, onSelectionChange, selectionMode = 'single', listStateRef, focusOnHover, header, footer, headerStyles, footerStyles, allowsCustomValue, renderSummary, isCheckable, ...otherProps } = props;
+    let { qa, label, extra, icon, labelStyles, isRequired, necessityIndicator, validationState, isDisabled, isLoading, message, mods: externalMods, description, placeholder, size = 'medium', styles, listBoxStyles, popoverStyles, type = 'outline', theme = 'default', labelSuffix, shouldFocusWrap, children, shouldFlip = true, selectedKey, defaultSelectedKey, selectedKeys, defaultSelectedKeys, disabledKeys, onSelectionChange, selectionMode = 'single', listStateRef, focusOnHover, showSelectAll, selectAllLabel, header, footer, headerStyles, footerStyles, triggerStyles, 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', {
@@ -68,7 +90,8 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
     const effectiveSelectedKeys = isControlledMultiple
         ? selectedKeys
         : internalSelectedKeys;
-    // Utility to normalize React keys by stripping array prefixes like ".$" or "."
+    // Utility: remove React's ".$" / "." prefixes from element keys so that we
+    // can compare them with user-provided keys.
     const normalizeKeyValue = (key) => {
         if (key == null)
             return '';
@@ -79,11 +102,56 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
                 ? str.slice(1)
                 : str;
     };
+    // ---------------------------------------------------------------------------
+    // Map public-facing keys (without React's "." prefix) to the actual React
+    // element keys that appear in the collection (which usually have the `.$`
+    // or `.` prefix added by React when children are in an array). This ensures
+    // that the key we pass to ListBox exactly matches the keys it receives from
+    // React Aria, so the initial selection is highlighted correctly.
+    // ---------------------------------------------------------------------------
+    const findReactKey = useCallback((lookup) => {
+        if (lookup == null)
+            return lookup;
+        const normalizedLookup = normalizeKeyValue(lookup);
+        let foundKey = lookup;
+        const traverse = (nodes) => {
+            Children.forEach(nodes, (child) => {
+                if (!child || typeof child !== 'object')
+                    return;
+                if (child.key != null) {
+                    if (normalizeKeyValue(child.key) === normalizedLookup) {
+                        foundKey = child.key;
+                    }
+                }
+                if (child.props?.children) {
+                    traverse(child.props.children);
+                }
+            });
+        };
+        if (children)
+            traverse(children);
+        return foundKey;
+    }, [children]);
+    const mappedSelectedKey = useMemo(() => {
+        if (selectionMode !== 'single')
+            return null;
+        return findReactKey(effectiveSelectedKey);
+    }, [selectionMode, effectiveSelectedKey, findReactKey]);
+    const mappedSelectedKeys = useMemo(() => {
+        if (selectionMode !== 'multiple')
+            return undefined;
+        if (effectiveSelectedKeys === 'all')
+            return 'all';
+        if (Array.isArray(effectiveSelectedKeys)) {
+            return effectiveSelectedKeys.map((k) => findReactKey(k));
+        }
+        return effectiveSelectedKeys;
+    }, [selectionMode, effectiveSelectedKeys, findReactKey]);
     // 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);
+            const nKey = String(key);
             if (resultSet.has(nKey)) {
                 resultSet.delete(nKey); // toggle off if clicked twice
             }
@@ -97,10 +165,33 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
     const getSelectedLabels = () => {
         if (!children)
             return [];
-        const selectedSet = new Set(selectionMode === 'multiple'
-            ? (effectiveSelectedKeys || []).map(String)
+        // Handle "all" selection - return all available labels
+        if (selectionMode === 'multiple' && effectiveSelectedKeys === 'all') {
+            const allLabels = [];
+            const extractAllLabels = (nodes) => {
+                Children.forEach(nodes, (child) => {
+                    if (!child || typeof child !== 'object')
+                        return;
+                    if (child.type === Item) {
+                        const label = child.props.textValue ||
+                            (typeof child.props.children === 'string'
+                                ? child.props.children
+                                : '') ||
+                            String(child.props.children || '');
+                        allLabels.push(label);
+                    }
+                    if (child.props?.children) {
+                        extractAllLabels(child.props.children);
+                    }
+                });
+            };
+            extractAllLabels(children);
+            return allLabels;
+        }
+        const selectedSet = new Set(selectionMode === 'multiple' && effectiveSelectedKeys !== 'all'
+            ? (effectiveSelectedKeys || []).map((k) => normalizeKeyValue(k))
             : effectiveSelectedKey != null
-                ? [String(effectiveSelectedKey)]
+                ? [normalizeKeyValue(effectiveSelectedKey)]
                 : []);
         const labels = [];
         const extractLabels = (nodes) => {
@@ -108,7 +199,7 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
                 if (!child || typeof child !== 'object')
                     return;
                 if (child.type === Item) {
-                    if (selectedSet.has(String(child.key))) {
+                    if (selectedSet.has(normalizeKeyValue(child.key))) {
                         const label = child.props.textValue ||
                             (typeof child.props.children === 'string'
                                 ? child.props.children
@@ -147,14 +238,14 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
         };
         extractLabelsWithTracking(children);
         // Handle custom values that don't have corresponding children
-        const selectedKeysArr = selectionMode === 'multiple'
+        const selectedKeysArr = selectionMode === 'multiple' && effectiveSelectedKeys !== 'all'
             ? (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)) {
+            if (!processedKeys.has(normalizeKeyValue(key))) {
                 // This is a custom value, use the key as the label
                 labels.push(key);
             }
@@ -165,29 +256,35 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
     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),
+        single: effectiveSelectedKey != null ? String(effectiveSelectedKey) : null,
+        multiple: effectiveSelectedKeys === 'all'
+            ? 'all'
+            : (effectiveSelectedKeys ?? []).map(String),
     });
     useEffect(() => {
         latestSelectionRef.current = {
-            single: effectiveSelectedKey != null
-                ? normalizeKeyValue(effectiveSelectedKey)
-                : null,
-            multiple: (effectiveSelectedKeys ?? []).map(normalizeKeyValue),
+            single: effectiveSelectedKey != null ? String(effectiveSelectedKey) : null,
+            multiple: effectiveSelectedKeys === 'all'
+                ? 'all'
+                : (effectiveSelectedKeys ?? []).map(String),
         };
     }, [effectiveSelectedKey, effectiveSelectedKeys]);
     const selectionsWhenClosed = useRef({ single: null, multiple: [] });
+    // Capture the initial selection (from defaultSelectedKey(s)) so that
+    // the very first popover open can already use it for sorting.
+    useEffect(() => {
+        selectionsWhenClosed.current = { ...latestSelectionRef.current };
+    }, []); // run only once on mount
     // Function to sort children with selected items on top
     const getSortedChildren = 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;
+        // When the popover is **closed**, reuse the cached order if we have it to
+        // avoid unnecessary reflows. If we don't have a cache yet (first open),
+        // fall through to compute the sorted order so the very first render is
+        // already correct.
+        if (!isPopoverOpen && cachedChildrenOrder.current) {
+            return cachedChildrenOrder.current;
         }
         // Popover is open – compute (or recompute) the sorted order for this
         // session.
@@ -209,11 +306,17 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
         // Create selected keys set for fast lookup
         const selectedSet = new Set();
         if (selectionMode === 'multiple') {
-            selectionsWhenClosed.current.multiple.forEach((key) => selectedSet.add(normalizeKeyValue(key)));
+            if (selectionsWhenClosed.current.multiple === 'all') {
+                // Don't sort when "all" is selected, just return original children
+                return children;
+            }
+            else {
+                selectionsWhenClosed.current.multiple.forEach((key) => selectedSet.add(String(key)));
+            }
         }
         else if (selectionMode === 'single' &&
             selectionsWhenClosed.current.single != null) {
-            selectedSet.add(normalizeKeyValue(selectionsWhenClosed.current.single));
+            selectedSet.add(String(selectionsWhenClosed.current.single));
         }
         // Helper function to check if an item is selected
         const isItemSelected = (child) => {
@@ -278,8 +381,9 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
         // Sort the children
         const childrenArray = Children.toArray(children);
         const sortedChildren = sortChildrenArray(childrenArray);
-        // Cache the sorted order when popover opens
-        if (isPopoverOpen) {
+        // Cache the sorted order when popover opens or when we compute it for the
+        // first time before opening.
+        if (isPopoverOpen || !cachedChildrenOrder.current) {
             cachedChildrenOrder.current = sortedChildren;
         }
         return sortedChildren;
@@ -321,6 +425,9 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
         else if (selectionMode === 'single') {
             content = selectedLabels[0];
         }
+        else if (effectiveSelectedKeys === 'all') {
+            content = selectAllLabel;
+        }
         else {
             content = selectedLabels.join(', ');
         }
@@ -329,6 +436,7 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
         }
         return (_jsx(Text, { ellipsis: true, style: { opacity: hasSelection ? 1 : 'var(--disabled-opacity)' }, children: content }));
     };
+    const [shouldUpdatePosition, setShouldUpdatePosition] = useState(false);
     // 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
@@ -352,64 +460,75 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
                 }
             },
         });
-        return (_jsx(Button, { ref: triggerRef, qa: props.qa || 'FilterPicker', type: type, theme: validationState === 'invalid' ? 'danger' : theme, size: size, isDisabled: isDisabled, isLoading: isLoading, mods: {
+        setTimeout(() => {
+            // Disable the update of the position while the popover is open (with a delay) to avoid jumping
+            setShouldUpdatePosition(!state.isOpen);
+        }, 100);
+        return (_jsx(TriggerButton, { ref: triggerRef, 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, ...keyboardProps, "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(FocusScope, { restoreFocus: true, 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, shouldFocusWrap: shouldFocusWrap, allowsCustomValue: allowsCustomValue, selectionMode: selectionMode, validationState: validationState, isDisabled: isDisabled, stateRef: listStateRef, isCheckable: isCheckable, mods: {
-                            popover: true,
-                        }, size: size === 'small' ? 'medium' : size, header: header, footer: footer, headerStyles: headerStyles, footerStyles: footerStyles, qa: `${props.qa || 'FilterPicker'}ListBox`, onEscape: () => 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) {
-                                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);
+    const filterPickerField = (_jsx(FilterPickerWrapper, { qa: props.qa || 'FilterPicker', styles: styles, children: _jsxs(DialogTrigger, { type: "popover", placement: "bottom start", styles: triggerStyles, shouldUpdatePosition: shouldUpdatePosition, shouldFlip: shouldFlip, isDismissable: true, children: [renderTrigger, (close) => (_jsx(Dialog, { display: "grid", styles: { gridRows: '1sf', ...popoverStyles }, children: _jsx(FocusScope, { restoreFocus: true, children: _jsx(FilterListBox, { autoFocus: true, "aria-label": `${props['aria-label'] ?? props.label ?? ''} Picker`, selectedKey: selectionMode === 'single' ? mappedSelectedKey : undefined, selectedKeys: selectionMode === 'multiple' ? mappedSelectedKeys : undefined, disabledKeys: disabledKeys, focusOnHover: focusOnHover, shouldFocusWrap: shouldFocusWrap, allowsCustomValue: allowsCustomValue, selectionMode: selectionMode, validationState: validationState, isDisabled: isDisabled, stateRef: listStateRef, isCheckable: isCheckable, mods: {
+                                popover: true,
+                            }, size: size === 'small' ? 'medium' : size, showSelectAll: showSelectAll, selectAllLabel: selectAllLabel, header: header, footer: footer, headerStyles: headerStyles, footerStyles: footerStyles, qa: `${props.qa || 'FilterPicker'}ListBox`, onEscape: () => 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) ||
+                                    key === '__ALL__') {
+                                    close();
                                 }
-                            }
-                            else {
-                                if (!isControlledMultiple) {
-                                    let normalized = selection;
-                                    if (Array.isArray(selection)) {
-                                        normalized = processSelectionArray(selection);
+                            }, 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 (selection === 'all') {
+                                            normalized = 'all';
+                                        }
+                                        else 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 (selection === 'all') {
+                                        latestSelectionRef.current.multiple = 'all';
+                                    }
+                                    else if (Array.isArray(selection)) {
+                                        latestSelectionRef.current.multiple = Array.from(new Set(processSelectionArray(selection)));
                                     }
                                     else if (selection &&
                                         typeof selection === 'object' &&
                                         selection instanceof Set) {
-                                        normalized = processSelectionArray(selection);
+                                        latestSelectionRef.current.multiple = Array.from(new Set(processSelectionArray(selection)));
+                                    }
+                                    else {
+                                        latestSelectionRef.current.multiple = 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') {
+                                    close();
                                 }
-                            }
-                            onSelectionChange?.(selection);
-                            if (selectionMode === 'single') {
-                                close();
-                            }
-                        }, children: finalChildren }) }) }))] }));
+                            }, children: finalChildren }) }) }))] }) }));
     return wrapWithField(filterPickerField, ref, mergeProps({
         ...props,
         styles: undefined,

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

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