@navikt/ds-react 8.6.0 → 8.8.0

package/src/data/table/th/useTableColumnResize.ts

@@ -0,0 +1,276 @@
+import { type DOMAttributes, useCallback, useState } from "react";
+import { useControllableState } from "../../../utils/hooks";
+import { useDataTableContext } from "../root/DataTableRoot.context";
+
+type ColumnWidth = number | string;
+
+type ResizeProps = {
+  ref: HTMLTableCellElement | null;
+  /**
+   * Controlled width of the column.
+   *
+   * Should only be used to fully control column width state. Otherwise, use `defaultWidth` and let the component handle resizing.
+   */
+  width?: ColumnWidth;
+  /**
+   * Initial width of the column. Only used when `width` is not set.
+   */
+  defaultWidth?: ColumnWidth;
+  /**
+   * Minimum width of the column.
+   *
+   * Should be used in conjunction with `width` or `defaultWidth` to set limits when resizing.
+   */
+  minWidth?: ColumnWidth;
+  /**
+   * Maximum width of the column.
+   *
+   * Should be used in conjunction with `width` or `defaultWidth` to set limits when resizing.
+   */
+  maxWidth?: ColumnWidth;
+  /**
+   * Called when the column width changes.
+   */
+  onWidthChange?: (width: ColumnWidth) => void;
+  /**
+   * Forwarded styles
+   */
+  style?: React.CSSProperties;
+  /**
+   * Forwarded colSpan
+   */
+  colSpan?: number;
+};
+
+type TableColumnResizeArgs = ResizeProps & {};
+
+type TableColumnResizeResult =
+  | {
+      style?: React.CSSProperties;
+      resizeHandlerProps: {
+        onMouseDown: DOMAttributes<HTMLButtonElement>["onMouseDown"];
+        onTouchStart: DOMAttributes<HTMLButtonElement>["onTouchStart"];
+        onKeyDown: DOMAttributes<HTMLButtonElement>["onKeyDown"];
+        onBlur: DOMAttributes<HTMLButtonElement>["onBlur"];
+        onDoubleClick: DOMAttributes<HTMLButtonElement>["onDoubleClick"];
+      };
+      isResizingWithKeyboard: boolean;
+      enabled: true;
+    }
+  | {
+      style?: React.CSSProperties;
+      enabled: false;
+    };
+
+/**
+ * TODO:
+ * - Do we allow % widths?
+ * - Auto-width mode is hard now since that might cause layout-shifts on mount. But would be preferable to
+ * be able to set "1fr" or similar and have it fill remaining space.
+ */
+function useTableColumnResize(
+  args: TableColumnResizeArgs,
+): TableColumnResizeResult {
+  const {
+    ref,
+    width: userWidth,
+    defaultWidth,
+    onWidthChange,
+    maxWidth = Infinity,
+    minWidth = 40,
+    style,
+    colSpan,
+  } = args;
+
+  const tableContext = useDataTableContext();
+
+  const [width, _setWidth] = useControllableState({
+    value: userWidth,
+    defaultValue: defaultWidth ?? (colSpan ?? 1) * 140,
+    /**
+     * TODO:
+     * - Potential optimization: Only call when width as "stopped" changing, e.g. on mouse up or after a debounce when resizing with keyboard.
+     * Otherwise, this could cause excessive calls when resizing quickly.
+     */
+    onChange: onWidthChange,
+  });
+
+  const [isResizingWithKeyboard, setIsResizingWithKeyboard] = useState(false);
+  const [, setIsResizingWithMouse] = useState(false);
+
+  const setWidth = useCallback(
+    (newWidth: number) => {
+      const currentWidth = ref?.offsetWidth;
+      if (!currentWidth) {
+        return;
+      }
+
+      const min = parseWidth(minWidth) ?? 0;
+      const max = parseWidth(maxWidth) ?? Infinity;
+      const clamped = Math.min(Math.max(newWidth, min), max);
+
+      if (newWidth <= currentWidth && newWidth > max) {
+        _setWidth(newWidth);
+        return;
+      }
+
+      if (newWidth >= currentWidth && newWidth > max) {
+        _setWidth(currentWidth);
+        return;
+      }
+
+      _setWidth(clamped);
+    },
+    [minWidth, maxWidth, _setWidth, ref],
+  );
+
+  const handleKeyDown: DOMAttributes<HTMLButtonElement>["onKeyDown"] =
+    useCallback(
+      (event) => {
+        if (event.key === "Enter" || event.key === " ") {
+          setIsResizingWithKeyboard((prev) => !prev);
+          return;
+        }
+
+        if (!isResizingWithKeyboard) {
+          return;
+        }
+
+        if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
+          event.preventDefault();
+
+          const th = (event.target as HTMLElement).closest(
+            "th",
+          ) as HTMLTableCellElement;
+          const startWidth = th.offsetWidth;
+
+          const delta = event.key === "ArrowRight" ? 20 : -20;
+          setWidth(startWidth + delta);
+        }
+      },
+      [isResizingWithKeyboard, setWidth],
+    );
+
+  const startResize = useCallback(
+    (th: HTMLTableCellElement, startX: number) => {
+      setIsResizingWithMouse(true);
+      const startWidth = th.offsetWidth;
+
+      function onPointerMove(clientX: number) {
+        setWidth(startWidth + (clientX - startX));
+      }
+
+      function onMouseMove(e: MouseEvent) {
+        onPointerMove(e.clientX);
+      }
+
+      function onTouchMove(e: TouchEvent) {
+        e.preventDefault();
+        onPointerMove(e.touches[0].clientX);
+      }
+
+      function cleanup() {
+        document.removeEventListener("mousemove", onMouseMove);
+        document.removeEventListener("touchmove", onTouchMove);
+        document.removeEventListener("mouseup", cleanup);
+        document.removeEventListener("touchend", cleanup);
+        document.removeEventListener("touchcancel", cleanup);
+        setIsResizingWithMouse(false);
+      }
+
+      document.addEventListener("mousemove", onMouseMove);
+      document.addEventListener("touchmove", onTouchMove, { passive: false });
+      document.addEventListener("mouseup", cleanup);
+      document.addEventListener("touchend", cleanup);
+      document.addEventListener("touchcancel", cleanup);
+    },
+    [setWidth],
+  );
+
+  const handleMouseDown: DOMAttributes<HTMLButtonElement>["onMouseDown"] =
+    useCallback(
+      (event) => {
+        const th = (event.target as HTMLElement).closest(
+          "th",
+        ) as HTMLTableCellElement;
+        startResize(th, event.clientX);
+      },
+      [startResize],
+    );
+
+  const handleTouchStart: DOMAttributes<HTMLButtonElement>["onTouchStart"] =
+    useCallback(
+      (event) => {
+        const th = (event.target as HTMLElement).closest(
+          "th",
+        ) as HTMLTableCellElement;
+        startResize(th, event.touches[0].clientX);
+      },
+      [startResize],
+    );
+
+  /**
+   * TODO: Do we even want this?
+   * - + 32px padding is hardcoded now, fix this
+   * - Need to find widest element in column, not the header itself.
+   * - Should doubleclick just reset to defaultWidth? Or add a autoWidth prop.
+   */
+  const handleDoubleClick: DOMAttributes<HTMLButtonElement>["onDoubleClick"] =
+    useCallback(
+      (event) => {
+        const th = (event.target as HTMLElement).closest(
+          "th",
+        ) as HTMLTableCellElement;
+
+        const contentEl = th.getElementsByClassName(
+          "aksel-data-table__th-content",
+        )[0];
+        const range = document.createRange();
+        range.selectNodeContents(contentEl);
+        const contentWidth = range.getBoundingClientRect().width;
+
+        setWidth(contentWidth + 32);
+      },
+      [setWidth],
+    );
+
+  if (tableContext.layout !== "fixed") {
+    return {
+      style,
+      enabled: false,
+    };
+  }
+
+  return {
+    style: {
+      ...style,
+      width,
+    },
+    resizeHandlerProps: {
+      onMouseDown: handleMouseDown,
+      onTouchStart: handleTouchStart,
+      onKeyDown: handleKeyDown,
+      onBlur: () => setIsResizingWithKeyboard(false),
+      onDoubleClick: handleDoubleClick,
+    },
+    isResizingWithKeyboard,
+    enabled: true,
+  };
+}
+
+function parseWidth(width: ColumnWidth | undefined): number | undefined {
+  if (width == null) {
+    return undefined;
+  }
+  if (typeof width === "number") {
+    return width;
+  }
+  if (typeof width === "string") {
+    const parsed = parseInt(width, 10);
+    return Number.isNaN(parsed) ? undefined : parsed;
+  }
+  return undefined;
+}
+
+export { useTableColumnResize };
+export type { ResizeProps };

package/src/data/table/thead/DataTableThead.context.ts

@@ -0,0 +1,10 @@
+import React, { createContext } from "react";
+
+const DataTableTheadContext = createContext<boolean>(false);
+
+function useDataTableThead(): boolean {
+  const context = React.useContext(DataTableTheadContext);
+  return context;
+}
+
+export { DataTableTheadContext, useDataTableThead };

package/src/data/table/thead/DataTableThead.tsx

@@ -1,16 +1,19 @@
 import React, { forwardRef } from "react";
 import { cl } from "../../../utils/helpers";
+import { DataTableTheadContext } from "./DataTableThead.context";
 
 type DataTableTheadProps = React.HTMLAttributes<HTMLTableSectionElement>;
 
 const DataTableThead = forwardRef<HTMLTableSectionElement, DataTableTheadProps>(
   ({ className, ...rest }, forwardedRef) => {
     return (
-      <thead
-        {...rest}
-        ref={forwardedRef}
-        className={cl("aksel-data-table__thead", className)}
-      />
+      <DataTableTheadContext.Provider value={true}>
+        <thead
+          {...rest}
+          ref={forwardedRef}
+          className={cl("aksel-data-table__thead", className)}
+        />
+      </DataTableTheadContext.Provider>
     );
   },
 );

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 { layout } = useDataTableContext();
+
+    const renderFillerCell = layout === "fixed" && children;
+
     return (
       <tr
         {...rest}
@@ -14,7 +19,18 @@ 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 */
+          /* using div causes illegal dom structure */
+          <td
+            aria-hidden
+            className="aksel-data-table__th aksel-data-table__filler-cell"
+            data-block-keyboard-nav
+          />
+        )}
+      </tr>
     );
   },
 );

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

@@ -1,47 +1,159 @@
-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 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 [virtuallyFocusedOptionId, setVirtuallyFocusedOptionId] =
+      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 setVirtuallyFocusedOptionId={setVirtuallyFocusedOptionId}>
+          <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={virtuallyFocusedOptionId}
+              setFocusedValue={setVirtuallyFocusedOptionId}
+              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.Options setVirtuallyFocusedOptionId={setFocusedValue}>
+              {options.map((group) => (
+                <Listbox.Group key={group.label} label={group.label}>
+                  {group.options.map((item) => (
+                    <Listbox.Option
+                      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>
+                      )} */}
+                    </Listbox.Option>
+                  ))}
+                </Listbox.Group>
+              ))}
+            </Listbox.Options>
           </div>
-        ))}
-      </Box>
+        </Floating.Content>
+      </DismissableLayer>
     );
   },
 );