@idds/react 1.1.95 → 1.1.96

package/dist/index.es.js

@@ -3610,8 +3610,18 @@ function Pagination({
   if (totalPages <= 0) return null;
   function renderPageNumbers() {
     const pages = [];
-    const start = Math.max(1, currentPage - 1);
-    const end = Math.min(totalPages, currentPage + 1);
+    let start;
+    let end;
+    if (currentPage === 1) {
+      start = 1;
+      end = Math.min(3, totalPages);
+    } else if (currentPage === totalPages) {
+      start = Math.max(1, totalPages - 2);
+      end = totalPages;
+    } else {
+      start = currentPage - 1;
+      end = currentPage + 1;
+    }
     for (let i2 = start; i2 <= end; i2++) {
       pages.push(renderPageButton(i2));
     }
@@ -5195,6 +5205,163 @@ function TextArea({
     ] })
   ] });
 }
+function OneTimePassword({
+  value = "",
+  onChange,
+  length = 6,
+  title,
+  description,
+  helperText,
+  error = false,
+  disabled = false,
+  readonly = false,
+  className = "",
+  onComplete,
+  autoFocus = false
+}) {
+  const inputRefs = useRef([]);
+  useEffect(() => {
+    inputRefs.current = inputRefs.current.slice(0, length);
+  }, [length]);
+  useEffect(() => {
+    if (autoFocus && inputRefs.current[0] && !disabled && !readonly) {
+      inputRefs.current[0].focus();
+    }
+  }, [autoFocus, disabled, readonly]);
+  useEffect(() => {
+    const currentValue = value || "";
+    if (currentValue.length < length && currentValue.length > 0) {
+      const nextIndex = currentValue.length;
+      if (inputRefs.current[nextIndex] && !disabled && !readonly) {
+        inputRefs.current[nextIndex].focus();
+      }
+    }
+  }, [value, length, disabled, readonly]);
+  useEffect(() => {
+    if (value && value.length === length && onComplete) {
+      onComplete(value);
+    }
+  }, [value, length, onComplete]);
+  const handleChange = (index, e) => {
+    const inputValue = e.target.value;
+    if (inputValue && !/^\d$/.test(inputValue)) {
+      return;
+    }
+    const newValue = value.split("");
+    newValue[index] = inputValue;
+    const updatedValue = newValue.join("").slice(0, length);
+    onChange(updatedValue);
+    if (inputValue && index < length - 1) {
+      const nextIndex = index + 1;
+      if (inputRefs.current[nextIndex]) {
+        inputRefs.current[nextIndex].focus();
+      }
+    }
+  };
+  const handleKeyDown = (index, e) => {
+    var _a, _b;
+    if (e.key === "Backspace") {
+      const currentValue = value || "";
+      if (!currentValue[index] && index > 0) {
+        const prevIndex = index - 1;
+        if (inputRefs.current[prevIndex]) {
+          inputRefs.current[prevIndex].focus();
+          const newValue = value.split("");
+          newValue[prevIndex] = "";
+          onChange(newValue.join(""));
+        }
+      } else {
+        const newValue = value.split("");
+        newValue[index] = "";
+        onChange(newValue.join(""));
+      }
+    }
+    if (e.key === "ArrowLeft" && index > 0) {
+      e.preventDefault();
+      (_a = inputRefs.current[index - 1]) == null ? void 0 : _a.focus();
+    }
+    if (e.key === "ArrowRight" && index < length - 1) {
+      e.preventDefault();
+      (_b = inputRefs.current[index + 1]) == null ? void 0 : _b.focus();
+    }
+    if ((e.ctrlKey || e.metaKey) && e.key === "v") {
+      e.preventDefault();
+      navigator.clipboard.readText().then((text) => {
+        const digits = text.replace(/\D/g, "").slice(0, length);
+        if (digits) {
+          onChange(digits);
+          const focusIndex = Math.min(digits.length - 1, length - 1);
+          if (inputRefs.current[focusIndex]) {
+            inputRefs.current[focusIndex].focus();
+          }
+        }
+      });
+    }
+  };
+  const handleFocus = (index) => {
+    if (inputRefs.current[index]) {
+      inputRefs.current[index].select();
+    }
+  };
+  const handleBlur = () => {
+  };
+  const handlePaste = (e) => {
+    e.preventDefault();
+    const pastedText = e.clipboardData.getData("text");
+    const digits = pastedText.replace(/\D/g, "").slice(0, length);
+    if (digits) {
+      onChange(digits);
+      const focusIndex = Math.min(digits.length - 1, length - 1);
+      setTimeout(() => {
+        if (inputRefs.current[focusIndex]) {
+          inputRefs.current[focusIndex].focus();
+        }
+      }, 0);
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: clsx("ina-one-time-password", className), children: [
+    title && /* @__PURE__ */ jsx("div", { className: "ina-one-time-password__title", children: title }),
+    description && /* @__PURE__ */ jsx("div", { className: "ina-one-time-password__description", children: description }),
+    /* @__PURE__ */ jsx("div", { className: "ina-one-time-password__container", children: Array.from({ length }).map((_, index) => {
+      const digitValue = value[index] || "";
+      return /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: (el) => {
+            inputRefs.current[index] = el;
+          },
+          type: "text",
+          inputMode: "numeric",
+          maxLength: 1,
+          value: digitValue,
+          onChange: (e) => handleChange(index, e),
+          onKeyDown: (e) => handleKeyDown(index, e),
+          onFocus: () => handleFocus(index),
+          onBlur: handleBlur,
+          onPaste: handlePaste,
+          disabled,
+          readOnly: readonly,
+          className: clsx(
+            "ina-one-time-password__input",
+            error && "ina-one-time-password__input--error"
+          ),
+          "aria-label": `Digit ${index + 1} of ${length}`
+        },
+        index
+      );
+    }) }),
+    helperText && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: clsx(
+          "ina-one-time-password__helper-text",
+          error && "ina-one-time-password__helper-text--error"
+        ),
+        children: helperText
+      }
+    )
+  ] });
+}
 const TimePicker = forwardRef(
   ({
     defaultValue = "",
@@ -8787,11 +8954,28 @@ function DatePicker({
           );
         }
         if (endDate) {
-          targetNextMonth = new Date(
+          const endMonth = new Date(
             endDate.getFullYear(),
             endDate.getMonth(),
             1
           );
+          if (targetMonth && targetMonth.getFullYear() === endMonth.getFullYear() && targetMonth.getMonth() === endMonth.getMonth()) {
+            targetNextMonth = new Date(targetMonth);
+            targetNextMonth.setMonth(targetNextMonth.getMonth() + 1);
+          } else {
+            targetNextMonth = endMonth;
+          }
+        }
+      } else if (mode === "range" && parsedDates.length === 1) {
+        const startDate = parsedDates[0];
+        if (startDate) {
+          targetMonth = new Date(
+            startDate.getFullYear(),
+            startDate.getMonth(),
+            1
+          );
+          targetNextMonth = new Date(targetMonth);
+          targetNextMonth.setMonth(targetNextMonth.getMonth() + 1);
         }
       } else if (parsedDates.length > 0) {
         const targetDate = parsedDates[0];
@@ -8818,8 +9002,8 @@ function DatePicker({
               setNextMonth(nextMonthDate);
             } else if (mode === "range") {
               const parsedDates2 = parseSelectedDates();
-              const hasOnlyStartDate = parsedDates2.length === 1;
-              if (!hasOnlyStartDate) {
+              const hasNoDates = parsedDates2.length === 0;
+              if (hasNoDates) {
                 const nextMonthDate = new Date(targetMonth);
                 nextMonthDate.setMonth(nextMonthDate.getMonth() + 1);
                 setNextMonth(nextMonthDate);
@@ -9405,7 +9589,7 @@ function DatePicker({
                   dayNames.map((day) => /* @__PURE__ */ jsx("div", { className: "ina-date-picker__day-header", children: day }, day)),
                   currentDays.map((day) => {
                     const styling = getDateStyling(day);
-                    return /* @__PURE__ */ jsx(
+                    return /* @__PURE__ */ jsxs(
                       "button",
                       {
                         type: "button",
@@ -9414,7 +9598,10 @@ function DatePicker({
                         onMouseLeave: () => setHoveredDate(null),
                         disabled: styling.isDisabled,
                         className: styling.className + (!styling.isSelected && !styling.isInRange && !styling.isHovered && !styling.isHoveredEnd && !styling.isDisabled ? " ina-date-picker__day--hover" : ""),
-                        children: day.date.getDate()
+                        children: [
+                          day.date.getDate(),
+                          day.isToday && /* @__PURE__ */ jsx("span", { className: "ina-date-picker__today-label", children: "Hari ini" })
+                        ]
                       },
                       `${day.date.getFullYear()}-${day.date.getMonth()}-${day.date.getDate()}`
                     );
@@ -9725,7 +9912,7 @@ function TabHorizontal({
   value,
   defaultValue,
   onChange,
-  size = "md",
+  size = "sm",
   variant = "outline",
   fullWidth = false,
   useBrandColor = false,
@@ -9802,7 +9989,7 @@ function TabVertical({
   value,
   defaultValue,
   onChange,
-  size = "md",
+  size = "sm",
   variant = "outline",
   useBrandColor = false,
   disabled = false,
@@ -9993,6 +10180,7 @@ export {
   Modal,
   MonthPicker,
   MultipleChoiceGrid,
+  OneTimePassword,
   Pagination,
   PasswordInput,
   PhoneInput,