@navikt/ds-react 8.6.0 → 8.7.0

package/src/utils/components/Listbox/root/ListboxRoot.tsx

@@ -0,0 +1,104 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/** biome-ignore-all lint/a11y/noStaticElementInteractions: We know what we are doing */
+import React from "react";
+import { ListboxGroup } from "../group/ListboxGroup";
+import { ListboxInputSlot } from "../input-slot/ListboxInputSlot";
+import { ListboxItem } from "../item/ListboxItem";
+import { ListboxList } from "../list/ListboxList";
+import { findNextItem, findPrevItem } from "./domHelpers";
+
+export interface ListboxProps {
+  children: React.ReactNode;
+  setVirtuallyFocusedItemId: (value: string) => void;
+}
+
+/**
+ * Low level component for displaying a list of selectable items with optional grouping.
+ * Keyboard navigation is implemented with virtual focus so that real focus can remain on an input field.
+ */
+function Listbox({ children, setVirtuallyFocusedItemId }: ListboxProps) {
+  const virtuallyFocusItem = (element: HTMLElement | null) => {
+    setVirtuallyFocusedItemId(element?.dataset.id || "");
+    element?.scrollIntoView({ block: "nearest" });
+  };
+
+  return (
+    <div
+      onKeyDown={(event) => {
+        const listbox =
+          event.currentTarget.querySelector<HTMLElement>('[role="listbox"]');
+        if (!listbox) {
+          return;
+        }
+
+        // Helper functions
+        const getFirstItem = (suffix: string = "") =>
+          listbox.querySelector<HTMLElement>(`[role="option"]${suffix}`);
+        const getLastItem = () => {
+          const allItems =
+            listbox.querySelectorAll<HTMLElement>('[role="option"]');
+          return allItems[allItems.length - 1];
+        };
+
+        const focusedItemElm = getFirstItem('[data-virtual-focus="true"]');
+
+        // Doesn't make sense to have real focus on one item and virtual focus on another at the same time.
+        // Not sure if it matters, though 🤔
+        const itemElmWithRealFocus = getFirstItem(":focus");
+        if (itemElmWithRealFocus) {
+          listbox.focus();
+        }
+
+        const virtuallyFocusWithFallback = (
+          getNextElement: (currentItem: HTMLElement) => HTMLElement | null,
+          getFallback: () => HTMLElement | null,
+        ) => {
+          event.preventDefault();
+          if (!focusedItemElm) {
+            virtuallyFocusItem(getFallback());
+            return;
+          }
+          const nextItem = getNextElement(focusedItemElm);
+          if (!nextItem) {
+            virtuallyFocusItem(getFallback());
+            return;
+          }
+          virtuallyFocusItem(nextItem);
+        };
+
+        switch (event.key) {
+          case "ArrowDown":
+            virtuallyFocusWithFallback(findNextItem, getFirstItem);
+            break;
+          case "ArrowUp":
+            virtuallyFocusWithFallback(findPrevItem, getLastItem);
+            break;
+          case "Home":
+            event.preventDefault();
+            virtuallyFocusItem(getFirstItem());
+            break;
+          case "End":
+            event.preventDefault();
+            virtuallyFocusItem(getLastItem());
+            break;
+          case "Enter":
+          case "Accept":
+            if (focusedItemElm) {
+              focusedItemElm.click();
+            }
+            break;
+          // TODO: Consider implementing PageUp/PageDown too
+        }
+      }}
+    >
+      {children}
+    </div>
+  );
+}
+
+Listbox.InputSlot = ListboxInputSlot;
+Listbox.List = ListboxList;
+Listbox.Item = ListboxItem;
+Listbox.Group = ListboxGroup;
+
+export default Listbox;

package/src/utils/components/Listbox/root/domHelpers.ts

@@ -0,0 +1,59 @@
+function findNextItem(currentItem: HTMLElement) {
+  const nextElement = currentItem.nextElementSibling as HTMLElement | null;
+  if (nextElement) {
+    if (nextElement.role === "group") {
+      return nextElement.querySelector<HTMLElement>('[role="option"]');
+    }
+    if (nextElement.role === "option") {
+      return nextElement;
+    }
+  }
+
+  // No next element: Current element might be inside a group.
+  // Check if the parent has a next sibling
+  const parentNextElement = currentItem.parentElement
+    ?.nextElementSibling as HTMLElement | null;
+  if (parentNextElement) {
+    if (parentNextElement.role === "group") {
+      return parentNextElement.querySelector<HTMLElement>('[role="option"]');
+    }
+    if (parentNextElement.role === "option") {
+      return parentNextElement;
+    }
+  }
+
+  return null;
+}
+
+function findPrevItem(currentItem: HTMLElement) {
+  const prevElement = currentItem.previousElementSibling as HTMLElement | null;
+  if (prevElement) {
+    if (prevElement.role === "group") {
+      return prevElement.querySelector<HTMLElement>(
+        '[role="option"]:last-of-type',
+      );
+    }
+    if (prevElement.role === "option") {
+      return prevElement;
+    }
+  }
+
+  // No previous element: Current element might be inside a group.
+  // Check if the parent has a previous sibling.
+  const parentPrevElement = currentItem.parentElement
+    ?.previousElementSibling as HTMLElement | null;
+  if (parentPrevElement) {
+    if (parentPrevElement.role === "group") {
+      return parentPrevElement.querySelector<HTMLElement>(
+        '[role="option"]:last-of-type',
+      );
+    }
+    if (parentPrevElement.role === "option") {
+      return parentPrevElement;
+    }
+  }
+
+  return null;
+}
+
+export { findNextItem, findPrevItem };

package/src/utils/components/focus-boundary/FocusBoundary.tsx

@@ -11,6 +11,7 @@ import {
   ownerDocument,
   resolveRef,
 } from "../../helpers";
+import { focusElement, getTabbableCandidates } from "../../helpers/focus";
 import { useMergeRefs } from "../../hooks";
 import { useValueAsRef } from "../../hooks/useValueAsRef";
 import { Slot } from "../slot/Slot";
@@ -118,7 +119,7 @@ const FocusBoundary = forwardRef<HTMLDivElement, FocusBoundaryProps>(
         if (container.contains(target)) {
           lastFocusedElementRef.current = target;
         } else {
-          focus(lastFocusedElementRef.current, { select: true });
+          focusElement(lastFocusedElementRef.current, { select: true });
         }
       }
 
@@ -150,7 +151,7 @@ const FocusBoundary = forwardRef<HTMLDivElement, FocusBoundaryProps>(
          * when they are not supposed to (like when clicking on elements outside the container
          */
         if (!container.contains(relatedTarget)) {
-          focus(lastFocusedElementRef.current, { select: true });
+          focusElement(lastFocusedElementRef.current, { select: true });
         }
       }
 
@@ -165,7 +166,7 @@ const FocusBoundary = forwardRef<HTMLDivElement, FocusBoundaryProps>(
         }
 
         if (mutations.some((mutation) => mutation.removedNodes.length > 0)) {
-          focus(container);
+          focusElement(container);
         }
       };
 
@@ -230,7 +231,7 @@ const FocusBoundary = forwardRef<HTMLDivElement, FocusBoundaryProps>(
       const previouslyFocusedElement = ownerDoc.activeElement;
 
       queueMicrotask(() => {
-        const focusableElements = removeLinks(getTabbableCandidates(container));
+        const focusableElements = getTabbableCandidates(container);
         const initialFocusValueOrFn = initialFocusRef.current;
         const resolvedInitialFocus =
           typeof initialFocusValueOrFn === "function"
@@ -262,7 +263,7 @@ const FocusBoundary = forwardRef<HTMLDivElement, FocusBoundaryProps>(
           return;
         }
 
-        focus(elToFocus, {
+        focusElement(elToFocus, {
           preventScroll: elToFocus === container,
           sync: false,
         });
@@ -361,12 +362,12 @@ const FocusBoundary = forwardRef<HTMLDivElement, FocusBoundaryProps>(
           if (!event.shiftKey && focusedElement === last) {
             event.preventDefault();
             if (loop) {
-              focus(first, { select: true });
+              focusElement(first, { select: true });
             }
           } else if (event.shiftKey && focusedElement === first) {
             event.preventDefault();
             if (loop) {
-              focus(last, { select: true });
+              focusElement(last, { select: true });
             }
           }
         }
@@ -398,40 +399,6 @@ function getTabbableEdges(container: HTMLElement) {
   ] as const;
 }
 
-/**
- * Returns a list of potential tabbable candidates.
- * We do not take into account tabindex values.
- *
- * See: https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker
- * Credit: https://github.com/discord/focus-layers/blob/master/src/util/wrapFocus.tsx#L1
- */
-function getTabbableCandidates(container: HTMLElement) {
-  const nodes: HTMLElement[] = [];
-  const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
-    acceptNode: (node: any) => {
-      const isHiddenInput = node.tagName === "INPUT" && node.type === "hidden";
-      if (node.disabled || node.hidden || isHiddenInput) {
-        return NodeFilter.FILTER_SKIP;
-      }
-
-      /**
-       * `.tabIndex` is not the same as the `tabindex` attribute. It works on the
-       * runtime's understanding of tabbability, so this automatically accounts
-       * for any kind of element that could be tabbed to.
-       */
-      return node.tabIndex >= 0
-        ? NodeFilter.FILTER_ACCEPT
-        : NodeFilter.FILTER_SKIP;
-    },
-  });
-
-  while (walker.nextNode()) {
-    nodes.push(walker.currentNode as HTMLElement);
-  }
-
-  return nodes;
-}
-
 /**
  * Returns the first visible element in a list.
  * NOTE: Only checks visibility up to the `container`.
@@ -462,39 +429,6 @@ function isHidden(node: HTMLElement, { upTo }: { upTo?: HTMLElement }) {
   return false;
 }
 
-let rafId = 0;
-function focus(
-  element?: HTMLElement | null,
-  { select = false, preventScroll = true, sync = true } = {},
-) {
-  if (!element?.focus) {
-    return;
-  }
-
-  const previouslyFocusedElement = document.activeElement;
-
-  cancelAnimationFrame(rafId);
-  const exec = () => element.focus({ preventScroll });
-
-  if (sync) {
-    exec();
-  } else {
-    rafId = requestAnimationFrame(exec);
-  }
-
-  if (!select) {
-    return;
-  }
-
-  /* By default, inputs that gets focus should select its contents */
-  if (
-    element !== previouslyFocusedElement &&
-    element instanceof HTMLInputElement &&
-    "select" in element
-  )
-    element.select();
-}
-
 /* ---------------------------- FocusBoundary stack ---------------------------- */
 type FocusBoundaryAPI = { paused: boolean; pause(): void; resume(): void };
 const focusBoundarysStack = createFocusBoundarysStack();
@@ -531,10 +465,6 @@ function arrayRemove<T>(array: T[], item: T) {
   return updatedArray;
 }
 
-function removeLinks(items: HTMLElement[]) {
-  return items.filter((item) => item.tagName !== "A");
-}
-
 const LIST_LIMIT = 10;
 let previouslyFocusedElements: Element[] = [];
 const focusedElementsByContainer = new WeakMap<Element, Element[]>();

package/src/utils/helpers/focus.ts

@@ -0,0 +1,75 @@
+/**
+ * Returns a list of potential tabbable candidates.
+ * We do not take into account tabindex values.
+ *
+ * See: https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker
+ * Credit: https://github.com/discord/focus-layers/blob/master/src/util/wrapFocus.tsx#L1
+ */
+function getTabbableCandidates(container: HTMLElement) {
+  const nodes: HTMLElement[] = [];
+  const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
+    acceptNode: (node: any) => {
+      const isHiddenInput = node.tagName === "INPUT" && node.type === "hidden";
+      if (node.disabled || node.hidden || isHiddenInput) {
+        return NodeFilter.FILTER_SKIP;
+      }
+
+      /**
+       * `.tabIndex` is not the same as the `tabindex` attribute. It works on the
+       * runtime's understanding of tabbability, so this automatically accounts
+       * for any kind of element that could be tabbed to.
+       */
+      return node.tabIndex >= 0
+        ? NodeFilter.FILTER_ACCEPT
+        : NodeFilter.FILTER_SKIP;
+    },
+  });
+
+  while (walker.nextNode()) {
+    nodes.push(walker.currentNode as HTMLElement);
+  }
+
+  return removeLinks(nodes);
+}
+
+function removeLinks(items: HTMLElement[]) {
+  return items.filter((item) => item.tagName !== "A");
+}
+
+let rafId = 0;
+
+function focusElement(
+  element?: HTMLElement | null,
+  { select = false, preventScroll = true, sync = true } = {},
+) {
+  if (!element?.focus) {
+    return;
+  }
+
+  const previouslyFocusedElement = document.activeElement;
+
+  cancelAnimationFrame(rafId);
+  const exec = () => {
+    element.focus({ preventScroll });
+  };
+
+  if (sync) {
+    exec();
+  } else {
+    rafId = requestAnimationFrame(exec);
+  }
+
+  if (!select) {
+    return;
+  }
+
+  /* By default, inputs that gets focus should select its contents */
+  if (
+    element !== previouslyFocusedElement &&
+    element instanceof HTMLInputElement &&
+    "select" in element
+  )
+    element.select();
+}
+
+export { getTabbableCandidates, focusElement };

package/src/utils/hooks/useDeferredValue.ts

@@ -0,0 +1,12 @@
+import React from "react";
+
+const maybeReactUseDeferredValue: undefined | ((string: string) => string) = (
+  React as any
+)[
+  "useDeferredValue" + "" // Workaround for https://github.com/webpack/webpack/issues/14814
+];
+
+export const useDeferredValue = (value: string): string =>
+  maybeReactUseDeferredValue !== undefined
+    ? maybeReactUseDeferredValue(value)
+    : value;

package/cjs/data/table/th/DataTableThSortHandle.d.ts

@@ -1,6 +0,0 @@
-import React from "react";
-declare function DataTableThSortHandle({ sortDirection, onSortChange, }: {
-    sortDirection?: "asc" | "desc" | "none" | false;
-    onSortChange?: (direction: "asc" | "desc" | "none", event: Event) => void;
-}): React.JSX.Element | null;
-export { DataTableThSortHandle };

package/cjs/data/table/th/DataTableThSortHandle.js

@@ -1,82 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DataTableThSortHandle = DataTableThSortHandle;
-const react_1 = __importStar(require("react"));
-const aksel_icons_1 = require("@navikt/aksel-icons");
-const button_1 = require("../../../button");
-const ICON_CONFIG = {
-    desc: {
-        icon: aksel_icons_1.SortDownIcon,
-        title: "Sorter stigende",
-    },
-    asc: {
-        icon: aksel_icons_1.SortUpIcon,
-        title: "Ingen sortering",
-    },
-    none: {
-        icon: aksel_icons_1.ArrowsUpDownIcon,
-        title: "Sorter synkende",
-    },
-};
-function DataTableThSortHandle({ sortDirection = false, onSortChange, }) {
-    const IconConfig = (0, react_1.useMemo)(() => {
-        if (!sortDirection) {
-            return null;
-        }
-        return ICON_CONFIG[sortDirection];
-    }, [sortDirection]);
-    if (!sortDirection || !IconConfig) {
-        return null;
-    }
-    return (react_1.default.createElement(button_1.Button, { "data-color": "neutral", variant: "tertiary", size: "small", icon: react_1.default.createElement(IconConfig.icon, { title: IconConfig.title }), onClick: (event) => {
-            if (!onSortChange)
-                return;
-            /* TODO: This configuration is not a given */
-            let newDirection;
-            if (sortDirection === "none") {
-                newDirection = "asc";
-            }
-            else if (sortDirection === "asc") {
-                newDirection = "desc";
-            }
-            else {
-                newDirection = "none";
-            }
-            /* TODO: Handle types better */
-            onSortChange(newDirection, event);
-        } }));
-}
-//# sourceMappingURL=DataTableThSortHandle.js.map

package/cjs/data/table/th/DataTableThSortHandle.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DataTableThSortHandle.js","sourceRoot":"","sources":["../../../../src/data/table/th/DataTableThSortHandle.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkES,sDAAqB;AAlE9B,+CAAuC;AACvC,qDAI6B;AAC7B,4CAAyC;AAEzC,MAAM,WAAW,GAAG;IAClB,IAAI,EAAE;QACJ,IAAI,EAAE,0BAAY;QAClB,KAAK,EAAE,iBAAiB;KACzB;IACD,GAAG,EAAE;QACH,IAAI,EAAE,wBAAU;QAChB,KAAK,EAAE,iBAAiB;KACzB;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,8BAAgB;QACtB,KAAK,EAAE,iBAAiB;KACzB;CACF,CAAC;AAEF,SAAS,qBAAqB,CAAC,EAC7B,aAAa,GAAG,KAAK,EACrB,YAAY,GAIb;IACC,MAAM,UAAU,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QAC9B,IAAI,CAAC,aAAa,EAAE,CAAC;YACnB,OAAO,IAAI,CAAC;QACd,CAAC;QACD,OAAO,WAAW,CAAC,aAAa,CAAC,CAAC;IACpC,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,IAAI,CAAC,aAAa,IAAI,CAAC,UAAU,EAAE,CAAC;QAClC,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CACL,8BAAC,eAAM,kBACM,SAAS,EACpB,OAAO,EAAC,UAAU,EAClB,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,8BAAC,UAAU,CAAC,IAAI,IAAC,KAAK,EAAE,UAAU,CAAC,KAAK,GAAI,EAClD,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;YACjB,IAAI,CAAC,YAAY;gBAAE,OAAO;YAE1B,6CAA6C;YAC7C,IAAI,YAAqC,CAAC;YAC1C,IAAI,aAAa,KAAK,MAAM,EAAE,CAAC;gBAC7B,YAAY,GAAG,KAAK,CAAC;YACvB,CAAC;iBAAM,IAAI,aAAa,KAAK,KAAK,EAAE,CAAC;gBACnC,YAAY,GAAG,MAAM,CAAC;YACxB,CAAC;iBAAM,CAAC;gBACN,YAAY,GAAG,MAAM,CAAC;YACxB,CAAC;YACD,+BAA+B;YAC/B,YAAY,CAAC,YAAY,EAAE,KAAyB,CAAC,CAAC;QACxD,CAAC,GACD,CACH,CAAC;AACJ,CAAC"}

package/esm/data/table/th/DataTableThSortHandle.d.ts

@@ -1,6 +0,0 @@
-import React from "react";
-declare function DataTableThSortHandle({ sortDirection, onSortChange, }: {
-    sortDirection?: "asc" | "desc" | "none" | false;
-    onSortChange?: (direction: "asc" | "desc" | "none", event: Event) => void;
-}): React.JSX.Element | null;
-export { DataTableThSortHandle };

package/esm/data/table/th/DataTableThSortHandle.js

@@ -1,47 +0,0 @@
-import React, { useMemo } from "react";
-import { ArrowsUpDownIcon, SortDownIcon, SortUpIcon, } from "@navikt/aksel-icons";
-import { Button } from "../../../button/index.js";
-const ICON_CONFIG = {
-    desc: {
-        icon: SortDownIcon,
-        title: "Sorter stigende",
-    },
-    asc: {
-        icon: SortUpIcon,
-        title: "Ingen sortering",
-    },
-    none: {
-        icon: ArrowsUpDownIcon,
-        title: "Sorter synkende",
-    },
-};
-function DataTableThSortHandle({ sortDirection = false, onSortChange, }) {
-    const IconConfig = useMemo(() => {
-        if (!sortDirection) {
-            return null;
-        }
-        return ICON_CONFIG[sortDirection];
-    }, [sortDirection]);
-    if (!sortDirection || !IconConfig) {
-        return null;
-    }
-    return (React.createElement(Button, { "data-color": "neutral", variant: "tertiary", size: "small", icon: React.createElement(IconConfig.icon, { title: IconConfig.title }), onClick: (event) => {
-            if (!onSortChange)
-                return;
-            /* TODO: This configuration is not a given */
-            let newDirection;
-            if (sortDirection === "none") {
-                newDirection = "asc";
-            }
-            else if (sortDirection === "asc") {
-                newDirection = "desc";
-            }
-            else {
-                newDirection = "none";
-            }
-            /* TODO: Handle types better */
-            onSortChange(newDirection, event);
-        } }));
-}
-export { DataTableThSortHandle };
-//# sourceMappingURL=DataTableThSortHandle.js.map

package/esm/data/table/th/DataTableThSortHandle.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DataTableThSortHandle.js","sourceRoot":"","sources":["../../../../src/data/table/th/DataTableThSortHandle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EACL,gBAAgB,EAChB,YAAY,EACZ,UAAU,GACX,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAEzC,MAAM,WAAW,GAAG;IAClB,IAAI,EAAE;QACJ,IAAI,EAAE,YAAY;QAClB,KAAK,EAAE,iBAAiB;KACzB;IACD,GAAG,EAAE;QACH,IAAI,EAAE,UAAU;QAChB,KAAK,EAAE,iBAAiB;KACzB;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,gBAAgB;QACtB,KAAK,EAAE,iBAAiB;KACzB;CACF,CAAC;AAEF,SAAS,qBAAqB,CAAC,EAC7B,aAAa,GAAG,KAAK,EACrB,YAAY,GAIb;IACC,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,EAAE;QAC9B,IAAI,CAAC,aAAa,EAAE,CAAC;YACnB,OAAO,IAAI,CAAC;QACd,CAAC;QACD,OAAO,WAAW,CAAC,aAAa,CAAC,CAAC;IACpC,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,IAAI,CAAC,aAAa,IAAI,CAAC,UAAU,EAAE,CAAC;QAClC,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CACL,oBAAC,MAAM,kBACM,SAAS,EACpB,OAAO,EAAC,UAAU,EAClB,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,oBAAC,UAAU,CAAC,IAAI,IAAC,KAAK,EAAE,UAAU,CAAC,KAAK,GAAI,EAClD,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;YACjB,IAAI,CAAC,YAAY;gBAAE,OAAO;YAE1B,6CAA6C;YAC7C,IAAI,YAAqC,CAAC;YAC1C,IAAI,aAAa,KAAK,MAAM,EAAE,CAAC;gBAC7B,YAAY,GAAG,KAAK,CAAC;YACvB,CAAC;iBAAM,IAAI,aAAa,KAAK,KAAK,EAAE,CAAC;gBACnC,YAAY,GAAG,MAAM,CAAC;YACxB,CAAC;iBAAM,CAAC;gBACN,YAAY,GAAG,MAAM,CAAC;YACxB,CAAC;YACD,+BAA+B;YAC/B,YAAY,CAAC,YAAY,EAAE,KAAyB,CAAC,CAAC;QACxD,CAAC,GACD,CACH,CAAC;AACJ,CAAC;AAED,OAAO,EAAE,qBAAqB,EAAE,CAAC"}

package/src/data/table/th/DataTableThSortHandle.tsx

@@ -1,67 +0,0 @@
-import React, { useMemo } from "react";
-import {
-  ArrowsUpDownIcon,
-  SortDownIcon,
-  SortUpIcon,
-} from "@navikt/aksel-icons";
-import { Button } from "../../../button";
-
-const ICON_CONFIG = {
-  desc: {
-    icon: SortDownIcon,
-    title: "Sorter stigende",
-  },
-  asc: {
-    icon: SortUpIcon,
-    title: "Ingen sortering",
-  },
-  none: {
-    icon: ArrowsUpDownIcon,
-    title: "Sorter synkende",
-  },
-};
-
-function DataTableThSortHandle({
-  sortDirection = false,
-  onSortChange,
-}: {
-  sortDirection?: "asc" | "desc" | "none" | false;
-  onSortChange?: (direction: "asc" | "desc" | "none", event: Event) => void;
-}) {
-  const IconConfig = useMemo(() => {
-    if (!sortDirection) {
-      return null;
-    }
-    return ICON_CONFIG[sortDirection];
-  }, [sortDirection]);
-
-  if (!sortDirection || !IconConfig) {
-    return null;
-  }
-
-  return (
-    <Button
-      data-color="neutral"
-      variant="tertiary"
-      size="small"
-      icon={<IconConfig.icon title={IconConfig.title} />}
-      onClick={(event) => {
-        if (!onSortChange) return;
-
-        /* TODO: This configuration is not a given */
-        let newDirection: "asc" | "desc" | "none";
-        if (sortDirection === "none") {
-          newDirection = "asc";
-        } else if (sortDirection === "asc") {
-          newDirection = "desc";
-        } else {
-          newDirection = "none";
-        }
-        /* TODO: Handle types better */
-        onSortChange(newDirection, event as unknown as Event);
-      }}
-    />
-  );
-}
-
-export { DataTableThSortHandle };