@navikt/ds-react 8.7.0 → 8.8.0

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

@@ -0,0 +1,63 @@
+import React from "react";
+import {
+  CaretDownCircleFillIcon,
+  CaretUpCircleFillIcon,
+  DragVerticalIcon,
+} from "@navikt/aksel-icons";
+
+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>;
+}
+
+/**
+ * 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 }) => {
+  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>
+  );
+});

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

@@ -1,14 +1,6 @@
-import { useSortable } from "@dnd-kit/react/sortable";
-import React, { useRef } from "react";
-import {
-  CaretDownCircleFillIcon,
-  CaretUpCircleFillIcon,
-  DragVerticalIcon,
-} from "@navikt/aksel-icons";
+import React from "react";
 import { HStack } from "../../../primitives/stack";
 import { cl } from "../../../utils/helpers";
-import { useMergeRefs } from "../../../utils/hooks";
-import { DataDragAndDropContext } from "../root/DataDragAndDrop.context";
 
 interface DataDragAndDropItemProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
@@ -36,60 +28,21 @@ interface DataDragAndDropItemProps extends React.HTMLAttributes<HTMLDivElement>
 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";
+>(({ children, className, ...rest }, forwardedRef) => {
+  // const context = useDataDragAndDropContext();
 
   return (
     <HStack gap="space-8" align="center" wrap={false} asChild>
       {/* TODO Should this be a <li>? */}
       <div
-        ref={mergedRef}
+        ref={forwardedRef}
         {...rest}
         className={cl("aksel-data-table__drag-and-drop-item", className)}
-        data-dragging={isDragging}
+        /*data-dragging={isDragging}
         data-mouse-dragging={mouseDragging}
         data-keyboard-dragging={keyboardDragging}
-        data-drop-target={mouseDropTarget}
-        tabIndex={-1}
+        data-drop-target={mouseDropTarget}*/
       >
-        <div
-          className="aksel-data-table__drag-and-drop-item-drag-handler"
-          ref={handleRef}
-          // TODO Consider moving this to its own component
-          // TODO Perhaps make it a button where clicking also enables arrow icons?
-        >
-          {keyboardDragging && (
-            <span
-              className="aksel-data-table__drag-and-drop-item-keyboard-drag-icon"
-              data-direction="up"
-            >
-              <CaretUpCircleFillIcon aria-hidden fontSize="1.2rem" />
-            </span>
-          )}
-          <DragVerticalIcon
-            aria-hidden
-            title="Dra for å flytte"
-            fontSize="1.5rem"
-          />
-          {keyboardDragging && (
-            <span
-              className="aksel-data-table__drag-and-drop-item-keyboard-drag-icon"
-              data-direction="down"
-            >
-              <CaretDownCircleFillIcon aria-hidden fontSize="1.2rem" />
-            </span>
-          )}
-        </div>
         <div>{children}</div>
       </div>
     </HStack>

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

@@ -1,9 +1,14 @@
-import { createContext } from "react";
+import { createStrictContext } from "../../../utils/helpers";
 
 interface DataDragAndDropContextType {
   inputMethod: "mouse" | "keyboard" | null;
 }
 
-export const DataDragAndDropContext = createContext<
-  DataDragAndDropContextType | undefined
->(undefined);
+export const {
+  Provider: DataDragAndDropProvider,
+  useContext: useDataDragAndDropContext,
+} = createStrictContext<DataDragAndDropContextType | undefined>({
+  errorMessage:
+    "useDataDragAndDropContext must be used within a DataDragAndDropProvider",
+  name: "DataDragAndDropContext",
+});

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

@@ -1,19 +1,16 @@
-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 React, { forwardRef } from "react";
 import DataDragAndDropItem, {
   DataDragAndDropItemProps,
 } from "../item/DataDragAndDropItem";
-import { DataDragAndDropContext } from "./DataDragAndDrop.context";
+import { DataDragAndDropProvider } from "./DataDragAndDrop.context";
 
-interface DataDragAndDropProps extends React.HTMLAttributes<HTMLTableElement> {
+interface DataDragAndDropProps extends React.HTMLAttributes<HTMLDivElement> {
   children: any[];
   setItems: React.Dispatch<React.SetStateAction<any[]>>;
 }
 
 interface DataDragAndDropRootComponent extends React.ForwardRefExoticComponent<
-  DataDragAndDropProps & React.RefAttributes<HTMLTableElement>
+  DataDragAndDropProps & React.RefAttributes<HTMLDivElement>
 > {
   /**
    * @see 🏷️ {@link DataDragAndDropItemProps}
@@ -29,64 +26,23 @@ interface DataDragAndDropRootComponent extends React.ForwardRefExoticComponent<
   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;
-      });
-    };
+/**
+ * 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 (
-      <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) => {
-            if (event.operation.activatorEvent?.type === "pointerdown") {
-              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>
-            {(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>
+      <DataDragAndDropProvider inputMethod={null}>
+        <div ref={forwardedRef}>{children}</div>
+      </DataDragAndDropProvider>
     );
   },
 ) as DataDragAndDropRootComponent;

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

@@ -52,7 +52,6 @@ function getNavigationAction(event: KeyboardEvent): NavigationAction | null {
  * - Select arrow down/up for opening popup
  * - User is navigating inside multiline textarea
  * - contenteditable attrb is in use
- * - element has attribute data-block-keyboard-nav="true"
  */
 function shouldBlockNavigation(event: KeyboardEvent): boolean {
   const key = event.key;
@@ -71,7 +70,7 @@ function shouldBlockNavigation(event: KeyboardEvent): boolean {
 
   /* If not any of these elements, assume "safe" to navigate */
   const editable = el.closest(
-    'input, textarea, select, [contenteditable="true"], [data-block-keyboard-nav="true"]',
+    'input, textarea, select, [contenteditable="true"]',
   );
 
   if (!editable) {
@@ -93,10 +92,7 @@ function shouldBlockNavigation(event: KeyboardEvent): boolean {
     return false;
   }
 
-  return (
-    editable.hasAttribute("contenteditable") ||
-    editable.hasAttribute("data-block-keyboard-nav")
-  );
+  return editable.hasAttribute("contenteditable");
 }
 
 function shouldBlockInputArrow(input: HTMLInputElement, key: string): boolean {

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 };