@cube-dev/ui-kit 0.9.11 → 0.10.2

package/es/components/forms/FieldWrapper.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.11
+ * @cube-dev/ui-kit v0.10.2
  * Released under the MIT license.
  */
 
@@ -11,14 +11,12 @@ import { Text } from '../content/Text';
 import { Label } from './Label';
 import { Grid } from '../layout/Grid';
 import { Paragraph } from '../content/Paragraph';
+import { tasty } from '../../tasty';
 import { TooltipProvider } from '../overlays/Tooltip/TooltipProvider';
 import { InfoCircleOutlined } from '@ant-design/icons';
 import { wrapNodeIfPlain } from '../../utils/react';
-import { styled } from '../../styled';
-const RawField = styled({
-    props: {
-        qa: 'Field',
-    },
+const FieldElement = tasty({
+    qa: 'Field',
     styles: {
         display: 'grid',
         gridColumns: {
@@ -47,10 +45,8 @@ const RawField = styled({
         },
     },
 });
-const RawMessage = styled({
-    props: {
-        qa: 'Field_Message',
-    },
+const MessageElement = tasty({
+    qa: 'Field_Message',
     styles: {
         preset: 'default',
         color: {
@@ -74,7 +70,7 @@ function FieldWrapper(props, ref) {
         invalid: validationState === 'invalid',
         valid: validationState === 'valid',
     };
-    return (_jsxs(RawField, { as: as || 'div', ref: ref, 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(RawMessage, { mods: mods, styles: messageStyles, role: validationState === 'invalid' ? 'alert' : undefined, children: message }, void 0))] }, void 0)] }, void 0));
+    return (_jsxs(FieldElement, { as: as || 'div', ref: ref, 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));
 }
 /**
  * A wrapper for form fields to provide additional decoration for inputs.

package/es/components/forms/FileInput/FileInput.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.11
+ * @cube-dev/ui-kit v0.10.2
  * Released under the MIT license.
  */
 
@@ -9,56 +9,56 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useCallback, useImperativeHandle, useRef, useState, } from 'react';
 import { useProviderProps } from '../../../provider';
 import { Action } from '../../actions/Action';
+import { CONTAINER_STYLES, extractStyles, tasty, } from '../../../tasty';
 import { createFocusableRef } from '@react-spectrum/utils';
 import { FieldWrapper } from '../FieldWrapper';
-import { extractStyles } from '../../../utils/styles';
-import { CONTAINER_STYLES } from '../../../styles/list';
-import { useContextStyles } from '../../../providers/StylesProvider';
-const DEFAULT_WRAPPER_STYLES = {
-    display: 'inline-flex',
-    position: 'relative',
-    preset: 't3',
-    padding: '.75x 1x',
-    gap: '1x',
-    flow: 'row',
-    placeItems: 'center start',
-    fill: {
-        '': '#white',
-        'drag-hover': '#purple.16',
-    },
-    border: true,
-    radius: true,
-    cursor: 'pointer',
-    overflow: 'hidden',
-    Button: {
-        radius: 'round',
+const FileInputElement = tasty(Action, {
+    styles: {
+        display: 'inline-flex',
+        position: 'relative',
+        preset: 't3',
+        padding: '.75x 1x',
+        gap: '1x',
+        flow: 'row',
+        placeItems: 'center start',
         fill: {
-            '': '#light',
-            'hovered | focused | pressed': '#purple-04',
-            disabled: '#light',
+            '': '#white',
+            'drag-hover': '#purple.16',
         },
-        color: '#dark',
-        padding: '.5x 1x',
-        transition: 'fill',
-    },
-    Placeholder: {
-        color: '#dark-02',
-    },
-    Value: {
-        color: '#dark-02',
-    },
-    Input: {
-        position: 'absolute',
-        top: '-50px',
-        right: 0,
-        bottom: 0,
-        left: 0,
-        radius: '@content-radius',
-        // opacity: 0,
+        border: true,
+        radius: true,
         cursor: 'pointer',
-        zIndex: 10,
+        overflow: 'hidden',
+        Button: {
+            radius: 'round',
+            fill: {
+                '': '#light',
+                'hovered | focused | pressed': '#purple-04',
+                disabled: '#light',
+            },
+            color: '#dark',
+            padding: '.5x 1x',
+            transition: 'fill',
+        },
+        Placeholder: {
+            color: '#dark-02',
+        },
+        Value: {
+            color: '#dark-02',
+        },
+        Input: {
+            position: 'absolute',
+            top: '-50px',
+            right: 0,
+            bottom: 0,
+            left: 0,
+            radius: '@content-radius',
+            // opacity: 0,
+            cursor: 'pointer',
+            zIndex: 10,
+        },
     },
-};
+});
 function extractContents(element, callback) {
     const files = element === null || element === void 0 ? void 0 : element.files;
     if (files && files.length > 0) {
@@ -77,11 +77,6 @@ function FileInput(props, ref) {
     let defaultInputRef = useRef(null);
     inputRef = inputRef || defaultInputRef;
     let styles = extractStyles(otherProps, CONTAINER_STYLES);
-    inputStyles = {
-        ...DEFAULT_WRAPPER_STYLES,
-        ...useContextStyles('FileInput', otherProps),
-        ...inputStyles,
-    };
     const onLocalChange = useCallback((event) => {
         const value = event.target.value;
         if (type === 'file') {
@@ -104,7 +99,7 @@ function FileInput(props, ref) {
             return inputRef === null || inputRef === void 0 ? void 0 : inputRef.current;
         },
     }));
-    const fileInput = (_jsxs(Action, { qa: qa || 'FileInput', styles: inputStyles, isDisabled: isDisabled, ref: domRef, mods: {
+    const fileInput = (_jsxs(FileInputElement, { qa: qa || 'FileInput', styles: inputStyles, isDisabled: isDisabled, ref: domRef, mods: {
             selected: !!value,
             'drag-hover': dragHover,
         }, onKeyDown: (e) => {

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.11
+ * @cube-dev/ui-kit v0.10.2
  * Released under the MIT license.
  */
 
@@ -83,7 +83,7 @@ function getValueProps(type, value, onChange) {
 }
 export function Field(allProps) {
     const props = useFormProps(allProps);
-    let { defaultValue, type: inputType, id, idPrefix, children, name, form, rules, label, extra, validateTrigger, validationState, necessityLabel, necessityIndicator, shouldUpdate, message, description, tooltip, isHidden, } = props;
+    let { defaultValue, type: inputType, id, idPrefix, children, name, form, rules, label, extra, validateTrigger, validationState, necessityLabel, necessityIndicator, shouldUpdate, message, description, tooltip, isHidden, styles, } = props;
     const nonInput = !name;
     const fieldName = name != null ? (Array.isArray(name) ? name.join('.') : name) : '';
     let firstRunRef = useRef(true);
@@ -104,25 +104,20 @@ export function Field(allProps) {
         };
     }, []);
     let field = form === null || form === void 0 ? void 0 : form.getFieldInstance(fieldName);
+    if (field) {
+        field.rules = rules;
+    }
     let isRequired = rules && !!rules.find((rule) => rule.required);
     useEffect(() => {
         if (!form)
             return;
         if (field) {
-            field.rules = rules;
             form.forceReRender();
         }
         else {
             form.createField(fieldName);
         }
     }, [field]);
-    useEffect(() => {
-        if (!form)
-            return;
-        if (field) {
-            field.rules = rules;
-        }
-    }, [rules]);
     if (typeof children === 'function') {
         children = children(form);
     }
@@ -130,7 +125,7 @@ export function Field(allProps) {
         return null;
     let child = Children.only(children);
     if (nonInput) {
-        return (_jsx(FieldWrapper, { isHidden: isHidden, validationState: validationState, necessityIndicator: necessityIndicator, necessityLabel: necessityLabel, isRequired: isRequired, label: label, extra: extra, tooltip: tooltip, message: message, description: description, Component: child }, void 0));
+        return (_jsx(FieldWrapper, { isHidden: isHidden, validationState: validationState, necessityIndicator: necessityIndicator, necessityLabel: necessityLabel, isRequired: isRequired, label: label, extra: extra, tooltip: tooltip, message: message, description: description, Component: child, styles: styles }, void 0));
     }
     if (!fieldName) {
         console.error('invalid form name:', fieldName);

package/es/components/forms/Form/Form.js

@@ -1,22 +1,29 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.11
+ * @cube-dev/ui-kit v0.10.2
  * Released under the MIT license.
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useDOMRef } from '@react-spectrum/utils';
 import { Provider, useProviderProps } from '../../../provider';
-import { createContext, useContext, useRef, forwardRef, useEffect, } from 'react';
-import { Base } from '../../Base';
-import { extractStyles } from '../../../utils/styles';
-import { CONTAINER_STYLES } from '../../../styles/list';
-import { filterBaseProps } from '../../../utils/filterBaseProps';
+import { createContext, forwardRef, useContext, useEffect, useRef, } from 'react';
+import { CONTAINER_STYLES, extractStyles, filterBaseProps, tasty, } from '../../../tasty';
 import { useForm } from './useForm';
 import { useCombinedRefs } from '../../../utils/react';
 import { timeout } from '../../../utils/promise';
 export const FormContext = createContext({});
+const FormElement = tasty({
+    as: 'form',
+    qa: 'Form',
+    styles: {
+        display: 'block',
+        flow: 'column',
+        gap: '2x',
+        '@label-width': '25x',
+    },
+});
 export function useFormProps(props) {
     const ctx = useContext(FormContext);
     return { ...ctx, ...props };
@@ -28,16 +35,9 @@ const formPropNames = new Set([
     'method',
     'target',
 ]);
-const DEFAULT_STYLES = {
-    display: 'block',
-    flow: 'column',
-    gap: '2x',
-    '@label-width': '25x',
-};
 function Form(props, ref) {
     props = useProviderProps(props);
     let { qa, name, children, labelPosition = 'top', isRequired, necessityIndicator, isDisabled, isReadOnly, validationState, labelStyles, validateTrigger, defaultValues, onValuesChange, requiredMark = true, form, labelWidth, onSubmit, onSubmitFailed, ...otherProps } = props;
-    let styles;
     const firstRunRef = useRef(true);
     ref = useCombinedRefs(ref);
     let onSubmitCallback;
@@ -48,8 +48,8 @@ function Form(props, ref) {
                 e && (e === null || e === void 0 ? void 0 : e.stopPropagation) && (e === null || e === void 0 ? void 0 : e.stopPropagation());
                 if (e.nativeEvent) {
                     const evt = e.nativeEvent;
-                    if (evt.submitter
-                        && evt.submitter.getAttribute('type') !== 'submit') {
+                    if (evt.submitter &&
+                        evt.submitter.getAttribute('type') !== 'submit') {
                         return;
                     }
                 }
@@ -82,7 +82,7 @@ function Form(props, ref) {
         onSubmit: onSubmitCallback,
         onValuesChange,
     });
-    styles = extractStyles(otherProps, CONTAINER_STYLES, DEFAULT_STYLES);
+    let styles = extractStyles(otherProps, CONTAINER_STYLES);
     if (labelWidth) {
         styles['@label-width'] = labelWidth;
     }
@@ -108,7 +108,7 @@ function Form(props, ref) {
             form === null || form === void 0 ? void 0 : form.setInitialFieldsValue(defaultValues);
         }
     }, [defaultValues]);
-    return (_jsx(Base, { as: "form", qa: "Form", ...filterBaseProps(otherProps, { propNames: formPropNames }), onSubmit: onSubmitCallback, noValidate: true, styles: styles, ref: domRef, mods: {
+    return (_jsx(FormElement, { ...filterBaseProps(otherProps, { propNames: formPropNames }), onSubmit: onSubmitCallback, noValidate: true, styles: styles, ref: domRef, mods: {
             'has-sider': labelPosition === 'side',
         }, 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));
 }

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

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

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

@@ -1,12 +1,12 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.11
+ * @cube-dev/ui-kit v0.10.2
  * Released under the MIT license.
  */
 
 import { useRef, useState } from 'react';
-import { dotize } from '../../../utils/dotize';
+import { dotize } from '../../../tasty';
 import { applyRules } from './validation';
 function setValue(obj, path, value) {
     let a = path.split('.');
@@ -109,15 +109,17 @@ export class CubeFormInstance {
             return map;
         }, {});
     }
-    setFieldValue(name, value, touched = false, skipRender) {
+    setFieldValue(name, value, touched = false, skipRender = false) {
         const field = this.fields[name];
-        if (!field || isEqual(value, field.value))
+        if (!field || isEqual(value, field.value)) {
             return;
+        }
         field.value = value;
         if (touched) {
             field.touched = touched;
         }
         if (!skipRender) {
+            field.errors = [];
             this.forceReRender();
         }
         if (touched) {
@@ -262,12 +264,12 @@ export function useForm(form, ref, options = {}) {
             form = formRef.current = new CubeFormInstance(forceReRender);
         }
         form.ref = ref;
-        if (onSubmit) {
-            form.onSubmit = onSubmit;
-        }
-        if (onValuesChange) {
-            form.onValuesChange = onValuesChange;
-        }
+    }
+    if (onSubmit) {
+        formRef.current.onSubmit = onSubmit;
+    }
+    if (onValuesChange) {
+        formRef.current.onValuesChange = onValuesChange;
     }
     return [formRef.current];
 }

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

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

package/es/components/forms/Input/Input.js

@@ -0,0 +1,25 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.10.2
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { TextInput } from '../TextInput/TextInput';
+import { PasswordInput } from '../PasswordInput/PasswordInput';
+import { NumberInput } from '../NumberInput/NumberInput';
+import { FileInput } from '../FileInput/FileInput';
+import { TextArea } from '../TextArea/TextArea';
+export const Input = Object.assign(forwardRef(function Input(props, ref) {
+    return _jsx(TextInput, { ref: ref, ...props }, void 0);
+}), {
+    Text: TextInput,
+    Password: PasswordInput,
+    Number: NumberInput,
+    TextArea: TextArea,
+    File: FileInput,
+});
+
+        

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

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

package/es/components/forms/Label.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.11
+ * @cube-dev/ui-kit v0.10.2
  * Released under the MIT license.
  */
 
@@ -9,11 +9,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { useDOMRef } from '@react-spectrum/utils';
 import { forwardRef } from 'react';
 import { useProviderProps } from '../../provider';
-import { extractStyles } from '../../utils/styles';
-import { CONTAINER_STYLES } from '../../styles/list';
-import { Base } from '../Base';
-import { useContextStyles } from '../../providers/StylesProvider';
-import { filterBaseProps } from '../../utils/filterBaseProps';
+import { CONTAINER_STYLES, extractStyles, filterBaseProps, tasty, } from '../../tasty';
 const REQUIRED_ICON = (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", version: "1.1", x: "0px", y: "0px", viewBox: "0 0 100 125", style: {
         // @ts-ignore
         enableBackground: 'new 0 0 100 100',
@@ -54,15 +50,16 @@ export const LABEL_STYLES = {
         side: '@(label-width, initial)',
     },
 };
+const LabelElement = tasty({
+    as: 'label',
+    qa: 'Label',
+    styles: LABEL_STYLES,
+});
 function Label(props, ref) {
     props = useProviderProps(props);
     let { as, qa, children, labelPosition = 'top', isRequired, necessityIndicator = isRequired != null ? 'icon' : null, includeNecessityIndicatorInAccessibilityName = false, htmlFor, isDisabled, validationState, for: labelFor, onClick, ...otherProps } = props;
     let domRef = useDOMRef(ref);
-    const contextStyles = useContextStyles('Label', otherProps);
-    const styles = extractStyles(otherProps, CONTAINER_STYLES, {
-        ...LABEL_STYLES,
-        ...contextStyles,
-    });
+    const styles = extractStyles(otherProps, CONTAINER_STYLES);
     let formatMessage = (message) => INTL_MESSAGES[message];
     let necessityLabel = isRequired
         ? formatMessage('(required)')
@@ -70,14 +67,14 @@ function Label(props, ref) {
     let icon = (_jsx("span", { "aria-label": includeNecessityIndicatorInAccessibilityName
             ? formatMessage('(required)')
             : undefined, children: REQUIRED_ICON }, void 0));
-    return (_jsx(Base, { as: as || 'label', qa: qa || 'Label', ...filterBaseProps(otherProps), onClick: onClick, ref: domRef, styles: styles, htmlFor: labelFor || htmlFor, mods: {
+    return (_jsx(LabelElement, { ...filterBaseProps(otherProps), onClick: onClick, ref: domRef, styles: styles, htmlFor: labelFor || htmlFor, mods: {
             side: labelPosition === 'side',
             disabled: isDisabled,
             invalid: validationState === 'invalid',
             valid: validationState === 'valid',
-        }, children: typeof children !== 'string' ? (children) : (_jsxs(_Fragment, { children: [children, (necessityIndicator === 'label'
-                    || (necessityIndicator === 'icon' && isRequired))
-                    && ' \u200b', necessityIndicator === 'label' && (_jsx("span", { "aria-hidden": !includeNecessityIndicatorInAccessibilityName
+        }, children: typeof children !== 'string' ? (children) : (_jsxs(_Fragment, { children: [children, (necessityIndicator === 'label' ||
+                    (necessityIndicator === 'icon' && isRequired)) &&
+                    ' \u200b', necessityIndicator === 'label' && (_jsx("span", { "aria-hidden": !includeNecessityIndicatorInAccessibilityName
                         ? isRequired
                         : undefined, children: necessityLabel }, void 0)), necessityIndicator === 'icon' && isRequired && icon] }, void 0)) }, void 0));
 }

package/es/components/forms/NumberInput/NumberInput.js

@@ -1,22 +1,22 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.11
+ * @cube-dev/ui-kit v0.10.2
  * Released under the MIT license.
  */
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useRef } from 'react';
-import { useFormProps } from '../Form/Form';
+import { useFormProps } from '../Form';
 import { useProviderProps } from '../../../provider';
 import { useLocale } from '@react-aria/i18n';
 import { TextInputBase, } from '../TextInput/TextInputBase';
 import { useNumberFieldState } from '@react-stately/numberfield';
 import { useNumberField } from '@react-aria/numberfield';
 import { StepButton } from './StepButton';
-import { styled } from '../../../styled';
+import { tasty } from '../../../tasty';
 import { castNullableNumberValue, } from '../../../utils/react/nullableValue';
-const StepperContainer = styled({
+const StepperContainer = tasty({
     styles: {
         display: 'grid',
         gridColumns: '1fr',

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

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

package/es/components/forms/PasswordInput/PasswordInput.js

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