@navikt/ds-react 7.30.1 → 7.31.0

package/esm/table/Row.d.ts

@@ -10,6 +10,13 @@ export interface RowProps extends React.HTMLAttributes<HTMLTableRowElement> {
      * @default true
      */
     shadeOnHover?: boolean;
+    /**
+     * Click handler for row. This differs from onClick by not being called
+     * when clicking on interactive elements within the row (buttons, links, inputs etc).
+     *
+     * **Warning:** This will not be accessible by keyboard! Provide an alternative way to select the row, e.g. a checkbox or a button.
+     */
+    onRowClick?: (event: React.MouseEvent<HTMLTableRowElement>) => void;
 }
 export type RowType = React.ForwardRefExoticComponent<RowProps & React.RefAttributes<HTMLTableRowElement>>;
 export declare const Row: RowType;

package/esm/table/Row.js

@@ -11,13 +11,24 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React, { forwardRef } from "react";
 import { useRenameCSS } from "../theme/Theme.js";
+import { composeEventHandlers } from "../util/composeEventHandlers.js";
+import { isElementInteractiveTarget } from "./Table.utils.js";
 export const Row = forwardRef((_a, ref) => {
-    var { className, selected = false, shadeOnHover = true } = _a, rest = __rest(_a, ["className", "selected", "shadeOnHover"]);
+    var { className, selected = false, shadeOnHover = true, onClick, onRowClick } = _a, rest = __rest(_a, ["className", "selected", "shadeOnHover", "onClick", "onRowClick"]);
     const { cn } = useRenameCSS();
+    const handleRowClick = (event) => {
+        if (!onRowClick) {
+            return;
+        }
+        if (isElementInteractiveTarget(event.target)) {
+            return;
+        }
+        onRowClick(event);
+    };
     return (React.createElement("tr", Object.assign({}, rest, { ref: ref, className: cn("navds-table__row", className, {
             "navds-table__row--selected": selected,
             "navds-table__row--shade-on-hover": shadeOnHover,
-        }) })));
+        }), onClick: composeEventHandlers(onClick, handleRowClick), "data-interactive": !!onRowClick })));
 });
 export default Row;
 //# sourceMappingURL=Row.js.map

package/esm/table/Row.js.map

@@ -1 +1 @@
-{"version":3,"file":"Row.js","sourceRoot":"","sources":["../../src/table/Row.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAmB9C,MAAM,CAAC,MAAM,GAAG,GAAY,UAAU,CACpC,CAAC,EAA6D,EAAE,GAAG,EAAE,EAAE;QAAtE,EAAE,SAAS,EAAE,QAAQ,GAAG,KAAK,EAAE,YAAY,GAAG,IAAI,OAAW,EAAN,IAAI,cAA3D,yCAA6D,CAAF;IAC1D,MAAM,EAAE,EAAE,EAAE,GAAG,YAAY,EAAE,CAAC;IAC9B,OAAO,CACL,4CACM,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,kBAAkB,EAAE,SAAS,EAAE;YAC3C,4BAA4B,EAAE,QAAQ;YACtC,kCAAkC,EAAE,YAAY;SACjD,CAAC,IACF,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,GAAG,CAAC"}
+{"version":3,"file":"Row.js","sourceRoot":"","sources":["../../src/table/Row.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AACpE,OAAO,EAAE,0BAA0B,EAAE,MAAM,eAAe,CAAC;AA0B3D,MAAM,CAAC,MAAM,GAAG,GAAY,UAAU,CACpC,CACE,EAOC,EACD,GAAG,EACH,EAAE;QATF,EACE,SAAS,EACT,QAAQ,GAAG,KAAK,EAChB,YAAY,GAAG,IAAI,EACnB,OAAO,EACP,UAAU,OAEX,EADI,IAAI,cANT,kEAOC,CADQ;IAIT,MAAM,EAAE,EAAE,EAAE,GAAG,YAAY,EAAE,CAAC;IAE9B,MAAM,cAAc,GAAG,CAAC,KAA4C,EAAE,EAAE;QACtE,IAAI,CAAC,UAAU,EAAE,CAAC;YAChB,OAAO;QACT,CAAC;QACD,IAAI,0BAA0B,CAAC,KAAK,CAAC,MAAqB,CAAC,EAAE,CAAC;YAC5D,OAAO;QACT,CAAC;QACD,UAAU,CAAC,KAAK,CAAC,CAAC;IACpB,CAAC,CAAC;IAEF,OAAO,CACL,4CACM,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,kBAAkB,EAAE,SAAS,EAAE;YAC3C,4BAA4B,EAAE,QAAQ;YACtC,kCAAkC,EAAE,YAAY;SACjD,CAAC,EACF,OAAO,EAAE,oBAAoB,CAAC,OAAO,EAAE,cAAc,CAAC,sBACpC,CAAC,CAAC,UAAU,IAC9B,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,GAAG,CAAC"}

package/esm/table/Table.utils.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Walks up from the event target until TR/TH (row / header) or root.
+ * Returns true if any ancestor is inherently interactive, explicitly focusable,
+ * or has an interactive ARIA role.
+ * Used to decide whether a row click should be treated as a row selection
+ * or ignored because the user interacted with an embedded control.
+ */
+declare function isElementInteractiveTarget(element: HTMLElement | null): boolean;
+export { isElementInteractiveTarget };

package/esm/table/Table.utils.js

@@ -0,0 +1,55 @@
+const INTERACTIVE_TAGS = new Set([
+    "BUTTON",
+    "A",
+    "INPUT",
+    "SELECT",
+    "TEXTAREA",
+    "DETAILS",
+    "SUMMARY",
+    "LABEL",
+]);
+const INTERACTIVE_ROLES = new Set([
+    "button",
+    "link",
+    "checkbox",
+    "radio",
+    "switch",
+    "menuitem",
+    "option",
+    "tab",
+    "textbox",
+    "combobox",
+    "spinbutton",
+    "slider",
+]);
+/**
+ * Walks up from the event target until TR/TH (row / header) or root.
+ * Returns true if any ancestor is inherently interactive, explicitly focusable,
+ * or has an interactive ARIA role.
+ * Used to decide whether a row click should be treated as a row selection
+ * or ignored because the user interacted with an embedded control.
+ */
+function isElementInteractiveTarget(element) {
+    for (let node = element; node && node.nodeName !== "TR" && node.nodeName !== "TH"; node = node.parentElement) {
+        const tag = node.nodeName;
+        /* Native interactive tag */
+        if (INTERACTIVE_TAGS.has(tag)) {
+            return true;
+        }
+        /* Explicit interactive role */
+        const role = node.getAttribute("role");
+        if (role && INTERACTIVE_ROLES.has(role)) {
+            return true;
+        }
+        /* Focusable via tabindex (exclude -1) */
+        if (node.hasAttribute("tabindex")) {
+            const ti = node.getAttribute("tabindex");
+            if (ti !== "-1") {
+                return true;
+            }
+        }
+    }
+    return false;
+}
+export { isElementInteractiveTarget };
+//# sourceMappingURL=Table.utils.js.map

package/esm/table/Table.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.utils.js","sourceRoot":"","sources":["../../src/table/Table.utils.ts"],"names":[],"mappings":"AAAA,MAAM,gBAAgB,GAAG,IAAI,GAAG,CAAC;IAC/B,QAAQ;IACR,GAAG;IACH,OAAO;IACP,QAAQ;IACR,UAAU;IACV,SAAS;IACT,SAAS;IACT,OAAO;CACR,CAAC,CAAC;AAEH,MAAM,iBAAiB,GAAG,IAAI,GAAG,CAAC;IAChC,QAAQ;IACR,MAAM;IACN,UAAU;IACV,OAAO;IACP,QAAQ;IACR,UAAU;IACV,QAAQ;IACR,KAAK;IACL,SAAS;IACT,UAAU;IACV,YAAY;IACZ,QAAQ;CACT,CAAC,CAAC;AAEH;;;;;;GAMG;AACH,SAAS,0BAA0B,CAAC,OAA2B;IAC7D,KACE,IAAI,IAAI,GAAuB,OAAO,EACtC,IAAI,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,EACxD,IAAI,GAAG,IAAI,CAAC,aAAa,EACzB,CAAC;QACD,MAAM,GAAG,GAAG,IAAI,CAAC,QAAQ,CAAC;QAE1B,4BAA4B;QAC5B,IAAI,gBAAgB,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;YAC9B,OAAO,IAAI,CAAC;QACd,CAAC;QAED,+BAA+B;QAC/B,MAAM,IAAI,GAAG,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;QACvC,IAAI,IAAI,IAAI,iBAAiB,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC;YACxC,OAAO,IAAI,CAAC;QACd,CAAC;QAED,yCAAyC;QACzC,IAAI,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,EAAE,CAAC;YAClC,MAAM,EAAE,GAAG,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;YACzC,IAAI,EAAE,KAAK,IAAI,EAAE,CAAC;gBAChB,OAAO,IAAI,CAAC;YACd,CAAC;QACH,CAAC;IACH,CAAC;IAED,OAAO,KAAK,CAAC;AACf,CAAC;AAED,OAAO,EAAE,0BAA0B,EAAE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "7.30.1",
+  "version": "7.31.0",
   "description": "React components from the Norwegian Labour and Welfare Administration.",
   "author": "Aksel, a team part of the Norwegian Labour and Welfare Administration.",
   "license": "MIT",
@@ -650,8 +650,8 @@
   "dependencies": {
     "@floating-ui/react": "0.27.8",
     "@floating-ui/react-dom": "^2.0.9",
-    "@navikt/aksel-icons": "^7.30.1",
-    "@navikt/ds-tokens": "^7.30.1",
+    "@navikt/aksel-icons": "^7.31.0",
+    "@navikt/ds-tokens": "^7.31.0",
     "clsx": "^2.1.0",
     "date-fns": "^4.0.0",
     "react-day-picker": "9.7.0"

package/src/form/checkbox/Checkbox.tsx

@@ -42,9 +42,11 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
                 "readOnly",
               ])}
               {...omit(inputProps, ["aria-invalid", "aria-describedby"])}
-              aria-describedby={cl(inputProps["aria-describedby"], {
-                [descriptionId]: props.description,
-              })}
+              aria-describedby={
+                cl(inputProps["aria-describedby"], {
+                  [descriptionId]: props.description,
+                }) || undefined
+              }
               type="checkbox"
               className={cn("navds-checkbox__input")}
               ref={(el) => {

package/src/form/combobox/Combobox.tsx

@@ -1,4 +1,5 @@
 import React, { forwardRef } from "react";
+import { Floating } from "../../overlays/floating/Floating";
 import { useRenameCSS } from "../../theme/Theme";
 import { BodyShort, ErrorMessage, Label } from "../../typography";
 import { ReadOnlyIconWithTitle } from "../ReadOnlyIcon";
@@ -34,52 +35,54 @@ export const Combobox = forwardRef<
   } = useInputContext();
 
   return (
-    <ComboboxWrapper
-      className={className}
-      hasError={hasError}
-      inputProps={inputProps}
-      inputSize={size}
-      toggleIsListOpen={toggleIsListOpen}
-    >
-      <Label
-        htmlFor={inputProps.id}
-        size={size}
-        className={cn("navds-form-field__label", {
-          "navds-sr-only": hideLabel,
-        })}
+    <Floating>
+      <ComboboxWrapper
+        className={className}
+        hasError={hasError}
+        inputProps={inputProps}
+        inputSize={size}
+        toggleIsListOpen={toggleIsListOpen}
       >
-        {readOnly && <ReadOnlyIconWithTitle />}
-        {label}
-      </Label>
-      {!!description && (
-        <BodyShort
-          as="div"
-          className={cn("navds-form-field__description", {
+        <Label
+          htmlFor={inputProps.id}
+          size={size}
+          className={cn("navds-form-field__label", {
             "navds-sr-only": hideLabel,
           })}
-          id={inputDescriptionId}
-          size={size}
         >
-          {description}
-        </BodyShort>
-      )}
-      <div className={cn("navds-combobox__wrapper")}>
-        <InputController ref={ref} {...rest} />
-        <FilteredOptions />
-      </div>
-      <div
-        className={cn("navds-form-field__error")}
-        id={errorId}
-        aria-relevant="additions removals"
-        aria-live="polite"
-      >
-        {showErrorMsg && (
-          <ErrorMessage size={size} showIcon>
-            {error}
-          </ErrorMessage>
+          {readOnly && <ReadOnlyIconWithTitle />}
+          {label}
+        </Label>
+        {!!description && (
+          <BodyShort
+            as="div"
+            className={cn("navds-form-field__description", {
+              "navds-sr-only": hideLabel,
+            })}
+            id={inputDescriptionId}
+            size={size}
+          >
+            {description}
+          </BodyShort>
         )}
-      </div>
-    </ComboboxWrapper>
+        <div className={cn("navds-combobox__wrapper")}>
+          <InputController ref={ref} {...rest} />
+          <FilteredOptions />
+        </div>
+        <div
+          className={cn("navds-form-field__error")}
+          id={errorId}
+          aria-relevant="additions removals"
+          aria-live="polite"
+        >
+          {showErrorMsg && (
+            <ErrorMessage size={size} showIcon>
+              {error}
+            </ErrorMessage>
+          )}
+        </div>
+      </ComboboxWrapper>
+    </Floating>
   );
 });
 

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

@@ -1,5 +1,7 @@
-import React from "react";
-import { useRenameCSS } from "../../../theme/Theme";
+import React, { useState } from "react";
+import { Floating } from "../../../overlays/floating/Floating";
+import { useRenameCSS, useThemeInternal } from "../../../theme/Theme";
+import { useClientLayoutEffect } from "../../../util";
 import { useInputContext } from "../Input/Input.context";
 import { useSelectedOptionsContext } from "../SelectedOptions/selectedOptionsContext";
 import AddNewOption from "./AddNewOption";
@@ -12,6 +14,7 @@ import { useFilteredOptionsContext } from "./filteredOptionsContext";
 
 const FilteredOptions = () => {
   const { cn } = useRenameCSS();
+  const themeContext = useThemeInternal(false);
   const {
     inputProps: { id },
   } = useInputContext();
@@ -25,6 +28,16 @@ const FilteredOptions = () => {
     isMouseLastUsedInputDevice,
     isValueNew,
   } = useFilteredOptionsContext();
+  const [localOpen, setLocalOpen] = useState(isListOpen);
+
+  /**
+   * This is a dirty hack to make the positioning-logic in Floating base the "flip" on the static 290px max-height,
+   * instead of the dynamic one based on available space. Without this, the list won't flip to top when there's
+   * not enough space below the input.
+   */
+  useClientLayoutEffect(() => {
+    queueMicrotask(() => setLocalOpen(isListOpen));
+  }, [isListOpen]);
 
   const { maxSelected, isMultiSelect } = useSelectedOptionsContext();
 
@@ -37,14 +50,26 @@ const FilteredOptions = () => {
     (allowNewValues && isValueNew && !maxSelected.isLimitReached) || // Render add new option
     filteredOptions.length > 0; // Render filtered options
 
+  const height = themeContext?.isDarkside ? "316px" : "290px";
+
   return (
-    <div
+    <Floating.Content
       className={cn("navds-combobox__list", {
         "navds-combobox__list--closed": !isListOpen,
         "navds-combobox__list--with-hover": isMouseLastUsedInputDevice,
       })}
       id={filteredOptionsUtil.getFilteredOptionsId(id)}
       tabIndex={-1}
+      sideOffset={8}
+      side="bottom"
+      fallbackPlacements={["top"]}
+      enabled={isListOpen}
+      style={{
+        maxHeight: localOpen
+          ? `min(${height}, var(--ac-floating-available-height))`
+          : `${height}`,
+      }}
+      autoUpdateWhileMounted={false}
     >
       {shouldRenderNonSelectables && (
         <div
@@ -74,7 +99,7 @@ const FilteredOptions = () => {
           ))}
         </ul>
       )}
-    </div>
+    </Floating.Content>
   );
 };
 

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

@@ -64,6 +64,7 @@ const useVirtualFocus = (
 
   const moveFocusDown = () => {
     const elementsAbleToReceiveFocus = getElementsAbleToReceiveFocus();
+
     if (!activeElement) {
       setActiveAndScrollToElement(elementsAbleToReceiveFocus[0]);
       return;

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

@@ -1,5 +1,8 @@
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 import React, { forwardRef } from "react";
+import { Floating } from "../../../overlays/floating/Floating";
 import { useRenameCSS } from "../../../theme/Theme";
 import { useMergeRefs } from "../../../util/hooks";
 import { useFilteredOptionsContext } from "../FilteredOptions/filteredOptionsContext";
@@ -54,42 +57,43 @@ export const InputController = forwardRef<
   const mergedInputRef = useMergeRefs(inputRef, ref);
 
   return (
-    // eslint-disable-next-line jsx-a11y/click-events-have-key-events
-    <div
-      className={cn("navds-combobox__wrapper-inner navds-text-field__input", {
-        "navds-combobox__wrapper-inner--virtually-unfocused":
-          activeDecendantId !== undefined,
-      })}
-      onClick={() => {
-        if (inputProps.disabled || readOnly) {
-          return;
-        }
+    <Floating.Anchor asChild>
+      <div
+        className={cn("navds-combobox__wrapper-inner navds-text-field__input", {
+          "navds-combobox__wrapper-inner--virtually-unfocused":
+            activeDecendantId !== undefined,
+        })}
+        onClick={() => {
+          if (inputProps.disabled || readOnly) {
+            return;
+          }
 
-        toggleIsListOpen(true);
-        focusInput();
-      }}
-    >
-      {!shouldShowSelectedOptions ? (
-        <Input
-          id={inputProps.id}
-          ref={mergedInputRef}
-          inputClassName={inputClassName}
-          readOnly={readOnly}
-          {...rest}
-        />
-      ) : (
-        <SelectedOptions selectedOptions={selectedOptions} size={size}>
+          toggleIsListOpen(true);
+          focusInput();
+        }}
+      >
+        {!shouldShowSelectedOptions ? (
           <Input
             id={inputProps.id}
             ref={mergedInputRef}
             inputClassName={inputClassName}
-            shouldShowSelectedOptions={shouldShowSelectedOptions}
             readOnly={readOnly}
             {...rest}
           />
-        </SelectedOptions>
-      )}
-      {toggleListButton && <ToggleListButton ref={toggleOpenButtonRef} />}
-    </div>
+        ) : (
+          <SelectedOptions selectedOptions={selectedOptions} size={size}>
+            <Input
+              id={inputProps.id}
+              ref={mergedInputRef}
+              inputClassName={inputClassName}
+              shouldShowSelectedOptions={shouldShowSelectedOptions}
+              readOnly={readOnly}
+              {...rest}
+            />
+          </SelectedOptions>
+        )}
+        {toggleListButton && <ToggleListButton ref={toggleOpenButtonRef} />}
+      </div>
+    </Floating.Anchor>
   );
 });

package/src/form/radio/Radio.tsx

@@ -25,9 +25,11 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>((props, ref) => {
         <input
           {...omit(props, ["children", "size", "description", "readOnly"])}
           {...omit(inputProps, ["aria-invalid", "aria-describedby"])}
-          aria-describedby={cl(inputProps["aria-describedby"], {
-            [descriptionId]: props.description,
-          })}
+          aria-describedby={
+            cl(inputProps["aria-describedby"], {
+              [descriptionId]: props.description,
+            }) || undefined
+          }
           className={cn("navds-radio__input")}
           ref={ref}
         />

package/src/overlays/floating/Floating.tsx

@@ -18,6 +18,7 @@ import React, {
   useRef,
   useState,
 } from "react";
+import { useModalContext } from "../../modal/Modal.context";
 import { Slot } from "../../slot/Slot";
 import { createContext } from "../../util/create-context";
 import {
@@ -26,6 +27,7 @@ import {
   useMergeRefs,
 } from "../../util/hooks";
 import { AsChildProps } from "../../util/types";
+import { useOpenChangeComplete } from "../overlay/hooks/useOpenChangeComplete";
 import {
   type Align,
   type Measurable,
@@ -188,7 +190,17 @@ interface FloatingContentProps extends HTMLAttributes<HTMLDivElement> {
   collisionPadding?: number | Partial<Record<Side, number>>;
   hideWhenDetached?: boolean;
   updatePositionStrategy?: "optimized" | "always";
+  fallbackPlacements?: FlipOptions["fallbackPlacements"];
   onPlaced?: () => void;
+  /**
+   * @default true
+   */
+  enabled?: boolean;
+  /**
+   * Only use this option if your floating element is conditionally rendered, not hidden with CSS.
+   * @default true
+   */
+  autoUpdateWhileMounted?: boolean;
   arrow?: {
     className?: string;
     padding?: number;
@@ -212,11 +224,15 @@ const FloatingContent = forwardRef<HTMLDivElement, FloatingContentProps>(
       updatePositionStrategy = "optimized",
       onPlaced,
       arrow: _arrow,
+      fallbackPlacements,
+      enabled = true,
+      autoUpdateWhileMounted = true,
       ...contentProps
     }: FloatingContentProps,
     forwardedRef,
   ) => {
     const context = useFloatingContext();
+    const modalContext = useModalContext(false);
 
     const arrowDefaults = {
       padding: 5,
@@ -256,68 +272,103 @@ const FloatingContent = forwardRef<HTMLDivElement, FloatingContentProps>(
       altBoundary: hasExplicitBoundaries,
       /* https://floating-ui.com/docs/flip#fallbackaxissidedirection */
       fallbackAxisSideDirection: "end",
+      fallbackPlacements,
     };
 
-    const { refs, floatingStyles, placement, isPositioned, middlewareData } =
-      useFloating({
-        // default to `fixed` strategy so users don't have to pick and we also avoid focus scroll issues
-        strategy: "fixed",
-        placement: desiredPlacement,
-        whileElementsMounted: (...args) => {
-          const cleanup = autoUpdate(...args, {
-            animationFrame: updatePositionStrategy === "always",
-          });
-          return cleanup;
-        },
-        elements: {
-          reference: context.anchor,
-        },
-        middleware: [
-          offset({
-            mainAxis: sideOffset + arrowHeight,
-            alignmentAxis: alignOffset,
+    const {
+      refs,
+      floatingStyles,
+      placement,
+      isPositioned,
+      middlewareData,
+      elements: floatingElements,
+      update,
+    } = useFloating({
+      open: enabled,
+      // default to `fixed` strategy so users don't have to pick and we also avoid focus scroll issues
+      strategy: "fixed",
+      placement: desiredPlacement,
+      whileElementsMounted: autoUpdateWhileMounted
+        ? (...args) => {
+            const cleanup = autoUpdate(...args, {
+              animationFrame: updatePositionStrategy === "always",
+            });
+            return cleanup;
+          }
+        : undefined,
+      elements: {
+        reference: context.anchor,
+      },
+      middleware: [
+        offset({
+          mainAxis: sideOffset + arrowHeight,
+          alignmentAxis: alignOffset,
+        }),
+        avoidCollisions &&
+          shift({
+            mainAxis: true,
+            crossAxis: false,
+            limiter: limitShift(),
           }),
-          avoidCollisions &&
-            shift({
-              mainAxis: true,
-              crossAxis: false,
-              limiter: limitShift(),
-            }),
-          avoidCollisions && flip({ ...detectOverflowOptions }),
-          size({
-            ...detectOverflowOptions,
-            apply: ({ elements, rects, availableWidth, availableHeight }) => {
-              const { width: anchorWidth, height: anchorHeight } =
-                rects.reference;
-              const contentStyle = elements.floating.style;
-              /**
-               * Allows styling and animations based on the available space.
-               */
-              contentStyle.setProperty(
-                "--ac-floating-available-width",
-                `${availableWidth}px`,
-              );
-              contentStyle.setProperty(
-                "--ac-floating-available-height",
-                `${availableHeight}px`,
-              );
-              contentStyle.setProperty(
-                "--ac-floating-anchor-width",
-                `${anchorWidth}px`,
-              );
-              contentStyle.setProperty(
-                "--ac-floating-anchor-height",
-                `${anchorHeight}px`,
-              );
-            },
-          }),
-          arrow &&
-            floatingArrow({ element: arrow, padding: arrowDefaults.padding }),
-          transformOrigin({ arrowWidth, arrowHeight }),
-          hideWhenDetached &&
-            hide({ strategy: "referenceHidden", ...detectOverflowOptions }),
-        ],
-      });
+        avoidCollisions && flip({ ...detectOverflowOptions }),
+        size({
+          ...detectOverflowOptions,
+          apply: ({ elements, rects, availableWidth, availableHeight }) => {
+            const { width: anchorWidth, height: anchorHeight } =
+              rects.reference;
+            const contentStyle = elements.floating.style;
+            /**
+             * Allows styling and animations based on the available space.
+             */
+            contentStyle.setProperty(
+              "--ac-floating-available-width",
+              `${availableWidth}px`,
+            );
+            contentStyle.setProperty(
+              "--ac-floating-available-height",
+              `${availableHeight}px`,
+            );
+            contentStyle.setProperty(
+              "--ac-floating-anchor-width",
+              `${anchorWidth}px`,
+            );
+            contentStyle.setProperty(
+              "--ac-floating-anchor-height",
+              `${anchorHeight}px`,
+            );
+          },
+        }),
+        arrow &&
+          floatingArrow({ element: arrow, padding: arrowDefaults.padding }),
+        transformOrigin({ arrowWidth, arrowHeight }),
+        hideWhenDetached &&
+          hide({ strategy: "referenceHidden", ...detectOverflowOptions }),
+      ],
+    });
+
+    useEffect(() => {
+      if (autoUpdateWhileMounted || !enabled) {
+        return;
+      }
+      if (floatingElements.reference && floatingElements.floating) {
+        const cleanup = autoUpdate(
+          floatingElements.reference,
+          floatingElements.floating,
+          update,
+        );
+
+        return () => {
+          cleanup();
+        };
+      }
+    }, [autoUpdateWhileMounted, enabled, floatingElements, update]);
+
+    useOpenChangeComplete({
+      enabled: !!modalContext?.ref,
+      open: enabled,
+      ref: modalContext?.ref,
+      onComplete: update,
+    });
 
     const [placedSide, placedAlign] = getSideAndAlignFromPlacement(placement);