@navikt/ds-react 8.6.0 → 8.7.0

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

@@ -0,0 +1,98 @@
+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<HTMLTableElement> {
+  children: any[];
+  setItems: React.Dispatch<React.SetStateAction<any[]>>;
+}
+
+interface DataDragAndDropRootComponent extends React.ForwardRefExoticComponent<
+  DataDragAndDropProps & React.RefAttributes<HTMLTableElement>
+> {
+  /**
+   * @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) => {
+            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>
+    );
+  },
+) as DataDragAndDropRootComponent;
+
+DataDragAndDrop.Item = DataDragAndDropItem;
+
+export { DataDragAndDrop, DataDragAndDropItem };
+export default DataDragAndDrop;
+export type { DataDragAndDropItemProps, DataDragAndDropProps };

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

@@ -52,6 +52,7 @@ 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;
@@ -68,9 +69,9 @@ 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"]',
+    'input, textarea, select, [contenteditable="true"], [data-block-keyboard-nav="true"]',
   );
 
   if (!editable) {
@@ -92,7 +93,10 @@ function shouldBlockNavigation(event: KeyboardEvent): boolean {
     return false;
   }
 
-  return editable.hasAttribute("contenteditable");
+  return (
+    editable.hasAttribute("contenteditable") ||
+    editable.hasAttribute("data-block-keyboard-nav")
+  );
 }
 
 function shouldBlockInputArrow(input: HTMLInputElement, key: string): boolean {

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

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

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

@@ -20,6 +20,7 @@ import {
   type DataTableTheadProps,
 } from "../thead/DataTableThead";
 import { DataTableTr, type DataTableTrProps } from "../tr/DataTableTr";
+import { DataTableContextProvider } from "./DataTableRoot.context";
 import { useTableKeyboardNav } from "./useTableKeyboardNav";
 
 interface DataTableProps extends React.HTMLAttributes<HTMLTableElement> {
@@ -193,20 +194,22 @@ const DataTable = forwardRef<HTMLTableElement, DataTableProps>(
     });
 
     return (
-      <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}
-          />
+      <DataTableContextProvider layout={layout}>
+        <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}
+            />
+          </div>
         </div>
-      </div>
+      </DataTableContextProvider>
     );
   },
 ) as DataTableRootComponent;

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

@@ -1,10 +1,14 @@
 import React, { forwardRef } from "react";
-import { FunnelIcon, SortDownIcon, SortUpIcon } from "@navikt/aksel-icons";
-import { ActionMenu } from "../../../action-menu";
-import { HStack, Spacer } from "../../../primitives/stack";
+import {
+  ArrowsUpDownIcon,
+  CaretLeftCircleFillIcon,
+  CaretRightCircleFillIcon,
+  SortDownIcon,
+  SortUpIcon,
+} from "@navikt/aksel-icons";
 import { cl } from "../../../utils/helpers";
-import { DataTableThActions } from "./DataTableThActions";
-import { DataTableThSortHandle } from "./DataTableThSortHandle";
+
+type SortDirection = "asc" | "desc" | "none";
 
 interface DataTableThProps extends React.HTMLAttributes<HTMLTableCellElement> {
   resizeHandler?: (
@@ -13,8 +17,22 @@ interface DataTableThProps extends React.HTMLAttributes<HTMLTableCellElement> {
       | React.TouchEvent<HTMLButtonElement>,
   ) => void;
   size?: number; // TODO: size should be required when resizeHandler is set
-  sortDirection?: "asc" | "desc" | "none" | false;
-  onSortChange?: (direction: "asc" | "desc" | "none", event: Event) => void;
+  /**
+   * Makes the column header sortable. The entire header cell content becomes
+   * a clickable button when true.
+   */
+  sortable?: boolean;
+  /**
+   * Current sort direction. Only relevant when `sortable` is true.
+   * Uses values matching the `aria-sort` attribute directly.
+   * @default "none"
+   */
+  sortDirection?: SortDirection;
+  /**
+   * Called when the user clicks the sortable header.
+   * The consumer is responsible for determining and setting the next sort state.
+   */
+  onSortClick?: (event: React.MouseEvent<HTMLElement>) => void;
   render?: {
     filterMenu?: {
       title: string;
@@ -26,8 +44,15 @@ interface DataTableThProps extends React.HTMLAttributes<HTMLTableCellElement> {
    */
   colSpan?: number;
   rowSpan?: number;
+  keyboardResizingHandler?: (size: number) => void;
 }
 
+const SORT_ICON: Record<SortDirection, React.ElementType | null> = {
+  asc: SortUpIcon,
+  desc: SortDownIcon,
+  none: ArrowsUpDownIcon,
+};
+
 /**
  * TODO:
  * - Plan for pinning: Move it into "settings" dialog like here: https://cloudscape.design/examples/react/table.html
@@ -39,79 +64,110 @@ const DataTableTh = forwardRef<HTMLTableCellElement, DataTableThProps>(
       children,
       resizeHandler,
       size,
-      sortDirection,
-      onSortChange,
+      sortable = false,
+      sortDirection = "none",
+      onSortClick,
       style,
-      render,
+      keyboardResizingHandler,
       ...rest
     },
     forwardedRef,
   ) => {
-    const { filterMenu } = render || {};
+    const [resizeHandlerActive, setResizeHandlerActive] = React.useState(false);
+    const [isOverflowing, setIsOverflowing] = React.useState(false);
+    const contentRef = React.useRef<HTMLDivElement>(null);
+
+    const keyDownHandler = (event: React.KeyboardEvent<HTMLButtonElement>) => {
+      if (keyboardResizingHandler) {
+        if (event.key === "Enter" || event.key === " ") {
+          event.preventDefault();
+          setResizeHandlerActive((active) => !active);
+        } else if (
+          resizeHandlerActive &&
+          (event.key === "ArrowLeft" || event.key === "ArrowRight")
+        ) {
+          event.preventDefault();
+          keyboardResizingHandler(event.key === "ArrowRight" ? 10 : -10);
+        }
+      }
+    };
+
+    const SortIcon = sortable ? SORT_ICON[sortDirection] : null;
 
     return (
       <th
         {...rest}
         ref={forwardedRef}
         className={cl("aksel-data-table__th", className)}
+        data-sortable={sortable}
         style={{ width: size, ...style }}
+        aria-sort={sortable ? getAriaSort(sortDirection) : undefined}
+        onPointerEnter={() => {
+          const el = contentRef.current;
+          setIsOverflowing(el ? el.scrollWidth > el.offsetWidth : false);
+          console.info("is overflowing", isOverflowing);
+        }}
+        onPointerLeave={() => setIsOverflowing(false)}
       >
-        <HStack align="center" gap="space-8" wrap={false}>
-          <div className="aksel-data-table__th-content">{children}</div>
-          {/* TODO: If the column is too narrow, the sort button will move when hovering b.c. the actions menu button slides in */}
-          <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>
+        {sortable ? (
+          <button
+            className="aksel-data-table__th-sort-button"
+            onClick={sortable ? onSortClick : undefined}
+          >
+            {SortIcon && (
+              <SortIcon
+                aria-hidden
+                data-sort-direction={sortDirection}
+                className="aksel-data-table__th-sort-icon"
+              />
             )}
-          </DataTableThActions>
-        </HStack>
+            <div ref={contentRef} className="aksel-data-table__th-content">
+              {children}
+            </div>
+          </button>
+        ) : (
+          <div ref={contentRef} className="aksel-data-table__th-content">
+            {children}
+          </div>
+        )}
 
         {resizeHandler && (
           <button
             // TODO: Should probably not be a button since it doesn't have onClick
             onMouseDown={resizeHandler}
             onTouchStart={resizeHandler}
+            onBlur={() => setResizeHandlerActive(false)}
             className="aksel-data-table__th-resize-handle"
-          />
+            data-active={resizeHandlerActive}
+            // TODO Very open to a better name for this
+            data-block-keyboard-nav
+            onKeyDown={keyDownHandler}
+          >
+            {resizeHandlerActive && (
+              <>
+                <span className="aksel-data-table__th-resize-handle-indicator aksel-data-table__th-resize-handle-indicator--start">
+                  <CaretLeftCircleFillIcon aria-hidden fontSize="1.5rem" />
+                </span>
+                <span className="aksel-data-table__th-resize-handle-indicator aksel-data-table__th-resize-handle-indicator--end">
+                  <CaretRightCircleFillIcon aria-hidden fontSize="1.5rem" />
+                </span>
+              </>
+            )}
+          </button>
         )}
       </th>
     );
   },
 );
 
+function getAriaSort(
+  sortDirection: SortDirection | undefined,
+): "ascending" | "descending" | "none" | undefined {
+  if (sortDirection === "asc") return "ascending";
+  if (sortDirection === "desc") return "descending";
+  if (sortDirection === "none") return "none";
+  return undefined;
+}
+
 export { DataTableTh };
 export type { DataTableThProps };

package/src/data/table/tr/DataTableTr.tsx

@@ -1,12 +1,17 @@
 import React, { forwardRef } from "react";
 import { cl } from "../../../utils/helpers";
+import { useDataTableContext } from "../root/DataTableRoot.context";
 
 type DataTableTrProps = React.HTMLAttributes<HTMLTableRowElement> & {
   selected?: boolean;
 };
 
 const DataTableTr = forwardRef<HTMLTableRowElement, DataTableTrProps>(
-  ({ className, selected = false, ...rest }, forwardedRef) => {
+  ({ className, children, selected = false, ...rest }, forwardedRef) => {
+    const rootContext = useDataTableContext();
+
+    const renderFillerCell = rootContext.layout === "fixed" && children;
+
     return (
       <tr
         {...rest}
@@ -14,7 +19,13 @@ const DataTableTr = forwardRef<HTMLTableRowElement, DataTableTrProps>(
         className={cl("aksel-data-table__tr", className, {
           "aksel-data-table__tr--selected": selected,
         })}
-      />
+      >
+        {children}
+        {renderFillerCell && (
+          /* TODO: Consider chaning between th and td based on context */
+          <div className="aksel-data-table__th aksel-data-table__filler-cell" />
+        )}
+      </tr>
     );
   },
 );

package/src/data/token-filter/AutoSuggest.tsx

@@ -1,47 +1,160 @@
-import React, { forwardRef } from "react";
-import { Box } from "../../primitives/box";
+import React, { forwardRef, useState } from "react";
+import { Search } from "../../form/search";
 import { VStack } from "../../primitives/stack";
-import { Label } from "../../typography";
+import { Detail, Label } from "../../typography";
+import { ListboxGroup } from "../../utils/components/Listbox/group/ListboxGroup";
+import { ListboxItem } from "../../utils/components/Listbox/item/ListboxItem";
+import Listbox from "../../utils/components/Listbox/root/ListboxRoot";
+import { DismissableLayer } from "../../utils/components/dismissablelayer/DismissableLayer";
+import { Floating } from "../../utils/components/floating/Floating";
+import { useMergeRefsN } from "../../utils/hooks";
 import type { AutoCompleteOption, OptionGroup } from "./AutoSuggest.types";
 
 interface AutoSuggestProps {
   options: OptionGroup<AutoCompleteOption>[];
-  onSelect: (value: string) => void;
+  onSelect: (option: AutoCompleteOption) => boolean;
   className?: string;
+  value: string;
+  onChange: (newValue: string) => void;
+  open: boolean;
+  setOpen: (open: boolean) => void;
 }
 
-const AutoSuggest = forwardRef<HTMLDivElement, AutoSuggestProps>(
-  ({ options, onSelect }, ref) => {
+const AutoSuggest = forwardRef<HTMLInputElement, AutoSuggestProps>(
+  ({ options, onSelect, value, onChange, open, setOpen }, ref) => {
+    const [virtuallyFocusedItemId, setVirtuallyFocusedItemId] = useState("");
+
+    const [inputRef, setInputRef] = useState<HTMLInputElement | null>(null);
+
+    /* Unsure why N version works, but not regular here */
+    const mergedRef = useMergeRefsN([setInputRef, ref]);
+
+    const handleClose = () => {
+      setOpen(false);
+    };
+
+    const handleChange = (newValue: string) => {
+      onChange(newValue);
+      setOpen(true);
+    };
+
+    const handleSelectOption = (option: AutoCompleteOption) => {
+      const createdNewToken = onSelect(option);
+
+      if (createdNewToken) {
+        inputRef?.focus();
+        setOpen(false);
+      }
+    };
+
+    return (
+      <Floating>
+        <Listbox setVirtuallyFocusedItemId={setVirtuallyFocusedItemId}>
+          <Floating.Anchor>
+            <Listbox.InputSlot>
+              <Search
+                label="Tabellsøk"
+                variant="simple"
+                className="aksel-property-filter__input"
+                placeholder="Type to filter..."
+                ref={mergedRef}
+                value={value}
+                onChange={handleChange}
+                onClick={() => {
+                  setOpen(true);
+                }}
+                onFocus={() => setOpen(true)}
+                /* onKeyDown={(e) => {
+              if (e.key === "Enter") {
+                createToken(filterText);
+              }
+            }} */
+              />
+            </Listbox.InputSlot>
+          </Floating.Anchor>
+          {open && (
+            <AutoSuggestPopup
+              options={options}
+              onSelect={handleSelectOption}
+              focusedValue={virtuallyFocusedItemId}
+              setFocusedValue={setVirtuallyFocusedItemId}
+              onClose={handleClose}
+              safeZoneAnchor={inputRef}
+            />
+          )}
+        </Listbox>
+      </Floating>
+    );
+  },
+);
+
+type AutoSuggestPopupProps = {
+  options: OptionGroup<AutoCompleteOption>[];
+  onSelect: (option: AutoCompleteOption) => void;
+  focusedValue: string;
+  setFocusedValue: (value: string) => void;
+  onClose: () => void;
+  safeZoneAnchor: HTMLInputElement | null;
+};
+
+const AutoSuggestPopup = forwardRef<HTMLDivElement, AutoSuggestPopupProps>(
+  (
+    {
+      options,
+      onSelect,
+      focusedValue,
+      setFocusedValue,
+      onClose,
+      safeZoneAnchor,
+    },
+    ref,
+  ) => {
     return (
-      <Box ref={ref} padding="space-6">
-        {options.map((group) => (
-          <div key={group.label}>
-            <Label as="div">{group.label}</Label>
-            <VStack gap="space-4">
-              {group.options.map((option) => {
-                return (
-                  <div key={option.value}>
-                    <button
-                      type="button"
-                      onClick={() => onSelect(option.value)}
+      <DismissableLayer
+        asChild
+        onDismiss={onClose}
+        safeZone={{ anchor: safeZoneAnchor }}
+      >
+        <Floating.Content
+          ref={ref}
+          align="start"
+          side="bottom"
+          fallbackPlacements={[]}
+          sideOffset={8}
+          className="aksel-property-filter__popup"
+        >
+          <div className="aksel-property-filter__popup-inner">
+            <Listbox.List setVirtuallyFocusedItemId={setFocusedValue}>
+              {options.map((group) => (
+                <ListboxGroup key={group.label} label={group.label}>
+                  {group.options.map((item) => (
+                    <ListboxItem
+                      key={item.value}
+                      id={item.value}
+                      onClick={() => onSelect(item)}
+                      hasVirtualFocus={focusedValue === item.value}
                     >
-                      <span>{option.label}</span>
-                      {option.description && <span>{option.description}</span>}
-                      {option.tags && option.tags.length > 0 && (
+                      <VStack gap="space-0">
+                        <Label as="div">{item.label}</Label>
+                        {item.description && (
+                          <Detail as="div">{item.description}</Detail>
+                        )}
+                      </VStack>
+                      {/* {item.tags && item.tags.length > 0 && (
                         <div>
-                          {option.tags.map((tag) => (
+                          {item.tags.map((tag) => (
                             <span key={tag}>{tag}</span>
                           ))}
                         </div>
-                      )}
-                    </button>
-                  </div>
-                );
-              })}
-            </VStack>
+                      )} */}
+                    </ListboxItem>
+                  ))}
+                </ListboxGroup>
+              ))}
+            </Listbox.List>
           </div>
-        ))}
-      </Box>
+        </Floating.Content>
+      </DismissableLayer>
     );
   },
 );