@new-black/lyra 1.0.36 → 1.0.38

package/dist/lyra36.js

@@ -1,6 +1,6 @@
 import { j as r } from "./lyra94.js";
-import { useContext as K, useState as G, useMemo as V, useRef as J, useCallback as A, useEffect as M } from "react";
-import { Button as B, Group as pr } from "./lyra93.js";
+import { useContext as K, useState as E, useMemo as O, useRef as J, useCallback as A, useEffect as B } from "react";
+import { Button as M, Group as pr } from "./lyra93.js";
 import { clsx as C } from "./lyra454.js";
 import "./lyra2.js";
 import "./lyra3.js";
@@ -32,7 +32,7 @@ import "./lyra28.js";
 import "./lyra29.js";
 import "./lyra99.js";
 import "./lyra82.js";
-import "./lyra462.js";
+import "./lyra459.js";
 import { InputHeader as I } from "./lyra38.js";
 import { InputFooter as rr } from "./lyra39.js";
 import { sharedInputStyles as Q } from "./lyra40.js";
@@ -42,7 +42,7 @@ import "./lyra32.js";
 import "./lyra33.js";
 import "./lyra34.js";
 import "./lyra35.js";
-import er from "./lyra560.js";
+import er from "./lyra601.js";
 import { sharedListStyles as lr } from "./lyra460.js";
 import { SharedListItem as mr } from "./lyra461.js";
 import { Popover as ur } from "./lyra54.js";
@@ -51,9 +51,9 @@ import "./lyra56.js";
 import "./lyra57.js";
 import { Text as or } from "./lyra75.js";
 import "./lyra76.js";
-import { InputTagGroup as fr, InputTag as xr } from "./lyra463.js";
-import "./lyra464.js";
-import { shouldRenderInputHeader as tr, shouldRenderInputFooter as sr } from "./lyra609.js";
+import { InputTagGroup as fr, InputTag as xr } from "./lyra462.js";
+import "./lyra463.js";
+import { shouldRenderInputHeader as tr, shouldRenderInputFooter as sr } from "./lyra623.js";
 import "react-dom";
 import { useMousePosition as ar } from "./lyra86.js";
 import "./lyra41.js";
@@ -94,16 +94,16 @@ const jr = ({
   disabledItemIdKeys: s,
   filteredItems: e,
   getItemId: o,
-  onMultiChange: u,
-  onSingleChange: m,
+  onMultiChange: m,
+  onSingleChange: u,
   value: i
 }) => {
-  const y = V(() => {
+  const y = O(() => {
     if (Array.isArray(i))
       return i.length ? e.findIndex((n) => o(n) === o(i[0])) : 0;
     if (i)
       return e.findIndex((n) => o(n) === o(i));
-  }, [e, o, i]), [j, f] = G(y ?? 0), h = A(
+  }, [e, o, i]), [j, f] = E(y ?? 0), h = A(
     (n) => {
       if (Number.isInteger(n)) {
         for (let l = n - 1; l >= 0; l--)
@@ -113,7 +113,7 @@ const jr = ({
       return -1;
     },
     [s, e, o]
-  ), k = A(
+  ), v = A(
     (n) => {
       if (Number.isInteger(n)) {
         for (let l = n + 1; l < e.length; l++)
@@ -123,17 +123,17 @@ const jr = ({
       return -1;
     },
     [s, e, o]
-  ), D = J([]), N = A((n, l) => {
-    l && (D.current[n] = l);
+  ), k = J([]), N = A((n, l) => {
+    l && (k.current[n] = l);
   }, []), c = A(
     (n) => {
-      if (u) {
-        const l = i ? [...i] : [], v = l.map(o), a = v != null && v.includes(o(n)) ? l.filter((P) => o(P) !== o(n)) : [...l, n];
-        u == null || u(a);
+      if (m) {
+        const l = i ? [...i] : [], D = l.map(o), a = D != null && D.includes(o(n)) ? l.filter((P) => o(P) !== o(n)) : [...l, n];
+        m == null || m(a);
       } else
-        m && (m == null || m(n));
+        u && (u == null || u(n));
     },
-    [o, u, m, i]
+    [o, m, u, i]
   ), t = A(
     (n) => Array.isArray(i) ? i.some((l) => o(l) === o(n)) : i ? o(i) === o(n) : !1,
     [o, i]
@@ -142,33 +142,33 @@ const jr = ({
       const l = j;
       if (n.key === "ArrowDown") {
         n.preventDefault();
-        const v = k(l);
-        if (v >= 0) {
-          f(v), x.current = w;
-          const a = D.current[v];
+        const D = v(l);
+        if (D >= 0) {
+          f(D), x.current = w;
+          const a = k.current[D];
           a == null || a.scrollIntoView({ block: "nearest" }), a == null || a.focus();
         }
       } else if (n.key === "ArrowUp") {
         n.preventDefault();
-        const v = h(l);
-        if (v >= 0) {
-          f(v);
-          const a = D.current[v];
+        const D = h(l);
+        if (D >= 0) {
+          f(D);
+          const a = k.current[D];
           a == null || a.scrollIntoView({ block: "nearest" }), a == null || a.focus(), x.current = w;
         }
       } else
         n.key === "Escape" && p();
     },
-    [j, p, k, h, w]
+    [j, p, v, h, w]
   ), $ = A(
     (n, l) => {
       n && x.current !== w && (f(l), x.current = w);
     },
     [w]
   );
-  return M(() => {
+  return B(() => {
     var n;
-    (n = D.current) != null && n[j] && D.current[j].focus();
+    (n = k.current) != null && n[j] && k.current[j].focus();
   }, [open]), {
     activeItem: j,
     assignRefOnIndex: N,
@@ -183,8 +183,8 @@ const jr = ({
   getItemId: s,
   items: e,
   onMultiChange: o,
-  onSingleChange: u,
-  selectRenderElements: m,
+  onSingleChange: m,
+  selectRenderElements: u,
   setOpenPopover: i,
   value: y
 }) => {
@@ -192,8 +192,8 @@ const jr = ({
     activeItem: j,
     assignRefOnIndex: f,
     getItemIsSelected: h,
-    onHoverChange: k,
-    onKeyDown: D,
+    onHoverChange: v,
+    onKeyDown: k,
     toggleSelection: N
   } = jr({
     closePopover: () => i(!1),
@@ -201,7 +201,7 @@ const jr = ({
     filteredItems: e,
     getItemId: s,
     onMultiChange: o,
-    onSingleChange: u,
+    onSingleChange: m,
     value: y
   }), c = (t) => (p == null ? void 0 : p.includes(s(t))) ?? !1;
   return /* @__PURE__ */ r.jsx(
@@ -211,16 +211,16 @@ const jr = ({
         className: "h-full max-h-72 overflow-auto"
       }),
       children: e.map((t, w) => /* @__PURE__ */ r.jsx(
-        B,
+        M,
         {
           "data-index": w,
           ref: (x) => f(w, x),
           className: "w-full text-start outline-none",
           onHoverChange: (x) => {
-            k(x, w);
+            v(x, w);
           },
           onPress: () => N(t),
-          onKeyDown: (x) => D(x),
+          onKeyDown: (x) => k(x),
           isDisabled: c(t),
           children: /* @__PURE__ */ r.jsx(
             mr,
@@ -231,7 +231,7 @@ const jr = ({
                 disabled: (p == null ? void 0 : p.includes(s(t))) ?? !1,
                 selected: h(t)
               },
-              selectRenderElements: m,
+              selectRenderElements: u,
               hasSelection: !0
             }
           )
@@ -245,32 +245,32 @@ const jr = ({
   disabledItemIdKeys: s,
   getItemId: e,
   items: o,
-  label: u,
-  onMultiChange: m,
+  label: m,
+  onMultiChange: u,
   onSingleChange: i,
   open: y,
   placement: j = "bottom start",
   selectRenderElements: f,
   setOpenPopover: h,
-  triggerRef: k,
-  value: D
+  triggerRef: v,
+  value: k
 }) => {
   var w, x;
-  const [N, c] = G(
-    (w = k.current) == null ? void 0 : w.offsetWidth
-  ), t = N ?? ((x = k.current) == null ? void 0 : x.offsetWidth);
+  const [N, c] = E(
+    (w = v.current) == null ? void 0 : w.offsetWidth
+  ), t = N ?? ((x = v.current) == null ? void 0 : x.offsetWidth);
   return er("resize", () => {
     var S;
-    c((S = k.current) == null ? void 0 : S.offsetWidth);
+    c((S = v.current) == null ? void 0 : S.offsetWidth);
   }), /* @__PURE__ */ r.jsx(
     ur,
     {
       className: "p-1",
       isOpen: y,
-      triggerRef: k,
+      triggerRef: v,
       onOpenChange: h,
       shouldUpdatePosition: !0,
-      "aria-label": u,
+      "aria-label": m,
       disablePadding: !0,
       placement: j,
       style: {
@@ -282,11 +282,11 @@ const jr = ({
         {
           getItemId: e,
           items: o,
-          onMultiChange: m,
+          onMultiChange: u,
           onSingleChange: i,
           selectRenderElements: f,
           setOpenPopover: h,
-          value: D,
+          value: k,
           disabledItemIdKeys: s
         }
       ) : null
@@ -297,8 +297,8 @@ const jr = ({
   fullWidth: s,
   getLabel: e,
   isDisabled: o,
-  isInvalid: u,
-  onChange: m,
+  isInvalid: m,
+  onChange: u,
   placeholder: i,
   renderCustomElementInValueButton: y,
   selectRenderElements: j,
@@ -306,26 +306,26 @@ const jr = ({
   value: h
 }) => {
   var N;
-  const { inputField: k } = Q({ isInputOnly: !1 }), D = (c) => {
-    (c.key === "Escape" || c.key === "Backspace") && !p ? m == null || m(void 0) : c.key === "ArrowDown" && (c.preventDefault(), f(!0));
+  const { inputField: v } = Q({ isInputOnly: !1 }), k = (c) => {
+    (c.key === "Escape" || c.key === "Backspace") && !p ? u == null || u(void 0) : c.key === "ArrowDown" && (c.preventDefault(), f(!0));
   };
   return /* @__PURE__ */ r.jsxs(
-    B,
+    M,
     {
-      className: ({ isFocused: c, isHovered: t }) => k({
+      className: ({ isFocused: c, isHovered: t }) => v({
         fullWidth: s,
         isDisabled: o,
         isHovered: t,
         isFocused: c,
-        isInvalid: u,
+        isInvalid: m,
         hasEndSlot: !0,
         className: C(
-          t && !u && !o && !c ? "border-hover" : "",
+          t && !m && !o && !c ? "border-hover" : "",
           "min-h-8"
         )
       }),
       isDisabled: o,
-      onKeyDown: D,
+      onKeyDown: k,
       onPress: () => {
         f(!0);
       },
@@ -341,7 +341,7 @@ const jr = ({
               className: "text-secondary",
               role: "button",
               onClick: (c) => {
-                c.stopPropagation(), m == null || m(void 0);
+                c.stopPropagation(), u == null || u(void 0);
               },
               children: /* @__PURE__ */ r.jsx(H, { name: "clear" })
             }
@@ -356,14 +356,14 @@ const jr = ({
   getItemId: s,
   getLabel: e,
   isDisabled: o,
-  isInvalid: u,
-  label: m,
+  isInvalid: m,
+  label: u,
   onChange: i,
   placeholder: y,
   setOpenPopover: j,
   value: f
 }) => {
-  const { inputField: h } = Q({ isInputOnly: !1 }), k = A(
+  const { inputField: h } = Q({ isInputOnly: !1 }), v = A(
     (N) => {
       f && i(
         f.filter((c) => {
@@ -373,35 +373,35 @@ const jr = ({
       );
     },
     [s, i, f]
-  ), D = (N) => {
+  ), k = (N) => {
     (N.key === "ArrowDown" || N.key === "Enter" || N.key === " ") && (N.preventDefault(), j(!0));
   };
   return /* @__PURE__ */ r.jsx(pr, { children: ({ isFocusWithin: N }) => /* @__PURE__ */ r.jsx(
-    B,
+    M,
     {
       className: ({ isFocused: c, isHovered: t }) => h({
         fullWidth: p,
         isDisabled: o,
         isHovered: t,
         isFocused: c || N,
-        isInvalid: u,
+        isInvalid: m,
         hasEndSlot: !0,
         className: C(
-          t && !u && !o && !c ? "border-hover" : "",
+          t && !m && !o && !c ? "border-hover" : "",
           "items-start",
           "py-[0.4375rem]"
         )
       }),
-      onKeyDown: (c) => D(c),
+      onKeyDown: (c) => k(c),
       onPress: () => j(!0),
       isDisabled: o,
       children: /* @__PURE__ */ r.jsxs("div", { className: "flex w-full outline-none", children: [
         /* @__PURE__ */ r.jsx("div", { className: "grow text-left", children: f && f.length ? /* @__PURE__ */ r.jsx(
           fr,
           {
-            label: m ?? "Selected items",
+            label: u ?? "Selected items",
             className: "-m-1.5 -mt-[0.3125rem]",
-            onRemove: o ? void 0 : k,
+            onRemove: o ? void 0 : v,
             children: f.map((c) => /* @__PURE__ */ r.jsx(xr, { id: s(c), isDisabled: o, children: e(c) }, s(c)))
           }
         ) : /* @__PURE__ */ r.jsx(or, { color: "secondary", children: y }) }),
@@ -418,15 +418,15 @@ const jr = ({
   description: s,
   disableClearLogic: e,
   disabledItemIdKeys: o,
-  errorMessage: u,
-  fullWidth: m = !0,
+  errorMessage: m,
+  fullWidth: u = !0,
   getItemId: i,
   getLabel: y,
   hideHintLabel: j,
   hideInputFooter: f,
   hideInputHeader: h,
-  isDisabled: k,
-  isInvalid: D,
+  isDisabled: v,
+  isInvalid: k,
   isRequired: N,
   items: c,
   label: t,
@@ -436,54 +436,54 @@ const jr = ({
   outerStartSlot: $,
   placeholder: n,
   placement: l,
-  renderCustomElementInValueButton: v,
+  renderCustomElementInValueButton: D,
   selectRenderElements: a,
   value: P
 }) => {
-  const { isDisabled: X } = K(g), [Y, F] = G(!1), Z = k || X, [T, O] = G(P ?? p), d = V(
+  const { isDisabled: X } = K(g), [Y, F] = E(!1), Z = v || X, [V, G] = E(P ?? p), T = O(
     () => tr({ hideHintLabel: j, hideInputHeader: h, label: t }),
     [j, h, t]
-  ), U = V(
-    () => sr({ description: s, errorMessage: u, hideInputFooter: f }),
-    [s, u, f]
+  ), U = O(
+    () => sr({ description: s, errorMessage: m, hideInputFooter: f }),
+    [s, m, f]
   ), { outerSlot: L, outerSlotsWrapper: z, wrapper: _ } = Q({
-    hasInputHeader: d,
+    hasInputHeader: T,
     hasLabel: !!t
   }), R = J(null), { direction: q } = nr(), W = A(
     (b) => {
-      O(b), x == null || x(b), F(!1);
+      G(b), x == null || x(b), F(!1);
     },
     [x]
   );
-  M(() => {
-    O(P ?? p);
+  B(() => {
+    G(P ?? p);
   }, [p, P]);
-  const E = P ?? T;
+  const d = P ?? V;
   return /* @__PURE__ */ r.jsxs("div", { children: [
-    /* @__PURE__ */ r.jsx(cr, { name: w, value: E, getItemId: i }),
+    /* @__PURE__ */ r.jsx(cr, { name: w, value: d, getItemId: i }),
     /* @__PURE__ */ r.jsxs("div", { className: z(), children: [
       $ ? /* @__PURE__ */ r.jsx("div", { className: L(), children: $ }) : null,
-      /* @__PURE__ */ r.jsxs("div", { className: _({ fullWidth: m }), children: [
-        d ? /* @__PURE__ */ r.jsx(I, { label: t, hideHintLabel: j, isRequired: N }) : null,
+      /* @__PURE__ */ r.jsxs("div", { className: _({ fullWidth: u }), children: [
+        T ? /* @__PURE__ */ r.jsx(I, { label: t, hideHintLabel: j, isRequired: N }) : null,
         /* @__PURE__ */ r.jsx("div", { ref: R, children: /* @__PURE__ */ r.jsx(
           Nr,
           {
-            fullWidth: m,
+            fullWidth: u,
             isDisabled: Z,
             disableClearLogic: e,
-            isInvalid: D,
+            isInvalid: k || !!m,
             placeholder: n,
-            value: E,
+            value: d,
             getLabel: y,
             getItemId: i,
             label: t,
             onChange: W,
             setOpenPopover: F,
-            renderCustomElementInValueButton: v,
+            renderCustomElementInValueButton: D,
             selectRenderElements: a
           }
         ) }),
-        U ? /* @__PURE__ */ r.jsx(rr, { description: s, errorMessage: u }) : null
+        U ? /* @__PURE__ */ r.jsx(rr, { description: s, errorMessage: m }) : null
       ] }),
       S ? /* @__PURE__ */ r.jsx("div", { className: L(), children: S }) : null
     ] }),
@@ -500,7 +500,7 @@ const jr = ({
         direction: q,
         setOpenPopover: F,
         onSingleChange: W,
-        value: E,
+        value: d,
         placement: l
       }
     )
@@ -510,15 +510,15 @@ const jr = ({
   description: s,
   disableClearLogic: e,
   disabledItemIdKeys: o,
-  errorMessage: u,
-  fullWidth: m = !0,
+  errorMessage: m,
+  fullWidth: u = !0,
   getItemId: i,
   getLabel: y,
   hideHintLabel: j,
   hideInputFooter: f,
   hideInputHeader: h,
-  isDisabled: k,
-  isInvalid: D,
+  isDisabled: v,
+  isInvalid: k,
   isRequired: N,
   items: c,
   label: t,
@@ -528,40 +528,40 @@ const jr = ({
   outerStartSlot: $,
   placeholder: n,
   placement: l,
-  selectRenderElements: v,
+  selectRenderElements: D,
   value: a
 }) => {
-  const { isDisabled: P } = K(g), X = k || P, [Y, F] = G(!1), [Z, T] = G(a ?? p), O = J(null), { direction: d } = nr(), U = V(
+  const { isDisabled: P } = K(g), X = v || P, [Y, F] = E(!1), [Z, V] = E(a ?? p), G = J(null), { direction: T } = nr(), U = O(
     () => tr({ hideHintLabel: j, hideInputHeader: h, label: t }),
     [j, h, t]
-  ), L = V(
-    () => sr({ description: s, errorMessage: u, hideInputFooter: f }),
-    [s, u, f]
+  ), L = O(
+    () => sr({ description: s, errorMessage: m, hideInputFooter: f }),
+    [s, m, f]
   ), { outerSlot: z, outerSlotsWrapper: _, wrapper: R } = Q({
     hasInputHeader: U,
     hasLabel: !!t
   }), q = A(
-    (E) => {
-      T(E), x == null || x(E);
+    (d) => {
+      V(d), x == null || x(d);
     },
     [x]
   );
-  M(() => {
-    T(a ?? p);
+  B(() => {
+    V(a ?? p);
   }, [p, a]);
   const W = a ?? Z;
   return /* @__PURE__ */ r.jsxs("div", { children: [
     /* @__PURE__ */ r.jsx(cr, { name: w, value: W, getItemId: i }),
     /* @__PURE__ */ r.jsxs("div", { className: _(), children: [
       $ ? /* @__PURE__ */ r.jsx("div", { className: z(), children: $ }) : null,
-      /* @__PURE__ */ r.jsxs("div", { className: R({ fullWidth: m }), children: [
+      /* @__PURE__ */ r.jsxs("div", { className: R({ fullWidth: u }), children: [
         U ? /* @__PURE__ */ r.jsx(I, { label: t, hideHintLabel: j, isRequired: N }) : null,
-        /* @__PURE__ */ r.jsx("div", { ref: O, children: /* @__PURE__ */ r.jsx(
+        /* @__PURE__ */ r.jsx("div", { ref: G, children: /* @__PURE__ */ r.jsx(
           wr,
           {
-            fullWidth: m,
+            fullWidth: u,
             isDisabled: X,
-            isInvalid: D,
+            isInvalid: k || !!m,
             placeholder: n,
             value: W,
             onChange: q,
@@ -570,10 +570,10 @@ const jr = ({
             label: t,
             disableClearLogic: e,
             setOpenPopover: F,
-            selectRenderElements: v
+            selectRenderElements: D
           }
         ) }),
-        L ? /* @__PURE__ */ r.jsx(rr, { description: s, errorMessage: u }) : null
+        L ? /* @__PURE__ */ r.jsx(rr, { description: s, errorMessage: m }) : null
       ] }),
       S ? /* @__PURE__ */ r.jsx("div", { className: z(), children: S }) : null
     ] }),
@@ -581,13 +581,13 @@ const jr = ({
       ir,
       {
         label: `${t} options`,
-        triggerRef: O,
+        triggerRef: G,
         items: c,
         open: Y,
         getItemId: i,
-        selectRenderElements: v,
+        selectRenderElements: D,
         disabledItemIdKeys: o,
-        direction: d,
+        direction: T,
         setOpenPopover: F,
         onMultiChange: q,
         placement: l,