asma-ui-core 3.44.0 → 3.45.0

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

@@ -1,70 +1,73 @@
+import { StyledPopover as D } from "../../../../../components/utils/popover/StyledPopover.js";
 import { INTERNAL_COLUMN_IDS as S } from "../../../../types.js";
-import { cn as D } from "../../../../helpers/cn.js";
-import { StyledCheckbox as N } from "../../../../shared-components/StyledCheckbox.js";
-import { StyledTooltip as T } from "../../../../shared-components/tooltip/index.js";
-import { useToggleMenuVisibility as A } from "../../../../hooks/useToggleMenuVisibility.hook.js";
-import { StyledButton as L } from "../../../../shared-components/button/StyledButton.js";
-import { PinIcon as _ } from "../../../../shared-components/PinIcon.js";
-import a from "./TableActions.module.js";
-import c from "./HeaderActionMenu.module.js";
-import { DotsHorizontalIcon as k } from "../../../../shared-components/DotsHorizontalIcon.js";
-import { useTranslations as H } from "../../../../hooks/useTranslations.js";
-import { Popover as I } from "@mui/material";
-import { jsx as i, jsxs as d } from "react/jsx-runtime";
-import { compact as O } from "lodash-es";
-import { DndContext as M, PointerSensor as R, closestCenter as V, useSensor as E, useSensors as P } from "@dnd-kit/core";
+import { cn as N } from "../../../../helpers/cn.js";
+import { StyledCheckbox as T } from "../../../../shared-components/StyledCheckbox.js";
+import { StyledTooltip as A } from "../../../../shared-components/tooltip/index.js";
+import { useToggleMenuVisibility as L } from "../../../../hooks/useToggleMenuVisibility.hook.js";
+import { StyledButton as _ } from "../../../../shared-components/button/StyledButton.js";
+import { PinIcon as k } from "../../../../shared-components/PinIcon.js";
+import m from "./TableActions.module.js";
+import f from "./HeaderActionMenu.module.js";
+import { DotsHorizontalIcon as H } from "../../../../shared-components/DotsHorizontalIcon.js";
+import { useTranslations as I } from "../../../../hooks/useTranslations.js";
+import { compact as O } from "../../../../../helpers/arrays.js";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { DndContext as R, PointerSensor as V, closestCenter as E, useSensor as M, useSensors as P } from "@dnd-kit/core";
 import { restrictToParentElement as w, restrictToVerticalAxis as z } from "@dnd-kit/modifiers";
 import { SortableContext as W, arrayMove as j, useSortable as U, verticalListSortingStrategy as B } from "@dnd-kit/sortable";
 import { CSS as Y } from "@dnd-kit/utilities";
-function $({ id: n, disabled: m, children: f }) {
-  const { attributes: u, listeners: p, setNodeRef: h, transform: b, transition: l } = U({
+function $({ id: n, disabled: p, children: u }) {
+  const { attributes: d, listeners: h, setNodeRef: b, transform: g, transition: l } = U({
     id: n,
-    disabled: m
+    disabled: p
   });
   return /* @__PURE__ */ i("div", {
-    ref: h,
+    ref: b,
     style: {
-      transform: Y.Transform.toString(b),
+      transform: Y.Transform.toString(g),
       transition: l
     },
-    children: f({
-      attributes: u,
-      listeners: p
+    children: u({
+      attributes: d,
+      listeners: h
     })
   });
 }
-function ce({ headerData: n, locale: m }) {
-  const { anchorEl: f, open: u, handleClose: p, handleOpen: h } = A(), b = n.table.getAllLeafColumns().some((e) => e.getCanHide() && !e.getIsVisible() && !S.includes(e.id)), l = n.table.getAllLeafColumns(), y = (e) => {
+function ce({ headerData: n, locale: p }) {
+  const { anchorEl: u, open: d, handleClose: h, handleOpen: b } = L(), g = n.table.getAllLeafColumns().some((e) => e.getCanHide() && !e.getIsVisible() && !S.includes(e.id)), l = n.table.getAllLeafColumns(), y = (e) => {
     const { active: o, over: t } = e;
     !o || !t || o.id === t.id || l.find((r) => r.id === t.id)?.columnDef.fixedLeft || l.find((r) => r.id === t.id)?.columnDef.fixedRight || n.table.setColumnOrder((r) => {
       const s = O(r).length ? r : n.table.getAllLeafColumns().map((C) => C.id);
       return j(s, s.indexOf(o.id), s.indexOf(t.id));
     });
-  }, v = P(E(R, { activationConstraint: { distance: 8 } })), g = H(m), x = l.filter((e) => !S.includes(e.id) && !!e.columnDef.header);
-  return /* @__PURE__ */ d("div", {
-    className: a["actions-header-wrapper"],
-    children: [/* @__PURE__ */ d("button", {
+  }, v = P(M(V, { activationConstraint: { distance: 8 } })), c = I(p), x = l.filter((e) => !S.includes(e.id) && !!e.columnDef.header);
+  return /* @__PURE__ */ a("div", {
+    className: m["actions-header-wrapper"],
+    children: [/* @__PURE__ */ a("button", {
       type: "button",
-      className: a["actions-header"],
-      onClick: h,
-      children: [/* @__PURE__ */ i(_, { className: a["pin-icon"] }), b && /* @__PURE__ */ i("div", { className: a["pin-indicator"] })]
-    }), /* @__PURE__ */ d(I, {
-      anchorEl: f,
+      "aria-label": c.column_settings,
+      "aria-haspopup": "true",
+      "aria-expanded": d,
+      className: m["actions-header"],
+      onClick: b,
+      children: [/* @__PURE__ */ i(k, { className: m["pin-icon"] }), g && /* @__PURE__ */ i("div", { className: m["pin-indicator"] })]
+    }), /* @__PURE__ */ a(D, {
+      anchorEl: u,
       anchorOrigin: {
         horizontal: "left",
         vertical: "bottom"
       },
-      open: u,
-      onClose: p,
-      sx: { "& .MuiPaper-root": {
+      open: d,
+      onClose: h,
+      slotProps: { paper: { sx: {
         maxHeight: "calc(7 * 36px)",
         overflowY: "auto",
         scrollbarWidth: "thin"
-      } },
-      children: [/* @__PURE__ */ i(M, {
+      } } },
+      children: [/* @__PURE__ */ i(R, {
         modifiers: [z, w],
         onDragEnd: y,
-        collisionDetection: (e) => V(e).filter((o) => {
+        collisionDetection: (e) => E(e).filter((o) => {
           const t = x.find((r) => r.id === o.id);
           return !t?.columnDef.fixedLeft && !t?.columnDef.fixedRight;
         }),
@@ -73,21 +76,21 @@ function ce({ headerData: n, locale: m }) {
           items: x.map((e) => e.id),
           strategy: B,
           children: x.map((e) => {
-            const o = !!e.columnDef.fixedLeft || !!e.columnDef.fixedRight, t = e.columnDef.enableHiding === !1, r = o || t ? /* @__PURE__ */ d("div", { children: [o && g.column_reorder, t && g.column_hidden] }) : null;
+            const o = !!e.columnDef.fixedLeft || !!e.columnDef.fixedRight, t = e.columnDef.enableHiding === !1, r = o || t ? /* @__PURE__ */ a("div", { children: [o && c.column_reorder, t && c.column_hidden] }) : null;
             return /* @__PURE__ */ i($, {
               id: e.id,
               disabled: o,
-              children: ({ listeners: s, attributes: C }) => /* @__PURE__ */ i(T, {
+              children: ({ listeners: s, attributes: C }) => /* @__PURE__ */ i(A, {
                 title: r,
                 arrow: !0,
-                children: /* @__PURE__ */ d("button", {
+                children: /* @__PURE__ */ a("button", {
                   type: "button",
                   onClick: () => {
                     t || e.toggleVisibility(!e.getIsVisible());
                   },
-                  className: c["table-action-item"],
+                  className: f["table-action-item"],
                   children: [
-                    /* @__PURE__ */ i(k, {
+                    /* @__PURE__ */ i(H, {
                       width: 20,
                       height: 20,
                       ...C,
@@ -98,11 +101,11 @@ function ce({ headerData: n, locale: m }) {
                         userSelect: "none",
                         WebkitTouchCallout: "none"
                       },
-                      className: D(c["drag-icon"], o ? c["drag-icon--disabled"] : c["drag-icon--enabled"])
+                      className: N(f["drag-icon"], o ? f["drag-icon--disabled"] : f["drag-icon--enabled"])
                     }),
                     /* @__PURE__ */ i("span", {
                       className: "px-2",
-                      children: /* @__PURE__ */ i(N, {
+                      children: /* @__PURE__ */ i(T, {
                         readOnly: t,
                         dataTest: `${e.id}-column-visibility-checkbox`,
                         size: "small",
@@ -112,7 +115,7 @@ function ce({ headerData: n, locale: m }) {
                       })
                     }),
                     /* @__PURE__ */ i("span", {
-                      className: "font-roboto text-sm text-delta-700",
+                      className: "font-roboto text-base text-delta-700",
                       children: e.columnDef.pinnedHeaderText ?? (typeof e.columnDef.header == "string" ? e.columnDef.header : e.id)
                     })
                   ]
@@ -123,12 +126,12 @@ function ce({ headerData: n, locale: m }) {
         })
       }), /* @__PURE__ */ i("div", {
         className: "pb-2 pl-2",
-        children: /* @__PURE__ */ i(L, {
+        children: /* @__PURE__ */ i(_, {
           dataTest: "reset-order-button",
           variant: "text",
           size: "small",
           onClick: () => n.table.resetColumnOrder(),
-          children: g.reset_order
+          children: c.reset_order
         })
       })]
     })]

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

@@ -1,27 +1,31 @@
-import { isCustomAction as M } from "../../../../types.js";
-import { StyledTooltip as f } from "../../../../shared-components/tooltip/index.js";
-import { useToggleMenuVisibility as y } 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 { MenuList as I, Popover as V } from "@mui/material";
-import { jsx as t, jsxs as g } from "react/jsx-runtime";
-function J({ tableData: o, actions: w, rowActionsState: v }) {
-  const { anchorEl: C, open: b, handleClose: s, handleOpen: x } = y(), i = w(o.row), n = v?.(o.row) ?? { state: "enabled" }, P = o.table.options.meta?.locale === "no" ? "Ingen handlinger tilgjengelig" : "No actions available", N = D(() => i.every((e) => "component" in e ? !1 : e.hide), [i]), d = i.length > 0 && !N, p = n.state === "enabled" && !d, T = n.state !== "hidden" && (d || p || n.state === "disabled"), [a, l] = F(!1);
-  if (k(() => {
+import { StyledPopover as S } from "../../../../../components/utils/popover/StyledPopover.js";
+import { StyledMenuList as A } from "../../../../../components/navigation/menu/StyledMenuList.js";
+import { isCustomAction as O } from "../../../../types.js";
+import { StyledTooltip as g } from "../../../../shared-components/tooltip/index.js";
+import { useToggleMenuVisibility as j } from "../../../../hooks/useToggleMenuVisibility.hook.js";
+import { DotsVerticalIcon as k } from "../../../../shared-components/DotsVerticalIcon.js";
+import { StyledMenuItem as D } from "../../../../shared-components/StyledMenuItem.js";
+import { StyledButton as F } from "../../../../shared-components/button/StyledButton.js";
+import { CircleWarningOutlineIcon as I } from "../../../../shared-components/CircleWarningOutlineIcon.js";
+import w, { useEffect as R, useMemo as V, useState as z } from "react";
+import { jsx as t, jsxs as b } from "react/jsx-runtime";
+function X({ tableData: o, actions: v, rowActionsState: C }) {
+  const { anchorEl: x, open: d, handleClose: s, handleOpen: P } = j(), i = v(o.row), n = C?.(o.row) ?? { state: "enabled" }, p = o.table.options.meta?.locale, y = p === "no" ? "Ingen handlinger tilgjengelig" : "No actions available", N = p === "no" ? "Radhandlinger" : "Row actions", T = V(() => i.every((e) => "component" in e ? !1 : e.hide), [i]), u = i.length > 0 && !T, m = n.state === "enabled" && !u, M = n.state !== "hidden" && (u || m || n.state === "disabled"), [a, l] = z(!1);
+  if (R(() => {
     if (!a) return;
     const e = window.setTimeout(() => l(!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: "",
+  }, [a]), !M) return /* @__PURE__ */ t("div", { className: "flex w-[40px] items-center justify-center" });
+  const c = n.state === "disabled", f = /* @__PURE__ */ t(F, {
+    dataTest: "row-actions-button",
+    "aria-label": N,
+    "aria-haspopup": "true",
+    "aria-expanded": d,
     variant: "text",
     size: "small",
     disabled: c,
     onClick: (e) => {
-      e.stopPropagation(), e.preventDefault(), !c && (x(e), o.row.onChangeFocused(!0));
+      e.stopPropagation(), e.preventDefault(), !c && (P(e), o.row.onChangeFocused(!0));
     },
     onMouseDown: (e) => {
       e.stopPropagation(), e.preventDefault();
@@ -29,7 +33,7 @@ function J({ tableData: o, actions: w, rowActionsState: v }) {
     onMouseUp: (e) => {
       e.stopPropagation(), e.preventDefault();
     },
-    children: /* @__PURE__ */ t(O, {
+    children: /* @__PURE__ */ t(k, {
       className: c ? "text-delta-300" : "text-delta-700",
       width: 20,
       height: 20
@@ -37,9 +41,9 @@ function J({ tableData: o, actions: w, rowActionsState: v }) {
   });
   return /* @__PURE__ */ t("div", {
     className: "flex w-[40px] items-center justify-center",
-    children: /* @__PURE__ */ g("div", {
+    children: /* @__PURE__ */ b("div", {
       className: "flex items-center justify-center",
-      children: [n.state === "disabled" ? /* @__PURE__ */ t(f, {
+      children: [n.state === "disabled" ? /* @__PURE__ */ t(g, {
         title: n.tooltipTitle,
         arrow: !0,
         placement: n.tooltipPlacement ?? "top",
@@ -54,11 +58,11 @@ function J({ tableData: o, actions: w, rowActionsState: v }) {
           onClick: (e) => {
             e.stopPropagation(), e.preventDefault();
           },
-          children: u
+          children: f
         })
-      }) : u, n.state === "enabled" && /* @__PURE__ */ t(V, {
-        open: b,
-        anchorEl: C,
+      }) : f, n.state === "enabled" && /* @__PURE__ */ t(S, {
+        open: d,
+        anchorEl: x,
         onClose: () => {
           s(), o.row.onChangeFocused(!1);
         },
@@ -73,24 +77,24 @@ function J({ tableData: o, actions: w, rowActionsState: v }) {
           vertical: "top",
           horizontal: "right"
         },
-        children: p ? /* @__PURE__ */ g("div", {
-          className: "flex items-center gap-2 p-3 text-delta-700",
-          children: [/* @__PURE__ */ t(S, {
+        children: m ? /* @__PURE__ */ b("div", {
+          className: "flex items-center gap-2 p-3 text-base text-delta-700",
+          children: [/* @__PURE__ */ t(I, {
             width: 20,
             height: 20
-          }), /* @__PURE__ */ t("span", { children: P })]
-        }) : /* @__PURE__ */ t(I, {
+          }), /* @__PURE__ */ t("span", { children: y })]
+        }) : /* @__PURE__ */ t(A, {
           disablePadding: !0,
-          children: i.map((e, m) => {
-            if (M(e)) {
+          children: i.map((e, h) => {
+            if (O(e)) {
               const r = e.component(o.row, s);
-              return h.isValidElement(r) ? /* @__PURE__ */ t(h.Fragment, { children: r }, m) : null;
+              return w.isValidElement(r) ? /* @__PURE__ */ t(w.Fragment, { children: r }, h) : null;
             }
-            return e.hide ? null : /* @__PURE__ */ t(f, {
+            return e.hide ? null : /* @__PURE__ */ t(g, {
               title: e?.tooltipTitle,
               arrow: !0,
               placement: e?.tooltipPlacement ?? "left",
-              children: /* @__PURE__ */ t("span", { children: /* @__PURE__ */ t(j, {
+              children: /* @__PURE__ */ t("span", { children: /* @__PURE__ */ t(D, {
                 className: e.className,
                 disabled: e.disabled,
                 onClick: () => {
@@ -104,7 +108,7 @@ function J({ tableData: o, actions: w, rowActionsState: v }) {
                 },
                 children: e.label
               }) })
-            }, m);
+            }, h);
           })
         })
       })]
@@ -112,5 +116,5 @@ function J({ tableData: o, actions: w, rowActionsState: v }) {
   });
 }
 export {
-  J as RowActionMenu
+  X as RowActionMenu
 };

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

@@ -1,8 +1,8 @@
 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 { jsx as t } from "react/jsx-runtime";
 import "@tanstack/react-table";
-function m(t, i) {
+function p(o, i) {
   return {
     id: r,
     minSize: 50,
@@ -12,25 +12,28 @@ function m(t, i) {
     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",
+      const n = e.row.getIsExpanded();
+      return e.row.getCanExpand() ? /* @__PURE__ */ t("button", {
+        type: "button",
+        "aria-label": n ? "Collapse row" : "Expand row",
+        "aria-expanded": n,
+        className: "flex w-full items-center justify-center border-0 bg-transparent outline-none focus:outline-none",
         onClick: () => e.row.getToggleExpandedHandler()(),
         style: { height: i ?? "auto" },
-        children: /* @__PURE__ */ n(a, {
+        children: /* @__PURE__ */ t(a, {
           width: 24,
           height: 24,
           style: {
-            rotate: o ? "180deg" : "0deg",
+            rotate: n ? "180deg" : "0deg",
             transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
             transitionDuration: "500ms"
           }
         })
       }) : null;
     },
-    fixedLeft: t
+    fixedLeft: o
   };
 }
 export {
-  m as generateExpandColumn
+  p as generateExpandColumn
 };

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

@@ -1,16 +1,17 @@
+import { StyledPopover as y } from "../../../components/utils/popover/StyledPopover.js";
+import { StyledMenuList as S } from "../../../components/navigation/menu/StyledMenuList.js";
 import c from "../StyledTable.module.js";
 import { StyledTooltip as g } from "../../shared-components/tooltip/index.js";
 import { ChevronDownIcon as I } from "../../shared-components/ChevronDownIcon.js";
-import { useToggleMenuVisibility as y } from "../../hooks/useToggleMenuVisibility.hook.js";
-import { StyledButton as h } from "../../shared-components/button/StyledButton.js";
+import { useToggleMenuVisibility as N } 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 { MenuList as k, Popover as z } from "@mui/material";
-import { Fragment as $, jsx as e, jsxs as m } from "react/jsx-runtime";
-function H({ table: o, locale: C }) {
-  const { anchorEl: s, open: p, handleClose: d, handleOpen: b } = y(), u = N(null), n = C === "no", f = P(() => ({
+import { ChevronLeftIcon as w } from "../../shared-components/ChevronLeftIcon.js";
+import { StyledMenuItem as k } from "../../shared-components/menu-item/index.js";
+import { useCallback as v, useMemo as P, useRef as z } from "react";
+import { Fragment as $, jsx as e, jsxs as h } from "react/jsx-runtime";
+function V({ table: o, locale: C }) {
+  const { anchorEl: s, open: p, handleClose: d, handleOpen: b } = N(), u = z(null), n = C === "no", f = P(() => ({
     anchorOrigin: {
       vertical: -5,
       horizontal: "center"
@@ -32,12 +33,12 @@ function H({ table: o, locale: C }) {
     d,
     i
   ]);
-  return /* @__PURE__ */ m($, { children: [
+  return /* @__PURE__ */ h($, { children: [
     /* @__PURE__ */ e(g, {
       title: n ? "Nåværende side" : "Current Page",
       children: /* @__PURE__ */ e("div", {
         ref: u,
-        children: /* @__PURE__ */ m(h, {
+        children: /* @__PURE__ */ h(m, {
           dataTest: "current-page-button",
           variant: "outlined",
           size: "large",
@@ -59,25 +60,27 @@ function H({ table: o, locale: C }) {
         })
       })
     }),
-    /* @__PURE__ */ e(z, {
+    /* @__PURE__ */ e(y, {
       open: p,
       anchorEl: s,
-      slotProps: { paper: { sx: {
-        width: s ? s.clientWidth : void 0,
-        maxHeight: 288,
-        overflowY: "auto"
-      } } },
+      slotProps: { paper: {
+        className: "border border-solid border-delta-200",
+        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" },
-      children: /* @__PURE__ */ e(k, { children: x.map((t) => /* @__PURE__ */ e(w, {
+      children: /* @__PURE__ */ e(S, { children: x.map((t) => /* @__PURE__ */ e(k, {
         onClick: (r) => {
           r.stopPropagation(), r.preventDefault(), T(t);
         },
         selected: t === l,
-        children: /* @__PURE__ */ m("span", {
-          className: "text-sm font-normal text-delta-700",
+        children: /* @__PURE__ */ h("span", {
+          className: "text-base font-normal text-delta-700",
           children: [
             n ? "Side" : "Page",
             " ",
@@ -88,7 +91,7 @@ function H({ table: o, locale: C }) {
     }),
     /* @__PURE__ */ e(g, {
       title: l === 1 ? "" : n ? "Forrige side" : "Previous Page",
-      children: /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(h, {
+      children: /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(m, {
         dataTest: "prev-page-button",
         variant: "outlined",
         onClick: () => {
@@ -96,7 +99,7 @@ function H({ table: o, locale: C }) {
         },
         size: "large",
         disabled: !o.getCanPreviousPage(),
-        startIcon: /* @__PURE__ */ e(S, {
+        startIcon: /* @__PURE__ */ e(w, {
           height: 24,
           width: 24
         })
@@ -104,7 +107,7 @@ function H({ table: o, locale: C }) {
     }),
     /* @__PURE__ */ e(g, {
       title: l === a ? "" : n ? "Neste side" : "Next Page",
-      children: /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(h, {
+      children: /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(m, {
         dataTest: "next-page-button",
         variant: "outlined",
         onClick: () => {
@@ -121,5 +124,5 @@ function H({ table: o, locale: C }) {
   ] });
 }
 export {
-  H as TablePagination
+  V as TablePagination
 };

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

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