@cube-dev/ui-kit 0.41.3 → 0.42.0

package/es/components/fields/Slider/RangeSlider.js

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

package/es/components/fields/Slider/Slider.js

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

package/es/components/fields/Slider/SliderBase.js

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

package/es/components/fields/Slider/SliderInput.js

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

package/es/components/fields/Slider/SliderThumb.js

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

package/es/components/fields/Slider/SliderTrack.js

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

package/es/components/fields/Slider/elements.js

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

package/es/components/fields/Slider/index.js

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

package/es/components/fields/Slider/types.js

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

package/es/components/fields/Switch/Switch.js

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

package/es/components/fields/Switch/index.js

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

package/es/components/fields/TextArea/TextArea.js

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

package/es/components/fields/TextArea/index.js

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

package/es/components/fields/TextInput/TextInput.js

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

package/es/components/fields/TextInput/TextInputBase.js

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

package/es/components/fields/TextInput/index.js

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

package/es/components/fields/TextInputMapper/TextInputMapper.js

@@ -0,0 +1,132 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.42.0
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useMemo, useRef, useState, } from 'react';
+import { useEvent } from '../../../_internal/hooks';
+import { useFieldProps, useFormProps, wrapWithField } from '../../form';
+import { CloseIcon, PlusIcon } from '../../../icons';
+import { Button } from '../../actions';
+import { Block } from '../../Block';
+import { Flow } from '../../layout/Flow';
+import { Grid } from '../../layout/Grid';
+import { Space } from '../../layout/Space';
+import { TextInput } from '../TextInput';
+// remove duplicates in mappings
+function removeDuplicates(mappings) {
+    const keys = new Set();
+    return mappings.filter(({ key }) => {
+        if (keys.has(key)) {
+            return false;
+        }
+        keys.add(key);
+        return true;
+    });
+}
+function TextInputMapper(props, ref) {
+    props = useFormProps(props);
+    props = useFieldProps(props, {
+        defaultValidationTrigger: 'onChange',
+        valuePropsMapper: ({ value, onChange }) => ({
+            value: value != null ? value : {},
+            onChange: onChange,
+        }),
+    });
+    const counterRef = useRef(0);
+    let { isDisabled, actionLabel, value, onChange, keyProps, valueProps, ValueComponent, } = props;
+    function extractLocalValues(value, localValues) {
+        const valueKeys = Object.keys(value);
+        const localKeys = localValues.map(({ key }) => key);
+        localKeys.forEach((key) => {
+            if (!valueKeys.includes(key) && key !== '') {
+                localValues = localValues.filter(({ key: k }) => k !== key);
+            }
+        });
+        Object.entries(value ?? {}).forEach(([key, value]) => {
+            const exist = localValues.find(({ key: k }) => k === key);
+            if (exist) {
+                exist.value = value;
+            }
+            else {
+                localValues.push({ key, value, id: counterRef.current++ });
+            }
+        });
+        return removeDuplicates(localValues);
+    }
+    const [mappings, setMappings] = useState(() => {
+        return extractLocalValues(value ?? {}, []);
+    });
+    useEffect(() => {
+        setMappings(extractLocalValues(value ?? {}, mappings));
+    }, [JSON.stringify(value)]);
+    const onMappingsChange = useEvent((newMappings) => {
+        const newValue = newMappings.reduce((acc, { key, value }) => {
+            acc[key] = value;
+            return acc;
+        }, {});
+        const keys = Object.keys(newValue);
+        if (!keys.length) {
+            onChange?.(undefined);
+        }
+        else {
+            onChange?.(newValue);
+        }
+    });
+    const addNewMapping = useEvent(() => {
+        setMappings((prev) => {
+            return [...prev, { key: '', value: '', id: counterRef.current++ }];
+        });
+    });
+    const showNewButton = useMemo(() => {
+        return (!mappings.length || !mappings.some(({ key, value }) => !key || !value));
+    }, [mappings]);
+    ValueComponent = ValueComponent ?? TextInputMapperInput;
+    const onKeyChange = useEvent((id, value) => {
+        mappings.find((mapping) => {
+            if (mapping.id === id) {
+                mapping.key = value;
+            }
+        });
+        setMappings([...mappings]);
+    });
+    const onValueChange = useEvent((id, value) => {
+        mappings.find((mapping) => {
+            if (mapping.id === id) {
+                mapping.value = value;
+            }
+        });
+        setMappings([...mappings]);
+    });
+    const onSubmit = useEvent(() => {
+        onMappingsChange(mappings);
+    });
+    const renderedMappings = useMemo(() => {
+        return mappings.map((mapping) => {
+            const { key, value, id } = mapping;
+            return (_jsxs(Grid, { columns: "minmax(0, 1fr) minmax(0, 1fr) min-content", gap: "1x", children: [_jsx(TextInputMapperInput, { id: id, isDisabled: isDisabled, type: "name", value: key, placeholder: "Key", onChange: onKeyChange, onSubmit: onSubmit, ...keyProps }), _jsx(ValueComponent, { id: id, type: "value", isDisabled: !key || isDisabled, value: value, placeholder: "Value", onChange: onValueChange, onSubmit: onSubmit, ...valueProps }), _jsx(Button, { "aria-label": "Remove mapping", theme: "danger", type: "clear", icon: _jsx(CloseIcon, {}), onPress: () => {
+                            setMappings(mappings.filter((m) => m.id !== id));
+                            onMappingsChange(mappings.filter((m) => m.id !== id));
+                        } })] }, id));
+        });
+    }, [JSON.stringify(mappings)]);
+    const element = (_jsxs(Flow, { gap: "1x", children: [[...renderedMappings], showNewButton ? (_jsxs(Space, { gap: 0, children: [_jsx(Block, { styles: { overflow: 'clip', width: 'max 0px' }, children: "\u00A0" }), _jsx(Button, { isDisabled: isDisabled, icon: _jsx(PlusIcon, {}), onPress: addNewMapping, children: actionLabel ? actionLabel : 'Mapping' })] })) : null] }));
+    return wrapWithField(element, ref, props);
+}
+function TextInputMapperInput(props) {
+    const { id, type, value, placeholder, ...rest } = props;
+    const onChange = useEvent((newValue) => {
+        props.onChange?.(id, newValue);
+    });
+    const onBlur = useEvent(() => {
+        props.onSubmit?.(id);
+    });
+    return (_jsx(TextInput, { qa: "AddMapping", width: "auto", ...rest, id: undefined, value: value, labelPosition: "top", "aria-label": placeholder, placeholder: placeholder, onChange: onChange, onBlur: onBlur }));
+}
+const _TextInputMapper = forwardRef(TextInputMapper);
+export { _TextInputMapper as TextInputMapper };
+
+        

package/es/components/fields/TextInputMapper/index.js

@@ -0,0 +1,10 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.42.0
+ * Released under the MIT license.
+ */
+
+export * from './TextInputMapper';
+
+        

package/es/components/fields/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.41.3
+ * @cube-dev/ui-kit v0.42.0
  * Released under the MIT license.
  */
 
@@ -19,5 +19,6 @@ export * from './Slider';
 export * from './Switch/Switch';
 export * from './Select';
 export * from './ComboBox';
+export * from './TextInputMapper';
 
         

package/es/components/form/FieldWrapper/FieldWrapper.js

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

package/es/components/form/FieldWrapper/extract-field-wrapper-props.js

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

package/es/components/form/FieldWrapper/index.js

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

package/es/components/form/FieldWrapper/types.js

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

package/es/components/form/Form/Field.js

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

package/es/components/form/Form/Form.js

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

package/es/components/form/Form/Submit/Submit.js

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

package/es/components/form/Form/Submit/index.js

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

package/es/components/form/Form/SubmitError.js

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

package/es/components/form/Form/index.js

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

package/es/components/form/Form/types.js

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

package/es/components/form/Form/use-field/index.js

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

package/es/components/form/Form/use-field/types.js

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

package/es/components/form/Form/use-field/use-field-props.js

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

package/es/components/form/Form/use-field/use-field.js

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

package/es/components/form/Form/use-form.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.41.3
+ * @cube-dev/ui-kit v0.42.0
  * Released under the MIT license.
  */
 
@@ -102,7 +102,9 @@ export class CubeFormInstance {
      */
     getFormData() {
         const fieldsValue = this.getFieldsValue();
-        return Object.keys(fieldsValue).reduce((map, field) => {
+        return Object.keys(fieldsValue)
+            .sort()
+            .reduce((map, field) => {
             setValue(map, field, fieldsValue[field]);
             if (field.includes('.')) {
                 delete map[field];
@@ -110,7 +112,7 @@ export class CubeFormInstance {
             return map;
         }, {});
     }
-    setFieldValue(name, value, touched = false, skipRender = false, inputOnly = false) {
+    setFieldValue(name, value, isTouched = false, skipRender = false, inputOnly = false) {
         const field = this.fields[name];
         if (!field || isEqual(value, inputOnly ? field.inputValue : field.value)) {
             return;
@@ -118,15 +120,23 @@ export class CubeFormInstance {
         if (!inputOnly) {
             field.value = value;
             field.status = undefined; // reset validation status
+            if (typeof value === 'object' && !Array.isArray(value)) {
+                Object.keys(this.fields)
+                    .filter((key) => key.startsWith(`${name}.`))
+                    .forEach((key) => {
+                    const objKey = key.replace(`${name}.`, '');
+                    this.setFieldValue(key, value[objKey] ?? null, isTouched, false);
+                });
+            }
         }
         field.inputValue = value;
-        if (touched) {
-            field.touched = touched;
+        if (isTouched) {
+            field.touched = isTouched;
         }
         if (!skipRender) {
             field.errors = [];
         }
-        if (touched && !inputOnly) {
+        if (isTouched && !inputOnly) {
             this.onValuesChange && this.onValuesChange(this.getFormData());
             this.submitError = null;
         }
@@ -138,10 +148,14 @@ export class CubeFormInstance {
         return this.fields[name];
     }
     setInitialFieldsValue(values) {
-        this.initialFields = dotize.convert(values) ?? {};
+        this.initialFields = { ...values, ...dotize.convert(values) };
     }
     updateInitialFieldsValue(values) {
-        this.initialFields = { ...this.initialFields, ...dotize.convert(values) };
+        this.initialFields = {
+            ...this.initialFields,
+            ...values,
+            ...dotize.convert(values),
+        };
     }
     resetFields(names, skipRender) {
         const fieldsValue = this.getFieldsValue();

package/es/components/form/Form/validation.js

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

package/es/components/form/Label.js

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

package/es/components/form/index.js

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

package/es/components/form/wrapper.js

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

package/es/components/layout/Flex.js

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

package/es/components/layout/Flow.js

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

package/es/components/layout/Grid.js

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

package/es/components/layout/Prefix.js

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

package/es/components/layout/Space.js

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

package/es/components/layout/Suffix.js

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

package/es/components/navigation/LegacyTabs/LegacyTabs.js

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