@gustavo-valsechi/client 1.4.253 → 1.4.255

package/dist/src/components/types/form/index.js

@@ -73,7 +73,6 @@ function Form(props) {
     defaultValues: props.defaultValues,
     mode: "all"
   });
-  console.log(getValues());
   (0, import_react.useEffect)(() => {
     if (!props.clearWhen) return;
     const defaultValues = {};
@@ -121,6 +120,7 @@ function Form(props) {
         error: (_a = errors[data.name]) == null ? void 0 : _a.message,
         register,
         setValue,
+        getValues,
         watch
       }
     );

package/dist/src/components/types/form/index.mjs

@@ -39,7 +39,6 @@ function Form(props) {
     defaultValues: props.defaultValues,
     mode: "all"
   });
-  console.log(getValues());
   useEffect(() => {
     if (!props.clearWhen) return;
     const defaultValues = {};
@@ -87,6 +86,7 @@ function Form(props) {
         error: (_a = errors[data.name]) == null ? void 0 : _a.message,
         register,
         setValue,
+        getValues,
         watch
       }
     );

package/dist/src/components/types/form/types/datetime/index.js

@@ -39,62 +39,38 @@ var import_styles = require("./styles");
 var import_label = require("../label");
 var import_error = require("../error");
 var import_contexts = require("../../../../../contexts");
-var import_LocalizationProvider = require("@mui/x-date-pickers/LocalizationProvider");
-var import_AdapterDayjs = require("@mui/x-date-pickers/AdapterDayjs");
-var import_DateTimePicker = require("@mui/x-date-pickers/DateTimePicker");
-var import_PickersLayout = require("@mui/x-date-pickers/PickersLayout");
-var import_locales = require("@mui/x-date-pickers/locales");
-var import_dayjs = __toESM(require("dayjs"));
 var import_lodash = __toESM(require("lodash"));
+var import_picker = __toESM(require("./picker"));
 function InputDateTime(props) {
   const inputRef = (0, import_react.useRef)();
   const toggleRef = (0, import_react.useRef)();
   const target = (0, import_contexts.useTarget)();
   const register = (props.register || ((name) => ({})))(props.name || "");
-  const [dateTime, setDateDime] = (0, import_react.useState)((0, import_dayjs.default)());
   (0, import_react.useEffect)(() => {
     if (!inputRef.current || !toggleRef.current) return;
     target.add({
       ref: inputRef,
       toggleRef,
-      component: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_LocalizationProvider.LocalizationProvider,
-        {
-          dateAdapter: import_AdapterDayjs.AdapterDayjs,
-          adapterLocale: "pt-br",
-          localeText: import_locales.ptBR.components.MuiLocalizationProvider.defaultProps.localeText,
-          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_DateTimePicker.DateTimePicker,
-            {
-              value: dateTime,
-              onChange: setDateDime,
-              open: true,
-              enableAccessibleFieldDOMStructure: false,
-              slots: {
-                textField: () => null,
-                layout: import_PickersLayout.PickersLayout
-              },
-              slotProps: {
-                popper: {
-                  disablePortal: true
-                }
-              }
-            }
-          )
-        }
-      )
+      mobileModal: {
+        noPadding: true,
+        buttons: [
+          {
+            label: "confirmar",
+            onClick: () => target.close(inputRef)
+          }
+        ]
+      },
+      component: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_picker.default, { ...props })
     });
   }, [inputRef, toggleRef]);
-  (0, import_react.useEffect)(() => {
-    if (props.setValue) props.setValue(props.name, dateTime);
-  }, [dateTime]);
   const onChange = (event) => {
+    var _a;
     if (register.onChange) register.onChange(event);
-    if (props.onChange) props.onChange(event);
+    if (props.onChange) props.onChange(((_a = event == null ? void 0 : event.target) == null ? void 0 : _a.value) || "");
   };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.Container, { className: props.className, error: props.error, disabled: props.disabled, children: [
     !!props.label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_label.InputLabel, { optional: props.optional, children: props.label }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "input-content", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref: inputRef, className: "input-content", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         "input",
         {
@@ -104,7 +80,6 @@ function InputDateTime(props) {
             if (props.onFocus) props.onFocus(props.name);
           },
           ...register,
-          ref: inputRef,
           onChange
         }
       ),

package/dist/src/components/types/form/types/datetime/index.mjs

@@ -1,67 +1,43 @@
 "use client";
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useRef, useState, useEffect } from "react";
+import { useRef, useEffect } from "react";
 import { Container } from "./styles";
 import { InputLabel } from "../label";
 import { InputError } from "../error";
 import { useTarget } from "../../../../../contexts";
-import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
-import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
-import { DateTimePicker } from "@mui/x-date-pickers/DateTimePicker";
-import { PickersLayout } from "@mui/x-date-pickers/PickersLayout";
-import { ptBR } from "@mui/x-date-pickers/locales";
-import dayjs from "dayjs";
 import _ from "lodash";
+import InputDateTimePicker from "./picker";
 function InputDateTime(props) {
   const inputRef = useRef();
   const toggleRef = useRef();
   const target = useTarget();
   const register = (props.register || ((name) => ({})))(props.name || "");
-  const [dateTime, setDateDime] = useState(dayjs());
   useEffect(() => {
     if (!inputRef.current || !toggleRef.current) return;
     target.add({
       ref: inputRef,
       toggleRef,
-      component: /* @__PURE__ */ jsx(
-        LocalizationProvider,
-        {
-          dateAdapter: AdapterDayjs,
-          adapterLocale: "pt-br",
-          localeText: ptBR.components.MuiLocalizationProvider.defaultProps.localeText,
-          children: /* @__PURE__ */ jsx(
-            DateTimePicker,
-            {
-              value: dateTime,
-              onChange: setDateDime,
-              open: true,
-              enableAccessibleFieldDOMStructure: false,
-              slots: {
-                textField: () => null,
-                layout: PickersLayout
-              },
-              slotProps: {
-                popper: {
-                  disablePortal: true
-                }
-              }
-            }
-          )
-        }
-      )
+      mobileModal: {
+        noPadding: true,
+        buttons: [
+          {
+            label: "confirmar",
+            onClick: () => target.close(inputRef)
+          }
+        ]
+      },
+      component: /* @__PURE__ */ jsx(InputDateTimePicker, { ...props })
     });
   }, [inputRef, toggleRef]);
-  useEffect(() => {
-    if (props.setValue) props.setValue(props.name, dateTime);
-  }, [dateTime]);
   const onChange = (event) => {
+    var _a;
     if (register.onChange) register.onChange(event);
-    if (props.onChange) props.onChange(event);
+    if (props.onChange) props.onChange(((_a = event == null ? void 0 : event.target) == null ? void 0 : _a.value) || "");
   };
   return /* @__PURE__ */ jsxs(Container, { className: props.className, error: props.error, disabled: props.disabled, children: [
     !!props.label && /* @__PURE__ */ jsx(InputLabel, { optional: props.optional, children: props.label }),
-    /* @__PURE__ */ jsxs("div", { className: "input-content", children: [
+    /* @__PURE__ */ jsxs("div", { ref: inputRef, className: "input-content", children: [
       /* @__PURE__ */ jsx(
         "input",
         {
@@ -71,7 +47,6 @@ function InputDateTime(props) {
             if (props.onFocus) props.onFocus(props.name);
           },
           ...register,
-          ref: inputRef,
           onChange
         }
       ),

package/dist/src/components/types/form/types/datetime/picker/index.d.ts

@@ -0,0 +1,2 @@
+import { IInputDateTime } from "../../../../../../interfaces";
+export default function InputDateTimePicker(props: IInputDateTime): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/types/form/types/datetime/picker/index.js

@@ -0,0 +1,101 @@
+"use client";
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var picker_exports = {};
+__export(picker_exports, {
+  default: () => InputDateTimePicker
+});
+module.exports = __toCommonJS(picker_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_contexts = require("../../../../../../contexts");
+var import_styles = require("./styles");
+var import_LocalizationProvider = require("@mui/x-date-pickers/LocalizationProvider");
+var import_AdapterDayjs = require("@mui/x-date-pickers/AdapterDayjs");
+var import_DateCalendar = require("@mui/x-date-pickers/DateCalendar");
+var import_MultiSectionDigitalClock = require("@mui/x-date-pickers/MultiSectionDigitalClock");
+var import_x_date_pickers = require("@mui/x-date-pickers");
+var import_locales = require("@mui/x-date-pickers/locales");
+var import_dayjs = __toESM(require("dayjs"));
+var import_utils = __toESM(require("@gustavo-valsechi/utils"));
+function InputDateTimePicker(props) {
+  const theme = (0, import_contexts.useTheme)();
+  const [dateTime, setDateTime] = (0, import_react.useState)((0, import_dayjs.default)());
+  (0, import_react.useEffect)(() => {
+    if (props.setValue) props.setValue(props.name, import_utils.default.moment(dateTime.toDate()).format("YYYY-MM-DD HH:mm"));
+  }, [dateTime]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_LocalizationProvider.LocalizationProvider,
+    {
+      dateAdapter: import_AdapterDayjs.AdapterDayjs,
+      adapterLocale: "pt-br",
+      localeText: import_locales.ptBR.components.MuiLocalizationProvider.defaultProps.localeText,
+      children: theme.content.isMobile ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.MobileContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_x_date_pickers.StaticDateTimePicker,
+        {
+          value: dateTime,
+          onChange: (value) => setDateTime(value),
+          minutesStep: 1,
+          timeSteps: { minutes: 1 },
+          ampm: false,
+          slots: { layout: import_x_date_pickers.PickersLayout }
+        }
+      ) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.Container, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_DateCalendar.DateCalendar,
+          {
+            value: dateTime,
+            onChange: (newDate) => {
+              if (!newDate) return;
+              setDateTime(
+                (prev) => prev.year(newDate.year()).month(newDate.month()).date(newDate.date())
+              );
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_MultiSectionDigitalClock.MultiSectionDigitalClock,
+          {
+            value: dateTime,
+            minutesStep: 1,
+            timeSteps: { minutes: 1 },
+            ampm: false,
+            onChange: (newTime) => {
+              if (!newTime) return;
+              setDateTime(
+                (prev) => prev.hour(newTime.hour()).minute(newTime.minute())
+              );
+            }
+          }
+        )
+      ] })
+    }
+  );
+}

package/dist/src/components/types/form/types/datetime/picker/index.mjs

@@ -0,0 +1,71 @@
+"use client";
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { useTheme } from "../../../../../../contexts";
+import { Container, MobileContainer } from "./styles";
+import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
+import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
+import { DateCalendar } from "@mui/x-date-pickers/DateCalendar";
+import { MultiSectionDigitalClock } from "@mui/x-date-pickers/MultiSectionDigitalClock";
+import { StaticDateTimePicker, PickersLayout } from "@mui/x-date-pickers";
+import { ptBR } from "@mui/x-date-pickers/locales";
+import dayjs from "dayjs";
+import Utils from "@gustavo-valsechi/utils";
+function InputDateTimePicker(props) {
+  const theme = useTheme();
+  const [dateTime, setDateTime] = useState(dayjs());
+  useEffect(() => {
+    if (props.setValue) props.setValue(props.name, Utils.moment(dateTime.toDate()).format("YYYY-MM-DD HH:mm"));
+  }, [dateTime]);
+  return /* @__PURE__ */ jsx(
+    LocalizationProvider,
+    {
+      dateAdapter: AdapterDayjs,
+      adapterLocale: "pt-br",
+      localeText: ptBR.components.MuiLocalizationProvider.defaultProps.localeText,
+      children: theme.content.isMobile ? /* @__PURE__ */ jsx(MobileContainer, { children: /* @__PURE__ */ jsx(
+        StaticDateTimePicker,
+        {
+          value: dateTime,
+          onChange: (value) => setDateTime(value),
+          minutesStep: 1,
+          timeSteps: { minutes: 1 },
+          ampm: false,
+          slots: { layout: PickersLayout }
+        }
+      ) }) : /* @__PURE__ */ jsxs(Container, { children: [
+        /* @__PURE__ */ jsx(
+          DateCalendar,
+          {
+            value: dateTime,
+            onChange: (newDate) => {
+              if (!newDate) return;
+              setDateTime(
+                (prev) => prev.year(newDate.year()).month(newDate.month()).date(newDate.date())
+              );
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          MultiSectionDigitalClock,
+          {
+            value: dateTime,
+            minutesStep: 1,
+            timeSteps: { minutes: 1 },
+            ampm: false,
+            onChange: (newTime) => {
+              if (!newTime) return;
+              setDateTime(
+                (prev) => prev.hour(newTime.hour()).minute(newTime.minute())
+              );
+            }
+          }
+        )
+      ] })
+    }
+  );
+}
+export {
+  InputDateTimePicker as default
+};

package/dist/src/components/types/form/types/datetime/picker/styles.d.ts

@@ -0,0 +1,2 @@
+export declare const Container: any;
+export declare const MobileContainer: any;

package/dist/src/components/types/form/types/datetime/picker/styles.js

@@ -0,0 +1,178 @@
+"use client";
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var styles_exports = {};
+__export(styles_exports, {
+  Container: () => Container,
+  MobileContainer: () => MobileContainer
+});
+module.exports = __toCommonJS(styles_exports);
+var import_styled_components = __toESM(require("styled-components"));
+const Container = import_styled_components.default.div`
+    display: flex;
+    background-color: ${({ theme }) => theme.primary};
+    border: 1px solid ${({ theme }) => theme.t2};
+    color: ${({ theme }) => theme.t6};
+    border-radius: 5px;
+    width: 420px;
+
+    .css-5wchs2-MuiDateCalendar-root {
+        width: 1111px !important;
+    }
+
+    .css-1egrucl-MuiList-root-MuiMultiSectionDigitalClockSection-root,
+    .css-ooqz8u-MuiList-root-MuiMultiSectionDigitalClockSection-root {
+        border-left: 2px solid ${({ theme }) => theme.t05} !important;
+        scrollbar-width: initial !important;
+        max-height: 298px !important;
+        width: 60px !important;
+    }
+
+    .css-1n1xn3x-MuiPickersSlideTransition-root-MuiDayCalendar-slideTransition {
+        min-height: 192px !important;
+    }
+
+    .css-sabdtc-MuiMultiSectionDigitalClock-root {
+        max-height: 300px !important;
+    }
+
+    .css-5wchs2-MuiDateCalendar-root {
+        max-height: 298px !important;
+    }
+
+    .css-ux17pc-MuiButtonBase-root-MuiMenuItem-root-MuiMultiSectionDigitalClockSection-item {
+        font-size: .8rem !important;
+        color: ${({ theme }) => theme.t6} !important;
+    }
+
+    .css-ux17pc-MuiButtonBase-root-MuiMenuItem-root-MuiMultiSectionDigitalClockSection-item.Mui-selected {
+        color: ${({ theme }) => theme.secondary} !important;
+        background-color: ${({ theme }) => theme.tertiary} !important;
+        border-radius: 5px !important;
+    }
+
+    .css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root,
+    .css-17f9e7e-MuiTypography-root-MuiDayCalendar-weekDayLabel {
+        color: ${({ theme }) => theme.t6} !important;
+    }
+
+    .css-16hplv9-MuiButtonBase-root-MuiIconButton-root-MuiPickersCalendarHeader-switchViewButton,
+    .css-15a32k7-MuiButtonBase-root-MuiIconButton-root-MuiPickersCalendarHeader-switchViewButton,
+    .css-1bsiu4i-MuiButtonBase-root-MuiIconButton-root-MuiPickersArrowSwitcher-button,
+    .css-xp4e7m-MuiButtonBase-root-MuiIconButton-root-MuiPickersArrowSwitcher-button {
+        color: ${({ theme }) => theme.t2} !important;
+    }
+
+    .css-qct7wd-MuiButtonBase-root-MuiPickersDay-root.Mui-selected,
+    .css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root.Mui-selected {
+        color: ${({ theme }) => theme.secondary} !important;
+        background-color: ${({ theme }) => theme.tertiary} !important;
+    }
+    
+    .css-qct7wd-MuiButtonBase-root-MuiPickersDay-root:not(.Mui-selected) {
+        color: ${({ theme }) => theme.t6} !important;
+        border: 1px solid ${({ theme }) => theme.t2} !important;
+    }
+`;
+const MobileContainer = import_styled_components.default.div`
+    color: ${({ theme }) => theme.t6};
+    
+    .MuiPickersToolbar-title {
+        display: none;
+    }
+
+    .css-thpu5-MuiTypography-root-MuiPickersToolbarText-root,
+    .css-6mw38q-MuiTypography-root,
+    .css-1hkhsf8-MuiTypography-root-MuiPickersToolbarText-root,
+    .css-1vx8ao-MuiTypography-root-MuiPickersToolbarText-root,
+    .css-f9hx5u-MuiTypography-root-MuiPickersToolbarText-root-MuiDateTimePickerToolbar-separator,
+    .css-17f9e7e-MuiTypography-root-MuiDayCalendar-weekDayLabel,
+    .css-4k4mmf-MuiButtonBase-root-MuiPickersDay-root {
+        color: ${({ theme }) => theme.t6} !important;
+    }
+
+    .css-14yom7c-MuiSvgIcon-root-MuiPickersCalendarHeader-switchViewIcon,
+    .css-8cn20p-MuiButtonBase-root-MuiTab-root,
+    .css-xp4e7m-MuiButtonBase-root-MuiIconButton-root-MuiPickersArrowSwitcher-button,
+    .css-1bsiu4i-MuiButtonBase-root-MuiIconButton-root-MuiPickersArrowSwitcher-button {
+        color: ${({ theme }) => theme.t2} !important;
+    }
+
+    .css-8cn20p-MuiButtonBase-root-MuiTab-root.Mui-selected,
+    .css-qct7wd-MuiButtonBase-root-MuiPickersDay-root.Mui-selected,
+    .css-ux17pc-MuiButtonBase-root-MuiMenuItem-root-MuiMultiSectionDigitalClockSection-item.Mui-selected {
+        color: ${({ theme }) => theme.secondary} !important;
+    }
+
+    .css-1qltlow-MuiTabs-indicator {
+        background-color: ${({ theme }) => theme.secondary} !important;
+    }
+
+    .css-qct7wd-MuiButtonBase-root-MuiPickersDay-root.Mui-selected,
+    .css-ux17pc-MuiButtonBase-root-MuiMenuItem-root-MuiMultiSectionDigitalClockSection-item.Mui-selected {
+        background-color: ${({ theme }) => theme.tertiary} !important;
+    }
+
+    .css-ux17pc-MuiButtonBase-root-MuiMenuItem-root-MuiMultiSectionDigitalClockSection-item.Mui-selected {
+        border-radius: 5px !important;
+    }
+
+    .css-1vx8ao-MuiTypography-root-MuiPickersToolbarText-root,
+    .css-f9hx5u-MuiTypography-root-MuiPickersToolbarText-root-MuiDateTimePickerToolbar-separator {
+        font-size: 2rem !important;
+    }
+    
+    .css-1x57bai-MuiDialogActions-root-MuiPickersLayout-actionBar {
+        display: none;
+    }
+
+    .MuiMultiSectionDigitalClock-root {
+        width: 100% !important;
+    }
+
+    .css-5wchs2-MuiDateCalendar-root {
+        height: 300px !important;
+    }
+
+    .css-10qtiir-MuiPickersToolbar-content {
+        padding: .3rem .5rem 0 .5rem;
+    }
+    
+    @media (max-width: ${({ theme }) => theme.mobileMinWidth}) {
+        .css-5wchs2-MuiDateCalendar-root {
+            width: 100% !important;
+        }
+    }
+`;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Container,
+  MobileContainer
+});