@m4l/components 0.1.10 → 0.1.12

package/components/CommonActions/components/Actions/index.js

@@ -388,7 +388,7 @@ const ColumnsConfig = forwardRef((props, ref) => {
     name: getLabel("data_grid.settings_column_name"),
     width: 200,
     resizable: true,
-    type: "text"
+    type: "string"
   }, {
     key: "originalIndex",
     name: getLabel("data_grid.settings_column_position"),

package/components/DataGrid/index.js

@@ -661,9 +661,9 @@ function SkeletonFormatter() {
 }
 function getComparator(columns, sortColumn) {
   const column = columns.find((d) => d.key === sortColumn);
-  let typeOrder = "text";
+  let typeOrder = "string";
   if (column) {
-    typeOrder = column.type || "text";
+    typeOrder = column.type || "string";
   }
   switch (typeOrder) {
     case "number":
@@ -713,7 +713,7 @@ const getInOrderColumns = (columns, isMultipleRows, columnsConfig, columnsWidths
 };
 const getAligByType = (columnType) => {
   switch (columnType) {
-    case "text":
+    case "string":
       return "left";
     case "date":
     case "boolean":

package/components/DataGrid/types.d.ts

@@ -5,7 +5,7 @@ import type { MenuAction } from '../mui_extended/MenuActions/types';
 import { ActionsProps } from './components/Actions/types';
 export declare type GridFormatterPropss<T, SR> = FormatterProps<T, SR>;
 export type { columnUncertaintyFormatter, columnPointsFormatter, columnNestedValueFormatter, } from './formatters';
-export declare type ColumnType = 'text' | 'date' | 'number' | 'boolean' | 'custom';
+export declare type ColumnType = 'string' | 'date' | 'number' | 'boolean' | 'custom';
 export declare type ColumnAlign = 'left' | 'center' | 'right';
 export declare interface GridRow {
     id: number;

package/components/DynamicFilter/index.js

@@ -14,8 +14,9 @@ import { R as RHFDateTime } from "../hook-form/RHFDateTime/index.js";
 import "@mui/x-date-pickers";
 import { R as RHFTextField } from "../hook-form/RHFTextField/index.js";
 import "../hook-form/RHFPeriod/index.js";
+import "../ErrorLabel/index.js";
+import "../Period/index.js";
 import { I as Icon } from "../Icon/index.js";
-import "../../index.js";
 import { L as LabelMemuItem, b as Actions, g as getCommonActionsDictionary } from "../CommonActions/components/Actions/index.js";
 import "@mui/material/Button";
 import { F as FilterButton } from "../mui_extended/Button/index.js";

package/components/ErrorLabel/index.js

@@ -0,0 +1,18 @@
+import { styled } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+const Wrapper = styled("p")(({
+  theme
+}) => ({
+  ...theme.typography.caption,
+  color: theme.palette.error.main,
+  margin: "8px 14px 0 14px"
+}));
+const ErrorLabel = (props) => {
+  const {
+    message
+  } = props;
+  return /* @__PURE__ */ jsx(Wrapper, {
+    children: message
+  });
+};
+export { ErrorLabel as E };

package/components/ObjectLogs/index.js

@@ -157,16 +157,16 @@ function ObjectLogs(props) {
   }, {
     key: "email",
     name: getLabel("object_logs.email"),
-    type: "text",
+    type: "string",
     width: 300
   }, {
     key: "resource_name",
     name: getLabel("object_logs.resource_name"),
-    type: "text"
+    type: "string"
   }, {
     key: "log_preview",
     name: getLabel("object_logs.log_preview"),
-    type: "text"
+    type: "string"
   }, {
     key: "Detail",
     name: getLabel("object_logs.log_detail"),
@@ -175,7 +175,7 @@ function ObjectLogs(props) {
   }, {
     key: "ip",
     name: getLabel("object_logs.ip"),
-    type: "text"
+    type: "string"
   }], [getLabel]);
   const {
     pagerState,

package/components/{hook-form/RHFPeriod → Period}/dictionary.d.ts

@@ -1,3 +1,6 @@
 import { Dictionary } from '@m4l/core';
 export declare function getPeriodComponetsDictionary(): string[];
 export declare const defaultPeriodDictionary: Dictionary;
+export declare const LABEL_YEARS = "label_years";
+export declare const LABEL_MONTHS = "label_months";
+export declare const LABEL_DAYS = "label_days";

package/components/Period/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { PeriodProps } from './types';
+export declare const Period: (props: PeriodProps) => JSX.Element;

package/components/Period/index.js

@@ -0,0 +1,230 @@
+import { useModuleDictionary, useModuleSkeleton, useEnvironment } from "@m4l/core";
+import { styled, Skeleton, Autocomplete, TextField } from "@mui/material";
+import { useMemo } from "react";
+import { I as Icon } from "../Icon/index.js";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { g as getCommonActionsDictionary } from "../CommonActions/components/Actions/index.js";
+import "@mui/material/Button";
+import "../mui_extended/Button/index.js";
+import "react-hook-form";
+import "react-router-dom";
+import "../../contexts/ModalContext/index.js";
+import "@mui/lab";
+const ContainerPeriod = styled("div")(({
+  theme,
+  error
+}) => ({
+  display: "flex",
+  width: "100%",
+  height: "auto",
+  alignItems: "center",
+  gap: theme.spacing(1),
+  border: error ? `1px solid ${theme.palette.error.main}` : `1px solid ${theme.palette.divider}`,
+  padding: theme.spacing(0.5, 1),
+  borderRadius: "4px",
+  "& .MuiAutocomplete-root, & .MuiTextField-root": {
+    width: "100%"
+  },
+  "& .MuiAutocomplete-root .MuiTextField-root": {
+    width: "100%"
+  },
+  "& .MuiTextField-root .MuiInput-input": {
+    padding: "5px!important"
+  }
+}));
+const Gap = styled("div")(({
+  theme
+}) => ({
+  width: "1px",
+  height: "20px",
+  backgroundColor: theme.palette.divider
+}));
+const SKTWrapper = styled("div")(({
+  theme
+}) => ({
+  display: "flex",
+  width: "auto",
+  height: "37.5px",
+  alignItems: "center",
+  gap: theme.spacing(1),
+  border: `1px solid ${theme.palette.divider}`,
+  padding: theme.spacing(0.5, 1),
+  borderRadius: "4px"
+}));
+const FieldPeriod = styled("div")(({
+  theme
+}) => ({
+  ...theme.typography.body2,
+  width: "100%",
+  display: "flex",
+  textOverflow: "elipsis",
+  overflow: "hidden",
+  padding: "5px",
+  textAlign: "left"
+}));
+const FieldValue = styled("div")(({
+  theme
+}) => ({
+  ...theme.typography.body2,
+  width: "70px",
+  display: "flex",
+  textOverflow: "elipsis",
+  overflow: "hidden",
+  padding: "5px",
+  textAlign: "left"
+}));
+var ETimePeriods = /* @__PURE__ */ ((ETimePeriods2) => {
+  ETimePeriods2[ETimePeriods2["YEARS"] = 0] = "YEARS";
+  ETimePeriods2[ETimePeriods2["MONTHS"] = 1] = "MONTHS";
+  ETimePeriods2[ETimePeriods2["DAYS"] = 2] = "DAYS";
+  return ETimePeriods2;
+})(ETimePeriods || {});
+const getSelPeriodTime = (period) => {
+  if (!period)
+    return ETimePeriods.YEARS;
+  if (period.selPeriodTime)
+    return period.selPeriodTime;
+  if (period.years && period.years > 0)
+    return ETimePeriods.YEARS;
+  if (period.months && period.months > 0)
+    return ETimePeriods.MONTHS;
+  if (period.days && period.days > 0)
+    return ETimePeriods.DAYS;
+  return ETimePeriods.YEARS;
+};
+const getSingleValue = (period) => {
+  if (!period)
+    return "";
+  if (period.singleValue !== void 0)
+    return period.singleValue;
+  if (period.years && period.years > 0)
+    return period.years;
+  if (period.months && period.months > 0)
+    return period.months;
+  if (period.days && period.days > 0)
+    return period.days;
+  return "";
+};
+const Period = (props) => {
+  const {
+    value,
+    onChange,
+    error = false,
+    readOnly = false
+  } = props;
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const isSkeleton = useModuleSkeleton();
+  const selPeriodTime = getSelPeriodTime(value);
+  const singleValue = getSingleValue(value);
+  const onTotalChange = (newPeriodTime, newValue) => {
+    const newPeriod = {
+      selPeriodTime: newPeriodTime,
+      singleValue: newValue
+    };
+    if (newValue !== "" && newValue > 0) {
+      newPeriod.years = 0;
+      newPeriod.months = 0;
+      newPeriod.days = 0;
+      if (newPeriodTime === ETimePeriods.YEARS)
+        newPeriod.years = newValue;
+      if (newPeriodTime === ETimePeriods.MONTHS)
+        newPeriod.months = newValue;
+      if (newPeriodTime === ETimePeriods.DAYS)
+        newPeriod.days = newValue;
+    }
+    onChange(newPeriod);
+  };
+  const onChangeTime = (newPeriodTime) => {
+    if (newPeriodTime) {
+      onTotalChange(newPeriodTime.id, singleValue);
+    }
+  };
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  const options = useMemo(() => [{
+    id: 0,
+    label: getLabel("period.years")
+  }, {
+    id: 1,
+    label: getLabel("period.months")
+  }, {
+    id: 2,
+    label: getLabel("period.days")
+  }], [getLabel]);
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsxs(SKTWrapper, {
+      children: [/* @__PURE__ */ jsx(Skeleton, {
+        variant: "rounded",
+        width: "100%"
+      }), /* @__PURE__ */ jsx(Gap, {}), /* @__PURE__ */ jsx(Skeleton, {
+        variant: "rounded",
+        width: "100%"
+      }), /* @__PURE__ */ jsx(Skeleton, {
+        variant: "circular",
+        width: 20,
+        sx: {
+          minWidth: "20px",
+          minHeight: "20px"
+        }
+      })]
+    });
+  }
+  if (readOnly) {
+    /* @__PURE__ */ jsxs(ContainerPeriod, {
+      error: false,
+      children: [/* @__PURE__ */ jsx(FieldPeriod, {
+        children: value.selPeriodTime
+      }), /* @__PURE__ */ jsx(Gap, {}), /* @__PURE__ */ jsx(FieldValue, {
+        children: value.singleValue
+      }), /* @__PURE__ */ jsx(Icon, {
+        src: `${host_static_assets}/${environment_assets}/frontend/components/period/assets/icons/clock.svg`
+      })]
+    });
+  }
+  return /* @__PURE__ */ jsxs(ContainerPeriod, {
+    error,
+    children: [/* @__PURE__ */ jsx(Autocomplete, {
+      options,
+      value: options[selPeriodTime],
+      disableClearable: true,
+      onChange: (_event, autcValue) => {
+        onChangeTime(autcValue);
+      },
+      renderInput: (params) => {
+        return /* @__PURE__ */ jsx(TextField, {
+          ...params,
+          fullWidth: true,
+          variant: "standard",
+          SelectProps: {
+            native: true
+          },
+          InputProps: {
+            disableUnderline: true,
+            ...params.InputProps
+          },
+          autoComplete: "off"
+        }, `tx_async_${params.id}`);
+      }
+    }), /* @__PURE__ */ jsx(Gap, {}), /* @__PURE__ */ jsx(TextField, {
+      type: "number",
+      variant: "standard",
+      value: singleValue,
+      InputProps: {
+        disableUnderline: true
+      },
+      onChange: (e) => {
+        onTotalChange(selPeriodTime, e.target.value === "" ? "" : parseInt(e.target.value));
+      }
+    }), /* @__PURE__ */ jsx(Icon, {
+      src: `${host_static_assets}/${environment_assets}/frontend/components/period/assets/icons/clock.svg`
+    })]
+  });
+};
+function getPeriodComponetsDictionary() {
+  return ["period"].concat(getCommonActionsDictionary());
+}
+export { Period as P, getPeriodComponetsDictionary as g };

package/components/Period/styles.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { WrapperProps } from './types';
+export declare const ContainerPeriod: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & WrapperProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Gap: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SKTWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const FieldPeriod: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const FieldValue: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/Period/types.d.ts

@@ -0,0 +1,30 @@
+export declare enum ETimePeriods {
+    YEARS = 0,
+    MONTHS = 1,
+    DAYS = 2
+}
+export declare type PeriodVariant = 'monoperiod' | 'multiperiod';
+export declare type PeriodTime = {
+    id: number;
+    label: string;
+};
+export interface WrapperProps {
+    error: boolean;
+}
+export declare type PeriodType = {
+    selPeriodTime: ETimePeriods;
+    singleValue: number | '';
+    years?: number;
+    months?: number;
+    days?: number;
+};
+export interface PeriodProps {
+    value: PeriodType;
+    onChange: (newValue: PeriodType) => void;
+    error?: boolean;
+    readOnly?: boolean;
+    variant?: PeriodVariant;
+}
+export interface WrapperProps {
+    error: boolean;
+}

package/components/PropertyValue/index.js

@@ -70,7 +70,6 @@ const Value = styled("div", {
   height: valueHeight,
   marginTop: theme.spacing(1),
   [theme.breakpoints.up("sm")]: {
-    marginLeft: theme.spacing(0),
     marginTop: "0px"
   },
   overflow: "hidden",

package/components/formatters/index.js

@@ -104,9 +104,8 @@ function columnNestedValueFormatter(props) {
     Component = React.Fragment
   } = props;
   return (obProps) => {
-    console.log("columnNestedValueFormatter", obProps, fieldValue);
     return /* @__PURE__ */ jsx(Component, {
-      children: getPropertyByString(obProps, fieldValue)
+      children: getPropertyByString(obProps, fieldValue) + ""
     });
   };
 }

package/components/hook-form/RHFPeriod/index.js

@@ -1,16 +1,8 @@
-import { useModuleDictionary, useModuleSkeleton, useEnvironment } from "@m4l/core";
-import { styled, Skeleton, Autocomplete, TextField } from "@mui/material";
-import { useMemo } from "react";
+import { styled } from "@mui/material";
 import { useFormContext, Controller } from "react-hook-form";
-import { I as Icon } from "../../Icon/index.js";
-import { ErrorLabel } from "../../../index.js";
-import { jsxs, jsx } from "react/jsx-runtime";
-import { g as getCommonActionsDictionary } from "../../CommonActions/components/Actions/index.js";
-import "@mui/material/Button";
-import "../../mui_extended/Button/index.js";
-import "react-router-dom";
-import "../../../contexts/ModalContext/index.js";
-import "@mui/lab";
+import { E as ErrorLabel } from "../../ErrorLabel/index.js";
+import { P as Period } from "../../Period/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 const Wrapper = styled("div")(({
   theme
 }) => ({
@@ -21,123 +13,13 @@ const Wrapper = styled("div")(({
   alignItems: "flex-start",
   gap: theme.spacing(1)
 }));
-const ContainerPeriod = styled("div")(({
-  theme,
-  error
-}) => ({
-  display: "flex",
-  width: "100%",
-  height: "auto",
-  alignItems: "center",
-  gap: theme.spacing(1),
-  border: error ? `1px solid ${theme.palette.error.main}` : `1px solid ${theme.palette.divider}`,
-  padding: theme.spacing(0.5, 1),
-  borderRadius: "4px",
-  "& .MuiAutocomplete-root, & .MuiTextField-root": {
-    width: "100%"
-  },
-  "& .MuiAutocomplete-root .MuiTextField-root": {
-    width: "100%"
-  },
-  "& .MuiTextField-root .MuiInput-input": {
-    padding: "5px!important"
-  }
-}));
-const SKTWrapper = styled("div")(({
-  theme
-}) => ({
-  display: "flex",
-  width: "auto",
-  height: "37.5px",
-  alignItems: "center",
-  gap: theme.spacing(1),
-  border: `1px solid ${theme.palette.divider}`,
-  padding: theme.spacing(0.5, 1),
-  borderRadius: "4px"
-}));
-const Gap = styled("div")(({
-  theme
-}) => ({
-  width: "1px",
-  height: "20px",
-  backgroundColor: theme.palette.divider
-}));
-var ETimePeriods = /* @__PURE__ */ ((ETimePeriods2) => {
-  ETimePeriods2[ETimePeriods2["YEARS"] = 0] = "YEARS";
-  ETimePeriods2[ETimePeriods2["MONTHS"] = 1] = "MONTHS";
-  ETimePeriods2[ETimePeriods2["DAYS"] = 2] = "DAYS";
-  return ETimePeriods2;
-})(ETimePeriods || {});
-const getSelPeriodTime = (period) => {
-  if (!period)
-    return ETimePeriods.YEARS;
-  if (period.selPeriodTime)
-    return period.selPeriodTime;
-  if (period.years && period.years > 0)
-    return ETimePeriods.YEARS;
-  if (period.months && period.months > 0)
-    return ETimePeriods.MONTHS;
-  if (period.days && period.days > 0)
-    return ETimePeriods.DAYS;
-  return ETimePeriods.YEARS;
-};
-const getSingleValue = (period) => {
-  if (!period)
-    return "";
-  if (period.singleValue !== void 0)
-    return period.singleValue;
-  if (period.years && period.years > 0)
-    return period.years;
-  if (period.months && period.months > 0)
-    return period.months;
-  if (period.days && period.days > 0)
-    return period.days;
-  return "";
-};
 const RHFPeriod = (props) => {
   const {
-    name,
-    variant = "monoperiod"
+    name
   } = props;
-  const {
-    getLabel
-  } = useModuleDictionary();
-  const isSkeleton = useModuleSkeleton();
   const {
     control
   } = useFormContext();
-  const {
-    host_static_assets,
-    environment_assets
-  } = useEnvironment();
-  const options = useMemo(() => [{
-    id: 0,
-    label: getLabel("period.years")
-  }, {
-    id: 1,
-    label: getLabel("period.months")
-  }, {
-    id: 2,
-    label: getLabel("period.days")
-  }], [getLabel]);
-  if (isSkeleton) {
-    return /* @__PURE__ */ jsxs(SKTWrapper, {
-      children: [/* @__PURE__ */ jsx(Skeleton, {
-        variant: "rounded",
-        width: "100%"
-      }), /* @__PURE__ */ jsx(Gap, {}), /* @__PURE__ */ jsx(Skeleton, {
-        variant: "rounded",
-        width: "100%"
-      }), /* @__PURE__ */ jsx(Skeleton, {
-        variant: "circular",
-        width: 20,
-        sx: {
-          minWidth: "20px",
-          minHeight: "20px"
-        }
-      })]
-    });
-  }
   return /* @__PURE__ */ jsx(Controller, {
     name,
     control,
@@ -150,70 +32,11 @@ const RHFPeriod = (props) => {
         error
       }
     }) => {
-      const selPeriodTime = getSelPeriodTime(value);
-      const singleValue = getSingleValue(value);
-      const onTotalChange = (newPeriodTime, newValue) => {
-        const newPeriod = {
-          selPeriodTime: newPeriodTime,
-          singleValue: newValue,
-          variant
-        };
-        if (newValue !== "" && newValue > 0) {
-          newPeriod.years = 0;
-          newPeriod.months = 0;
-          newPeriod.days = 0;
-          if (newPeriodTime === ETimePeriods.YEARS)
-            newPeriod.years = newValue;
-          if (newPeriodTime === ETimePeriods.MONTHS)
-            newPeriod.months = newValue;
-          if (newPeriodTime === ETimePeriods.DAYS)
-            newPeriod.days = newValue;
-        }
-        onChange(newPeriod);
-      };
-      const onChangeTime = (newPeriodTime) => {
-        if (newPeriodTime) {
-          onTotalChange(newPeriodTime.id, singleValue);
-        }
-      };
       return /* @__PURE__ */ jsxs(Wrapper, {
-        children: [/* @__PURE__ */ jsxs(ContainerPeriod, {
-          error: !!error,
-          children: [/* @__PURE__ */ jsx(Autocomplete, {
-            options,
-            value: options[selPeriodTime],
-            disableClearable: true,
-            onChange: (_event, autcValue) => {
-              onChangeTime(autcValue);
-            },
-            renderInput: (params) => {
-              return /* @__PURE__ */ jsx(TextField, {
-                ...params,
-                fullWidth: true,
-                variant: "standard",
-                SelectProps: {
-                  native: true
-                },
-                InputProps: {
-                  disableUnderline: true,
-                  ...params.InputProps
-                },
-                autoComplete: "off"
-              }, `tx_async_${params.id}`);
-            }
-          }), /* @__PURE__ */ jsx(Gap, {}), /* @__PURE__ */ jsx(TextField, {
-            type: "number",
-            variant: "standard",
-            value: singleValue,
-            InputProps: {
-              disableUnderline: true
-            },
-            onChange: (e) => {
-              onTotalChange(selPeriodTime, e.target.value === "" ? "" : parseInt(e.target.value));
-            }
-          }), /* @__PURE__ */ jsx(Icon, {
-            src: `${host_static_assets}/${environment_assets}/frontend/components/period/assets/icons/clock.svg`
-          })]
+        children: [/* @__PURE__ */ jsx(Period, {
+          value,
+          onChange,
+          error: !!error
         }), error && /* @__PURE__ */ jsx(ErrorLabel, {
           message: error.message || ""
         })]
@@ -221,7 +44,4 @@ const RHFPeriod = (props) => {
     }
   });
 };
-function getPeriodComponetsDictionary() {
-  return ["period"].concat(getCommonActionsDictionary());
-}
-export { RHFPeriod as R, getPeriodComponetsDictionary as g };
+export { RHFPeriod as R };

package/components/hook-form/RHFPeriod/styles.d.ts

@@ -1,6 +1,2 @@
 /// <reference types="react" />
-import { WrapperProps } from './types';
 export declare const Wrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const ContainerPeriod: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & WrapperProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const SKTWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const Gap: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/hook-form/RHFPeriod/types.d.ts

@@ -1,28 +1,4 @@
-export declare type PeriodProps = {
-    name: string;
-    variant?: 'single';
-};
-export declare enum ETimePeriods {
-    YEARS = 0,
-    MONTHS = 1,
-    DAYS = 2
-}
-export declare type PeriodVariant = 'monoperiod' | 'multiperiod';
-export declare type PeriodTime = {
-    id: number;
-    label: string;
-};
-export declare type PeriodType = {
-    variant: PeriodVariant;
-    selPeriodTime: ETimePeriods;
-    singleValue: number | '';
-    years?: number;
-    months?: number;
-    days?: number;
-};
-export interface WrapperProps {
-    error: boolean;
-}
+import { PeriodVariant } from '../../../components/Period/types';
 export declare type RHFPeriodProps = {
     name: string;
     variant?: PeriodVariant;

package/components/hook-form/index.d.ts

@@ -9,6 +9,5 @@ export { RHFSelect } from './RHFSelect';
 export { RHFTextField } from './RHFTextField';
 export { RHFRadioGroup } from './RHFRadioGroup';
 export { RHFPeriod } from './RHFPeriod';
-export type { PeriodType } from './RHFPeriod/types';
-export { getPeriodComponetsDictionary } from './RHFPeriod/dictionary';
+export { getPeriodComponetsDictionary } from '../Period/dictionary';
 export * from './RHFUpload';

package/components/index.d.ts

@@ -28,6 +28,8 @@ export * from '../components/NoItemSelected/dictionary';
 export * from '../components/ObjectLogs';
 export * from '../components/ObjectLogs/dictionary';
 export * from '../components/PaperForm';
+export * from '../components/Period';
+export type { PeriodType } from '../components/Period/types';
 export * from '../components/Page';
 export * from '../components/PropertyValue';
 export * from '../components/Resizeable';

package/hooks/useFormAddEdit/index.js

@@ -0,0 +1,42 @@
+import { useNetwork, useFlags } from "@m4l/core";
+import { useState, useEffect } from "react";
+const useFormAddEdit = (props) => {
+  const { initialValues, objectId, endPoint, formatDataEnpoint } = props;
+  const [formValues, setFormValues] = useState(initialValues);
+  const [statusLoad, setStatusLoad] = useState(
+    objectId === void 0 ? "new" : "edit"
+  );
+  const { networkOperation } = useNetwork();
+  const { addFlag } = useFlags();
+  useEffect(() => {
+    let mounted = true;
+    if (statusLoad === "edit") {
+      networkOperation({
+        method: "GET",
+        endPoint: `${endPoint}/${objectId}`
+      }).then(
+        (response) => {
+          if (mounted) {
+            if (formatDataEnpoint) {
+              setFormValues(formatDataEnpoint(response));
+            } else {
+              setFormValues(response);
+            }
+            setStatusLoad("reload_values_provider");
+          }
+        },
+        () => {
+          setStatusLoad("error");
+        }
+      );
+    } else if (statusLoad === "new" || statusLoad === "reload_values_provider") {
+      addFlag("form_loaded");
+      setStatusLoad("ready");
+    }
+    return () => {
+      mounted = false;
+    };
+  }, [statusLoad]);
+  return { formValues, statusLoad };
+};
+export { useFormAddEdit as u };

package/index.js

@@ -1,19 +1,21 @@
 export { I as IconButton, a as IconButtonAnimate } from "./components/mui_extended/IconButton/index.js";
 import "framer-motion";
-import { styled } from "@mui/material";
-import { jsx } from "react/jsx-runtime";
+import "@mui/material";
+import "react/jsx-runtime";
 export { L as LoadingScreen } from "./components/animate/LoadingScreen/index.js";
-import { useState, useEffect } from "react";
+import "react";
 import "react-hook-form";
 export { F as FormProvider } from "./components/hook-form/FormProvider/index.js";
-import { useNetwork, useFlags } from "@m4l/core";
+import "@m4l/core";
 export { R as RHFAutocomplete } from "./components/hook-form/RHFAutocomplete/index.js";
 export { R as RHFAutocompleteAsync } from "./components/hook-form/RHFAutocompleteAsync/index.js";
 export { R as RHFCheckbox } from "./components/hook-form/RHFCheckbox/index.js";
 export { R as RHFDateTime } from "./components/hook-form/RHFDateTime/index.js";
 import "@mui/x-date-pickers";
 export { R as RHFTextField } from "./components/hook-form/RHFTextField/index.js";
-export { R as RHFPeriod, g as getPeriodComponetsDictionary } from "./components/hook-form/RHFPeriod/index.js";
+export { R as RHFPeriod } from "./components/hook-form/RHFPeriod/index.js";
+export { E as ErrorLabel } from "./components/ErrorLabel/index.js";
+export { P as Period, g as getPeriodComponetsDictionary } from "./components/Period/index.js";
 export { I as Icon } from "./components/Icon/index.js";
 import "@mui/material/styles";
 export { b as Actions, M as MenuActions, d as defaultCommonActionsDictionary, g as getCommonActionsDictionary } from "./components/CommonActions/components/Actions/index.js";
@@ -74,10 +76,10 @@ export { A as ActionFormCancel } from "./components/CommonActions/components/Act
 export { A as ActionFormIntro } from "./components/CommonActions/components/ActionFormIntro/index.js";
 export { L as Loadable } from "./components/Loadable/index.js";
 export { S as ScrollToTop } from "./components/ScrollToTop/index.js";
+export { u as useFormAddEdit } from "./hooks/useFormAddEdit/index.js";
 export { u as useModal } from "./hooks/useModal/index.js";
 export { L as Logo } from "./assets/Logo/index.js";
 import "./node_modules.js";
-import "./index.js";
 import "./utils/index.js";
 import "./react-data-grid.js";
 import "clsx";
@@ -88,57 +90,3 @@ import "simplebar-react";
 import "yup";
 import "./react-resizable.js";
 import "react-helmet-async";
-const Wrapper = styled("p")(({
-  theme
-}) => ({
-  ...theme.typography.caption,
-  color: theme.palette.error.main
-}));
-const ErrorLabel = (props) => {
-  const {
-    message
-  } = props;
-  return /* @__PURE__ */ jsx(Wrapper, {
-    children: message
-  });
-};
-const useFormAddEdit = (props) => {
-  const { initialValues, objectId, endPoint, formatDataEnpoint } = props;
-  const [formValues, setFormValues] = useState(initialValues);
-  const [statusLoad, setStatusLoad] = useState(
-    objectId === void 0 ? "new" : "edit"
-  );
-  const { networkOperation } = useNetwork();
-  const { addFlag } = useFlags();
-  useEffect(() => {
-    let mounted = true;
-    if (statusLoad === "edit") {
-      networkOperation({
-        method: "GET",
-        endPoint: `${endPoint}/${objectId}`
-      }).then(
-        (response) => {
-          if (mounted) {
-            if (formatDataEnpoint) {
-              setFormValues(formatDataEnpoint(response));
-            } else {
-              setFormValues(response);
-            }
-            setStatusLoad("reload_values_provider");
-          }
-        },
-        () => {
-          setStatusLoad("error");
-        }
-      );
-    } else if (statusLoad === "new" || statusLoad === "reload_values_provider") {
-      addFlag("form_loaded");
-      setStatusLoad("ready");
-    }
-    return () => {
-      mounted = false;
-    };
-  }, [statusLoad]);
-  return { formValues, statusLoad };
-};
-export { ErrorLabel, useFormAddEdit };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "0.1.10",
+  "version": "0.1.12",
   "license": "UNLICENSED",
   "dependencies": {
     "@m4l/core": "*",