@cube-dev/ui-kit 0.91.0 → 0.92.1

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.91.0
+ * @cube-dev/ui-kit v0.92.1
  * Released under the MIT license.
  */
 
@@ -35,7 +35,6 @@ const RadioButtonElement = tasty(Item, {
     },
 });
 const TabRadioButtonSelectedElement = tasty(RadioButtonElement, {
-    qa: 'RadioSelected',
     styles: {
         fill: '#white',
         shadow: '$item-shadow',
@@ -199,10 +198,10 @@ function Radio(props, ref) {
         const ButtonElement = isRadioSelected && contextType === 'tabs'
             ? TabRadioButtonSelectedElement
             : RadioButtonElement;
-        return (_jsxs(ButtonElement, { ref: domRef, type: effectiveButtonType, theme: isInvalid ? 'danger' : 'default', size: effectiveSize, icon: icon, rightIcon: rightIcon, prefix: prefix, suffix: suffix, description: description, tooltip: tooltip, hotkeys: hotkeys, isSelected: isRadioSelected, isDisabled: isRadioDisabled, mods: mods, styles: styles, ...mergeProps(hoverProps, focusProps), children: [_jsx(HiddenInput, { "data-qa": qa || 'Radio', "aria-label": ariaLabel, ...inputProps, ref: inputRef, form: null, mods: { button: isButton, disabled: isRadioDisabled } }), label] }));
+        return (_jsxs(ButtonElement, { ref: domRef, type: effectiveButtonType, theme: isInvalid ? 'danger' : 'default', size: effectiveSize, icon: icon, rightIcon: rightIcon, prefix: prefix, suffix: suffix, description: description, tooltip: tooltip, hotkeys: hotkeys, isSelected: isRadioSelected, isDisabled: isRadioDisabled, mods: mods, styles: styles, ...mergeProps(hoverProps, focusProps), children: [_jsx(HiddenInput, { qa: qa || 'Radio', "data-input-type": "radio", "aria-label": ariaLabel, ...inputProps, ref: inputRef, form: null, mods: { button: isButton, disabled: isRadioDisabled } }), label] }));
     }
     // Render classic radio type
-    return (_jsxs(RadioWrapperElement, { styles: styles, ...hoverProps, ref: domRef, mods: mods, "data-type": type, children: [_jsx(HiddenInput, { "data-qa": qa || 'Radio', "aria-label": ariaLabel, ...mergeProps(inputProps, focusProps), ref: inputRef, mods: { button: isButton } }), _jsx(RadioNormalElement, { "data-element": "Input", mods: mods, "data-type": type, children: RadioCircleElement }), label && (_jsx(RadioLabelElement, { mods: mods, styles: labelStyles, ...filterBaseProps(labelProps), children: label }))] }));
+    return (_jsxs(RadioWrapperElement, { styles: styles, ...hoverProps, ref: domRef, mods: mods, "data-type": type, children: [_jsx(HiddenInput, { qa: qa || 'Radio', "data-input-type": "radio", "aria-label": ariaLabel, ...mergeProps(inputProps, focusProps), ref: inputRef, mods: { button: isButton } }), _jsx(RadioNormalElement, { "data-element": "Input", mods: mods, "data-type": type, children: RadioCircleElement }), label && (_jsx(RadioLabelElement, { mods: mods, styles: labelStyles, ...filterBaseProps(labelProps), children: label }))] }));
 }
 /**
  * Radio buttons allow users to select a single option from a list of mutually exclusive options.

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.91.0
+ * @cube-dev/ui-kit v0.92.1
  * Released under the MIT license.
  */
 
@@ -51,7 +51,7 @@ function RadioGroup(props, ref) {
     props = useProviderProps(props);
     props = useFormProps(props);
     props = useFieldProps(props, { defaultValidationTrigger: 'onChange' });
-    let { isDisabled, isRequired, labelPosition = 'top', isInvalid, children, styles, groupStyles, insideForm, 
+    let { qa, isDisabled, isRequired, labelPosition = 'top', isInvalid, children, styles, groupStyles, insideForm, 
     // orientation, // ignore orientation since it came from the form context
     labelProps: baseLabelProps, size, buttonType, type, form, ...otherProps } = props;
     let domRef = useDOMRef(ref);
@@ -63,7 +63,7 @@ function RadioGroup(props, ref) {
             type === 'button' || type === 'tabs' ? 'horizontal' : 'vertical';
     }
     let { radioGroupProps: fieldProps, labelProps } = useRadioGroup({ ...props, orientation }, state);
-    let radioGroup = (_jsx(RadioGroupElement, { styles: styles, mods: {
+    let radioGroup = (_jsx(RadioGroupElement, { qa: qa || 'RadioGroup', styles: styles, "data-input-type": "radiogroup", mods: {
             horizontal: orientation === 'horizontal',
             'inside-form': insideForm,
             'side-label': labelPosition === 'side',

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.91.0
+ * @cube-dev/ui-kit v0.92.1
  * 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.91.0
+ * @cube-dev/ui-kit v0.92.1
  * 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.91.0
+ * @cube-dev/ui-kit v0.92.1
  * Released under the MIT license.
  */
 
@@ -11,6 +11,7 @@ import { useSearchField } from 'react-aria';
 import { useSearchFieldState } from 'react-stately';
 import { CloseIcon, SearchIcon } from '../../../icons';
 import { useProviderProps } from '../../../provider';
+import { mergeProps } from '../../../utils/react';
 import { ariaToCubeButtonProps } from '../../../utils/react/mapProps';
 import { castNullableStringValue, } from '../../../utils/react/nullableValue';
 import { ItemAction } from '../../actions';
@@ -19,12 +20,14 @@ export { useSearchFieldState, useSearchField };
 export const SearchInput = forwardRef(function SearchInput(props, ref) {
     props = castNullableStringValue(props);
     props = useProviderProps(props);
-    let { isClearable, validationState, onClear } = props;
+    let { isClearable, validationState, onClear, labelProps: userLabelProps, ...restProps } = props;
     let inputRef = useRef(null);
-    let state = useSearchFieldState(props);
-    let { inputProps, clearButtonProps } = useSearchField(props, state, inputRef);
-    let showClearButton = isClearable && state.value !== '' && !props.isReadOnly;
-    return (_jsx(TextInputBase, { ref: ref, inputProps: inputProps, inputRef: inputRef, type: "search", icon: _jsx(SearchIcon, {}), suffixPosition: "after", ...props, suffix: props.suffix || showClearButton ? (_jsxs(_Fragment, { children: [props.suffix, showClearButton && (_jsx(ItemAction, { icon: _jsx(CloseIcon, {}), size: props.size, type: validationState === 'invalid' ? 'clear' : 'neutral', theme: validationState === 'invalid' ? 'danger' : undefined, ...ariaToCubeButtonProps(clearButtonProps), onPress: (e) => {
+    let state = useSearchFieldState(restProps);
+    let { labelProps, inputProps, clearButtonProps } = useSearchField(restProps, state, inputRef);
+    let showClearButton = isClearable && state.value !== '' && !restProps.isReadOnly;
+    // Merge user-provided labelProps with aria labelProps
+    const mergedLabelProps = mergeProps(labelProps, userLabelProps);
+    return (_jsx(TextInputBase, { ref: ref, labelProps: mergedLabelProps, inputProps: { ...inputProps, 'data-input-type': 'searchinput' }, inputRef: inputRef, type: "search", icon: _jsx(SearchIcon, {}), suffixPosition: "after", validationState: validationState, ...restProps, suffix: restProps.suffix || showClearButton ? (_jsxs(_Fragment, { children: [restProps.suffix, showClearButton && (_jsx(ItemAction, { icon: _jsx(CloseIcon, {}), size: restProps.size, type: validationState === 'invalid' ? 'clear' : 'neutral', theme: validationState === 'invalid' ? 'danger' : undefined, ...ariaToCubeButtonProps(clearButtonProps), onPress: (e) => {
                         // Call the original clear functionality
                         clearButtonProps.onPress?.();
                         // Call the onClear callback

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.91.0
+ * @cube-dev/ui-kit v0.92.1
  * 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.91.0
+ * @cube-dev/ui-kit v0.92.1
  * Released under the MIT license.
  */
 
@@ -22,12 +22,14 @@ import { ItemAction } from '../../actions';
 import { StyledDivider as ListDivider, StyledSectionHeading as ListSectionHeading, StyledSection as ListSectionWrapper, } from '../../actions/Menu/styled';
 import { CollectionItem } from '../../CollectionItem';
 import { Item } from '../../content/Item';
+import { Text } from '../../content/Text';
 import { useFieldProps, useFormProps, wrapWithField } from '../../form';
 import { DisplayTransition } from '../../helpers';
 import { Portal } from '../../portal';
 import { InvalidIcon } from '../../shared/InvalidIcon';
 import { ValidIcon } from '../../shared/ValidIcon';
 const SelectWrapperElement = tasty({
+    qa: 'SelectWrapper',
     styles: {
         display: 'grid',
         position: 'relative',
@@ -47,18 +49,10 @@ const SelectWrapperElement = tasty({
 });
 const SelectTrigger = tasty(Item, {
     as: 'button',
-    qa: 'Trigger',
-    styles: {
-        reset: 'button',
-        Label: {
-            opacity: {
-                '': 1,
-                placeholder: '$disabled-opacity',
-            },
-        },
-    },
+    qa: 'SelectTrigger',
 });
 export const ListBoxElement = tasty({
+    qa: 'ListBox',
     as: 'ul',
     styles: {
         display: 'flex',
@@ -87,6 +81,7 @@ const SelectOverlayWrapper = tasty({
     },
 });
 const OverlayElement = tasty({
+    qa: 'SelectOverlay',
     styles: {
         width: 'min $overlay-min-width',
         display: 'grid',
@@ -132,7 +127,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, triggerDescription, descriptionPlacement, hotkeys, direction = 'bottom', shouldFlip = true, placeholder, tooltip, size = 'medium', styles, type = 'outline', theme = 'default', labelSuffix, suffixPosition = 'before', isClearable, form, ...otherProps } = props;
+    let { qa, label, extra, icon, rightIcon, labelStyles, isRequired, necessityIndicator, validationState, prefix, isDisabled = props.isLoading || false, autoFocus, inputProps, triggerRef, popoverRef, listBoxRef, isLoading, loadingIndicator, overlayOffset = 8, inputStyles, triggerStyles, optionStyles, wrapperStyles, listBoxStyles, overlayStyles, suffix, message, triggerDescription, descriptionPlacement, hotkeys, direction = 'bottom', shouldFlip = true, containerPadding = 8, placeholder, tooltip, size = 'medium', styles, type = 'outline', theme = 'default', labelSuffix, suffixPosition = 'before', isClearable, isButton = false, form, ...otherProps } = props;
     let state = useSelectState(props);
     // Generate a unique ID for this select instance
     const selectId = useMemo(() => generateRandomId(), []);
@@ -169,6 +164,7 @@ function Select(props, ref) {
         isOpen: state.isOpen,
         onClose: state.close,
         offset: overlayOffset,
+        containerPadding: containerPadding,
     });
     let { isFocused, focusProps } = useFocus({ isDisabled }, true);
     let { hoverProps, isHovered } = useHover({ isDisabled });
@@ -219,13 +215,11 @@ function Select(props, ref) {
         }
         return (_jsxs(_Fragment, { children: [suffix, validationState ? validation : null] }));
     }, [suffix, validationState, validation]);
-    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 }), _jsx(SelectTrigger, { ...mergeProps(buttonProps, hoverProps, focusProps), ref: triggerRef, "data-popover-trigger": true, styles: { ...inputStyles, ...triggerStyles }, theme: theme, size: size, 
+    let selectField = (_jsxs(SelectWrapperElement, { mods: modifiers, styles: { ...wrapperStyles, ...styles }, "data-size": size, "data-type": type, "data-theme": theme, "data-input-type": "select", children: [_jsx(HiddenSelect, { qa: qa || 'Select', state: state, triggerRef: triggerRef, label: props.label, name: props.name }), _jsx(SelectTrigger, { ...mergeProps(buttonProps, hoverProps, focusProps), ref: triggerRef, "data-popover-trigger": true, styles: { ...inputStyles, ...triggerStyles }, theme: theme, size: size, 
                 // Ensure this button never submits a surrounding form in tests or runtime
                 htmlType: "button", 
                 // 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, {}), theme: validationState === 'invalid' ? 'danger' : undefined, qa: "SelectClearButton", mods: { pressed: false }, onPress: clearValue })) : isLoading ? (_jsx(LoadingIcon, {})) : (_jsx(DirectionIcon, { to: state.isOpen ? 'up' : 'down' })), description: triggerDescription, descriptionPlacement: descriptionPlacement, hotkeys: hotkeys, tooltip: tooltip, labelProps: valueProps, children: state.selectedItem
-                    ? state.selectedItem.rendered
-                    : 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 })] }));
+                type: type, mods: modifiers, prefix: prefix, suffix: suffix, icon: icon, rightIcon: rightIcon !== undefined ? (rightIcon) : showClearButton ? (_jsx(ItemAction, { icon: _jsx(CloseIcon, {}), theme: validationState === 'invalid' ? 'danger' : undefined, qa: "SelectClearButton", mods: { pressed: false }, onPress: clearValue })) : isLoading ? (_jsx(LoadingIcon, {})) : (_jsx(DirectionIcon, { to: state.isOpen ? 'up' : 'down' })), description: triggerDescription, descriptionPlacement: descriptionPlacement, hotkeys: hotkeys, tooltip: tooltip, isButton: isButton, labelProps: valueProps, children: state.selectedItem ? (state.selectedItem.rendered) : placeholder ? (_jsx(Text.Placeholder, { children: placeholder })) : null }), _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: labelStyles,

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.91.0
+ * @cube-dev/ui-kit v0.92.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.91.0
+ * @cube-dev/ui-kit v0.92.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.91.0
+ * @cube-dev/ui-kit v0.92.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.91.0
+ * @cube-dev/ui-kit v0.92.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.91.0
+ * @cube-dev/ui-kit v0.92.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.91.0
+ * @cube-dev/ui-kit v0.92.1
  * Released under the MIT license.
  */
 
@@ -11,7 +11,7 @@ import { useMemo, useRef, } from 'react';
 import { useNumberFormatter, useSlider } from 'react-aria';
 import { useSliderState } from 'react-stately';
 import { extractStyles, OUTER_STYLES, tasty } from '../../../tasty';
-import { forwardRefWithGenerics } from '../../../utils/react/forwardRefWithGenerics';
+import { forwardRefWithGenerics, mergeProps } from '../../../utils/react';
 import { Text } from '../../content/Text';
 import { useFieldProps, useFormProps, wrapWithField } from '../../form';
 import { SliderControlsElement, SliderElement } from './elements';
@@ -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, form, ...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, labelProps: userLabelProps, ...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;
@@ -107,7 +107,7 @@ function SliderBase(allProps, ref) {
         horizontal: orientation === 'horizontal',
     }), [labelPosition, orientation]);
     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({
+    const sliderField = (_jsx(SliderElement, { ref: domRef, ...groupProps, mods: mods, styles: styles, "data-input-type": "slider", children: _jsx(SliderControlsElement, { ...trackProps, ref: trackRef, mods: mods, children: children({
                 trackRef,
                 inputRef,
                 state,
@@ -117,7 +117,7 @@ function SliderBase(allProps, ref) {
         children: undefined,
         // styles,
         extra,
-        labelProps,
+        labelProps: mergeProps(labelProps, userLabelProps),
     });
 }
 const _SliderBase = forwardRefWithGenerics(SliderBase);

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.91.0
+ * @cube-dev/ui-kit v0.92.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.91.0
+ * @cube-dev/ui-kit v0.92.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.91.0
+ * @cube-dev/ui-kit v0.92.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.91.0
+ * @cube-dev/ui-kit v0.92.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.91.0
+ * @cube-dev/ui-kit v0.92.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.91.0
+ * @cube-dev/ui-kit v0.92.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.91.0
+ * @cube-dev/ui-kit v0.92.1
  * Released under the MIT license.
  */
 
@@ -142,7 +142,7 @@ function Switch(props, ref) {
         'inside-form': insideForm,
         'side-label': labelPosition === 'side',
     };
-    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] }));
+    const switchField = (_jsxs(SwitchWrapperElement, { qa: "SwitchWrapper", mods: mods, "data-size": size, styles: styles, ...hoverProps, children: [_jsx(HiddenInput, { qa: qa || 'Switch', "data-input-type": "switch", ...mergeProps(inputProps, focusProps), ref: inputRef, id: id }), _jsx(SwitchElement, { 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,

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.91.0
+ * @cube-dev/ui-kit v0.92.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.91.0
+ * @cube-dev/ui-kit v0.92.1
  * Released under the MIT license.
  */
 
@@ -11,7 +11,7 @@ import { forwardRef, useEffect, useLayoutEffect, useRef, } from 'react';
 import { useTextField } from 'react-aria';
 import { useEvent } from '../../../_internal/index';
 import { useProviderProps } from '../../../provider';
-import { chain } from '../../../utils/react';
+import { chain, mergeProps } from '../../../utils/react';
 import { castNullableStringValue, } from '../../../utils/react/nullableValue';
 import { useFieldProps } from '../../form';
 import { TextInputBase } from '../TextInput';
@@ -25,17 +25,22 @@ function TextArea(props, ref) {
             value: value?.toString() ?? '',
         }),
     });
-    let { autoSize = false, isDisabled = false, isReadOnly = false, isRequired = false, onChange, maxRows = 10, rows = 3, mods, ...otherProps } = props;
+    let { autoSize = false, isDisabled = false, isReadOnly = false, isRequired = false, onChange, maxRows = 10, rows = 3, mods, labelProps: userLabelProps, inputRef: propsInputRef, ...otherProps } = props;
     rows = Math.max(rows, 1);
     maxRows = Math.max(maxRows, rows);
     let [inputValue, setInputValue] = useControlledState(props.value, props.defaultValue, () => { });
     let localInputRef = useRef(null);
-    let inputRef = props.inputRef ?? localInputRef;
+    let inputRef = propsInputRef ?? localInputRef;
     let { labelProps, inputProps } = useTextField({
-        ...props,
+        ...otherProps,
+        isDisabled,
+        isReadOnly,
+        isRequired,
         onChange: chain(onChange, setInputValue),
         inputElementType: 'textarea',
     }, inputRef);
+    // Merge user-provided labelProps with aria labelProps
+    const mergedLabelProps = mergeProps(labelProps, userLabelProps);
     const adjustHeight = useEvent(() => {
         const textarea = inputRef.current;
         if (!textarea || !autoSize)
@@ -78,7 +83,7 @@ function TextArea(props, ref) {
         resizeObserver.observe(inputRef?.current);
         return () => resizeObserver.disconnect();
     }, [autoSize, inputRef?.current]);
-    return (_jsx(TextInputBase, { ref: ref, ...otherProps, multiLine: true, inputRef: inputRef, labelProps: labelProps, inputProps: inputProps, isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired, rows: rows }));
+    return (_jsx(TextInputBase, { ref: ref, ...otherProps, multiLine: true, inputRef: inputRef, labelProps: mergedLabelProps, inputProps: { ...inputProps, 'data-input-type': 'textarea' }, isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired, rows: rows }));
 }
 /**
  * TextInputs are text inputs that allow users to input custom text entries

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.91.0
+ * @cube-dev/ui-kit v0.92.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.91.0
+ * @cube-dev/ui-kit v0.92.1
  * Released under the MIT license.
  */
 
@@ -9,6 +9,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, useRef } from 'react';
 import { useTextField } from 'react-aria';
 import { useProviderProps } from '../../../provider';
+import { mergeProps } from '../../../utils/react';
 import { castNullableStringValue, } from '../../../utils/react/nullableValue';
 import { useFieldProps } from '../../form';
 import { TextInputBase } from './TextInputBase';
@@ -23,10 +24,13 @@ export const TextInput = forwardRef(function TextInput(props, ref) {
             value: value?.toString() ?? '',
         }),
     });
+    let { labelProps: userLabelProps, inputRef: propsInputRef, ...restProps } = props;
     let localInputRef = useRef(null);
-    let inputRef = props.inputRef ?? localInputRef;
-    let { labelProps, inputProps } = useTextField(props, inputRef);
-    return (_jsx(TextInputBase, { ...props, ref: ref, labelProps: labelProps, inputProps: inputProps, inputRef: inputRef }));
+    let inputRef = propsInputRef ?? localInputRef;
+    let { labelProps, inputProps } = useTextField(restProps, inputRef);
+    // Merge user-provided labelProps with aria labelProps
+    const mergedLabelProps = mergeProps(labelProps, userLabelProps);
+    return (_jsx(TextInputBase, { ...restProps, ref: ref, labelProps: mergedLabelProps, inputProps: inputProps, inputRef: inputRef }));
 });
 /**
  * TextInputs are text inputs that allow users to input custom text entries

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.91.0
+ * @cube-dev/ui-kit v0.92.1
  * Released under the MIT license.
  */
 
@@ -232,7 +232,7 @@ function _TextInputBase(props, ref) {
             fontFamily: 'text-security-disc',
         }
         : {};
-    const textField = (_jsxs(InputWrapperElement, { ref: wrapperRef, mods: modifiers, "data-size": size, styles: wrapperStyles, ...wrapperProps, children: [prefix ? _jsx("div", { "data-element": "Prefix", children: prefix }) : null, _jsx(InputElement, { qa: qa || 'Input', 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] }));
+    const textField = (_jsxs(InputWrapperElement, { ref: wrapperRef, mods: modifiers, "data-size": size, styles: wrapperStyles, ...wrapperProps, children: [prefix ? _jsx("div", { "data-element": "Prefix", children: prefix }) : null, _jsx(InputElement, { qa: qa || 'Input', as: ElementType, "data-input-type": "textinput", ...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,
         form: undefined,

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.91.0
+ * @cube-dev/ui-kit v0.92.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.91.0
+ * @cube-dev/ui-kit v0.92.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', form, } = props;
+    let { qa, 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);
@@ -151,7 +151,7 @@ function TextInputMapper(props, ref) {
                         } })] }, 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, size: size, icon: _jsx(PlusIcon, {}), onPress: addNewMapping, children: actionLabel ? actionLabel : 'Mapping' })] })) : null] }));
+    const element = (_jsxs(Flow, { ref: ref, gap: "1x", "data-qa": qa || 'TextInputMapper', "data-input-type": "textinputmapper", 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) {

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

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

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

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