@konstructio/ui 0.1.2-alpha.4 → 0.1.2-alpha.40

package/dist/components/VirtualizedTable/components/DotPaginate/DotPaginate.js

@@ -0,0 +1,165 @@
+import { jsx as i, jsxs as m } from "react/jsx-runtime";
+import { memo as u } from "react";
+import { cn as p } from "../../../../utils/index.js";
+import { C as g, a as d } from "../../../../chevron-left-C4LEg1fH.js";
+import { useTableContext as f } from "../../contexts/table.hook.js";
+const r = u(
+  ({
+    index: e,
+    currentPage: t,
+    handlePage: l
+  }) => /* @__PURE__ */ i("li", { children: /* @__PURE__ */ i(
+    "button",
+    {
+      type: "button",
+      onClick: () => l(e),
+      className: p("px-2.5 py-1 rounded-lg text-blue-600 cursor-pointer", {
+        "bg-blue-600 text-white": e === t
+      }),
+      children: e + 1
+    }
+  ) }, e)
+);
+r.displayName = "PageButton";
+const o = u(({ keyValue: e }) => /* @__PURE__ */ i("li", { className: "px-2", children: /* @__PURE__ */ i("span", { className: "text-blue-600 select-none", children: "..." }) }, e));
+o.displayName = "Ellipsis";
+const a = u(
+  ({
+    direction: e,
+    onClick: t,
+    disabled: l
+  }) => /* @__PURE__ */ i("li", { className: "flex items-center justify-center", children: /* @__PURE__ */ i("button", { onClick: t, disabled: l, children: /* @__PURE__ */ i(
+    e === "left" ? g : d,
+    {
+      className: p("h-6 w-6 cursor-pointer", {
+        "text-blue-600": !l,
+        "text-slate-400 cursor-not-allowed": l
+      })
+    }
+  ) }) })
+);
+a.displayName = "NavigationButton";
+const k = () => {
+  const { totalPages: e, page: t, handlePage: l } = f();
+  return /* @__PURE__ */ m("ul", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ i(
+      a,
+      {
+        direction: "left",
+        onClick: () => l(t - 1),
+        disabled: t === 0
+      }
+    ),
+    (() => {
+      if (e <= 5)
+        return Array.from({ length: e }, (s, c) => /* @__PURE__ */ i(
+          r,
+          {
+            index: c,
+            currentPage: t,
+            handlePage: l
+          },
+          c
+        ));
+      const n = [];
+      if (t < 3) {
+        for (let s = 0; s < 3; s++)
+          n.push(
+            /* @__PURE__ */ i(
+              r,
+              {
+                index: s,
+                currentPage: t,
+                handlePage: l
+              },
+              s
+            )
+          );
+        n.push(/* @__PURE__ */ i(o, { keyValue: "ellipsis" }, "ellipsis"));
+        for (let s = e - 2; s < e; s++)
+          n.push(
+            /* @__PURE__ */ i(
+              r,
+              {
+                index: s,
+                currentPage: t,
+                handlePage: l
+              },
+              s
+            )
+          );
+      } else if (t >= e - 5) {
+        n.push(
+          /* @__PURE__ */ i(
+            r,
+            {
+              index: 0,
+              currentPage: t,
+              handlePage: l
+            },
+            0
+          )
+        ), e > 6 && n.push(/* @__PURE__ */ i(o, { keyValue: "ellipsis" }, "ellipsis"));
+        for (let s = Math.max(1, e - 5); s < e; s++)
+          n.push(
+            /* @__PURE__ */ i(
+              r,
+              {
+                index: s,
+                currentPage: t,
+                handlePage: l
+              },
+              s
+            )
+          );
+      } else {
+        n.push(
+          /* @__PURE__ */ i(
+            r,
+            {
+              index: 0,
+              currentPage: t,
+              handlePage: l
+            },
+            0
+          )
+        ), t > 3 && n.push(/* @__PURE__ */ i(o, { keyValue: "ellipsis1" }, "ellipsis1"));
+        for (let s = t - 1; s <= t + 1; s++)
+          s > 0 && s < e - 1 && n.push(
+            /* @__PURE__ */ i(
+              r,
+              {
+                index: s,
+                currentPage: t,
+                handlePage: l
+              },
+              s
+            )
+          );
+        t < e - 4 && n.push(/* @__PURE__ */ i(o, { keyValue: "ellipsis2" }, "ellipsis2")), n.push(
+          /* @__PURE__ */ i(
+            r,
+            {
+              index: e - 1,
+              currentPage: t,
+              handlePage: l
+            },
+            e - 1
+          )
+        );
+      }
+      return n;
+    })(),
+    /* @__PURE__ */ i(
+      a,
+      {
+        direction: "right",
+        onClick: () => l(t + 1),
+        disabled: t >= e - 1
+      }
+    )
+  ] });
+};
+export {
+  k as DotPaginate
+};

package/dist/components/VirtualizedTable/components/DropdownPaginate/DropdownPaginate.js

@@ -0,0 +1,34 @@
+import { jsxs as i, jsx as a } from "react/jsx-runtime";
+import { useMemo as p, useCallback as l } from "react";
+import { Dropdown as c } from "../../../Dropdown/Dropdown.js";
+import { DEFAULT_PAGE_SIZES as g } from "../../constants/pagination.js";
+import { useTableContext as x } from "../../contexts/table.hook.js";
+const b = ({
+  pageSizes: n = g
+}) => {
+  const { pageSize: s, onPageSize: o, handlePage: t } = x(), r = p(
+    () => n.map(String).map((e) => ({ label: e, value: e })),
+    []
+  ), m = l(
+    (e) => {
+      o(Number(e)), t(0);
+    },
+    [t, o]
+  );
+  return /* @__PURE__ */ i("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ a("span", { children: "Show" }),
+    /* @__PURE__ */ a(
+      c,
+      {
+        className: "w-22 [&>div>p]:text-xs bg-white",
+        listItemClassName: "[&>p]:text-xs",
+        options: r,
+        value: s.toString(),
+        onChange: ({ target: e }) => m(e.value)
+      }
+    )
+  ] });
+};
+export {
+  b as DropdownPaginate
+};

package/dist/components/VirtualizedTable/components/Filter/Filter.js

@@ -0,0 +1,93 @@
+import { jsxs as m, jsx as l } from "react/jsx-runtime";
+import { d as O } from "../../../../debounce-BFejQm9P.js";
+import { useRef as R, useCallback as u, useMemo as p } from "react";
+import { Button as y } from "../../../Button/Button.js";
+import { Filter as s } from "../../../Filter/Filter.js";
+import { Input as B } from "../../../Input/Input.js";
+import { cn as N } from "../../../../utils/index.js";
+import { useTableContext as T } from "../../contexts/table.hook.js";
+const E = ({
+  actions: f,
+  multiSelectFilter: d,
+  placeholder: h,
+  showFilterInput: g = !0,
+  showResetButton: x = !0,
+  resetButtonClassName: C
+}) => {
+  const n = R(null), {
+    termOfSearch: o,
+    multiselectSelected: c,
+    onChangeTermOfSearch: a,
+    onSelectMultiselect: i
+  } = T(), S = u(
+    (e, t) => i(
+      e,
+      t.map((r) => r.id)
+    ),
+    [i]
+  ), b = u(() => {
+    a(""), n.current && (n.current.value = "");
+  }, [a]), F = p(
+    () => O((e) => {
+      a(e.target.value);
+    }, 500),
+    [a]
+  ), M = p(
+    () => !!o || Object.entries(c ?? {}).map(([, e]) => e).flat().length > 0,
+    [o, c]
+  );
+  return /* @__PURE__ */ m("div", { className: "w-full flex items-center justify-end pb-6", children: [
+    g && /* @__PURE__ */ l(
+      B,
+      {
+        ref: n,
+        placeholder: h,
+        isSearch: !0,
+        autoComplete: "false",
+        className: "w-72",
+        inputMode: "search",
+        onChange: F
+      }
+    ),
+    /* @__PURE__ */ m(s, { children: [
+      d?.map(
+        ({ key: e, label: t, position: r = "right", options: j }) => /* @__PURE__ */ l(
+          s.BadgeMultiSelect,
+          {
+            label: t,
+            position: r,
+            options: j,
+            onApply: (v) => {
+              S(e, v);
+            }
+          },
+          t
+        )
+      ),
+      f?.map(({ label: e, onClick: t, variant: r = "secondary" }) => /* @__PURE__ */ l(
+        y,
+        {
+          variant: r,
+          appearance: "compact",
+          onClick: t,
+          children: e
+        },
+        e
+      )),
+      x && /* @__PURE__ */ l(
+        s.ResetButton,
+        {
+          className: N(
+            "text-slate-700 hover:text-slate-700 disabled:text-slate-700/45 select-none",
+            C
+          ),
+          disabled: !M,
+          onClick: b
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  E as Filter
+};

package/dist/components/VirtualizedTable/components/FormPaginate/FormPaginate.js

@@ -0,0 +1,48 @@
+import { jsxs as i, jsx as t } from "react/jsx-runtime";
+import { useRef as l, useCallback as c } from "react";
+import { Input as p } from "../../../Input/Input.js";
+import { useTableContext as f } from "../../contexts/table.hook.js";
+const h = () => {
+  const r = l(null), { totalPages: e, handlePage: o } = f(), m = c(
+    (n) => {
+      n.preventDefault();
+      const s = new FormData(n.currentTarget), a = Number(s.get("jump-to")), u = (a < e ? a : e) || 1;
+      o(u - 1), r.current?.reset();
+    },
+    [o, e]
+  );
+  return /* @__PURE__ */ i(
+    "form",
+    {
+      "aria-label": "footer-pagination",
+      ref: r,
+      onSubmit: m,
+      className: "flex items-center gap-2",
+      children: [
+        /* @__PURE__ */ t("span", { className: "min-w-fit", children: "Jump to" }),
+        /* @__PURE__ */ t(
+          p,
+          {
+            type: "number",
+            className: "w-18 text-xs no-spinner",
+            name: "jump-to",
+            min: 1,
+            max: e,
+            required: !0
+          }
+        ),
+        /* @__PURE__ */ t(
+          "button",
+          {
+            type: "submit",
+            className: "text-xs text-blue-600 p-2 cursor-pointer",
+            children: "Go"
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  h as FormPaginate
+};

package/dist/components/VirtualizedTable/components/Header/Header.js

@@ -0,0 +1,84 @@
+import { jsx as r, jsxs as l } from "react/jsx-runtime";
+import { f as g } from "../../../../index-CSWGJT-v.js";
+import { useCallback as p } from "react";
+import { cn as s } from "../../../../utils/index.js";
+import u from "../../assets/chevron-up.js";
+import C from "../../assets/chevron-down.js";
+import { useTableContext as S } from "../../contexts/table.hook.js";
+const D = ({
+  className: n,
+  classNameArrows: i,
+  classNameActiveArrows: a
+}) => {
+  const { table: c, onSorting: o } = S(), d = p(
+    (t) => o([{ id: t.id, desc: !1 }]),
+    [o]
+  ), x = p(
+    (t) => o([{ id: t.id, desc: !0 }]),
+    [o]
+  );
+  return /* @__PURE__ */ r(
+    "thead",
+    {
+      className: s(
+        "font-semibold uppercase text-slate-500 text-xs not-italic bg-slate-100 overflow-hidden [clip-path:inset(-1px_-1px_0px_-1px_round_8px_8px_0px_0px)]",
+        n
+      ),
+      children: c.getHeaderGroups().map(({ id: t, headers: m }) => /* @__PURE__ */ r("tr", { children: m.map(({ id: f, column: e, getContext: h }) => /* @__PURE__ */ r(
+        "th",
+        {
+          scope: "col",
+          className: s(
+            "px-4 py-3 text-left text-xs",
+            e.columnDef.meta?.headerClassName
+          ),
+          children: /* @__PURE__ */ l("span", { className: "flex items-center gap-2 w-full", children: [
+            g(e.columnDef.header, h()),
+            e.getCanSort() && /* @__PURE__ */ l(
+              "div",
+              {
+                className: s(
+                  "flex flex-col text-slate-400 justify-center items-center gap-1",
+                  i
+                ),
+                role: "presentation",
+                children: [
+                  /* @__PURE__ */ r(
+                    u,
+                    {
+                      className: s(
+                        "w-2 h-2 cursor-pointer",
+                        {
+                          "text-blue-600": e.getIsSorted() === "asc"
+                        },
+                        a
+                      ),
+                      onClick: () => d(e)
+                    }
+                  ),
+                  /* @__PURE__ */ r(
+                    C,
+                    {
+                      className: s(
+                        "w-2 h-2 cursor-pointer",
+                        {
+                          "text-blue-600": e.getIsSorted() === "desc"
+                        },
+                        a
+                      ),
+                      onClick: () => x(e)
+                    }
+                  )
+                ]
+              }
+            )
+          ] })
+        },
+        f
+      )) }, t))
+    }
+  );
+};
+export {
+  D as Header
+};

package/dist/components/VirtualizedTable/components/Pagination/Pagination.js

@@ -0,0 +1,53 @@
+import { jsxs as t, Fragment as p, jsx as e } from "react/jsx-runtime";
+import { DotPaginate as f } from "../DotPaginate/DotPaginate.js";
+import { DropdownPaginate as x } from "../DropdownPaginate/DropdownPaginate.js";
+import { FormPaginate as u } from "../FormPaginate/FormPaginate.js";
+import { cn as g } from "../../../../utils/index.js";
+import { useTableContext as h } from "../../contexts/table.hook.js";
+import { DEFAULT_PAGE_SIZE as b } from "../../constants/pagination.js";
+const D = ({
+  showTotalItems: a = !0,
+  showDropdownPagination: i = !0,
+  showDotPagination: n = !0,
+  showFormPagination: s = !0,
+  pageSizes: l,
+  classNamePagination: o,
+  isLoading: m
+}) => {
+  const {
+    totalItems: r = -1 / 0,
+    tableFetching: c,
+    isFirstLoad: d
+  } = h();
+  return r <= b || c || m ? null : /* @__PURE__ */ t(p, { children: [
+    /* @__PURE__ */ e(
+      "div",
+      {
+        className: g(
+          "bg-slate-50 border border-y-transparent border-x-slate-100 text-slate-500 text-xs not-italic py-2 px-6 rounded-b-lg shadow",
+          o,
+          {
+            "animate-in fade-in-10": !d
+          }
+        ),
+        children: /* @__PURE__ */ t("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ t("div", { className: "flex items-center gap-6", children: [
+            r && a ? /* @__PURE__ */ t("span", { className: "text-slate-800", children: [
+              r,
+              " Results"
+            ] }) : null,
+            i && /* @__PURE__ */ e("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ e(x, { pageSizes: l }) })
+          ] }),
+          /* @__PURE__ */ t("div", { className: "flex items-center gap-8", children: [
+            n && /* @__PURE__ */ e(f, {}),
+            s && /* @__PURE__ */ e(u, {})
+          ] })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ e("div", { className: "w-full min-h-[150px]" })
+  ] });
+};
+export {
+  D as Pagination
+};

package/dist/components/VirtualizedTable/components/Skeleton/Skeleton.js

@@ -0,0 +1,67 @@
+import { jsx as t } from "react/jsx-runtime";
+import { Button as c } from "../../../Button/Button.js";
+import { cn as i } from "../../../../utils/index.js";
+import { useTableContext as h } from "../../contexts/table.hook.js";
+import { E as g } from "../../../../ellipsis-vertical-BVPtjl5f.js";
+const _ = ({ numberOfRows: n, table: o }) => {
+  const { tableFetching: d, tableLoading: m } = h(), e = Array.from({ length: n });
+  return /* @__PURE__ */ t("tbody", { className: "text-slate-800 text-sm font-normal relative", children: e.map((p, a) => {
+    const s = o.getAllColumns();
+    return /* @__PURE__ */ t(
+      "tr",
+      {
+        className: "border-b border-b-gray-200 bg-transparent last:border-b-transparent",
+        children: s.map((r, l) => r.id !== "actions" ? /* @__PURE__ */ t(
+          "td",
+          {
+            className: i(
+              "px-4 py-1 bg-white",
+              r.columnDef.meta?.className,
+              {
+                "[tr:last-child_&:first-of-type]:rounded-bl-lg": a === e.length - 1 && l === 0,
+                "[tr:last-child_&:last-of-type]:rounded-br-lg": a === e.length - 1 && l === s.length - 1
+              }
+            ),
+            children: /* @__PURE__ */ t("div", { className: "animate-in fade-in-0", children: /* @__PURE__ */ t("div", { className: "bg-gray-200 animate-pulse rounded h-5 w-full" }) })
+          },
+          `skeleton-${r.id}`
+        ) : /* @__PURE__ */ t(
+          "td",
+          {
+            className: i(
+              "px-4 py-1 bg-white",
+              r.columnDef.meta?.className,
+              {
+                "[tr:last-child_&:first-of-type]:rounded-bl-lg": a === e.length - 1 && l === 0,
+                "[tr:last-child_&:last-of-type]:rounded-br-lg": a === e.length - 1 && l === s.length - 1
+              }
+            ),
+            children: /* @__PURE__ */ t(
+              c,
+              {
+                variant: "text",
+                shape: "circle",
+                size: "large",
+                disabled: !0,
+                "aria-hidden": "true",
+                children: /* @__PURE__ */ t(
+                  g,
+                  {
+                    className: i("w-5 h-5 text-slate-400", {
+                      "text-gray-300 animate-pulse": d || m
+                    })
+                  }
+                )
+              }
+            )
+          },
+          `skeleton-${r.id}`
+        ))
+      },
+      `skeleton-row-${a}`
+    );
+  }) });
+};
+export {
+  _ as Skeleton
+};

package/dist/components/VirtualizedTable/components/TruncateText/TruncateText.js

@@ -0,0 +1,34 @@
+import { jsx as r, jsxs as d } from "react/jsx-runtime";
+import { P as u, R as b, T as m, C as p } from "../../../../index-2hB40Iuc.js";
+import { d as h } from "../../../../debounce-BFejQm9P.js";
+import { useRef as x, useState as w, useCallback as g, useEffect as s } from "react";
+const v = ({ getValue: l, value: i }) => {
+  const a = x(null), [c, f] = w(!1), n = i ?? l().toLocaleLowerCase(), t = g(() => {
+    const e = a.current;
+    e && f(e.scrollWidth > e.clientWidth);
+  }, []);
+  return s(() => {
+    const e = new AbortController(), o = h(t, 300);
+    return window.addEventListener("resize", o, {
+      signal: e.signal
+    }), () => {
+      e.abort(), o.cancel();
+    };
+  }, [t]), s(() => {
+    t();
+  }, [t]), c ? /* @__PURE__ */ r(u, { delayDuration: 0, children: /* @__PURE__ */ d(b, { children: [
+    /* @__PURE__ */ r(m, { asChild: !0, children: /* @__PURE__ */ r("p", { ref: a, className: "w-full truncate cursor-pointer", children: n }) }),
+    /* @__PURE__ */ r(
+      p,
+      {
+        side: "bottom",
+        align: "center",
+        className: "animate-in fade-in-0 relative mt-1.5 overflow-visible bg-kubefirst-dark-blue-900 text-white px-3 py-2 after:content-[''] after:absolute after:left-1/2 after:-translate-x-1/2 after:top-0 after:-translate-y-full after:border-l-8 after:border-l-transparent after:border-r-8 after:border-r-transparent after:border-b-8 after:border-kubefirst-dark-blue-900",
+        children: n
+      }
+    )
+  ] }) }) : /* @__PURE__ */ r("p", { ref: a, className: "w-full truncate", children: n });
+};
+export {
+  v as TruncateText
+};

package/dist/components/VirtualizedTable/components/WrapperBody/WrapperBody.js

@@ -0,0 +1,27 @@
+import { jsx as n } from "react/jsx-runtime";
+import { cn as m } from "../../../../utils/index.js";
+import { useTableContext as s } from "../../contexts/table.hook.js";
+const p = ({
+  children: o,
+  classNameWrapperTable: r,
+  isLoading: e,
+  showPagination: t
+}) => {
+  const { tableFetching: d } = s();
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      className: m(
+        "shadow rounded-t-lg",
+        {
+          "overflow-hidden rounded-lg": !t || d || e
+        },
+        r
+      ),
+      children: o
+    }
+  );
+};
+export {
+  p as WrapperBody
+};

package/dist/components/VirtualizedTable/components/index.js

@@ -0,0 +1,16 @@
+import { Actions as e } from "./Actions/Actions.js";
+import { Body as p } from "./Body/Body.js";
+import { Filter as f } from "./Filter/Filter.js";
+import { Header as a } from "./Header/Header.js";
+import { Pagination as n } from "./Pagination/Pagination.js";
+import { TruncateText as c } from "./TruncateText/TruncateText.js";
+import { WrapperBody as B } from "./WrapperBody/WrapperBody.js";
+export {
+  e as Actions,
+  p as Body,
+  f as Filter,
+  a as Header,
+  n as Pagination,
+  c as TruncateText,
+  B as WrapperBody
+};

package/dist/components/VirtualizedTable/constants/index.js

@@ -0,0 +1,5 @@
+import { DEFAULT_PAGE_SIZE as _, DEFAULT_PAGE_SIZES as S } from "./pagination.js";
+export {
+  _ as DEFAULT_PAGE_SIZE,
+  S as DEFAULT_PAGE_SIZES
+};

package/dist/components/VirtualizedTable/constants/pagination.js

@@ -0,0 +1,5 @@
+const E = 10, A = [10, 20, 50, 100];
+export {
+  E as DEFAULT_PAGE_SIZE,
+  A as DEFAULT_PAGE_SIZES
+};

package/dist/components/VirtualizedTable/contexts/index.js

@@ -0,0 +1,8 @@
+import { TableContext as r } from "./table.context.js";
+import { useTableContext as x } from "./table.hook.js";
+import { TableProvider as b } from "./table.provider.js";
+export {
+  r as TableContext,
+  b as TableProvider,
+  x as useTableContext
+};

package/dist/components/VirtualizedTable/contexts/table.context.js

@@ -0,0 +1,32 @@
+import { createContext as e } from "react";
+import { DEFAULT_PAGE_SIZE as t } from "../constants/pagination.js";
+const r = e({
+  sortedData: [],
+  table: {},
+  tableFetching: !1,
+  tableLoading: !1,
+  totalItems: -1 / 0,
+  termOfSearch: "",
+  page: 0,
+  pageSize: t,
+  totalPages: 1 / 0,
+  isFirstLoad: !0,
+  onSorting() {
+    throw new Error("onSorting function is not implemented");
+  },
+  onChangeTermOfSearch() {
+    throw new Error("onChangeTermOfSearch function is not implemented");
+  },
+  onSelectMultiselect() {
+    throw new Error("onSelectMultiselect function is not implemented");
+  },
+  handlePage() {
+    throw new Error("handlePage function is not implemented");
+  },
+  onPageSize() {
+    throw new Error("onPageSize function is not implemented");
+  }
+});
+export {
+  r as TableContext
+};