@new-black/lyra 1.0.11 → 1.0.12

package/dist/lyra36.js

@@ -1,5 +1,5 @@
 import { j as r } from "./lyra88.js";
-import { useContext as Q, useState as F, useRef as W, useCallback as P, useEffect as z, useMemo as C } from "react";
+import { useContext as Q, useState as F, useRef as M, useCallback as P, useEffect as d, useMemo as C } from "react";
 import { Button as q, Group as g } from "./lyra87.js";
 import { clsx as I } from "./lyra448.js";
 import "./lyra2.js";
@@ -7,7 +7,7 @@ import "./lyra3.js";
 import "./lyra4.js";
 import "./lyra5.js";
 import "./lyra6.js";
-import { SvgIcon as H } from "./lyra63.js";
+import { SvgIcon as z } from "./lyra63.js";
 import "./lyra8.js";
 import "./lyra9.js";
 import "./lyra10.js";
@@ -32,10 +32,10 @@ import "./lyra28.js";
 import "./lyra29.js";
 import "./lyra93.js";
 import "./lyra78.js";
-import "./lyra456.js";
+import "./lyra453.js";
 import { InputHeader as Y } from "./lyra38.js";
 import { InputFooter as Z } from "./lyra39.js";
-import { sharedInputStyles as M } from "./lyra40.js";
+import { sharedInputStyles as O } from "./lyra40.js";
 import "./lyra44.js";
 import "./lyra31.js";
 import "./lyra32.js";
@@ -43,16 +43,16 @@ import "./lyra33.js";
 import "./lyra34.js";
 import "./lyra35.js";
 import rr from "./lyra594.js";
-import { sharedListStyles as or } from "./lyra451.js";
-import { SharedListItem as tr } from "./lyra452.js";
+import { sharedListStyles as or } from "./lyra454.js";
+import { SharedListItem as tr } from "./lyra455.js";
 import { Popover as sr } from "./lyra52.js";
 import "./lyra53.js";
 import "./lyra54.js";
 import "./lyra55.js";
 import { Text as _ } from "./lyra71.js";
 import "./lyra72.js";
-import { InputTagGroup as nr, InputTag as ir } from "./lyra457.js";
-import "./lyra458.js";
+import { InputTagGroup as nr, InputTag as ir } from "./lyra456.js";
+import "./lyra457.js";
 import "react-dom";
 import { useMousePosition as cr } from "./lyra82.js";
 import "./lyra41.js";
@@ -82,60 +82,60 @@ import "./lyra77.js";
 import "./lyra79.js";
 import "./lyra96.js";
 import { useLocale as R } from "./lyra86.js";
-const er = ({
+const pr = ({
   closePopover: e,
-  disabledItemIdKeys: s,
-  filteredItems: m,
+  disabledItemIdKeys: i,
+  filteredItems: l,
   getItemId: o,
   onMultiChange: a,
-  onSingleChange: l,
-  value: n
+  onSingleChange: m,
+  value: s
 }) => {
   const A = C(() => {
-    if (Array.isArray(n))
-      return n.length ? m.findIndex((t) => o(t) === o(n[0])) : 0;
-    if (n)
-      return m.findIndex((t) => o(t) === o(n));
-  }, [m, o, n]), [w, u] = F(A ?? 0), j = P(
+    if (Array.isArray(s))
+      return s.length ? l.findIndex((t) => o(t) === o(s[0])) : 0;
+    if (s)
+      return l.findIndex((t) => o(t) === o(s));
+  }, [l, o, s]), [w, u] = F(A ?? 0), j = P(
     (t) => {
       if (Number.isInteger(t)) {
-        for (let p = t - 1; p >= 0; p--)
-          if (!(s != null && s.includes(o(m[p]))))
-            return Math.max(p, 0);
+        for (let n = t - 1; n >= 0; n--)
+          if (!(i != null && i.includes(o(l[n]))))
+            return Math.max(n, 0);
       }
       return -1;
     },
-    [s, m, o]
+    [i, l, o]
   ), k = P(
     (t) => {
       if (Number.isInteger(t)) {
-        for (let p = t + 1; p < m.length; p++)
-          if (!(s != null && s.includes(o(m[p]))))
-            return Math.min(m.length - 1, p);
+        for (let n = t + 1; n < l.length; n++)
+          if (!(i != null && i.includes(o(l[n]))))
+            return Math.min(l.length - 1, n);
       }
       return -1;
     },
-    [s, m, o]
-  ), D = W([]), x = P((t, p) => {
-    p && (D.current[t] = p);
-  }, []), i = P(
+    [i, l, o]
+  ), D = M([]), x = P((t, n) => {
+    n && (D.current[t] = n);
+  }, []), c = P(
     (t) => {
       if (a) {
-        const p = n ? [...n] : [], S = p.map(o), h = S != null && S.includes(o(t)) ? p.filter((G) => o(G) !== o(t)) : [...p, t];
+        const n = s ? [...s] : [], S = n.map(o), h = S != null && S.includes(o(t)) ? n.filter((V) => o(V) !== o(t)) : [...n, t];
         a == null || a(h);
       } else
-        l && (l == null || l(t));
+        m && (m == null || m(t));
     },
-    [o, a, l, n]
-  ), c = P(
-    (t) => Array.isArray(n) ? n.includes(t) : n === t,
-    [n]
-  ), N = cr(), f = W(void 0), $ = P(
+    [o, a, m, s]
+  ), p = P(
+    (t) => Array.isArray(s) ? s.some((n) => o(n) === o(t)) : s ? o(s) === o(t) : !1,
+    [o, s]
+  ), N = cr(), f = M(void 0), $ = P(
     (t) => {
-      const p = w;
+      const n = w;
       if (t.key === "ArrowDown") {
         t.preventDefault();
-        const S = k(p);
+        const S = k(n);
         if (S >= 0) {
           u(S), f.current = N;
           const h = D.current[S];
@@ -143,7 +143,7 @@ const er = ({
         }
       } else if (t.key === "ArrowUp") {
         t.preventDefault();
-        const S = j(p);
+        const S = j(n);
         if (S >= 0) {
           u(S);
           const h = D.current[S];
@@ -153,32 +153,32 @@ const er = ({
         t.key === "Escape" && e();
     },
     [w, e, k, j, N]
-  ), d = P(
-    (t, p) => {
-      t && f.current !== N && (u(p), f.current = N);
+  ), G = P(
+    (t, n) => {
+      t && f.current !== N && (u(n), f.current = N);
     },
     [N]
   );
-  return z(() => {
+  return d(() => {
     var t;
     (t = D.current) != null && t[w] && D.current[w].focus();
   }, [open]), {
     activeItem: w,
     assignRefOnIndex: x,
-    getItemIsSelected: c,
+    getItemIsSelected: p,
     onKeyDown: $,
-    onHoverChange: d,
+    onHoverChange: G,
     selectedItemIndex: A,
-    toggleSelection: i
+    toggleSelection: c
   };
-}, pr = ({
+}, er = ({
   disabledItemIdKeys: e,
-  getItemId: s,
-  items: m,
+  getItemId: i,
+  items: l,
   onMultiChange: o,
   onSingleChange: a,
-  selectRenderElements: l,
-  setOpenPopover: n,
+  selectRenderElements: m,
+  setOpenPopover: s,
   value: A
 }) => {
   const {
@@ -188,22 +188,22 @@ const er = ({
     onHoverChange: k,
     onKeyDown: D,
     toggleSelection: x
-  } = er({
-    closePopover: () => n(!1),
+  } = pr({
+    closePopover: () => s(!1),
     disabledItemIdKeys: e,
-    filteredItems: m,
-    getItemId: s,
+    filteredItems: l,
+    getItemId: i,
     onMultiChange: o,
     onSingleChange: a,
     value: A
-  }), i = (c) => (e == null ? void 0 : e.includes(s(c))) ?? !1;
+  }), c = (p) => (e == null ? void 0 : e.includes(i(p))) ?? !1;
   return /* @__PURE__ */ r.jsx(
     "div",
     {
       className: or({
         className: "h-full max-h-72 overflow-auto"
       }),
-      children: m.map((c, N) => /* @__PURE__ */ r.jsx(
+      children: l.map((p, N) => /* @__PURE__ */ r.jsx(
         q,
         {
           "data-index": N,
@@ -212,35 +212,35 @@ const er = ({
           onHoverChange: (f) => {
             k(f, N);
           },
-          onPress: () => x(c),
+          onPress: () => x(p),
           onKeyDown: (f) => D(f),
-          isDisabled: i(c),
+          isDisabled: c(p),
           children: /* @__PURE__ */ r.jsx(
             tr,
             {
-              item: c,
+              item: p,
               state: {
                 active: w === N,
-                disabled: (e == null ? void 0 : e.includes(s(c))) ?? !1,
-                selected: j(c)
+                disabled: (e == null ? void 0 : e.includes(i(p))) ?? !1,
+                selected: j(p)
               },
-              selectRenderElements: l,
+              selectRenderElements: m,
               hasSelection: !0
             }
           )
         },
-        s(c)
+        i(p)
       ))
     }
   );
 }, B = ({
   direction: e,
-  disabledItemIdKeys: s,
-  getItemId: m,
+  disabledItemIdKeys: i,
+  getItemId: l,
   items: o,
   label: a,
-  onMultiChange: l,
-  onSingleChange: n,
+  onMultiChange: m,
+  onSingleChange: s,
   open: A,
   placement: w = "bottom start",
   selectRenderElements: u,
@@ -249,12 +249,12 @@ const er = ({
   value: D
 }) => {
   var N, f;
-  const [x, i] = F(
+  const [x, c] = F(
     (N = k.current) == null ? void 0 : N.offsetWidth
-  ), c = x ?? ((f = k.current) == null ? void 0 : f.offsetWidth);
+  ), p = x ?? ((f = k.current) == null ? void 0 : f.offsetWidth);
   return rr("resize", () => {
     var $;
-    i(($ = k.current) == null ? void 0 : $.offsetWidth);
+    c(($ = k.current) == null ? void 0 : $.offsetWidth);
   }), /* @__PURE__ */ r.jsx(
     sr,
     {
@@ -267,52 +267,52 @@ const er = ({
       disablePadding: !0,
       placement: w,
       style: {
-        width: c && c > 280 ? c + "px" : "280px",
+        width: p && p > 280 ? p + "px" : "280px",
         direction: e
       },
       children: A ? /* @__PURE__ */ r.jsx(
-        pr,
+        er,
         {
-          getItemId: m,
+          getItemId: l,
           items: o,
-          onMultiChange: l,
-          onSingleChange: n,
+          onMultiChange: m,
+          onSingleChange: s,
           selectRenderElements: u,
           setOpenPopover: j,
           value: D,
-          disabledItemIdKeys: s
+          disabledItemIdKeys: i
         }
       ) : null
     }
   );
-}, mr = ({
+}, lr = ({
   disableClearLogic: e,
-  fullWidth: s,
-  getLabel: m,
+  fullWidth: i,
+  getLabel: l,
   isDisabled: o,
   isInvalid: a,
-  onChange: l,
-  placeholder: n,
+  onChange: m,
+  placeholder: s,
   renderCustomElementInValueButton: A,
   selectRenderElements: w,
   setOpenPopover: u,
   value: j
 }) => {
   var x;
-  const { inputField: k } = M({}), D = (i) => {
-    (i.key === "Escape" || i.key === "Backspace") && !e ? l == null || l(void 0) : i.key === "ArrowDown" && (i.preventDefault(), u(!0));
+  const { inputField: k } = O({}), D = (c) => {
+    (c.key === "Escape" || c.key === "Backspace") && !e ? m == null || m(void 0) : c.key === "ArrowDown" && (c.preventDefault(), u(!0));
   };
   return /* @__PURE__ */ r.jsxs(
     q,
     {
-      className: ({ isFocused: i, isHovered: c }) => k({
-        fullWidth: s,
+      className: ({ isFocused: c, isHovered: p }) => k({
+        fullWidth: i,
         isDisabled: o,
-        isHovered: c,
-        isFocused: i,
+        isHovered: p,
+        isFocused: c,
         isInvalid: a,
         hasEndSlot: !0,
-        className: c && !a && !o && !i ? "border-hover" : ""
+        className: p && !a && !o && !c ? "border-hover" : ""
       }),
       isDisabled: o,
       onKeyDown: D,
@@ -322,7 +322,7 @@ const er = ({
       children: [
         /* @__PURE__ */ r.jsxs("div", { className: "flex grow text-start", children: [
           A && j ? (x = w(j)) == null ? void 0 : x.customElement : null,
-          j ? /* @__PURE__ */ r.jsx(r.Fragment, { children: m(j) }) : /* @__PURE__ */ r.jsx(_, { color: "secondary", children: n })
+          j ? /* @__PURE__ */ r.jsx(r.Fragment, { children: l(j) }) : /* @__PURE__ */ r.jsx(_, { color: "secondary", children: s })
         ] }),
         /* @__PURE__ */ r.jsxs("div", { className: "flex items-center gap-2", children: [
           j && !e && !o ? /* @__PURE__ */ r.jsx(r.Fragment, { children: /* @__PURE__ */ r.jsx(
@@ -330,86 +330,86 @@ const er = ({
             {
               className: "text-secondary",
               role: "button",
-              onClick: (i) => {
-                i.stopPropagation(), l == null || l(void 0);
+              onClick: (c) => {
+                c.stopPropagation(), m == null || m(void 0);
               },
-              children: /* @__PURE__ */ r.jsx(H, { name: "clear" })
+              children: /* @__PURE__ */ r.jsx(z, { name: "clear" })
             }
           ) }) : null,
-          /* @__PURE__ */ r.jsx(H, { name: "chevron-up-down" })
+          /* @__PURE__ */ r.jsx(z, { name: "chevron-up-down" })
         ] })
       ]
     }
   );
-}, lr = ({
+}, mr = ({
   fullWidth: e,
-  getItemId: s,
-  getLabel: m,
+  getItemId: i,
+  getLabel: l,
   isDisabled: o,
   isInvalid: a,
-  label: l,
-  onChange: n,
+  label: m,
+  onChange: s,
   placeholder: A,
   setOpenPopover: w,
   value: u
 }) => {
-  const { inputField: j } = M({}), k = P(
+  const { inputField: j } = O({}), k = P(
     (x) => {
-      u && n(
-        u.filter((i) => {
-          const c = s(i);
-          return !x.has(c);
+      u && s(
+        u.filter((c) => {
+          const p = i(c);
+          return !x.has(p);
         })
       );
     },
-    [s, n, u]
+    [i, s, u]
   ), D = (x) => {
     (x.key === "ArrowDown" || x.key === "Enter" || x.key === " ") && (x.preventDefault(), w(!0));
   };
   return /* @__PURE__ */ r.jsx(g, { children: ({ isFocusWithin: x }) => /* @__PURE__ */ r.jsx(
     q,
     {
-      className: ({ isFocused: i, isHovered: c }) => j({
+      className: ({ isFocused: c, isHovered: p }) => j({
         fullWidth: e,
         isDisabled: o,
-        isHovered: c,
-        isFocused: i || x,
+        isHovered: p,
+        isFocused: c || x,
         isInvalid: a,
         hasEndSlot: !0,
         className: I(
-          c && !a && !o && !i ? "border-hover" : "",
+          p && !a && !o && !c ? "border-hover" : "",
           "items-start"
         )
       }),
-      onKeyDown: (i) => D(i),
+      onKeyDown: (c) => D(c),
       onPress: () => w(!0),
       isDisabled: o,
       children: /* @__PURE__ */ r.jsxs("div", { className: "flex w-full outline-none", children: [
         /* @__PURE__ */ r.jsx("div", { className: "grow text-left", children: u && u.length ? /* @__PURE__ */ r.jsx(
           nr,
           {
-            label: l ?? "Selected items",
+            label: m ?? "Selected items",
             className: "-m-1.5 -mt-[0.3125rem]",
             onRemove: o ? void 0 : k,
-            children: u.map((i) => /* @__PURE__ */ r.jsx(ir, { id: s(i), isDisabled: o, children: m(i) }, s(i)))
+            children: u.map((c) => /* @__PURE__ */ r.jsx(ir, { id: i(c), isDisabled: o, children: l(c) }, i(c)))
           }
         ) : /* @__PURE__ */ r.jsx(_, { color: "secondary", children: A }) }),
-        /* @__PURE__ */ r.jsx(H, { name: "chevron-up-down", className: "h-4 w-4 min-w-4" })
+        /* @__PURE__ */ r.jsx(z, { name: "chevron-up-down", className: "h-4 w-4 min-w-4" })
       ] })
     }
   ) });
 }, K = ({
   getItemId: e,
-  name: s,
-  value: m
-}) => s ? Array.isArray(m) ? m.map((o) => /* @__PURE__ */ r.jsx("input", { type: "hidden", name: s, value: e(o) }, e(o))) : m ? /* @__PURE__ */ r.jsx("input", { type: "hidden", name: s, value: e(m) }) : null : null, Jo = ({
+  name: i,
+  value: l
+}) => i ? Array.isArray(l) ? l.map((o) => /* @__PURE__ */ r.jsx("input", { type: "hidden", name: i, value: e(o) }, e(o))) : l ? /* @__PURE__ */ r.jsx("input", { type: "hidden", name: i, value: e(l) }) : null : null, Jo = ({
   defaultValue: e,
-  description: s,
-  disableClearLogic: m,
+  description: i,
+  disableClearLogic: l,
   disabledItemIdKeys: o,
   errorMessage: a,
-  fullWidth: l = !0,
-  getItemId: n,
+  fullWidth: m = !0,
+  getItemId: s,
   getLabel: A,
   hideHintLabel: w,
   hideInputFooter: u,
@@ -417,60 +417,60 @@ const er = ({
   isDisabled: k,
   isInvalid: D,
   isRequired: x,
-  items: i,
-  label: c,
+  items: c,
+  label: p,
   name: N,
   onChange: f,
   placeholder: $,
-  placement: d,
+  placement: G,
   renderCustomElementInValueButton: t,
-  selectRenderElements: p,
+  selectRenderElements: n,
   value: S
 }) => {
-  const { isDisabled: h } = Q(X), [G, y] = F(!1), O = k || h, [b, V] = F(S ?? e), { wrapper: U } = M({}), L = W(null), { direction: T } = R(), v = P(
+  const { isDisabled: h } = Q(X), [V, y] = F(!1), U = k || h, [L, b] = F(S ?? e), { wrapper: H } = O({}), T = M(null), { direction: W } = R(), v = P(
     (J) => {
-      V(J), f == null || f(J), y(!1);
+      b(J), f == null || f(J), y(!1);
     },
     [f]
   );
-  z(() => {
-    V(S ?? e);
+  d(() => {
+    b(S ?? e);
   }, [e, S]);
-  const E = S ?? b;
+  const E = S ?? L;
   return /* @__PURE__ */ r.jsxs("div", { children: [
-    /* @__PURE__ */ r.jsx(K, { name: N, value: E, getItemId: n }),
-    /* @__PURE__ */ r.jsxs("div", { className: U({ fullWidth: l }), children: [
+    /* @__PURE__ */ r.jsx(K, { name: N, value: E, getItemId: s }),
+    /* @__PURE__ */ r.jsxs("div", { className: H({ fullWidth: m }), children: [
       /* @__PURE__ */ r.jsx(
         Y,
         {
-          label: c,
+          label: p,
           hideHintLabel: w,
           hideInputHeader: j,
           isRequired: x
         }
       ),
-      /* @__PURE__ */ r.jsx("div", { ref: L, children: /* @__PURE__ */ r.jsx(
-        mr,
+      /* @__PURE__ */ r.jsx("div", { ref: T, children: /* @__PURE__ */ r.jsx(
+        lr,
         {
-          fullWidth: l,
-          isDisabled: O,
-          disableClearLogic: m,
+          fullWidth: m,
+          isDisabled: U,
+          disableClearLogic: l,
           isInvalid: D,
           placeholder: $,
           value: E,
           getLabel: A,
-          getItemId: n,
-          label: c,
+          getItemId: s,
+          label: p,
           onChange: v,
           setOpenPopover: y,
           renderCustomElementInValueButton: t,
-          selectRenderElements: p
+          selectRenderElements: n
         }
       ) }),
       /* @__PURE__ */ r.jsx(
         Z,
         {
-          description: s,
+          description: i,
           errorMessage: a,
           hideInputFooter: u
         }
@@ -479,29 +479,29 @@ const er = ({
     /* @__PURE__ */ r.jsx(
       B,
       {
-        triggerRef: L,
-        label: `${c} options`,
-        getItemId: n,
-        selectRenderElements: p,
-        items: i,
-        open: G,
+        triggerRef: T,
+        label: `${p} options`,
+        getItemId: s,
+        selectRenderElements: n,
+        items: c,
+        open: V,
         disabledItemIdKeys: o,
-        direction: T,
+        direction: W,
         setOpenPopover: y,
         onSingleChange: v,
         value: E,
-        placement: d
+        placement: G
       }
     )
   ] });
 }, Qo = ({
   defaultValue: e,
-  description: s,
-  disableClearLogic: m,
+  description: i,
+  disableClearLogic: l,
   disabledItemIdKeys: o,
   errorMessage: a,
-  fullWidth: l = !0,
-  getItemId: n,
+  fullWidth: m = !0,
+  getItemId: s,
   getLabel: A,
   hideHintLabel: w,
   hideInputFooter: u,
@@ -509,50 +509,50 @@ const er = ({
   isDisabled: k,
   isInvalid: D,
   isRequired: x,
-  items: i,
-  label: c,
+  items: c,
+  label: p,
   name: N,
   onChange: f,
   placeholder: $,
-  placement: d,
+  placement: G,
   selectRenderElements: t,
-  value: p
+  value: n
 }) => {
-  const { isDisabled: S } = Q(X), h = k || S, [G, y] = F(!1), [O, b] = F(p ?? e), V = W(null), { direction: U } = R(), { wrapper: L } = M({}), T = P(
+  const { isDisabled: S } = Q(X), h = k || S, [V, y] = F(!1), [U, L] = F(n ?? e), b = M(null), { direction: H } = R(), { wrapper: T } = O({}), W = P(
     (E) => {
-      b(E), f == null || f(E);
+      L(E), f == null || f(E);
     },
     [f]
   );
-  z(() => {
-    b(p ?? e);
-  }, [e, p]);
-  const v = p ?? O;
+  d(() => {
+    L(n ?? e);
+  }, [e, n]);
+  const v = n ?? U;
   return /* @__PURE__ */ r.jsxs("div", { children: [
-    /* @__PURE__ */ r.jsx(K, { name: N, value: v, getItemId: n }),
-    /* @__PURE__ */ r.jsxs("div", { className: L({ fullWidth: l }), children: [
+    /* @__PURE__ */ r.jsx(K, { name: N, value: v, getItemId: s }),
+    /* @__PURE__ */ r.jsxs("div", { className: T({ fullWidth: m }), children: [
       /* @__PURE__ */ r.jsx(
         Y,
         {
-          label: c,
+          label: p,
           hideHintLabel: w,
           hideInputHeader: j,
           isRequired: x
         }
       ),
-      /* @__PURE__ */ r.jsx("div", { ref: V, children: /* @__PURE__ */ r.jsx(
-        lr,
+      /* @__PURE__ */ r.jsx("div", { ref: b, children: /* @__PURE__ */ r.jsx(
+        mr,
         {
-          fullWidth: l,
+          fullWidth: m,
           isDisabled: h,
           isInvalid: D,
           placeholder: $,
           value: v,
-          onChange: T,
-          getItemId: n,
+          onChange: W,
+          getItemId: s,
           getLabel: A,
-          label: c,
-          disableClearLogic: m,
+          label: p,
+          disableClearLogic: l,
           setOpenPopover: y,
           selectRenderElements: t
         }
@@ -560,7 +560,7 @@ const er = ({
       /* @__PURE__ */ r.jsx(
         Z,
         {
-          description: s,
+          description: i,
           errorMessage: a,
           hideInputFooter: u
         }
@@ -569,17 +569,17 @@ const er = ({
     /* @__PURE__ */ r.jsx(
       B,
       {
-        label: `${c} options`,
-        triggerRef: V,
-        items: i,
-        open: G,
-        getItemId: n,
+        label: `${p} options`,
+        triggerRef: b,
+        items: c,
+        open: V,
+        getItemId: s,
         selectRenderElements: t,
         disabledItemIdKeys: o,
-        direction: U,
+        direction: H,
         setOpenPopover: y,
-        onMultiChange: T,
-        placement: d,
+        onMultiChange: W,
+        placement: G,
         value: v
       }
     )