asma-ui-core 3.18.0 → 3.20.0

package/dist/table/components/columns/action-column/components/RowActionMenu.js

@@ -0,0 +1,113 @@
+import { isCustomAction as y } from "../../../../types.js";
+import { StyledTooltip as f } from "../../../../shared-components/tooltip/index.js";
+import { useToggleMenuVisibility as M } from "../../../../hooks/useToggleMenuVisibility.hook.js";
+import { DotsVerticalIcon as O } from "../../../../shared-components/DotsVerticalIcon.js";
+import { StyledMenuItem as j } from "../../../../shared-components/StyledMenuItem.js";
+import { StyledButton as A } from "../../../../shared-components/button/StyledButton.js";
+import { CircleWarningOutlineIcon as S } from "../../../../shared-components/CircleWarningOutlineIcon.js";
+import h, { useEffect as k, useMemo as D, useState as F } from "react";
+import { Popover as I } from "@mui/material";
+import { jsx as t, jsxs as g } from "react/jsx-runtime";
+function G({ tableData: o, actions: w, rowActionsState: v }) {
+  const { anchorEl: C, open: b, handleClose: s, handleOpen: x } = M(), l = w(o.row), n = v?.(o.row) ?? { state: "enabled" }, N = o.table.options.meta?.locale === "no" ? "Ingen handlinger tilgjengelig" : "No actions available", P = D(() => l.every((e) => "component" in e ? !1 : e.hide), [l]), p = l.length > 0 && !P, d = n.state === "enabled" && !p, T = n.state !== "hidden" && (p || d || n.state === "disabled"), [a, i] = F(!1);
+  if (k(() => {
+    if (!a) return;
+    const e = window.setTimeout(() => i(!1), 1600);
+    return () => window.clearTimeout(e);
+  }, [a]), !T) return /* @__PURE__ */ t("div", { className: "flex w-[40px] items-center justify-center" });
+  const c = n.state === "disabled", u = /* @__PURE__ */ t(A, {
+    dataTest: "",
+    variant: "text",
+    size: "small",
+    disabled: c,
+    onClick: (e) => {
+      e.stopPropagation(), e.preventDefault(), !c && (x(e), o.row.onChangeFocused(!0));
+    },
+    onMouseDown: (e) => {
+      e.stopPropagation(), e.preventDefault();
+    },
+    onMouseUp: (e) => {
+      e.stopPropagation(), e.preventDefault();
+    },
+    children: /* @__PURE__ */ t(O, {
+      className: c ? "text-delta-300" : "text-delta-700",
+      width: 20,
+      height: 20
+    })
+  });
+  return /* @__PURE__ */ t("div", {
+    className: "flex w-[40px] items-center justify-center",
+    children: /* @__PURE__ */ g("div", {
+      className: "flex items-center justify-center",
+      children: [n.state === "disabled" ? /* @__PURE__ */ t(f, {
+        title: n.tooltipTitle,
+        arrow: !0,
+        placement: n.tooltipPlacement ?? "top",
+        open: a,
+        onOpen: () => i(!0),
+        onClose: () => i(!1),
+        children: /* @__PURE__ */ t("span", {
+          className: "cursor-not-allowed",
+          onTouchStart: (e) => {
+            e.stopPropagation(), e.preventDefault(), i(!0);
+          },
+          onClick: (e) => {
+            e.stopPropagation(), e.preventDefault();
+          },
+          children: u
+        })
+      }) : u, n.state === "enabled" && /* @__PURE__ */ t(I, {
+        open: b,
+        anchorEl: C,
+        onClose: () => {
+          s(), o.row.onChangeFocused(!1);
+        },
+        onClick: () => {
+          s(), o.row.onChangeFocused(!1);
+        },
+        anchorOrigin: {
+          horizontal: "center",
+          vertical: "bottom"
+        },
+        transformOrigin: {
+          vertical: "top",
+          horizontal: "right"
+        },
+        children: d ? /* @__PURE__ */ g("div", {
+          className: "flex items-center gap-2 p-3 text-delta-700",
+          children: [/* @__PURE__ */ t(S, {
+            width: 20,
+            height: 20
+          }), /* @__PURE__ */ t("span", { children: N })]
+        }) : l.map((e, m) => {
+          if (y(e)) {
+            const r = e.component(o.row, s);
+            return h.isValidElement(r) ? /* @__PURE__ */ t(h.Fragment, { children: r }, m) : null;
+          }
+          return e.hide ? null : /* @__PURE__ */ t(f, {
+            title: e?.tooltipTitle,
+            arrow: !0,
+            placement: e?.tooltipPlacement ?? "left",
+            children: /* @__PURE__ */ t("span", { children: /* @__PURE__ */ t(j, {
+              className: e.className,
+              disabled: e.disabled,
+              onClick: () => {
+                e.disabled || e.onClick?.(o.row);
+              },
+              onMouseDown: (r) => {
+                r.stopPropagation(), r.preventDefault();
+              },
+              onMouseUp: (r) => {
+                r.stopPropagation(), r.preventDefault();
+              },
+              children: e.label
+            }) })
+          }, m);
+        })
+      })]
+    })
+  });
+}
+export {
+  G as RowActionMenu
+};

package/dist/table/components/columns/action-column/components/TableActions.module.js

@@ -0,0 +1,9 @@
+var a = {
+  "actions-header-wrapper": "_actions-header-wrapper_cb1o4_1",
+  "actions-header": "_actions-header_cb1o4_1",
+  "pin-indicator": "_pin-indicator_cb1o4_25",
+  "pin-icon": "_pin-icon_cb1o4_35"
+};
+export {
+  a as default
+};

package/dist/table/components/columns/dndHandleColumn.js

@@ -0,0 +1,38 @@
+import { DND_HANDLE_COLUMN_ID as i } from "../../types.js";
+import { DotsHorizontalIcon as n } from "../../shared-components/DotsHorizontalIcon.js";
+import d from "clsx";
+import { jsx as o } from "react/jsx-runtime";
+import { useSortable as s } from "@dnd-kit/sortable";
+function D(r, t) {
+  return {
+    enableHiding: !1,
+    enableSorting: !1,
+    header: () => null,
+    cell: ({ row: e }) => /* @__PURE__ */ o(m, {
+      rowId: e.id,
+      rowHeight: t
+    }),
+    ...r,
+    id: i
+  };
+}
+var m = ({ rowId: r, rowHeight: t, ...e }) => {
+  const { attributes: l, listeners: a } = s({
+    id: r,
+    ...e
+  });
+  return /* @__PURE__ */ o("div", {
+    ...l,
+    ...a,
+    style: { height: t ?? "auto" },
+    children: /* @__PURE__ */ o(n, {
+      width: 24,
+      height: 24,
+      className: d(e.disabled ? "cursor-not-allowed text-delta-300" : "cursor-grab text-delta-800")
+    })
+  });
+};
+export {
+  m as RowDragHandleCell,
+  D as generateDndHandleColumn
+};

package/dist/table/components/columns/expandColumn.js

@@ -0,0 +1,36 @@
+import { EXPAND_COLUMN_ID as r } from "../../types.js";
+import { ChevronDownIcon as a } from "../../shared-components/ChevronDownIcon.js";
+import { jsx as n } from "react/jsx-runtime";
+import "@tanstack/react-table";
+function m(t, i) {
+  return {
+    id: r,
+    minSize: 50,
+    maxSize: 50,
+    size: 50,
+    enableHiding: !1,
+    enableSorting: !1,
+    header: () => null,
+    cell: ({ cell: e }) => {
+      const o = e.row.getIsExpanded();
+      return e.row.getCanExpand() ? /* @__PURE__ */ n("span", {
+        className: "flex w-full items-center justify-center outline-none focus:outline-none",
+        onClick: () => e.row.getToggleExpandedHandler()(),
+        style: { height: i ?? "auto" },
+        children: /* @__PURE__ */ n(a, {
+          width: 24,
+          height: 24,
+          style: {
+            rotate: o ? "180deg" : "0deg",
+            transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
+            transitionDuration: "500ms"
+          }
+        })
+      }) : null;
+    },
+    fixedLeft: t
+  };
+}
+export {
+  m as generateExpandColumn
+};

package/dist/table/components/columns/helpers/useElementHeightPx.js

@@ -0,0 +1,26 @@
+import { useLayoutEffect as m, useRef as f, useState as l } from "react";
+function g() {
+  const n = f(null), [s, u] = l(0);
+  return m(() => {
+    const e = n.current;
+    if (!e) return;
+    let t = 0;
+    const a = () => {
+      const c = Math.round(e.getBoundingClientRect().height);
+      u((i) => i === c ? i : c);
+    }, r = () => {
+      cancelAnimationFrame(t), t = requestAnimationFrame(a);
+    };
+    r();
+    const o = new ResizeObserver(r);
+    return o.observe(e), () => {
+      cancelAnimationFrame(t), o.disconnect();
+    };
+  }, []), {
+    ref: n,
+    heightPx: s
+  };
+}
+export {
+  g as useElementHeightPx
+};

package/dist/table/components/columns/helpers/useProxyHorizontalScrollSync.js

@@ -0,0 +1,30 @@
+import { useLayoutEffect as L, useRef as l } from "react";
+function d(s) {
+  const c = l(null), u = l(null), f = l(null), i = l(null);
+  return L(() => {
+    if (!s) return;
+    const E = c.current, e = u.current, r = f.current, a = i.current;
+    if (!E || !e || !r || !a) return;
+    let t = !1;
+    const v = () => {
+      a.style.width = `${e.scrollWidth}px`;
+    }, n = () => {
+      t || (t = !0, r.scrollLeft = e.scrollLeft, t = !1);
+    }, y = () => {
+      t || (t = !0, e.scrollLeft = r.scrollLeft, t = !1);
+    };
+    v(), n(), e.addEventListener("scroll", n, { passive: !0 }), r.addEventListener("scroll", y, { passive: !0 });
+    const b = e.querySelector("table"), o = new ResizeObserver(v);
+    return o.observe(e), b && o.observe(b), () => {
+      e.removeEventListener("scroll", n), r.removeEventListener("scroll", y), o.disconnect();
+    };
+  }, [s]), {
+    tableScrollRef: c,
+    tableXRef: u,
+    hScrollRef: f,
+    hScrollContentRef: i
+  };
+}
+export {
+  d as useProxyHorizontalScrollSync
+};

package/dist/table/components/columns/selectColumn.js

@@ -0,0 +1,59 @@
+import { SELECT_COLUMN_ID as a } from "../../types.js";
+import c from "../StyledTable.module.js";
+import { StyledCheckbox as r } from "../../shared-components/StyledCheckbox.js";
+import { StyledTooltip as d } from "../../shared-components/tooltip/index.js";
+import { jsx as t } from "react/jsx-runtime";
+function S(i, s) {
+  return {
+    id: a,
+    minSize: 38,
+    maxSize: 38,
+    size: 38,
+    header: ({ table: e }) => /* @__PURE__ */ t("button", {
+      type: "button",
+      className: "flex size-full items-center justify-start pl-2",
+      onClick: () => e.toggleAllRowsSelected(),
+      children: /* @__PURE__ */ t(r, {
+        size: "small",
+        dataTest: "cell-select-all",
+        checked: e.getIsAllRowsSelected(),
+        indeterminate: e.getIsSomeRowsSelected(),
+        hideWrapper: !0
+      })
+    }),
+    cell: ({ cell: e }) => {
+      const l = !e.row.getCanSelect();
+      return /* @__PURE__ */ t("button", {
+        type: "button",
+        style: { height: s ?? "auto" },
+        className: "m-0 flex w-full items-center justify-start p-0 pl-2",
+        "aria-disabled": l,
+        onClick: () => {
+          l || e.row.toggleSelected();
+        },
+        children: /* @__PURE__ */ t(d, {
+          arrow: !0,
+          placement: "top-start",
+          title: e.row.getRowSelectionTooltip(),
+          children: /* @__PURE__ */ t("span", {
+            className: l ? c["cursor-not-allowed"] : void 0,
+            children: /* @__PURE__ */ t(r, {
+              size: "small",
+              dataTest: "cell-select",
+              checked: e.row.getIsSelected(),
+              hideWrapper: !0,
+              disabled: l,
+              onMouseUp: (o) => {
+                o.preventDefault(), o.stopPropagation();
+              }
+            })
+          })
+        })
+      });
+    },
+    fixedLeft: i
+  };
+}
+export {
+  S as selectColumn
+};

package/dist/table/components/columns/showTextColumn.js

@@ -0,0 +1,54 @@
+import { SHOW_FULL_TEXT_ID as i } from "../../types.js";
+import { ChevronDownIcon as a } from "../../shared-components/ChevronDownIcon.js";
+import { StyledButton as l } from "../../shared-components/button/StyledButton.js";
+import { jsx as n } from "react/jsx-runtime";
+function g(e, o) {
+  return {
+    id: i,
+    minSize: 38,
+    maxSize: 38,
+    size: 38,
+    enableHiding: !1,
+    enableSorting: !1,
+    header: () => null,
+    cell: (r) => /* @__PURE__ */ n(s, {
+      info: r,
+      rowHeight: o
+    }),
+    fixedLeft: e
+  };
+}
+function s({ info: e, rowHeight: o }) {
+  const r = e.row.getCanExpand();
+  return /* @__PURE__ */ n("div", {
+    className: "flex w-full items-center justify-center",
+    style: { height: o ?? "auto" },
+    children: /* @__PURE__ */ n(l, {
+      dataTest: "expand-text-button",
+      size: "small",
+      variant: "textGray",
+      onClick: () => {
+        r && e.row.getToggleExpandedHandler()(), e.row.toggleExpand();
+      },
+      onMouseDown: (t) => {
+        t.preventDefault(), t.stopPropagation();
+      },
+      onMouseUp: (t) => {
+        t.preventDefault(), t.stopPropagation();
+      },
+      startIcon: /* @__PURE__ */ n(a, {
+        width: 20,
+        height: 20,
+        style: {
+          rotate: e.row.isExpanded() ? "180deg" : "0deg",
+          transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
+          transitionDuration: "500ms",
+          cursor: "pointer"
+        }
+      })
+    })
+  });
+}
+export {
+  g as generateShowFullTextColumn
+};

package/dist/table/components/table-footer/TableFooter.js

@@ -0,0 +1,33 @@
+import u from "../StyledTable.module.js";
+import w from "./TablePagination.module.js";
+import { TablePagination as C } from "./TablePagination.js";
+import { TableRowCountSelect as R } from "./TableRowCountSelect.js";
+import { jsx as c, jsxs as s } from "react/jsx-runtime";
+import "@tanstack/react-table";
+var S = 5;
+function O({ table: o, styledTableProps: t, canShowStickyFooter: f }) {
+  const m = o.getRowCount(), d = o.getPageCount() ?? 1, n = t.footer?.(o), g = n != null && n !== !1, i = t.locale ?? "en", h = m >= S;
+  if (t.hideFooter || !h) return null;
+  const e = t.paginationAlignLeft, l = !t.hideRowCountSelect, a = d > 1, r = l || a;
+  return g || r ? /* @__PURE__ */ s("div", {
+    className: f ? u["table-footer--sticky"] : u["table-footer--inline"],
+    style: e ? { justifyContent: "flex-start" } : void 0,
+    children: [
+      !e && n,
+      r && /* @__PURE__ */ s("div", {
+        className: w["table-pagination"],
+        children: [l && /* @__PURE__ */ c(R, {
+          table: o,
+          locale: i
+        }), a && /* @__PURE__ */ c(C, {
+          table: o,
+          locale: i
+        })]
+      }),
+      e && n
+    ]
+  }) : null;
+}
+export {
+  O as TableFooter
+};

package/dist/table/components/table-footer/TablePagination.js

@@ -0,0 +1,125 @@
+import c from "../StyledTable.module.js";
+import { StyledTooltip as g } from "../../shared-components/tooltip/index.js";
+import { ChevronDownIcon as y } from "../../shared-components/ChevronDownIcon.js";
+import { useToggleMenuVisibility as I } from "../../hooks/useToggleMenuVisibility.hook.js";
+import { StyledButton as m } from "../../shared-components/button/StyledButton.js";
+import { ChevronRightIcon as O } from "../../shared-components/ChevronRightIcon.js";
+import { ChevronLeftIcon as S } from "../../shared-components/ChevronLeftIcon.js";
+import { StyledMenuItem as w } from "../../shared-components/menu-item/index.js";
+import { useCallback as v, useMemo as P, useRef as N } from "react";
+import { Popover as k } from "@mui/material";
+import { Fragment as z, jsx as e, jsxs as h } from "react/jsx-runtime";
+function E({ table: o, locale: C }) {
+  const { anchorEl: s, open: p, handleClose: d, handleOpen: b } = I(), u = N(null), n = C === "no", f = P(() => ({
+    anchorOrigin: {
+      vertical: -5,
+      horizontal: "center"
+    },
+    transformOrigin: {
+      vertical: "bottom",
+      horizontal: "center"
+    }
+  }), []), i = v(() => {
+    const t = c["asma-ui-table-styled-table"], r = u.current?.closest(`.${t}`)?.querySelector(`.${c["table-scroll"]}, .${c["table-wrapper"]}`);
+    r && r.scrollTo({
+      top: 0,
+      behavior: "smooth"
+    });
+  }, []), a = o.getPageCount() || 1, l = o.getState().pagination.pageIndex + 1, x = P(() => Array.from({ length: a }, (t, r) => r + 1), [a]), T = v((t) => {
+    o.setPageIndex(t - 1), d(), i();
+  }, [
+    o,
+    d,
+    i
+  ]);
+  return /* @__PURE__ */ h(z, { children: [
+    /* @__PURE__ */ e(g, {
+      title: n ? "Nåværende side" : "Current Page",
+      children: /* @__PURE__ */ e("div", {
+        ref: u,
+        children: /* @__PURE__ */ h(m, {
+          dataTest: "current-page-button",
+          variant: "outlined",
+          size: "large",
+          onClick: b,
+          endIcon: /* @__PURE__ */ e(y, {
+            className: `${p ? "rotate-180" : "rotate-0"} transition-transform duration-300`,
+            height: 24,
+            width: 24
+          }),
+          children: [
+            n ? "Side" : "Page",
+            " ",
+            l,
+            " ",
+            n ? "av" : "of",
+            " ",
+            a
+          ]
+        })
+      })
+    }),
+    /* @__PURE__ */ e(k, {
+      open: p,
+      anchorEl: s,
+      slotProps: { paper: { sx: {
+        width: s ? s.clientWidth : void 0,
+        maxHeight: 288,
+        overflowY: "auto"
+      } } },
+      onClose: d,
+      anchorOrigin: f.anchorOrigin,
+      transformOrigin: f.transformOrigin,
+      classes: { paper: "border border-solid border-delta-200 py-2" },
+      children: x.map((t) => /* @__PURE__ */ e(w, {
+        onClick: (r) => {
+          r.stopPropagation(), r.preventDefault(), T(t);
+        },
+        selected: t === l,
+        children: /* @__PURE__ */ h("span", {
+          className: "text-sm font-normal text-delta-700",
+          children: [
+            n ? "Side" : "Page",
+            " ",
+            t
+          ]
+        })
+      }, t))
+    }),
+    /* @__PURE__ */ e(g, {
+      title: l === 1 ? "" : n ? "Forrige side" : "Previous Page",
+      children: /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(m, {
+        dataTest: "prev-page-button",
+        variant: "outlined",
+        onClick: () => {
+          o.previousPage(), i();
+        },
+        size: "large",
+        disabled: !o.getCanPreviousPage(),
+        startIcon: /* @__PURE__ */ e(S, {
+          height: 24,
+          width: 24
+        })
+      }) })
+    }),
+    /* @__PURE__ */ e(g, {
+      title: l === a ? "" : n ? "Neste side" : "Next Page",
+      children: /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(m, {
+        dataTest: "next-page-button",
+        variant: "outlined",
+        onClick: () => {
+          o.nextPage(), i();
+        },
+        size: "large",
+        disabled: !o.getCanNextPage(),
+        startIcon: /* @__PURE__ */ e(O, {
+          height: 24,
+          width: 24
+        })
+      }) })
+    })
+  ] });
+}
+export {
+  E as TablePagination
+};

package/dist/table/components/table-footer/TablePagination.module.js

@@ -0,0 +1,10 @@
+var a = {
+  "table-pagination": "_table-pagination_pu6mb_1",
+  "table-pagination__pages-list": "_table-pagination__pages-list_pu6mb_11",
+  "table-pagination__pages-list__page": "_table-pagination__pages-list__page_pu6mb_16",
+  "page-selected": "_page-selected_pu6mb_27",
+  "check-icon": "_check-icon_pu6mb_30"
+};
+export {
+  a as default
+};

package/dist/table/components/table-footer/TableRowCountSelect.js

@@ -0,0 +1,76 @@
+import { ChevronDownIcon as w } from "../../shared-components/ChevronDownIcon.js";
+import { useToggleMenuVisibility as O } from "../../hooks/useToggleMenuVisibility.hook.js";
+import { StyledButton as v } from "../../shared-components/button/StyledButton.js";
+import { StyledMenuItem as C } from "../../shared-components/menu-item/index.js";
+import { useCallback as S, useMemo as p } from "react";
+import { Popover as b } from "@mui/material";
+import { Fragment as x, jsx as i, jsxs as s } from "react/jsx-runtime";
+var y = [
+  5,
+  10,
+  20,
+  50,
+  100
+];
+function T({ table: e, locale: d }) {
+  const { anchorEl: n, open: l, handleClose: a, handleOpen: h } = O(), r = e.getState().pagination.pageSize, c = d === "no", m = p(() => ({
+    anchorOrigin: {
+      vertical: -5,
+      horizontal: "center"
+    },
+    transformOrigin: {
+      vertical: "bottom",
+      horizontal: "center"
+    }
+  }), []), g = p(() => {
+    const o = /* @__PURE__ */ new Set([...y, r]);
+    return Array.from(o).sort((t, f) => t - f);
+  }, [r]), u = S((o) => {
+    e.setPageSize(o), a();
+  }, [a, e]);
+  return /* @__PURE__ */ s(x, { children: [/* @__PURE__ */ s(v, {
+    dataTest: "table-rows-count-button",
+    variant: "outlined",
+    size: "large",
+    onClick: h,
+    endIcon: /* @__PURE__ */ i(w, {
+      className: `${l ? "rotate-180" : "rotate-0"} transition-transform duration-300`,
+      height: 24,
+      width: 24
+    }),
+    children: [
+      r,
+      " ",
+      c ? "rader" : "rows"
+    ]
+  }), /* @__PURE__ */ i(b, {
+    open: l,
+    anchorEl: n,
+    slotProps: { paper: { sx: {
+      width: n ? n.clientWidth : void 0,
+      maxHeight: 288,
+      overflowY: "auto"
+    } } },
+    onClose: a,
+    anchorOrigin: m.anchorOrigin,
+    transformOrigin: m.transformOrigin,
+    classes: { paper: "border border-solid border-delta-200 py-2" },
+    children: g.map((o) => /* @__PURE__ */ i(C, {
+      onClick: (t) => {
+        t.stopPropagation(), t.preventDefault(), u(o);
+      },
+      selected: r === o,
+      children: /* @__PURE__ */ s("span", {
+        className: "text-sm font-normal text-delta-700",
+        children: [
+          o,
+          " ",
+          c ? "rader" : "rows"
+        ]
+      })
+    }, o))
+  })] });
+}
+export {
+  T as TableRowCountSelect
+};