@cube-dev/ui-kit 0.19.0 → 0.20.1

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

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

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

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

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.19.0
+ * @cube-dev/ui-kit v0.20.1
  * Released under the MIT license.
  */
 
@@ -12,12 +12,20 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const elements_1 = require("./elements");
 function SliderTrack(props) {
-    const { isDisabled, orientation = 'horizontal' } = props;
+    const { isDisabled, state, orientation = 'horizontal' } = props;
+    const selectedTrack = [state.getThumbPercent(0), state.getThumbPercent(1)];
+    const showRangeTrack = !Number.isNaN(selectedTrack[1]);
     const mods = (0, react_1.useMemo)(() => ({
         disabled: isDisabled,
         horizontal: orientation === 'horizontal',
-    }), [isDisabled]);
-    return (0, jsx_runtime_1.jsx)(elements_1.SliderTrackContainerElement, { mods: mods });
+        range: showRangeTrack,
+    }), [isDisabled, showRangeTrack]);
+    return ((0, jsx_runtime_1.jsx)(elements_1.SliderTrackContainerElement, { mods: mods, style: showRangeTrack
+            ? {
+                '--slider-range-start': `${selectedTrack[0] * 100}%`,
+                '--slider-range-end': `${selectedTrack[1] * 100}%`,
+            }
+            : {} }));
 }
 exports.SliderTrack = SliderTrack;
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.19.0
+ * @cube-dev/ui-kit v0.20.1
  * Released under the MIT license.
  */
 
@@ -57,6 +57,19 @@ exports.SliderTrackContainerElement = (0, tasty_1.tasty)({
             horizontal: '100%',
         },
         radius: true,
+        '&::before': {
+            content: '""',
+            display: {
+                '': 'none',
+                range: 'block',
+            },
+            position: 'absolute',
+            top: 0,
+            bottom: 0,
+            fill: '#purple',
+            left: '@slider-range-start',
+            width: '(@slider-range-end - @slider-range-start)',
+        },
     },
 });
 exports.SliderGradationElement = (0, tasty_1.tasty)({

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

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

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

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

package/cjs/components/forms/Switch/Switch.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.19.0
+ * @cube-dev/ui-kit v0.20.1
  * Released under the MIT license.
  */
 
@@ -21,10 +21,10 @@ const interactions_2 = require("../../../utils/react/interactions");
 const react_2 = require("../../../utils/react");
 const HiddenInput_1 = require("../../HiddenInput");
 const Label_1 = require("../Label");
-const Form_1 = require("../Form/Form");
 const Text_1 = require("../../content/Text");
 const FieldWrapper_1 = require("../FieldWrapper");
 const nullableValue_1 = require("../../../utils/react/nullableValue");
+const Form_1 = require("../Form");
 const SwitchWrapperElement = (0, tasty_1.tasty)({
     qa: 'SwitchWrapper',
     styles: {
@@ -116,6 +116,14 @@ function Switch(props, ref) {
     props = (0, nullableValue_1.castNullableIsSelected)(props);
     props = (0, provider_1.useProviderProps)(props);
     props = (0, Form_1.useFormProps)(props);
+    props = (0, Form_1.useFieldProps)(props, {
+        defaultValidationTrigger: 'onChange',
+        valuePropsMapper: ({ value, onChange }) => ({
+            isSelected: value != null ? value : false,
+            isIndeterminate: false,
+            onChange: onChange,
+        }),
+    });
     let { qa, isDisabled = false, autoFocus, children, label, extra, labelProps, labelStyles, isLoading, insideForm, validationState, message, description, labelPosition, inputStyles, requiredMark = true, tooltip, labelSuffix, size = 'large', ...otherProps } = props;
     let styles = (0, tasty_1.extractStyles)(props, tasty_1.OUTER_STYLES);
     inputStyles = (0, tasty_1.extractStyles)(props, tasty_1.BLOCK_STYLES, inputStyles);
@@ -137,7 +145,7 @@ function Switch(props, ref) {
         hovered: isHovered,
         focused: isFocused,
     };
-    const switchField = ((0, jsx_runtime_1.jsxs)(SwitchWrapperElement, { mods: mods, "data-size": size, children: [(0, jsx_runtime_1.jsx)(HiddenInput_1.HiddenInput, { "data-qa": "HiddenInput", ...(0, react_2.mergeProps)(inputProps, focusProps), ref: inputRef }), (0, jsx_runtime_1.jsx)(SwitchElement, { qa: qa || 'Switch', mods: mods, "data-size": size, styles: inputStyles, children: (0, jsx_runtime_1.jsx)("div", { "data-element": "Thumb", "aria-hidden": "true" }) }), children ? (0, jsx_runtime_1.jsx)(Text_1.Text, { children: children }) : null] }));
+    const switchField = ((0, jsx_runtime_1.jsxs)(SwitchWrapperElement, { mods: mods, "data-size": size, children: [(0, jsx_runtime_1.jsx)(HiddenInput_1.HiddenInput, { "data-qa": "HiddenInput", ...(0, react_2.mergeProps)(inputProps, focusProps), ref: inputRef }), (0, jsx_runtime_1.jsx)(SwitchElement, { qa: qa || 'Switch', mods: mods, "data-size": size, styles: inputStyles, children: (0, jsx_runtime_1.jsx)("div", { "data-element": "Thumb", "aria-hidden": "true" }) }), children ? (0, jsx_runtime_1.jsx)(Text_1.Text, { nowrap: true, children: children }) : null] }));
     if (insideForm) {
         return ((0, jsx_runtime_1.jsx)(FieldWrapper_1.FieldWrapper, { ...{
                 as: 'label',

package/cjs/components/forms/TextArea/TextArea.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.19.0
+ * @cube-dev/ui-kit v0.20.1
  * Released under the MIT license.
  */
 
@@ -16,14 +16,22 @@ const TextInputBase_1 = require("../TextInput/TextInputBase");
 const provider_1 = require("../../../provider");
 const nullableValue_1 = require("../../../utils/react/nullableValue");
 const react_2 = require("../../../utils/react");
+const Form_1 = require("../Form");
+const _internal_1 = require("../../../_internal");
 function TextArea(props, ref) {
     props = (0, nullableValue_1.castNullableStringValue)(props);
     props = (0, provider_1.useProviderProps)(props);
-    let { autoSize = false, isDisabled = false, isReadOnly = false, isRequired = false, onChange, rows, ...otherProps } = props;
-    rows = rows || 3;
+    props = (0, Form_1.useFieldProps)(props, {
+        defaultValidationTrigger: 'onBlur',
+        valuePropsMapper: ({ value, onChange }) => ({
+            onChange,
+            value: value?.toString() ?? '',
+        }),
+    });
+    let { autoSize = false, isDisabled = false, isReadOnly = false, isRequired = false, onChange, rows = 3, ...otherProps } = props;
     let [inputValue, setInputValue] = (0, utils_1.useControlledState)(props.value, props.defaultValue, () => { });
     let inputRef = (0, react_1.useRef)(null);
-    let onHeightChange = (0, react_1.useCallback)(() => {
+    let onHeightChange = (0, _internal_1.useEvent)(() => {
         if (autoSize && inputRef.current) {
             let input = inputRef.current;
             let prevAlignment = input.style.alignSelf;
@@ -38,7 +46,7 @@ function TextArea(props, ref) {
                     2}px`;
             input.style.alignSelf = prevAlignment;
         }
-    }, [inputRef]);
+    });
     (0, react_2.useLayoutEffect)(() => {
         if (inputRef.current) {
             onHeightChange();

package/cjs/components/forms/TextInput/TextInput.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.19.0
+ * @cube-dev/ui-kit v0.20.1
  * Released under the MIT license.
  */
 
@@ -13,10 +13,18 @@ const react_1 = require("react");
 const textfield_1 = require("@react-aria/textfield");
 const provider_1 = require("../../../provider");
 const nullableValue_1 = require("../../../utils/react/nullableValue");
+const Form_1 = require("../Form");
 const TextInputBase_1 = require("./TextInputBase");
 exports.TextInput = (0, react_1.forwardRef)(function TextInput(props, ref) {
-    (0, nullableValue_1.castNullableStringValue)(props);
+    props = (0, nullableValue_1.castNullableStringValue)(props);
     props = (0, provider_1.useProviderProps)(props);
+    props = (0, Form_1.useFieldProps)(props, {
+        defaultValidationTrigger: 'onBlur',
+        valuePropsMapper: ({ value, onChange }) => ({
+            onChange,
+            value: value?.toString() ?? '',
+        }),
+    });
     let inputRef = (0, react_1.useRef)(null);
     let { labelProps, inputProps } = (0, textfield_1.useTextField)(props, inputRef);
     return ((0, jsx_runtime_1.jsx)(TextInputBase_1.TextInputBase, { ...props, ref: ref, labelProps: labelProps, inputProps: inputProps, inputRef: inputRef }));

package/cjs/components/forms/TextInput/TextInputBase.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.19.0
+ * @cube-dev/ui-kit v0.20.1
  * Released under the MIT license.
  */
 
@@ -135,6 +135,15 @@ const InputElement = (0, tasty_1.tasty)({ qa: 'Input', styles: exports.DEFAULT_I
 function TextInputBase(props, ref) {
     props = (0, provider_1.useProviderProps)(props);
     props = (0, Form_1.useFormProps)(props);
+    props = (0, Form_1.useFieldProps)(props, {
+        defaultValidationTrigger: 'onBlur',
+        valuePropsMapper: ({ value, onChange }) => ({
+            value: typeof value === 'string' || typeof value === 'number'
+                ? String(value)
+                : '',
+            onChange,
+        }),
+    });
     let { qa, label, extra, mods, labelPosition = 'top', labelStyles, isRequired, necessityIndicator, necessityLabel, validationState, message, description, prefix, isDisabled, multiLine, autoFocus, labelProps, inputProps, wrapperProps, inputRef, isLoading, loadingIndicator, value, inputStyles = {}, wrapperStyles = {}, suffix, suffixPosition = 'before', wrapperRef, requiredMark = true, tooltip, isHidden, rows = 1, size, icon, labelSuffix, maxLength, minLength, ...otherProps } = props;
     let styles = (0, tasty_1.extractStyles)(otherProps, STYLE_LIST);
     let type = otherProps.type;

package/cjs/components/forms/index.js

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

package/cjs/components/layout/Flex.js

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

package/cjs/components/layout/Flow.js

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

package/cjs/components/layout/Grid.js

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

package/cjs/components/layout/Prefix.js

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

package/cjs/components/layout/Space.js

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

package/cjs/components/layout/Suffix.js

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

package/cjs/components/navigation/LegacyTabs/LegacyTabs.js

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

package/cjs/components/navigation/Link/Link.js

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

package/cjs/components/organisms/FileTabs/FileTabs.js

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

package/cjs/components/organisms/Modal/Modal.js

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

package/cjs/components/organisms/StatsCard/StatsCard.js

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

package/cjs/components/other/Base64Upload/Base64Upload.js

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

package/cjs/components/other/CloudLogo/CloudLogo.js

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

package/cjs/components/overlays/AlertDialog/AlertDialog.js

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

package/cjs/components/overlays/AlertDialog/AlertDialogApiProvider.js

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

package/cjs/components/overlays/AlertDialog/AlertDialogZone.js

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

package/cjs/components/overlays/AlertDialog/index.js

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

package/cjs/components/overlays/AlertDialog/types.js

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

package/cjs/components/overlays/Dialog/Dialog.js

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

package/cjs/components/overlays/Dialog/DialogContainer.js

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

package/cjs/components/overlays/Dialog/DialogForm.js

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

package/cjs/components/overlays/Dialog/DialogTrigger.js

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

package/cjs/components/overlays/Dialog/context.js

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

package/cjs/components/overlays/Dialog/index.js

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

package/cjs/components/overlays/Modal/Modal.js

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

package/cjs/components/overlays/Modal/OpenTransition.js

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

package/cjs/components/overlays/Modal/Overlay.js

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

package/cjs/components/overlays/Modal/Popover.js

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

package/cjs/components/overlays/Modal/Tray.js

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

package/cjs/components/overlays/Modal/Underlay.js

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

package/cjs/components/overlays/Modal/index.js

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

package/cjs/components/overlays/Modal/types.js

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

package/cjs/components/overlays/NewNotifications/Bar/FloatingNotification.js

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

package/cjs/components/overlays/NewNotifications/Bar/NotificationsBar.js

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

package/cjs/components/overlays/NewNotifications/Bar/TransitionComponent.js

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

package/cjs/components/overlays/NewNotifications/Bar/index.js

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

package/cjs/components/overlays/NewNotifications/Dialog/NotificationsDialogTrigger.js

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

package/cjs/components/overlays/NewNotifications/Dialog/index.js

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