@ahmadmubarak98/namozaj 1.9.0 → 1.10.1

package/dist/main.d.ts

@@ -47,15 +47,36 @@ export declare type BaseFormFieldProps = {
     value: any;
     onChange: ((value: any) => void);
     error?: boolean;
-    config: NamozajField;
+    config: NamozajBlock;
     locale?: string | undefined;
 };
 
+export declare type BaseFormRepresentationalBlockProps = {
+    id?: string;
+    name: string;
+    config: NamozajRepresentationalBlock;
+};
+
 export declare type BasePlacement = "top" | "bottom" | "right" | "left";
 
-export declare type ButtonConfig = BaseFieldConfig & {
-    type: "text";
-    meta: Omit<BaseFieldConfig["meta"], 'defaultValue, placeholder, translated, validations, renderLabelRightSide, dependencies, onValueChange, compute'> & {
+export declare type BaseRepresentationalBlockConfig = {
+    name: string;
+    type: "button";
+    meta: {
+        style?: React.CSSProperties;
+        className?: string;
+        hidden?: boolean;
+        fullRow?: boolean;
+        grid?: GridColumnConfig;
+        visibilityRules?: VisibilityRule[];
+        step?: number | string;
+    };
+};
+
+export declare type ButtonConfig = BaseRepresentationalBlockConfig & {
+    type: "button";
+    meta: BaseRepresentationalBlockConfig['meta'] & {
+        label: string;
         variant?: ButtonOwnProps['variant'];
         startIcon?: React.ReactNode | string;
         size?: ButtonOwnProps['size'];
@@ -292,7 +313,9 @@ export declare type MultiSelectFieldConfig = BaseFieldConfig & {
 
 export declare const Namozaj: default_2.ForwardRefExoticComponent<NamozajProps & default_2.RefAttributes<any>>;
 
-export declare type NamozajField = ButtonConfig | TextFieldConfig | NumberFieldConfig | SliderFieldConfig | PhoneFieldConfig | GroupFieldConfig | SelectFieldConfig | MultiSelectFieldConfig | CheckBoxGroupFieldConfig | RadioGroupFieldConfig | SwitchFieldConfig | CheckboxFieldConfig | DateFieldConfig | FileFieldConfig | ComputedFieldConfig | SectionFieldConfig | ButtonFieldConfig | RepeaterFieldConfig | FieldArrayFieldConfig;
+export declare type NamozajBlock = NamozajField | NamozajRepresentationalBlock;
+
+export declare type NamozajField = TextFieldConfig | NumberFieldConfig | SliderFieldConfig | PhoneFieldConfig | GroupFieldConfig | SelectFieldConfig | MultiSelectFieldConfig | CheckBoxGroupFieldConfig | RadioGroupFieldConfig | SwitchFieldConfig | CheckboxFieldConfig | DateFieldConfig | FileFieldConfig | ComputedFieldConfig | SectionFieldConfig | ButtonFieldConfig | RepeaterFieldConfig | FieldArrayFieldConfig;
 
 export declare type NamozajFormMethods = RHFFormMethods & {
     validateForm: () => Promise<boolean>;
@@ -317,7 +340,7 @@ export declare interface NamozajLocalizationOptions {
 export declare type NamozajPhoneFieldCountry = CountryIso2;
 
 export declare interface NamozajProps {
-    fields: NamozajField[];
+    fields: (NamozajBlock)[];
     dirtyLock?: boolean;
     unloadConfirm?: boolean;
     localization?: NamozajLocalizationOptions;
@@ -346,6 +369,8 @@ export declare interface NamozajProps {
     onChange?: (data: any) => void;
 }
 
+export declare type NamozajRepresentationalBlock = ButtonConfig;
+
 export declare type NamozajStepItem = {
     label: string;
     description?: React.ReactNode;

package/dist/namozaj.js

@@ -4,7 +4,7 @@ var K1 = (e, t, a) => ob(e, typeof t != "symbol" ? t + "" : t, a);
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import React__default, { useState, useEffect, useMemo, createContext, useContext, createElement, useCallback, isValidElement, cloneElement, Children, useRef, forwardRef, useImperativeHandle, useReducer, Fragment as Fragment$1, Component as Component$1, memo, useLayoutEffect } from "react";
-import { Stack, Box as Box$1, TextField as TextField$2, IconButton as IconButton$1, InputLabel as InputLabel$1, Autocomplete, Select as Select$1, Checkbox, MenuItem as MenuItem$1, InputAdornment as InputAdornment$1, Tooltip as Tooltip$1, FormControlLabel, FormGroup, FormControl as FormControl$1, RadioGroup, Radio, Switch, Typography as Typography$1, Avatar, CircularProgress as CircularProgress$1, Button as Button$1, Slider, Portal as Portal$1, Dialog as Dialog$1, DialogTitle as DialogTitle$1, DialogContent as DialogContent$1, DialogActions as DialogActions$1, FormHelperText as FormHelperText$1, Grid } from "@mui/material";
+import { Stack, Box as Box$1, TextField as TextField$2, IconButton as IconButton$1, InputLabel as InputLabel$1, Autocomplete, Select as Select$1, Checkbox, MenuItem as MenuItem$1, InputAdornment as InputAdornment$1, Tooltip as Tooltip$1, FormControlLabel, FormGroup, FormControl as FormControl$1, RadioGroup, Radio, Switch, Typography as Typography$1, Avatar, CircularProgress as CircularProgress$1, Button as Button$2, Slider, Portal as Portal$1, Dialog as Dialog$1, DialogTitle as DialogTitle$1, DialogContent as DialogContent$1, DialogActions as DialogActions$1, FormHelperText as FormHelperText$1, Grid } from "@mui/material";
 import emStyled from "@emotion/styled";
 import { Global, ThemeContext, keyframes, css } from "@emotion/react";
 const defaultContextValue = {
@@ -1247,20 +1247,25 @@ 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_VALIDATION = [
-  "group"
-], FIELDS_TO_FLATTEN = ["group"], FIELDS_EXCLUDE_LABEL = [
+  "group",
+  "button"
+], FIELDS_TO_FLATTEN = ["group"], FIELDS_EXCLUDE_AS_VALUE = [
+  "button"
+], REPRSENTATIONAL_BLOCKS = ["button"], FIELDS_EXCLUDE_LABEL = [
   "checkbox",
   "switch",
   "repeater",
   "field-array",
-  "group"
+  "group",
+  "button"
 ], FIELDS_EXCLUDE_HELPER_TEXT = [
   "repeater",
   "field-array",
   "group"
 ], FIELDS_EXCLUDE_REPEATER_GRID_HEADER = [
   "repeater",
-  "group"
+  "group",
+  "button"
 ], EXTENSION_MIME_TYPE_MAP = {
   123: "application/vnd.lotus-1-2-3",
   "1km": "application/vnd.1000minds.decision-model+xml",
@@ -6048,7 +6053,7 @@ addMethod(create$6, YUP_PHONE_METHOD, function(t, a) {
   });
 });
 const createYupSchema = (e) => {
-  const l = flattenFields(e).filter(
+  const l = flattenFields(e).filter((c) => !FIELDS_EXCLUDE_AS_VALUE.includes(c.type) && c.name).filter(
     (c) => !FIELDS_EXCLUDE_VALIDATION.includes(c.type)
   ).reduce((c, p) => (c[p.name] = createFieldValidator(p), c), {});
   return create$3().shape(l);
@@ -24682,7 +24687,7 @@ const useUtilityClasses$14 = (e) => {
   display: "inline-block",
   width: "1em",
   height: "1em"
-}), Button = /* @__PURE__ */ React.forwardRef(function e(t, a) {
+}), Button$1 = /* @__PURE__ */ React.forwardRef(function e(t, a) {
   const l = React.useContext(ButtonGroupContext), c = React.useContext(ButtonGroupButtonContext), p = resolveProps(l, t), d = useDefaultProps({
     props: p,
     name: "MuiButton"
@@ -24767,7 +24772,7 @@ const useUtilityClasses$14 = (e) => {
     children: [re, N !== "end" && We, u, N === "end" && We, Z]
   });
 });
-process.env.NODE_ENV !== "production" && (Button.propTypes = {
+process.env.NODE_ENV !== "production" && (Button$1.propTypes = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │
   // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
@@ -24980,22 +24985,22 @@ function PickersActionBar(e) {
   const b = p == null ? void 0 : p.map((h) => {
     switch (h) {
       case "clear":
-        return /* @__PURE__ */ jsx(Button, {
+        return /* @__PURE__ */ jsx(Button$1, {
           onClick: a,
           children: u.clearButtonLabel
         }, h);
       case "cancel":
-        return /* @__PURE__ */ jsx(Button, {
+        return /* @__PURE__ */ jsx(Button$1, {
           onClick: l,
           children: u.cancelButtonLabel
         }, h);
       case "accept":
-        return /* @__PURE__ */ jsx(Button, {
+        return /* @__PURE__ */ jsx(Button$1, {
           onClick: t,
           children: u.okButtonLabel
         }, h);
       case "today":
-        return /* @__PURE__ */ jsx(Button, {
+        return /* @__PURE__ */ jsx(Button$1, {
           onClick: c,
           children: u.todayButtonLabel
         }, h);
@@ -40309,7 +40314,7 @@ const pickersToolbarTextClasses = generateUtilityClasses("MuiPickersToolbarText"
   return composeClasses({
     root: ["root"]
   }, getPickersToolbarUtilityClass, t);
-}, PickersToolbarButtonRoot = styled(Button, {
+}, PickersToolbarButtonRoot = styled(Button$1, {
   name: "MuiPickersToolbarButton",
   slot: "Root",
   overridesResolver: (e, t) => t.root
@@ -50944,7 +50949,7 @@ const FileField = ({
     Ne ? Ne.focus() : alert("Please allow popups for this website");
   }, a0 = () => /* @__PURE__ */ jsxs(Box$1, { display: "flex", flexDirection: "column", gap: 2, children: [
     /* @__PURE__ */ jsxs(
-      Button$1,
+      Button$2,
       {
         loading: oe,
         loadingIndicator: C,
@@ -51082,7 +51087,7 @@ const FileField = ({
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs(Button$1, { variant: "outlined", component: "label", fullWidth: !0, children: [
+      /* @__PURE__ */ jsxs(Button$2, { variant: "outlined", component: "label", fullWidth: !0, children: [
         x,
         /* @__PURE__ */ jsx(
           "input",
@@ -51145,6 +51150,7 @@ const FileField = ({
       size: d.size || DEFAULT_FIELD_SIZE,
       type: "number",
       error: c,
+      disabled: d.disabled,
       slotProps: {
         input: {
           startAdornment: d.startAdornment,
@@ -51259,8 +51265,8 @@ const FileField = ({
                 ...a == null ? void 0 : a.dialogActions
               },
               children: [
-                /* @__PURE__ */ jsx(Button$1, { disabled: b, type: "button", onClick: C, children: c || "Cancel" }),
-                /* @__PURE__ */ jsx(Button$1, { loading: b, type: "button", onClick: v, children: p || d || e })
+                /* @__PURE__ */ jsx(Button$2, { disabled: b, type: "button", onClick: C, children: c || "Cancel" }),
+                /* @__PURE__ */ jsx(Button$2, { loading: b, type: "button", onClick: v, children: p || d || e })
               ]
             }
           )
@@ -85343,7 +85349,7 @@ const RowActions = ({
   onRemoveClick: d
 }) => /* @__PURE__ */ jsxs(Stack, { direction: "row", gap: 1, children: [
   l && /* @__PURE__ */ jsx(
-    Button$1,
+    Button$2,
     {
       onClick: () => p && p(e),
       variant: "outlined",
@@ -85353,7 +85359,7 @@ const RowActions = ({
     }
   ),
   c && /* @__PURE__ */ jsx(
-    Button$1,
+    Button$2,
     {
       onClick: () => d && d(e),
       variant: "outlined",
@@ -85441,7 +85447,7 @@ const RowActions = ({
   addBtn: a,
   onAddClick: l
 }) => /* @__PURE__ */ jsx(Stack, { direction: "row", spacing: 2, justifyContent: "end", children: e.length > 0 && t && /* @__PURE__ */ jsx(
-  Button$1,
+  Button$2,
   {
     type: "button",
     variant: "contained",
@@ -85597,10 +85603,10 @@ const ConfirmationDialog = ({
   /* @__PURE__ */ jsx(DialogTitle, { children: t }),
   /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsx(DialogContentText, { children: a }) }),
   /* @__PURE__ */ jsxs(DialogActions, { children: [
-    /* @__PURE__ */ jsx(Button, { disabled: p, onClick: () => {
+    /* @__PURE__ */ jsx(Button$1, { disabled: p, onClick: () => {
       u && typeof u == "function" && u();
     }, children: l || "Cancel" }),
-    /* @__PURE__ */ jsx(Button, { loading: p, onClick: () => {
+    /* @__PURE__ */ jsx(Button$1, { loading: p, onClick: () => {
       d && typeof d == "function" && d();
     }, autoFocus: !0, children: c || "Confirm" })
   ] })
@@ -85742,7 +85748,7 @@ const ConfirmationDialog = ({
                 children: [
                   /* @__PURE__ */ jsx(Typography$1, { variant: "body1", children: t.meta.emptyMessage }),
                   /* @__PURE__ */ jsx(Stack, { direction: "row", spacing: 1, mt: 1, children: Y && /* @__PURE__ */ jsx(
-                    Button$1,
+                    Button$2,
                     {
                       variant: "outlined",
                       size: "small",
@@ -85886,7 +85892,7 @@ const ConfirmationDialog = ({
         },
         children: [
           /* @__PURE__ */ jsx(Typography$1, { variant: "body1", children: t.meta.emptyMessage }),
-          /* @__PURE__ */ jsx(Stack, { direction: "row", spacing: 1, mt: 1, children: K && /* @__PURE__ */ jsx(Button$1, { variant: "outlined", size: "small", onClick: j, children: N }) })
+          /* @__PURE__ */ jsx(Stack, { direction: "row", spacing: 1, mt: 1, children: K && /* @__PURE__ */ jsx(Button$2, { variant: "outlined", size: "small", onClick: j, children: N }) })
         ]
       }
     ),
@@ -85911,7 +85917,7 @@ const ConfirmationDialog = ({
                 }
               ),
               k && !((we = d.unRemovableIndexes) != null && we.includes(ye)) && /* @__PURE__ */ jsx(
-                Button$1,
+                Button$2,
                 {
                   variant: "outlined",
                   color: "error",
@@ -85980,7 +85986,7 @@ const ConfirmationDialog = ({
       ] }, ve._id);
     }),
     /* @__PURE__ */ jsx(Stack, { direction: "row", spacing: 2, justifyContent: "end", children: h.fields.length > 0 && K && /* @__PURE__ */ jsx(
-      Button$1,
+      Button$2,
       {
         type: "button",
         variant: "contained",
@@ -86008,6 +86014,28 @@ const ConfirmationDialog = ({
     )) }),
     ((p = a.helperText) == null ? void 0 : p.content) && /* @__PURE__ */ jsx(Box$1, { mt: 0.25, children: /* @__PURE__ */ jsx(HelperText, { ...a.helperText }) })
   ] }) });
+}, Button = (e) => {
+  const { config: t } = e, { meta: a } = t, l = useFormContext(), c = useCallback(() => {
+    var p;
+    (p = a.onClick) == null || p.call(a, l);
+  }, [a, l]);
+  return /* @__PURE__ */ jsx(
+    Button$2,
+    {
+      variant: a.variant || "contained",
+      size: a.size || "medium",
+      color: a.color || "primary",
+      onClick: c,
+      disabled: a.disabled,
+      hidden: a.hidden,
+      startIcon: a.startIcon,
+      endIcon: a.endIcon,
+      fullWidth: a.fullWidth,
+      style: a.style,
+      className: a.className,
+      children: a.label
+    }
+  );
 }, FieldRenderer = (e) => {
   var C, v, T, S;
   const { fieldsOptions: t, setFieldOptions: a } = useLocalNamozajProvider(), l = useRef(`${e.name}`), [c, p] = useState(!0), d = e.meta || {}, u = e.locale, b = d.grid || {}, h = useController({
@@ -86052,7 +86080,7 @@ const ConfirmationDialog = ({
       case "group":
         return /* @__PURE__ */ jsx(GroupField, { ...D });
       case "button":
-        return /* @__PURE__ */ jsx(GroupField, { ...D });
+        return /* @__PURE__ */ jsx(Button, { ...D });
       default:
         return null;
     }
@@ -86079,7 +86107,7 @@ const ConfirmationDialog = ({
       p(V && !H);
     }
   }, [(v = e.meta) == null ? void 0 : v.visibilityRules, (T = e.meta) == null ? void 0 : T.hidden, g == null ? void 0 : g.watch()]), useEffect(() => {
-    c || h.field.onChange(getDefaultValue(e));
+    !c && !REPRSENTATIONAL_BLOCKS.includes(e.type) && h.field.onChange(getDefaultValue(e));
   }, [c]), useEffect(() => {
     l.current = `${e.name}-${generateFieldId()}`;
   }, []), c ? /* @__PURE__ */ jsxs(
@@ -86111,13 +86139,13 @@ const ConfirmationDialog = ({
           },
           onChange: (x) => {
             var L;
-            h.field.onChange(x), (L = d.onValueChange) == null || L.call(d, x, g);
+            REPRSENTATIONAL_BLOCKS.includes(e.type) || (h.field.onChange(x), "onValueChange" in d && typeof d.onValueChange == "function" && ((L = d.onValueChange) == null || L.call(d, x, g)));
           },
           locale: u,
           value: h.field.value,
           error: h.fieldState.error
         }) }),
-        ((S = d.helperText) == null ? void 0 : S.content) && shouldRenderHelperText(e.type) && /* @__PURE__ */ jsx(Box$1, { mt: 0.25, children: /* @__PURE__ */ jsx(HelperText, { ...d.helperText }) }),
+        "helperText" in d && ((S = d.helperText) == null ? void 0 : S.content) && shouldRenderHelperText(e.type) && /* @__PURE__ */ jsx(Box$1, { mt: 0.25, children: /* @__PURE__ */ jsx(HelperText, { ...d.helperText }) }),
         h.fieldState.error && h.fieldState.error.message && /* @__PURE__ */ jsx(FormHelperText$1, { error: !0, children: h.fieldState.error.message })
       ]
     }
@@ -87552,7 +87580,7 @@ function NamozajStepper({
             },
             children: [
               /* @__PURE__ */ jsx(
-                Button,
+                Button$1,
                 {
                   onClick: S,
                   disabled: N === 0 || D.disableBack,
@@ -87561,7 +87589,7 @@ function NamozajStepper({
                 }
               ),
               N < a.length - 1 && /* @__PURE__ */ jsx(
-                Button,
+                Button$1,
                 {
                   variant: "contained",
                   onClick: T,
@@ -87584,7 +87612,7 @@ function NamozajStepper({
           sx: { mt: 2, display: "flex", justifyContent: "center", gap: 2 },
           children: [
             /* @__PURE__ */ jsx(
-              Button,
+              Button$1,
               {
                 onClick: S,
                 disabled: e === 0 || L.disableBack,
@@ -87593,7 +87621,7 @@ function NamozajStepper({
               }
             ),
             e < a.length - 1 && /* @__PURE__ */ jsx(
-              Button,
+              Button$1,
               {
                 variant: "contained",
                 onClick: T,
@@ -87614,9 +87642,18 @@ const Form = React__default.forwardRef(
   (e, t) => {
     var V, H, G, K, k, j, oe, Y, re;
     const { selectedLocales: a } = useLocalNamozajProvider(), [l, c] = useState(!0), [p, d] = useState(0), u = useMemo(
-      () => createYupSchema(e.fields),
+      () => createYupSchema(
+        e.fields.filter(
+          (Z) => !REPRSENTATIONAL_BLOCKS.includes(Z.type)
+        )
+      ),
       [e, e.fields, (V = e.localization) == null ? void 0 : V.locales, createYupSchema]
-    ), b = useMemo(() => e.defaultValues ? e.defaultValues : getDefaultValues(e.fields), [e.fields, e.defaultValues]), h = useForm({
+    ), b = useMemo(() => {
+      let Z = e.fields.filter(
+        (ce) => !FIELDS_EXCLUDE_AS_VALUE.includes(ce.type)
+      );
+      return e.defaultValues ? e.defaultValues : getDefaultValues(Z);
+    }, [e.fields, e.defaultValues]), h = useForm({
       resolver: o(u),
       defaultValues: b,
       mode: e.validationMode || "onChange"
@@ -87633,7 +87670,11 @@ const Form = React__default.forwardRef(
         We.forEach((ye) => {
           h.unregister(ye);
         });
-        const ve = e.defaultValues ?? getDefaultValues(e.fields);
+        const ve = e.defaultValues ?? getDefaultValues(
+          e.fields.filter(
+            (ye) => !REPRSENTATIONAL_BLOCKS.includes(ye.type)
+          )
+        );
         Re.forEach((ye) => {
           const we = ve[ye];
           h.resetField(ye, {
@@ -87689,7 +87730,7 @@ const Form = React__default.forwardRef(
     ), S = () => {
       var Z, ce, We, Re, ve, ye, we, Ke, je, Xe, Ge;
       return /* @__PURE__ */ jsx(Fragment, { children: !((Z = e.submitButtonProps) != null && Z.hidden) && /* @__PURE__ */ jsx(
-        Button$1,
+        Button$2,
         {
           loading: e.loading,
           loadingPosition: "start",
@@ -87786,7 +87827,7 @@ const Form = React__default.forwardRef(
     return useEffect(() => {
       var Z;
       if ((Z = e.stepper) != null && Z.advanceOnValidation) {
-        const We = e.fields.filter((Re) => !Re.meta.hidden).filter((Re) => {
+        const We = e.fields.filter((Re) => !REPRSENTATIONAL_BLOCKS.includes(Re.type)).filter((Re) => !Re.meta.hidden).filter((Re) => {
           var ve;
           return Re.meta.visibilityRules && ((ve = Re.meta.visibilityRules) == null ? void 0 : ve.length) > 0 ? evaluateVisibilityRules(
             Re.meta.visibilityRules,

package/package.json

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