@cube-dev/ui-kit 0.81.0 → 0.82.1

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.81.0
+ * @cube-dev/ui-kit v0.82.1
  * 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);
@@ -118,7 +120,7 @@ function Select(props, ref) {
             onSelectionChange: onChange,
         }),
     });
-    let { qa, label, extra, icon, rightIcon, labelStyles, isRequired, necessityIndicator, validationState, prefix, isDisabled, autoFocus, inputProps, triggerRef, popoverRef, listBoxRef, isLoading, loadingIndicator, overlayOffset = 8, inputStyles, triggerStyles, optionStyles, wrapperStyles, listBoxStyles, overlayStyles, suffix, message, description, descriptionPlacement, hotkeys, direction = 'bottom', shouldFlip = true, placeholder, tooltip, size = 'medium', styles, type = 'outline', theme = 'default', labelSuffix, suffixPosition = 'before', isClearable, ...otherProps } = props;
+    let { qa, label, extra, icon, rightIcon, labelStyles, isRequired, necessityIndicator, validationState, prefix, isDisabled, autoFocus, inputProps, triggerRef, popoverRef, listBoxRef, isLoading, loadingIndicator, overlayOffset = 8, inputStyles, triggerStyles, optionStyles, wrapperStyles, listBoxStyles, overlayStyles, suffix, message, description, descriptionPlacement, hotkeys, direction = 'bottom', shouldFlip = true, placeholder, tooltip, size = 'medium', styles, type = 'outline', theme = 'default', labelSuffix, suffixPosition = 'before', isClearable, form, ...otherProps } = props;
     let state = useSelectState(props);
     // Generate a unique ID for this select instance
     const selectId = useMemo(() => generateRandomId(), []);
@@ -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.81.0
+ * @cube-dev/ui-kit v0.82.1
  * 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.81.0
+ * @cube-dev/ui-kit v0.82.1
  * 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.81.0
+ * @cube-dev/ui-kit v0.82.1
  * 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.81.0
+ * @cube-dev/ui-kit v0.82.1
  * 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.81.0
+ * @cube-dev/ui-kit v0.82.1
  * 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.81.0
+ * @cube-dev/ui-kit v0.82.1
  * Released under the MIT license.
  */
 
@@ -30,7 +30,7 @@ function SliderBase(allProps, ref) {
             onChange: onChange,
         }),
     });
-    let { labelPosition, label, extra, styles, isRequired, validationState, message, description, requiredMark, labelSuffix, labelStyles, necessityIndicator, gradation, isDisabled, inputStyles, minValue = 0, maxValue = 100, inputWidth, formatOptions, getValueLabel, onChange, onChangeEnd, children, showValueLabel = true, orientation: formOrientation, ...otherProps } = props;
+    let { labelPosition, label, extra, styles, isRequired, validationState, message, description, requiredMark, labelSuffix, labelStyles, necessityIndicator, gradation, isDisabled, inputStyles, minValue = 0, maxValue = 100, inputWidth, formatOptions, getValueLabel, onChange, onChangeEnd, children, showValueLabel = true, orientation: formOrientation, form, ...otherProps } = props;
     let orientation = allProps.orientation || 'horizontal';
     // `Math.abs(Math.sign(a) - Math.sign(b)) === 2` is true if the values have a different sign.
     let alwaysDisplaySign = Math.abs(Math.sign(minValue) - Math.sign(maxValue)) === 2;

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.81.0
+ * @cube-dev/ui-kit v0.82.1
  * 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.81.0
+ * @cube-dev/ui-kit v0.82.1
  * 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.81.0
+ * @cube-dev/ui-kit v0.82.1
  * 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.81.0
+ * @cube-dev/ui-kit v0.82.1
  * 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.81.0
+ * @cube-dev/ui-kit v0.82.1
  * 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.81.0
+ * @cube-dev/ui-kit v0.82.1
  * 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.81.0
+ * @cube-dev/ui-kit v0.82.1
  * Released under the MIT license.
  */
 
@@ -123,7 +123,7 @@ function Switch(props, ref) {
             onChange: onChange,
         }),
     });
-    let { qa, isDisabled = false, children, label, labelStyles, insideForm, isLoading, labelPosition, inputStyles, fieldStyles, validationState, size = 'medium', } = props;
+    let { qa, isDisabled = false, children, label, labelStyles, insideForm, isLoading, labelPosition, inputStyles, fieldStyles, validationState, size = 'medium', form, } = props;
     const id = useId(props.id);
     let styles = extractStyles(props, OUTER_STYLES);
     inputStyles = extractStyles(props, BLOCK_STYLES, inputStyles);

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.81.0
+ * @cube-dev/ui-kit v0.82.1
  * 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.81.0
+ * @cube-dev/ui-kit v0.82.1
  * 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.81.0
+ * @cube-dev/ui-kit v0.82.1
  * 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.81.0
+ * @cube-dev/ui-kit v0.82.1
  * 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.81.0
+ * @cube-dev/ui-kit v0.82.1
  * Released under the MIT license.
  */
 
@@ -159,7 +159,7 @@ function _TextInputBase(props, ref) {
             onChange,
         }),
     });
-    let { qa, mods, validationState, prefix, isDisabled, multiLine, autoFocus, inputProps, wrapperProps, inputRef, isLoading, loadingIndicator, value, inputStyles = {}, wrapperStyles = {}, suffix, suffixPosition = 'before', wrapperRef, tooltip, rows = 1, size = 'medium', autocomplete, icon, maxLength, minLength, ...otherProps } = props;
+    let { qa, mods, validationState, prefix, isDisabled, multiLine, autoFocus, inputProps, wrapperProps, inputRef, isLoading, loadingIndicator, value, inputStyles = {}, wrapperStyles = {}, suffix, suffixPosition = 'before', wrapperRef, tooltip, rows = 1, size = 'medium', autocomplete, icon, maxLength, minLength, form, ...otherProps } = props;
     let styles = extractStyles(otherProps, STYLE_LIST);
     let type = otherProps.type;
     inputStyles = extractStyles(otherProps, INPUT_STYLE_PROPS_LIST, inputStyles);
@@ -228,7 +228,7 @@ function _TextInputBase(props, ref) {
             fontFamily: 'text-security-disc',
         }
         : {};
-    const textField = (_jsxs(InputWrapperElement, { ref: wrapperRef, qa: qa || 'TextInput', mods: modifiers, "data-size": size, styles: wrapperStyles, ...wrapperProps, children: [prefix ? _jsx("div", { "data-element": "Prefix", children: prefix }) : null, _jsx(InputElement, { as: ElementType, ...mergeProps(inputProps, focusProps, hoverProps), ref: inputRef, form: null, rows: multiLine ? rows : undefined, mods: modifiers, style: textSecurityStyles, "data-autofocus": autoFocus ? '' : undefined, autoFocus: autoFocus, "data-size": size, autoComplete: autocomplete, styles: inputStyles, disabled: !!isDisabled, maxLength: maxLength, minLength: minLength }), (validationState && !isLoading) || isLoading || suffix ? (_jsxs("div", { "data-element": "Suffix", children: [suffixPosition === 'before' ? suffix : null, (validationState && !isLoading) || isLoading ? (_jsxs("div", { "data-element": "State", children: [validationState && !isLoading ? validation : null, isLoading && _jsx(LoadingIcon, { "data-element": "InputIcon" })] })) : null, suffixPosition === 'after' ? suffix : null] })) : null] }));
+    const textField = (_jsxs(InputWrapperElement, { ref: wrapperRef, qa: qa || 'TextInput', mods: modifiers, "data-size": size, styles: wrapperStyles, ...wrapperProps, children: [prefix ? _jsx("div", { "data-element": "Prefix", children: prefix }) : null, _jsx(InputElement, { as: ElementType, ...mergeProps(inputProps, focusProps, hoverProps), ref: inputRef, rows: multiLine ? rows : undefined, mods: modifiers, style: textSecurityStyles, "data-autofocus": autoFocus ? '' : undefined, autoFocus: autoFocus, "data-size": size, autoComplete: autocomplete, styles: inputStyles, disabled: !!isDisabled, maxLength: maxLength, minLength: minLength }), (validationState && !isLoading) || isLoading || suffix ? (_jsxs("div", { "data-element": "Suffix", children: [suffixPosition === 'before' ? suffix : null, (validationState && !isLoading) || isLoading ? (_jsxs("div", { "data-element": "State", children: [validationState && !isLoading ? validation : null, isLoading && _jsx(LoadingIcon, { "data-element": "InputIcon" })] })) : null, suffixPosition === 'after' ? suffix : null] })) : null] }));
     return wrapWithField(textField, domRef, {
         ...props,
         styles,

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.81.0
+ * @cube-dev/ui-kit v0.82.1
  * 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.81.0
+ * @cube-dev/ui-kit v0.82.1
  * Released under the MIT license.
  */
 
@@ -54,7 +54,7 @@ function TextInputMapper(props, ref) {
         }),
     });
     const counterRef = useRef(0);
-    let { isDisabled, actionLabel, value, onChange, keyProps, valueProps, KeyComponent, ValueComponent, size = 'medium', } = props;
+    let { isDisabled, actionLabel, value, onChange, keyProps, valueProps, KeyComponent, ValueComponent, size = 'medium', form, } = props;
     function extractLocalValues(value, localValues) {
         const valueKeys = Object.keys(value);
         const localKeys = localValues.map(({ key }) => key);
@@ -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.81.0
+ * @cube-dev/ui-kit v0.82.1
  * 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.81.0
+ * @cube-dev/ui-kit v0.82.1
  * 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.81.0
+ * @cube-dev/ui-kit v0.82.1
  * 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.81.0
+ * @cube-dev/ui-kit v0.82.1
  * 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.81.0
+ * @cube-dev/ui-kit v0.82.1
  * 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.81.0
+ * @cube-dev/ui-kit v0.82.1
  * 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.81.0
+ * @cube-dev/ui-kit v0.82.1
  * 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.81.0
+ * @cube-dev/ui-kit v0.82.1
  * 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.81.0
+ * @cube-dev/ui-kit v0.82.1
  * Released under the MIT license.
  */
 

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

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

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

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

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

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

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

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

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

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

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

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

package/es/components/form/Form/use-field/index.js

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