@navikt/ds-react 7.0.1 → 7.1.1

package/src/date/utils/__tests__/parse-dates.test.ts

@@ -4,29 +4,29 @@ import { describe, expect, test } from "vitest";
 import { isValidDate, parseDate } from "..";
 
 const check = (inp: string) =>
-  // eslint-disable-next-line vitest/valid-expect
+  // eslint-disable-next-line @vitest/valid-expect
   expect(isValidDate(parseDate(inp, new Date(), nb, "date", false)));
 
 const checkTwoDigit = (inp: string) =>
-  // eslint-disable-next-line vitest/valid-expect
+  // eslint-disable-next-line @vitest/valid-expect
   expect(isValidDate(parseDate(inp, new Date(), nb, "date", true)));
 
 const parse = (inp: string) => parseDate(inp, new Date(), nb, "date", false);
 
 describe("Parse date-inputs with 4-digit years", () => {
-  // eslint-disable-next-line vitest/expect-expect
+  // eslint-disable-next-line @vitest/expect-expect
   test("No spaces", () => {
     check("11052022").toBeTruthy();
     check("15052022").toBeTruthy();
   });
 
-  // eslint-disable-next-line vitest/expect-expect
+  // eslint-disable-next-line @vitest/expect-expect
   test(". divider", () => {
     check("1.5.2022").toBeTruthy();
     check("11.05.2022").toBeTruthy();
   });
 
-  // eslint-disable-next-line vitest/expect-expect
+  // eslint-disable-next-line @vitest/expect-expect
   test("/ divider", () => {
     check("1/5/2022").toBeTruthy();
     check("10/5/2022").toBeTruthy();
@@ -34,7 +34,7 @@ describe("Parse date-inputs with 4-digit years", () => {
     check("10/05/2022").toBeTruthy();
   });
 
-  // eslint-disable-next-line vitest/expect-expect
+  // eslint-disable-next-line @vitest/expect-expect
   test("- divider", () => {
     check("1-5-2022").toBeTruthy();
     check("10-5-2022").toBeTruthy();
@@ -44,19 +44,19 @@ describe("Parse date-inputs with 4-digit years", () => {
 });
 
 describe("Parse date-inputs with 2-digit years", () => {
-  // eslint-disable-next-line vitest/expect-expect
+  // eslint-disable-next-line @vitest/expect-expect
   test("No spaces", () => {
     checkTwoDigit("110522").toBeTruthy();
     checkTwoDigit("150522").toBeTruthy();
   });
 
-  // eslint-disable-next-line vitest/expect-expect
+  // eslint-disable-next-line @vitest/expect-expect
   test(". divider", () => {
     checkTwoDigit("1.5.22").toBeTruthy();
     checkTwoDigit("11.05.22").toBeTruthy();
   });
 
-  // eslint-disable-next-line vitest/expect-expect
+  // eslint-disable-next-line @vitest/expect-expect
   test("/ divider", () => {
     checkTwoDigit("1/5/22").toBeTruthy();
     checkTwoDigit("10/5/22").toBeTruthy();
@@ -64,7 +64,7 @@ describe("Parse date-inputs with 2-digit years", () => {
     checkTwoDigit("10/05/22").toBeTruthy();
   });
 
-  // eslint-disable-next-line vitest/expect-expect
+  // eslint-disable-next-line @vitest/expect-expect
   test("- divider", () => {
     checkTwoDigit("1-5-22").toBeTruthy();
     checkTwoDigit("10-5-22").toBeTruthy();
@@ -72,14 +72,14 @@ describe("Parse date-inputs with 2-digit years", () => {
     checkTwoDigit("10-05-22").toBeTruthy();
   });
 
-  // eslint-disable-next-line vitest/expect-expect
+  // eslint-disable-next-line @vitest/expect-expect
   test("Dissallow 1 and 3 digit years", () => {
     checkTwoDigit("11052").toBeFalsy();
     checkTwoDigit("1105222").toBeFalsy();
     checkTwoDigit("1105999").toBeFalsy();
   });
 
-  // eslint-disable-next-line vitest/expect-expect
+  // eslint-disable-next-line @vitest/expect-expect
   test("Dissallow date before year 1000", () => {
     checkTwoDigit("11050999").toBeFalsy();
     checkTwoDigit("11050010").toBeFalsy();

package/src/form/combobox/Combobox.tsx

@@ -1,6 +1,7 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
 import { BodyShort, ErrorMessage, Label } from "../../typography";
+import { ReadOnlyIcon } from "../ReadOnlyIcon";
 import ComboboxWrapper from "./ComboboxWrapper";
 import FilteredOptions from "./FilteredOptions/FilteredOptions";
 import { useFilteredOptionsContext } from "./FilteredOptions/filteredOptionsContext";
@@ -27,6 +28,7 @@ export const Combobox = forwardRef<
     inputProps,
     showErrorMsg,
     size = "medium",
+    readOnly,
   } = useInputContext();
 
   return (
@@ -44,6 +46,7 @@ export const Combobox = forwardRef<
           "navds-sr-only": hideLabel,
         })}
       >
+        <ReadOnlyIcon nativeReadOnly={false} readOnly={readOnly} />
         {label}
       </Label>
       {!!description && (

package/src/form/combobox/ComboboxProvider.tsx

@@ -36,6 +36,7 @@ const ComboboxProvider = forwardRef<HTMLInputElement, ComboboxProps>(
       children,
       defaultValue,
       disabled,
+      readOnly,
       error,
       errorId,
       filteredOptions: externalFilteredOptions,
@@ -63,6 +64,7 @@ const ComboboxProvider = forwardRef<HTMLInputElement, ComboboxProps>(
           defaultValue,
           description: rest.description,
           disabled,
+          readOnly,
           error,
           errorId,
           id,

package/src/form/combobox/ComboboxWrapper.tsx

@@ -9,6 +9,7 @@ type ComboboxWrapperProps = {
   inputProps: {
     disabled?: boolean;
   };
+  readOnly?: boolean;
   inputSize: string;
   toggleIsListOpen: (isListOpen: boolean) => void;
 };
@@ -21,7 +22,7 @@ const ComboboxWrapper = ({
   inputSize,
   toggleIsListOpen,
 }: ComboboxWrapperProps) => {
-  const { toggleOpenButtonRef, clearInput } = useInputContext();
+  const { toggleOpenButtonRef, clearInput, readOnly } = useInputContext();
 
   const wrapperRef = useRef<HTMLDivElement | null>(null);
   const [hasFocusWithin, setHasFocusWithin] = useState(false);
@@ -55,6 +56,8 @@ const ComboboxWrapper = ({
           "navds-combobox--error": hasError,
           "navds-combobox--disabled": !!inputProps.disabled,
           "navds-combobox--focused": hasFocusWithin,
+          "navds-combobox--readonly": readOnly,
+          "navds-form-field--readonly": readOnly,
         },
       )}
       onFocus={onFocusInsideWrapper}

package/src/form/combobox/FilteredOptions/filteredOptionsContext.tsx

@@ -58,7 +58,8 @@ const FilteredOptionsProvider = ({
     useState<HTMLUListElement | null>(null);
   const virtualFocus = useVirtualFocus(filteredOptionsRef);
   const {
-    inputProps: { "aria-describedby": partialAriaDescribedBy, id },
+    inputProps: { "aria-describedby": partialAriaDescribedBy, id, disabled },
+    readOnly,
     value,
     searchTerm,
     setValue,
@@ -136,6 +137,9 @@ const FilteredOptionsProvider = ({
 
   const toggleIsListOpen = useCallback(
     (newState?: boolean) => {
+      if (disabled || readOnly) {
+        return;
+      }
       virtualFocus.moveFocusToTop();
       if (newState ?? !isInternalListOpen) {
         setHideCaret(!!maxSelected?.isLimitReached);
@@ -147,6 +151,8 @@ const FilteredOptionsProvider = ({
       maxSelected?.isLimitReached,
       isInternalListOpen,
       setHideCaret,
+      disabled,
+      readOnly,
     ],
   );
 

package/src/form/combobox/Input/Input.context.tsx

@@ -32,6 +32,7 @@ interface Props {
     defaultValue: ComboboxProps["defaultValue"];
     description: ComboboxProps["description"];
     disabled: ComboboxProps["disabled"];
+    readOnly: ComboboxProps["readOnly"];
     error: ComboboxProps["error"];
     errorId: ComboboxProps["errorId"];
     id: ComboboxProps["id"];
@@ -48,6 +49,7 @@ const InputProvider = ({ children, value: props }: Props) => {
     defaultValue = "",
     description,
     disabled,
+    readOnly,
     error,
     errorId,
     id: externalId,
@@ -61,6 +63,7 @@ const InputProvider = ({ children, value: props }: Props) => {
     {
       description,
       disabled,
+      readOnly,
       error,
       errorId,
       id: externalId,

package/src/form/combobox/Input/Input.tsx

@@ -49,6 +49,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
       setValue,
       hideCaret,
       setHideCaret,
+      readOnly,
     } = useInputContext();
     const {
       selectedOptions,
@@ -149,6 +150,9 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
     const handleKeyDown = useCallback(
       (e: React.KeyboardEvent<HTMLInputElement>) => {
         setIsMouseLastUsedInputDevice(false);
+        if (readOnly) {
+          return;
+        }
         if (e.key === "Backspace") {
           if (value === "" && shouldShowSelectedOptions) {
             const lastSelectedOption =
@@ -214,6 +218,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
         setValue,
         searchTerm,
         shouldShowSelectedOptions,
+        readOnly,
       ],
     );
 
@@ -262,6 +267,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
         aria-activedescendant={activeDecendantId}
         aria-describedby={ariaDescribedBy}
         aria-invalid={inputProps["aria-invalid"]}
+        readOnly={readOnly}
       />
     );
   },

package/src/form/combobox/Input/InputController.tsx

@@ -45,6 +45,7 @@ export const InputController = forwardRef<
     size = "medium",
     inputRef,
     toggleOpenButtonRef,
+    readOnly,
   } = useInputContext();
 
   const { activeDecendantId } = useFilteredOptionsContext();
@@ -65,6 +66,7 @@ export const InputController = forwardRef<
           id={inputProps.id}
           ref={mergedInputRef}
           inputClassName={inputClassName}
+          readOnly={readOnly}
           {...rest}
         />
       ) : (
@@ -74,6 +76,7 @@ export const InputController = forwardRef<
             ref={mergedInputRef}
             inputClassName={inputClassName}
             shouldShowSelectedOptions={shouldShowSelectedOptions}
+            readOnly={readOnly}
             {...rest}
           />
         </SelectedOptions>

package/src/form/combobox/SelectedOptions/SelectedOptions.tsx

@@ -12,7 +12,7 @@ interface SelectedOptionsProps {
 
 const Option = ({ option }: { option: ComboboxOption }) => {
   const { isMultiSelect, removeSelectedOption } = useSelectedOptionsContext();
-  const { focusInput } = useInputContext();
+  const { focusInput, readOnly, inputProps } = useInputContext();
 
   const onClick = (e) => {
     e.stopPropagation();
@@ -28,7 +28,13 @@ const Option = ({ option }: { option: ComboboxOption }) => {
     );
   }
 
-  return <Chips.Removable onClick={onClick}>{option.label}</Chips.Removable>;
+  return readOnly || inputProps.disabled ? (
+    <Chips.Toggle variant="neutral" checkmark={false} as="div">
+      {option.label}
+    </Chips.Toggle>
+  ) : (
+    <Chips.Removable onClick={onClick}>{option.label}</Chips.Removable>
+  );
 };
 
 const SelectedOptions: React.FC<SelectedOptionsProps> = ({

package/src/form/combobox/SelectedOptions/selectedOptionsContext.tsx

@@ -4,7 +4,7 @@ import { usePrevious } from "../../../util/hooks";
 import { useInputContext } from "../Input/Input.context";
 import { isInList } from "../combobox-utils";
 import { useComboboxCustomOptions } from "../customOptionsContext";
-import { ComboboxOption, ComboboxProps, MaxSelected } from "../types";
+import { ComboboxOption, ComboboxProps } from "../types";
 
 type SelectedOptionsContextValue = {
   addSelectedOption: (option: ComboboxOption) => void;
@@ -12,7 +12,7 @@ type SelectedOptionsContextValue = {
   removeSelectedOption: (option: ComboboxOption) => void;
   prevSelectedOptions?: ComboboxOption[];
   selectedOptions: ComboboxOption[];
-  maxSelected?: MaxSelected & { isLimitReached: boolean };
+  maxSelected?: ComboboxProps["maxSelected"] & { isLimitReached: boolean };
   setSelectedOptions: (any) => void;
   toggleOption: (
     option: ComboboxOption,

package/src/form/combobox/types.ts

@@ -16,17 +16,6 @@ export type ComboboxOption = {
   value: string;
 };
 
-export type MaxSelected = {
-  /**
-   * The limit for maximum selected options
-   */
-  limit: number;
-  /**
-   * Override the message to display when the limit for maximum selected options has been reached
-   */
-  message?: string;
-};
-
 export interface ComboboxProps
   extends FormFieldProps,
     Omit<
@@ -135,7 +124,16 @@ export interface ComboboxProps
   /**
    * Options for the maximum number of selected options.
    */
-  maxSelected?: MaxSelected;
+  maxSelected?: {
+    /**
+     * The limit for maximum selected options
+     */
+    limit: number;
+    /**
+     * Override the message to display when the limit for maximum selected options has been reached
+     */
+    message?: string;
+  };
   /**
    * Set to `true` to enable inline autocomplete.
    *

package/src/form/error-summary/ErrorSummary.tsx

@@ -2,7 +2,7 @@ import cl from "clsx";
 import React, { HTMLAttributes, forwardRef, useRef } from "react";
 import { BodyShort, Heading } from "../../typography";
 import { composeEventHandlers } from "../../util/composeEventHandlers";
-import { useId, useMergeRefs } from "../../util/hooks";
+import { useMergeRefs } from "../../util/hooks";
 import ErrorSummaryItem from "./ErrorSummaryItem";
 
 export interface ErrorSummaryProps
@@ -33,13 +33,13 @@ interface ErrorSummaryComponent
     ErrorSummaryProps & React.RefAttributes<HTMLDivElement>
   > {
   /**
-   * Link to error.
+   * Error message with link to field.
    *
    * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
    *
    * @example
    * ```jsx
-   * <ErrorSummary.Item href="#1">
+   * <ErrorSummary.Item href="#id-til-alderfelt">
    *   Felt må fylles ut med alder
    * </ErrorSummary.Item>
    * ```
@@ -48,7 +48,7 @@ interface ErrorSummaryComponent
 }
 
 /**
- * A component that displays a summary of errors.
+ * Summary of errors in a form.
  *
  * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/errorsummary)
  * @see 🏷️ {@link ErrorSummaryProps}
@@ -77,15 +77,13 @@ export const ErrorSummary = forwardRef<HTMLDivElement, ErrorSummaryProps>(
     },
     ref,
   ) => {
-    const headingId = useId();
-
-    const sectionRef = useRef<HTMLDivElement>(null);
+    const wrapperRef = useRef<HTMLDivElement>(null);
     const headingRef = useRef<HTMLHeadingElement>(null);
 
-    const mergedRef = useMergeRefs(ref, sectionRef);
+    const mergedRef = useMergeRefs(ref, wrapperRef);
 
     return (
-      <section
+      <div
         ref={mergedRef}
         {...rest}
         className={cl(
@@ -94,11 +92,8 @@ export const ErrorSummary = forwardRef<HTMLDivElement, ErrorSummaryProps>(
           `navds-error-summary--${size}`,
         )}
         tabIndex={-1}
-        aria-live="polite"
-        aria-relevant="all"
-        aria-labelledby={headingId}
         onFocus={composeEventHandlers(rest.onFocus, (event) => {
-          if (event.target === sectionRef.current) {
+          if (event.target === wrapperRef.current) {
             headingRef?.current?.focus();
           }
         })}
@@ -107,7 +102,6 @@ export const ErrorSummary = forwardRef<HTMLDivElement, ErrorSummaryProps>(
           className="navds-error-summary__heading"
           as={headingTag}
           size="small"
-          id={headingId}
           ref={headingRef}
           tabIndex={-1}
         >
@@ -116,7 +110,7 @@ export const ErrorSummary = forwardRef<HTMLDivElement, ErrorSummaryProps>(
         <BodyShort as="ul" size={size} className="navds-error-summary__list">
           {children}
         </BodyShort>
-      </section>
+      </div>
     );
   },
 ) as ErrorSummaryComponent;

package/src/form/form-summary/FormSummaryEditLink.tsx

@@ -22,14 +22,17 @@ export interface FormSummaryEditProps
 export const FormSummaryEditLink: OverridableComponent<
   FormSummaryEditProps,
   HTMLAnchorElement
-> = forwardRef(({ children = "Endre svar", className, ...rest }, ref) => (
-  <Link
-    ref={ref}
-    {...rest}
-    className={cl("navds-form-summary__edit", className)}
-  >
-    {children}
-  </Link>
-));
+> = forwardRef(
+  ({ children = "Endre svar", className, as = "a", ...rest }, ref) => (
+    <Link
+      ref={ref}
+      as={as}
+      {...rest}
+      className={cl("navds-form-summary__edit", className)}
+    >
+      {children}
+    </Link>
+  ),
+);
 
 export default FormSummaryEditLink;

package/src/layout/page/parts/PageBlock.tsx

@@ -63,7 +63,7 @@ export const PageBlock: OverridableComponent<PageBlockProps, HTMLDivElement> =
           {...rest}
           className={cl(
             "navds-pageblock",
-            `navds-pageblock--${width}`,
+            width && `navds-pageblock--${width}`,
             className,
             { "navds-pageblock--gutters": gutters },
           )}

package/src/layout/stack/HStack.tsx

@@ -26,8 +26,8 @@ export type HStackProps = PrimitiveAsChildProps & Omit<StackProps, "direction">;
  * </HStack>
  */
 export const HStack: OverridableComponent<HStackProps, HTMLDivElement> =
-  forwardRef((props, ref) => {
-    return <Stack {...props} ref={ref} direction="row" />;
+  forwardRef(({ as = "div", ...rest }, ref) => {
+    return <Stack as={as} {...rest} ref={ref} direction="row" />;
   });
 
 export default HStack;

package/src/layout/stack/VStack.tsx

@@ -27,8 +27,10 @@ export type VStackProps = PrimitiveAsChildProps &
  * </VStack>
  */
 export const VStack: OverridableComponent<VStackProps, HTMLDivElement> =
-  forwardRef((props, ref) => {
-    return <Stack {...props} ref={ref} direction="column" wrap={false} />;
+  forwardRef(({ as = "div", ...rest }, ref) => {
+    return (
+      <Stack as={as} {...rest} ref={ref} direction="column" wrap={false} />
+    );
   });
 
 export default VStack;

package/src/list/List.tsx

@@ -1,15 +1,18 @@
 import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
-import { BodyShort, Heading } from "../typography";
-import { useId } from "../util/hooks";
+import { BodyLong, BodyShort, Heading } from "../typography";
 import { ListItem } from "./ListItem";
 import { ListContext } from "./context";
-import { ListProps } from "./types";
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import type { ListItemProps, ListProps } from "./types";
 
 export interface ListComponent
   extends React.ForwardRefExoticComponent<
     ListProps & React.RefAttributes<HTMLDivElement>
   > {
+  /**
+   * @see 🏷️ {@link ListItemProps}
+   */
   Item: typeof ListItem;
 }
 
@@ -42,47 +45,34 @@ export const List = forwardRef<HTMLDivElement, ListProps>(
     },
     ref,
   ) => {
-    const ariaId = useId();
+    const { size: contextSize } = useContext(ListContext);
 
-    const { isNested, size: _size } = useContext(ListContext);
-
-    const listSize = size ?? _size ?? "medium";
+    const listSize = size ?? contextSize;
     return (
       <ListContext.Provider
         value={{
           listType: ListTag,
-          isNested: isNested === null ? false : true,
           size: listSize,
         }}
       >
-        <div
+        <BodyLong
+          as="div"
           {...rest}
+          size={size}
           ref={ref}
-          className={cl("navds-list", `navds-list--${listSize}`, className, {
-            "navds-list--nested": isNested === null ? false : true,
-          })}
+          className={cl("navds-list", `navds-list--${listSize}`, className)}
         >
           {title && (
             <Heading
-              id={`tittel-${ariaId}`}
               size={listSize === "medium" ? "small" : "xsmall"}
               as={headingTag}
             >
               {title}
             </Heading>
           )}
-          {description && (
-            <BodyShort size={listSize} id={`description-${ariaId}`}>
-              {description}
-            </BodyShort>
-          )}
-          <ListTag
-            aria-labelledby={title && `tittel-${ariaId}`}
-            aria-describedby={description && `description-${ariaId}`}
-          >
-            {children}
-          </ListTag>
-        </div>
+          {description && <BodyShort size={listSize}>{description}</BodyShort>}
+          <ListTag role="list">{children}</ListTag>
+        </BodyLong>
       </ListContext.Provider>
     );
   },

package/src/list/ListItem.tsx

@@ -2,7 +2,7 @@ import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
 import { BodyLong } from "../typography";
 import { ListContext } from "./context";
-import { ListItemProps } from "./types";
+import type { ListItemProps } from "./types";
 
 /**
  * @see 🏷️ {@link ListItemProps}
@@ -21,7 +21,7 @@ export const ListItem = forwardRef<HTMLLIElement, ListItemProps>(
       <li {...rest} ref={ref} className={cl("navds-list__item", className)}>
         {listType === "ul" && (
           <div
-            className={cl({
+            className={cl("navds-list__item-marker", {
               "navds-list__item-marker--icon": icon,
               "navds-list__item-marker--bullet": !icon,
             })}
@@ -30,8 +30,8 @@ export const ListItem = forwardRef<HTMLLIElement, ListItemProps>(
               icon
             ) : (
               <svg
-                width="6"
-                height="6"
+                width="0.375rem"
+                height="0.375rem"
                 viewBox="0 0 6 6"
                 fill="none"
                 xmlns="http://www.w3.org/2000/svg"
@@ -45,14 +45,14 @@ export const ListItem = forwardRef<HTMLLIElement, ListItemProps>(
           </div>
         )}
 
-        <BodyLong as="div" size={size} className="navds-list__item-content">
+        <div>
           {title && (
             <BodyLong as="p" size={size} weight="semibold">
               {title}
             </BodyLong>
           )}
           {children}
-        </BodyLong>
+        </div>
       </li>
     );
   },

package/src/list/context.ts

@@ -2,13 +2,11 @@ import { createContext } from "react";
 import { ListProps } from "./types";
 
 interface ListContextProps {
-  listType: ListProps["as"];
-  isNested: boolean | null;
-  size: ListProps["size"];
+  listType: Exclude<ListProps["as"], undefined>;
+  size: Exclude<ListProps["size"], undefined>;
 }
 
 export const ListContext = createContext<ListContextProps>({
   listType: "ul",
-  isNested: null,
   size: "medium",
 });

package/src/list/types.ts

@@ -19,7 +19,7 @@ export interface ListProps extends React.HTMLAttributes<HTMLDivElement> {
    */
   headingTag?: React.ElementType<any>;
   /**
-   * Changes padding, height and font-size.
+   * Changes margin-block on list and font size on items.
    * @default "medium"
    */
   size?: "medium" | "small";