@ikatec/nebula-react 1.0.19 → 1.0.21

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 }; }
 
@@ -3913,10 +3914,6 @@ function dateFormatIsValid(dateStr, locale) {
   const regex = locale === "en-US" ? regexUS : regexBR;
   return regex.test(dateStr);
 }
-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;
@@ -4056,6 +4053,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",
@@ -4065,6 +4067,7 @@ var InputDatePickerSingle = ({
         children: /* @__PURE__ */ jsxRuntime.jsx(
           InputText,
           {
+            ref: inputRef,
             placeholder,
             value,
             className,
@@ -4191,6 +4194,7 @@ var InputTime = React8.forwardRef(
   }
 );
 InputTime.displayName = "InputTime";
+var DATA_TIME_SEPARATOR = " - ";
 var InputDateTimePickerSingle = ({
   portal,
   placeholder,
@@ -4202,8 +4206,12 @@ var InputDateTimePickerSingle = ({
   disabledDates,
   ...rest
 }) => {
-  const [innerTimeValue, setInnerTimeValue] = React8.useState();
-  const formattedDateByLanguage = formatDateToSubmit(value ?? "");
+  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(
     formattedDateByLanguage ? new Date(formattedDateByLanguage) : void 0
   );
@@ -4217,8 +4225,7 @@ var InputDateTimePickerSingle = ({
     setMonth(/* @__PURE__ */ new Date());
   };
   const handleInnerInputChange = (text) => {
-    const dateSlice = text.substring(0, 11).trim();
-    let hourSlice = text.substring(11).trim();
+    const [dateSlice = "", hourSlice = ""] = text.split(DATA_TIME_SEPARATOR);
     if (!text) {
       onChange?.(text);
       handleClearValue();
@@ -4235,22 +4242,31 @@ var InputDateTimePickerSingle = ({
       handleClearValue();
       return;
     }
-    if (!timeFormatIsValid(hourSlice)) {
-      hourSlice = "";
-      setInnerTimeValue("");
-    } else {
-      setInnerTimeValue(hourSlice);
-    }
-    onChange?.(text, date, hourSlice);
+    const [hour, minutes] = hourSlice.split(":");
+    const normalizedTime = [
+      hour ? Math.min(Math.max(+hour, 0), 23).toString() : "",
+      minutes ? Math.min(Math.max(+minutes, 0), 59).toString() : ""
+    ].filter(Boolean).join(":");
+    setInnerTimeValue(normalizedTime);
+    const [dateStr] = text.split(DATA_TIME_SEPARATOR);
+    onChange?.(
+      [dateStr, normalizedTime].filter(Boolean).join(DATA_TIME_SEPARATOR),
+      date,
+      normalizedTime
+    );
     setInnerDate(date);
   };
   const handleOnChangeTime = (newTime) => {
-    const [date = ""] = value?.split(" ") ?? [];
+    const [date = ""] = value?.split(DATA_TIME_SEPARATOR) ?? [];
     setInnerTimeValue(newTime);
     if (date && !dateFormatIsValid(date, locale)) {
       handleClearValue();
     }
-    onChange?.(date + " " + newTime, innerDate, newTime);
+    onChange?.(
+      date + (newTime ? DATA_TIME_SEPARATOR + newTime : ""),
+      innerDate,
+      newTime
+    );
   };
   const handleKeyDown = (e) => {
     if ((e.altKey || e.ctrlKey || e.metaKey) && e.key !== "z") return;
@@ -4278,7 +4294,7 @@ var InputDateTimePickerSingle = ({
     }).format(date);
     setInnerDate(date);
     onChange?.(
-      [dateToStr, innerTimeValue].filter(Boolean).join(" "),
+      [dateToStr, innerTimeValue].filter(Boolean).join(DATA_TIME_SEPARATOR),
       date,
       innerTimeValue
     );
@@ -4292,6 +4308,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",
@@ -4301,6 +4322,7 @@ var InputDateTimePickerSingle = ({
         children: /* @__PURE__ */ jsxRuntime.jsx(
           InputText,
           {
+            ref: inputRef,
             placeholder,
             value,
             className,
@@ -4326,7 +4348,6 @@ var InputDateTimePickerSingle = ({
                 setPopoverIsOpen(true);
               }
             },
-            maxLength: 16,
             onClean: onClean ? () => {
               onClean();
               handleClearValue();
@@ -4363,7 +4384,7 @@ var InputDateTimePickerSingle = ({
               /* @__PURE__ */ jsxRuntime.jsx(
                 InputTime,
                 {
-                  placeholder: "00:00",
+                  placeholder: "hh:mm",
                   value: innerTimeValue,
                   onChange: handleOnChangeTime,
                   ref: inputTimeRef,

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
 
@@ -3873,10 +3874,6 @@ function dateFormatIsValid(dateStr, locale) {
   const regex = locale === "en-US" ? regexUS : regexBR;
   return regex.test(dateStr);
 }
-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;
@@ -4016,6 +4013,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",
@@ -4025,6 +4027,7 @@ var InputDatePickerSingle = ({
         children: /* @__PURE__ */ jsx(
           InputText,
           {
+            ref: inputRef,
             placeholder,
             value,
             className,
@@ -4151,6 +4154,7 @@ var InputTime = forwardRef(
   }
 );
 InputTime.displayName = "InputTime";
+var DATA_TIME_SEPARATOR = " - ";
 var InputDateTimePickerSingle = ({
   portal,
   placeholder,
@@ -4162,8 +4166,12 @@ var InputDateTimePickerSingle = ({
   disabledDates,
   ...rest
 }) => {
-  const [innerTimeValue, setInnerTimeValue] = useState();
-  const formattedDateByLanguage = formatDateToSubmit(value ?? "");
+  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(
     formattedDateByLanguage ? new Date(formattedDateByLanguage) : void 0
   );
@@ -4177,8 +4185,7 @@ var InputDateTimePickerSingle = ({
     setMonth(/* @__PURE__ */ new Date());
   };
   const handleInnerInputChange = (text) => {
-    const dateSlice = text.substring(0, 11).trim();
-    let hourSlice = text.substring(11).trim();
+    const [dateSlice = "", hourSlice = ""] = text.split(DATA_TIME_SEPARATOR);
     if (!text) {
       onChange?.(text);
       handleClearValue();
@@ -4195,22 +4202,31 @@ var InputDateTimePickerSingle = ({
       handleClearValue();
       return;
     }
-    if (!timeFormatIsValid(hourSlice)) {
-      hourSlice = "";
-      setInnerTimeValue("");
-    } else {
-      setInnerTimeValue(hourSlice);
-    }
-    onChange?.(text, date, hourSlice);
+    const [hour, minutes] = hourSlice.split(":");
+    const normalizedTime = [
+      hour ? Math.min(Math.max(+hour, 0), 23).toString() : "",
+      minutes ? Math.min(Math.max(+minutes, 0), 59).toString() : ""
+    ].filter(Boolean).join(":");
+    setInnerTimeValue(normalizedTime);
+    const [dateStr] = text.split(DATA_TIME_SEPARATOR);
+    onChange?.(
+      [dateStr, normalizedTime].filter(Boolean).join(DATA_TIME_SEPARATOR),
+      date,
+      normalizedTime
+    );
     setInnerDate(date);
   };
   const handleOnChangeTime = (newTime) => {
-    const [date = ""] = value?.split(" ") ?? [];
+    const [date = ""] = value?.split(DATA_TIME_SEPARATOR) ?? [];
     setInnerTimeValue(newTime);
     if (date && !dateFormatIsValid(date, locale)) {
       handleClearValue();
     }
-    onChange?.(date + " " + newTime, innerDate, newTime);
+    onChange?.(
+      date + (newTime ? DATA_TIME_SEPARATOR + newTime : ""),
+      innerDate,
+      newTime
+    );
   };
   const handleKeyDown = (e) => {
     if ((e.altKey || e.ctrlKey || e.metaKey) && e.key !== "z") return;
@@ -4238,7 +4254,7 @@ var InputDateTimePickerSingle = ({
     }).format(date);
     setInnerDate(date);
     onChange?.(
-      [dateToStr, innerTimeValue].filter(Boolean).join(" "),
+      [dateToStr, innerTimeValue].filter(Boolean).join(DATA_TIME_SEPARATOR),
       date,
       innerTimeValue
     );
@@ -4252,6 +4268,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",
@@ -4261,6 +4282,7 @@ var InputDateTimePickerSingle = ({
         children: /* @__PURE__ */ jsx(
           InputText,
           {
+            ref: inputRef,
             placeholder,
             value,
             className,
@@ -4286,7 +4308,6 @@ var InputDateTimePickerSingle = ({
                 setPopoverIsOpen(true);
               }
             },
-            maxLength: 16,
             onClean: onClean ? () => {
               onClean();
               handleClearValue();
@@ -4323,7 +4344,7 @@ var InputDateTimePickerSingle = ({
               /* @__PURE__ */ jsx(
                 InputTime,
                 {
-                  placeholder: "00:00",
+                  placeholder: "hh:mm",
                   value: innerTimeValue,
                   onChange: handleOnChangeTime,
                   ref: inputTimeRef,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ikatec/nebula-react",
-  "version": "1.0.19",
+  "version": "1.0.21",
   "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"
   }
 }