@primer/react 38.30.1-rc.bce2a87c7 → 38.31.0-rc.2630f104b

package/dist/experimental/index.js

@@ -1,39 +1,49 @@
 "use client";
-export { Blankslate } from '../Blankslate/index.js';
-export { Card } from '../Card/index.js';
-export { Table } from '../DataTable/index.js';
-export { ActionBar } from '../ActionBar/index.js';
-export { Stack } from '../Stack/index.js';
-export { FilteredActionList } from '../FilteredActionList/index.js';
-export { TopicTag } from '../TopicTag/index.js';
-export { Announce } from '../live-region/Announce.js';
-export { AriaAlert } from '../live-region/AriaAlert.js';
-export { AriaStatus } from '../live-region/AriaStatus.js';
-export { ButtonBase } from '../Button/ButtonBase.js';
-export { DataTable } from '../DataTable/DataTable.js';
-export { DefaultFeatureFlags } from '../FeatureFlags/DefaultFeatureFlags.js';
-export { Dialog } from '../Dialog/Dialog.js';
-export { FeatureFlags } from '../FeatureFlags/FeatureFlags.js';
-export { FilteredActionListLoadingTypes } from '../FilteredActionList/constants.js';
-export { Hidden } from '../Hidden/Hidden.js';
-export { InlineMessage } from '../InlineMessage/InlineMessage.js';
-export { IssueLabel } from './IssueLabel/IssueLabel.js';
-export { KeybindingHint } from '../KeybindingHint/KeybindingHint.js';
-export { NavList } from '../NavList/NavList.js';
-export { PageHeader } from '../PageHeader/PageHeader.js';
-export { ScrollableRegion } from '../ScrollableRegion/ScrollableRegion.js';
-export { SelectPanel } from './SelectPanel2/SelectPanel.js';
-export { SkeletonAvatar } from '../SkeletonAvatar/SkeletonAvatar.js';
-export { SkeletonBox } from '../Skeleton/SkeletonBox.js';
-export { SkeletonText } from '../SkeletonText/SkeletonText.js';
-export { Tabs } from './Tabs/Tabs.js';
-export { Tooltip } from '../TooltipV2/Tooltip.js';
-export { default as UnderlinePanels } from './UnderlinePanels/UnderlinePanels.js';
-export { createColumnHelper } from '../DataTable/column.js';
-export { getAccessibleKeybindingHintString } from '../KeybindingHint/utils.js';
-export { useFeatureFlag } from '../FeatureFlags/useFeatureFlag.js';
-export { useOverflow } from '../hooks/useOverflow.js';
-export { useSlots } from '../hooks/useSlots.js';
-export { useTab } from './Tabs/useTab.js';
-export { useTabList } from './Tabs/useTabList.js';
-export { useTabPanel } from './Tabs/useTabPanel.js';
+import { Announce } from "../live-region/Announce.js";
+import { AriaAlert } from "../live-region/AriaAlert.js";
+import { AriaStatus } from "../live-region/AriaStatus.js";
+import { ButtonBase } from "../Button/ButtonBase.js";
+import { KeybindingHint } from "../KeybindingHint/KeybindingHint.js";
+import { getAccessibleKeybindingHintString } from "../KeybindingHint/utils.js";
+import { Tooltip } from "../TooltipV2/Tooltip.js";
+import { useSlots } from "../hooks/useSlots.js";
+import { useOverflow } from "../hooks/useOverflow.js";
+import { ScrollableRegion } from "../ScrollableRegion/ScrollableRegion.js";
+import { Dialog } from "../Dialog/Dialog.js";
+import { DefaultFeatureFlags } from "../FeatureFlags/DefaultFeatureFlags.js";
+import { FeatureFlags } from "../FeatureFlags/FeatureFlags.js";
+import { useFeatureFlag } from "../FeatureFlags/useFeatureFlag.js";
+import { Stack } from "../Stack/index.js";
+import { SkeletonBox } from "../Skeleton/SkeletonBox.js";
+import { FilteredActionListLoadingTypes } from "../FilteredActionList/constants.js";
+import { FilteredActionList } from "../FilteredActionList/index.js";
+import { NavList } from "../NavList/NavList.js";
+import { SkeletonAvatar } from "../SkeletonAvatar/SkeletonAvatar.js";
+import { SkeletonText } from "../SkeletonText/SkeletonText.js";
+import { ActionBar } from "../ActionBar/index.js";
+import { PageHeader } from "../PageHeader/PageHeader.js";
+import { Blankslate as BlankslateContainer } from "../Blankslate/index.js";
+import { Card } from "../Card/index.js";
+import { DataTable } from "../DataTable/DataTable.js";
+import { createColumnHelper } from "../DataTable/column.js";
+import { Table } from "../DataTable/index.js";
+import { InlineMessage } from "../InlineMessage/InlineMessage.js";
+import { Hidden } from "../Hidden/Hidden.js";
+import { SelectPanel } from "./SelectPanel2/SelectPanel.js";
+import UnderlinePanels_default from "./UnderlinePanels/UnderlinePanels.js";
+import { IssueLabel } from "./IssueLabel/IssueLabel.js";
+import { useTab } from "./Tabs/useTab.js";
+import { useTabList } from "./Tabs/useTabList.js";
+import { useTabPanel } from "./Tabs/useTabPanel.js";
+import { Tabs } from "./Tabs/Tabs.js";
+import { TopicTag } from "../TopicTag/index.js";
+//#region src/experimental/index.ts
+/**
+* This is the place where we keep components that are not part of the public
+* api yet (not in main bundle). We don't recommend using it in production.
+*
+* But, they are published on npm and you can import them for experimentation/feedback.
+* example: import {ActionList} from '@primer/react/drafts
+*/
+//#endregion
+export { ActionBar, Announce, AriaAlert, AriaStatus, BlankslateContainer as Blankslate, ButtonBase, Card, DataTable, DefaultFeatureFlags, Dialog, FeatureFlags, FilteredActionList, FilteredActionListLoadingTypes, Hidden, InlineMessage, IssueLabel, KeybindingHint, NavList, PageHeader, ScrollableRegion, SelectPanel, SkeletonAvatar, SkeletonBox, SkeletonText, Stack, Table, Tabs, Tooltip, TopicTag, UnderlinePanels_default as UnderlinePanels, createColumnHelper, getAccessibleKeybindingHintString, useFeatureFlag, useOverflow, useSlots, useTab, useTabList, useTabPanel };

package/dist/hooks/MatchMediaContext.js

@@ -1,8 +1,5 @@
-import { createContext } from 'react';
-
-// Used to keep track of overrides to specific media query features, this should
-// be used for development and demo purposes to emulate specific features if
-// unavailable through devtools
-const MatchMediaContext = /*#__PURE__*/createContext({});
-
+import { createContext } from "react";
+//#region src/hooks/MatchMediaContext.ts
+const MatchMediaContext = /*#__PURE__*/ createContext({});
+//#endregion
 export { MatchMediaContext };

package/dist/hooks/index.d.ts

@@ -1,21 +1,11 @@
-export { useOnOutsideClick } from './useOnOutsideClick';
-export type { UseOnOutsideClickSettings, TouchOrMouseEvent } from './useOnOutsideClick';
-export { useProvidedRefOrCreate } from './useProvidedRefOrCreate';
-export { useOnEscapePress } from './useOnEscapePress';
-export { useOpenAndCloseFocus } from './useOpenAndCloseFocus';
-export type { UseOpenAndCloseFocusSettings } from './useOpenAndCloseFocus';
-export type { AnchoredPositionHookSettings } from './useAnchoredPosition';
-export { useAnchoredPosition } from './useAnchoredPosition';
-export { useOverlay } from './useOverlay';
-export type { UseOverlaySettings } from './useOverlay';
-export { useRenderForcingRef } from './useRenderForcingRef';
-export { useProvidedStateOrCreate } from './useProvidedStateOrCreate';
-export { useMenuInitialFocus } from './useMenuInitialFocus';
-export { useMenuKeyboardNavigation } from './useMenuKeyboardNavigation';
-export { useMnemonics } from './useMnemonics';
-export { useRefObjectAsForwardedRef } from './useRefObjectAsForwardedRef';
-export { useId } from './useId';
-export { useIsMacOS } from './useIsMacOS';
-export { useMergedRefs } from './useMergedRefs';
-export { useSlots } from './useSlots';
-//# sourceMappingURL=index.d.ts.map
+import { TouchOrMouseEvent, UseOnOutsideClickSettings, useOnOutsideClick } from "./useOnOutsideClick.js";
+import { useProvidedRefOrCreate } from "./useProvidedRefOrCreate.js";
+import { useOnEscapePress } from "./useOnEscapePress.js";
+import { UseOpenAndCloseFocusSettings, useOpenAndCloseFocus } from "./useOpenAndCloseFocus.js";
+import { AnchoredPositionHookSettings, useAnchoredPosition } from "./useAnchoredPosition.js";
+import { UseOverlaySettings, useOverlay } from "./useOverlay.js";
+import { useRefObjectAsForwardedRef } from "./useRefObjectAsForwardedRef.js";
+import { useMergedRefs } from "./useMergedRefs.js";
+import { useId } from "./useId.js";
+import { useSlots } from "./useSlots.js";
+export type { TouchOrMouseEvent };

package/dist/hooks/useAnchoredPosition.d.ts

@@ -1,11 +1,13 @@
-import React from 'react';
-import type { AnchorPosition, PositionSettings } from '@primer/behaviors';
-export interface AnchoredPositionHookSettings extends Partial<PositionSettings> {
-    floatingElementRef?: React.RefObject<Element | null>;
-    anchorElementRef?: React.RefObject<Element | null>;
-    pinPosition?: boolean;
-    onPositionChange?: (position: AnchorPosition | undefined) => void;
-    enabled?: boolean;
+import React from "react";
+import { AnchorPosition, PositionSettings } from "@primer/behaviors";
+
+//#region src/hooks/useAnchoredPosition.d.ts
+interface AnchoredPositionHookSettings extends Partial<PositionSettings> {
+  floatingElementRef?: React.RefObject<Element | null>;
+  anchorElementRef?: React.RefObject<Element | null>;
+  pinPosition?: boolean;
+  onPositionChange?: (position: AnchorPosition | undefined) => void;
+  enabled?: boolean;
 }
 /**
  * Calculates the top and left values for an absolutely-positioned floating element
@@ -16,9 +18,10 @@ export interface AnchoredPositionHookSettings extends Partial<PositionSettings>
  * @returns An object of {top: number, left: number} to absolutely-position the
  * floating element.
  */
-export declare function useAnchoredPosition(settings?: AnchoredPositionHookSettings, dependencies?: React.DependencyList): {
-    floatingElementRef: React.RefObject<Element | null>;
-    anchorElementRef: React.RefObject<Element | null>;
-    position: AnchorPosition | undefined;
+declare function useAnchoredPosition(settings?: AnchoredPositionHookSettings, dependencies?: React.DependencyList): {
+  floatingElementRef: React.RefObject<Element | null>;
+  anchorElementRef: React.RefObject<Element | null>;
+  position: AnchorPosition | undefined;
 };
-//# sourceMappingURL=useAnchoredPosition.d.ts.map
+//#endregion
+export { AnchoredPositionHookSettings, useAnchoredPosition };

package/dist/hooks/useAnchoredPosition.js

@@ -1,155 +1,139 @@
-import React from 'react';
-import { getAnchoredPosition } from '@primer/behaviors';
-import { useProvidedRefOrCreate } from './useProvidedRefOrCreate.js';
-import { useResizeObserver } from './useResizeObserver.js';
-import useIsomorphicLayoutEffect from '../utils/useIsomorphicLayoutEffect.js';
-
+import { useProvidedRefOrCreate } from "./useProvidedRefOrCreate.js";
+import useIsomorphicLayoutEffect from "../utils/useIsomorphicLayoutEffect.js";
+import { useResizeObserver } from "./useResizeObserver.js";
+import React from "react";
+import { getAnchoredPosition } from "@primer/behaviors";
+//#region src/hooks/useAnchoredPosition.ts
 /**
- * Returns all scrollable ancestor elements of the given element, plus the window.
- * An element is scrollable if its computed overflow/overflow-x/overflow-y is
- * 'auto', 'scroll', or 'overlay'.
- */
+* Returns all scrollable ancestor elements of the given element, plus the window.
+* An element is scrollable if its computed overflow/overflow-x/overflow-y is
+* 'auto', 'scroll', or 'overlay'.
+*/
 function getScrollableAncestors(element) {
-  const scrollables = [];
-  let current = element.parentElement;
-  while (current) {
-    const style = getComputedStyle(current);
-    const overflowY = style.overflowY;
-    const overflowX = style.overflowX;
-    if (/auto|scroll|overlay/.test(overflowY) || /auto|scroll|overlay/.test(overflowX)) {
-      scrollables.push(current);
-    }
-    current = current.parentElement;
-  }
-  scrollables.push(window);
-  return scrollables;
+	const scrollables = [];
+	let current = element.parentElement;
+	while (current) {
+		const style = getComputedStyle(current);
+		const overflowY = style.overflowY;
+		const overflowX = style.overflowX;
+		if (/auto|scroll|overlay/.test(overflowY) || /auto|scroll|overlay/.test(overflowX)) scrollables.push(current);
+		current = current.parentElement;
+	}
+	scrollables.push(window);
+	return scrollables;
 }
 /**
- * Calculates the top and left values for an absolutely-positioned floating element
- * to be anchored to some anchor element. Returns refs for the floating element
- * and the anchor element, along with the position.
- * @param settings Settings for calculating the anchored position.
- * @param dependencies Dependencies to determine when to re-calculate the position.
- * @returns An object of {top: number, left: number} to absolutely-position the
- * floating element.
- */
+* Calculates the top and left values for an absolutely-positioned floating element
+* to be anchored to some anchor element. Returns refs for the floating element
+* and the anchor element, along with the position.
+* @param settings Settings for calculating the anchored position.
+* @param dependencies Dependencies to determine when to re-calculate the position.
+* @returns An object of {top: number, left: number} to absolutely-position the
+* floating element.
+*/
 function useAnchoredPosition(settings, dependencies = []) {
-  var _settings$enabled;
-  const floatingElementRef = useProvidedRefOrCreate(settings === null || settings === void 0 ? void 0 : settings.floatingElementRef);
-  const anchorElementRef = useProvidedRefOrCreate(settings === null || settings === void 0 ? void 0 : settings.anchorElementRef);
-  const enabled = (_settings$enabled = settings === null || settings === void 0 ? void 0 : settings.enabled) !== null && _settings$enabled !== void 0 ? _settings$enabled : true;
-  const savedOnPositionChange = React.useRef(settings === null || settings === void 0 ? void 0 : settings.onPositionChange);
-  const [position, setPosition] = React.useState(undefined);
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [_, setPrevHeight] = React.useState(undefined);
-  const topPositionChanged = (prevPosition, newPosition) => {
-    return prevPosition && ['outside-top', 'inside-top'].includes(prevPosition.anchorSide) && (
-    // either the anchor changed or the element is trying to shrink in height
-    prevPosition.anchorSide !== newPosition.anchorSide || prevPosition.top < newPosition.top);
-  };
-  const updateElementHeight = () => {
-    let heightUpdated = false;
-    setPrevHeight(prevHeight => {
-      var _floatingElementRef$c, _floatingElementRef$c2;
-      // if the element is trying to shrink in height, restore to old height to prevent it from jumping
-      if (prevHeight && prevHeight > ((_floatingElementRef$c = (_floatingElementRef$c2 = floatingElementRef.current) === null || _floatingElementRef$c2 === void 0 ? void 0 : _floatingElementRef$c2.clientHeight) !== null && _floatingElementRef$c !== void 0 ? _floatingElementRef$c : 0)) {
-        requestAnimationFrame(() => {
-          floatingElementRef.current.style.height = `${prevHeight}px`;
-        });
-        heightUpdated = true;
-      }
-      return prevHeight;
-    });
-    return heightUpdated;
-  };
-  const updatePosition = React.useCallback(() => {
-    var _floatingElementRef$c5;
-    if (!enabled) return;
-    if (floatingElementRef.current instanceof Element && anchorElementRef.current instanceof Element) {
-      const newPosition = getAnchoredPosition(floatingElementRef.current, anchorElementRef.current, settings);
-      setPosition(prev => {
-        if (settings !== null && settings !== void 0 && settings.pinPosition && topPositionChanged(prev, newPosition)) {
-          var _anchorElementRef$cur, _anchorElementRef$cur2, _floatingElementRef$c3, _floatingElementRef$c4;
-          const anchorTop = (_anchorElementRef$cur = (_anchorElementRef$cur2 = anchorElementRef.current) === null || _anchorElementRef$cur2 === void 0 ? void 0 : _anchorElementRef$cur2.getBoundingClientRect().top) !== null && _anchorElementRef$cur !== void 0 ? _anchorElementRef$cur : 0;
-          const elementStillFitsOnTop = anchorTop > ((_floatingElementRef$c3 = (_floatingElementRef$c4 = floatingElementRef.current) === null || _floatingElementRef$c4 === void 0 ? void 0 : _floatingElementRef$c4.clientHeight) !== null && _floatingElementRef$c3 !== void 0 ? _floatingElementRef$c3 : 0);
-          if (elementStillFitsOnTop && updateElementHeight()) {
-            return prev;
-          }
-        }
-        if (prev && prev.anchorSide === newPosition.anchorSide) {
-          var _savedOnPositionChang;
-          // if the position hasn't changed, don't update
-          (_savedOnPositionChang = savedOnPositionChange.current) === null || _savedOnPositionChang === void 0 ? void 0 : _savedOnPositionChang.call(savedOnPositionChange, newPosition);
-        }
-        return newPosition;
-      });
-    } else {
-      var _savedOnPositionChang2;
-      setPosition(undefined);
-      (_savedOnPositionChang2 = savedOnPositionChange.current) === null || _savedOnPositionChang2 === void 0 ? void 0 : _savedOnPositionChang2.call(savedOnPositionChange, undefined);
-    }
-    setPrevHeight((_floatingElementRef$c5 = floatingElementRef.current) === null || _floatingElementRef$c5 === void 0 ? void 0 : _floatingElementRef$c5.clientHeight);
-  },
-  // eslint-disable-next-line react-hooks/exhaustive-deps, react-hooks/use-memo
-  [floatingElementRef, anchorElementRef, enabled, ...dependencies]);
-  useIsomorphicLayoutEffect(() => {
-    savedOnPositionChange.current = settings === null || settings === void 0 ? void 0 : settings.onPositionChange;
-  }, [settings === null || settings === void 0 ? void 0 : settings.onPositionChange]);
-
-  // Defer the first updatePosition to useEffect when the overlay is closed on
-  // mount, avoiding paint-blocking cascading setState. If the overlay is already
-  // open on mount, run synchronously in useLayoutEffect to prevent a flash.
-  // After mount (including Suspense reappear), only call updatePosition when
-  // both refs are attached — skipping closed overlays avoids unnecessary setState.
-  const hasMountedRef = React.useRef(false);
-  useIsomorphicLayoutEffect(() => {
-    if (floatingElementRef.current instanceof Element && anchorElementRef.current instanceof Element) {
-      hasMountedRef.current = true;
-      updatePosition();
-    }
-  }, [updatePosition, floatingElementRef, anchorElementRef]);
-  React.useEffect(() => {
-    if (!hasMountedRef.current) {
-      hasMountedRef.current = true;
-      updatePosition();
-    }
-  }, [updatePosition]);
-  useResizeObserver(updatePosition, undefined, [], enabled); // watches for changes in window size
-  useResizeObserver(updatePosition, floatingElementRef, [], enabled); // watches for changes in floating element size
-
-  // Recalculate position when any scrollable ancestor of the anchor scrolls.
-  // Uses requestAnimationFrame to avoid layout thrashing during scroll.
-  React.useEffect(() => {
-    if (!enabled) return;
-    const anchorEl = anchorElementRef.current;
-    if (!anchorEl) return;
-    let rafId = null;
-    const handleScroll = () => {
-      if (rafId !== null) return;
-      rafId = requestAnimationFrame(() => {
-        rafId = null;
-        updatePosition();
-      });
-    };
-    const scrollables = getScrollableAncestors(anchorEl);
-    for (const scrollable of scrollables) {
-      // eslint-disable-next-line github/prefer-observers -- IntersectionObserver cannot detect continuous scroll position changes needed for repositioning
-      scrollable.addEventListener('scroll', handleScroll);
-    }
-    return () => {
-      for (const scrollable of scrollables) {
-        scrollable.removeEventListener('scroll', handleScroll);
-      }
-      if (rafId !== null) {
-        cancelAnimationFrame(rafId);
-      }
-    };
-  }, [anchorElementRef, updatePosition, enabled]);
-  return {
-    floatingElementRef,
-    anchorElementRef,
-    position
-  };
+	var _settings$enabled;
+	const floatingElementRef = useProvidedRefOrCreate(settings === null || settings === void 0 ? void 0 : settings.floatingElementRef);
+	const anchorElementRef = useProvidedRefOrCreate(settings === null || settings === void 0 ? void 0 : settings.anchorElementRef);
+	const enabled = (_settings$enabled = settings === null || settings === void 0 ? void 0 : settings.enabled) !== null && _settings$enabled !== void 0 ? _settings$enabled : true;
+	const savedOnPositionChange = React.useRef(settings === null || settings === void 0 ? void 0 : settings.onPositionChange);
+	const [position, setPosition] = React.useState(void 0);
+	const [_, setPrevHeight] = React.useState(void 0);
+	const topPositionChanged = (prevPosition, newPosition) => {
+		return prevPosition && ["outside-top", "inside-top"].includes(prevPosition.anchorSide) && (prevPosition.anchorSide !== newPosition.anchorSide || prevPosition.top < newPosition.top);
+	};
+	const updateElementHeight = () => {
+		let heightUpdated = false;
+		setPrevHeight((prevHeight) => {
+			var _floatingElementRef$c, _floatingElementRef$c2;
+			if (prevHeight && prevHeight > ((_floatingElementRef$c = (_floatingElementRef$c2 = floatingElementRef.current) === null || _floatingElementRef$c2 === void 0 ? void 0 : _floatingElementRef$c2.clientHeight) !== null && _floatingElementRef$c !== void 0 ? _floatingElementRef$c : 0)) {
+				requestAnimationFrame(() => {
+					floatingElementRef.current.style.height = `${prevHeight}px`;
+				});
+				heightUpdated = true;
+			}
+			return prevHeight;
+		});
+		return heightUpdated;
+	};
+	const updatePosition = React.useCallback(() => {
+		var _floatingElementRef$c5;
+		if (!enabled) return;
+		if (floatingElementRef.current instanceof Element && anchorElementRef.current instanceof Element) {
+			const newPosition = getAnchoredPosition(floatingElementRef.current, anchorElementRef.current, settings);
+			setPosition((prev) => {
+				if (settings !== null && settings !== void 0 && settings.pinPosition && topPositionChanged(prev, newPosition)) {
+					var _anchorElementRef$cur, _anchorElementRef$cur2, _floatingElementRef$c3, _floatingElementRef$c4;
+					if (((_anchorElementRef$cur = (_anchorElementRef$cur2 = anchorElementRef.current) === null || _anchorElementRef$cur2 === void 0 ? void 0 : _anchorElementRef$cur2.getBoundingClientRect().top) !== null && _anchorElementRef$cur !== void 0 ? _anchorElementRef$cur : 0) > ((_floatingElementRef$c3 = (_floatingElementRef$c4 = floatingElementRef.current) === null || _floatingElementRef$c4 === void 0 ? void 0 : _floatingElementRef$c4.clientHeight) !== null && _floatingElementRef$c3 !== void 0 ? _floatingElementRef$c3 : 0) && updateElementHeight()) return prev;
+				}
+				if (prev && prev.anchorSide === newPosition.anchorSide) {
+					var _savedOnPositionChang;
+					(_savedOnPositionChang = savedOnPositionChange.current) === null || _savedOnPositionChang === void 0 || _savedOnPositionChang.call(savedOnPositionChange, newPosition);
+				}
+				return newPosition;
+			});
+		} else {
+			var _savedOnPositionChang2;
+			setPosition(void 0);
+			(_savedOnPositionChang2 = savedOnPositionChange.current) === null || _savedOnPositionChang2 === void 0 || _savedOnPositionChang2.call(savedOnPositionChange, void 0);
+		}
+		setPrevHeight((_floatingElementRef$c5 = floatingElementRef.current) === null || _floatingElementRef$c5 === void 0 ? void 0 : _floatingElementRef$c5.clientHeight);
+	}, [
+		floatingElementRef,
+		anchorElementRef,
+		enabled,
+		...dependencies
+	]);
+	useIsomorphicLayoutEffect(() => {
+		savedOnPositionChange.current = settings === null || settings === void 0 ? void 0 : settings.onPositionChange;
+	}, [settings === null || settings === void 0 ? void 0 : settings.onPositionChange]);
+	const hasMountedRef = React.useRef(false);
+	useIsomorphicLayoutEffect(() => {
+		if (floatingElementRef.current instanceof Element && anchorElementRef.current instanceof Element) {
+			hasMountedRef.current = true;
+			updatePosition();
+		}
+	}, [
+		updatePosition,
+		floatingElementRef,
+		anchorElementRef
+	]);
+	React.useEffect(() => {
+		if (!hasMountedRef.current) {
+			hasMountedRef.current = true;
+			updatePosition();
+		}
+	}, [updatePosition]);
+	useResizeObserver(updatePosition, void 0, [], enabled);
+	useResizeObserver(updatePosition, floatingElementRef, [], enabled);
+	React.useEffect(() => {
+		if (!enabled) return;
+		const anchorEl = anchorElementRef.current;
+		if (!anchorEl) return;
+		let rafId = null;
+		const handleScroll = () => {
+			if (rafId !== null) return;
+			rafId = requestAnimationFrame(() => {
+				rafId = null;
+				updatePosition();
+			});
+		};
+		const scrollables = getScrollableAncestors(anchorEl);
+		for (const scrollable of scrollables) scrollable.addEventListener("scroll", handleScroll);
+		return () => {
+			for (const scrollable of scrollables) scrollable.removeEventListener("scroll", handleScroll);
+			if (rafId !== null) cancelAnimationFrame(rafId);
+		};
+	}, [
+		anchorElementRef,
+		updatePosition,
+		enabled
+	]);
+	return {
+		floatingElementRef,
+		anchorElementRef,
+		position
+	};
 }
-
+//#endregion
 export { useAnchoredPosition };

package/dist/hooks/useControllableState.js

@@ -1,64 +1,37 @@
-import React from 'react';
-import { warning } from '../utils/warning.js';
-
+import { warning } from "../utils/warning.js";
+import React from "react";
+//#region src/hooks/useControllableState.ts
 /**
- * This custom hook simplifies the behavior of a component if it has state that
- * can be both controlled and uncontrolled. It functions identical to a
- * useState() hook and provides [state, setState] for you to use. You can use
- * the `onChange` argument to allow updates to the `state` to be communicated to
- * owners of controlled components.
- *
- * Note: This hook will warn if a component is switching from controlled to
- * uncontrolled, or vice-versa.
- */
-function useControllableState({
-  name = 'custom',
-  defaultValue,
-  value,
-  onChange
-}) {
-  const [state, internalSetState] = React.useState(value !== null && value !== void 0 ? value : defaultValue);
-  const controlled = React.useRef(null);
-  const stableOnChange = React.useRef(onChange);
-  React.useEffect(() => {
-    stableOnChange.current = onChange;
-  });
-  if (controlled.current === null) {
-    controlled.current = value !== undefined;
-  }
-  const setState = React.useCallback(stateOrUpdater => {
-    var _stableOnChange$curre;
-    const value_0 = typeof stateOrUpdater === 'function' ?
-    // @ts-ignore stateOrUpdater is a function
-    stateOrUpdater(state) : stateOrUpdater;
-    if (controlled.current === false) {
-      internalSetState(value_0);
-    }
-    (_stableOnChange$curre = stableOnChange.current) === null || _stableOnChange$curre === void 0 ? void 0 : _stableOnChange$curre.call(stableOnChange, value_0);
-  }, [state]);
-  React.useEffect(() => {
-    const controlledValue = value !== undefined;
-
-    // Uncontrolled -> Controlled
-    // If the component prop is uncontrolled, the prop value should be undefined
-    // eslint-disable-next-line react-you-might-not-need-an-effect/no-event-handler
-    if (controlled.current === false && controlledValue) {
-      process.env.NODE_ENV !== "production" ? warning(true, 'A component is changing an uncontrolled %s component to be controlled. ' + 'This is likely caused by the value changing to a defined value ' + 'from undefined. Decide between using a controlled or uncontrolled ' + 'value for the lifetime of the component. ' + 'More info: https://reactjs.org/link/controlled-components', name) : void 0;
-    }
-
-    // Controlled -> Uncontrolled
-    // If the component prop is controlled, the prop value should be defined
-    // eslint-disable-next-line react-you-might-not-need-an-effect/no-event-handler
-    if (controlled.current === true && !controlledValue) {
-      process.env.NODE_ENV !== "production" ? warning(true, 'A component is changing a controlled %s component to be uncontrolled. ' + 'This is likely caused by the value changing to an undefined value ' + 'from a defined one. Decide between using a controlled or ' + 'uncontrolled value for the lifetime of the component. ' + 'More info: https://reactjs.org/link/controlled-components', name) : void 0;
-    }
-  }, [name, value]);
-
-  // eslint-disable-next-line react-hooks/refs
-  if (controlled.current === true) {
-    return [value, setState];
-  }
-  return [state, setState];
+* This custom hook simplifies the behavior of a component if it has state that
+* can be both controlled and uncontrolled. It functions identical to a
+* useState() hook and provides [state, setState] for you to use. You can use
+* the `onChange` argument to allow updates to the `state` to be communicated to
+* owners of controlled components.
+*
+* Note: This hook will warn if a component is switching from controlled to
+* uncontrolled, or vice-versa.
+*/
+function useControllableState({ name = "custom", defaultValue, value, onChange }) {
+	const [state, internalSetState] = React.useState(value !== null && value !== void 0 ? value : defaultValue);
+	const controlled = React.useRef(null);
+	const stableOnChange = React.useRef(onChange);
+	React.useEffect(() => {
+		stableOnChange.current = onChange;
+	});
+	if (controlled.current === null) controlled.current = value !== void 0;
+	const setState = React.useCallback((stateOrUpdater) => {
+		var _stableOnChange$curre;
+		const value_0 = typeof stateOrUpdater === "function" ? stateOrUpdater(state) : stateOrUpdater;
+		if (controlled.current === false) internalSetState(value_0);
+		(_stableOnChange$curre = stableOnChange.current) === null || _stableOnChange$curre === void 0 || _stableOnChange$curre.call(stableOnChange, value_0);
+	}, [state]);
+	React.useEffect(() => {
+		const controlledValue = value !== void 0;
+		if (controlled.current === false && controlledValue) warning(true, "A component is changing an uncontrolled %s component to be controlled. This is likely caused by the value changing to a defined value from undefined. Decide between using a controlled or uncontrolled value for the lifetime of the component. More info: https://reactjs.org/link/controlled-components", name);
+		if (controlled.current === true && !controlledValue) warning(true, "A component is changing a controlled %s component to be uncontrolled. This is likely caused by the value changing to an undefined value from a defined one. Decide between using a controlled or uncontrolled value for the lifetime of the component. More info: https://reactjs.org/link/controlled-components", name);
+	}, [name, value]);
+	if (controlled.current === true) return [value, setState];
+	return [state, setState];
 }
-
+//#endregion
 export { useControllableState };

package/dist/hooks/useDetails.d.ts

@@ -1,17 +1,23 @@
+//#region src/hooks/useDetails.d.ts
 type UseDetailsParameters = {
-    ref?: React.RefObject<HTMLDetailsElement>;
-    closeOnOutsideClick?: boolean;
-    defaultOpen?: boolean;
-    onClickOutside?: (event: MouseEvent) => void;
+  ref?: React.RefObject<HTMLDetailsElement>;
+  closeOnOutsideClick?: boolean;
+  defaultOpen?: boolean;
+  onClickOutside?: (event: MouseEvent) => void;
 };
-declare function useDetails({ ref, closeOnOutsideClick, defaultOpen, onClickOutside }: UseDetailsParameters): {
+declare function useDetails({
+  ref,
+  closeOnOutsideClick,
+  defaultOpen,
+  onClickOutside
+}: UseDetailsParameters): {
+  open: boolean | undefined;
+  setOpen: import("react").Dispatch<import("react").SetStateAction<boolean | undefined>>;
+  getDetailsProps: () => {
+    onToggle: (e: React.SyntheticEvent<HTMLElement, Event>) => void;
     open: boolean | undefined;
-    setOpen: import("react").Dispatch<import("react").SetStateAction<boolean | undefined>>;
-    getDetailsProps: () => {
-        onToggle: (e: React.SyntheticEvent<HTMLElement, Event>) => void;
-        open: boolean | undefined;
-        ref: import("react").RefObject<HTMLDetailsElement>;
-    };
+    ref: import("react").RefObject<HTMLDetailsElement>;
+  };
 };
-export default useDetails;
-//# sourceMappingURL=useDetails.d.ts.map
+//#endregion
+export { useDetails as default };