@ahmadmubarak98/namozaj 1.5.5 → 1.6.0

package/dist/main.d.ts

@@ -101,7 +101,7 @@ export declare interface DefaultSubmitButtonProps {
     hidden?: boolean;
 }
 
-export declare type DynamicFormField = TextFieldConfig | NumberFieldConfig | SliderFieldConfig | PhoneFieldConfig | SelectFieldConfig | MultiSelectFieldConfig | CheckBoxGroupFieldConfig | RadioGroupFieldConfig | SwitchFieldConfig | CheckboxFieldConfig | DateFieldConfig | FileFieldConfig | ComputedFieldConfig | SectionFieldConfig | ButtonFieldConfig | RepeaterFieldConfig | FieldArrayFieldConfig;
+export declare type DynamicFormField = TextFieldConfig | NumberFieldConfig | SliderFieldConfig | PhoneFieldConfig | GroupFieldConfig | SelectFieldConfig | MultiSelectFieldConfig | CheckBoxGroupFieldConfig | RadioGroupFieldConfig | SwitchFieldConfig | CheckboxFieldConfig | DateFieldConfig | FileFieldConfig | ComputedFieldConfig | SectionFieldConfig | ButtonFieldConfig | RepeaterFieldConfig | FieldArrayFieldConfig;
 
 export declare interface DynamicFormProps {
     fields: DynamicFormField[];
@@ -183,7 +183,7 @@ export declare type FieldOptionFetchFunction = (() => Promise<FieldOption[]>) |
 
 export declare type FieldSize = 'small' | 'medium';
 
-export declare type FieldType = "text" | "phone" | "number" | "slider" | "select" | "multi-select" | "checkbox-group" | "radio-group" | "checkbox" | "switch" | "date" | "time" | "datetime" | "file" | "repeater" | "field-array";
+export declare type FieldType = "text" | "phone" | "number" | "slider" | "select" | "multi-select" | "checkbox-group" | "radio-group" | "checkbox" | "switch" | "date" | "time" | "datetime" | "file" | "repeater" | "field-array" | "group";
 
 export declare type FieldValueType = string | number | boolean | Date | File | (string | undefined)[] | ({
     [x: string]: any;
@@ -243,6 +243,21 @@ export declare type GridColumnConfig = {
 
 export declare type GridSize = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
 
+export declare type GroupFieldConfig = BaseFieldConfig & {
+    type: "group";
+    meta: {
+        label: string;
+        tooltip?: TooltipConfig;
+        helperText?: HelperTextConfig;
+        className?: string;
+        style?: React.CSSProperties;
+        disabled?: boolean;
+        grid?: GridColumnConfig;
+        fields: DynamicFormField[];
+        visibilityRules?: VisibilityRule[];
+    };
+};
+
 export declare type HelperTextConfig = {
     content?: string | React.ReactNode;
     color?: BaseColors | string;

package/dist/namozaj.js

@@ -1245,7 +1245,9 @@ function useForm(e = {}) {
     });
   }, [e.shouldUnregister, p]), t.current.formState = getProxyFormState(l, p), t.current;
 }
-const DEFAULT_LOCALE_PICKER_FIELD_NAME = "localePicker_Field", DEFAULT_GRID_SIZE = 12, DEFAULT_FIELD_VARIANT = "outlined", DEFAULT_FIELD_SIZE = "medium", DEFAULT_TEXT_AREA_ROWS = 4, FIELDS_EXCLUDE_LABEL = [
+const DEFAULT_LOCALE_PICKER_FIELD_NAME = "localePicker_Field", DEFAULT_GRID_SIZE = 12, DEFAULT_FIELD_VARIANT = "outlined", DEFAULT_FIELD_SIZE = "medium", DEFAULT_TEXT_AREA_ROWS = 4, FIELDS_EXCLUDE_VALIDATION = [
+  "group"
+], FIELDS_TO_FLATTEN = ["group"], FIELDS_EXCLUDE_LABEL = [
   "checkbox",
   "switch",
   "repeater",
@@ -4365,8 +4367,10 @@ const CellValue = ({ field: e, rendererParams: t }) => {
     }
   })() });
 }, createYupSchema = (e) => {
-  const t = e.reduce((a, l) => (a[l.name] = createFieldValidator(l), a), {});
-  return create$3().shape(t);
+  const l = flattenFields(e).filter(
+    (c) => !FIELDS_EXCLUDE_VALIDATION.includes(c.type)
+  ).reduce((c, p) => (c[p.name] = createFieldValidator(p), c), {});
+  return create$3().shape(l);
 }, createFieldValidator = (e) => {
   var a;
   let t = create$8().nullable();
@@ -4632,7 +4636,10 @@ const getDefaultValue = (e) => {
   } : e.meta.grid || {
     xs: 12
   };
-};
+}, flattenFields = (e) => e.flatMap((t) => {
+  var a;
+  return FIELDS_TO_FLATTEN.includes(t.type) && ((a = t.meta) != null && a.fields) ? flattenFields(t.meta.fields) : t;
+});
 function chainPropTypes(e, t) {
   return process.env.NODE_ENV === "production" ? () => null : function(...l) {
     return e(...l) || t(...l);
@@ -80958,7 +80965,7 @@ const ConfirmationDialog = ({
       ]
     }
   ) });
-}, FeildArrayField = ({
+}, FieldArrayField = ({
   id: e,
   config: t,
   name: a,
@@ -84871,6 +84878,21 @@ const _ = /* @__PURE__ */ getDefaultExportFromCjs(lodashExports), MultiSelectFie
       ] }, w.value)) : /* @__PURE__ */ jsx(MenuItem$1, { disabled: !0, children: /* @__PURE__ */ jsx("em", { children: "No results found" }) })
     }
   ) });
+}, GroupField = ({ id: e, config: t }) => {
+  var p;
+  const { meta: a } = t, { fields: l } = a, c = useFormContext();
+  return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(Fieldset, { id: e, legend: /* @__PURE__ */ jsx(FieldLabel, { field: t }), children: [
+    /* @__PURE__ */ jsx(Grid, { container: !0, spacing: 2, children: l.length > 0 && l.map((d, u) => /* @__PURE__ */ jsx(
+      FieldRenderer,
+      {
+        ...d,
+        locale: d.locale,
+        control: c.control
+      },
+      d.name || u
+    )) }),
+    ((p = a.helperText) == null ? void 0 : p.content) && /* @__PURE__ */ jsx(Box, { mt: 0.25, children: /* @__PURE__ */ jsx(HelperText, { ...a.helperText }) })
+  ] }) });
 }, FieldRenderer = (e) => {
   var C, v, w;
   const { fieldsOptions: t, setFieldOptions: a } = useLocalDynamicFormProvider(), l = useRef(`${e.name}`), [c, p] = useState(!0), d = e.meta || {}, u = e.locale, b = d.grid || {}, h = useController({
@@ -84911,7 +84933,9 @@ const _ = /* @__PURE__ */ getDefaultExportFromCjs(lodashExports), MultiSelectFie
       case "repeater":
         return /* @__PURE__ */ jsx(RepeaterField, { ...L });
       case "field-array":
-        return /* @__PURE__ */ jsx(FeildArrayField, { ...L });
+        return /* @__PURE__ */ jsx(FieldArrayField, { ...L });
+      case "group":
+        return /* @__PURE__ */ jsx(GroupField, { ...L });
       default:
         return null;
     }
@@ -84960,7 +84984,12 @@ const _ = /* @__PURE__ */ getDefaultExportFromCjs(lodashExports), MultiSelectFie
           config: {
             ...e
           },
-          ...["select", "checkbox-group", "radio-group", "multi-select"].includes(e.type) && {
+          ...[
+            "select",
+            "checkbox-group",
+            "radio-group",
+            "multi-select"
+          ].includes(e.type) && {
             options: (t == null ? void 0 : t[e.name]) || []
           },
           onChange: (S) => {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ahmadmubarak98/namozaj",
   "private": false,
-  "version": "1.5.5",
+  "version": "1.6.0",
   "type": "module",
   "main": "dist/namozaj.js",
   "types": "dist/main.d.ts",