@navikt/ds-react 7.1.2 → 7.2.0

package/src/list/types.ts

@@ -22,7 +22,7 @@ export interface ListProps extends React.HTMLAttributes<HTMLDivElement> {
    * Changes margin-block on list and font size on items.
    * @default "medium"
    */
-  size?: "medium" | "small";
+  size?: "small" | "medium" | "large";
 }
 
 export interface ListItemProps extends React.HTMLAttributes<HTMLLIElement> {

package/src/modal/Modal.tsx

@@ -127,7 +127,7 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
       // We have to use JS because it doesn't work to set it with a prop (React bug?)
       // Currently doesn't seem to work in Chrome. See also Tooltip.tsx
       if (modalRef.current && portalNode) modalRef.current.autofocus = true;
-    }, [modalRef, portalNode]);
+    }, [portalNode]);
 
     useEffect(() => {
       // We need to have this in a useEffect so that the content renders before the modal is displayed,
@@ -140,7 +140,7 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
           modalRef.current.close();
         }
       }
-    }, [modalRef, portalNode, open]);
+    }, [portalNode, open]);
 
     useBodyScrollLock(modalRef, portalNode, isNested);
 

package/src/overlays/dismissablelayer/DismissableLayer.tsx

@@ -337,6 +337,8 @@ const DismissableLayerNode = forwardRef<HTMLDivElement, DismissableLayerProps>(
      * If `disableOutsidePointerEvents` is true,
      * we want to disable pointer events on the body when the first layer is opened.
      */
+
+    // biome-ignore lint/correctness/useExhaustiveDependencies: Every time the descendants change, we want to update the body pointer events since we might have added or removed a layer.
     useEffect(() => {
       if (!node || !enabled || !disableOutsidePointerEvents) return;
 
@@ -362,6 +364,7 @@ const DismissableLayerNode = forwardRef<HTMLDivElement, DismissableLayerProps>(
     /**
      * To make sure pointerEvents are enabled for all parents and siblings when the layer is removed from the DOM
      */
+    // biome-ignore lint/correctness/useExhaustiveDependencies: We explicitly want to run this on unmount, including every time the node updates to make sure we don't lock the application behind pointer-events: none.
     useEffect(() => {
       return () => descendants.values().forEach((x) => x.forceUpdate());
     }, [descendants, node]);

package/src/progress-bar/ProgressBar.tsx

@@ -107,6 +107,7 @@ export const ProgressBar = forwardRef<HTMLDivElement, ProgressBarProps>(
     }, [simulated?.seconds]);
 
     return (
+      /* biome-ignore lint/a11y/useFocusableInteractive: Progressbar is not interactive. */
       <div
         ref={ref}
         className={cl(
@@ -121,6 +122,7 @@ export const ProgressBar = forwardRef<HTMLDivElement, ProgressBarProps>(
             ? `Fremdrift kan ikke beregnes, antatt tid er: ${simulated?.seconds} sekunder`
             : `${Math.round(value)} av ${Math.round(valueMax)}`
         }
+        // biome-ignore lint/a11y/useAriaPropsForRole: We found that adding valueMin was not needed
         role="progressbar"
         aria-labelledby={ariaLabelledBy}
         aria-label={ariaLabel}

package/src/table/AnimateHeight.tsx

@@ -74,37 +74,36 @@ const AnimateHeight: React.FC<AnimateHeightProps> = ({
   const animationClassesTimeoutID = useRef<Timeout>();
   const timeoutID = useRef<Timeout>();
 
-  const duration = prefersReducedMotion ? 0 : userDuration;
+  const initialHeight = useRef<Height>(height);
+  const initialOverflow = useRef<Overflow>("visible");
 
-  let initHeight: Height = height;
-  let initOverflow: Overflow = "visible";
+  const duration = prefersReducedMotion ? 0 : userDuration;
 
-  if (typeof initHeight === "number") {
+  if (typeof initialHeight.current === "number") {
     // Reset negative height to 0
     if (typeof height !== "string") {
-      initHeight = height < 0 ? 0 : height;
+      initialHeight.current = height < 0 ? 0 : height;
     }
-    initOverflow = "hidden";
-  } else if (isPercentage(initHeight)) {
+    initialOverflow.current = "hidden";
+  } else if (isPercentage(initialHeight.current)) {
     // If value is string "0%" make sure we convert it to number 0
-    initHeight = height === "0%" ? 0 : height;
-    initOverflow = "hidden";
+    initialHeight.current = height === "0%" ? 0 : height;
+    initialOverflow.current = "hidden";
   }
 
-  const [currentHeight, setCurrentHeight] = useState<Height>(initHeight);
-  const [overflow, setOverflow] = useState<Overflow>(initOverflow);
+  const [currentHeight, setCurrentHeight] = useState<Height>(
+    initialHeight.current,
+  );
+  const [overflow, setOverflow] = useState<Overflow>(initialOverflow.current);
   const [useTransitions, setUseTransitions] = useState<boolean>(false);
 
-  // ------------------ Did mount
   useEffect(() => {
     // Hide content if height is 0 (to prevent tabbing into it)
-    hideContent(contentElement.current, currentHeight);
-
-    // This should be explicitly run only on mount
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    hideContent(contentElement.current, initialHeight.current);
   }, []);
 
   // ------------------ Height update
+  // biome-ignore lint/correctness/useExhaustiveDependencies: This should be explicitly run only on height change
   useEffect(() => {
     if (height !== prevHeight.current && contentElement.current) {
       showContent(contentElement.current, prevHeight.current);

package/src/util/TextareaAutoSize.tsx

@@ -205,6 +205,7 @@ const TextareaAutosize = forwardRef<HTMLTextAreaElement, TextareaAutosizeProps>(
       syncHeight();
     });
 
+    // biome-ignore lint/correctness/useExhaustiveDependencies: Since value is an external prop, we want to reset the renders on every time it changes, even when it is undefined or empty.
     useEffect(() => {
       renders.current = 0;
     }, [value]);

package/src/util/create-context.tsx

@@ -43,8 +43,9 @@ export function createContext<T>(options: CreateContextOptions<T> = {}) {
   const Provider = forwardRef<unknown, ProviderProps<T>>(
     ({ children, ...context }, ref) => {
       // Only re-memoize when prop values change
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      const value = React.useMemo(() => context, Object.values(context)) as T;
+
+      // biome-ignore lint/correctness/useExhaustiveDependencies: Object.values(context) includes all dependencies.
+      const value = React.useMemo(() => context, Object.values(context)) as T; // eslint-disable-line react-hooks/exhaustive-deps
 
       return (
         <Context.Provider value={ref ? { ...value, ref } : value}>