@cube-dev/ui-kit 0.80.2 → 0.82.0

package/es/components/fields/Select/Select.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.80.2
+ * @cube-dev/ui-kit v0.82.0
  * Released under the MIT license.
  */
 
@@ -9,22 +9,21 @@ import { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from "react/jsx-run
 import { cloneElement, useEffect, useMemo, useRef, } from 'react';
 import { DismissButton, FocusScope, HiddenSelect, useButton, useHover, useListBox, useListBoxSection, useOption, useOverlay, useOverlayPosition, useSelect, } from 'react-aria';
 import { Section as BaseSection, useSelectState } from 'react-stately';
-import styled from 'styled-components';
 import { useEvent } from '../../../_internal';
 import { CloseIcon, DirectionIcon, LoadingIcon } from '../../../icons/index';
 import { useProviderProps } from '../../../provider';
 import { BASE_STYLES, COLOR_STYLES, extractStyles, OUTER_STYLES, tasty, } from '../../../tasty/index';
 import { generateRandomId } from '../../../utils/random';
-import { forwardRefWithGenerics, mergeProps, useCombinedRefs, } from '../../../utils/react/index';
+import { forwardRefWithGenerics, mergeProps, useCombinedRefs, useLayoutEffect, } from '../../../utils/react/index';
 import { useFocus } from '../../../utils/react/interactions';
 import { useEventBus } from '../../../utils/react/useEventBus';
-import { getOverlayTransitionCSS } from '../../../utils/transitions';
 import { ItemAction } from '../../actions';
 import { StyledDivider as ListDivider, StyledSectionHeading as ListSectionHeading, StyledSection as ListSectionWrapper, } from '../../actions/Menu/styled';
 import { ItemBase } from '../../content/ItemBase';
 import { useFieldProps, useFormProps, wrapWithField } from '../../form';
+import { DisplayTransition } from '../../helpers';
 import { Item } from '../../Item';
-import { OverlayWrapper } from '../../overlays/OverlayWrapper';
+import { Portal } from '../../portal';
 import { InvalidIcon } from '../../shared/InvalidIcon';
 import { ValidIcon } from '../../shared/ValidIcon';
 const SelectWrapperElement = tasty({
@@ -65,26 +64,8 @@ export const ListBoxElement = tasty({
         gap: '1bw',
         flow: 'column',
         margin: '0',
-        padding: {
-            '': '.5x',
-            section: 0,
-        },
+        padding: '0',
         listStyle: 'none',
-        radius: {
-            '': '1cr',
-            section: '0',
-        },
-        border: {
-            '': true,
-            section: false,
-        },
-        fill: '#white',
-        shadow: {
-            '': '0px 4px 16px #shadow',
-            section: false,
-        },
-        height: 'initial max-content (50vh - $size-md)',
-        overflow: 'clip auto',
         scrollbar: 'styled',
     },
 });
@@ -100,13 +81,34 @@ const OverlayElement = tasty({
     styles: {
         position: 'absolute',
         width: 'min $overlay-min-width',
+        display: 'grid',
+        gridRows: '1sf',
+        height: 'initial max-content (50vh - $size)',
+        overflow: 'auto',
+        background: '#white',
+        radius: '1cr',
+        shadow: '0px 4px 16px #shadow',
+        padding: '.5x',
+        border: true,
+        boxSizing: 'border-box',
+        transition: 'transform $transition ease-out, scale $transition ease-out, theme $transition ease-out',
+        transform: {
+            '': '0 0',
+            'open & [data-placement="top"]': 'translate(0, 0)',
+            '!open & [data-placement="top"]': 'translate(0, 10%)',
+            'open & ([data-placement="bottom"] | ![data-placement])': 'translate(0, 0)',
+            '!open & ([data-placement="bottom"] | ![data-placement])': 'translate(0, -10%)',
+        },
+        scale: {
+            '': '1 1',
+            '!open': '1 .9',
+        },
+        opacity: {
+            '': 1,
+            '!open': 0.001,
+        },
     },
 });
-const StyledOverlayElement = styled(OverlayElement) `
-  ${(props) => {
-    return getOverlayTransitionCSS({ placement: props?.['data-position'] });
-}}
-`;
 const PROP_STYLES = [...BASE_STYLES, ...OUTER_STYLES, ...COLOR_STYLES];
 function Select(props, ref) {
     props = useProviderProps(props);
@@ -146,7 +148,7 @@ function Select(props, ref) {
     popoverRef = useCombinedRefs(popoverRef);
     listBoxRef = useCombinedRefs(listBoxRef);
     let { labelProps, triggerProps, valueProps, menuProps } = useSelect(props, state, triggerRef);
-    let { overlayProps, placement } = useOverlayPosition({
+    let { overlayProps, placement, updatePosition } = useOverlayPosition({
         targetRef: triggerRef,
         overlayRef: popoverRef,
         scrollRef: listBoxRef,
@@ -211,16 +213,27 @@ function Select(props, ref) {
                 // Preserve visual variant via data attribute instead of conflicting with HTML attribute
                 type: type, mods: modifiers, prefix: prefix, suffix: suffix, icon: icon, rightIcon: rightIcon !== undefined ? (rightIcon) : showClearButton ? (_jsx(ItemAction, { icon: _jsx(CloseIcon, {}), size: size, theme: validationState === 'invalid' ? 'danger' : undefined, qa: "SelectClearButton", mods: { pressed: false }, onPress: clearValue })) : isLoading ? (_jsx(LoadingIcon, {})) : (_jsx(DirectionIcon, { to: state.isOpen ? 'up' : 'down' })), description: description, descriptionPlacement: descriptionPlacement, hotkeys: hotkeys, tooltip: tooltip, labelProps: valueProps, children: state.selectedItem
                     ? state.selectedItem.rendered
-                    : placeholder || _jsx(_Fragment, { children: "\u00A0" }) }), _jsx(OverlayWrapper, { isOpen: state.isOpen && !isDisabled, children: _jsx(ListBoxPopup, { ...menuProps, popoverRef: popoverRef, listBoxRef: listBoxRef, overlayProps: overlayProps, placement: placement, state: state, listBoxStyles: listBoxStyles, overlayStyles: overlayStyles, optionStyles: optionStyles, minWidth: triggerWidth, triggerRef: triggerRef }) })] }));
+                    : placeholder || _jsx(_Fragment, { children: "\u00A0" }) }), _jsx(ListBoxPopup, { ...menuProps, popoverRef: popoverRef, listBoxRef: listBoxRef, overlayProps: overlayProps, placement: placement, updatePosition: updatePosition, state: state, listBoxStyles: listBoxStyles, overlayStyles: overlayStyles, optionStyles: optionStyles, minWidth: triggerWidth, triggerRef: triggerRef, isDisabled: isDisabled })] }));
     return wrapWithField(selectField, ref, mergeProps({
         ...props,
-        styles,
+        styles: labelStyles,
     }, { labelProps }));
 }
-export function ListBoxPopup({ state, popoverRef, listBoxRef, listBoxStyles, overlayStyles, optionStyles, overlayProps: parentOverlayProps, shouldUseVirtualFocus = false, placement, minWidth, size = 'small', triggerRef, ...otherProps }) {
+export function ListBoxPopup({ state, popoverRef, listBoxRef, listBoxStyles, overlayStyles, optionStyles, overlayProps: parentOverlayProps, shouldUseVirtualFocus = false, placement, updatePosition, minWidth, size = 'small', triggerRef, isDisabled, ...otherProps }) {
     // For trigger+popover components, map 'small' size to 'medium' for list items
     // while preserving 'medium' and 'large' sizes
     const listItemSize = size === 'small' ? 'medium' : size;
+    // Update position when overlay opens
+    useLayoutEffect(() => {
+        if (state.isOpen) {
+            // Use double RAF to ensure layout is complete before positioning
+            requestAnimationFrame(() => {
+                requestAnimationFrame(() => {
+                    updatePosition?.();
+                });
+            });
+        }
+    }, [state.isOpen, updatePosition]);
     // Get props for the listbox
     let { listBoxProps } = useListBox({
         autoFocus: state.focusStrategy || true,
@@ -246,31 +259,37 @@ export function ListBoxPopup({ state, popoverRef, listBoxRef, listBoxStyles, ove
             return false;
         },
     }, popoverRef);
+    // Extract primary placement direction for consistent styling
+    const placementDirection = placement?.split(' ')[0] || 'bottom';
     // Wrap in <FocusScope> so that focus is restored back to the
     // trigger when the popup is closed. In addition, add hidden
     // <DismissButton> components at the start and end of the list
     // to allow screen reader users to dismiss the popup easily.
-    return (_jsx(StyledOverlayElement, { ...overlayProps, ...parentOverlayProps, ref: popoverRef, styles: overlayStyles, style: {
-            '--overlay-min-width': minWidth ? `${minWidth}px` : 'initial',
-            ...parentOverlayProps?.style,
-        }, "data-position": placement, children: _jsxs(FocusScope, { restoreFocus: true, children: [_jsx(DismissButton, { onDismiss: () => state.close() }), (() => {
-                    const hasSections = Array.from(state.collection).some((i) => i.type === 'section');
-                    const renderedItems = [];
-                    let isFirstSection = true;
-                    for (const item of state.collection) {
-                        if (item.type === 'section') {
-                            if (!isFirstSection) {
-                                renderedItems.push(_jsx(ListDivider, { as: "li", role: "separator", "aria-orientation": "horizontal" }, `divider-${String(item.key)}`));
+    return (_jsx(Portal, { children: _jsx(DisplayTransition, { isShown: state.isOpen && !isDisabled, children: ({ phase, isShown, ref: transitionRef }) => (_jsx(OverlayElement, { ...overlayProps, ...parentOverlayProps, ref: (value) => {
+                    transitionRef(value);
+                    popoverRef.current = value;
+                }, "data-placement": placementDirection, "data-phase": phase, mods: {
+                    open: isShown,
+                }, styles: overlayStyles, style: {
+                    '--overlay-min-width': minWidth ? `${minWidth}px` : 'initial',
+                    ...parentOverlayProps?.style,
+                }, children: _jsxs(FocusScope, { restoreFocus: true, children: [_jsx(DismissButton, { onDismiss: () => state.close() }), (() => {
+                            const renderedItems = [];
+                            let isFirstSection = true;
+                            for (const item of state.collection) {
+                                if (item.type === 'section') {
+                                    if (!isFirstSection) {
+                                        renderedItems.push(_jsx(ListDivider, { as: "li", role: "separator", "aria-orientation": "horizontal" }, `divider-${String(item.key)}`));
+                                    }
+                                    renderedItems.push(_jsx(SelectSection, { item: item, state: state, optionStyles: optionStyles, sectionStyles: undefined, shouldUseVirtualFocus: shouldUseVirtualFocus, size: listItemSize }, item.key));
+                                    isFirstSection = false;
+                                }
+                                else {
+                                    renderedItems.push(_jsx(Option, { item: item, state: state, styles: optionStyles, shouldUseVirtualFocus: shouldUseVirtualFocus, size: listItemSize }, item.key));
+                                }
                             }
-                            renderedItems.push(_jsx(SelectSection, { item: item, state: state, optionStyles: optionStyles, sectionStyles: undefined, shouldUseVirtualFocus: shouldUseVirtualFocus, size: listItemSize }, item.key));
-                            isFirstSection = false;
-                        }
-                        else {
-                            renderedItems.push(_jsx(Option, { item: item, state: state, styles: optionStyles, shouldUseVirtualFocus: shouldUseVirtualFocus, size: listItemSize }, item.key));
-                        }
-                    }
-                    return (_jsx(ListBoxElement, { styles: listBoxStyles, ...listBoxProps, ref: listBoxRef, mods: { sections: hasSections }, children: renderedItems }));
-                })(), _jsx(DismissButton, { onDismiss: () => state.close() })] }) }));
+                            return (_jsx(ListBoxElement, { styles: listBoxStyles, ...listBoxProps, ref: listBoxRef, children: renderedItems }));
+                        })(), _jsx(DismissButton, { onDismiss: () => state.close() })] }) })) }) }));
 }
 function Option({ item, state, styles, shouldUseVirtualFocus, size }) {
     let ref = useRef(null);

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

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

package/es/components/fields/Slider/Gradation.js

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

package/es/components/fields/Slider/Header.js

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

package/es/components/fields/Slider/RangeSlider.js

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

package/es/components/fields/Slider/Slider.js

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

package/es/components/fields/Slider/SliderBase.js

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

package/es/components/fields/Slider/SliderInput.js

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

package/es/components/fields/Slider/SliderThumb.js

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

package/es/components/fields/Slider/SliderTrack.js

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

package/es/components/fields/Slider/elements.js

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

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

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

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

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

package/es/components/fields/Switch/Switch.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.80.2
+ * @cube-dev/ui-kit v0.82.0
  * Released under the MIT license.
  */
 
@@ -16,6 +16,7 @@ import { BLOCK_STYLES, extractStyles, OUTER_STYLES, tasty, } from '../../../tast
 import { mergeProps } from '../../../utils/react';
 import { useFocus } from '../../../utils/react/interactions';
 import { castNullableIsSelected, } from '../../../utils/react/nullableValue';
+import { useId } from '../../../utils/react/useId';
 import { Text } from '../../content/Text';
 import { useFieldProps, useFormProps, wrapWithField } from '../../form';
 import { HiddenInput } from '../../HiddenInput';
@@ -44,7 +45,8 @@ const SwitchElement = tasty({
         fill: {
             '': '#white',
             checked: '#purple',
-            disabled: '#border',
+            disabled: '#border.5',
+            'disabled & checked': '#border',
         },
         color: {
             '': '#dark-03',
@@ -52,16 +54,19 @@ const SwitchElement = tasty({
         },
         border: {
             '': '#dark-05',
-            checked: '#purple',
-            disabled: '#dark-05',
+            checked: '#purple-text',
+            disabled: '#dark-05.5',
+            invalid: '#danger',
         },
         width: {
-            '': '5.25x 5.25x',
-            '[data-size="small"]': '4x 4x',
+            '': '5x 5x',
+            '[data-size="medium"]': '4x 4x',
+            '[data-size="small"]': '3x 3x',
         },
         height: {
             '': '3x 3x',
-            '[data-size="small"]': '2.5x 2.5x',
+            '[data-size="medium"]': '2.5x 2.5x',
+            '[data-size="small"]': '2x 2x',
         },
         outline: {
             '': '#purple-text.0',
@@ -70,34 +75,36 @@ const SwitchElement = tasty({
         outlineOffset: 1,
         transition: 'theme',
         cursor: 'pointer',
-        shadow: {
-            '': '0 0 0 0 #clear',
-            invalid: '0 0 0 1bw #white, 0 0 0 1ow #danger',
-        },
         Thumb: {
             position: 'absolute',
             width: {
                 '': '2x 2x',
-                '[data-size="small"]': '1.5x 1.5x',
+                '[data-size="medium"]': '1.5x 1.5x',
+                '[data-size="small"]': '1.25x 1.25x',
             },
             height: {
                 '': '2x 2x',
-                '[data-size="small"]': '1.5x 1.5x',
+                '[data-size="medium"]': '1.5x 1.5x',
+                '[data-size="small"]': '1.25x 1.25x',
             },
             radius: 'round',
             fill: {
                 '': 'currentColor',
-                disabled: '#white.7',
+                disabled: '#current.5',
+                'disabled & checked': '#white.8',
             },
             top: {
                 '': '.375x',
-                '[data-size="small"]': '.375x',
+                '[data-size="medium"]': '.375x',
+                '[data-size="small"]': '.25x',
             },
             left: {
                 '': '.375x',
-                '[data-size="small"]': '.375x',
-                checked: '2.5x',
-                'checked & [data-size="small"]': '1.75x',
+                '[data-size="medium"]': '.375x',
+                '[data-size="small"]': '.25x',
+                checked: '2.25x',
+                'checked & [data-size="medium"]': '1.75x',
+                'checked & [data-size="small"]': '1.25x',
             },
             transition: 'left, theme',
             cursor: 'pointer',
@@ -116,19 +123,15 @@ function Switch(props, ref) {
             onChange: onChange,
         }),
     });
-    let { qa, isDisabled = false, children, label, labelStyles, insideForm, isLoading, labelPosition, inputStyles, validationState, size = 'large', } = props;
+    let { qa, isDisabled = false, children, label, labelStyles, insideForm, isLoading, labelPosition, inputStyles, fieldStyles, validationState, size = 'medium', } = props;
+    const id = useId(props.id);
     let styles = extractStyles(props, OUTER_STYLES);
     inputStyles = extractStyles(props, BLOCK_STYLES, inputStyles);
     let { isFocused, focusProps } = useFocus({ isDisabled }, true);
     let { hoverProps, isHovered } = useHover({ isDisabled });
     let inputRef = useRef(null);
     let domRef = useFocusableRef(ref, inputRef);
-    let { inputProps } = useSwitch({
-        ...props,
-        ...(typeof label === 'string' && label.trim()
-            ? { 'aria-label': label }
-            : {}),
-    }, useToggleState(props), inputRef);
+    let { inputProps } = useSwitch(props, useToggleState(props), inputRef);
     const mods = {
         checked: inputProps.checked,
         disabled: isDisabled,
@@ -139,13 +142,18 @@ function Switch(props, ref) {
         'inside-form': insideForm,
         'side-label': labelPosition === 'side',
     };
-    const switchField = (_jsxs(SwitchWrapperElement, { qa: qa || 'SwitchWrapper', mods: mods, "data-size": size, ...hoverProps, children: [_jsx(HiddenInput, { "data-qa": "HiddenInput", ...mergeProps(inputProps, focusProps), ref: inputRef }), _jsx(SwitchElement, { qa: "Switch", mods: mods, "data-size": size, styles: inputStyles, children: _jsx("div", { "data-element": "Thumb", "aria-hidden": "true" }) }), children ? _jsx(Text, { nowrap: true, children: children }) : null, isLoading ? (_jsxs(_Fragment, { children: [label ? _jsx(_Fragment, { children: "\u00A0" }) : null, _jsx(LoadingIcon, {})] })) : null] }));
+    const switchField = (_jsxs(SwitchWrapperElement, { qa: qa || 'SwitchWrapper', mods: mods, "data-size": size, styles: styles, ...hoverProps, children: [_jsx(HiddenInput, { "data-qa": "HiddenInput", ...mergeProps(inputProps, focusProps), ref: inputRef, id: id }), _jsx(SwitchElement, { qa: "Switch", mods: mods, "data-size": size, styles: inputStyles, children: _jsx("div", { "data-element": "Thumb", "aria-hidden": "true" }) }), children ? _jsx(Text, { nowrap: true, children: children }) : null, isLoading ? (_jsxs(_Fragment, { children: [label ? _jsx(_Fragment, { children: "\u00A0" }) : null, _jsx(LoadingIcon, {})] })) : null] }));
     return wrapWithField(switchField, domRef, {
         ...props,
+        id,
+        labelProps: {
+            ...props.labelProps,
+            for: id,
+        },
         children: null,
         labelStyles,
         inputStyles,
-        styles,
+        styles: fieldStyles,
     });
 }
 /**

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

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

package/es/components/fields/TextArea/TextArea.js

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

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

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

package/es/components/fields/TextInput/TextInput.js

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

package/es/components/fields/TextInput/TextInputBase.js

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

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

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

package/es/components/fields/TextInputMapper/TextInputMapper.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.80.2
+ * @cube-dev/ui-kit v0.82.0
  * Released under the MIT license.
  */
 
@@ -177,7 +177,7 @@ function TextInputMapperInput(props) {
         password: PasswordInput,
     }[inputType];
     if (inputType === 'combobox') {
-        return (_jsx(ComboBox, { qa: "AddMapping", "data-type": fieldType, width: "auto", size: size, ...mergeProps(rest, PROPS_GRID_HACK), id: undefined, inputValue: value, selectedKey: value, labelPosition: "top", "aria-label": placeholder, placeholder: placeholder, onInputChange: onChange, onSelectionChange: (val) => onSelectionChange(val ?? ''), children: (options ?? []).map((option) => (_jsx(ComboBox.Item, { children: option }, option))) }));
+        return (_jsx(ComboBox, { qa: "AddMapping", "data-type": fieldType, width: "auto", size: size, ...mergeProps(rest, PROPS_GRID_HACK), id: undefined, inputValue: value, selectedKey: value, labelPosition: "top", "aria-label": placeholder, placeholder: placeholder, allowsCustomValue: allowsCustomValue, onInputChange: onChange, onSelectionChange: (val) => onSelectionChange(val ?? ''), children: (options ?? []).map((option) => (_jsx(ComboBox.Item, { children: option }, option))) }));
     }
     return (_jsx(Component, { qa: "AddMapping", "data-type": fieldType, width: "auto", rows: 1, size: size, ...mergeProps(rest, PROPS_GRID_HACK), id: undefined, value: value, labelPosition: "top", "aria-label": placeholder, placeholder: placeholder, onChange: onChange, onBlur: onBlur }));
 }

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

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

package/es/components/fields/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.80.2
+ * @cube-dev/ui-kit v0.82.0
  * Released under the MIT license.
  */
 
@@ -19,6 +19,7 @@ export * from './Slider';
 export * from './Switch/Switch';
 export * from './Select';
 export * from './ComboBox';
+export * from './LegacyComboBox';
 export * from './ListBox';
 export * from './FilterListBox';
 export * from './FilterPicker';

package/es/components/form/FieldWrapper/FieldWrapper.js

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

package/es/components/form/FieldWrapper/extract-field-wrapper-props.js

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

package/es/components/form/FieldWrapper/index.js

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

package/es/components/form/FieldWrapper/types.js

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

package/es/components/form/Form/Field.js

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

package/es/components/form/Form/Form.js

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

package/es/components/form/Form/ResetButton/ResetButton.js

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