@navikt/ds-react 8.2.2 → 8.3.0

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

@@ -0,0 +1,67 @@
+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 };

package/src/tooltip/Tooltip.tsx

@@ -12,6 +12,7 @@ import {
   useInteractions,
 } from "@floating-ui/react";
 import React, { HTMLAttributes, forwardRef, useRef } from "react";
+import { HStack } from "../layout/stack";
 import { useModalContext } from "../modal/Modal.context";
 import { Portal } from "../portal";
 import { Detail } from "../typography";
@@ -19,6 +20,7 @@ import { useId } from "../utils-external";
 import { Slot } from "../utils/components/slot/Slot";
 import { cl } from "../utils/helpers";
 import { useControllableState, useMergeRefs } from "../utils/hooks";
+import { useI18n } from "../utils/i18n/i18n.hooks";
 
 export interface TooltipProps extends HTMLAttributes<HTMLDivElement> {
   /**
@@ -79,7 +81,7 @@ export interface TooltipProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * List of Keyboard-keys for shortcuts.
    */
-  keys?: string[];
+  keys?: string[] | [string[], string[]];
   /**
    * When false, Tooltip labels the element, and child-elements content will be ignored by screen-readers.
    * When true, content is added as additional information to the child element.
@@ -204,7 +206,7 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
           ref={refs.setReference}
           {...getReferenceProps()}
           {...labelProps}
-          aria-keyshortcuts={keys ? keys.join("+") : undefined}
+          aria-keyshortcuts={ariaShortcuts(keys)}
         >
           {children}
         </Slot>
@@ -232,15 +234,7 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
               data-state="open"
             >
               {content}
-              {keys && (
-                <span className="aksel-tooltip__keys" aria-hidden>
-                  {keys.map((key) => (
-                    <Detail as="kbd" key={key} className="aksel-tooltip__key">
-                      {key}
-                    </Detail>
-                  ))}
-                </span>
-              )}
+              <TooltipShortcuts shortcuts={keys} />
               {_arrow && (
                 <div
                   ref={(node) => {
@@ -269,4 +263,65 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
   },
 );
 
+function isKeyShortcutNested(
+  shortcuts: TooltipProps["keys"],
+): shortcuts is [string[], string[]] {
+  return Array.isArray(shortcuts?.[0]);
+}
+
+/**
+ * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-keyshortcuts
+ * Space-separated shortcuts is valid syntax
+ */
+function ariaShortcuts(shortcuts: TooltipProps["keys"]) {
+  if (!shortcuts) {
+    return undefined;
+  }
+
+  if (isKeyShortcutNested(shortcuts)) {
+    return shortcuts.map((key) => key.join("+")).join(" ");
+  }
+
+  return shortcuts.join("+");
+}
+
+function TooltipShortcuts({ shortcuts }: { shortcuts: TooltipProps["keys"] }) {
+  const translate = useI18n("Tooltip");
+
+  if (!shortcuts) {
+    return null;
+  }
+
+  if (isKeyShortcutNested(shortcuts)) {
+    return (
+      <span className="aksel-tooltip__keys" aria-hidden>
+        {shortcuts.map((key, index) => (
+          <>
+            <HStack gap="space-4">
+              {key.map((k, i) => (
+                <Detail as="kbd" key={i} className="aksel-tooltip__key">
+                  {k}
+                </Detail>
+              ))}
+            </HStack>
+            {index < shortcuts.length - 1 && (
+              <span> {translate("shortcutSeparator")} </span>
+            )}
+          </>
+        ))}
+      </span>
+    );
+  }
+
+  return (
+    <span className="aksel-tooltip__keys" aria-hidden>
+      {shortcuts.map((k, i) => (
+        <Detail as="kbd" key={i} className="aksel-tooltip__key">
+          {k}
+        </Detail>
+      ))}
+    </span>
+  );
+}
+
 export default Tooltip;

package/src/utils/i18n/locales/en.ts

@@ -132,4 +132,7 @@ export default {
       reset: "Reset zoom",
     },
   },
+  Tooltip: {
+    shortcutSeparator: "or",
+  },
 } satisfies Translations;

package/src/utils/i18n/locales/nb.ts

@@ -139,4 +139,7 @@ export default {
       reset: "Tilbakestill tidsperspektiv",
     },
   },
+  Tooltip: {
+    shortcutSeparator: "eller",
+  },
 } satisfies TranslationMap;

package/src/utils/i18n/locales/nn.ts

@@ -132,4 +132,7 @@ export default {
       reset: "Tilbakestill tidsperspektiv",
     },
   },
+  Tooltip: {
+    shortcutSeparator: "eller",
+  },
 } satisfies Translations;