@fluidattacks/design 8.1.0 → 8.2.0

package/dist/components/table/pagination/pagination-dropdown/index.js

@@ -1,8 +1,126 @@
-import "react/jsx-runtime";
-import "../../../../vendor-i-lggy4V.mjs";
-import "react";
-import "styled-components";
-import { cN as a } from "../../../../components-LCJjFofC.mjs";
+import { jsxs as h, jsx as s } from "react/jsx-runtime";
+import { useFloating as L, offset as k } from "../../../../node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.js";
+import A from "../../../../_virtual/transform.js";
+import { useContext as F, useState as x, useMemo as D, useCallback as d, useEffect as N, Fragment as P } from "react";
+import { useTheme as T } from "styled-components";
+import { Container as m } from "../../../container/index.js";
+import { IconButton as Z } from "../../../icon-button/index.js";
+import { TableContext as _ } from "../../context/index.js";
+import "../../../typography/heading/index.js";
+import "../../../typography/span/index.js";
+import { Text as w } from "../../../typography/text/index.js";
+import { useClickOutside as O } from "../../../../hooks/use-click-outside.js";
+import { autoUpdate as j } from "../../../../node_modules/@floating-ui/dom/dist/floating-ui.dom.js";
+const G = 10, H = 20, U = 50, C = 100, ne = () => {
+  const t = T(), { table: o } = F(_), S = o?.options.meta?.hasNextPage ?? !1, f = o?.options.meta?.dataSize ?? 0, b = Number.isFinite(f) ? f : 0, g = o?.getRowCount() ?? 0, y = Number.isFinite(g) ? Math.max(0, g) : 0, l = S ? Math.max(b, C) : y, [n, i] = x(!1), [a, u] = x(
+    o?.getState().pagination.pageSize ?? 10
+  ), { refs: p, floatingStyles: E } = L({
+    middleware: [k({ mainAxis: 4 })],
+    open: n,
+    placement: "top-end",
+    whileElementsMounted: j
+  }), { setFloating: z, setReference: I } = p, R = D(
+    () => A(
+      [G, H, U, C],
+      // eslint-disable-next-line functional/prefer-immutable-types
+      (e, r) => (e.push(r), r === l ? !1 : r <= l),
+      []
+    ),
+    [l]
+  ), c = d(() => {
+    n && i(!1);
+  }, [n]), v = d(() => {
+    i((e) => !e);
+  }, []), M = d(
+    (e) => () => {
+      u(e), o?.setPageSize(e), i(!1);
+    },
+    [o, u]
+  );
+  return O(
+    p.reference,
+    () => {
+      i(!1);
+    },
+    [p.floating]
+  ), N(() => (window.addEventListener("scrollend", c, !0), () => {
+    window.removeEventListener("scrollend", c, !0);
+  }), [c]), /* @__PURE__ */ h(P, { children: [
+    /* @__PURE__ */ h(
+      m,
+      {
+        alignItems: "center",
+        bgColor: t.palette.white,
+        border: "1px solid",
+        borderColor: t.palette.gray[200],
+        borderRadius: "4px",
+        display: "flex",
+        minHeight: "24px",
+        px: 0.25,
+        children: [
+          /* @__PURE__ */ s(w, { pr: 0.25, size: "md", children: a }),
+          /* @__PURE__ */ s(
+            Z,
+            {
+              color: t.palette.gray[400],
+              icon: n ? "chevron-up" : "chevron-down",
+              iconSize: "sm",
+              iconType: "fa-light",
+              id: "paginator-dropdown",
+              onClick: v,
+              px: 0.25,
+              py: 0.25,
+              ref: I,
+              variant: "ghost"
+            }
+          )
+        ]
+      }
+    ),
+    n ? /* @__PURE__ */ s(
+      m,
+      {
+        bgColor: t.palette.white,
+        border: `1px solid ${t.palette.gray[200]}`,
+        borderRadius: t.spacing[0.5],
+        display: "flex",
+        flexDirection: "column",
+        px: 0.25,
+        py: 0.25,
+        ref: z,
+        shadow: "md",
+        style: E,
+        children: R.map((e) => {
+          const r = M(e);
+          return /* @__PURE__ */ s(
+            m,
+            {
+              bgColor: a === e ? t.palette.gray[800] : "transparent",
+              bgColorHover: t.palette.gray[a === e ? 800 : 100],
+              borderRadius: t.spacing["0.25"],
+              cursor: "pointer",
+              maxWidth: "40px",
+              minWidth: "40px",
+              onClick: r,
+              px: 0.25,
+              py: 0.25,
+              children: /* @__PURE__ */ s(
+                w,
+                {
+                  color: a === e ? t.palette.white : t.palette.gray[600],
+                  size: "md",
+                  textAlign: "center",
+                  children: e
+                }
+              )
+            },
+            e
+          );
+        })
+      }
+    ) : void 0
+  ] });
+};
 export {
-  a as PaginationDropdown
+  ne as PaginationDropdown
 };

package/dist/components/table/pagination/pagination-size/index.js

@@ -1,6 +1,31 @@
-import "react/jsx-runtime";
-import "react";
-import { cO as a } from "../../../../components-LCJjFofC.mjs";
+import { jsx as h } from "react/jsx-runtime";
+import { useContext as C, useCallback as y } from "react";
+import { TableContext as T } from "../../context/index.js";
+import "../../../typography/heading/index.js";
+import "../../../typography/span/index.js";
+import { Text as k } from "../../../typography/text/index.js";
+const W = () => {
+  const { table: t } = C(T), {
+    pagination: { pageIndex: c, pageSize: d } = { pageIndex: 0, pageSize: 10 }
+  } = t?.getState() ?? {}, m = t?.options.meta?.hasNextPage ?? !1, $ = t?.options.meta?.dataSize, u = t?.options.rowCount ?? t?.options.meta?.total, g = y(
+    (s, r, n, x, o) => {
+      const p = s * r + 1, e = (s + 1) * r;
+      if (n !== void 0) {
+        if (n === 0) return "0 of 0";
+        if (r * s >= n)
+          return `${n} of ${n}`;
+        const i = Math.min(e, n);
+        return `${p}-${i} of ${n}`;
+      }
+      if (o === 0)
+        return "0";
+      const f = o !== void 0 ? Math.min(e, o) : e;
+      return o !== void 0 && r * s >= o ? `${o}-${o}` : x ? `${p}-${f} of ${o ?? e}+` : `${p}-${f}`;
+    },
+    []
+  );
+  return /* @__PURE__ */ h(k, { display: "inline-block", fontWeight: "bold", size: "md", children: g(c, d, u, m, $) });
+};
 export {
-  a as PaginationSize
+  W as PaginationSize
 };

package/dist/components/table/sort-icon/index.js

@@ -1,6 +1,30 @@
-import "react/jsx-runtime";
-import "styled-components";
-import { cI as p } from "../../../components-LCJjFofC.mjs";
+import { jsxs as n, jsx as r } from "react/jsx-runtime";
+import { useTheme as c } from "styled-components";
+import { StyledSortIcon as a } from "./styles.js";
+import { Icon as t } from "../../icon/index.js";
+const f = (e) => {
+  const o = c(), { variant: i } = e;
+  return /* @__PURE__ */ n(a, { $variant: i, children: [
+    /* @__PURE__ */ r(
+      t,
+      {
+        icon: "caret-up",
+        iconColor: o.palette.gray[600],
+        iconSize: "xs",
+        iconType: "fa-solid"
+      }
+    ),
+    /* @__PURE__ */ r(
+      t,
+      {
+        icon: "caret-down",
+        iconColor: o.palette.gray[600],
+        iconSize: "xs",
+        iconType: "fa-solid"
+      }
+    )
+  ] });
+};
 export {
-  p as SortIcon
+  f as SortIcon
 };

package/dist/components/table/sort-icon/styles.js

@@ -0,0 +1,30 @@
+import { styled as i } from "styled-components";
+const a = i.span`
+  transition: all 150ms;
+  width: 5px;
+  height: 10px;
+  padding: ${({ theme: t }) => t.spacing[0.625]};
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 0.125rem;
+  align-items: center;
+
+  svg {
+    margin-top: -4px;
+    margin-bottom: -2px;
+  }
+
+  span:first-child {
+    transition: opacity 150ms;
+    opacity: ${({ $variant: t }) => t === "desc" ? 0 : 1};
+  }
+
+  span:last-child {
+    transition: opacity 150ms;
+    opacity: ${({ $variant: t }) => t === "asc" ? 0 : 1};
+  }
+`;
+export {
+  a as StyledSortIcon
+};

package/dist/components/table/styles.js

@@ -0,0 +1,260 @@
+import { styled as r } from "styled-components";
+const i = r.div`
+  position: relative;
+
+  div:has(table) {
+    scrollbar-color: ${({ theme: t }) => t.palette.gray[600]}
+      transparent;
+    scrollbar-width: thin;
+    overflow-x: auto;
+    margin-left: -3px;
+    padding-left: 3px;
+    padding-bottom: 5px;
+  }
+
+  table {
+    overflow-x: hidden;
+    white-space: nowrap;
+    margin: 0;
+    border-collapse: collapse;
+    width: 100%;
+    min-width: 100%;
+  }
+
+  table thead {
+    background-color: ${({ theme: t }) => t.palette.gray[50]};
+    position: sticky;
+    z-index: 1;
+    top: 0;
+  }
+
+  table tbody {
+    background-color: ${({ theme: t }) => t.palette.white};
+  }
+
+  table tr {
+    height: ${({ theme: t }) => t.spacing[2.5]};
+    border: 1px solid ${({ theme: t }) => t.palette.gray[200]};
+  }
+
+  table thead tr {
+    background-color: transparent;
+    border-bottom: none;
+  }
+
+  table thead tr:hover {
+    background-color: transparent;
+  }
+
+  table thead tr:first-child {
+    height: ${({ theme: t }) => t.spacing[2.5]};
+    border: none;
+  }
+
+  table
+    tr:hover:not(
+      [aria-expanded="true"],
+      #description,
+      .selected:not(:has([type="checkbox"], [type="radio"]))
+    ) {
+    background-color: ${({ theme: t }) => t.palette.gray[50]};
+  }
+
+  table tr#description {
+    align-items: center;
+    background-color: ${({ theme: t }) => t.palette.gray[50]};
+  }
+
+  table tbody tr.row-no-data {
+    &:hover {
+      background-color: ${({ theme: t }) => t.palette.white};
+    }
+  }
+
+  tr {
+    &:first-child th:first-child > div {
+      border-top-left-radius: 8px;
+    }
+
+    &:first-child th:last-child > div {
+      border-top-right-radius: 8px;
+    }
+
+    th {
+      position: relative;
+      font-size: ${({ theme: t }) => t.typography.text.md};
+      font-weight: ${({ theme: t }) => t.typography.weight.bold};
+      color: ${({ theme: t }) => t.palette.gray[600]};
+      padding: unset;
+      height: ${({ theme: t }) => t.spacing[3]};
+      white-space: pre-line;
+
+      &:hover div:first-child {
+        background-color: ${({ theme: t }) => t.palette.gray[300]};
+      }
+
+      &:first-child {
+        border-right: 1px solid
+          ${({ theme: t }) => t.palette.gray[300]};
+
+        svg {
+          margin-right: unset;
+        }
+
+        &:has(input) {
+          padding: unset;
+        }
+
+        &:has(input) + th:nth-child(2) {
+          border-right: 1px solid
+            ${({ theme: t }) => t.palette.gray[25]};
+        }
+
+        &:hover div:first-child {
+          background-color: ${({ theme: t }) => t.palette.gray[200]};
+        }
+      }
+    }
+
+    &.selected:not(:has([type="checkbox"], [type="radio"])) {
+      background:
+        linear-gradient(
+          0deg,
+          ${({ theme: t }) => t.palette.error[50]}4D 0%,
+          ${({ theme: t }) => t.palette.error[50]}4D 100%
+        ),
+        ${({ theme: t }) => t.palette.white};
+      border-left: 4px solid
+        ${({ theme: t }) => t.palette.primary[400]};
+    }
+  }
+
+  tbody tr:not(.row-no-data) td {
+    font-size: ${({ theme: t }) => t.typography.text.md};
+    white-space: pre-line;
+    padding-left: 8px;
+    padding-right: 8px;
+
+    &.clickable {
+      cursor: pointer;
+
+      &:hover p {
+        text-decoration: underline;
+        color: ${({ theme: t }) => t.palette.gray[400]};
+      }
+
+      &:has(input) {
+        padding: ${({ theme: t }) => t.spacing[0.5]};
+
+        & + td:hover p {
+          text-decoration: underline;
+          color: ${({ theme: t }) => t.palette.gray[400]};
+        }
+      }
+    }
+
+    &:first-child {
+      border-right: 1px solid ${({ theme: t }) => t.palette.gray[200]};
+
+      svg {
+        margin-right: unset;
+      }
+
+      &:has(input) {
+        padding: ${({ theme: t }) => t.spacing[0.5]};
+
+        & + td {
+          cursor: pointer;
+          border-right: 1px solid
+            ${({ theme: t }) => t.palette.gray[200]};
+        }
+      }
+    }
+  }
+
+  table.is-resized {
+    overflow-wrap: anywhere;
+  }
+`, o = r.div`
+  ${({ $width: t, theme: e }) => `
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    flex: 1 0 auto;
+    padding-right: 5px;
+    width: ${t}px;
+
+    div {
+      position: relative;
+      font-weight: 400;
+      font-size: ${e.typography.text.md};
+      text-align: left;
+
+      color: ${e.palette.gray[600]};
+      background-color: ${e.palette.gray[100]};
+      border-radius: ${e.spacing[0.25]};
+      padding: ${e.spacing[0.5]} ${e.spacing[0.75]};
+      margin: ${e.spacing[0.5]} 0;
+      height: ${e.spacing[2.25]};
+
+      span {
+        text-decoration: underline;
+        cursor: pointer;
+      }
+    }
+  `}
+`, n = r.div`
+  align-items: center;
+  background-color: transparent;
+  display: flex;
+  gap: ${({ theme: t }) => t.spacing[1]};
+  padding: ${({ theme: t }) => `${t.spacing[0.75]} ${t.spacing[1.25]}`};
+
+  .pagination-container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: ${({ theme: t }) => t.spacing[1]};
+  }
+
+  .footer-container {
+    display: flex;
+    align-items: center;
+    flex: 1 0 auto;
+    height: 100%;
+
+    &::before {
+      display: block;
+      content: "";
+      height: ${({ theme: t }) => t.typography.text.md};
+      border-left: 1px solid ${({ theme: t }) => t.palette.gray[300]};
+      margin: 0;
+      margin-right: ${({ theme: t }) => t.spacing[0.5]};
+    }
+  }
+`, l = r.div`
+  transition: all 150ms;
+  content: "";
+  z-index: 2;
+  position: absolute;
+  bottom: 0;
+  right: -1px;
+  width: 30px;
+  height: 100%;
+  margin-right: 0;
+  cursor: col-resize;
+  user-select: none;
+  touch-action: none;
+  border-right: 1px solid transparent;
+
+  &:hover {
+    transition: all 150ms;
+    border-right: 1px solid ${({ theme: t }) => t.palette.black};
+  }
+`;
+export {
+  i as TableContainer,
+  n as TableFooter,
+  l as TableResizer,
+  o as TableStatus
+};

package/dist/components/table/table-body/index.js

@@ -1,8 +1,110 @@
-import "react/jsx-runtime";
-import "../../../vendor-i-lggy4V.mjs";
-import "react";
-import "styled-components";
-import { cK as a } from "../../../components-LCJjFofC.mjs";
+import { jsx as t, jsxs as a } from "react/jsx-runtime";
+import { flexRender as u } from "../../../node_modules/@tanstack/react-table/build/lib/index.js";
+import f, { useContext as x, useCallback as r } from "react";
+import { useTheme as C } from "styled-components";
+import { CellContainer as b } from "./styles.js";
+import { Container as y } from "../../container/index.js";
+import { Icon as k } from "../../icon/index.js";
+import { Loading as I } from "../../loading/index.js";
+import { TableContext as E } from "../context/index.js";
+import "../../typography/heading/index.js";
+import "../../typography/span/index.js";
+import { Text as R } from "../../typography/text/index.js";
+const P = () => {
+  const c = C(), { table: o } = x(E), { loading: s } = o?.options.meta ?? {}, m = r(
+    (e) => {
+      const n = e.findIndex(
+        (i) => i.column.id !== "selection"
+      );
+      return n === -1 ? 0 : n;
+    },
+    []
+  ), p = r(
+    (e, n, i) => {
+      if (n === i)
+        return (d) => {
+          d.stopPropagation(), o?.options?.onRowClick?.(e);
+        };
+    },
+    [o]
+  ), g = r(
+    (e) => (n) => {
+      n.stopPropagation(), e.toggleExpanded();
+    },
+    []
+  ), h = r(
+    (e) => {
+      const { meta: n } = o?.options ?? {}, { onExpand: i = void 0 } = n ?? {};
+      return i ? i(e) : null;
+    },
+    [o]
+  );
+  return s ? /* @__PURE__ */ t("tbody", { children: /* @__PURE__ */ t("tr", { className: "row-loading", "data-testid": "row-loading", children: /* @__PURE__ */ t("td", { colSpan: o?.getVisibleLeafColumns().length ?? 0, children: /* @__PURE__ */ t(
+    y,
+    {
+      alignItems: "center",
+      display: "flex",
+      justify: "center",
+      width: "100%",
+      children: /* @__PURE__ */ t(I, { size: "md" })
+    }
+  ) }) }) }) : o?.getRowModel().rows.length === 0 ? /* @__PURE__ */ t("tbody", { children: /* @__PURE__ */ t("tr", { className: "row-no-data", "data-testid": "row-no-data", children: /* @__PURE__ */ t("td", { colSpan: o.getVisibleLeafColumns().length + 1, children: /* @__PURE__ */ t(
+    R,
+    {
+      color: c.palette.gray[800],
+      size: "md",
+      textAlign: "center",
+      children: "No data to display"
+    }
+  ) }) }) }) : /* @__PURE__ */ t("tbody", { children: o?.getRowModel().rows.map((e) => {
+    const n = e.getVisibleCells(), i = m(n);
+    return /* @__PURE__ */ a(f.Fragment, { children: [
+      /* @__PURE__ */ t(
+        "tr",
+        {
+          "aria-expanded": e.getIsExpanded(),
+          className: e.getIsSelected() ? "selected" : "",
+          "data-testid": `row-${e.id}`,
+          children: n.map((d, l) => /* @__PURE__ */ t(
+            "td",
+            {
+              className: l === i && o.options.onRowClick ? "clickable" : "",
+              "data-testid": `cell-${d.id}`,
+              onClick: p(
+                e,
+                l,
+                i
+              ),
+              children: /* @__PURE__ */ a(b, { children: [
+                l === i && e.getCanExpand() ? /* @__PURE__ */ t(
+                  "button",
+                  {
+                    onClick: g(e),
+                    style: { cursor: "pointer", marginRight: "1rem" },
+                    children: /* @__PURE__ */ t(
+                      k,
+                      {
+                        icon: e.getIsExpanded() ? "angle-up" : "angle-down",
+                        iconSize: "lg",
+                        iconType: "fa-light"
+                      }
+                    )
+                  }
+                ) : void 0,
+                u(
+                  d.column.columnDef.cell,
+                  d.getContext()
+                )
+              ] })
+            },
+            d.id
+          ))
+        }
+      ),
+      e.getIsExpanded() ? /* @__PURE__ */ t("tr", { "data-testid": `row-${e.id}-expand`, id: "description", children: /* @__PURE__ */ t("td", { colSpan: 100, children: h(e) }) }) : void 0
+    ] }, e.id);
+  }) });
+};
 export {
-  a as Body
+  P as Body
 };

package/dist/components/table/table-body/styles.js

@@ -0,0 +1,10 @@
+import { styled as i } from "styled-components";
+const e = i.div`
+  align-items: center;
+  display: flex;
+  min-width: 0;
+  width: 100%;
+`;
+export {
+  e as CellContainer
+};

package/dist/components/table/table-column-toggle/index.js

@@ -1,10 +1,62 @@
-import "react/jsx-runtime";
-import "../../../vendor-i-lggy4V.mjs";
-import "react";
-import { cH as l } from "../../../components-LCJjFofC.mjs";
+import { jsxs as p, jsx as r } from "react/jsx-runtime";
+import g from "../../../_virtual/isNil.js";
+import { useMemo as l, useCallback as c } from "react";
+import { Button as f } from "../../button/index.js";
+import "../../../_virtual/lodash.js";
 import "react-dom";
 import "styled-components";
+import "../../container/index.js";
+import "../../icon-button/index.js";
+import "../../typography/heading/index.js";
+import "../../typography/span/index.js";
+import "../../typography/text/index.js";
+import "../../cloud-image/index.js";
 import "react-router";
+import "../../notification-sign/index.js";
+import "../../icon/index.js";
+import { ColumnsModal as b } from "../../modal/columns-modal/index.js";
+import { useColumnsModal as C } from "../../../hooks/use-columns-modal.js";
+const G = (s) => {
+  const { table: t } = s, { meta: m } = t.options, [, n] = t.getHeaderGroups(), a = t.getVisibleLeafColumns().filter((o) => o.id !== "selection").length, i = l(
+    () => t.getAllLeafColumns().filter((o) => o.id !== "selection"),
+    [t]
+  ), d = l(() => i.map((o) => ({
+    group: o.parent?.id,
+    id: o.id,
+    locked: o.getIsPinned() === "left",
+    name: typeof o.columnDef.header == "string" ? o.columnDef.header : o.columnDef.id ?? "",
+    toggleVisibility: o.toggleVisibility,
+    visible: o.getIsVisible()
+  })), [i]), e = C({
+    columnOrder: m?.defaultColumnOrder ?? [],
+    items: d,
+    name: "table-column-management",
+    setColumnOrder: t.setColumnOrder,
+    setColumnVisibility: t.setColumnVisibility
+  }), u = c(() => {
+    e.toggle();
+  }, [e]);
+  return /* @__PURE__ */ p("div", { id: "columns-filter", children: [
+    /* @__PURE__ */ r(
+      f,
+      {
+        icon: "columns",
+        id: "columns-toggle-btn",
+        onClick: u,
+        tag: a.toString(),
+        variant: "ghost"
+      }
+    ),
+    /* @__PURE__ */ r(
+      b,
+      {
+        modalRef: e,
+        title: "Manage columns",
+        variant: g(n) ? "ungrouped" : "grouped"
+      }
+    )
+  ] });
+};
 export {
-  l as ColumnToggle
+  G as ColumnToggle
 };