@jenesei-software/jenesei-kit-react 1.3.23 → 1.3.25

package/build/{component.types-D_tW7ArD.js → component.types-BfuKs1g9.js}

@@ -1,10 +1,10 @@
 import { j as jsxRuntimeExports } from "./jsx-runtime-BrDlu8eK.js";
-import { bt as KEY_SIZE_DATA, bC as usePopover, D as DateWrapper, z as DateInputWrapper, aR as Typography, x as DateInput, F as DateInputButton, bD as Popover, s as DateDropdownList, B as Button, ao as SelectMonth, aq as SelectYear, t as DateDropdownDays, w as DateDropdownDayOfWeek, v as DateDropdownDay, bp as ErrorMessage } from "./context.constants-AVloP24q.js";
+import { bt as KEY_SIZE_DATA, bC as usePopover, D as DateWrapper, z as DateInputWrapper, aR as Typography, x as DateInput, F as DateInputButton, bD as Popover, s as DateDropdownList, B as Button, ao as SelectMonth, aq as SelectYear, t as DateDropdownDays, w as DateDropdownDayOfWeek, v as DateDropdownDay, bp as ErrorMessage } from "./context.constants-rTgzRM3c.js";
 import "./component.styles-B0L4jbOO.js";
 import { R as Ripple } from "./component-DHM9pbab.js";
 import { b as Stack } from "./component-DEZX8aBs.js";
 import moment from "moment";
-import { useState, useMemo, useCallback, useRef, useEffect, Fragment } from "react";
+import { useState, useRef, useEffect, useMemo, useCallback, Fragment } from "react";
 import { useTheme } from "styled-components";
 function countSevens(number) {
   const divisor = 7;
@@ -19,18 +19,22 @@ const DatePicker = (props) => {
   const [valueMoment, setValueMoment] = useState(null);
   const [dateDefaultMoment, setDateDefaultMoment] = useState(moment(props.dateDefault).utc());
   const [input, setInput] = useState({
-    [DatePickerVariant.DD]: null,
-    [DatePickerVariant.MM]: null,
-    [DatePickerVariant.YYYY]: null
+    [DatePickerVariant.DD]: "",
+    [DatePickerVariant.MM]: "",
+    [DatePickerVariant.YYYY]: ""
   });
+  const refInputValue = useRef(input);
+  useEffect(() => {
+    refInputValue.current = input;
+  }, [input]);
   const isHasInput = useMemo(() => {
-    return input[DatePickerVariant.DD] !== null || input[DatePickerVariant.MM] !== null || input[DatePickerVariant.YYYY] !== null;
+    return input[DatePickerVariant.DD] !== "" || input[DatePickerVariant.MM] !== "" || input[DatePickerVariant.YYYY] !== "";
   }, [input]);
   const onClearInput = useCallback(() => {
     setInput({
-      [DatePickerVariant.DD]: null,
-      [DatePickerVariant.MM]: null,
-      [DatePickerVariant.YYYY]: null
+      [DatePickerVariant.DD]: "",
+      [DatePickerVariant.MM]: "",
+      [DatePickerVariant.YYYY]: ""
     });
   }, []);
   const [activeSegment, setActiveSegment] = useState(null);
@@ -59,66 +63,51 @@ const DatePicker = (props) => {
     },
     [mode]
   );
-  const dataDate = useMemo(() => {
-    const result = {
-      MM: {
-        nextSegment: getNextSegment(DatePickerVariant.MM),
-        preSegment: getPrevSegment(DatePickerVariant.MM),
-        onNext: () => setActiveSegment(getNextSegment(DatePickerVariant.MM)),
-        onPrev: () => setActiveSegment(getPrevSegment(DatePickerVariant.MM)),
-        isLast: mode[mode.length - 1] === DatePickerVariant.MM,
-        isFirst: mode[0] === DatePickerVariant.MM,
-        type: DatePickerVariant.MM,
-        value: input.MM,
-        setValue: (value) => setInput((prevValue) => ({ ...prevValue, [DatePickerVariant.MM]: value })),
-        setActive: () => setActiveSegment(DatePickerVariant.MM),
-        placeholder: props.locale.inputs.month
-      },
-      DD: {
-        nextSegment: getNextSegment(DatePickerVariant.DD),
-        preSegment: getPrevSegment(DatePickerVariant.DD),
-        isLast: mode[mode.length - 1] === DatePickerVariant.DD,
-        isFirst: mode[0] === DatePickerVariant.DD,
-        onNext: () => setActiveSegment(getNextSegment(DatePickerVariant.DD)),
-        onPrev: () => setActiveSegment(getPrevSegment(DatePickerVariant.DD)),
-        type: DatePickerVariant.DD,
-        value: input.DD,
-        setValue: (value) => setInput((prevValue) => ({ ...prevValue, [DatePickerVariant.DD]: value })),
-        setActive: () => setActiveSegment(DatePickerVariant.DD),
-        placeholder: props.locale.inputs.day
-      },
-      YYYY: {
-        nextSegment: getNextSegment(DatePickerVariant.YYYY),
-        preSegment: getPrevSegment(DatePickerVariant.YYYY),
-        isLast: mode[mode.length - 1] === DatePickerVariant.YYYY,
-        isFirst: mode[0] === DatePickerVariant.YYYY,
-        onNext: () => setActiveSegment(getNextSegment(DatePickerVariant.YYYY)),
-        onPrev: () => setActiveSegment(getPrevSegment(DatePickerVariant.YYYY)),
-        type: DatePickerVariant.YYYY,
-        value: input.YYYY,
-        setValue: (value) => setInput((prevValue) => ({ ...prevValue, [DatePickerVariant.YYYY]: value })),
-        setActive: () => setActiveSegment(DatePickerVariant.YYYY),
-        placeholder: props.locale.inputs.year
+  const getValidateInput = useCallback(
+    (input2, onSuccess, onFailure, onNan) => {
+      const dayStr = input2.DD;
+      const monthStr = input2.MM;
+      const yearStr = input2.YYYY;
+      const day = dayStr === "" ? NaN : Number(dayStr);
+      const month = monthStr === "" ? NaN : Number(monthStr);
+      const year = yearStr === "" ? NaN : Number(yearStr);
+      const isHasInput2 = dayStr !== "" || monthStr !== "" || yearStr !== "";
+      if (!Number.isNaN(day) && !Number.isNaN(month) && !Number.isNaN(year)) {
+        const m = moment.utc(`${day}.${month}.${year}`, "D.M.YYYY", true).startOf("day");
+        if (m.isValid()) {
+          onSuccess == null ? void 0 : onSuccess(m.valueOf());
+        } else {
+          onFailure == null ? void 0 : onFailure();
+        }
+      } else {
+        onNan == null ? void 0 : onNan(isHasInput2);
       }
-    };
-    const resultSort = mode.map((e) => {
-      if (e === DatePickerVariant.DD) return result.DD;
-      if (e === DatePickerVariant.MM) return result.MM;
-      if (e === DatePickerVariant.YYYY) return result.YYYY;
-      return null;
-    }).filter((e) => e !== null);
+    },
+    []
+  );
+  const dataDate = useMemo(() => {
+    const segments = [DatePickerVariant.DD, DatePickerVariant.MM, DatePickerVariant.YYYY];
+    const result = Object.fromEntries(
+      segments.map((segment) => [
+        segment,
+        {
+          type: segment,
+          value: input[segment],
+          placeholder: props.locale.inputs[segment === DatePickerVariant.DD ? "day" : segment === DatePickerVariant.MM ? "month" : "year"],
+          isFirst: mode[0] === segment,
+          isLast: mode[mode.length - 1] === segment,
+          segmentNext: getNextSegment(segment),
+          segmentPrev: getPrevSegment(segment),
+          onNextSegment: () => setActiveSegment(getNextSegment(segment)),
+          onPrevSegment: () => setActiveSegment(getPrevSegment(segment)),
+          setValue: (value) => setInput((prev) => ({ ...prev, [segment]: value })),
+          setActive: () => setActiveSegment(segment)
+        }
+      ])
+    );
+    const resultSort = mode.map((segment) => result[segment]).filter(Boolean);
     return { sort: resultSort, default: result };
-  }, [
-    props.locale.inputs.day,
-    props.locale.inputs.month,
-    props.locale.inputs.year,
-    getNextSegment,
-    getPrevSegment,
-    mode,
-    input.DD,
-    input.MM,
-    input.YYYY
-  ]);
+  }, [props, getNextSegment, getPrevSegment, mode, input]);
   const daysInWeek = useMemo(() => {
     const weekOrder = ["mo", "tu", "we", "th", "fr", "sa", "su"];
     return weekOrder.map((key, index) => {
@@ -131,61 +120,30 @@ const DatePicker = (props) => {
   }, [props.locale.weeks]);
   const daysInMonth = useMemo(() => {
     const today = moment.utc();
-    const startOfMonth = (valueMoment ?? dateDefaultMoment).clone().startOf("month");
-    const endOfMonth = (valueMoment ?? dateDefaultMoment).clone().endOf("month");
-    const days = [];
+    const baseMoment = valueMoment ?? dateDefaultMoment;
+    const startOfMonth = baseMoment.clone().startOf("month");
+    const endOfMonth = baseMoment.clone().endOf("month");
     const dateMin = props.dateMin ? moment.utc(props.dateMin) : null;
     const dateMax = props.dateMax ? moment.utc(props.dateMax) : null;
-    const daysToAddBefore = startOfMonth.isoWeekday() - 1;
-    if (daysToAddBefore > 0) {
-      for (let i = daysToAddBefore; i > 0; i--) {
-        const day = startOfMonth.clone().subtract(i, "days");
-        days.push({
-          value: day.valueOf(),
-          labelString: day.format("dd"),
-          labelNumber: day.date(),
-          dayOfWeek: day.isoWeekday(),
-          isWeekend: day.isoWeekday() === 6 || day.isoWeekday() === 7,
-          weekOfMonth: Math.ceil((days.length + 1) / 7),
-          isToday: day.isSame(today, "day"),
-          isCurrentMonth: false,
-          isDisabled: day.isBefore(dateMin, "day") || day.isAfter(dateMax, "day")
-        });
-      }
-    }
-    const currentDate = startOfMonth.clone();
-    while (currentDate <= endOfMonth) {
+    const firstVisibleDay = startOfMonth.clone().subtract(startOfMonth.isoWeekday() - 1, "days");
+    const lastVisibleDay = endOfMonth.clone().add(7 - endOfMonth.isoWeekday(), "days");
+    const days = [];
+    const currentDate = firstVisibleDay.clone();
+    while (currentDate <= lastVisibleDay) {
+      const isCurrentMonth = currentDate.isBetween(startOfMonth, endOfMonth, "day", "[]");
       days.push({
         value: currentDate.valueOf(),
         labelString: currentDate.format("dd"),
         labelNumber: currentDate.date(),
         dayOfWeek: currentDate.isoWeekday(),
-        isWeekend: currentDate.isoWeekday() === 6 || currentDate.isoWeekday() === 7,
+        isWeekend: [6, 7].includes(currentDate.isoWeekday()),
         weekOfMonth: Math.ceil((days.length + 1) / 7),
         isToday: currentDate.isSame(today, "day"),
-        isCurrentMonth: true,
-        isDisabled: currentDate.isBefore(dateMin, "day") || currentDate.isAfter(dateMax, "day")
+        isCurrentMonth,
+        isDisabled: !!(dateMin && currentDate.isBefore(dateMin, "day") || dateMax && currentDate.isAfter(dateMax, "day"))
       });
       currentDate.add(1, "day");
     }
-    const daysToAddAfter = 7 - endOfMonth.isoWeekday();
-    if (daysToAddAfter > 0) {
-      for (let i = 1; i <= daysToAddAfter; i++) {
-        const day = endOfMonth.clone().add(i, "days").startOf("day");
-        days.push({
-          value: day.valueOf(),
-          labelString: day.format("dd"),
-          labelNumber: day.date(),
-          dayOfWeek: day.isoWeekday(),
-          isWeekend: day.isoWeekday() === 6 || day.isoWeekday() === 7,
-          weekOfMonth: Math.ceil((days.length + 1) / 7),
-          isToday: day.isSame(today, "day"),
-          isCurrentMonth: false,
-          isDisabled: day.isBefore(dateMin, "day") || day.isAfter(dateMax, "day")
-        });
-      }
-    }
-    days.sort((a, b) => a.value - b.value);
     return days;
   }, [valueMoment, dateDefaultMoment, props.dateMax, props.dateMin]);
   const rows = useMemo(() => countSevens(daysInMonth.length) + 1, [daysInMonth]);
@@ -239,20 +197,33 @@ const DatePicker = (props) => {
     return !!(!isInputFocused && !isHasValue && props.labelPlaceholder && !isOpen && !isHasInput && !activeSegment);
   }, [isInputFocused, isHasValue, isOpen, props.labelPlaceholder, isHasInput, activeSegment]);
   const onChangeDate = useCallback(
-    (timestamp) => {
+    (timestamp, isAddLeadingZeros, input2) => {
       const momentNewDate = moment(timestamp).utc();
-      if (valueMoment == null ? void 0 : valueMoment.isSame(momentNewDate, "day")) return;
-      setValueMoment(momentNewDate);
-      onChange(momentNewDate.valueOf());
-      setInput({
-        [DatePickerVariant.DD]: momentNewDate.clone().date(),
-        [DatePickerVariant.MM]: momentNewDate.clone().month() + 1,
-        [DatePickerVariant.YYYY]: momentNewDate.clone().year()
-      });
+      const dd = momentNewDate.clone().date().toString();
+      const mm = (momentNewDate.clone().month() + 1).toString();
+      const ddWithZero = dd.padStart(2, "0");
+      const mmWithZero = mm.padStart(2, "0");
+      const yyyy = momentNewDate.clone().year().toString();
+      const ddInput = input2 == null ? void 0 : input2[DatePickerVariant.DD];
+      const mmInput = input2 == null ? void 0 : input2[DatePickerVariant.MM];
+      const yyyyInput = input2 == null ? void 0 : input2[DatePickerVariant.YYYY];
+      const isSameInput = ddWithZero === ddInput && mmWithZero === mmInput && yyyyInput === yyyy;
+      const isSameMoment = valueMoment == null ? void 0 : valueMoment.isSame(momentNewDate, "day");
+      if (!isSameMoment) {
+        setValueMoment(momentNewDate);
+        onChange(momentNewDate.valueOf());
+      }
+      if (!isSameMoment || input2 ? !isSameInput : false) {
+        setInput({
+          [DatePickerVariant.DD]: isAddLeadingZeros ? ddWithZero : dd,
+          [DatePickerVariant.MM]: isAddLeadingZeros ? mmWithZero : mm,
+          [DatePickerVariant.YYYY]: yyyy
+        });
+      }
     },
     [valueMoment, onChange]
   );
-  const handleKeyDown = useCallback(
+  const onKeyDown = useCallback(
     (e) => {
       var _a2;
       const key = e.key;
@@ -273,7 +244,7 @@ const DatePicker = (props) => {
         if (key === "Tab") {
           if (!dataDate.default[activeSegment].isLast) {
             e.preventDefault();
-            dataDate.default[activeSegment].onNext();
+            dataDate.default[activeSegment].onNextSegment();
           } else {
             (_a2 = refHiddenInput == null ? void 0 : refHiddenInput.current) == null ? void 0 : _a2.blur();
           }
@@ -284,40 +255,40 @@ const DatePicker = (props) => {
         }
         if (key === "Backspace" || key === "Delete") {
           if (activeSegment === DatePickerVariant.DD) {
-            if (input.DD !== null) {
-              const current = input.DD.toString();
+            if (input.DD !== "") {
+              const current = input.DD;
               if (current.length === 1) {
-                dataDate.default[activeSegment].setValue(null);
+                dataDate.default[activeSegment].setValue("");
               } else {
                 const newValue = current.slice(0, -1);
-                dataDate.default[activeSegment].setValue(Number(newValue));
+                dataDate.default[activeSegment].setValue(newValue);
               }
             } else {
-              dataDate.default[activeSegment].onPrev();
+              dataDate.default[activeSegment].onPrevSegment();
             }
           } else if (activeSegment === DatePickerVariant.MM) {
-            if (input.MM !== null) {
-              const current = input.MM.toString();
+            if (input.MM !== "") {
+              const current = input.MM;
               if (current.length === 1) {
-                dataDate.default[activeSegment].setValue(null);
+                dataDate.default[activeSegment].setValue("");
               } else {
                 const newValue = current.slice(0, -1);
-                dataDate.default[activeSegment].setValue(Number(newValue));
+                dataDate.default[activeSegment].setValue(newValue);
               }
             } else {
-              dataDate.default[activeSegment].onPrev();
+              dataDate.default[activeSegment].onPrevSegment();
             }
           } else if (activeSegment === DatePickerVariant.YYYY) {
-            if (input.YYYY !== null) {
-              const current = input.YYYY.toString();
+            if (input.YYYY !== "") {
+              const current = input.YYYY;
               if (current.length === 1) {
-                dataDate.default[activeSegment].setValue(null);
+                dataDate.default[activeSegment].setValue("");
               } else {
                 const newValue = current.slice(0, -1);
-                dataDate.default[activeSegment].setValue(Number(newValue));
+                dataDate.default[activeSegment].setValue(newValue);
               }
             } else {
-              dataDate.default[activeSegment].onPrev();
+              dataDate.default[activeSegment].onPrevSegment();
             }
           }
           e.preventDefault();
@@ -325,11 +296,11 @@ const DatePicker = (props) => {
         }
         if (key === "ArrowLeft" || key === "ArrowDown") {
           e.preventDefault();
-          dataDate.default[activeSegment].onPrev();
+          dataDate.default[activeSegment].onPrevSegment();
         }
         if (key === "ArrowRight" || key === "ArrowUp") {
           e.preventDefault();
-          dataDate.default[activeSegment].onNext();
+          dataDate.default[activeSegment].onNextSegment();
         }
       }
     },
@@ -337,11 +308,11 @@ const DatePicker = (props) => {
   );
   const onNextMonth = useCallback(() => {
     const newDate = (valueMoment ?? dateDefaultMoment).clone().add(1, "month");
-    onChangeDate(newDate.valueOf());
+    onChangeDate(newDate.valueOf(), true);
   }, [valueMoment, onChangeDate, dateDefaultMoment]);
   const onPrevMonth = useCallback(() => {
     const newDate = (valueMoment ?? dateDefaultMoment).clone().subtract(1, "month");
-    onChangeDate(newDate.valueOf());
+    onChangeDate(newDate.valueOf(), true);
   }, [valueMoment, onChangeDate, dateDefaultMoment]);
   useEffect(() => {
     setDateDefaultMoment(moment(props.dateDefault).utc());
@@ -349,50 +320,33 @@ const DatePicker = (props) => {
   useEffect(() => {
     setValueMoment(props.value || props.defaultValue ? moment(props.value ?? props.defaultValue).utc() : null);
     if (props.value) {
+      const m = moment(props.value).utc();
       setInput({
-        [DatePickerVariant.DD]: moment(props.value).utc().date(),
-        [DatePickerVariant.MM]: moment(props.value).utc().month() + 1,
-        [DatePickerVariant.YYYY]: moment(props.value).utc().year()
+        [DatePickerVariant.DD]: m.date().toString().padStart(2, "0"),
+        [DatePickerVariant.MM]: (m.month() + 1).toString().padStart(2, "0"),
+        [DatePickerVariant.YYYY]: m.year().toString()
       });
     }
   }, [props.value, props.defaultValue]);
-  const getValidateInput = useCallback(
-    (input2, onSuccess, onFailure, onNan) => {
-      const day = input2.DD ?? NaN;
-      const month = input2.MM ?? NaN;
-      const year = input2.YYYY ?? NaN;
-      const isHasInput2 = input2[DatePickerVariant.DD] !== null || input2[DatePickerVariant.MM] !== null || input2[DatePickerVariant.YYYY] !== null;
-      if (!Number.isNaN(day) && !Number.isNaN(month) && !Number.isNaN(year)) {
-        const m = moment.utc(`${day}.${month}.${year}`, "D.M.YYYY", true).startOf("day");
-        if (m.isValid()) {
-          onSuccess == null ? void 0 : onSuccess(m.valueOf());
-        } else {
-          onFailure == null ? void 0 : onFailure();
-        }
-      } else {
-        onNan == null ? void 0 : onNan(isHasInput2);
-      }
-    },
-    []
-  );
   useEffect(() => {
-    getValidateInput(
-      input,
-      (value) => {
-        onChangeDate(value);
-        setIsError(false);
-      },
-      () => {
-        onChange(null);
-        setIsError(true);
-      },
-      (isHasInput2) => {
-        if (!isHasInput2) {
+    if (!activeSegment)
+      getValidateInput(
+        input,
+        (value) => {
+          onChangeDate(value, true, input);
           setIsError(false);
+        },
+        () => {
+          onChange(null);
+          setIsError(true);
+        },
+        (isHasInput2) => {
+          if (!isHasInput2) {
+            setIsError(false);
+          }
         }
-      }
-    );
-  }, [getValidateInput, onChangeDate, onChange, input]);
+      );
+  }, [getValidateInput, onChangeDate, onChange, input, activeSegment]);
   useEffect(() => {
     if (!isOpen && !isInputFocused && isHasInput && !activeSegment)
       getValidateInput(
@@ -411,6 +365,24 @@ const DatePicker = (props) => {
         }
       );
   }, [getValidateInput, onClearInput, input, isOpen, isInputFocused, onChange, isHasInput, activeSegment]);
+  useEffect(() => {
+    if (!activeSegment) return;
+    getValidateInput(
+      refInputValue.current,
+      (value) => {
+        onChangeDate(value, true, refInputValue.current);
+        setIsError(false);
+      },
+      () => {
+        setIsError(true);
+      },
+      (isHasInput2) => {
+        if (!isHasInput2) {
+          setIsError(false);
+        }
+      }
+    );
+  }, [onChangeDate, getValidateInput, activeSegment]);
   useEffect(() => {
     var _a2;
     if (activeSegment) {
@@ -465,21 +437,20 @@ const DatePicker = (props) => {
                     position: "absolute",
                     left: "-100dvw",
                     top: 0,
-                    // left: 0,
                     width: "100%",
                     height: "100%",
                     opacity: 0,
                     border: "none",
                     background: "transparent"
                   },
-                  onKeyDown: handleKeyDown,
+                  onKeyDown,
                   onChange: (e) => {
                     const value = e.target.value;
                     const prevValue = refPrevValue.current;
                     const newChar = value.length > prevValue.length ? value.slice(-1) : null;
                     refPrevValue.current = value;
                     if (newChar && /^\d$/.test(newChar)) {
-                      handleKeyDown({
+                      onKeyDown({
                         key: newChar,
                         preventDefault: () => {
                         },
@@ -488,7 +459,7 @@ const DatePicker = (props) => {
                       });
                     }
                     if (value.length < prevValue.length) {
-                      handleKeyDown({
+                      onKeyDown({
                         key: "Backspace",
                         preventDefault: () => {
                         },
@@ -522,7 +493,7 @@ const DatePicker = (props) => {
                   children: props.labelPlaceholder
                 }
               ) : dataDate.sort.map((date, index) => {
-                var _a2, _b2, _c2, _d2;
+                var _a2, _b2;
                 return /* @__PURE__ */ jsxRuntimeExports.jsxs(Fragment, { children: [
                   /* @__PURE__ */ jsxRuntimeExports.jsx(
                     DateInput,
@@ -532,10 +503,9 @@ const DatePicker = (props) => {
                       $genre: props.genre,
                       $size: props.size,
                       $font: {
+                        ...props.font,
                         size: ((_a2 = props.font) == null ? void 0 : _a2.size) ?? 16,
-                        weight: ((_b2 = props.font) == null ? void 0 : _b2.weight) ?? (props.isBold ? 500 : 400),
-                        family: ((_c2 = props.font) == null ? void 0 : _c2.family) ?? theme.font.family,
-                        height: ((_d2 = props.font) == null ? void 0 : _d2.height) ?? theme.font.lineHeight
+                        weight: ((_b2 = props.font) == null ? void 0 : _b2.weight) ?? (props.isBold ? 500 : 400)
                       },
                       onClick: (e) => {
                         e.preventDefault();
@@ -543,7 +513,7 @@ const DatePicker = (props) => {
                         if ((props == null ? void 0 : props.isDisabled) || (props == null ? void 0 : props.isReadOnly)) return;
                         date.setActive();
                       },
-                      children: date.value != null ? String(date.value).padStart(date.type === DatePickerVariant.YYYY ? 1 : 2, "0") : date.placeholder || ""
+                      children: date.value || date.placeholder || ""
                     }
                   ),
                   index !== dataDate.sort.length - 1 && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { width: "4px", pointerEvents: "none", textAlign: "center" }, children: "." })
@@ -557,7 +527,9 @@ const DatePicker = (props) => {
                   isWidthAsHeight: true,
                   isFullSize: true,
                   isRadius: true,
+                  isWhileTapEffect: true,
                   isOnlyIcon: true,
+                  isDisabledRipple: true,
                   icons: [{ name: "Calendar", type: "id" }],
                   isDisabled: (props == null ? void 0 : props.isDisabled) || (props == null ? void 0 : props.isReadOnly),
                   onFocus: (e) => {
@@ -608,6 +580,7 @@ const DatePicker = (props) => {
                   {
                     type: "button",
                     isRadius: true,
+                    isWhileTapEffect: true,
                     icons: [
                       {
                         name: "Arrow2",
@@ -619,7 +592,9 @@ const DatePicker = (props) => {
                     genre: props.genre,
                     size: "small",
                     onClick: () => !isBlockPrevMonth && onPrevMonth(),
-                    isHidden: isBlockPrevMonth
+                    isDisabledRipple: true,
+                    isHidden: isBlockPrevMonth,
+                    isDisabled: isBlockPrevMonth
                   }
                 ),
                 /* @__PURE__ */ jsxRuntimeExports.jsxs(Stack, { sx: { default: { gap: "8px" } }, children: [
@@ -637,7 +612,7 @@ const DatePicker = (props) => {
                       isShortLabel: true,
                       refFloating: refSelectMonth,
                       onChange: (timestamp) => {
-                        if (timestamp) onChangeDate(timestamp);
+                        if (timestamp) onChangeDate(timestamp, true);
                       },
                       dateMin: props.dateMin,
                       dateMax: props.dateMax,
@@ -652,7 +627,7 @@ const DatePicker = (props) => {
                       refFloating: refSelectYear,
                       value: (valueMoment ?? dateDefaultMoment).clone().startOf("year").utc().valueOf(),
                       onChange: (timestamp) => {
-                        if (timestamp) onChangeDate(timestamp);
+                        if (timestamp) onChangeDate(timestamp, true);
                       },
                       isOnClickOptionClose: true,
                       isStayValueAfterSelect: true,
@@ -668,6 +643,7 @@ const DatePicker = (props) => {
                   Button,
                   {
                     type: "button",
+                    isWhileTapEffect: true,
                     onClick: () => !isBlockNextMonth && onNextMonth(),
                     isWidthAsHeight: true,
                     isRadius: true,
@@ -680,6 +656,8 @@ const DatePicker = (props) => {
                     ],
                     genre: props.genre,
                     size: "small",
+                    isDisabledRipple: true,
+                    isDisabled: isBlockNextMonth,
                     isHidden: isBlockNextMonth
                   }
                 )
@@ -688,14 +666,14 @@ const DatePicker = (props) => {
           ),
           /* @__PURE__ */ jsxRuntimeExports.jsxs(DateDropdownDays, { $rows: rows, children: [
             daysInWeek.map((e, index) => {
-              var _a2, _b2;
+              var _a2;
               return /* @__PURE__ */ jsxRuntimeExports.jsx(
                 DateDropdownDayOfWeek,
                 {
                   $font: {
+                    ...props.font,
                     size: 12,
-                    weight: 700,
-                    family: ((_a2 = props.font) == null ? void 0 : _a2.family) ?? theme.font.family
+                    weight: 700
                   },
                   tabIndex: -1,
                   type: "button",
@@ -703,53 +681,50 @@ const DatePicker = (props) => {
                   $isWeekend: false,
                   $genre: props.genre,
                   $size: props.size,
-                  $row: ((_b2 = daysInMonth[0]) == null ? void 0 : _b2.weekOfMonth) - 1,
+                  $row: ((_a2 = daysInMonth[0]) == null ? void 0 : _a2.weekOfMonth) - 1,
                   $column: index + 1,
                   children: e.label
                 },
                 `${e.label}-${index}`
               );
             }),
-            daysInMonth.map((day) => {
-              var _a2;
-              return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-                DateDropdownDay,
-                {
-                  $font: {
-                    size: 12,
-                    weight: 700,
-                    family: ((_a2 = props.font) == null ? void 0 : _a2.family) ?? theme.font.family
-                  },
-                  type: "button",
-                  $isDisabled: day.isDisabled,
-                  $isDisabledOutline: day.isDisabled ?? props.isDisabledOutline,
-                  $isOutlineBoxShadow: props.isOutlineBoxShadow,
-                  $isReadOnly: props.isReadOnly,
-                  $genre: props.genre,
-                  $size: props.size,
-                  $row: (day == null ? void 0 : day.weekOfMonth) + 1,
-                  $column: day.dayOfWeek,
-                  onClick: () => {
-                    if (!day.isDisabled) {
-                      onChangeDate(day.value);
-                      if (props.isOnClickClose) {
-                        close();
-                      }
+            daysInMonth.map((day) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              DateDropdownDay,
+              {
+                $font: {
+                  ...props.font,
+                  size: 12,
+                  weight: 700
+                },
+                type: "button",
+                $isDisabled: day.isDisabled,
+                $isDisabledOutline: day.isDisabled ?? props.isDisabledOutline,
+                $isOutlineBoxShadow: props.isOutlineBoxShadow,
+                $isReadOnly: props.isReadOnly,
+                $genre: props.genre,
+                $size: props.size,
+                $row: (day == null ? void 0 : day.weekOfMonth) + 1,
+                $column: day.dayOfWeek,
+                onClick: () => {
+                  if (!day.isDisabled) {
+                    onChangeDate(day.value, true);
+                    if (props.isOnClickClose) {
+                      close();
                     }
-                  },
-                  tabIndex: day.isDisabled ? -1 : 0,
-                  $isToday: day.isToday,
-                  $isWeekend: day.isWeekend,
-                  $isChoice: day.value === (valueMoment == null ? void 0 : valueMoment.valueOf()),
-                  $isCurrentMonth: day.isCurrentMonth,
-                  children: [
-                    !day.isDisabled && /* @__PURE__ */ jsxRuntimeExports.jsx(Ripple, { color: theme.colors.date[props.genre].color.rest }),
-                    day.labelNumber
-                  ]
+                  }
                 },
-                day.value
-              );
-            })
+                tabIndex: day.isDisabled ? -1 : 0,
+                $isToday: day.isToday,
+                $isWeekend: day.isWeekend,
+                $isChoice: day.value === (valueMoment == null ? void 0 : valueMoment.valueOf()),
+                $isCurrentMonth: day.isCurrentMonth,
+                children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(Ripple, { color: theme.colors.date[props.genre].color.rest, isDisabled: day.isDisabled }),
+                  day.labelNumber
+                ]
+              },
+              day.value
+            ))
           ] })
         ] })
       }
@@ -773,71 +748,63 @@ const DatePicker = (props) => {
   ] });
 };
 function handleDigitKey(key, activeSegment, input, dataDate) {
-  var _a;
   const digit = key;
   const seg = activeSegment;
-  const current = ((_a = input[seg]) == null ? void 0 : _a.toString()) ?? "";
-  const isZero = (s) => s === "0";
-  const toNum = (s) => Number(s);
+  const current = input[seg] ?? "";
   if (seg === DatePickerVariant.DD) {
     if (current.length >= 2) {
-      const parsed2 = toNum(digit);
-      if (parsed2 === 0 || parsed2 > 31) return;
-      dataDate.default[seg].setValue(parsed2);
+      dataDate.default[seg].setValue(digit);
       return;
     }
-    if (current.length === 1 && isZero(current)) {
-      const parsed2 = toNum(digit);
-      if (parsed2 === 0 || parsed2 > 31) return;
-      dataDate.default[seg].setValue(parsed2);
-      dataDate.default[seg].onNext();
+    if (current === "") {
+      dataDate.default[seg].setValue(digit);
       return;
     }
     const potential = current + digit;
-    const potentialParsed = toNum(potential);
-    if (potentialParsed > 31) {
-      const parsed2 = toNum(digit);
-      if (parsed2 === 0 || parsed2 > 31) return;
-      dataDate.default[seg].setValue(parsed2);
-      dataDate.default[seg].onNext();
+    const potentialNum = Number(potential);
+    if (potentialNum > 31) {
+      dataDate.default[seg].setValue(digit);
       return;
     }
-    const nextValue = potentialParsed === 0 ? digit : potential;
-    const parsed = toNum(nextValue);
-    if (parsed === 0 || parsed > 31) return;
-    dataDate.default[seg].setValue(parsed);
-    if (nextValue.length === 2) dataDate.default[seg].onNext();
+    if (potentialNum === 0) {
+      dataDate.default[seg].setValue(digit);
+      return;
+    }
+    dataDate.default[seg].setValue(potential);
+    dataDate.default[seg].onNextSegment();
   } else if (seg === DatePickerVariant.MM) {
     if (current.length >= 2) {
-      const parsed2 = toNum(digit);
-      if (parsed2 === 0 || parsed2 > 12) return;
-      dataDate.default[seg].setValue(parsed2);
+      if (digit === "0") return;
+      dataDate.default[seg].setValue(digit);
       return;
     }
-    if (current.length === 1 && isZero(current)) {
-      const parsed2 = toNum(digit);
-      if (parsed2 === 0 || parsed2 > 12) return;
-      dataDate.default[seg].setValue(parsed2);
-      dataDate.default[seg].onNext();
+    if (current === "") {
+      dataDate.default[seg].setValue(digit);
       return;
     }
     const potential = current + digit;
-    const potentialParsed = toNum(potential);
-    const nextValue = potentialParsed === 0 || potentialParsed > 12 ? digit : potential;
-    const parsed = toNum(nextValue);
-    if (parsed === 0 || parsed > 12) return;
-    dataDate.default[seg].setValue(parsed);
-    if (nextValue.length === 2 || nextValue.length === 1 && parsed > 1) {
-      dataDate.default[seg].onNext();
+    const potentialNum = Number(potential);
+    if (potentialNum > 12) {
+      if (digit === "0") return;
+      dataDate.default[seg].setValue(digit);
+      return;
+    }
+    if (potentialNum === 0) {
+      if (digit === "0") return;
+      dataDate.default[seg].setValue(digit);
+      return;
+    }
+    dataDate.default[seg].setValue(potential);
+    if (potential.length === 2 || potential.length === 1 && Number(potential) > 1) {
+      dataDate.default[seg].onNextSegment();
     }
   } else if (seg === DatePickerVariant.YYYY) {
     if (current.length >= 4) {
-      if (digit === "0") return;
-      dataDate.default[seg].setValue(toNum(digit));
+      dataDate.default[seg].setValue(digit);
       return;
     }
-    const nextValue = (current + digit).slice(-4);
-    dataDate.default[seg].setValue(toNum(nextValue));
+    const nextValue = current + digit;
+    dataDate.default[seg].setValue(nextValue);
   }
 }
 var DatePickerVariant = /* @__PURE__ */ ((DatePickerVariant2) => {
@@ -850,4 +817,4 @@ export {
   DatePicker as D,
   DatePickerVariant as a
 };
-//# sourceMappingURL=component.types-D_tW7ArD.js.map
+//# sourceMappingURL=component.types-BfuKs1g9.js.map