@ttoss/forms 0.14.27 → 0.14.29

package/dist/esm/index.js

@@ -39,7 +39,8 @@ import { HelpText } from "@ttoss/ui";
 import { ErrorMessage as HookFormErrorMessage } from "@hookform/error-message";
 import { jsx as jsx2 } from "react/jsx-runtime";
 var ErrorMessage = ({
-  name
+  name,
+  disabled
 }) => {
   const {
     formState: {
@@ -50,7 +51,8 @@ var ErrorMessage = ({
     errors,
     name,
     as: /* @__PURE__ */jsx2(HelpText, {
-      negative: true
+      negative: true,
+      disabled
     })
   });
 };
@@ -139,15 +141,14 @@ var FormFieldCheckbox = ({
 };
 
 // src/FormFieldInput.tsx
-import { Box as Box4, Icon, Input, Label as Label3, Text } from "@ttoss/ui";
+import { Box as Box4, Input, Label as Label3 } from "@ttoss/ui";
 import { useController as useController3 } from "react-hook-form";
-import React3 from "react";
 import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 var FormFieldInput = ({
   label,
   name,
-  tooltipIcon,
-  showCharacterCounter,
+  tooltip,
+  onTooltipClick,
   ...inputProps
 }) => {
   const {
@@ -164,42 +165,15 @@ var FormFieldInput = ({
     name,
     defaultValue: ""
   });
-  const characterCounter = React3.useMemo(() => {
-    if (!value) {
-      return 0;
-    }
-    return String(value).length;
-  }, [value]);
   const id = `form-field-input-${name}`;
   const hasError = !!errors[name]?.message;
   return /* @__PURE__ */jsxs3(Box4, {
-    children: [label && /* @__PURE__ */jsxs3(Label3, {
-      sx: {
-        display: "flex",
-        alignItems: "center"
-      },
+    children: [label && /* @__PURE__ */jsx5(Label3, {
       "aria-disabled": inputProps.disabled,
       htmlFor: id,
-      children: [label, tooltipIcon && /* @__PURE__ */jsx5(Text, {
-        sx: {
-          marginLeft: "md",
-          fontSize: "xs",
-          lineHeight: 0
-        },
-        variant: "tooltip-icon",
-        children: /* @__PURE__ */jsx5(Icon, {
-          icon: tooltipIcon
-        })
-      }), showCharacterCounter && /* @__PURE__ */jsx5(Text, {
-        sx: {
-          marginLeft: "auto",
-          fontSize: "xs",
-          lineHeight: 0,
-          color: "underemphasize"
-        },
-        variant: "character-counter",
-        children: characterCounter
-      })]
+      tooltip,
+      onTooltipClick,
+      children: label
     }), /* @__PURE__ */jsx5(Input, {
       ref,
       onChange,
@@ -331,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,7 +5,9 @@ export * from 'react-hook-form';
 import * as yup from 'yup';
 export { yup };
 import * as React from 'react';
-import { BoxProps, CheckboxProps, IconType, RadioProps, TextareaProps } from '@ttoss/ui';
+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';
 
 declare const Form: <TFieldValues extends FieldValues = FieldValues>({ children, onSubmit, sx, ...formMethods }: {
@@ -29,15 +31,13 @@ declare const FormFieldCheckbox: <TFieldValues extends FieldValues = FieldValues
     name: FieldPath<TFieldValues>;
 } & CheckboxProps) => JSX.Element;
 
-declare const FormFieldInput: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ label, name, tooltipIcon, showCharacterCounter, ...inputProps }: {
+declare const FormFieldInput: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ label, name, tooltip, onTooltipClick, ...inputProps }: {
     label?: string | undefined;
     name: TName;
-    tooltipIcon?: IconType | undefined;
-    showCharacterCounter?: boolean | undefined;
 } & theme_ui.InputProps & {
-    leadingIcon?: IconType | undefined;
-    trailingIcon?: IconType | undefined;
-}) => JSX.Element;
+    leadingIcon?: _ttoss_ui.IconType | undefined;
+    trailingIcon?: _ttoss_ui.IconType | undefined;
+} & Pick<LabelProps, "tooltip" | "onTooltipClick">) => JSX.Element;
 
 type FormRadioOption$1 = {
     value: string | number;
@@ -64,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
 });
@@ -88,7 +90,8 @@ var import_ui2 = require("@ttoss/ui");
 var import_error_message = require("@hookform/error-message");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var ErrorMessage = ({
-  name
+  name,
+  disabled
 }) => {
   const {
     formState: {
@@ -99,7 +102,8 @@ var ErrorMessage = ({
     errors,
     name,
     as: /* @__PURE__ */(0, import_jsx_runtime2.jsx)(import_ui2.HelpText, {
-      negative: true
+      negative: true,
+      disabled
     })
   });
 };
@@ -190,13 +194,12 @@ var FormFieldCheckbox = ({
 // src/FormFieldInput.tsx
 var import_ui5 = require("@ttoss/ui");
 var import_react_hook_form5 = require("react-hook-form");
-var import_react = __toESM(require("react"));
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var FormFieldInput = ({
   label,
   name,
-  tooltipIcon,
-  showCharacterCounter,
+  tooltip,
+  onTooltipClick,
   ...inputProps
 }) => {
   const {
@@ -213,42 +216,15 @@ var FormFieldInput = ({
     name,
     defaultValue: ""
   });
-  const characterCounter = import_react.default.useMemo(() => {
-    if (!value) {
-      return 0;
-    }
-    return String(value).length;
-  }, [value]);
   const id = `form-field-input-${name}`;
   const hasError = !!errors[name]?.message;
   return /* @__PURE__ */(0, import_jsx_runtime5.jsxs)(import_ui5.Box, {
-    children: [label && /* @__PURE__ */(0, import_jsx_runtime5.jsxs)(import_ui5.Label, {
-      sx: {
-        display: "flex",
-        alignItems: "center"
-      },
+    children: [label && /* @__PURE__ */(0, import_jsx_runtime5.jsx)(import_ui5.Label, {
       "aria-disabled": inputProps.disabled,
       htmlFor: id,
-      children: [label, tooltipIcon && /* @__PURE__ */(0, import_jsx_runtime5.jsx)(import_ui5.Text, {
-        sx: {
-          marginLeft: "md",
-          fontSize: "xs",
-          lineHeight: 0
-        },
-        variant: "tooltip-icon",
-        children: /* @__PURE__ */(0, import_jsx_runtime5.jsx)(import_ui5.Icon, {
-          icon: tooltipIcon
-        })
-      }), showCharacterCounter && /* @__PURE__ */(0, import_jsx_runtime5.jsx)(import_ui5.Text, {
-        sx: {
-          marginLeft: "auto",
-          fontSize: "xs",
-          lineHeight: 0,
-          color: "underemphasize"
-        },
-        variant: "character-counter",
-        children: characterCounter
-      })]
+      tooltip,
+      onTooltipClick,
+      children: label
     }), /* @__PURE__ */(0, import_jsx_runtime5.jsx)(import_ui5.Input, {
       ref,
       onChange,
@@ -380,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,
@@ -389,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.27",
+  "version": "0.14.29",
   "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.14",
+    "@ttoss/ui": "^1.31.15",
     "@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": "8572bc7e98343a9780146a604b0d2f04ca4388e6"
+  "gitHead": "8ef9fc83abcc00169860b2b6391bbb4d7374d911"
 }

package/src/ErrorMessage.tsx

@@ -4,8 +4,10 @@ import { ErrorMessage as HookFormErrorMessage } from '@hookform/error-message';
 
 export const ErrorMessage = <TFieldValues extends FieldValues = FieldValues>({
   name,
+  disabled,
 }: {
   name: FieldName<TFieldValues>;
+  disabled?: boolean;
 }) => {
   const {
     formState: { errors },
@@ -15,7 +17,7 @@ export const ErrorMessage = <TFieldValues extends FieldValues = FieldValues>({
     <HookFormErrorMessage
       errors={errors}
       name={name as any}
-      as={<HelpText negative />}
+      as={<HelpText negative disabled={disabled} />}
     />
   );
 };

package/src/FormFieldInput.tsx

@@ -1,15 +1,6 @@
-import {
-  Box,
-  Icon,
-  type IconType,
-  Input,
-  type InputProps,
-  Label,
-  Text,
-} from '@ttoss/ui';
+import { Box, Input, type InputProps, Label, type LabelProps } from '@ttoss/ui';
 import { ErrorMessage } from './ErrorMessage';
 import { FieldPath, FieldValues, useController } from 'react-hook-form';
-import React from 'react';
 
 export const FormFieldInput = <
   TFieldValues extends FieldValues = FieldValues,
@@ -17,15 +8,14 @@ export const FormFieldInput = <
 >({
   label,
   name,
-  tooltipIcon,
-  showCharacterCounter,
+  tooltip,
+  onTooltipClick,
   ...inputProps
 }: {
   label?: string;
   name: TName;
-  tooltipIcon?: IconType;
-  showCharacterCounter?: boolean;
-} & InputProps) => {
+} & InputProps &
+  Pick<LabelProps, 'tooltip' | 'onTooltipClick'>) => {
   const {
     field: { onChange, onBlur, value, ref },
     formState: { errors },
@@ -34,14 +24,6 @@ export const FormFieldInput = <
     defaultValue: '',
   });
 
-  const characterCounter = React.useMemo(() => {
-    if (!value) {
-      return 0;
-    }
-
-    return String(value).length;
-  }, [value]);
-
   const id = `form-field-input-${name}`;
 
   const hasError = !!errors[name]?.message;
@@ -50,33 +32,12 @@ export const FormFieldInput = <
     <Box>
       {label && (
         <Label
-          sx={{ display: 'flex', alignItems: 'center' }}
           aria-disabled={inputProps.disabled}
           htmlFor={id}
+          tooltip={tooltip}
+          onTooltipClick={onTooltipClick}
         >
           {label}
-          {tooltipIcon && (
-            <Text
-              sx={{ marginLeft: 'md', fontSize: 'xs', lineHeight: 0 }}
-              variant="tooltip-icon"
-            >
-              <Icon icon={tooltipIcon} />
-            </Text>
-          )}
-
-          {showCharacterCounter && (
-            <Text
-              sx={{
-                marginLeft: 'auto',
-                fontSize: 'xs',
-                lineHeight: 0,
-                color: 'underemphasize',
-              }}
-              variant="character-counter"
-            >
-              {characterCounter}
-            </Text>
-          )}
         </Label>
       )}
 

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';