@navikt/ds-react 8.6.0 → 8.8.0

package/src/data/drag-and-drop/root/DataDragAndDropRoot.tsx

@@ -0,0 +1,54 @@
+import React, { forwardRef } from "react";
+import DataDragAndDropItem, {
+  DataDragAndDropItemProps,
+} from "../item/DataDragAndDropItem";
+import { DataDragAndDropProvider } from "./DataDragAndDrop.context";
+
+interface DataDragAndDropProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: any[];
+  setItems: React.Dispatch<React.SetStateAction<any[]>>;
+}
+
+interface DataDragAndDropRootComponent extends React.ForwardRefExoticComponent<
+  DataDragAndDropProps & React.RefAttributes<HTMLDivElement>
+> {
+  /**
+   * @see 🏷️ {@link DataDragAndDropItemProps}
+   * * @example
+   * ```jsx
+   * <DragAndDrop>
+   *   <DragAndDrop.Item id="1" index={0}>
+   *     ...
+   *   </DragAndDrop.Item>
+   * </DragAndDrop>
+   * ```
+   */
+  Item: typeof DataDragAndDropItem;
+}
+
+/**
+ * TODO
+ * setItems on root
+ * state : active element
+ * pointer over listener / state, onPointerEnter, onPointerLeave
+ * Overlay - Use floating component
+ * Keyboard navigation
+ * Handle - button, arrows also button
+ * UU - announce on drag start, item moved, drag end
+ */
+
+const DataDragAndDrop = forwardRef<HTMLDivElement, DataDragAndDropProps>(
+  ({ children }, forwardedRef) => {
+    return (
+      <DataDragAndDropProvider inputMethod={null}>
+        <div ref={forwardedRef}>{children}</div>
+      </DataDragAndDropProvider>
+    );
+  },
+) as DataDragAndDropRootComponent;
+
+DataDragAndDrop.Item = DataDragAndDropItem;
+
+export { DataDragAndDrop, DataDragAndDropItem };
+export default DataDragAndDrop;
+export type { DataDragAndDropItemProps, DataDragAndDropProps };

package/src/data/drag-and-drop-old/drag-handler/DataDragAndDropDragHandler.tsx

@@ -0,0 +1,104 @@
+import React from "react";
+import {
+  CaretDownCircleFillIcon,
+  CaretUpCircleFillIcon,
+  DragVerticalIcon,
+} from "@navikt/aksel-icons";
+import { Floating } from "../../../utils/components/floating/Floating";
+
+export interface DataDragAndDropDragHandlerProps {
+  /**
+   * Whether the drag handler is disabled
+   */
+  // disabled?: boolean;
+  /**
+   * Wether dragging is done by keyboard. Used to conditionally render drag indicators.
+   */
+  keyboardDragging?: boolean;
+  /**
+   * Handle ref is forwarded to the button element serving as drag handle.
+   */
+  handleRef: React.Ref<HTMLDivElement>;
+  // Just for testing purposes, to render an alternative drag handler
+  alt?: boolean;
+}
+
+/**
+ * DataDragAndDropDragHandler
+ *
+ * A button component that serves as a drag handle for drag and drop operations.
+ * Can be used to initiate dragging of elements in a data table or list.
+ */
+export const DataDragAndDropDragHandler = React.forwardRef<
+  HTMLButtonElement,
+  DataDragAndDropDragHandlerProps
+>(({ keyboardDragging, handleRef, alt }) => {
+  if (alt) {
+    return (
+      <div className="aksel-data-drag-and-drop__drag-handler__alt">
+        {keyboardDragging && (
+          <span
+            className="aksel-data-drag-and-drop__drag-handler__arrow"
+            data-direction="up"
+          >
+            <CaretUpCircleFillIcon aria-hidden fontSize="1.2rem" />
+          </span>
+        )}
+        <div
+          ref={handleRef}
+          className="aksel-data-drag-and-drop__drag-handler__button"
+        >
+          <DragVerticalIcon
+            aria-hidden
+            title="Dra for å flytte"
+            fontSize="1.5rem"
+          />
+        </div>
+        {keyboardDragging && (
+          <span
+            className="aksel-data-drag-and-drop__drag-handler__arrow"
+            data-direction="down"
+          >
+            <CaretDownCircleFillIcon aria-hidden fontSize="1.2rem" />
+          </span>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <Floating>
+      {keyboardDragging && (
+        <Floating.Content
+          side="top"
+          avoidCollisions={false}
+          updatePositionStrategy="always"
+          className="aksel-data-drag-and-drop__drag-handler__arrow"
+        >
+          <CaretUpCircleFillIcon aria-hidden fontSize="1.2rem" />
+        </Floating.Content>
+      )}
+      <Floating.Anchor asChild>
+        <div
+          ref={handleRef}
+          className="aksel-data-drag-and-drop__drag-handler__button"
+        >
+          <DragVerticalIcon
+            aria-hidden
+            title="Dra for å flytte"
+            fontSize="1.5rem"
+          />
+        </div>
+      </Floating.Anchor>
+      {keyboardDragging && (
+        <Floating.Content
+          avoidCollisions={false}
+          updatePositionStrategy="always"
+          className="aksel-data-drag-and-drop__drag-handler__arrow"
+        >
+          <CaretDownCircleFillIcon aria-hidden fontSize="1.2rem" />
+        </Floating.Content>
+      )}
+    </Floating>
+  );
+});

package/src/data/drag-and-drop-old/item/DataDragAndDropItem.tsx

@@ -0,0 +1,74 @@
+import { useSortable } from "@dnd-kit/react/sortable";
+import React, { useRef } from "react";
+import { HStack } from "../../../primitives/stack";
+import { cl } from "../../../utils/helpers";
+import { useMergeRefs } from "../../../utils/hooks";
+import { DataDragAndDropDragHandler } from "../drag-handler/DataDragAndDropDragHandler";
+import { DataDragAndDropContext } from "../root/DataDragAndDrop.context";
+
+interface DataDragAndDropItemProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+  /**
+   * Unique id
+   */
+  id: string;
+  /**
+   * Index of the item being dragged
+   */
+  index: number;
+}
+
+/**
+ * TODO
+ *
+ * @see 🏷️ {@link DataDragAndDropItemProps}
+ * @example
+ * ```tsx
+ * <DragAndDrop.Item numOfSelectedRows={selectedRows.length} onClear={handleClear}>
+ *   TODO
+ * </DragAndDrop.Item>
+ * ```
+ */
+const DataDragAndDropItem = React.forwardRef<
+  HTMLDivElement,
+  DataDragAndDropItemProps
+>(({ children, id, index, className, ...rest }, forwardedRef) => {
+  const handleRef = useRef<HTMLDivElement>(null);
+  const { ref, isDragging, isDropTarget } = useSortable({
+    id,
+    index,
+    handle: handleRef,
+  });
+  const mergedRef = useMergeRefs(ref, forwardedRef);
+  const context = React.useContext(DataDragAndDropContext);
+  const mouseDragging = isDragging && context?.inputMethod === "mouse";
+  const mouseDropTarget = isDropTarget && context?.inputMethod === "mouse";
+  const keyboardDragging = isDragging && context?.inputMethod === "keyboard";
+
+  return (
+    <HStack gap="space-8" align="center" wrap={false} asChild>
+      {/* TODO Should this be a <li>? */}
+      <div
+        ref={mergedRef}
+        {...rest}
+        className={cl("aksel-data-table__drag-and-drop-item", className)}
+        data-dragging={isDragging}
+        data-mouse-dragging={mouseDragging}
+        data-keyboard-dragging={keyboardDragging}
+        data-drop-target={mouseDropTarget}
+        tabIndex={-1}
+      >
+        <DataDragAndDropDragHandler
+          handleRef={handleRef}
+          keyboardDragging={keyboardDragging}
+          alt
+        />
+        <div>{children}</div>
+      </div>
+    </HStack>
+  );
+});
+
+export default DataDragAndDropItem;
+export { DataDragAndDropItem };
+export type { DataDragAndDropItemProps };

package/src/data/drag-and-drop-old/root/DataDragAndDrop.context.tsx

@@ -0,0 +1,11 @@
+import { createContext } from "react";
+
+interface DataDragAndDropContextType {
+  inputMethod: "mouse" | "keyboard" | null;
+  // setInputMethod: (method: "mouse" | "keyboard" | null) => void;
+  // setItems: React.Dispatch<React.SetStateAction<any[]>>;
+}
+
+export const DataDragAndDropContext = createContext<
+  DataDragAndDropContextType | undefined
+>(undefined);

package/src/data/drag-and-drop-old/root/DataDragAndDropRoot.tsx

@@ -0,0 +1,96 @@
+import { DragDropProvider, DragOverlay } from "@dnd-kit/react";
+import { isSortable } from "@dnd-kit/react/sortable";
+import React, { forwardRef, isValidElement } from "react";
+import { VStack } from "../../../primitives/stack";
+import DataDragAndDropItem, {
+  DataDragAndDropItemProps,
+} from "../item/DataDragAndDropItem";
+import { DataDragAndDropContext } from "./DataDragAndDrop.context";
+
+interface DataDragAndDropProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: any[];
+  setItems: React.Dispatch<React.SetStateAction<any[]>>;
+}
+
+interface DataDragAndDropRootComponent extends React.ForwardRefExoticComponent<
+  DataDragAndDropProps & React.RefAttributes<HTMLDivElement>
+> {
+  /**
+   * @see 🏷️ {@link DataDragAndDropItemProps}
+   * * @example
+   * ```jsx
+   * <DragAndDrop>
+   *   <DragAndDrop.Item id="1" index={0}>
+   *     ...
+   *   </DragAndDrop.Item>
+   * </DragAndDrop>
+   * ```
+   */
+  Item: typeof DataDragAndDropItem;
+}
+
+const DataDragAndDrop = forwardRef<HTMLDivElement, DataDragAndDropProps>(
+  ({ setItems, children, ...rest }, forwardedRef) => {
+    const [inputMethod, setInputMethod] = React.useState<
+      "mouse" | "keyboard" | null
+    >(null);
+
+    const setItemOrder = (initalIndex: number, targetIndex: number) => {
+      setItems((items) => {
+        const newItems = [...items];
+        const [movedItem] = newItems.splice(initalIndex, 1);
+        newItems.splice(targetIndex, 0, movedItem);
+        return newItems;
+      });
+    };
+
+    return (
+      <DataDragAndDropContext.Provider value={{ inputMethod }}>
+        <DragDropProvider
+          // TODO Look into overriding default keybinds, might eliminate context need
+          onBeforeDragStart={(event) =>
+            setInputMethod(
+              event.operation.activatorEvent?.type === "pointerdown"
+                ? "mouse"
+                : "keyboard",
+            )
+          }
+          onDragOver={(event) => {
+            if (event.operation.activatorEvent?.type === "pointerdown") {
+              // Prevents items to rearrange while dragging with mouse, but allows keyboard dragging to work as intended
+              event.preventDefault();
+            }
+          }}
+          onDragEnd={(event) => {
+            const { source, target } = event.operation;
+            if (!isSortable(source) || !isSortable(target)) return;
+            setItemOrder(source.initialIndex, target.index);
+          }}
+        >
+          <VStack asChild gap="space-12">
+            <div {...rest} ref={forwardedRef}>
+              {children}
+            </div>
+          </VStack>
+          <DragOverlay dropAnimation={null}>
+            {(source) => {
+              // Overlay not needed and causes glitching when using keyboard
+              if (inputMethod === "keyboard") return null;
+              if (!isSortable(source)) return null;
+              if (isValidElement(children[source.initialIndex])) {
+                return children[source.initialIndex];
+              }
+              return null;
+            }}
+          </DragOverlay>
+        </DragDropProvider>
+      </DataDragAndDropContext.Provider>
+    );
+  },
+) as DataDragAndDropRootComponent;
+
+DataDragAndDrop.Item = DataDragAndDropItem;
+
+export { DataDragAndDrop, DataDragAndDropItem };
+export default DataDragAndDrop;
+export type { DataDragAndDropItemProps, DataDragAndDropProps };

package/src/data/table/empty-state/DataTableEmptyState.tsx

@@ -0,0 +1,26 @@
+import React, { forwardRef } from "react";
+import { cl } from "../../../utils/helpers";
+
+type DataTableEmptyStateProps = React.HTMLAttributes<HTMLDivElement>;
+
+const DataTableEmptyState = forwardRef<
+  HTMLDivElement,
+  DataTableEmptyStateProps
+>(({ className, children, ...rest }, forwardedRef) => {
+  return (
+    <tr>
+      <td colSpan={999}>
+        <div
+          {...rest}
+          ref={forwardedRef}
+          className={cl("aksel-data-table__empty-state", className)}
+        >
+          {children}
+        </div>
+      </td>
+    </tr>
+  );
+});
+
+export { DataTableEmptyState };
+export type { DataTableEmptyStateProps };

package/src/data/table/helpers/table-focus.ts

@@ -34,7 +34,11 @@ function restoreTabIndex(cell: Element): void {
  */
 function findFocusableElementInCell(cell: Element): HTMLElement | null {
   const el = cell as HTMLElement | null;
-  if (!el || isHiddenElement(el)) {
+  if (
+    !el ||
+    isHiddenElement(el) ||
+    el.hasAttribute("data-block-keyboard-nav")
+  ) {
     return null;
   }
 
@@ -48,6 +52,11 @@ function findFocusableElementInCell(cell: Element): HTMLElement | null {
 
   for (let i = 0; i < focusables.length; i += 1) {
     const focusable = focusables[i] as HTMLElement;
+    /* Ignore element if it has [data-block-keyboard-nav="true"] */
+    if (focusable.hasAttribute("data-block-keyboard-nav")) {
+      continue;
+    }
+
     if (!isHiddenElement(focusable) && !isDisabledElement(focusable)) {
       return focusable;
     }

package/src/data/table/helpers/table-keyboard.ts

@@ -68,7 +68,7 @@ function shouldBlockNavigation(event: KeyboardEvent): boolean {
     return true;
   }
 
-  /* If not any of these elements, assueme "safe" to navigate */
+  /* If not any of these elements, assume "safe" to navigate */
   const editable = el.closest(
     'input, textarea, select, [contenteditable="true"]',
   );

package/src/data/table/loading-state/DataTableLoadingState.tsx

@@ -0,0 +1,26 @@
+import React, { forwardRef } from "react";
+import { cl } from "../../../utils/helpers";
+
+type DataTableLoadingStateProps = React.HTMLAttributes<HTMLDivElement>;
+
+const DataTableLoadingState = forwardRef<
+  HTMLDivElement,
+  DataTableLoadingStateProps
+>(({ className, children, ...rest }, forwardedRef) => {
+  return (
+    <tr>
+      <td colSpan={999}>
+        <div
+          {...rest}
+          ref={forwardedRef}
+          className={cl("aksel-data-table__loading-state", className)}
+        >
+          {children}
+        </div>
+      </td>
+    </tr>
+  );
+});
+
+export { DataTableLoadingState };
+export type { DataTableLoadingStateProps };

package/src/data/table/root/DataTable.types.ts

@@ -0,0 +1,16 @@
+type ColumnDefinition<T> = {
+  id?: string;
+  header: React.ReactNode;
+  width?: number | string;
+  minWidth?: number | string;
+  maxWidth?: number | string;
+  /* isRowHeader?: boolean; */
+  /**
+   * TODO: Could add table/row/cell context into callback
+   */
+  cell: (item: T) => React.ReactNode;
+};
+
+type ColumnDefinitions<T> = ColumnDefinition<T>[];
+
+export type { ColumnDefinition, ColumnDefinitions };

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

@@ -0,0 +1,182 @@
+import React, { forwardRef, useState } from "react";
+import { Checkbox } from "../../../form/checkbox";
+import { cl } from "../../../utils/helpers";
+import { useMergeRefs } from "../../../utils/hooks";
+import { DataTableTbody } from "../tbody/DataTableTbody";
+import { DataTableTd } from "../td/DataTableTd";
+import { DataTableTh } from "../th/DataTableTh";
+import { DataTableThead } from "../thead/DataTableThead";
+import { DataTableTr } from "../tr/DataTableTr";
+import type { ColumnDefinitions } from "./DataTable.types";
+import { DataTableContextProvider } from "./DataTableRoot.context";
+import { useTableKeyboardNav } from "./useTableKeyboardNav";
+import { type SelectionProps, useTableSelection } from "./useTableSelection";
+
+interface DataTableProps<T>
+  extends React.HTMLAttributes<HTMLTableElement>, SelectionProps {
+  children?: never;
+  /**
+   * Controls vertical cell padding.
+   * @default "normal"
+   */
+  rowDensity?: "condensed" | "normal" | "spacious";
+  /**
+   * Zebra striped table
+   * @default false
+   */
+  zebraStripes?: boolean;
+  /**
+   * Truncate content in cells and show ellipsis for overflowed text.
+   *
+   * **NB:** When using `layout="auto"`, you have to manually set a `maxWidth` on columns that should be truncated.
+   * @default true
+   */
+  truncateContent?: boolean; // TODO: Consider making this default false when layout=auto, and maybe disallow it but add a wrap prop on the td-comp.
+  /**
+   * Enables keyboard navigation for table rows and cells.
+   * @default false
+   */
+  withKeyboardNav?: boolean;
+  /**
+   * Custom callback to determine if navigation should be blocked.
+   * Called before default blocking logic.
+   * Requires `withKeyboardNav` to be `true`.
+   */
+  shouldBlockNavigation?: (event: KeyboardEvent) => boolean;
+  /**
+   * Controls table layout.
+   *
+   * ### fixed
+   * Gives you full control of column widths. This is required for resizable columns.
+   *
+   * ### auto
+   * Makes the columns resize automatically based on the content.
+   * The table will take up at least 100% of available width.
+   *
+   * **NB:** When using this with `truncateContent`, you have to manually
+   * set a `contentMaxWidth` on cells that should be truncated.
+   * @default "fixed"
+   */
+  layout?: "fixed" | "auto";
+  /**
+   *
+   */
+  columnDefinitions: ColumnDefinitions<T>;
+  data: (T & { id: string | number })[];
+}
+
+function DataTableAutoInner<T>(
+  {
+    className,
+    rowDensity = "normal",
+    withKeyboardNav = false,
+    zebraStripes = false,
+    truncateContent = true,
+    shouldBlockNavigation,
+    layout = "fixed",
+    selectionMode: selectionModeProp = "none",
+    selectedKeys,
+    defaultSelectedKeys,
+    onSelectionChange,
+    disabledKeys = [],
+    data,
+    columnDefinitions,
+    ...rest
+  }: DataTableProps<T>,
+  forwardedRef: React.ForwardedRef<HTMLTableElement>,
+) {
+  const [tableRef, setTableRef] = useState<HTMLTableElement | null>(null);
+  const mergedRef = useMergeRefs(forwardedRef, setTableRef);
+
+  const { tabIndex } = useTableKeyboardNav(tableRef, {
+    enabled: withKeyboardNav,
+    shouldBlockNavigation,
+  });
+
+  const { getTheadCheckboxProps, selectionMode, getRowCheckboxProps } =
+    useTableSelection({
+      selectionMode: selectionModeProp,
+      selectedKeys,
+      defaultSelectedKeys,
+      onSelectionChange,
+      disabledKeys,
+      data,
+    });
+
+  return (
+    <DataTableContextProvider layout={layout} withKeyboardNav={withKeyboardNav}>
+      <div className="aksel-data-table__border-wrapper">
+        <div className="aksel-data-table__scroll-wrapper">
+          <table
+            {...rest}
+            ref={mergedRef}
+            className={cl("aksel-data-table", className)}
+            data-zebra-stripes={zebraStripes}
+            data-truncate-content={truncateContent}
+            data-density={rowDensity}
+            data-layout={layout}
+            tabIndex={tabIndex}
+          >
+            <DataTableThead>
+              <DataTableTr>
+                {getTheadCheckboxProps && (
+                  <DataTableTd align="center" width="60px">
+                    <Checkbox {...getTheadCheckboxProps()} />
+                  </DataTableTd>
+                )}
+                {columnDefinitions.map((colDef, colDefIndex) => {
+                  return (
+                    <DataTableTh
+                      maxWidth="400px"
+                      minWidth="100px"
+                      defaultWidth="100%"
+                      textAlign="left"
+                      key={colDef.id || colDefIndex}
+                    >
+                      {colDef.header}
+                    </DataTableTh>
+                  );
+                })}
+              </DataTableTr>
+            </DataTableThead>
+            <DataTableTbody>
+              {data.map((rowData, rowIndex) => {
+                return (
+                  <DataTableTr
+                    key={
+                      rowIndex /* TODO: Should be more flexible to allow user to define the key? */
+                    }
+                  >
+                    {selectionMode !== "none" && getRowCheckboxProps && (
+                      <DataTableTd align="center" width="60px">
+                        <Checkbox {...getRowCheckboxProps(rowData.id)} />
+                      </DataTableTd>
+                    )}
+                    {columnDefinitions.map((colDef, colDefIndex) => {
+                      return (
+                        <DataTableTd
+                          textAlign="left"
+                          key={colDef.id || colDefIndex}
+                        >
+                          {colDef.cell(rowData)}
+                        </DataTableTd>
+                      );
+                    })}
+                  </DataTableTr>
+                );
+              })}
+            </DataTableTbody>
+          </table>
+        </div>
+      </div>
+    </DataTableContextProvider>
+  );
+}
+
+const DataTableAuto = forwardRef(DataTableAutoInner) as <T>(
+  props: DataTableProps<T> & React.RefAttributes<HTMLTableElement>,
+) => React.ReactElement | null;
+
+export { DataTableAuto };
+export type { DataTableProps };
+export default DataTableAuto;

package/src/data/table/root/DataTableRoot.context.ts

@@ -0,0 +1,14 @@
+import { createStrictContext } from "../../../utils/helpers";
+
+type DataTableContextProps = {
+  layout: "fixed" | "auto";
+  withKeyboardNav: boolean;
+};
+
+const { Provider: DataTableContextProvider, useContext: useDataTableContext } =
+  createStrictContext<DataTableContextProps>({
+    name: "DataTableContext",
+    errorMessage: "useDataTableContext must be used within DataTable",
+  });
+
+export { DataTableContextProvider, useDataTableContext };