@navikt/ds-react 8.2.1 → 8.3.0

package/src/data/stories/dummy-data.tsx

@@ -1,6 +1,5 @@
 import { createColumnHelper } from "@tanstack/react-table";
 import React from "react";
-import { HStack } from "../../layout/stack";
 import { Tag } from "../../tag";
 
 // Helper function to get random integer between min and max (inclusive)
@@ -18,7 +17,7 @@ const getRandomItems = <T,>(arr: T[], min = 1, max = 5): T[] => {
   return shuffled.slice(0, count);
 };
 
-interface PersonInfo {
+export interface PersonInfo {
   // id: number;
   name: string;
   nationalId: string;
@@ -66,26 +65,49 @@ export const columns = [
   {
     header: "Age",
     accessorKey: "age",
+    footer: ({ table }) => {
+      const ages: number[] = [];
+      table.getFilteredRowModel().rows.forEach((row) => {
+        const value = row.getValue("age");
+        value && ages.push(value);
+      });
+      return `Avg: ${(ages.reduce((a, b) => a + b, 0) / ages.length).toFixed(2)}`;
+    },
   },
-  {
-    header: "Force sensitive",
-    accessorKey: "forceSensitive",
-  },
+
+  columnHelper.accessor("forceSensitive", {
+    cell: (info) => {
+      const value = info.getValue();
+      return (
+        <Tag
+          size="small"
+          variant="moderate"
+          data-color={value ? "accent" : "warning"}
+        >{`${value ? "Yes" : "No"}`}</Tag>
+      );
+    },
+    footer: ({ table }) => {
+      const totals = new Map();
+      totals.set("Yes", 0);
+      totals.set("No", 0);
+      table.getFilteredRowModel().rows.forEach((row) => {
+        const value = row.getValue("forceSensitive");
+        totals.set(
+          value ? "Yes" : "No",
+          (totals.get(value ? "Yes" : "No") ?? 0) + 1,
+        );
+      });
+      return `Yes: ${totals.get("Yes")}, No: ${totals.get("No")}`;
+    },
+  }),
   {
     header: "Home system",
     accessorKey: "homeSystem",
   },
-  columnHelper.accessor("skills", {
-    cell: (info) => (
-      <HStack gap="space-8">
-        {info.getValue().map((skill) => (
-          <Tag key={skill} size="small">
-            {skill}
-          </Tag>
-        ))}
-      </HStack>
-    ),
-  }),
+  {
+    header: "Skills",
+    accessorKey: "skills",
+  },
 ];
 
 export const homeSystemOptions = [

package/src/data/table/index.tsx

@@ -7,6 +7,7 @@ export {
   DataTableTr,
   DataTableTh,
   DataTableTd,
+  DataTableTfoot,
 } from "./root/DataTableRoot";
 export type {
   DataTableProps,
@@ -16,4 +17,5 @@ export type {
   DataTableTrProps,
   DataTableThProps,
   DataTableTdProps,
+  DataTableTfootProps,
 } from "./root/DataTableRoot";

package/src/data/table/root/DataTableRoot.tsx

@@ -9,6 +9,10 @@ import {
   type DataTableTbodyProps,
 } from "../tbody/DataTableTbody";
 import { DataTableTd, type DataTableTdProps } from "../td/DataTableTd";
+import {
+  DataTableTfoot,
+  type DataTableTfootProps,
+} from "../tfoot/DataTableTfoot";
 import { DataTableTh, type DataTableThProps } from "../th/DataTableTh";
 import {
   DataTableThead,
@@ -101,6 +105,18 @@ interface DataTableRootComponent extends React.ForwardRefExoticComponent<
    * ```
    */
   Td: typeof DataTableTd;
+  /**
+   * @see 🏷️ {@link DataTableTfootProps}
+   * @example
+   * ```jsx
+   * <DataTable>
+   *   <DataTable.Tfoot>
+   *     ...
+   *   </DataTable.Tfoot>
+   * </DataTable>
+   * ```
+   */
+  Tfoot: typeof DataTableTfoot;
 }
 
 const DataTable = forwardRef<HTMLTableElement, DataTableProps>(
@@ -123,6 +139,7 @@ DataTable.Tbody = DataTableTbody;
 DataTable.Th = DataTableTh;
 DataTable.Tr = DataTableTr;
 DataTable.Td = DataTableTd;
+DataTable.Tfoot = DataTableTfoot;
 
 export {
   DataTable,
@@ -132,6 +149,7 @@ export {
   DataTableTh,
   DataTableThead,
   DataTableTr,
+  DataTableTfoot,
 };
 export default DataTable;
 export type {
@@ -142,4 +160,5 @@ export type {
   DataTableThProps,
   DataTableTheadProps,
   DataTableTrProps,
+  DataTableTfootProps,
 };

package/src/data/table/tfoot/DataTableTfoot.tsx

@@ -0,0 +1,21 @@
+import React, { forwardRef } from "react";
+import { cl } from "../../../utils/helpers";
+
+type DataTableTfootProps = React.HTMLAttributes<HTMLTableSectionElement>;
+
+const DataTableTfoot = forwardRef<HTMLTableSectionElement, DataTableTfootProps>(
+  ({ className, children, ...rest }, forwardedRef) => {
+    return (
+      <tfoot
+        {...rest}
+        ref={forwardedRef}
+        className={cl("aksel-data-table__tfoot", className)}
+      >
+        {children}
+      </tfoot>
+    );
+  },
+);
+
+export { DataTableTfoot };
+export type { DataTableTfootProps };

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

@@ -1,64 +1,101 @@
 import React, { forwardRef } from "react";
-import {
-  CaretLeftRightIcon,
-  PushPinFillIcon,
-  PushPinIcon,
-} from "@navikt/aksel-icons";
-import { Button } from "../../../button";
+import { FunnelIcon, SortDownIcon, SortUpIcon } from "@navikt/aksel-icons";
+import { HStack, Spacer } from "../../../layout/stack";
+import { ActionMenu } from "../../../overlays/action-menu";
 import { cl } from "../../../utils/helpers";
+import { DataTableThActions } from "./DataTableThActions";
+import { DataTableThSortHandle } from "./DataTableThSortHandle";
 
 type DataTableThProps = React.HTMLAttributes<HTMLTableCellElement> & {
   resizeHandler?: React.MouseEventHandler<HTMLButtonElement>;
-  isPinned?: boolean;
-  pinningHandler?: React.MouseEventHandler<HTMLButtonElement>;
   size?: number;
+  sortDirection?: "asc" | "desc" | "none" | false;
+  onSortChange?: (direction: "asc" | "desc" | "none", event: Event) => void;
+  render?: {
+    filterMenu?: {
+      title: string;
+      content: React.ReactNode;
+    };
+  };
 };
 
+/**
+ * TODO:
+ * - Plan for pinning: Move it into "settings" dialog like here: https://cloudscape.design/examples/react/table.html
+ */
 const DataTableTh = forwardRef<HTMLTableCellElement, DataTableThProps>(
   (
     {
       className,
       children,
       resizeHandler,
-      isPinned = false,
-      pinningHandler,
       size,
+      sortDirection,
+      onSortChange,
+      style,
+      render,
       ...rest
     },
     forwardedRef,
   ) => {
+    const { filterMenu } = render || {};
+
     return (
       <th
         {...rest}
         ref={forwardedRef}
         className={cl("aksel-data-table__th", className)}
-        style={{ width: size }}
+        style={{ width: size, ...style }}
       >
-        {children}
-        {pinningHandler && (
-          <Button
-            onClick={pinningHandler}
-            size="small"
-            variant="secondary"
-            icon={
-              isPinned ? (
-                <PushPinFillIcon aria-hidden title="Fest kolonne" />
-              ) : (
-                <PushPinIcon aria-hidden title="Løstne kolonne" />
-              )
-            }
+        <HStack align="center" gap="space-8" wrap={false}>
+          <div className="aksel-data-table__th-content">{children}</div>
+          <DataTableThSortHandle
+            sortDirection={sortDirection}
+            onSortChange={onSortChange}
           />
-        )}
+          <Spacer />
+
+          <DataTableThActions>
+            {/* TODO: onSortChange just rotates between the three states now */}
+            {/* TODO: Sorting texts do not handle different data-types now */}
+            {sortDirection && (
+              <ActionMenu.Group label="Sortering">
+                <ActionMenu.Item
+                  onSelect={(event) => onSortChange?.("desc", event)}
+                  icon={<SortUpIcon aria-hidden />}
+                >
+                  {sortDirection === "desc" ? "Fjern sortering" : "A-Z"}
+                </ActionMenu.Item>
+                <ActionMenu.Item
+                  onSelect={(event) => onSortChange?.("asc", event)}
+                  icon={<SortDownIcon aria-hidden />}
+                >
+                  {sortDirection === "asc" ? "Fjern sortering" : "Z-A"}
+                </ActionMenu.Item>
+              </ActionMenu.Group>
+            )}
+            {filterMenu && (
+              <ActionMenu.Group label="Filter">
+                <ActionMenu.Sub>
+                  <ActionMenu.SubTrigger icon={<FunnelIcon aria-hidden />}>
+                    {filterMenu.title}
+                  </ActionMenu.SubTrigger>
+                  <ActionMenu.SubContent>
+                    {/* TODO: ActionMenu stops tab from working, so user cant tab "into" filter now even when wrapper has focus */}
+                    {filterMenu.content}
+                  </ActionMenu.SubContent>
+                </ActionMenu.Sub>
+              </ActionMenu.Group>
+            )}
+          </DataTableThActions>
+        </HStack>
+
         {resizeHandler && (
-          <Button
+          <button
             onMouseDown={resizeHandler}
             onMouseUp={resizeHandler}
             className={cl("aksel-data-table__th-resize-handle")}
-            size="small"
-            variant="secondary"
-            icon={
-              <CaretLeftRightIcon aria-hidden title="Endre kolonnestørrelse" />
-            }
+            data-color="neutral"
           />
         )}
       </th>

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

@@ -0,0 +1,32 @@
+import React from "react";
+import { MenuElipsisVerticalIcon } from "@navikt/aksel-icons";
+import { Button } from "../../../button";
+import { ActionMenu } from "../../../overlays/action-menu";
+
+function DataTableThActions({ children }: { children?: React.ReactNode }) {
+  const [open, setOpen] = React.useState(false);
+  /* TODO: Fix this */
+  // @ts-expect-error Temp hack to hide when no children present
+  if (!children || !children.filter(Boolean).length) {
+    return null;
+  }
+
+  return (
+    <ActionMenu open={open} onOpenChange={setOpen}>
+      <ActionMenu.Trigger>
+        <Button
+          data-color="neutral"
+          variant="tertiary"
+          size="small"
+          icon={<MenuElipsisVerticalIcon title="Åpne kolonnemeny" />}
+          onClick={() => setOpen(!open)}
+          data-expanded={open}
+          className="aksel-data-table__th-action-button"
+        />
+      </ActionMenu.Trigger>
+      <ActionMenu.Content>{children}</ActionMenu.Content>
+    </ActionMenu>
+  );
+}
+
+export { DataTableThActions };

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/expansion-card/ExpansionCard.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useRef } from "react";
+import React, { forwardRef } from "react";
 import type { AkselColor } from "../types";
 import type { OverridableComponent } from "../utils-external";
 import { cl } from "../utils/helpers";
@@ -19,10 +19,9 @@ import {
 } from "./ExpansionCardTitle";
 import { ExpansionCardContext } from "./context";
 
-interface ExpansionCardComponent
-  extends React.ForwardRefExoticComponent<
-    ExpansionCardProps & React.RefAttributes<HTMLDivElement>
-  > {
+interface ExpansionCardComponent extends React.ForwardRefExoticComponent<
+  ExpansionCardProps & React.RefAttributes<HTMLDivElement>
+> {
   /**
    * @see 🏷️ {@link ExpansionCardHeaderProps}
    */
@@ -48,20 +47,23 @@ interface ExpansionCardComponent
   >;
 }
 
-interface ExpansionCardCommonProps
-  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onToggle"> {
+interface ExpansionCardCommonProps extends Omit<
+  React.HTMLAttributes<HTMLDivElement>,
+  "onToggle"
+> {
   children: React.ReactNode;
   /**
-   * Callback for when Card is toggled open/closed
+   * Callback for when Card is opened/closed.
    */
   onToggle?: (open: boolean) => void;
   /**
-   * Controlled open-state
-   * Using this removes automatic control of open-state
+   * Controlled open-state.
+   *
+   * Using this removes automatic control of open-state.
    */
   open?: boolean;
   /**
-   * Defaults to open if not controlled
+   * The open state when initially rendered. Use when you do not need to control the open state.
    * @default false
    */
   defaultOpen?: boolean;
@@ -102,7 +104,7 @@ export type ExpansionCardProps = ExpansionCardCommonProps &
  *
  * @example
  * ```jsx
- * <ExpansionCard aria-label="default-demo">
+ * <ExpansionCard aria-label="Utbetaling av sykepenger">
  *   <ExpansionCard.Header>
  *     <ExpansionCard.Title>Utbetaling av sykepenger</ExpansionCard.Title>
  *   </ExpansionCard.Header>
@@ -125,14 +127,9 @@ export const ExpansionCard = forwardRef<HTMLDivElement, ExpansionCardProps>(
     },
     ref,
   ) => {
-    const shouldFade = useRef<boolean>(!(Boolean(open) || defaultOpen));
-
     const [_open, _setOpen] = useControllableState({
       value: open,
-      onChange: (newValue) => {
-        onToggle?.(newValue);
-        shouldFade.current = true;
-      },
+      onChange: onToggle,
       defaultValue: defaultOpen,
     });
 
@@ -151,9 +148,6 @@ export const ExpansionCard = forwardRef<HTMLDivElement, ExpansionCardProps>(
             "aksel-expansioncard",
             className,
             `aksel-expansioncard--${size}`,
-            {
-              "aksel-expansioncard--no-animation": !shouldFade.current,
-            },
           )}
           ref={ref}
         />

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;