@cagatayfdn/flora-components 0.0.130 → 0.0.132

package/dist/components/Table/Table.js

@@ -1,215 +1,257 @@
-import { j as s } from "../../jsx-runtime-BcAkpsdy.js";
-import { useState as Z, useEffect as I } from "react";
-import ee from "../NoResult/NoResult.js";
-import { c as j } from "../../index-BHf7G3IG.js";
-import { s as c } from "../../Table.module-DUqpZOLt.js";
-import { ThemeAppearance as T, AppearanceSpinner as $ } from "../../enums/appearance.js";
-import A from "../Checkbox/Checkbox.js";
-import te from "../Loading/Loading.js";
-import re from "../ScrollContainer/ScrollContainer.js";
-import O from "./TableHeader.js";
-import ae from "./TableSort.js";
-import { i as u } from "../../includes-8YTFrx85.js";
-import { _ as D, k as se } from "../../keys-B0bo5Q7o.js";
-import { _ as R, a as ne, b as ie } from "../../_reduce-DsUCMz4O.js";
-import { _ as le } from "../../Select-BE_y91ZN.js";
-function de(i, t) {
-  for (var a = 0, l = t.length, h = []; a < l; )
-    i(t[a]) && (h[h.length] = t[a]), a += 1;
-  return h;
+import { j as t } from "../../jsx-runtime-BcAkpsdy.js";
+import ae, { useState as F, useEffect as se } from "react";
+import ne from "../NoResult/NoResult.js";
+import { c as w } from "../../index-BHf7G3IG.js";
+import { s as f } from "../../Table.module-DUqpZOLt.js";
+import { ThemeAppearance as O, AppearanceSpinner as z } from "../../enums/appearance.js";
+import D from "../Checkbox/Checkbox.js";
+import oe from "../Loading/Loading.js";
+import le from "../ScrollContainer/ScrollContainer.js";
+import G from "./TableHeader.js";
+import ie from "./TableSort.js";
+import de from "../Icon/index.js";
+import { Icons as ce } from "../../assets/icons/icons.js";
+import { i as x } from "../../includes-8YTFrx85.js";
+import { _ as U, k as he } from "../../keys-B0bo5Q7o.js";
+import { _ as V, a as pe, b as fe } from "../../_reduce-DsUCMz4O.js";
+import { _ as xe } from "../../Select-BE_y91ZN.js";
+function ue(o, a) {
+  for (var n = 0, d = a.length, u = []; n < d; )
+    o(a[n]) && (u[u.length] = a[n]), n += 1;
+  return u;
 }
-var oe = /* @__PURE__ */ function() {
-  function i(t, a) {
-    this.xf = a, this.f = t;
+var ge = /* @__PURE__ */ function() {
+  function o(a, n) {
+    this.xf = n, this.f = a;
   }
-  return i.prototype["@@transducer/init"] = R.init, i.prototype["@@transducer/result"] = R.result, i.prototype["@@transducer/step"] = function(t, a) {
-    return this.f(a) ? this.xf["@@transducer/step"](t, a) : t;
-  }, i;
-}(), ce = /* @__PURE__ */ D(function(t, a) {
-  return new oe(t, a);
+  return o.prototype["@@transducer/init"] = V.init, o.prototype["@@transducer/result"] = V.result, o.prototype["@@transducer/step"] = function(a, n) {
+    return this.f(n) ? this.xf["@@transducer/step"](a, n) : a;
+  }, o;
+}(), je = /* @__PURE__ */ U(function(a, n) {
+  return new ge(a, n);
 });
-const he = ce;
-var z = /* @__PURE__ */ D(
-  /* @__PURE__ */ ne(["filter"], he, function(i, t) {
-    return le(t) ? ie(function(a, l) {
-      return i(t[l]) && (a[l] = t[l]), a;
-    }, {}, se(t)) : (
+const me = je;
+var N = /* @__PURE__ */ U(
+  /* @__PURE__ */ pe(["filter"], me, function(o, a) {
+    return xe(a) ? fe(function(n, d) {
+      return o(a[d]) && (n[d] = a[d]), n;
+    }, {}, he(a)) : (
       // else
-      de(i, t)
+      ue(o, a)
     );
   })
 );
-const Le = (i) => {
+const Oe = (o) => {
   const {
-    columns: t = [],
-    dataSource: a = [],
-    totalCount: l,
-    currentPage: h,
-    className: F,
-    wrapperClass: G,
-    title: V,
-    rowSelection: C = !1,
-    actionOnChange: m,
-    rowSelectionChange: d,
-    pagerVisible: w,
-    pagerOnChange: k,
-    columnRenderer: N,
-    pageSizeOnChange: S,
-    pageSize: _,
-    headerVisible: E = !0,
-    headerLeftItem: U,
-    customFooterItem: W,
-    isLoading: X = !1,
-    footerAction: B = !0,
-    pageSizeVisible: K = !0,
-    appearance: x = T.LIGHT,
-    fixedHeader: P,
-    showItemsText: y,
-    customHeader: L,
-    selectedItems: v = [],
-    scrollClass: q,
-    disabledItems: p = []
-  } = i, [o, g] = Z(v), J = (e) => {
-    d && (e.target.checked ? (g(
-      a.filter((n) => !u(n, p))
-    ), d(
-      a.filter((n) => !u(n, p))
-    )) : (g([]), d([])));
-  }, M = (e, n) => {
-    d && (e.target.checked ? (g([...o, n]), d([...o, n])) : (g(
-      z((r) => r.pk !== n.pk, o)
-    ), d(
-      z((r) => r.pk !== n.pk, o)
+    columns: a = [],
+    dataSource: n = [],
+    totalCount: d,
+    currentPage: u,
+    className: W,
+    wrapperClass: X,
+    title: B,
+    rowSelection: j = !1,
+    actionOnChange: k,
+    rowSelectionChange: c,
+    pagerVisible: S,
+    pagerOnChange: _,
+    columnRenderer: R,
+    pageSizeOnChange: y,
+    pageSize: v,
+    headerVisible: K = !0,
+    headerLeftItem: P,
+    customFooterItem: q,
+    isLoading: J = !1,
+    footerAction: M = !0,
+    pageSizeVisible: Q = !0,
+    appearance: m = O.LIGHT,
+    fixedHeader: Y,
+    showItemsText: L,
+    customHeader: H,
+    selectedItems: T = [],
+    scrollClass: Z,
+    disabledItems: g = [],
+    expandable: l
+  } = o, [h, C] = F(T), [$, A] = F([]), I = (e) => {
+    c && (e.target.checked ? (C(
+      n.filter((s) => !x(s, g))
+    ), c(
+      n.filter((s) => !x(s, g))
+    )) : (C([]), c([])));
+  }, ee = (e, s) => {
+    c && (e.target.checked ? (C([...h, s]), c([...h, s])) : (C(
+      N((r) => r.pk !== s.pk, h)
+    ), c(
+      N((r) => r.pk !== s.pk, h)
     )));
-  }, Q = (e, n) => e == null ? void 0 : e.map((r, f) => /* @__PURE__ */ s.jsx(
+  }, te = (e, s) => {
+    var i;
+    const r = x(e, $);
+    A(r ? (p) => N((b) => b !== e, p) : (p) => [...p, e]), (i = l == null ? void 0 : l.onExpand) == null || i.call(l, !r, s);
+  }, re = (e, s) => e == null ? void 0 : e.map((r, i) => /* @__PURE__ */ t.jsx(
     "td",
     {
       width: r.width,
-      onClick: (b) => {
-        r != null && r.onClick && (r == null || r.onClick(b, n, r, f));
+      onClick: (p) => {
+        r != null && r.onClick && (r == null || r.onClick(p, s, r, i));
       },
-      className: j(r.className, r.tdClassName),
-      children: r.render ? r.render(n[r.dataIndex], n) : n[r.dataIndex]
+      className: w(r.className, r.tdClassName),
+      children: r.render ? r.render(s[r.dataIndex], s) : s[r.dataIndex]
     },
-    `col-${f}`
+    `col-${i}`
   ));
-  return I(() => {
-    d && d(
-      v.filter((e) => !u(e, p))
-    );
-  }, [o, p]), /* @__PURE__ */ s.jsxs(
+  return se(() => {
+    c && c(T.filter((e) => !x(e, g)));
+  }, [h, g]), /* @__PURE__ */ t.jsxs(
     "div",
     {
       "data-testid": "table-container",
-      className: j(c.wrapper, G, {
-        [c[`${x}`]]: x
+      className: w(f.wrapper, X, {
+        [f[`${m}`]]: m
       }),
       children: [
-        E && /* @__PURE__ */ s.jsx(
-          O,
+        K && /* @__PURE__ */ t.jsx(
+          G,
           {
-            title: V,
-            showItemsText: y,
-            actionOnChange: m,
-            pageSize: _,
-            pageSizeOnChange: S,
-            pagerOnChange: k,
-            pagerVisible: w,
-            totalCount: l,
-            currentPage: h
+            title: B,
+            showItemsText: L,
+            actionOnChange: k,
+            pageSize: v,
+            pageSizeOnChange: y,
+            pagerOnChange: _,
+            pagerVisible: S,
+            totalCount: d,
+            currentPage: u
           }
         ),
-        /* @__PURE__ */ s.jsxs("div", { className: c.tableWrap, children: [
-          X && /* @__PURE__ */ s.jsx(
-            te,
+        /* @__PURE__ */ t.jsxs("div", { className: f.tableWrap, children: [
+          J && /* @__PURE__ */ t.jsx(
+            oe,
             {
-              wrapperClass: c.tableLoading,
-              appearance: x === T.LIGHT ? $.LIGHT : $.DARK
+              wrapperClass: f.tableLoading,
+              appearance: m === O.LIGHT ? z.LIGHT : z.DARK
             }
           ),
-          L && L,
-          /* @__PURE__ */ s.jsx(re, { className: q || c.scrollWrap, children: /* @__PURE__ */ s.jsxs(
+          H && H,
+          /* @__PURE__ */ t.jsx(le, { className: Z || f.scrollWrap, children: /* @__PURE__ */ t.jsxs(
             "table",
             {
               "data-testid": "table-content",
-              className: j(c.table, F, {
-                [c.fixed]: P
+              className: w(f.table, W, {
+                [f.fixed]: Y
               }),
               children: [
-                /* @__PURE__ */ s.jsx("thead", { "data-testid": "table-head", children: /* @__PURE__ */ s.jsxs("tr", { "data-testid": "table-row", children: [
-                  C && /* @__PURE__ */ s.jsx("th", { style: { width: 26 }, children: /* @__PURE__ */ s.jsx(
-                    A,
+                /* @__PURE__ */ t.jsx("thead", { "data-testid": "table-head", children: /* @__PURE__ */ t.jsxs("tr", { "data-testid": "table-row", children: [
+                  l && /* @__PURE__ */ t.jsx("th", { className: "w-[48px]" }),
+                  j && /* @__PURE__ */ t.jsx("th", { className: "w-[26px]", children: /* @__PURE__ */ t.jsx(
+                    D,
                     {
                       name: "selectAll",
-                      isDisabled: a.length === 0,
-                      checked: a.length > 0 && a.length === o.length,
-                      onChange: J
+                      isDisabled: n.length === 0,
+                      checked: n.length > 0 && n.length === h.length,
+                      onChange: I
                     }
                   ) }),
-                  t == null ? void 0 : t.map((e, n) => {
-                    var r, f;
-                    return e.sortable ? /* @__PURE__ */ s.jsx(
+                  a == null ? void 0 : a.map((e, s) => {
+                    var r, i;
+                    return e.sortable ? /* @__PURE__ */ t.jsx(
                       "th",
                       {
                         "data-testid": "table-head-item",
                         style: { width: e.width },
                         className: e.className,
-                        children: /* @__PURE__ */ s.jsx(
-                          ae,
+                        children: /* @__PURE__ */ t.jsx(
+                          ie,
                           {
                             title: (r = e.title) == null ? void 0 : r.toString().toLocaleUpperCase(),
-                            onClick: (b, Y) => {
-                              var H;
-                              return (H = e == null ? void 0 : e.onSort) == null ? void 0 : H.call(e, b, Y);
+                            onClick: (p, b) => {
+                              var E;
+                              return (E = e == null ? void 0 : e.onSort) == null ? void 0 : E.call(e, p, b);
                             }
                           }
                         )
                       },
-                      `table-header-${n}`
-                    ) : /* @__PURE__ */ s.jsx(
+                      `table-header-${s}`
+                    ) : /* @__PURE__ */ t.jsx(
                       "th",
                       {
                         "data-testid": "table-head-item",
                         style: { width: e.width },
                         className: e.className,
-                        children: typeof e.title == "string" || e.title instanceof String ? (f = e.title) == null ? void 0 : f.toString().toLocaleUpperCase() : e.title
+                        children: typeof e.title == "string" || e.title instanceof String ? (i = e.title) == null ? void 0 : i.toString().toLocaleUpperCase() : e.title
                       },
-                      `table-header-${n}`
+                      `table-header-${s}`
                     );
                   })
                 ] }) }),
-                /* @__PURE__ */ s.jsx("tbody", { "data-testid": "table-body", children: a.length > 0 ? a.map((e, n) => /* @__PURE__ */ s.jsxs("tr", { children: [
-                  C && /* @__PURE__ */ s.jsx("td", { children: /* @__PURE__ */ s.jsx(
-                    A,
-                    {
-                      checked: u(e, o),
-                      name: `select-${n}`,
-                      onChange: (r) => M(r, e),
-                      isDisabled: u(e, p)
-                    }
-                  ) }),
-                  N ? N(t, e) : Q(t, e)
-                ] }, `row-${n}`)) : /* @__PURE__ */ s.jsx("tr", { children: /* @__PURE__ */ s.jsx("td", { colSpan: t.length + 1, children: /* @__PURE__ */ s.jsx(ee, {}) }) }) })
+                /* @__PURE__ */ t.jsx("tbody", { "data-testid": "table-body", children: n.length > 0 ? n.map((e, s) => {
+                  const r = x(s, $);
+                  return /* @__PURE__ */ t.jsxs(ae.Fragment, { children: [
+                    /* @__PURE__ */ t.jsxs("tr", { children: [
+                      l && /* @__PURE__ */ t.jsx(
+                        "td",
+                        {
+                          className: "text-center cursor-pointer pr-[0]!",
+                          onClick: () => te(s, e),
+                          children: /* @__PURE__ */ t.jsx(
+                            "span",
+                            {
+                              className: "inline-block transition-transform duration-200",
+                              style: {
+                                transform: r ? "rotate(90deg)" : "rotate(0deg)"
+                              },
+                              children: /* @__PURE__ */ t.jsx(de, { name: ce.ChevronRight })
+                            }
+                          )
+                        }
+                      ),
+                      j && /* @__PURE__ */ t.jsx("td", { children: /* @__PURE__ */ t.jsx(
+                        D,
+                        {
+                          checked: x(e, h),
+                          name: `select-${s}`,
+                          onChange: (i) => ee(i, e),
+                          isDisabled: x(e, g)
+                        }
+                      ) }),
+                      R ? R(a, e) : re(a, e)
+                    ] }),
+                    l && r && /* @__PURE__ */ t.jsx("tr", { children: /* @__PURE__ */ t.jsx(
+                      "td",
+                      {
+                        colSpan: a.length + (j ? 1 : 0) + (l ? 1 : 0),
+                        className: "p-0 border-0",
+                        children: l.expandedRowRender(e)
+                      }
+                    ) })
+                  ] }, `row-${s}`);
+                }) : /* @__PURE__ */ t.jsx("tr", { children: /* @__PURE__ */ t.jsx(
+                  "td",
+                  {
+                    colSpan: a.length + (j ? 1 : 0) + (l ? 1 : 0),
+                    children: /* @__PURE__ */ t.jsx(ne, {})
+                  }
+                ) }) })
               ]
             }
           ) })
         ] }),
-        B && /* @__PURE__ */ s.jsx(
-          O,
+        M && /* @__PURE__ */ t.jsx(
+          G,
           {
             className: "mt-0",
-            showItemsText: y,
-            actionOnChange: m,
-            pageSize: _,
-            pageSizeOnChange: S,
-            pagerOnChange: k,
-            pagerVisible: w,
-            pageSizeVisible: K,
-            totalCount: l,
-            customItem: W,
-            headerLeftItem: U,
-            currentPage: h,
-            appearance: x
+            showItemsText: L,
+            actionOnChange: k,
+            pageSize: v,
+            pageSizeOnChange: y,
+            pagerOnChange: _,
+            pagerVisible: S,
+            pageSizeVisible: Q,
+            totalCount: d,
+            customItem: q,
+            headerLeftItem: P,
+            currentPage: u,
+            appearance: m
           }
         )
       ]
@@ -217,5 +259,5 @@ const Le = (i) => {
   );
 };
 export {
-  Le as default
+  Oe as default
 };

package/dist/index.d.mts

@@ -496,6 +496,12 @@ export declare interface EventProps<T = HTMLElement> {
     onInvalid?: (e: React.FormEvent<T>) => void;
 }
 
+declare type ExpandableType = {
+    expandedRowRender: (record: any) => ReactNode;
+    rowExpandable?: (record: any) => boolean;
+    onExpand?: (expanded: boolean, record: any) => void;
+};
+
 export declare const FileUpload: React_2.ForwardRefExoticComponent<{
     type?: "number" | "email" | "search" | "text" | "url" | "tel" | "password" | "hidden" | undefined;
     id?: string | undefined;
@@ -1316,6 +1322,7 @@ export declare type TableProps = {
     fixedHeader?: boolean;
     customHeader?: ReactNode;
     scrollClass?: string;
+    expandable?: ExpandableType;
 } & TableHeaderProps;
 
 export declare const TableSort: (props: TableSortProps) => JSX_2.Element;

package/dist/index.d.ts

@@ -496,6 +496,12 @@ export declare interface EventProps<T = HTMLElement> {
     onInvalid?: (e: React.FormEvent<T>) => void;
 }
 
+declare type ExpandableType = {
+    expandedRowRender: (record: any) => ReactNode;
+    rowExpandable?: (record: any) => boolean;
+    onExpand?: (expanded: boolean, record: any) => void;
+};
+
 export declare const FileUpload: React_2.ForwardRefExoticComponent<{
     type?: "number" | "email" | "search" | "text" | "url" | "tel" | "password" | "hidden" | undefined;
     id?: string | undefined;
@@ -1316,6 +1322,7 @@ export declare type TableProps = {
     fixedHeader?: boolean;
     customHeader?: ReactNode;
     scrollClass?: string;
+    expandable?: ExpandableType;
 } & TableHeaderProps;
 
 export declare const TableSort: (props: TableSortProps) => JSX_2.Element;