@cube-dev/ui-kit 0.72.2 → 0.73.0

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.72.2
+ * @cube-dev/ui-kit v0.73.0
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.72.2
+ * @cube-dev/ui-kit v0.73.0
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.72.2
+ * @cube-dev/ui-kit v0.73.0
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.72.2
+ * @cube-dev/ui-kit v0.73.0
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.72.2
+ * @cube-dev/ui-kit v0.73.0
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.72.2
+ * @cube-dev/ui-kit v0.73.0
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.72.2
+ * @cube-dev/ui-kit v0.73.0
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.72.2
+ * @cube-dev/ui-kit v0.73.0
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.72.2
+ * @cube-dev/ui-kit v0.73.0
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.72.2
+ * @cube-dev/ui-kit v0.73.0
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.72.2
+ * @cube-dev/ui-kit v0.73.0
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.72.2
+ * @cube-dev/ui-kit v0.73.0
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.72.2
+ * @cube-dev/ui-kit v0.73.0
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.72.2
+ * @cube-dev/ui-kit v0.73.0
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.72.2
+ * @cube-dev/ui-kit v0.73.0
  * Released under the MIT license.
  */
 

package/es/components/fields/FileInput/FileInput.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.72.2
+ * @cube-dev/ui-kit v0.73.0
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.72.2
+ * @cube-dev/ui-kit v0.73.0
  * Released under the MIT license.
  */
 
@@ -15,7 +15,7 @@ import { BASE_STYLES, COLOR_STYLES, extractStyles, OUTER_STYLES, tasty, } from '
 import { mergeProps, modAttrs, useCombinedRefs } from '../../../utils/react';
 import { useFocus } from '../../../utils/react/interactions';
 import { StyledHeader } from '../../actions/Menu/styled';
-import { Block } from '../../Block';
+import { ItemBase } from '../../content/ItemBase';
 import { useFieldProps, useFormProps, wrapWithField } from '../../form';
 import { ListBox } from '../ListBox/ListBox';
 import { DEFAULT_INPUT_STYLES, INPUT_WRAPPER_STYLES, } from '../TextInput/TextInputBase';
@@ -55,6 +55,13 @@ const SearchWrapperElement = tasty({
         border: 'bottom',
         radius: '1r top',
         fill: '#clear',
+        height: '($size + 1x)',
+        $size: {
+            '': '$size-md',
+            '[data-size="small"]': '$size-sm',
+            '[data-size="medium"]': '$size-md',
+            '[data-size="large"]': '$size-lg',
+        },
     },
 });
 const SearchInputElement = tasty({
@@ -63,9 +70,12 @@ const SearchInputElement = tasty({
         ...DEFAULT_INPUT_STYLES,
         fill: '#clear',
         padding: {
-            '': '0 1.5x',
-            prefix: '0 1.5x 0 .5x',
+            '': '.5x $inline-padding',
+            prefix: '0 $inline-padding 0 .5x',
         },
+        '$inline-padding': 'max($min-inline-padding, (($size - 1lh) / 2 + $inline-compensation))',
+        '$inline-compensation': '1x',
+        '$min-inline-padding': '1x',
     },
 });
 const StyledHeaderWithoutBorder = tasty(StyledHeader, {
@@ -103,7 +113,7 @@ export const FilterListBox = forwardRef(function FilterListBox(props, ref) {
             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, shouldFocusWrap, labelSuffix, selectedKey, defaultSelectedKey, selectedKeys, defaultSelectedKeys, onSelectionChange: externalOnSelectionChange, allowsCustomValue = false, showSelectAll, selectAllLabel, header, footer, size = 'medium', headerStyles, footerStyles, listBoxStyles, items, children: renderChildren, onEscape, isCheckable, onOptionClick, selectionMode = 'single', ...otherProps } = props;
+    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, shouldFocusWrap, labelSuffix, selectedKey, defaultSelectedKey, selectedKeys, defaultSelectedKeys, onSelectionChange: externalOnSelectionChange, allowsCustomValue = false, showSelectAll, selectAllLabel, header, footer, size = 'medium', headerStyles, footerStyles, listBoxStyles, items, children: renderChildren, onEscape, isCheckable, onOptionClick, selectionMode = 'single', allValueProps, customValueProps, newCustomValueProps, ...otherProps } = props;
     // Preserve the original `children` (may be a render function) before we
     // potentially overwrite it.
     let children = renderChildren;
@@ -179,7 +189,7 @@ export const FilterListBox = forwardRef(function FilterListBox(props, ref) {
         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)));
+        const customArray = Array.from(customKeys).map((key) => (_jsx(Item, { textValue: key, ...customValueProps, children: key }, key)));
         // Identify which custom keys are currently selected so we can promote them.
         const selectedKeysSet = new Set();
         if (selectionMode === 'multiple') {
@@ -323,7 +333,7 @@ export const FilterListBox = forwardRef(function FilterListBox(props, ref) {
             return childrenToProcess;
         }
         // Append the custom option at the end.
-        const customOption = (_jsx(Item, { textValue: term, children: term }, term));
+        const customOption = (_jsx(Item, { textValue: term, ...mergeProps(customValueProps, newCustomValueProps), children: term }, term));
         if (Array.isArray(childrenToProcess)) {
             return [...childrenToProcess, customOption];
         }
@@ -613,7 +623,7 @@ export const FilterListBox = forwardRef(function FilterListBox(props, ref) {
                     const value = e.target.value;
                     setSearchValue(value);
                 }, ...keyboardProps, ...modAttrs(mods) })] }));
-    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, shouldFocusWrap: shouldFocusWrap, optionStyles: optionStyles, sectionStyles: sectionStyles, headingStyles: headingStyles, validationState: validationState, disallowEmptySelection: props.disallowEmptySelection, disabledKeys: props.disabledKeys, focusOnHover: focusOnHover, shouldUseVirtualFocus: true, showSelectAll: showSelectAll, selectAllLabel: selectAllLabel, footer: footer, footerStyles: footerStyles, mods: mods, size: size, styles: listBoxStyles, isCheckable: isCheckable, items: items, onSelectionChange: handleSelectionChange, onEscape: onEscape, onOptionClick: handleOptionClick, children: finalChildren }))] }));
+    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(ItemBase, { preset: "t4", color: "#dark-03", size: size, padding: "(.5x - 1bw)", 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, shouldFocusWrap: shouldFocusWrap, optionStyles: optionStyles, sectionStyles: sectionStyles, headingStyles: headingStyles, validationState: validationState, disallowEmptySelection: props.disallowEmptySelection, disabledKeys: props.disabledKeys, focusOnHover: focusOnHover, shouldUseVirtualFocus: true, showSelectAll: showSelectAll, selectAllLabel: selectAllLabel, footer: footer, footerStyles: footerStyles, mods: mods, size: size, styles: listBoxStyles, isCheckable: isCheckable, items: items, allValueProps: allValueProps, onSelectionChange: handleSelectionChange, onEscape: onEscape, onOptionClick: handleOptionClick, children: finalChildren }))] }));
     return wrapWithField(filterListBoxField, ref, mergeProps({ ...props, styles: undefined }, {}));
 });
 FilterListBox.Item = ListBox.Item;

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.72.2
+ * @cube-dev/ui-kit v0.73.0
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.72.2
+ * @cube-dev/ui-kit v0.73.0
  * Released under the MIT license.
  */
 
@@ -13,8 +13,10 @@ import { useWarn } from '../../../_internal/hooks/use-warn';
 import { DirectionIcon, 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 } from '../../../utils/react';
-import { Button } from '../../actions';
+import { useEventBus } from '../../../utils/react/useEventBus';
+import { ItemButton } from '../../actions';
 import { Text } from '../../content/Text';
 import { useFieldProps, useFormProps, wrapWithField } from '../../form';
 import { Dialog, DialogTrigger } from '../../overlays/Dialog';
@@ -60,8 +62,12 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
             return fieldProps;
         },
     });
-    let { qa, label, extra, icon, rightIcon, 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 = 'All', items, header, footer, headerStyles, footerStyles, triggerStyles, allowsCustomValue, renderSummary, isCheckable, ...otherProps } = props;
+    let { qa, label, extra, icon, rightIcon, prefix, suffix, hotkeys, triggerTooltip, triggerDescription, labelStyles, isRequired, necessityIndicator, validationState, isDisabled, isLoading, message, mods: externalMods, description, descriptionPlacement, 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 = 'All', items, header, footer, headerStyles, footerStyles, triggerStyles, allowsCustomValue, renderSummary, isCheckable, allValueProps, customValueProps, newCustomValueProps, ...otherProps } = props;
     styles = extractStyles(otherProps, PROP_STYLES, styles);
+    // Generate a unique ID for this FilterPicker instance
+    const filterPickerId = useMemo(() => generateRandomId(), []);
+    // Get event bus for menu synchronization
+    const { emit, on } = useEventBus();
     // Warn if isCheckable is false in single selection mode
     useWarn(isCheckable === false && selectionMode === 'single', {
         key: ['filterpicker-checkable-single-mode'],
@@ -595,6 +601,22 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
     const [shouldUpdatePosition, setShouldUpdatePosition] = useState(false);
     // The trigger is rendered as a function so we can access the dialog state
     const renderTrigger = (state) => {
+        // Listen for other menus opening and close this one if needed
+        useEffect(() => {
+            const unsubscribe = on('menu:open', (data) => {
+                // If another menu is opening and this FilterPicker is open, close this one
+                if (data.menuId !== filterPickerId && state.isOpen) {
+                    state.close();
+                }
+            });
+            return unsubscribe;
+        }, [on, filterPickerId, state]);
+        // Emit event when this FilterPicker opens
+        useEffect(() => {
+            if (state.isOpen) {
+                emit('menu:open', { menuId: filterPickerId });
+            }
+        }, [state.isOpen, emit, filterPickerId]);
         // Track popover open/close state to control sorting
         useEffect(() => {
             if (state.isOpen !== isPopoverOpen) {
@@ -621,15 +643,25 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
             // Disable the update of the position while the popover is open (with a delay) to avoid jumping
             setShouldUpdatePosition(!state.isOpen);
         }, [state.isOpen]);
-        return (_jsx(Button, { ref: triggerRef, "data-menu-trigger": true, type: type, theme: validationState === 'invalid' ? 'danger' : theme, size: size, isDisabled: isDisabled || isLoading, mods: {
+        return (_jsx(ItemButton, { ref: triggerRef, "data-popover-trigger": true, type: type, theme: validationState === 'invalid' ? 'danger' : theme, size: size, isDisabled: isDisabled || isLoading, mods: {
                 placeholder: !hasSelection,
                 selected: hasSelection,
                 ...externalMods,
-            }, icon: icon, rightIcon: isLoading ? (_jsx(LoadingIcon, {})) : rightIcon !== undefined ? (rightIcon) : (_jsx(DirectionIcon, { to: state.isOpen ? 'top' : 'bottom' })), styles: styles, ...keyboardProps, "aria-label": `${props['aria-label'] ?? props.label ?? ''}`, children: renderTriggerContent() }));
+            }, icon: icon, rightIcon: isLoading ? (_jsx(LoadingIcon, {})) : rightIcon !== undefined ? (rightIcon) : (_jsx(DirectionIcon, { to: state.isOpen ? 'top' : 'bottom' })), prefix: prefix, suffix: suffix, hotkeys: hotkeys, tooltip: triggerTooltip, description: triggerDescription, descriptionPlacement: descriptionPlacement, styles: styles, ...keyboardProps, "aria-label": `${props['aria-label'] ?? props.label ?? ''}`, children: renderTriggerContent() }));
     };
-    const filterPickerField = (_jsx(FilterPickerWrapper, { qa: props.qa || 'FilterPicker', styles: styles, ...otherProps, 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, items: items ? finalItems : undefined, "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, isLoading: isLoading, stateRef: listStateRef, isCheckable: isCheckable, mods: {
+    const filterPickerField = (_jsx(FilterPickerWrapper, { qa: props.qa || 'FilterPicker', styles: styles, ...otherProps, children: _jsxs(DialogTrigger, { type: "popover", placement: "bottom start", styles: triggerStyles, shouldUpdatePosition: shouldUpdatePosition, shouldFlip: shouldFlip, isDismissable: true, shouldCloseOnInteractOutside: (el) => {
+                const menuTriggerEl = el.closest('[data-popover-trigger]');
+                // If no menu trigger was clicked, allow closing
+                if (!menuTriggerEl)
+                    return true;
+                // If the same trigger that opened this popover was clicked, allow closing (toggle)
+                if (menuTriggerEl === triggerRef?.current)
+                    return true;
+                // Otherwise, don't close here. Let the event bus handle closing when the other opens.
+                return false;
+            }, children: [renderTrigger, (close) => (_jsx(Dialog, { display: "grid", styles: { gridRows: '1sf', ...popoverStyles }, children: _jsx(FocusScope, { restoreFocus: true, children: _jsx(FilterListBox, { autoFocus: true, items: items ? finalItems : undefined, "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, isLoading: isLoading, 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) => {
+                            }, size: size === 'small' ? 'medium' : size, showSelectAll: showSelectAll, selectAllLabel: selectAllLabel, header: header, footer: footer, headerStyles: headerStyles, footerStyles: footerStyles, qa: `${props.qa || 'FilterPicker'}ListBox`, allValueProps: allValueProps, customValueProps: customValueProps, newCustomValueProps: newCustomValueProps, 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) ||

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

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