asma-ui-core 3.42.0 → 3.43.0

package/dist/src/table/shared-components/StyledCheckbox.d.ts

@@ -1,4 +1,5 @@
-import { default as React, ChangeEvent, SVGProps } from 'react';
+import { default as React, SVGProps } from 'react';
+import { Checkbox } from '@base-ui/react/checkbox';
 type StyledCheckboxProps = {
     dataTest: string;
     size?: 'small' | 'medium';
@@ -7,13 +8,9 @@ type StyledCheckboxProps = {
     disableRipple?: boolean;
     hideWrapper?: boolean;
     className?: string;
-    onChange?: (event: ChangeEvent<HTMLInputElement>, checked: boolean) => void;
-} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'size' | 'checked' | 'type'>;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>, checked: boolean) => void;
+} & Omit<React.ComponentProps<typeof Checkbox.Root>, 'children'>;
 export declare const IndeterminateIcon: (props: SVGProps<SVGSVGElement>) => JSX.Element;
 export declare const CheckIcon: (props: SVGProps<SVGSVGElement>) => JSX.Element;
-/**
- * Table's native `<input type="checkbox">` (replaces `@base-ui/react`). Mirrors the main
- * `StyledCheckbox`; state drives the SCSS `data-*` selectors. TASK-201.
- */
 export declare const StyledCheckbox: React.FC<StyledCheckboxProps>;
 export {};

package/dist/src/table/shared-components/StyledMenuItem.d.ts

@@ -1,18 +1,2 @@
-import { MouseEvent, ReactNode } from 'react';
-export interface StyledMenuItemProps {
-    children?: ReactNode;
-    disabled?: boolean;
-    selected?: boolean;
-    className?: string;
-    classes?: {
-        root?: string;
-    };
-    onClick?: (event: MouseEvent<HTMLLIElement>) => void;
-    onMouseDown?: (event: MouseEvent<HTMLLIElement>) => void;
-    onMouseUp?: (event: MouseEvent<HTMLLIElement>) => void;
-}
-/**
- * Table row-action menu item (replaces MUI `MenuItem`). Native `role="menuitem"`; disabled stays
- * focusable but non-interactive. TASK-404.
- */
-export declare const StyledMenuItem: ({ children, disabled, selected, className, classes, onClick, onMouseDown, onMouseUp, }: StyledMenuItemProps) => JSX.Element;
+import { MenuItemProps } from '@mui/material';
+export declare const StyledMenuItem: (props: MenuItemProps) => JSX.Element;

package/dist/src/table/shared-components/menu-item/index.d.ts

@@ -1,13 +1,2 @@
-import { MouseEvent, ReactNode } from 'react';
-export interface MenuItemProps {
-    children?: ReactNode;
-    selected?: boolean;
-    disabled?: boolean;
-    className?: string;
-    onClick?: (event: MouseEvent<HTMLLIElement>) => void;
-}
-/**
- * Table menu item with a leading check column (replaces MUI `MenuItem`). Native `role="menuitem"`.
- * TASK-404.
- */
-export declare const StyledMenuItem: ({ children, selected, disabled, className, onClick }: MenuItemProps) => JSX.Element;
+import { MenuItemProps } from '@mui/material';
+export declare const StyledMenuItem: (props: MenuItemProps) => JSX.Element;

package/dist/src/table/shared-components/tooltip/index.d.ts

@@ -1,6 +1,2 @@
-import { TooltipProps } from '../../../components/data-display/tooltip/StyledTooltip';
-/**
- * Table tooltip — the core `StyledTooltip` (MUI-free) with the table's arrow + top-placement
- * defaults. TASK-404.
- */
+import { TooltipProps } from '@mui/material';
 export declare const StyledTooltip: (props: TooltipProps) => JSX.Element;

package/dist/src/table/types.d.ts

@@ -1,7 +1,7 @@
 import { ColumnPinningColumnDef, ColumnSizingColumnDef, GroupingColumnDef, RowData, SortingColumnDef, VisibilityColumnDef, AccessorFn, ColumnDefTemplate, CellContext, ColumnMeta, HeaderContext, Row, RowModel, TableOptions, Table, ColumnDef } from '@tanstack/react-table';
 import { CSSProperties, MouseEvent, MutableRefObject, ReactElement, ReactNode } from 'react';
 import { ExpandedRow, ExpandedRowsInstance, ExpandedRowsOptions, ExpandedRowsTableState } from './custom-features/expand-rows';
-import { TooltipProps } from '../components/data-display/tooltip/StyledTooltip';
+import { TooltipProps } from '@mui/material';
 import { FocusedRowsOptions, FocusedRowsTableState, FocusedRow, FocusedRowsInstance } from './custom-features/focus-rows';
 import { OrderedColumnsOptions, OrderedColumnsTableState } from './custom-features/order-columns';
 import { RowSelectionTooltipOptions, RowSelectionTooltipRow } from './custom-features/row-selection-tooltip';

package/dist/table/components/Fetching.js

@@ -1,10 +1,10 @@
-import { LoadingIcon as o } from "../shared-components/LoadingIcon.js";
-import i from "./StyledTable.module.js";
+import o from "./StyledTable.module.js";
+import { LoadingIcon as i } from "../shared-components/LoadingIcon.js";
 import { jsx as e } from "react/jsx-runtime";
 var m = ({ fetching: t = !1 }) => t ? /* @__PURE__ */ e("div", {
   className: "absolute bottom-0 left-0 right-0 top-0 z-10 flex items-center justify-center bg-white/40",
-  children: /* @__PURE__ */ e(o, {
-    className: i["loading-icon"],
+  children: /* @__PURE__ */ e(i, {
+    className: o["loading-icon"],
     width: 50,
     height: 50
   })

package/dist/table/components/StyledTable.module.js

@@ -1,58 +1,58 @@
-var e = "_tbody_1u0xz_124", _ = "_expanded_row_1u0xz_187", l = "_selected_1u0xz_205", t = "_shadowed_1u0xz_234", a = "_resizer_1u0xz_288", o = "_isResizing_1u0xz_300", r = {
-  "asma-ui-table-styled-table": "_asma-ui-table-styled-table_1u0xz_1",
-  "table-wrapper": "_table-wrapper_1u0xz_26",
-  "table-shell": "_table-shell_1u0xz_33",
-  "table-wrapper--no-rows": "_table-wrapper--no-rows_1u0xz_39",
-  "table-wrapper--proxy": "_table-wrapper--proxy_1u0xz_42",
-  "table-wrapper--proxy-bottom": "_table-wrapper--proxy-bottom_1u0xz_43",
-  "table-wrapper-fetching": "_table-wrapper-fetching_1u0xz_53",
-  "table-scroll": "_table-scroll_1u0xz_56",
-  "table-x--fill-height": "_table-x--fill-height_1u0xz_65",
-  "table-x": "_table-x_1u0xz_65",
-  "table-content": "_table-content_1u0xz_80",
-  "table-header--sticky": "_table-header--sticky_1u0xz_85",
-  "table-hscroll": "_table-hscroll_1u0xz_90",
-  "table-hscroll__content": "_table-hscroll__content_1u0xz_100",
-  "no-rows-overlay-container": "_no-rows-overlay-container_1u0xz_103",
-  "no-rows-overlay-content": "_no-rows-overlay-content_1u0xz_111",
-  "styled-table": "_styled-table_1u0xz_115",
+var e = "_tbody_k8yi5_124", _ = "_expanded_row_k8yi5_187", l = "_selected_k8yi5_205", t = "_shadowed_k8yi5_234", i = "_resizer_k8yi5_288", a = "_isResizing_k8yi5_300", o = {
+  "asma-ui-table-styled-table": "_asma-ui-table-styled-table_k8yi5_1",
+  "table-wrapper": "_table-wrapper_k8yi5_26",
+  "table-shell": "_table-shell_k8yi5_33",
+  "table-wrapper--no-rows": "_table-wrapper--no-rows_k8yi5_39",
+  "table-wrapper--proxy": "_table-wrapper--proxy_k8yi5_42",
+  "table-wrapper--proxy-bottom": "_table-wrapper--proxy-bottom_k8yi5_43",
+  "table-wrapper-fetching": "_table-wrapper-fetching_k8yi5_53",
+  "table-scroll": "_table-scroll_k8yi5_56",
+  "table-x--fill-height": "_table-x--fill-height_k8yi5_65",
+  "table-x": "_table-x_k8yi5_65",
+  "table-content": "_table-content_k8yi5_80",
+  "table-header--sticky": "_table-header--sticky_k8yi5_85",
+  "table-hscroll": "_table-hscroll_k8yi5_90",
+  "table-hscroll__content": "_table-hscroll__content_k8yi5_100",
+  "no-rows-overlay-container": "_no-rows-overlay-container_k8yi5_103",
+  "no-rows-overlay-content": "_no-rows-overlay-content_k8yi5_111",
+  "styled-table": "_styled-table_k8yi5_115",
   tbody: e,
-  "loading-icon": "_loading-icon_1u0xz_129",
-  "t-row": "_t-row_1u0xz_136",
-  "t-cell": "_t-cell_1u0xz_136",
-  "action-cell": "_action-cell_1u0xz_146",
-  "fixed-cell": "_fixed-cell_1u0xz_150",
-  "fixed-right-cell": "_fixed-right-cell_1u0xz_153",
+  "loading-icon": "_loading-icon_k8yi5_129",
+  "t-row": "_t-row_k8yi5_136",
+  "t-cell": "_t-cell_k8yi5_136",
+  "action-cell": "_action-cell_k8yi5_146",
+  "fixed-cell": "_fixed-cell_k8yi5_150",
+  "fixed-right-cell": "_fixed-right-cell_k8yi5_153",
   expanded_row: _,
   selected: l,
-  "single-selection": "_single-selection_1u0xz_208",
-  "action-cell--no-shadow": "_action-cell--no-shadow_1u0xz_225",
-  "action-cell--not-fixed": "_action-cell--not-fixed_1u0xz_228",
+  "single-selection": "_single-selection_k8yi5_208",
+  "action-cell--no-shadow": "_action-cell--no-shadow_k8yi5_225",
+  "action-cell--not-fixed": "_action-cell--not-fixed_k8yi5_228",
   shadowed: t,
-  "shadowed-right": "_shadowed-right_1u0xz_268",
-  "is-loading": "_is-loading_1u0xz_272",
-  "action-cell-default-background": "_action-cell-default-background_1u0xz_275",
-  "fixed-cell-default-background": "_fixed-cell-default-background_1u0xz_278",
-  "fixed-right-cell-default-background": "_fixed-right-cell-default-background_1u0xz_281",
-  "sortable-column": "_sortable-column_1u0xz_284",
-  resizer: a,
-  isResizing: o,
-  "hide-table-header": "_hide-table-header_1u0xz_312",
-  "show-table-header": "_show-table-header_1u0xz_316",
-  "table-header": "_table-header_1u0xz_85",
-  "hide-header": "_hide-header_1u0xz_341",
-  "t-cell__actions": "_t-cell__actions_1u0xz_344",
-  "t-cell__actions--no-shadow": "_t-cell__actions--no-shadow_1u0xz_352",
-  "t-cell__actions--not-fixed": "_t-cell__actions--not-fixed_1u0xz_355",
-  "t-cell__fixed": "_t-cell__fixed_1u0xz_362",
-  "t-cell__fixed-right": "_t-cell__fixed-right_1u0xz_369",
-  "sort-icon": "_sort-icon_1u0xz_376",
-  "table-footer--sticky": "_table-footer--sticky_1u0xz_379",
-  "table-footer--inline": "_table-footer--inline_1u0xz_390",
-  "table-bottom": "_table-bottom_1u0xz_401",
-  "table-bottom--sticky": "_table-bottom--sticky_1u0xz_415",
-  "cursor-not-allowed": "_cursor-not-allowed_1u0xz_419"
+  "shadowed-right": "_shadowed-right_k8yi5_268",
+  "is-loading": "_is-loading_k8yi5_272",
+  "action-cell-default-background": "_action-cell-default-background_k8yi5_275",
+  "fixed-cell-default-background": "_fixed-cell-default-background_k8yi5_278",
+  "fixed-right-cell-default-background": "_fixed-right-cell-default-background_k8yi5_281",
+  "sortable-column": "_sortable-column_k8yi5_284",
+  resizer: i,
+  isResizing: a,
+  "hide-table-header": "_hide-table-header_k8yi5_312",
+  "show-table-header": "_show-table-header_k8yi5_316",
+  "table-header": "_table-header_k8yi5_85",
+  "hide-header": "_hide-header_k8yi5_341",
+  "t-cell__actions": "_t-cell__actions_k8yi5_344",
+  "t-cell__actions--no-shadow": "_t-cell__actions--no-shadow_k8yi5_352",
+  "t-cell__actions--not-fixed": "_t-cell__actions--not-fixed_k8yi5_355",
+  "t-cell__fixed": "_t-cell__fixed_k8yi5_362",
+  "t-cell__fixed-right": "_t-cell__fixed-right_k8yi5_369",
+  "sort-icon": "_sort-icon_k8yi5_376",
+  "table-footer--sticky": "_table-footer--sticky_k8yi5_379",
+  "table-footer--inline": "_table-footer--inline_k8yi5_390",
+  "table-bottom": "_table-bottom_k8yi5_401",
+  "table-bottom--sticky": "_table-bottom--sticky_k8yi5_415",
+  "cursor-not-allowed": "_cursor-not-allowed_k8yi5_419"
 };
 export {
-  r as default
+  o as default
 };

package/dist/table/components/TableRow.js

@@ -1,10 +1,10 @@
 import { ACTIONS_COLUMN_ID as U } from "../types.js";
 import { useRootContext as se } from "../context/RootContext.js";
 import n from "./StyledTable.module.js";
-import { compact as ae } from "../../helpers/arrays.js";
 import W from "clsx";
-import { Fragment as de, useCallback as ce, useEffect as re, useMemo as g } from "react";
-import { Fragment as me, jsx as l, jsxs as p } from "react/jsx-runtime";
+import { Fragment as ae, useCallback as de, useEffect as ce, useMemo as g } from "react";
+import { Fragment as re, jsx as l, jsxs as p } from "react/jsx-runtime";
+import { compact as me } from "lodash-es";
 import { useSortable as ge } from "@dnd-kit/sortable";
 import { flexRender as ue } from "@tanstack/react-table";
 import { CSS as fe } from "@dnd-kit/utilities";
@@ -19,7 +19,7 @@ function ve({ styledTableProps: _, row: t, index: H, columnWindow: { paddingLeft
     zIndex: A ? 1 : 0,
     position: "relative"
   }, { isResizing: ee, disableResizingFlag: te } = se();
-  re(() => {
+  ce(() => {
     K && t.getCanExpand() && !t.getIsExpanded() && t.toggleExpand();
   }, []);
   const B = (e) => {
@@ -34,7 +34,7 @@ function ve({ styledTableProps: _, row: t, index: H, columnWindow: { paddingLeft
   })), T = g(() => r.filter((e) => !e.column.columnDef.fixedLeft && !e.column.columnDef.fixedRight && e.column.id !== "actions"), [r]), a = g(() => r.filter((e) => !!e.column.columnDef.fixedRight || e.column.id === "actions").map((e, i, o) => ({
     ...e,
     right: o.slice(i + 1).reduce((d, c) => d + (c.column.getSize() ?? 0), 0)
-  })), [r]), L = g(() => a.some((e) => e.column.id === U), [a]), h = !!C || !!V, M = g(() => a.some((e) => !!e.column.columnDef.fixedRight), [a]), m = g(() => r.filter((e) => e.column.columnDef.fixedLeft), [r]), S = !Y && !q && G, b = t.getIsSelected() && S, R = x instanceof Function, z = F.length > 0 ? ae(F.map((e) => T[e])) : T, D = ce((e, i) => {
+  })), [r]), L = g(() => a.some((e) => e.column.id === U), [a]), h = !!C || !!V, M = g(() => a.some((e) => !!e.column.columnDef.fixedRight), [a]), m = g(() => r.filter((e) => e.column.columnDef.fixedLeft), [r]), S = !Y && !q && G, b = t.getIsSelected() && S, R = x instanceof Function, z = F.length > 0 ? me(F.map((e) => T[e])) : T, D = de((e, i) => {
     const o = e.column.id === U, d = e.column.columnDef.fixedLeft, c = !!e.column.columnDef.fixedRight, ie = e.id === m.at(-1)?.id, oe = e.id === a.at(0)?.id && !o, le = t.isExpanded(), k = i === 0;
     return /* @__PURE__ */ l("td", {
       className: W(n["t-cell"], R && "cursor-pointer", N, o && n["action-cell"], o && !h && n["action-cell--not-fixed"], o && h && M && n["action-cell--no-shadow"], o && h && !!C && m.length && n.shadowed, o && (s?.(t) ? s?.(t) : n["action-cell-default-background"]), d && n["fixed-cell"], c && n["fixed-right-cell"], ie && n.shadowed, oe && n["shadowed-right"], t.getIsSelected() && n.selected, d && (s?.(t) ? s?.(t) : n["fixed-cell-default-background"]), c && (s?.(t) ? s?.(t) : n["fixed-right-cell-default-background"]), le && n.expanded_row, (!!b || t.isFocused()) && n["single-selection"]),
@@ -82,7 +82,7 @@ function ve({ styledTableProps: _, row: t, index: H, columnWindow: { paddingLeft
     S,
     N
   ]);
-  return /* @__PURE__ */ p(de, { children: [/* @__PURE__ */ p("tr", {
+  return /* @__PURE__ */ p(ae, { children: [/* @__PURE__ */ p("tr", {
     "aria-selected": t.getIsSelected() || t.isFocused() ? "true" : "false",
     tabIndex: t.isFocused() ? 0 : -1,
     "data-index": H,
@@ -139,7 +139,7 @@ function ve({ styledTableProps: _, row: t, index: H, columnWindow: { paddingLeft
       }),
       a.map((e, i) => D(e, m.length + z.length + i))
     ]
-  }), t.getIsExpanded() && /* @__PURE__ */ l(me, { children: I && P?.({
+  }), t.getIsExpanded() && /* @__PURE__ */ l(re, { children: I && P?.({
     rows: I.get(t.original.id.toString()) ?? [],
     row: t.original
   }) })] }, t.id);

package/dist/table/components/TableSkeleton.js

@@ -1,12 +1,12 @@
-import { Skeleton as a } from "../../components/mui-compat/Skeleton.js";
-import l from "./TableSkeleton.module.js";
-import { Fragment as m } from "react";
+import a from "./TableSkeleton.module.js";
+import { Fragment as l } from "react";
+import { Skeleton as m } from "@mui/material";
 import { jsx as r } from "react/jsx-runtime";
-var p = (({ colSpan: o, rowHeight: t = 48 }) => /* @__PURE__ */ r(m, { children: Array.from({ length: 10 }).map((i, e) => /* @__PURE__ */ r("tr", { children: /* @__PURE__ */ r("td", {
+var p = (({ colSpan: o, rowHeight: t = 48 }) => /* @__PURE__ */ r(l, { children: Array.from({ length: 10 }).map((i, e) => /* @__PURE__ */ r("tr", { children: /* @__PURE__ */ r("td", {
   colSpan: o,
   height: t,
-  className: l["skeleton-row"],
-  children: /* @__PURE__ */ r(a, {
+  className: a["skeleton-row"],
+  children: /* @__PURE__ */ r(m, {
     variant: "rectangular",
     width: "100%",
     height: 40,

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

@@ -1,18 +1,18 @@
-import { StyledPopover as D } from "../../../../../components/utils/popover/StyledPopover.js";
 import { INTERNAL_COLUMN_IDS as S } from "../../../../types.js";
-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 { 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 H } from "../../../../shared-components/DotsHorizontalIcon.js";
-import { useTranslations as I } from "../../../../hooks/useTranslations.js";
-import { compact as O } from "../../../../../helpers/arrays.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 { DndContext as R, PointerSensor as V, closestCenter as E, useSensor as M, useSensors as P } from "@dnd-kit/core";
+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 { 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";
@@ -34,21 +34,21 @@ function $({ id: n, disabled: m, children: f }) {
   });
 }
 function ce({ headerData: n, locale: m }) {
-  const { anchorEl: f, open: u, handleClose: p, handleOpen: h } = L(), b = n.table.getAllLeafColumns().some((e) => e.getCanHide() && !e.getIsVisible() && !S.includes(e.id)), l = n.table.getAllLeafColumns(), y = (e) => {
+  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) => {
     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(M(V, { activationConstraint: { distance: 8 } })), g = I(m), x = l.filter((e) => !S.includes(e.id) && !!e.columnDef.header);
+  }, 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", {
       type: "button",
       className: a["actions-header"],
       onClick: h,
-      children: [/* @__PURE__ */ i(k, { className: a["pin-icon"] }), b && /* @__PURE__ */ i("div", { className: a["pin-indicator"] })]
-    }), /* @__PURE__ */ d(D, {
+      children: [/* @__PURE__ */ i(_, { className: a["pin-icon"] }), b && /* @__PURE__ */ i("div", { className: a["pin-indicator"] })]
+    }), /* @__PURE__ */ d(I, {
       anchorEl: f,
       anchorOrigin: {
         horizontal: "left",
@@ -56,15 +56,15 @@ function ce({ headerData: n, locale: m }) {
       },
       open: u,
       onClose: p,
-      slotProps: { paper: { sx: {
+      sx: { "& .MuiPaper-root": {
         maxHeight: "calc(7 * 36px)",
         overflowY: "auto",
         scrollbarWidth: "thin"
-      } } },
-      children: [/* @__PURE__ */ i(R, {
+      } },
+      children: [/* @__PURE__ */ i(M, {
         modifiers: [z, w],
         onDragEnd: y,
-        collisionDetection: (e) => E(e).filter((o) => {
+        collisionDetection: (e) => V(e).filter((o) => {
           const t = x.find((r) => r.id === o.id);
           return !t?.columnDef.fixedLeft && !t?.columnDef.fixedRight;
         }),
@@ -77,7 +77,7 @@ function ce({ headerData: n, locale: m }) {
             return /* @__PURE__ */ i($, {
               id: e.id,
               disabled: o,
-              children: ({ listeners: s, attributes: C }) => /* @__PURE__ */ i(A, {
+              children: ({ listeners: s, attributes: C }) => /* @__PURE__ */ i(T, {
                 title: r,
                 arrow: !0,
                 children: /* @__PURE__ */ d("button", {
@@ -87,7 +87,7 @@ function ce({ headerData: n, locale: m }) {
                   },
                   className: c["table-action-item"],
                   children: [
-                    /* @__PURE__ */ i(H, {
+                    /* @__PURE__ */ i(k, {
                       width: 20,
                       height: 20,
                       ...C,
@@ -98,11 +98,11 @@ function ce({ headerData: n, locale: m }) {
                         userSelect: "none",
                         WebkitTouchCallout: "none"
                       },
-                      className: N(c["drag-icon"], o ? c["drag-icon--disabled"] : c["drag-icon--enabled"])
+                      className: D(c["drag-icon"], o ? c["drag-icon--disabled"] : c["drag-icon--enabled"])
                     }),
                     /* @__PURE__ */ i("span", {
                       className: "px-2",
-                      children: /* @__PURE__ */ i(T, {
+                      children: /* @__PURE__ */ i(N, {
                         readOnly: t,
                         dataTest: `${e.id}-column-visibility-checkbox`,
                         size: "small",
@@ -123,7 +123,7 @@ function ce({ headerData: n, locale: m }) {
         })
       }), /* @__PURE__ */ i("div", {
         className: "pb-2 pl-2",
-        children: /* @__PURE__ */ i(_, {
+        children: /* @__PURE__ */ i(L, {
           dataTest: "reset-order-button",
           variant: "text",
           size: "small",

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

@@ -1,22 +1,21 @@
-import { StyledPopover as T } from "../../../../../components/utils/popover/StyledPopover.js";
-import { StyledMenuList as M } from "../../../../../components/navigation/menu/StyledMenuList.js";
-import { isCustomAction as S } from "../../../../types.js";
+import { isCustomAction as M } from "../../../../types.js";
 import { StyledTooltip as f } from "../../../../shared-components/tooltip/index.js";
-import { useToggleMenuVisibility as O } from "../../../../hooks/useToggleMenuVisibility.hook.js";
-import { DotsVerticalIcon as j } from "../../../../shared-components/DotsVerticalIcon.js";
-import { StyledMenuItem as A } from "../../../../shared-components/StyledMenuItem.js";
-import { StyledButton as k } from "../../../../shared-components/button/StyledButton.js";
-import { CircleWarningOutlineIcon as D } from "../../../../shared-components/CircleWarningOutlineIcon.js";
-import h, { useEffect as F, useMemo as I, useState as V } from "react";
+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 K({ tableData: o, actions: w, rowActionsState: v }) {
-  const { anchorEl: C, open: b, handleClose: s, handleOpen: x } = O(), l = w(o.row), n = v?.(o.row) ?? { state: "enabled" }, P = o.table.options.meta?.locale === "no" ? "Ingen handlinger tilgjengelig" : "No actions available", y = I(() => l.every((e) => "component" in e ? !1 : e.hide), [l]), d = l.length > 0 && !y, p = n.state === "enabled" && !d, N = n.state !== "hidden" && (d || p || n.state === "disabled"), [a, i] = V(!1);
-  if (F(() => {
+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(() => {
     if (!a) return;
-    const e = window.setTimeout(() => i(!1), 1600);
+    const e = window.setTimeout(() => l(!1), 1600);
     return () => window.clearTimeout(e);
-  }, [a]), !N) return /* @__PURE__ */ t("div", { className: "flex w-[40px] items-center justify-center" });
-  const c = n.state === "disabled", u = /* @__PURE__ */ t(k, {
+  }, [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",
@@ -30,7 +29,7 @@ function K({ tableData: o, actions: w, rowActionsState: v }) {
     onMouseUp: (e) => {
       e.stopPropagation(), e.preventDefault();
     },
-    children: /* @__PURE__ */ t(j, {
+    children: /* @__PURE__ */ t(O, {
       className: c ? "text-delta-300" : "text-delta-700",
       width: 20,
       height: 20
@@ -45,19 +44,19 @@ function K({ tableData: o, actions: w, rowActionsState: v }) {
         arrow: !0,
         placement: n.tooltipPlacement ?? "top",
         open: a,
-        onOpen: () => i(!0),
-        onClose: () => i(!1),
+        onOpen: () => l(!0),
+        onClose: () => l(!1),
         children: /* @__PURE__ */ t("span", {
           className: "cursor-not-allowed",
           onTouchStart: (e) => {
-            e.stopPropagation(), e.preventDefault(), i(!0);
+            e.stopPropagation(), e.preventDefault(), l(!0);
           },
           onClick: (e) => {
             e.stopPropagation(), e.preventDefault();
           },
           children: u
         })
-      }) : u, n.state === "enabled" && /* @__PURE__ */ t(T, {
+      }) : u, n.state === "enabled" && /* @__PURE__ */ t(V, {
         open: b,
         anchorEl: C,
         onClose: () => {
@@ -76,14 +75,14 @@ function K({ tableData: o, actions: w, rowActionsState: v }) {
         },
         children: p ? /* @__PURE__ */ g("div", {
           className: "flex items-center gap-2 p-3 text-delta-700",
-          children: [/* @__PURE__ */ t(D, {
+          children: [/* @__PURE__ */ t(S, {
             width: 20,
             height: 20
           }), /* @__PURE__ */ t("span", { children: P })]
-        }) : /* @__PURE__ */ t(M, {
+        }) : /* @__PURE__ */ t(I, {
           disablePadding: !0,
-          children: l.map((e, m) => {
-            if (S(e)) {
+          children: i.map((e, m) => {
+            if (M(e)) {
               const r = e.component(o.row, s);
               return h.isValidElement(r) ? /* @__PURE__ */ t(h.Fragment, { children: r }, m) : null;
             }
@@ -91,7 +90,7 @@ function K({ tableData: o, actions: w, rowActionsState: v }) {
               title: e?.tooltipTitle,
               arrow: !0,
               placement: e?.tooltipPlacement ?? "left",
-              children: /* @__PURE__ */ t("span", { children: /* @__PURE__ */ t(A, {
+              children: /* @__PURE__ */ t("span", { children: /* @__PURE__ */ t(j, {
                 className: e.className,
                 disabled: e.disabled,
                 onClick: () => {
@@ -113,5 +112,5 @@ function K({ tableData: o, actions: w, rowActionsState: v }) {
   });
 }
 export {
-  K as RowActionMenu
+  J as RowActionMenu
 };

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

@@ -1,17 +1,16 @@
-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 N } from "../../hooks/useToggleMenuVisibility.hook.js";
-import { StyledButton as m } from "../../shared-components/button/StyledButton.js";
+import { useToggleMenuVisibility as y } from "../../hooks/useToggleMenuVisibility.hook.js";
+import { StyledButton as h } from "../../shared-components/button/StyledButton.js";
 import { ChevronRightIcon as O } from "../../shared-components/ChevronRightIcon.js";
-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(() => ({
+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(() => ({
     anchorOrigin: {
       vertical: -5,
       horizontal: "center"
@@ -33,12 +32,12 @@ function V({ table: o, locale: C }) {
     d,
     i
   ]);
-  return /* @__PURE__ */ h($, { children: [
+  return /* @__PURE__ */ m($, { children: [
     /* @__PURE__ */ e(g, {
       title: n ? "Nåværende side" : "Current Page",
       children: /* @__PURE__ */ e("div", {
         ref: u,
-        children: /* @__PURE__ */ h(m, {
+        children: /* @__PURE__ */ m(h, {
           dataTest: "current-page-button",
           variant: "outlined",
           size: "large",
@@ -60,26 +59,24 @@ function V({ table: o, locale: C }) {
         })
       })
     }),
-    /* @__PURE__ */ e(y, {
+    /* @__PURE__ */ e(z, {
       open: p,
       anchorEl: s,
-      slotProps: { paper: {
-        className: "border border-solid border-delta-200",
-        sx: {
-          width: s ? s.clientWidth : void 0,
-          maxHeight: 288,
-          overflowY: "auto"
-        }
-      } },
+      slotProps: { paper: { sx: {
+        width: s ? s.clientWidth : void 0,
+        maxHeight: 288,
+        overflowY: "auto"
+      } } },
       onClose: d,
       anchorOrigin: f.anchorOrigin,
       transformOrigin: f.transformOrigin,
-      children: /* @__PURE__ */ e(S, { children: x.map((t) => /* @__PURE__ */ e(k, {
+      classes: { paper: "border border-solid border-delta-200" },
+      children: /* @__PURE__ */ e(k, { children: x.map((t) => /* @__PURE__ */ e(w, {
         onClick: (r) => {
           r.stopPropagation(), r.preventDefault(), T(t);
         },
         selected: t === l,
-        children: /* @__PURE__ */ h("span", {
+        children: /* @__PURE__ */ m("span", {
           className: "text-sm font-normal text-delta-700",
           children: [
             n ? "Side" : "Page",
@@ -91,7 +88,7 @@ function V({ table: o, locale: C }) {
     }),
     /* @__PURE__ */ e(g, {
       title: l === 1 ? "" : n ? "Forrige side" : "Previous Page",
-      children: /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(m, {
+      children: /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(h, {
         dataTest: "prev-page-button",
         variant: "outlined",
         onClick: () => {
@@ -99,7 +96,7 @@ function V({ table: o, locale: C }) {
         },
         size: "large",
         disabled: !o.getCanPreviousPage(),
-        startIcon: /* @__PURE__ */ e(w, {
+        startIcon: /* @__PURE__ */ e(S, {
           height: 24,
           width: 24
         })
@@ -107,7 +104,7 @@ function V({ table: o, locale: C }) {
     }),
     /* @__PURE__ */ e(g, {
       title: l === a ? "" : n ? "Neste side" : "Next Page",
-      children: /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(m, {
+      children: /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(h, {
         dataTest: "next-page-button",
         variant: "outlined",
         onClick: () => {
@@ -124,5 +121,5 @@ function V({ table: o, locale: C }) {
   ] });
 }
 export {
-  V as TablePagination
+  H as TablePagination
 };