@ttoss/forms 0.14.28 → 0.14.30

package/dist/esm/index.js

@@ -305,4 +305,101 @@ var FormFieldTextarea = ({
     }
   });
 };
-export { Form, FormField, FormFieldCheckbox, FormFieldInput, FormFieldRadio, FormFieldSelect, FormFieldTextarea, yup, yupResolver };
+
+// src/FormGroup.tsx
+import { Flex as Flex2 } from "@ttoss/ui";
+import React3 from "react";
+import { jsx as jsx9 } from "react/jsx-runtime";
+var FormGroupLevelsManagerContext = /*#__PURE__*/React3.createContext({
+  registerChild: () => {
+    return null;
+  }
+});
+var FormGroupLevelsManager = ({
+  children
+}) => {
+  const [levelsLength, setLevelsLength] = React3.useState(0);
+  const registerChild = React3.useCallback(level => {
+    if (level + 1 > levelsLength) {
+      setLevelsLength(level + 1);
+    }
+  }, [levelsLength]);
+  return /* @__PURE__ */jsx9(FormGroupLevelsManagerContext.Provider, {
+    value: {
+      levelsLength,
+      registerChild
+    },
+    children
+  });
+};
+var FormGroupContext = /*#__PURE__*/React3.createContext({});
+var useFormGroup = () => {
+  const {
+    parentLevel
+  } = React3.useContext(FormGroupContext);
+  const {
+    levelsLength
+  } = React3.useContext(FormGroupLevelsManagerContext);
+  return {
+    level: parentLevel,
+    levelsLength
+  };
+};
+var FormGroupWrapper = ({
+  children
+}) => {
+  const {
+    level,
+    levelsLength
+  } = useFormGroup();
+  const {
+    registerChild
+  } = React3.useContext(FormGroupLevelsManagerContext);
+  React3.useEffect(() => {
+    if (typeof level === "number") {
+      registerChild(level);
+    }
+  }, [level, registerChild]);
+  const sx = React3.useMemo(() => {
+    return {
+      flexDirection: "column",
+      width: "100%",
+      gap: "md",
+      paddingLeft: ({
+        space
+      }) => {
+        if (!level || !levelsLength) {
+          return 0;
+        }
+        const value = levelsLength / level;
+        return `calc(${space["lg"]} / ${value})`;
+      }
+    };
+  }, [level, levelsLength]);
+  return /* @__PURE__ */jsx9(Flex2, {
+    "aria-level": level,
+    sx,
+    children
+  });
+};
+var FormGroup = ({
+  children
+}) => {
+  const {
+    level
+  } = useFormGroup();
+  const currentLevel = level === void 0 ? 0 : level + 1;
+  return /* @__PURE__ */jsx9(FormGroupContext.Provider, {
+    value: {
+      parentLevel: currentLevel
+    },
+    children: currentLevel === 0 ? /* @__PURE__ */jsx9(FormGroupLevelsManager, {
+      children: /* @__PURE__ */jsx9(FormGroupWrapper, {
+        children
+      })
+    }) : /* @__PURE__ */jsx9(FormGroupWrapper, {
+      children
+    })
+  });
+};
+export { Form, FormField, FormFieldCheckbox, FormFieldInput, FormFieldRadio, FormFieldSelect, FormFieldTextarea, FormGroup, useFormGroup, yup, yupResolver };

package/dist/index.d.ts

@@ -5,6 +5,7 @@ export * from 'react-hook-form';
 import * as yup from 'yup';
 export { yup };
 import * as React from 'react';
+import React__default from 'react';
 import * as _ttoss_ui from '@ttoss/ui';
 import { BoxProps, CheckboxProps, LabelProps, RadioProps, TextareaProps } from '@ttoss/ui';
 import * as theme_ui from 'theme-ui';
@@ -63,4 +64,13 @@ declare const FormFieldTextarea: <TFieldValues extends FieldValues = FieldValues
     name: TName;
 } & TextareaProps) => JSX.Element;
 
-export { Form, FormField, FormFieldCheckbox, FormFieldInput, FormFieldRadio, FormFieldSelect, FormFieldTextarea };
+declare const useFormGroup: () => {
+    level: number | undefined;
+    levelsLength: number | undefined;
+};
+type FormGroupProps = {
+    children: React__default.ReactNode;
+};
+declare const FormGroup: ({ children }: FormGroupProps) => JSX.Element;
+
+export { Form, FormField, FormFieldCheckbox, FormFieldInput, FormFieldRadio, FormFieldSelect, FormFieldTextarea, FormGroup, useFormGroup };

package/dist/index.js

@@ -46,6 +46,8 @@ __export(src_exports, {
   FormFieldRadio: () => FormFieldRadio,
   FormFieldSelect: () => FormFieldSelect,
   FormFieldTextarea: () => FormFieldTextarea,
+  FormGroup: () => FormGroup,
+  useFormGroup: () => useFormGroup,
   yup: () => yup,
   yupResolver: () => import_yup.yupResolver
 });
@@ -354,6 +356,103 @@ var FormFieldTextarea = ({
     }
   });
 };
+
+// src/FormGroup.tsx
+var import_ui9 = require("@ttoss/ui");
+var import_react = __toESM(require("react"));
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var FormGroupLevelsManagerContext = import_react.default.createContext({
+  registerChild: () => {
+    return null;
+  }
+});
+var FormGroupLevelsManager = ({
+  children
+}) => {
+  const [levelsLength, setLevelsLength] = import_react.default.useState(0);
+  const registerChild = import_react.default.useCallback(level => {
+    if (level + 1 > levelsLength) {
+      setLevelsLength(level + 1);
+    }
+  }, [levelsLength]);
+  return /* @__PURE__ */(0, import_jsx_runtime9.jsx)(FormGroupLevelsManagerContext.Provider, {
+    value: {
+      levelsLength,
+      registerChild
+    },
+    children
+  });
+};
+var FormGroupContext = import_react.default.createContext({});
+var useFormGroup = () => {
+  const {
+    parentLevel
+  } = import_react.default.useContext(FormGroupContext);
+  const {
+    levelsLength
+  } = import_react.default.useContext(FormGroupLevelsManagerContext);
+  return {
+    level: parentLevel,
+    levelsLength
+  };
+};
+var FormGroupWrapper = ({
+  children
+}) => {
+  const {
+    level,
+    levelsLength
+  } = useFormGroup();
+  const {
+    registerChild
+  } = import_react.default.useContext(FormGroupLevelsManagerContext);
+  import_react.default.useEffect(() => {
+    if (typeof level === "number") {
+      registerChild(level);
+    }
+  }, [level, registerChild]);
+  const sx = import_react.default.useMemo(() => {
+    return {
+      flexDirection: "column",
+      width: "100%",
+      gap: "md",
+      paddingLeft: ({
+        space
+      }) => {
+        if (!level || !levelsLength) {
+          return 0;
+        }
+        const value = levelsLength / level;
+        return `calc(${space["lg"]} / ${value})`;
+      }
+    };
+  }, [level, levelsLength]);
+  return /* @__PURE__ */(0, import_jsx_runtime9.jsx)(import_ui9.Flex, {
+    "aria-level": level,
+    sx,
+    children
+  });
+};
+var FormGroup = ({
+  children
+}) => {
+  const {
+    level
+  } = useFormGroup();
+  const currentLevel = level === void 0 ? 0 : level + 1;
+  return /* @__PURE__ */(0, import_jsx_runtime9.jsx)(FormGroupContext.Provider, {
+    value: {
+      parentLevel: currentLevel
+    },
+    children: currentLevel === 0 ? /* @__PURE__ */(0, import_jsx_runtime9.jsx)(FormGroupLevelsManager, {
+      children: /* @__PURE__ */(0, import_jsx_runtime9.jsx)(FormGroupWrapper, {
+        children
+      })
+    }) : /* @__PURE__ */(0, import_jsx_runtime9.jsx)(FormGroupWrapper, {
+      children
+    })
+  });
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Form,
@@ -363,6 +462,8 @@ var FormFieldTextarea = ({
   FormFieldRadio,
   FormFieldSelect,
   FormFieldTextarea,
+  FormGroup,
+  useFormGroup,
   yup,
   yupResolver,
   ...require("react-hook-form")

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/forms",
-  "version": "0.14.28",
+  "version": "0.14.30",
   "license": "UNLICENSED",
   "author": "ttoss",
   "contributors": [
@@ -20,26 +20,26 @@
   "typings": "dist/index.d.ts",
   "dependencies": {
     "@hookform/error-message": "^2.0.1",
-    "@hookform/resolvers": "^2.9.11",
-    "react-hook-form": "^7.43.2",
-    "yup": "^1.0.0"
+    "@hookform/resolvers": "^3.0.1",
+    "react-hook-form": "^7.43.9",
+    "yup": "^1.1.0"
   },
   "peerDependencies": {
-    "@ttoss/ui": "^1.30.2",
+    "@ttoss/ui": "^1.31.15",
     "react": "^18.2.0"
   },
   "devDependencies": {
     "@ttoss/config": "^1.29.3",
     "@ttoss/test-utils": "^1.21.2",
-    "@ttoss/ui": "^1.31.15",
+    "@ttoss/ui": "^1.31.16",
     "@types/jest": "^29.5.0",
     "jest": "^29.5.0",
     "react": "^18.2.0",
-    "react-hook-form": "^7.43.2",
-    "yup": "^1.0.0"
+    "react-hook-form": "^7.43.9",
+    "yup": "^1.1.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "93e161a8af481b0a74c48331c5d193566f3878dc"
+  "gitHead": "aa31505953d2717d84fa5e69dbae5b488ef04986"
 }

package/src/FormGroup.tsx

@@ -0,0 +1,116 @@
+import { Flex, FlexProps } from '@ttoss/ui';
+import React from 'react';
+
+type FormGroupLevelsManagerContextType = {
+  levelsLength?: number;
+  registerChild: (level: number) => void;
+};
+
+const FormGroupLevelsManagerContext =
+  React.createContext<FormGroupLevelsManagerContextType>({
+    registerChild: () => {
+      return null;
+    },
+  });
+
+const FormGroupLevelsManager = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+  const [levelsLength, setLevelsLength] = React.useState(0);
+
+  const registerChild = React.useCallback(
+    (level: number) => {
+      if (level + 1 > levelsLength) {
+        setLevelsLength(level + 1);
+      }
+    },
+    [levelsLength]
+  );
+
+  return (
+    <FormGroupLevelsManagerContext.Provider
+      value={{ levelsLength, registerChild }}
+    >
+      {children}
+    </FormGroupLevelsManagerContext.Provider>
+  );
+};
+
+type FormGroupContextType = {
+  parentLevel?: number;
+};
+
+const FormGroupContext = React.createContext<FormGroupContextType>({});
+
+export const useFormGroup = () => {
+  const { parentLevel } = React.useContext(FormGroupContext);
+  const { levelsLength } = React.useContext(FormGroupLevelsManagerContext);
+
+  return {
+    level: parentLevel,
+    levelsLength,
+  };
+};
+
+type FormGroupProps = {
+  children: React.ReactNode;
+};
+
+const FormGroupWrapper = ({ children }: { children: React.ReactNode }) => {
+  const { level, levelsLength } = useFormGroup();
+
+  const { registerChild } = React.useContext(FormGroupLevelsManagerContext);
+
+  React.useEffect(() => {
+    /**
+     * We can't use if(level) because level can be 0 and we want to register
+     * it anyway.
+     */
+    if (typeof level === 'number') {
+      registerChild(level);
+    }
+  }, [level, registerChild]);
+
+  const sx: FlexProps['sx'] = React.useMemo(() => {
+    return {
+      flexDirection: 'column',
+      width: '100%',
+      gap: 'md',
+      paddingLeft: ({ space }: any) => {
+        if (!level || !levelsLength) {
+          return 0;
+        }
+
+        const value = levelsLength / level;
+
+        return `calc(${space['lg']} / ${value})`;
+      },
+    };
+  }, [level, levelsLength]);
+
+  return (
+    <Flex aria-level={level} sx={sx}>
+      {children}
+    </Flex>
+  );
+};
+
+export const FormGroup = ({ children }: FormGroupProps) => {
+  const { level } = useFormGroup();
+
+  const currentLevel = level === undefined ? 0 : level + 1;
+
+  return (
+    <FormGroupContext.Provider value={{ parentLevel: currentLevel }}>
+      {currentLevel === 0 ? (
+        <FormGroupLevelsManager>
+          <FormGroupWrapper>{children}</FormGroupWrapper>
+        </FormGroupLevelsManager>
+      ) : (
+        <FormGroupWrapper>{children}</FormGroupWrapper>
+      )}
+    </FormGroupContext.Provider>
+  );
+};

package/src/index.ts

@@ -9,3 +9,4 @@ export { FormFieldInput } from './FormFieldInput';
 export { FormFieldRadio } from './FormFieldRadio';
 export { FormFieldSelect } from './FormFieldSelect';
 export { FormFieldTextarea } from './FormFieldTextarea';
+export { FormGroup, useFormGroup } from './FormGroup';