@konstructio/ui 0.1.7 → 0.1.8

package/dist/components/DateRangePicker/components/CalendarPanel/components/TogetherModeCalendar/TogetherModeCalendar.js

@@ -1,56 +1,74 @@
-import { t as n } from "../../../../../../utils-DnIJruo0.js";
-import { calendarGridContainerVariants as P, calendarPanelVariants as W } from "../../CalendarPanel.variants.js";
-import { useTogetherCarousel as z } from "../../hooks/useTogetherCarousel.js";
-import { CalendarDivider as L } from "../CalendarDivider/CalendarDivider.js";
-import { CalendarMonth as R } from "../CalendarMonth/CalendarMonth.js";
-import { NavigationButton as d } from "../NavigationButton/NavigationButton.js";
-import { jsx as e, jsxs as S } from "react/jsx-runtime";
-import { motion as V } from "motion/react";
-var A = ({ className: m, calendarWidth: h = 550, ariaLabelCalendar: s = "Date range picker calendar", ariaLabelPrevMonth: c = "Previous month", ariaLabelNextMonth: f = "Next month", classNames: a, range: u, onRangeSelect: p, disabled: i, disabledMatcher: v, showOutsideDays: g, hideDisabledNavigation: o, canNavigatePrev: C, canNavigateNext: T, carouselProps: r }) => {
-  const { carouselRef: b, isAnimating: l, enableTransition: k, animateTransform: x, calendarHeight: D, carouselTotalWidth: y, monthsToRender: M, handlePrevMonth: N, handleNextMonth: B, getTransform: w } = z(r), $ = (t) => {
-    t && p({
-      from: t.from,
-      to: t.to
+import { t as a } from "../../../../../../utils-DnIJruo0.js";
+import { calendarGridContainerVariants as O, calendarPanelVariants as P } from "../../CalendarPanel.variants.js";
+import "../../../../../../constants-Cw00eFTQ.js";
+import { useTogetherCarousel as E } from "../../hooks/useTogetherCarousel.js";
+import { CalendarDivider as G } from "../CalendarDivider/CalendarDivider.js";
+import { CalendarMonth as I } from "../CalendarMonth/CalendarMonth.js";
+import { NavigationButton as v } from "../NavigationButton/NavigationButton.js";
+import { useLayoutEffect as V, useRef as _, useState as A } from "react";
+import { jsx as n, jsxs as F } from "react/jsx-runtime";
+import { motion as Y } from "motion/react";
+var q = ({ className: p, calendarWidth: g = 550, fluid: r = !1, ariaLabelCalendar: b = "Date range picker calendar", ariaLabelPrevMonth: C = "Previous month", ariaLabelNextMonth: T = "Next month", classNames: t, range: y, onRangeSelect: D, disabled: i, disabledMatcher: M, showOutsideDays: N, hideDisabledNavigation: s, canNavigatePrev: W, canNavigateNext: k, carouselProps: l }) => {
+  const d = _(null), [m, c] = A(null);
+  V(() => {
+    const e = d.current;
+    if (!r || !e) {
+      c(null);
+      return;
+    }
+    const o = () => c(e.clientWidth);
+    if (o(), typeof ResizeObserver > "u") return;
+    const f = new ResizeObserver(o);
+    return f.observe(e), () => f.disconnect();
+  }, [r]);
+  const h = r && m ? m : 259, { carouselRef: x, isAnimating: u, enableTransition: w, animateTransform: R, calendarHeight: B, carouselTotalWidth: z, monthsToRender: L, handlePrevMonth: S, handleNextMonth: $, getTransform: j } = E({
+    ...l,
+    monthWidth: h
+  }), H = (e) => {
+    e && D({
+      from: e.from,
+      to: e.to
     });
   };
-  return /* @__PURE__ */ e("div", {
-    className: n(W({ className: m }), a?.root),
-    children: /* @__PURE__ */ S("div", {
-      className: n(P(), "overflow-hidden relative justify-start!", a?.gridContainer),
-      style: { width: h },
+  return /* @__PURE__ */ n("div", {
+    className: a(P({ className: p }), t?.root),
+    children: /* @__PURE__ */ F("div", {
+      ref: d,
+      className: a(O(), "overflow-hidden relative justify-start!", r && "w-full", t?.gridContainer),
+      style: { width: r ? void 0 : g },
       children: [
-        /* @__PURE__ */ e(d, {
+        /* @__PURE__ */ n(v, {
           direction: "prev",
-          onClick: N,
+          onClick: S,
           disabled: i,
-          isAnimating: l,
-          canNavigate: C,
-          hideWhenDisabled: o,
-          className: n("absolute left-0 top-3 z-10", a?.navButton),
-          disabledClassName: a?.navButtonDisabled,
-          ariaLabel: c
+          isAnimating: u,
+          canNavigate: W,
+          hideWhenDisabled: s,
+          className: a("absolute left-0 top-3 z-10", t?.navButton),
+          disabledClassName: t?.navButtonDisabled,
+          ariaLabel: C
         }),
-        /* @__PURE__ */ e(d, {
+        /* @__PURE__ */ n(v, {
           direction: "next",
-          onClick: B,
+          onClick: $,
           disabled: i,
-          isAnimating: l,
-          canNavigate: T,
-          hideWhenDisabled: o,
-          className: n("absolute right-0 top-3 z-10", a?.navButton),
-          disabledClassName: a?.navButtonDisabled,
-          ariaLabel: f
+          isAnimating: u,
+          canNavigate: k,
+          hideWhenDisabled: s,
+          className: a("absolute right-0 top-3 z-10", t?.navButton),
+          disabledClassName: t?.navButtonDisabled,
+          ariaLabel: T
         }),
-        /* @__PURE__ */ e(L, { className: a?.divider }),
-        /* @__PURE__ */ e(V.div, {
-          ref: b,
-          className: n("flex gap-8", k && x && "konstruct-drp-carousel-transition"),
+        /* @__PURE__ */ n(G, { className: t?.divider }),
+        /* @__PURE__ */ n(Y.div, {
+          ref: x,
+          className: a("flex gap-8", w && R && "konstruct-drp-carousel-transition"),
           role: "application",
-          "aria-label": s,
+          "aria-label": b,
           initial: !1,
-          animate: { height: D },
+          animate: { height: B },
           transition: {
-            duration: r.animationDuration / 1e3,
+            duration: l.animationDuration / 1e3,
             ease: [
               0.25,
               0.1,
@@ -59,29 +77,30 @@ var A = ({ className: m, calendarWidth: h = 550, ariaLabelCalendar: s = "Date ra
             ]
           },
           style: {
-            "--konstruct-drp-animation-duration": `${r.animationDuration}ms`,
-            width: y,
-            transform: w(),
+            "--konstruct-drp-animation-duration": `${l.animationDuration}ms`,
+            width: z,
+            transform: j(),
             willChange: "transform"
           },
-          children: M.map((t, j) => /* @__PURE__ */ e(R, {
-            month: t,
-            range: u,
-            onRangeSelect: $,
+          children: L.map((e, o) => /* @__PURE__ */ n(I, {
+            month: e,
+            monthWidth: h,
+            range: y,
+            onRangeSelect: H,
             disabled: i,
-            disabledMatcher: v,
-            showOutsideDays: g,
+            disabledMatcher: M,
+            showOutsideDays: N,
             classNames: {
-              monthTitle: a?.monthTitle,
-              dayPicker: a?.dayPicker
+              monthTitle: t?.monthTitle,
+              dayPicker: t?.dayPicker
             }
-          }, `${t.getFullYear()}-${t.getMonth()}-${j}`))
+          }, `${e.getFullYear()}-${e.getMonth()}-${o}`))
         })
       ]
     })
   });
 };
-A.displayName = "TogetherModeCalendar";
+q.displayName = "TogetherModeCalendar";
 export {
-  A as TogetherModeCalendar
+  q as TogetherModeCalendar
 };

package/dist/components/DateRangePicker/components/CalendarPanel/constants/dayPickerClassNames.js

@@ -1,4 +1,4 @@
-import { s as e } from "../../../../../constants-YCGllWdf.js";
+import { s as e } from "../../../../../constants-Cw00eFTQ.js";
 export {
   e as createDayPickerClassNames
 };

package/dist/components/DateRangePicker/components/CalendarPanel/constants/index.js

@@ -1,5 +1,5 @@
 import { getMonthName as E } from "../../../utils/validation/validation.js";
-import { a as s, i as _, n as r, o as T, r as e, s as o, t } from "../../../../../constants-YCGllWdf.js";
+import { a as s, i as _, n as r, o as T, r as e, s as o, t } from "../../../../../constants-Cw00eFTQ.js";
 export {
   t as GAP_WIDTH,
   r as MONTH_HEADER_HEIGHT,

package/dist/components/DateRangePicker/components/CalendarPanel/hooks/index.js

@@ -1,5 +1,5 @@
 import { getMonthName as t } from "../../../utils/validation/validation.js";
-import { a as o, i as r, n as s, o as H, r as E, s as m, t as _ } from "../../../../../constants-YCGllWdf.js";
+import { a as o, i as r, n as s, o as H, r as E, s as m, t as _ } from "../../../../../constants-Cw00eFTQ.js";
 import { calculateCalendarHeight as T, getNextMonth as i, getPrevMonth as I, getWeeksInMonth as M } from "../utils/index.js";
 import { useTogetherCarousel as N } from "./useTogetherCarousel.js";
 import { useIndependentCarousel as h } from "./useIndependentCarousel.js";

package/dist/components/DateRangePicker/components/CalendarPanel/hooks/useIndependentCarousel.js

@@ -1,4 +1,4 @@
-import { r as W } from "../../../../../constants-YCGllWdf.js";
+import { r as W } from "../../../../../constants-Cw00eFTQ.js";
 import { calculateCalendarHeight as j, getNextMonth as m, getPrevMonth as h, getWeeksInMonth as k } from "../utils/index.js";
 import { useEffect as g, useMemo as p, useRef as L, useState as i } from "react";
 var Q = ({ displayedMonths: u, animationDuration: F, navigationMode: I }) => {

package/dist/components/DateRangePicker/components/CalendarPanel/hooks/useTogetherCarousel.js

@@ -1,32 +1,32 @@
-import { r as L } from "../../../../../constants-YCGllWdf.js";
-import { calculateCalendarHeight as X, getNextMonth as T, getPrevMonth as g, getWeeksInMonth as $ } from "../utils/index.js";
-import { useEffect as H, useMemo as j, useRef as E, useState as a } from "react";
-var Z = ({ displayedMonths: l, animationDuration: I, disabled: N, canNavigatePrev: S, canNavigateNext: b, navigationMode: W, numberOfMonths: F = 2, navigatePrevMonth: p, navigateNextMonth: v }) => {
-  const [n, c] = a(null), [e, u] = a(!1), [o, i] = a(!1), [C, P] = a(!0), [s, R] = a(l), f = E(null), _ = E(!0), q = 291, k = g(g(s[0])), M = g(s[0]), h = s[0], m = s[1], d = T(s[1]), G = T(T(s[1])), O = j(() => {
+import { r as X } from "../../../../../constants-Cw00eFTQ.js";
+import { calculateCalendarHeight as $, getNextMonth as T, getPrevMonth as g, getWeeksInMonth as j } from "../utils/index.js";
+import { useEffect as I, useMemo as z, useRef as S, useState as a } from "react";
+var y = ({ displayedMonths: l, animationDuration: N, disabled: F, canNavigatePrev: b, canNavigateNext: p, navigationMode: P, numberOfMonths: R = 2, monthWidth: W = 259, navigatePrevMonth: v, navigateNextMonth: C }) => {
+  const [n, c] = a(null), [e, u] = a(!1), [o, i] = a(!1), [k, _] = a(!0), [s, q] = a(l), f = S(null), D = S(!0), M = W + 32, G = g(g(s[0])), x = g(s[0]), m = s[0], h = s[1], d = T(s[1]), O = T(T(s[1])), w = z(() => {
     let t;
-    e && n === "left" ? t = [m, d] : e && n === "right" ? t = [M, h] : t = [h, m];
-    const r = t.slice(0, F), A = Math.max(...r.map($));
-    return X(A);
+    e && n === "left" ? t = [h, d] : e && n === "right" ? t = [x, m] : t = [m, h];
+    const r = t.slice(0, R), H = Math.max(...r.map(j));
+    return $(H);
   }, [
     e,
     n,
-    h,
     m,
+    h,
     d,
-    M,
-    F
-  ]), w = 6 * 259 + 160, x = -2 * 291;
-  return H(() => {
-    if (W !== "independent") {
-      if (_.current) {
-        _.current = !1;
+    x,
+    R
+  ]), L = 6 * W + 160, A = -2 * M;
+  return I(() => {
+    if (P !== "independent") {
+      if (D.current) {
+        D.current = !1;
         return;
       }
       if (!e) {
         const t = s[0].getTime(), r = l[0].getTime();
         if (t !== r) {
-          const A = r - t, D = Math.round(A / L);
-          Math.abs(D) === 1 ? (c(D > 0 ? "left" : "right"), u(!0), i(!1)) : R(l);
+          const H = r - t, E = Math.round(H / X);
+          Math.abs(E) === 1 ? (c(E > 0 ? "left" : "right"), u(!0), i(!1)) : q(l);
         }
       }
     }
@@ -34,8 +34,8 @@ var Z = ({ displayedMonths: l, animationDuration: I, disabled: N, canNavigatePre
     l,
     s,
     e,
-    W
-  ]), H(() => {
+    P
+  ]), I(() => {
     e && !o && n && (f.current && f.current.offsetHeight, requestAnimationFrame(() => {
       i(!0);
     }));
@@ -43,51 +43,51 @@ var Z = ({ displayedMonths: l, animationDuration: I, disabled: N, canNavigatePre
     e,
     o,
     n
-  ]), H(() => {
+  ]), I(() => {
     if (e && o) {
       const t = setTimeout(() => {
-        P(!1), requestAnimationFrame(() => {
-          f.current && f.current.offsetHeight, R((r) => n === "left" ? [r[1], T(r[1])] : [g(r[0]), r[0]]), u(!1), c(null), i(!1), requestAnimationFrame(() => {
+        _(!1), requestAnimationFrame(() => {
+          f.current && f.current.offsetHeight, q((r) => n === "left" ? [r[1], T(r[1])] : [g(r[0]), r[0]]), u(!1), c(null), i(!1), requestAnimationFrame(() => {
             requestAnimationFrame(() => {
-              P(!0);
+              _(!0);
             });
           });
         });
-      }, I);
+      }, N);
       return () => clearTimeout(t);
     }
   }, [
     e,
     o,
-    I,
+    N,
     n
   ]), {
     carouselRef: f,
     isAnimating: e,
-    enableTransition: C,
+    enableTransition: k,
     animateTransform: o,
-    calendarHeight: O,
-    carouselTotalWidth: w,
+    calendarHeight: w,
+    carouselTotalWidth: L,
     monthsToRender: [
-      k,
-      M,
-      h,
+      G,
+      x,
       m,
+      h,
       d,
-      G
+      O
     ],
     handlePrevMonth: () => {
-      e || N || !S || (c("right"), u(!0), i(!1), p());
+      e || F || !b || (c("right"), u(!0), i(!1), v());
     },
     handleNextMonth: () => {
-      e || N || !b || (c("left"), u(!0), i(!1), v());
+      e || F || !p || (c("left"), u(!0), i(!1), C());
     },
     getTransform: () => {
-      let t = x;
-      return e && o && (n === "left" ? t = x - q : n === "right" && (t = x + q)), `translateX(${t}px)`;
+      let t = A;
+      return e && o && (n === "left" ? t = A - M : n === "right" && (t = A + M)), `translateX(${t}px)`;
     }
   };
 };
 export {
-  Z as useTogetherCarousel
+  y as useTogetherCarousel
 };

package/dist/components/DateRangePicker/components/CalendarPanel/utils/index.js

@@ -1,4 +1,4 @@
-import "../../../../../constants-YCGllWdf.js";
+import "../../../../../constants-Cw00eFTQ.js";
 var E = (t) => {
   const e = t.getFullYear(), a = t.getMonth(), n = new Date(e, a, 1), r = new Date(e, a + 1, 0), o = n.getDay() + r.getDate();
   return Math.ceil(o / 7);

package/dist/components/DateRangePicker/components/DateTimeInputs/DateTimeInputs.js

@@ -1,70 +1,74 @@
-import { t as w } from "../../../../utils-DnIJruo0.js";
-import { useDateRangePicker as H } from "../../contexts/date-range-picker/date-range-picker.hook.js";
-import { EndInputFields as P } from "./components/EndInputFields/EndInputFields.js";
-import { StartInputFields as R } from "./components/StartInputFields/StartInputFields.js";
-import { dateTimeInputsVariants as $ } from "./DateTimeInputs.variants.js";
-import { useDateTimeInputs as q } from "./hooks/useDateTimeInputs.js";
-import { Fragment as M, jsx as e, jsxs as u } from "react/jsx-runtime";
-var O = ({ autoComplete: r, className: s, labelStartDate: D = "Start date", labelEndDate: h = "End date", labelTime: d = "Time", requiredDates: i = !1, ariaLabelStartDate: p = "Start date", ariaLabelEndDate: c = "End date", errorInvalidDate: g = "Invalid date", errorDateNotAvailable: T = "Date is not available", classNames: a }) => {
-  const { numberOfMonths: f } = H(), { timeFormat: o, showTime: t, name: n, disabled: l, time: m, startDateValue: E, startDateError: V, handleStartDateFocus: F, handleStartDateChange: C, handleStartDateBlur: I, handleStartTimeChange: S, endDateValue: b, endDateError: v, handleEndDateFocus: y, handleEndDateChange: B, handleEndDateBlur: L, handleEndTimeChange: k, startHiddenValue: x, endHiddenValue: j } = q({
-    errorInvalidDate: g,
-    errorDateNotAvailable: T
-  });
-  return /* @__PURE__ */ u("div", {
-    className: w($({
-      layout: f === 2 ? "row" : t ? "stacked" : "compact",
-      className: s
-    }), a?.root),
+import { t as n } from "../../../../utils-DnIJruo0.js";
+import { useDateRangePicker as W } from "../../contexts/date-range-picker/date-range-picker.hook.js";
+import { EndInputFields as $ } from "./components/EndInputFields/EndInputFields.js";
+import { StartInputFields as q } from "./components/StartInputFields/StartInputFields.js";
+import { dateTimeInputsVariants as M } from "./DateTimeInputs.variants.js";
+import { useDateTimeInputs as N } from "./hooks/useDateTimeInputs.js";
+import { Fragment as O, jsx as a, jsxs as D } from "react/jsx-runtime";
+var z = ({ autoComplete: d, className: h, labelStartDate: c = "Start date", labelEndDate: f = "End date", labelTime: i = "Time", requiredDates: o = !1, ariaLabelStartDate: g = "Start date", ariaLabelEndDate: T = "End date", errorInvalidDate: E = "Invalid date", errorDateNotAvailable: V = "Date is not available", classNames: e }) => {
+  const { fluid: l, numberOfMonths: C } = W(), { timeFormat: u, showTime: t, name: r, disabled: m, time: s, startDateValue: F, startDateError: I, handleStartDateFocus: S, handleStartDateChange: b, handleStartDateBlur: v, handleStartTimeChange: w, endDateValue: y, endDateError: x, handleEndDateFocus: B, handleEndDateChange: k, handleEndDateBlur: L, handleEndTimeChange: j, startHiddenValue: H, endHiddenValue: P } = N({
+    errorInvalidDate: E,
+    errorDateNotAvailable: V
+  }), R = () => C === 2 ? "row" : t ? "stacked" : "compact", p = l ? {
+    ...e,
+    group: n("w-full", e?.group),
+    dateWrapper: n("w-auto flex-1", e?.dateWrapper)
+  } : e;
+  return /* @__PURE__ */ D("div", {
+    className: n(M({
+      layout: R(),
+      className: h
+    }), l && "w-full", e?.root),
     children: [
-      /* @__PURE__ */ e(R, {
-        autoComplete: r,
-        dateValue: E,
-        timeValue: m.startTime,
-        error: V,
-        disabled: l,
+      /* @__PURE__ */ a(q, {
+        autoComplete: d,
+        dateValue: F,
+        timeValue: s.startTime,
+        error: I,
+        disabled: m,
         showTime: t,
-        timeFormat: o,
-        labelDate: D,
-        labelTime: d,
-        required: i,
-        ariaLabelDate: p,
-        onDateChange: C,
-        onDateFocus: F,
-        onDateBlur: I,
-        onTimeChange: S,
-        classNames: a
+        timeFormat: u,
+        labelDate: c,
+        labelTime: i,
+        required: o,
+        ariaLabelDate: g,
+        onDateChange: b,
+        onDateFocus: S,
+        onDateBlur: v,
+        onTimeChange: w,
+        classNames: p
       }),
-      /* @__PURE__ */ e(P, {
-        autoComplete: r,
-        dateValue: b,
-        timeValue: m.endTime,
-        error: v,
-        disabled: l,
+      /* @__PURE__ */ a($, {
+        autoComplete: d,
+        dateValue: y,
+        timeValue: s.endTime,
+        error: x,
+        disabled: m,
         showTime: t,
-        timeFormat: o,
-        labelDate: h,
-        labelTime: d,
-        required: i,
-        ariaLabelDate: c,
-        onDateChange: B,
-        onDateFocus: y,
+        timeFormat: u,
+        labelDate: f,
+        labelTime: i,
+        required: o,
+        ariaLabelDate: T,
+        onDateChange: k,
+        onDateFocus: B,
         onDateBlur: L,
-        onTimeChange: k,
-        classNames: a
+        onTimeChange: j,
+        classNames: p
       }),
-      n && /* @__PURE__ */ u(M, { children: [/* @__PURE__ */ e("input", {
+      r && /* @__PURE__ */ D(O, { children: [/* @__PURE__ */ a("input", {
         type: "hidden",
-        name: `${n}-start`,
-        value: x
-      }), /* @__PURE__ */ e("input", {
+        name: `${r}-start`,
+        value: H
+      }), /* @__PURE__ */ a("input", {
         type: "hidden",
-        name: `${n}-end`,
-        value: j
+        name: `${r}-end`,
+        value: P
       })] })
     ]
   });
 };
-O.displayName = "DateRangePickerDateTimeInputs";
+z.displayName = "DateRangePickerDateTimeInputs";
 export {
-  O as DateTimeInputs
+  z as DateTimeInputs
 };

package/dist/components/DateRangePicker/components/PresetPanel/PresetPanel.variants.js

@@ -1,5 +1,5 @@
 import { t as e } from "../../../../dist-B9GE4SXf.js";
-var t = e([
+var r = e([
   "flex",
   "flex-col",
   "gap-2.5",
@@ -8,14 +8,17 @@ var t = e([
   "px-2.5",
   "border-r",
   "transition-colors",
-  "w-[206px]"
+  "w-[206px]",
+  "max-lg:w-full",
+  "max-lg:border-r-0",
+  "max-lg:border-b"
 ], {
   variants: { divided: {
     true: ["border-slate-200", "dark:border-metal-700"],
     false: ["border-transparent"]
   } },
   defaultVariants: { divided: !0 }
-}), r = e([
+}), t = e([
   "px-3.5",
   "text-xs",
   "font-medium",
@@ -24,7 +27,7 @@ var t = e([
   "dark:text-metal-300",
   "tracking-[0.25px]",
   "leading-4"
-]), s = e([
+]), l = e([
   "group",
   "relative",
   "flex",
@@ -49,13 +52,17 @@ var t = e([
     disabled: !1,
     active: !1
   }
-}), l = e([
+}), s = e([
   "shrink-0",
   "transition-transform",
   "duration-300"
 ], {
   variants: { expanded: {
-    true: ["rotate-180", "text-aurora-500"],
+    true: [
+      "rotate-180",
+      "max-lg:rotate-90",
+      "text-aurora-500"
+    ],
     false: [
       "text-slate-400",
       "dark:text-metal-400",
@@ -63,13 +70,13 @@ var t = e([
     ]
   } },
   defaultVariants: { expanded: !1 }
-}), i = e([
+}), o = e([
   "flex",
   "w-full",
   "items-center",
   "justify-between",
   "gap-2"
-]), o = e([
+]), i = e([
   "mt-4",
   "before:content-['']",
   "before:absolute",
@@ -81,10 +88,10 @@ var t = e([
   "dark:before:bg-metal-700"
 ]);
 export {
-  l as presetChevronVariants,
-  i as presetOptionLabelVariants,
-  s as presetOptionVariants,
-  t as presetPanelVariants,
-  o as presetSeparatorVariants,
-  r as presetTitleVariants
+  s as presetChevronVariants,
+  o as presetOptionLabelVariants,
+  l as presetOptionVariants,
+  r as presetPanelVariants,
+  i as presetSeparatorVariants,
+  t as presetTitleVariants
 };

package/dist/components/DateRangePicker/components/RightPanel/RightPanel.js

@@ -1,37 +1,53 @@
-import { t as d } from "../../../../utils-DnIJruo0.js";
-import { useDateRangePicker as l } from "../../contexts/date-range-picker/date-range-picker.hook.js";
-import { hidesRightPanel as h } from "../../utils/right-panel/right-panel.js";
-import { jsx as e } from "react/jsx-runtime";
-import { AnimatePresence as p, motion as c } from "motion/react";
-var i = {
-  width: 0,
-  height: 0,
-  opacity: 0
-}, g = {
+import { t as c } from "../../../../utils-DnIJruo0.js";
+import { useDateRangePicker as R } from "../../contexts/date-range-picker/date-range-picker.hook.js";
+import { hidesRightPanel as x } from "../../utils/right-panel/right-panel.js";
+import { useLayoutEffect as v, useRef as a } from "react";
+import { Fragment as w, jsx as t, jsxs as P } from "react/jsx-runtime";
+import { AnimatePresence as C, motion as D } from "motion/react";
+var N = {
   width: "auto",
   height: "auto",
   opacity: 1
-}, u = ({ children: a, className: t }) => {
-  const { animationDuration: n, preset: r, presets: o, revealCalendarOnCustom: s } = l(), m = h(r, o, s);
-  return /* @__PURE__ */ e(p, {
+}, j = ({ children: d, className: m }) => {
+  const { animationDuration: p, fluid: r, preset: u, presets: f, revealCalendarOnCustom: h } = R(), o = a(null), s = a(null), n = a(0), g = x(u, f, h);
+  v(() => {
+    const i = o.current?.parentElement, e = s.current;
+    if (!i || getComputedStyle(i).flexDirection !== "column") {
+      n.current = 0;
+      return;
+    }
+    const y = e?.style.display ?? "";
+    e && (e.style.display = "none"), n.current = i.getBoundingClientRect().width, e && (e.style.display = y);
+  });
+  const l = {
+    width: n.current,
+    height: 0,
+    opacity: 0
+  };
+  return /* @__PURE__ */ P(w, { children: [/* @__PURE__ */ t("span", {
+    ref: o,
+    "aria-hidden": "true",
+    className: "hidden"
+  }), /* @__PURE__ */ t(C, {
     initial: !1,
-    children: !m && /* @__PURE__ */ e(c.div, {
-      className: "overflow-hidden",
-      initial: i,
-      animate: g,
-      exit: i,
+    children: !g && /* @__PURE__ */ t(D.div, {
+      ref: s,
+      className: c("overflow-hidden", r && "flex-1"),
+      initial: l,
+      animate: N,
+      exit: l,
       transition: {
-        duration: n / 1e3,
+        duration: p / 1e3,
         ease: "easeInOut"
       },
-      children: /* @__PURE__ */ e("div", {
-        className: d(t, "w-max"),
-        children: a
+      children: /* @__PURE__ */ t("div", {
+        className: c(m, r ? "w-full" : "w-max"),
+        children: d
       })
     }, "right-panel")
-  });
+  })] });
 };
-u.displayName = "DateRangePickerRightPanel";
+j.displayName = "DateRangePickerRightPanel";
 export {
-  u as RightPanel
+  j as RightPanel
 };