@cube-dev/ui-kit 0.67.0 → 0.69.0

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

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

package/es/components/fields/NumberInput/NumberInput.js

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

package/es/components/fields/NumberInput/StepButton.js

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

package/es/components/fields/PasswordInput/PasswordInput.js

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

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

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

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

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

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

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

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

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

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.67.0
+ * @cube-dev/ui-kit v0.69.0
  * Released under the MIT license.
  */
 
@@ -22,8 +22,8 @@ const ClearButton = tasty(Button, {
     styles: {
         radius: 'right (1r - 1bw)',
         width: {
-            '': '4x',
-            '[data-size="small"]': '3x',
+            '': '3x',
+            '[data-size="large"]': '4x',
         },
         height: 'auto',
         placeSelf: 'stretch',

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

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

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.67.0
+ * @cube-dev/ui-kit v0.69.0
  * Released under the MIT license.
  */
 
@@ -62,8 +62,8 @@ const SelectWrapperElement = tasty({
             placeItems: 'center',
             width: {
                 '': '4x',
-                '[data-size="small"]': '3x',
-                '[data-size="medium"]': '4x',
+                '[data-size="small"]': '@size-xs',
+                '[data-size="medium"]': '@size-sm',
             },
             cursor: 'pointer',
             fontSize: 'inherit',
@@ -71,7 +71,7 @@ const SelectWrapperElement = tasty({
         ButtonIcon: {
             display: 'grid',
             placeItems: 'center',
-            width: 'min 4x',
+            width: 'min @size-sm',
             color: 'inherit',
             fontSize: '@icon-size',
         },
@@ -138,7 +138,7 @@ export const ListBoxElement = tasty({
             '': '0px 4px 16px #shadow',
             section: false,
         },
-        height: 'initial max-content (50vh - 4x)',
+        height: 'initial max-content (50vh - @size-md)',
         overflow: 'clip auto',
         scrollbar: 'styled',
     },
@@ -152,7 +152,10 @@ const OptionElement = tasty({
         flow: 'column',
         gap: '0',
         padding: '.5x 1x',
-        cursor: 'pointer',
+        cursor: {
+            '': 'default',
+            disabled: 'not-allowed',
+        },
         radius: true,
         boxSizing: 'border-box',
         color: {
@@ -163,15 +166,17 @@ const OptionElement = tasty({
         fill: {
             '': '#clear',
             focused: '#dark.03',
-            selected: '#dark.06',
+            selected: '#dark.09',
+            'selected & focused': '#dark.12',
+            pressed: '#dark.09',
             disabled: '#clear',
         },
         preset: 't3',
         transition: 'theme',
         width: 'max 100%',
         height: {
-            '': 'min 4x',
-            '[data-size="medium"]': 'min 5x',
+            '': 'min @size-md',
+            '[data-size="large"]': 'min @size-lg',
         },
         Label: {
             preset: 't3',
@@ -211,7 +216,7 @@ function Select(props, ref) {
             onSelectionChange: onChange,
         }),
     });
-    let { qa, label, extra, icon, labelStyles, isRequired, necessityIndicator, validationState, prefix, isDisabled, autoFocus, inputProps, triggerRef, popoverRef, listBoxRef, isLoading, loadingIndicator, overlayOffset = 8, inputStyles, optionStyles, wrapperStyles, listBoxStyles, overlayStyles, suffix, message, description, direction = 'bottom', shouldFlip = true, placeholder, tooltip, size = 'medium', styles, type = 'outline', theme = 'default', labelSuffix, suffixPosition = 'before', ...otherProps } = props;
+    let { qa, label, extra, icon, labelStyles, isRequired, necessityIndicator, validationState, prefix, isDisabled, autoFocus, inputProps, triggerRef, popoverRef, listBoxRef, isLoading, loadingIndicator, overlayOffset = 8, inputStyles, triggerStyles, optionStyles, wrapperStyles, listBoxStyles, overlayStyles, suffix, message, description, direction = 'bottom', shouldFlip = true, placeholder, tooltip, size = 'medium', styles, type = 'outline', theme = 'default', labelSuffix, suffixPosition = 'before', ...otherProps } = props;
     let state = useSelectState(props);
     // Generate a unique ID for this select instance
     const selectId = useMemo(() => generateRandomId(), []);
@@ -286,7 +291,7 @@ function Select(props, ref) {
         showPlaceholder,
         prefix,
     ]);
-    let selectField = (_jsxs(SelectWrapperElement, { qa: qa || 'Select', mods: modifiers, styles: wrapperStyles, "data-size": size, "data-type": type, "data-theme": theme, children: [_jsx(HiddenSelect, { state: state, triggerRef: triggerRef, label: props.label, name: props.name }), _jsxs(SelectElement, { ...mergeProps(buttonProps, hoverProps, focusProps), ref: triggerRef, "data-menu-trigger": true, styles: inputStyles, variant: `${theme}.${type}`, "data-theme": theme, "data-size": size, "data-type": type, mods: modifiers, children: [prefix ? _jsx("div", { "data-element": "Prefix", children: prefix }) : null, _jsx("span", { "data-element": "Value", ...valueProps, children: state.selectedItem
+    let selectField = (_jsxs(SelectWrapperElement, { qa: qa || 'Select', mods: modifiers, styles: { ...wrapperStyles, ...styles }, "data-size": size, "data-type": type, "data-theme": theme, children: [_jsx(HiddenSelect, { state: state, triggerRef: triggerRef, label: props.label, name: props.name }), _jsxs(SelectElement, { ...mergeProps(buttonProps, hoverProps, focusProps), ref: triggerRef, "data-menu-trigger": true, styles: { ...inputStyles, ...triggerStyles }, variant: `${theme}.${type}`, "data-theme": theme, "data-size": size, "data-type": type, mods: modifiers, children: [prefix ? _jsx("div", { "data-element": "Prefix", children: prefix }) : null, _jsx("span", { "data-element": "Value", ...valueProps, children: state.selectedItem
                             ? state.selectedItem.rendered
                             : placeholder || _jsx(_Fragment, { children: "\u00A0" }) }), _jsxs("div", { "data-element": "Suffix", children: [suffixPosition === 'before' ? suffix : null, validationState && !isLoading ? validation : null, isLoading && _jsx(LoadingIcon, {}), suffixPosition === 'after' ? suffix : null, _jsx("div", { "data-element": "CaretIcon", children: _jsx(DownIcon, {}) })] })] }), _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 }) })] }));
     return wrapWithField(selectField, ref, mergeProps({
@@ -295,6 +300,9 @@ function Select(props, ref) {
     }, { labelProps }));
 }
 export function ListBoxPopup({ state, popoverRef, listBoxRef, listBoxStyles, overlayStyles, optionStyles, overlayProps: parentOverlayProps, shouldUseVirtualFocus = false, placement, minWidth, size = 'small', triggerRef, ...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;
     // Get props for the listbox
     let { listBoxProps } = useListBox({
         autoFocus: state.focusStrategy || true,
@@ -336,11 +344,11 @@ export function ListBoxPopup({ state, popoverRef, listBoxRef, listBoxStyles, ove
                             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, headingStyles: { padding: '.5x 1.5x' }, sectionStyles: undefined, shouldUseVirtualFocus: shouldUseVirtualFocus, size: size }, item.key));
+                            renderedItems.push(_jsx(SelectSection, { item: item, state: state, optionStyles: optionStyles, headingStyles: { padding: '.5x 1.5x' }, sectionStyles: undefined, shouldUseVirtualFocus: shouldUseVirtualFocus, size: listItemSize }, item.key));
                             isFirstSection = false;
                         }
                         else {
-                            renderedItems.push(_jsx(Option, { item: item, state: state, styles: optionStyles, shouldUseVirtualFocus: shouldUseVirtualFocus, size: size }, item.key));
+                            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 }));
@@ -351,7 +359,7 @@ function Option({ item, state, styles, shouldUseVirtualFocus, size }) {
     let isDisabled = state.disabledKeys.has(item.key);
     let isSelected = state.selectionManager.isSelected(item.key);
     let isVirtualFocused = state.selectionManager.focusedKey === item.key;
-    let { optionProps } = useOption({
+    let { optionProps, isPressed } = useOption({
         key: item.key,
         isDisabled,
         isSelected,
@@ -367,6 +375,7 @@ function Option({ item, state, styles, shouldUseVirtualFocus, size }) {
             selected: isSelected,
             focused: shouldUseVirtualFocus ? isVirtualFocused : isFocused,
             disabled: isDisabled,
+            pressed: isPressed,
         }, "data-theme": isSelected ? 'special' : undefined, "data-size": size, styles: styles, children: [_jsx("div", { "data-element": "Label", children: item.rendered }), description ? _jsx("div", { "data-element": "Description", children: description }) : null] }));
 }
 function SelectSection(props) {

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.67.0
+ * @cube-dev/ui-kit v0.69.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.67.0
+ * @cube-dev/ui-kit v0.69.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.67.0
+ * @cube-dev/ui-kit v0.69.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.67.0
+ * @cube-dev/ui-kit v0.69.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.67.0
+ * @cube-dev/ui-kit v0.69.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.67.0
+ * @cube-dev/ui-kit v0.69.0
  * Released under the MIT license.
  */
 
@@ -105,16 +105,16 @@ function SliderBase(allProps, ref) {
         'side-label': labelPosition === 'side',
         horizontal: orientation === 'horizontal',
     }), [labelPosition, orientation]);
-    const sliderField = (_jsx(SliderElement, { ref: domRef, ...groupProps, mods: mods, children: _jsx(SliderControlsElement, { ...trackProps, ref: trackRef, mods: mods, children: children({
+    styles = extractStyles(otherProps, OUTER_STYLES, styles);
+    const sliderField = (_jsx(SliderElement, { ref: domRef, ...groupProps, mods: mods, styles: styles, children: _jsx(SliderControlsElement, { ...trackProps, ref: trackRef, mods: mods, children: children({
                 trackRef,
                 inputRef,
                 state,
             }) }) }));
-    styles = extractStyles(otherProps, OUTER_STYLES, styles);
     return wrapWithField(sliderField, ref, {
         ...props,
         children: undefined,
-        styles,
+        // styles,
         extra,
         labelProps,
     });

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

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

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.67.0
+ * @cube-dev/ui-kit v0.69.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.67.0
+ * @cube-dev/ui-kit v0.69.0
  * Released under the MIT license.
  */
 
@@ -25,7 +25,7 @@ function TextArea(props, ref) {
             value: value?.toString() ?? '',
         }),
     });
-    let { autoSize = false, isDisabled = false, isReadOnly = false, isRequired = false, onChange, maxRows = 10, rows = 3, ...otherProps } = props;
+    let { autoSize = false, isDisabled = false, isReadOnly = false, isRequired = false, onChange, maxRows = 10, rows = 3, mods, ...otherProps } = props;
     rows = Math.max(rows, 1);
     maxRows = Math.max(maxRows, rows);
     let [inputValue, setInputValue] = useControlledState(props.value, props.defaultValue, () => { });

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.67.0
+ * @cube-dev/ui-kit v0.69.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.67.0
+ * @cube-dev/ui-kit v0.69.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.67.0
+ * @cube-dev/ui-kit v0.69.0
  * Released under the MIT license.
  */
 
@@ -33,7 +33,7 @@ export const INPUT_WRAPPER_STYLES = {
     display: 'grid',
     position: 'relative',
     gridAreas: '"prefix input suffix"',
-    gridColumns: 'auto 1fr auto',
+    gridColumns: 'auto 1sf auto',
     placeItems: 'stretch',
     fill: {
         '': '#white',
@@ -79,7 +79,7 @@ export const INPUT_WRAPPER_STYLES = {
     InputIcon: {
         display: 'grid',
         placeItems: 'center',
-        width: 'min 4x',
+        width: 'min @size-sm',
         color: 'inherit',
         fontSize: '@icon-size',
     },
@@ -87,8 +87,8 @@ export const INPUT_WRAPPER_STYLES = {
         display: 'grid',
         placeItems: 'center',
         width: {
-            '': 'min 4x',
-            suffix: 'min 3x',
+            '': 'min @size-sm',
+            suffix: 'min @size-xs',
         },
         fontSize: '@icon-size',
     },
@@ -97,6 +97,10 @@ const InputWrapperElement = tasty({ styles: INPUT_WRAPPER_STYLES });
 const STYLE_LIST = [...POSITION_STYLES, ...DIMENSION_STYLES];
 const INPUT_STYLE_PROPS_LIST = [...BLOCK_STYLES, 'resize'];
 export const DEFAULT_INPUT_STYLES = {
+    display: 'grid',
+    placeItems: 'center stretch',
+    placeContent: 'center stretch',
+    gridRows: 'min(1lh)',
     gridArea: 'input',
     width: 'initial 100% 100%',
     color: 'inherit',
@@ -113,18 +117,29 @@ export const DEFAULT_INPUT_STYLES = {
     resize: 'none',
     boxSizing: 'border-box',
     userSelect: 'auto',
-    '@vertical-padding': {
-        '': '(1.25x - 1bw)',
-        '[data-size="small"]': '(.75x - 1bw)',
+    height: {
+        '': '(@size-md - 2bw) (@size-md - 2bw)',
+        '[data-size="small"]': '(@size-sm - 2bw) (@size-sm - 2bw)',
+        '[data-size="medium"]': '(@size-md - 2bw) (@size-md - 2bw)',
+        '[data-size="large"]': '(@size-lg - 2bw) (@size-lg - 2bw)',
+        multiline: 'min (@size-md - 2bw)',
+        '[data-size="small"] & multiline': 'min (@size-sm - 2bw)',
+        '[data-size="medium"] & multiline': 'min (@size-md - 2bw)',
+        '[data-size="large"] & multiline': 'min (@size-lg - 2bw)',
     },
+    '@vertical-padding': '(.5x - 1bw)',
     '@left-padding': {
-        '': '(1.25x - 1bw)',
+        '': '(1x - 1bw)',
         '[data-size="small"]': '(1x - 1bw)',
+        '[data-size="large"]': '(1.25x - 1bw)',
+        '[data-size="xlarge"]': '(1.5x - 1bw)',
         prefix: '0',
     },
     '@right-padding': {
-        '': '(1.25x - 1bw)',
+        '': '(1x - 1bw)',
         '[data-size="small"]': '(1x - 1bw)',
+        '[data-size="large"]': '(1.25x - 1bw)',
+        '[data-size="xlarge"]': '(1.5x - 1bw)',
         suffix: '0',
     },
 };
@@ -141,7 +156,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, 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, ...otherProps } = props;
     let styles = extractStyles(otherProps, STYLE_LIST);
     let type = otherProps.type;
     inputStyles = extractStyles(otherProps, INPUT_STYLE_PROPS_LIST, inputStyles);

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.67.0
+ * @cube-dev/ui-kit v0.69.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.67.0
+ * @cube-dev/ui-kit v0.69.0
  * 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, } = props;
+    let { isDisabled, actionLabel, value, onChange, keyProps, valueProps, KeyComponent, ValueComponent, size = 'medium', } = props;
     function extractLocalValues(value, localValues) {
         const valueKeys = Object.keys(value);
         const localKeys = localValues.map(({ key }) => key);
@@ -145,17 +145,17 @@ function TextInputMapper(props, ref) {
     const renderedMappings = useMemo(() => {
         return mappings.map((mapping, index) => {
             const { key, value, id } = mapping;
-            return (_jsxs(Grid, { qa: "Mapping", columns: "minmax(0, 1fr) minmax(0, 1fr) min-content", gap: "1x", children: [_jsx(KeyComponent, { autoFocus: index === mappings.length - 1, id: id, isDisabled: isDisabled, fieldType: "key", value: key, placeholder: "Key", onChange: onKeyChange, onSubmit: onSubmit, ...keyProps }), _jsx(ValueComponent, { id: id, fieldType: "value", isDisabled: !key || isDisabled, value: value, placeholder: "Value", onChange: onValueChange, onSubmit: onSubmit, ...valueProps }), _jsx(Button, { "aria-label": "Remove mapping", theme: "danger", type: "clear", icon: _jsx(CloseIcon, {}), onPress: () => {
+            return (_jsxs(Grid, { qa: "Mapping", columns: "minmax(0, 1fr) minmax(0, 1fr) min-content", gap: "1x", children: [_jsx(KeyComponent, { autoFocus: index === mappings.length - 1, id: id, isDisabled: isDisabled, fieldType: "key", value: key, placeholder: "Key", size: size, onChange: onKeyChange, onSubmit: onSubmit, ...keyProps }), _jsx(ValueComponent, { id: id, fieldType: "value", isDisabled: !key || isDisabled, value: value, placeholder: "Value", size: size, onChange: onValueChange, onSubmit: onSubmit, ...valueProps }), _jsx(Button, { "aria-label": "Remove mapping", theme: "danger", type: "clear", size: size, icon: _jsx(CloseIcon, {}), onPress: () => {
                             setMappings(mappings.filter((m) => m.id !== id));
                             onMappingsChange(mappings.filter((m) => m.id !== id));
                         } })] }, id));
         });
     }, [JSON.stringify(mappings)]);
-    const element = (_jsxs(Flow, { ref: ref, gap: "1x", onKeyDown: onKeyDown, children: [[...renderedMappings], showNewButton ? (_jsxs(Space, { gap: 0, children: [_jsx(Block, { styles: { overflow: 'clip', width: 'max 0px' }, children: "\u00A0" }), _jsx(Button, { isDisabled: isDisabled, icon: _jsx(PlusIcon, {}), onPress: addNewMapping, children: actionLabel ? actionLabel : 'Mapping' })] })) : null] }));
+    const element = (_jsxs(Flow, { ref: ref, gap: "1x", onKeyDown: onKeyDown, children: [[...renderedMappings], showNewButton ? (_jsxs(Space, { gap: 0, children: [_jsx(Block, { styles: { overflow: 'clip', width: 'max 0px' }, children: "\u00A0" }), _jsx(Button, { isDisabled: isDisabled, size: size, icon: _jsx(PlusIcon, {}), onPress: addNewMapping, children: actionLabel ? actionLabel : 'Mapping' })] })) : null] }));
     return wrapWithField(element, ref, props);
 }
 function TextInputMapperInput(props) {
-    const { id, fieldType, inputType = 'input', options, value, placeholder, allowsCustomValue, ...rest } = props;
+    const { id, fieldType, inputType = 'input', options, value, size = 'medium', placeholder, allowsCustomValue, ...rest } = props;
     const onChange = useEvent((newValue) => {
         props.onChange?.(id, newValue);
     });
@@ -177,9 +177,9 @@ function TextInputMapperInput(props) {
         password: PasswordInput,
     }[inputType];
     if (inputType === 'combobox') {
-        return (_jsx(ComboBox, { qa: "AddMapping", "data-type": fieldType, width: "auto", ...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, 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, ...mergeProps(rest, PROPS_GRID_HACK), id: undefined, value: value, labelPosition: "top", "aria-label": placeholder, placeholder: placeholder, onChange: onChange, onBlur: onBlur }));
+    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 }));
 }
 const _TextInputMapper = forwardRef(TextInputMapper);
 _TextInputMapper.displayName = 'TextInputMapper';

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.67.0
+ * @cube-dev/ui-kit v0.69.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.67.0
+ * @cube-dev/ui-kit v0.69.0
  * Released under the MIT license.
  */
 
@@ -20,6 +20,8 @@ export * from './Switch/Switch';
 export * from './Select';
 export * from './ComboBox';
 export * from './ListBox';
+export * from './FilterListBox';
+export * from './FilterPicker';
 export * from './TextInputMapper';
 
         

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

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