@ikatec/nebula-react 1.0.19 → 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 }; }
 
@@ -4056,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",
@@ -4065,6 +4071,7 @@ var InputDatePickerSingle = ({
         children: /* @__PURE__ */ jsxRuntime.jsx(
           InputText,
           {
+            ref: inputRef,
             placeholder,
             value,
             className,
@@ -4191,6 +4198,7 @@ var InputTime = React8.forwardRef(
   }
 );
 InputTime.displayName = "InputTime";
+var DATA_TIME_SEPARATOR = " - ";
 var InputDateTimePickerSingle = ({
   portal,
   placeholder,
@@ -4202,8 +4210,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 +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();
@@ -4292,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",
@@ -4301,6 +4317,7 @@ var InputDateTimePickerSingle = ({
         children: /* @__PURE__ */ jsxRuntime.jsx(
           InputText,
           {
+            ref: inputRef,
             placeholder,
             value,
             className,
@@ -4326,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
 
@@ -4016,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",
@@ -4025,6 +4031,7 @@ var InputDatePickerSingle = ({
         children: /* @__PURE__ */ jsx(
           InputText,
           {
+            ref: inputRef,
             placeholder,
             value,
             className,
@@ -4151,6 +4158,7 @@ var InputTime = forwardRef(
   }
 );
 InputTime.displayName = "InputTime";
+var DATA_TIME_SEPARATOR = " - ";
 var InputDateTimePickerSingle = ({
   portal,
   placeholder,
@@ -4162,8 +4170,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 +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();
@@ -4252,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",
@@ -4261,6 +4277,7 @@ var InputDateTimePickerSingle = ({
         children: /* @__PURE__ */ jsx(
           InputText,
           {
+            ref: inputRef,
             placeholder,
             value,
             className,
@@ -4286,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.19",
+  "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"
   }
 }