@cube-dev/ui-kit 0.26.3 → 0.27.0

package/es/components/forms/Checkbox/CheckboxGroup.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.
  */
 
@@ -54,8 +54,8 @@ function CheckboxGroup(props, ref) {
         }, children: _jsx(FormContext.Provider, { value: {
                 isDisabled,
                 validationState,
-            }, children: _jsx(CheckboxGroupContext.Provider, { value: state, children: children }, void 0) }, void 0) }, void 0));
-    return (_jsx(FieldWrapper, { ...fieldWrapperProps, ref: domRef, Component: radioGroup, fieldProps: groupProps, labelProps: labelProps, styles: styles }, void 0));
+            }, children: _jsx(CheckboxGroupContext.Provider, { value: state, children: children }) }) }));
+    return (_jsx(FieldWrapper, { ...fieldWrapperProps, ref: domRef, Component: radioGroup, fieldProps: groupProps, labelProps: labelProps, styles: styles }));
 }
 /**
  * Checkbox groups allow users to select a single option from a list of mutually exclusive options.

package/es/components/forms/Checkbox/context.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/es/components/forms/DatePicker/DateInput.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.
  */
 
@@ -46,7 +46,7 @@ function DateInput(props, ref) {
     }
     let fieldRef = useRef(null);
     let { labelProps, fieldProps } = useDateField(props, state, fieldRef);
-    const component = (_jsx(DateInputBase, { ref: fieldRef, size: size, fieldProps: fieldProps, isDisabled: isDisabled, autoFocus: autoFocus, validationState: state.validationState, styles: wrapperStyles, inputStyles: inputStyles, children: state.segments.map((segment, i) => (_jsx(DatePickerSegment, { segment: segment, state: state, isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired }, i))) }, void 0));
+    const component = (_jsx(DateInputBase, { ref: fieldRef, size: size, fieldProps: fieldProps, isDisabled: isDisabled, autoFocus: autoFocus, validationState: state.validationState, styles: wrapperStyles, inputStyles: inputStyles, children: state.segments.map((segment, i) => (_jsx(DatePickerSegment, { segment: segment, state: state, isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired }, i))) }));
     return wrapWithField(component, domRef, {
         ...props,
         styles,

package/es/components/forms/DatePicker/DateInputBase.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.
  */
 
@@ -46,7 +46,7 @@ function DateInputBase(props, ref) {
             disabled: isDisabled,
             focused: isFocused && !disableFocusRing,
             invalid: isInvalid,
-        }, ...mergeProps(fieldProps ?? {}, focusProps), style: style, children: [_jsx("div", { "data-element": "Contents", role: "presentation", children: _jsx(DateInputElement, { ref: mergeRefs(ref, inputRef), "data-size": size, role: "presentation", styles: inputStyles, children: children }, void 0) }, void 0), validationState && !isLoading ? validation : undefined] }, void 0));
+        }, ...mergeProps(fieldProps ?? {}, focusProps), style: style, children: [_jsx("div", { "data-element": "Contents", role: "presentation", children: _jsx(DateInputElement, { ref: mergeRefs(ref, inputRef), "data-size": size, role: "presentation", styles: inputStyles, children: children }) }), validationState && !isLoading ? validation : undefined] }));
 }
 const _DateInputBase = React.forwardRef(DateInputBase);
 export { _DateInputBase as DateInputBase };

package/es/components/forms/DatePicker/DatePicker.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.
  */
 
@@ -64,7 +64,7 @@ function DatePicker(props, ref) {
     let showTimeField = !!timeGranularity;
     //
     // let visibleMonths = useVisibleMonths(maxVisibleMonths);
-    const component = (_jsxs(DatePickerElement, { ref: targetRef, styles: props.wrapperStyles, mods: { focused: isFocused && !isFocusedButton }, ...focusProps, children: [_jsx(DateInputBase, { disableFocusRing: true, radius: "left", border: "top left bottom", isDisabled: isDisabled, validationState: validationState, size: size, children: _jsx(DatePickerInput, { useLocale: useLocaleProp, ...fieldProps }, void 0) }, void 0), _jsxs(DialogTrigger, { hideArrow: true, type: "popover", mobileType: "tray", placement: "bottom right", targetRef: targetRef, isOpen: isOpen, shouldFlip: props.shouldFlip, onOpenChange: setOpen, children: [_jsx(DatePickerButton, { size: size, ...mergeProps(buttonProps, focusPropsButton), isDisabled: isDisabled }, void 0), _jsxs(Dialog, { ...dialogProps, width: "max-content", children: [_jsx(Calendar, { ...calendarProps }, void 0), showTimeField && (_jsx(TimeInput, { padding: "1x", label: dateMessages['time'], value: state.timeValue, placeholderValue: timePlaceholder, granularity: timeGranularity, minValue: timeMinValue, maxValue: timeMaxValue, hourCycle: props.hourCycle, hideTimeZone: props.hideTimeZone, onChange: state.setTimeValue }, void 0))] }, void 0)] }, void 0)] }, void 0));
+    const component = (_jsxs(DatePickerElement, { ref: targetRef, styles: props.wrapperStyles, mods: { focused: isFocused && !isFocusedButton }, ...focusProps, children: [_jsx(DateInputBase, { disableFocusRing: true, radius: "left", border: "top left bottom", isDisabled: isDisabled, validationState: validationState, size: size, children: _jsx(DatePickerInput, { useLocale: useLocaleProp, ...fieldProps }) }), _jsxs(DialogTrigger, { hideArrow: true, type: "popover", mobileType: "tray", placement: "bottom right", targetRef: targetRef, isOpen: isOpen, shouldFlip: props.shouldFlip, onOpenChange: setOpen, children: [_jsx(DatePickerButton, { size: size, ...mergeProps(buttonProps, focusPropsButton), isDisabled: isDisabled }), _jsxs(Dialog, { ...dialogProps, width: "max-content", children: [_jsx(Calendar, { ...calendarProps }), showTimeField && (_jsx(TimeInput, { padding: "1x", label: dateMessages['time'], value: state.timeValue, placeholderValue: timePlaceholder, granularity: timeGranularity, minValue: timeMinValue, maxValue: timeMaxValue, hourCycle: props.hourCycle, hideTimeZone: props.hideTimeZone, onChange: state.setTimeValue }))] })] })] }));
     return wrapWithField(component, domRef, {
         ...props,
         styles,

package/es/components/forms/DatePicker/DatePickerButton.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.
  */
 
@@ -10,7 +10,7 @@ import { CalendarOutlined } from '@ant-design/icons';
 import { tasty } from '../../../tasty';
 import { Button } from '../../actions';
 export const DatePickerButton = tasty(Button, {
-    icon: _jsx(CalendarOutlined, {}, void 0),
+    icon: _jsx(CalendarOutlined, {}),
     styles: {
         radius: '1r right',
         border: 'top right bottom',

package/es/components/forms/DatePicker/DatePickerElement.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/es/components/forms/DatePicker/DatePickerInput.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.
  */
 
@@ -35,7 +35,7 @@ export function DatePickerInput(props) {
         state.segments = formatSegments(state.segments);
     }
     let { fieldProps } = useDateField(props, state, ref);
-    return (_jsx(DateInputElement, { ref: ref, ...fieldProps, children: state.segments.map((segment, i) => (_jsx(DatePickerSegment, { segment: segment, state: state, isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired }, i))) }, void 0));
+    return (_jsx(DateInputElement, { ref: ref, ...fieldProps, children: state.segments.map((segment, i) => (_jsx(DatePickerSegment, { segment: segment, state: state, isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired }, i))) }));
 }
 
         

package/es/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.
  */
 
@@ -40,14 +40,14 @@ export function DatePickerSegment({ segment, state, ...otherProps }) {
     switch (segment.type) {
         // A separator, e.g. punctuation
         case 'literal':
-            return _jsx(LiteralSegment, { segment: segment }, void 0);
+            return _jsx(LiteralSegment, { segment: segment });
         // Editable segment
         default:
-            return (_jsx(EditableSegment, { segment: segment, state: state, ...otherProps }, void 0));
+            return (_jsx(EditableSegment, { segment: segment, state: state, ...otherProps }));
     }
 }
 function LiteralSegment({ segment }) {
-    return (_jsx(LiteralSegmentElement, { "data-type": segment.type === 'literal' ? undefined : segment.type, children: segment.text }, void 0));
+    return (_jsx(LiteralSegmentElement, { "data-type": segment.type === 'literal' ? undefined : segment.type, children: segment.text }));
 }
 function EditableSegment({ segment, state }) {
     let ref = useRef(null);
@@ -60,7 +60,7 @@ function EditableSegment({ segment, state }) {
             minWidth: segment.maxValue != null
                 ? `calc(${String(segment.maxValue).length + 'ch'})`
                 : undefined,
-        }, "data-testid": segment.type, children: segment.isPlaceholder ? (_jsx("span", { "data-element": "Placeholder", "aria-hidden": "true", children: segment.placeholder }, void 0)) : (segment.text) }, void 0));
+        }, "data-testid": segment.type, children: segment.isPlaceholder ? (_jsx("span", { "data-element": "Placeholder", "aria-hidden": "true", children: segment.placeholder })) : (segment.text) }));
 }
 
         

package/es/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.
  */
 
@@ -73,7 +73,7 @@ function DateRangePicker(props, ref) {
     let showTimeField = !!timeGranularity;
     //
     // let visibleMonths = useVisibleMonths(maxVisibleMonths);
-    const component = (_jsxs(DatePickerElement, { ref: targetRef, styles: props.wrapperStyles, mods: { focused: isFocused && !isFocusedButton }, ...focusProps, children: [_jsxs(DateInputBase, { disableFocusRing: true, isDisabled: isDisabled, validationState: validationState, size: size, styles: { radius: 'left', border: 'top left bottom' }, children: [_jsx(DatePickerInput, { useLocale: useLocaleProp, ...startFieldProps }, void 0), _jsx(DateRangeDash, {}, void 0), _jsx(DatePickerInput, { useLocale: useLocaleProp, ...endFieldProps }, void 0)] }, void 0), _jsxs(DialogTrigger, { hideArrow: true, type: "popover", mobileType: "tray", placement: "bottom right", targetRef: targetRef, isOpen: isOpen, shouldFlip: shouldFlip, onOpenChange: setOpen, children: [_jsx(DatePickerButton, { size: size, ...mergeProps(buttonProps, focusPropsButton), isDisabled: isDisabled }, void 0), _jsxs(Dialog, { ...dialogProps, width: "max-content", children: [_jsx(RangeCalendar, { ...calendarProps }, void 0), showTimeField && (_jsxs(Space, { children: [_jsx(TimeInput, { padding: "1x", label: 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), _jsx(TimeInput, { padding: "1x", label: 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 = (_jsxs(DatePickerElement, { ref: targetRef, styles: props.wrapperStyles, mods: { focused: isFocused && !isFocusedButton }, ...focusProps, children: [_jsxs(DateInputBase, { disableFocusRing: true, isDisabled: isDisabled, validationState: validationState, size: size, styles: { radius: 'left', border: 'top left bottom' }, children: [_jsx(DatePickerInput, { useLocale: useLocaleProp, ...startFieldProps }), _jsx(DateRangeDash, {}), _jsx(DatePickerInput, { useLocale: useLocaleProp, ...endFieldProps })] }), _jsxs(DialogTrigger, { hideArrow: true, type: "popover", mobileType: "tray", placement: "bottom right", targetRef: targetRef, isOpen: isOpen, shouldFlip: shouldFlip, onOpenChange: setOpen, children: [_jsx(DatePickerButton, { size: size, ...mergeProps(buttonProps, focusPropsButton), isDisabled: isDisabled }), _jsxs(Dialog, { ...dialogProps, width: "max-content", children: [_jsx(RangeCalendar, { ...calendarProps }), showTimeField && (_jsxs(Space, { children: [_jsx(TimeInput, { padding: "1x", label: 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) }), _jsx(TimeInput, { padding: "1x", label: 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 wrapWithField(component, domRef, {
         ...props,
         styles,

package/es/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.
  */
 
@@ -35,7 +35,7 @@ function TimeInput(props, ref) {
     });
     let fieldRef = useRef(null);
     let { labelProps, fieldProps } = useTimeField(props, state, fieldRef);
-    const timeInput = (_jsx(DateInputBase, { ref: fieldRef, size: size, fieldProps: fieldProps, isDisabled: isDisabled, autoFocus: autoFocus, inputStyles: inputStyles, styles: wrapperStyles, validationState: validationState, children: state.segments.map((segment, i) => (_jsx(DatePickerSegment, { segment: segment, state: state, isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired }, i))) }, void 0));
+    const timeInput = (_jsx(DateInputBase, { ref: fieldRef, size: size, fieldProps: fieldProps, isDisabled: isDisabled, autoFocus: autoFocus, inputStyles: inputStyles, styles: wrapperStyles, validationState: validationState, children: state.segments.map((segment, i) => (_jsx(DatePickerSegment, { segment: segment, state: state, isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired }, i))) }));
     return wrapWithField(timeInput, domRef, {
         ...props,
         styles,

package/es/components/forms/DatePicker/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/es/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/es/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/es/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/es/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/es/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.
  */
 
@@ -72,18 +72,18 @@ const MessageElement = tasty({
  */
 export const FieldWrapper = 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 ? (_jsx(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: _jsxs(Flex, { placeContent: "baseline space-between", width: "100%", children: [_jsxs(Space, { placeItems: "center", gap: "0.25x", children: [_jsx("div", { children: label }, void 0), tooltip ? (_jsx(TooltipProvider, { activeWrap: true, title: tooltip, width: "initial max-content 40x", children: _jsx(InfoCircleOutlined, { style: {
+    const labelComponent = label ? (_jsx(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: _jsxs(Flex, { placeContent: "baseline space-between", width: "100%", children: [_jsxs(Space, { placeItems: "center", gap: "0.25x", children: [_jsx("div", { children: label }), tooltip ? (_jsx(TooltipProvider, { activeWrap: true, title: tooltip, width: "initial max-content 40x", children: _jsx(InfoCircleOutlined, { style: {
                                     color: 'var(--purple-text-color)',
                                     margin: '0 4px',
-                                } }, void 0) }, void 0)) : null, _jsx("div", { children: labelSuffix }, void 0)] }, void 0), extra && _jsx(Text, { preset: "t3", children: extra }, void 0)] }, void 0) }, void 0)) : null;
-    let descriptionComponent = description ? (_jsx("div", { "data-element": "Description", children: wrapNodeIfPlain(description, () => (_jsx(Paragraph, { children: description }, void 0))) }, void 0)) : null;
+                                } }) })) : null, _jsx("div", { children: labelSuffix })] }), extra && _jsx(Text, { preset: "t3", children: extra })] }) })) : null;
+    let descriptionComponent = description ? (_jsx("div", { "data-element": "Description", children: wrapNodeIfPlain(description, () => (_jsx(Paragraph, { children: description }))) })) : null;
     const mods = {
         'has-sider': labelPosition === 'side',
         'has-description': !!description,
         invalid: validationState === 'invalid',
         valid: validationState === 'valid',
     };
-    return (_jsxs(_Fragment, { children: [_jsxs(FieldElement, { ref: ref, as: as ?? 'div', mods: mods, isHidden: isHidden, styles: styles, ...fieldProps, children: [labelComponent || descriptionComponent ? (_jsxs("div", { "data-element": "LabelArea", children: [labelComponent, descriptionComponent] }, void 0)) : null, _jsxs("div", { "data-element": "InputArea", children: [Component, message && !isDisabled && (_jsx(MessageElement, { mods: mods, styles: messageStyles, role: validationState === 'invalid' ? 'alert' : undefined, children: message }, void 0))] }, void 0)] }, void 0), children] }, void 0));
+    return (_jsxs(_Fragment, { children: [_jsxs(FieldElement, { ref: ref, as: as ?? 'div', mods: mods, isHidden: isHidden, styles: styles, ...fieldProps, children: [labelComponent || descriptionComponent ? (_jsxs("div", { "data-element": "LabelArea", children: [labelComponent, descriptionComponent] })) : null, _jsxs("div", { "data-element": "InputArea", children: [Component, message && !isDisabled && (_jsx(MessageElement, { mods: mods, styles: messageStyles, role: validationState === 'invalid' ? 'alert' : undefined, children: message }))] })] }), children] }));
 });
 
         

package/es/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/es/components/forms/FieldWrapper/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/es/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/es/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.
  */
 
@@ -132,7 +132,7 @@ function FileInput(props, ref) {
                     setDragHover(false);
                 }, onDrop: () => {
                     setDragHover(false);
-                }, ...inputProps }, void 0), _jsx("div", { "data-element": "Button", children: "Choose file" }, void 0), _jsx("div", { "data-element": !!fileName ? 'Value' : 'Placeholder', children: fileName || placeholder || 'No file selected' }, void 0)] }, void 0));
+                }, ...inputProps }), _jsx("div", { "data-element": "Button", children: "Choose file" }), _jsx("div", { "data-element": !!fileName ? 'Value' : 'Placeholder', children: fileName || placeholder || 'No file selected' })] }));
     return (_jsx(FieldWrapper, { ...{
             labelPosition,
             label,
@@ -153,7 +153,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/es/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.
  */
 
@@ -85,7 +85,7 @@ export function Field(props) {
     if (!child)
         return null;
     if (__props.nonInput) {
-        return (_jsx(LegacyFieldProvider, { children: _jsx(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 (_jsx(LegacyFieldProvider, { children: _jsx(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) {
         warn('Form Field requires declared form instance if field name is specified');
@@ -97,7 +97,7 @@ export function Field(props) {
                 label: name,
                 name,
                 id,
-            })) }, void 0));
+            })) }));
     }
     const newProps = {
         id,
@@ -140,17 +140,17 @@ export 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 (_jsx(LegacyFieldProvider, { children: cloneElement(child, mergeProps(childProps, newProps, onChange ? { onChange: __props.onChange } : {}, onSelectionChange ? { onSelectionChange: __props.onChange } : {})) }, void 0));
+    return (_jsx(LegacyFieldProvider, { children: cloneElement(child, mergeProps(childProps, newProps, onChange ? { onChange: __props.onChange } : {}, onSelectionChange ? { onSelectionChange: __props.onChange } : {})) }));
 }
 const LegacyFieldContext = createContext({
     insideLegacyField: false,
 });
 function LegacyFieldProvider(props) {
     const value = useMemo(() => ({ insideLegacyField: true }), []);
-    return (_jsx(LegacyFieldContext.Provider, { value: value, children: props.children }, void 0));
+    return (_jsx(LegacyFieldContext.Provider, { value: value, children: props.children }));
 }
 export function useInsideLegacyField() {
-    const { insideLegacyField } = useContext(LegacyFieldContext);
+    const { insideLegacyField = false } = useContext(LegacyFieldContext);
     return insideLegacyField;
 }
 

package/es/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.
  */
 
@@ -139,7 +139,7 @@ function Form(props, ref) {
             form?.setInitialFieldsValue(defaultValues);
         }
     }, [defaultValues]);
-    return (_jsx(FormElement, { ...filterBaseProps(otherProps, { propNames: formPropNames }), ref: domRef, noValidate: true, styles: styles, mods: { 'has-sider': labelPosition === 'side', horizontal: isHorizontal }, onSubmit: onSubmitCallback, children: _jsx(FormContext.Provider, { value: ctx, children: _jsx(Provider, { insideForm: true, isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired, validationState: validationState, children: children }, void 0) }, void 0) }, void 0));
+    return (_jsx(FormElement, { ...filterBaseProps(otherProps, { propNames: formPropNames }), ref: domRef, noValidate: true, styles: styles, mods: { 'has-sider': labelPosition === 'side', horizontal: isHorizontal }, onSubmit: onSubmitCallback, children: _jsx(FormContext.Provider, { value: ctx, children: _jsx(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/es/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.
  */
 
@@ -16,7 +16,7 @@ export const Submit = 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 (_jsx(Button, { ref: ref, type: "primary", htmlType: "submit", isLoading: form?.isSubmitting, isDisabled: isInvalid, ...otherProps }, void 0));
+    return (_jsx(Button, { ref: ref, type: "primary", htmlType: "submit", isLoading: form?.isSubmitting, isDisabled: isInvalid, ...otherProps }));
 });
 
         

package/es/components/forms/Form/Submit/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/es/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.
  */
 
@@ -21,7 +21,7 @@ export const SubmitError = function SubmitError(props) {
         typeof submitError !== 'string') {
         submitError = 'Internal error';
     }
-    return (_jsx(Alert, { theme: "danger", ...props, children: submitError }, void 0));
+    return (_jsx(Alert, { theme: "danger", ...props, children: submitError }));
 };
 
         

package/es/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/es/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/es/components/forms/Form/use-field/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/es/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/es/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.
  */
 
@@ -10,6 +10,7 @@ import { useDebugValue } from 'react';
 import { useChainedCallback, useEvent } from '../../../../_internal';
 import { useInsideLegacyField } from '../Field';
 import { mergeProps } from '../../../../utils/react';
+import { warn } from '../../../../utils/warnings';
 import { useField } from './use-field';
 export function useFieldProps(props, params = {}) {
     // We use ref here to "memoize" initial value
@@ -23,7 +24,10 @@ export 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) {
+        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;
@@ -33,18 +37,42 @@ export function useFieldProps(props, params = {}) {
         defaultValidationTrigger: params.defaultValidationTrigger,
     });
     const isOutsideOfForm = field?.form == null;
+    if (props.rules && isOutsideOfForm) {
+        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 = 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 = 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) {
+                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
-        : mergeProps(props, field, valuePropsMapper({ value: field.value, onChange: onChangeEvent }), {
+        : 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
         useDebugValue(result);

package/es/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.
  */
 
@@ -75,8 +75,9 @@ export 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/es/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.
  */
 
@@ -140,6 +140,9 @@ export class CubeFormInstance {
     setInitialFieldsValue(values) {
         this.initialFields = dotize.convert(values) ?? {};
     }
+    updateInitialFieldsValue(values) {
+        this.initialFields = { ...this.initialFields, ...dotize.convert(values) };
+    }
     resetFields(names, skipRender) {
         const fieldsValue = this.getFieldsValue();
         const fieldNames = Object.keys({ ...fieldsValue, ...this.initialFields });