@navikt/ds-react 5.13.0 → 5.15.0

package/src/date/parts/DateWrapper.tsx

@@ -4,7 +4,7 @@ import { Button } from "../../button";
 import { Modal } from "../../modal";
 import { ModalContext } from "../../modal/ModalContext";
 import { Popover } from "../../popover";
-import { useMedia } from "../../util/useMedia";
+import { useMedia } from "../../util/hooks";
 import { modalCloseButtonLabel, modalLabel } from "../utils/labels";
 
 type DateWrapperProps = {

package/src/date/utils/dates-disabled.ts

@@ -3,7 +3,7 @@ import { isDateRange } from "react-day-picker";
 
 // TODO: ((date: Date) => boolean)
 export const disableDate = (
-  disabledSelection: Date | Array<any>,
+  disabledSelection: Date | any[],
   date: Date,
 ): boolean => {
   let result: boolean = false;

package/src/dropdown/Menu/GroupedList/GroupedItem.tsx

@@ -1,6 +1,7 @@
 import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
-import { OverridableComponent } from "../../../util";
+import { composeEventHandlers } from "../../../util/composeEventHandlers";
+import { OverridableComponent } from "../../../util/types";
 import { DropdownContext } from "../../context";
 
 export interface GroupedItemProps
@@ -14,28 +15,27 @@ export interface GroupedItemProps
 export const GroupedItem: OverridableComponent<
   GroupedItemProps,
   HTMLButtonElement
-> = forwardRef(({ as: Component = "button", className, ...rest }, ref) => {
-  const context = useContext(DropdownContext);
+> = forwardRef(
+  ({ as: Component = "button", className, onClick, ...rest }, ref) => {
+    const context = useContext(DropdownContext);
 
-  return (
-    <dd className="navds-dropdown__list-item">
-      <Component
-        {...rest}
-        value={rest.children}
-        onClick={(event: React.MouseEvent<HTMLElement, MouseEvent>) => {
-          context?.onSelect?.(event);
-          rest?.onClick?.(event);
-        }}
-        ref={ref}
-        className={cl(
-          "navds-dropdown__item",
-          "navds-body-short",
-          "navds-body-short--small",
-          className,
-        )}
-      />
-    </dd>
-  );
-});
+    return (
+      <dd className="navds-dropdown__list-item">
+        <Component
+          {...rest}
+          value={rest.children}
+          onClick={composeEventHandlers(onClick, context?.onSelect)}
+          ref={ref}
+          className={cl(
+            "navds-dropdown__item",
+            "navds-body-short",
+            "navds-body-short--small",
+            className,
+          )}
+        />
+      </dd>
+    );
+  },
+);
 
 export default GroupedItem;

package/src/dropdown/Menu/GroupedList/index.tsx

@@ -1,6 +1,6 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
-import { OverridableComponent } from "../../../util";
+import { OverridableComponent } from "../../../util/types";
 import GroupedHeading, { GroupedHeadingProps } from "./GroupedHeading";
 import GroupedItem, { GroupedItemProps } from "./GroupedItem";
 

package/src/dropdown/Menu/List/Item.tsx

@@ -1,6 +1,7 @@
 import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
-import { OverridableComponent } from "../../../util";
+import { composeEventHandlers } from "../../../util/composeEventHandlers";
+import { OverridableComponent } from "../../../util/types";
 import { DropdownContext } from "../../context";
 
 export interface ListItemProps extends React.ButtonHTMLAttributes<HTMLElement> {
@@ -11,28 +12,27 @@ export interface ListItemProps extends React.ButtonHTMLAttributes<HTMLElement> {
 }
 
 export const ListItem: OverridableComponent<ListItemProps, HTMLButtonElement> =
-  forwardRef(({ as: Component = "button", className, ...rest }, ref) => {
-    const context = useContext(DropdownContext);
+  forwardRef(
+    ({ as: Component = "button", className, onClick, ...rest }, ref) => {
+      const context = useContext(DropdownContext);
 
-    return (
-      <li className="navds-dropdown__list-item">
-        <Component
-          {...rest}
-          value={rest.children}
-          onClick={(event: React.MouseEvent<HTMLElement, MouseEvent>) => {
-            context?.onSelect?.(event);
-            rest?.onClick?.(event);
-          }}
-          ref={ref}
-          className={cl(
-            "navds-dropdown__item",
-            "navds-body-short",
-            "navds-body-short--small",
-            className,
-          )}
-        />
-      </li>
-    );
-  });
+      return (
+        <li className="navds-dropdown__list-item">
+          <Component
+            {...rest}
+            value={rest.children}
+            onClick={composeEventHandlers(onClick, context?.onSelect)}
+            ref={ref}
+            className={cl(
+              "navds-dropdown__item",
+              "navds-body-short",
+              "navds-body-short--small",
+              className,
+            )}
+          />
+        </li>
+      );
+    },
+  );
 
 export default ListItem;

package/src/dropdown/Menu/List/index.tsx

@@ -1,6 +1,6 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
-import { OverridableComponent } from "../../../util";
+import { OverridableComponent } from "../../../util/types";
 import ListItem, { ListItemProps } from "./Item";
 
 export interface ListProps extends React.HTMLAttributes<HTMLUListElement> {

package/src/dropdown/Toggle.tsx

@@ -1,5 +1,6 @@
 import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
+import { composeEventHandlers } from "../util/composeEventHandlers";
 import { DropdownContext } from "./context";
 
 export interface ToggleProps
@@ -21,6 +22,13 @@ export const Toggle = forwardRef<HTMLButtonElement, ToggleProps>(
 
     const { setAnchorEl, handleToggle, isOpen } = context;
 
+    const handleClick = (
+      e: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+    ) => {
+      setAnchorEl(e.currentTarget);
+      handleToggle(!isOpen);
+    };
+
     return (
       <button
         {...rest}
@@ -33,16 +41,12 @@ export const Toggle = forwardRef<HTMLButtonElement, ToggleProps>(
             ref.current = el;
           }
         }}
-        onClick={(e) => {
-          setAnchorEl(e.currentTarget);
-          handleToggle(!isOpen);
-          onClick && onClick(e);
-        }}
+        onClick={composeEventHandlers(onClick, handleClick)}
         aria-expanded={isOpen}
         className={cl("navds-dropdown__toggle", className)}
       />
     );
-  }
+  },
 );
 
 export default Toggle;

package/src/expansion-card/ExpansionCard.tsx

@@ -1,6 +1,6 @@
 import cl from "clsx";
 import React, { forwardRef, useRef, useState } from "react";
-import { OverridableComponent } from "../util";
+import { OverridableComponent } from "../util/types";
 import ExpansionCardContent, {
   ExpansionCardContentProps,
 } from "./ExpansionCardContent";

package/src/expansion-card/ExpansionCardTitle.tsx

@@ -1,6 +1,6 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
-import { OverridableComponent } from "../util";
+import { OverridableComponent } from "../util/types";
 
 export interface ExpansionCardTitleProps
   extends React.HTMLAttributes<HTMLHeadingElement> {

package/src/form/ConfirmationPanel.tsx

@@ -1,7 +1,7 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
 import { BodyLong, ErrorMessage } from "../typography";
-import { useId } from "../util";
+import { useId } from "../util/hooks";
 import { Checkbox, CheckboxProps } from "./checkbox";
 import { useFormField } from "./useFormField";
 

package/src/form/Textarea.tsx

@@ -1,8 +1,9 @@
 import cl from "clsx";
 import React, { forwardRef, useState } from "react";
 import { BodyShort, ErrorMessage, Label } from "../typography";
-import { omit, useId } from "../util";
+import { omit } from "../util";
 import TextareaAutosize from "../util/TextareaAutoSize";
+import { useId } from "../util/hooks";
 import { ReadOnlyIcon } from "./ReadOnlyIcon";
 import Counter from "./TextareaCounter";
 import { FormFieldProps, useFormField } from "./useFormField";

package/src/form/checkbox/Checkbox.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 { ReadOnlyIcon } from "../ReadOnlyIcon";
 import { CheckboxProps } from "./types";
 import useCheckbox from "./useCheckbox";

package/src/form/combobox/Combobox.tsx

@@ -1,7 +1,7 @@
 import cl from "clsx";
-import React, { forwardRef, useMemo, useRef } from "react";
+import React, { forwardRef, useRef } from "react";
 import { BodyShort, ErrorMessage, Label } from "../../typography";
-import { mergeRefs } from "../../util";
+import { useMergeRefs } from "../../util/hooks/useMergeRefs";
 import ClearButton from "./ClearButton";
 import ComboboxWrapper from "./ComboboxWrapper";
 import FilteredOptions from "./FilteredOptions/FilteredOptions";
@@ -50,10 +50,7 @@ export const Combobox = forwardRef<
     size = "medium",
   } = useInputContext();
 
-  const mergedInputRef = useMemo(
-    () => mergeRefs([inputRef, ref]),
-    [inputRef, ref],
-  );
+  const mergedInputRef = useMergeRefs(inputRef, ref);
 
   return (
     <ComboboxWrapper

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

@@ -7,8 +7,7 @@ import React, {
   useMemo,
   useState,
 } from "react";
-import { useClientLayoutEffect } from "../../../util";
-import usePrevious from "../../../util/usePrevious";
+import { useClientLayoutEffect, usePrevious } from "../../../util/hooks";
 import { useInputContext } from "../Input/inputContext";
 import { useCustomOptionsContext } from "../customOptionsContext";
 import { ComboboxProps } from "../types";

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

@@ -18,7 +18,7 @@ const useVirtualFocus = (
 ): VirtualFocusType => {
   const [index, setIndex] = useState(-1);
 
-  const listOfAllChildren: Array<HTMLElement> = containerRef?.children
+  const listOfAllChildren: HTMLElement[] = containerRef?.children
     ? Array.prototype.slice.call(containerRef?.children)
     : [];
   const elementsAbleToReceiveFocus = listOfAllChildren.filter(

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

@@ -8,7 +8,7 @@ import React, {
   useRef,
   useState,
 } from "react";
-import { useClientLayoutEffect } from "../../../util";
+import { useClientLayoutEffect } from "../../../util/hooks";
 import { FormFieldType, useFormField } from "../../useFormField";
 
 interface InputContextType extends FormFieldType {

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

@@ -5,7 +5,7 @@ import React, {
   useMemo,
   useState,
 } from "react";
-import usePrevious from "../../../util/usePrevious";
+import { usePrevious } from "../../../util/hooks";
 import { useInputContext } from "../Input/inputContext";
 import { useCustomOptionsContext } from "../customOptionsContext";
 import { ComboboxProps } from "../types";

package/src/form/combobox/combobox.stories.tsx

@@ -1,6 +1,5 @@
-import { expect, jest } from "@storybook/jest";
 import { Meta, StoryFn, StoryObj } from "@storybook/react";
-import { userEvent, within } from "@storybook/testing-library";
+import { expect, fn, userEvent, within } from "@storybook/test";
 import React, { useId, useMemo, useState } from "react";
 import { Chips, ComboboxProps, TextField, UNSAFE_Combobox } from "../../index";
 
@@ -427,14 +426,14 @@ export const AddWhenAddNewDisabledTest: StoryObject = {
 };
 
 export const TestThatCallbacksOnlyFireWhenExpected: StoryObj<{
-  onChange: ReturnType<typeof jest.fn>;
-  onClear: ReturnType<typeof jest.fn>;
-  onToggleSelected: ReturnType<typeof jest.fn>;
+  onChange: ReturnType<typeof fn>;
+  onClear: ReturnType<typeof fn>;
+  onToggleSelected: ReturnType<typeof fn>;
 }> = {
   args: {
-    onChange: jest.fn(),
-    onClear: jest.fn(),
-    onToggleSelected: jest.fn(),
+    onChange: fn(),
+    onClear: fn(),
+    onToggleSelected: fn(),
   },
   render: (props) => {
     return (
@@ -469,9 +468,9 @@ export const TestThatCallbacksOnlyFireWhenExpected: StoryObj<{
 
 export const TestCasingWhenAutoCompleting = {
   args: {
-    onChange: jest.fn(),
-    onClear: jest.fn(),
-    onToggleSelected: jest.fn(),
+    onChange: fn(),
+    onClear: fn(),
+    onToggleSelected: fn(),
   },
   render: (props) => {
     return (

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

@@ -1,7 +1,7 @@
 import cl from "clsx";
 import React, { HTMLAttributes, forwardRef, isValidElement } from "react";
 import { BodyShort, Heading } from "../../typography";
-import { useId } from "../../util";
+import { useId } from "../../util/hooks";
 import ErrorSummaryItem, { ErrorSummaryItemType } from "./ErrorSummaryItem";
 
 export interface ErrorSummaryProps extends HTMLAttributes<HTMLDivElement> {

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

@@ -1,6 +1,6 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
-import { OverridableComponent } from "../../util";
+import { OverridableComponent } from "../../util/types";
 
 export interface ErrorSummaryItemProps
   extends React.AnchorHTMLAttributes<HTMLAnchorElement> {

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";
 

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 {

package/src/form/search/Search.tsx

@@ -3,13 +3,13 @@ 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 ?? "");
 

package/src/form/search/SearchButton.tsx

@@ -2,6 +2,7 @@ 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" })}

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 {

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/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,7 +38,7 @@ export const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
     {
       className,
       children,
-      placement = "top",
+      placement,
       strategy = "absolute",
       title = "hjelp",
       onClick,
@@ -64,7 +48,8 @@ export const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
     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}

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,