@navikt/ds-react 6.7.1 → 6.9.0

package/src/form/combobox/FilteredOptions/useVirtualFocus.ts

@@ -68,9 +68,9 @@ const useVirtualFocus = (
     const _currentIndex = elementsAbleToReceiveFocus.indexOf(activeElement);
     if (_currentIndex === elementsAbleToReceiveFocus.length - 1) {
       return;
-    } else {
-      _moveFocusAndScrollTo(elementsAbleToReceiveFocus[_currentIndex + 1]);
     }
+
+    _moveFocusAndScrollTo(elementsAbleToReceiveFocus[_currentIndex + 1]);
   };
 
   const moveFocusToTop = () => _moveFocusAndScrollTo(undefined);

package/src/form/combobox/combobox-utils.ts

@@ -10,12 +10,12 @@ const isInList = (option: ComboboxOption | string, list: ComboboxOption[]) => {
     return list.some(
       (listItem) => listItem.label === option || listItem.value === option,
     );
-  } else {
-    return list.some(
-      (listItem) =>
-        listItem.label === option.label && listItem.value === option.value,
-    );
   }
+
+  return list.some(
+    (listItem) =>
+      listItem.label === option.label && listItem.value === option.value,
+  );
 };
 
 const toComboboxOption = (value: string): ComboboxOption => ({

package/src/form/file-upload/FileUpload.context.tsx

@@ -1,5 +1,5 @@
 import { createContext } from "../../util/create-context";
-import { ComponentTranslation } from "./i18n/i18n.types";
+import { ComponentTranslation } from "../../util/i18n/i18n.types";
 
 export type FileUploadLocaleContextProps = {
   translations?: ComponentTranslation<"FileUpload">;

package/src/form/file-upload/FileUpload.tsx

@@ -1,7 +1,7 @@
 import cl from "clsx";
 import React, { HTMLAttributes, forwardRef } from "react";
+import { ComponentTranslation } from "../../util/i18n/i18n.types";
 import { FileUploadLocaleContextProvider } from "./FileUpload.context";
-import { ComponentTranslation } from "./i18n/i18n.types";
 import Trigger from "./parts/Trigger";
 import Dropzone from "./parts/dropzone/Dropzone";
 import Item from "./parts/item/Item";

package/src/form/file-upload/parts/dropzone/Dropzone.tsx

@@ -5,10 +5,10 @@ import { Button } from "../../../../button";
 import { BodyShort, ErrorMessage, Label } from "../../../../typography";
 import { composeEventHandlers } from "../../../../util/composeEventHandlers";
 import { useId } from "../../../../util/hooks";
+import { useI18n } from "../../../../util/i18n/i18n.context";
 import { omit } from "../../../../util/omit";
 import { useFormField } from "../../../useFormField";
 import { useFileUploadTranslation } from "../../FileUpload.context";
-import { useI18n } from "../../i18n/i18n.context";
 import { useFileUpload } from "../../useFileUpload";
 import { FileUploadDropzoneProps } from "./dropzone.types";
 import { useDropzone } from "./useDropzone";

package/src/form/file-upload/parts/dropzone/dropzone.types.ts

@@ -1,6 +1,6 @@
+import { ComponentTranslation } from "../../../../util/i18n/i18n.types";
 import { FormFieldProps } from "../../../useFormField";
 import { FileUploadBaseProps } from "../../FileUpload.types";
-import { ComponentTranslation } from "../../i18n/i18n.types";
 
 export interface FileUploadDropzoneProps
   extends FileUploadBaseProps,

package/src/form/file-upload/parts/item/Item.tsx

@@ -3,9 +3,9 @@ import React, { MouseEvent, forwardRef } from "react";
 import { ExclamationmarkTriangleIcon } from "@navikt/aksel-icons";
 import { BodyShort } from "../../../../typography";
 import { OverridableComponent } from "../../../../util";
+import { useI18n } from "../../../../util/i18n/i18n.context";
+import { ComponentTranslation } from "../../../../util/i18n/i18n.types";
 import { useFileUploadTranslation } from "../../FileUpload.context";
-import { useI18n } from "../../i18n/i18n.context";
-import { ComponentTranslation } from "../../i18n/i18n.types";
 import { FileItem } from "./Item.types";
 import ItemButton from "./ItemButton";
 import ItemIcon from "./ItemIcon";

package/src/form/file-upload/parts/item/ItemIcon.tsx

@@ -30,7 +30,9 @@ function ItemIcon({ isLoading, file, showError }: ItemIconProps) {
         <Loader size="large" />
       </div>
     );
-  } else if (showError) {
+  }
+
+  if (showError) {
     return (
       <div className="navds-file-item__icon">
         <FileXMarkIcon {...iconProps} />

package/src/form/file-upload/utils/is-accepted-file-type.ts

@@ -15,11 +15,14 @@ export function isAcceptedFileType(
 
     if (isExtensionType) {
       return file.name.toLowerCase().endsWith(validType.toLowerCase());
-    } else if (isWildcardMimeType) {
+    }
+
+    if (isWildcardMimeType) {
       const baseMimeType = mimeType.replace(/\/.*$/, "");
       const baseValidType = validType.replace(/\/.*$/, "");
       return baseMimeType === baseValidType;
     }
+
     return mimeType === validType;
   });
 }

package/src/form/form-progress/FormProgress.tsx

@@ -0,0 +1,152 @@
+import React, { forwardRef } from "react";
+import { ChevronDownIcon } from "@navikt/aksel-icons";
+import Button from "../../button/Button";
+import Collapsible from "../../collapsible/Collapsible";
+import { HStack } from "../../layout/stack";
+import { ProgressBar } from "../../progress-bar";
+import { Stepper, StepperStepProps } from "../../stepper";
+import { BodyShort } from "../../typography";
+import { useI18n } from "../../util/i18n/i18n.context";
+import { ComponentTranslation } from "../../util/i18n/i18n.types";
+
+export interface FormProgressProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Total number of steps.
+   */
+  totalSteps: number;
+  /**
+   * Current active step.
+   *
+   * Index starts at 1, not 0.
+   */
+  activeStep: number;
+  /**
+   * Shows Stepper if `true`, hides if `false`.
+   * Using this prop removes automatic control of open-state.
+   */
+  open?: boolean;
+  /**
+   * Callback for current open-state
+   */
+  onOpenChange?: (open: boolean) => void;
+  /**
+   * Should contain <FormProgress.Step> elements.
+   */
+  children: React.ReactNode;
+  /**
+   * Callback for next `activeStep`.
+   *
+   * Index starts at 1, not 0.
+   */
+  onStepChange?: (step: number) => void;
+  /**
+   * Makes Stepper non-interactive if false.
+   * @default true
+   */
+  interactiveSteps?: boolean;
+  /**
+   * i18n API for customizing texts and labels.
+   */
+  translations?: ComponentTranslation<"FormProgress">;
+}
+
+export type FormProgressStepProps = StepperStepProps;
+
+interface FormProgressComponent
+  extends React.ForwardRefExoticComponent<
+    FormProgressProps & React.RefAttributes<HTMLDivElement>
+  > {
+  /**
+   * To be used inside `<FormProgress>`.
+   */
+  Step: typeof Stepper.Step;
+}
+
+/**
+ * Component for visualizing progression in a form with multiple steps.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/formprogress)
+ * @see 🏷️ {@link FormProgressProps}
+ *
+ * @example
+ * <FormProgress activeStep={2} totalSteps={3}>
+ *   <FormProgress.Step completed href="#">Children</FormProgress.Step>
+ *   <FormProgress.Step href="#">Personal information</FormProgress.Step>
+ *   <FormProgress.Step interactive={false}>Summary</FormProgress.Step>
+ * </FormProgress>
+ */
+export const FormProgress = forwardRef<HTMLDivElement, FormProgressProps>(
+  (
+    {
+      totalSteps,
+      activeStep,
+      open,
+      onOpenChange,
+      children,
+      onStepChange,
+      interactiveSteps,
+      translations,
+      ...rest
+    }: FormProgressProps,
+    ref,
+  ) => {
+    const translate = useI18n("FormProgress", translations);
+
+    return (
+      <div ref={ref} {...rest}>
+        <ProgressBar
+          aria-hidden
+          value={activeStep}
+          valueMax={totalSteps}
+          className="navds-form-progress__bar"
+        />
+
+        <Collapsible lazy open={open} onOpenChange={onOpenChange}>
+          <HStack justify="space-between" align="center">
+            <BodyShort as="span">
+              {translate("step", {
+                replacements: { activeStep, totalSteps },
+              })}
+            </BodyShort>
+            <Collapsible.Trigger asChild aria-expanded={undefined}>
+              <Button
+                variant="tertiary"
+                size="small"
+                className="navds-form-progress__button"
+                icon={<ChevronDownIcon aria-hidden />}
+              >
+                <span className="navds-form-progress__btn-txt-hide">
+                  {translate("hideAllSteps")}
+                </span>
+                <span className="navds-form-progress__btn-txt-show">
+                  {translate("showAllSteps")}
+                </span>
+              </Button>
+            </Collapsible.Trigger>
+          </HStack>
+
+          <Collapsible.Content className="navds-form-progress__collapsible">
+            <div className="navds-form-progress__collapsible-content">
+              <div className="navds-form-progress__stepper">
+                <Stepper
+                  activeStep={activeStep}
+                  onStepChange={onStepChange}
+                  interactive={interactiveSteps}
+                >
+                  {children}
+                </Stepper>
+              </div>
+            </div>
+          </Collapsible.Content>
+        </Collapsible>
+      </div>
+    );
+  },
+) as FormProgressComponent;
+
+FormProgress.Step = Stepper.Step;
+
+export const FormProgressStep = Stepper.Step;
+
+export default FormProgress;

package/src/form/form-progress/index.ts

@@ -0,0 +1,7 @@
+"use client";
+export {
+  default as FormProgress,
+  type FormProgressProps,
+  FormProgressStep,
+  type FormProgressStepProps,
+} from "./FormProgress";

package/src/index.ts

@@ -53,7 +53,7 @@ export {
   type VStackProps,
 } from "./layout/stack";
 export { Link, type LinkProps } from "./link";
-export { List, type ListProps } from "./list";
+export { List, type ListProps, type ListItemProps } from "./list";
 export { Loader, type LoaderProps } from "./loader";
 export { Modal, type ModalProps } from "./modal";
 export { Pagination, type PaginationProps } from "./pagination";
@@ -141,6 +141,7 @@ export {
   type FilesPartitioned,
 } from "./form/file-upload";
 export { FormSummary, type FormSummaryProps } from "./form/form-summary";
+export { FormProgress, type FormProgressProps } from "./form/form-progress";
 export {
   Radio,
   RadioGroup,

package/src/layout/bleed/Bleed.tsx

@@ -8,8 +8,10 @@ export type BleedSpacingInline = "0" | "full" | "px" | SpacingScale;
 export type BleedSpacingBlock = "0" | "px" | SpacingScale;
 
 export interface BleedProps extends React.HTMLAttributes<HTMLDivElement> {
-  /** **Negative** horizontal margin around children.
-   * Accepts a spacing token or an object of spacing tokens for different breakpoints.
+  /**
+   * **Negative** horizontal margin around children.
+   * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
+   * or an object of spacing tokens for different breakpoints.
    *
    * The `px` value is useful to nudge by just 1px.
    * The `full` value is used to extend the margin to the full width of the parent.
@@ -22,8 +24,10 @@ export interface BleedProps extends React.HTMLAttributes<HTMLDivElement> {
   marginInline?: ResponsiveProp<
     BleedSpacingInline | `${BleedSpacingInline} ${BleedSpacingInline}`
   >;
-  /** **Negative** vertical margin around children.
-   *  Accepts a spacing token or an object of spacing tokens for different breakpoints.
+  /**
+   * **Negative** vertical margin around children.
+   * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
+   * or an object of spacing tokens for different breakpoints.
    *
    * The `px` value is useful to nudge by just 1px.
    * This prop does **not** accept the `full` value.

package/src/layout/box/Box.tsx

@@ -17,7 +17,10 @@ export interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {
   background?: BackgroundToken;
   /** CSS `border-color` property. Accepts a color token. */
   borderColor?: BorderColorToken;
-  /** CSS `border-radius` property. Accepts a radius token, or an object of radius tokens for different breakpoints.
+  /**
+   * CSS `border-radius` property.
+   * Accepts a [radius token](https://aksel.nav.no/grunnleggende/styling/design-tokens#6d79c5605d31)
+   * or an object of radius tokens for different breakpoints.
    * @example
    * borderRadius='full'
    * borderRadius='0 full large small'
@@ -31,13 +34,19 @@ export interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {
    * borderWidth='1 2 3 4'
    */
   borderWidth?: SpaceDelimitedAttribute<"0" | "1" | "2" | "3" | "4" | "5">;
-  /** Padding around children. Accepts a spacing token or an object of spacing tokens for different breakpoints.
+  /**
+   * Padding around children.
+   * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
+   * or an object of spacing tokens for different breakpoints.
    * @example
    * padding='4'
    * padding={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
    */
   padding?: ResponsiveProp<SpacingScale>;
-  /** Horizontal padding around children. Accepts a spacing token or an object of spacing tokens for different breakpoints.
+  /**
+   * Horizontal padding around children.
+   * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
+   * or an object of spacing tokens for different breakpoints.
    * @example
    * paddingInline='4'
    * paddingInline='4 5'
@@ -46,7 +55,10 @@ export interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {
   paddingInline?: ResponsiveProp<
     SpacingScale | `${SpacingScale} ${SpacingScale}`
   >;
-  /** Vertical padding around children. Accepts a spacing token or an object of spacing tokens for different breakpoints.
+  /**
+   * Vertical padding around children.
+   * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
+   * or an object of spacing tokens for different breakpoints.
    * @example
    * paddingBlock='4'
    * paddingBlock='4 5'

package/src/layout/grid/HGrid.tsx

@@ -6,7 +6,7 @@ import { ResponsiveProp, SpacingScale } from "../utilities/types";
 export interface HGridProps extends HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
   /**
-   * Number of columns to display. Can be a number, a string with a unit, or tokens for specific breakpoints.
+   * Number of columns to display. Can be a number, a string, or an object with values for specific breakpoints.
    * Sets `grid-template-columns`, so `fr`, `minmax` etc. works.
    * @example
    * columns={{ sm: 1, md: 1, lg: "1fr auto", xl: "1fr auto"}}
@@ -14,12 +14,16 @@ export interface HGridProps extends HTMLAttributes<HTMLDivElement> {
    * columns="repeat(3, minmax(0, 1fr))"
    */
   columns?: ResponsiveProp<number | string>;
-  /** Spacing between columns. Based on spacing-tokens.
+  /**
+   * Spacing between columns.
+   * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
+   * or an object of spacing tokens for different breakpoints.
    * @example
    * gap="6"
+   * gap="8 4"
    * gap={{ sm: "2", md: "2", lg: "6", xl: "6"}}
    */
-  gap?: ResponsiveProp<SpacingScale>;
+  gap?: ResponsiveProp<SpacingScale | `${SpacingScale} ${SpacingScale}`>;
   /**
    * Vertical alignment of children. Elements will by default stretch to the height of parent-element.
    */

package/src/layout/stack/Stack.tsx

@@ -35,6 +35,8 @@ export interface StackProps extends HTMLAttributes<HTMLDivElement> {
   wrap?: boolean;
   /**
    * CSS `gap` property.
+   * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
+   * or an object of spacing tokens for different breakpoints.
    *
    * @example
    * gap='4'
@@ -49,7 +51,9 @@ export interface StackProps extends HTMLAttributes<HTMLDivElement> {
    * direction='row'
    * direction={{xs: 'row', sm: 'column'}}
    */
-  direction?: ResponsiveProp<"row" | "column">;
+  direction?: ResponsiveProp<
+    "row" | "column" | "row-reverse" | "column-reverse"
+  >;
 }
 
 export const Stack: OverridableComponent<StackProps, HTMLDivElement> =

package/src/layout/utilities/css.ts

@@ -44,7 +44,9 @@ const translateTokenStringToCSS = (
       if (componentProp === "margin-inline" && x === "full") {
         const width = 100 / arr.length;
         return `calc((100vw - ${width}%)/-2)`;
-      } else if (componentProp === "padding-inline" && x === "full") {
+      }
+
+      if (componentProp === "padding-inline" && x === "full") {
         const width = 100 / arr.length;
         return `calc((100vw - ${width}%)/2)`;
       }

package/src/list/List.tsx

@@ -10,12 +10,24 @@ export interface ListComponent
   extends React.ForwardRefExoticComponent<
     ListProps & React.RefAttributes<HTMLDivElement>
   > {
-  /**
-   * @see 🏷️ {@link ListItemProps}
-   */
   Item: typeof ListItem;
 }
 
+/**
+ * A list component
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/list)
+ * @see 🏷️ {@link ListProps | Props}
+ *
+ * @example
+ * ```jsx
+ * <List>
+ *   <List.Item>Coffee</List.Item>
+ *   <List.Item>Tea</List.Item>
+ *   <List.Item>Milk</List.Item>
+ * </List>
+ * ```
+ */
 export const List = forwardRef<HTMLDivElement, ListProps>(
   (
     {

package/src/list/ListItem.tsx

@@ -2,22 +2,11 @@ import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
 import { BodyShort, Label } from "../typography";
 import { ListContext } from "./context";
+import { ListItemProps } from "./types";
 
-export interface ListItemProps extends React.HTMLAttributes<HTMLLIElement> {
-  /**
-   * Content for description of the list item
-   */
-  children: React.ReactNode;
-  /**
-   * Title for the list item
-   */
-  title?: string;
-  /*
-   * Icon to be used as list marker for unordered lists.
-   */
-  icon?: React.ReactNode;
-}
-
+/**
+ * @see 🏷️ {@link ListItemProps}
+ */
 export const ListItem = forwardRef<HTMLLIElement, ListItemProps>(
   ({ className, children, title, icon, ...rest }, ref) => {
     const { listType, size } = useContext(ListContext);

package/src/list/index.ts

@@ -1,4 +1,4 @@
 "use client";
 export { default as List } from "./List";
-export type { ListProps } from "./types";
-export { default as ListItem, type ListItemProps } from "./ListItem";
+export type { ListProps, ListItemProps } from "./types";
+export { default as ListItem } from "./ListItem";

package/src/list/types.ts

@@ -1,26 +1,41 @@
 export interface ListProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
   /**
-   * HTML list element to render
+   * HTML list element to render.
    * @default "ul"
    */
   as?: "ul" | "ol";
   /**
-   * List heading title
+   * List heading title.
    */
   title?: string;
   /**
-   * List heading description
+   * List heading description.
    */
   description?: string;
   /**
-   * Allows setting a different HTML h-tag
+   * Allows setting a different HTML h-tag.
    * @default "h3"
    */
   headingTag?: React.ElementType<any>;
   /**
-   * Changes padding, height and font-size
+   * Changes padding, height and font-size.
    * @default "medium"
    */
   size?: "medium" | "small";
 }
+
+export interface ListItemProps extends React.HTMLAttributes<HTMLLIElement> {
+  /**
+   * List item content.
+   */
+  children: React.ReactNode;
+  /**
+   * List item title.
+   */
+  title?: string;
+  /**
+   * Icon to be used instead of bullet (unordered lists only).
+   */
+  icon?: React.ReactNode;
+}

package/src/modal/Modal.tsx

@@ -21,6 +21,8 @@ import {
 import dialogPolyfill, { needPolyfill } from "./dialog-polyfill";
 import { ModalProps } from "./types";
 
+const polyfillClassName = "navds-modal--polyfilled";
+
 interface ModalComponent
   extends React.ForwardRefExoticComponent<
     ModalProps & React.RefAttributes<HTMLDialogElement>
@@ -115,6 +117,9 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
       // We check both to avoid activating polyfill twice when not using portal.
       if (needPolyfill && modalRef.current && portalNode) {
         dialogPolyfill.registerDialog(modalRef.current);
+
+        // Force-add the "polyfilled" class in case of SSR (needPolyfill will always be false on the server)
+        modalRef.current.classList.add(polyfillClassName);
       }
       // We set autofocus on the dialog element to prevent the default behavior where first focusable element gets focus when modal is opened.
       // This is mainly to fix an edge case where having a Tooltip as the first focusable element would make it activate when you open the modal.
@@ -142,7 +147,7 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
       typeof width === "string" && ["small", "medium"].includes(width);
 
     const mergedClassName = cl("navds-modal", className, {
-      "navds-modal--polyfilled": needPolyfill,
+      polyfillClassName: needPolyfill,
       "navds-modal--autowidth": !width,
       [`navds-modal--${width}`]: isWidthPreset,
     });

package/src/modal/dialog-polyfill.ts

@@ -260,7 +260,7 @@ function dialogPolyfillInfo(dialog) {
       removed ? this.downgradeModal() : this.maybeHideModal();
       removed = false;
     }.bind(this);
-    var timeout;
+    var timeout: ReturnType<typeof setTimeout>;
     var delayModel = function (ev) {
       if (ev.target !== dialog) {
         return;
@@ -631,12 +631,16 @@ dialogPolyfill.DialogManager = function () {
     this.mo_ = new MutationObserver(function (records) {
       var removed = [];
       records.forEach(function (rec) {
+        // biome-ignore lint/suspicious/noImplicitAnyLet: Reduntant to type c in this scenario
         for (var i = 0, c; (c = rec.removedNodes[i]); ++i) {
           if (!(c instanceof Element)) {
             continue;
-          } else if (c.localName === "dialog") {
+          }
+
+          if (c.localName === "dialog") {
             removed.push(c);
           }
+
           removed = removed.concat(c.querySelectorAll("dialog"));
         }
       });
@@ -675,6 +679,7 @@ dialogPolyfill.DialogManager.prototype.unblockDocument = function () {
 dialogPolyfill.DialogManager.prototype.updateStacking = function () {
   var zIndex = this.zIndexHigh_;
 
+  // biome-ignore lint/suspicious/noImplicitAnyLet: Reduntant to type dpi in this scenario
   for (var i = 0, dpi; (dpi = this.pendingDialogStack[i]); ++i) {
     dpi.updateZIndex(--zIndex, --zIndex);
     if (i === 0) {
@@ -700,6 +705,7 @@ dialogPolyfill.DialogManager.prototype.containedByTopDialog_ = function (
   candidate,
 ) {
   while ((candidate = findNearestDialog(candidate))) {
+    // biome-ignore lint/suspicious/noImplicitAnyLet: Reduntant to type dpi in this scenario
     for (var i = 0, dpi; (dpi = this.pendingDialogStack[i]); ++i) {
       if (dpi.dialog === candidate) {
         return i === 0; // only valid if top-most