@navikt/ds-react 8.8.0 → 8.9.1

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

@@ -1,7 +1,14 @@
+/** 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";
+import {
+  type SelectionProps,
+  useTableSelection,
+} from "../hooks/useTableSelection";
 import { DataTableTbody } from "../tbody/DataTableTbody";
 import { DataTableTd } from "../td/DataTableTd";
 import { DataTableTh } from "../th/DataTableTh";
@@ -9,8 +16,6 @@ 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 {
@@ -62,7 +67,8 @@ interface DataTableProps<T>
    *
    */
   columnDefinitions: ColumnDefinitions<T>;
-  data: (T & { id: string | number })[];
+  data: T[];
+  getRowId?: (rowData: T, index: number) => string | number;
 }
 
 function DataTableAutoInner<T>(
@@ -81,6 +87,7 @@ function DataTableAutoInner<T>(
     disabledKeys = [],
     data,
     columnDefinitions,
+    getRowId,
     ...rest
   }: DataTableProps<T>,
   forwardedRef: React.ForwardedRef<HTMLTableElement>,
@@ -93,15 +100,19 @@ function DataTableAutoInner<T>(
     shouldBlockNavigation,
   });
 
-  const { getTheadCheckboxProps, selectionMode, getRowCheckboxProps } =
-    useTableSelection({
-      selectionMode: selectionModeProp,
-      selectedKeys,
-      defaultSelectedKeys,
-      onSelectionChange,
-      disabledKeys,
-      data,
-    });
+  const resolvedGetRowId =
+    getRowId ??
+    (((_row: T, index: number) => index) as (rowData: T) => string | number);
+
+  const selection = useTableSelection({
+    selectionMode: selectionModeProp,
+    selectedKeys,
+    defaultSelectedKeys,
+    onSelectionChange,
+    disabledKeys,
+    data,
+    getRowId: resolvedGetRowId,
+  });
 
   return (
     <DataTableContextProvider layout={layout} withKeyboardNav={withKeyboardNav}>
@@ -119,14 +130,25 @@ function DataTableAutoInner<T>(
           >
             <DataTableThead>
               <DataTableTr>
-                {getTheadCheckboxProps && (
-                  <DataTableTd align="center" width="60px">
-                    <Checkbox {...getTheadCheckboxProps()} />
-                  </DataTableTd>
+                {selection.selectionMode === "multiple" && (
+                  <DataTableTh
+                    textAlign="center"
+                    width="60px"
+                    UNSAFE_isSelection
+                  >
+                    <CheckboxInput
+                      {...selection.getTheadCheckboxProps()}
+                      compact
+                    />
+                  </DataTableTh>
+                )}
+                {selection.selectionMode === "single" && (
+                  <DataTableTh width="64px" UNSAFE_isSelection />
                 )}
                 {columnDefinitions.map((colDef, colDefIndex) => {
                   return (
                     <DataTableTh
+                      /* TODO: Make these user-changable */
                       maxWidth="400px"
                       minWidth="100px"
                       defaultWidth="100%"
@@ -141,15 +163,26 @@ function DataTableAutoInner<T>(
             </DataTableThead>
             <DataTableTbody>
               {data.map((rowData, rowIndex) => {
+                const rowId = selection.allKeys[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)} />
+                  <DataTableTr key={rowId}>
+                    {selection.selectionMode === "multiple" && (
+                      <DataTableTd
+                        align="center"
+                        width="60px"
+                        UNSAFE_isSelection
+                      >
+                        <CheckboxInput
+                          {...selection.getRowCheckboxProps(rowId)}
+                          compact
+                        />
+                      </DataTableTd>
+                    )}
+
+                    {selection.selectionMode === "single" && (
+                      <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/root/DataTableRoot.tsx

@@ -9,6 +9,8 @@ import {
   DataTableEmptyState,
   type DataTableEmptyStateProps,
 } from "../empty-state/DataTableEmptyState";
+import { useTableKeyboardNav } from "../hooks/useTableKeyboardNav";
+import { type SelectionProps } from "../hooks/useTableSelection";
 import {
   DataTableLoadingState,
   type DataTableLoadingStateProps,
@@ -29,8 +31,6 @@ import {
 } from "../thead/DataTableThead";
 import { DataTableTr, type DataTableTrProps } from "../tr/DataTableTr";
 import { DataTableContextProvider } from "./DataTableRoot.context";
-import { useTableKeyboardNav } from "./useTableKeyboardNav";
-import { type SelectionProps } from "./useTableSelection";
 
 interface DataTableProps
   extends React.HTMLAttributes<HTMLTableElement>, SelectionProps {

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/AutoSuggest.tsx

@@ -1,7 +1,7 @@
-import React, { forwardRef, useState } from "react";
+import React, { type JSX, forwardRef, useState } from "react";
 import { Search } from "../../form/search";
 import { VStack } from "../../primitives/stack";
-import { Detail, Label } from "../../typography";
+import { BodyShort, Detail } from "../../typography";
 import Listbox from "../../utils/components/Listbox/root/ListboxRoot";
 import { DismissableLayer } from "../../utils/components/dismissablelayer/DismissableLayer";
 import { Floating } from "../../utils/components/floating/Floating";
@@ -63,6 +63,8 @@ const AutoSuggest = forwardRef<HTMLInputElement, AutoSuggestProps>(
                   setOpen(true);
                 }}
                 onFocus={() => setOpen(true)}
+                size="small"
+                autoComplete="off"
                 /* onKeyDown={(e) => {
               if (e.key === "Enter") {
                 createToken(filterText);
@@ -79,6 +81,7 @@ const AutoSuggest = forwardRef<HTMLInputElement, AutoSuggestProps>(
               setFocusedValue={setVirtuallyFocusedOptionId}
               onClose={handleClose}
               safeZoneAnchor={inputRef}
+              autoSuggestValue={value}
             />
           )}
         </Listbox>
@@ -94,6 +97,7 @@ type AutoSuggestPopupProps = {
   setFocusedValue: (value: string) => void;
   onClose: () => void;
   safeZoneAnchor: HTMLInputElement | null;
+  autoSuggestValue: string;
 };
 
 const AutoSuggestPopup = forwardRef<HTMLDivElement, AutoSuggestPopupProps>(
@@ -105,6 +109,7 @@ const AutoSuggestPopup = forwardRef<HTMLDivElement, AutoSuggestPopupProps>(
       setFocusedValue,
       onClose,
       safeZoneAnchor,
+      autoSuggestValue,
     },
     ref,
   ) => {
@@ -134,7 +139,12 @@ const AutoSuggestPopup = forwardRef<HTMLDivElement, AutoSuggestPopupProps>(
                       hasVirtualFocus={focusedValue === item.value}
                     >
                       <VStack gap="space-0">
-                        <Label as="div">{item.label}</Label>
+                        <BodyShort as="div" size="small">
+                          <HighlightText
+                            text={item.label}
+                            highlightText={autoSuggestValue}
+                          />
+                        </BodyShort>
                         {item.description && (
                           <Detail as="div">{item.description}</Detail>
                         )}
@@ -158,4 +168,56 @@ const AutoSuggestPopup = forwardRef<HTMLDivElement, AutoSuggestPopupProps>(
   },
 );
 
+function HighlightText({
+  text,
+  highlightText,
+}: {
+  text: string;
+  highlightText: string;
+}) {
+  if (!text || !highlightText) {
+    return <span>{text}</span>;
+  }
+
+  if (text === highlightText) {
+    return <Highlight text={text} />;
+  }
+
+  const { noMatches, matches } = highlightSplit(text, highlightText);
+
+  const highlighted: (string | JSX.Element)[] = [];
+
+  noMatches.forEach((noMatch, idx) => {
+    highlighted.push(<span key={`noMatch-${idx}`}>{noMatch}</span>);
+
+    if (matches && idx < matches.length) {
+      highlighted.push(<Highlight key={`match-${idx}`} text={matches[idx]} />);
+    }
+  });
+
+  return <span>{highlighted}</span>;
+}
+
+function Highlight({ text }: { text: string }) {
+  return <mark className="aksel-listbox__highlight">{text}</mark>;
+}
+
+function highlightSplit(text: string, highlightText: string) {
+  /* Skip loooong texts */
+  if (highlightText.length > 1000) {
+    return { noMatches: [text], matches: null };
+  }
+
+  /* Case insensitive filtering */
+  const filteringPattern = highlightText.replace(
+    /[-[\]/{}()*+?.\\^$|]/g,
+    "\\$&",
+  );
+  const regexp = new RegExp(filteringPattern, "gi");
+  const noMatches = text.split(regexp);
+  const matches = text.match(regexp);
+
+  return { noMatches, matches };
+}
+
 export { AutoSuggest };

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,
@@ -28,6 +27,7 @@ type TokenFilterProps = {
  * TODO:
  * - Implement onChange handler to update query state when user selects an autocomplete option.
  * - Handle token rendering and editing (e.g., show tokens for matched properties/operators/values, allow deleting tokens).
+ * - Writing "stance" still shows status and hostname options
  */
 export const TokenFilter = forwardRef<HTMLDivElement, TokenFilterProps>(
   ({ query, className, propertyDefinitions, options, onChange }, ref) => {
@@ -45,7 +45,7 @@ export const TokenFilter = forwardRef<HTMLDivElement, TokenFilterProps>(
       parsedPropertyOptions,
     );
 
-    const { addToken, removeToken } = createActionHandlers({
+    const { addToken, removeToken, updateOperation } = createActionHandlers({
       query,
       onChange,
     });
@@ -115,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>
     );
   },

package/src/data/toolbar/root/DataToolbarRoot.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { forwardRef } from "react";
 import { cl } from "../../../utils/helpers";
 import DataToolbarButton, {
   DataToolbarButtonProps,
@@ -12,23 +12,15 @@ import DataToolbarToggleButton, {
 } from "../toggle-button/DataToolbarToggleButton";
 
 interface DataToolbarProps extends React.HTMLAttributes<HTMLDivElement> {
-  children: React.ReactNode;
+  children?: never;
+  renderInput?: React.ReactNode;
+  renderPreferences?: React.ReactNode;
+  renderPagination?: React.ReactNode;
 }
 
 interface DataToolbarRootComponent extends React.ForwardRefExoticComponent<
   DataToolbarProps & React.RefAttributes<HTMLDivElement>
 > {
-  /**
-   * @see 🏷️ {@link DataToolbarSearchFieldProps}
-   * @example
-   * ```tsx
-   * <DataToolbar>
-   *   <DataToolbar.SearchField />
-   * </DataToolbar>
-   * ```
-   */
-  SearchField: typeof DataToolbarSearchField;
-
   /**
    * @see 🏷️ {@link DataToolbarButtonProps}
    * @example
@@ -39,48 +31,53 @@ interface DataToolbarRootComponent extends React.ForwardRefExoticComponent<
    * ```
    */
   Button: typeof DataToolbarButton;
-
-  /**
-   * @see 🏷️ {@link DataToolbarToggleButtonProps}
-   * @example
-   * ```tsx
-   * <DataToolbar>
-   *   <DataToolbar.ToggleButton />
-   * </DataToolbar>
-   * ```
-   */
-  ToggleButton: typeof DataToolbarToggleButton;
 }
 
-const DataToolbar = React.forwardRef<HTMLDivElement, DataToolbarProps>(
-  ({ children, className, ...rest }, forwardRef) => {
+const DataToolbar = forwardRef<HTMLDivElement, DataToolbarProps>(
+  (
+    { className, renderInput, renderPreferences, renderPagination, ...rest },
+    forwardedRef,
+  ) => {
     return (
       <div
-        ref={forwardRef}
+        ref={forwardedRef}
         {...rest}
         className={cl("aksel-data-toolbar", className)}
         role="toolbar"
       >
-        {children}
+        {renderInput && (
+          <div className="aksel-data-toolbar__input">{renderInput}</div>
+        )}
+
+        <div className="aksel-data-toolbar__actions">
+          {renderPagination && (
+            <div className="aksel-data-toolbar__pagination">
+              {renderPagination}
+            </div>
+          )}
+          {renderPreferences && (
+            <div className="aksel-data-toolbar__preferences">
+              {renderPreferences}
+            </div>
+          )}
+        </div>
       </div>
     );
   },
 ) as DataToolbarRootComponent;
 
-DataToolbar.SearchField = DataToolbarSearchField;
 DataToolbar.Button = DataToolbarButton;
-DataToolbar.ToggleButton = DataToolbarToggleButton;
 
 export {
   DataToolbar,
-  DataToolbarSearchField,
   DataToolbarButton,
+  DataToolbarSearchField,
   DataToolbarToggleButton,
 };
 export default DataToolbar;
 export type {
+  DataToolbarButtonProps,
   DataToolbarProps,
   DataToolbarSearchFieldProps,
-  DataToolbarButtonProps,
   DataToolbarToggleButtonProps,
 };

package/src/date/Date.Input.tsx

@@ -1,5 +1,6 @@
-import React, { InputHTMLAttributes, forwardRef, useRef } from "react";
+import React, { InputHTMLAttributes, forwardRef } from "react";
 import { CalendarIcon } from "@navikt/aksel-icons";
+import { Button } from "../button";
 import { ReadOnlyIcon } from "../form/ReadOnlyIcon";
 import { FormFieldProps, useFormField } from "../form/useFormField";
 import { BodyShort, ErrorMessage, Label } from "../typography";
@@ -68,10 +69,10 @@ const DateInput = forwardRef<HTMLInputElement, DateInputProps>((props, ref) => {
     description,
     variant = "datepicker",
     setAnchorRef,
+    "data-color": dataColor,
     ...rest
   } = props;
 
-  const buttonRef = useRef<HTMLButtonElement>(null);
   const translate = useDateTranslationContext().translate;
 
   const isDatepickerVariant = variant === "datepicker";
@@ -113,6 +114,7 @@ const DateInput = forwardRef<HTMLInputElement, DateInputProps>((props, ref) => {
           "aksel-date__field--readonly": readOnly,
         },
       )}
+      data-color={dataColor}
     >
       <Label
         htmlFor={inputProps.id}
@@ -142,7 +144,7 @@ const DateInput = forwardRef<HTMLInputElement, DateInputProps>((props, ref) => {
           {...omit(rest, ["error", "errorId", "size"])}
           {...inputProps}
           autoComplete="off"
-          aria-controls={context?.open ? context.ariaId : undefined}
+          aria-controls={context.open ? context.ariaId : undefined}
           readOnly={readOnly}
           className={cl(
             "aksel-date__field-input",
@@ -152,23 +154,22 @@ const DateInput = forwardRef<HTMLInputElement, DateInputProps>((props, ref) => {
           )}
           size={isDatepickerVariant ? 11 : 14}
         />
-        <button
+        <Button
           disabled={inputProps.disabled || readOnly}
           tabIndex={readOnly ? -1 : undefined}
-          onClick={() => {
-            context?.onOpen();
-            setAnchorRef?.(buttonRef.current);
-          }}
+          onClick={context.onOpen}
           type="button"
           className="aksel-date__field-button"
-          ref={buttonRef}
-        >
-          <CalendarIcon
-            title={translate(
-              conditionalVariables.iconTitle[context?.open ? "close" : "open"],
-            )}
-          />
-        </button>
+          ref={setAnchorRef}
+          icon={<CalendarIcon aria-hidden />}
+          // If we have the title on the icon, NVDA will read "close" when focusing
+          // the button after closing the popup, even if we wait a tick.
+          title={translate(
+            conditionalVariables.iconTitle[context.open ? "close" : "open"],
+          )}
+          variant="secondary"
+          size={size}
+        />
       </div>
       <div
         className="aksel-form-field__error"