asma-ui-core 3.78.12 → 3.79.0

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

@@ -1,17 +1,17 @@
-import { ChevronRightIcon as y } from "../../../components/icons/chevron-right-icon/ChevronRightIcon.js";
-import { ChevronLeftIcon as S } from "../../../components/icons/chevron-left-icon/ChevronLeftIcon.js";
-import { StyledPopover as I } from "../../../components/utils/popover/StyledPopover.js";
-import { StyledMenuList as N } 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 O } from "../../shared-components/ChevronDownIcon.js";
-import { useToggleMenuVisibility as w } from "../../hooks/useToggleMenuVisibility.hook.js";
-import { StyledButton as m } from "../../shared-components/button/StyledButton.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 } = w(), u = z(null), n = C === "no", f = P(() => ({
+import { ChevronRightIcon as N } from "../../../components/icons/chevron-right-icon/ChevronRightIcon.js";
+import { ChevronLeftIcon as O } from "../../../components/icons/chevron-left-icon/ChevronLeftIcon.js";
+import { StyledSelectItem as k } from "../../../components/inputs/select/StyledSelectItem.js";
+import { StyledPopover as z } from "../../../components/utils/popover/StyledPopover.js";
+import { StyledMenuList as D } from "../../../components/navigation/menu/StyledMenuList.js";
+import m from "../StyledTable.module.js";
+import { StyledTooltip as p } from "../../shared-components/tooltip/index.js";
+import { ChevronDownIcon as L } from "../../shared-components/ChevronDownIcon.js";
+import { useKeyboardSelectMenu as R } from "../../hooks/useToggleMenuVisibility.hook.js";
+import { StyledButton as u } from "../../shared-components/button/StyledButton.js";
+import { useCallback as I, useId as F, useMemo as S, useRef as K } from "react";
+import { Fragment as M, jsx as e, jsxs as f } from "react/jsx-runtime";
+function U({ table: o, locale: y }) {
+  const v = K(null), n = y === "no", a = F(), P = S(() => ({
     anchorOrigin: {
       vertical: -5,
       horizontal: "center"
@@ -20,102 +20,115 @@ function V({ table: o, locale: C }) {
       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"]}`);
+  }), []), l = I(() => {
+    const t = m["asma-ui-table-styled-table"], r = v.current?.closest(`.${t}`)?.querySelector(`.${m["table-scroll"]}, .${m["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($, { children: [
-    /* @__PURE__ */ e(g, {
+  }, []), s = o.getPageCount() || 1, i = o.getState().pagination.pageIndex + 1, c = S(() => Array.from({ length: s }, (t, r) => r + 1), [s]), b = I((t) => {
+    o.setPageIndex(t - 1), l();
+  }, [o, l]), { anchorEl: g, open: d, handleClose: x, handleOpen: T, triggerRef: w, activeIndex: h, handleKeyDown: $ } = R({
+    optionCount: c.length,
+    selectedIndex: i - 1,
+    onSelect: (t) => b(c[t])
+  });
+  return /* @__PURE__ */ f(M, { children: [
+    /* @__PURE__ */ e(p, {
       title: n ? "Nåværende side" : "Current Page",
       children: /* @__PURE__ */ e("div", {
-        ref: u,
-        children: /* @__PURE__ */ h(m, {
+        ref: v,
+        children: /* @__PURE__ */ f(u, {
           dataTest: "current-page-button",
           variant: "outlined",
           size: "large",
-          onClick: b,
-          endIcon: /* @__PURE__ */ e(O, {
-            className: `${p ? "rotate-180" : "rotate-0"} transition-transform duration-300`,
+          refLink: w,
+          onClick: T,
+          onKeyDown: $,
+          role: "combobox",
+          "aria-haspopup": "listbox",
+          "aria-controls": d ? a : void 0,
+          "aria-expanded": d,
+          "aria-activedescendant": h === null ? void 0 : `${a}-option-${h}`,
+          endIcon: /* @__PURE__ */ e(L, {
+            className: `${d ? "rotate-180" : "rotate-0"} transition-transform duration-300`,
             height: 24,
             width: 24
           }),
           children: [
             n ? "Side" : "Page",
             " ",
-            l,
+            i,
             " ",
             n ? "av" : "of",
             " ",
-            a
+            s
           ]
         })
       })
     }),
-    /* @__PURE__ */ e(I, {
-      open: p,
-      anchorEl: s,
+    /* @__PURE__ */ e(z, {
+      open: d,
+      anchorEl: g,
       slotProps: { paper: {
         className: "border border-solid border-delta-200",
         sx: {
-          width: s ? s.clientWidth : void 0,
+          width: g ? g.clientWidth : void 0,
           maxHeight: 288,
           overflowY: "auto"
         }
       } },
-      onClose: d,
-      anchorOrigin: f.anchorOrigin,
-      transformOrigin: f.transformOrigin,
-      children: /* @__PURE__ */ e(N, { children: x.map((t) => /* @__PURE__ */ e(k, {
-        onClick: (r) => {
-          r.stopPropagation(), r.preventDefault(), T(t);
-        },
-        selected: t === l,
-        children: /* @__PURE__ */ h("span", {
-          className: "text-base font-normal text-delta-700",
-          children: [
-            n ? "Side" : "Page",
-            " ",
-            t
-          ]
-        })
-      }, t)) })
+      onClose: x,
+      anchorOrigin: P.anchorOrigin,
+      transformOrigin: P.transformOrigin,
+      children: /* @__PURE__ */ e(D, {
+        id: a,
+        role: "listbox",
+        children: c.map((t, r) => /* @__PURE__ */ e(k, {
+          id: `${a}-option-${r}`,
+          active: r === h,
+          onClick: (C) => {
+            C.stopPropagation(), C.preventDefault(), b(t), x();
+          },
+          selected: t === i,
+          children: /* @__PURE__ */ f("span", {
+            className: "text-base 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, {
+    /* @__PURE__ */ e(p, {
+      title: i === 1 ? "" : n ? "Forrige side" : "Previous Page",
+      children: /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(u, {
         dataTest: "prev-page-button",
         variant: "outlined",
         onClick: () => {
-          o.previousPage(), i();
+          o.previousPage(), l();
         },
         size: "large",
         disabled: !o.getCanPreviousPage(),
-        startIcon: /* @__PURE__ */ e(S, {
+        startIcon: /* @__PURE__ */ e(O, {
           height: 24,
           width: 24
         })
       }) })
     }),
-    /* @__PURE__ */ e(g, {
-      title: l === a ? "" : n ? "Neste side" : "Next Page",
-      children: /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(m, {
+    /* @__PURE__ */ e(p, {
+      title: i === s ? "" : n ? "Neste side" : "Next Page",
+      children: /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(u, {
         dataTest: "next-page-button",
         variant: "outlined",
         onClick: () => {
-          o.nextPage(), i();
+          o.nextPage(), l();
         },
         size: "large",
         disabled: !o.getCanNextPage(),
-        startIcon: /* @__PURE__ */ e(y, {
+        startIcon: /* @__PURE__ */ e(N, {
           height: 24,
           width: 24
         })
@@ -124,5 +137,5 @@ function V({ table: o, locale: C }) {
   ] });
 }
 export {
-  V as TablePagination
+  U as TablePagination
 };

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

@@ -1,20 +1,20 @@
-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 = [
+import { StyledSelectItem as O } from "../../../components/inputs/select/StyledSelectItem.js";
+import { StyledPopover as C } from "../../../components/utils/popover/StyledPopover.js";
+import { StyledMenuList as y } from "../../../components/navigation/menu/StyledMenuList.js";
+import { ChevronDownIcon as $ } from "../../shared-components/ChevronDownIcon.js";
+import { useKeyboardSelectMenu as I } from "../../hooks/useToggleMenuVisibility.hook.js";
+import { StyledButton as k } from "../../shared-components/button/StyledButton.js";
+import { useCallback as D, useId as N, useMemo as g } from "react";
+import { Fragment as P, jsx as s, jsxs as m } from "react/jsx-runtime";
+var R = [
   5,
   10,
   20,
   50,
   100
 ];
-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(() => ({
+function A({ table: l, locale: w }) {
+  const e = l.getState().pagination.pageSize, c = w === "no", t = N(), h = g(() => ({
     anchorOrigin: {
       vertical: -5,
       horizontal: "center"
@@ -23,57 +23,76 @@ function D({ table: n, locale: p }) {
       vertical: "bottom",
       horizontal: "center"
     }
-  }), []), 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(C, {
+  }), []), r = g(() => {
+    const o = /* @__PURE__ */ new Set([...R, e]);
+    return Array.from(o).sort((a, i) => a - i);
+  }, [e]), u = D((o) => {
+    l.setPageSize(o);
+  }, [l]), b = r.indexOf(e), { anchorEl: d, open: n, handleClose: f, handleOpen: v, triggerRef: S, activeIndex: p, handleKeyDown: x } = I({
+    optionCount: r.length,
+    selectedIndex: b,
+    onSelect: (o) => u(r[o]),
+    focusHeaderOnShiftTab: !0
+  });
+  return /* @__PURE__ */ m(P, { children: [/* @__PURE__ */ m(k, {
     dataTest: "table-rows-count-button",
     variant: "outlined",
     size: "large",
-    onClick: h,
-    endIcon: /* @__PURE__ */ e(S, {
-      className: `${l ? "rotate-180" : "rotate-0"} transition-transform duration-300`,
+    refLink: S,
+    onClick: v,
+    onKeyDown: x,
+    role: "combobox",
+    "aria-haspopup": "listbox",
+    "aria-controls": n ? t : void 0,
+    "aria-expanded": n,
+    "aria-activedescendant": p === null ? void 0 : `${t}-option-${p}`,
+    "aria-label": `${e} ${c ? "rader" : "rows"}`,
+    endIcon: /* @__PURE__ */ s($, {
+      className: `${n ? "rotate-180" : "rotate-0"} transition-transform duration-300`,
       height: 24,
       width: 24
     }),
     children: [
-      t,
+      e,
       " ",
       c ? "rader" : "rows"
     ]
-  }), /* @__PURE__ */ e(w, {
-    open: l,
-    anchorEl: i,
+  }), /* @__PURE__ */ s(C, {
+    open: n,
+    anchorEl: d,
     slotProps: { paper: {
       className: "border border-solid border-delta-200",
       sx: {
-        width: i ? i.clientWidth : void 0,
+        width: d ? d.clientWidth : void 0,
         maxHeight: 288,
         overflowY: "auto"
       }
     } },
-    onClose: a,
-    anchorOrigin: m.anchorOrigin,
-    transformOrigin: m.transformOrigin,
-    children: /* @__PURE__ */ e(O, { children: g.map((o) => /* @__PURE__ */ e(b, {
-      onClick: (r) => {
-        r.stopPropagation(), r.preventDefault(), u(o);
-      },
-      selected: t === o,
-      children: /* @__PURE__ */ s("span", {
-        className: "whitespace-nowrap text-base font-normal text-delta-700",
-        children: [
-          o,
-          " ",
-          c ? "rader" : "rows"
-        ]
-      })
-    }, o)) })
+    onClose: f,
+    anchorOrigin: h.anchorOrigin,
+    transformOrigin: h.transformOrigin,
+    children: /* @__PURE__ */ s(y, {
+      id: t,
+      role: "listbox",
+      children: r.map((o, a) => /* @__PURE__ */ s(O, {
+        id: `${t}-option-${a}`,
+        active: a === p,
+        onClick: (i) => {
+          i.stopPropagation(), i.preventDefault(), u(o), f();
+        },
+        selected: e === o,
+        children: /* @__PURE__ */ m("span", {
+          className: "whitespace-nowrap text-base font-normal text-delta-700",
+          children: [
+            o,
+            " ",
+            c ? "rader" : "rows"
+          ]
+        })
+      }, o))
+    })
   })] });
 }
 export {
-  D as TableRowCountSelect
+  A as TableRowCountSelect
 };

package/dist/table/components/table-header/TableHeader.js

@@ -1,78 +1,86 @@
-import { cn as b } from "../../../helpers/cn.js";
-import { ACTIONS_COLUMN_ID as j } from "../../types.js";
-import p from "../StyledTable.module.js";
-import { TableHeaderCell as a } from "./TableHeaderCell.js";
+import { cn as C } from "../../../helpers/cn.js";
+import { ACTIONS_COLUMN_ID as I } from "../../types.js";
+import x from "../StyledTable.module.js";
+import { TableHeaderCell as u } from "./TableHeaderCell.js";
 import "react";
-import { jsx as n, jsxs as k } from "react/jsx-runtime";
+import { jsx as n, jsxs as O } from "react/jsx-runtime";
 import "@tanstack/react-table";
-function q({ table: x, styledTableProps: o, tableCanResize: m, tableWidth: l, columnWindow: { paddingLeft: i, paddingRight: c, indexes: H } }) {
-  const { stickyHeader: S = !1, tableHeaderRef: g, tableHeaderStyle: D = {} } = o, y = x.getHeaderGroups(), N = { ...D };
+function M({ table: p, styledTableProps: o, tableCanResize: s, tableWidth: l, columnWindow: { paddingLeft: i, paddingRight: c, indexes: H } }) {
+  const { stickyHeader: S = !1, tableHeaderRef: y, tableHeaderStyle: g = {} } = o, D = p.getHeaderGroups(), b = { ...g };
   return /* @__PURE__ */ n("thead", {
-    className: b(p["table-header"], S && p["table-header--sticky"], o.tableHeaderClassName),
-    style: N,
-    ref: g,
-    children: y.map((f) => {
-      const s = f.headers.map((e, t, r) => ({
+    className: C(x["table-header"], S && x["table-header--sticky"], o.tableHeaderClassName),
+    style: b,
+    ref: y,
+    children: D.map((f) => {
+      const m = f.headers.map((e, t, r) => ({
         header: e,
-        left: r.slice(0, t).reduce((d, u) => d + (u.column.getSize() ?? 0), 0)
-      })), W = s.filter(({ header: e }) => e.column.columnDef.fixedLeft), _ = s.filter(({ header: e }) => !e.column.columnDef.fixedLeft && !e.column.columnDef.fixedRight && e.column.id !== "actions"), h = s.filter(({ header: e }) => !!e.column.columnDef.fixedRight || e.column.id === "actions"), w = h.some(({ header: e }) => e.column.id === j), C = h.map((e, t, r) => ({
+        left: r.slice(0, t).reduce((d, a) => d + (a.column.getSize() ?? 0), 0)
+      })), w = m.filter(({ header: e }) => e.column.columnDef.fixedLeft), N = m.filter(({ header: e }) => !e.column.columnDef.fixedLeft && !e.column.columnDef.fixedRight && e.column.id !== "actions"), h = m.filter(({ header: e }) => !!e.column.columnDef.fixedRight || e.column.id === "actions"), W = h.some(({ header: e }) => e.column.id === I), _ = h.map((e, t, r) => ({
         ...e,
-        right: r.slice(t + 1).reduce((d, u) => d + (u.header.column.getSize() ?? 0), 0) + (w ? -1 : 0)
-      })), O = H.reduce((e, t) => {
-        const r = _[t];
+        right: r.slice(t + 1).reduce((d, a) => d + (a.header.column.getSize() ?? 0), 0) + (W ? -1 : 0)
+      })), k = H.reduce((e, t) => {
+        const r = N[t];
         return r && e.push(r), e;
       }, []);
-      return /* @__PURE__ */ k("tr", { children: [
-        W.map(({ header: e, left: t }) => /* @__PURE__ */ n(a, {
-          styledTableProps: o,
-          header: e,
-          tableCanResize: m,
-          left: t,
-          tableWidth: l
-        }, e.id)),
-        i > 0 && /* @__PURE__ */ n("th", {
-          "aria-hidden": !0,
-          style: {
-            width: String(i) + "px",
-            minWidth: String(i) + "px",
-            maxWidth: String(i) + "px",
-            padding: 0,
-            border: "none"
-          }
-        }),
-        O.map((e) => {
-          if (!e) return null;
-          const { header: t, left: r } = e;
-          return /* @__PURE__ */ n(a, {
+      return /* @__PURE__ */ O("tr", {
+        tabIndex: 0,
+        onKeyDown: (e) => {
+          if (e.key !== "Tab" || e.shiftKey) return;
+          const t = e.currentTarget.closest("table")?.querySelector('tbody tr[data-index="0"]');
+          t && (e.preventDefault(), t.focus());
+        },
+        children: [
+          w.map(({ header: e, left: t }) => /* @__PURE__ */ n(u, {
             styledTableProps: o,
-            header: t,
-            tableCanResize: m,
-            left: r,
+            header: e,
+            tableCanResize: s,
+            left: t,
             tableWidth: l
-          }, t.id);
-        }),
-        c > 0 && /* @__PURE__ */ n("th", {
-          "aria-hidden": !0,
-          style: {
-            width: String(c) + "px",
-            minWidth: String(c) + "px",
-            maxWidth: String(c) + "px",
-            padding: 0,
-            border: "none"
-          }
-        }),
-        C.map(({ header: e, left: t, right: r }) => /* @__PURE__ */ n(a, {
-          styledTableProps: o,
-          header: e,
-          tableCanResize: m,
-          left: t,
-          right: r,
-          tableWidth: l
-        }, e.id))
-      ] }, f.id);
+          }, e.id)),
+          i > 0 && /* @__PURE__ */ n("th", {
+            "aria-hidden": !0,
+            style: {
+              width: String(i) + "px",
+              minWidth: String(i) + "px",
+              maxWidth: String(i) + "px",
+              padding: 0,
+              border: "none"
+            }
+          }),
+          k.map((e) => {
+            if (!e) return null;
+            const { header: t, left: r } = e;
+            return /* @__PURE__ */ n(u, {
+              styledTableProps: o,
+              header: t,
+              tableCanResize: s,
+              left: r,
+              tableWidth: l
+            }, t.id);
+          }),
+          c > 0 && /* @__PURE__ */ n("th", {
+            "aria-hidden": !0,
+            style: {
+              width: String(c) + "px",
+              minWidth: String(c) + "px",
+              maxWidth: String(c) + "px",
+              padding: 0,
+              border: "none"
+            }
+          }),
+          _.map(({ header: e, left: t, right: r }) => /* @__PURE__ */ n(u, {
+            styledTableProps: o,
+            header: e,
+            tableCanResize: s,
+            left: t,
+            right: r,
+            tableWidth: l
+          }, e.id))
+        ]
+      }, f.id);
     })
   });
 }
 export {
-  q as TableHeader
+  M as TableHeader
 };

package/dist/table/custom-features/focus-rows/FocusRowsFeature.js

@@ -1,5 +1,5 @@
 import { functionalUpdate as u, makeStateUpdater as i } from "@tanstack/react-table";
-var f = {
+var a = {
   getInitialState: (e) => ({
     focusedRow: null,
     ...e
@@ -39,13 +39,13 @@ var f = {
       }
     }, e.toggleFocused = () => e.onChangeFocused(!e.isFocused()), e.focusNextRow = () => {
       const o = s.getRowModel().rows, t = o[o.findIndex((n) => n.id === s.getState().focusedRow) + 1];
-      t && (t.onChangeFocused(!0, t.id), document.getElementById(t.id)?.focus({ preventScroll: !0 }));
+      return t ? (t.onChangeFocused(!0, t.id), !0) : !1;
     }, e.focusPrevRow = () => {
       const o = s.getRowModel().rows, t = o[o.findIndex((n) => n.id === s.getState().focusedRow) - 1];
-      t && (t.onChangeFocused(!0, t.id), document.getElementById(t.id)?.focus({ preventScroll: !0 }));
+      return t ? (t.onChangeFocused(!0, t.id), !0) : !1;
     };
   }
 };
 export {
-  f as FocusedRowsFeature
+  a as FocusedRowsFeature
 };

package/dist/table/hooks/useToggleMenuVisibility.hook.js

@@ -1,17 +1,83 @@
-import { useCallback as n, useState as t } from "react";
-var c = () => {
-  const [l, r] = t(null), [s, e] = t(!1), o = n((a) => {
-    r(a.currentTarget), e(!0);
+import { useCallback as c, useRef as b, useState as p } from "react";
+var d = (r) => {
+  let a = r?.parentElement;
+  for (; a; ) {
+    const l = a.querySelector('table thead tr[tabindex="0"]');
+    if (l)
+      return l.focus(), !0;
+    a = a.parentElement;
+  }
+  return !1;
+}, D = () => {
+  const [r, a] = p(null), [l, t] = p(!1), n = c((o) => {
+    a(o.currentTarget), t(!0);
   }, []);
   return {
-    open: s,
-    handleClose: n(() => {
-      e(!1);
-    }, []),
-    handleOpen: o,
-    anchorEl: l
+    open: l,
+    handleClose: c(() => t(!1), []),
+    handleOpen: n,
+    anchorEl: r
+  };
+}, m = ({ optionCount: r, selectedIndex: a, onSelect: l, focusHeaderOnShiftTab: t = !1 }) => {
+  const { open: n, anchorEl: o, handleOpen: f, handleClose: w } = D(), i = b(null), [u, h] = p(null), s = c(() => {
+    w(), h(null);
+  }, [w]), k = c((e) => {
+    r !== 0 && h((y) => Math.min(Math.max((y ?? a) + e, 0), r - 1));
+  }, [r, a]);
+  return {
+    open: n,
+    handleClose: s,
+    handleOpen: f,
+    anchorEl: o,
+    triggerRef: i,
+    activeIndex: u,
+    handleKeyDown: c((e) => {
+      if (t && e.key === "Tab" && e.shiftKey && d(i.current)) {
+        e.preventDefault(), s();
+        return;
+      }
+      if (!n && [
+        "Enter",
+        "ArrowDown",
+        "ArrowUp"
+      ].includes(e.key)) {
+        e.preventDefault(), f(e), e.key !== "Enter" && k(e.key === "ArrowDown" ? 1 : -1);
+        return;
+      }
+      if (n)
+        switch (e.key) {
+          case "ArrowDown":
+          case "ArrowUp":
+            e.preventDefault(), k(e.key === "ArrowDown" ? 1 : -1);
+            break;
+          case "Home":
+          case "End":
+            e.preventDefault(), h(e.key === "Home" ? 0 : r ? r - 1 : null);
+            break;
+          case " ":
+          case "Enter":
+            if (u === null) break;
+            e.preventDefault(), l(u), e.key === "Enter" && s();
+            break;
+          case "Escape":
+            e.preventDefault(), s(), i.current?.focus();
+            break;
+          case "Tab":
+            s();
+        }
+    }, [
+      u,
+      t,
+      s,
+      f,
+      k,
+      l,
+      n,
+      r
+    ])
   };
 };
 export {
-  c as useToggleMenuVisibility
+  m as useKeyboardSelectMenu,
+  D as useToggleMenuVisibility
 };

package/dist/table/shared-components/button/StyledButton.module.js

@@ -1,16 +1,16 @@
-var _ = "_contained_13b4p_6", t = "_common_13b4p_6", a = "_medium_13b4p_48", e = "_small_13b4p_53", r = "_large_13b4p_58", o = "_error_13b4p_68", b = "_outlined_13b4p_130", m = "_text_13b4p_254", l = "_textGray_13b4p_378", p = "_textWhite_13b4p_440", u = {
-  "asma-core-ui-button": "_asma-core-ui-button_13b4p_1",
+var _ = "_contained_1ysgm_6", t = "_common_1ysgm_6", a = "_medium_1ysgm_56", e = "_small_1ysgm_61", m = "_large_1ysgm_66", r = "_error_1ysgm_76", o = "_outlined_1ysgm_146", s = "_text_1ysgm_286", y = "_textGray_1ysgm_426", g = "_textWhite_1ysgm_496", l = {
+  "asma-core-ui-button": "_asma-core-ui-button_1ysgm_1",
   contained: _,
   common: t,
   medium: a,
   small: e,
-  large: r,
-  error: o,
-  outlined: b,
-  text: m,
-  textGray: l,
-  textWhite: p
+  large: m,
+  error: r,
+  outlined: o,
+  text: s,
+  textGray: y,
+  textWhite: g
 };
 export {
-  u as default
+  l as default
 };