@cube-dev/ui-kit 0.91.0 → 0.92.1

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.91.0
+ * @cube-dev/ui-kit v0.92.1
  * Released under the MIT license.
  */
 
@@ -40,7 +40,7 @@ function DateRangeSeparatedPicker(props, ref) {
     });
     props = Object.assign({}, DEFAULT_DATE_PROPS, props);
     let styles = extractStyles(props, CONTAINER_STYLES);
-    let { size, placeholderValue, isDisabled, validationState, useLocale: useLocaleProp, autoFocus, } = props;
+    let { qa, size, placeholderValue, isDisabled, validationState, useLocale: useLocaleProp, autoFocus, } = props;
     let targetRef = useRef(null);
     let state = useDateRangePickerState({
         ...props,
@@ -114,7 +114,7 @@ function DateRangeSeparatedPicker(props, ref) {
             endState.setOpen(false);
         }
     }
-    const component = (_jsxs(DatePickerElement, { ref: targetRef, styles: props.wrapperStyles, children: [_jsx(DateInputBase, { disableFocusRing: startFocusProps.isFocused, isDisabled: isDisabled, validationState: validationState, size: size, ...startFocusRingProps.focusProps, suffix: _jsxs(DialogTrigger, { hideArrow: true, type: "popover", mobileType: "tray", placement: "bottom right", targetRef: targetRef, isOpen: startState.isOpen, shouldFlip: props.shouldFlip, onOpenChange: startState.setOpen, children: [_jsx(DatePickerButton, { size: size, ...mergeProps(startProps.buttonProps, startFocusProps.focusProps), isDisabled: isDisabled }), _jsxs(Dialog, { ...startProps.dialogProps, width: "max-content", children: [_jsx(Calendar, { ...startProps.calendarProps, defaultFocusedValue: state.value?.start || state.value?.end || undefined, selectedRange: state.value?.start && state.value?.end
+    const component = (_jsxs(DatePickerElement, { ref: targetRef, styles: props.wrapperStyles, qa: qa || 'DateRangeSeparatedPicker', "data-input-type": "daterangeseparatedpicker", children: [_jsx(DateInputBase, { disableFocusRing: startFocusProps.isFocused, isDisabled: isDisabled, validationState: validationState, size: size, ...startFocusRingProps.focusProps, suffix: _jsxs(DialogTrigger, { hideArrow: true, type: "popover", mobileType: "tray", placement: "bottom right", targetRef: targetRef, isOpen: startState.isOpen, shouldFlip: props.shouldFlip, onOpenChange: startState.setOpen, children: [_jsx(DatePickerButton, { size: size, ...mergeProps(startProps.buttonProps, startFocusProps.focusProps), isDisabled: isDisabled }), _jsxs(Dialog, { ...startProps.dialogProps, width: "max-content", children: [_jsx(Calendar, { ...startProps.calendarProps, defaultFocusedValue: state.value?.start || state.value?.end || undefined, selectedRange: state.value?.start && state.value?.end
                                         ? state.value
                                         : undefined, onChange: (value) => onChange(value, 'start') }), showTimeField && (_jsx(TimeInput, { padding: "1x", label: dateMessages['time'], value: startState.timeValue, placeholderValue: timePlaceholder, granularity: timeGranularity, minValue: timeMinValue, maxValue: timeMaxValue, hourCycle: props.hourCycle, hideTimeZone: props.hideTimeZone, onChange: startState.setTimeValue }))] })] }), children: _jsx(DatePickerInput, { useLocale: useLocaleProp, ...startFieldProps }) }), _jsx(DateRangeDash, {}), _jsx(DateInputBase, { disableFocusRing: endFocusProps.isFocused, isDisabled: isDisabled, validationState: validationState, size: size, ...endFocusRingProps.focusProps, suffix: _jsxs(DialogTrigger, { hideArrow: true, type: "popover", mobileType: "tray", placement: "bottom right", targetRef: targetRef, isOpen: endState.isOpen, shouldFlip: props.shouldFlip, onOpenChange: endState.setOpen, children: [_jsx(DatePickerButton, { "aria-label": "Show calendar for the end date", size: size, ...mergeProps(endFocusProps.focusProps, endProps.buttonProps), isDisabled: isDisabled }), _jsxs(Dialog, { ...endProps.dialogProps, width: "max-content", children: [_jsx(Calendar, { ...endProps.calendarProps, defaultFocusedValue: state.value?.end || state.value?.start || undefined, selectedRange: state.value?.start && state.value?.end
                                         ? state.value

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.91.0
+ * @cube-dev/ui-kit v0.92.1
  * Released under the MIT license.
  */
 
@@ -11,6 +11,7 @@ import { useTimeField, } from 'react-aria';
 import { useTimeFieldState } from 'react-stately';
 import { useProviderProps } from '../../../provider';
 import { CONTAINER_STYLES, extractStyles, } from '../../../tasty';
+import { mergeProps } from '../../../utils/react';
 import { useFieldProps, useFormProps, wrapWithField } from '../../form';
 import { DateInputBase } from './DateInputBase';
 import { DatePickerSegment } from './DatePickerSegment';
@@ -24,7 +25,7 @@ function TimeInput(props, ref) {
     });
     props = Object.assign({}, DEFAULT_TIME_PROPS, props);
     let styles = extractStyles(props, CONTAINER_STYLES);
-    let { inputStyles, wrapperStyles, autoFocus, isDisabled, isReadOnly, isRequired, validationState, size = 'medium', } = props;
+    let { qa, inputStyles, wrapperStyles, autoFocus, isDisabled, isReadOnly, isRequired, validationState, size = 'medium', labelProps: userLabelProps, } = props;
     let domRef = useFocusManagerRef(ref);
     // let { locale } = useLocale();
     let state = useTimeFieldState({
@@ -33,11 +34,11 @@ function TimeInput(props, ref) {
     });
     let fieldRef = useRef(null);
     let { labelProps, fieldProps } = useTimeField(props, state, fieldRef);
-    const timeInput = (_jsx(DateInputBase, { ref: fieldRef, size: size, fieldProps: fieldProps, isDisabled: isDisabled, autoFocus: autoFocus, inputStyles: inputStyles, styles: wrapperStyles, validationState: validationState, children: state.segments.map((segment, i) => (_jsx(DatePickerSegment, { segment: segment, state: state, isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired }, i))) }));
+    const timeInput = (_jsx(DateInputBase, { ref: fieldRef, qa: qa || 'TimeInput', inputType: "timeinput", size: size, fieldProps: fieldProps, isDisabled: isDisabled, autoFocus: autoFocus, inputStyles: inputStyles, styles: wrapperStyles, validationState: validationState, children: state.segments.map((segment, i) => (_jsx(DatePickerSegment, { segment: segment, state: state, isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired }, i))) }));
     return wrapWithField(timeInput, domRef, {
         ...props,
         styles,
-        labelProps,
+        labelProps: mergeProps(labelProps, userLabelProps),
     });
 }
 /**

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.91.0
+ * @cube-dev/ui-kit v0.92.1
  * 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.91.0
+ * @cube-dev/ui-kit v0.92.1
  * 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.91.0
+ * @cube-dev/ui-kit v0.92.1
  * 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.91.0
+ * @cube-dev/ui-kit v0.92.1
  * 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.91.0
+ * @cube-dev/ui-kit v0.92.1
  * 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.91.0
+ * @cube-dev/ui-kit v0.92.1
  * 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.91.0
+ * @cube-dev/ui-kit v0.92.1
  * Released under the MIT license.
  */
 
@@ -132,7 +132,7 @@ function FileInput(props, ref) {
             return inputRef?.current;
         },
     }));
-    const fileInput = (_jsxs(FileInputElement, { ref: domRef, qa: "FileInput", styles: inputStyles, isDisabled: isDisabled, mods: {
+    const fileInput = (_jsxs(FileInputElement, { ref: domRef, qa: qa || 'FileInput', styles: inputStyles, isDisabled: isDisabled, "data-input-type": "fileinput", mods: {
             selected: !!value,
             'drag-hover': dragHover,
         }, onKeyDown: (e) => {

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.91.0
+ * @cube-dev/ui-kit v0.92.1
  * Released under the MIT license.
  */
 
@@ -322,6 +322,7 @@ export const FilterListBox = forwardRef(function FilterListBox(props, ref) {
     // 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.
+    // Priority: focus on selected items first, then fall back to first visible item.
     useLayoutEffect(() => {
         const listState = listStateRef.current;
         if (!listState)
@@ -351,9 +352,51 @@ export const FilterListBox = forwardRef(function FilterListBox(props, ref) {
         if (currentFocused != null && visibleKeys.includes(currentFocused)) {
             return;
         }
-        // Set focus to the first visible item
-        selectionManager.setFocusedKey(visibleKeys[0]);
-    }, [searchValue, enhancedChildren]);
+        // Helper to find the first selected item that's visible
+        const findFirstVisibleSelectedKey = () => {
+            if (selectionMode === 'single') {
+                // Single selection: check if selectedKey is visible
+                if (selectedKey != null) {
+                    const selectedKeyStr = String(selectedKey);
+                    if (visibleKeys.some((k) => String(k) === selectedKeyStr)) {
+                        return selectedKey;
+                    }
+                }
+            }
+            else if (selectionMode === 'multiple') {
+                // Multiple selection: find first selected key that's visible
+                if (selectedKeys && selectedKeys !== 'all') {
+                    for (const key of selectedKeys) {
+                        const keyStr = String(key);
+                        if (visibleKeys.some((k) => String(k) === keyStr)) {
+                            return key;
+                        }
+                    }
+                }
+            }
+            return null;
+        };
+        // Determine which key to focus
+        let keyToFocus = null;
+        // If there's no focus yet (initial state), prioritize selected items
+        if (currentFocused == null) {
+            keyToFocus = findFirstVisibleSelectedKey();
+        }
+        else {
+            // If current focused item was filtered out, try to focus another selected item
+            keyToFocus = findFirstVisibleSelectedKey();
+        }
+        // Fallback to first visible item if no selected item found
+        if (keyToFocus == null) {
+            keyToFocus = visibleKeys[0];
+        }
+        // Mark this focus change as keyboard navigation so ListBox will scroll to it
+        if (listState.lastFocusSourceRef) {
+            listState.lastFocusSourceRef.current = 'keyboard';
+        }
+        // Set focus to the determined key
+        selectionManager.setFocusedKey(keyToFocus);
+    }, [searchValue, enhancedChildren, selectionMode, selectedKey, selectedKeys]);
     // Keyboard navigation handler for search input
     const { keyboardProps } = useKeyboard({
         onKeyDown: (e) => {
@@ -542,7 +585,7 @@ export const FilterListBox = forwardRef(function FilterListBox(props, ref) {
             onOptionClick(key);
         }
     };
-    const searchInput = (_jsxs(SearchWrapperElement, { mods: mods, "data-size": size, children: [isLoading && (_jsx("div", { "data-element": "Prefix", children: _jsx("div", { "data-element": "InputIcon", children: isLoading ? _jsx(LoadingIcon, {}) : null }) })), _jsx(SearchInputElement, { ref: searchInputRef, qa: qa || 'FilterListBox', id: id, "data-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
+    const searchInput = (_jsxs(SearchWrapperElement, { mods: mods, "data-size": size, children: [isLoading && (_jsx("div", { "data-element": "Prefix", children: _jsx("div", { "data-element": "InputIcon", children: isLoading ? _jsx(LoadingIcon, {}) : null }) })), _jsx(SearchInputElement, { ref: searchInputRef, qa: qa || 'FilterListBox', id: id, "data-prefix": isLoading ? '' : undefined, type: "search", placeholder: searchPlaceholder, value: searchValue, disabled: isDisabled, autoFocus: autoFocus, "data-autofocus": autoFocus ? '' : undefined, styles: searchInputStyles, "data-size": size, "data-input-type": "filterlistbox", 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;

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.91.0
+ * @cube-dev/ui-kit v0.92.1
  * 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.91.0
+ * @cube-dev/ui-kit v0.92.1
  * Released under the MIT license.
  */
 
@@ -63,7 +63,7 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
             return fieldProps;
         },
     });
-    let { qa, label, extra, id, 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, searchPlaceholder, autoFocus, filter, emptyLabel, searchInputStyles, searchInputRef, listStyles, optionStyles, sectionStyles, headingStyles, listRef, disallowEmptySelection, shouldUseVirtualFocus, onEscape, onOptionClick, isClearable, searchValue, onSearchChange, sortSelectedToTop: sortSelectedToTopProp, form, ...otherProps } = props;
+    let { qa, label, extra, id, 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, containerPadding = 8, 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, searchPlaceholder, autoFocus, filter, emptyLabel, searchInputStyles, searchInputRef, listStyles, optionStyles, sectionStyles, headingStyles, listRef, disallowEmptySelection, shouldUseVirtualFocus, onEscape, onOptionClick, isClearable, searchValue, onSearchChange, sortSelectedToTop: sortSelectedToTopProp, isButton = false, form, ...otherProps } = props;
     // Track if sortSelectedToTop was explicitly provided
     const sortSelectedToTopExplicit = sortSelectedToTopProp !== undefined;
     // Default to true if items are provided, false otherwise
@@ -356,7 +356,7 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
         }
         let content = '';
         if (!hasSelection) {
-            content = placeholder;
+            return _jsx(Text.Placeholder, { children: placeholder });
         }
         else if (selectionMode === 'single') {
             content = selectedLabels[0];
@@ -370,9 +370,11 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
         if (!content) {
             return null;
         }
-        return (_jsx(Text, { ellipsis: true, style: { opacity: hasSelection ? 1 : 'var(--disabled-opacity)' }, children: content }));
+        return content;
     };
     const [shouldUpdatePosition, setShouldUpdatePosition] = useState(true);
+    // Capture trigger width for overlay min-width
+    const triggerWidth = triggerRef?.current?.offsetWidth;
     // 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
@@ -447,12 +449,12 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
             props.onClear?.();
             return false;
         });
-        return (_jsx(ItemButton, { ref: triggerRef, "data-popover-trigger": true, isButton: false, qa: qa || 'FilterPicker', id: id, type: type, theme: validationState === 'invalid' ? 'danger' : theme, size: size, isDisabled: isDisabled || isLoading, mods: {
+        return (_jsx(ItemButton, { ref: triggerRef, "data-popover-trigger": true, isButton: isButton, qa: qa || 'FilterPicker', id: id, type: type, theme: validationState === 'invalid' ? 'danger' : theme, size: size, isDisabled: isDisabled || isLoading, "data-input-type": "filterpicker", mods: {
                 placeholder: !hasSelection,
                 ...externalMods,
             }, icon: icon, rightIcon: isLoading ? (_jsx(LoadingIcon, {})) : rightIcon !== undefined ? (rightIcon) : showClearButton ? (_jsx(ItemAction, { icon: _jsx(CloseIcon, {}), size: size, theme: validationState === 'invalid' ? 'danger' : undefined, qa: "FilterPickerClearButton", mods: { pressed: false }, onPress: clearValue })) : (_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: "FilterPickerWrapper", styles: styles, ...filterBaseProps(otherProps, { eventProps: true }), children: _jsxs(DialogTrigger, { type: "popover", placement: "bottom start", styles: triggerStyles, shouldUpdatePosition: shouldUpdatePosition, shouldFlip: shouldFlip && shouldUpdatePosition, isDismissable: true, shouldCloseOnInteractOutside: (el) => {
+    const filterPickerField = (_jsx(FilterPickerWrapper, { qa: "FilterPickerWrapper", styles: styles, ...filterBaseProps(otherProps, { eventProps: true }), children: _jsxs(DialogTrigger, { type: "popover", placement: "bottom start", styles: triggerStyles, containerPadding: containerPadding, shouldUpdatePosition: shouldUpdatePosition, shouldFlip: shouldFlip && shouldUpdatePosition, isDismissable: true, shouldCloseOnInteractOutside: (el) => {
                 const menuTriggerEl = el.closest('[data-popover-trigger]');
                 // If no menu trigger was clicked, allow closing
                 if (!menuTriggerEl)
@@ -462,11 +464,14 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
                     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: {
+            }, children: [renderTrigger, (close) => (_jsx(Dialog, { qa: "FilterPickerOverlay", display: "grid", styles: {
                         gridRows: '1sf',
-                        width: '30x max-content 50vw',
+                        width: 'max($overlay-min-width, 30x) max-content 50vw',
+                        '$overlay-min-width': '30x',
                         ...popoverStyles,
-                    }, children: _jsx(FocusScope, { restoreFocus: true, children: _jsx(FilterListBox, { autoFocus: true, items: items ? finalItems : undefined, "aria-label": `${props['aria-label'] ?? props.label ?? ''} Picker`, _internalCollection: localCollectionState.collection, selectedKey: selectionMode === 'single' ? mappedSelectedKey : undefined, selectedKeys: selectionMode === 'multiple' ? mappedSelectedKeys : undefined, searchPlaceholder: searchPlaceholder, filter: filter, searchValue: searchValue, listStyles: listStyles, optionStyles: optionStyles, sectionStyles: sectionStyles, headingStyles: headingStyles, listRef: listRef, disallowEmptySelection: disallowEmptySelection, emptyLabel: emptyLabel, searchInputStyles: searchInputStyles, searchInputRef: searchInputRef, disabledKeys: disabledKeys, focusOnHover: focusOnHover, shouldFocusWrap: shouldFocusWrap, allowsCustomValue: allowsCustomValue, selectionMode: selectionMode, validationState: validationState, isDisabled: isDisabled, isLoading: isLoading, stateRef: listStateRef, isCheckable: isCheckable, mods: {
+                    }, style: triggerWidth
+                        ? { '--overlay-min-width': `${triggerWidth}px` }
+                        : undefined, children: _jsx(FocusScope, { restoreFocus: true, children: _jsx(FilterListBox, { autoFocus: true, items: items ? finalItems : undefined, "aria-label": `${props['aria-label'] ?? props.label ?? ''} Picker`, _internalCollection: localCollectionState.collection, selectedKey: selectionMode === 'single' ? mappedSelectedKey : undefined, selectedKeys: selectionMode === 'multiple' ? mappedSelectedKeys : undefined, searchPlaceholder: searchPlaceholder, filter: filter, searchValue: searchValue, listStyles: listStyles, optionStyles: optionStyles, sectionStyles: sectionStyles, headingStyles: headingStyles, listRef: listRef, disallowEmptySelection: disallowEmptySelection, emptyLabel: emptyLabel, searchInputStyles: searchInputStyles, searchInputRef: searchInputRef, 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, allValueProps: allValueProps, customValueProps: customValueProps, newCustomValueProps: newCustomValueProps, onSearchChange: onSearchChange, onEscape: () => close(), onOptionClick: (key) => {
                                 // For FilterPicker, clicking the content area should close the popover

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

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

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

@@ -1,20 +1,16 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.91.0
+ * @cube-dev/ui-kit v0.92.1
  * Released under the MIT license.
  */
 
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
 import { FileInput } from '../FileInput/FileInput';
 import { NumberInput } from '../NumberInput/NumberInput';
 import { PasswordInput } from '../PasswordInput/PasswordInput';
 import { TextArea } from '../TextArea/TextArea';
 import { TextInput } from '../TextInput';
-export const Input = Object.assign(forwardRef(function Input(props, ref) {
-    return _jsx(TextInput, { ref: ref, ...props });
-}), {
+export const Input = Object.assign(TextInput, {
     Text: TextInput,
     Password: PasswordInput,
     Number: NumberInput,

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

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

package/es/components/fields/ListBox/ListBox.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.91.0
+ * @cube-dev/ui-kit v0.92.1
  * Released under the MIT license.
  */
 
@@ -526,7 +526,7 @@ export const ListBox = forwardRef(function ListBox(props, ref) {
         props.selectionMode,
         externalMods,
     ]);
-    const listBoxField = (_jsxs(ListBoxWrapperElement, { ref: ref, qa: "ListBoxWrapper", mods: mods, styles: styles, "data-shape": shape, children: [header ? (_jsx(StyledHeader, { styles: headerStyles, "data-size": size, children: header })) : (_jsx("div", { role: "presentation" })), showSelectAll && props.selectionMode === 'multiple' ? (_jsx(SelectAllOption, { label: selectAllLabel || 'Select All', state: listState, lastFocusSourceRef: lastFocusSourceRef, isSelected: selectAllState.isSelected, isIndeterminate: selectAllState.isIndeterminate, isDisabled: isDisabled, isCheckable: isCheckable, size: size, allValueProps: allValueProps, onClick: handleSelectAllClick })) : (_jsxs(_Fragment, { children: [_jsx("div", { role: "presentation" }), _jsx("div", { role: "presentation" })] })), _jsx(ListBoxScrollElement, { ref: scrollRef, mods: mods, ...focusProps, children: listState.collection.size === 0 ? (_jsx(Item, { preset: "t4", color: "#dark-03", size: size, padding: "(.5x - 1bw)", children: emptyLabel })) : (_jsx(ListElement, { qa: qa || 'ListBox', ...mergedListBoxProps, ref: listRef, styles: listStyles, "aria-disabled": isDisabled || undefined, mods: { sections: hasSections }, "data-shape": shape, style: shouldVirtualize
+    const listBoxField = (_jsxs(ListBoxWrapperElement, { ref: ref, qa: "ListBoxWrapper", mods: mods, styles: styles, "data-shape": shape, children: [header ? (_jsx(StyledHeader, { styles: headerStyles, "data-size": size, children: header })) : (_jsx("div", { role: "presentation" })), showSelectAll && props.selectionMode === 'multiple' ? (_jsx(SelectAllOption, { label: selectAllLabel || 'Select All', state: listState, lastFocusSourceRef: lastFocusSourceRef, isSelected: selectAllState.isSelected, isIndeterminate: selectAllState.isIndeterminate, isDisabled: isDisabled, isCheckable: isCheckable, size: size, allValueProps: allValueProps, onClick: handleSelectAllClick })) : (_jsxs(_Fragment, { children: [_jsx("div", { role: "presentation" }), _jsx("div", { role: "presentation" })] })), _jsx(ListBoxScrollElement, { ref: scrollRef, mods: mods, ...focusProps, children: listState.collection.size === 0 ? (_jsx(Item, { preset: "t4", color: "#dark-03", size: size, padding: "(.5x - 1bw)", children: emptyLabel })) : (_jsx(ListElement, { qa: qa || 'ListBox', ...mergedListBoxProps, ref: listRef, styles: listStyles, "aria-disabled": isDisabled || undefined, mods: { sections: hasSections }, "data-shape": shape, "data-input-type": "listbox", style: shouldVirtualize
                         ? {
                             position: 'relative',
                             height: `${rowVirtualizer.getTotalSize() + 3}px`,

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

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

package/es/components/fields/NumberInput/NumberInput.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.91.0
+ * @cube-dev/ui-kit v0.92.1
  * Released under the MIT license.
  */
 
@@ -11,6 +11,7 @@ import { useLocale, useNumberField } from 'react-aria';
 import { useNumberFieldState } from 'react-stately';
 import { useProviderProps } from '../../../provider';
 import { tasty } from '../../../tasty';
+import { mergeProps } from '../../../utils/react';
 import { castNullableNumberValue, } from '../../../utils/react/nullableValue';
 import { useFieldProps } from '../../form';
 import { TextInputBase } from '../TextInput';
@@ -34,15 +35,17 @@ function NumberInput(props, ref) {
     props = castNullableNumberValue(props);
     props = useProviderProps(props);
     props = useFieldProps(props);
-    let { hideStepper, suffix, value, defaultValue, onChange, inputRef, ...otherProps } = props;
+    let { hideStepper, suffix, value, defaultValue, onChange, inputRef, labelProps: userLabelProps, ...otherProps } = props;
     let showStepper = !hideStepper;
     let { locale } = useLocale();
     let state = useNumberFieldState({ ...props, locale });
     let localInputRef = useRef(null);
     inputRef = inputRef ?? localInputRef;
     let { groupProps, labelProps, inputProps, incrementButtonProps, decrementButtonProps, } = useNumberField(props, state, inputRef);
+    // Merge user-provided labelProps with aria labelProps
+    const mergedLabelProps = mergeProps(labelProps, userLabelProps);
     const steppers = showStepper ? (_jsxs(StepperContainer, { children: [_jsx(StepButton, { isDisabled: props.isDisabled, direction: "up", ...incrementButtonProps, size: otherProps.size }), _jsx(StepButton, { isDisabled: props.isDisabled, direction: "down", ...decrementButtonProps, size: otherProps.size })] })) : undefined;
-    return (_jsx(StyledTextInputBase, { ...otherProps, ref: ref, labelProps: labelProps, inputProps: inputProps, inputRef: inputRef, wrapperProps: groupProps, suffixPosition: "after", suffix: showStepper ? (props.suffixPosition === 'before' ? (_jsxs(_Fragment, { children: [suffix, steppers] })) : (_jsxs(_Fragment, { children: [steppers, suffix] }))) : (suffix) }));
+    return (_jsx(StyledTextInputBase, { ...otherProps, ref: ref, labelProps: mergedLabelProps, inputProps: { ...inputProps, 'data-input-type': 'numberinput' }, inputRef: inputRef, wrapperProps: groupProps, suffixPosition: "after", suffix: showStepper ? (props.suffixPosition === 'before' ? (_jsxs(_Fragment, { children: [suffix, steppers] })) : (_jsxs(_Fragment, { children: [steppers, suffix] }))) : (suffix) }));
 }
 /**
  * NumberFields allow users to enter a number and increment or decrement the value using stepper buttons.

package/es/components/fields/NumberInput/StepButton.js

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

package/es/components/fields/PasswordInput/PasswordInput.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.91.0
+ * @cube-dev/ui-kit v0.92.1
  * Released under the MIT license.
  */
 
@@ -10,6 +10,7 @@ import { forwardRef, useCallback, useRef, useState } from 'react';
 import { useTextField } from 'react-aria';
 import { EyeIcon, EyeInvisibleIcon } from '../../../icons';
 import { useProviderProps } from '../../../provider';
+import { mergeProps } from '../../../utils/react';
 import { castNullableStringValue, } from '../../../utils/react/nullableValue';
 import { ItemAction } from '../../actions';
 import { useFieldProps } from '../../form';
@@ -25,18 +26,20 @@ function PasswordInput(props, ref) {
         }),
     });
     let [type, setType] = useState('password');
+    let { labelProps: userLabelProps, suffix, multiLine, inputRef: propsInputRef, ...rest } = props;
     let localInputRef = useRef(null);
-    let inputRef = props.inputRef ?? localInputRef;
+    let inputRef = propsInputRef ?? localInputRef;
     let { labelProps, inputProps } = useTextField({
-        ...props,
+        ...rest,
         type,
     }, inputRef);
-    const { suffix, multiLine, ...rest } = props;
+    // Merge user-provided labelProps with aria labelProps
+    const mergedLabelProps = mergeProps(labelProps, userLabelProps);
     const toggleType = useCallback(() => {
         setType((type) => (type === 'password' ? 'text' : 'password'));
     }, []);
     const wrappedSuffix = (_jsxs(_Fragment, { children: [suffix, _jsx(ItemAction, { type: "neutral", tooltip: "Toggle masking", icon: type === 'password' ? _jsx(EyeInvisibleIcon, {}) : _jsx(EyeIcon, {}), onPress: toggleType })] }));
-    return (_jsx(TextInputBase, { ref: ref, labelProps: labelProps, inputProps: inputProps, inputRef: inputRef, inputStyles: { paddingRight: '4x' }, type: type, suffixPosition: "after", suffix: wrappedSuffix, multiLine: multiLine, ...rest }));
+    return (_jsx(TextInputBase, { ref: ref, labelProps: mergedLabelProps, inputProps: { ...inputProps, 'data-input-type': 'passwordinput' }, inputRef: inputRef, inputStyles: { paddingRight: '4x' }, type: type, suffixPosition: "after", suffix: wrappedSuffix, multiLine: multiLine, ...rest }));
 }
 /**
  * PasswordInputs are password inputs that allow users to input passwords or code entries

package/es/components/fields/Picker/Picker.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.91.0
+ * @cube-dev/ui-kit v0.92.1
  * Released under the MIT license.
  */
 
@@ -62,7 +62,7 @@ export const Picker = forwardRef(function Picker(props, ref) {
             return fieldProps;
         },
     });
-    let { id, 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, renderSummary, isCheckable, allValueProps, listStyles, optionStyles, sectionStyles, headingStyles, listRef, disallowEmptySelection, shouldUseVirtualFocus, onEscape, onOptionClick, isClearable, onClear, sortSelectedToTop, listStateRef: externalListStateRef, ...otherProps } = props;
+    let { id, 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, containerPadding = 8, selectedKey, defaultSelectedKey, selectedKeys, defaultSelectedKeys, disabledKeys, onSelectionChange, selectionMode = 'single', listStateRef, focusOnHover, showSelectAll, selectAllLabel = 'All', items, header, footer, headerStyles, footerStyles, triggerStyles, renderSummary, isCheckable, allValueProps, listStyles, optionStyles, sectionStyles, headingStyles, listRef, disallowEmptySelection, shouldUseVirtualFocus, onEscape, onOptionClick, isClearable, onClear, sortSelectedToTop, isButton = false, listStateRef: externalListStateRef, ...otherProps } = props;
     styles = extractStyles(otherProps, PROP_STYLES, styles);
     // Generate a unique ID for this Picker instance
     const pickerId = useMemo(() => generateRandomId(), []);
@@ -235,7 +235,7 @@ export const Picker = forwardRef(function Picker(props, ref) {
     const hasSelection = selectedLabels.length > 0;
     const renderTriggerContent = () => {
         // When there is a selection and a custom summary renderer is provided – use it.
-        if (hasSelection && typeof renderSummary === 'function') {
+        if (typeof renderSummary === 'function') {
             if (selectionMode === 'single') {
                 return renderSummary({
                     selectedLabel: selectedLabels[0],
@@ -251,12 +251,12 @@ export const Picker = forwardRef(function Picker(props, ref) {
                 selectionMode: 'multiple',
             });
         }
-        else if (hasSelection && renderSummary === false) {
+        else if (renderSummary === false) {
             return null;
         }
         let content = '';
         if (!hasSelection) {
-            content = placeholder;
+            return _jsx(Text.Placeholder, { children: placeholder });
         }
         else if (selectionMode === 'single') {
             content = selectedLabels[0];
@@ -270,9 +270,11 @@ export const Picker = forwardRef(function Picker(props, ref) {
         if (!content) {
             return null;
         }
-        return (_jsx(Text, { ellipsis: true, style: { opacity: hasSelection ? 1 : 'var(--disabled-opacity)' }, children: content }));
+        return content;
     };
     const [shouldUpdatePosition, setShouldUpdatePosition] = useState(true);
+    // Capture trigger width for overlay min-width
+    const triggerWidth = triggerRef?.current?.offsetWidth;
     // 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
@@ -341,12 +343,12 @@ export const Picker = forwardRef(function Picker(props, ref) {
             onClear?.();
             return false;
         });
-        return (_jsx(ItemButton, { ref: triggerRef, "data-popover-trigger": true, isButton: false, id: id, qa: qa || 'PickerTrigger', type: type, theme: validationState === 'invalid' ? 'danger' : theme, size: size, isDisabled: isDisabled || isLoading, mods: {
+        return (_jsx(ItemButton, { ref: triggerRef, "data-popover-trigger": true, isButton: isButton, id: id, qa: qa || 'PickerTrigger', type: type, theme: validationState === 'invalid' ? 'danger' : theme, size: size, isDisabled: isDisabled || isLoading, "data-input-type": "picker", mods: {
                 placeholder: !hasSelection,
                 ...externalMods,
             }, icon: icon, rightIcon: isLoading ? (_jsx(LoadingIcon, {})) : rightIcon !== undefined ? (rightIcon) : showClearButton ? (_jsx(ItemAction, { icon: _jsx(CloseIcon, {}), size: size, theme: validationState === 'invalid' ? 'danger' : undefined, qa: "PickerClearButton", mods: { pressed: false }, onPress: clearValue })) : (_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 pickerField = (_jsx(PickerWrapper, { styles: styles, ...filterBaseProps(otherProps, { eventProps: true }), children: _jsxs(DialogTrigger, { type: "popover", placement: "bottom start", styles: triggerStyles, shouldUpdatePosition: shouldUpdatePosition, shouldFlip: shouldFlip && shouldUpdatePosition, isDismissable: true, shouldCloseOnInteractOutside: (el) => {
+    const pickerField = (_jsx(PickerWrapper, { styles: styles, ...filterBaseProps(otherProps, { eventProps: true }), children: _jsxs(DialogTrigger, { type: "popover", placement: "bottom start", styles: triggerStyles, containerPadding: containerPadding, shouldUpdatePosition: shouldUpdatePosition, shouldFlip: shouldFlip && shouldUpdatePosition, isDismissable: true, shouldCloseOnInteractOutside: (el) => {
                 const menuTriggerEl = el.closest('[data-popover-trigger]');
                 // If no menu trigger was clicked, allow closing
                 if (!menuTriggerEl)
@@ -356,11 +358,14 @@ export const Picker = forwardRef(function Picker(props, ref) {
                     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: {
+            }, children: [renderTrigger, (close) => (_jsx(Dialog, { qa: "PickerOverlay", display: "grid", styles: {
                         gridRows: '1sf',
-                        width: '30x max-content 50vw',
+                        width: '$overlay-min-width max-content 50vw',
+                        '$overlay-min-width': '30x',
                         ...popoverStyles,
-                    }, children: _jsx(FocusScope, { restoreFocus: true, children: _jsx(ListBox, { autoFocus: true, items: items ? finalItems : undefined, "aria-label": `${props['aria-label'] ?? props.label ?? ''} Picker`, selectedKey: selectionMode === 'single' ? effectiveSelectedKey : undefined, selectedKeys: selectionMode === 'multiple'
+                    }, style: triggerWidth
+                        ? { '--overlay-min-width': `${triggerWidth}px` }
+                        : undefined, children: _jsx(FocusScope, { restoreFocus: true, children: _jsx(ListBox, { autoFocus: true, items: items ? finalItems : undefined, "aria-label": `${props['aria-label'] ?? props.label ?? ''} Picker`, selectedKey: selectionMode === 'single' ? effectiveSelectedKey : undefined, selectedKeys: selectionMode === 'multiple'
                                 ? effectiveSelectedKeys
                                 : undefined, listStyles: listStyles, optionStyles: optionStyles, sectionStyles: sectionStyles, headingStyles: headingStyles, listRef: listRef, disallowEmptySelection: disallowEmptySelection, disabledKeys: disabledKeys, focusOnHover: focusOnHover, shouldFocusWrap: shouldFocusWrap, selectionMode: selectionMode, validationState: validationState, isDisabled: isDisabled, isLoading: isLoading, stateRef: internalListStateRef, isCheckable: isCheckable, shape: "popover", size: "medium", showSelectAll: showSelectAll, selectAllLabel: selectAllLabel, header: header, footer: footer, headerStyles: headerStyles, footerStyles: footerStyles, qa: `${props.qa || 'Picker'}ListBox`, allValueProps: allValueProps, onEscape: () => close(), onOptionClick: (key) => {
                                 // For Picker, clicking the content area should close the popover

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

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