@navikt/ds-react 8.9.0 → 8.9.1

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

@@ -5,7 +5,7 @@ import { DragAndDropElement } from "../types";
 import { DragAndDropProvider } from "./DragAndDrop.context";
 
 interface DragAndDropProps extends React.HTMLAttributes<HTMLDivElement> {
-  children: any[];
+  children: React.ReactElement<DragAndDropItemProps>[];
   setItems: React.Dispatch<React.SetStateAction<any[]>>;
 }
 
@@ -28,34 +28,68 @@ interface DataDragAndDropRootComponent extends React.ForwardRefExoticComponent<
 
 /**
  * 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
- *
- * []
+ * [x] setItems on root
+ * [x] state : active element
+ * [x] pointer over listener / state, onPointerEnter, onPointerLeave
+ * [x] Overlay - Use floating component
+ * [x] Keyboard navigation
+ * [ ] UU - announce on drag start, item moved, drag end
+ * [x] Make overlay same width as the OG item, currently jumps to content width
+ * [ ] Look into adding a cancel listener event
+ * [ ] Make onClick work on drag handler button, currently blocked by pointer down/up listeners
+ * [ ] Talk to design about what should happen on ESC key press, currently just cancels dragging, should it also reset position?
+ * [ ] Make arrow icons into buttons that react to keyboard events, currently just decorative
  */
 
 const DragAndDrop = forwardRef<HTMLDivElement, DragAndDropProps>(
   ({ setItems, children }, forwardedRef) => {
+    const DRAG_THRESHOLD = 4; // Minimum movement in pixels to start dragging
+
     const [activeItem, setActiveItem] =
       React.useState<DragAndDropElement | null>(null);
     const [dropTarget, setDropTarget] =
       React.useState<DragAndDropElement | null>(null);
     const [dragHandlerActive, setDragHandlerActive] =
       React.useState<DragAndDropElement | null>(null);
+    const [overlayWidth, setOverlayWidth] = React.useState<number | null>(null);
 
     const activeItemRef = React.useRef<DragAndDropElement | null>(null);
     const dropTargetRef = React.useRef<DragAndDropElement | null>(null);
+    const activeChild = children.find(
+      (child) => child.props.id === activeItem?.id,
+    );
 
     const [virtualRef, setVirtualRef] = React.useState({
       getBoundingClientRect: () =>
         DOMRect.fromRect({ width: 0, height: 0, x: 0, y: 0 }),
     });
 
+    const pendingDragStartRef = React.useRef<{
+      item: DragAndDropElement;
+      element: HTMLElement | null;
+      pointerId: number;
+      startX: number;
+      startY: number;
+    } | null>(null);
+
+    const startPendingDragStart = (
+      event: React.PointerEvent,
+      item: DragAndDropElement,
+      element?: HTMLElement | null,
+    ) => {
+      pendingDragStartRef.current = {
+        item,
+        element: element || null,
+        pointerId: event.pointerId,
+        startX: event.clientX,
+        startY: event.clientY,
+      };
+    };
+
+    const cancelDragStart = () => {
+      pendingDragStartRef.current = null;
+    };
+
     const setCombinedActiveItem = React.useCallback(
       (item: DragAndDropElement | null) => {
         activeItemRef.current = item;
@@ -73,24 +107,50 @@ const DragAndDrop = forwardRef<HTMLDivElement, DragAndDropProps>(
     );
 
     useEffect(() => {
+      /* This useEffect is used to toggle a class on the html element when dragging, 
+      to prevent cursor issues when dragging over interactive elements, 
+      and to prevent text selection during dragging. */
+
       if (activeItem) {
-        document.documentElement.setAttribute("data-dragging", "true");
+        document.documentElement.setAttribute("data-dragging-cursor", "true");
         document.body.style.userSelect = "none";
       } else {
-        document.documentElement.removeAttribute("data-dragging");
+        document.documentElement.removeAttribute("data-dragging-cursor");
         document.body.style.userSelect = "";
       }
 
       return () => {
-        document.documentElement.removeAttribute("data-dragging");
+        document.documentElement.removeAttribute("data-dragging-cursor");
         document.body.style.userSelect = "";
       };
     }, [activeItem]);
 
     useEffect(() => {
-      if (!activeItem) return;
-
       const handlePointerMove = (event: PointerEvent) => {
+        const pendingStart = pendingDragStartRef.current;
+        const activeRef = activeItemRef.current;
+        const element = pendingStart?.element;
+
+        if (!activeRef && pendingStart) {
+          const deltaX = Math.abs(event.clientX - pendingStart.startX);
+          const deltaY = Math.abs(event.clientY - pendingStart.startY);
+
+          if (deltaX > DRAG_THRESHOLD || deltaY > DRAG_THRESHOLD) {
+            if (element) {
+              element.setPointerCapture(pendingStart.pointerId);
+            }
+
+            setOverlayWidth(element?.getBoundingClientRect().width ?? null);
+            setCombinedActiveItem(pendingStart.item);
+            setCombinedDropTarget(pendingStart.item);
+            pendingDragStartRef.current = null;
+          }
+          return;
+        }
+
+        const active = activeItemRef.current;
+        if (!active) return;
+
         setVirtualRef({
           getBoundingClientRect: () =>
             DOMRect.fromRect({
@@ -101,9 +161,6 @@ const DragAndDrop = forwardRef<HTMLDivElement, DragAndDropProps>(
             }),
         });
 
-        const active = activeItemRef.current;
-        if (!active) return;
-
         const elements = document.elementsFromPoint(
           event.clientX,
           event.clientY,
@@ -142,6 +199,11 @@ const DragAndDrop = forwardRef<HTMLDivElement, DragAndDropProps>(
       };
 
       const handlePointerUp = () => {
+        if (!activeItemRef.current) {
+          pendingDragStartRef.current = null;
+          return;
+        }
+
         const active = activeItemRef.current;
         const target = dropTargetRef.current;
 
@@ -153,8 +215,11 @@ const DragAndDrop = forwardRef<HTMLDivElement, DragAndDropProps>(
             return newItems;
           });
         }
+        setOverlayWidth(null);
+        setDragHandlerActive(null);
         setCombinedActiveItem(null);
         setCombinedDropTarget(null);
+        pendingDragStartRef.current = null;
       };
 
       // TODO - Look into adding a cancel listener event
@@ -165,7 +230,7 @@ const DragAndDrop = forwardRef<HTMLDivElement, DragAndDropProps>(
         window.removeEventListener("pointermove", handlePointerMove);
         window.removeEventListener("pointerup", handlePointerUp);
       };
-    }, [activeItem, setCombinedDropTarget, setCombinedActiveItem, setItems]);
+    }, [setCombinedDropTarget, setCombinedActiveItem, setItems]);
 
     const onKeyboardDragEnd = (diff: number) => {
       if (!dragHandlerActive) return;
@@ -184,25 +249,6 @@ const DragAndDrop = forwardRef<HTMLDivElement, DragAndDropProps>(
       setDragHandlerActive({ ...dragHandlerActive, index: targetIndex });
     };
 
-    const onDragStart = (
-      event: React.PointerEvent | React.MouseEvent,
-      item: DragAndDropElement,
-    ) => {
-      setVirtualRef({
-        getBoundingClientRect: () =>
-          DOMRect.fromRect({
-            width: 0,
-            height: 0,
-            x: event.clientX,
-            y: event.clientY,
-          }),
-      });
-      setCombinedActiveItem(item);
-      setCombinedDropTarget(item);
-    };
-
-    // TODO - Make overlay same width as the OG item, currently jumps to content width
-
     return (
       <DragAndDropProvider
         activeItem={activeItem}
@@ -212,10 +258,11 @@ const DragAndDrop = forwardRef<HTMLDivElement, DragAndDropProps>(
         dragHandlerActive={dragHandlerActive}
         setDragHandlerActive={setDragHandlerActive}
         onKeyboardDragEnd={onKeyboardDragEnd}
-        onDragStart={onDragStart}
+        startPendingDragStart={startPendingDragStart}
+        cancelDragStart={cancelDragStart}
       >
         <div ref={forwardedRef}>{children}</div>
-        {activeItem && (
+        {activeItem && activeChild && (
           <Floating>
             <Floating.Anchor virtualRef={virtualRef}>
               <span />
@@ -223,12 +270,14 @@ const DragAndDrop = forwardRef<HTMLDivElement, DragAndDropProps>(
             <Floating.Content
               align="start"
               updatePositionStrategy="always"
-              style={{ pointerEvents: "none" }}
+              style={{
+                pointerEvents: "none",
+                boxSizing: "border-box",
+                width: overlayWidth ? `${overlayWidth}px` : "fit-content",
+              }}
             >
-              {React.cloneElement(children[activeItem.index], {
-                "data-dnd-id": undefined,
-                "data-dnd-index": undefined,
-                "data-overlay": true,
+              {React.cloneElement(activeChild, {
+                isOverlay: true,
               })}
             </Floating.Content>
           </Floating>

package/src/data/table/helpers/selection/getMultipleSelectProps.ts

@@ -1,4 +1,4 @@
-import type { CheckboxProps } from "../../../../form/checkbox/types";
+import type { CheckboxInputProps } from "../../../../form/checkbox/checkbox-input/CheckboxInput";
 import type { SelectionT } from "./selection.types";
 
 type GetMultipleSelectPropsArgs = {
@@ -39,14 +39,15 @@ function getMultipleSelectProps({
     (Array.isArray(selectedKeys) && selectedKeys.includes(key));
 
   return {
-    getTheadCheckboxProps: (): CheckboxProps => {
+    getTheadCheckboxProps: (): CheckboxInputProps => {
       const indeterminate =
         Array.isArray(selectedKeys) &&
         selectedKeys.length > 0 &&
         selectedKeys.length < totalCount;
 
       return {
-        children: "Select all rows",
+        /* TODO: Add support for label visuallyhidden */
+        /* children: "Select all rows", */
         onChange: handleToggleAll,
         checked:
           (selectedKeys === "all" ||
@@ -54,15 +55,14 @@ function getMultipleSelectProps({
           !indeterminate,
         indeterminate,
         disabled: disabledKeys.length === totalCount,
-        hideLabel: true,
       };
     },
-    getRowCheckboxProps: (key: string | number): CheckboxProps => ({
-      children: `Select row with id ${key}`,
+    getRowCheckboxProps: (key: string | number): CheckboxInputProps => ({
+      /* TODO: Add support for label visuallyhidden */
+      /* children: `Select row with id ${key}`, */
       onChange: () => handleToggleRow(key),
       checked: isChecked(key),
       disabled: disabledKeys.includes(key),
-      hideLabel: true,
     }),
   };
 }

package/src/data/table/helpers/selection/getSingleSelectProps.ts

@@ -1,4 +1,4 @@
-import type { RadioProps } from "../../../../form/radio/types";
+import type { RadioInputProps } from "../../../../form/radio/radio-input/RadioInput";
 
 type GetSingleSelectPropsArgs = {
   selectedKeys: (string | number)[];
@@ -20,12 +20,15 @@ function getSingleSelectProps({
   };
 
   return {
-    getRowRadioProps: (key: string | number): RadioProps => ({
-      children: `Select row with id ${key}`,
+    getRowRadioProps: (key: string | number): RadioInputProps => ({
+      /* TODO: Add support for label visuallyhidden */
+      /* children: `Select row with id ${key}`, */
       checked: selectedKeys.includes(key),
       onChange: () => handleSelectionChange(key),
       disabled: disabledKeys.includes(key),
       value: key,
+      /* TODO: Make this unique to avoid issue with multipe tables */
+      name: "data-table-single-select",
     }),
   };
 }

package/src/data/table/helpers/selection/selection.types.ts

@@ -1,5 +1,5 @@
-import type { CheckboxProps } from "../../../../form/checkbox/types";
-import type { RadioProps } from "../../../../form/radio/types";
+import type { CheckboxInputProps } from "../../../../form/checkbox/checkbox-input/CheckboxInput";
+import type { RadioInputProps } from "../../../../form/radio/radio-input/RadioInput";
 
 type SelectionT = (string | number)[] | "all";
 
@@ -32,7 +32,7 @@ type SingleSelection = {
   allKeys: (string | number)[];
   selectedKeys: (string | number)[];
   disabledKeys: (string | number)[];
-  getRowRadioProps: (key: string | number) => RadioProps;
+  getRowRadioProps: (key: string | number) => RadioInputProps;
 };
 
 type MultipleSelection = {
@@ -40,8 +40,8 @@ type MultipleSelection = {
   allKeys: (string | number)[];
   selectedKeys: SelectionT;
   disabledKeys: (string | number)[];
-  getTheadCheckboxProps: () => CheckboxProps;
-  getRowCheckboxProps: (key: string | number) => CheckboxProps;
+  getTheadCheckboxProps: () => CheckboxInputProps;
+  getRowCheckboxProps: (key: string | number) => CheckboxInputProps;
 };
 
 type TableSelection = NoneSelection | SingleSelection | MultipleSelection;

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

@@ -1,6 +1,7 @@
 /** biome-ignore-all lint/correctness/useHookAtTopLevel: False positive because of the way forwardRef() is added */
 import React, { forwardRef, useState } from "react";
-import { Checkbox } from "../../../form/checkbox";
+import { CheckboxInput } from "../../../form/checkbox/checkbox-input/CheckboxInput";
+import { RadioInput } from "../../../form/radio/radio-input/RadioInput";
 import { cl } from "../../../utils/helpers";
 import { useMergeRefs } from "../../../utils/hooks";
 import { useTableKeyboardNav } from "../hooks/useTableKeyboardNav";
@@ -130,14 +131,19 @@ function DataTableAutoInner<T>(
             <DataTableThead>
               <DataTableTr>
                 {selection.selectionMode === "multiple" && (
-                  /* TODO: Overflow/focus is clipped. Alignment is off */
-                  /* TODO: Should not be resizable */
-                  <DataTableTh textAlign="center" width="60px">
-                    <Checkbox {...selection.getTheadCheckboxProps()} />
+                  <DataTableTh
+                    textAlign="center"
+                    width="60px"
+                    UNSAFE_isSelection
+                  >
+                    <CheckboxInput
+                      {...selection.getTheadCheckboxProps()}
+                      compact
+                    />
                   </DataTableTh>
                 )}
                 {selection.selectionMode === "single" && (
-                  <DataTableTd align="center" width="60px" />
+                  <DataTableTh width="64px" UNSAFE_isSelection />
                 )}
                 {columnDefinitions.map((colDef, colDefIndex) => {
                   return (
@@ -161,18 +167,22 @@ function DataTableAutoInner<T>(
                 return (
                   <DataTableTr key={rowId}>
                     {selection.selectionMode === "multiple" && (
-                      <DataTableTd align="center" width="60px">
-                        <Checkbox {...selection.getRowCheckboxProps(rowId)} />
+                      <DataTableTd
+                        align="center"
+                        width="60px"
+                        UNSAFE_isSelection
+                      >
+                        <CheckboxInput
+                          {...selection.getRowCheckboxProps(rowId)}
+                          compact
+                        />
                       </DataTableTd>
                     )}
+
                     {selection.selectionMode === "single" && (
-                      <DataTableTd align="center" width="60px">
-                        {/**
-                         * TODO: This should be a radio, but our current Radio implementation has some issues:
-                         * - Checked cant be controlled outside of radiogroup
-                         * - Cant hide label
-                         * */}
-                        <Checkbox {...selection.getRowRadioProps(rowId)} />
+                      <DataTableTd width="64px" UNSAFE_isSelection>
+                        {/* used with keyboard nav is funky, no longer auto-selects on keyboard-nav. Probably preventDefault somewhere breaking it. */}
+                        <RadioInput {...selection.getRowRadioProps(rowId)} />
                       </DataTableTd>
                     )}
                     {columnDefinitions.map((colDef, colDefIndex) => {

package/src/data/table/td/DataTableTd.tsx

@@ -20,11 +20,22 @@ interface DataTableTdProps extends React.TdHTMLAttributes<HTMLTableCellElement>
    * @default "left"
    */
   textAlign?: "left" | "center" | "right";
+  /**
+   * Temp hack to solve overflow and alignment
+   */
+  UNSAFE_isSelection?: boolean;
 }
 
 const DataTableTd = forwardRef<HTMLTableCellElement, DataTableTdProps>(
   (
-    { className, children, contentMaxWidth, textAlign = "left", ...rest },
+    {
+      className,
+      children,
+      contentMaxWidth,
+      textAlign = "left",
+      UNSAFE_isSelection,
+      ...rest
+    },
     forwardedRef,
   ) => {
     const { withKeyboardNav } = useDataTableContext();
@@ -33,7 +44,9 @@ const DataTableTd = forwardRef<HTMLTableCellElement, DataTableTdProps>(
       <td
         {...rest}
         ref={forwardedRef}
-        className={cl("aksel-data-table__td", className)}
+        className={cl("aksel-data-table__td", className, {
+          "aksel-data-table--UNSAFE_isSelection": UNSAFE_isSelection,
+        })}
         tabIndex={withKeyboardNav ? -1 : undefined}
         data-align={textAlign}
       >

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

@@ -52,6 +52,10 @@ interface DataTableThProps
    */
   colSpan?: number;
   rowSpan?: number;
+  /**
+   * Temp hack to solve overflow and alignment
+   */
+  UNSAFE_isSelection?: boolean;
 }
 
 const SORT_ICON: Record<SortDirection, React.ElementType | null> = {
@@ -82,6 +86,7 @@ const DataTableTh = forwardRef<HTMLTableCellElement, DataTableThProps>(
       onWidthChange,
       defaultWidth,
       colSpan,
+      UNSAFE_isSelection,
       ...rest
     },
     forwardedRef,
@@ -143,12 +148,18 @@ const DataTableTh = forwardRef<HTMLTableCellElement, DataTableThProps>(
             )}
           </button>
         ) : (
-          <div ref={contentRef} className="aksel-data-table__th-content">
+          <div
+            ref={contentRef}
+            className={cl({
+              "aksel-data-table__th-content": !UNSAFE_isSelection,
+              "aksel-data-table--UNSAFE_isSelection": UNSAFE_isSelection,
+            })}
+          >
             {children}
           </div>
         )}
 
-        {resizeResult.enabled && (
+        {resizeResult.enabled && !UNSAFE_isSelection && (
           <button
             {...resizeResult.resizeHandlerProps}
             className="aksel-data-table__th-resize-handle"

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

@@ -0,0 +1,100 @@
+import React, { useState } from "react";
+import { XMarkIcon } from "@navikt/aksel-icons";
+import { ActionMenu } from "../../action-menu";
+import { Popover } from "../../popover";
+import type { ExternalToken, OperationT } from "./TokenFilter.types";
+
+type TokenFilterChipsProps = {
+  tokens: ExternalToken[];
+  removeToken: (index: number) => void;
+  operation: OperationT;
+  updateOperation: (operation: OperationT) => void;
+};
+
+function TokenFilterChips(props: TokenFilterChipsProps) {
+  const { tokens, removeToken, operation, updateOperation } = props;
+
+  if (tokens.length === 0) {
+    return null;
+  }
+
+  return (
+    <ul className="aksel-property-filter__chips">
+      {tokens.map((token, index) => (
+        <TokenFilterChip
+          key={index}
+          onRemove={() => removeToken(index)}
+          token={token}
+          showOperation={index > 0}
+          operation={operation}
+          updateOperation={updateOperation}
+        />
+      ))}
+    </ul>
+  );
+}
+
+type TokenFilterChipProps = {
+  token: ExternalToken;
+  onRemove: () => void;
+  showOperation: boolean;
+  operation?: OperationT;
+  updateOperation?: (operation: OperationT) => void;
+};
+
+function TokenFilterChip(props: TokenFilterChipProps) {
+  const { token, onRemove, showOperation, operation } = props;
+  const [popupAnchor, setPopupAnchor] = useState<HTMLButtonElement | null>(
+    null,
+  );
+  const [isPopupOpen, setIsPopupOpen] = useState(false);
+
+  return (
+    <li className="aksel-property-filter__chip">
+      {showOperation && (
+        <ActionMenu>
+          <ActionMenu.Trigger>
+            <button
+              className="aksel-property-filter__chip-button"
+              data-type="operation"
+              /* onClick={onRemove} */
+            >
+              {operation === "and" ? "og" : "eller"}
+            </button>
+          </ActionMenu.Trigger>
+          <ActionMenu.Content>
+            <ActionMenu.Item onSelect={() => props.updateOperation?.("and")}>
+              AND
+            </ActionMenu.Item>
+            <ActionMenu.Item onSelect={() => props.updateOperation?.("or")}>
+              OR
+            </ActionMenu.Item>
+          </ActionMenu.Content>
+        </ActionMenu>
+      )}
+      <button
+        data-type="value"
+        className="aksel-property-filter__chip-button"
+        ref={setPopupAnchor}
+        onClick={() => setIsPopupOpen((open) => !open)}
+      >{`${token.propertyKey} ${token.operator} ${token.value}`}</button>
+      <Popover
+        open={isPopupOpen}
+        onClose={() => setIsPopupOpen(false)}
+        anchorEl={popupAnchor}
+        placement="bottom-start"
+      >
+        <Popover.Content>Edit filter</Popover.Content>
+      </Popover>
+      <button
+        data-type="remove"
+        className="aksel-property-filter__chip-button"
+        onClick={onRemove}
+      >
+        <XMarkIcon aria-hidden fontSize="1.25rem" />
+      </button>
+    </li>
+  );
+}
+
+export { TokenFilterChips };

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

@@ -1,9 +1,8 @@
 import React, { forwardRef, useState } from "react";
-import { Chips } from "../../chips";
-import { HStack } from "../../primitives/stack";
 import { cl } from "../../utils/helpers";
 import { AutoSuggest } from "./AutoSuggest";
 import { AutoCompleteOption } from "./AutoSuggest.types";
+import { TokenFilterChips } from "./FilterChip";
 import type {
   ExternalOptions,
   ExternalPropertyDefinitions,
@@ -46,7 +45,7 @@ export const TokenFilter = forwardRef<HTMLDivElement, TokenFilterProps>(
       parsedPropertyOptions,
     );
 
-    const { addToken, removeToken } = createActionHandlers({
+    const { addToken, removeToken, updateOperation } = createActionHandlers({
       query,
       onChange,
     });
@@ -116,27 +115,12 @@ export const TokenFilter = forwardRef<HTMLDivElement, TokenFilterProps>(
           open={open}
           setOpen={setOpen}
         />
-        <HStack marginBlock="space-8" gap="space-8">
-          {query.tokens.map((token, index) => {
-            return (
-              <React.Fragment
-                key={`${token.propertyKey}-${token.operator}-${token.value}-${index}`}
-              >
-                <Chips.Removable
-                  key={index}
-                  onClick={() => {
-                    removeToken(index);
-                  }}
-                >
-                  {`${token.propertyKey} ${token.operator} ${token.value}`}
-                </Chips.Removable>
-                {index < query.tokens.length - 1 && (
-                  <span>{query.operation}</span>
-                )}
-              </React.Fragment>
-            );
-          })}
-        </HStack>
+        <TokenFilterChips
+          tokens={query.tokens}
+          removeToken={removeToken}
+          updateOperation={updateOperation}
+          operation={query.operation}
+        />
       </div>
     );
   },