@cube-dev/ui-kit 0.83.3 → 0.85.0

package/es/components/fields/ComboBox/ComboBox.js

@@ -1,14 +1,14 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.83.3
+ * @cube-dev/ui-kit v0.85.0
  * Released under the MIT license.
  */
 
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { cloneElement, forwardRef, useCallback, useEffect, useMemo, useRef, useState, } from 'react';
 import { useFilter, useKeyboard, useOverlay, useOverlayPosition, } from 'react-aria';
-import { Section as BaseSection } from 'react-stately';
+import { Section as BaseSection, useListState } from 'react-stately';
 import { useEvent } from '../../../_internal';
 import { CloseIcon, DirectionIcon, LoadingIcon } from '../../../icons';
 import { useProviderProps } from '../../../provider';
@@ -34,6 +34,13 @@ const InputElement = tasty({
     as: 'input',
     styles: DEFAULT_INPUT_STYLES,
 });
+const ComboBoxOverlayWrapper = tasty({
+    qa: 'ComboBoxOverlayWrapper',
+    styles: {
+        position: 'absolute',
+        zIndex: 1000,
+    },
+});
 const ComboBoxOverlayElement = tasty({
     qa: 'ComboBoxOverlay',
     styles: {
@@ -41,7 +48,7 @@ const ComboBoxOverlayElement = tasty({
         gridRows: '1sf',
         gridColumns: '1sf',
         width: '$min-width max-content 50vw',
-        height: 'initial max-content (50vh - $size)',
+        height: 'initial max-content (50vh - 5x)',
         overflow: 'auto',
         background: '#white',
         radius: '1cr',
@@ -118,65 +125,37 @@ function useComboBoxState({ selectedKey, defaultSelectedKey, inputValue, default
         isControlledInput,
     };
 }
-function useComboBoxFiltering({ children, effectiveInputValue, filter, }) {
+function useComboBoxFiltering({ effectiveInputValue, filter, }) {
     const [isFilterActive, setIsFilterActive] = useState(false);
     const { contains } = useFilter({ sensitivity: 'base' });
     const textFilterFn = useMemo(() => (filter === false ? () => true : filter || contains), [filter, contains]);
-    // Filter children based on input value
-    const filteredChildren = useMemo(() => {
+    // Create a filter function for collection nodes
+    const filterFn = useCallback((nodes) => {
         const term = effectiveInputValue.trim();
-        if (!isFilterActive || !term || !children) {
-            return children;
-        }
-        const nodeMatches = (node) => {
-            if (!node?.props)
-                return false;
-            const textValue = node.props.textValue ||
-                (typeof node.props.children === 'string' ? node.props.children : '') ||
-                String(node.props.children || '');
-            return textFilterFn(textValue, term);
-        };
-        const filterChildren = (childNodes) => {
-            if (!childNodes)
-                return null;
-            const childArray = Array.isArray(childNodes) ? childNodes : [childNodes];
-            const filteredNodes = [];
-            childArray.forEach((child) => {
-                if (!child || typeof child !== 'object') {
-                    return;
-                }
-                if (child.type === BaseSection ||
-                    child.type?.displayName === 'Section') {
-                    const sectionChildren = Array.isArray(child.props.children)
-                        ? child.props.children
-                        : [child.props.children];
-                    const filteredSectionChildren = sectionChildren.filter((sectionChild) => {
-                        return (sectionChild &&
-                            typeof sectionChild === 'object' &&
-                            nodeMatches(sectionChild));
-                    });
-                    if (filteredSectionChildren.length > 0) {
-                        filteredNodes.push(cloneElement(child, {
-                            key: child.key,
-                            children: filteredSectionChildren,
-                        }));
-                    }
-                }
-                else if (child.type === Item) {
-                    if (nodeMatches(child)) {
-                        filteredNodes.push(child);
-                    }
-                }
-                else if (nodeMatches(child)) {
-                    filteredNodes.push(child);
+        // Don't filter if not active or no search term
+        if (!isFilterActive || !term) {
+            return nodes;
+        }
+        // Filter nodes based on their textValue and preserve section structure
+        return [...nodes]
+            .map((node) => {
+            if (node.type === 'section' && node.childNodes) {
+                const filteredChildren = [...node.childNodes].filter((child) => textFilterFn(child.textValue || '', term));
+                if (filteredChildren.length === 0) {
+                    return null;
                 }
-            });
-            return filteredNodes;
-        };
-        return filterChildren(children);
-    }, [isFilterActive, children, effectiveInputValue, textFilterFn]);
+                return {
+                    ...node,
+                    childNodes: filteredChildren,
+                    hasChildNodes: true,
+                };
+            }
+            return textFilterFn(node.textValue || '', term) ? node : null;
+        })
+            .filter(Boolean);
+    }, [isFilterActive, effectiveInputValue, textFilterFn]);
     return {
-        filteredChildren,
+        filterFn,
         isFilterActive,
         setIsFilterActive,
     };
@@ -293,6 +272,22 @@ function useComboBoxKeyboard({ isPopoverOpen, listStateRef, hasResults, allowsCu
                 }
             }
             else if (e.key === 'Enter') {
+                // If popover is open, try to select the focused item first
+                if (isPopoverOpen) {
+                    const listState = listStateRef.current;
+                    if (listState) {
+                        const keyToSelect = listState.selectionManager.focusedKey;
+                        if (keyToSelect != null) {
+                            e.preventDefault();
+                            listState.selectionManager.select(keyToSelect, e);
+                            // Ensure the popover closes even if selection stays the same
+                            onClosePopover();
+                            inputRef.current?.focus();
+                            return;
+                        }
+                    }
+                }
+                // If no results, handle empty input or custom values
                 if (!hasResults) {
                     e.preventDefault();
                     if (allowsCustomValue) {
@@ -304,18 +299,12 @@ function useComboBoxKeyboard({ isPopoverOpen, listStateRef, hasResults, allowsCu
                     }
                     return;
                 }
-                if (isPopoverOpen) {
-                    const listState = listStateRef.current;
-                    if (!listState)
-                        return;
-                    const keyToSelect = listState.selectionManager.focusedKey;
-                    if (keyToSelect != null) {
-                        e.preventDefault();
-                        listState.selectionManager.select(keyToSelect, e);
-                        // Ensure the popover closes even if selection stays the same
-                        onClosePopover();
-                        inputRef.current?.focus();
-                    }
+                // Clear selection if input is empty and popover is closed (or no focused item)
+                const trimmed = (effectiveInputValue || '').trim();
+                if (trimmed === '') {
+                    e.preventDefault();
+                    onSelectionChange(null);
+                    return;
                 }
             }
             else if (e.key === 'Escape') {
@@ -376,7 +365,7 @@ const ComboBoxInput = forwardRef(function ComboBoxInput({ qa, inputRef, id, valu
             ? `ListBoxItem-${listStateRef.current?.selectionManager.focusedKey}`
             : undefined }));
 });
-function ComboBoxOverlay({ isOpen, triggerRef, popoverRef, listBoxRef, direction, shouldFlip, overlayOffset, comboBoxWidth, comboBoxId, overlayStyles, listBoxStyles, optionStyles, sectionStyles, headingStyles, effectiveSelectedKey, isDisabled, disabledKeys, items, children, listStateRef, onSelectionChange, onClose, label, ariaLabel, compositeFocusProps, }) {
+function ComboBoxOverlay({ isOpen, triggerRef, popoverRef, listBoxRef, direction, shouldFlip, overlayOffset, comboBoxWidth, comboBoxId, overlayStyles, listBoxStyles, optionStyles, sectionStyles, headingStyles, effectiveSelectedKey, isDisabled, disabledKeys, items, children, listStateRef, onSelectionChange, onClose, label, ariaLabel, compositeFocusProps, filter, }) {
     // Overlay positioning
     const { overlayProps: overlayPositionProps, placement, updatePosition, } = useOverlayPosition({
         targetRef: triggerRef,
@@ -414,18 +403,14 @@ function ComboBoxOverlay({ isOpen, triggerRef, popoverRef, listBoxRef, direction
     }, [isOpen, updatePosition]);
     // Extract primary placement direction for consistent styling
     const placementDirection = placement?.split(' ')[0] || direction;
-    const overlayContent = (_jsx(DisplayTransition, { exposeUnmounted: true, isShown: isOpen, children: ({ phase, isShown, ref: transitionRef }) => (_jsx(ComboBoxOverlayElement, { ...mergeProps(overlayPositionProps, overlayBehaviorProps, compositeFocusProps), ref: (value) => {
-                transitionRef(value);
-                popoverRef.current = value;
-            }, "data-placement": placementDirection, "data-phase": phase, mods: {
-                open: isShown,
-                hidden: phase === 'unmounted',
-            }, styles: overlayStyles, style: {
-                '--min-width': comboBoxWidth ? `${comboBoxWidth}px` : undefined,
-                ...overlayPositionProps.style,
-            }, children: _jsx(ListBox, { ref: listBoxRef, focusOnHover: true, disableSelectionToggle: true, id: `ComboBoxListBox-${comboBoxId}`, "aria-label": ariaLabel || (typeof label === 'string' ? label : 'Options'), selectedKey: effectiveSelectedKey, selectionMode: "single", isDisabled: isDisabled, disabledKeys: disabledKeys, shouldUseVirtualFocus: true, items: items, styles: listBoxStyles, optionStyles: optionStyles, sectionStyles: sectionStyles, headingStyles: headingStyles, stateRef: listStateRef, mods: {
-                    popover: true,
-                }, onSelectionChange: onSelectionChange, children: children }) })) }));
+    const overlayContent = (_jsx(DisplayTransition, { isShown: isOpen, children: ({ phase, isShown, ref: transitionRef }) => (_jsx(ComboBoxOverlayWrapper, { ...mergeProps(overlayPositionProps, overlayBehaviorProps, compositeFocusProps), ref: popoverRef, style: overlayPositionProps.style, children: _jsx(ComboBoxOverlayElement, { ref: transitionRef, "data-placement": placementDirection, "data-phase": phase, mods: {
+                    open: isShown,
+                    hidden: phase === 'unmounted',
+                }, styles: overlayStyles, style: {
+                    '--min-width': comboBoxWidth ? `${comboBoxWidth}px` : undefined,
+                }, children: _jsx(ListBox, { ref: listBoxRef, focusOnHover: true, disableSelectionToggle: true, id: `ComboBoxListBox-${comboBoxId}`, "aria-label": ariaLabel || (typeof label === 'string' ? label : 'Options'), selectedKey: effectiveSelectedKey, selectionMode: "single", isDisabled: isDisabled, disabledKeys: disabledKeys, shouldUseVirtualFocus: true, items: items, filter: filter, styles: listBoxStyles, optionStyles: optionStyles, sectionStyles: sectionStyles, headingStyles: headingStyles, stateRef: listStateRef, mods: {
+                        popover: true,
+                    }, onSelectionChange: onSelectionChange, children: children }) }) })) }));
     return _jsx(Portal, { children: overlayContent });
 }
 // ============================================================================
@@ -553,63 +538,152 @@ export const ComboBox = forwardRef(function ComboBox(props, ref) {
         }
     }, [isPopoverOpen, effectiveSelectedKey]);
     // Filtering hook
-    const { filteredChildren, isFilterActive, setIsFilterActive } = useComboBoxFiltering({
-        children,
+    const { filterFn, isFilterActive, setIsFilterActive } = useComboBoxFiltering({
         effectiveInputValue,
         filter,
     });
-    // Freeze filtered children during close animation to prevent visual jumps
-    const frozenFilteredChildrenRef = useRef(null);
-    useEffect(() => {
-        // Update frozen children only when popover is open
-        if (isPopoverOpen) {
-            frozenFilteredChildrenRef.current = filteredChildren;
-        }
-    }, [isPopoverOpen, filteredChildren]);
-    // Use frozen children during close animation, fresh children when open
-    const displayedFilteredChildren = isPopoverOpen
-        ? filteredChildren
-        : frozenFilteredChildrenRef.current ?? filteredChildren;
+    // Create local collection state for reading item data (labels, etc.)
+    // This allows us to read item labels even before the popover opens
+    const localCollectionState = useListState({
+        children,
+        items: sortedItems,
+        selectionMode: 'none', // Don't manage selection in this state
+    });
     const { isFocused, focusProps } = useFocus({ isDisabled });
+    // Helper to check if current input value is valid
+    const checkInputValidity = useCallback(() => {
+        if (!effectiveInputValue.trim()) {
+            return { isValid: false, singleMatchKey: null, filteredCount: 0 };
+        }
+        // Get filtered collection based on current input
+        const filteredNodes = filterFn(localCollectionState.collection);
+        const filteredItems = [];
+        // Flatten filtered nodes (handle sections)
+        for (const node of filteredNodes) {
+            if (node.type === 'section' && node.childNodes) {
+                for (const child of node.childNodes) {
+                    if (child.type === 'item') {
+                        filteredItems.push({
+                            key: child.key,
+                            textValue: child.textValue || '',
+                        });
+                    }
+                }
+            }
+            else if (node.type === 'item') {
+                filteredItems.push({
+                    key: node.key,
+                    textValue: node.textValue || '',
+                });
+            }
+        }
+        const filteredCount = filteredItems.length;
+        // Check for exact match
+        const exactMatch = filteredItems.find((item) => item.textValue.toLowerCase() ===
+            effectiveInputValue.trim().toLowerCase());
+        if (exactMatch) {
+            return { isValid: true, singleMatchKey: exactMatch.key, filteredCount };
+        }
+        // If exactly one filtered result, consider it valid
+        if (filteredCount === 1) {
+            return {
+                isValid: true,
+                singleMatchKey: filteredItems[0].key,
+                filteredCount,
+            };
+        }
+        return { isValid: false, singleMatchKey: null, filteredCount };
+    }, [effectiveInputValue, filterFn, localCollectionState.collection]);
     // Composite blur handler - fires when focus leaves the entire component
     const handleCompositeBlur = useEvent(() => {
-        // Always disable filter on blur
-        setIsFilterActive(false);
-        // In allowsCustomValue mode with shouldCommitOnBlur, commit the input value
-        if (allowsCustomValue &&
-            shouldCommitOnBlur &&
-            effectiveInputValue &&
-            effectiveSelectedKey == null) {
-            externalOnSelectionChange?.(effectiveInputValue);
-            if (!isControlledKey) {
-                setInternalSelectedKey(effectiveInputValue);
+        // NOTE: Do NOT disable filter yet; we need it active for validity check
+        // In allowsCustomValue mode
+        if (allowsCustomValue) {
+            // Commit the input value if it's non-empty and nothing is selected
+            if (shouldCommitOnBlur &&
+                effectiveInputValue &&
+                effectiveSelectedKey == null) {
+                externalOnSelectionChange?.(effectiveInputValue);
+                if (!isControlledKey) {
+                    setInternalSelectedKey(effectiveInputValue);
+                }
+                onBlur?.();
+                setIsFilterActive(false);
+                return;
+            }
+            // Clear selection if input is empty
+            if (!String(effectiveInputValue).trim()) {
+                externalOnSelectionChange?.(null);
+                if (!isControlledKey) {
+                    setInternalSelectedKey(null);
+                }
+                if (!isControlledInput) {
+                    setInternalInputValue('');
+                }
+                onInputChange?.('');
+                onBlur?.();
+                setIsFilterActive(false);
+                return;
             }
-            // Call user's onBlur callback
-            onBlur?.();
-            return;
         }
-        // In clearOnBlur mode (only for non-custom-value mode), clear selection and input
-        if (clearOnBlur && !allowsCustomValue) {
-            externalOnSelectionChange?.(null);
-            if (!isControlledKey) {
-                setInternalSelectedKey(null);
+        // In non-custom-value mode, validate input and handle accordingly
+        if (!allowsCustomValue) {
+            const { isValid, singleMatchKey } = checkInputValidity();
+            // If there's exactly one filtered result, auto-select it
+            if (isValid &&
+                singleMatchKey != null &&
+                singleMatchKey !== effectiveSelectedKey) {
+                const label = getItemLabel(singleMatchKey);
+                if (!isControlledKey) {
+                    setInternalSelectedKey(singleMatchKey);
+                }
+                if (!isControlledInput) {
+                    setInternalInputValue(label);
+                }
+                onInputChange?.(label);
+                externalOnSelectionChange?.(singleMatchKey);
+                onBlur?.();
+                setIsFilterActive(false);
+                return;
             }
-            if (!isControlledInput) {
-                setInternalInputValue('');
+            // If input is invalid (no exact match, not a single result)
+            if (!isValid) {
+                const trimmedInput = effectiveInputValue.trim();
+                // Clear if clearOnBlur is set or input is empty
+                if (clearOnBlur || !trimmedInput) {
+                    externalOnSelectionChange?.(null);
+                    if (!isControlledKey) {
+                        setInternalSelectedKey(null);
+                    }
+                    if (!isControlledInput) {
+                        setInternalInputValue('');
+                    }
+                    onInputChange?.('');
+                    onBlur?.();
+                    setIsFilterActive(false);
+                    return;
+                }
+                // Reset input to current selected value (or empty if none)
+                const nextValue = effectiveSelectedKey != null
+                    ? getItemLabel(effectiveSelectedKey)
+                    : '';
+                if (!isControlledInput) {
+                    setInternalInputValue(nextValue);
+                }
+                onInputChange?.(nextValue);
+                onBlur?.();
+                setIsFilterActive(false);
+                return;
             }
-            onInputChange?.('');
-            // Call user's onBlur callback
-            onBlur?.();
-            return;
         }
-        // Reset input to show current selection (or empty if none)
+        // Fallback: Reset input to show current selection (or empty if none)
         const nextValue = effectiveSelectedKey != null ? getItemLabel(effectiveSelectedKey) : '';
         if (!isControlledInput) {
             setInternalInputValue(nextValue);
         }
         onInputChange?.(nextValue);
-        // Call user's onBlur callback
         onBlur?.();
+        setIsFilterActive(false);
     });
     // Composite focus hook - handles focus tracking across wrapper and portaled popover
     const { compositeFocusProps } = useCompositeFocus({
@@ -625,11 +699,11 @@ export const ComboBox = forwardRef(function ComboBox(props, ref) {
     // Ref to access internal ListBox state
     const listStateRef = useRef(null);
     const focusInitAttemptsRef = useRef(0);
-    // Helper to get label from collection item
+    // Helper to get label from local collection
     const getItemLabel = useCallback((key) => {
-        const item = listStateRef.current?.collection?.getItem(key);
+        const item = localCollectionState?.collection?.getItem(key);
         return item?.textValue || String(key);
-    }, []);
+    }, [localCollectionState?.collection]);
     // Selection change handler
     const handleSelectionChange = useEvent((selection) => {
         // Extract single key from selection (we only support single selection)
@@ -700,9 +774,6 @@ export const ComboBox = forwardRef(function ComboBox(props, ref) {
         }
         // Priority 2: fall back to defaultSelectedKey's label
         if (defaultSelectedKey) {
-            // Wait for collection to be ready
-            if (!listStateRef.current?.collection)
-                return;
             const label = getItemLabel(defaultSelectedKey);
             setInternalInputValue(label);
             setHasInitialized(true);
@@ -716,13 +787,17 @@ export const ComboBox = forwardRef(function ComboBox(props, ref) {
         children,
     ]);
     // Sync input value with controlled selectedKey
+    const lastSyncedSelectedKey = useRef(undefined);
     useEffect(() => {
         // Only run when selectedKey is controlled but inputValue is uncontrolled
         if (!isControlledKey || isControlledInput)
             return;
-        // Wait for collection to be ready
-        if (!listStateRef.current?.collection)
+        // Skip if the key hasn't actually changed (prevents unnecessary resets when collection rebuilds)
+        if (lastSyncedSelectedKey.current !== undefined &&
+            lastSyncedSelectedKey.current === effectiveSelectedKey) {
             return;
+        }
+        lastSyncedSelectedKey.current = effectiveSelectedKey;
         // Get the expected label for the current selection
         const expectedLabel = effectiveSelectedKey != null ? getItemLabel(effectiveSelectedKey) : '';
         // Update the input value to match the selected key's label
@@ -745,10 +820,26 @@ export const ComboBox = forwardRef(function ComboBox(props, ref) {
         ? effectiveInputValue !== ''
         : effectiveSelectedKey != null;
     let showClearButton = isClearable && hasValue && !isDisabled && !isReadOnly;
-    const hasResults = Boolean(displayedFilteredChildren &&
-        (Array.isArray(displayedFilteredChildren)
-            ? displayedFilteredChildren.length > 0
-            : displayedFilteredChildren !== null));
+    // Check if there are any results after filtering
+    const hasResults = useMemo(() => {
+        if (!children)
+            return false;
+        if (!Array.isArray(children) && children === null)
+            return false;
+        // If we have a collection, check if filtering will produce any results
+        if (localCollectionState?.collection) {
+            const filteredNodes = filterFn(localCollectionState.collection);
+            const resultArray = Array.from(filteredNodes).flatMap((node) => {
+                if (node.type === 'section' && node.childNodes) {
+                    return [...node.childNodes];
+                }
+                return [node];
+            });
+            return resultArray.length > 0;
+        }
+        // Fallback: check if children exists
+        return Array.isArray(children) ? children.length > 0 : true;
+    }, [children, localCollectionState?.collection, filterFn]);
     // Clear function
     let clearValue = useEvent(() => {
         // Clear input
@@ -889,7 +980,7 @@ export const ComboBox = forwardRef(function ComboBox(props, ref) {
                                     }
                                 }
                             }
-                        } })) : null] }), _jsx(ComboBoxOverlay, { isOpen: shouldShowPopover, triggerRef: wrapperRef, popoverRef: popoverRef, listBoxRef: listBoxRef, direction: direction, shouldFlip: shouldFlip, overlayOffset: overlayOffset, comboBoxWidth: comboBoxWidth, comboBoxId: comboBoxId, overlayStyles: overlayStyles, listBoxStyles: listBoxStyles, optionStyles: optionStyles, sectionStyles: sectionStyles, headingStyles: headingStyles, effectiveSelectedKey: effectiveSelectedKey, isDisabled: isDisabled, disabledKeys: props.disabledKeys, items: sortedItems, listStateRef: listStateRef, label: label, ariaLabel: props['aria-label'], compositeFocusProps: compositeFocusProps, onSelectionChange: handleSelectionChange, onClose: () => setIsPopoverOpen(false), children: displayedFilteredChildren })] }));
+                        } })) : null] }), _jsx(ComboBoxOverlay, { isOpen: shouldShowPopover, triggerRef: wrapperRef, popoverRef: popoverRef, listBoxRef: listBoxRef, direction: direction, shouldFlip: shouldFlip, overlayOffset: overlayOffset, comboBoxWidth: comboBoxWidth, comboBoxId: comboBoxId, overlayStyles: overlayStyles, listBoxStyles: listBoxStyles, optionStyles: optionStyles, sectionStyles: sectionStyles, headingStyles: headingStyles, effectiveSelectedKey: effectiveSelectedKey, isDisabled: isDisabled, disabledKeys: props.disabledKeys, items: sortedItems, listStateRef: listStateRef, label: label, ariaLabel: props['aria-label'], compositeFocusProps: compositeFocusProps, filter: filterFn, onSelectionChange: handleSelectionChange, onClose: () => setIsPopoverOpen(false), children: children })] }));
     const { children: _, ...propsWithoutChildren } = props;
     const finalProps = {
         ...propsWithoutChildren,

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

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

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

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

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.83.3
+ * @cube-dev/ui-kit v0.85.0
  * Released under the MIT license.
  */
 
@@ -38,7 +38,7 @@ const DateInputElement = tasty({
 });
 function DateInputBase(props, ref) {
     let inputRef = useRef(null);
-    let { isDisabled, inputStyles, children, fieldProps, style, disableFocusRing, autoFocus, validationState, isLoading, size = 'medium', } = props;
+    let { isDisabled, inputStyles, children, fieldProps, style, disableFocusRing, autoFocus, validationState, isLoading, size = 'medium', suffix, } = props;
     let styles = extractStyles(props, CONTAINER_STYLES);
     let { focusProps, isFocused } = useFocusRing({
         isTextInput: true,
@@ -52,7 +52,8 @@ function DateInputBase(props, ref) {
             disabled: isDisabled,
             focused: isFocused && !disableFocusRing,
             invalid: isInvalid,
-        }, ...mergeProps(fieldProps ?? {}, focusProps), style: style, children: [_jsx("div", { "data-element": "Contents", role: "presentation", children: _jsx(DateInputElement, { ref: mergeRefs(ref, inputRef), "data-size": size, role: "presentation", styles: inputStyles, children: children }) }), validationState && !isLoading ? validation : undefined] }));
+            suffix: (validationState && !isLoading) || isLoading || !!suffix,
+        }, ...mergeProps(fieldProps ?? {}, focusProps), style: style, children: [_jsx("div", { "data-element": "Contents", role: "presentation", children: _jsx(DateInputElement, { ref: mergeRefs(ref, inputRef), "data-size": size, role: "presentation", styles: inputStyles, children: children }) }), (validationState && !isLoading) || isLoading || suffix ? (_jsxs("div", { "data-element": "Suffix", children: [(validationState && !isLoading) || isLoading ? (_jsx("div", { "data-element": "State", children: validationState && !isLoading ? validation : null })) : null, suffix] })) : null] }));
 }
 const _DateInputBase = React.forwardRef(DateInputBase);
 _DateInputBase.displayName = 'DateInputBase';

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.83.3
+ * @cube-dev/ui-kit v0.85.0
  * Released under the MIT license.
  */
 
@@ -17,7 +17,6 @@ import { Calendar } from '../../other/Calendar/Calendar';
 import { Dialog, DialogTrigger } from '../../overlays/Dialog';
 import { DateInputBase } from './DateInputBase';
 import { DatePickerButton } from './DatePickerButton';
-import { DatePickerElement } from './DatePickerElement';
 import { DatePickerInput } from './DatePickerInput';
 import { dateMessages } from './intl';
 import { DEFAULT_DATE_PROPS } from './props';
@@ -61,7 +60,7 @@ function DatePicker(props, ref) {
         : null;
     let showTimeField = !!timeGranularity;
     // let visibleMonths = useVisibleMonths(maxVisibleMonths);
-    const component = (_jsxs(DatePickerElement, { ref: targetRef, styles: props.wrapperStyles, mods: { focused: isFocused && !isFocusedButton }, ...focusProps, children: [_jsx(DateInputBase, { disableFocusRing: true, radius: "left", border: "top left bottom", isDisabled: isDisabled, validationState: validationState, size: size, children: _jsx(DatePickerInput, { useLocale: useLocaleProp, ...fieldProps }) }), _jsxs(DialogTrigger, { hideArrow: true, type: "popover", mobileType: "tray", placement: "bottom right", targetRef: targetRef, isOpen: isOpen, shouldFlip: props.shouldFlip, onOpenChange: setOpen, children: [_jsx(DatePickerButton, { size: size, ...mergeProps(buttonProps, focusPropsButton), isDisabled: isDisabled }), _jsxs(Dialog, { ...dialogProps, width: "max-content", children: [_jsx(Calendar, { ...calendarProps }), showTimeField && (_jsx(TimeInput, { padding: "1x", label: dateMessages['time'], value: state.timeValue, placeholderValue: timePlaceholder, granularity: timeGranularity, minValue: timeMinValue, maxValue: timeMaxValue, hourCycle: props.hourCycle, hideTimeZone: props.hideTimeZone, onChange: state.setTimeValue }))] })] })] }));
+    const component = (_jsx(DateInputBase, { ref: targetRef, styles: props.wrapperStyles, disableFocusRing: isFocusedButton, isDisabled: isDisabled, validationState: validationState, size: size, ...focusProps, suffix: _jsxs(DialogTrigger, { hideArrow: true, type: "popover", mobileType: "tray", placement: "bottom right", targetRef: targetRef, isOpen: isOpen, shouldFlip: props.shouldFlip, onOpenChange: setOpen, children: [_jsx(DatePickerButton, { size: size, ...mergeProps(buttonProps, focusPropsButton), isDisabled: isDisabled }), _jsxs(Dialog, { ...dialogProps, width: "max-content", children: [_jsx(Calendar, { ...calendarProps }), showTimeField && (_jsx(TimeInput, { padding: "1x", label: dateMessages['time'], value: state.timeValue, placeholderValue: timePlaceholder, granularity: timeGranularity, minValue: timeMinValue, maxValue: timeMaxValue, hourCycle: props.hourCycle, hideTimeZone: props.hideTimeZone, onChange: state.setTimeValue }))] })] }), children: _jsx(DatePickerInput, { useLocale: useLocaleProp, ...fieldProps }) }));
     return wrapWithField(component, domRef, {
         ...props,
         styles,

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

@@ -1,21 +1,16 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.83.3
+ * @cube-dev/ui-kit v0.85.0
  * Released under the MIT license.
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
 import { CalendarIcon } from '../../../icons';
 import { tasty } from '../../../tasty';
-import { Button } from '../../actions';
-export const DatePickerButton = tasty(Button, {
+import { ItemAction } from '../../actions';
+export const DatePickerButton = tasty(ItemAction, {
     icon: _jsx(CalendarIcon, {}),
-    styles: {
-        radius: '1r right',
-        border: 'top right bottom',
-        backgroundClip: 'content-box',
-    },
 });
 
         

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.83.3
+ * @cube-dev/ui-kit v0.85.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.83.3
+ * @cube-dev/ui-kit v0.85.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.83.3
+ * @cube-dev/ui-kit v0.85.0
  * Released under the MIT license.
  */
 
@@ -22,6 +22,8 @@ const EditableSegmentElement = tasty({
         fontVariantNumeric: 'tabular-nums lining-nums',
         textAlign: 'right',
         font: 'monospace',
+        border: 0,
+        outline: 0,
         color: {
             '': 'inherit',
             ':focus': '#white',