@m4l/components 0.0.27 → 0.0.32

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/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/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 declare function Scrollbar({ children }: Props): JSX.Element;
+export default Scrollbar;

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

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

@@ -1,4 +1,3 @@
 /// <reference types="react" />
-import { TextFieldProps } from '@mui/material';
 import { RHFTextFieldProps } from './types';
-export declare function RHFTextField(props: RHFTextFieldProps & TextFieldProps): JSX.Element;
+export declare const RHFTextField: import("react").ForwardRefExoticComponent<(Pick<RHFTextFieldProps & import("@mui/material").StandardTextFieldProps, "error" | "size" | "label" | "slot" | "select" | "style" | "title" | "color" | "translate" | "margin" | "sx" | "key" | "children" | "className" | "classes" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "variant" | "name" | "type" | "autoFocus" | "disabled" | "value" | "autoComplete" | "required" | "rows" | "fullWidth" | "focused" | "inputProps" | "inputRef" | "hiddenLabel" | "InputProps" | "FormHelperTextProps" | "helperText" | "InputLabelProps" | "multiline" | "maxRows" | "minRows" | "SelectProps" | "skeletonProps"> | Pick<RHFTextFieldProps & import("@mui/material").FilledTextFieldProps, "error" | "size" | "label" | "slot" | "select" | "style" | "title" | "color" | "translate" | "margin" | "sx" | "key" | "children" | "className" | "classes" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "variant" | "name" | "type" | "autoFocus" | "disabled" | "value" | "autoComplete" | "required" | "rows" | "fullWidth" | "focused" | "inputProps" | "inputRef" | "hiddenLabel" | "InputProps" | "FormHelperTextProps" | "helperText" | "InputLabelProps" | "multiline" | "maxRows" | "minRows" | "SelectProps" | "skeletonProps"> | Pick<RHFTextFieldProps & import("@mui/material").OutlinedTextFieldProps, "error" | "size" | "label" | "slot" | "select" | "style" | "title" | "color" | "translate" | "margin" | "sx" | "key" | "children" | "className" | "classes" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "variant" | "name" | "type" | "autoFocus" | "disabled" | "value" | "autoComplete" | "required" | "rows" | "fullWidth" | "focused" | "inputProps" | "inputRef" | "hiddenLabel" | "InputProps" | "FormHelperTextProps" | "helperText" | "InputLabelProps" | "multiline" | "maxRows" | "minRows" | "SelectProps" | "skeletonProps">) & import("react").RefAttributes<HTMLInputElement>>;

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

@@ -1,6 +1,7 @@
 import { useFormContext, Controller } from "react-hook-form";
 import { Skeleton, TextField } from "@mui/material";
 import { styled } from "@mui/material/styles";
+import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 const SKTRHFWrapperTextField = styled("div")(({
   theme
@@ -12,7 +13,7 @@ const SKTRHFWrapperTextField = styled("div")(({
   padding: "12px 14px",
   borderRadius: theme.spacing(1)
 }));
-function RHFTextField(props) {
+const RHFTextField = forwardRef((props, ref) => {
   const {
     name,
     autoComplete = "off",
@@ -20,7 +21,7 @@ function RHFTextField(props) {
     ...other
   } = props;
   const {
-    isSkeleton = true,
+    isSkeleton = false,
     width = "100%",
     height = 14
   } = skeletoProps;
@@ -45,6 +46,7 @@ function RHFTextField(props) {
         error
       }
     }) => /* @__PURE__ */ jsx(TextField, {
+      inputRef: ref,
       autoComplete,
       ...field,
       fullWidth: true,
@@ -53,5 +55,6 @@ function RHFTextField(props) {
       ...other
     })
   });
-}
+});
+RHFTextField.displayName = "RHFTextField";
 export { RHFTextField as R };