@cube-dev/ui-kit 0.22.0 → 0.22.2

package/cjs/components/forms/Form/Field.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.22.0
+ * @cube-dev/ui-kit v0.22.2
  * Released under the MIT license.
  */
 
@@ -75,7 +75,7 @@ function getValueProps(type, value, onChange, allowsCustomValue) {
 }
 function Field(props) {
     const allProps = (0, Form_1.useFormProps)(props);
-    let { children, form, label, extra, validationState, necessityLabel, necessityIndicator, message, description, tooltip, isHidden, isDisabled, isLoading, styles, labelPosition = 'top', labelStyles, labelSuffix, } = allProps;
+    let { children, form, label, extra, necessityLabel, necessityIndicator, description, tooltip, isHidden, isDisabled, isLoading, styles, labelPosition = 'top', labelStyles, labelSuffix, } = allProps;
     if (typeof children === 'function') {
         children = children(form);
     }
@@ -84,11 +84,11 @@ function Field(props) {
     const __props = (0, use_field_1.useField)(allProps, {
         defaultValidationTrigger: getDefaultValidateTrigger(inputType),
     });
-    const { field, isRequired, name, id } = __props;
+    const { validationState, message, isRequired, name, id } = __props;
     if (!child)
         return null;
     if (__props.nonInput) {
-        return ((0, jsx_runtime_1.jsx)(LegacyFieldProvider, { children: (0, jsx_runtime_1.jsx)(FieldWrapper_1.FieldWrapper, { isHidden: isHidden, isDisabled: isDisabled, validationState: validationState, necessityIndicator: necessityIndicator, necessityLabel: necessityLabel, isRequired: isRequired, label: label, extra: extra, tooltip: tooltip, message: message, description: description, Component: child, styles: styles, labelPosition: labelPosition, labelStyles: labelStyles, labelSuffix: labelSuffix }) }));
+        return ((0, jsx_runtime_1.jsx)(LegacyFieldProvider, { children: (0, jsx_runtime_1.jsx)(FieldWrapper_1.FieldWrapper, { isHidden: isHidden, isDisabled: isDisabled, validationState: __props.validationState, necessityIndicator: necessityIndicator, necessityLabel: necessityLabel, isRequired: isRequired, label: label, extra: extra, tooltip: tooltip, message: message, description: description, Component: child, styles: styles, labelPosition: labelPosition, labelStyles: labelStyles, labelSuffix: labelSuffix }, void 0) }, void 0));
     }
     if (!form) {
         (0, warnings_1.warn)('Form Field requires declared form instance if field name is specified');
@@ -100,7 +100,7 @@ function Field(props) {
                 label: name,
                 name,
                 id,
-            })) }));
+            })) }, void 0));
     }
     const newProps = {
         id,
@@ -140,18 +140,10 @@ function Field(props) {
     if (isLoading != null) {
         newProps.isLoading = isLoading;
     }
-    if (field?.errors?.length) {
-        if (!validationState) {
-            newProps.validationState = 'invalid';
-        }
-        if (!message) {
-            newProps.message = field.errors[0];
-        }
-    }
     Object.assign(newProps, getValueProps(inputType, __props.field?.inputValue, __props.onChange, child.props.allowsCustomValue));
     const { onChange, onSelectionChange, ...childProps } = child.props;
     // onChange event passed to the child should be executed after Form onChange logic
-    return ((0, jsx_runtime_1.jsx)(LegacyFieldProvider, { children: (0, react_1.cloneElement)(child, (0, react_2.mergeProps)(childProps, newProps, onChange ? { onChange: __props.onChange } : {}, onSelectionChange ? { onSelectionChange: __props.onChange } : {})) }));
+    return ((0, jsx_runtime_1.jsx)(LegacyFieldProvider, { children: (0, react_1.cloneElement)(child, (0, react_2.mergeProps)(childProps, newProps, onChange ? { onChange: __props.onChange } : {}, onSelectionChange ? { onSelectionChange: __props.onChange } : {})) }, void 0));
 }
 exports.Field = Field;
 const LegacyFieldContext = (0, react_1.createContext)({
@@ -159,7 +151,7 @@ const LegacyFieldContext = (0, react_1.createContext)({
 });
 function LegacyFieldProvider(props) {
     const value = (0, react_1.useMemo)(() => ({ insideLegacyField: true }), []);
-    return ((0, jsx_runtime_1.jsx)(LegacyFieldContext.Provider, { value: value, children: props.children }));
+    return ((0, jsx_runtime_1.jsx)(LegacyFieldContext.Provider, { value: value, children: props.children }, void 0));
 }
 function useInsideLegacyField() {
     const { insideLegacyField } = (0, react_1.useContext)(LegacyFieldContext);

package/cjs/components/forms/Form/Form.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.22.0
+ * @cube-dev/ui-kit v0.22.2
  * Released under the MIT license.
  */
 
@@ -15,7 +15,7 @@ const provider_1 = require("../../../provider");
 const tasty_1 = require("../../../tasty");
 const react_2 = require("../../../utils/react");
 const promise_1 = require("../../../utils/promise");
-const useForm_1 = require("./useForm");
+const use_form_1 = require("./use-form");
 exports.FormContext = (0, react_1.createContext)({});
 const FormElement = (0, tasty_1.tasty)({
     as: 'form',
@@ -51,7 +51,7 @@ const formPropNames = new Set([
 ]);
 function Form(props, ref) {
     props = (0, provider_1.useProviderProps)(props);
-    let { qa, name, children, labelPosition, orientation, isRequired, necessityIndicator, isDisabled, isReadOnly, validationState, labelStyles, validateTrigger, defaultValues, onValuesChange, requiredMark = true, form, labelWidth, onSubmit, onSubmitFailed, ...otherProps } = props;
+    let { qa, name, children, labelPosition, orientation, isRequired, necessityIndicator, isDisabled, isReadOnly, validationState, labelStyles, validateTrigger, showValid, defaultValues, onValuesChange, requiredMark = true, form, labelWidth, onSubmit, onSubmitFailed, ...otherProps } = props;
     const firstRunRef = (0, react_1.useRef)(true);
     const isHorizontal = orientation === 'horizontal';
     if (!orientation) {
@@ -110,7 +110,7 @@ function Form(props, ref) {
             // onSubmit(Object.fromEntries(new FormData(e.target).entries()));
         };
     }
-    [form] = (0, useForm_1.useForm)(form, ref && ref.current, {
+    [form] = (0, use_form_1.useForm)(form, ref && ref.current, {
         onSubmit: onSubmitCallback,
         onValuesChange,
     });
@@ -126,6 +126,7 @@ function Form(props, ref) {
         necessityIndicator,
         validateTrigger,
         requiredMark,
+        showValid,
         form,
         submitError: form.submitError,
         idPrefix: name,
@@ -142,7 +143,7 @@ function Form(props, ref) {
             form?.setInitialFieldsValue(defaultValues);
         }
     }, [defaultValues]);
-    return ((0, jsx_runtime_1.jsx)(FormElement, { ...(0, tasty_1.filterBaseProps)(otherProps, { propNames: formPropNames }), ref: domRef, noValidate: true, styles: styles, mods: { 'has-sider': labelPosition === 'side', horizontal: isHorizontal }, onSubmit: onSubmitCallback, children: (0, jsx_runtime_1.jsx)(exports.FormContext.Provider, { value: ctx, children: (0, jsx_runtime_1.jsx)(provider_1.Provider, { insideForm: true, isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired, validationState: validationState, children: children }) }) }));
+    return ((0, jsx_runtime_1.jsx)(FormElement, { ...(0, tasty_1.filterBaseProps)(otherProps, { propNames: formPropNames }), ref: domRef, noValidate: true, styles: styles, mods: { 'has-sider': labelPosition === 'side', horizontal: isHorizontal }, onSubmit: onSubmitCallback, children: (0, jsx_runtime_1.jsx)(exports.FormContext.Provider, { value: ctx, children: (0, jsx_runtime_1.jsx)(provider_1.Provider, { insideForm: true, isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired, validationState: validationState, children: children }, void 0) }, void 0) }, void 0));
 }
 /**
  * Forms allow users to enter data that can be submitted while providing alignment and styling for form fields.

package/cjs/components/forms/Form/Submit/Submit.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.22.0
+ * @cube-dev/ui-kit v0.22.2
  * Released under the MIT license.
  */
 
@@ -19,7 +19,7 @@ exports.Submit = (0, react_1.forwardRef)(function Submit(props, ref) {
     const { form, ...otherProps } = props;
     const formData = form?.getFieldsValue() ?? {};
     const isInvalid = Object.keys(formData).some((name) => form?.isFieldInvalid(name) ?? false);
-    return ((0, jsx_runtime_1.jsx)(actions_1.Button, { ref: ref, type: "primary", htmlType: "submit", isLoading: form?.isSubmitting, isDisabled: isInvalid, ...otherProps }));
+    return ((0, jsx_runtime_1.jsx)(actions_1.Button, { ref: ref, type: "primary", htmlType: "submit", isLoading: form?.isSubmitting, isDisabled: isInvalid, ...otherProps }, void 0));
 });
 
         

package/cjs/components/forms/Form/Submit/index.js

@@ -1,18 +1,14 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.22.0
+ * @cube-dev/ui-kit v0.22.2
  * Released under the MIT license.
  */
 
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];

package/cjs/components/forms/Form/SubmitError.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.22.0
+ * @cube-dev/ui-kit v0.22.2
  * Released under the MIT license.
  */
 
@@ -24,7 +24,7 @@ const SubmitError = function SubmitError(props) {
         typeof submitError !== 'string') {
         submitError = 'Internal error';
     }
-    return ((0, jsx_runtime_1.jsx)(Alert_1.Alert, { theme: "danger", ...props, children: submitError }));
+    return ((0, jsx_runtime_1.jsx)(Alert_1.Alert, { theme: "danger", ...props, children: submitError }, void 0));
 };
 exports.SubmitError = SubmitError;
 

package/cjs/components/forms/Form/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.22.0
+ * @cube-dev/ui-kit v0.22.2
  * Released under the MIT license.
  */
 
@@ -12,12 +12,12 @@ const Field_1 = require("./Field");
 Object.defineProperty(exports, "Field", { enumerable: true, get: function () { return Field_1.Field; } });
 const SubmitError_1 = require("./SubmitError");
 Object.defineProperty(exports, "SubmitError", { enumerable: true, get: function () { return SubmitError_1.SubmitError; } });
-const useForm_1 = require("./useForm");
-Object.defineProperty(exports, "useForm", { enumerable: true, get: function () { return useForm_1.useForm; } });
+const use_form_1 = require("./use-form");
+Object.defineProperty(exports, "useForm", { enumerable: true, get: function () { return use_form_1.useForm; } });
 const Form_1 = require("./Form");
 Object.defineProperty(exports, "useFormProps", { enumerable: true, get: function () { return Form_1.useFormProps; } });
 Object.defineProperty(exports, "FormContext", { enumerable: true, get: function () { return Form_1.FormContext; } });
-const Form = Object.assign(Form_1.Form, { Item: Field_1.Field, useForm: useForm_1.useForm, SubmitError: SubmitError_1.SubmitError });
+const Form = Object.assign(Form_1.Form, { Item: Field_1.Field, useForm: use_form_1.useForm, SubmitError: SubmitError_1.SubmitError });
 exports.Form = Form;
 var use_field_1 = require("./use-field");
 Object.defineProperty(exports, "useFieldProps", { enumerable: true, get: function () { return use_field_1.useFieldProps; } });

package/cjs/components/forms/Form/types.js

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

package/cjs/components/forms/Form/use-field/index.js

@@ -1,18 +1,14 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.22.0
+ * @cube-dev/ui-kit v0.22.2
  * Released under the MIT license.
  */
 
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];

package/cjs/components/forms/Form/use-field/types.js

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

package/cjs/components/forms/Form/use-field/use-field-props.js

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

package/cjs/components/forms/Form/use-field/use-field.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.22.0
+ * @cube-dev/ui-kit v0.22.2
  * Released under the MIT license.
  */
 
@@ -35,7 +35,7 @@ function removeId(name, id) {
 }
 function useField(props, params) {
     props = (0, Form_1.useFormProps)(props);
-    let { defaultValue, id, idPrefix, name, form, rules, validateTrigger = params.defaultValidationTrigger, validationState, validationDelay, shouldUpdate, } = props;
+    let { defaultValue, id, idPrefix, name, form, rules, message, validateTrigger = params.defaultValidationTrigger, validationState, validationDelay, showValid, shouldUpdate, } = props;
     if (rules && rules.length && validationDelay) {
         rules.unshift((0, validation_1.delayValidationRule)(validationDelay));
     }
@@ -127,15 +127,21 @@ function useField(props, params) {
         form,
         field,
         nonInput,
-        validationState: validationState ?? (field?.errors?.length ? 'invalid' : undefined),
+        validationState: validationState ??
+            (field?.errors?.length
+                ? 'invalid'
+                : showValid && field?.status === 'valid'
+                    ? 'valid'
+                    : undefined),
         ...(isRequired && { isRequired }),
-        ...(field?.errors?.length && { message: field.errors[0] }),
+        message: message ?? (field?.status === 'invalid' && field?.errors?.[0]),
         onBlur: onBlurHandler,
         onChange: onChangeHandler,
     }), [
         form,
         field,
         field?.errors?.length,
+        field?.status,
         field?.inputValue,
         fieldId,
         fieldName,
@@ -144,6 +150,7 @@ function useField(props, params) {
         onChangeHandler,
         validateTrigger,
         validationState,
+        showValid,
         nonInput,
     ]);
 }

package/cjs/components/forms/Form/{useForm.js → use-form.js}

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.22.0
+ * @cube-dev/ui-kit v0.22.2
  * Released under the MIT license.
  */
 
@@ -120,6 +120,7 @@ class CubeFormInstance {
         }
         if (!inputOnly) {
             field.value = value;
+            field.status = undefined; // reset validation status
         }
         field.inputValue = value;
         if (touched) {
@@ -161,8 +162,18 @@ class CubeFormInstance {
     }
     async validateField(name) {
         const field = this.getFieldInstance(name);
-        if (!field || !field.rules)
+        if (
+        // if there are no rules for such field
+        !field ||
+            !field.rules ||
+            // or field is already validated and valid
+            field.status === 'valid') {
             return Promise.resolve();
+            // or field is already validated and invalid
+        }
+        else if (field.status === 'invalid') {
+            return Promise.reject(field.errors[0]);
+        }
         field.validating = true;
         if (!field.validationId) {
             field.validationId = 1;
@@ -180,12 +191,14 @@ class CubeFormInstance {
             if (!field.errors || field.errors.length) {
                 field.errors = [];
             }
+            field.status = 'valid';
             this.forceReRender();
         })
             .catch((err) => {
             if (field.validationId === validationId) {
                 field.errors = [err];
                 field.validating = false;
+                field.status = 'invalid';
                 this.forceReRender();
             }
             return Promise.reject([err]);
@@ -268,8 +281,10 @@ class CubeFormInstance {
             validating: false,
             touched: false,
             errors: [],
-            validation: 0,
+            validationId: 0,
             ...data,
+            // it should be impossible to define or override status value
+            status: data?.errors?.length ? 'invalid' : undefined,
         };
         if (obj) {
             // condition is here to avoid typing issues

package/cjs/components/forms/Form/validation.js

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

package/cjs/components/forms/Input/Input.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.22.0
+ * @cube-dev/ui-kit v0.22.2
  * Released under the MIT license.
  */
 
@@ -16,7 +16,7 @@ const NumberInput_1 = require("../NumberInput/NumberInput");
 const FileInput_1 = require("../FileInput/FileInput");
 const TextArea_1 = require("../TextArea/TextArea");
 exports.Input = Object.assign((0, react_1.forwardRef)(function Input(props, ref) {
-    return (0, jsx_runtime_1.jsx)(TextInput_1.TextInput, { ref: ref, ...props });
+    return (0, jsx_runtime_1.jsx)(TextInput_1.TextInput, { ref: ref, ...props }, void 0);
 }), {
     Text: TextInput_1.TextInput,
     Password: PasswordInput_1.PasswordInput,

package/cjs/components/forms/Input/index.js

@@ -1,18 +1,14 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.22.0
+ * @cube-dev/ui-kit v0.22.2
  * Released under the MIT license.
  */
 
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];

package/cjs/components/forms/Label.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.22.0
+ * @cube-dev/ui-kit v0.22.2
  * Released under the MIT license.
  */
 
@@ -19,7 +19,7 @@ const REQUIRED_ICON = ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org
         width: '.8em',
         height: '.8em',
         transform: 'rotate(-5deg)',
-    }, children: (0, jsx_runtime_1.jsx)("switch", { children: (0, jsx_runtime_1.jsx)("g", { children: (0, jsx_runtime_1.jsx)("polygon", { fill: "currentColor", points: "97.5,47.5 90.5,26.1 61.3,35.6 61.3,4.8 38.7,4.8 38.7,35.6 9.5,26.1 2.5,47.5 31.8,57 13.7,82 31.9,95.2     50,70.3 68.1,95.2 86.3,82 68.2,57" }) }) }) }));
+    }, children: (0, jsx_runtime_1.jsx)("switch", { children: (0, jsx_runtime_1.jsx)("g", { children: (0, jsx_runtime_1.jsx)("polygon", { fill: "currentColor", points: "97.5,47.5 90.5,26.1 61.3,35.6 61.3,4.8 38.7,4.8 38.7,35.6 9.5,26.1 2.5,47.5 31.8,57 13.7,82 31.9,95.2     50,70.3 68.1,95.2 86.3,82 68.2,57" }, void 0) }, void 0) }, void 0) }, void 0));
 const INTL_MESSAGES = {
     '(required)': '(required)',
     '(optional)': '(optional)',
@@ -61,7 +61,7 @@ function Label(props, ref) {
         : formatMessage('(optional)');
     let icon = ((0, jsx_runtime_1.jsx)("span", { "aria-label": includeNecessityIndicatorInAccessibilityName
             ? formatMessage('(required)')
-            : undefined, children: REQUIRED_ICON }));
+            : undefined, children: REQUIRED_ICON }, void 0));
     return ((0, jsx_runtime_1.jsx)(LabelElement, { ...(0, tasty_1.filterBaseProps)(otherProps), ref: domRef, styles: styles, htmlFor: labelFor || htmlFor, mods: {
             side: labelPosition === 'side',
             disabled: isDisabled,
@@ -71,7 +71,7 @@ function Label(props, ref) {
                     (necessityIndicator === 'icon' && isRequired)) &&
                     ' \u200b', necessityIndicator === 'label' && ((0, jsx_runtime_1.jsx)("span", { "aria-hidden": !includeNecessityIndicatorInAccessibilityName
                         ? isRequired
-                        : undefined, children: necessityLabel })), necessityIndicator === 'icon' && isRequired && icon] })) }));
+                        : undefined, children: necessityLabel }, void 0)), necessityIndicator === 'icon' && isRequired && icon] }, void 0)) }, void 0));
 }
 let _Label = (0, react_1.forwardRef)(Label);
 exports.Label = _Label;

package/cjs/components/forms/NumberInput/NumberInput.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.22.0
+ * @cube-dev/ui-kit v0.22.2
  * Released under the MIT license.
  */
 
@@ -43,7 +43,7 @@ function NumberInput(props, ref) {
     let state = (0, numberfield_1.useNumberFieldState)({ ...props, locale });
     let inputRef = (0, react_1.useRef)(null);
     let { groupProps, labelProps, inputProps, incrementButtonProps, decrementButtonProps, } = (0, numberfield_2.useNumberField)(props, state, inputRef);
-    return ((0, jsx_runtime_1.jsx)(StyledTextInputBase, { ...otherProps, ref: ref, labelProps: labelProps, inputProps: inputProps, inputRef: inputRef, wrapperProps: groupProps, suffixPosition: "after", suffix: showStepper ? ((0, jsx_runtime_1.jsxs)(StepperContainer, { children: [(0, jsx_runtime_1.jsx)(StepButton_1.StepButton, { isDisabled: props.isDisabled, direction: "up", ...incrementButtonProps, size: otherProps.size }), (0, jsx_runtime_1.jsx)(StepButton_1.StepButton, { isDisabled: props.isDisabled, direction: "down", ...decrementButtonProps, size: otherProps.size })] })) : (suffix) }));
+    return ((0, jsx_runtime_1.jsx)(StyledTextInputBase, { ...otherProps, ref: ref, labelProps: labelProps, inputProps: inputProps, inputRef: inputRef, wrapperProps: groupProps, suffixPosition: "after", suffix: showStepper ? ((0, jsx_runtime_1.jsxs)(StepperContainer, { children: [(0, jsx_runtime_1.jsx)(StepButton_1.StepButton, { isDisabled: props.isDisabled, direction: "up", ...incrementButtonProps, size: otherProps.size }, void 0), (0, jsx_runtime_1.jsx)(StepButton_1.StepButton, { isDisabled: props.isDisabled, direction: "down", ...decrementButtonProps, size: otherProps.size }, void 0)] }, void 0)) : (suffix) }, void 0));
 }
 /**
  * NumberFields allow users to enter a number, and increment or decrement the value using stepper buttons.

package/cjs/components/forms/NumberInput/StepButton.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.22.0
+ * @cube-dev/ui-kit v0.22.2
  * Released under the MIT license.
  */
 
@@ -35,10 +35,10 @@ const STEP_BUTTON_STYLES = {
  * Buttons for NumberField.
  */
 function StepButton(props) {
-    return ((0, jsx_runtime_1.jsx)(actions_1.Button, { preventDefault: true, type: "neutral", styles: STEP_BUTTON_STYLES, icon: props.direction === 'up' ? ((0, jsx_runtime_1.jsx)(icons_1.CaretUpOutlined, { style: { fontSize: 'var(--icon-size)' } })) : ((0, jsx_runtime_1.jsx)(icons_1.CaretDownOutlined, { style: { fontSize: 'var(--icon-size)' } })), mods: {
+    return ((0, jsx_runtime_1.jsx)(actions_1.Button, { preventDefault: true, type: "neutral", styles: STEP_BUTTON_STYLES, icon: props.direction === 'up' ? ((0, jsx_runtime_1.jsx)(icons_1.CaretUpOutlined, { style: { fontSize: 'var(--icon-size)' } }, void 0)) : ((0, jsx_runtime_1.jsx)(icons_1.CaretDownOutlined, { style: { fontSize: 'var(--icon-size)' } }, void 0)), mods: {
             up: props.direction === 'up',
             down: props.direction === 'down',
-        }, label: `Step ${props.direction}`, ...props }));
+        }, label: `Step ${props.direction}`, ...props }, void 0));
 }
 exports.StepButton = StepButton;
 

package/cjs/components/forms/PasswordInput/PasswordInput.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.22.0
+ * @cube-dev/ui-kit v0.22.2
  * Released under the MIT license.
  */
 
@@ -37,8 +37,8 @@ function PasswordInput(props, ref) {
     const toggleType = (0, react_1.useCallback)(() => {
         setType((type) => (type === 'password' ? 'text' : 'password'));
     }, []);
-    const wrappedSuffix = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [suffix, (0, jsx_runtime_1.jsx)(actions_1.Button, { excludeFromTabOrder: true, type: "neutral", htmlType: "button", placeSelf: "stretch", height: "auto", radius: "right", width: "4x", label: "Toggle masking", icon: type === 'password' ? (0, jsx_runtime_1.jsx)(icons_1.EyeInvisibleOutlined, {}) : (0, jsx_runtime_1.jsx)(icons_1.EyeOutlined, {}), onPress: toggleType })] }));
-    return ((0, jsx_runtime_1.jsx)(TextInputBase_1.TextInputBase, { ref: ref, labelProps: labelProps, inputProps: inputProps, inputRef: inputRef, inputStyles: { paddingRight: '4x' }, type: type, suffixPosition: "after", suffix: wrappedSuffix, multiLine: multiLine, ...rest }));
+    const wrappedSuffix = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [suffix, (0, jsx_runtime_1.jsx)(actions_1.Button, { excludeFromTabOrder: true, type: "neutral", htmlType: "button", placeSelf: "stretch", height: "auto", radius: "right", width: "4x", label: "Toggle masking", icon: type === 'password' ? (0, jsx_runtime_1.jsx)(icons_1.EyeInvisibleOutlined, {}, void 0) : (0, jsx_runtime_1.jsx)(icons_1.EyeOutlined, {}, void 0), onPress: toggleType }, void 0)] }, void 0));
+    return ((0, jsx_runtime_1.jsx)(TextInputBase_1.TextInputBase, { ref: ref, labelProps: labelProps, inputProps: inputProps, inputRef: inputRef, inputStyles: { paddingRight: '4x' }, type: type, suffixPosition: "after", suffix: wrappedSuffix, multiLine: multiLine, ...rest }, void 0));
 }
 /**
  * PasswordInputs are password inputs that allow users to input passwords or code entries

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.22.0
+ * @cube-dev/ui-kit v0.22.2
  * Released under the MIT license.
  */
 
@@ -111,7 +111,7 @@ const RadioNormalElement = (0, tasty_1.tasty)({
         },
     },
 });
-const RadioCircleElement = (0, jsx_runtime_1.jsx)("div", { "data-element": "RadioCircle" });
+const RadioCircleElement = (0, jsx_runtime_1.jsx)("div", { "data-element": "RadioCircle" }, void 0);
 const RadioLabelElement = (0, tasty_1.tasty)({
     qa: 'RadioLabel',
     styles: Label_1.INLINE_LABEL_STYLES,
@@ -146,22 +146,22 @@ function Radio(props, ref) {
             invalid: validationState === 'invalid',
             hovered: isHovered,
             button: isButton,
-        }, "data-type": type, children: [(0, jsx_runtime_1.jsx)(HiddenInput_1.HiddenInput, { "data-qa": qa || 'Radio', "aria-label": ariaLabel, ...(0, react_2.mergeProps)(inputProps, focusProps), ref: inputRef, isButton: isButton }), (0, jsx_runtime_1.jsx)(RadioElement, { mods: {
+        }, "data-type": type, children: [(0, jsx_runtime_1.jsx)(HiddenInput_1.HiddenInput, { "data-qa": qa || 'Radio', "aria-label": ariaLabel, ...(0, react_2.mergeProps)(inputProps, focusProps), ref: inputRef, isButton: isButton }, void 0), (0, jsx_runtime_1.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 && ((0, jsx_runtime_1.jsx)(RadioLabelElement, { mods: {
+                }, "data-type": type, styles: inputStyles, children: !isButton ? RadioCircleElement : children }, void 0), label && !isButton && ((0, jsx_runtime_1.jsx)(RadioLabelElement, { mods: {
                     invalid: validationState === 'invalid',
                     valid: validationState === 'valid',
                     disabled: isDisabled,
-                }, ...(0, tasty_1.filterBaseProps)(labelProps), children: label }))] }));
+                }, ...(0, tasty_1.filterBaseProps)(labelProps), children: label }, void 0))] }, void 0));
 }
 function RadioButton(props, ref) {
     const Radio = _Radio;
-    return (0, jsx_runtime_1.jsx)(Radio, { ...props, ref: ref, type: "button" });
+    return (0, jsx_runtime_1.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.

package/cjs/components/forms/RadioGroup/RadioGroup.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.22.0
+ * @cube-dev/ui-kit v0.22.2
  * Released under the MIT license.
  */
 
@@ -51,7 +51,7 @@ function RadioGroup(props, ref) {
                 isRequired,
                 validationState,
                 isDisabled,
-            }, children: (0, jsx_runtime_1.jsx)(context_1.RadioContext.Provider, { value: state, children: children }) }) }));
+            }, children: (0, jsx_runtime_1.jsx)(context_1.RadioContext.Provider, { value: state, children: children }, void 0) }, void 0) }, void 0));
     return ((0, jsx_runtime_1.jsx)(FieldWrapper_1.FieldWrapper, { ...{
             labelPosition,
             label,
@@ -73,7 +73,7 @@ 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.

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

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

package/cjs/components/forms/SearchInput/SearchInput.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.22.0
+ * @cube-dev/ui-kit v0.22.2
  * Released under the MIT license.
  */
 
@@ -20,7 +20,7 @@ const mapProps_1 = require("../../../utils/react/mapProps");
 const nullableValue_1 = require("../../../utils/react/nullableValue");
 const tasty_1 = require("../../../tasty");
 const ClearButton = (0, tasty_1.tasty)(actions_1.Button, {
-    icon: (0, jsx_runtime_1.jsx)(icons_1.CloseOutlined, {}),
+    icon: (0, jsx_runtime_1.jsx)(icons_1.CloseOutlined, {}, void 0),
     styles: {
         radius: 'right (1r - 1bw)',
         width: '4x',
@@ -36,7 +36,7 @@ exports.SearchInput = (0, react_1.forwardRef)(function SearchInput(props, ref) {
     let state = (0, searchfield_1.useSearchFieldState)(props);
     let { inputProps, clearButtonProps } = (0, searchfield_2.useSearchField)(props, state, inputRef);
     let showClearButton = isClearable && state.value !== '' && !props.isReadOnly;
-    return ((0, jsx_runtime_1.jsx)(TextInputBase_1.TextInputBase, { ref: ref, inputProps: inputProps, inputRef: inputRef, type: "search", icon: (0, jsx_runtime_1.jsx)(icons_1.SearchOutlined, {}), suffixPosition: "after", ...props, suffix: props.suffix || showClearButton ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [props.suffix, showClearButton && ((0, jsx_runtime_1.jsx)(ClearButton, { type: validationState === 'invalid' ? 'clear' : 'neutral', theme: validationState === 'invalid' ? 'danger' : undefined, ...(0, mapProps_1.ariaToCubeButtonProps)(clearButtonProps) }))] })) : undefined }));
+    return ((0, jsx_runtime_1.jsx)(TextInputBase_1.TextInputBase, { ref: ref, inputProps: inputProps, inputRef: inputRef, type: "search", icon: (0, jsx_runtime_1.jsx)(icons_1.SearchOutlined, {}, void 0), suffixPosition: "after", ...props, suffix: props.suffix || showClearButton ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [props.suffix, showClearButton && ((0, jsx_runtime_1.jsx)(ClearButton, { type: validationState === 'invalid' ? 'clear' : 'neutral', theme: validationState === 'invalid' ? 'danger' : undefined, ...(0, mapProps_1.ariaToCubeButtonProps)(clearButtonProps) }, void 0))] }, void 0)) : undefined }, void 0));
 });