@cube-dev/ui-kit 0.0.0-canary-ce17ba4 → 0.0.0-canary-1bcd6b2

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-ce17ba4
+ * @cube-dev/ui-kit v0.0.0-canary-1bcd6b2
  * Released under the MIT license.
  */
 
@@ -24,7 +24,7 @@ function TimeInput(props, ref) {
     });
     props = Object.assign({}, DEFAULT_TIME_PROPS, props);
     let styles = extractStyles(props, CONTAINER_STYLES);
-    let { qa, inputStyles, wrapperStyles, autoFocus, isDisabled, isReadOnly, isRequired, validationState, size = 'medium', } = props;
+    let { inputStyles, wrapperStyles, autoFocus, isDisabled, isReadOnly, isRequired, validationState, size = 'medium', } = props;
     let domRef = useFocusManagerRef(ref);
     // let { locale } = useLocale();
     let state = useTimeFieldState({
@@ -33,7 +33,7 @@ function TimeInput(props, ref) {
     });
     let fieldRef = useRef(null);
     let { labelProps, fieldProps } = useTimeField(props, state, fieldRef);
-    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))) }));
+    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))) }));
     return wrapWithField(timeInput, domRef, {
         ...props,
         styles,

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-ce17ba4
+ * @cube-dev/ui-kit v0.0.0-canary-1bcd6b2
  * 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.0.0-canary-ce17ba4
+ * @cube-dev/ui-kit v0.0.0-canary-1bcd6b2
  * 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.0.0-canary-ce17ba4
+ * @cube-dev/ui-kit v0.0.0-canary-1bcd6b2
  * 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.0.0-canary-ce17ba4
+ * @cube-dev/ui-kit v0.0.0-canary-1bcd6b2
  * 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.0.0-canary-ce17ba4
+ * @cube-dev/ui-kit v0.0.0-canary-1bcd6b2
  * 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.0.0-canary-ce17ba4
+ * @cube-dev/ui-kit v0.0.0-canary-1bcd6b2
  * 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.0.0-canary-ce17ba4
+ * @cube-dev/ui-kit v0.0.0-canary-1bcd6b2
  * Released under the MIT license.
  */
 
@@ -132,7 +132,7 @@ function FileInput(props, ref) {
             return inputRef?.current;
         },
     }));
-    const fileInput = (_jsxs(FileInputElement, { ref: domRef, qa: qa || 'FileInput', styles: inputStyles, isDisabled: isDisabled, "data-input-type": "fileinput", mods: {
+    const fileInput = (_jsxs(FileInputElement, { ref: domRef, qa: "FileInput", styles: inputStyles, isDisabled: isDisabled, 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.0.0-canary-ce17ba4
+ * @cube-dev/ui-kit v0.0.0-canary-1bcd6b2
  * Released under the MIT license.
  */
 
@@ -322,7 +322,6 @@ 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)
@@ -352,51 +351,9 @@ export const FilterListBox = forwardRef(function FilterListBox(props, ref) {
         if (currentFocused != null && visibleKeys.includes(currentFocused)) {
             return;
         }
-        // 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]);
+        // Set focus to the first visible item
+        selectionManager.setFocusedKey(visibleKeys[0]);
+    }, [searchValue, enhancedChildren]);
     // Keyboard navigation handler for search input
     const { keyboardProps } = useKeyboard({
         onKeyDown: (e) => {
@@ -585,7 +542,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, "data-input-type": "filterlistbox", 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, 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.0.0-canary-ce17ba4
+ * @cube-dev/ui-kit v0.0.0-canary-1bcd6b2
  * 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.0.0-canary-ce17ba4
+ * @cube-dev/ui-kit v0.0.0-canary-1bcd6b2
  * 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, 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;
+    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;
     // 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) {
-            return _jsx(Text.Placeholder, { children: placeholder });
+            content = placeholder;
         }
         else if (selectionMode === 'single') {
             content = selectedLabels[0];
@@ -370,11 +370,9 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
         if (!content) {
             return null;
         }
-        return content;
+        return (_jsx(Text, { ellipsis: true, style: { opacity: hasSelection ? 1 : 'var(--disabled-opacity)' }, children: 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
@@ -449,12 +447,12 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
             props.onClear?.();
             return false;
         });
-        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: {
+        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: {
                 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, containerPadding: containerPadding, 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, 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)
@@ -464,14 +462,11 @@ 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, { qa: "FilterPickerOverlay", display: "grid", styles: {
+            }, children: [renderTrigger, (close) => (_jsx(Dialog, { display: "grid", styles: {
                         gridRows: '1sf',
-                        width: 'max($overlay-min-width, 30x) max-content 50vw',
-                        '$overlay-min-width': '30x',
+                        width: '30x max-content 50vw',
                         ...popoverStyles,
-                    }, 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: {
+                    }, 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.0.0-canary-ce17ba4
+ * @cube-dev/ui-kit v0.0.0-canary-1bcd6b2
  * Released under the MIT license.
  */
 

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

@@ -1,16 +1,20 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-ce17ba4
+ * @cube-dev/ui-kit v0.0.0-canary-1bcd6b2
  * 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(TextInput, {
+export const Input = Object.assign(forwardRef(function Input(props, ref) {
+    return _jsx(TextInput, { ref: ref, ...props });
+}), {
     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.0.0-canary-ce17ba4
+ * @cube-dev/ui-kit v0.0.0-canary-1bcd6b2
  * 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.0.0-canary-ce17ba4
+ * @cube-dev/ui-kit v0.0.0-canary-1bcd6b2
  * 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, "data-input-type": "listbox", 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, 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.0.0-canary-ce17ba4
+ * @cube-dev/ui-kit v0.0.0-canary-1bcd6b2
  * 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.0.0-canary-ce17ba4
+ * @cube-dev/ui-kit v0.0.0-canary-1bcd6b2
  * Released under the MIT license.
  */
 
@@ -42,7 +42,7 @@ function NumberInput(props, ref) {
     inputRef = inputRef ?? localInputRef;
     let { groupProps, labelProps, inputProps, incrementButtonProps, decrementButtonProps, } = useNumberField(props, state, inputRef);
     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, '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) }));
+    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) }));
 }
 /**
  * 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.0.0-canary-ce17ba4
+ * @cube-dev/ui-kit v0.0.0-canary-1bcd6b2
  * 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.0.0-canary-ce17ba4
+ * @cube-dev/ui-kit v0.0.0-canary-1bcd6b2
  * Released under the MIT license.
  */
 
@@ -36,7 +36,7 @@ function PasswordInput(props, ref) {
         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, 'data-input-type': 'passwordinput' }, inputRef: inputRef, inputStyles: { paddingRight: '4x' }, type: type, suffixPosition: "after", suffix: wrappedSuffix, multiLine: multiLine, ...rest }));
+    return (_jsx(TextInputBase, { ref: ref, labelProps: labelProps, inputProps: inputProps, 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.0.0-canary-ce17ba4
+ * @cube-dev/ui-kit v0.0.0-canary-1bcd6b2
  * 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, 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;
+    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;
     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 (typeof renderSummary === 'function') {
+        if (hasSelection && 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 (renderSummary === false) {
+        else if (hasSelection && renderSummary === false) {
             return null;
         }
         let content = '';
         if (!hasSelection) {
-            return _jsx(Text.Placeholder, { children: placeholder });
+            content = placeholder;
         }
         else if (selectionMode === 'single') {
             content = selectedLabels[0];
@@ -270,11 +270,9 @@ export const Picker = forwardRef(function Picker(props, ref) {
         if (!content) {
             return null;
         }
-        return content;
+        return (_jsx(Text, { ellipsis: true, style: { opacity: hasSelection ? 1 : 'var(--disabled-opacity)' }, children: 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
@@ -343,12 +341,12 @@ export const Picker = forwardRef(function Picker(props, ref) {
             onClear?.();
             return false;
         });
-        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: {
+        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: {
                 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, containerPadding: containerPadding, 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, 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)
@@ -358,14 +356,11 @@ 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, { qa: "PickerOverlay", display: "grid", styles: {
+            }, children: [renderTrigger, (close) => (_jsx(Dialog, { display: "grid", styles: {
                         gridRows: '1sf',
-                        width: '$overlay-min-width max-content 50vw',
-                        '$overlay-min-width': '30x',
+                        width: '30x max-content 50vw',
                         ...popoverStyles,
-                    }, 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'
+                    }, 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.0.0-canary-ce17ba4
+ * @cube-dev/ui-kit v0.0.0-canary-1bcd6b2
  * Released under the MIT license.
  */
 

package/es/components/fields/RadioGroup/Radio.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-ce17ba4
+ * @cube-dev/ui-kit v0.0.0-canary-1bcd6b2
  * Released under the MIT license.
  */
 
@@ -35,6 +35,7 @@ const RadioButtonElement = tasty(Item, {
     },
 });
 const TabRadioButtonSelectedElement = tasty(RadioButtonElement, {
+    qa: 'RadioSelected',
     styles: {
         fill: '#white',
         shadow: '$item-shadow',
@@ -198,10 +199,10 @@ function Radio(props, ref) {
         const ButtonElement = isRadioSelected && contextType === 'tabs'
             ? TabRadioButtonSelectedElement
             : RadioButtonElement;
-        return (_jsxs(ButtonElement, { ref: domRef, type: effectiveButtonType, theme: isInvalid ? 'danger' : 'default', size: effectiveSize, icon: icon, rightIcon: rightIcon, prefix: prefix, suffix: suffix, description: description, tooltip: tooltip, hotkeys: hotkeys, isSelected: isRadioSelected, isDisabled: isRadioDisabled, mods: mods, styles: styles, ...mergeProps(hoverProps, focusProps), children: [_jsx(HiddenInput, { qa: qa || 'Radio', "data-input-type": "radio", "aria-label": ariaLabel, ...inputProps, ref: inputRef, form: null, mods: { button: isButton, disabled: isRadioDisabled } }), label] }));
+        return (_jsxs(ButtonElement, { ref: domRef, type: effectiveButtonType, theme: isInvalid ? 'danger' : 'default', size: effectiveSize, icon: icon, rightIcon: rightIcon, prefix: prefix, suffix: suffix, description: description, tooltip: tooltip, hotkeys: hotkeys, isSelected: isRadioSelected, isDisabled: isRadioDisabled, mods: mods, styles: styles, ...mergeProps(hoverProps, focusProps), children: [_jsx(HiddenInput, { "data-qa": qa || 'Radio', "aria-label": ariaLabel, ...inputProps, ref: inputRef, form: null, mods: { button: isButton, disabled: isRadioDisabled } }), label] }));
     }
     // Render classic radio type
-    return (_jsxs(RadioWrapperElement, { styles: styles, ...hoverProps, ref: domRef, mods: mods, "data-type": type, children: [_jsx(HiddenInput, { qa: qa || 'Radio', "data-input-type": "radio", "aria-label": ariaLabel, ...mergeProps(inputProps, focusProps), ref: inputRef, mods: { button: isButton } }), _jsx(RadioNormalElement, { "data-element": "Input", mods: mods, "data-type": type, children: RadioCircleElement }), label && (_jsx(RadioLabelElement, { mods: mods, styles: labelStyles, ...filterBaseProps(labelProps), children: label }))] }));
+    return (_jsxs(RadioWrapperElement, { styles: styles, ...hoverProps, ref: domRef, mods: mods, "data-type": type, children: [_jsx(HiddenInput, { "data-qa": qa || 'Radio', "aria-label": ariaLabel, ...mergeProps(inputProps, focusProps), ref: inputRef, mods: { button: isButton } }), _jsx(RadioNormalElement, { "data-element": "Input", mods: mods, "data-type": type, children: RadioCircleElement }), label && (_jsx(RadioLabelElement, { mods: mods, styles: labelStyles, ...filterBaseProps(labelProps), children: label }))] }));
 }
 /**
  * Radio buttons allow users to select a single option from a list of mutually exclusive options.

package/es/components/fields/RadioGroup/RadioGroup.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-ce17ba4
+ * @cube-dev/ui-kit v0.0.0-canary-1bcd6b2
  * Released under the MIT license.
  */
 
@@ -51,7 +51,7 @@ function RadioGroup(props, ref) {
     props = useProviderProps(props);
     props = useFormProps(props);
     props = useFieldProps(props, { defaultValidationTrigger: 'onChange' });
-    let { qa, isDisabled, isRequired, labelPosition = 'top', isInvalid, children, styles, groupStyles, insideForm, 
+    let { isDisabled, isRequired, labelPosition = 'top', isInvalid, children, styles, groupStyles, insideForm, 
     // orientation, // ignore orientation since it came from the form context
     labelProps: baseLabelProps, size, buttonType, type, form, ...otherProps } = props;
     let domRef = useDOMRef(ref);
@@ -63,7 +63,7 @@ function RadioGroup(props, ref) {
             type === 'button' || type === 'tabs' ? 'horizontal' : 'vertical';
     }
     let { radioGroupProps: fieldProps, labelProps } = useRadioGroup({ ...props, orientation }, state);
-    let radioGroup = (_jsx(RadioGroupElement, { qa: qa || 'RadioGroup', styles: styles, "data-input-type": "radiogroup", mods: {
+    let radioGroup = (_jsx(RadioGroupElement, { styles: styles, mods: {
             horizontal: orientation === 'horizontal',
             'inside-form': insideForm,
             'side-label': labelPosition === 'side',

package/es/components/fields/RadioGroup/context.js

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

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

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

package/es/components/fields/SearchInput/SearchInput.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-ce17ba4
+ * @cube-dev/ui-kit v0.0.0-canary-1bcd6b2
  * Released under the MIT license.
  */
 
@@ -24,7 +24,7 @@ export const SearchInput = forwardRef(function SearchInput(props, ref) {
     let state = useSearchFieldState(props);
     let { inputProps, clearButtonProps } = useSearchField(props, state, inputRef);
     let showClearButton = isClearable && state.value !== '' && !props.isReadOnly;
-    return (_jsx(TextInputBase, { ref: ref, inputProps: { ...inputProps, 'data-input-type': 'searchinput' }, inputRef: inputRef, type: "search", icon: _jsx(SearchIcon, {}), suffixPosition: "after", ...props, suffix: props.suffix || showClearButton ? (_jsxs(_Fragment, { children: [props.suffix, showClearButton && (_jsx(ItemAction, { icon: _jsx(CloseIcon, {}), size: props.size, type: validationState === 'invalid' ? 'clear' : 'neutral', theme: validationState === 'invalid' ? 'danger' : undefined, ...ariaToCubeButtonProps(clearButtonProps), onPress: (e) => {
+    return (_jsx(TextInputBase, { ref: ref, inputProps: inputProps, inputRef: inputRef, type: "search", icon: _jsx(SearchIcon, {}), suffixPosition: "after", ...props, suffix: props.suffix || showClearButton ? (_jsxs(_Fragment, { children: [props.suffix, showClearButton && (_jsx(ItemAction, { icon: _jsx(CloseIcon, {}), size: props.size, type: validationState === 'invalid' ? 'clear' : 'neutral', theme: validationState === 'invalid' ? 'danger' : undefined, ...ariaToCubeButtonProps(clearButtonProps), onPress: (e) => {
                         // Call the original clear functionality
                         clearButtonProps.onPress?.();
                         // Call the onClear callback

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

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