@navikt/ds-react 5.12.5 → 5.13.0

package/src/typography/stories/heading.stories.tsx

@@ -1,6 +1,5 @@
-import type { Meta, StoryObj } from "@storybook/react";
-
 import { expect } from "@storybook/jest";
+import type { Meta, StoryObj } from "@storybook/react";
 import { within } from "@storybook/testing-library";
 import { default as React } from "react";
 import { Heading } from "..";

package/src/util/AnimateHeight.tsx

@@ -75,7 +75,7 @@ const AnimateHeight: React.FC<AnimateHeightProps> = ({
   const prefersReducedMotion = useRef<boolean>(
     isBrowser && window.matchMedia
       ? window.matchMedia("(prefers-reduced-motion)").matches
-      : false
+      : false,
   );
 
   const duration = prefersReducedMotion.current ? 0 : userDuration;

package/src/util/OverridableComponent.ts

@@ -24,6 +24,6 @@ export interface OverridableComponent<Component, Element extends HTMLElement> {
     props: {
       as?: As;
     } & Component &
-      Omit<React.ComponentPropsWithRef<As>, keyof Component | "as">
+      Omit<React.ComponentPropsWithRef<As>, keyof Component | "as">,
   ): ReturnType<React.FC>;
 }

package/src/util/RandomIcon.tsx

@@ -1,5 +1,5 @@
-import * as AllIcons from "@navikt/aksel-icons";
 import React from "react";
+import * as AllIcons from "@navikt/aksel-icons";
 
 // eslint-disable-next-line import/namespace
 const icons = Object.keys(AllIcons).map((key) => AllIcons[key]);

package/src/util/Slot.tsx

@@ -21,18 +21,18 @@ export const Slot = React.forwardRef<HTMLElement, SlotProps>(
 
     if (React.Children.count(children) > 1) {
       console.error(
-        "Aksel: Components using 'asChild' expects to recieve a single React element child."
+        "Aksel: Components using 'asChild' expects to recieve a single React element child.",
       );
       return React.Children.only(null);
     }
 
     return null;
-  }
+  },
 );
 
 function mergeProps(
   slotProps: Record<string, any>,
-  childProps: Record<string, any>
+  childProps: Record<string, any>,
 ) {
   // all child props should override
   const overrideProps = { ...childProps };

package/src/util/TextareaAutoSize.tsx

@@ -11,7 +11,7 @@ type State = {
 const updateState = (
   prevState: State,
   newState: State,
-  renders: React.MutableRefObject<number>
+  renders: React.MutableRefObject<number>,
 ) => {
   const { outerHeightStyle, overflow } = newState;
   // Need a large enough difference to update the height.
@@ -34,7 +34,7 @@ const updateState = (
         [
           "Textarea: Too many re-renders. The layout is unstable.",
           "TextareaAutosize limits the number of renders to prevent an infinite loop.",
-        ].join("\n")
+        ].join("\n"),
       );
     }
   }
@@ -86,7 +86,7 @@ const TextareaAutosize = forwardRef<HTMLTextAreaElement, TextareaAutosizeProps>(
       value,
       ...other
     }: TextareaAutosizeProps,
-    ref
+    ref,
   ) => {
     const { current: isControlled } = useRef(value != null);
     const inputRef = useRef<HTMLTextAreaElement>(null);
@@ -281,7 +281,7 @@ const TextareaAutosize = forwardRef<HTMLTextAreaElement, TextareaAutosizeProps>(
         />
       </>
     );
-  }
+  },
 );
 
 function isEmpty(obj: State) {

package/src/util/__tests__/Slot.test.tsx

@@ -1,4 +1,4 @@
-import { render, screen, fireEvent } from "@testing-library/react";
+import { fireEvent, render, screen } from "@testing-library/react";
 import React from "react";
 import { Button } from "../../button";
 import { Slot } from "../Slot";
@@ -10,7 +10,7 @@ describe("Slot", () => {
       render(
         <Slot onClick={handleClick}>
           <Button>Button</Button>
-        </Slot>
+        </Slot>,
       );
       fireEvent.click(screen.getByRole("button"));
       expect(handleClick).toHaveBeenCalledTimes(1);
@@ -21,7 +21,7 @@ describe("Slot", () => {
       render(
         <Slot>
           <Button onClick={handleClick}>Button</Button>
-        </Slot>
+        </Slot>,
       );
       fireEvent.click(screen.getByRole("button"));
       expect(handleClick).toHaveBeenCalledTimes(1);
@@ -33,7 +33,7 @@ describe("Slot", () => {
       render(
         <Slot onClick={handleClickSlot}>
           <Button onClick={handleClick}>Button</Button>
-        </Slot>
+        </Slot>,
       );
       fireEvent.click(screen.getByRole("button"));
       expect(handleClickSlot).toHaveBeenCalledTimes(1);
@@ -45,7 +45,7 @@ describe("Slot", () => {
       render(
         <Slot onClick={undefined}>
           <Button onClick={handleClick}>Button</Button>
-        </Slot>
+        </Slot>,
       );
       fireEvent.click(screen.getByRole("button"));
       expect(handleClick).toHaveBeenCalledTimes(1);
@@ -56,7 +56,7 @@ describe("Slot", () => {
       render(
         <Slot onClick={handleClick}>
           <Button onClick={undefined}>Button</Button>
-        </Slot>
+        </Slot>,
       );
       fireEvent.click(screen.getByRole("button"));
       expect(handleClick).toHaveBeenCalledTimes(1);
@@ -68,10 +68,10 @@ describe("Slot", () => {
       render(
         <Slot className="class1">
           <button className="class2 class2--inline">Button</button>
-        </Slot>
+        </Slot>,
       );
       expect(screen.getByRole("button").className).toEqual(
-        "class1 class2 class2--inline"
+        "class1 class2 class2--inline",
       );
     });
 
@@ -79,10 +79,10 @@ describe("Slot", () => {
       render(
         <Slot className={undefined}>
           <button className="class2 class2--inline">Button</button>
-        </Slot>
+        </Slot>,
       );
       expect(screen.getByRole("button").className).toEqual(
-        "class2 class2--inline"
+        "class2 class2--inline",
       );
     });
 
@@ -90,7 +90,7 @@ describe("Slot", () => {
       render(
         <Slot className="class1">
           <button className={undefined}>Button</button>
-        </Slot>
+        </Slot>,
       );
       expect(screen.getByRole("button").className).toEqual("class1");
     });

package/src/util/hooks/useCallbackRef.ts

@@ -0,0 +1,20 @@
+import { useCallback, useEffect, useRef } from "react";
+
+/**
+ * A custom hook that converts a callback to a ref to avoid triggering re-renders when passed as a
+ * prop or avoid re-executing effects when passed as a dependency
+ * https://github.com/radix-ui/primitives/blob/main/packages/react/use-callback-ref/src/useCallbackRef.tsx
+ */
+export function useCallbackRef<T extends (...args: any[]) => any>(
+  callback: T | undefined,
+  deps: React.DependencyList = []
+) {
+  const callbackRef = useRef(callback);
+
+  useEffect(() => {
+    callbackRef.current = callback;
+  });
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  return useCallback(((...args) => callbackRef.current?.(...args)) as T, deps);
+}

package/src/util/hooks/useControllableState.ts

@@ -0,0 +1,40 @@
+// https://github.com/chakra-ui/chakra-ui/tree/5ec0be610b5a69afba01a9c22365155c1b519136/packages/hooks/use-controllable-state
+import { useState } from "react";
+import { useCallbackRef } from "./useCallbackRef";
+
+export interface UseControllableStateProps<T> {
+  value?: T;
+  defaultValue: T | (() => T);
+  onChange?: (value: T) => void;
+}
+
+/**
+ * `useControllableState` returns the state and function that updates the state, just like React.useState does.
+ */
+export function useControllableState<T>({
+  value: valueProp,
+  defaultValue,
+  onChange,
+}: UseControllableStateProps<T>) {
+  const onChangeProp = useCallbackRef(onChange);
+
+  const [uncontrolledState, setUncontrolledState] = useState(defaultValue);
+  const controlled = valueProp !== undefined;
+  const value = controlled ? valueProp : uncontrolledState;
+
+  const setValue = useCallbackRef(
+    (next: React.SetStateAction<T>) => {
+      const setter = next as (prevState?: T) => T;
+      const nextValue = typeof next === "function" ? setter(value) : next;
+
+      if (!controlled) {
+        setUncontrolledState(nextValue);
+      }
+
+      onChangeProp(nextValue);
+    },
+    [controlled, onChangeProp, value]
+  );
+
+  return [value, setValue] as const;
+}

package/src/util/mergeRefs.tsx

@@ -1,7 +1,8 @@
 import React from "react";
+
 // https://github.com/gregberge/react-merge-refs
 export default function mergeRefs<T>(
-  refs: Array<React.MutableRefObject<T> | React.LegacyRef<T>>
+  refs: Array<React.MutableRefObject<T> | React.LegacyRef<T>>,
 ): React.RefCallback<T> {
   return (value) => {
     refs.forEach((ref) => {

package/src/util/omit.ts

@@ -6,5 +6,5 @@ export const omit = (obj: object, props: string[]) =>
         ...prevObj,
         [key]: value,
       }),
-      {}
+      {},
     );

package/src/util/useEventListener.ts

@@ -18,7 +18,7 @@ export interface ListenerT {
 export const useEventListener = <T extends ListenerT>(
   name: Parameters<ListenerT["addEventListener"]>[0],
   handler: Parameters<ListenerT["addEventListener"]>[1],
-  target: null | T | Window = typeof window !== "undefined" ? window : null
+  target: null | T | Window = typeof window !== "undefined" ? window : null,
 ): void => {
   useEffect(() => {
     if (!target) {

package/src/util/useMedia.ts

@@ -11,7 +11,7 @@ export const noMatchMedia =
  */
 export const useMedia = (
   media: string,
-  fallback?: boolean
+  fallback?: boolean,
 ): boolean | undefined => {
   const [matches, setMatches] = useState(fallback);