@entur/table 4.9.14-beta.9 → 4.9.14

package/dist/table.esm.js

@@ -1,428 +1,381 @@
-import { useRandomId, mergeRefs, warnAboutMissingStyles } from '@entur/utils';
-import React, { useRef, useEffect, useState, useMemo } from 'react';
-import classNames from 'classnames';
-import { VisuallyHidden } from '@entur/a11y';
-import { BulletBadge } from '@entur/layout';
-import { UnsortedIcon, UpArrowIcon, DownArrowIcon } from '@entur/icons';
-import get from 'lodash.get';
-import { VariantProvider } from '@entur/form';
-import { Tooltip } from '@entur/tooltip';
-import { BaseExpand } from '@entur/expand';
-import { IconButton } from '@entur/button';
-
-function _extends() {
-  return _extends = Object.assign ? Object.assign.bind() : function (n) {
-    for (var e = 1; e < arguments.length; e++) {
-      var t = arguments[e];
-      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
-    }
-    return n;
-  }, _extends.apply(null, arguments);
-}
-function _objectDestructuringEmpty(t) {
-  if (null == t) throw new TypeError("Cannot destructure " + t);
-}
-function _objectWithoutPropertiesLoose(r, e) {
-  if (null == r) return {};
-  var t = {};
-  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
-    if (-1 !== e.indexOf(n)) continue;
-    t[n] = r[n];
+import { useRandomId, mergeRefs, warnAboutMissingStyles } from "@entur/utils";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import React, { useRef, useEffect, useState, useMemo } from "react";
+import classNames from "classnames";
+import { VisuallyHidden } from "@entur/a11y";
+import { BulletBadge } from "@entur/layout";
+import { UnsortedIcon, UpArrowIcon, DownArrowIcon } from "@entur/icons";
+import get from "lodash.get";
+import { VariantProvider } from "@entur/form";
+import { Tooltip } from "@entur/tooltip";
+import { BaseExpand } from "@entur/expand";
+import { IconButton } from "@entur/button";
+const Table = React.forwardRef(
+  ({
+    className,
+    fixed = false,
+    spacing = "default",
+    sortable = false,
+    changeSortDescription = "Tabelloverskrifter med knapper kan trykkes på for å endre sortering,",
+    stickyHeader = false,
+    ...rest
+  }, ref) => {
+    const sortableHeaderId = useRandomId("sortable-header");
+    const tableRef = useRef(null);
+    useEffect(() => {
+      if (stickyHeader) {
+        const tableElement = tableRef.current;
+        const observerElement = document.createElement("div");
+        observerElement.classList.add("sticky-observer");
+        tableElement?.parentNode?.insertBefore(observerElement, tableElement);
+        const observer = new IntersectionObserver(
+          (entries) => {
+            tableElement?.classList.toggle(
+              "eds-table--sticky-header--active",
+              !entries[0].isIntersecting
+            );
+          },
+          { threshold: [0, 1] }
+        );
+        observer.observe(observerElement);
+        return () => {
+          observer.unobserve(observerElement);
+          observerElement.remove();
+        };
+      }
+    }, [stickyHeader]);
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "table",
+        {
+          className: classNames(
+            "eds-table",
+            { "eds-table--fixed": fixed },
+            { "eds-table--middle": spacing === "middle" },
+            { "eds-table--small": spacing === "small" },
+            { "eds-table--sortable": sortable },
+            { "eds-table--sticky-header": stickyHeader },
+            className
+          ),
+          ref: mergeRefs(ref, tableRef),
+          "aria-describedby": sortable ? sortableHeaderId : void 0,
+          ...rest
+        }
+      ),
+      sortable && /* @__PURE__ */ jsx(VisuallyHidden, { id: sortableHeaderId, children: changeSortDescription })
+    ] });
   }
-  return t;
-}
-
-var _excluded$8 = ["className", "fixed", "spacing", "sortable", "changeSortDescription", "stickyHeader"];
-var Table = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var className = _ref.className,
-    _ref$fixed = _ref.fixed,
-    fixed = _ref$fixed === void 0 ? false : _ref$fixed,
-    _ref$spacing = _ref.spacing,
-    spacing = _ref$spacing === void 0 ? 'default' : _ref$spacing,
-    _ref$sortable = _ref.sortable,
-    sortable = _ref$sortable === void 0 ? false : _ref$sortable,
-    _ref$changeSortDescri = _ref.changeSortDescription,
-    changeSortDescription = _ref$changeSortDescri === void 0 ? 'Tabelloverskrifter med knapper kan trykkes på for å endre sortering,' : _ref$changeSortDescri,
-    _ref$stickyHeader = _ref.stickyHeader,
-    stickyHeader = _ref$stickyHeader === void 0 ? false : _ref$stickyHeader,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$8);
-  var sortableHeaderId = useRandomId('sortable-header');
-  var tableRef = useRef(null);
-  useEffect(function () {
-    if (stickyHeader) {
-      var _tableElement$parentN;
-      /* We check when an inserted div above the header
-        is outside our scrolling container to determine when
-        the table header becomes sticky. This is necessary
-        to conditionally add our box-shadow when the
-        header is overlapping table rows */
-      var tableElement = tableRef.current;
-      var observerElement = document.createElement('div');
-      observerElement.classList.add('sticky-observer');
-      tableElement == null || (_tableElement$parentN = tableElement.parentNode) == null || _tableElement$parentN.insertBefore(observerElement, tableElement);
-      var observer = new IntersectionObserver(function (entries) {
-        tableElement == null || tableElement.classList.toggle('eds-table--sticky-header--active', !entries[0].isIntersecting);
-      }, {
-        threshold: [0, 1]
-      });
-      observer.observe(observerElement);
-      return function () {
-        observer.unobserve(observerElement);
-        observerElement.remove();
-      };
+);
+const TableHead = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "thead",
+  {
+    className: classNames("eds-table__head", className),
+    ref,
+    ...props
+  }
+));
+const TableBody = React.forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx(
+  "tbody",
+  {
+    className: classNames("eds-table__body", className),
+    ref,
+    ...rest
+  }
+));
+const TableFooter = React.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx("tfoot", { ref, ...props }));
+const TableRow = React.forwardRef(
+  ({ className, hover = false, active = false, error = false, ...rest }, ref) => /* @__PURE__ */ jsx(
+    "tr",
+    {
+      className: classNames("eds-table__row", className, {
+        "eds-table__row--hover": hover,
+        "eds-table__row--active": active,
+        "eds-table__row--error": error
+      }),
+      ref,
+      ...rest
     }
-  }, [stickyHeader]);
-  return React.createElement(React.Fragment, null, React.createElement("table", _extends({
-    className: classNames('eds-table', {
-      'eds-table--fixed': fixed
-    }, {
-      'eds-table--middle': spacing === 'middle'
-    }, {
-      'eds-table--small': spacing === 'small'
-    }, {
-      'eds-table--sortable': sortable
-    }, {
-      'eds-table--sticky-header': stickyHeader
-    }, className),
-    ref: mergeRefs(ref, tableRef),
-    "aria-describedby": sortable ? sortableHeaderId : undefined
-  }, rest)), sortable && React.createElement(VisuallyHidden, {
-    id: sortableHeaderId
-  }, changeSortDescription));
-});
-
-var _excluded$7 = ["className"];
-var TableHead = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var className = _ref.className,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
-  return React.createElement("thead", _extends({
-    className: classNames('eds-table__head', className),
-    ref: ref
-  }, props));
-});
-
-var _excluded$6 = ["className"];
-var TableBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var className = _ref.className,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$6);
-  return React.createElement("tbody", _extends({
-    className: classNames('eds-table__body', className),
-    ref: ref
-  }, rest));
-});
-
-var TableFooter = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
-  return React.createElement("tfoot", _extends({
-    ref: ref
-  }, props));
-});
-
-var _excluded$5 = ["className", "hover", "active", "error"];
-var TableRow = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var className = _ref.className,
-    _ref$hover = _ref.hover,
-    hover = _ref$hover === void 0 ? false : _ref$hover,
-    _ref$active = _ref.active,
-    active = _ref$active === void 0 ? false : _ref$active,
-    _ref$error = _ref.error,
-    error = _ref$error === void 0 ? false : _ref$error,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$5);
-  return React.createElement("tr", _extends({
-    className: classNames('eds-table__row', className, {
-      'eds-table__row--hover': hover,
-      'eds-table__row--active': active,
-      'eds-table__row--error': error
-    }),
-    ref: ref
-  }, rest));
-});
-
-var _excluded$4 = ["className", "padding", "status", "variant", "children"];
+  )
+);
 function mapStatusToVariant(status) {
   switch (status) {
-    case 'positive':
-      return 'success';
-    case 'negative':
-      return 'negative';
-    case 'neutral':
-      return 'neutral';
+    case "positive":
+      return "success";
+    case "negative":
+      return "negative";
+    case "neutral":
+      return "neutral";
     default:
-      return 'neutral';
+      return "neutral";
   }
 }
-var DataCell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var className = _ref.className,
-    _ref$padding = _ref.padding,
-    padding = _ref$padding === void 0 ? 'default' : _ref$padding,
-    status = _ref.status,
-    variant = _ref.variant,
-    children = _ref.children,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$4);
-  // If variant is undefined and status is defined, map status to variant
-  if (!variant && status) {
-    variant = mapStatusToVariant(status);
+const DataCell = React.forwardRef(
+  ({ className, padding = "default", status, variant, children, ...rest }, ref) => {
+    if (!variant && status) {
+      variant = mapStatusToVariant(status);
+    }
+    return /* @__PURE__ */ jsx(
+      "td",
+      {
+        ref,
+        className: classNames("eds-table__data-cell", className, {
+          "eds-table__data-cell--padding-checkbox": padding === "checkbox",
+          "eds-table__data-cell--padding-radio": padding === "radio",
+          "eds-table__data-cell--padding-overflow-menu": padding === "overflow-menu"
+        }),
+        ...rest,
+        children: variant ? /* @__PURE__ */ jsx(BulletBadge, { variant, children }) : children
+      }
+    );
   }
-  return React.createElement("td", _extends({
-    ref: ref,
-    className: classNames('eds-table__data-cell', className, {
-      'eds-table__data-cell--padding-checkbox': padding === 'checkbox',
-      'eds-table__data-cell--padding-radio': padding === 'radio',
-      'eds-table__data-cell--padding-overflow-menu': padding === 'overflow-menu'
-    })
-  }, rest), variant ? React.createElement(BulletBadge, {
-    variant: variant
-  }, children) : children);
-});
-
-var _excluded$3 = ["className", "children", "name", "sortable", "sortConfig", "padding", "sortableButtonProps", "sortedAscendingAriaLabel", "sortedDescendingAriaLabel"],
-  _excluded2$1 = ["className"];
-var HeaderCell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var className = _ref.className,
-    children = _ref.children,
-    name = _ref.name,
-    _ref$sortable = _ref.sortable,
-    sortable = _ref$sortable === void 0 ? false : _ref$sortable,
-    sortConfig = _ref.sortConfig,
-    _ref$padding = _ref.padding,
-    padding = _ref$padding === void 0 ? 'default' : _ref$padding,
-    sortableButtonProps = _ref.sortableButtonProps,
-    _ref$sortedAscendingA = _ref.sortedAscendingAriaLabel,
-    sortedAscendingAriaLabel = _ref$sortedAscendingA === void 0 ? ', sortert stigende' : _ref$sortedAscendingA,
-    _ref$sortedDescending = _ref.sortedDescendingAriaLabel,
-    sortedDescendingAriaLabel = _ref$sortedDescending === void 0 ? ', sortert synkende' : _ref$sortedDescending,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
-  var _React$useState = React.useState(false),
-    isCurrentlySorted = _React$useState[0],
-    setIsCurrentlySorted = _React$useState[1];
-  React.useEffect(function () {
-    sortConfig && name && setIsCurrentlySorted(sortConfig && name === sortConfig.key);
-  }, [sortConfig, name]);
-  var ariaSort = isCurrentlySorted ? sortConfig && sortConfig.order : undefined;
-  return React.createElement("th", _extends({
-    className: classNames('eds-table__header-cell', className, {
-      'eds-table__header-cell--sortable': sortable,
-      'eds-table__header-cell--padding-radio': padding === 'radio',
-      'eds-table__header-cell--padding-checkbox': padding === 'checkbox',
-      'eds-table__header-cell--padding-overflow-menu': padding === 'overflow-menu'
-    }),
-    "aria-sort": ariaSort,
-    ref: ref
-  }, rest), sortable && sortConfig && sortableButtonProps ? React.createElement(SortableHeaderCellButton, {
-    sortableButtonProps: sortableButtonProps,
-    sortConfig: sortConfig,
-    isCurrentlySorted: isCurrentlySorted,
-    ariaSort: ariaSort,
-    sortedAscendingAriaLabel: sortedAscendingAriaLabel,
-    sortedDescendingAriaLabel: sortedDescendingAriaLabel
-  }, children) : children);
-});
-var SortableHeaderCellButton = function SortableHeaderCellButton(_ref2) {
-  var sortConfig = _ref2.sortConfig,
-    sortableButtonProps = _ref2.sortableButtonProps,
-    isCurrentlySorted = _ref2.isCurrentlySorted,
-    children = _ref2.children,
-    ariaSort = _ref2.ariaSort,
-    sortedAscendingAriaLabel = _ref2.sortedAscendingAriaLabel,
-    sortedDescendingAriaLabel = _ref2.sortedDescendingAriaLabel;
-  var _useState = useState(''),
-    sortedAriaInfo = _useState[0],
-    setSortedAriaInfo = _useState[1];
-  var className = sortableButtonProps.className,
-    rest = _objectWithoutPropertiesLoose(sortableButtonProps, _excluded2$1);
-  var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
-  useEffect(function () {
-    var DISMISS_SORT_INFO_TIME = 3000;
-    if (sortConfig.order == 'ascending') {
+);
+const HeaderCell = React.forwardRef(
+  ({
+    className,
+    children,
+    name,
+    sortable = false,
+    sortConfig,
+    padding = "default",
+    sortableButtonProps,
+    sortedAscendingAriaLabel = ", sortert stigende",
+    sortedDescendingAriaLabel = ", sortert synkende",
+    ...rest
+  }, ref) => {
+    const [isCurrentlySorted, setIsCurrentlySorted] = React.useState(false);
+    React.useEffect(() => {
+      sortConfig && name && setIsCurrentlySorted(sortConfig && name === sortConfig.key);
+    }, [sortConfig, name]);
+    const ariaSort = isCurrentlySorted ? sortConfig && sortConfig.order : void 0;
+    return /* @__PURE__ */ jsx(
+      "th",
+      {
+        className: classNames("eds-table__header-cell", className, {
+          "eds-table__header-cell--sortable": sortable,
+          "eds-table__header-cell--padding-radio": padding === "radio",
+          "eds-table__header-cell--padding-checkbox": padding === "checkbox",
+          "eds-table__header-cell--padding-overflow-menu": padding === "overflow-menu"
+        }),
+        "aria-sort": ariaSort,
+        ref,
+        ...rest,
+        children: sortable && sortConfig && sortableButtonProps ? /* @__PURE__ */ jsx(
+          SortableHeaderCellButton,
+          {
+            sortableButtonProps,
+            sortConfig,
+            isCurrentlySorted,
+            ariaSort,
+            sortedAscendingAriaLabel,
+            sortedDescendingAriaLabel,
+            children
+          }
+        ) : children
+      }
+    );
+  }
+);
+const SortableHeaderCellButton = ({
+  sortConfig,
+  sortableButtonProps,
+  isCurrentlySorted,
+  children,
+  ariaSort,
+  sortedAscendingAriaLabel,
+  sortedDescendingAriaLabel
+}) => {
+  const [sortedAriaInfo, setSortedAriaInfo] = useState("");
+  const { className, ...rest } = sortableButtonProps;
+  const isFirefox = navigator.userAgent.toLowerCase().indexOf("firefox") > -1;
+  useEffect(() => {
+    const DISMISS_SORT_INFO_TIME = 3e3;
+    if (sortConfig.order == "ascending") {
       setSortedAriaInfo(sortedAscendingAriaLabel);
-    } else if (sortConfig.order == 'descending') {
+    } else if (sortConfig.order == "descending") {
       setSortedAriaInfo(sortedDescendingAriaLabel);
     }
-    var dismissAriaTimer = setTimeout(function () {
-      setSortedAriaInfo('');
-      if (isFirefox) setSortedAriaInfo(', sort ' + sortConfig.order);
+    const dismissAriaTimer = setTimeout(() => {
+      setSortedAriaInfo("");
+      if (isFirefox) setSortedAriaInfo(", sort " + sortConfig.order);
     }, DISMISS_SORT_INFO_TIME);
-    return function () {
-      return clearTimeout(dismissAriaTimer);
-    };
+    return () => clearTimeout(dismissAriaTimer);
   }, [sortConfig.order]);
-  return React.createElement("button", _extends({
-    className: classNames('eds-table__header-cell-button', className),
-    type: "button",
-    "aria-sort": ariaSort
-  }, rest), children, (!isCurrentlySorted || sortConfig.order === 'none') && React.createElement(UnsortedIcon, {
-    size: "1em",
-    className: "eds-table__header-cell-button-icon",
-    "aria-hidden": "true"
-  }), isCurrentlySorted && sortConfig.order === 'ascending' && React.createElement(UpArrowIcon, {
-    size: "1em",
-    className: "eds-table__header-cell-button-icon",
-    "aria-hidden": "true"
-  }), isCurrentlySorted && sortConfig.order === 'descending' && React.createElement(DownArrowIcon, {
-    size: "1em",
-    className: "eds-table__header-cell-button-icon",
-    "aria-hidden": "true"
-  }), React.createElement(VisuallyHidden, null, isCurrentlySorted && sortedAriaInfo));
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      className: classNames("eds-table__header-cell-button", className),
+      type: "button",
+      "aria-sort": ariaSort,
+      ...rest,
+      children: [
+        children,
+        (!isCurrentlySorted || sortConfig.order === "none") && /* @__PURE__ */ jsx(
+          UnsortedIcon,
+          {
+            size: "1em",
+            className: "eds-table__header-cell-button-icon",
+            "aria-hidden": "true"
+          }
+        ),
+        isCurrentlySorted && sortConfig.order === "ascending" && /* @__PURE__ */ jsx(
+          UpArrowIcon,
+          {
+            size: "1em",
+            className: "eds-table__header-cell-button-icon",
+            "aria-hidden": "true"
+          }
+        ),
+        isCurrentlySorted && sortConfig.order === "descending" && /* @__PURE__ */ jsx(
+          DownArrowIcon,
+          {
+            size: "1em",
+            className: "eds-table__header-cell-button-icon",
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ jsx(VisuallyHidden, { children: isCurrentlySorted && sortedAriaInfo })
+      ]
+    }
+  );
 };
-
-var _excluded$2 = ["name", "sortable", "buttonProps"],
-  _excluded2 = ["sortable"];
-function useSortableData(tableData, externalSortConfig) {
-  if (externalSortConfig === void 0) {
-    externalSortConfig = {
-      key: '',
-      order: 'none'
-    };
-  }
-  var _useState = useState(externalSortConfig),
-    sortConfig = _useState[0],
-    setSortConfig = _useState[1];
-  var onSortRequested = function onSortRequested(key) {
-    var sortingNewColumn = key !== sortConfig.key;
-    if (sortingNewColumn || sortConfig.order === 'none') return setSortConfig({
-      key: key,
-      order: 'ascending'
-    });
-    if (sortConfig.order === 'ascending') return setSortConfig({
-      key: key,
-      order: 'descending'
-    });
-    if (sortConfig.order === 'descending') return setSortConfig({
-      key: key,
-      order: 'none'
-    });
+function useSortableData(tableData, externalSortConfig = { key: "", order: "none" }) {
+  const [sortConfig, setSortConfig] = useState(externalSortConfig);
+  const onSortRequested = (key) => {
+    const sortingNewColumn = key !== sortConfig.key;
+    if (sortingNewColumn || sortConfig.order === "none")
+      return setSortConfig({ key, order: "ascending" });
+    if (sortConfig.order === "ascending")
+      return setSortConfig({ key, order: "descending" });
+    if (sortConfig.order === "descending")
+      return setSortConfig({ key, order: "none" });
   };
-  var tableSortedAscending = useMemo(function () {
-    return [].concat(tableData).sort(function (a, b) {
-      var _get$toString, _get, _get$toString2, _get2;
-      var valueOfA = (_get$toString = (_get = get(a, sortConfig.key, a)) == null ? void 0 : _get.toString()) != null ? _get$toString : '';
-      var valueOfB = (_get$toString2 = (_get2 = get(b, sortConfig.key, b)) == null ? void 0 : _get2.toString()) != null ? _get$toString2 : '';
-      var stringComparator = new Intl.Collator(['no', 'en'], {
+  const tableSortedAscending = useMemo(
+    () => [...tableData].sort((a, b) => {
+      const valueOfA = get(a, sortConfig.key, a)?.toString() ?? "";
+      const valueOfB = get(b, sortConfig.key, b)?.toString() ?? "";
+      const stringComparator = new Intl.Collator(["no", "en"], {
         numeric: true,
-        sensitivity: 'base'
+        sensitivity: "base"
       });
       return stringComparator.compare(valueOfA, valueOfB);
-    });
-  }, [tableData, sortConfig.key]);
-  var sortedData = useMemo(function () {
+    }),
+    [tableData, sortConfig.key]
+  );
+  const sortedData = useMemo(() => {
     switch (sortConfig.order) {
-      case 'ascending':
-        {
-          return tableSortedAscending;
-        }
-      case 'descending':
-        {
-          return [].concat(tableSortedAscending).reverse();
-        }
-      case 'none':
-        {
-          return tableData;
-        }
-      default:
-        {
-          return tableData;
-        }
+      case "ascending": {
+        return tableSortedAscending;
+      }
+      case "descending": {
+        return [...tableSortedAscending].reverse();
+      }
+      case "none": {
+        return tableData;
+      }
+      default: {
+        return tableData;
+      }
     }
   }, [sortConfig.order, tableData, tableSortedAscending]);
-  var getSortableHeaderProps = function getSortableHeaderProps(_ref) {
-    var name = _ref.name,
-      _ref$sortable = _ref.sortable,
-      sortable = _ref$sortable === void 0 ? true : _ref$sortable,
-      buttonProps = _ref.buttonProps,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
-    return _extends({
-      name: name,
-      sortable: sortable,
-      sortConfig: sortConfig,
-      sortableButtonProps: _extends({
-        onClick: function onClick() {
-          return onSortRequested(name);
-        }
-      }, buttonProps)
-    }, props);
-  };
-  var getSortableTableProps = function getSortableTableProps(_temp) {
-    var _ref2 = _temp === void 0 ? {} : _temp,
-      _ref2$sortable = _ref2.sortable,
-      sortable = _ref2$sortable === void 0 ? true : _ref2$sortable,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
-    return _extends({
-      sortable: sortable,
-      sortConfig: sortConfig
-    }, props);
+  const getSortableHeaderProps = ({
+    name,
+    sortable = true,
+    buttonProps,
+    ...props
+  }) => {
+    return {
+      name,
+      sortable,
+      sortConfig,
+      sortableButtonProps: {
+        onClick: () => onSortRequested(name),
+        ...buttonProps
+      },
+      ...props
+    };
   };
-  return {
-    sortedData: sortedData,
-    getSortableHeaderProps: getSortableHeaderProps,
-    getSortableTableProps: getSortableTableProps
+  const getSortableTableProps = ({
+    sortable = true,
+    ...props
+  } = {}) => {
+    return {
+      sortable,
+      sortConfig,
+      ...props
+    };
   };
+  return { sortedData, getSortableHeaderProps, getSortableTableProps };
 }
-
-var _excluded$1 = ["children", "className", "feedback", "variant", "outlined"];
-var EditableCell = function EditableCell(_ref) {
-  var children = _ref.children,
-    className = _ref.className,
-    feedback = _ref.feedback,
-    variant = _ref.variant,
-    _ref$outlined = _ref.outlined,
-    outlined = _ref$outlined === void 0 ? false : _ref$outlined,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
-  return React.createElement(VariantProvider, {
-    variant: variant
-  }, React.createElement(DataCell, _extends({
-    className: classNames('eds-editable-cell', {
-      'eds-editable-cell--outlined': outlined
-    }, className)
-  }, rest), React.createElement(Tooltip, {
-    disableHoverListener: !feedback,
-    disableFocusListener: !feedback,
-    placement: "bottom",
-    content: feedback || undefined,
-    variant: feedback ? 'negative' : undefined
-  }, children)));
+const EditableCell = ({
+  children,
+  className,
+  feedback,
+  variant,
+  outlined = false,
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsx(VariantProvider, { variant, children: /* @__PURE__ */ jsx(
+    DataCell,
+    {
+      className: classNames(
+        "eds-editable-cell",
+        {
+          "eds-editable-cell--outlined": outlined
+        },
+        className
+      ),
+      ...rest,
+      children: /* @__PURE__ */ jsx(
+        Tooltip,
+        {
+          disableHoverListener: !feedback,
+          disableFocusListener: !feedback,
+          placement: "bottom",
+          content: feedback || void 0,
+          variant: feedback ? "negative" : void 0,
+          children
+        }
+      )
+    }
+  ) });
 };
-
-var ExpandableRow = function ExpandableRow(_ref) {
-  var _ref$open = _ref.open,
-    open = _ref$open === void 0 ? false : _ref$open,
-    children = _ref.children,
-    colSpan = _ref.colSpan;
-  return React.createElement("tr", null, React.createElement("td", {
-    colSpan: colSpan
-  }, React.createElement(BaseExpand, {
-    open: open
-  }, children)));
+const ExpandableRow = ({
+  open = false,
+  children,
+  colSpan
+}) => {
+  return /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan, children: /* @__PURE__ */ jsx(BaseExpand, { open, children }) }) });
 };
-
-var _excluded = ["open", "onClick"];
-var ExpandRowButton = function ExpandRowButton(_ref) {
-  var open = _ref.open,
-    onClick = _ref.onClick,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
-  return React.createElement(IconButton, _extends({
-    className: classNames('eds-expand-row-button', {
-      'eds-expand-row-button--open': open
-    }),
-    onClick: onClick,
-    "aria-label": open ? 'Lukk tabellrad' : 'Utvid tabellrad',
-    type: "button"
-  }, rest), React.createElement(DownArrowIcon, {
-    "aria-hidden": true,
-    className: "eds-expand-row-button__icon"
-  }));
+const ExpandRowButton = ({
+  open,
+  onClick,
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      className: classNames("eds-expand-row-button", {
+        "eds-expand-row-button--open": open
+      }),
+      onClick,
+      "aria-label": open ? "Lukk tabellrad" : "Utvid tabellrad",
+      type: "button",
+      ...rest,
+      children: /* @__PURE__ */ jsx(DownArrowIcon, { "aria-hidden": true, className: "eds-expand-row-button__icon" })
+    }
+  );
 };
-
 function onTableKeypress(event, currentRow, maxRow, allowWrap) {
-  var keyPress = event.key;
+  const keyPress = event.key;
   switch (keyPress) {
-    case 'ArrowUp':
+    case "ArrowUp":
       event.preventDefault();
       if (allowWrap) {
         return currentRow === 0 ? maxRow - 1 : currentRow - 1;
       } else {
         return currentRow > 0 ? currentRow - 1 : 0;
       }
-    case 'ArrowDown':
+    case "ArrowDown":
       event.preventDefault();
       if (allowWrap) {
         return currentRow === maxRow - 1 ? 0 : currentRow + 1;
@@ -433,62 +386,52 @@ function onTableKeypress(event, currentRow, maxRow, allowWrap) {
       return currentRow;
   }
 }
-var useTableKeyboardNavigation = function useTableKeyboardNavigation(numberOfRows, allowWrap) {
-  var _tableBodyRef$current;
-  if (numberOfRows === void 0) {
-    numberOfRows = 0;
-  }
-  if (allowWrap === void 0) {
-    allowWrap = true;
-  }
-  var _useState = useState(numberOfRows),
-    currentRow = _useState[0],
-    setCurrentRow = _useState[1];
-  var _useState2 = useState(0),
-    maxRow = _useState2[0],
-    setMaxRow = _useState2[1];
-  var tableBodyRef = useRef(null);
-  var tableHasFocus = tableBodyRef == null || (_tableBodyRef$current = tableBodyRef.current) == null ? void 0 : _tableBodyRef$current.contains(document.activeElement);
-  useEffect(function () {
-    var _tableBodyRef$current2;
-    tableBodyRef && tableBodyRef.current && tableHasFocus && ((_tableBodyRef$current2 = tableBodyRef.current.childNodes[currentRow].childNodes[0].parentElement) == null ? void 0 : _tableBodyRef$current2.focus());
+const useTableKeyboardNavigation = (numberOfRows = 0, allowWrap = true) => {
+  const [currentRow, setCurrentRow] = useState(numberOfRows);
+  const [maxRow, setMaxRow] = useState(0);
+  const tableBodyRef = useRef(null);
+  const tableHasFocus = tableBodyRef?.current?.contains(document.activeElement);
+  useEffect(() => {
+    tableBodyRef && tableBodyRef.current && tableHasFocus && tableBodyRef.current.childNodes[currentRow].childNodes[0].parentElement?.focus();
   }, [currentRow, tableHasFocus]);
-  function getTableBodyNavigationProps() {
-    for (var _len = arguments.length, rest = new Array(_len), _key = 0; _key < _len; _key++) {
-      rest[_key] = arguments[_key];
-    }
-    return _extends({
-      ref: tableBodyRef
-    }, rest);
+  function getTableBodyNavigationProps(...rest) {
+    return {
+      ref: tableBodyRef,
+      ...rest
+    };
   }
-  var tableRowRef = useRef(null);
-  function getTableRowNavigationProps(row) {
+  const tableRowRef = useRef(null);
+  function getTableRowNavigationProps(row, ...rest) {
     if (row >= maxRow) {
       setMaxRow(row + 1);
     }
-    var tabIndex = currentRow ? 0 : -1;
-    for (var _len2 = arguments.length, rest = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
-      rest[_key2 - 1] = arguments[_key2];
-    }
-    return _extends({
-      tabIndex: tabIndex,
+    const tabIndex = currentRow ? 0 : -1;
+    return {
+      tabIndex,
       ref: tableRowRef,
-      onClick: function onClick() {
-        return setCurrentRow(row);
-      },
-      onKeyDown: function onKeyDown(e) {
-        var newCell = onTableKeypress(e, currentRow, numberOfRows, allowWrap);
+      onClick: () => setCurrentRow(row),
+      onKeyDown: (e) => {
+        const newCell = onTableKeypress(e, currentRow, numberOfRows, allowWrap);
         setCurrentRow(newCell);
-      }
-    }, rest);
+      },
+      ...rest
+    };
   }
-  return {
-    getTableRowNavigationProps: getTableRowNavigationProps,
-    getTableBodyNavigationProps: getTableBodyNavigationProps
-  };
+  return { getTableRowNavigationProps, getTableBodyNavigationProps };
+};
+warnAboutMissingStyles("table");
+export {
+  DataCell,
+  EditableCell,
+  ExpandRowButton,
+  ExpandableRow,
+  HeaderCell,
+  Table,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  useSortableData,
+  useTableKeyboardNavigation
 };
-
-warnAboutMissingStyles('table');
-
-export { DataCell, EditableCell, ExpandRowButton, ExpandableRow, HeaderCell, Table, TableBody, TableFooter, TableHead, TableRow, useSortableData, useTableKeyboardNavigation };
 //# sourceMappingURL=table.esm.js.map