@televet/kibble-ui 4.0.0-beta.2 → 4.0.0-beta.20

package/dist/chunks/datePicker.component-D1WtrZJd.js

@@ -0,0 +1,749 @@
+import { x as e, bR as J, bV as pe, bP as he } from "./vendor-BBfll6i3.js";
+import { createContext as fe, useContext as be, useState as ge, useCallback as w, useMemo as F, useEffect as xe, useRef as _ } from "react";
+import { a as ye, Y as ke, b as oe, s as ve, e as Se, c as je, f as C, U as Q, x as Me, d as we, g as q, N as Ce, h as Pe } from "./date-1NFv48Qu.js";
+import { aK as Fe, s as K, F as X, aL as re, r as Ee, y as Ie, B as ne, aM as A, aN as Ne, aO as Te, aP as Oe, aQ as Re, aR as _e, aS as Be } from "./chakra-BqBkjpvZ.js";
+import { W as Z } from "./textInput.component-K4f7h4pP.js";
+import { I as ee } from "./icon.component-w5bWbfVU.js";
+import { W as se } from "./text.component-XYjOAc2s.js";
+import { B as E } from "./button.component-CA9bIFbq.js";
+import { M as te } from "./menu.component-Bscyjw7R.js";
+var ie = /* @__PURE__ */ ((t) => (t.ShortDate = "MM/dd/yyyy", t.LongDate = "MMM dd yyyy", t.DayOfWeekDayOfMonth = "eeee, MMMM do", t))(ie || {}), f = /* @__PURE__ */ ((t) => (t.StartDate = "startDate", t.EndDate = "endDate", t))(f || {});
+const g = /* @__PURE__ */ new Date(), $ = g.getFullYear(), Ye = g.getMonth(), He = g, ce = $ - 100, le = $ + 5, V = ie.ShortDate, ze = {
+  dateFormat: V,
+  endDate: null,
+  focusedInput: null,
+  withDateRange: !1,
+  maxYear: le,
+  minYear: ce,
+  startDate: null,
+  onClose: () => {
+    throw new Error("onClose(): boolean not implemented");
+  },
+  setFocusedInput: () => {
+    throw new Error("setFocusedInput(): boolean not implemented");
+  },
+  focusedDate: g,
+  firstDayOfWeek: void 0,
+  activeMonths: [],
+  isDateFocused: () => {
+    throw new Error("isDateFocused(): boolean not implemented");
+  },
+  isDateSelected: () => {
+    throw new Error("isDateSelected(): boolean not implemented");
+  },
+  isDateHovered: () => {
+    throw new Error("isDateHovered(): boolean not implemented");
+  },
+  isDateBlocked: () => {
+    throw new Error("isDateBlocked(): boolean not implemented");
+  },
+  isFirstOrLastSelectedDate: () => {
+    throw new Error("isFirstOrLastSelectedDate(): boolean not implemented");
+  },
+  onDateFocus: () => {
+    throw new Error("onDateFocus(): boolean not implemented");
+  },
+  onDateHover: () => {
+    throw new Error("onDateHover(): boolean not implemented");
+  },
+  onDateSelect: () => {
+    throw new Error("onDateSelect(): boolean not implemented");
+  },
+  goToPreviousMonths: () => {
+    throw new Error("goToPreviousMonths(): boolean not implemented");
+  },
+  goToNextMonths: () => {
+    throw new Error("goToNextMonths(): boolean not implemented");
+  },
+  goToDate: () => {
+    throw new Error("goToDate(): boolean not implemented");
+  },
+  clearDates: () => {
+    throw new Error("clearDates(): boolean not implemented");
+  }
+}, de = fe(
+  ze
+), j = () => be(de), We = ({
+  children: t,
+  dateFormat: o = V,
+  endDate: u,
+  inputProps: n,
+  maxDate: c,
+  maxDaysInRange: s,
+  maxYear: l,
+  minDate: D,
+  minYear: b,
+  onDateChange: d,
+  placement: x = "bottom",
+  startDate: h,
+  withDateRange: p
+}) => {
+  const [r, i] = ge({
+    startDate: h,
+    endDate: u || h,
+    focusedInput: null
+  }), m = w(
+    (a) => {
+      if (s && a)
+        return ye(a, { days: s });
+      if (c)
+        return c;
+    },
+    [c, s]
+  ), y = (a) => {
+    if (!a)
+      return;
+    a.endDate || (a.endDate = a.startDate);
+    const R = m(a.startDate);
+    a.endDate && R && oe(a.endDate, R) && (a.endDate = null), a.startDate = a.startDate ? ve(a.startDate) : a.startDate, a.endDate = a.endDate ? Se(a.endDate) : a.endDate, i({
+      ...a,
+      focusedInput: a.focusedInput || f.StartDate
+    }), !p && d && d(a);
+  }, k = w(({ open: a }) => {
+    i({
+      startDate: null,
+      endDate: null,
+      focusedInput: a ? f.StartDate : null
+    });
+  }, []), {
+    activeMonths: v,
+    firstDayOfWeek: S,
+    focusedDate: B,
+    goToDate: M,
+    goToNextMonths: I,
+    goToPreviousMonths: N,
+    isDateBlocked: Y,
+    isDateFocused: H,
+    isDateHovered: z,
+    isDateSelected: W,
+    isFirstOrLastSelectedDate: T,
+    onDateFocus: G,
+    onDateHover: O,
+    onDateSelect: L
+  } = ke({
+    endDate: r.endDate,
+    focusedInput: r.focusedInput,
+    initialVisibleMonth: r.startDate || g,
+    // Only show max disabled dates for date range when focused on end date input
+    maxBookingDate: p && r.focusedInput === f.StartDate ? void 0 : m(r.startDate),
+    minBookingDate: D,
+    minBookingDays: 1,
+    numberOfMonths: 1,
+    onDatesChange: y,
+    startDate: r.startDate,
+    ...!p && { exactMinBookingDays: !0 }
+  }), U = w(
+    (a) => {
+      a === f.EndDate && r.endDate ? M(r.endDate) : r.startDate && M(r.startDate);
+    },
+    [M, r.endDate, r.startDate]
+  ), P = w(
+    (a) => {
+      i((R) => ({ ...R, focusedInput: a })), U(a);
+    },
+    [U]
+  ), ue = () => {
+    n?.disabled || (!r.startDate || !p) && P(f.StartDate);
+  }, De = w(() => {
+    P(null), p && d && setTimeout(() => {
+      d({ startDate: r.startDate, endDate: r.endDate });
+    }, 200);
+  }, [
+    p,
+    d,
+    P,
+    r.endDate,
+    r.startDate
+  ]), me = F(() => v[0], [v]);
+  return xe(() => {
+    i((a) => ({
+      ...a,
+      startDate: h,
+      endDate: u || h
+    }));
+  }, [h, u]), /* @__PURE__ */ e.jsx(
+    de.Provider,
+    {
+      value: {
+        activeMonth: me,
+        activeMonths: v,
+        dateFormat: o || V,
+        endDate: r.endDate || null,
+        firstDayOfWeek: S,
+        focusedDate: B || He,
+        focusedInput: r.focusedInput,
+        goToDate: M,
+        goToNextMonths: I,
+        goToPreviousMonths: N,
+        setFocusedInput: P,
+        isDateBlocked: Y,
+        isDateFocused: H,
+        isDateHovered: z,
+        withDateRange: p || !1,
+        isDateSelected: W,
+        isFirstOrLastSelectedDate: T,
+        maxDate: c,
+        maxYear: l || le,
+        minDate: D,
+        minYear: b || ce,
+        onDateChange: d,
+        onDateFocus: G,
+        onDateHover: O,
+        onDateSelect: L,
+        startDate: r.startDate,
+        onClose: De,
+        clearDates: k
+      },
+      children: /* @__PURE__ */ e.jsx(
+        Fe,
+        {
+          onOpenChange: ({ open: a }) => {
+            a ? ue() : P(null);
+          },
+          positioning: { placement: x },
+          variant: "default",
+          children: t
+        }
+      )
+    }
+  );
+}, Le = (t, o) => o ? oe(t, o) : !0, Ae = (t, o) => o ? je(t, o) : !0;
+function Ve({
+  inputProps: t
+}) {
+  const {
+    setFocusedInput: o,
+    startDate: u,
+    endDate: n,
+    focusedInput: c,
+    dateFormat: s,
+    withDateRange: l,
+    minDate: D,
+    maxDate: b,
+    onDateChange: d,
+    onDateSelect: x,
+    onClose: h
+  } = j(), { open: p, setOpen: r } = J(), i = t?.size || "md", m = (k) => {
+    k.key === "Enter" && p && (r(!1), h(), k.preventDefault(), k.stopPropagation());
+  }, y = (k) => {
+    const v = k.target.value, S = Me(v, s, g);
+    v.length === s.length && we(S) && Le(S, D) && Ae(S, b) && x(S), !v.length && d && d({ startDate: null, endDate: null });
+  };
+  return /* @__PURE__ */ e.jsxs(
+    K,
+    {
+      w: "100%",
+      className: "DatePicker__Trigger",
+      "data-testid": "kibble-datepicker-trigger",
+      children: [
+        /* @__PURE__ */ e.jsx(
+          Z,
+          {
+            className: "DatePicker__Input--Start",
+            "data-testid": "kibble-datepicker-input-start",
+            autoComplete: "off",
+            rightElement: /* @__PURE__ */ e.jsx(
+              X,
+              {
+                ...!t?.disabled && {
+                  onClick: () => o(f.StartDate)
+                },
+                h: "100%",
+                align: "center",
+                children: /* @__PURE__ */ e.jsx(ee, { name: "calendarDate", size: i })
+              }
+            ),
+            value: Q(u, s, ""),
+            onChange: y,
+            onKeyDown: m,
+            ...!t?.disabled && {
+              onFocus: () => {
+                o(f.StartDate);
+              }
+            },
+            placeholder: C(g, s).toString(),
+            ...c === f.StartDate && {
+              "data-focus": !0
+            },
+            ...t
+          }
+        ),
+        l && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+          /* @__PURE__ */ e.jsx(se, { children: " - " }),
+          /* @__PURE__ */ e.jsx(
+            Z,
+            {
+              className: "DatePicker__Input--End",
+              "data-testid": "kibble-datepicker-input-end",
+              rightElement: /* @__PURE__ */ e.jsx(
+                X,
+                {
+                  ...!t?.disabled && {
+                    onClick: () => o(f.StartDate)
+                  },
+                  h: "100%",
+                  align: "center",
+                  children: /* @__PURE__ */ e.jsx(ee, { name: "calendarDate", size: i })
+                }
+              ),
+              value: Q(n, s, ""),
+              onChange: y,
+              ...!t?.disabled && {
+                onFocus: () => o(f.EndDate)
+              },
+              onKeyDown: m,
+              placeholder: C(g, s).toString(),
+              ...c === f.EndDate && {
+                "data-focus": !0
+              },
+              ...t
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function Je({
+  buttonText: t = "Apply",
+  onSubmit: o,
+  hideResetButton: u
+}) {
+  const { startDate: n, endDate: c, onClose: s, clearDates: l } = j(), { open: D, setOpen: b } = J(), d = w(() => {
+    b(!1), s(), o && o({ startDate: n, endDate: c });
+  }, [b, s, o, n, c]);
+  return /* @__PURE__ */ e.jsxs(
+    K,
+    {
+      w: "100%",
+      justify: u ? "end" : "space-between",
+      align: "center",
+      borderTop: "1px",
+      borderColor: "border.default",
+      px: 3,
+      py: 2,
+      children: [
+        !u && /* @__PURE__ */ e.jsx(
+          E,
+          {
+            size: "sm",
+            variant: "ghostNeutral",
+            onClick: () => l({ open: D }),
+            children: "Clear Dates"
+          }
+        ),
+        /* @__PURE__ */ e.jsx(E, { size: "sm", onClick: d, children: t })
+      ]
+    }
+  );
+}
+const ae = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December"
+];
+function Ke() {
+  const t = _(null), o = _(null), {
+    focusedDate: u,
+    activeMonth: n,
+    minYear: c,
+    maxYear: s,
+    goToDate: l,
+    goToNextMonths: D,
+    goToPreviousMonths: b
+  } = j(), d = F(
+    () => ae.map((i, m) => ({
+      label: i,
+      value: String(m),
+      selected: m === n?.month
+    })),
+    [n?.month]
+  ), x = F(
+    () => pe(c, s + 1).map((i) => {
+      const m = String(i), y = i === n?.year;
+      return {
+        label: m,
+        value: m,
+        selected: y,
+        ...y && { ref: o }
+      };
+    }),
+    [n?.year, s, c]
+  ), h = (i) => l(
+    q(u || g, {
+      month: Number(i),
+      year: n?.year
+    })
+  ), p = (i) => l(
+    q(u || g, {
+      month: n?.month,
+      year: Number(i)
+    })
+  ), r = ({ type: i }) => {
+    setTimeout(() => {
+      const m = i === "year" ? o?.current : t?.current;
+      m && m.scrollIntoView({ block: "center" });
+    });
+  };
+  return /* @__PURE__ */ e.jsxs(
+    K,
+    {
+      className: "DatePicker__Header",
+      "data-testid": "kibble-datepicker-header",
+      w: "100%",
+      justify: "space-between",
+      borderBottom: "1px",
+      borderColor: "border.default",
+      py: 2,
+      px: 3,
+      children: [
+        /* @__PURE__ */ e.jsx(
+          E,
+          {
+            iconName: "chevronLeft",
+            onClick: b,
+            variant: "ghostNeutral",
+            size: "sm"
+          }
+        ),
+        /* @__PURE__ */ e.jsxs(re, { gap: 2, h: "100%", children: [
+          /* @__PURE__ */ e.jsx(
+            te,
+            {
+              "data-testid": "kibble-datepicker-month-menu",
+              buttonProps: {
+                variant: "tertiary",
+                text: ae[n?.month || 0],
+                size: "sm"
+              },
+              listProps: {
+                menuItems: d,
+                onSelect: h,
+                maxH: 250
+              },
+              onOpenChange: ({ open: i }) => {
+                i && r({ type: "month" });
+              }
+            }
+          ),
+          /* @__PURE__ */ e.jsx(
+            te,
+            {
+              "data-testid": "kibble-datepicker-year-menu",
+              buttonProps: {
+                variant: "tertiary",
+                text: String(n?.year),
+                size: "sm"
+              },
+              listProps: {
+                menuItems: x,
+                onSelect: p,
+                maxH: 250
+              },
+              onOpenChange: ({ open: i }) => {
+                i && r({ type: "year" });
+              }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ e.jsx(
+          E,
+          {
+            iconName: "chevronRight",
+            onClick: D,
+            variant: "ghostNeutral",
+            size: "sm"
+          }
+        )
+      ]
+    }
+  );
+}
+const $e = ["root", "indicator"], Ge = {
+  default: {
+    root: {
+      borderColor: "transparent",
+      _hover: {
+        bg: "background.secondaryAlpha.hover"
+      }
+    }
+  },
+  disabled: {
+    root: {
+      bg: "background.subtle",
+      borderColor: "transparent",
+      cursor: "not-allowed",
+      opacity: 0.4
+    }
+  },
+  inRange: {
+    root: {
+      bg: "background.secondaryAlpha.hover",
+      borderColor: "transparent",
+      borderRadius: "none",
+      color: "text.info"
+    }
+  },
+  selectedEnd: {
+    root: {
+      borderColor: "border.focus",
+      color: "text.info"
+    }
+  },
+  selectedStart: {
+    root: {
+      bg: "background.secondary",
+      borderColor: "border.focus",
+      color: "text.contrast",
+      _hover: {
+        bg: "background.secondary"
+      }
+    }
+  }
+}, Ue = Ee({
+  slots: $e,
+  base: {
+    indicator: {
+      position: "absolute",
+      h: 6,
+      right: -4,
+      top: -4,
+      transform: "rotate(45deg)",
+      w: 6
+    },
+    root: {
+      border: "2px",
+      borderRadius: "4px",
+      color: "text.subtle",
+      cursor: "pointer",
+      fontSize: "sm",
+      fontWeight: "normal !important",
+      position: "relative",
+      px: 3,
+      py: 1,
+      overflow: "hidden"
+    }
+  },
+  variants: {
+    variant: Ge,
+    isToday: {
+      true: {
+        indicator: {
+          bg: "background.secondary"
+        }
+      },
+      false: {}
+    },
+    withDateRange: {
+      true: {},
+      false: {}
+    }
+  },
+  compoundVariants: [
+    {
+      variant: "selectedStart",
+      isToday: !0,
+      css: {
+        indicator: {
+          bg: "background"
+        }
+      }
+    },
+    {
+      withDateRange: !0,
+      variant: "selectedStart",
+      css: {
+        root: {
+          borderRightRadius: 0
+        }
+      }
+    },
+    {
+      withDateRange: !0,
+      variant: "selectedEnd",
+      css: {
+        root: {
+          borderLeftRadius: 0
+        }
+      }
+    }
+  ],
+  defaultVariants: {}
+}), Qe = ({
+  dayLabel: t,
+  date: o,
+  onDaySelected: u
+}) => {
+  const n = /* @__PURE__ */ new Date(), c = _(null), { startDate: s, endDate: l, dateFormat: D, withDateRange: b } = j(), d = F(
+    () => ({
+      currentDay: C(o, D),
+      startDate: s && C(s, D),
+      endDate: l && C(l, D)
+    }),
+    [o, D, l, s]
+  ), x = d.currentDay === d.startDate, h = d.currentDay === d.endDate, p = d.currentDay === C(n, D), {
+    focusedDate: r,
+    isDateFocused: i,
+    isDateSelected: m,
+    isDateHovered: y,
+    isDateBlocked: k,
+    isFirstOrLastSelectedDate: v,
+    onDateSelect: S,
+    onDateFocus: B,
+    onDateHover: M
+  } = j(), {
+    disabledDate: I,
+    isSelected: N,
+    onClick: Y,
+    onKeyDown: H,
+    onMouseEnter: z,
+    tabIndex: W
+  } = Ce({
+    date: o,
+    focusedDate: r,
+    isDateFocused: i,
+    isDateSelected: m,
+    isDateHovered: y,
+    isDateBlocked: k,
+    isFirstOrLastSelectedDate: v,
+    onDateFocus: B,
+    onDateSelect: S,
+    onDateHover: M
+  }), T = F(() => {
+    switch (!0) {
+      case I:
+        return "disabled";
+      case x:
+        return "selectedStart";
+      case h:
+        return "selectedEnd";
+      case (N && !x && !h):
+        return "inRange";
+      default:
+        return "default";
+    }
+  }, [I, h, x, N]), O = Ie({ recipe: Ue })({ variant: T, isToday: p, withDateRange: b });
+  if (!t)
+    return /* @__PURE__ */ e.jsx(e.Fragment, {});
+  const L = () => {
+    T !== "disabled" && (Y(), u());
+  };
+  return /* @__PURE__ */ e.jsxs(
+    E,
+    {
+      className: "DatePicker__Day",
+      "data-testid": `kibble-datepicker-day--${d.currentDay}`,
+      onClick: L,
+      onKeyDown: H,
+      onMouseEnter: z,
+      tabIndex: W,
+      ref: c,
+      unstyled: !0,
+      css: O.root,
+      children: [
+        p && /* @__PURE__ */ e.jsx(ne, { css: O.indicator }),
+        t
+      ]
+    }
+  );
+}, qe = ({
+  onDaySelected: t
+}) => {
+  const o = _(null), { firstDayOfWeek: u, activeMonth: n } = j(), { days: c, weekdayLabels: s } = Pe({
+    year: n?.year || $,
+    month: n?.month !== void 0 ? n.month : Ye,
+    firstDayOfWeek: u
+  });
+  return /* @__PURE__ */ e.jsxs(
+    ne,
+    {
+      ref: o,
+      className: "DatePicker__Month",
+      "data-testid": "kibble-datepicker-month",
+      children: [
+        /* @__PURE__ */ e.jsx(A, { templateColumns: "repeat(7, 1fr)", my: 2, children: s.map((l) => /* @__PURE__ */ e.jsx(Ne, { children: /* @__PURE__ */ e.jsx(re, { children: /* @__PURE__ */ e.jsx(se, { size: "xs", variant: "subtle", children: l }) }) }, l)) }),
+        /* @__PURE__ */ e.jsx(A, { templateColumns: "repeat(7, 1fr)", children: c.map(
+          (l, D) => typeof l == "object" ? /* @__PURE__ */ e.jsx(
+            Qe,
+            {
+              date: l.date,
+              dayLabel: l.dayLabel,
+              onDaySelected: t
+            },
+            l.date.toString()
+          ) : /* @__PURE__ */ e.jsx("div", {}, D)
+        ) })
+      ]
+    }
+  );
+};
+function Xe() {
+  const { withDateRange: t, activeMonths: o, onClose: u } = j(), { setOpen: n } = J(), c = () => {
+    t || (n(!1), u());
+  };
+  return /* @__PURE__ */ e.jsx(
+    A,
+    {
+      className: "DatePicker__Calendar",
+      "data-testid": "kibble-datepicker-calendar",
+      gap: "0 64px",
+      px: 3,
+      py: 2,
+      children: o.map((s) => /* @__PURE__ */ e.jsx(
+        qe,
+        {
+          onDaySelected: c
+        },
+        `${s.year}-${s.month}`
+      ))
+    }
+  );
+}
+const ct = (t) => {
+  const {
+    footerProps: o,
+    hideFooter: u = !1,
+    inputProps: n,
+    withDateRange: c = !1
+  } = t;
+  return /* @__PURE__ */ e.jsxs(We, { ...t, children: [
+    /* @__PURE__ */ e.jsx(Te, { children: /* @__PURE__ */ e.jsx(Ve, { inputProps: n }) }),
+    /* @__PURE__ */ e.jsx(he, { children: /* @__PURE__ */ e.jsx(
+      Oe,
+      {
+        className: "DatePicker",
+        "data-testid": "kibble-datepicker",
+        children: /* @__PURE__ */ e.jsxs(
+          Re,
+          {
+            className: "DatePicker__Content",
+            "data-testid": "kibble-datepicker-content",
+            minW: "340px",
+            children: [
+              /* @__PURE__ */ e.jsx(_e, {}),
+              /* @__PURE__ */ e.jsxs(Be, { p: "0 !important", children: [
+                /* @__PURE__ */ e.jsx(Ke, {}),
+                /* @__PURE__ */ e.jsx(Xe, {}),
+                c && !u && /* @__PURE__ */ e.jsx(Je, { ...o })
+              ] })
+            ]
+          }
+        )
+      }
+    ) })
+  ] });
+};
+export {
+  ct as D,
+  ie as a
+};
+//# sourceMappingURL=datePicker.component-D1WtrZJd.js.map