@cube-dev/ui-kit 0.0.0-canary-2a1d026 → 0.0.0-canary-70f4106

package/es/components/forms/PasswordInput/PasswordInput.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-2a1d026
+ * @cube-dev/ui-kit v0.0.0-canary-70f4106
  * Released under the MIT license.
  */
 
@@ -9,22 +9,13 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { forwardRef, useCallback, useRef, useState } from 'react';
 import { useTextField } from '@react-aria/textfield';
 import { EyeInvisibleOutlined, EyeOutlined } from '@ant-design/icons';
-import { TextInputBase } from '../TextInput';
+import { TextInputBase, } from '../TextInput/TextInputBase';
 import { useProviderProps } from '../../../provider';
 import { Button } from '../../actions';
 import { castNullableStringValue, } from '../../../utils/react/nullableValue';
-import { useFieldProps } from '../Form';
 function PasswordInput(props, ref) {
     props = castNullableStringValue(props);
-    props = useProviderProps(props);
-    props = useFieldProps(props, {
-        defaultValidationTrigger: 'onBlur',
-        valuePropsMapper: ({ value, onChange }) => ({
-            value: value?.toString() ?? '',
-            onChange,
-        }),
-    });
-    const { suffix, multiLine, ...otherProps } = props;
+    let { suffix, multiLine, ...otherProps } = useProviderProps({ ...props });
     let [type, setType] = useState('password');
     let inputRef = useRef(null);
     let { labelProps, inputProps } = useTextField({
@@ -34,8 +25,8 @@ function PasswordInput(props, ref) {
     const toggleType = useCallback((e) => {
         setType((type) => (type === 'password' ? 'text' : 'password'));
     }, []);
-    const wrappedSuffix = (_jsxs(_Fragment, { children: [suffix, _jsx(Button, { excludeFromTabOrder: true, type: "neutral", htmlType: "button", placeSelf: "stretch", height: "auto", radius: "right", width: "4x", label: "Toggle masking", icon: type === 'password' ? _jsx(EyeInvisibleOutlined, {}) : _jsx(EyeOutlined, {}), onPress: toggleType })] }));
-    return (_jsx(TextInputBase, { ref: ref, labelProps: labelProps, inputProps: inputProps, inputRef: inputRef, inputStyles: { paddingRight: '4x' }, type: type, suffixPosition: "after", suffix: wrappedSuffix, multiLine: multiLine, ...otherProps }));
+    const wrappedSuffix = (_jsxs(_Fragment, { children: [suffix, _jsx(Button, { excludeFromTabOrder: true, type: "neutral", htmlType: "button", placeSelf: "stretch", height: "auto", radius: "right", width: "4x", label: "Toggle masking", icon: type === 'password' ? _jsx(EyeInvisibleOutlined, {}, void 0) : _jsx(EyeOutlined, {}, void 0), onPress: toggleType }, void 0)] }, void 0));
+    return (_jsx(TextInputBase, { ref: ref, labelProps: labelProps, inputProps: inputProps, inputRef: inputRef, inputStyles: { paddingRight: '4x' }, type: type, suffixPosition: "after", suffix: wrappedSuffix, multiLine: multiLine, ...otherProps }, void 0));
 }
 /**
  * PasswordInputs are password inputs that allow users to input passwords or code entries
@@ -43,15 +34,7 @@ function PasswordInput(props, ref) {
  * communicate the entry requirements.
  */
 const _PasswordInput = forwardRef(PasswordInput);
-/**
- * @legacy should be removed with legacy <Field />
- */
-Object.defineProperty(_PasswordInput, 'cubeInputType', {
-    enumerable: false,
-    configurable: false,
-    writable: false,
-    value: 'Text',
-});
+_PasswordInput.cubeInputType = 'Text';
 export { _PasswordInput as PasswordInput };
 
         

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-2a1d026
+ * @cube-dev/ui-kit v0.0.0-canary-70f4106
  * Released under the MIT license.
  */
 
@@ -16,7 +16,7 @@ import { mergeProps } from '../../../utils/react';
 import { useProviderProps } from '../../../provider';
 import { INLINE_LABEL_STYLES } from '../Label';
 import { HiddenInput } from '../../HiddenInput';
-import { useFieldProps } from '../Form';
+import { useFormProps } from '../Form';
 import { RadioGroup } from './RadioGroup';
 import { useRadioProvider } from './context';
 const RadioWrapperElement = tasty({
@@ -107,17 +107,17 @@ const RadioNormalElement = tasty({
         },
     },
 });
-const RadioCircleElement = _jsx("div", { "data-element": "RadioCircle" });
+const RadioCircleElement = _jsx("div", { "data-element": "RadioCircle" }, void 0);
 const RadioLabelElement = tasty({
     qa: 'RadioLabel',
     styles: INLINE_LABEL_STYLES,
 });
 function Radio(props, ref) {
     props = useProviderProps(props);
-    props = useFieldProps(props, { defaultValidationTrigger: 'onChange' });
+    props = useFormProps(props);
     let { qa, isDisabled, validationState, children, label, autoFocus, labelStyles, labelProps, inputStyles, type = 'radio', 'aria-label': ariaLabel, ...otherProps } = props;
     let isButton = type === 'button';
-    label = label ?? children;
+    label = label || children;
     let styles = extractStyles(otherProps, OUTER_STYLES);
     const RadioElement = isButton ? RadioButtonElement : RadioNormalElement;
     labelStyles = {
@@ -141,22 +141,22 @@ function Radio(props, ref) {
             invalid: validationState === 'invalid',
             hovered: isHovered,
             button: isButton,
-        }, "data-type": type, children: [_jsx(HiddenInput, { "data-qa": qa || 'Radio', "aria-label": ariaLabel, ...mergeProps(inputProps, focusProps), ref: inputRef, isButton: isButton }), _jsx(RadioElement, { mods: {
+        }, "data-type": type, children: [_jsx(HiddenInput, { "data-qa": qa || 'Radio', "aria-label": ariaLabel, ...mergeProps(inputProps, focusProps), ref: inputRef, isButton: isButton }, void 0), _jsx(RadioElement, { mods: {
                     checked: inputProps.checked,
                     invalid: validationState === 'invalid',
                     valid: validationState === 'valid',
                     disabled: isDisabled,
                     hovered: isHovered,
                     focused: isFocused,
-                }, "data-type": type, styles: inputStyles, children: !isButton ? RadioCircleElement : children }), label && !isButton && (_jsx(RadioLabelElement, { mods: {
+                }, "data-type": type, styles: inputStyles, children: !isButton ? RadioCircleElement : children }, void 0), label && !isButton && (_jsx(RadioLabelElement, { mods: {
                     invalid: validationState === 'invalid',
                     valid: validationState === 'valid',
                     disabled: isDisabled,
-                }, ...filterBaseProps(labelProps), children: label }))] }));
+                }, ...filterBaseProps(labelProps), children: label }, void 0))] }, void 0));
 }
 function RadioButton(props, ref) {
     const Radio = _Radio;
-    return _jsx(Radio, { ...props, ref: ref, type: "button" });
+    return _jsx(Radio, { ...props, ref: ref, type: "button" }, void 0);
 }
 /**
  * Radio buttons allow users to select a single option from a list of mutually exclusive options.
@@ -172,15 +172,6 @@ const __Radio = Object.assign(_Radio, {
     Group: RadioGroup,
     Button: _RadioButton,
 });
-/**
- * @legacy should be removed with legacy <Field />
- */
-Object.defineProperty(_Radio, 'cubeInputType', {
-    enumerable: false,
-    configurable: false,
-    writable: false,
-    value: 'Radio',
-});
 export { __Radio as Radio };
 export { _RadioButton as RadioButton };
 

package/es/components/forms/RadioGroup/RadioGroup.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-2a1d026
+ * @cube-dev/ui-kit v0.0.0-canary-70f4106
  * Released under the MIT license.
  */
 
@@ -11,7 +11,7 @@ import { useDOMRef } from '@react-spectrum/utils';
 import { useRadioGroup } from '@react-aria/radio';
 import { useRadioGroupState } from '@react-stately/radio';
 import { useProviderProps } from '../../../provider';
-import { FormContext, useFieldProps } from '../Form';
+import { FormContext, useFormProps } from '../Form';
 import { BLOCK_STYLES, extractStyles, OUTER_STYLES, tasty, } from '../../../tasty';
 import { FieldWrapper } from '../FieldWrapper';
 import { castNullableStringValue, } from '../../../utils/react/nullableValue';
@@ -32,7 +32,7 @@ const RadioGroupElement = tasty({
 function RadioGroup(props, ref) {
     props = castNullableStringValue(props);
     props = useProviderProps(props);
-    props = useFieldProps(props, { defaultValidationTrigger: 'onChange' });
+    props = useFormProps(props);
     let { isDisabled, isRequired, necessityIndicator, label, extra, labelPosition = 'top', validationState, children, orientation = 'vertical', message, description, labelStyles, requiredMark = true, tooltip, isHidden, styles, groupStyles, insideForm, labelSuffix, ...otherProps } = props;
     let domRef = useDOMRef(ref);
     styles = extractStyles(otherProps, OUTER_STYLES, styles);
@@ -47,7 +47,7 @@ function RadioGroup(props, ref) {
                 isRequired,
                 validationState,
                 isDisabled,
-            }, children: _jsx(RadioContext.Provider, { value: state, children: children }) }) }));
+            }, children: _jsx(RadioContext.Provider, { value: state, children: children }, void 0) }, void 0) }, void 0));
     return (_jsx(FieldWrapper, { ...{
             labelPosition,
             label,
@@ -69,22 +69,14 @@ function RadioGroup(props, ref) {
             Component: radioGroup,
             ref: domRef,
             labelSuffix,
-        } }));
+        } }, void 0));
 }
 /**
  * Radio groups allow users to select a single option from a list of mutually exclusive options.
  * All possible options are exposed up front for users to compare.
  */
 const _RadioGroup = forwardRef(RadioGroup);
-/**
- * @legacy should be removed with legacy <Field />
- */
-Object.defineProperty(_RadioGroup, 'cubeInputType', {
-    enumerable: false,
-    configurable: false,
-    writable: false,
-    value: 'RadioGroup',
-});
+_RadioGroup.cubeInputType = 'RadioGroup';
 export { _RadioGroup as RadioGroup };
 
         

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-2a1d026
+ * @cube-dev/ui-kit v0.0.0-canary-70f4106
  * Released under the MIT license.
  */
 

package/es/components/forms/SearchInput/SearchInput.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-2a1d026
+ * @cube-dev/ui-kit v0.0.0-canary-70f4106
  * Released under the MIT license.
  */
 
@@ -18,7 +18,7 @@ import { ariaToCubeButtonProps } from '../../../utils/react/mapProps';
 import { castNullableStringValue, } from '../../../utils/react/nullableValue';
 import { tasty } from '../../../tasty';
 const ClearButton = tasty(Button, {
-    icon: _jsx(CloseOutlined, {}),
+    icon: _jsx(CloseOutlined, {}, void 0),
     styles: {
         radius: 'right (1r - 1bw)',
         width: '4x',
@@ -41,9 +41,9 @@ export const SearchInput = forwardRef(function SearchInput(props, ref) {
     }, [combinedRef, value]);
     let state = useSearchFieldState(props);
     let { inputProps, clearButtonProps } = useSearchField(props, state, inputRef);
-    return (_jsx(TextInputBase, { ref: ref, inputProps: inputProps, inputRef: inputRef, type: "search", icon: _jsx(SearchOutlined, {}), suffixPosition: "after", suffix: isClearable &&
+    return (_jsx(TextInputBase, { ref: ref, inputProps: inputProps, inputRef: inputRef, type: "search", icon: _jsx(SearchOutlined, {}, void 0), suffixPosition: "after", suffix: isClearable &&
             state.value !== '' &&
-            !props.isReadOnly && (_jsx(ClearButton, { type: validationState === 'invalid' ? 'clear' : 'neutral', theme: validationState === 'invalid' ? 'danger' : undefined, ...ariaToCubeButtonProps(clearButtonProps) })), ...props }));
+            !props.isReadOnly && (_jsx(ClearButton, { type: validationState === 'invalid' ? 'clear' : 'neutral', theme: validationState === 'invalid' ? 'danger' : undefined, ...ariaToCubeButtonProps(clearButtonProps) }, void 0)), ...props }, void 0));
 });
 
         

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-2a1d026
+ * @cube-dev/ui-kit v0.0.0-canary-70f4106
  * Released under the MIT license.
  */
 
@@ -18,7 +18,7 @@ export function Gradation(props) {
     };
     return (_jsx(SliderGradationElement, { children: values.map((value, idx) => (_jsx(SliderGradeElement, { mods: {
                 active: getIsActive(value, idx),
-            }, children: value }, value))) }));
+            }, children: value }, value))) }, void 0));
 }
 
         

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-2a1d026
+ * @cube-dev/ui-kit v0.0.0-canary-70f4106
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-2a1d026
+ * @cube-dev/ui-kit v0.0.0-canary-70f4106
  * Released under the MIT license.
  */
 
@@ -18,8 +18,8 @@ const INTL_MESSAGES = {
 function RangeSlider(props, ref) {
     let { isDisabled, styles, gradation, ...otherProps } = props;
     return (_jsx(SliderBase, { ...otherProps, children: ({ trackRef, inputRef, state }) => {
-            return (_jsxs(_Fragment, { children: [_jsx(Gradation, { state: state, ranges: [0, 1], values: gradation }), _jsx(SliderTrack, { state: state, isDisabled: isDisabled }), _jsx(SliderThumb, { index: 0, "aria-label": INTL_MESSAGES['minimum'], state: state, inputRef: inputRef, trackRef: trackRef, isDisabled: isDisabled }), _jsx(SliderThumb, { index: 1, "aria-label": INTL_MESSAGES['maximum'], state: state, inputRef: inputRef, trackRef: trackRef, isDisabled: isDisabled })] }));
-        } }));
+            return (_jsxs(_Fragment, { children: [_jsx(Gradation, { state: state, ranges: [0, 1], values: gradation }, void 0), _jsx(SliderTrack, { state: state, isDisabled: isDisabled }, void 0), _jsx(SliderThumb, { index: 0, "aria-label": INTL_MESSAGES['minimum'], state: state, inputRef: inputRef, trackRef: trackRef, isDisabled: isDisabled }, void 0), _jsx(SliderThumb, { index: 1, "aria-label": INTL_MESSAGES['maximum'], state: state, inputRef: inputRef, trackRef: trackRef, isDisabled: isDisabled }, void 0)] }, void 0));
+        } }, void 0));
 }
 const _RangeSlider = forwardRef(RangeSlider);
 const __RangeSlider = Object.assign(_RangeSlider, {

package/es/components/forms/Slider/Slider.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-2a1d026
+ * @cube-dev/ui-kit v0.0.0-canary-70f4106
  * Released under the MIT license.
  */
 
@@ -25,13 +25,12 @@ function Slider(props, ref) {
         onChangeEnd: (v) => {
             onChangeEnd?.(v[0]);
         },
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        getValueLabel: getValueLabel ? ([v]) => getValueLabel(v) : undefined,
+        getValueLabel: getValueLabel ? ([v]) => getValueLabel?.(v) : undefined,
     };
     styles = extractStyles(otherProps, OUTER_STYLES, styles);
     return (_jsx(SliderBase, { ...otherProps, ...baseProps, orientation: orientation, styles: styles, children: ({ trackRef, inputRef, state }) => {
-            return (_jsxs(_Fragment, { children: [_jsx(Gradation, { state: state, ranges: [0, 1], values: gradation }), _jsx(SliderTrack, { state: state, isDisabled: isDisabled, orientation: orientation }), _jsx(SliderThumb, { index: 0, state: state, inputRef: inputRef, trackRef: trackRef, isDisabled: isDisabled })] }));
-        } }));
+            return (_jsxs(_Fragment, { children: [_jsx(Gradation, { state: state, ranges: [0, 1], values: gradation }, void 0), _jsx(SliderTrack, { state: state, isDisabled: isDisabled, orientation: orientation }, void 0), _jsx(SliderThumb, { index: 0, state: state, inputRef: inputRef, trackRef: trackRef, isDisabled: isDisabled }, void 0)] }, void 0));
+        } }, void 0));
 }
 const _Slider = forwardRef(Slider);
 const __Slider = Object.assign(_Slider, {

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-2a1d026
+ * @cube-dev/ui-kit v0.0.0-canary-70f4106
  * Released under the MIT license.
  */
 
@@ -11,7 +11,7 @@ import { useFocusableRef } from '@react-spectrum/utils';
 import { useSliderState } from '@react-stately/slider';
 import { useSlider } from '@react-aria/slider';
 import { useNumberFormatter } from '@react-aria/i18n';
-import { FieldWrapper } from '../FieldWrapper';
+import { FieldWrapper } from '../../forms/FieldWrapper';
 import { extractStyles, OUTER_STYLES, tasty } from '../../../tasty';
 import { useFormProps } from '../Form';
 import { Text } from '../../content/Text';
@@ -95,7 +95,7 @@ function SliderBase(allProps, ref) {
                     width: `${maxLabelLength + 1}ch`,
                     minWidth: `${maxLabelLength + 1}ch`,
                 }
-                : undefined, children: displayValue }));
+                : undefined, children: displayValue }, void 0));
     const sliderField = (_jsx(SliderElement, { ref: domRef, ...groupProps, mods: {
             'side-label': labelPosition === 'side',
             horizontal: orientation === 'horizontal',
@@ -105,7 +105,7 @@ function SliderBase(allProps, ref) {
                 trackRef,
                 inputRef,
                 state,
-            }) }) }));
+            }) }, void 0) }, void 0));
     styles = extractStyles(otherProps, OUTER_STYLES, styles);
     return (_jsx(FieldWrapper, { ...{
             labelPosition,
@@ -124,7 +124,7 @@ function SliderBase(allProps, ref) {
             labelSuffix,
             Component: sliderField,
             ref: ref,
-        } }));
+        } }, void 0));
 }
 const _SliderBase = forwardRef(SliderBase);
 export { _SliderBase as SliderBase };

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-2a1d026
+ * @cube-dev/ui-kit v0.0.0-canary-70f4106
  * Released under the MIT license.
  */
 
@@ -28,7 +28,7 @@ export function SliderInput(props) {
     const maxLength = typeof max !== 'undefined' ? String(max).length : undefined;
     return (_jsx(NumberInput, { insideForm: false, labelPosition: "top", ...otherProps, hideStepper: true, size: "small", wrapperStyles: {
             width: inputWidth,
-        }, textAlign: "center", formatOptions: formatOptions, value: value, minValue: state.getThumbMinValue(index), maxValue: state.getThumbMaxValue(index), maxLength: maxLength, onChange: onChange }));
+        }, textAlign: "center", formatOptions: formatOptions, value: value, minValue: state.getThumbMinValue(index), maxValue: state.getThumbMaxValue(index), maxLength: maxLength, onChange: onChange }, void 0));
 }
 
         

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-2a1d026
+ * @cube-dev/ui-kit v0.0.0-canary-70f4106
  * Released under the MIT license.
  */
 
@@ -26,7 +26,7 @@ export function SliderThumb(props) {
             dragged: isDragging,
             focused: !isDragging && isFocused,
             disabled: isDisabled,
-        }, ...mergeProps(thumbProps, hoverProps), role: "presentation", children: _jsx(VisuallyHidden, { children: _jsx("input", { ref: inputRef, ...inputProps }) }) }));
+        }, ...mergeProps(thumbProps, hoverProps), role: "presentation", children: _jsx(VisuallyHidden, { children: _jsx("input", { ref: inputRef, ...inputProps }, void 0) }, void 0) }, void 0));
 }
 
         

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-2a1d026
+ * @cube-dev/ui-kit v0.0.0-canary-70f4106
  * Released under the MIT license.
  */
 
@@ -14,7 +14,7 @@ export function SliderTrack(props) {
         disabled: isDisabled,
         horizontal: orientation === 'horizontal',
     }), [isDisabled]);
-    return _jsx(SliderTrackContainerElement, { mods: mods });
+    return _jsx(SliderTrackContainerElement, { mods: mods }, void 0);
 }
 
         

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-2a1d026
+ * @cube-dev/ui-kit v0.0.0-canary-70f4106
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-2a1d026
+ * @cube-dev/ui-kit v0.0.0-canary-70f4106
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-2a1d026
+ * @cube-dev/ui-kit v0.0.0-canary-70f4106
  * Released under the MIT license.
  */
 

package/es/components/forms/Switch/Switch.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-2a1d026
+ * @cube-dev/ui-kit v0.0.0-canary-70f4106
  * Released under the MIT license.
  */
 
@@ -18,10 +18,10 @@ import { useFocus } from '../../../utils/react/interactions';
 import { mergeProps } from '../../../utils/react';
 import { HiddenInput } from '../../HiddenInput';
 import { INLINE_LABEL_STYLES, LABEL_STYLES } from '../Label';
+import { useFormProps } from '../Form/Form';
 import { Text } from '../../content/Text';
 import { FieldWrapper } from '../FieldWrapper';
 import { castNullableIsSelected, } from '../../../utils/react/nullableValue';
-import { useFieldProps } from '../Form';
 const SwitchWrapperElement = tasty({
     qa: 'SwitchWrapper',
     styles: {
@@ -96,21 +96,10 @@ const SwitchElement = tasty({
         },
     },
 });
-/**
- * Switches allow users to turn an individual option on or off.
- * They are usually used to activate or deactivate a specific setting.
- */
-export const Switch = forwardRef(function Switch(props, ref) {
+function Switch(props, ref) {
     props = castNullableIsSelected(props);
     props = useProviderProps(props);
-    props = useFieldProps(props, {
-        defaultValidationTrigger: 'onChange',
-        valuePropsMapper: ({ value, onChange }) => ({
-            isSelected: value != null ? value : false,
-            isIndeterminate: false,
-            onChange: onChange,
-        }),
-    });
+    props = useFormProps(props);
     let { qa, isDisabled = false, autoFocus, children, label, extra, labelProps, labelStyles, isLoading, insideForm, validationState, message, description, labelPosition, inputStyles, requiredMark = true, tooltip, labelSuffix, ...otherProps } = props;
     let styles = extractStyles(props, OUTER_STYLES);
     inputStyles = extractStyles(props, BLOCK_STYLES, inputStyles);
@@ -132,7 +121,7 @@ export const Switch = forwardRef(function Switch(props, ref) {
         hovered: isHovered,
         focused: isFocused,
     };
-    const switchField = (_jsxs(SwitchWrapperElement, { mods: mods, children: [_jsx(HiddenInput, { "data-qa": "HiddenInput", ...mergeProps(inputProps, focusProps), ref: inputRef }), _jsx(SwitchElement, { qa: qa || 'Switch', mods: mods, styles: inputStyles, children: _jsx("div", { "data-element": "Thumb", "aria-hidden": "true" }) }), children ? _jsx(Text, { children: children }) : null] }));
+    const switchField = (_jsxs(SwitchWrapperElement, { mods: mods, children: [_jsx(HiddenInput, { "data-qa": "HiddenInput", ...mergeProps(inputProps, focusProps), ref: inputRef }, void 0), _jsx(SwitchElement, { qa: qa || 'Switch', mods: mods, styles: inputStyles, children: _jsx("div", { "data-element": "Thumb", "aria-hidden": "true" }, void 0) }, void 0), children ? _jsx(Text, { children: children }, void 0) : null] }, void 0));
     if (insideForm) {
         return (_jsx(FieldWrapper, { ...{
                 as: 'label',
@@ -152,11 +141,18 @@ export const Switch = forwardRef(function Switch(props, ref) {
                 labelSuffix,
                 Component: switchField,
                 ref: domRef,
-            } }));
+            } }, void 0));
     }
     return (_jsxs(SwitchLabelElement, { styles: styles, mods: mods, ...hoverProps, ...filterBaseProps(otherProps), ref: domRef, children: [switchField, label ? (_jsxs(Element, { styles: labelStyles, mods: {
                     disabled: isDisabled,
-                }, ...filterBaseProps(labelProps), children: [label, isLoading ? (_jsxs(_Fragment, { children: [label ? _jsx(_Fragment, { children: "\u00A0" }) : null, _jsx(LoadingOutlined, {})] })) : null] })) : null] }));
-});
+                }, ...filterBaseProps(labelProps), children: [label, isLoading ? (_jsxs(_Fragment, { children: [label ? _jsx(_Fragment, { children: "\u00A0" }, void 0) : null, _jsx(LoadingOutlined, {}, void 0)] }, void 0)) : null] }, void 0)) : null] }, void 0));
+}
+/**
+ * Switches allow users to turn an individual option on or off.
+ * They are usually used to activate or deactivate a specific setting.
+ */
+let _Switch = forwardRef(Switch);
+_Switch.cubeInputType = 'Checkbox';
+export { _Switch as Switch };
 
         

package/es/components/forms/TextArea/TextArea.js

@@ -1,43 +1,30 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-2a1d026
+ * @cube-dev/ui-kit v0.0.0-canary-70f4106
  * Released under the MIT license.
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useRef } from 'react';
+import { forwardRef, useCallback, useRef } from 'react';
 import { useControlledState } from '@react-stately/utils';
 import { useTextField } from '@react-aria/textfield';
-import { TextInputBase } from '../TextInput';
+import { TextInputBase, } from '../TextInput/TextInputBase';
 import { useProviderProps } from '../../../provider';
 import { castNullableStringValue, } from '../../../utils/react/nullableValue';
 import { chain, useLayoutEffect } from '../../../utils/react';
-import { useFieldProps } from '../Form';
-import { useEvent } from '../../../_internal';
-/**
- * TextInputs are text inputs that allow users to input custom text entries
- * with a keyboard. Various decorations can be displayed around the field to
- * communicate the entry requirements.
- */
-export const TextArea = forwardRef(function TextArea(props, ref) {
+function TextArea(props, ref) {
     props = castNullableStringValue(props);
     props = useProviderProps(props);
-    props = useFieldProps(props, {
-        defaultValidationTrigger: 'onBlur',
-        valuePropsMapper: ({ value, onChange }) => ({
-            onChange,
-            value: value?.toString() ?? '',
-        }),
-    });
-    const { autoSize = false, isDisabled = false, isReadOnly = false, isRequired = false, onChange, rows = 3, ...otherProps } = props;
-    const [inputValue, setInputValue] = useControlledState(props.value, props.defaultValue, () => { });
-    const inputRef = useRef(null);
-    const onHeightChange = useEvent(() => {
+    let { autoSize = false, isDisabled = false, isReadOnly = false, isRequired = false, onChange, rows, ...otherProps } = props;
+    rows = rows || 3;
+    let [inputValue, setInputValue] = useControlledState(props.value, props.defaultValue, () => { });
+    let inputRef = useRef(null);
+    let onHeightChange = useCallback(() => {
         if (autoSize && inputRef.current) {
-            const input = inputRef.current;
-            const prevAlignment = input.style.alignSelf;
-            const computedStyle = getComputedStyle(input);
+            let input = inputRef.current;
+            let prevAlignment = input.style.alignSelf;
+            let computedStyle = getComputedStyle(input);
             input.style.alignSelf = 'start';
             input.style.height = 'auto';
             input.style.height = input.scrollHeight
@@ -48,16 +35,26 @@ export const TextArea = forwardRef(function TextArea(props, ref) {
                     2}px`;
             input.style.alignSelf = prevAlignment;
         }
-    });
+    }, [inputRef]);
     useLayoutEffect(() => {
-        onHeightChange();
-    }, [onHeightChange, inputValue]);
-    const { labelProps, inputProps } = useTextField({
+        if (inputRef.current) {
+            onHeightChange();
+        }
+    }, [onHeightChange, inputValue, inputRef]);
+    let { labelProps, inputProps } = useTextField({
         ...props,
         onChange: chain(onChange, setInputValue),
         inputElementType: 'textarea',
     }, inputRef);
-    return (_jsx(TextInputBase, { ...otherProps, ref: ref, multiLine: true, inputRef: inputRef, labelProps: labelProps, inputProps: inputProps, isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired, rows: rows }));
-});
+    return (_jsx(TextInputBase, { ...otherProps, ref: ref, multiLine: true, inputRef: inputRef, labelProps: labelProps, inputProps: inputProps, isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired, rows: rows }, void 0));
+}
+/**
+ * TextInputs are text inputs that allow users to input custom text entries
+ * with a keyboard. Various decorations can be displayed around the field to
+ * communicate the entry requirements.
+ */
+const _TextArea = forwardRef(TextArea);
+_TextArea.cubeInputType = 'Text';
+export { _TextArea as TextArea };