best-react-datepicker 0.2.1 → 0.2.3

package/dist/index.cjs

@@ -22,8 +22,48 @@ var DEFAULT_MONTH_NAMES = [
   "November",
   "December"
 ];
-function SelectChevron() {
-  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "brdp-header__select-chevron", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M2.5 3.75L5 6.25L7.5 3.75", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) });
+var SHORT_MONTH_NAMES = [
+  "Jan",
+  "Feb",
+  "Mar",
+  "Apr",
+  "May",
+  "Jun",
+  "Jul",
+  "Aug",
+  "Sep",
+  "Oct",
+  "Nov",
+  "Dec"
+];
+function ChevronDown() {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", style: { marginLeft: 2, opacity: 0.5 }, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 4.5L6 7.5L9 4.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+}
+function Dropdown({
+  isOpen,
+  onClose,
+  children
+}) {
+  const ref = react.useRef(null);
+  react.useEffect(() => {
+    if (!isOpen) return;
+    const handleClick = (e) => {
+      if (ref.current && !ref.current.contains(e.target)) {
+        onClose();
+      }
+    };
+    const handleKey = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("mousedown", handleClick);
+    document.addEventListener("keydown", handleKey);
+    return () => {
+      document.removeEventListener("mousedown", handleClick);
+      document.removeEventListener("keydown", handleKey);
+    };
+  }, [isOpen, onClose]);
+  if (!isOpen) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: "brdp-dropdown", children });
 }
 function CalendarHeader({
   label,
@@ -44,24 +84,25 @@ function CalendarHeader({
   monthNames
 }) {
   const hasDropdowns = viewingMonth != null && viewingYear != null && onMonthChange && onYearChange;
+  const [openDropdown, setOpenDropdown] = react.useState(null);
+  const yearGridRef = react.useRef(null);
   const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
   const minYear = minDate ? minDate.getFullYear() : currentYear - 100;
   const maxYear = maxDate ? maxDate.getFullYear() : currentYear + 20;
   const names = monthNames ?? DEFAULT_MONTH_NAMES;
-  const getMonthOptions = () => {
-    const options = [];
-    for (let m = 0; m < 12; m++) {
-      let disabled = false;
-      if (minDate && viewingYear != null && viewingYear === minDate.getFullYear() && m < minDate.getMonth()) {
-        disabled = true;
-      }
-      if (maxDate && viewingYear != null && viewingYear === maxDate.getFullYear() && m > maxDate.getMonth()) {
-        disabled = true;
+  const isMonthDisabled = (m) => {
+    if (minDate && viewingYear != null && viewingYear === minDate.getFullYear() && m < minDate.getMonth()) return true;
+    if (maxDate && viewingYear != null && viewingYear === maxDate.getFullYear() && m > maxDate.getMonth()) return true;
+    return false;
+  };
+  react.useEffect(() => {
+    if (openDropdown === "year" && yearGridRef.current) {
+      const active = yearGridRef.current.querySelector(".brdp-dropdown__item--active");
+      if (active) {
+        active.scrollIntoView({ block: "center", behavior: "instant" });
       }
-      options.push({ value: m, label: names[m], disabled });
     }
-    return options;
-  };
+  }, [openDropdown]);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `brdp-header ${className ?? ""}`, children: [
     showPrev ? /* @__PURE__ */ jsxRuntime.jsx(
       "button",
@@ -74,31 +115,64 @@ function CalendarHeader({
       }
     ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "brdp-header__nav-btn", style: { visibility: "hidden" } }),
     hasDropdowns ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "brdp-header__selects", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "brdp-header__select-wrapper", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "select",
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "brdp-header__dropdown-anchor", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
           {
-            className: "brdp-header__select",
-            value: viewingMonth,
-            onChange: (e) => onMonthChange(Number(e.target.value)),
+            type: "button",
+            className: `brdp-header__trigger ${openDropdown === "month" ? "brdp-header__trigger--open" : ""}`,
+            onClick: () => setOpenDropdown(openDropdown === "month" ? null : "month"),
             "aria-label": "Select month",
-            children: getMonthOptions().map((opt) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: opt.value, disabled: opt.disabled, children: opt.label }, opt.value))
+            "aria-expanded": openDropdown === "month",
+            children: [
+              names[viewingMonth],
+              /* @__PURE__ */ jsxRuntime.jsx(ChevronDown, {})
+            ]
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(SelectChevron, {})
+        /* @__PURE__ */ jsxRuntime.jsx(Dropdown, { isOpen: openDropdown === "month", onClose: () => setOpenDropdown(null), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "brdp-dropdown__grid brdp-dropdown__grid--months", children: SHORT_MONTH_NAMES.map((short, m) => /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            className: `brdp-dropdown__item ${viewingMonth === m ? "brdp-dropdown__item--active" : ""} ${isMonthDisabled(m) ? "brdp-dropdown__item--disabled" : ""}`,
+            disabled: isMonthDisabled(m),
+            onClick: () => {
+              onMonthChange(m);
+              setOpenDropdown(null);
+            },
+            children: short
+          },
+          m
+        )) }) })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "brdp-header__select-wrapper", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "select",
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "brdp-header__dropdown-anchor", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
           {
-            className: "brdp-header__select",
-            value: viewingYear,
-            onChange: (e) => onYearChange(Number(e.target.value)),
+            type: "button",
+            className: `brdp-header__trigger ${openDropdown === "year" ? "brdp-header__trigger--open" : ""}`,
+            onClick: () => setOpenDropdown(openDropdown === "year" ? null : "year"),
             "aria-label": "Select year",
-            children: Array.from({ length: maxYear - minYear + 1 }, (_, i) => minYear + i).map((y) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: y, children: y }, y))
+            "aria-expanded": openDropdown === "year",
+            children: [
+              viewingYear,
+              /* @__PURE__ */ jsxRuntime.jsx(ChevronDown, {})
+            ]
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(SelectChevron, {})
+        /* @__PURE__ */ jsxRuntime.jsx(Dropdown, { isOpen: openDropdown === "year", onClose: () => setOpenDropdown(null), children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: yearGridRef, className: "brdp-dropdown__grid brdp-dropdown__grid--years", children: Array.from({ length: maxYear - minYear + 1 }, (_, i) => minYear + i).map((y) => /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            className: `brdp-dropdown__item ${viewingYear === y ? "brdp-dropdown__item--active" : ""}`,
+            onClick: () => {
+              onYearChange(y);
+              setOpenDropdown(null);
+            },
+            children: y
+          },
+          y
+        )) }) })
       ] })
     ] }) : /* @__PURE__ */ jsxRuntime.jsx(
       "button",
@@ -589,12 +663,16 @@ var DatePicker = react.forwardRef(
     );
   }
 );
+function SwapArrow() {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", className: "brdp-unified__arrow-icon", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 8H12M12 8L9.5 5.5M12 8L9.5 10.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+}
 function RangePicker(props) {
   const {
     className,
     style,
     size,
     compact = false,
+    variant = "default",
     showPresets = false,
     presetsPosition = "left",
     renderDay,
@@ -641,6 +719,40 @@ function RangePicker(props) {
     },
     i
   )) });
+  const isUnified = variant === "unified";
+  const inputSection = isUnified ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `brdp-unified ${picker.isOpen ? "brdp-unified--focused" : ""}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        ...startInputProps,
+        className: "brdp-unified__input"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "brdp-unified__separator", children: /* @__PURE__ */ jsxRuntime.jsx(SwapArrow, {}) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        ...endInputProps,
+        className: "brdp-unified__input"
+      }
+    )
+  ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "brdp-range-input", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        ...startInputProps,
+        className: "brdp-input brdp-range-input__start"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "brdp-range-input__separator", children: picker.separator }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        ...endInputProps,
+        className: "brdp-input brdp-range-input__end"
+      }
+    )
+  ] });
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -649,23 +761,7 @@ function RangePicker(props) {
       style: { ...sizeStyles, ...style },
       dir: dir ?? picker.locale.dir,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "brdp-range-input", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "input",
-            {
-              ...startInputProps,
-              className: "brdp-input brdp-range-input__start"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "brdp-range-input__separator", children: picker.separator }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "input",
-            {
-              ...endInputProps,
-              className: "brdp-input brdp-range-input__end"
-            }
-          )
-        ] }),
+        inputSection,
         /* @__PURE__ */ jsxRuntime.jsx(
           Popover,
           {