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

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

@@ -1,751 +0,0 @@
-import { x as e, bR as $, bP as pe } from "./vendor-D56wCYP8.js";
-import { createContext as he, useContext as fe, useState as be, useCallback as C, useMemo as F, useEffect as ge, useRef as _ } from "react";
-import { a as xe, Y as ke, b as oe, s as ye, e as ve, c as Se, f as M, U as X, x as je, d as we, g as Z, N as Ce, h as Me } from "./date-1NFv48Qu.js";
-import { aT as Pe, K as J, F as q, aU as re, d as Fe, O as Ee, B as ne, aV as L, aW as Ie, aX as Ne, aY as Te, aZ as Oe, a_ as Re, a$ as _e } from "./chakra-LFfg7ED-.js";
-import { W as Q } from "./textInput.component-BDqq9iRh.js";
-import { I as ee } from "./icon.component-ADHJf_mk.js";
-import { W as se } from "./text.component-Dz-V2uze.js";
-import { B as E } from "./button.component-SfKkS7VY.js";
-import { M as te } from "./menu.component-DvzXmK6W.js";
-import { r as Be } from "./utils-BzdzS6au.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(), K = g.getFullYear(), Ye = g.getMonth(), He = g, ce = K - 100, le = K + 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 = he(
-  ze
-), j = () => fe(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] = be({
-    startDate: h,
-    endDate: u || h,
-    focusedInput: null
-  }), m = C(
-    (a) => {
-      if (s && a)
-        return xe(a, { days: s });
-      if (c)
-        return c;
-    },
-    [c, s]
-  ), k = (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 ? ye(a.startDate) : a.startDate, a.endDate = a.endDate ? ve(a.endDate) : a.endDate, i({
-      ...a,
-      focusedInput: a.focusedInput || f.StartDate
-    }), !p && d && d(a);
-  }, y = C(({ open: a }) => {
-    i({
-      startDate: null,
-      endDate: null,
-      focusedInput: a ? f.StartDate : null
-    });
-  }, []), {
-    activeMonths: v,
-    firstDayOfWeek: S,
-    focusedDate: B,
-    goToDate: w,
-    goToNextMonths: I,
-    goToPreviousMonths: N,
-    isDateBlocked: Y,
-    isDateFocused: H,
-    isDateHovered: z,
-    isDateSelected: W,
-    isFirstOrLastSelectedDate: T,
-    onDateFocus: U,
-    onDateHover: O,
-    onDateSelect: A
-  } = 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: k,
-    startDate: r.startDate,
-    ...!p && { exactMinBookingDays: !0 }
-  }), G = C(
-    (a) => {
-      a === f.EndDate && r.endDate ? w(r.endDate) : r.startDate && w(r.startDate);
-    },
-    [w, r.endDate, r.startDate]
-  ), P = C(
-    (a) => {
-      i((R) => ({ ...R, focusedInput: a })), G(a);
-    },
-    [G]
-  ), ue = () => {
-    n?.disabled || (!r.startDate || !p) && P(f.StartDate);
-  }, De = C(() => {
-    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 ge(() => {
-    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: w,
-        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: U,
-        onDateHover: O,
-        onDateSelect: A,
-        startDate: r.startDate,
-        onClose: De,
-        clearDates: y
-      },
-      children: /* @__PURE__ */ e.jsx(
-        Pe,
-        {
-          onOpenChange: ({ open: a }) => {
-            a ? ue() : P(null);
-          },
-          positioning: { placement: x },
-          variant: "default",
-          children: t
-        }
-      )
-    }
-  );
-}, Ae = (t, o) => o ? oe(t, o) : !0, Le = (t, o) => o ? Se(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 } = $(), i = t?.size || "md", m = (y) => {
-    y.key === "Enter" && p && (r(!1), h(), y.preventDefault(), y.stopPropagation());
-  }, k = (y) => {
-    const v = y.target.value, S = je(v, s, g);
-    v.length === s.length && we(S) && Ae(S, D) && Le(S, b) && x(S), !v.length && d && d({ startDate: null, endDate: null });
-  };
-  return /* @__PURE__ */ e.jsxs(
-    J,
-    {
-      w: "100%",
-      className: "DatePicker__Trigger",
-      "data-testid": "kibble-datepicker-trigger",
-      children: [
-        /* @__PURE__ */ e.jsx(
-          Q,
-          {
-            className: "DatePicker__Input--Start",
-            "data-testid": "kibble-datepicker-input-start",
-            autoComplete: "off",
-            rightElement: /* @__PURE__ */ e.jsx(
-              q,
-              {
-                ...!t?.disabled && {
-                  onClick: () => o(f.StartDate)
-                },
-                h: "100%",
-                align: "center",
-                children: /* @__PURE__ */ e.jsx(ee, { name: "calendarDate", size: i })
-              }
-            ),
-            value: X(u, s, ""),
-            onChange: k,
-            onKeyDown: m,
-            ...!t?.disabled && {
-              onFocus: () => {
-                o(f.StartDate);
-              }
-            },
-            placeholder: M(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(
-            Q,
-            {
-              className: "DatePicker__Input--End",
-              "data-testid": "kibble-datepicker-input-end",
-              rightElement: /* @__PURE__ */ e.jsx(
-                q,
-                {
-                  ...!t?.disabled && {
-                    onClick: () => o(f.StartDate)
-                  },
-                  h: "100%",
-                  align: "center",
-                  children: /* @__PURE__ */ e.jsx(ee, { name: "calendarDate", size: i })
-                }
-              ),
-              value: X(n, s, ""),
-              onChange: k,
-              ...!t?.disabled && {
-                onFocus: () => o(f.EndDate)
-              },
-              onKeyDown: m,
-              placeholder: M(g, s).toString(),
-              ...c === f.EndDate && {
-                "data-focus": !0
-              },
-              ...t
-            }
-          )
-        ] })
-      ]
-    }
-  );
-}
-function $e({
-  buttonText: t = "Apply",
-  onSubmit: o,
-  hideResetButton: u
-}) {
-  const { startDate: n, endDate: c, onClose: s, clearDates: l } = j(), { open: D, setOpen: b } = $(), d = C(() => {
-    b(!1), s(), o && o({ startDate: n, endDate: c });
-  }, [b, s, o, n, c]);
-  return /* @__PURE__ */ e.jsxs(
-    J,
-    {
-      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 Je() {
-  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(
-    () => Be(c, s + 1).map((i) => {
-      const m = String(i), k = i === n?.year;
-      return {
-        label: m,
-        value: m,
-        selected: k,
-        ...k && { ref: o }
-      };
-    }),
-    [n?.year, s, c]
-  ), h = (i) => l(
-    Z(u || g, {
-      month: Number(i),
-      year: n?.year
-    })
-  ), p = (i) => l(
-    Z(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(
-    J,
-    {
-      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 Ke = ["root", "indicator"], Ue = {
-  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"
-      }
-    }
-  }
-}, Ge = Fe({
-  slots: Ke,
-  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: Ue,
-    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: {}
-}), Xe = ({
-  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: M(o, D),
-      startDate: s && M(s, D),
-      endDate: l && M(l, D)
-    }),
-    [o, D, l, s]
-  ), x = d.currentDay === d.startDate, h = d.currentDay === d.endDate, p = d.currentDay === M(n, D), {
-    focusedDate: r,
-    isDateFocused: i,
-    isDateSelected: m,
-    isDateHovered: k,
-    isDateBlocked: y,
-    isFirstOrLastSelectedDate: v,
-    onDateSelect: S,
-    onDateFocus: B,
-    onDateHover: w
-  } = j(), {
-    disabledDate: I,
-    isSelected: N,
-    onClick: Y,
-    onKeyDown: H,
-    onMouseEnter: z,
-    tabIndex: W
-  } = Ce({
-    date: o,
-    focusedDate: r,
-    isDateFocused: i,
-    isDateSelected: m,
-    isDateHovered: k,
-    isDateBlocked: y,
-    isFirstOrLastSelectedDate: v,
-    onDateFocus: B,
-    onDateSelect: S,
-    onDateHover: w
-  }), 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 = Ee({ recipe: Ge })({ variant: T, isToday: p, withDateRange: b });
-  if (!t)
-    return /* @__PURE__ */ e.jsx(e.Fragment, {});
-  const A = () => {
-    T !== "disabled" && (Y(), u());
-  };
-  return /* @__PURE__ */ e.jsxs(
-    E,
-    {
-      className: "DatePicker__Day",
-      "data-testid": `kibble-datepicker-day--${d.currentDay}`,
-      onClick: A,
-      onKeyDown: H,
-      onMouseEnter: z,
-      tabIndex: W,
-      ref: c,
-      unstyled: !0,
-      css: O.root,
-      children: [
-        p && /* @__PURE__ */ e.jsx(ne, { css: O.indicator }),
-        t
-      ]
-    }
-  );
-}, Ze = ({
-  onDaySelected: t
-}) => {
-  const o = _(null), { firstDayOfWeek: u, activeMonth: n } = j(), { days: c, weekdayLabels: s } = Me({
-    year: n?.year || K,
-    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(L, { templateColumns: "repeat(7, 1fr)", my: 2, children: s.map((l) => /* @__PURE__ */ e.jsx(Ie, { children: /* @__PURE__ */ e.jsx(re, { children: /* @__PURE__ */ e.jsx(se, { size: "xs", variant: "subtle", children: l }) }) }, l)) }),
-        /* @__PURE__ */ e.jsx(L, { templateColumns: "repeat(7, 1fr)", children: c.map(
-          (l, D) => typeof l == "object" ? /* @__PURE__ */ e.jsx(
-            Xe,
-            {
-              date: l.date,
-              dayLabel: l.dayLabel,
-              onDaySelected: t
-            },
-            l.date.toString()
-          ) : /* @__PURE__ */ e.jsx("div", {}, D)
-        ) })
-      ]
-    }
-  );
-};
-function qe() {
-  const { withDateRange: t, activeMonths: o, onClose: u } = j(), { setOpen: n } = $(), c = () => {
-    t || (n(!1), u());
-  };
-  return /* @__PURE__ */ e.jsx(
-    L,
-    {
-      className: "DatePicker__Calendar",
-      "data-testid": "kibble-datepicker-calendar",
-      gap: "0 64px",
-      px: 3,
-      py: 2,
-      children: o.map((s) => /* @__PURE__ */ e.jsx(
-        Ze,
-        {
-          onDaySelected: c
-        },
-        `${s.year}-${s.month}`
-      ))
-    }
-  );
-}
-const lt = (t) => {
-  const {
-    footerProps: o,
-    hideFooter: u = !1,
-    inputProps: n,
-    withDateRange: c = !1
-  } = t;
-  return /* @__PURE__ */ e.jsxs(We, { ...t, children: [
-    /* @__PURE__ */ e.jsx(Ne, { children: /* @__PURE__ */ e.jsx(Ve, { inputProps: n }) }),
-    /* @__PURE__ */ e.jsx(pe, { children: /* @__PURE__ */ e.jsx(
-      Te,
-      {
-        className: "DatePicker",
-        "data-testid": "kibble-datepicker",
-        children: /* @__PURE__ */ e.jsxs(
-          Oe,
-          {
-            className: "DatePicker__Content",
-            "data-testid": "kibble-datepicker-content",
-            minW: "340px",
-            children: [
-              /* @__PURE__ */ e.jsx(Re, {}),
-              /* @__PURE__ */ e.jsxs(_e, { p: "0 !important", children: [
-                /* @__PURE__ */ e.jsx(Je, {}),
-                /* @__PURE__ */ e.jsx(qe, {}),
-                c && !u && /* @__PURE__ */ e.jsx($e, { ...o })
-              ] })
-            ]
-          }
-        )
-      }
-    ) })
-  ] });
-};
-export {
-  lt as D,
-  ie as a,
-  ae as m
-};
-//# sourceMappingURL=datePicker.component-C4iV32uQ.js.map