@ck-ui/component-library 2.0.1 → 2.0.3

package/dist/components/DateRangePicker/DateRangePicker.js

@@ -1,13 +1,13 @@
-import { jsxs as D, jsx as d } from "react/jsx-runtime";
-import * as o from "react";
-import { useState as b, useRef as re, useMemo as M, useEffect as Y, useCallback as O, useLayoutEffect as be } from "react";
-import { CKButton as y } from "../CKButton/index.js";
-import { CKTag as se } from "../CKTag/index.js";
-import { Tooltip as Me } from "../Tooltip/index.js";
-import { S as ve, C as Ce } from "../../CalendarGrid-DzsGX04L.js";
-import { getPresetStartDate as E, isSameDay as Z, normalizeDefinedRanges as ie, getDefaultDefinedRanges as Te, normalizeDateForMUI as $, detectMatchingDefinedRange as Ee, detectMatchingPreset as Le, clampDefinedRange as Re, getEffectiveEnd as je, formatWithPattern as ye, formatToMonthDayYear as Se } from "./_utils/util.js";
-import { useDropdownDirection as Ne } from "../MultiSelect/_utils/useDropdownDirection.js";
-import '../../assets/DateRangePicker-BJW-EAys.css';const Be = (k) => /* @__PURE__ */ o.createElement("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...k }, /* @__PURE__ */ o.createElement("path", { d: "M10.6668 1.3335V4.00016M5.3335 1.3335V4.00016", stroke: "white", strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ o.createElement("path", { d: "M8.66667 2.6665H7.33333C4.81917 2.6665 3.5621 2.6665 2.78105 3.44755C2 4.2286 2 5.48568 2 7.99984V9.33317C2 11.8473 2 13.1044 2.78105 13.8854C3.5621 14.6665 4.81917 14.6665 7.33333 14.6665H8.66667C11.1808 14.6665 12.4379 14.6665 13.2189 13.8854C14 13.1044 14 11.8473 14 9.33317V7.99984C14 5.48568 14 4.2286 13.2189 3.44755C12.4379 2.6665 11.1808 2.6665 8.66667 2.6665Z", stroke: "#2B2B2B", strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ o.createElement("path", { d: "M2 6.6665H14", stroke: "#2B2B2B", strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ o.createElement("path", { d: "M7.99716 9.3335H8.00316M7.99716 12.0002H8.00316M10.6608 9.3335H10.6668M5.3335 9.3335H5.33948M5.3335 12.0002H5.33948", stroke: "#2B2B2B", strokeWidth: 0.666667, strokeLinecap: "round", strokeLinejoin: "round" })), Pe = (k) => /* @__PURE__ */ o.createElement("svg", { width: 12, height: 12, viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...k }, /* @__PURE__ */ o.createElement("g", { clipPath: "url(#clip0_7800_479)" }, /* @__PURE__ */ o.createElement("path", { d: "M11 6C11 8.76 8.76 11 6 11C3.24 11 1.555 8.22 1.555 8.22M1.555 10.72V8.22H3.815M1 6C1 3.24 3.22 1 6 1C9.335 1 11 3.78 11 3.78M8.78 3.78H11V1.28", stroke: "#737373", strokeWidth: 0.57, strokeLinecap: "round", strokeLinejoin: "round" })), /* @__PURE__ */ o.createElement("defs", null, /* @__PURE__ */ o.createElement("clipPath", { id: "clip0_7800_479" }, /* @__PURE__ */ o.createElement("rect", { width: 12, height: 12, fill: "white" })))), xe = (k) => /* @__PURE__ */ o.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", ...k }, /* @__PURE__ */ o.createElement("path", { d: "M9.61984 3.95312L13.6665 7.9998L9.61984 12.0465", stroke: "#2B2B2B", strokeMiterlimit: 10, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ o.createElement("path", { d: "M2.33324 8H13.5532", stroke: "#2B2B2B", strokeMiterlimit: 10, strokeLinecap: "round", strokeLinejoin: "round" })), s = {
+import { jsxs as M, jsx as l } from "react/jsx-runtime";
+import * as _ from "react";
+import { useMemo as R, useState as L, useRef as oe, useEffect as K, useCallback as X, useLayoutEffect as Se } from "react";
+import { CKButton as A } from "../CKButton/index.js";
+import { CKTag as le } from "../CKTag/index.js";
+import { Tooltip as Re } from "../Tooltip/index.js";
+import { S as je, C as Le } from "../../CalendarGrid-DzsGX04L.js";
+import { normalizeDefinedRanges as z, isSameDay as D, detectMatchingPreset as pe, getDefaultDefinedRanges as me, normalizeDateForMUI as W, getPresetStartDate as x, detectMatchingDefinedRange as ye, clampDefinedRange as ee, getEffectiveEnd as te, formatWithPattern as Pe, formatToMonthDayYear as Ne } from "./_utils/util.js";
+import { useDropdownDirection as xe } from "../MultiSelect/_utils/useDropdownDirection.js";
+import '../../assets/DateRangePicker-BJW-EAys.css';const Be = (f) => /* @__PURE__ */ _.createElement("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...f }, /* @__PURE__ */ _.createElement("path", { d: "M10.6668 1.3335V4.00016M5.3335 1.3335V4.00016", stroke: "white", strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ _.createElement("path", { d: "M8.66667 2.6665H7.33333C4.81917 2.6665 3.5621 2.6665 2.78105 3.44755C2 4.2286 2 5.48568 2 7.99984V9.33317C2 11.8473 2 13.1044 2.78105 13.8854C3.5621 14.6665 4.81917 14.6665 7.33333 14.6665H8.66667C11.1808 14.6665 12.4379 14.6665 13.2189 13.8854C14 13.1044 14 11.8473 14 9.33317V7.99984C14 5.48568 14 4.2286 13.2189 3.44755C12.4379 2.6665 11.1808 2.6665 8.66667 2.6665Z", stroke: "#2B2B2B", strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ _.createElement("path", { d: "M2 6.6665H14", stroke: "#2B2B2B", strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ _.createElement("path", { d: "M7.99716 9.3335H8.00316M7.99716 12.0002H8.00316M10.6608 9.3335H10.6668M5.3335 9.3335H5.33948M5.3335 12.0002H5.33948", stroke: "#2B2B2B", strokeWidth: 0.666667, strokeLinecap: "round", strokeLinejoin: "round" })), ze = (f) => /* @__PURE__ */ _.createElement("svg", { width: 12, height: 12, viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...f }, /* @__PURE__ */ _.createElement("g", { clipPath: "url(#clip0_7800_479)" }, /* @__PURE__ */ _.createElement("path", { d: "M11 6C11 8.76 8.76 11 6 11C3.24 11 1.555 8.22 1.555 8.22M1.555 10.72V8.22H3.815M1 6C1 3.24 3.22 1 6 1C9.335 1 11 3.78 11 3.78M8.78 3.78H11V1.28", stroke: "#737373", strokeWidth: 0.57, strokeLinecap: "round", strokeLinejoin: "round" })), /* @__PURE__ */ _.createElement("defs", null, /* @__PURE__ */ _.createElement("clipPath", { id: "clip0_7800_479" }, /* @__PURE__ */ _.createElement("rect", { width: 12, height: 12, fill: "white" })))), Ae = (f) => /* @__PURE__ */ _.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", ...f }, /* @__PURE__ */ _.createElement("path", { d: "M9.61984 3.95312L13.6665 7.9998L9.61984 12.0465", stroke: "#2B2B2B", strokeMiterlimit: 10, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ _.createElement("path", { d: "M2.33324 8H13.5532", stroke: "#2B2B2B", strokeMiterlimit: 10, strokeLinecap: "round", strokeLinejoin: "round" })), c = {
   "ckds-date-range-picker": "_ckds-date-range-picker_1jemp_2",
   "ckds-date-range-picker--open": "_ckds-date-range-picker--open_1jemp_27",
   "ckds-date-range-picker__body": "_ckds-date-range-picker__body_1jemp_40",
@@ -29,258 +29,333 @@ import '../../assets/DateRangePicker-BJW-EAys.css';const Be = (k) => /* @__PURE_
   "ckds-date-range-picker__reset-btn": "_ckds-date-range-picker__reset-btn_1jemp_207",
   "ckds-date-range-picker__actions": "_ckds-date-range-picker__actions_1jemp_218"
 };
-function Ae(k) {
-  return Se(k);
+function Ye(f) {
+  return Ne(f);
 }
-const ze = ({ ranges: k, activeLabel: H, onSelect: c }) => /* @__PURE__ */ d("div", { className: s["ckds-date-range-picker__sidebar"], children: k.map((f) => /* @__PURE__ */ d(
-  y,
+const $e = ({ ranges: f, activeLabel: q, onSelect: i }) => /* @__PURE__ */ l("div", { className: c["ckds-date-range-picker__sidebar"], children: f.map((v) => /* @__PURE__ */ l(
+  A,
   {
     type: "button",
-    className: `${s["ckds-date-range-picker__sidebar-item"]} ${H === f.label ? s["ckds-date-range-picker__sidebar-item--active"] : ""}`,
-    onClick: () => c(f),
-    label: f.label,
-    "aria-label": f.label
+    className: `${c["ckds-date-range-picker__sidebar-item"]} ${q === v.label ? c["ckds-date-range-picker__sidebar-item--active"] : ""}`,
+    onClick: () => i(v),
+    label: v.label,
+    "aria-label": v.label
   },
-  f.label
-)) }), qe = ({
-  onChange: k,
-  onClear: H,
-  value: c,
-  label: f = "Select date range",
-  minDate: L,
-  maxDate: v,
-  startDate: F,
-  endDate: U,
-  className: ce = "",
-  disabled: J = !1,
-  error: de = !1,
-  definedRanges: S,
-  size: oe = "medium",
-  dateFormat: V,
-  resetDisabled: Q,
-  defaultRange: X
+  v.label
+)) }), Ge = ({
+  onChange: f,
+  onClear: q,
+  value: i,
+  label: v = "Select date range",
+  minDate: Y,
+  maxDate: $,
+  startDate: ae,
+  endDate: ne,
+  className: ge = "",
+  disabled: re = !1,
+  error: De = !1,
+  definedRanges: T,
+  size: _e = "medium",
+  dateFormat: G,
+  resetDisabled: se,
+  defaultRange: O
 }) => {
-  const g = X ? {
+  const ie = {
     "7d": "7 Days",
+    "7 days": "7 Days",
     "3m": "3 Months",
+    "3 months": "3 Months",
     "6m": "6 Months",
+    "6 months": "6 Months",
     "1y": "1 Year",
+    "1 year": "1 Year",
     mtd: "Month to Date",
-    ytd: "Year to Date"
-  }[X.toLowerCase()] ?? null : null, I = (() => {
-    if (g) return g;
-    if (!c?.startDate && !c?.endDate && !F && !U && (L || v)) {
-      const e = v ? new Date(v).getTime() < Date.now() ? new Date(v) : /* @__PURE__ */ new Date() : /* @__PURE__ */ new Date(), t = L ? new Date(L) : void 0, i = E("6 Months", e) ?? new Date(e.getFullYear(), e.getMonth() - 6, e.getDate()), n = t && i.getTime() < t.getTime() ? t : i, w = ["6 Months", "3 Months", "Month to Date", "7 Days"];
-      for (const ae of w) {
-        const ne = E(ae, e);
-        if (ne && Z(ne, n)) return ae;
+    "month to date": "Month to Date",
+    ytd: "Year to Date",
+    "year to date": "Year to Date"
+  }, g = R(() => {
+    if (!O) return null;
+    const e = O.toLowerCase(), t = z(T);
+    if (t && t.length > 0) {
+      const n = t.find((a) => a.label.toLowerCase() === e);
+      if (n) return n.label;
+    }
+    return ie[e] ? ie[e] : null;
+  }, [O, T]), de = (() => {
+    const e = z(T), t = !!(e && e.length > 0);
+    if (i?.startDate && i?.endDate) {
+      const n = i.startDate instanceof Date ? i.startDate : new Date(i.startDate), a = i.endDate instanceof Date ? i.endDate : new Date(i.endDate);
+      if (t) {
+        const d = e.find(
+          (o) => o.label !== "Custom" && o.startDate && o.endDate && D(n, o.startDate) && D(a, o.endDate)
+        );
+        if (d) return d.label;
+      } else {
+        const d = Y ? new Date(Y) : void 0, o = $ ? new Date($) : void 0, C = pe({ startDate: n, endDate: a }, d, o);
+        if (C) return C;
       }
       return "Custom";
     }
-    return "Custom";
-  })(), [u, N] = b(!1), [ee, R] = b(I), [le, j] = b(0), [ge, K] = b(c), [_e, C] = b(!1), [B, ke] = b(I), P = re(null), W = re(null), { horizontal: pe } = Ne(P, u, 400, 820), T = M(
+    return g || "Custom";
+  })(), [w, B] = L(!1), [y, E] = L(de), [ke, P] = L(0), [k, Z] = L(i), [fe, S] = L(!1), [H, he] = L(de), F = oe(null), J = oe(null), { horizontal: ue } = xe(F, w, 400, 820), j = R(
     () => {
-      const e = ie(S);
+      const e = z(T);
       if (e && e.length > 0) {
-        if (e.some((i) => i.label === "Custom")) return e;
+        if (e.some((n) => n.label === "Custom")) return e;
         const t = /* @__PURE__ */ new Date();
         return [
           { label: "Custom", startDate: t, endDate: t },
           ...e
         ];
       }
-      return Te();
+      return me();
     },
-    [S]
-  ), x = M(() => {
-    const e = ie(S);
+    [T]
+  ), N = R(() => {
+    const e = z(T);
     return !!(e && e.length > 0);
-  }, [S]), a = M(() => $(L), [L]), r = M(() => $(v), [v]), p = M(() => $(F), [F]), m = M(() => $(U), [U]), _ = M(() => {
-    if (p && m) {
-      let e = p.getTime() <= m.getTime() ? new Date(p) : new Date(m), t = p.getTime() <= m.getTime() ? new Date(m) : new Date(p);
-      return a && e.getTime() < a.getTime() && (e = new Date(a)), r && t.getTime() > r.getTime() && (t = new Date(r)), { startDate: e, endDate: t };
+  }, [T]), r = R(() => W(Y), [Y]), s = R(() => W($), [$]), h = R(() => W(ae), [ae]), u = R(() => W(ne), [ne]), m = R(() => {
+    if (h && u) {
+      let e = h.getTime() <= u.getTime() ? new Date(h) : new Date(u), t = h.getTime() <= u.getTime() ? new Date(u) : new Date(h);
+      return r && e.getTime() < r.getTime() && (e = new Date(r)), s && t.getTime() > s.getTime() && (t = new Date(s)), { startDate: e, endDate: t };
     }
-    if (c?.startDate || c?.endDate) return c;
-    if (a || r) {
-      const e = r && r.getTime() < Date.now() ? new Date(r) : /* @__PURE__ */ new Date();
-      let n = E(g ?? "6 Months", e) ?? new Date(e.getFullYear(), e.getMonth() - 6, e.getDate());
-      return a && n.getTime() < a.getTime() && (n = new Date(a)), { startDate: n, endDate: e };
+    if (i?.startDate || i?.endDate) return i;
+    if (r || s) {
+      const e = s && s.getTime() < Date.now() ? new Date(s) : /* @__PURE__ */ new Date(), t = g ?? "6 Months";
+      let n = x(t, e);
+      if (!n) {
+        const d = z(T), C = (d && d.length > 0 ? d : me()).find((Ee) => Ee.label === t);
+        C?.startDate && (n = new Date(C.startDate));
+      }
+      let a = n ?? new Date(e.getFullYear(), e.getMonth() - 6, e.getDate());
+      return r && a.getTime() < r.getTime() && (a = new Date(r)), { startDate: a, endDate: e };
     }
-  }, [c, p, m, a, r, g]), [l, h] = b(_), te = _ ? `${_.startDate?.getTime()}_${_.endDate?.getTime()}` : "";
-  Y(() => {
-    _?.startDate && _?.endDate && (h({
-      startDate: new Date(_.startDate),
-      endDate: new Date(_.endDate)
-    }), j((e) => e + 1));
-  }, [te]), Y(() => {
-    if (!g || _?.startDate) return;
-    const e = T.find((t) => t.label === g);
+  }, [i, h, u, r, s, g]), [p, b] = L(m), ce = m ? `${m.startDate?.getTime()}_${m.endDate?.getTime()}` : "";
+  K(() => {
+    m?.startDate && m?.endDate && (b({
+      startDate: new Date(m.startDate),
+      endDate: new Date(m.endDate)
+    }), P((e) => e + 1));
+  }, [ce]), K(() => {
+    if (!g || m?.startDate) return;
+    const e = j.find((t) => t.label === g);
     if (e && e.label !== "Custom") {
-      const t = A(e);
-      h(t), K(t), j((i) => i + 1);
+      const t = U(e);
+      b(t), Z(t), P((n) => n + 1);
     }
-  }, []), be(() => {
-    if (!u) return;
-    const e = g ? T.find((n) => n.label === g) : void 0, t = _ ?? (e ? A(e) : void 0);
-    h(t);
-    const i = B !== "Custom" ? B : t?.startDate ? q(t) ?? "Custom" : "Custom";
-    R(i), j((n) => n + 1);
-  }, [u, te]), Y(() => {
-    c?.startDate && c?.endDate && K(c);
-  }, [c]), Y(() => {
-    if (!u) return;
+  }, []), Se(() => {
+    if (!w) return;
+    const e = g ? j.find((a) => a.label === g) : void 0, t = m ?? (e ? U(e) : void 0);
+    b(t);
+    const n = H !== "Custom" ? H : t?.startDate ? I(t) ?? "Custom" : "Custom";
+    E(n), P((a) => a + 1);
+  }, [w, ce]), K(() => {
+    i?.startDate && i?.endDate && Z(i);
+  }, [i]), K(() => {
+    if (!w) return;
     const e = (t) => {
-      W.current && !W.current.contains(t.target) && P.current && !P.current.contains(t.target) && N(!1);
+      J.current && !J.current.contains(t.target) && F.current && !F.current.contains(t.target) && B(!1);
     };
     return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
-  }, [u]);
-  const me = () => {
-    J || (u || C(!1), N((e) => !e));
-  }, De = () => {
-    l && (K(l), ke(ee), k(l)), N(!1);
-  }, fe = () => {
-    h(ge ?? c), N(!1);
-  }, q = O(
-    (e) => x ? Ee(
+  }, [w]);
+  const we = () => {
+    re || (w || S(!1), B((e) => !e));
+  }, be = () => {
+    if (p && y && y !== "Custom") {
+      const e = j.find((t) => t.label === y);
+      if (e && e.label !== "Custom") {
+        let t = !0;
+        if (N) {
+          const n = new Date(e.startDate), a = new Date(e.endDate), { startDate: d, endDate: o } = ee(
+            e,
+            r,
+            s
+          );
+          t = D(n, d) && D(a, o);
+        } else {
+          const n = te(s), a = x(e.label, n);
+          a && r && a.getTime() < r.getTime() && (t = !1), s && n.getTime() > s.getTime() && (t = !1);
+        }
+        if (!t) {
+          const n = H ?? g ?? "Custom";
+          b(k ?? m), E(n), S(!1), P((d) => d + 1), B(!1);
+          return;
+        }
+      }
+    }
+    if (p) {
+      const e = y ?? I(p) ?? "Custom";
+      Z(p), he(e), E(e), f(p, e);
+    }
+    B(!1);
+  }, Ce = () => {
+    b(k ?? i), B(!1);
+  }, I = X(
+    (e) => N ? ye(
       e,
-      T,
-      a,
-      r
-    ) : Le(e, a, r),
-    [x, T, r, a]
-  ), A = O((e) => {
-    let t, i;
-    if (x)
-      ({ startDate: t, endDate: i } = Re(e, a, r));
+      j,
+      r,
+      s
+    ) : pe(e, r, s),
+    [N, j, s, r]
+  ), U = X((e) => {
+    let t, n;
+    if (N)
+      ({ startDate: t, endDate: n } = ee(e, r, s));
+    else {
+      const a = te(s);
+      n = a, t = x(e.label, a) ?? new Date(e.startDate), r && t.getTime() < r.getTime() && (t = new Date(r));
+    }
+    return { startDate: t, endDate: n };
+  }, [N, r, s]), Me = (e) => {
+    if (E(e.label), e.label === "Custom") return;
+    const t = U(e);
+    b(t);
+    let n = !1;
+    if (e.label !== "Custom")
+      if (N) {
+        const a = new Date(e.startDate), d = new Date(e.endDate), { startDate: o, endDate: C } = ee(
+          e,
+          r,
+          s
+        );
+        n = !D(a, o) || !D(d, C);
+      } else {
+        const a = te(s), d = x(e.label, a);
+        d && r && d.getTime() < r.getTime() && (n = !0);
+      }
+    if (n)
+      S(!0);
     else {
-      const n = je(r);
-      i = n, t = E(e.label, n) ?? new Date(e.startDate), a && t.getTime() < a.getTime() && (t = new Date(a));
+      const a = k?.startDate && k?.endDate ? k : m, d = a?.startDate && a?.endDate && t.startDate && t.endDate && D(t.startDate, a.startDate) && D(t.endDate, a.endDate);
+      S(!d);
     }
-    return { startDate: t, endDate: i };
-  }, [x, a, r]), he = (e) => {
-    if (R(e.label), e.label === "Custom") return;
-    const t = A(e);
-    h(t), C(e.label !== B), j((i) => i + 1);
-  }, ue = () => {
-    const e = r && r.getTime() < Date.now() ? new Date(r) : /* @__PURE__ */ new Date();
+    P((a) => a + 1);
+  }, ve = () => {
+    const e = s && s.getTime() < Date.now() ? new Date(s) : /* @__PURE__ */ new Date();
     let t;
     if (g) {
-      const n = T.find((w) => w.label === g);
-      t = n ? A(n) : { startDate: e, endDate: e };
-    } else if (p && m)
-      t = _ ?? { startDate: new Date(p), endDate: new Date(m) };
+      const o = j.find((C) => C.label === g);
+      t = o ? U(o) : { startDate: e, endDate: e };
+    } else if (h && u)
+      t = m ?? { startDate: new Date(h), endDate: new Date(u) };
     else {
-      const n = E("6 Months", e) ?? new Date(e.getFullYear(), e.getMonth() - 6, e.getDate());
-      t = { startDate: a && n.getTime() < a.getTime() ? new Date(a) : n, endDate: e };
+      const o = x("6 Months", e) ?? new Date(e.getFullYear(), e.getMonth() - 6, e.getDate());
+      t = { startDate: r && o.getTime() < r.getTime() ? new Date(r) : o, endDate: e };
     }
-    h(t);
-    const i = q(t) ?? I;
-    R(i), C(!0), j((n) => n + 1), H?.();
-  }, we = (() => {
-    if (Q !== void 0) return Q;
-    if (g) return B === g;
-    const e = r && r.getTime() < Date.now() ? new Date(r) : /* @__PURE__ */ new Date();
-    let t, i = e;
-    if (p && m)
-      t = a && p.getTime() < a.getTime() ? new Date(a) : new Date(p), i = r && m.getTime() > r.getTime() ? new Date(r) : new Date(m);
+    b(t);
+    const n = I(t) ?? (g || "Custom");
+    E(n);
+    const a = k?.startDate && k?.endDate ? k : m, d = a?.startDate && a?.endDate && t.startDate && t.endDate && D(t.startDate, a.startDate) && D(t.endDate, a.endDate);
+    S(!d), P((o) => o + 1), q?.();
+  }, Te = (() => {
+    if (se !== void 0) return se;
+    if (g)
+      return (w ? y : H) === g;
+    const e = s && s.getTime() < Date.now() ? new Date(s) : /* @__PURE__ */ new Date();
+    let t, n = e;
+    if (h && u)
+      t = r && h.getTime() < r.getTime() ? new Date(r) : new Date(h), n = s && u.getTime() > s.getTime() ? new Date(s) : new Date(u);
     else {
-      if (!a && !r)
+      if (!r && !s)
         return !1;
       {
-        const w = E("6 Months", e) ?? new Date(e.getFullYear(), e.getMonth() - 6, e.getDate());
-        t = a && w.getTime() < a.getTime() ? new Date(a) : w;
+        const d = x("6 Months", e) ?? new Date(e.getFullYear(), e.getMonth() - 6, e.getDate());
+        t = r && d.getTime() < r.getTime() ? new Date(r) : d;
       }
     }
-    const n = c?.startDate && c?.endDate ? c : _;
-    return !n?.startDate || !n?.endDate ? !0 : Z(n.startDate, t) && Z(n.endDate, i);
-  })(), z = O(
-    (e) => e ? V ? ye(e, V) : Ae(e) : "",
-    [V]
-  ), G = c?.startDate && c?.endDate ? `${z(c.startDate)} – ${z(c.endDate)}` : f;
-  return /* @__PURE__ */ D(
+    const a = w ? p?.startDate && p?.endDate ? p : void 0 : i?.startDate && i?.endDate ? i : m;
+    return !a?.startDate || !a?.endDate ? !0 : D(a.startDate, t) && D(a.endDate, n);
+  })(), V = X(
+    (e) => e ? G ? Pe(e, G) : Ye(e) : "",
+    [G]
+  ), Q = i?.startDate && i?.endDate ? `${V(i.startDate)} – ${V(i.endDate)}` : v;
+  return /* @__PURE__ */ M(
     "div",
     {
       "data-testid": "date-range-picker",
-      className: `${s["ckds-date-range-picker"]} ${u ? s["ckds-date-range-picker--open"] : ""} ${ce}`,
-      ref: P,
+      className: `${c["ckds-date-range-picker"]} ${w ? c["ckds-date-range-picker--open"] : ""} ${ge}`,
+      ref: F,
       children: [
-        /* @__PURE__ */ d(
-          y,
+        /* @__PURE__ */ l(
+          A,
           {
             variant: "secondary",
-            error: de,
-            disabled: J,
-            onClick: me,
-            "aria-label": G === f ? f : `Date range: ${G}`,
-            size: oe,
-            label: G,
+            error: De,
+            disabled: re,
+            onClick: we,
+            "aria-label": Q === v ? v : `Date range: ${Q}`,
+            size: _e,
+            label: Q,
             icons: {
-              left: /* @__PURE__ */ d(Be, { width: 16, height: 16 }),
-              right: /* @__PURE__ */ d(ve, { width: 16, height: 16 })
+              left: /* @__PURE__ */ l(Be, { width: 16, height: 16 }),
+              right: /* @__PURE__ */ l(je, { width: 16, height: 16 })
             },
             style: { background: "white" }
           }
         ),
-        u && /* @__PURE__ */ D(
+        w && /* @__PURE__ */ M(
           "div",
           {
-            ref: W,
-            className: `${s["ckds-date-range-picker__calendar"]} ${s["ckds-date-range-picker__calendar--enter"]} ${pe === "right" ? s["ckds-date-range-picker__calendar--align-right"] : s["ckds-date-range-picker__calendar--align-left"]}`,
+            ref: J,
+            className: `${c["ckds-date-range-picker__calendar"]} ${c["ckds-date-range-picker__calendar--enter"]} ${ue === "right" ? c["ckds-date-range-picker__calendar--align-right"] : c["ckds-date-range-picker__calendar--align-left"]}`,
             children: [
-              /* @__PURE__ */ D("div", { className: s["ckds-date-range-picker__body"], children: [
-                /* @__PURE__ */ d(
-                  ze,
+              /* @__PURE__ */ M("div", { className: c["ckds-date-range-picker__body"], children: [
+                /* @__PURE__ */ l(
+                  $e,
                   {
-                    ranges: T,
-                    activeLabel: ee,
-                    onSelect: he
+                    ranges: j,
+                    activeLabel: y,
+                    onSelect: Me
                   }
                 ),
-                /* @__PURE__ */ d("div", { className: s["ckds-date-range-picker__main"], children: /* @__PURE__ */ d(
-                  Ce,
+                /* @__PURE__ */ l("div", { className: c["ckds-date-range-picker__main"], children: /* @__PURE__ */ l(
+                  Le,
                   {
-                    startDate: l?.startDate,
-                    endDate: l?.endDate,
+                    startDate: p?.startDate,
+                    endDate: p?.endDate,
                     onDateClick: (e) => {
-                      if (!l?.startDate || l.startDate && l.endDate)
-                        h({ startDate: e, endDate: void 0 }), R("Custom"), C(!1);
+                      if (!p?.startDate || p.startDate && p.endDate)
+                        b({ startDate: e, endDate: void 0 }), E("Custom"), S(!1);
                       else {
-                        const t = l.startDate;
+                        const t = p.startDate;
                         if (e.getTime() < t.getTime())
-                          h({ startDate: e, endDate: void 0 }), C(!1);
+                          b({ startDate: e, endDate: void 0 }), E("Custom"), S(!1);
                         else {
-                          const i = { startDate: t, endDate: e };
-                          h(i);
-                          const n = q(i);
-                          R(n ?? "Custom"), C(!0);
+                          const n = { startDate: t, endDate: e };
+                          b(n);
+                          const a = I(n);
+                          E(a ?? "Custom");
+                          const d = k?.startDate && k?.endDate && D(t, k.startDate) && D(e, k.endDate);
+                          S(!d);
                         }
                       }
                     },
-                    minDate: a,
-                    maxDate: r
+                    minDate: r,
+                    maxDate: s
                   },
-                  le
+                  ke
                 ) })
               ] }),
-              /* @__PURE__ */ D("div", { className: s["ckds-date-range-picker__footer"], children: [
-                /* @__PURE__ */ D("div", { className: s["ckds-date-range-picker__date-inputs"], children: [
-                  /* @__PURE__ */ D("div", { className: s["ckds-date-range-picker__date-field"], children: [
-                    /* @__PURE__ */ D("span", { className: s["ckds-date-range-picker__date-label"], children: [
+              /* @__PURE__ */ M("div", { className: c["ckds-date-range-picker__footer"], children: [
+                /* @__PURE__ */ M("div", { className: c["ckds-date-range-picker__date-inputs"], children: [
+                  /* @__PURE__ */ M("div", { className: c["ckds-date-range-picker__date-field"], children: [
+                    /* @__PURE__ */ M("span", { className: c["ckds-date-range-picker__date-label"], children: [
                       "Start Date",
-                      /* @__PURE__ */ d("span", { className: s["ckds-date-range-picker__required-asterisk"], children: "*" })
+                      /* @__PURE__ */ l("span", { className: c["ckds-date-range-picker__required-asterisk"], children: "*" })
                     ] }),
-                    /* @__PURE__ */ d(se, { size: "small", variation: "NEUTRAL", shape: "pill", fill: "outline", className: s["ckds-date-range-picker__date-tag"], children: z(l?.startDate) || "MM-DD-YYYY" })
+                    /* @__PURE__ */ l(le, { size: "small", variation: "NEUTRAL", shape: "pill", fill: "outline", className: c["ckds-date-range-picker__date-tag"], children: V(p?.startDate) || "MM-DD-YYYY" })
                   ] }),
-                  /* @__PURE__ */ d("span", { className: s["ckds-date-range-picker__date-arrow"], children: /* @__PURE__ */ d(xe, {}) }),
-                  /* @__PURE__ */ D("div", { className: s["ckds-date-range-picker__date-field"], children: [
-                    /* @__PURE__ */ D("span", { className: s["ckds-date-range-picker__date-label"], children: [
+                  /* @__PURE__ */ l("span", { className: c["ckds-date-range-picker__date-arrow"], children: /* @__PURE__ */ l(Ae, {}) }),
+                  /* @__PURE__ */ M("div", { className: c["ckds-date-range-picker__date-field"], children: [
+                    /* @__PURE__ */ M("span", { className: c["ckds-date-range-picker__date-label"], children: [
                       "End Date",
-                      /* @__PURE__ */ d("span", { className: s["ckds-date-range-picker__required-asterisk"], children: "*" })
+                      /* @__PURE__ */ l("span", { className: c["ckds-date-range-picker__required-asterisk"], children: "*" })
                     ] }),
-                    /* @__PURE__ */ d(se, { size: "small", variation: "NEUTRAL", shape: "pill", fill: "outline", className: s["ckds-date-range-picker__date-tag"], children: z(l?.endDate) || "MM-DD-YYYY" })
+                    /* @__PURE__ */ l(le, { size: "small", variation: "NEUTRAL", shape: "pill", fill: "outline", className: c["ckds-date-range-picker__date-tag"], children: V(p?.endDate) || "MM-DD-YYYY" })
                   ] }),
-                  /* @__PURE__ */ d(
-                    Me,
+                  /* @__PURE__ */ l(
+                    Re,
                     {
                       title: "Reset selection and navigation to default",
                       placement: "top",
@@ -306,24 +381,24 @@ const ze = ({ ranges: k, activeLabel: H, onSelect: c }) => /* @__PURE__ */ d("di
                           }
                         }
                       },
-                      children: /* @__PURE__ */ d(
-                        y,
+                      children: /* @__PURE__ */ l(
+                        A,
                         {
                           variant: "secondary",
                           size: "medium",
-                          onClick: ue,
-                          disabled: we,
+                          onClick: ve,
+                          disabled: Te,
                           "aria-label": "Reset selection and navigation to default",
-                          className: s["ckds-date-range-picker__reset-btn"],
-                          icons: { left: /* @__PURE__ */ d(Pe, {}) }
+                          className: c["ckds-date-range-picker__reset-btn"],
+                          icons: { left: /* @__PURE__ */ l(ze, {}) }
                         }
                       )
                     }
                   )
                 ] }),
-                /* @__PURE__ */ D("div", { className: s["ckds-date-range-picker__actions"], children: [
-                  /* @__PURE__ */ d(y, { variant: "secondary", label: "Cancel", size: "medium", onClick: fe }),
-                  /* @__PURE__ */ d(y, { variant: "primary", label: "Apply", size: "medium", onClick: De, disabled: !_e || !l?.startDate || !l?.endDate })
+                /* @__PURE__ */ M("div", { className: c["ckds-date-range-picker__actions"], children: [
+                  /* @__PURE__ */ l(A, { variant: "secondary", label: "Cancel", size: "medium", onClick: Ce }),
+                  /* @__PURE__ */ l(A, { variant: "primary", label: "Apply", size: "medium", onClick: be, disabled: !fe || !p?.startDate || !p?.endDate })
                 ] })
               ] })
             ]
@@ -334,5 +409,5 @@ const ze = ({ ranges: k, activeLabel: H, onSelect: c }) => /* @__PURE__ */ d("di
   );
 };
 export {
-  qe as DateRangePicker
+  Ge as DateRangePicker
 };

package/dist/components/DateRangePicker/_types/dateRangePicker.types.d.ts

@@ -3,8 +3,8 @@ import { ButtonSize } from '../../CKButton/_types/button.types';
 import { DefinedRangesInput, DefinedRangeDateLike } from '../_utils/util';
 export type { DateRange, DefinedRange, DefinedRangesInput, DefinedRangeDateLike };
 export interface DateRangePickerProps {
-    /** Handler called when the date range changes */
-    onChange: (range: DateRange) => void;
+    /** Handler called when the date range changes. Second argument is the active preset label (e.g. "7D", "30D", "Custom") */
+    onChange: (range: DateRange, activePreset?: string | null) => void;
     /** Handler called when the selection is cleared */
     onClear?: () => void;
     /** Currently selected date range */
@@ -31,7 +31,9 @@ export interface DateRangePickerProps {
     popupAlign?: "left" | "right";
     dateFormat?: string;
     resetDisabled?: boolean;
-    defaultRange?: "7d" | "3m" | "6m" | "1y" | "mtd" | "ytd";
+    /** Default range to pre-select. Accepts built-in codes (7d, 3m, 6m, 1y, mtd, ytd)
+     *  or any label that exists in the definedRanges prop (matched case-insensitively). */
+    defaultRange?: string;
 }
 export interface RangeSidebarProps {
     ranges: DefinedRange[];