@navikt/ds-react 5.12.5 → 5.14.0

package/src/form/combobox/customOptionsContext.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useCallback, createContext, useContext } from "react";
+import React, { createContext, useCallback, useContext, useState } from "react";
 import { useInputContext } from "./Input/inputContext";
 
 type CustomOptionsContextType = {
@@ -9,7 +9,7 @@ type CustomOptionsContextType = {
 };
 
 const CustomOptionsContext = createContext<CustomOptionsContextType>(
-  {} as CustomOptionsContextType
+  {} as CustomOptionsContextType,
 );
 
 export const CustomOptionsProvider = ({
@@ -26,11 +26,11 @@ export const CustomOptionsProvider = ({
   const removeCustomOption = useCallback(
     (option: string) => {
       setCustomOptions((prevCustomOptions) =>
-        prevCustomOptions.filter((o) => o !== option)
+        prevCustomOptions.filter((o) => o !== option),
       );
       focusInput();
     },
-    [focusInput, setCustomOptions]
+    [focusInput, setCustomOptions],
   );
 
   const addCustomOption = useCallback(
@@ -42,7 +42,7 @@ export const CustomOptionsProvider = ({
       }
       focusInput();
     },
-    [focusInput, isMultiSelect, setCustomOptions]
+    [focusInput, isMultiSelect, setCustomOptions],
   );
 
   const customOptionsState = {
@@ -63,7 +63,7 @@ export const useCustomOptionsContext = () => {
   const context = useContext(CustomOptionsContext);
   if (!context) {
     throw new Error(
-      "useCustomOptionsContext must be used within a CustomOptionsProvider"
+      "useCustomOptionsContext must be used within a CustomOptionsProvider",
     );
   }
   return context;

package/src/form/combobox/types.ts

@@ -68,7 +68,7 @@ export interface ComboboxProps
    */
   onChange?: (
     event: ChangeEvent<HTMLInputElement> | null,
-    value?: string
+    value?: string,
   ) => void;
   /**
    * Callback function triggered whenever the input field is cleared
@@ -88,7 +88,7 @@ export interface ComboboxProps
   onToggleSelected?: (
     option: string,
     isSelected: boolean,
-    isCustomOption: boolean
+    isCustomOption: boolean,
   ) => void;
   /**
    * List of selected options.

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

@@ -1,8 +1,8 @@
-import React, { forwardRef, HTMLAttributes, isValidElement } from "react";
 import cl from "clsx";
-import { Heading, BodyShort } from "../../typography";
+import React, { HTMLAttributes, forwardRef, isValidElement } from "react";
+import { BodyShort, Heading } from "../../typography";
+import { useId } from "../../util/hooks";
 import ErrorSummaryItem, { ErrorSummaryItemType } from "./ErrorSummaryItem";
-import { useId } from "../../util";
 
 export interface ErrorSummaryProps extends HTMLAttributes<HTMLDivElement> {
   /**
@@ -72,7 +72,7 @@ export const ErrorSummary = forwardRef<HTMLDivElement, ErrorSummaryProps>(
       heading,
       ...rest
     },
-    ref
+    ref,
   ) => {
     const headingId = useId();
 
@@ -83,7 +83,7 @@ export const ErrorSummary = forwardRef<HTMLDivElement, ErrorSummaryProps>(
         className={cl(
           className,
           "navds-error-summary",
-          `navds-error-summary--${size}`
+          `navds-error-summary--${size}`,
         )}
         tabIndex={-1}
         aria-live="polite"
@@ -108,7 +108,7 @@ export const ErrorSummary = forwardRef<HTMLDivElement, ErrorSummaryProps>(
         </BodyShort>
       </section>
     );
-  }
+  },
 ) as ErrorSummaryComponent;
 
 ErrorSummary.Item = ErrorSummaryItem;

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

@@ -1,6 +1,6 @@
-import React, { forwardRef } from "react";
 import cl from "clsx";
-import { OverridableComponent } from "../../util";
+import React, { forwardRef } from "react";
+import { OverridableComponent } from "../../util/types";
 
 export interface ErrorSummaryItemProps
   extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
@@ -30,7 +30,7 @@ export const ErrorSummaryItem: ErrorSummaryItemType = forwardRef(
         {children}
       </Component>
     );
-  }
+  },
 );
 
 export default ErrorSummaryItem;

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

@@ -1,6 +1,7 @@
-import React from "react";
 import { Meta } from "@storybook/react";
+import React from "react";
 import { ErrorSummary } from "..";
+
 export default {
   title: "ds-react/Errorsummary",
   component: ErrorSummary,

package/src/form/radio/Radio.test.tsx

@@ -1,7 +1,7 @@
-import React from "react";
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import faker from "faker";
+import React from "react";
 import { Radio, RadioGroup } from ".";
 
 const value1 = faker.datatype.string();

package/src/form/radio/Radio.tsx

@@ -1,7 +1,8 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
 import { BodyShort } from "../../typography";
-import { omit, useId } from "../../util";
+import { omit } from "../../util";
+import { useId } from "../../util/hooks";
 import { RadioProps } from "./types";
 import { useRadio } from "./useRadio";
 
@@ -27,7 +28,7 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>((props, ref) => {
           !!props["aria-labelledby"] && props["aria-labelledby"],
           {
             [descriptionId]: props.description,
-          }
+          },
         )}
         className="navds-radio__input"
         ref={ref}

package/src/form/radio/RadioGroup.tsx

@@ -1,6 +1,6 @@
 import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
-import { useId } from "../../util";
+import { useId } from "../../util/hooks";
 import { Fieldset, FieldsetContext, FieldsetProps } from "../Fieldset";
 
 export interface RadioGroupContextProps {
@@ -68,7 +68,7 @@ export const RadioGroup = forwardRef<HTMLFieldSetElement, RadioGroupProps>(
       readOnly,
       ...rest
     },
-    ref
+    ref,
   ) => {
     const fieldset = useContext(FieldsetContext);
 
@@ -82,7 +82,7 @@ export const RadioGroup = forwardRef<HTMLFieldSetElement, RadioGroupProps>(
         className={cl(
           className,
           "navds-radio-group",
-          `navds-radio-group--${rest.size ?? fieldset?.size ?? "medium"}`
+          `navds-radio-group--${rest.size ?? fieldset?.size ?? "medium"}`,
         )}
         nativeReadOnly={false}
       >
@@ -99,7 +99,7 @@ export const RadioGroup = forwardRef<HTMLFieldSetElement, RadioGroupProps>(
         </RadioGroupContext.Provider>
       </Fieldset>
     );
-  }
+  },
 );
 
 export default RadioGroup;

package/src/form/radio/useRadio.ts

@@ -12,7 +12,7 @@ export const useRadio = (props: RadioProps) => {
 
   const { inputProps, readOnly, ...rest } = useFormField(
     omit(props, ["description"]),
-    "radio"
+    "radio",
   );
 
   if (!radioGroup) {

package/src/form/search/Search.tsx

@@ -1,15 +1,15 @@
-import { MagnifyingGlassIcon, XMarkIcon } from "@navikt/aksel-icons";
 import cl from "clsx";
 import React, {
   InputHTMLAttributes,
   forwardRef,
   useCallback,
-  useMemo,
   useRef,
   useState,
 } from "react";
+import { MagnifyingGlassIcon, XMarkIcon } from "@navikt/aksel-icons";
 import { BodyShort, ErrorMessage, Label } from "../../typography";
-import { mergeRefs, omit } from "../../util";
+import { omit } from "../../util";
+import { useMergeRefs } from "../../util/hooks/useMergeRefs";
 import { FormFieldProps, useFormField } from "../useFormField";
 import SearchButton, { SearchButtonType } from "./SearchButton";
 import { SearchContext } from "./context";
@@ -118,7 +118,7 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
     } = props;
 
     const searchRef = useRef<HTMLInputElement | null>(null);
-    const mergedRef = useMemo(() => mergeRefs([searchRef, ref]), [ref]);
+    const mergedRef = useMergeRefs(searchRef, ref);
 
     const [internalValue, setInternalValue] = useState(defaultValue ?? "");
 
@@ -127,7 +127,7 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
         value === undefined && setInternalValue(v);
         onChange?.(v);
       },
-      [onChange, value]
+      [onChange, value],
     );
 
     const handleClear = useCallback(
@@ -136,7 +136,7 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
         handleChange("");
         searchRef.current && searchRef.current?.focus?.();
       },
-      [handleChange, onClear]
+      [handleChange, onClear],
     );
 
     const handleClick = () => {
@@ -166,7 +166,7 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
             "navds-search--error": hasError,
             "navds-search--disabled": !!inputProps.disabled,
             "navds-search--with-size": !!htmlSize,
-          }
+          },
         )}
       >
         <Label
@@ -212,7 +212,7 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
                 `navds-search__input--${variant}`,
                 "navds-text-field__input",
                 "navds-body-short",
-                `navds-body-short--${size}`
+                `navds-body-short--${size}`,
               )}
               {...(htmlSize ? { size: Number(htmlSize) } : {})}
             />
@@ -252,7 +252,7 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
         </div>
       </div>
     );
-  }
+  },
 ) as SearchComponent;
 
 Search.Button = SearchButton;

package/src/form/search/SearchButton.tsx

@@ -1,7 +1,8 @@
-import { MagnifyingGlassIcon } from "@navikt/aksel-icons";
 import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
+import { MagnifyingGlassIcon } from "@navikt/aksel-icons";
 import { Button, ButtonProps } from "../../button";
+import { composeEventHandlers } from "../../util/composeEventHandlers";
 import { SearchContext } from "./context";
 
 export interface SearchButtonProps
@@ -36,10 +37,7 @@ const SearchButton: SearchButtonType = forwardRef(
         variant={variant === "secondary" ? "secondary" : "primary"}
         className={cl("navds-search__button-search", className)}
         disabled={context?.disabled ?? disabled}
-        onClick={(e) => {
-          handleClick();
-          onClick?.(e);
-        }}
+        onClick={composeEventHandlers(onClick, handleClick)}
         icon={
           <MagnifyingGlassIcon
             {...(children ? { "aria-hidden": true } : { title: "Søk" })}
@@ -49,7 +47,7 @@ const SearchButton: SearchButtonType = forwardRef(
         {children}
       </Button>
     );
-  }
+  },
 );
 
 export default SearchButton;

package/src/form/search/search.stories.tsx

@@ -1,7 +1,7 @@
 import { Meta } from "@storybook/react";
 import React, { useState } from "react";
-
 import { Search } from "../index";
+
 export default {
   title: "ds-react/Search",
   component: Search,

package/src/form/stories/fieldset.stories.tsx

@@ -1,7 +1,8 @@
-import React from "react";
-import { Fieldset } from "../index";
 import { Meta } from "@storybook/react";
+import React from "react";
 import { TextField } from "../../index";
+import { Fieldset } from "../index";
+
 export default {
   title: "ds-react/Fieldset",
   component: Fieldset,

package/src/form/stories/select.stories.tsx

@@ -1,6 +1,7 @@
+import { Meta } from "@storybook/react";
 import React from "react";
 import { Select } from "../index";
-import { Meta } from "@storybook/react";
+
 export default {
   title: "ds-react/Select",
   component: Select,

package/src/form/stories/text-field.stories.tsx

@@ -1,6 +1,7 @@
+import { Meta } from "@storybook/react";
 import React from "react";
 import { TextField } from "../index";
-import { Meta } from "@storybook/react";
+
 export default {
   title: "ds-react/TextField",
   component: TextField,

package/src/form/useFormField.ts

@@ -1,6 +1,6 @@
 import cl from "clsx";
 import React, { useContext } from "react";
-import { useId } from "../util";
+import { useId } from "../util/hooks";
 import { FieldsetContext } from "./Fieldset/context";
 
 export interface FormFieldProps {
@@ -55,7 +55,7 @@ export interface FormFieldType {
  */
 export const useFormField = (
   props: FormFieldProps,
-  prefix: string
+  prefix: string,
 ): FormFieldType => {
   const { size, error, errorId: propErrorId } = props;
 
@@ -80,10 +80,10 @@ export const useFormField = (
 
   if ((props as any)?.required && process.env.NODE_ENV !== "production") {
     console.warn(
-      "Aksel: Use of 'required' in form-elements is heavily discuouraged. Docs about why here:"
+      "Aksel: Use of 'required' in form-elements is heavily discuouraged. Docs about why here:",
     );
     console.warn(
-      "https://aksel.nav.no/god-praksis/artikler/obligatoriske-og-valgfrie-skjemafelter#h3bfe00453471"
+      "https://aksel.nav.no/god-praksis/artikler/obligatoriske-og-valgfrie-skjemafelter#h3bfe00453471",
     );
   }
 

package/src/grid/Cell.tsx

@@ -1,5 +1,5 @@
-import React, { forwardRef, HTMLAttributes } from "react";
 import cl from "clsx";
+import React, { HTMLAttributes, forwardRef } from "react";
 
 type Column = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
 export interface CellProps extends HTMLAttributes<HTMLDivElement> {
@@ -41,13 +41,13 @@ export const Cell = forwardRef<HTMLDivElement, CellProps>(
           sm && `navds-grid__cell--sm-${sm}`,
           md && `navds-grid__cell--md-${md}`,
           lg && `navds-grid__cell--lg-${lg}`,
-          className
+          className,
         )}
       >
         {children}
       </div>
     );
-  }
+  },
 );
 
 export default Cell;

package/src/grid/Grid.tsx

@@ -1,5 +1,5 @@
-import React, { forwardRef, HTMLAttributes } from "react";
 import cl from "clsx";
+import React, { HTMLAttributes, forwardRef } from "react";
 
 export interface GridProps extends HTMLAttributes<HTMLDivElement> {
   /**
@@ -17,7 +17,7 @@ export const Grid = forwardRef<HTMLDivElement, GridProps>(
     <div ref={ref} className={cl("navds-grid", className)} {...rest}>
       {children}
     </div>
-  )
+  ),
 );
 
 export default Grid;

package/src/grid/grid.stories.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { BodyLong, Grid, Cell, ContentContainer } from "../index";
+import { BodyLong, Cell, ContentContainer, Grid } from "../index";
 
 export default {
   title: "ds-react/Primitives/Grid",

package/src/guide-panel/GuidePanel.tsx

@@ -1,5 +1,5 @@
-import React, { forwardRef, HTMLAttributes } from "react";
 import cl from "clsx";
+import React, { HTMLAttributes, forwardRef } from "react";
 import { DefaultIllustration } from "./Illustration";
 
 export interface GuidePanelProps extends HTMLAttributes<HTMLDivElement> {
@@ -49,7 +49,7 @@ export const GuidePanel = forwardRef<HTMLDivElement, GuidePanelProps>(
       </div>
       <div className="navds-guide-panel__content">{children}</div>
     </div>
-  )
+  ),
 );
 
 export default GuidePanel;

package/src/guide-panel/Illustration.tsx

@@ -1,5 +1,5 @@
 import React, { SVGProps } from "react";
-import { useId } from "../util";
+import { useId } from "../util/hooks";
 
 interface SVGRProps {
   title?: string;

package/src/guide-panel/guidepanel.stories.tsx

@@ -1,6 +1,6 @@
-import { InformationIcon } from "@navikt/aksel-icons";
 import { Meta } from "@storybook/react";
 import React from "react";
+import { InformationIcon } from "@navikt/aksel-icons";
 import { BodyLong, GuidePanel, VStack } from "../index";
 
 export default {

package/src/help-text/HelpText.tsx

@@ -1,7 +1,8 @@
 import cl from "clsx";
-import React, { forwardRef, useMemo, useRef, useState } from "react";
+import React, { forwardRef, useRef, useState } from "react";
 import { Popover, PopoverProps } from "../popover";
-import { mergeRefs } from "../util";
+import { composeEventHandlers } from "../util/composeEventHandlers";
+import { useMergeRefs } from "../util/hooks/useMergeRefs";
 import { HelpTextIcon } from "./HelpTextIcon";
 
 export interface HelpTextProps
@@ -13,23 +14,6 @@ export interface HelpTextProps
    * @default "hjelp"
    */
   title?: string;
-  /**
-   * Default dialog-placement on open
-   * @default "top"
-   */
-  placement?:
-    | "top"
-    | "bottom"
-    | "right"
-    | "left"
-    | "top-start"
-    | "top-end"
-    | "bottom-start"
-    | "bottom-end"
-    | "right-start"
-    | "right-end"
-    | "left-start"
-    | "left-end";
   /**
    * Classname for wrapper
    */
@@ -54,17 +38,18 @@ export const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
     {
       className,
       children,
-      placement = "top",
+      placement,
       strategy = "absolute",
       title = "hjelp",
       onClick,
       wrapperClassName,
       ...rest
     },
-    ref
+    ref,
   ) => {
     const buttonRef = useRef<HTMLButtonElement | null>(null);
-    const mergedRef = useMemo(() => mergeRefs([buttonRef, ref]), [ref]);
+    const mergedRef = useMergeRefs(buttonRef, ref);
+
     const [open, setOpen] = useState(false);
 
     return (
@@ -72,10 +57,7 @@ export const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
         <button
           {...rest}
           ref={mergedRef}
-          onClick={(e) => {
-            setOpen((x) => !x);
-            onClick?.(e);
-          }}
+          onClick={composeEventHandlers(onClick, () => setOpen((x) => x))}
           className={cl(className, "navds-help-text__button")}
           type="button"
           aria-expanded={open}
@@ -98,7 +80,7 @@ export const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
         </Popover>
       </div>
     );
-  }
+  },
 );
 
 export default HelpText;

package/src/help-text/HelpTextIcon.tsx

@@ -1,6 +1,6 @@
 import cl from "clsx";
 import React from "react";
-import { useId } from "../util/useId";
+import { useId } from "../util/hooks";
 
 export const HelpTextIcon = ({
   title,