@cagatayfdn/flora-components 0.0.166 → 0.0.168

package/dist/components/Table/Table.js

@@ -1,117 +1,117 @@
 import { j as a } from "../../jsx-runtime-BcAkpsdy.js";
-import y, { useState as P, useEffect as Q } from "react";
-import { Z as be } from "../../index-Bkqwn3Ht.js";
-import Y from "../NoResult/NoResult.js";
-import { c as b } from "../../index-BHf7G3IG.js";
-import { s as o } from "../../Table.module-rFa4-NE2.js";
-import { ThemeAppearance as I, AppearanceSpinner as ee } from "../../enums/appearance.js";
-import te from "../Checkbox/Checkbox.js";
-import je from "../Loading/Loading.js";
-import ge from "../ScrollContainer/ScrollContainer.js";
-import ae from "./TableHeader.js";
-import me from "./TableSort.js";
-import we from "../Icon/index.js";
-import { FloraIcons as Ce } from "../../assets/icons/flora-icons.js";
-import { i } from "../../includes-8YTFrx85.js";
-import { _ as se, k as Ne } from "../../keys-B0bo5Q7o.js";
-import { _ as re, a as ke, b as ye } from "../../_reduce-DsUCMz4O.js";
-import { _ as Ee } from "../../Select-nhp2PiJK.js";
-function Re(l, n) {
-  for (var d = 0, c = n.length, f = []; d < c; )
-    l(n[d]) && (f[f.length] = n[d]), d += 1;
+import J, { useState as P, useMemo as Q, useRef as we, useEffect as Y } from "react";
+import { Z as Ce } from "../../index-Bkqwn3Ht.js";
+import ee from "../NoResult/NoResult.js";
+import { c as j } from "../../index-BHf7G3IG.js";
+import { s as i } from "../../Table.module-rFa4-NE2.js";
+import { ThemeAppearance as te, AppearanceSpinner as re } from "../../enums/appearance.js";
+import ae from "../Checkbox/Checkbox.js";
+import Ne from "../Loading/Loading.js";
+import ke from "../ScrollContainer/ScrollContainer.js";
+import se from "./TableHeader.js";
+import Ee from "./TableSort.js";
+import ye from "../Icon/index.js";
+import { FloraIcons as Re } from "../../assets/icons/flora-icons.js";
+import { i as c } from "../../includes-8YTFrx85.js";
+import { _ as le, k as Se } from "../../keys-B0bo5Q7o.js";
+import { _ as ne, a as ve, b as _e } from "../../_reduce-DsUCMz4O.js";
+import { _ as He } from "../../Select-nhp2PiJK.js";
+function Te(o, n) {
+  for (var l = 0, p = n.length, f = []; l < p; )
+    o(n[l]) && (f[f.length] = n[l]), l += 1;
   return f;
 }
-var Se = /* @__PURE__ */ function() {
-  function l(n, d) {
-    this.xf = d, this.f = n;
+var Le = /* @__PURE__ */ function() {
+  function o(n, l) {
+    this.xf = l, this.f = n;
   }
-  return l.prototype["@@transducer/init"] = re.init, l.prototype["@@transducer/result"] = re.result, l.prototype["@@transducer/step"] = function(n, d) {
-    return this.f(d) ? this.xf["@@transducer/step"](n, d) : n;
-  }, l;
-}(), _e = /* @__PURE__ */ se(function(n, d) {
-  return new Se(n, d);
+  return o.prototype["@@transducer/init"] = ne.init, o.prototype["@@transducer/result"] = ne.result, o.prototype["@@transducer/step"] = function(n, l) {
+    return this.f(l) ? this.xf["@@transducer/step"](n, l) : n;
+  }, o;
+}(), $e = /* @__PURE__ */ le(function(n, l) {
+  return new Le(n, l);
 });
-const ve = _e;
-var v = /* @__PURE__ */ se(
-  /* @__PURE__ */ ke(["filter"], ve, function(l, n) {
-    return Ee(n) ? ye(function(d, c) {
-      return l(n[c]) && (d[c] = n[c]), d;
-    }, {}, Ne(n)) : (
+const Fe = $e;
+var L = /* @__PURE__ */ le(
+  /* @__PURE__ */ ve(["filter"], Fe, function(o, n) {
+    return He(n) ? _e(function(l, p) {
+      return o(n[p]) && (l[p] = n[p]), l;
+    }, {}, Se(n)) : (
       // else
-      Re(l, n)
+      Te(o, n)
     );
   })
 );
-const Je = (l) => {
+const Ye = (o) => {
   const {
     columns: n = [],
-    dataSource: d = [],
-    totalCount: c,
+    dataSource: l = [],
+    totalCount: p,
     currentPage: f,
-    className: H,
-    wrapperClass: ne,
+    className: R,
+    wrapperClass: oe,
     title: de,
-    rowSelection: E = !1,
-    actionOnChange: T,
-    rowSelectionChange: p,
-    pagerVisible: L,
-    pagerOnChange: $,
-    columnRenderer: m,
-    rowRenderer: F,
-    pageSizeOnChange: A,
-    pageSize: V,
-    headerVisible: le = !0,
-    headerLeftItem: oe,
-    customFooterItem: ie,
-    isLoading: ce = !1,
-    footerAction: pe = !0,
-    pageSizeVisible: he = !0,
-    appearance: w = I.LIGHT,
-    fixedHeader: z,
-    showItemsText: B,
-    customHeader: O,
-    selectedItems: D = [],
-    scrollClass: G,
-    disabledItems: j = [],
+    rowSelection: S = !1,
+    actionOnChange: $,
+    rowSelectionChange: h,
+    pagerVisible: F,
+    pagerOnChange: A,
+    columnRenderer: k,
+    rowRenderer: V,
+    pageSizeOnChange: z,
+    pageSize: B,
+    headerVisible: ie = !0,
+    headerLeftItem: ce,
+    customFooterItem: pe,
+    isLoading: he = !1,
+    footerAction: fe = !0,
+    pageSizeVisible: ue = !0,
+    appearance: E = te.LIGHT,
+    fixedHeader: v,
+    showItemsText: O,
+    customHeader: D,
+    selectedItems: G = [],
+    scrollClass: K,
+    disabledItems: m = [],
     expandable: s,
-    virtualized: R
-  } = l, S = typeof R == "object" ? R : {}, [x, C] = P(D), [N, g] = P([]), fe = (e) => {
-    p && (e.target.checked ? (C(
-      d.filter((t) => !i(t, j))
-    ), p(
-      d.filter((t) => !i(t, j))
-    )) : (C([]), p([])));
-  }, xe = (e, t) => {
-    p && (e.target.checked ? (C([...x, t]), p([...x, t])) : (C(
-      v((r) => r.pk !== t.pk, x)
-    ), p(
-      v((r) => r.pk !== t.pk, x)
+    virtualized: _
+  } = o, u = typeof _ == "object" ? _ : {}, [x, y] = P(G), [w, C] = P([]), xe = (e) => {
+    h && (e.target.checked ? (y(
+      l.filter((t) => !c(t, m))
+    ), h(
+      l.filter((t) => !c(t, m))
+    )) : (y([]), h([])));
+  }, be = (e, t) => {
+    h && (e.target.checked ? (y([...x, t]), h([...x, t])) : (y(
+      L((r) => r.pk !== t.pk, x)
+    ), h(
+      L((r) => r.pk !== t.pk, x)
     )));
-  }, W = (e, t) => {
-    var h;
-    const r = i(e, N);
-    (s == null ? void 0 : s.expandStrategy) === "single" ? g(r ? [] : [e]) : g(r ? (u) => v((_) => _ !== e, u) : (u) => [...u, e]), (h = s == null ? void 0 : s.onExpand) == null || h.call(s, !r, t);
-  }, U = (e, t) => e == null ? void 0 : e.map((r, h) => /* @__PURE__ */ a.jsx(
+  }, H = (e, t) => {
+    var d;
+    const r = c(e, w);
+    (s == null ? void 0 : s.expandStrategy) === "single" ? C(r ? [] : [e]) : C(r ? (b) => L((T) => T !== e, b) : (b) => [...b, e]), (d = s == null ? void 0 : s.onExpand) == null || d.call(s, !r, t);
+  }, U = (e, t) => e == null ? void 0 : e.map((r, d) => /* @__PURE__ */ a.jsx(
     "td",
     {
       width: r.width,
-      onClick: (u) => {
-        r != null && r.onClick && (r == null || r.onClick(u, t, r, h));
+      onClick: (b) => {
+        r != null && r.onClick && (r == null || r.onClick(b, t, r, d));
       },
-      className: b(r.className, r.tdClassName),
+      className: j(r.className, r.tdClassName),
       children: r.render ? r.render(t[r.dataIndex], t) : t[r.dataIndex]
     },
-    `col-${h}`
-  )), k = n.length + (E ? 1 : 0) + (s ? 1 : 0), X = () => s ? /* @__PURE__ */ a.jsx("th", { className: "w-[48px]" }) : null, Z = () => E ? /* @__PURE__ */ a.jsx("th", { className: "w-[26px]", children: /* @__PURE__ */ a.jsx(
-    te,
+    `col-${d}`
+  )), N = n.length + (S ? 1 : 0) + (s ? 1 : 0), W = () => s ? /* @__PURE__ */ a.jsx("th", { className: "w-[48px]" }) : null, X = () => S ? /* @__PURE__ */ a.jsx("th", { className: "w-[26px]", children: /* @__PURE__ */ a.jsx(
+    ae,
     {
       name: "selectAll",
-      isDisabled: d.length === 0,
-      checked: d.length > 0 && d.length === x.length,
-      onChange: fe
+      isDisabled: l.length === 0,
+      checked: l.length > 0 && l.length === x.length,
+      onChange: xe
     }
-  ) }) : null, K = () => n == null ? void 0 : n.map((e, t) => {
-    var r, h;
+  ) }) : null, Z = () => n == null ? void 0 : n.map((e, t) => {
+    var r, d;
     return e.sortable ? /* @__PURE__ */ a.jsx(
       "th",
       {
@@ -119,12 +119,12 @@ const Je = (l) => {
         style: { width: e.width },
         className: e.className,
         children: /* @__PURE__ */ a.jsx(
-          me,
+          Ee,
           {
             title: (r = e.title) == null ? void 0 : r.toString().toLocaleUpperCase(),
-            onClick: (u, _) => {
-              var M;
-              return (M = e == null ? void 0 : e.onSort) == null ? void 0 : M.call(e, u, _);
+            onClick: (b, T) => {
+              var q;
+              return (q = e == null ? void 0 : e.onSort) == null ? void 0 : q.call(e, b, T);
             }
           }
         )
@@ -136,159 +136,166 @@ const Je = (l) => {
         "data-testid": "table-head-item",
         style: { width: e.width },
         className: e.className,
-        children: typeof e.title == "string" || e.title instanceof String ? (h = e.title) == null ? void 0 : h.toString().toLocaleUpperCase() : e.title
+        children: typeof e.title == "string" || e.title instanceof String ? (d = e.title) == null ? void 0 : d.toString().toLocaleUpperCase() : e.title
       },
       `table-header-${t}`
     );
-  }), q = (e, t) => s ? /* @__PURE__ */ a.jsx("td", { children: /* @__PURE__ */ a.jsx(
+  }), I = (e, t) => s ? /* @__PURE__ */ a.jsx("td", { children: /* @__PURE__ */ a.jsx(
     "span",
     {
       className: "inline-block transition-transform duration-200",
       style: {
         transform: t ? "rotate(90deg)" : "rotate(0deg)"
       },
-      children: s.rowExpandable && s.rowExpandable(e) ? /* @__PURE__ */ a.jsx(we, { name: Ce.ChevronRight }) : null
+      children: s.rowExpandable && s.rowExpandable(e) ? /* @__PURE__ */ a.jsx(ye, { name: Re.ChevronRight }) : null
     }
-  ) }) : null, J = (e, t) => E ? /* @__PURE__ */ a.jsx("td", { children: /* @__PURE__ */ a.jsx(
-    te,
+  ) }) : null, M = (e, t) => S ? /* @__PURE__ */ a.jsx("td", { children: /* @__PURE__ */ a.jsx(
+    ae,
     {
-      checked: i(e, x),
+      checked: c(e, x),
       name: `select-${t}`,
-      onChange: (r) => xe(r, e),
-      isDisabled: i(e, j)
+      onChange: (r) => be(r, e),
+      isDisabled: c(e, m)
     }
-  ) }) : null, ue = () => {
+  ) }) : null, ge = w.join(","), je = Q(() => {
     const e = [];
-    return d.forEach((t, r) => {
-      e.push({ kind: "data", item: t, index: r }), s && i(r, N) && e.push({ kind: "expanded", item: t, index: r });
+    return l.forEach((t, r) => {
+      e.push({ kind: "data", item: t, index: r }), s && c(r, w) && e.push({ kind: "expanded", item: t, index: r });
     }), e;
-  };
-  return Q(() => {
-    p && p(D.filter((e) => !i(e, j)));
-  }, [x, j]), Q(() => {
-    g([]);
+  }, [l, ge, !!s]), g = we({ className: R, fixedHeader: v, expandable: s, colSpan: N, toggleRow: H });
+  g.current = { className: R, fixedHeader: v, expandable: s, colSpan: N, toggleRow: H };
+  const me = Q(
+    () => ({
+      Table: (e) => /* @__PURE__ */ a.jsx(
+        "table",
+        {
+          ...e,
+          "data-testid": "table-content",
+          className: j(i.table, g.current.className, {
+            [i.fixed]: g.current.fixedHeader
+          })
+        }
+      ),
+      TableRow: ({ item: e, ...t }) => {
+        const r = g.current.expandable;
+        if (e.kind === "expanded")
+          return /* @__PURE__ */ a.jsx("tr", { ...t });
+        const d = r && r.rowExpandable ? r.rowExpandable(e.item) : !!r;
+        return /* @__PURE__ */ a.jsx(
+          "tr",
+          {
+            ...t,
+            "data-testid": "table-row",
+            onClick: () => {
+              r && r.rowExpandable && r.rowExpandable(e.item) && g.current.toggleRow(e.index, e.item);
+            },
+            className: j(t.className, {
+              "cursor-pointer": d
+            })
+          }
+        );
+      },
+      EmptyPlaceholder: () => /* @__PURE__ */ a.jsx("tbody", { "data-testid": "table-body", children: /* @__PURE__ */ a.jsx("tr", { children: /* @__PURE__ */ a.jsx("td", { colSpan: g.current.colSpan, children: /* @__PURE__ */ a.jsx(ee, {}) }) }) })
+    }),
+    []
+  );
+  return Y(() => {
+    h && h(G.filter((e) => !c(e, m)));
+  }, [x, m]), Y(() => {
+    C([]);
   }, [f]), /* @__PURE__ */ a.jsxs(
     "div",
     {
       "data-testid": "table-container",
-      className: b(o.wrapper, ne, {
-        [o[`${w}`]]: w
+      className: j(i.wrapper, oe, {
+        [i[`${E}`]]: E
       }),
       children: [
-        le && /* @__PURE__ */ a.jsx(
-          ae,
+        ie && /* @__PURE__ */ a.jsx(
+          se,
           {
             title: de,
-            showItemsText: B,
-            actionOnChange: T,
-            pageSize: V,
-            pageSizeOnChange: A,
-            pagerOnChange: $,
-            pagerVisible: L,
-            totalCount: c,
+            showItemsText: O,
+            actionOnChange: $,
+            pageSize: B,
+            pageSizeOnChange: z,
+            pagerOnChange: A,
+            pagerVisible: F,
+            totalCount: p,
             currentPage: f
           }
         ),
-        /* @__PURE__ */ a.jsxs("div", { className: o.tableWrap, children: [
-          ce && /* @__PURE__ */ a.jsx(
-            je,
+        /* @__PURE__ */ a.jsxs("div", { className: i.tableWrap, children: [
+          he && /* @__PURE__ */ a.jsx(
+            Ne,
             {
-              wrapperClass: o.tableLoading,
-              appearance: w === I.LIGHT ? ee.LIGHT : ee.DARK
+              wrapperClass: i.tableLoading,
+              appearance: E === te.LIGHT ? re.LIGHT : re.DARK
             }
           ),
-          O && O,
-          R ? /* @__PURE__ */ a.jsx(
-            be,
+          D && D,
+          _ ? /* @__PURE__ */ a.jsx(
+            Ce,
             {
-              style: { height: S.height ?? 400 },
-              data: ue(),
-              overscan: S.overscan,
-              increaseViewportBy: S.increaseViewportBy,
-              className: G || o.scrollWrap,
-              components: {
-                Table: (e) => /* @__PURE__ */ a.jsx(
-                  "table",
-                  {
-                    ...e,
-                    "data-testid": "table-content",
-                    className: b(o.table, H, {
-                      [o.fixed]: z
-                    })
-                  }
-                ),
-                TableHead: y.forwardRef(
-                  (e, t) => /* @__PURE__ */ a.jsx("thead", { ...e, ref: t, "data-testid": "table-head" })
-                ),
-                TableBody: y.forwardRef(
-                  (e, t) => /* @__PURE__ */ a.jsx("tbody", { ...e, ref: t, "data-testid": "table-body" })
-                ),
-                TableRow: ({ item: e, ...t }) => {
-                  if (e.kind === "expanded")
-                    return /* @__PURE__ */ a.jsx("tr", { ...t });
-                  const r = s && s.rowExpandable ? s.rowExpandable(e.item) : !!s;
-                  return /* @__PURE__ */ a.jsx(
-                    "tr",
-                    {
-                      ...t,
-                      "data-testid": "table-row",
-                      onClick: () => {
-                        s && s.rowExpandable && s.rowExpandable(e.item) && W(e.index, e.item);
-                      },
-                      className: b(t.className, {
-                        "cursor-pointer": r
-                      })
-                    }
-                  );
-                },
-                EmptyPlaceholder: () => /* @__PURE__ */ a.jsx("tbody", { "data-testid": "table-body", children: /* @__PURE__ */ a.jsx("tr", { children: /* @__PURE__ */ a.jsx("td", { colSpan: k, children: /* @__PURE__ */ a.jsx(Y, {}) }) }) })
+              className: K,
+              style: { height: u.height ?? 400 },
+              data: je,
+              components: me,
+              ...u.overscan != null && {
+                overscan: u.overscan
+              },
+              ...u.increaseViewportBy != null && {
+                increaseViewportBy: u.increaseViewportBy
+              },
+              ...u.initialItemCount != null && {
+                initialItemCount: u.initialItemCount
               },
               fixedHeaderContent: () => /* @__PURE__ */ a.jsxs("tr", { "data-testid": "table-row", children: [
+                W(),
                 X(),
-                Z(),
-                K()
+                Z()
               ] }),
               itemContent: (e, t) => {
                 if (t.kind === "expanded")
-                  return /* @__PURE__ */ a.jsx("td", { colSpan: k, className: "p-0 border-0", children: s == null ? void 0 : s.expandedRowRender(t.item) });
-                const r = i(t.index, N);
+                  return /* @__PURE__ */ a.jsx("td", { colSpan: N, className: "p-0 border-0", children: s == null ? void 0 : s.expandedRowRender(t.item) });
+                const r = c(t.index, w);
                 return /* @__PURE__ */ a.jsxs(a.Fragment, { children: [
-                  q(t.item, r),
-                  J(t.item, t.index),
-                  m ? m(n, t.item) : U(n, t.item)
+                  I(t.item, r),
+                  M(t.item, t.index),
+                  k ? k(n, t.item) : U(n, t.item)
                 ] });
               }
             }
-          ) : /* @__PURE__ */ a.jsx(ge, { className: G || o.scrollWrap, children: /* @__PURE__ */ a.jsxs(
+          ) : /* @__PURE__ */ a.jsx(ke, { className: K || i.scrollWrap, children: /* @__PURE__ */ a.jsxs(
             "table",
             {
               "data-testid": "table-content",
-              className: b(o.table, H, {
-                [o.fixed]: z
+              className: j(i.table, R, {
+                [i.fixed]: v
               }),
               children: [
                 /* @__PURE__ */ a.jsx("thead", { "data-testid": "table-head", children: /* @__PURE__ */ a.jsxs("tr", { "data-testid": "table-row", children: [
+                  W(),
                   X(),
-                  Z(),
-                  K()
+                  Z()
                 ] }) }),
-                /* @__PURE__ */ a.jsx("tbody", { "data-testid": "table-body", children: d.length > 0 ? d.map((e, t) => {
-                  const r = i(t, N);
-                  return F ? /* @__PURE__ */ a.jsx(y.Fragment, { children: F(e, t) }, `row-${t}`) : /* @__PURE__ */ a.jsxs(y.Fragment, { children: [
+                /* @__PURE__ */ a.jsx("tbody", { "data-testid": "table-body", children: l.length > 0 ? l.map((e, t) => {
+                  const r = c(t, w);
+                  return V ? /* @__PURE__ */ a.jsx(J.Fragment, { children: V(e, t) }, `row-${t}`) : /* @__PURE__ */ a.jsxs(J.Fragment, { children: [
                     /* @__PURE__ */ a.jsxs(
                       "tr",
                       {
                         "data-testid": "table-row",
                         onClick: () => {
-                          s && s.rowExpandable && s.rowExpandable(e) && W(t, e);
+                          s && s.rowExpandable && s.rowExpandable(e) && H(t, e);
                         },
-                        className: b({
+                        className: j({
                           "cursor-pointer": s && s.rowExpandable ? s.rowExpandable(e) : s
                         }),
                         children: [
-                          q(e, r),
-                          J(e, t),
-                          m ? m(n, e) : U(n, e)
+                          I(e, r),
+                          M(e, t),
+                          k ? k(n, e) : U(n, e)
                         ]
                       },
                       `table-row-${t}`
@@ -296,33 +303,33 @@ const Je = (l) => {
                     s && r && /* @__PURE__ */ a.jsx("tr", { children: /* @__PURE__ */ a.jsx(
                       "td",
                       {
-                        colSpan: k,
+                        colSpan: N,
                         className: "p-0 border-0",
                         children: s.expandedRowRender(e)
                       }
                     ) })
                   ] }, `row-${t}`);
-                }) : /* @__PURE__ */ a.jsx("tr", { children: /* @__PURE__ */ a.jsx("td", { colSpan: k, children: /* @__PURE__ */ a.jsx(Y, {}) }) }) })
+                }) : /* @__PURE__ */ a.jsx("tr", { children: /* @__PURE__ */ a.jsx("td", { colSpan: N, children: /* @__PURE__ */ a.jsx(ee, {}) }) }) })
               ]
             }
           ) })
         ] }),
-        pe && /* @__PURE__ */ a.jsx(
-          ae,
+        fe && /* @__PURE__ */ a.jsx(
+          se,
           {
             className: "mt-0",
-            showItemsText: B,
-            actionOnChange: T,
-            pageSize: V,
-            pageSizeOnChange: A,
-            pagerOnChange: $,
-            pagerVisible: L,
-            pageSizeVisible: he,
-            totalCount: c,
-            customItem: ie,
-            headerLeftItem: oe,
+            showItemsText: O,
+            actionOnChange: $,
+            pageSize: B,
+            pageSizeOnChange: z,
+            pagerOnChange: A,
+            pagerVisible: F,
+            pageSizeVisible: ue,
+            totalCount: p,
+            customItem: pe,
+            headerLeftItem: ce,
             currentPage: f,
-            appearance: w
+            appearance: E
           }
         )
       ]
@@ -330,5 +337,5 @@ const Je = (l) => {
   );
 };
 export {
-  Je as default
+  Ye as default
 };

package/dist/index.d.mts

@@ -2023,6 +2023,8 @@ declare type VirtualizedType = {
     overscan?: number;
     /** Enlarge the rendered viewport in px (top/bottom) to reduce blank flashes while scrolling. */
     increaseViewportBy?: number;
+    /** How many rows to render on the very first paint (useful for SSR). */
+    initialItemCount?: number;
 };
 
 export { }

package/dist/index.d.ts

@@ -2023,6 +2023,8 @@ declare type VirtualizedType = {
     overscan?: number;
     /** Enlarge the rendered viewport in px (top/bottom) to reduce blank flashes while scrolling. */
     increaseViewportBy?: number;
+    /** How many rows to render on the very first paint (useful for SSR). */
+    initialItemCount?: number;
 };
 
 export { }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cagatayfdn/flora-components",
-  "version": "0.0.166",
+  "version": "0.0.168",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",