@ikatec/nebula-react 1.0.18 → 1.0.20

package/dist/index.d.mts

@@ -591,8 +591,9 @@ interface InputDatePickerSingleProps extends Omit<InputTextProps, 'onChange' | '
     numberOfMonths?: CalendarProps['numberOfMonths'];
     portal?: PopoverContentProps['portal'];
     placeholder?: string;
-    className: InputTextProps['className'];
+    className?: string;
     disabledDates?: CalendarProps['disabled'];
+    onClean?: VoidFunction;
 }
 declare const dateIsAvailable: (inputDate?: Date | null, disabledDates?: InputDatePickerSingleProps["disabledDates"]) => boolean;
 declare const InputDatePickerSingle: ({ portal, placeholder, className, value, onChange, numberOfMonths, onClean, disabledDates, ...rest }: InputDatePickerSingleProps) => react_jsx_runtime.JSX.Element;
@@ -603,8 +604,9 @@ interface InputDateTimePickerSingleProps extends Omit<InputTextProps, 'onChange'
     numberOfMonths?: CalendarProps['numberOfMonths'];
     portal?: PopoverContentProps['portal'];
     placeholder?: string;
-    className: InputTextProps['className'];
+    className?: string;
     disabledDates?: CalendarProps['disabled'];
+    onClean?: VoidFunction;
 }
 declare const InputDateTimePickerSingle: ({ portal, placeholder, className, value, onChange, numberOfMonths, onClean, disabledDates, ...rest }: InputDateTimePickerSingleProps) => react_jsx_runtime.JSX.Element;
 

package/dist/index.d.ts

@@ -591,8 +591,9 @@ interface InputDatePickerSingleProps extends Omit<InputTextProps, 'onChange' | '
     numberOfMonths?: CalendarProps['numberOfMonths'];
     portal?: PopoverContentProps['portal'];
     placeholder?: string;
-    className: InputTextProps['className'];
+    className?: string;
     disabledDates?: CalendarProps['disabled'];
+    onClean?: VoidFunction;
 }
 declare const dateIsAvailable: (inputDate?: Date | null, disabledDates?: InputDatePickerSingleProps["disabledDates"]) => boolean;
 declare const InputDatePickerSingle: ({ portal, placeholder, className, value, onChange, numberOfMonths, onClean, disabledDates, ...rest }: InputDatePickerSingleProps) => react_jsx_runtime.JSX.Element;
@@ -603,8 +604,9 @@ interface InputDateTimePickerSingleProps extends Omit<InputTextProps, 'onChange'
     numberOfMonths?: CalendarProps['numberOfMonths'];
     portal?: PopoverContentProps['portal'];
     placeholder?: string;
-    className: InputTextProps['className'];
+    className?: string;
     disabledDates?: CalendarProps['disabled'];
+    onClean?: VoidFunction;
 }
 declare const InputDateTimePickerSingle: ({ portal, placeholder, className, value, onChange, numberOfMonths, onClean, disabledDates, ...rest }: InputDateTimePickerSingleProps) => react_jsx_runtime.JSX.Element;
 

package/dist/index.js

@@ -27,6 +27,7 @@ var flags = require('react-phone-number-input/flags');
 var dateFns = require('date-fns');
 var reactDayPicker = require('react-day-picker');
 var locale = require('react-day-picker/locale');
+var mask = require('@react-input/mask');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -3917,6 +3918,25 @@ function timeFormatIsValid(timeStr) {
   const regex = /^(?:[01]\d|2[0-3]):[0-5]\d$/;
   return regex.test(timeStr);
 }
+var formatDateToSubmit = (dateStr, timeFallback = "23:59") => {
+  try {
+    if (!dateStr) return;
+    const [date = "", time = timeFallback] = dateStr.split(" ");
+    if (!date) return;
+    const [p1, p2, p3] = date.split("/");
+    const parsedDate = new Date(
+      (() => {
+        if (getNebulaLanguage() === "en-US") {
+          return [p3, p1, p2].join("/") + " " + time;
+        }
+        return [p3, p2, p1].join("/") + " " + time;
+      })().trim()
+    ).toString();
+    return dateFns.isValid(new Date(parsedDate)) ? parsedDate : void 0;
+  } catch (error2) {
+    return void 0;
+  }
+};
 var dateIsAvailable = (inputDate, disabledDates) => {
   if (!disabledDates || !inputDate) return true;
   const dateIsDisabled = (d, matcher) => {
@@ -3974,10 +3994,11 @@ var InputDatePickerSingle = ({
   disabledDates,
   ...rest
 }) => {
-  const [popoverIsOpen, setPopoverIsOpen] = React8.useState(false);
+  const formattedDateByLanguage = formatDateToSubmit(value ?? "");
   const [innerDate, setInnerDate] = React8.useState(
-    value ? new Date(value) : void 0
+    formattedDateByLanguage ? new Date(formattedDateByLanguage) : void 0
   );
+  const [popoverIsOpen, setPopoverIsOpen] = React8.useState(false);
   const { locale } = useNebulaI18n();
   const [month, setMonth] = React8.useState(/* @__PURE__ */ new Date());
   const handleClearValue = () => {
@@ -4036,6 +4057,11 @@ var InputDatePickerSingle = ({
   React8.useEffect(() => {
     if (innerDate) setMonth(innerDate);
   }, [innerDate]);
+  const maskOptions = {
+    mask: "__/__/____",
+    replacement: { _: /\d/ }
+  };
+  const inputRef = mask.useMask(maskOptions);
   return /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open: popoverIsOpen, onOpenChange: setPopoverIsOpen, children: [
     /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { className, asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
       "div",
@@ -4045,6 +4071,7 @@ var InputDatePickerSingle = ({
         children: /* @__PURE__ */ jsxRuntime.jsx(
           InputText,
           {
+            ref: inputRef,
             placeholder,
             value,
             className,
@@ -4171,6 +4198,7 @@ var InputTime = React8.forwardRef(
   }
 );
 InputTime.displayName = "InputTime";
+var DATA_TIME_SEPARATOR = " - ";
 var InputDateTimePickerSingle = ({
   portal,
   placeholder,
@@ -4182,11 +4210,16 @@ var InputDateTimePickerSingle = ({
   disabledDates,
   ...rest
 }) => {
-  const [popoverIsOpen, setPopoverIsOpen] = React8.useState(false);
-  const [innerTimeValue, setInnerTimeValue] = React8.useState();
+  const [innerTimeValue, setInnerTimeValue] = React8.useState(
+    value?.split?.(DATA_TIME_SEPARATOR)?.at?.(-1) ?? ""
+  );
+  const formattedDateByLanguage = formatDateToSubmit(
+    value?.split(DATA_TIME_SEPARATOR)?.at(0) ?? ""
+  );
   const [innerDate, setInnerDate] = React8.useState(
-    value ? new Date(value) : void 0
+    formattedDateByLanguage ? new Date(formattedDateByLanguage) : void 0
   );
+  const [popoverIsOpen, setPopoverIsOpen] = React8.useState(false);
   const { locale, messages: messages17 } = useNebulaI18n();
   const [month, setMonth] = React8.useState(/* @__PURE__ */ new Date());
   const inputTimeRef = React8.useRef(null);
@@ -4196,8 +4229,7 @@ var InputDateTimePickerSingle = ({
     setMonth(/* @__PURE__ */ new Date());
   };
   const handleInnerInputChange = (text) => {
-    const dateSlice = text.substring(0, 11).trim();
-    let hourSlice = text.substring(11).trim();
+    let [dateSlice = "", hourSlice = ""] = text.split(DATA_TIME_SEPARATOR);
     if (!text) {
       onChange?.(text);
       handleClearValue();
@@ -4271,6 +4303,11 @@ var InputDateTimePickerSingle = ({
   React8.useEffect(() => {
     if (innerDate) setMonth(innerDate);
   }, [innerDate]);
+  const maskOptions = {
+    mask: "__/__/____ - __:__",
+    replacement: { _: /\d/ }
+  };
+  const inputRef = mask.useMask(maskOptions);
   return /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open: popoverIsOpen, onOpenChange: setPopoverIsOpen, children: [
     /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { className, asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
       "div",
@@ -4280,6 +4317,7 @@ var InputDateTimePickerSingle = ({
         children: /* @__PURE__ */ jsxRuntime.jsx(
           InputText,
           {
+            ref: inputRef,
             placeholder,
             value,
             className,
@@ -4305,7 +4343,6 @@ var InputDateTimePickerSingle = ({
                 setPopoverIsOpen(true);
               }
             },
-            maxLength: 16,
             onClean: onClean ? () => {
               onClean();
               handleClearValue();

package/dist/index.mjs

@@ -26,6 +26,7 @@ import flags from 'react-phone-number-input/flags';
 import { formatDate, isValid, addMonths, isSameDay, isBefore, isAfter } from 'date-fns';
 import { DayPicker } from 'react-day-picker';
 import { ptBR, enUS, es } from 'react-day-picker/locale';
+import { useMask } from '@react-input/mask';
 
 // src/button.tsx
 
@@ -3877,6 +3878,25 @@ function timeFormatIsValid(timeStr) {
   const regex = /^(?:[01]\d|2[0-3]):[0-5]\d$/;
   return regex.test(timeStr);
 }
+var formatDateToSubmit = (dateStr, timeFallback = "23:59") => {
+  try {
+    if (!dateStr) return;
+    const [date = "", time = timeFallback] = dateStr.split(" ");
+    if (!date) return;
+    const [p1, p2, p3] = date.split("/");
+    const parsedDate = new Date(
+      (() => {
+        if (getNebulaLanguage() === "en-US") {
+          return [p3, p1, p2].join("/") + " " + time;
+        }
+        return [p3, p2, p1].join("/") + " " + time;
+      })().trim()
+    ).toString();
+    return isValid(new Date(parsedDate)) ? parsedDate : void 0;
+  } catch (error2) {
+    return void 0;
+  }
+};
 var dateIsAvailable = (inputDate, disabledDates) => {
   if (!disabledDates || !inputDate) return true;
   const dateIsDisabled = (d, matcher) => {
@@ -3934,10 +3954,11 @@ var InputDatePickerSingle = ({
   disabledDates,
   ...rest
 }) => {
-  const [popoverIsOpen, setPopoverIsOpen] = useState(false);
+  const formattedDateByLanguage = formatDateToSubmit(value ?? "");
   const [innerDate, setInnerDate] = useState(
-    value ? new Date(value) : void 0
+    formattedDateByLanguage ? new Date(formattedDateByLanguage) : void 0
   );
+  const [popoverIsOpen, setPopoverIsOpen] = useState(false);
   const { locale } = useNebulaI18n();
   const [month, setMonth] = useState(/* @__PURE__ */ new Date());
   const handleClearValue = () => {
@@ -3996,6 +4017,11 @@ var InputDatePickerSingle = ({
   useEffect(() => {
     if (innerDate) setMonth(innerDate);
   }, [innerDate]);
+  const maskOptions = {
+    mask: "__/__/____",
+    replacement: { _: /\d/ }
+  };
+  const inputRef = useMask(maskOptions);
   return /* @__PURE__ */ jsxs(Popover, { open: popoverIsOpen, onOpenChange: setPopoverIsOpen, children: [
     /* @__PURE__ */ jsx(PopoverTrigger, { className, asChild: true, children: /* @__PURE__ */ jsx(
       "div",
@@ -4005,6 +4031,7 @@ var InputDatePickerSingle = ({
         children: /* @__PURE__ */ jsx(
           InputText,
           {
+            ref: inputRef,
             placeholder,
             value,
             className,
@@ -4131,6 +4158,7 @@ var InputTime = forwardRef(
   }
 );
 InputTime.displayName = "InputTime";
+var DATA_TIME_SEPARATOR = " - ";
 var InputDateTimePickerSingle = ({
   portal,
   placeholder,
@@ -4142,11 +4170,16 @@ var InputDateTimePickerSingle = ({
   disabledDates,
   ...rest
 }) => {
-  const [popoverIsOpen, setPopoverIsOpen] = useState(false);
-  const [innerTimeValue, setInnerTimeValue] = useState();
+  const [innerTimeValue, setInnerTimeValue] = useState(
+    value?.split?.(DATA_TIME_SEPARATOR)?.at?.(-1) ?? ""
+  );
+  const formattedDateByLanguage = formatDateToSubmit(
+    value?.split(DATA_TIME_SEPARATOR)?.at(0) ?? ""
+  );
   const [innerDate, setInnerDate] = useState(
-    value ? new Date(value) : void 0
+    formattedDateByLanguage ? new Date(formattedDateByLanguage) : void 0
   );
+  const [popoverIsOpen, setPopoverIsOpen] = useState(false);
   const { locale, messages: messages17 } = useNebulaI18n();
   const [month, setMonth] = useState(/* @__PURE__ */ new Date());
   const inputTimeRef = useRef(null);
@@ -4156,8 +4189,7 @@ var InputDateTimePickerSingle = ({
     setMonth(/* @__PURE__ */ new Date());
   };
   const handleInnerInputChange = (text) => {
-    const dateSlice = text.substring(0, 11).trim();
-    let hourSlice = text.substring(11).trim();
+    let [dateSlice = "", hourSlice = ""] = text.split(DATA_TIME_SEPARATOR);
     if (!text) {
       onChange?.(text);
       handleClearValue();
@@ -4231,6 +4263,11 @@ var InputDateTimePickerSingle = ({
   useEffect(() => {
     if (innerDate) setMonth(innerDate);
   }, [innerDate]);
+  const maskOptions = {
+    mask: "__/__/____ - __:__",
+    replacement: { _: /\d/ }
+  };
+  const inputRef = useMask(maskOptions);
   return /* @__PURE__ */ jsxs(Popover, { open: popoverIsOpen, onOpenChange: setPopoverIsOpen, children: [
     /* @__PURE__ */ jsx(PopoverTrigger, { className, asChild: true, children: /* @__PURE__ */ jsx(
       "div",
@@ -4240,6 +4277,7 @@ var InputDateTimePickerSingle = ({
         children: /* @__PURE__ */ jsx(
           InputText,
           {
+            ref: inputRef,
             placeholder,
             value,
             className,
@@ -4265,7 +4303,6 @@ var InputDateTimePickerSingle = ({
                 setPopoverIsOpen(true);
               }
             },
-            maxLength: 16,
             onClean: onClean ? () => {
               onClean();
               handleClearValue();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ikatec/nebula-react",
-  "version": "1.0.18",
+  "version": "1.0.20",
   "description": "React components",
   "publishConfig": {
     "access": "public"
@@ -50,18 +50,20 @@
     "@radix-ui/react-tabs": "^1.1.12",
     "@radix-ui/react-toggle": "^1.1.8",
     "@radix-ui/react-tooltip": "^1.2.6",
+    "@react-input/mask": "^2.0.4",
     "class-variance-authority": "^0.7.1",
+    "date-fns": "^4.1.0",
     "react-day-picker": "^9.8.1",
     "react-phone-number-input": "^3.4.12",
     "react-select": "^5.10.1",
     "sonner": "^2.0.5",
-    "tailwind-merge": "^2.6.0",
-    "date-fns": "^4.1.0"
+    "tailwind-merge": "^2.6.0"
   },
   "peerDependencies": {
-    "react": "^18.3.1",
-    "react-dom": "18.3.1",
+    "@react-input/mask": "^2.0.4",
     "date-fns": "^4.1.0",
-    "lucide-react": "^0.454.0"
+    "lucide-react": "^0.454.0",
+    "react": "^18.3.1",
+    "react-dom": "18.3.1"
   }
 }