chore(Form): stabilize behavior (#112)

.changeset/two-seahorses-tan.md

@@ -0,0 +1,6 @@
+---
+"@cube-dev/ui-kit": patch
+---
+
+Stabilize Form behavior.
+Fix Switch component styles.

.size-limit.js

@@ -18,7 +18,7 @@ module.exports = [
         }),
       );
     },
-    limit: '190kB',
+    limit: '220kB',
   },
   {
     name: 'Tree shaking (just a Button)',

package.json

@@ -69,7 +69,7 @@
     "@react-aria/overlays": "^3.7.5",
     "@react-aria/radio": "^3.1.6",
     "@react-aria/searchfield": "^3.2.2",
-    "@react-aria/select": "^3.6.0",
+    "@react-aria/select": "^3.7.1",
     "@react-aria/separator": "3.1.6",
     "@react-aria/ssr": "^3.1.0",
     "@react-aria/switch": "^3.1.3",
@@ -84,10 +84,10 @@
     "@react-stately/overlays": "^3.1.6",
     "@react-stately/radio": "^3.3.2",
     "@react-stately/searchfield": "^3.1.3",
-    "@react-stately/select": "^3.1.3",
+    "@react-stately/select": "^3.2.1",
     "@react-stately/toggle": "^3.2.3",
     "@react-stately/tooltip": "^3.0.5",
-    "@react-stately/utils": "^3.3.0",
+    "@react-stately/utils": "^3.5.0",
     "@react-types/button": "^3.4.1",
     "@react-types/checkbox": "^3.2.5",
     "@react-types/combobox": "^3.2.1",
@@ -96,7 +96,7 @@
     "@react-types/numberfield": "^3.1.0",
     "@react-types/overlays": "^3.5.5",
     "@react-types/radio": "^3.1.2",
-    "@react-types/select": "^3.5.1",
+    "@react-types/select": "^3.6.1",
     "@react-types/shared": "^3.10.1",
     "@react-types/switch": "^3.1.2",
     "@react-types/textfield": "^3.3.0",
@@ -127,12 +127,12 @@
     "@storybook/addon-essentials": "6.5.3",
     "@storybook/addon-interactions": "6.5.3",
     "@storybook/addon-links": "6.5.3",
+    "@storybook/builder-webpack5": "6.5.3",
     "@storybook/jest": "^0.0.10",
+    "@storybook/manager-webpack5": "^6.5.3",
     "@storybook/react": "^6.5.3",
     "@storybook/test-runner": "^0.1.0",
     "@storybook/testing-library": "^0.0.11",
-    "@storybook/builder-webpack5": "6.5.3",
-    "@storybook/manager-webpack5": "^6.5.3",
     "@swc/core": "1.2.148",
     "@swc/jest": "0.2.20",
     "@testing-library/jest-dom": "^5.16.1",

src/components/forms/Form/Field.tsx

@@ -187,27 +187,22 @@ export function Field(allProps: CubeFieldProps) {
 
   let field = 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);
   }

src/components/forms/Form/useForm.tsx

@@ -2,9 +2,9 @@ import { useRef, useState } from 'react';
 import { dotize } from '../../../tasty';
 import { applyRules } from './validation';
 
-export type CubeFormData = { [key: string]: any };
+export type CubeFormData = { [key: string]: unknown };
 export type CubeFieldData = {
-  value?: any;
+  value?: unknown;
   name: string;
   errors: string[];
   touched?: boolean;
@@ -66,7 +66,7 @@ export class CubeFormInstance {
   }
 
   setFieldsValue(
-    newData: { [key: string]: any },
+    newData: { [key: string]: unknown },
     touched?: boolean,
     skipRender?: boolean,
     createFields = false,
@@ -110,7 +110,7 @@ export class CubeFormInstance {
     }
   }
 
-  getFieldValue(name): any {
+  getFieldValue(name): unknown {
     return this.fields[name] && this.fields[name].value;
   }
 
@@ -143,13 +143,15 @@ export class CubeFormInstance {
 
   setFieldValue(
     name: string,
-    value: any,
+    value: unknown,
     touched = false,
-    skipRender?: boolean,
+    skipRender = false,
   ) {
     const field = this.fields[name];
 
-    if (!field || isEqual(value, field.value)) return;
+    if (!field || isEqual(value, field.value)) {
+      return;
+    }
 
     field.value = value;
 
@@ -158,6 +160,8 @@ export class CubeFormInstance {
     }
 
     if (!skipRender) {
+      field.errors = [];
+
       this.forceReRender();
     }
 
@@ -170,7 +174,7 @@ export class CubeFormInstance {
     return this.fields[name];
   }
 
-  setInitialFieldsValue(values: { [key: string]: any }): void {
+  setInitialFieldsValue(values: { [key: string]: unknown }): void {
     this.initialFields = dotize.convert(values) || {};
   }
 
@@ -346,14 +350,14 @@ export function useForm(
     }
 
     form.ref = ref;
+  }
 
-    if (onSubmit) {
-      form.onSubmit = onSubmit;
-    }
+  if (onSubmit) {
+    formRef.current.onSubmit = onSubmit;
+  }
 
-    if (onValuesChange) {
-      form.onValuesChange = onValuesChange;
-    }
+  if (onValuesChange) {
+    formRef.current.onValuesChange = onValuesChange;
   }
 
   return [formRef.current];

src/components/forms/Switch/Switch.tsx

@@ -33,6 +33,9 @@ import {
 
 const BaseSwitchWrapperElement = tasty({
   qa: 'SwitchWrapper',
+  styles: {
+    position: 'relative',
+  },
 });
 
 const SwitchWrapperElement = tasty({

src/components/overlays/Tooltip/TooltipProvider.tsx

@@ -17,7 +17,7 @@ function TooltipProvider(props: CubeTooltipProviderProps) {
 
   useEffect(() => {
     setRendered(true);
-  });
+  }, []);
 
   return rendered ? (
     <TooltipTrigger {...otherProps}>

src/components/pickers/Select/Select.tsx

@@ -244,7 +244,6 @@ function Select<T extends object>(
     ...otherProps
   } = props;
   let state = useSelectState(props);
-
   const outerStyles = extractStyles(otherProps, OUTER_STYLES, styles);
 
   inputStyles = extractStyles(otherProps, BLOCK_STYLES, inputStyles);
@@ -264,7 +263,6 @@ function Select<T extends object>(
     targetRef: triggerRef,
     overlayRef: popoverRef,
     scrollRef: listBoxRef,
-    // @ts-ignore
     placement: `${direction} end`,
     shouldFlip: shouldFlip,
     isOpen: state.isOpen,