@gaddario98/react-core 2.1.2 → 2.1.4

package/dist/form/index.d.ts

@@ -1,32 +1,11 @@
 import * as _gaddario98_react_state from '../state/index';
 import * as React$1 from 'react';
-import React__default, { PropsWithChildren, JSX } from 'react';
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default, { JSX, PropsWithChildren } from 'react';
 import * as _tanstack_react_form from '@tanstack/react-form';
 import { FormOptions, DeepKeys, DeepValue, FieldApi, FieldState, ReactFormExtendedApi } from '@tanstack/react-form';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as jotai from 'jotai';
 
-interface FormNotificationMessage {
-    message: string;
-    type: 'success' | 'error' | 'info' | 'warning';
-    autoHideDuration?: number;
-    textTransOption?: Record<string, unknown>;
-    ns?: string;
-}
-interface FormTranslationOptions {
-    [key: string]: string | number | boolean | undefined;
-    ns?: string;
-}
-interface FormConfigProps {
-    formFieldContainer: React.FC<PropsWithChildren>;
-    showNotification?: (notification: FormNotificationMessage) => void;
-    translateText?: (key: string, options?: FormTranslationOptions) => string;
-}
-declare const formConfigAtom: _gaddario98_react_state.PrimitiveAtom<FormConfigProps>;
-declare const useFormConfigValue: () => FormConfigProps;
-declare const useFormConfigState: () => [FormConfigProps, (value: FormConfigProps) => void];
-declare const useFormConfigReset: () => () => void;
-
 interface UseCustomFormOptions<TData extends FieldValues> extends FormOptions<TData, any, any, any, any, any, any, any, any, any, any, any> {
     formId?: string;
 }
@@ -82,13 +61,13 @@ interface Submit<T extends FieldValues = FieldValues, K extends SubmitKeysArg<T>
     isInDraggableView?: boolean;
     isLoading?: boolean;
     usedBoxes?: number;
-    type?: 'submit' | 'button';
+    type?: "submit" | "button";
     key?: string;
     component?: (props: {
         onClick: () => void;
         index: number;
         key: string;
-        type: 'submit' | 'button';
+        type: "submit" | "button";
     }) => React__default.JSX.Element;
 }
 interface ViewSettingsContainerProps {
@@ -147,13 +126,23 @@ interface FieldComponentProps<T extends FieldValues> {
     label?: string;
     helperMessage?: string;
 }
-type FormManagerConfig<T extends FieldValues> = Omit<FormFieldConfig<T>, 'field' | 'fieldState' | 'fieldValues'>;
+type FormManagerConfig<T extends FieldValues> = Omit<FormFieldConfig<T>, "field" | "fieldState" | "fieldValues">;
 type MappedFormItemsFunction<F extends FieldValues, ComponentType> = (props: FormFunctionProps<F>) => ComponentType;
 type Rules = {
     validate?: (value: any) => string | undefined | Promise<string | undefined>;
     onChange?: (value: any) => void;
     onBlur?: () => void;
     onMount?: (value: any) => void;
+    /** @deprecated Use validate instead */
+    required?: {
+        value: boolean;
+        message: string;
+    } | boolean | string;
+    /** @deprecated Use validate instead */
+    pattern?: RegExp | {
+        value: RegExp;
+        message: string;
+    };
 };
 type FormFieldConfig<T extends FieldValues> = {
     name: any;
@@ -162,7 +151,7 @@ type FormFieldConfig<T extends FieldValues> = {
     field: GenericFieldApi<T>;
     fieldState: GenericFieldState<T>;
     containerStyle?: string;
-    component: (props: Omit<FieldComponentProps<T>, 'formValues'>) => React__default.JSX.Element;
+    component: (props: Omit<FieldComponentProps<T>, "formValues">) => React__default.JSX.Element;
     container?: React__default.FC<PropsWithChildren>;
     ns?: string;
     errorNs?: string;
@@ -196,6 +185,31 @@ interface FormFieldProps<T extends FieldValues> {
     container?: React__default.FC<PropsWithChildren>;
 }
 
+interface FormNotificationMessage {
+    message: string;
+    type: "success" | "error" | "info" | "warning";
+    autoHideDuration?: number;
+    textTransOption?: Record<string, unknown>;
+    ns?: string;
+    id?: string;
+}
+interface FormTranslationOptions {
+    [key: string]: string | number | boolean | undefined;
+    ns?: string;
+}
+interface FormConfigProps {
+    container?: React.ComponentType<ViewSettingsContainerProps>;
+    submitContainer?: React.ComponentType<ViewSettingsContainerProps>;
+    bodyContainer?: React.ComponentType<ViewSettingsContainerProps>;
+    formFieldContainer: React.FC<PropsWithChildren>;
+    showNotification?: (notification: FormNotificationMessage) => void;
+    translateText?: (key: string, options?: FormTranslationOptions) => string;
+}
+declare const formConfigAtom: _gaddario98_react_state.PrimitiveAtom<FormConfigProps>;
+declare const useFormConfigValue: () => FormConfigProps;
+declare const useFormConfigState: () => [FormConfigProps, (value: FormConfigProps) => void];
+declare const useFormConfigReset: () => () => void;
+
 interface DefaultFormContainerProps {
     children: React.ReactNode;
 }

package/dist/form/index.js

@@ -1,4 +1,4 @@
-'use strict';var index_ts=require('../state/index.js'),compilerRuntime=require('react/compiler-runtime'),jsxRuntime=require('react/jsx-runtime'),react=require('react'),jotai=require('jotai'),utils=require('jotai/utils'),equal=require('fast-deep-equal'),reactForm=require('@tanstack/react-form');const DefaultContainer$1 = ({
+'use strict';var index_ts=require('../state/index.js'),compilerRuntime=require('react/compiler-runtime'),jsxRuntime=require('react/jsx-runtime'),react=require('react'),jotai=require('jotai'),utils=require('jotai/utils'),equal=require('fast-deep-equal'),reactForm=require('@tanstack/react-form'),withSelector_js=require('use-sync-external-store/shim/with-selector.js');const DefaultContainer$1 = ({
   children
 }) => {
   return children;
@@ -13,7 +13,7 @@ const {
   useState: useFormConfigState,
   useReset: useFormConfigReset
 } = index_ts.atomStateGenerator({
-  key: 'formConfig',
+  key: "formConfig",
   defaultValue: _formConfig,
   persist: false
 });const createDefaultContainer = () => {
@@ -263,8 +263,59 @@ const useFormValues = ({
     get,
     set
   };
-};const trimObject = obj => Object.entries(obj !== null && obj !== void 0 ? obj : {}).reduce((prev, [key, val]) => Object.assign(Object.assign({}, prev), {
-  [key]: typeof val === 'string' && !['password', 'pPassword'].includes(key) ? val.trim() : val
+};function useStore(store, selector = (d) => d, options = {}) {
+  const equal = options.equal ?? shallow;
+  const slice = withSelector_js.useSyncExternalStoreWithSelector(
+    store.subscribe,
+    () => store.state,
+    () => store.state,
+    selector,
+    equal
+  );
+  return slice;
+}
+function shallow(objA, objB) {
+  if (Object.is(objA, objB)) {
+    return true;
+  }
+  if (typeof objA !== "object" || objA === null || typeof objB !== "object" || objB === null) {
+    return false;
+  }
+  if (objA instanceof Map && objB instanceof Map) {
+    if (objA.size !== objB.size) return false;
+    for (const [k, v] of objA) {
+      if (!objB.has(k) || !Object.is(v, objB.get(k))) return false;
+    }
+    return true;
+  }
+  if (objA instanceof Set && objB instanceof Set) {
+    if (objA.size !== objB.size) return false;
+    for (const v of objA) {
+      if (!objB.has(v)) return false;
+    }
+    return true;
+  }
+  if (objA instanceof Date && objB instanceof Date) {
+    if (objA.getTime() !== objB.getTime()) return false;
+    return true;
+  }
+  const keysA = getOwnKeys(objA);
+  if (keysA.length !== getOwnKeys(objB).length) {
+    return false;
+  }
+  for (let i = 0; i < keysA.length; i++) {
+    if (!Object.prototype.hasOwnProperty.call(objB, keysA[i]) || !Object.is(objA[keysA[i]], objB[keysA[i]])) {
+      return false;
+    }
+  }
+  return true;
+}
+function getOwnKeys(obj) {
+  return Object.keys(obj).concat(
+    Object.getOwnPropertySymbols(obj)
+  );
+}const trimObject = obj => Object.entries(obj !== null && obj !== void 0 ? obj : {}).reduce((prev, [key, val]) => Object.assign(Object.assign({}, prev), {
+  [key]: typeof val === "string" && !["password", "pPassword"].includes(key) ? val.trim() : val
 }), {});
 const RenderField = t0 => {
   const $ = compilerRuntime.c(9);
@@ -319,7 +370,7 @@ const DynamicFieldItem = ({
     formId
   });
   const fieldProps = react.useMemo(() => {
-    if (typeof item === 'function') {
+    if (typeof item === "function") {
       return item({
         get,
         set
@@ -331,7 +382,7 @@ const DynamicFieldItem = ({
   const isHidden = react.useMemo(() => {
     if (!fieldProps.hidden) {
       return false;
-    } else if (typeof fieldProps.hidden === 'function') {
+    } else if (typeof fieldProps.hidden === "function") {
       return fieldProps.hidden({
         get,
         set
@@ -343,7 +394,7 @@ const DynamicFieldItem = ({
   const rules = react.useMemo(() => {
     if (!fieldProps.rules) {
       return undefined;
-    } else if (typeof fieldProps.rules === 'function') {
+    } else if (typeof fieldProps.rules === "function") {
       return fieldProps.rules({
         get,
         set
@@ -389,7 +440,7 @@ const SubmitItem = ({
     const keys = item.values;
     if (keys && keys.length > 0) {
       // Validate only specific fields
-      await Promise.all(keys.map(key => formControl.validateField(key, 'change')));
+      await Promise.all(keys.map(key => formControl.validateField(key, "change")));
       const hasError = keys.some(key_0 => {
         // This is a simplified check. TanStack form errors might be structured differently.
         // You might need deep checking if errors are nested objects.
@@ -401,14 +452,14 @@ const SubmitItem = ({
       isValid = !hasError;
     } else {
       // Validate all
-      await formControl.validateAllFields('submit');
+      await formControl.validateAllFields("submit");
       isValid = formControl.state.isValid;
     }
     if (!isValid) {
-      onInvalidHandle(formControl.state.errors, item);
+      onInvalidHandle(handlersRef.current.errors, item);
       return;
     }
-    const values = formControl.state.values;
+    const values = handlersRef.current.values;
     // Call handlers
     await createSubmitHandler(item)(values);
   }, [item, handlersRef]);
@@ -417,7 +468,7 @@ const SubmitItem = ({
   return jsxRuntime.jsx(Component, {
     onClick: handleClick,
     index: index,
-    type: item.type || 'button'
+    type: item.type || "button"
   }, `submit-${index}`);
 };
 const useFormManager = ({
@@ -428,12 +479,11 @@ const useFormManager = ({
   formOptions,
   onValuesChange,
   globalErrorNs,
-  id = 'form-manager'
+  id = "form-manager"
 }) => {
   const formControl = useJotaiForm(formOptions);
-  const formState = react.useMemo(() => formControl.state, [formControl.state]);
-  const errors = react.useMemo(() => formState.errors, [formState.errors]);
-  const values = react.useMemo(() => formState.values, [formState.values]);
+  const errors = useStore(formControl.store, state => state.errors);
+  const values = useStore(formControl.store, state_0 => state_0.values);
   const setFormState = useSetFormState(id);
   const {
     showNotification
@@ -442,17 +492,9 @@ const useFormManager = ({
   react.useEffect(() => {
     setFormState({
       setValue,
-      formValues: formState.values
-    });
-    const unsubscribe = formControl.store.subscribe(store => {
-      setFormState({
-        formValues: store.currentVal.values
-      });
+      formValues: values
     });
-    return () => {
-      unsubscribe();
-    }; /**/
-  }, [formControl.store, setValue, formState.values, setFormState]);
+  }, [setFormState, setValue, values]);
   const handleNotification = react.useCallback(props => {
     if (props.message) {
       showNotification === null || showNotification === void 0 ? void 0 : showNotification(props);
@@ -476,13 +518,13 @@ const useFormManager = ({
     if (submitConfig_0.onSuccess) {
       return await submitConfig_0.onSuccess(filteredData);
     }
-    throw new Error('No submit handler provided');
+    throw new Error("No submit handler provided");
   }, [filterFormData]);
   const handleError = react.useCallback((error, submitConfig_1) => {
     if (submitConfig_1.onError) {
       submitConfig_1.onError(error);
     }
-    const notificationProps = typeof (notification === null || notification === void 0 ? void 0 : notification.error) === 'function' ? notification.error(error.message) : notification === null || notification === void 0 ? void 0 : notification.error;
+    const notificationProps = typeof (notification === null || notification === void 0 ? void 0 : notification.error) === "function" ? notification.error(error.message) : notification === null || notification === void 0 ? void 0 : notification.error;
     if (notificationProps === null || notificationProps === void 0 ? void 0 : notificationProps.message) {
       handleNotification(notificationProps);
     }
@@ -490,7 +532,7 @@ const useFormManager = ({
   const createSubmitHandler = react.useCallback(submitConfig_2 => async dataSubmit => {
     try {
       const res = await processSubmit(trimObject(dataSubmit), submitConfig_2);
-      const notificationProps_0 = typeof (notification === null || notification === void 0 ? void 0 : notification.success) === 'function' ? notification.success(res) : notification === null || notification === void 0 ? void 0 : notification.success;
+      const notificationProps_0 = typeof (notification === null || notification === void 0 ? void 0 : notification.success) === "function" ? notification.success(res) : notification === null || notification === void 0 ? void 0 : notification.success;
       if (notificationProps_0 === null || notificationProps_0 === void 0 ? void 0 : notificationProps_0.message) {
         handleNotification(notificationProps_0);
       }
@@ -502,7 +544,7 @@ const useFormManager = ({
   }, [processSubmit, notification, handleNotification, handleError]);
   const onInvalidHandle = react.useCallback((err, submitConfig_3) => {
     onInvalid === null || onInvalid === void 0 ? void 0 : onInvalid(err);
-    handleError(new Error('invalidData'), submitConfig_3);
+    handleError(new Error("invalidData"), submitConfig_3);
   }, [handleError, onInvalid]);
   const handlersRef = react.useRef({
     formControl,
@@ -510,7 +552,9 @@ const useFormManager = ({
     createSubmitHandler,
     setValue: formControl.setFieldValue,
     trigger: formControl.validateField,
-    onValuesChange
+    onValuesChange,
+    values,
+    errors
   });
   react.useEffect(() => {
     handlersRef.current.onInvalidHandle = onInvalidHandle;
@@ -519,9 +563,13 @@ const useFormManager = ({
     handlersRef.current.trigger = formControl.validateField;
     handlersRef.current.onValuesChange = onValuesChange;
   }, [onInvalidHandle, createSubmitHandler, formControl, onValuesChange]);
+  react.useEffect(() => {
+    handlersRef.current.values = values;
+    handlersRef.current.errors = errors;
+  }, [values, errors]);
   const fields = react.useMemo(() => data.map((item, index) => {
     var _a, _b;
-    const staticItem = typeof item === 'function' ? null : item;
+    const staticItem = typeof item === "function" ? null : item;
     return {
       index: (_a = staticItem === null || staticItem === void 0 ? void 0 : staticItem.index) !== null && _a !== void 0 ? _a : index,
       element: jsxRuntime.jsx(DynamicFieldItem, {
@@ -656,9 +704,14 @@ const FormManager = t0 => {
     t9 = $[21];
   }
   const renderSubmit = t9;
-  const Container = (viewSettings === null || viewSettings === void 0 ? void 0 : viewSettings.container) || DefaultFormContainer;
-  const BodyContainer = (viewSettings === null || viewSettings === void 0 ? void 0 : viewSettings.bodyContainer) || exports.DefaultContainer;
-  const SubmitContainer = (viewSettings === null || viewSettings === void 0 ? void 0 : viewSettings.submitContainer) || exports.DefaultContainer;
+  const {
+    container,
+    bodyContainer,
+    submitContainer
+  } = useFormConfigValue();
+  const Container = (viewSettings === null || viewSettings === void 0 ? void 0 : viewSettings.container) || container || DefaultFormContainer;
+  const BodyContainer = (viewSettings === null || viewSettings === void 0 ? void 0 : viewSettings.bodyContainer) || bodyContainer || exports.DefaultContainer;
+  const SubmitContainer = (viewSettings === null || viewSettings === void 0 ? void 0 : viewSettings.submitContainer) || submitContainer || exports.DefaultContainer;
   let t10;
   if ($[22] !== BodyContainer || $[23] !== Container || $[24] !== SubmitContainer || $[25] !== render || $[26] !== renderSubmit || $[27] !== viewSettings) {
     t10 = jsxRuntime.jsxs(Container, Object.assign({}, (viewSettings === null || viewSettings === void 0 ? void 0 : viewSettings.containerProps) || {}, {