@cube-dev/ui-kit 0.90.3 → 0.92.0

package/es/components/content/Divider.js

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

package/es/components/content/Footer.js

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

package/es/components/content/Header.js

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

package/es/components/content/HotKeys/HotKeys.js

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

package/es/components/content/HotKeys/index.js

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

package/es/components/content/Item/Item.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.90.3
+ * @cube-dev/ui-kit v0.92.0
  * Released under the MIT license.
  */
 
@@ -376,7 +376,7 @@ export function useAutoTooltip({ tooltip, children, labelProps, isDynamicLabel =
         delete props.ref;
         return props;
     }, [labelProps]);
-    const renderWithTooltip = useCallback((renderElement, defaultTooltipPlacement) => {
+    const renderWithTooltip = (renderElement, defaultTooltipPlacement) => {
         // Handle tooltip rendering based on tooltip prop type
         if (tooltip) {
             // String tooltip - simple case
@@ -385,8 +385,7 @@ export function useAutoTooltip({ tooltip, children, labelProps, isDynamicLabel =
             }
             // Boolean tooltip - auto tooltip on overflow
             if (tooltip === true) {
-                if ((children || labelProps) &&
-                    (isLabelOverflowed || isDynamicLabel)) {
+                if ((children || labelProps) && (isLabelOverflowed || isDynamicLabel)) {
                     return (_jsx(TooltipProvider, { placement: defaultTooltipPlacement, title: children, isDisabled: !isLabelOverflowed && isDynamicLabel, children: (triggerProps, ref) => renderElement(triggerProps, ref) }));
                 }
             }
@@ -398,8 +397,7 @@ export function useAutoTooltip({ tooltip, children, labelProps, isDynamicLabel =
                     return (_jsx(TooltipProvider, { placement: defaultTooltipPlacement, ...tooltipProps, children: (triggerProps, ref) => renderElement(triggerProps, ref) }));
                 }
                 // If title is provided with auto=true, OR no title but auto behavior enabled
-                if ((children || labelProps) &&
-                    (isLabelOverflowed || isDynamicLabel)) {
+                if ((children || labelProps) && (isLabelOverflowed || isDynamicLabel)) {
                     return (_jsx(TooltipProvider, { placement: defaultTooltipPlacement, title: tooltipProps.title ?? children, isDisabled: !isLabelOverflowed &&
                             isDynamicLabel &&
                             tooltipProps.isDisabled !== true, ...tooltipProps, children: (triggerProps, ref) => renderElement(triggerProps, ref) }));
@@ -407,7 +405,7 @@ export function useAutoTooltip({ tooltip, children, labelProps, isDynamicLabel =
             }
         }
         return renderElement();
-    }, [tooltip, children, labelProps, isLabelOverflowed]);
+    };
     return {
         labelRef: handleLabelElementRef,
         labelProps: finalLabelProps,
@@ -512,8 +510,8 @@ const Item = (props, ref) => {
         labelProps,
         isDynamicLabel: !!actions,
     });
-    // Create a stable render function that doesn't call hooks
-    const renderItemElement = useCallback((tooltipTriggerProps, tooltipRef) => {
+    // Render function that creates the item element
+    const renderItemElement = (tooltipTriggerProps, tooltipRef) => {
         // Use callback ref to merge multiple refs without calling hooks
         const handleRef = (element) => {
             // Set the component's forwarded ref
@@ -532,34 +530,8 @@ const Item = (props, ref) => {
         const finalStyle = typeof size === 'number'
             ? { ...style, '--size': `${size}px` }
             : style;
-        return (_jsxs(ItemElement, { ref: handleRef, variant: theme && type ? `${theme}.${type}` : undefined, disabled: finalIsDisabled, "aria-disabled": finalIsDisabled, "aria-selected": isSelected, mods: mods, styles: styles, type: htmlType, ...mergeProps(rest, tooltipTriggerProps || {}), style: finalStyle, children: [finalIcon && (_jsx("div", { "data-element": "Icon", children: hasCheckbox ? _jsx(CheckIcon, {}) : finalIcon })), finalPrefix && _jsx("div", { "data-element": "Prefix", children: finalPrefix }), children || labelProps ? (_jsx("div", { "data-element": "Label", ...finalLabelProps, ref: labelRef, children: children })) : null, showDescription ? (_jsx("div", { "data-element": "Description", ...descriptionProps, children: description })) : null, finalSuffix && _jsx("div", { "data-element": "Suffix", children: finalSuffix }), finalRightIcon && (_jsx("div", { "data-element": "RightIcon", children: finalRightIcon })), actions && (_jsx("div", { "data-element": "Actions", ...ACTIONS_EVENT_HANDLERS, children: actions !== true ? (_jsx(ItemActionProvider, { type: type, theme: theme, disableActionsFocus: disableActionsFocus, children: actions })) : null }))] }));
-    }, [
-        ref,
-        theme,
-        type,
-        finalIsDisabled,
-        size,
-        isSelected,
-        mods,
-        styles,
-        htmlType,
-        rest,
-        finalIcon,
-        hasCheckbox,
-        finalPrefix,
-        children,
-        labelProps,
-        finalLabelProps,
-        description,
-        descriptionProps,
-        finalSuffix,
-        finalRightIcon,
-        actions,
-        showActionsOnHover,
-        size,
-        style,
-        shape,
-    ]);
+        return (_jsxs(ItemElement, { ref: handleRef, variant: theme && type ? `${theme}.${type}` : undefined, disabled: finalIsDisabled, "aria-disabled": finalIsDisabled, "aria-selected": isSelected, mods: mods, styles: styles, type: htmlType, ...mergeProps(rest, tooltipTriggerProps || {}), style: finalStyle, children: [finalIcon && (_jsx("div", { "data-element": "Icon", children: hasCheckbox ? _jsx(CheckIcon, {}) : finalIcon })), finalPrefix && _jsx("div", { "data-element": "Prefix", children: finalPrefix }), children || labelProps ? (_jsx("div", { "data-element": "Label", ...finalLabelProps, ref: labelRef, children: children })) : null, showDescription ? (_jsx("div", { "data-element": "Description", ...descriptionProps, children: description })) : null, finalSuffix && _jsx("div", { "data-element": "Suffix", children: finalSuffix }), finalRightIcon && _jsx("div", { "data-element": "RightIcon", children: finalRightIcon }), actions && (_jsx("div", { "data-element": "Actions", ...ACTIONS_EVENT_HANDLERS, children: actions !== true ? (_jsx(ItemActionProvider, { type: type, theme: theme, disableActionsFocus: disableActionsFocus, children: actions })) : null }))] }));
+    };
     return renderWithTooltip(renderItemElement, defaultTooltipPlacement);
 };
 const _Item = Object.assign(forwardRef(Item), {

package/es/components/content/Item/index.js

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

package/es/components/content/ItemBadge/ItemBadge.js

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

package/es/components/content/ItemBadge/index.js

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

package/es/components/content/List/SectionHeading.js

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

package/es/components/content/List/index.js

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

package/es/components/content/Paragraph.js

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

package/es/components/content/Placeholder/Placeholder.js

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

package/es/components/content/PrismCode/PrismCode.js

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

package/es/components/content/PrismCode/prismSetup.js

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

package/es/components/content/PrismDiffCode/PrismDiffCode.js

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

package/es/components/content/Result/Result.js

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

package/es/components/content/Skeleton/Skeleton.js

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

package/es/components/content/Tag/Tag.js

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

package/es/components/content/Text.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.90.3
+ * @cube-dev/ui-kit v0.92.0
  * Released under the MIT license.
  */
 
@@ -84,7 +84,7 @@ const SelectionText = tasty(Text, {
 });
 const PlaceholderText = tasty(Text, {
     styles: {
-        opacity: '$disabled-opacity',
+        color: '#current.5',
     },
 });
 const _Text = Object.assign(Text, {

package/es/components/content/Title.js

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

package/es/components/fields/Checkbox/Checkbox.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.90.3
+ * @cube-dev/ui-kit v0.92.0
  * Released under the MIT license.
  */
 
@@ -138,7 +138,7 @@ function Checkbox(props, ref) {
         'side-label': labelPosition === 'side',
         'inside-form': insideForm,
     };
-    const checkbox = (_jsxs(_Fragment, { children: [_jsx(HiddenInput, { "data-qa": "HiddenInput", ...mergeProps(inputProps, focusProps), ref: inputRef }), _jsx(CheckboxElement, { qa: qa || 'Checkbox', mods: mods, styles: inputStyles, children: markIcon })] }));
+    const checkbox = (_jsxs(_Fragment, { children: [_jsx(HiddenInput, { qa: qa || 'Checkbox', "data-input-type": "checkbox", ...mergeProps(inputProps, focusProps), ref: inputRef }), _jsx(CheckboxElement, { mods: mods, styles: inputStyles, children: markIcon })] }));
     const checkboxField = (_jsxs(CheckboxWrapperElement, { isHidden: isHidden, mods: mods, children: [checkbox, children && _jsx(Text, { nowrap: true, children: children })] }));
     if (!groupState) {
         return wrapWithField(checkboxField, domRef, {

package/es/components/fields/Checkbox/CheckboxGroup.js

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

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

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

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

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

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.90.3
+ * @cube-dev/ui-kit v0.92.0
  * Released under the MIT license.
  */
 
@@ -47,7 +47,7 @@ const ComboBoxOverlayElement = tasty({
         display: 'grid',
         gridRows: '1sf',
         gridColumns: '1sf',
-        width: '$min-width max-content 50vw',
+        width: '$overlay-min-width max-content 50vw',
         height: 'initial max-content (50vh - 5x)',
         overflow: 'auto',
         background: '#white',
@@ -80,7 +80,7 @@ const ComboBoxOverlayElement = tasty({
             '': 1,
             '!open': 0.001,
         },
-        '$min-width': 'min 30x',
+        '$overlay-min-width': 'min 30x',
     },
 });
 const PROP_STYLES = [...BASE_STYLES, ...OUTER_STYLES, ...COLOR_STYLES];
@@ -364,7 +364,7 @@ function useComboBoxKeyboard({ isPopoverOpen, listStateRef, hasResults, allowsCu
 }
 const ComboBoxInput = forwardRef(function ComboBoxInput({ qa, inputRef, id, value, placeholder, isDisabled, isReadOnly, autoFocus, autoComplete, size, mods, inputStyles, keyboardProps, focusProps, onChange, onFocus, isPopoverOpen, hasResults, comboBoxId, listStateRef, }, ref) {
     const combinedRef = useCombinedRefs(ref, inputRef);
-    return (_jsx(InputElement, { ref: combinedRef, qa: qa, id: id, type: "text", value: value, placeholder: placeholder, isDisabled: isDisabled, readOnly: isReadOnly, autoFocus: autoFocus, autoComplete: autoComplete, "data-autofocus": autoFocus ? '' : undefined, onChange: onChange, onFocus: onFocus, onBlur: focusProps.onBlur, ...keyboardProps, styles: inputStyles, mods: mods, "data-size": size, role: "combobox", "aria-expanded": isPopoverOpen && hasResults, "aria-haspopup": "listbox", "aria-controls": isPopoverOpen && hasResults
+    return (_jsx(InputElement, { ref: combinedRef, qa: qa, id: id, type: "text", value: value, placeholder: placeholder, isDisabled: isDisabled, readOnly: isReadOnly, autoFocus: autoFocus, autoComplete: autoComplete, "data-autofocus": autoFocus ? '' : undefined, onChange: onChange, onFocus: onFocus, onBlur: focusProps.onBlur, ...keyboardProps, styles: inputStyles, mods: mods, "data-size": size, "data-input-type": "combobox", role: "combobox", "aria-expanded": isPopoverOpen && hasResults, "aria-haspopup": "listbox", "aria-controls": isPopoverOpen && hasResults
             ? `ComboBoxListBox-${comboBoxId}`
             : undefined, "aria-activedescendant": isPopoverOpen &&
             hasResults &&
@@ -372,7 +372,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, filter, size = 'medium', }) {
+function ComboBoxOverlay({ isOpen, triggerRef, popoverRef, listBoxRef, direction, shouldFlip, overlayOffset, containerPadding, comboBoxWidth, comboBoxId, overlayStyles, listBoxStyles, optionStyles, sectionStyles, headingStyles, effectiveSelectedKey, isDisabled, disabledKeys, items, children, listStateRef, onSelectionChange, onClose, label, ariaLabel, compositeFocusProps, filter, size = 'medium', }) {
     // Overlay positioning
     const { overlayProps: overlayPositionProps, placement, updatePosition, } = useOverlayPosition({
         targetRef: triggerRef,
@@ -381,6 +381,7 @@ function ComboBoxOverlay({ isOpen, triggerRef, popoverRef, listBoxRef, direction
         shouldFlip,
         isOpen,
         offset: overlayOffset,
+        containerPadding: containerPadding,
     });
     // Overlay behavior (dismiss on outside click, escape)
     const { overlayProps: overlayBehaviorProps } = useOverlay({
@@ -413,7 +414,9 @@ function ComboBoxOverlay({ isOpen, triggerRef, popoverRef, listBoxRef, direction
                     open: isShown,
                     hidden: phase === 'unmounted',
                 }, styles: overlayStyles, style: {
-                    '--min-width': comboBoxWidth ? `${comboBoxWidth}px` : undefined,
+                    '--overlay-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, size: "medium", shape: "popover", onSelectionChange: onSelectionChange, children: children }) }) })) }));
     return _jsx(Portal, { children: overlayContent });
 }
@@ -435,7 +438,7 @@ export const ComboBox = forwardRef(function ComboBox(props, ref) {
             };
         },
     });
-    let { qa, label, extra, labelStyles, isRequired, necessityIndicator, validationState, id, icon, prefix, isDisabled, autoFocus, autoComplete = 'off', wrapperRef, inputRef, triggerRef, popoverRef, listBoxRef, isLoading, inputStyles, optionStyles, triggerStyles, listBoxStyles, overlayStyles, fieldStyles, suffix, hideTrigger, message, description, size = 'medium', direction = 'bottom', shouldFlip = true, popoverTrigger = 'input', suffixPosition = 'before', filter, styles, labelSuffix, selectedKey, defaultSelectedKey, inputValue, defaultInputValue, onInputChange, isClearable, onClear, placeholder, allowsCustomValue, shouldCommitOnBlur = true, clearOnBlur, items, children: renderChildren, sectionStyles, headingStyles, isReadOnly, overlayOffset = 8, onSelectionChange: externalOnSelectionChange, sortSelectedToTop: sortSelectedToTopProp, onFocus, onBlur, onKeyDown, form, ...otherProps } = props;
+    let { qa, label, extra, labelStyles, isRequired, necessityIndicator, validationState, id, icon, prefix, isDisabled, autoFocus, autoComplete = 'off', wrapperRef, inputRef, triggerRef, popoverRef, listBoxRef, isLoading, inputStyles, optionStyles, triggerStyles, listBoxStyles, overlayStyles, fieldStyles, suffix, hideTrigger, message, description, size = 'medium', direction = 'bottom', shouldFlip = true, popoverTrigger = 'input', suffixPosition = 'before', filter, styles, labelSuffix, selectedKey, defaultSelectedKey, inputValue, defaultInputValue, onInputChange, isClearable, onClear, placeholder, allowsCustomValue, shouldCommitOnBlur = true, clearOnBlur, items, children: renderChildren, sectionStyles, headingStyles, isReadOnly, overlayOffset = 8, containerPadding = 8, onSelectionChange: externalOnSelectionChange, sortSelectedToTop: sortSelectedToTopProp, onFocus, onBlur, onKeyDown, form, ...otherProps } = props;
     // Generate a unique ID for this combobox instance
     const comboBoxId = useMemo(() => generateRandomId(), []);
     // State management hook
@@ -1009,7 +1012,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, filter: filterFn, size: size, onSelectionChange: handleSelectionChange, onClose: () => setIsPopoverOpen(false), children: children })] }));
+                        } })) : null] }), _jsx(ComboBoxOverlay, { isOpen: shouldShowPopover, triggerRef: wrapperRef, popoverRef: popoverRef, listBoxRef: listBoxRef, direction: direction, shouldFlip: shouldFlip, overlayOffset: overlayOffset, containerPadding: containerPadding, 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, size: size, 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.90.3
+ * @cube-dev/ui-kit v0.92.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.90.3
+ * @cube-dev/ui-kit v0.92.0
  * Released under the MIT license.
  */
 
@@ -30,7 +30,7 @@ function DateInput(props, ref) {
         }),
     });
     props = Object.assign({}, DEFAULT_DATE_PROPS, props);
-    let { autoFocus, isDisabled, inputStyles, wrapperStyles, isReadOnly, isRequired, size = 'medium', useLocale: useLocaleProp, } = props;
+    let { qa, autoFocus, isDisabled, inputStyles, wrapperStyles, isReadOnly, isRequired, size = 'medium', useLocale: useLocaleProp, } = props;
     let styles = extractStyles(props, CONTAINER_STYLES, wrapperStyles);
     let domRef = useFocusManagerRef(ref);
     let { locale } = useLocale();
@@ -44,7 +44,7 @@ function DateInput(props, ref) {
     }
     let fieldRef = useRef(null);
     let { labelProps, fieldProps } = useDateField(props, state, fieldRef);
-    const component = (_jsx(DateInputBase, { ref: fieldRef, size: size, fieldProps: fieldProps, isDisabled: isDisabled, autoFocus: autoFocus, validationState: state.validationState, styles: wrapperStyles, inputStyles: inputStyles, children: state.segments.map((segment, i) => (_jsx(DatePickerSegment, { segment: segment, state: state, isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired }, i))) }));
+    const component = (_jsx(DateInputBase, { ref: fieldRef, qa: qa || 'DateInput', inputType: "dateinput", size: size, fieldProps: fieldProps, isDisabled: isDisabled, autoFocus: autoFocus, validationState: state.validationState, styles: wrapperStyles, inputStyles: inputStyles, children: state.segments.map((segment, i) => (_jsx(DatePickerSegment, { segment: segment, state: state, isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired }, i))) }));
     return wrapWithField(component, domRef, {
         ...props,
         styles,

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.90.3
+ * @cube-dev/ui-kit v0.92.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', suffix, } = props;
+    let { qa, inputType, 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,
@@ -48,7 +48,7 @@ function DateInputBase(props, ref) {
     let isInvalid = validationState === 'invalid';
     let validationIcon = isInvalid ? InvalidIcon : ValidIcon;
     let validation = cloneElement(validationIcon);
-    return (_jsxs(DateInputWrapperElement, { styles: styles, "data-size": size, mods: {
+    return (_jsxs(DateInputWrapperElement, { qa: qa || 'DateTimeInput', styles: styles, "data-size": size, "data-input-type": inputType ? inputType : 'datetimeinput', mods: {
             disabled: isDisabled,
             focused: isFocused && !disableFocusRing,
             invalid: isInvalid,

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.90.3
+ * @cube-dev/ui-kit v0.92.0
  * Released under the MIT license.
  */
 
@@ -30,7 +30,7 @@ function DatePicker(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 = useDatePickerState({
         ...props,
@@ -60,7 +60,7 @@ function DatePicker(props, ref) {
         : null;
     let showTimeField = !!timeGranularity;
     // let visibleMonths = useVisibleMonths(maxVisibleMonths);
-    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 }) }));
+    const component = (_jsx(DateInputBase, { ref: targetRef, qa: qa || 'DatePicker', inputType: "datepicker", 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,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.90.3
+ * @cube-dev/ui-kit v0.92.0
  * Released under the MIT license.
  */
 

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

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

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.90.3
+ * @cube-dev/ui-kit v0.92.0
  * Released under the MIT license.
  */
 
@@ -39,7 +39,7 @@ function DateRangePicker(props, ref) {
     });
     props = Object.assign({}, DEFAULT_DATE_PROPS, props);
     let styles = extractStyles(props, CONTAINER_STYLES);
-    let { size, shouldFlip, placeholderValue, isDisabled, validationState, useLocale: useLocaleProp, autoFocus, } = props;
+    let { qa, size, shouldFlip, placeholderValue, isDisabled, validationState, useLocale: useLocaleProp, autoFocus, } = props;
     let targetRef = useRef(null);
     let state = useDateRangePickerState({
         ...props,
@@ -69,7 +69,7 @@ function DateRangePicker(props, ref) {
         : null;
     let showTimeField = !!timeGranularity;
     // let visibleMonths = useVisibleMonths(maxVisibleMonths);
-    const component = (_jsxs(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: shouldFlip, onOpenChange: setOpen, children: [_jsx(DatePickerButton, { size: size, ...mergeProps(buttonProps, focusPropsButton), isDisabled: isDisabled }), _jsxs(Dialog, { ...dialogProps, width: "max-content", children: [_jsx(RangeCalendar, { ...calendarProps }), showTimeField && (_jsxs(Space, { children: [_jsx(TimeInput, { padding: "1x", label: dateMessages['startTime'], value: state.timeRange?.start || null, placeholderValue: timePlaceholder, granularity: timeGranularity, minValue: timeMinValue, maxValue: timeMaxValue, hourCycle: props.hourCycle, hideTimeZone: props.hideTimeZone, onChange: (v) => state.setTime('start', v) }), _jsx(TimeInput, { padding: "1x", label: dateMessages['endTime'], value: state.timeRange?.end || null, placeholderValue: timePlaceholder, granularity: timeGranularity, minValue: timeMinValue, maxValue: timeMaxValue, hourCycle: props.hourCycle, hideTimeZone: props.hideTimeZone, onChange: (v) => state.setTime('end', v) })] }))] })] }), children: [_jsx(DatePickerInput, { useLocale: useLocaleProp, ...startFieldProps }), _jsx(DateRangeDash, {}), _jsx(DatePickerInput, { useLocale: useLocaleProp, ...endFieldProps })] }));
+    const component = (_jsxs(DateInputBase, { ref: targetRef, qa: qa || 'DateRangePicker', inputType: "daterangepicker", 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: shouldFlip, onOpenChange: setOpen, children: [_jsx(DatePickerButton, { size: size, ...mergeProps(buttonProps, focusPropsButton), isDisabled: isDisabled }), _jsxs(Dialog, { ...dialogProps, width: "max-content", children: [_jsx(RangeCalendar, { ...calendarProps }), showTimeField && (_jsxs(Space, { children: [_jsx(TimeInput, { padding: "1x", label: dateMessages['startTime'], value: state.timeRange?.start || null, placeholderValue: timePlaceholder, granularity: timeGranularity, minValue: timeMinValue, maxValue: timeMaxValue, hourCycle: props.hourCycle, hideTimeZone: props.hideTimeZone, onChange: (v) => state.setTime('start', v) }), _jsx(TimeInput, { padding: "1x", label: dateMessages['endTime'], value: state.timeRange?.end || null, placeholderValue: timePlaceholder, granularity: timeGranularity, minValue: timeMinValue, maxValue: timeMaxValue, hourCycle: props.hourCycle, hideTimeZone: props.hideTimeZone, onChange: (v) => state.setTime('end', v) })] }))] })] }), children: [_jsx(DatePickerInput, { useLocale: useLocaleProp, ...startFieldProps }), _jsx(DateRangeDash, {}), _jsx(DatePickerInput, { useLocale: useLocaleProp, ...endFieldProps })] }));
     return wrapWithField(component, domRef, {
         ...props,
         styles,