@cube-dev/ui-kit 0.0.0-canary-1be35be → 0.0.0-canary-f2f75e5

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-1be35be
+ * @cube-dev/ui-kit v0.0.0-canary-f2f75e5
  * 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 }, void 0));
+    return ((0, jsx_runtime_1.jsx)(Alert_1.Alert, { theme: "danger", ...props, children: submitError }));
 };
 exports.SubmitError = SubmitError;
 

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

@@ -1,13 +1,29 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-1be35be
+ * @cube-dev/ui-kit v0.0.0-canary-f2f75e5
  * 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);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SubmitError = exports.FormContext = exports.useForm = exports.Field = exports.Form = exports.useFormProps = void 0;
+exports.SubmitError = exports.Submit = exports.FormContext = exports.useForm = exports.Field = exports.Form = exports.useFormProps = void 0;
+const Submit_1 = require("./Submit");
+Object.defineProperty(exports, "Submit", { enumerable: true, get: function () { return Submit_1.Submit; } });
 const Field_1 = require("./Field");
 Object.defineProperty(exports, "Field", { enumerable: true, get: function () { return Field_1.Field; } });
 const SubmitError_1 = require("./SubmitError");
@@ -17,7 +33,8 @@ Object.defineProperty(exports, "useForm", { enumerable: true, get: function () {
 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: useForm_1.useForm, Submit: Submit_1.Submit, SubmitError: SubmitError_1.SubmitError });
 exports.Form = Form;
+__exportStar(require("./Field"), exports);
 
         

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

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

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-1be35be
+ * @cube-dev/ui-kit v0.0.0-canary-f2f75e5
  * Released under the MIT license.
  */
 
@@ -220,6 +220,7 @@ class CubeFormInstance {
         if (!skipRender) {
             this.forceReRender();
         }
+        return this.fields[name];
     }
     removeField(name, skipRender) {
         if (this.fields[name]) {

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

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

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

@@ -1,23 +1,19 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-1be35be
+ * @cube-dev/ui-kit v0.0.0-canary-f2f75e5
  * Released under the MIT license.
  */
 
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Input = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const TextInput_1 = require("../TextInput/TextInput");
+const TextInput_1 = require("../TextInput");
 const PasswordInput_1 = require("../PasswordInput/PasswordInput");
 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 }, void 0);
-}), {
+exports.Input = Object.assign(TextInput_1.TextInput, {
     Text: TextInput_1.TextInput,
     Password: PasswordInput_1.PasswordInput,
     Number: NumberInput_1.NumberInput,

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

@@ -1,14 +1,18 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-1be35be
+ * @cube-dev/ui-kit v0.0.0-canary-f2f75e5
  * Released under the MIT license.
  */
 
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[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);
 }) : (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.0.0-canary-1be35be
+ * @cube-dev/ui-kit v0.0.0-canary-f2f75e5
  * 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" }, void 0) }, void 0) }, void 0) }, void 0));
+    }, 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" }) }) }) }));
 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 }, void 0));
+            : undefined, children: REQUIRED_ICON }));
     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 }, void 0)), necessityIndicator === 'icon' && isRequired && icon] }, void 0)) }, void 0));
+                        : undefined, children: necessityLabel })), necessityIndicator === 'icon' && isRequired && icon] })) }));
 }
 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.0.0-canary-1be35be
+ * @cube-dev/ui-kit v0.0.0-canary-f2f75e5
  * Released under the MIT license.
  */
 
@@ -15,11 +15,11 @@ const numberfield_1 = require("@react-stately/numberfield");
 const numberfield_2 = require("@react-aria/numberfield");
 const Form_1 = require("../Form");
 const provider_1 = require("../../../provider");
-const TextInputBase_1 = require("../TextInput/TextInputBase");
+const TextInput_1 = require("../TextInput");
 const tasty_1 = require("../../../tasty");
 const nullableValue_1 = require("../../../utils/react/nullableValue");
 const StepButton_1 = require("./StepButton");
-const StyledTextInputBase = (0, tasty_1.tasty)(TextInputBase_1.TextInputBase, {
+const StyledTextInputBase = (0, tasty_1.tasty)(TextInput_1.TextInputBase, {
     wrapperStyles: {
         width: 'initial 13x 100%',
     },
@@ -33,23 +33,29 @@ const StepperContainer = (0, tasty_1.tasty)({
         placeSelf: 'stretch',
     },
 });
-function NumberInput(props, ref) {
+/**
+ * NumberFields allow users to enter a number, and increment or decrement the value using stepper buttons.
+ */
+exports.NumberInput = (0, react_1.forwardRef)(function NumberInput(props, ref) {
     props = (0, nullableValue_1.castNullableNumberValue)(props);
     props = (0, provider_1.useProviderProps)(props);
-    props = (0, Form_1.useFormProps)(props);
+    props = (0, Form_1.useFieldProps)(props);
     let { hideStepper, suffix, value, defaultValue, onChange, ...otherProps } = props;
     let showStepper = !hideStepper;
     let { locale } = (0, i18n_1.useLocale)();
     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 }, 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));
-}
+    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) }));
+});
 /**
- * NumberFields allow users to enter a number, and increment or decrement the value using stepper buttons.
+ * @legacy should be removed with legacy <Field />
  */
-const _NumberInput = (0, react_1.forwardRef)(NumberInput);
-exports.NumberInput = _NumberInput;
-_NumberInput.cubeInputType = 'Number';
+Object.defineProperty(exports.NumberInput, 'cubeInputType', {
+    enumerable: false,
+    configurable: false,
+    writable: false,
+    value: 'Number',
+});
 
         

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-1be35be
+ * @cube-dev/ui-kit v0.0.0-canary-f2f75e5
  * 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)' } }, void 0)) : ((0, jsx_runtime_1.jsx)(icons_1.CaretDownOutlined, { style: { fontSize: 'var(--icon-size)' } }, void 0)), 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)' } })) : ((0, jsx_runtime_1.jsx)(icons_1.CaretDownOutlined, { style: { fontSize: 'var(--icon-size)' } })), mods: {
             up: props.direction === 'up',
             down: props.direction === 'down',
-        }, label: `Step ${props.direction}`, ...props }, void 0));
+        }, label: `Step ${props.direction}`, ...props }));
 }
 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.0.0-canary-1be35be
+ * @cube-dev/ui-kit v0.0.0-canary-f2f75e5
  * Released under the MIT license.
  */
 
@@ -12,13 +12,22 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const textfield_1 = require("@react-aria/textfield");
 const icons_1 = require("@ant-design/icons");
-const TextInputBase_1 = require("../TextInput/TextInputBase");
+const TextInput_1 = require("../TextInput");
 const provider_1 = require("../../../provider");
 const actions_1 = require("../../actions");
 const nullableValue_1 = require("../../../utils/react/nullableValue");
+const Form_1 = require("../Form");
 function PasswordInput(props, ref) {
     props = (0, nullableValue_1.castNullableStringValue)(props);
-    let { suffix, multiLine, ...otherProps } = (0, provider_1.useProviderProps)({ ...props });
+    props = (0, provider_1.useProviderProps)(props);
+    props = (0, Form_1.useFieldProps)(props, {
+        defaultValidationTrigger: 'onBlur',
+        valuePropsMapper: ({ value, onChange }) => ({
+            value: value?.toString() ?? '',
+            onChange,
+        }),
+    });
+    const { suffix, multiLine, ...otherProps } = props;
     let [type, setType] = (0, react_1.useState)('password');
     let inputRef = (0, react_1.useRef)(null);
     let { labelProps, inputProps } = (0, textfield_1.useTextField)({
@@ -28,8 +37,8 @@ function PasswordInput(props, ref) {
     const toggleType = (0, react_1.useCallback)((e) => {
         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, {}, 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, ...otherProps }, void 0));
+    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)(TextInput_1.TextInputBase, { ref: ref, labelProps: labelProps, inputProps: inputProps, inputRef: inputRef, inputStyles: { paddingRight: '4x' }, type: type, suffixPosition: "after", suffix: wrappedSuffix, multiLine: multiLine, ...otherProps }));
 }
 /**
  * PasswordInputs are password inputs that allow users to input passwords or code entries
@@ -38,6 +47,14 @@ function PasswordInput(props, ref) {
  */
 const _PasswordInput = (0, react_1.forwardRef)(PasswordInput);
 exports.PasswordInput = _PasswordInput;
-_PasswordInput.cubeInputType = 'Text';
+/**
+ * @legacy should be removed with legacy <Field />
+ */
+Object.defineProperty(_PasswordInput, 'cubeInputType', {
+    enumerable: false,
+    configurable: false,
+    writable: false,
+    value: 'Text',
+});
 
         

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-1be35be
+ * @cube-dev/ui-kit v0.0.0-canary-f2f75e5
  * Released under the MIT license.
  */
 
@@ -110,17 +110,17 @@ const RadioNormalElement = (0, tasty_1.tasty)({
         },
     },
 });
-const RadioCircleElement = (0, jsx_runtime_1.jsx)("div", { "data-element": "RadioCircle" }, void 0);
+const RadioCircleElement = (0, jsx_runtime_1.jsx)("div", { "data-element": "RadioCircle" });
 const RadioLabelElement = (0, tasty_1.tasty)({
     qa: 'RadioLabel',
     styles: Label_1.INLINE_LABEL_STYLES,
 });
 function Radio(props, ref) {
     props = (0, provider_1.useProviderProps)(props);
-    props = (0, Form_1.useFormProps)(props);
+    props = (0, Form_1.useFieldProps)(props, { defaultValidationTrigger: 'onChange' });
     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 = (0, tasty_1.extractStyles)(otherProps, tasty_1.OUTER_STYLES);
     const RadioElement = isButton ? RadioButtonElement : RadioNormalElement;
     labelStyles = {
@@ -144,22 +144,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 }, void 0), (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 }), (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 }, void 0), label && !isButton && ((0, jsx_runtime_1.jsx)(RadioLabelElement, { mods: {
+                }, "data-type": type, styles: inputStyles, children: !isButton ? RadioCircleElement : children }), label && !isButton && ((0, jsx_runtime_1.jsx)(RadioLabelElement, { mods: {
                     invalid: validationState === 'invalid',
                     valid: validationState === 'valid',
                     disabled: isDisabled,
-                }, ...(0, tasty_1.filterBaseProps)(labelProps), children: label }, void 0))] }, void 0));
+                }, ...(0, tasty_1.filterBaseProps)(labelProps), children: label }))] }));
 }
 function RadioButton(props, ref) {
     const Radio = _Radio;
-    return (0, jsx_runtime_1.jsx)(Radio, { ...props, ref: ref, type: "button" }, void 0);
+    return (0, jsx_runtime_1.jsx)(Radio, { ...props, ref: ref, type: "button" });
 }
 /**
  * Radio buttons allow users to select a single option from a list of mutually exclusive options.
@@ -177,5 +177,14 @@ const __Radio = Object.assign(_Radio, {
     Button: _RadioButton,
 });
 exports.Radio = __Radio;
+/**
+ * @legacy should be removed with legacy <Field />
+ */
+Object.defineProperty(_Radio, 'cubeInputType', {
+    enumerable: false,
+    configurable: false,
+    writable: false,
+    value: 'Radio',
+});
 
         

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-1be35be
+ * @cube-dev/ui-kit v0.0.0-canary-f2f75e5
  * Released under the MIT license.
  */
 
@@ -35,7 +35,7 @@ const RadioGroupElement = (0, tasty_1.tasty)({
 function RadioGroup(props, ref) {
     props = (0, nullableValue_1.castNullableStringValue)(props);
     props = (0, provider_1.useProviderProps)(props);
-    props = (0, Form_1.useFormProps)(props);
+    props = (0, Form_1.useFieldProps)(props, { defaultValidationTrigger: 'onChange' });
     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 = (0, utils_1.useDOMRef)(ref);
     styles = (0, tasty_1.extractStyles)(otherProps, tasty_1.OUTER_STYLES, styles);
@@ -50,7 +50,7 @@ function RadioGroup(props, ref) {
                 isRequired,
                 validationState,
                 isDisabled,
-            }, children: (0, jsx_runtime_1.jsx)(context_1.RadioContext.Provider, { value: state, children: children }, void 0) }, void 0) }, void 0));
+            }, children: (0, jsx_runtime_1.jsx)(context_1.RadioContext.Provider, { value: state, children: children }) }) }));
     return ((0, jsx_runtime_1.jsx)(FieldWrapper_1.FieldWrapper, { ...{
             labelPosition,
             label,
@@ -72,7 +72,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.
@@ -80,6 +80,14 @@ function RadioGroup(props, ref) {
  */
 const _RadioGroup = (0, react_1.forwardRef)(RadioGroup);
 exports.RadioGroup = _RadioGroup;
-_RadioGroup.cubeInputType = 'RadioGroup';
+/**
+ * @legacy should be removed with legacy <Field />
+ */
+Object.defineProperty(_RadioGroup, 'cubeInputType', {
+    enumerable: false,
+    configurable: false,
+    writable: false,
+    value: 'RadioGroup',
+});
 
         

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-1be35be
+ * @cube-dev/ui-kit v0.0.0-canary-f2f75e5
  * 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.0.0-canary-1be35be
+ * @cube-dev/ui-kit v0.0.0-canary-f2f75e5
  * Released under the MIT license.
  */
 
@@ -21,7 +21,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, {}, void 0),
+    icon: (0, jsx_runtime_1.jsx)(icons_1.CloseOutlined, {}),
     styles: {
         radius: 'right (1r - 1bw)',
         width: '4x',
@@ -44,9 +44,9 @@ exports.SearchInput = (0, react_1.forwardRef)(function SearchInput(props, ref) {
     }, [combinedRef, value]);
     let state = (0, searchfield_1.useSearchFieldState)(props);
     let { inputProps, clearButtonProps } = (0, searchfield_2.useSearchField)(props, state, inputRef);
-    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", suffix: isClearable &&
+    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", suffix: isClearable &&
             state.value !== '' &&
-            !props.isReadOnly && ((0, jsx_runtime_1.jsx)(ClearButton, { type: validationState === 'invalid' ? 'clear' : 'neutral', theme: validationState === 'invalid' ? 'danger' : undefined, ...(0, mapProps_1.ariaToCubeButtonProps)(clearButtonProps) }, void 0)), ...props }, void 0));
+            !props.isReadOnly && ((0, jsx_runtime_1.jsx)(ClearButton, { type: validationState === 'invalid' ? 'clear' : 'neutral', theme: validationState === 'invalid' ? 'danger' : undefined, ...(0, mapProps_1.ariaToCubeButtonProps)(clearButtonProps) })), ...props }));
 });
 
         

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-1be35be
+ * @cube-dev/ui-kit v0.0.0-canary-f2f75e5
  * Released under the MIT license.
  */
 
@@ -21,7 +21,7 @@ function Gradation(props) {
     };
     return ((0, jsx_runtime_1.jsx)(elements_1.SliderGradationElement, { children: values.map((value, idx) => ((0, jsx_runtime_1.jsx)(elements_1.SliderGradeElement, { mods: {
                 active: getIsActive(value, idx),
-            }, children: value }, value))) }, void 0));
+            }, children: value }, value))) }));
 }
 exports.Gradation = Gradation;
 

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

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

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-1be35be
+ * @cube-dev/ui-kit v0.0.0-canary-f2f75e5
  * Released under the MIT license.
  */
 
@@ -21,8 +21,8 @@ const INTL_MESSAGES = {
 function RangeSlider(props, ref) {
     let { isDisabled, styles, gradation, ...otherProps } = props;
     return ((0, jsx_runtime_1.jsx)(SliderBase_1.SliderBase, { ...otherProps, children: ({ trackRef, inputRef, state }) => {
-            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Gradation_1.Gradation, { state: state, ranges: [0, 1], values: gradation }, void 0), (0, jsx_runtime_1.jsx)(SliderTrack_1.SliderTrack, { state: state, isDisabled: isDisabled }, void 0), (0, jsx_runtime_1.jsx)(SliderThumb_1.SliderThumb, { index: 0, "aria-label": INTL_MESSAGES['minimum'], state: state, inputRef: inputRef, trackRef: trackRef, isDisabled: isDisabled }, void 0), (0, jsx_runtime_1.jsx)(SliderThumb_1.SliderThumb, { index: 1, "aria-label": INTL_MESSAGES['maximum'], state: state, inputRef: inputRef, trackRef: trackRef, isDisabled: isDisabled }, void 0)] }, void 0));
-        } }, void 0));
+            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Gradation_1.Gradation, { state: state, ranges: [0, 1], values: gradation }), (0, jsx_runtime_1.jsx)(SliderTrack_1.SliderTrack, { state: state, isDisabled: isDisabled }), (0, jsx_runtime_1.jsx)(SliderThumb_1.SliderThumb, { index: 0, "aria-label": INTL_MESSAGES['minimum'], state: state, inputRef: inputRef, trackRef: trackRef, isDisabled: isDisabled }), (0, jsx_runtime_1.jsx)(SliderThumb_1.SliderThumb, { index: 1, "aria-label": INTL_MESSAGES['maximum'], state: state, inputRef: inputRef, trackRef: trackRef, isDisabled: isDisabled })] }));
+        } }));
 }
 const _RangeSlider = (0, react_1.forwardRef)(RangeSlider);
 const __RangeSlider = Object.assign(_RangeSlider, {

package/cjs/components/forms/Slider/Slider.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-1be35be
+ * @cube-dev/ui-kit v0.0.0-canary-f2f75e5
  * Released under the MIT license.
  */
 
@@ -28,12 +28,13 @@ function Slider(props, ref) {
         onChangeEnd: (v) => {
             onChangeEnd?.(v[0]);
         },
-        getValueLabel: getValueLabel ? ([v]) => getValueLabel?.(v) : undefined,
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        getValueLabel: getValueLabel ? ([v]) => getValueLabel(v) : undefined,
     };
     styles = (0, tasty_1.extractStyles)(otherProps, tasty_1.OUTER_STYLES, styles);
     return ((0, jsx_runtime_1.jsx)(SliderBase_1.SliderBase, { ...otherProps, ...baseProps, orientation: orientation, styles: styles, children: ({ trackRef, inputRef, state }) => {
-            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Gradation_1.Gradation, { state: state, ranges: [0, 1], values: gradation }, void 0), (0, jsx_runtime_1.jsx)(SliderTrack_1.SliderTrack, { state: state, isDisabled: isDisabled, orientation: orientation }, void 0), (0, jsx_runtime_1.jsx)(SliderThumb_1.SliderThumb, { index: 0, state: state, inputRef: inputRef, trackRef: trackRef, isDisabled: isDisabled }, void 0)] }, void 0));
-        } }, void 0));
+            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Gradation_1.Gradation, { state: state, ranges: [0, 1], values: gradation }), (0, jsx_runtime_1.jsx)(SliderTrack_1.SliderTrack, { state: state, isDisabled: isDisabled, orientation: orientation }), (0, jsx_runtime_1.jsx)(SliderThumb_1.SliderThumb, { index: 0, state: state, inputRef: inputRef, trackRef: trackRef, isDisabled: isDisabled })] }));
+        } }));
 }
 const _Slider = (0, react_1.forwardRef)(Slider);
 const __Slider = Object.assign(_Slider, {

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-1be35be
+ * @cube-dev/ui-kit v0.0.0-canary-f2f75e5
  * Released under the MIT license.
  */
 
@@ -14,7 +14,7 @@ const utils_1 = require("@react-spectrum/utils");
 const slider_1 = require("@react-stately/slider");
 const slider_2 = require("@react-aria/slider");
 const i18n_1 = require("@react-aria/i18n");
-const FieldWrapper_1 = require("../../forms/FieldWrapper");
+const FieldWrapper_1 = require("../FieldWrapper");
 const tasty_1 = require("../../../tasty");
 const Form_1 = require("../Form");
 const Text_1 = require("../../content/Text");
@@ -98,7 +98,7 @@ function SliderBase(allProps, ref) {
                     width: `${maxLabelLength + 1}ch`,
                     minWidth: `${maxLabelLength + 1}ch`,
                 }
-                : undefined, children: displayValue }, void 0));
+                : undefined, children: displayValue }));
     const sliderField = ((0, jsx_runtime_1.jsx)(elements_1.SliderElement, { ref: domRef, ...groupProps, mods: {
             'side-label': labelPosition === 'side',
             horizontal: orientation === 'horizontal',
@@ -108,7 +108,7 @@ function SliderBase(allProps, ref) {
                 trackRef,
                 inputRef,
                 state,
-            }) }, void 0) }, void 0));
+            }) }) }));
     styles = (0, tasty_1.extractStyles)(otherProps, tasty_1.OUTER_STYLES, styles);
     return ((0, jsx_runtime_1.jsx)(FieldWrapper_1.FieldWrapper, { ...{
             labelPosition,
@@ -127,7 +127,7 @@ function SliderBase(allProps, ref) {
             labelSuffix,
             Component: sliderField,
             ref: ref,
-        } }, void 0));
+        } }));
 }
 const _SliderBase = (0, react_1.forwardRef)(SliderBase);
 exports.SliderBase = _SliderBase;

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-1be35be
+ * @cube-dev/ui-kit v0.0.0-canary-f2f75e5
  * Released under the MIT license.
  */
 
@@ -31,7 +31,7 @@ function SliderInput(props) {
     const maxLength = typeof max !== 'undefined' ? String(max).length : undefined;
     return ((0, jsx_runtime_1.jsx)(__1.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 }, void 0));
+        }, textAlign: "center", formatOptions: formatOptions, value: value, minValue: state.getThumbMinValue(index), maxValue: state.getThumbMaxValue(index), maxLength: maxLength, onChange: onChange }));
 }
 exports.SliderInput = SliderInput;