@navikt/ds-react 8.7.0 → 8.9.0

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

@@ -1,9 +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 { ListboxGroup } from "../../utils/components/Listbox/group/ListboxGroup";
-import { ListboxItem } from "../../utils/components/Listbox/item/ListboxItem";
+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";
@@ -22,7 +20,8 @@ interface AutoSuggestProps {
 
 const AutoSuggest = forwardRef<HTMLInputElement, AutoSuggestProps>(
   ({ options, onSelect, value, onChange, open, setOpen }, ref) => {
-    const [virtuallyFocusedItemId, setVirtuallyFocusedItemId] = useState("");
+    const [virtuallyFocusedOptionId, setVirtuallyFocusedOptionId] =
+      useState("");
 
     const [inputRef, setInputRef] = useState<HTMLInputElement | null>(null);
 
@@ -49,7 +48,7 @@ const AutoSuggest = forwardRef<HTMLInputElement, AutoSuggestProps>(
 
     return (
       <Floating>
-        <Listbox setVirtuallyFocusedItemId={setVirtuallyFocusedItemId}>
+        <Listbox setVirtuallyFocusedOptionId={setVirtuallyFocusedOptionId}>
           <Floating.Anchor>
             <Listbox.InputSlot>
               <Search
@@ -64,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);
@@ -76,10 +77,11 @@ const AutoSuggest = forwardRef<HTMLInputElement, AutoSuggestProps>(
             <AutoSuggestPopup
               options={options}
               onSelect={handleSelectOption}
-              focusedValue={virtuallyFocusedItemId}
-              setFocusedValue={setVirtuallyFocusedItemId}
+              focusedValue={virtuallyFocusedOptionId}
+              setFocusedValue={setVirtuallyFocusedOptionId}
               onClose={handleClose}
               safeZoneAnchor={inputRef}
+              autoSuggestValue={value}
             />
           )}
         </Listbox>
@@ -95,6 +97,7 @@ type AutoSuggestPopupProps = {
   setFocusedValue: (value: string) => void;
   onClose: () => void;
   safeZoneAnchor: HTMLInputElement | null;
+  autoSuggestValue: string;
 };
 
 const AutoSuggestPopup = forwardRef<HTMLDivElement, AutoSuggestPopupProps>(
@@ -106,6 +109,7 @@ const AutoSuggestPopup = forwardRef<HTMLDivElement, AutoSuggestPopupProps>(
       setFocusedValue,
       onClose,
       safeZoneAnchor,
+      autoSuggestValue,
     },
     ref,
   ) => {
@@ -124,18 +128,23 @@ const AutoSuggestPopup = forwardRef<HTMLDivElement, AutoSuggestPopupProps>(
           className="aksel-property-filter__popup"
         >
           <div className="aksel-property-filter__popup-inner">
-            <Listbox.List setVirtuallyFocusedItemId={setFocusedValue}>
+            <Listbox.Options setVirtuallyFocusedOptionId={setFocusedValue}>
               {options.map((group) => (
-                <ListboxGroup key={group.label} label={group.label}>
+                <Listbox.Group key={group.label} label={group.label}>
                   {group.options.map((item) => (
-                    <ListboxItem
+                    <Listbox.Option
                       key={item.value}
                       id={item.value}
                       onClick={() => onSelect(item)}
                       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>
                         )}
@@ -147,11 +156,11 @@ const AutoSuggestPopup = forwardRef<HTMLDivElement, AutoSuggestPopupProps>(
                           ))}
                         </div>
                       )} */}
-                    </ListboxItem>
+                    </Listbox.Option>
                   ))}
-                </ListboxGroup>
+                </Listbox.Group>
               ))}
-            </Listbox.List>
+            </Listbox.Options>
           </div>
         </Floating.Content>
       </DismissableLayer>
@@ -159,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/TokenFilter.tsx

@@ -28,6 +28,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) => {

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 : context?.open ? -1 : 0}
-          onClick={() => {
-            context?.onOpen();
-            setAnchorRef?.(buttonRef.current);
-          }}
+          tabIndex={readOnly ? -1 : undefined}
+          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"

package/src/date/datepicker/hooks/useDatepicker.tsx

@@ -90,12 +90,23 @@ interface UseDatepickerValue {
 }
 
 export type DateValidationT = {
+  /**
+   * Whether there are any validation errors.
+   * - When `true`, all the other properties will be `false`.
+   * - When `false`, at least one of the other properties will be `true`.
+   */
+  isValidDate: boolean;
+  /** Whether the date is a disabled date */
   isDisabled: boolean;
+  /** Whether the date falls on a weekend and `disableWeekends` is true */
   isWeekend: boolean;
+  /** Whether the input field is empty */
   isEmpty: boolean;
+  /** Whether the entered value cannot be parsed as a date (i.e. wrong format or non-existing date) */
   isInvalid: boolean;
-  isValidDate: boolean;
+  /** Whether the date is before `fromDate` */
   isBefore: boolean;
+  /** Whether the date is after `toDate` */
   isAfter: boolean;
 };
 
@@ -237,7 +248,9 @@ export const useDatepicker = (
 
     if (day && !selected) {
       handleOpen(false);
-      anchorRef?.focus();
+      // We use sync:false so that when Modal is used (see Date.Dialog.tsx), it is closed before
+      // we try to focus the open button (since native modal dialogs don't allow focus outside).
+      focusElement(anchorRef, { sync: false, preventScroll: true });
     }
 
     if (selected) {
@@ -315,10 +328,7 @@ export const useDatepicker = (
     open,
     onClose: () => {
       handleOpen(false);
-      /* Delay focus to allow "open"-button to update title before focus */
-      queueMicrotask(() =>
-        focusElement(anchorRef, { sync: false, preventScroll: true }),
-      );
+      focusElement(anchorRef, { sync: false, preventScroll: true });
     },
     onOpenToggle: () => handleOpen(!open),
     disabled,

package/src/date/monthpicker/hooks/useMonthPicker.tsx

@@ -74,11 +74,21 @@ interface UseMonthPickerValue {
 }
 
 export type MonthValidationT = {
+  /**
+   * Whether there are any validation errors.
+   * - When `true`, all the other properties will be `false`.
+   * - When `false`, at least one of the other properties will be `true`.
+   */
+  isValidMonth: boolean;
+  /** Whether the month is a disabled month */
   isDisabled: boolean;
+  /** Whether the input field is empty */
   isEmpty: boolean;
+  /** Whether the entered value cannot be parsed as a month (i.e. wrong format) */
   isInvalid: boolean;
-  isValidMonth: boolean;
+  /** Whether the month is before `fromDate` */
   isBefore: boolean;
+  /** Whether the month is after `toDate` */
   isAfter: boolean;
 };
 
@@ -311,10 +321,9 @@ export const useMonthpicker = (
     onOpenToggle: () => handleOpen(!open),
     onClose: () => {
       handleOpen(false);
-      /* Delay focus to allow "open"-button to update title before focus */
-      queueMicrotask(() =>
-        focusElement(anchorRef, { sync: false, preventScroll: true }),
-      );
+      // We use sync:false so that when Modal is used (see Date.Dialog.tsx), it is closed before
+      // we try to focus the open button (since native modal dialogs don't allow focus outside).
+      focusElement(anchorRef, { sync: false, preventScroll: true });
     },
     disabled,
   };

package/src/form/checkbox/CheckboxGroup.tsx

@@ -81,7 +81,7 @@ export const CheckboxGroup = forwardRef<
           "aksel-checkbox-group",
           `aksel-checkbox-group--${rest.size ?? fieldset?.size ?? "medium"}`,
         )}
-        nativeReadOnly={false}
+        _fieldsSupportNativeReadOnly={false}
       >
         <CheckboxGroupContext.Provider
           value={{

package/src/form/fieldset/Fieldset.tsx

@@ -10,25 +10,45 @@ import { useFieldset } from "./useFieldset";
 export interface FieldsetProps
   extends FormFieldProps, FieldsetHTMLAttributes<HTMLFieldSetElement> {
   /**
-   * FormFields in Fieldset
+   * Form fields in Fieldset.
    */
   children: React.ReactNode;
   /**
-   * Fieldset legend
+   * Fieldset legend.
    */
   legend: React.ReactNode;
   /**
-   * If enabled shows the legend and description for screenreaders only
+   * If enabled, shows the legend and description for screen readers only.
    */
   hideLegend?: boolean;
   /**
-   * Toggles error propagation to child-elements
+   * Toggles error propagation to child-elements.
    * @default true
    */
   errorPropagation?: boolean;
-  nativeReadOnly?: boolean;
+  /**
+   * @private
+   */
+  _fieldsSupportNativeReadOnly?: boolean;
 }
 
+/**
+ * Component for grouping form fields.
+ *
+ * **NB: Only for special use cases.** Form fields should not be grouped by default,
+ * except for checkboxes and radio buttons, for which CheckboxGroup/RadioGroup should be used instead.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/fieldset)
+ * @see 🏷️ {@link FieldsetProps}
+ *
+ * @example
+ * ```jsx
+ * <Fieldset legend="Telefonnummer">
+ *   <TextField label="Landkode" />
+ *   <TextField label="Nummer" />
+ * </Fieldset>
+ * ```
+ */
 export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
   (props, ref) => {
     const legendId = useId();
@@ -51,7 +71,7 @@ export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
       legend,
       description,
       hideLegend,
-      nativeReadOnly = true,
+      _fieldsSupportNativeReadOnly = true,
       ...rest
     } = props;
 
@@ -93,7 +113,11 @@ export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
             })}
           >
             {readOnly &&
-              (nativeReadOnly ? <ReadOnlyIcon /> : <ReadOnlyIconWithTitle />)}
+              (_fieldsSupportNativeReadOnly ? (
+                <ReadOnlyIcon />
+              ) : (
+                <ReadOnlyIconWithTitle />
+              ))}
             {legend}
           </Label>
           {!!description && (

package/src/form/radio/RadioGroup.tsx

@@ -84,7 +84,7 @@ export const RadioGroup = forwardRef<HTMLFieldSetElement, RadioGroupProps>(
           "aksel-radio-group",
           `aksel-radio-group--${rest.size ?? fieldset?.size ?? "medium"}`,
         )}
-        nativeReadOnly={false}
+        _fieldsSupportNativeReadOnly={false}
       >
         <RadioGroupContext.Provider
           value={{

package/src/index.ts

@@ -178,6 +178,7 @@ export {
   type InfoCardHeaderProps,
   type InfoCardTitleProps,
   type InfoCardContentProps,
+  type InfoCardMessageProps,
 } from "./alert/info-card";
 export {
   LocalAlert,

package/src/internal-header/InternalHeaderButton.tsx

@@ -7,18 +7,27 @@ export interface InternalHeaderButtonProps extends React.ButtonHTMLAttributes<HT
    * Application Button
    */
   children: React.ReactNode;
+  /**
+   * Active state for element.
+   * @default false
+   */
+  isActive?: boolean;
 }
 export const InternalHeaderButton: OverridableComponent<
   InternalHeaderButtonProps,
   HTMLButtonElement
-> = forwardRef(({ as: Component = "button", className, ...rest }, ref) => {
-  return (
-    <Component
-      {...rest}
-      ref={ref}
-      className={cl("aksel-internalheader__button", className)}
-    />
-  );
-});
+> = forwardRef(
+  ({ as: Component = "button", className, isActive = false, ...rest }, ref) => {
+    return (
+      <Component
+        aria-current={isActive || undefined}
+        {...rest}
+        ref={ref}
+        className={cl("aksel-internalheader__button", className)}
+        data-active={isActive}
+      />
+    );
+  },
+);
 
 export default InternalHeaderButton;

package/src/read-more/ReadMore.tsx

@@ -43,6 +43,16 @@ export interface ReadMoreProps extends React.ButtonHTMLAttributes<HTMLButtonElem
    * @private
    */
   "data-color"?: Exclude<AkselColor, AkselStatusColorRole>;
+  /**
+   * Changes variant of ReadMore.
+   *
+   * `moderate` is a more visually prominent variant.
+   *
+   *
+   * `ghost` is more subtle, mainly for use in forms.
+   * @default "ghost"
+   */
+  variant?: "moderate" | "ghost";
 }
 
 /**
@@ -66,6 +76,7 @@ export const ReadMore = forwardRef<HTMLButtonElement, ReadMoreProps>(
       onClick,
       size = "medium",
       onOpenChange,
+      variant = "ghost",
       ...rest
     }: ReadMoreProps,
     ref,
@@ -80,13 +91,9 @@ export const ReadMore = forwardRef<HTMLButtonElement, ReadMoreProps>(
 
     return (
       <div
-        className={cl(
-          "aksel-read-more",
-          `aksel-read-more--${size}`,
-          className,
-          { "aksel-read-more--open": _open },
-        )}
-        data-volume="low"
+        className={cl("aksel-read-more", `aksel-read-more--${size}`, className)}
+        data-variant={variant}
+        data-state={_open ? "open" : "closed"}
       >
         <button
           {...rest}
@@ -97,7 +104,6 @@ export const ReadMore = forwardRef<HTMLButtonElement, ReadMoreProps>(
           })}
           onClick={composeEventHandlers(onClick, () => _setOpen((x) => !x))}
           aria-expanded={_open}
-          data-state={_open ? "open" : "closed"}
         >
           <ChevronDownIcon
             className="aksel-read-more__expand-icon"
@@ -106,14 +112,7 @@ export const ReadMore = forwardRef<HTMLButtonElement, ReadMoreProps>(
           <span>{header}</span>
         </button>
 
-        <BodyLong
-          as="div"
-          className={cl("aksel-read-more__content", {
-            "aksel-read-more__content--closed": !_open,
-          })}
-          size={typoSize}
-          data-state={_open ? "open" : "closed"}
-        >
+        <BodyLong as="div" className="aksel-read-more__content" size={typoSize}>
           {children}
         </BodyLong>
       </div>

package/src/types/index.ts

@@ -1 +1 @@
-export * from "./theme";
+export { AkselColor, CustomAkselColor } from "./theme";

package/src/utils/components/Listbox/group/ListboxGroup.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { Label } from "../../../../typography";
 import { useId } from "../../../../utils-external";
 
 interface ListboxGroupProps {
@@ -15,9 +16,15 @@ function ListboxGroup({ label, children }: ListboxGroupProps) {
       className="aksel-listbox__group"
       aria-labelledby={labelId}
     >
-      <div id={labelId} aria-hidden>
+      <Label
+        as="div"
+        size="small"
+        id={labelId}
+        aria-hidden
+        className="aksel-listbox__group-label"
+      >
         {label}
-      </div>
+      </Label>
       {children}
     </div>
   );