@m4l/components 0.0.26 → 0.0.31

package/dist/components/DynamicFilter/styles.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+interface WrapperProps {
+    inEdition: boolean;
+}
+export declare const WrapperFilter: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & WrapperProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const WrapperFilterMobile: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & WrapperProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ContainerFistRow: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export {};

package/dist/components/DynamicFilter/types.d.ts

@@ -0,0 +1,65 @@
+import { Maybe } from '@m4l/core';
+export declare type FieldType = 'number' | 'string' | 'boolean' | 'date' | 'datetime' | 'time' | 'select' | 'in';
+export declare type OperandType = number | string | boolean | Date | [] | object;
+export declare type Operator = 'e' | 'ne' | 'b' | 'gt' | 'gte' | 'lt' | 'lte' | 'c' | 'nc';
+export declare const OPERATORS: Array<Operator>;
+export declare type StringOperator = 'c' | 'nc';
+export declare const STRING_OPERATORS: Array<StringOperator>;
+export declare type BooleanOperator = 'e' | 'ne';
+export declare const BOOLEAN_OPERATORS: Array<BooleanOperator>;
+export declare type DateTimeOperator = 'b' | 'e' | 'ne' | 'gt' | 'gte' | 'lt' | 'lte';
+export declare const DATE_TIME_OPERATORS: Array<DateTimeOperator>;
+export interface Field {
+    name: string;
+    label: string;
+    type: FieldType;
+    multiple?: boolean;
+    fixed?: boolean;
+    urlIcon: string;
+    defaultOperand1?: Maybe<OperandType>;
+    defaultOperand2?: Maybe<OperandType>;
+}
+export interface OptionOperator<T> {
+    id: T;
+    label: string;
+}
+export interface BaseApplyFilter {
+    id: number;
+    fieldName: string;
+    isSetted: boolean;
+    fixed: boolean;
+}
+export interface ValuesFilter {
+    operator: Operator;
+    labelOperator: string;
+    labelOperands: string;
+    operand1?: Maybe<OperandType>;
+    operand2?: Maybe<OperandType>;
+}
+export interface FormValuesFilter<T> {
+    valueOperator?: Maybe<OptionOperator<T>>;
+    valueOperand1?: Maybe<any>;
+    valueOperand2?: Maybe<any>;
+}
+export interface RawFilterFieldApply {
+    n: string;
+    o: Operator;
+    o1: Maybe<OperandType>;
+    o2: Maybe<OperandType>;
+}
+export interface FilterFieldApply extends BaseApplyFilter, ValuesFilter {
+}
+export declare type InitialFilterFieldApply = Omit<FilterFieldApply, 'id' | 'fixed' | 'isSetted'>;
+export declare type FilterToAddApply = Omit<FilterFieldApply, 'id' | 'labelOperator'>;
+export declare type FilterToEditApply = Omit<FilterFieldApply, 'labelOperator'>;
+export interface FilterFormFieldApply extends BaseApplyFilter, ValuesFilter, FormValuesFilter<Operator> {
+}
+export declare const ALL_FIELDS: Field;
+export interface DynamicFilterProps {
+    isSkeleton?: boolean;
+    automatic?: boolean;
+    withAllField?: boolean;
+    fields: Array<Field>;
+    initialFilters?: Array<InitialFilterFieldApply>;
+    onChangeFilter: (newFilters: Array<FilterFieldApply>, rawFilters: Array<RawFilterFieldApply>) => void;
+}

package/dist/components/FormActions/index.js

@@ -1,5 +1,6 @@
 import { useModuleDictionary } from "@m4l/core";
 import { Button } from "@mui/material";
+import { g as getVariantColor } from "../../vendor.js";
 import { styled } from "@mui/material/styles";
 import { jsxs, jsx } from "react/jsx-runtime";
 const WrapperActions = styled("div")(({
@@ -33,7 +34,7 @@ const FormActions = (props) => {
       variant: "contained",
       onClick: standardActions.onClickIntro,
       type: "submit",
-      color: variant === "warning" ? "warning" : variant === "error" ? "error" : "info",
+      color: getVariantColor(variant),
       children: getLabel("actions.action_accept")
     })]
   });

package/dist/components/FormActions/types.d.ts

@@ -1,7 +1,7 @@
-import { ModalOpenOptions } from "../../contexts/ModalContext/types";
+import { ModalOpenOptions, VariantModal } from '../../contexts/ModalContext/types';
 declare type ImodalOpt = Pick<ModalOpenOptions, 'actionComponents' | 'standardActions'>;
 export interface ActionsProps extends ImodalOpt {
-    variant?: string | undefined;
+    variant?: VariantModal;
     onCloseModal?: () => void | undefined;
 }
 export {};

package/dist/components/Icon/index.js

@@ -14,13 +14,15 @@ function Icon(props) {
     src = "https://s3.amazonaws.com/static.made4labs/environments/d1/frontend/components/commons/assets/icons/default.svg",
     width = "20px",
     height = "20px",
-    bgColor = "active"
+    bgColor = "active",
+    onClick
   } = props;
   return /* @__PURE__ */ jsx(MaskIcon, {
     src,
     width,
     height,
-    bgColor
+    bgColor,
+    onClick
   });
 }
 export { Icon as I };

package/dist/components/Icon/styles.d.ts

@@ -1,3 +1,2 @@
 /// <reference types="react" />
-import { IconProps } from './types';
-export declare const MaskIcon: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & IconProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const MaskIcon: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & import("./types").OwnProps & import("react").HTMLProps<HTMLDivElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/components/Icon/types.d.ts

@@ -1,6 +1,8 @@
-export interface IconProps {
-    src: string;
+import { HTMLProps } from 'react';
+export interface OwnProps {
+    src: string | undefined;
     width?: number | string;
     height?: number | string;
     bgColor?: string | 'info' | 'warning' | 'error' | 'active' | 'disabled';
 }
+export declare type IconProps = OwnProps & HTMLProps<HTMLDivElement>;

package/dist/components/Image/index.js

@@ -9,7 +9,7 @@ const SKTWrapperImage = styled("div")(({
   width,
   height: "100%",
   padding: theme.spacing(3),
-  mask: `url("data:image/svg+xml,%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 70 70' style='enable-background:new 0 0 70 70%3B' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M45 8.7c1.4-1.5 3.4-2.3 5.4-2.3s3.9 0.8 5.4 2.3s2.4 3.5 2.5 5.7c0 2.2-0.9 4.2-2.4 5.7s-3.5 2.3-5.5 2.2c-2.1 0.1-4-0.7-5.5-2.2c-1.4-1.5-2.3-3.5-2.4-5.7C42.6 12.2 43.5 10.2 45 8.7z'/%3E%3Cpath d='M68.4 62.1c-0.3 0.5-0.7 0.8-1.2 1.1s-1 0.4-1.6 0.4H4.3c-0.6 0-1.1-0.1-1.6-0.4s-0.9-0.6-1.2-1.1c-0.2-0.5-0.4-1-0.4-1.5s0.1-1.1 0.4-1.5l23-36.4c0.3-0.5 0.7-0.8 1.2-1.1c0.5-0.3 1-0.4 1.6-0.4c0.6 0 1.1 0.1 1.6 0.4c0.5 0.3 0.9 0.6 1.2 1.1l11.5 18.2c0.2 0.3 0.5 0.5 0.8 0.7c0.3 0.2 0.6 0.3 1 0.3c0.3 0 0.7-0.1 1-0.3c0.3-0.2 0.6-0.4 0.8-0.7l3.1-4.9c0.3-0.5 0.7-0.8 1.2-1.1c0.5-0.3 1-0.4 1.6-0.4c0.6 0 1.1 0.1 1.6 0.4c0.5 0.3 0.9 0.6 1.2 1.1l14.6 23.1c0.3 0.5 0.3 1 0.3 1.5S68.7 61.7 68.4 62.1z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain`,
+  mask: `zurl("data:image/svg+xml,%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 70 70' style='enable-background:new 0 0 70 70%3B' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M45 8.7c1.4-1.5 3.4-2.3 5.4-2.3s3.9 0.8 5.4 2.3s2.4 3.5 2.5 5.7c0 2.2-0.9 4.2-2.4 5.7s-3.5 2.3-5.5 2.2c-2.1 0.1-4-0.7-5.5-2.2c-1.4-1.5-2.3-3.5-2.4-5.7C42.6 12.2 43.5 10.2 45 8.7z'/%3E%3Cpath d='M68.4 62.1c-0.3 0.5-0.7 0.8-1.2 1.1s-1 0.4-1.6 0.4H4.3c-0.6 0-1.1-0.1-1.6-0.4s-0.9-0.6-1.2-1.1c-0.2-0.5-0.4-1-0.4-1.5s0.1-1.1 0.4-1.5l23-36.4c0.3-0.5 0.7-0.8 1.2-1.1c0.5-0.3 1-0.4 1.6-0.4c0.6 0 1.1 0.1 1.6 0.4c0.5 0.3 0.9 0.6 1.2 1.1l11.5 18.2c0.2 0.3 0.5 0.5 0.8 0.7c0.3 0.2 0.6 0.3 1 0.3c0.3 0 0.7-0.1 1-0.3c0.3-0.2 0.6-0.4 0.8-0.7l3.1-4.9c0.3-0.5 0.7-0.8 1.2-1.1c0.5-0.3 1-0.4 1.6-0.4c0.6 0 1.1 0.1 1.6 0.4c0.5 0.3 0.9 0.6 1.2 1.1l14.6 23.1c0.3 0.5 0.3 1 0.3 1.5S68.7 61.7 68.4 62.1z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain`,
   WebkitMask: `url("data:image/svg+xml,%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 70 70' style='enable-background:new 0 0 70 70%3B' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M45 8.7c1.4-1.5 3.4-2.3 5.4-2.3s3.9 0.8 5.4 2.3s2.4 3.5 2.5 5.7c0 2.2-0.9 4.2-2.4 5.7s-3.5 2.3-5.5 2.2c-2.1 0.1-4-0.7-5.5-2.2c-1.4-1.5-2.3-3.5-2.4-5.7C42.6 12.2 43.5 10.2 45 8.7z'/%3E%3Cpath d='M68.4 62.1c-0.3 0.5-0.7 0.8-1.2 1.1s-1 0.4-1.6 0.4H4.3c-0.6 0-1.1-0.1-1.6-0.4s-0.9-0.6-1.2-1.1c-0.2-0.5-0.4-1-0.4-1.5s0.1-1.1 0.4-1.5l23-36.4c0.3-0.5 0.7-0.8 1.2-1.1c0.5-0.3 1-0.4 1.6-0.4c0.6 0 1.1 0.1 1.6 0.4c0.5 0.3 0.9 0.6 1.2 1.1l11.5 18.2c0.2 0.3 0.5 0.5 0.8 0.7c0.3 0.2 0.6 0.3 1 0.3c0.3 0 0.7-0.1 1-0.3c0.3-0.2 0.6-0.4 0.8-0.7l3.1-4.9c0.3-0.5 0.7-0.8 1.2-1.1c0.5-0.3 1-0.4 1.6-0.4c0.6 0 1.1 0.1 1.6 0.4c0.5 0.3 0.9 0.6 1.2 1.1l14.6 23.1c0.3 0.5 0.3 1 0.3 1.5S68.7 61.7 68.4 62.1z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain`
 }));
 const WrapperLazyLoadImage = styled("div")(({
@@ -54,7 +54,6 @@ function Image({
   src,
   ...other
 }) {
-  console.log("ImageSkeleton", isSekeleton);
   const theme = useTheme();
   const themeMode = theme.palette.mode;
   if (isSekeleton) {

package/dist/components/ModalDialog/dictionary.d.ts

@@ -1,3 +1,3 @@
-import { Dictionary } from "@m4l/core";
+import { Dictionary } from '@m4l/core';
 export declare function getModalDialogComponentsDictionary(): string[];
 export declare const defaultModalDialogDictionary: Dictionary;

package/dist/components/ModalDialog/index.js

@@ -2,6 +2,7 @@ import { Dialog, IconButton, Paper } from "@mui/material";
 import { D as Draggable } from "../../react-draggable.js";
 import { u as useModal } from "../../hooks/useModal/index.js";
 import { styled } from "@mui/material/styles";
+import { a as getThemeVariantColor } from "../../vendor.js";
 import { R as Resizeable } from "../Resizeable/index.js";
 import { useResponsiveDesktop } from "@m4l/graphics";
 import { useEnvironment } from "@m4l/core";
@@ -39,7 +40,7 @@ const IconHeader = styled("div")(({ theme, variant }) => ({
   justifyContent: "center",
   marginRight: theme.spacing(1.5),
   "& > span": {
-    background: variant === "warning" ? theme.palette.warning.main : variant === "error" ? theme.palette.error.main : variant === "info" ? theme.palette.info.main : theme.palette.text.primary
+    background: getThemeVariantColor(theme, variant)
   }
 }));
 const Content = styled("div")(() => ({
@@ -48,7 +49,7 @@ const Content = styled("div")(() => ({
 }));
 const ModalTitle = styled("div")(({ theme, variant }) => ({
   ...theme.typography.subtitle1,
-  color: variant === "warning" ? theme.palette.warning.main : variant === "error" ? theme.palette.error.main : variant === "info" ? theme.palette.info.main : theme.palette.text.primary
+  color: getThemeVariantColor(theme, variant)
 }));
 const Header = (props) => {
   const {

package/dist/components/ModalDialog/types.d.ts

@@ -1,5 +1,6 @@
+import { VariantModal } from '../../contexts/ModalContext/types';
 export interface ModalDialogProps {
 }
 export interface VariantProps {
-    variant?: string | undefined;
+    variant?: VariantModal;
 }

package/dist/components/ObjectLogs/index.js

@@ -1,15 +1,13 @@
 import { useState, useEffect, useCallback, useMemo } from "react";
 import { useNetwork, useModuleDictionary, usePaginate } from "@m4l/core";
-import { Tooltip, IconButton, TextField } from "@mui/material";
-import { DateTimePicker } from "@mui/x-date-pickers";
-import { styled, useTheme } from "@mui/material/styles";
-import { startOfMonth, endOfDay } from "date-fns";
+import { styled } from "@mui/material/styles";
 import { D as DataGrid } from "../DataGrid/index.js";
-import { I as IconButton$1 } from "../mui_extended/IconButton/index.js";
 import { D as DateFormatter } from "../DataGrid/formatters/DateFormatter/index.js";
+import { Tooltip, IconButton } from "@mui/material";
 import { R as ReactJson } from "../../react-json-view.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { u as useModal } from "../../hooks/useModal/index.js";
+import { D as DynamicFilter } from "../DynamicFilter/index.js";
 const Container$1 = styled("div")(() => ({
   height: "100%",
   width: "100%",
@@ -77,13 +75,6 @@ function DetailDialog(props) {
       mounted = false;
     };
   }, []);
-  const detailTest = {
-    id: "id",
-    test: true,
-    number: 123
-  };
-  console.log("parseJson", detail, typeof detail);
-  console.log("parseJosnTest", detailTest, typeof detailTest);
   return /* @__PURE__ */ jsx(Container, {
     id: "objectLogsDetail",
     children: /* @__PURE__ */ jsx(ReactJson, {
@@ -133,17 +124,10 @@ function ObjectLogs(props) {
     resource_id,
     object_id
   } = props;
-  const now = new Date();
-  const [startValue, setStartValue] = useState(startOfMonth(now));
-  const [endValue, setEndtValue] = useState(endOfDay(now));
   const [queryParams, setQueryParams] = useState({
     resource_id,
-    object_id,
-    init_date: startValue,
-    end_date: endValue
+    object_id
   });
-  const [queryActive, setQueryActive] = useState(true);
-  const theme = useTheme();
   const dateFormatterCreatedAt = useCallback((rowProps) => /* @__PURE__ */ jsx(DateFormatter, {
     presentationType: "datetime",
     dateTime: rowProps.row.created_at
@@ -151,42 +135,35 @@ function ObjectLogs(props) {
   const DetailRowFormatter = useCallback((rowProps) => /* @__PURE__ */ jsx(DetailFormatter, {
     log_id: rowProps.row.id
   }), []);
-  const columns = useMemo(() => [
-    {
-      key: "created_at",
-      name: getLabel("object_logs.created_at"),
-      type: "date",
-      width: 300,
-      formatter: dateFormatterCreatedAt
-    },
-    {
-      key: "email",
-      name: getLabel("object_logs.email"),
-      type: "text",
-      width: 300
-    },
-    {
-      key: "resource_name",
-      name: getLabel("object_logs.resource_name"),
-      type: "text"
-    },
-    {
-      key: "preview",
-      name: getLabel("object_logs.preview"),
-      type: "text"
-    },
-    {
-      key: "Detail",
-      name: getLabel("object_logs.log_detail"),
-      type: "custom",
-      formatter: DetailRowFormatter
-    },
-    {
-      key: "ip",
-      name: getLabel("object_logs.ip"),
-      type: "text"
-    }
-  ], [getLabel]);
+  const columns = useMemo(() => [{
+    key: "created_at",
+    name: getLabel("object_logs.created_at"),
+    type: "date",
+    width: 300,
+    formatter: dateFormatterCreatedAt
+  }, {
+    key: "email",
+    name: getLabel("object_logs.email"),
+    type: "text",
+    width: 300
+  }, {
+    key: "resource_name",
+    name: getLabel("object_logs.resource_name"),
+    type: "text"
+  }, {
+    key: "preview",
+    name: getLabel("object_logs.preview"),
+    type: "text"
+  }, {
+    key: "Detail",
+    name: getLabel("object_logs.log_detail"),
+    type: "custom",
+    formatter: DetailRowFormatter
+  }, {
+    key: "ip",
+    name: getLabel("object_logs.ip"),
+    type: "text"
+  }], [getLabel]);
   const {
     pagerState,
     rows,
@@ -199,57 +176,33 @@ function ObjectLogs(props) {
     queryParams
   });
   useEffect(() => {
-    setQueryActive(true);
     clearRows();
   }, [object_id]);
-  const onChangeDate = (date, which) => {
-    if (!date)
-      return;
-    if (which === "start") {
-      setStartValue(date);
-    } else {
-      setEndtValue(date);
-    }
-    setQueryActive(true);
-  };
-  const onClickFilter = () => {
+  const onChangeFilter = (filters, rawFilters) => {
     setQueryParams({
       resource_id,
       object_id,
-      init_date: startValue,
-      end_date: endValue
+      f: rawFilters
     });
-    setQueryActive(false);
+    console.log("filter was change*****", JSON.stringify(rawFilters));
   };
   return /* @__PURE__ */ jsxs(Container$1, {
-    children: [/* @__PURE__ */ jsxs(Actions, {
+    children: [/* @__PURE__ */ jsx(Actions, {
       id: "objectLogsActions",
-      children: [/* @__PURE__ */ jsx(DateTimePicker, {
-        value: startValue,
-        onChange: (newValue) => {
-          onChangeDate(newValue, "start");
-        },
-        renderInput: (params) => /* @__PURE__ */ jsx(TextField, {
-          ...params
-        })
-      }), /* @__PURE__ */ jsx(DateTimePicker, {
-        value: endValue,
-        onChange: (newValue) => {
-          onChangeDate(newValue, "end");
-        },
-        renderInput: (params) => /* @__PURE__ */ jsx(TextField, {
-          ...params
-        })
-      }), /* @__PURE__ */ jsx(IconButton$1, {
-        dictionaryTooltip: "object_logs.search",
-        onClick: onClickFilter,
-        sx: {
-          color: queryActive ? theme.palette.primary.main : theme.palette.text.primary
-        },
-        disabled: object_id === void 0,
-        "aria-label": "searc",
-        src: "https://s3.amazonaws.com/static.made4labs/environments/d1/frontend/components/object_logs/assets/icons/search.svg"
-      })]
+      children: /* @__PURE__ */ jsx(DynamicFilter, {
+        withAllField: false,
+        onChangeFilter,
+        automatic: false,
+        fields: [{
+          name: "user_logs.created_at",
+          label: getLabel("object_logs.date"),
+          type: "datetime",
+          multiple: false,
+          fixed: true,
+          urlIcon: "https://s3.amazonaws.com/static.made4labs/environments/d1/frontend/components/icon/assets/icons/default.svg"
+        }],
+        initialFilters: []
+      })
     }), /* @__PURE__ */ jsx(GridWrapper, {
       id: "GridWrapper",
       children: /* @__PURE__ */ jsx(DataGrid, {

package/dist/components/ObjectLogs/types.d.ts

@@ -13,6 +13,4 @@ export interface LogsProps {
     object_id: Maybe<number>;
 }
 export interface QueryParams extends LogsProps, Record<string, unknown> {
-    init_date: Date;
-    end_date: Date;
 }

package/dist/components/ScrollBar/index.d.ts

@@ -1,3 +1,6 @@
-/// <reference types="react" />
-import { ScrollBarProps } from './types';
-export declare function ScrollBar({ children, sx, ...other }: ScrollBarProps): JSX.Element;
+import { ReactElement } from 'react';
+interface Props {
+    children?: ReactElement;
+}
+export default function Scrollbar({ children }: Props): JSX.Element;
+export {};

package/dist/components/ScrollBar/index.js

@@ -1,6 +1,6 @@
-import { Box } from "@mui/material";
-import { styled, alpha } from "@mui/material/styles";
 import { S as SimpleBar } from "../../simplebar.js";
+import { styled, alpha } from "@mui/material/styles";
+import { Box } from "@mui/material";
 import { jsx } from "react/jsx-runtime";
 const RootStyle = styled("div")(() => ({
   flexGrow: 1,
@@ -29,32 +29,24 @@ const SimpleBarStyle = styled(SimpleBar)(({
     zIndex: "inherit"
   }
 }));
-function ScrollBar({
-  children,
-  sx,
-  ...other
+function Scrollbar({
+  children
 }) {
   const userAgent = typeof navigator === "undefined" ? "SSR" : navigator.userAgent;
   const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent);
   if (isMobile) {
     return /* @__PURE__ */ jsx(Box, {
       sx: {
-        overflowX: "auto",
-        ...sx
+        overflowX: "auto"
       },
-      ...other,
       children
     });
   }
   return /* @__PURE__ */ jsx(RootStyle, {
-    id: "RootStyle",
     children: /* @__PURE__ */ jsx(SimpleBarStyle, {
-      timeout: 500,
-      clickOnTrack: false,
-      sx,
-      ...other,
+      autoHide: false,
       children
     })
   });
 }
-export { ScrollBar as S };
+export { Scrollbar as S };

package/dist/components/hook-form/FormProvider/index.js

@@ -137,7 +137,6 @@ function FormProvider(props) {
     if (values.initial) {
       return;
     }
-    console.log("****\xB7\xB7\xB7\xB7\xB7\xB7useEffect FormProvider", values);
     const keys = Object.keys(values);
     keys.forEach((key) => {
       methods.setValue(key, values[key], {

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { TextFieldProps } from '@mui/material';
+import type { RHFAutocompleteProps } from './types';
+export declare function RHFAutocomplete<T>(props: RHFAutocompleteProps<T> & TextFieldProps): JSX.Element;

package/dist/components/hook-form/RHFAutocomplete/styles.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const SKTRHFAutocompleteWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const PropertieValueLabel: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SKTInputText: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const WrapperAutocomplete: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/components/hook-form/RHFAutocomplete/types.d.ts

@@ -0,0 +1,13 @@
+export interface SkeletonProps {
+    isSkeleton?: boolean;
+    width?: string | number;
+    height?: string | number;
+}
+export interface RHFAutocompleteProps<T> {
+    name: string;
+    options: Array<T>;
+    getOptionLabel: (option: T) => string;
+    isOptionEqualToValue: (option: T, value: T) => boolean;
+    skeletonProps?: SkeletonProps;
+    label: string;
+}

package/dist/components/hook-form/RHFAutocompleteAsync/index.js

@@ -74,7 +74,6 @@ function RHFAutocompleteAsync(props) {
       setOptions([initialValue]);
     }
   }, [initialValue, optionsLoaded]);
-  console.log("***2022Render RHFAutocompleteAsync", loading, options, initialValue);
   const getOptionLabelLocal = (option) => {
     if (option === void 0 || option === null) {
       return "";
@@ -155,7 +154,6 @@ function RHFAutocompleteAsync(props) {
       loadingText: "",
       noOptionsText: getLabel("component_no_options"),
       renderInput: (params) => {
-        console.log("TextField", params);
         return /* @__PURE__ */ jsx(TextField, {
           ...params,
           label,

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { TextFieldProps } from '@mui/material';
+import { RHFDateTimeProps } from './types';
+export declare function RHFDateTime(props: RHFDateTimeProps & TextFieldProps): JSX.Element;

package/dist/components/hook-form/RHFDateTime/styles.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const SKTRHFWrapperTextField: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/components/hook-form/RHFDateTime/types.d.ts

@@ -0,0 +1,9 @@
+export interface SkeletonProps {
+    isSkeleton?: boolean;
+    width?: string | number;
+    height?: string | number;
+}
+export interface RHFDateTimeProps {
+    skeletonProps?: SkeletonProps;
+    name: string;
+}

package/dist/components/hook-form/RHFDateTime.js

@@ -0,0 +1,72 @@
+import { useFormContext, Controller } from "react-hook-form";
+import { Skeleton, TextField } from "@mui/material";
+import { styled } from "@mui/material/styles";
+import { DateTimePicker } from "@mui/x-date-pickers";
+import { jsx } from "react/jsx-runtime";
+const SKTRHFWrapperTextField = styled("div")(({
+  theme
+}) => ({
+  display: "flex",
+  width: "100%",
+  alignItems: "center",
+  border: `1px solid ${theme.palette.divider}`,
+  padding: "12px 14px",
+  borderRadius: theme.spacing(1)
+}));
+function RHFDateTime(props) {
+  const {
+    name,
+    autoComplete = "off",
+    skeletonProps: skeletoProps = {}
+  } = props;
+  const {
+    isSkeleton = false,
+    width = "100%",
+    height = 14
+  } = skeletoProps;
+  const {
+    control
+  } = useFormContext();
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(SKTRHFWrapperTextField, {
+      children: /* @__PURE__ */ jsx(Skeleton, {
+        variant: "text",
+        width,
+        height
+      })
+    });
+  }
+  return /* @__PURE__ */ jsx(Controller, {
+    name,
+    control,
+    render: ({
+      field,
+      fieldState: {
+        error
+      }
+    }) => {
+      return /* @__PURE__ */ jsx(DateTimePicker, {
+        ampm: false,
+        inputFormat: "yyyy-MM-dd HH:mm:ss",
+        mask: "____-__-__ __:__:__",
+        label: "",
+        value: field.value,
+        onChange: (value) => {
+          if (!isNaN(value)) {
+            field.onChange(value);
+          } else {
+            field.onChange(void 0);
+          }
+        },
+        renderInput: (params) => /* @__PURE__ */ jsx(TextField, {
+          autoComplete,
+          fullWidth: true,
+          error: !!error,
+          helperText: error?.message,
+          ...params
+        })
+      });
+    }
+  });
+}
+export { RHFDateTime as R };