@new-black/lyra 1.0.30 → 1.0.32

package/dist/lyra25.js

@@ -1,99 +1,113 @@
 import { j as e } from "./lyra90.js";
-import { useContext as v, useCallback as N, useRef as T } from "react";
-import { useContextProps as Y, DateRangePickerContext as O, DateRangePicker as q, Group as B, RangeCalendar as K, RangeCalendarStateContext as _, Button as C, CalendarGrid as F, DateRangePickerStateContext as z, DateInput as S, DateSegment as k, CalendarGridBody as A, CalendarCell as J } from "./lyra89.js";
+import { useMemo as S, useContext as Y, useCallback as D, useRef as z } from "react";
+import { useContextProps as A, DateRangePickerContext as J, DateRangePicker as Q, Group as O, RangeCalendar as U, RangeCalendarStateContext as W, Button as C, CalendarGrid as v, DateRangePickerStateContext as X, DateInput as I, DateSegment as M, CalendarGridBody as Z, CalendarCell as H } from "./lyra89.js";
 import { fixedForwardRef as L } from "./lyra93.js";
-import { useDictionary as Q } from "./lyra95.js";
-import { Popover as U } from "./lyra53.js";
+import { useDictionary as ee } from "./lyra95.js";
+import { Popover as se } from "./lyra53.js";
 import "./lyra54.js";
 import "./lyra55.js";
 import "./lyra56.js";
-import { Separator as R } from "./lyra57.js";
+import { Separator as G } from "./lyra57.js";
 import "./lyra58.js";
 import { SvgIcon as P } from "./lyra65.js";
-import { Tooltip as X } from "./lyra75.js";
-import { InputHeader as Z } from "./lyra38.js";
-import { InputFooter as W } from "./lyra39.js";
-import { sharedInputStyles as V } from "./lyra40.js";
-import { datePickerHeaderStyles as ee, dateFieldStyles as se, dataPickerCalendarGridStyles as te } from "./lyra24.js";
-import { MonthPicker as M, YearPicker as E, DatePickerCalendarGridHeader as G } from "./lyra610.js";
-const ae = ({
-  className: h,
-  description: l,
-  errorMessage: n,
-  fullWidth: i = !0,
-  granularity: f = "day",
-  hideHintLabel: o,
-  hideInputFooter: s,
-  hideInputHeader: p,
-  label: y,
-  startSlot: j,
-  ...m
-}, u) => {
-  [m, u] = Y(m, u, O);
-  const { isInvalid: g, isRequired: t } = m, { wrapper: a } = V({
-    fullWidth: i,
-    hasStartSlot: !!j,
-    hasEndSlot: !0
+import { Tooltip as te } from "./lyra75.js";
+import { InputHeader as ae } from "./lyra38.js";
+import { InputFooter as ne } from "./lyra39.js";
+import { sharedInputStyles as q } from "./lyra40.js";
+import { shouldRenderInputHeader as K, shouldRenderInputFooter as re } from "./lyra610.js";
+import { datePickerHeaderStyles as oe, dateFieldStyles as de, dataPickerCalendarGridStyles as ce } from "./lyra24.js";
+import { MonthPicker as E, YearPicker as B, DatePickerCalendarGridHeader as V } from "./lyra611.js";
+const le = ({
+  className: x,
+  description: h,
+  disableClearLogic: n,
+  errorMessage: p,
+  fullWidth: c = !0,
+  granularity: o = "day",
+  hideHintLabel: s,
+  hideInputFooter: i,
+  hideInputHeader: y,
+  label: m,
+  outerEndSlot: j,
+  outerStartSlot: $,
+  startSlot: g,
+  ...t
+}, a) => {
+  [t, a] = A(t, a, J);
+  const { isInvalid: f, isRequired: w } = t, F = S(
+    () => K({ hideHintLabel: s, hideInputHeader: y, label: m }),
+    [s, y, m]
+  ), { outerSlot: b, outerSlotsWrapper: k, wrapper: R } = q({
+    fullWidth: c,
+    hasStartSlot: !!g,
+    hasEndSlot: !0,
+    hasInputHeader: F,
+    hasLabel: !!m
   });
-  return /* @__PURE__ */ e.jsx(
-    q,
-    {
-      ...m,
-      granularity: f,
-      className: (c) => a({
-        className: h,
-        isDisabled: c.isDisabled
-      }),
-      isInvalid: g,
-      ref: u,
-      children: ({ isDisabled: c, state: $ }) => /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-        /* @__PURE__ */ e.jsx(B, { children: /* @__PURE__ */ e.jsx(
-          oe,
-          {
-            description: l,
-            fullWidth: i,
-            errorMessage: n,
-            hideHintLabel: o,
-            hideInputFooter: s,
-            hideInputHeader: p,
-            isDisabled: c,
-            isRequired: t,
-            label: y,
-            startSlot: j,
-            onKeyDown: (D) => {
-              var r, b;
-              D.key === "Escape" && ((r = $.value) != null && r.end) && ((b = $.value) != null && b.start) && !c && (D.preventDefault(), $.setValue(null));
+  return /* @__PURE__ */ e.jsxs("div", { className: k(), children: [
+    $ ? /* @__PURE__ */ e.jsx("div", { className: b(), children: $ }) : null,
+    /* @__PURE__ */ e.jsx(
+      Q,
+      {
+        ...t,
+        granularity: o,
+        className: (r) => R({
+          className: x,
+          isDisabled: r.isDisabled
+        }),
+        isInvalid: f,
+        ref: a,
+        children: ({ isDisabled: r, state: u }) => /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+          /* @__PURE__ */ e.jsx(O, { children: /* @__PURE__ */ e.jsx(
+            fe,
+            {
+              description: h,
+              fullWidth: c,
+              errorMessage: p,
+              hideHintLabel: s,
+              hideInputFooter: i,
+              hideInputHeader: y,
+              isDisabled: r,
+              isRequired: w,
+              label: m,
+              startSlot: g,
+              onKeyDown: (d) => {
+                var l, N;
+                d.key === "Escape" && ((l = u.value) != null && l.end) && ((N = u.value) != null && N.start) && !r && !n && (d.preventDefault(), u.setValue(null));
+              },
+              disableClearLogic: n
             }
-          }
-        ) }),
-        /* @__PURE__ */ e.jsx(U, { disablePadding: !0, className: "group", children: /* @__PURE__ */ e.jsx(K, { visibleDuration: { months: 2 }, pageBehavior: "single", children: /* @__PURE__ */ e.jsx(re, {}) }) })
-      ] })
-    }
-  );
-}, re = () => {
-  const { buttons: h } = ee(), {
-    anchorDate: l,
+          ) }),
+          /* @__PURE__ */ e.jsx(se, { disablePadding: !0, className: "group", children: /* @__PURE__ */ e.jsx(U, { visibleDuration: { months: 2 }, pageBehavior: "single", children: /* @__PURE__ */ e.jsx(ie, {}) }) })
+        ] })
+      }
+    ),
+    j ? /* @__PURE__ */ e.jsx("div", { className: b(), children: j }) : null
+  ] });
+}, ie = () => {
+  const { buttons: x } = oe(), {
+    anchorDate: h,
     focusedDate: n,
-    focusNextPage: i,
-    focusPreviousPage: f,
+    focusNextPage: p,
+    focusPreviousPage: c,
     setFocusedDate: o,
     visibleRange: s
-  } = v(_), p = (t) => t === 12 ? 1 : t + 1, y = (t) => t === 1 ? 12 : t - 1, j = N(
+  } = Y(W), i = (t) => t === 12 ? 1 : t + 1, y = (t) => t === 1 ? 12 : t - 1, m = D(
     (t) => {
       if (t === s.start.month - 1)
-        f();
+        c();
       else if (t === s.start.month + 1)
-        i();
+        p();
       else {
-        const a = t < s.start.month ? p(t) : t, c = s.start.copy().set({
+        const a = t < s.start.month ? i(t) : t, f = s.start.copy().set({
           month: a,
           day: n.day
         });
-        o(c);
+        o(f);
       }
     },
-    [i, f, n.day, o, s.start]
-  ), m = N(
+    [p, c, n.day, o, s.start]
+  ), j = D(
     (t) => {
       if (s.start.year !== s.end.year) {
         if (t < s.start.year) {
@@ -113,31 +127,31 @@ const ae = ({
           o(a);
         }
       } else {
-        const a = t < s.start.year ? p(s.start.month) : s.start.month, c = s.start.copy().set({
+        const a = t < s.start.year ? i(s.start.month) : s.start.month, f = s.start.copy().set({
           year: t,
           day: n.day,
           month: a
         });
-        o(c);
+        o(f);
       }
     },
     [n.day, o, s.end.year, s.start]
-  ), u = N(
+  ), $ = D(
     (t) => {
       if (t === s.end.month - 1)
-        f();
+        c();
       else if (t === s.end.month + 1)
-        i();
+        p();
       else {
-        const a = t > s.end.month ? y(t) : t, c = s.end.copy().set({
+        const a = t > s.end.month ? y(t) : t, f = s.end.copy().set({
           month: a,
           day: n.day
         });
-        o(c);
+        o(f);
       }
     },
-    [i, f, n.day, o, s.end]
-  ), g = N(
+    [p, c, n.day, o, s.end]
+  ), g = D(
     (t) => {
       if (s.start.year !== s.end.year) {
         if (t < s.end.year) {
@@ -157,12 +171,12 @@ const ae = ({
           o(a);
         }
       } else {
-        const a = t > s.end.year ? y(s.end.month) : s.end.month, c = s.end.copy().set({
+        const a = t > s.end.year ? y(s.end.month) : s.end.month, f = s.end.copy().set({
           year: t,
           day: n.day,
           month: a
         });
-        o(c);
+        o(f);
       }
     },
     [n.day, o, s.end, s.start.year]
@@ -170,111 +184,111 @@ const ae = ({
   return /* @__PURE__ */ e.jsx(e.Fragment, { children: /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-3 p-3 sm:flex-row", children: [
     /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-3", children: [
       /* @__PURE__ */ e.jsxs("div", { className: "flex justify-between gap-1", children: [
-        /* @__PURE__ */ e.jsx(C, { slot: "previous", className: h(), children: /* @__PURE__ */ e.jsx(P, { name: "chevron-left" }) }),
+        /* @__PURE__ */ e.jsx(C, { slot: "previous", className: x(), children: /* @__PURE__ */ e.jsx(P, { name: "chevron-left" }) }),
         /* @__PURE__ */ e.jsxs("div", { className: "flex gap-1", children: [
           /* @__PURE__ */ e.jsx(
-            M,
+            E,
             {
               value: s.start.month,
-              isDisabled: !!l,
-              onChange: j
+              isDisabled: !!h,
+              onChange: m
             }
           ),
           /* @__PURE__ */ e.jsx(
-            E,
+            B,
             {
               value: s.start.year,
-              isDisabled: !!l,
-              onChange: m
+              isDisabled: !!h,
+              onChange: j
             }
           )
         ] }),
         /* @__PURE__ */ e.jsx("div", { className: "w-6" })
       ] }),
-      /* @__PURE__ */ e.jsxs(F, { className: "w-full text-center", children: [
-        /* @__PURE__ */ e.jsx(G, {}),
-        /* @__PURE__ */ e.jsx(I, {})
+      /* @__PURE__ */ e.jsxs(v, { className: "w-full text-center", children: [
+        /* @__PURE__ */ e.jsx(V, {}),
+        /* @__PURE__ */ e.jsx(T, {})
       ] })
     ] }),
-    /* @__PURE__ */ e.jsx(R, { orientation: "vertical", className: "hidden h-[unset] self-stretch sm:block" }),
-    /* @__PURE__ */ e.jsx(R, { className: "sm:hidden" }),
+    /* @__PURE__ */ e.jsx(G, { orientation: "vertical", className: "hidden h-[unset] self-stretch sm:block" }),
+    /* @__PURE__ */ e.jsx(G, { className: "sm:hidden" }),
     /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-3", children: [
       /* @__PURE__ */ e.jsxs("div", { className: "flex justify-between gap-1", children: [
         /* @__PURE__ */ e.jsx("div", { className: "w-6" }),
         /* @__PURE__ */ e.jsxs("div", { className: "flex gap-1", children: [
           /* @__PURE__ */ e.jsx(
-            M,
+            E,
             {
               value: s.end.month,
-              isDisabled: !!l,
-              onChange: u
+              isDisabled: !!h,
+              onChange: $
             }
           ),
           /* @__PURE__ */ e.jsx(
-            E,
+            B,
             {
               value: s.end.year,
-              isDisabled: !!l,
+              isDisabled: !!h,
               onChange: g
             }
           )
         ] }),
-        /* @__PURE__ */ e.jsx(C, { slot: "next", className: h(), children: /* @__PURE__ */ e.jsx(P, { name: "chevron-right" }) })
+        /* @__PURE__ */ e.jsx(C, { slot: "next", className: x(), children: /* @__PURE__ */ e.jsx(P, { name: "chevron-right" }) })
       ] }),
-      /* @__PURE__ */ e.jsxs(F, { className: "w-full text-center", offset: { months: 1 }, children: [
-        /* @__PURE__ */ e.jsx(G, {}),
-        /* @__PURE__ */ e.jsx(I, {})
+      /* @__PURE__ */ e.jsxs(v, { className: "w-full text-center", offset: { months: 1 }, children: [
+        /* @__PURE__ */ e.jsx(V, {}),
+        /* @__PURE__ */ e.jsx(T, {})
       ] })
     ] })
   ] }) });
-}, ne = L(ae);
-ne.displayName = "DateRangePicker";
-const oe = ({
-  description: h,
-  errorMessage: l,
-  fullWidth: n,
-  hideHintLabel: i,
-  hideInputFooter: f,
-  hideInputHeader: o,
-  isDisabled: s,
-  isRequired: p,
-  label: y,
+}, me = L(le);
+me.displayName = "DateRangePicker";
+const fe = ({
+  description: x,
+  disableClearLogic: h,
+  errorMessage: n,
+  fullWidth: p,
+  hideHintLabel: c,
+  hideInputFooter: o,
+  hideInputHeader: s,
+  isDisabled: i,
+  isRequired: y,
+  label: m,
   onKeyDown: j,
-  startSlot: m
+  startSlot: $
 }) => {
-  const { input: u, segment: g } = se(), { button: t, buttonExcludedFromTabOrder: a, inputField: c } = V({
-    fullWidth: n,
-    hasStartSlot: !!m,
+  const g = S(
+    () => K({ hideHintLabel: c, hideInputHeader: s, label: m }),
+    [c, s, m]
+  ), t = S(
+    () => re({ description: x, errorMessage: n, hideInputFooter: o }),
+    [x, n, o]
+  ), { input: a, segment: f } = de(), { button: w, buttonExcludedFromTabOrder: F, inputField: b } = q({
+    fullWidth: p,
+    hasStartSlot: !!$,
     hasEndSlot: !0
-  }), { clear: $ } = Q(), { setValue: D, value: r } = v(z), b = T(null);
+  }), { clear: k } = ee(), { setValue: R, value: r } = Y(X), u = z(null);
   return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-    /* @__PURE__ */ e.jsx(
-      Z,
-      {
-        label: y,
-        hideHintLabel: i,
-        hideInputHeader: o,
-        isRequired: p
-      }
-    ),
+    g ? /* @__PURE__ */ e.jsx(ae, { label: m, hideHintLabel: c, isRequired: y }) : null,
     /* @__PURE__ */ e.jsxs(
-      B,
+      O,
       {
-        className: ({ isDisabled: d, isFocusWithin: x, isHovered: w, isInvalid: H }) => c({
+        className: ({ isDisabled: d, isFocusWithin: l, isHovered: N, isInvalid: _ }) => b({
           isDisabled: d,
-          isFocused: x,
-          isHovered: w,
-          isInvalid: H,
+          isFocused: l,
+          isHovered: N,
+          isInvalid: _,
           className: "min-h-8"
         }),
         onKeyDown: j,
         children: [
-          /* @__PURE__ */ e.jsx(S, { className: u(), slot: "start", children: (d) => /* @__PURE__ */ e.jsx(
-            k,
+          $,
+          /* @__PURE__ */ e.jsx(I, { className: a(), slot: "start", children: (d) => /* @__PURE__ */ e.jsx(
+            M,
             {
-              className: ({ isFocused: x }) => g({
-                isFocused: x,
-                isDisabled: s,
+              className: ({ isFocused: l }) => f({
+                isFocused: l,
+                isDisabled: i,
                 // consider literals (separators between segments) to have a value when a full date is entered
                 hasValue: d.type === "literal" ? !!(r != null && r.start) : !d.isPlaceholder
               }),
@@ -285,16 +299,16 @@ const oe = ({
             "span",
             {
               "aria-hidden": "true",
-              className: r != null && r.start && r.end && !s ? "text-primary" : "text-tertiary",
+              className: r != null && r.start && r.end && !i ? "text-primary" : "text-tertiary",
               children: " – "
             }
           ),
-          /* @__PURE__ */ e.jsx(S, { className: u(), slot: "end", children: (d) => /* @__PURE__ */ e.jsx(
-            k,
+          /* @__PURE__ */ e.jsx(I, { className: a(), slot: "end", children: (d) => /* @__PURE__ */ e.jsx(
+            M,
             {
-              className: ({ isFocused: x }) => g({
-                isFocused: x,
-                isDisabled: s,
+              className: ({ isFocused: l }) => f({
+                isFocused: l,
+                isDisabled: i,
                 // consider literals (separators between segments) to have a value when a full date is entered
                 hasValue: d.type === "literal" ? !!(r != null && r.end) : !d.isPlaceholder
               }),
@@ -305,25 +319,25 @@ const oe = ({
             /* @__PURE__ */ e.jsx(
               C,
               {
-                isDisabled: s,
-                className: ({ isDisabled: d, isFocusVisible: x, isHovered: w }) => t({ isDisabled: d, isFocused: x, isHovered: w }),
-                ref: b,
+                isDisabled: i,
+                className: ({ isDisabled: d, isFocusVisible: l, isHovered: N }) => w({ isDisabled: d, isFocused: l, isHovered: N }),
+                ref: u,
                 children: /* @__PURE__ */ e.jsx(P, { name: "calendar" })
               }
             ),
-            !s && (r != null && r.end) && (r != null && r.start) ? /* @__PURE__ */ e.jsx(X, { tooltip: $, children: /* @__PURE__ */ e.jsx(
+            !i && (r != null && r.end) && (r != null && r.start) && !h ? /* @__PURE__ */ e.jsx(te, { tooltip: k, children: /* @__PURE__ */ e.jsx(
               C,
               {
                 slot: null,
                 onFocus: (d) => {
-                  var x;
-                  d.preventDefault(), (x = b == null ? void 0 : b.current) == null || x.focus();
+                  var l;
+                  d.preventDefault(), (l = u == null ? void 0 : u.current) == null || l.focus();
                 },
                 excludeFromTabOrder: !0,
-                className: a(),
+                className: F(),
                 onPress: () => {
                   var d;
-                  D(null), (d = b.current) == null || d.focus();
+                  R(null), (d = u.current) == null || d.focus();
                 },
                 children: /* @__PURE__ */ e.jsx(P, { name: "clear" })
               }
@@ -332,38 +346,31 @@ const oe = ({
         ]
       }
     ),
-    /* @__PURE__ */ e.jsx(
-      W,
-      {
-        description: h,
-        errorMessage: l,
-        hideInputFooter: f
-      }
-    )
+    t ? /* @__PURE__ */ e.jsx(ne, { description: x, errorMessage: n }) : null
   ] });
-}, I = () => {
-  const { rangeBodyCell: h } = te();
-  return /* @__PURE__ */ e.jsx(A, { children: (l) => /* @__PURE__ */ e.jsx(
-    J,
+}, T = () => {
+  const { rangeBodyCell: x } = ce();
+  return /* @__PURE__ */ e.jsx(Z, { children: (h) => /* @__PURE__ */ e.jsx(
+    H,
     {
-      date: l,
+      date: h,
       className: ({
         isDisabled: n,
-        isFocusVisible: i,
-        isHovered: f,
+        isFocusVisible: p,
+        isHovered: c,
         isOutsideMonth: o,
         isPressed: s,
-        isSelected: p,
+        isSelected: i,
         isSelectionEnd: y,
-        isSelectionStart: j,
-        isUnavailable: m
-      }) => h({
-        isSelected: p,
-        isSelectionStart: j,
+        isSelectionStart: m,
+        isUnavailable: j
+      }) => x({
+        isSelected: i,
+        isSelectionStart: m,
         isSelectionEnd: y,
-        isFocusVisible: i,
-        isHovered: f,
-        isUnavailable: m,
+        isFocusVisible: p,
+        isHovered: c,
+        isUnavailable: j,
         isDisabled: n,
         isOutsideMonth: o,
         isPressed: s
@@ -372,5 +379,5 @@ const oe = ({
   ) });
 };
 export {
-  ne as DateRangePicker
+  me as DateRangePicker
 };