@cronocode/react-box 3.0.18 → 3.0.20

package/components/dataGrid.mjs

@@ -1,18 +1,18 @@
-var le = Object.defineProperty;
-var ae = (u, e, t) => e in u ? le(u, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : u[e] = t;
-var a = (u, e, t) => ae(u, typeof e != "symbol" ? e + "" : e, t);
-import { jsx as r, jsxs as d, Fragment as ue } from "react/jsx-runtime";
-import m from "../box.mjs";
+var ae = Object.defineProperty;
+var ue = (u, e, t) => e in u ? ae(u, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : u[e] = t;
+var a = (u, e, t) => ue(u, typeof e != "symbol" ? e + "" : e, t);
+import { jsx as r, jsxs as c, Fragment as he } from "react/jsx-runtime";
+import g from "../box.mjs";
 import j from "./grid.mjs";
-import he, { useMemo as E, useState as z, forwardRef as ce, useRef as de, useCallback as ge, useImperativeHandle as me } from "react";
-import { F as q, m as V, A as $, b as Y, D as pe, P as K, G as H, C as fe, S as Ce, d as we } from "../core.mjs";
+import de, { useMemo as E, useState as z, forwardRef as ce, useRef as me, useCallback as ge, useImperativeHandle as pe } from "react";
+import { F as q, m as D, A as $, b as Y, D as fe, P as K, G as H, C as Ce, S as we, d as ye } from "../core.mjs";
 import p from "./button.mjs";
-import S from "./checkbox.mjs";
+import V from "./checkbox.mjs";
 import C from "./flex.mjs";
 import J from "./tooltip.mjs";
-import ye from "./baseSvg.mjs";
-import ve from "./textbox.mjs";
-const Re = "NO_PIN";
+import ve from "./baseSvg.mjs";
+import Re from "./textbox.mjs";
+const be = "NO_PIN";
 class G {
   constructor(e, t, i) {
     a(this, "columns", []);
@@ -20,16 +20,16 @@ class G {
     a(this, "_inlineWidth");
     a(this, "resizeColumn", (e) => {
       this.grid.isResizeMode = !0;
-      const t = e.pageX, { MIN_COLUMN_WIDTH_PX: i, update: o } = this.grid, s = this.leafs.sumBy((c) => c.inlineWidth) - this.leafs.length * i, n = this.leafs.toRecord((c) => [c.key, c.inlineWidth]), h = q.throttle((c) => {
-        const w = (c.pageX - t) * (this.pin === "RIGHT" ? -1 : 1);
+      const t = e.pageX, { MIN_COLUMN_WIDTH_PX: i, update: o } = this.grid, s = this.leafs.sumBy((d) => d.inlineWidth) - this.leafs.length * i, n = this.leafs.toRecord((d) => [d.key, d.inlineWidth]), h = q.throttle((d) => {
+        const w = (d.pageX - t) * (this.pin === "RIGHT" ? -1 : 1);
         this.leafs.forEach((y) => {
-          const k = n[y.key], L = s > 0 ? (k - i) / s * w : w / this.leafs.length, v = Math.round(k + L);
+          const k = n[y.key], x = s > 0 ? (k - i) / s * w : w / this.leafs.length, v = Math.round(k + x);
           y.setWidth(v < i ? i : v);
         }), this.grid.headerRows.clear(), this.grid.sizes.clear(), o();
-      }, 20), l = new AbortController(), g = (c) => {
+      }, 20), l = new AbortController(), m = (d) => {
         l.abort(), this.grid.isResizeMode = !1, o();
       };
-      window.addEventListener("mousemove", h, l), window.addEventListener("mouseup", g, l);
+      window.addEventListener("mousemove", h, l), window.addEventListener("mouseup", m, l);
     });
     a(this, "pinColumn", (e) => {
       this.isLeaf ? this._pin = e : this.columns.forEach((t) => t.pinColumn(e)), this.grid.pinColumn(this.uniqueKey, e);
@@ -153,7 +153,7 @@ class G {
     return this.isLeaf ? this.grid.columns.value.maxDeath - this.death : 1;
   }
 }
-class be {
+class ke {
   constructor(e, t, i) {
     this.grid = e, this.row = t, this.column = i;
   }
@@ -171,7 +171,7 @@ class Q {
     return `${((e = this.parentRow) == null ? void 0 : e.rowKey) ?? ""}${this.groupColumn.key}${this.groupValue}`;
   }
   get cells() {
-    return this.grid.columns.value.visibleLeafs.map((e) => new be(this.grid, this, e));
+    return this.grid.columns.value.visibleLeafs.map((e) => new ke(this.grid, this, e));
   }
   get expanded() {
     return this.grid.expandedGroupRow[this.rowKey];
@@ -198,7 +198,7 @@ class Q {
     this.grid.toggleGroupRow(this.rowKey);
   }
 }
-class ke {
+class xe {
   constructor(e, t, i) {
     this.grid = e, this.row = t, this.column = i;
   }
@@ -215,7 +215,7 @@ class X {
     return this.getRowKey();
   }
   get cells() {
-    return this.grid.columns.value.visibleLeafs.map((e) => new ke(this.grid, this, e));
+    return this.grid.columns.value.visibleLeafs.map((e) => new xe(this.grid, this, e));
   }
   get count() {
     return 1;
@@ -233,7 +233,7 @@ const P = "empty-cell", b = "row-number-cell", T = "row-selection-cell", f = "gr
 class Le {
   constructor(e, t) {
     a(this, "_sourceColumns", []);
-    a(this, "columns", V(() => {
+    a(this, "columns", D(() => {
       const e = this._sourceColumns.map((l) => l.getPinnedColumn("LEFT")).filter((l) => !!l), t = this._sourceColumns.map((l) => l.getPinnedColumn()).filter((l) => !!l), i = this._sourceColumns.map((l) => l.getPinnedColumn("RIGHT")).filter((l) => !!l), o = [...e, ...t, ...i].flatMap((l) => l.flatColumns), s = o.filter((l) => l.isLeaf), n = o.filter((l) => l.isLeaf && l.isVisible), h = o.maxBy((l) => l.death) + 1;
       return {
         left: e,
@@ -245,20 +245,20 @@ class Le {
         maxDeath: h
       };
     }));
-    a(this, "headerRows", V(() => this.columns.value.flat.groupBy((t) => t.death).sortBy((t) => t.key).map((t) => {
+    a(this, "headerRows", D(() => this.columns.value.flat.groupBy((t) => t.death).sortBy((t) => t.key).map((t) => {
       var o, s, n;
-      const i = t.values.groupBy((h) => h.pin ?? Re).toRecord((h) => [h.key, h.values]);
+      const i = t.values.groupBy((h) => h.pin ?? be).toRecord((h) => [h.key, h.values]);
       return [
         ...((o = i.LEFT) == null ? void 0 : o.filter((h) => h.isVisible)) ?? [],
         ...((s = i.NO_PIN) == null ? void 0 : s.filter((h) => h.isVisible)) ?? [],
         ...((n = i.RIGHT) == null ? void 0 : n.filter((h) => h.isVisible)) ?? []
       ];
     })));
-    a(this, "gridTemplateColumns", V(() => {
+    a(this, "gridTemplateColumns", D(() => {
       const { visibleLeafs: e } = this.columns.value, t = e.sumBy((n) => n.pin === "RIGHT" ? 1 : 0), i = e.length - t - 1, o = i > 0 ? `repeat(${i}, max-content)` : "", s = t > 0 ? `repeat(${t}, max-content)` : "";
       return `${o} auto ${s}`;
     }));
-    a(this, "rows", V(() => {
+    a(this, "rows", D(() => {
       let e = this.props.data;
       if (this._sortColumn && (e = e.sortBy((t) => t[this._sortColumn], this._sortDirection)), this.groupColumns.length > 0) {
         const t = (i, o, s) => {
@@ -266,19 +266,19 @@ class Le {
           o = o.removeBy((l) => l === n);
           const h = this.columns.value.leafs.findOrThrow((l) => l.key === n);
           return this._sortColumn === f && (i = i.sortBy((l) => l[n], this._sortDirection)), i.groupBy((l) => l[n]).map((l) => {
-            let g;
-            o.length > 0 ? g = t(l.values, o, s + 1) : g = l.values.map((w, y) => new X(this, w, s + 1 + y));
-            const c = new Q(this, h, g, s, l.key);
-            return s += 1, c.expanded && (s += g.length), c;
+            let m;
+            o.length > 0 ? m = t(l.values, o, s + 1) : m = l.values.map((w, y) => new X(this, w, s + 1 + y));
+            const d = new Q(this, h, m, s, l.key);
+            return s += 1, d.expanded && (s += m.length), d;
           });
         };
         return t(e, this.groupColumns, 0);
       }
       return e.map((t, i) => new X(this, t, i));
     }));
-    a(this, "flatRows", V(() => this.rows.value.flatMap((e) => e.flatRows)));
-    a(this, "sizes", V(() => {
-      console.log("sizes");
+    a(this, "flatRows", D(() => this.rows.value.flatMap((e) => e.flatRows)));
+    a(this, "sizes", D(() => {
+      console.debug("\x1B[36m%s\x1B[0m", "[react-box]: DataGrid sizes memo");
       const e = this.columns.value.flat.reduce((o, s) => {
         const { inlineWidth: n } = s;
         return typeof n == "number" && (o[s.widthVarName] = `${s.inlineWidth}px`), s.pin === "LEFT" && (o[s.leftVarName] = `${s.left}px`), s.pin === "RIGHT" && (o[s.rightVarName] = `${s.right}px`), o;
@@ -360,33 +360,33 @@ function _e(u) {
   const e = E(() => new Le(u, () => i((s) => s + 1)), [u]), [t, i] = z(0);
   return E(() => Object.create(Object.getPrototypeOf(e), Object.getOwnPropertyDescriptors(e)), [e, t]);
 }
-function xe(u) {
-  const { column: e } = u, { key: t, pin: i, left: o, right: s, isEdge: n, isLeaf: h, leafs: l, grid: g, header: c, gridRows: w, widthVarName: y, leftVarName: k, rightVarName: L, inlineWidth: v } = e, _ = t === P, x = t === f, R = t === b, W = t === T, I = i === "LEFT", D = i === "RIGHT", B = I || i === "RIGHT", M = I && o === 0, O = I && n, te = D && n, ie = D && s === 0, A = h && !_ && !R && !W, se = h ? 1 : l.length, oe = !R && !W, F = !R && !W, re = E(() => {
+function Te(u) {
+  const { column: e } = u, { key: t, pin: i, left: o, right: s, isEdge: n, isLeaf: h, leafs: l, grid: m, header: d, gridRows: w, widthVarName: y, leftVarName: k, rightVarName: x, inlineWidth: v } = e, L = t === P, _ = t === f, R = t === b, W = t === T, I = i === "LEFT", B = i === "RIGHT", S = I || i === "RIGHT", M = I && o === 0, O = I && n, ie = B && n, se = B && s === 0, A = h && !L && !R && !W, oe = h ? 1 : l.length, re = !R && !W, F = !R && !W, ne = E(() => {
     if (R) return null;
-    if (W) return /* @__PURE__ */ r(S, { m: 1 });
-    if (x) {
-      if (g.groupColumns.length === 1) {
-        const U = g.columns.value.leafs.findOrThrow((ne) => ne.key === g.groupColumns[0]);
+    if (W) return /* @__PURE__ */ r(V, { m: 1 });
+    if (_) {
+      if (m.groupColumns.length === 1) {
+        const U = m.columns.value.leafs.findOrThrow((le) => le.key === m.groupColumns[0]);
         return U.header ?? U.key;
       }
       return "Group";
     }
-    return c ?? t;
-  }, [g.groupColumns]);
+    return d ?? t;
+  }, [m.groupColumns]);
   return /* @__PURE__ */ r(
     C,
     {
       component: "datagrid.header.cell",
-      variant: { isRowNumber: R, isPinned: B, isFirstLeftPinned: M, isLastLeftPinned: O, isFirstRightPinned: te, isLastRightPinned: ie, isSortable: A },
+      variant: { isRowNumber: R, isPinned: S, isFirstLeftPinned: M, isLastLeftPinned: O, isFirstRightPinned: ie, isLastRightPinned: se, isSortable: A },
       gridRow: w,
-      gridColumn: se,
+      gridColumn: oe,
       style: {
         width: `var(${y})`,
         left: I ? `var(${k})` : void 0,
-        right: D ? `var(${L})` : void 0
+        right: B ? `var(${x})` : void 0
       },
-      children: !_ && /* @__PURE__ */ d(ue, { children: [
-        /* @__PURE__ */ r(C, { width: "fit", height: "fit", jc: e.align, props: { onClick: A ? () => e.sortColumn() : void 0 }, children: /* @__PURE__ */ d(
+      children: !L && /* @__PURE__ */ c(he, { children: [
+        /* @__PURE__ */ r(C, { width: "fit", height: "fit", jc: e.align, props: { onClick: A ? () => e.sortColumn() : void 0 }, children: /* @__PURE__ */ c(
           C,
           {
             overflow: "hidden",
@@ -395,22 +395,22 @@ function xe(u) {
             transition: "none",
             pl: e.align ? void 0 : 4,
             style: {
-              left: i ? void 0 : `var(${g.leftEdgeVarName})`
+              left: i ? void 0 : `var(${m.leftEdgeVarName})`
             },
             children: [
-              /* @__PURE__ */ r(m, { overflow: "hidden", textOverflow: "ellipsis", textWrap: "nowrap", children: re }),
-              t === g.sortColumn && /* @__PURE__ */ r(m, { pl: (v ?? 0) < 58 ? 0 : 2, children: /* @__PURE__ */ r($, { width: "16px", rotate: g.sortDirection === "ASC" ? 0 : 180, fill: "violet-950" }) }),
-              F && /* @__PURE__ */ r(m, { minWidth: 10 })
+              /* @__PURE__ */ r(g, { overflow: "hidden", textOverflow: "ellipsis", textWrap: "nowrap", children: ne }),
+              t === m.sortColumn && /* @__PURE__ */ r(g, { pl: (v ?? 0) < 58 ? 0 : 2, children: /* @__PURE__ */ r($, { width: "16px", rotate: m.sortDirection === "ASC" ? 0 : 180, fill: "violet-950" }) }),
+              F && /* @__PURE__ */ r(g, { minWidth: 10 })
             ]
           }
         ) }),
-        oe && /* @__PURE__ */ r(Te, { column: e }),
-        F && /* @__PURE__ */ r(Ge, { column: e })
+        re && /* @__PURE__ */ r(Ge, { column: e }),
+        F && /* @__PURE__ */ r(Ee, { column: e })
       ] })
     }
   );
 }
-function Te(u) {
+function Ge(u) {
   const { column: e } = u;
   return /* @__PURE__ */ r(
     C,
@@ -422,22 +422,22 @@ function Te(u) {
       left: e.pin !== "RIGHT" ? void 0 : 0,
       py: 3,
       children: /* @__PURE__ */ r(
-        m,
+        g,
         {
           cursor: "col-resize",
           px: 0.75,
           className: "resizer",
           height: "fit",
           props: { onMouseDown: e.resizeColumn, onTouchStart: e.resizeColumn },
-          children: /* @__PURE__ */ r(m, { width: 0.5, height: "fit", bgColor: "gray-400", hoverGroup: { resizer: { bgColor: "gray-600" } } })
+          children: /* @__PURE__ */ r(g, { width: 0.5, height: "fit", bgColor: "gray-400", hoverGroup: { resizer: { bgColor: "gray-600" } } })
         }
       )
     }
   );
 }
-function Ge(u) {
-  const { column: e } = u, [t, i, o] = Y({ hideOnScroll: !0, event: "mousedown" }), [s, n] = z({ top: 0, left: 0 }), h = E(() => s.left > window.innerWidth / 2, [s.left]), l = e.isLeaf && (e.grid.sortColumn !== e.key || e.grid.sortDirection === "DESC"), g = e.isLeaf && (e.grid.sortColumn !== e.key || e.grid.sortDirection === "ASC"), c = e.isLeaf && e.grid.sortColumn === e.key, w = e.pin !== "LEFT", y = e.pin !== "RIGHT", k = !!e.pin, L = e.isLeaf && e.key !== f, v = e.isLeaf && e.key === f, _ = l || g || c, x = w || y || k;
-  return /* @__PURE__ */ r(C, { position: "absolute", right: e.pin === "RIGHT" ? 2.5 : 4, top: "1/2", translateY: -3, ai: "center", children: /* @__PURE__ */ d(
+function Ee(u) {
+  const { column: e } = u, [t, i, o] = Y({ hideOnScroll: !0, event: "mousedown" }), [s, n] = z({ top: 0, left: 0 }), h = E(() => s.left > window.innerWidth / 2, [s.left]), l = e.isLeaf && (e.grid.sortColumn !== e.key || e.grid.sortDirection === "DESC"), m = e.isLeaf && (e.grid.sortColumn !== e.key || e.grid.sortDirection === "ASC"), d = e.isLeaf && e.grid.sortColumn === e.key, w = e.pin !== "LEFT", y = e.pin !== "RIGHT", k = !!e.pin, x = e.isLeaf && e.key !== f, v = e.isLeaf && e.key === f, L = l || m || d, _ = w || y || k;
+  return /* @__PURE__ */ r(C, { position: "absolute", right: e.pin === "RIGHT" ? 2.5 : 4, top: "1/2", translateY: -3, ai: "center", children: /* @__PURE__ */ c(
     p,
     {
       clean: !0,
@@ -455,8 +455,8 @@ function Ge(u) {
       bgColor: "gray-200",
       hover: { bgColor: "gray-300" },
       children: [
-        /* @__PURE__ */ r(pe, { fill: "violet-950" }),
-        t && /* @__PURE__ */ d(
+        /* @__PURE__ */ r(fe, { fill: "violet-950" }),
+        t && /* @__PURE__ */ c(
           J,
           {
             bgColor: "white",
@@ -474,7 +474,7 @@ function Ge(u) {
             ref: o,
             shadow: "medium-shadow",
             children: [
-              l && /* @__PURE__ */ d(
+              l && /* @__PURE__ */ c(
                 p,
                 {
                   clean: !0,
@@ -490,7 +490,7 @@ function Ge(u) {
                   ]
                 }
               ),
-              g && /* @__PURE__ */ d(
+              m && /* @__PURE__ */ c(
                 p,
                 {
                   clean: !0,
@@ -506,7 +506,7 @@ function Ge(u) {
                   ]
                 }
               ),
-              c && /* @__PURE__ */ d(
+              d && /* @__PURE__ */ c(
                 p,
                 {
                   clean: !0,
@@ -517,13 +517,13 @@ function Ge(u) {
                   hover: { bgColor: "gray-200" },
                   onClick: () => e.sortColumn(void 0),
                   children: [
-                    /* @__PURE__ */ r(m, { width: 4 }),
+                    /* @__PURE__ */ r(g, { width: 4 }),
                     "Clear Sort"
                   ]
                 }
               ),
-              _ && (x || L || v) && /* @__PURE__ */ r(m, { bb: 1, my: 2, borderColor: "gray-300" }),
-              w && /* @__PURE__ */ d(
+              L && (_ || x || v) && /* @__PURE__ */ r(g, { bb: 1, my: 2, borderColor: "gray-300" }),
+              w && /* @__PURE__ */ c(
                 p,
                 {
                   clean: !0,
@@ -539,7 +539,7 @@ function Ge(u) {
                   ]
                 }
               ),
-              y && /* @__PURE__ */ d(
+              y && /* @__PURE__ */ c(
                 p,
                 {
                   clean: !0,
@@ -555,7 +555,7 @@ function Ge(u) {
                   ]
                 }
               ),
-              k && /* @__PURE__ */ d(
+              k && /* @__PURE__ */ c(
                 p,
                 {
                   clean: !0,
@@ -566,13 +566,13 @@ function Ge(u) {
                   hover: { bgColor: "gray-200" },
                   onClick: () => e.pinColumn(),
                   children: [
-                    /* @__PURE__ */ r(m, { width: 4 }),
+                    /* @__PURE__ */ r(g, { width: 4 }),
                     "Unpin"
                   ]
                 }
               ),
-              _ && x && (L || v) && /* @__PURE__ */ r(m, { bb: 1, my: 2, borderColor: "gray-300" }),
-              L && /* @__PURE__ */ d(
+              L && _ && (x || v) && /* @__PURE__ */ r(g, { bb: 1, my: 2, borderColor: "gray-300" }),
+              x && /* @__PURE__ */ c(
                 p,
                 {
                   clean: !0,
@@ -584,17 +584,17 @@ function Ge(u) {
                   hover: { bgColor: "gray-200" },
                   onClick: e.toggleGrouping,
                   children: [
-                    /* @__PURE__ */ r(m, { children: /* @__PURE__ */ r(H, { width: "1rem", fill: "violet-950" }) }),
-                    /* @__PURE__ */ d(m, { textWrap: "nowrap", children: [
+                    /* @__PURE__ */ r(g, { children: /* @__PURE__ */ r(H, { width: "1rem", fill: "violet-950" }) }),
+                    /* @__PURE__ */ c(g, { textWrap: "nowrap", children: [
                       " Group by ",
                       e.header ?? e.key
                     ] })
                   ]
                 }
               ),
-              v && /* @__PURE__ */ d(p, { clean: !0, display: "flex", gap: 2, p: 3, cursor: "pointer", hover: { bgColor: "gray-200" }, onClick: e.grid.unGroupAll, children: [
-                /* @__PURE__ */ r(m, { children: /* @__PURE__ */ r(H, { width: "1rem", fill: "violet-950" }) }),
-                /* @__PURE__ */ r(m, { textWrap: "nowrap", children: " Un-Group All" })
+              v && /* @__PURE__ */ c(p, { clean: !0, display: "flex", gap: 2, p: 3, cursor: "pointer", hover: { bgColor: "gray-200" }, onClick: e.grid.unGroupAll, children: [
+                /* @__PURE__ */ r(g, { children: /* @__PURE__ */ r(H, { width: "1rem", fill: "violet-950" }) }),
+                /* @__PURE__ */ r(g, { textWrap: "nowrap", children: " Un-Group All" })
               ] })
             ]
           }
@@ -604,29 +604,29 @@ function Ge(u) {
   ) });
 }
 function N(u) {
-  const { children: e, column: t, style: i, ...o } = u, { key: s, pin: n, left: h, right: l, isEdge: g, align: c, widthVarName: w, leftVarName: y, rightVarName: k } = t, L = s === P, v = s === b, _ = s === T, x = n === "LEFT", R = n === "RIGHT", W = x || R, I = x && h === 0, D = x && g, B = R && g, M = R && l === 0, O = !_ && !L;
-  return /* @__PURE__ */ d(
+  const { children: e, column: t, style: i, ...o } = u, { key: s, pin: n, left: h, right: l, isEdge: m, align: d, widthVarName: w, leftVarName: y, rightVarName: k } = t, x = s === P, v = s === b, L = s === T, _ = n === "LEFT", R = n === "RIGHT", W = _ || R, I = _ && h === 0, B = _ && m, S = R && m, M = R && l === 0, O = !L && !x;
+  return /* @__PURE__ */ c(
     C,
     {
       component: "datagrid.cell",
       props: { role: "cell" },
-      variant: { isPinned: W, isFirstLeftPinned: I, isLastLeftPinned: D, isFirstRightPinned: B, isLastRightPinned: M, isRowNumber: v, isRowSelection: _ },
-      jc: c,
+      variant: { isPinned: W, isFirstLeftPinned: I, isLastLeftPinned: B, isFirstRightPinned: S, isLastRightPinned: M, isRowNumber: v, isRowSelection: L },
+      jc: d,
       style: {
         width: `var(${w})`,
-        left: x ? `var(${y})` : void 0,
+        left: _ ? `var(${y})` : void 0,
         right: R ? `var(${k})` : void 0,
         ...i
       },
       ...o,
       children: [
-        O && /* @__PURE__ */ r(m, { px: 4, textOverflow: "ellipsis", overflow: "hidden", textWrap: "nowrap", children: e }),
-        _ && e
+        O && /* @__PURE__ */ r(g, { px: 4, textOverflow: "ellipsis", overflow: "hidden", textWrap: "nowrap", children: e }),
+        L && e
       ]
     }
   );
 }
-function Ee(u) {
+function Pe(u) {
   const { row: e } = u;
   return /* @__PURE__ */ r(C, { className: "grid-row", display: "contents", props: { role: "rowgroup" }, children: e.cells.map((t) => {
     const { key: i, pin: o, groupColumnWidthVarName: s } = t.column, n = o === "RIGHT";
@@ -647,45 +647,45 @@ function Ee(u) {
         i
       );
     if (i === T)
-      return /* @__PURE__ */ r(N, { column: t.column, children: /* @__PURE__ */ r(S, { m: 1 }) }, i);
+      return /* @__PURE__ */ r(N, { column: t.column, children: /* @__PURE__ */ r(V, { m: 1 }) }, i);
     if (o !== e.groupingColumn.pin || i === P || i === b)
       return /* @__PURE__ */ r(N, { column: t.column, children: t.value }, i);
   }) });
 }
-function Pe(u) {
+function We(u) {
   const { row: e } = u;
-  return /* @__PURE__ */ r(C, { className: "grid-row", display: "contents", props: { role: "row" }, children: e.cells.map((t) => /* @__PURE__ */ r(N, { column: t.column, children: t.column.key === T ? /* @__PURE__ */ r(S, {}) : t.value }, t.column.key)) });
+  return /* @__PURE__ */ r(C, { className: "grid-row", display: "contents", props: { role: "row" }, children: e.cells.map((t) => /* @__PURE__ */ r(N, { column: t.column, children: t.column.key === T ? /* @__PURE__ */ r(V, {}) : t.value }, t.column.key)) });
 }
-function We(u) {
+function Ie(u) {
   const { grid: e } = u, t = E(() => e.groupColumns.length === 0 ? null : e.groupColumns.map((i, o) => {
     const s = e.columns.value.leafs.findOrThrow((n) => n.key === i);
-    return /* @__PURE__ */ d(he.Fragment, { children: [
+    return /* @__PURE__ */ c(de.Fragment, { children: [
       ">",
-      /* @__PURE__ */ d(C, { component: "datagrid.columnGroups.item", children: [
+      /* @__PURE__ */ c(C, { component: "datagrid.columnGroups.item", children: [
         s.header ?? s.key,
-        /* @__PURE__ */ r(p, { component: "datagrid.columnGroups.item.icon", onClick: () => e.toggleGrouping(s.key), children: /* @__PURE__ */ r(fe, { fill: "currentColor", width: "100%" }) })
+        /* @__PURE__ */ r(p, { component: "datagrid.columnGroups.item.icon", onClick: () => e.toggleGrouping(s.key), children: /* @__PURE__ */ r(Ce, { fill: "currentColor", width: "100%" }) })
       ] })
     ] }, i);
   }), [e.groupColumns]);
-  return /* @__PURE__ */ d(C, { component: "datagrid.columnGroups", position: "relative", children: [
-    /* @__PURE__ */ r(Ie, { grid: e }),
+  return /* @__PURE__ */ c(C, { component: "datagrid.columnGroups", position: "relative", children: [
+    /* @__PURE__ */ r(De, { grid: e }),
     t && /* @__PURE__ */ r(H, { width: "1rem", fill: "violet-950" }),
     t,
-    /* @__PURE__ */ d(C, { position: "absolute", justifySelf: "flex-end", right: 2, top: 2, className: "parent", children: [
-      /* @__PURE__ */ r(C, { position: "absolute", width: 8, height: 8, right: 0, jc: "center", children: /* @__PURE__ */ r(Ce, { fill: "violet-950", width: "1rem" }) }),
-      /* @__PURE__ */ r(ve, { placeholder: "Search...", height: 8, width: 50, zIndex: 1, bgColor: "transparent" })
+    /* @__PURE__ */ c(C, { position: "absolute", justifySelf: "flex-end", right: 2, top: 2, className: "parent", children: [
+      /* @__PURE__ */ r(C, { position: "absolute", width: 8, height: 8, right: 0, jc: "center", children: /* @__PURE__ */ r(we, { fill: "violet-950", width: "1rem" }) }),
+      /* @__PURE__ */ r(Re, { placeholder: "Search...", height: 8, width: 50, zIndex: 1, bgColor: "transparent" })
     ] })
   ] });
 }
-function Ie(u) {
+function De(u) {
   const { grid: e } = u, [t, i, o] = Y({ event: "mousedown" }), s = E(
     () => e.columns.value.leafs.filter(
       (n) => ![P, b, T, f].includes(n.key)
     ),
     [e.columns.value.leafs]
   );
-  return /* @__PURE__ */ d(p, { clean: !0, cursor: "pointer", p: 1, hover: { bgColor: "gray-200", borderRadius: 1 }, onClick: () => i(!t), children: [
-    /* @__PURE__ */ r(ye, { viewBox: "0 0 24 24", width: "20", fill: "currentColor", ...u, children: /* @__PURE__ */ r("path", { d: "M5 6h14M5 12h14M5 18h14", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }),
+  return /* @__PURE__ */ c(p, { clean: !0, cursor: "pointer", p: 1, hover: { bgColor: "gray-200", borderRadius: 1 }, onClick: () => i(!t), children: [
+    /* @__PURE__ */ r(ve, { viewBox: "0 0 24 24", width: "20", fill: "currentColor", ...u, children: /* @__PURE__ */ r("path", { d: "M5 6h14M5 12h14M5 18h14", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }),
     t && /* @__PURE__ */ r(
       J,
       {
@@ -703,7 +703,7 @@ function Ie(u) {
         ref: o,
         overflow: "auto",
         maxHeight: 100,
-        children: s.map((n) => /* @__PURE__ */ d(
+        children: s.map((n) => /* @__PURE__ */ c(
           p,
           {
             clean: !0,
@@ -716,7 +716,7 @@ function Ie(u) {
               h.stopPropagation(), n.toggleVisibility();
             },
             children: [
-              /* @__PURE__ */ r(S, { checked: n.isVisible, onChange: () => {
+              /* @__PURE__ */ r(V, { checked: n.isVisible, onChange: () => {
               }, focus: { outline: 0 } }),
               n.header ?? n.key
             ]
@@ -727,35 +727,36 @@ function Ie(u) {
     )
   ] });
 }
-function je(u) {
-  const e = _e(u), { isResizeMode: t } = e, i = E(() => (console.log("render - headers"), e.headerRows.value.map((n) => n.map((h) => /* @__PURE__ */ r(xe, { column: h }, h.uniqueKey)))), [e.headerRows.value]), o = de(null), s = ge(
+function Be(u) {
+  const e = _e(u), { isResizeMode: t } = e, i = E(() => (console.debug("\x1B[36m%s\x1B[0m", "[react-box]: DataGrid render headers"), e.headerRows.value.map((n) => n.map((h) => /* @__PURE__ */ r(Te, { column: h }, h.uniqueKey)))), [e.headerRows.value]), o = me(null), s = ge(
     q.throttle((n) => {
       var h;
       (h = o.current) == null || h.setScrollTop(n.target.scrollTop);
     }, 100),
     [o.current]
   );
-  return console.log("render - data grid"), /* @__PURE__ */ d(m, { component: "datagrid", style: e.sizes.value, props: { role: "presentation" }, children: [
-    /* @__PURE__ */ r(We, { grid: e }),
-    /* @__PURE__ */ d(m, { overflowX: "scroll", props: { onScroll: s }, children: [
+  return console.debug("\x1B[36m%s\x1B[0m", "[react-box]: DataGrid render"), /* @__PURE__ */ c(g, { component: "datagrid", style: e.sizes.value, props: { role: "presentation" }, children: [
+    /* @__PURE__ */ r(Ie, { grid: e }),
+    /* @__PURE__ */ c(g, { overflowX: "scroll", props: { onScroll: s }, children: [
       /* @__PURE__ */ r(j, { component: "datagrid.header", variant: { isResizeMode: t }, style: { gridTemplateColumns: e.gridTemplateColumns.value }, children: i }),
-      /* @__PURE__ */ r(Ne, { ref: o, grid: e })
+      /* @__PURE__ */ r(te, { ref: o, grid: e })
     ] }),
-    /* @__PURE__ */ d(m, { p: 3, bgColor: "gray-200", bt: 1, borderColor: "gray-400", children: [
+    /* @__PURE__ */ c(g, { p: 3, bgColor: "gray-200", bt: 1, borderColor: "gray-400", children: [
       "Rows: ",
       u.data.length
     ] })
   ] });
 }
-const Z = 10, ee = 25, Ve = Z + ee * 2;
-function De(u, e) {
-  const { grid: t } = u, i = we * t.ROW_HEIGHT, [o, s] = z(0), n = Math.max(0, Math.floor(o / i) - ee), h = E(() => (console.log("render - rows"), t.flatRows.value.take(Ve, n).map((c) => c instanceof Q ? /* @__PURE__ */ r(Ee, { row: c }, c.rowKey) : /* @__PURE__ */ r(Pe, { row: c }, c.rowKey))), [t.flatRows.value, n]);
-  me(e, () => ({
+Be.displayName = "DataGrid";
+const Z = 10, ee = 25, Ne = Z + ee * 2;
+function Ve(u, e) {
+  const { grid: t } = u, i = ye * t.ROW_HEIGHT, [o, s] = z(0), n = Math.max(0, Math.floor(o / i) - ee), h = E(() => (console.debug("\x1B[36m%s\x1B[0m", "[react-box]: DataGrid render rows"), t.flatRows.value.take(Ne, n).map((d) => d instanceof Q ? /* @__PURE__ */ r(Pe, { row: d }, d.rowKey) : /* @__PURE__ */ r(We, { row: d }, d.rowKey))), [t.flatRows.value, n]);
+  pe(e, () => ({
     setScrollTop: s
   }));
   const l = t.flatRows.value.length;
-  return /* @__PURE__ */ r(m, { height: t.ROW_HEIGHT * Z + 4, children: /* @__PURE__ */ r(
-    m,
+  return /* @__PURE__ */ r(g, { height: t.ROW_HEIGHT * Z + 4, children: /* @__PURE__ */ r(
+    g,
     {
       style: {
         height: `${l * i}px`
@@ -763,7 +764,6 @@ function De(u, e) {
       children: /* @__PURE__ */ r(
         j,
         {
-          props: { role: "presentation" },
           width: "max-content",
           minWidth: "fit",
           transition: "none",
@@ -777,7 +777,8 @@ function De(u, e) {
     }
   ) });
 }
-const Ne = ce(De);
+const te = ce(Ve);
+te.displayName = "Rows";
 export {
-  je as default
+  Be as default
 };

package/components/dropdown.cjs

@@ -1 +1 @@
-"use strict";const n=require("react/jsx-runtime"),r=require("react"),y=require("../box.cjs"),L=require("./textbox.cjs"),Q=require("./flex.cjs"),X=require("../core.cjs"),Z=require("./baseSvg.cjs"),K=require("./tooltip.cjs"),ee=require("./button.cjs");function te(p,m){const{name:i,defaultValue:g,value:w,multiple:u,isSearchable:x,searchPlaceholder:B,children:D,hideIcon:H,onChange:s,props:Y,...J}=p,[F,j]=r.useState(Array.isArray(g)?g:g?[g]:[]),c="value"in p?Array.isArray(w)?w:w?[w]:[]:F,[I,T]=r.useState(""),[a,V,b]=X.useVisibility(),N=r.useRef(null),_=r.useRef(null),[O,W]=r.useState(0),A=r.useMemo(()=>O>window.innerHeight/2,[O]),$=r.useMemo(()=>{var e;return A?((e=b.current)==null?void 0:e.getBoundingClientRect().height)??0:0},[A,b]),l=r.useMemo(()=>(Array.isArray(D)?D:[D]).flatMap(e=>e),[D]),C=r.useMemo(()=>l.filter(e=>{var t;return((t=e.type)==null?void 0:t.displayName)==="DropdownItem"}),[l]),f=r.useMemo(()=>C.filter(e=>x&&I?U(e).toLowerCase().includes(I.toLowerCase()):!0),[x,I,l]),h=r.useMemo(()=>l.find(e=>{var t;return((t=e.type)==null?void 0:t.displayName)==="DropdownUnselect"}),[l]),P=r.useMemo(()=>l.find(e=>{var t;return((t=e.type)==null?void 0:t.displayName)==="DropdownSelectAll"}),[l]),k=r.useMemo(()=>l.find(e=>{var t;return((t=e.type)==null?void 0:t.displayName)==="DropdownEmptyItem"}),[l]),M=r.useMemo(()=>l.find(e=>{var t;return((t=e.type)==null?void 0:t.displayName)==="DropdownDisplay"}),[l]),z=r.useMemo(()=>{if(M)return typeof M.props.children=="function"?M.props.children(c,a):M.props.children;const e=f.filter(o=>c.includes(o.props.value));if(u&&e.length>1)return e.map(o=>U(o)).join(", ");const t=e.at(0);return(t==null?void 0:t.props.children)??(t==null?void 0:t.props.value)??(u?null:h==null?void 0:h.props.children)},[u,f,c,h,a]),R=r.useCallback((e,...t)=>{if(t.length===0)j([]),s==null||s(void 0,[]);else if(u&&t.length>1){const o=t.map(d=>d.props.value);j(o),s==null||s(void 0,o)}else if(t.length===1){const o=t[0];if(u){const d=c.filter(q=>q!==o.props.value);d.length===c.length&&d.push(o.props.value),j(d),s==null||s(o.props.value,d)}else j([o.props.value]),s==null||s(o.props.value,[o.props.value])}u?(e.stopPropagation(),setTimeout(()=>{var o;return(o=N.current)==null?void 0:o.focus()},0)):(V(!1),setTimeout(()=>{var o;return(o=b.current)==null?void 0:o.focus()},0))},[u,c,j]);r.useEffect(()=>{a?setTimeout(()=>{var e,t,o;(e=N.current)==null||e.focus(),(o=(t=_.current)==null?void 0:t.querySelector('[aria-selected="true"]'))==null||o.scrollIntoView({block:"nearest"})},0):T("")},[a]);const E=P&&u&&f.length>c.length,G=h&&f.length>0&&!E;return n.jsxs(y,{width:"fit-content",children:[c.map(e=>n.jsx(L,{ref:m,name:i,type:"hidden",value:JSON.stringify(e)??""},JSON.stringify(e))),n.jsxs(ee,{ref:b,type:"button",component:"dropdown",onClick:()=>V(e=>!e),props:{tabIndex:0,...Y},...J,children:[x&&n.jsx(L,{display:a&&x?"block":"none",clean:!0,flex1:!0,width:1,minHeight:5,placeholder:B,value:I,onChange:e=>T(e.target.value),ref:N,props:{onClick:e=>{a&&x&&e.stopPropagation()}}}),n.jsx(Q,{component:"dropdown.display",display:a&&x?"none":"flex",children:z??n.jsx(n.Fragment,{children:" "})}),!H&&n.jsx(y,{children:n.jsx(Z,{viewBox:"0 0 10 6",width:"0.6rem",rotate:a?180:0,children:n.jsx("path",{stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"2",d:"m1 1 4 4 4-4"})})})]}),a&&n.jsx(K,{ref:_,top:A?void 0:0,bottom:A?2:void 0,style:{transform:`translateY(-${$}px)`},onPositionChange:e=>W(e.top-window.scrollY),children:(f.length>0||k)&&n.jsxs(y,{component:"dropdown.items",children:[G&&n.jsx(y,{component:"dropdown.unselect",selected:c.length===0,...h.props,props:{...h.props.props,onClick:e=>R(e)}}),E&&n.jsx(y,{component:"dropdown.selectAll",...P.props,props:{...P.props.props,onClick:e=>R(e,...C)}}),f.map(e=>{const{value:t,onClick:o,...d}=e.props;return n.jsx(y,{component:"dropdown.item",variant:u?"multiple":void 0,selected:c.includes(t),...d,props:{...d.props,onClick:q=>{o==null||o(q),R(q,e)}}},t)}),f.length===0&&k&&n.jsx(y,{component:"dropdown.emptyItem",...k.props})]})})]})}function S(p){const m=i=>null;return m.displayName=p,m}const v=r.forwardRef(te);v.Item=S("DropdownItem");v.Unselect=S("DropdownUnselect");v.SelectAll=S("DropdownSelectAll");v.EmptyItem=S("DropdownEmptyItem");v.Display=S("DropdownDisplay");function U(p){var m;if(p==null)return"";if(typeof p=="object"){const i=(m=p.props)==null?void 0:m.children;return i==null?"":typeof i=="object"?(Array.isArray(i)?i:[i]).map(w=>U(w)).join(""):i.toString()}return p.toString()}module.exports=v;
+"use strict";const n=require("react/jsx-runtime"),r=require("react"),y=require("../box.cjs"),L=require("./textbox.cjs"),Q=require("./flex.cjs"),X=require("../core.cjs"),Z=require("./baseSvg.cjs"),K=require("./tooltip.cjs"),ee=require("./button.cjs");function te(p,m){const{name:i,defaultValue:g,value:x,multiple:u,isSearchable:v,searchPlaceholder:B,children:D,hideIcon:H,onChange:s,props:Y,...J}=p,[F,j]=r.useState(Array.isArray(g)?g:g?[g]:[]),c="value"in p?Array.isArray(x)?x:x?[x]:[]:F,[I,T]=r.useState(""),[a,V,b]=X.useVisibility(),N=r.useRef(null),_=r.useRef(null),[O,W]=r.useState(0),A=r.useMemo(()=>O>window.innerHeight/2,[O]),$=r.useMemo(()=>{var e;return A?((e=b.current)==null?void 0:e.getBoundingClientRect().height)??0:0},[A,b]),l=r.useMemo(()=>(Array.isArray(D)?D:[D]).flatMap(e=>e),[D]),C=r.useMemo(()=>l.filter(e=>{var t;return((t=e.type)==null?void 0:t.displayName)==="DropdownItem"}),[l]),f=r.useMemo(()=>C.filter(e=>v&&I?U(e).toLowerCase().includes(I.toLowerCase()):!0),[v,I,l]),h=r.useMemo(()=>l.find(e=>{var t;return((t=e.type)==null?void 0:t.displayName)==="DropdownUnselect"}),[l]),P=r.useMemo(()=>l.find(e=>{var t;return((t=e.type)==null?void 0:t.displayName)==="DropdownSelectAll"}),[l]),k=r.useMemo(()=>l.find(e=>{var t;return((t=e.type)==null?void 0:t.displayName)==="DropdownEmptyItem"}),[l]),M=r.useMemo(()=>l.find(e=>{var t;return((t=e.type)==null?void 0:t.displayName)==="DropdownDisplay"}),[l]),z=r.useMemo(()=>{if(M)return typeof M.props.children=="function"?M.props.children(c,a):M.props.children;const e=f.filter(o=>c.includes(o.props.value));if(u&&e.length>1)return e.map(o=>U(o)).join(", ");const t=e.at(0);return(t==null?void 0:t.props.children)??(t==null?void 0:t.props.value)??(u?null:h==null?void 0:h.props.children)},[u,f,c,h,a]),R=r.useCallback((e,...t)=>{if(t.length===0)j([]),s==null||s(void 0,[]);else if(u&&t.length>1){const o=t.map(d=>d.props.value);j(o),s==null||s(void 0,o)}else if(t.length===1){const o=t[0];if(u){const d=c.filter(q=>q!==o.props.value);d.length===c.length&&d.push(o.props.value),j(d),s==null||s(o.props.value,d)}else j([o.props.value]),s==null||s(o.props.value,[o.props.value])}u?(e.stopPropagation(),setTimeout(()=>{var o;return(o=N.current)==null?void 0:o.focus()},0)):(V(!1),setTimeout(()=>{var o;return(o=b.current)==null?void 0:o.focus()},0))},[u,c,j]);r.useEffect(()=>{a?setTimeout(()=>{var e,t,o;(e=N.current)==null||e.focus(),(o=(t=_.current)==null?void 0:t.querySelector('[aria-selected="true"]'))==null||o.scrollIntoView({block:"nearest"})},0):T("")},[a]);const E=P&&u&&f.length>c.length,G=h&&f.length>0&&!E;return n.jsxs(y.default,{width:"fit-content",children:[c.map(e=>n.jsx(L,{ref:m,name:i,type:"hidden",value:JSON.stringify(e)??""},JSON.stringify(e))),n.jsxs(ee,{ref:b,type:"button",component:"dropdown",onClick:()=>V(e=>!e),props:{tabIndex:0,...Y},...J,children:[v&&n.jsx(L,{display:a&&v?"block":"none",clean:!0,flex1:!0,width:1,minHeight:5,placeholder:B,value:I,onChange:e=>T(e.target.value),ref:N,props:{onClick:e=>{a&&v&&e.stopPropagation()}}}),n.jsx(Q,{component:"dropdown.display",display:a&&v?"none":"flex",children:z??n.jsx(n.Fragment,{children:" "})}),!H&&n.jsx(y.default,{children:n.jsx(Z,{viewBox:"0 0 10 6",width:"0.6rem",rotate:a?180:0,children:n.jsx("path",{stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"2",d:"m1 1 4 4 4-4"})})})]}),a&&n.jsx(K,{ref:_,top:A?void 0:0,bottom:A?2:void 0,style:{transform:`translateY(-${$}px)`},onPositionChange:e=>W(e.top-window.scrollY),children:(f.length>0||k)&&n.jsxs(y.default,{component:"dropdown.items",children:[G&&n.jsx(y.default,{component:"dropdown.unselect",selected:c.length===0,...h.props,props:{...h.props.props,onClick:e=>R(e)}}),E&&n.jsx(y.default,{component:"dropdown.selectAll",...P.props,props:{...P.props.props,onClick:e=>R(e,...C)}}),f.map(e=>{const{value:t,onClick:o,...d}=e.props;return n.jsx(y.default,{component:"dropdown.item",variant:u?"multiple":void 0,selected:c.includes(t),...d,props:{...d.props,onClick:q=>{o==null||o(q),R(q,e)}}},t)}),f.length===0&&k&&n.jsx(y.default,{component:"dropdown.emptyItem",...k.props})]})})]})}function S(p){const m=i=>null;return m.displayName=p,m}const w=r.forwardRef(te);w.Item=S("DropdownItem");w.Unselect=S("DropdownUnselect");w.SelectAll=S("DropdownSelectAll");w.EmptyItem=S("DropdownEmptyItem");w.Display=S("DropdownDisplay");w.displayName="Dropdown";function U(p){var m;if(p==null)return"";if(typeof p=="object"){const i=(m=p.props)==null?void 0:m.children;return i==null?"":typeof i=="object"?(Array.isArray(i)?i:[i]).map(x=>U(x)).join(""):i.toString()}return p.toString()}module.exports=w;

package/components/dropdown.d.ts

@@ -17,7 +17,7 @@ interface DropdownItemProps<TVal> extends BoxProps {
 interface DropdownDisplayProps<TVal> extends Omit<BoxProps, 'children'> {
     children: ((selectedValues: TVal[], isOpen: boolean) => React.ReactNode) | React.ReactNode;
 }
-interface DropdownType {
+interface DropdownType extends React.FunctionComponent {
     <TVal>(props: Props<TVal> & RefAttributes<HTMLInputElement>): React.ReactNode;
     Item: <TVal>(props: DropdownItemProps<TVal>) => React.ReactNode;
     Unselect: (props: BoxProps) => React.ReactNode;

package/components/dropdown.mjs

@@ -10,7 +10,7 @@ import pe from "./button.mjs";
 function ie(l, m) {
   const {
     name: p,
-    defaultValue: g,
+    defaultValue: D,
     value: w,
     multiple: a,
     isSearchable: v,
@@ -20,7 +20,7 @@ function ie(l, m) {
     onChange: r,
     props: _,
     ...$
-  } = l, [z, x] = O(Array.isArray(g) ? g : g ? [g] : []), i = "value" in l ? Array.isArray(w) ? w : w ? [w] : [] : z, [A, C] = O(""), [d, E, b] = ne(), T = J(null), L = J(null), [H, G] = O(0), N = c(() => H > window.innerHeight / 2, [H]), Q = c(() => {
+  } = l, [z, x] = O(Array.isArray(D) ? D : D ? [D] : []), i = "value" in l ? Array.isArray(w) ? w : w ? [w] : [] : z, [A, C] = O(""), [d, E, b] = ne(), T = J(null), L = J(null), [H, G] = O(0), N = c(() => H > window.innerHeight / 2, [H]), Q = c(() => {
     var e;
     return N ? ((e = b.current) == null ? void 0 : e.getBoundingClientRect().height) ?? 0 : 0;
   }, [N, b]), s = c(
@@ -168,16 +168,17 @@ function ie(l, m) {
     )
   ] });
 }
-function D(l) {
+function I(l) {
   const m = (p) => null;
   return m.displayName = l, m;
 }
-const I = ee(ie);
-I.Item = D("DropdownItem");
-I.Unselect = D("DropdownUnselect");
-I.SelectAll = D("DropdownSelectAll");
-I.EmptyItem = D("DropdownEmptyItem");
-I.Display = D("DropdownDisplay");
+const g = ee(ie);
+g.Item = I("DropdownItem");
+g.Unselect = I("DropdownUnselect");
+g.SelectAll = I("DropdownSelectAll");
+g.EmptyItem = I("DropdownEmptyItem");
+g.Display = I("DropdownDisplay");
+g.displayName = "Dropdown";
 function R(l) {
   var m;
   if (l == null) return "";
@@ -188,5 +189,5 @@ function R(l) {
   return l.toString();
 }
 export {
-  I as default
+  g as default
 };