@cube-dev/ui-kit 0.26.3 → 0.27.0

package/cjs/components/forms/DatePicker/DatePickerSegment.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.26.3
+ * @cube-dev/ui-kit v0.27.0
  * Released under the MIT license.
  */
 
@@ -43,15 +43,15 @@ function DatePickerSegment({ segment, state, ...otherProps }) {
     switch (segment.type) {
         // A separator, e.g. punctuation
         case 'literal':
-            return (0, jsx_runtime_1.jsx)(LiteralSegment, { segment: segment }, void 0);
+            return (0, jsx_runtime_1.jsx)(LiteralSegment, { segment: segment });
         // Editable segment
         default:
-            return ((0, jsx_runtime_1.jsx)(EditableSegment, { segment: segment, state: state, ...otherProps }, void 0));
+            return ((0, jsx_runtime_1.jsx)(EditableSegment, { segment: segment, state: state, ...otherProps }));
     }
 }
 exports.DatePickerSegment = DatePickerSegment;
 function LiteralSegment({ segment }) {
-    return ((0, jsx_runtime_1.jsx)(LiteralSegmentElement, { "data-type": segment.type === 'literal' ? undefined : segment.type, children: segment.text }, void 0));
+    return ((0, jsx_runtime_1.jsx)(LiteralSegmentElement, { "data-type": segment.type === 'literal' ? undefined : segment.type, children: segment.text }));
 }
 function EditableSegment({ segment, state }) {
     let ref = (0, react_1.useRef)(null);
@@ -64,7 +64,7 @@ function EditableSegment({ segment, state }) {
             minWidth: segment.maxValue != null
                 ? `calc(${String(segment.maxValue).length + 'ch'})`
                 : undefined,
-        }, "data-testid": segment.type, children: segment.isPlaceholder ? ((0, jsx_runtime_1.jsx)("span", { "data-element": "Placeholder", "aria-hidden": "true", children: segment.placeholder }, void 0)) : (segment.text) }, void 0));
+        }, "data-testid": segment.type, children: segment.isPlaceholder ? ((0, jsx_runtime_1.jsx)("span", { "data-element": "Placeholder", "aria-hidden": "true", children: segment.placeholder })) : (segment.text) }));
 }
 
         

package/cjs/components/forms/DatePicker/DateRangePicker.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.26.3
+ * @cube-dev/ui-kit v0.27.0
  * Released under the MIT license.
  */
 
@@ -76,7 +76,7 @@ function DateRangePicker(props, ref) {
     let showTimeField = !!timeGranularity;
     //
     // let visibleMonths = useVisibleMonths(maxVisibleMonths);
-    const component = ((0, jsx_runtime_1.jsxs)(DatePickerElement_1.DatePickerElement, { ref: targetRef, styles: props.wrapperStyles, mods: { focused: isFocused && !isFocusedButton }, ...focusProps, children: [(0, jsx_runtime_1.jsxs)(DateInputBase_1.DateInputBase, { disableFocusRing: true, isDisabled: isDisabled, validationState: validationState, size: size, styles: { radius: 'left', border: 'top left bottom' }, children: [(0, jsx_runtime_1.jsx)(DatePickerInput_1.DatePickerInput, { useLocale: useLocaleProp, ...startFieldProps }, void 0), (0, jsx_runtime_1.jsx)(DateRangeDash, {}, void 0), (0, jsx_runtime_1.jsx)(DatePickerInput_1.DatePickerInput, { useLocale: useLocaleProp, ...endFieldProps }, void 0)] }, void 0), (0, jsx_runtime_1.jsxs)(Dialog_1.DialogTrigger, { hideArrow: true, type: "popover", mobileType: "tray", placement: "bottom right", targetRef: targetRef, isOpen: isOpen, shouldFlip: shouldFlip, onOpenChange: setOpen, children: [(0, jsx_runtime_1.jsx)(DatePickerButton_1.DatePickerButton, { size: size, ...(0, react_2.mergeProps)(buttonProps, focusPropsButton), isDisabled: isDisabled }, void 0), (0, jsx_runtime_1.jsxs)(Dialog_1.Dialog, { ...dialogProps, width: "max-content", children: [(0, jsx_runtime_1.jsx)(RangeCalendar_1.RangeCalendar, { ...calendarProps }, void 0), showTimeField && ((0, jsx_runtime_1.jsxs)(Space_1.Space, { children: [(0, jsx_runtime_1.jsx)(TimeInput_1.TimeInput, { padding: "1x", label: intl_1.dateMessages['startTime'], value: state.timeRange?.start || null, placeholderValue: timePlaceholder, granularity: timeGranularity, minValue: timeMinValue, maxValue: timeMaxValue, hourCycle: props.hourCycle, hideTimeZone: props.hideTimeZone, onChange: (v) => state.setTime('start', v) }, void 0), (0, jsx_runtime_1.jsx)(TimeInput_1.TimeInput, { padding: "1x", label: intl_1.dateMessages['endTime'], value: state.timeRange?.end || null, placeholderValue: timePlaceholder, granularity: timeGranularity, minValue: timeMinValue, maxValue: timeMaxValue, hourCycle: props.hourCycle, hideTimeZone: props.hideTimeZone, onChange: (v) => state.setTime('end', v) }, void 0)] }, void 0))] }, void 0)] }, void 0)] }, void 0));
+    const component = ((0, jsx_runtime_1.jsxs)(DatePickerElement_1.DatePickerElement, { ref: targetRef, styles: props.wrapperStyles, mods: { focused: isFocused && !isFocusedButton }, ...focusProps, children: [(0, jsx_runtime_1.jsxs)(DateInputBase_1.DateInputBase, { disableFocusRing: true, isDisabled: isDisabled, validationState: validationState, size: size, styles: { radius: 'left', border: 'top left bottom' }, children: [(0, jsx_runtime_1.jsx)(DatePickerInput_1.DatePickerInput, { useLocale: useLocaleProp, ...startFieldProps }), (0, jsx_runtime_1.jsx)(DateRangeDash, {}), (0, jsx_runtime_1.jsx)(DatePickerInput_1.DatePickerInput, { useLocale: useLocaleProp, ...endFieldProps })] }), (0, jsx_runtime_1.jsxs)(Dialog_1.DialogTrigger, { hideArrow: true, type: "popover", mobileType: "tray", placement: "bottom right", targetRef: targetRef, isOpen: isOpen, shouldFlip: shouldFlip, onOpenChange: setOpen, children: [(0, jsx_runtime_1.jsx)(DatePickerButton_1.DatePickerButton, { size: size, ...(0, react_2.mergeProps)(buttonProps, focusPropsButton), isDisabled: isDisabled }), (0, jsx_runtime_1.jsxs)(Dialog_1.Dialog, { ...dialogProps, width: "max-content", children: [(0, jsx_runtime_1.jsx)(RangeCalendar_1.RangeCalendar, { ...calendarProps }), showTimeField && ((0, jsx_runtime_1.jsxs)(Space_1.Space, { children: [(0, jsx_runtime_1.jsx)(TimeInput_1.TimeInput, { padding: "1x", label: intl_1.dateMessages['startTime'], value: state.timeRange?.start || null, placeholderValue: timePlaceholder, granularity: timeGranularity, minValue: timeMinValue, maxValue: timeMaxValue, hourCycle: props.hourCycle, hideTimeZone: props.hideTimeZone, onChange: (v) => state.setTime('start', v) }), (0, jsx_runtime_1.jsx)(TimeInput_1.TimeInput, { padding: "1x", label: intl_1.dateMessages['endTime'], value: state.timeRange?.end || null, placeholderValue: timePlaceholder, granularity: timeGranularity, minValue: timeMinValue, maxValue: timeMaxValue, hourCycle: props.hourCycle, hideTimeZone: props.hideTimeZone, onChange: (v) => state.setTime('end', v) })] }))] })] })] }));
     return (0, wrapper_1.wrapWithField)(component, domRef, {
         ...props,
         styles,

package/cjs/components/forms/DatePicker/TimeInput.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.26.3
+ * @cube-dev/ui-kit v0.27.0
  * Released under the MIT license.
  */
 
@@ -38,7 +38,7 @@ function TimeInput(props, ref) {
     });
     let fieldRef = (0, react_1.useRef)(null);
     let { labelProps, fieldProps } = (0, datepicker_1.useTimeField)(props, state, fieldRef);
-    const timeInput = ((0, jsx_runtime_1.jsx)(DateInputBase_1.DateInputBase, { ref: fieldRef, size: size, fieldProps: fieldProps, isDisabled: isDisabled, autoFocus: autoFocus, inputStyles: inputStyles, styles: wrapperStyles, validationState: validationState, children: state.segments.map((segment, i) => ((0, jsx_runtime_1.jsx)(DatePickerSegment_1.DatePickerSegment, { segment: segment, state: state, isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired }, i))) }, void 0));
+    const timeInput = ((0, jsx_runtime_1.jsx)(DateInputBase_1.DateInputBase, { ref: fieldRef, size: size, fieldProps: fieldProps, isDisabled: isDisabled, autoFocus: autoFocus, inputStyles: inputStyles, styles: wrapperStyles, validationState: validationState, children: state.segments.map((segment, i) => ((0, jsx_runtime_1.jsx)(DatePickerSegment_1.DatePickerSegment, { segment: segment, state: state, isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired }, i))) }));
     return (0, wrapper_1.wrapWithField)(timeInput, domRef, {
         ...props,
         styles,

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

@@ -1,14 +1,18 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.26.3
+ * @cube-dev/ui-kit v0.27.0
  * 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/DatePicker/intl.js

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

package/cjs/components/forms/DatePicker/parseDate.js

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

package/cjs/components/forms/DatePicker/props.js

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

package/cjs/components/forms/DatePicker/utils.js

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

package/cjs/components/forms/FieldWrapper/FieldWrapper.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.26.3
+ * @cube-dev/ui-kit v0.27.0
  * Released under the MIT license.
  */
 
@@ -75,18 +75,18 @@ const MessageElement = (0, tasty_1.tasty)({
  */
 exports.FieldWrapper = (0, react_1.forwardRef)(function FieldWrapper(props, ref) {
     const { as, labelPosition = 'top', label, extra, styles, isRequired, isDisabled, labelStyles, necessityIndicator, labelProps, fieldProps, message, messageStyles, description, Component, validationState, requiredMark = true, tooltip, isHidden, labelSuffix, children, } = props;
-    const labelComponent = label ? ((0, jsx_runtime_1.jsx)(Label_1.Label, { as: as === 'label' ? 'div' : 'label', styles: labelStyles, labelPosition: labelPosition, isRequired: requiredMark ? isRequired : false, isDisabled: isDisabled, necessityIndicator: necessityIndicator, validationState: validationState, "aria-label": label, ...labelProps, children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { placeContent: "baseline space-between", width: "100%", children: [(0, jsx_runtime_1.jsxs)(Space_1.Space, { placeItems: "center", gap: "0.25x", children: [(0, jsx_runtime_1.jsx)("div", { children: label }, void 0), tooltip ? ((0, jsx_runtime_1.jsx)(TooltipProvider_1.TooltipProvider, { activeWrap: true, title: tooltip, width: "initial max-content 40x", children: (0, jsx_runtime_1.jsx)(icons_1.InfoCircleOutlined, { style: {
+    const labelComponent = label ? ((0, jsx_runtime_1.jsx)(Label_1.Label, { as: as === 'label' ? 'div' : 'label', styles: labelStyles, labelPosition: labelPosition, isRequired: requiredMark ? isRequired : false, isDisabled: isDisabled, necessityIndicator: necessityIndicator, validationState: validationState, "aria-label": label, ...labelProps, children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { placeContent: "baseline space-between", width: "100%", children: [(0, jsx_runtime_1.jsxs)(Space_1.Space, { placeItems: "center", gap: "0.25x", children: [(0, jsx_runtime_1.jsx)("div", { children: label }), tooltip ? ((0, jsx_runtime_1.jsx)(TooltipProvider_1.TooltipProvider, { activeWrap: true, title: tooltip, width: "initial max-content 40x", children: (0, jsx_runtime_1.jsx)(icons_1.InfoCircleOutlined, { style: {
                                     color: 'var(--purple-text-color)',
                                     margin: '0 4px',
-                                } }, void 0) }, void 0)) : null, (0, jsx_runtime_1.jsx)("div", { children: labelSuffix }, void 0)] }, void 0), extra && (0, jsx_runtime_1.jsx)(Text_1.Text, { preset: "t3", children: extra }, void 0)] }, void 0) }, void 0)) : null;
-    let descriptionComponent = description ? ((0, jsx_runtime_1.jsx)("div", { "data-element": "Description", children: (0, react_2.wrapNodeIfPlain)(description, () => ((0, jsx_runtime_1.jsx)(Paragraph_1.Paragraph, { children: description }, void 0))) }, void 0)) : null;
+                                } }) })) : null, (0, jsx_runtime_1.jsx)("div", { children: labelSuffix })] }), extra && (0, jsx_runtime_1.jsx)(Text_1.Text, { preset: "t3", children: extra })] }) })) : null;
+    let descriptionComponent = description ? ((0, jsx_runtime_1.jsx)("div", { "data-element": "Description", children: (0, react_2.wrapNodeIfPlain)(description, () => ((0, jsx_runtime_1.jsx)(Paragraph_1.Paragraph, { children: description }))) })) : null;
     const mods = {
         'has-sider': labelPosition === 'side',
         'has-description': !!description,
         invalid: validationState === 'invalid',
         valid: validationState === 'valid',
     };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(FieldElement, { ref: ref, as: as ?? 'div', mods: mods, isHidden: isHidden, styles: styles, ...fieldProps, children: [labelComponent || descriptionComponent ? ((0, jsx_runtime_1.jsxs)("div", { "data-element": "LabelArea", children: [labelComponent, descriptionComponent] }, void 0)) : null, (0, jsx_runtime_1.jsxs)("div", { "data-element": "InputArea", children: [Component, message && !isDisabled && ((0, jsx_runtime_1.jsx)(MessageElement, { mods: mods, styles: messageStyles, role: validationState === 'invalid' ? 'alert' : undefined, children: message }, void 0))] }, void 0)] }, void 0), children] }, void 0));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(FieldElement, { ref: ref, as: as ?? 'div', mods: mods, isHidden: isHidden, styles: styles, ...fieldProps, children: [labelComponent || descriptionComponent ? ((0, jsx_runtime_1.jsxs)("div", { "data-element": "LabelArea", children: [labelComponent, descriptionComponent] })) : null, (0, jsx_runtime_1.jsxs)("div", { "data-element": "InputArea", children: [Component, message && !isDisabled && ((0, jsx_runtime_1.jsx)(MessageElement, { mods: mods, styles: messageStyles, role: validationState === 'invalid' ? 'alert' : undefined, children: message }))] })] }), children] }));
 });
 
         

package/cjs/components/forms/FieldWrapper/extract-field-wrapper-props.js

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

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

@@ -1,14 +1,18 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.26.3
+ * @cube-dev/ui-kit v0.27.0
  * 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/FieldWrapper/types.js

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

package/cjs/components/forms/FileInput/FileInput.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.26.3
+ * @cube-dev/ui-kit v0.27.0
  * Released under the MIT license.
  */
 
@@ -135,7 +135,7 @@ function FileInput(props, ref) {
                     setDragHover(false);
                 }, onDrop: () => {
                     setDragHover(false);
-                }, ...inputProps }, void 0), (0, jsx_runtime_1.jsx)("div", { "data-element": "Button", children: "Choose file" }, void 0), (0, jsx_runtime_1.jsx)("div", { "data-element": !!fileName ? 'Value' : 'Placeholder', children: fileName || placeholder || 'No file selected' }, void 0)] }, void 0));
+                }, ...inputProps }), (0, jsx_runtime_1.jsx)("div", { "data-element": "Button", children: "Choose file" }), (0, jsx_runtime_1.jsx)("div", { "data-element": !!fileName ? 'Value' : 'Placeholder', children: fileName || placeholder || 'No file selected' })] }));
     return ((0, jsx_runtime_1.jsx)(FieldWrapper_1.FieldWrapper, { ...{
             labelPosition,
             label,
@@ -156,7 +156,7 @@ function FileInput(props, ref) {
             labelSuffix,
             Component: fileInput,
             ref: domRef,
-        } }, void 0));
+        } }));
 }
 /**
  * FileInputs are file inputs that allow users to select local files to

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.26.3
+ * @cube-dev/ui-kit v0.27.0
  * Released under the MIT license.
  */
 
@@ -88,7 +88,7 @@ function Field(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: __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));
+        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 }) }));
     }
     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,
@@ -143,7 +143,7 @@ function Field(props) {
     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 } : {})) }, void 0));
+    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 } : {})) }));
 }
 exports.Field = Field;
 const LegacyFieldContext = (0, react_1.createContext)({
@@ -151,10 +151,10 @@ 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 }, void 0));
+    return ((0, jsx_runtime_1.jsx)(LegacyFieldContext.Provider, { value: value, children: props.children }));
 }
 function useInsideLegacyField() {
-    const { insideLegacyField } = (0, react_1.useContext)(LegacyFieldContext);
+    const { insideLegacyField = false } = (0, react_1.useContext)(LegacyFieldContext);
     return insideLegacyField;
 }
 exports.useInsideLegacyField = useInsideLegacyField;

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.26.3
+ * @cube-dev/ui-kit v0.27.0
  * Released under the MIT license.
  */
 
@@ -143,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 }, void 0) }, void 0) }, void 0));
+    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 }) }) }));
 }
 /**
  * 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.26.3
+ * @cube-dev/ui-kit v0.27.0
  * 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 }, void 0));
+    return ((0, jsx_runtime_1.jsx)(actions_1.Button, { ref: ref, type: "primary", htmlType: "submit", isLoading: form?.isSubmitting, isDisabled: isInvalid, ...otherProps }));
 });
 
         

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

@@ -1,14 +1,18 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.26.3
+ * @cube-dev/ui-kit v0.27.0
  * 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/Form/SubmitError.js

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

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

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

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

@@ -1,14 +1,18 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.26.3
+ * @cube-dev/ui-kit v0.27.0
  * 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/Form/use-field/types.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.26.3
+ * @cube-dev/ui-kit v0.27.0
  * 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.26.3
+ * @cube-dev/ui-kit v0.27.0
  * Released under the MIT license.
  */
 
@@ -13,6 +13,7 @@ const react_2 = require("react");
 const _internal_1 = require("../../../../_internal");
 const Field_1 = require("../Field");
 const react_3 = require("../../../../utils/react");
+const warnings_1 = require("../../../../utils/warnings");
 const use_field_1 = require("./use-field");
 function useFieldProps(props, params = {}) {
     // We use ref here to "memoize" initial value
@@ -26,7 +27,10 @@ function useFieldProps(props, params = {}) {
     //   key: 'use-field-props',
     //   args: ['<Field /> is deprecated, use component without <Field /> instead.'],
     // });
-    if (isInsideLegacyField === true ||
+    if (props.rules && !props.name) {
+        (0, warnings_1.warn)(`The "rules" prop is not suitable for fields that are not part of a form. Use "name" prop to link the field to a form.`);
+    }
+    if (isInsideLegacyField ||
         isDisabledRef.current === true ||
         props.name == null) {
         return props;
@@ -36,18 +40,42 @@ function useFieldProps(props, params = {}) {
         defaultValidationTrigger: params.defaultValidationTrigger,
     });
     const isOutsideOfForm = field?.form == null;
+    if (props.rules && isOutsideOfForm) {
+        (0, warnings_1.warn)(`The "rules" prop is not supported for fields that are not part of a form. The "${props.name}" field is placed outside the form.`);
+    }
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const onBlurChained = (0, _internal_1.useChainedCallback)(field?.onBlur, 
     // TODO: remove type casting after updating to typescipt@4.9
     'onBlur' in props ? props.onBlur : undefined);
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const onChangeEvent = (0, _internal_1.useEvent)((value, dontTouch) => field?.onChange?.(value, dontTouch, field?.validateTrigger ?? defaultValidationTrigger));
+    const valueProps = !isOutsideOfForm
+        ? valuePropsMapper({ value: field.value, onChange: onChangeEvent })
+        : {};
+    if (isInsideLegacyField && !isOutsideOfForm) {
+        const valuePropEventNames = !isOutsideOfForm
+            ? Object.keys(valueProps).filter((name) => name.startsWith('on'))
+            : [];
+        for (const valuePropName of valuePropEventNames) {
+            if (valuePropName in props) {
+                (0, warnings_1.warn)(`The "${valuePropName}" listener is not supported for input "${props.name}" that is linked to a form via a <Field> component. Remove the <Field> component and move its properties to the input itself.`);
+            }
+        }
+    }
     const result = isOutsideOfForm
         ? props
-        : (0, react_3.mergeProps)(props, field, valuePropsMapper({ value: field.value, onChange: onChangeEvent }), {
+        : (0, react_3.mergeProps)(props, field, valueProps, {
             validateTrigger: field.validateTrigger ?? defaultValidationTrigger,
             onBlur: onBlurChained,
         });
+    if (result.id) {
+        if (!result.labelProps) {
+            result.labelProps = {};
+        }
+        if (result.labelProps) {
+            result.labelProps.for = result.id;
+        }
+    }
     if (process.env.NODE_ENV === 'development') {
         // eslint-disable-next-line react-hooks/rules-of-hooks
         (0, react_2.useDebugValue)(result);

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.26.3
+ * @cube-dev/ui-kit v0.27.0
  * Released under the MIT license.
  */
 
@@ -78,8 +78,9 @@ function useField(props, params) {
             if (!field) {
                 field = form.createField(fieldName, true);
             }
-            if (field?.value == null) {
+            if (field?.value == null && defaultValue != null) {
                 form.setFieldValue(fieldName, defaultValue, false, true);
+                form.updateInitialFieldsValue({ [fieldName]: defaultValue });
                 field = form?.getFieldInstance(fieldName);
             }
         }

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.26.3
+ * @cube-dev/ui-kit v0.27.0
  * Released under the MIT license.
  */
 
@@ -143,6 +143,9 @@ class CubeFormInstance {
     setInitialFieldsValue(values) {
         this.initialFields = tasty_1.dotize.convert(values) ?? {};
     }
+    updateInitialFieldsValue(values) {
+        this.initialFields = { ...this.initialFields, ...tasty_1.dotize.convert(values) };
+    }
     resetFields(names, skipRender) {
         const fieldsValue = this.getFieldsValue();
         const fieldNames = Object.keys({ ...fieldsValue, ...this.initialFields });

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.26.3
+ * @cube-dev/ui-kit v0.27.0
  * 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.26.3
+ * @cube-dev/ui-kit v0.27.0
  * 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 }, void 0);
+    return (0, jsx_runtime_1.jsx)(TextInput_1.TextInput, { ref: ref, ...props });
 }), {
     Text: TextInput_1.TextInput,
     Password: PasswordInput_1.PasswordInput,

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

@@ -1,14 +1,18 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.26.3
+ * @cube-dev/ui-kit v0.27.0
  * 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.26.3
+ * @cube-dev/ui-kit v0.27.0
  * 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;