@cube-dev/ui-kit 0.12.0 → 0.12.3

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.0
+ * @cube-dev/ui-kit v0.12.3
  * Released under the MIT license.
  */
 
@@ -20,7 +20,7 @@ const FileInputElement = (0, tasty_1.tasty)(Action_1.Action, {
         display: 'inline-flex',
         position: 'relative',
         preset: 't3',
-        padding: '.75x 1x',
+        padding: '.5x 1x',
         gap: '1x',
         flow: 'row',
         placeItems: 'center start',
@@ -33,15 +33,23 @@ const FileInputElement = (0, tasty_1.tasty)(Action_1.Action, {
         cursor: 'pointer',
         overflow: 'hidden',
         Button: {
-            radius: 'round',
+            radius: true,
+            border: {
+                '': '#clear',
+                pressed: '#purple.30',
+            },
             fill: {
-                '': '#light',
-                'hovered | focused | pressed': '#purple-04',
-                disabled: '#light',
+                '': '#purple.10',
+                hovered: '#purple.16',
+                pressed: '#purple.10',
+                '[disabled]': '#dark.04',
+            },
+            color: {
+                '': '#purple',
+                '[disabled]': '#dark.30',
             },
-            color: '#dark',
-            padding: '.5x 1x',
-            transition: 'fill',
+            padding: '.5x (1.5x - 1px)',
+            transition: 'theme',
         },
         Placeholder: {
             color: '#dark-02',
@@ -73,7 +81,7 @@ function extractContents(element, callback) {
     }
 }
 function FileInput(props, ref) {
-    let { id, name, qa, qaVal, onChange, placeholder, inputRef, label, extra, labelPosition, isRequired, necessityIndicator, necessityLabel, labelStyles, labelProps, isDisabled, validationState, message, description, requiredMark, tooltip, isHidden, inputStyles, type = 'file', ...otherProps } = (0, provider_1.useProviderProps)(props);
+    let { id, name, qa, qaVal, onChange, placeholder, inputRef, label, extra, labelPosition, isRequired, necessityIndicator, necessityLabel, labelStyles, labelProps, isDisabled, validationState, message, description, requiredMark, tooltip, isHidden, inputStyles, labelSuffix, type = 'file', ...otherProps } = (0, provider_1.useProviderProps)(props);
     const [value, setValue] = (0, react_1.useState)();
     const [dragHover, setDragHover] = (0, react_1.useState)(false);
     let domRef = (0, react_1.useRef)(null);
@@ -134,6 +142,7 @@ function FileInput(props, ref) {
             requiredMark,
             tooltip,
             isHidden,
+            labelSuffix,
             Component: fileInput,
             ref: domRef,
         } }, void 0));

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.0
+ * @cube-dev/ui-kit v0.12.3
  * Released under the MIT license.
  */
 
@@ -39,7 +39,7 @@ function getDefaultValidateTrigger(type) {
     type = type || '';
     return type === 'Number' || type.includes('Text') ? 'onBlur' : 'onChange';
 }
-function getValueProps(type, value, onChange) {
+function getValueProps(type, value, onChange, allowsCustomValue) {
     type = type || '';
     if (type === 'Number') {
         return {
@@ -71,7 +71,8 @@ function getValueProps(type, value, onChange) {
     else if (type === 'ComboBox') {
         return {
             inputValue: value != null ? value : '',
-            onInputChange: onChange,
+            onInputChange: (val) => onChange(val, !allowsCustomValue),
+            onSelectionChange: onChange,
         };
     }
     else if (type === 'Select') {
@@ -151,6 +152,7 @@ function Field(allProps) {
     if (!field) {
         return (0, react_1.cloneElement)(child, (0, react_2.mergeProps)(child.props, {
             ...getValueProps(inputType),
+            label: fieldName,
             name: fieldName,
             id: fieldId,
         }));
@@ -158,7 +160,7 @@ function Field(allProps) {
     if (!validateTrigger) {
         validateTrigger = defaultValidateTrigger;
     }
-    function onChangeHandler(val) {
+    function onChangeHandler(val, dontTouch) {
         const field = form.getFieldInstance(fieldName);
         if (shouldUpdate) {
             const fieldsValue = form.getFieldsValue();
@@ -173,9 +175,10 @@ function Field(allProps) {
                 return;
             }
         }
-        form.setFieldValue(fieldName, val, true);
-        if (validateTrigger === 'onChange' ||
-            (field && field.errors && field.errors.length)) {
+        form.setFieldValue(fieldName, val, !dontTouch, false, dontTouch);
+        if (!dontTouch &&
+            (validateTrigger === 'onChange' ||
+                (field && field.errors && field.errors.length))) {
             form.validateField(fieldName).catch(() => { }); // do nothing on fail
         }
     }
@@ -184,7 +187,7 @@ function Field(allProps) {
         name: fieldName,
         onBlur() {
             if (validateTrigger === 'onBlur') {
-                // We need timeout so the change event can be done.
+                // We need a timeout so the change event can be done.
                 setTimeout(() => {
                     form.validateField(fieldName).catch(() => { }); // do nothing on fail
                 });
@@ -232,7 +235,7 @@ function Field(allProps) {
             newProps.message = field.errors[0];
         }
     }
-    Object.assign(newProps, getValueProps(inputType, field === null || field === void 0 ? void 0 : field.value, onChangeHandler));
+    Object.assign(newProps, getValueProps(inputType, field === null || field === void 0 ? void 0 : field.inputValue, onChangeHandler, child.props.allowsCustomValue));
     const { onChange, onSelectionChange, ...childProps } = child.props;
     // onChange event passed to the child should be executed after Form onChange logic
     return (0, react_1.cloneElement)(child, (0, react_2.mergeProps)(childProps, newProps, onChange ? { onChange } : {}, onSelectionChange ? { onSelectionChange } : {}));

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

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

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

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

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.0
+ * @cube-dev/ui-kit v0.12.3
  * Released under the MIT license.
  */
 
@@ -34,7 +34,7 @@ class CubeFormInstance {
         this.isSubmitting = false;
         this.onValuesChange = () => { };
         this.onSubmit = () => { };
-        this.setFieldsValue = (newData, touched, skipRender, createFields = false) => {
+        this.setFieldsValue = (newData, touched, skipRender, createFields = false, inputOnly = false) => {
             let flag = false;
             Object.keys(newData).forEach((name) => {
                 let field = this.fields[name];
@@ -49,7 +49,10 @@ class CubeFormInstance {
                     return;
                 }
                 flag = true;
-                field.value = newData[name];
+                if (!inputOnly) {
+                    field.value = newData[name];
+                }
+                field.inputValue = newData[name];
                 if (touched === true) {
                     field.touched = touched;
                 }
@@ -60,7 +63,7 @@ class CubeFormInstance {
             });
             if (flag && !skipRender) {
                 this.forceReRender();
-                if (touched) {
+                if (touched && !inputOnly) {
                     this.onValuesChange && this.onValuesChange(this.getFormData());
                 }
             }
@@ -108,12 +111,15 @@ class CubeFormInstance {
             return map;
         }, {});
     }
-    setFieldValue(name, value, touched = false, skipRender = false) {
+    setFieldValue(name, value, touched = false, skipRender = false, inputOnly = false) {
         const field = this.fields[name];
         if (!field || isEqual(value, field.value)) {
             return;
         }
-        field.value = value;
+        if (!inputOnly) {
+            field.value = value;
+        }
+        field.inputValue = value;
         if (touched) {
             field.touched = touched;
         }
@@ -121,7 +127,7 @@ class CubeFormInstance {
             field.errors = [];
             this.forceReRender();
         }
-        if (touched) {
+        if (touched && !inputOnly) {
             this.onValuesChange && this.onValuesChange(this.getFormData());
         }
     }
@@ -238,13 +244,18 @@ class CubeFormInstance {
         this.forceReRender();
     }
     _createField(name, data) {
-        return {
+        let obj = {
             name,
             validating: false,
             touched: false,
             errors: [],
             ...data,
         };
+        if (obj) {
+            // condition is here to avoid typing issues
+            obj.inputValue = obj.value;
+        }
+        return obj;
     }
 }
 exports.CubeFormInstance = CubeFormInstance;

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

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

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

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

package/cjs/components/forms/Label.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.0
+ * @cube-dev/ui-kit v0.12.3
  * Released under the MIT license.
  */
 
@@ -30,7 +30,6 @@ exports.INLINE_LABEL_STYLES = {
     color: {
         '': '#dark.85',
         invalid: '#danger-text',
-        disabled: '#dark.30',
     },
     whiteSpace: 'nowrap',
 };
@@ -41,7 +40,6 @@ exports.LABEL_STYLES = {
     color: {
         '': '#dark',
         invalid: '#danger-text',
-        disabled: '#dark.30',
     },
     whiteSpace: 'nowrap',
     width: {

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

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

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.0
+ * @cube-dev/ui-kit v0.12.3
  * Released under the MIT license.
  */
 
@@ -12,7 +12,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const actions_1 = require("../../actions");
 const icons_1 = require("@ant-design/icons");
 const STEP_BUTTON_STYLES = {
-    padding: '0 .5x',
+    width: '4x',
     radius: {
         '': '0 (1r - 1bw) 0 0',
         down: '0 0 (1r - 1bw) 0',

package/cjs/components/forms/PasswordInput/PasswordInput.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.0
+ * @cube-dev/ui-kit v0.12.3
  * Released under the MIT license.
  */
 
@@ -28,7 +28,7 @@ function PasswordInput(props, ref) {
     const toggleType = (0, react_1.useCallback)((e) => {
         setType((type) => (type === 'password' ? 'text' : 'password'));
     }, []);
-    const wrappedSuffix = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [suffix, (0, jsx_runtime_1.jsx)(actions_1.Button, { type: "neutral", htmlType: "button", onPress: toggleType, placeSelf: "stretch", height: "auto", radius: "right (1r - 1bw)", padding: ".5x 1x", width: "auto", label: "Toggle masking", excludeFromTabOrder: true, icon: type === 'password' ? (0, jsx_runtime_1.jsx)(icons_1.EyeInvisibleOutlined, {}, void 0) : (0, jsx_runtime_1.jsx)(icons_1.EyeOutlined, {}, void 0) }, void 0)] }, void 0));
+    const wrappedSuffix = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [suffix, (0, jsx_runtime_1.jsx)(actions_1.Button, { type: "neutral", htmlType: "button", onPress: toggleType, placeSelf: "stretch", height: "auto", radius: "right", width: "4x", label: "Toggle masking", excludeFromTabOrder: true, icon: type === 'password' ? (0, jsx_runtime_1.jsx)(icons_1.EyeInvisibleOutlined, {}, void 0) : (0, jsx_runtime_1.jsx)(icons_1.EyeOutlined, {}, void 0) }, void 0)] }, void 0));
     return ((0, jsx_runtime_1.jsx)(TextInputBase_1.TextInputBase, { labelProps: labelProps, inputProps: inputProps, ref: ref, inputRef: inputRef, inputStyles: { paddingRight: '4x' }, type: type, suffixPosition: "after", suffix: wrappedSuffix, multiLine: multiLine, ...otherProps }, void 0));
 }
 /**

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.0
+ * @cube-dev/ui-kit v0.12.3
  * Released under the MIT license.
  */
 
@@ -21,7 +21,7 @@ const provider_1 = require("../../../provider");
 const Label_1 = require("../Label");
 const HiddenInput_1 = require("../../HiddenInput");
 const RadioGroup_1 = require("./RadioGroup");
-const Form_1 = require("../Form/Form");
+const Form_1 = require("../Form");
 const RadioWrapperElement = (0, tasty_1.tasty)({
     as: 'label',
     qa: 'RadioWrapper',

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.0
+ * @cube-dev/ui-kit v0.12.3
  * Released under the MIT license.
  */
 
@@ -14,7 +14,7 @@ const utils_1 = require("@react-spectrum/utils");
 const provider_1 = require("../../../provider");
 const radio_1 = require("@react-aria/radio");
 const radio_2 = require("@react-stately/radio");
-const Form_1 = require("../Form/Form");
+const Form_1 = require("../Form");
 const context_1 = require("./context");
 const tasty_1 = require("../../../tasty");
 const FieldWrapper_1 = require("../FieldWrapper");
@@ -43,7 +43,7 @@ function RadioGroup(props, ref) {
     props = (0, nullableValue_1.castNullableStringValue)(props);
     props = (0, provider_1.useProviderProps)(props);
     props = (0, Form_1.useFormProps)(props);
-    let { isDisabled, isRequired, necessityIndicator, label, extra, labelPosition = 'top', validationState, children, orientation = 'vertical', message, description, labelStyles, requiredMark = true, tooltip, isHidden, styles, groupStyles, insideForm, ...otherProps } = props;
+    let { isDisabled, isRequired, necessityIndicator, label, extra, labelPosition = 'top', validationState, children, orientation = 'vertical', message, description, labelStyles, requiredMark = true, tooltip, isHidden, styles, groupStyles, insideForm, labelSuffix, ...otherProps } = props;
     let domRef = (0, utils_1.useDOMRef)(ref);
     styles = (0, tasty_1.extractStyles)(otherProps, tasty_1.OUTER_STYLES, styles);
     groupStyles = (0, tasty_1.extractStyles)(otherProps, tasty_1.BLOCK_STYLES, groupStyles);
@@ -77,6 +77,7 @@ function RadioGroup(props, ref) {
             isHidden,
             Component: radioGroup,
             ref: domRef,
+            labelSuffix,
         } }, void 0));
 }
 /**

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

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

package/cjs/components/forms/SearchInput/SearchInput.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.0
+ * @cube-dev/ui-kit v0.12.3
  * Released under the MIT license.
  */
 
@@ -19,10 +19,20 @@ const provider_1 = require("../../../provider");
 const actions_1 = require("../../actions");
 const mapProps_1 = require("../../../utils/react/mapProps");
 const nullableValue_1 = require("../../../utils/react/nullableValue");
+const tasty_1 = require("../../../tasty");
+const ClearButton = (0, tasty_1.tasty)(actions_1.Button, {
+    icon: (0, jsx_runtime_1.jsx)(icons_1.CloseOutlined, {}, void 0),
+    styles: {
+        radius: 'right (1r - 1bw)',
+        width: '4x',
+        height: 'auto',
+        placeSelf: 'stretch',
+    },
+});
 exports.SearchInput = (0, react_1.forwardRef)((props, ref) => {
     props = (0, nullableValue_1.castNullableStringValue)(props);
     props = (0, provider_1.useProviderProps)(props);
-    let { isClearable, value } = props;
+    let { isClearable, value, validationState } = props;
     const localRef = (0, react_1.useRef)(null);
     const combinedRef = (0, react_2.useCombinedRefs)(ref, localRef);
     let inputRef = (0, react_1.useRef)(null);
@@ -34,12 +44,9 @@ exports.SearchInput = (0, react_1.forwardRef)((props, ref) => {
     }, [combinedRef, value]);
     let state = (0, searchfield_1.useSearchFieldState)(props);
     let { inputProps, clearButtonProps } = (0, searchfield_2.useSearchField)(props, state, inputRef);
-    return ((0, jsx_runtime_1.jsx)(TextInputBase_1.TextInputBase, { inputProps: inputProps, ref: ref, inputRef: inputRef, inputStyles: { paddingRight: '4x' }, type: "search", prefix: (0, jsx_runtime_1.jsx)(icons_1.SearchOutlined, {}, void 0), suffixPosition: "after", suffix: isClearable &&
+    return ((0, jsx_runtime_1.jsx)(TextInputBase_1.TextInputBase, { inputProps: inputProps, ref: ref, inputRef: inputRef, type: "search", icon: (0, jsx_runtime_1.jsx)(icons_1.SearchOutlined, {}, void 0), suffixPosition: "after", suffix: isClearable &&
             state.value !== '' &&
-            !props.isReadOnly && ((0, jsx_runtime_1.jsx)(actions_1.Button, { type: "clear", ...(0, mapProps_1.ariaToCubeButtonProps)(clearButtonProps), color: {
-                '': '#dark.50',
-                'hovered | pressed': '#purple-text',
-            }, radius: "right (1r - 1bw)", padding: ".5x 1x", placeSelf: "stretch", icon: (0, jsx_runtime_1.jsx)(icons_1.CloseOutlined, {}, void 0) }, void 0)), ...props }, void 0));
+            !props.isReadOnly && ((0, jsx_runtime_1.jsx)(ClearButton, { type: validationState === 'invalid' ? 'clear' : 'neutral', theme: validationState === 'invalid' ? 'danger' : undefined, ...(0, mapProps_1.ariaToCubeButtonProps)(clearButtonProps) }, void 0)), ...props }, void 0));
 });
 
         

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.0
+ * @cube-dev/ui-kit v0.12.3
  * Released under the MIT license.
  */
 
@@ -97,7 +97,7 @@ function Switch(props, ref) {
     props = (0, nullableValue_1.castNullableIsSelected)(props);
     props = (0, provider_1.useProviderProps)(props);
     props = (0, Form_1.useFormProps)(props);
-    let { qa, isDisabled = false, autoFocus, children, label, extra, labelProps, labelStyles, isLoading, insideForm, validationState, message, description, labelPosition, inputStyles, requiredMark = true, tooltip, ...otherProps } = props;
+    let { qa, isDisabled = false, autoFocus, children, label, extra, labelProps, labelStyles, isLoading, insideForm, validationState, message, description, labelPosition, inputStyles, requiredMark = true, tooltip, labelSuffix, ...otherProps } = props;
     label = label || children;
     let styles = (0, tasty_1.extractStyles)(props, tasty_1.OUTER_STYLES);
     inputStyles = (0, tasty_1.extractStyles)(props, tasty_1.BLOCK_STYLES, inputStyles);
@@ -135,6 +135,7 @@ function Switch(props, ref) {
                 description,
                 requiredMark,
                 tooltip,
+                labelSuffix,
                 Component: switchField,
                 ref: domRef,
             } }, void 0));

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

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

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

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