@primer/react 38.36.0 → 38.37.0-rc.05923388d

package/dist/experimental/Tabs/Tabs.js

@@ -1,4 +1,5 @@
 import useIsomorphicLayoutEffect from "../../utils/useIsomorphicLayoutEffect.js";
+import { useFeatureFlag } from "../../FeatureFlags/useFeatureFlag.js";
 import { useControllableState } from "../../hooks/useControllableState.js";
 import { TabsContext } from "./TabsContext.js";
 import { c } from "react-compiler-runtime";
@@ -13,11 +14,13 @@ import React, { useId } from "react";
 * The `Tab`, `TabList`, and `TabPanel` components are provided for convenience to showcase the API & implementation.
 */
 function Tabs(props) {
-	var _props$id, _props$defaultValue;
-	const $ = c(13);
+	var _props$id, _props$activationMode, _props$defaultValue;
+	const $ = c(16);
 	const { children, onValueChange } = props;
 	const generatedId = useId();
 	const groupId = (_props$id = props.id) !== null && _props$id !== void 0 ? _props$id : generatedId;
+	const controlledApiEnabled = useFeatureFlag("primer_react_underline_panels_controlled");
+	const activationMode = controlledApiEnabled ? (_props$activationMode = props.activationMode) !== null && _props$activationMode !== void 0 ? _props$activationMode : "automatic" : "automatic";
 	const t0 = (_props$defaultValue = props.defaultValue) !== null && _props$defaultValue !== void 0 ? _props$defaultValue : props.value;
 	let t1;
 	if ($[0] !== props.value || $[1] !== t0) {
@@ -31,49 +34,60 @@ function Tabs(props) {
 		$[2] = t1;
 	} else t1 = $[2];
 	const [selectedValue, setSelectedValue] = useControllableState(t1);
+	const [focusedValue, setFocusedValue] = React.useState();
 	const savedOnValueChange = React.useRef(onValueChange);
 	let t2;
-	if ($[3] !== groupId || $[4] !== selectedValue || $[5] !== setSelectedValue) {
+	if ($[3] !== activationMode || $[4] !== controlledApiEnabled || $[5] !== focusedValue || $[6] !== groupId || $[7] !== selectedValue || $[8] !== setSelectedValue) {
 		t2 = {
 			groupId,
 			selectedValue,
+			activationMode,
+			focusedValue,
 			selectTab(value) {
 				var _savedOnValueChange$c;
+				setFocusedValue(void 0);
+				if (controlledApiEnabled && value === selectedValue) return;
 				setSelectedValue(value);
 				(_savedOnValueChange$c = savedOnValueChange.current) === null || _savedOnValueChange$c === void 0 || _savedOnValueChange$c.call(savedOnValueChange, { value });
+			},
+			focusTab(value_0) {
+				setFocusedValue(value_0);
 			}
 		};
-		$[3] = groupId;
-		$[4] = selectedValue;
-		$[5] = setSelectedValue;
-		$[6] = t2;
-	} else t2 = $[6];
+		$[3] = activationMode;
+		$[4] = controlledApiEnabled;
+		$[5] = focusedValue;
+		$[6] = groupId;
+		$[7] = selectedValue;
+		$[8] = setSelectedValue;
+		$[9] = t2;
+	} else t2 = $[9];
 	const contextValue = t2;
 	let t3;
 	let t4;
-	if ($[7] !== onValueChange) {
+	if ($[10] !== onValueChange) {
 		t3 = () => {
 			savedOnValueChange.current = onValueChange;
 		};
 		t4 = [onValueChange];
-		$[7] = onValueChange;
-		$[8] = t3;
-		$[9] = t4;
+		$[10] = onValueChange;
+		$[11] = t3;
+		$[12] = t4;
 	} else {
-		t3 = $[8];
-		t4 = $[9];
+		t3 = $[11];
+		t4 = $[12];
 	}
 	useIsomorphicLayoutEffect(t3, t4);
 	let t5;
-	if ($[10] !== children || $[11] !== contextValue) {
+	if ($[13] !== children || $[14] !== contextValue) {
 		t5 = /*#__PURE__*/ jsx(TabsContext.Provider, {
 			value: contextValue,
 			children
 		});
-		$[10] = children;
-		$[11] = contextValue;
-		$[12] = t5;
-	} else t5 = $[12];
+		$[13] = children;
+		$[14] = contextValue;
+		$[15] = t5;
+	} else t5 = $[15];
 	return t5;
 }
 //#endregion

package/dist/experimental/Tabs/types.d.ts

@@ -51,6 +51,12 @@ type CommonTabsProps = {
    * unique id is generated automatically.
    */
   id?: string;
+  /**
+   * `'automatic'` (default) selects on focus, so Arrow/Home/End keys select immediately. `'manual'`
+   * only moves focus; selection commits on Enter/Space/click. Prefer `'manual'` when displaying a
+   * panel is not instant (e.g. it triggers a network request).
+   */
+  activationMode?: 'automatic' | 'manual';
 };
 type TabsProps = PropsWithChildren<(ControlledTabsProps | UncontrolledTabsProps) & CommonTabsProps>;
 type Label = {

package/dist/experimental/Tabs/useTab.js

@@ -12,6 +12,7 @@ function useTab(props) {
 	const selected = tabs.selectedValue === value;
 	const id = `${tabs.groupId}-tab-${value}`;
 	const panelId = `${tabs.groupId}-panel-${value}`;
+	const isTabStop = tabs.activationMode === "manual" && tabs.focusedValue !== void 0 ? tabs.focusedValue === value : selected;
 	let t0;
 	if ($[0] !== tabs || $[1] !== value) {
 		t0 = function onKeyDown(event) {
@@ -37,6 +38,10 @@ function useTab(props) {
 	let t2;
 	if ($[7] !== disabled || $[8] !== selected || $[9] !== tabs || $[10] !== value) {
 		t2 = function onFocus() {
+			if (tabs.activationMode === "manual") {
+				if (!disabled) tabs.focusTab(value);
+				return;
+			}
 			if (!selected && !disabled) tabs.selectTab(value);
 		};
 		$[7] = disabled;
@@ -47,7 +52,7 @@ function useTab(props) {
 	} else t2 = $[11];
 	const onFocus = t2;
 	const t3 = disabled ? true : void 0;
-	const t4 = selected ? 0 : -1;
+	const t4 = isTabStop ? 0 : -1;
 	let t5;
 	if ($[12] !== id || $[13] !== onFocus || $[14] !== onKeyDown || $[15] !== onMouseDown || $[16] !== panelId || $[17] !== selected || $[18] !== t3 || $[19] !== t4) {
 		t5 = { tabProps: {

package/dist/experimental/Tabs/useTabList.js

@@ -5,20 +5,29 @@ import { c } from "react-compiler-runtime";
 import { useRef } from "react";
 //#region src/experimental/Tabs/useTabList.ts
 function useTabList(props) {
-	const $ = c(9);
+	const $ = c(10);
 	const { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-orientation": ariaOrientation } = props;
 	const mergedRefEnabled = useFeatureFlag("primer_react_merged_forwarded_refs");
+	const controlledApiEnabled = useFeatureFlag("primer_react_underline_panels_controlled");
 	const tabListRef = useRef(null);
 	const mergedRef = useMergedRefs(tabListRef, props.ref);
 	const providedOrCreatedRef = useProvidedRefOrCreate(props.ref);
 	const readRef = mergedRefEnabled ? tabListRef : providedOrCreatedRef;
 	const appliedRef = mergedRefEnabled ? mergedRef : providedOrCreatedRef;
 	let t0;
-	if ($[0] !== ariaOrientation || $[1] !== readRef) {
+	if ($[0] !== ariaOrientation || $[1] !== controlledApiEnabled || $[2] !== readRef) {
 		t0 = (event) => {
 			const { current: tablist } = readRef;
 			if (tablist === null) return;
 			const tabs = getFocusableTabs(tablist);
+			const getCurrentIndex = () => {
+				if (controlledApiEnabled) {
+					const activeElement = tablist.ownerDocument.activeElement;
+					const focusedIndex = activeElement instanceof HTMLElement ? tabs.indexOf(activeElement) : -1;
+					if (focusedIndex !== -1) return focusedIndex;
+				}
+				return tabs.findIndex(_temp);
+			};
 			const isVertical = ariaOrientation === "vertical";
 			const nextKey = isVertical ? "ArrowDown" : "ArrowRight";
 			const prevKey = isVertical ? "ArrowUp" : "ArrowLeft";
@@ -27,13 +36,13 @@ function useTabList(props) {
 				event.stopPropagation();
 			}
 			if (event.key === nextKey) {
-				const selectedTabIndex = tabs.findIndex(_temp);
-				if (selectedTabIndex === -1) return;
-				tabs[(selectedTabIndex + 1) % tabs.length].focus();
+				const currentTabIndex = getCurrentIndex();
+				if (currentTabIndex === -1) return;
+				tabs[(currentTabIndex + 1) % tabs.length].focus();
 			} else if (event.key === prevKey) {
-				const selectedTabIndex_0 = tabs.findIndex(_temp2);
-				if (selectedTabIndex_0 === -1) return;
-				tabs[(tabs.length + selectedTabIndex_0 - 1) % tabs.length].focus();
+				const currentTabIndex_0 = getCurrentIndex();
+				if (currentTabIndex_0 === -1) return;
+				tabs[(tabs.length + currentTabIndex_0 - 1) % tabs.length].focus();
 			} else if (event.key === "Home") {
 				if (tabs[0]) tabs[0].focus();
 			} else if (event.key === "End") {
@@ -41,13 +50,14 @@ function useTabList(props) {
 			}
 		};
 		$[0] = ariaOrientation;
-		$[1] = readRef;
-		$[2] = t0;
-	} else t0 = $[2];
+		$[1] = controlledApiEnabled;
+		$[2] = readRef;
+		$[3] = t0;
+	} else t0 = $[3];
 	const onKeyDown = t0;
 	const t1 = ariaOrientation !== null && ariaOrientation !== void 0 ? ariaOrientation : "horizontal";
 	let t2;
-	if ($[3] !== appliedRef || $[4] !== ariaLabel || $[5] !== ariaLabelledby || $[6] !== onKeyDown || $[7] !== t1) {
+	if ($[4] !== appliedRef || $[5] !== ariaLabel || $[6] !== ariaLabelledby || $[7] !== onKeyDown || $[8] !== t1) {
 		t2 = { tabListProps: {
 			ref: appliedRef,
 			"aria-label": ariaLabel,
@@ -56,18 +66,15 @@ function useTabList(props) {
 			role: "tablist",
 			onKeyDown
 		} };
-		$[3] = appliedRef;
-		$[4] = ariaLabel;
-		$[5] = ariaLabelledby;
-		$[6] = onKeyDown;
-		$[7] = t1;
-		$[8] = t2;
-	} else t2 = $[8];
+		$[4] = appliedRef;
+		$[5] = ariaLabel;
+		$[6] = ariaLabelledby;
+		$[7] = onKeyDown;
+		$[8] = t1;
+		$[9] = t2;
+	} else t2 = $[9];
 	return t2;
 }
-function _temp2(tab_0) {
-	return tab_0.getAttribute("aria-selected") === "true";
-}
 function _temp(tab) {
 	return tab.getAttribute("aria-selected") === "true";
 }

package/dist/experimental/UnderlinePanels/UnderlinePanels.d.ts

@@ -16,6 +16,31 @@ type UnderlinePanelsProps = {
    * ID of the element containing the name for the tab list
    */
   'aria-labelledby'?: React.AriaAttributes['aria-labelledby'];
+  /**
+   * The value of the selected tab, keyed to each `UnderlinePanels.Tab`/`UnderlinePanels.Panel`
+   * `value`. Provide this (with `onChange`) for a controlled component where the selected tab is
+   * the single source of truth.
+   */
+  value?: string;
+  /**
+   * The value of the tab that should be selected by default, keyed to each tab's `value`. Use this
+   * for an uncontrolled component. Cannot be combined with `value`.
+   */
+  defaultValue?: string;
+  /**
+   * Fires whenever the selected tab changes, for every selection method including arrow keys.
+   * Unlike `UnderlinePanels.Tab`'s `onSelect`, which only fires on click and Enter/Space.
+   */
+  onChange?: ({
+    value
+  }: {
+    value: string;
+  }) => void;
+  /**
+   * `'automatic'` (default) selects on focus/arrow keys; `'manual'` only moves focus until
+   * Enter/Space/click. Prefer `'manual'` when displaying a panel is not instant.
+   */
+  activationMode?: 'automatic' | 'manual';
   /**
    * Custom string to use when generating the IDs of tabs and `aria-labelledby` for the panels
    */
@@ -34,6 +59,12 @@ type UnderlinePanelsProps = {
   as?: React.ElementType;
 };
 type TabProps = PropsWithChildren<{
+  /**
+   * A value that uniquely identifies this tab, paired with the `UnderlinePanels.Panel` of the same
+   * `value`. Provide this to use domain values (e.g. `'branch'`) with the container's controlled
+   * `value`/`onChange` API. When omitted, tabs and panels are paired by their DOM order.
+   */
+  value?: string;
   /**
    * Whether this is the selected tab
    */
@@ -51,7 +82,13 @@ type TabProps = PropsWithChildren<{
    */
   icon?: FC<IconProps>;
 }>;
-type PanelProps = React.HTMLAttributes<HTMLDivElement>;
+type PanelProps = React.HTMLAttributes<HTMLDivElement> & {
+  /**
+   * A value that uniquely identifies this panel, paired with the `UnderlinePanels.Tab` of the same
+   * `value`. When omitted, tabs and panels are paired by their DOM order.
+   */
+  value?: string;
+};
 declare const _default: React.FC<UnderlinePanelsProps> & SlotMarker & {
   Panel: FCWithSlotMarker<PanelProps>;
   Tab: FCWithSlotMarker<TabProps>;

package/dist/experimental/UnderlinePanels/UnderlinePanels.js

@@ -1,7 +1,9 @@
 import useIsomorphicLayoutEffect from "../../utils/useIsomorphicLayoutEffect.js";
 import { useResizeObserver } from "../../hooks/useResizeObserver.js";
 import { useId as useId$1 } from "../../hooks/useId.js";
+import { warning } from "../../utils/warning.js";
 import { isSlot } from "../../utils/is-slot.js";
+import { useFeatureFlag } from "../../FeatureFlags/useFeatureFlag.js";
 import { invariant } from "../../utils/invariant.js";
 import { UnderlineItem, UnderlineItemList, UnderlineWrapper } from "../../internal/components/UnderlineTabbedInterface.js";
 import UnderlinePanels_module_css_default from "./UnderlinePanels.module.css.js";
@@ -17,43 +19,78 @@ const UnderlinePanelsContext = /*#__PURE__*/ createContext({
 	iconsVisible: true,
 	loadingCounters: void 0
 });
-const UnderlinePanels = ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, children, loadingCounters, className, ...props }) => {
+const UnderlinePanels = ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, children, loadingCounters, className, value: valueProp, defaultValue: defaultValueProp, onChange: onChangeProp, activationMode = "automatic", ...props }) => {
+	var _tabValues$;
+	const controlledApiEnabled = useFeatureFlag("primer_react_underline_panels_controlled");
+	const controlledValue = controlledApiEnabled ? valueProp : void 0;
+	const defaultValue = controlledApiEnabled ? defaultValueProp : void 0;
+	const onChange = controlledApiEnabled ? onChangeProp : void 0;
 	const [iconsVisible, setIconsVisible] = useState(true);
 	const wrapperRef = useRef(null);
 	const listRef = useRef(null);
 	const parentId = useId$1(props.id);
-	const [tabs, tabPanels, tabsHaveIcons, selectedFromProps] = useMemo(() => {
+	const [tabs, tabPanels, tabsHaveIcons, selectedFromProps, tabValues, panelValues] = useMemo(() => {
 		let tabIndex = 0;
 		let panelIndex = 0;
 		const childrenWithProps = Children.map(children, (child) => {
-			if (/*#__PURE__*/ isValidElement(child) && (child.type === Tab || isSlot(child, Tab))) return /*#__PURE__*/ cloneElement(child, { value: `${tabIndex++}` });
-			if (/*#__PURE__*/ isValidElement(child) && (child.type === Panel || isSlot(child, Panel))) return /*#__PURE__*/ cloneElement(child, { value: `${panelIndex++}` });
+			if (/*#__PURE__*/ isValidElement(child) && (child.type === Tab || isSlot(child, Tab))) {
+				var _ref;
+				const value = (_ref = controlledApiEnabled ? child.props.value : void 0) !== null && _ref !== void 0 ? _ref : `${tabIndex}`;
+				tabIndex++;
+				return /*#__PURE__*/ cloneElement(child, { value });
+			}
+			if (/*#__PURE__*/ isValidElement(child) && (child.type === Panel || isSlot(child, Panel))) {
+				var _ref2;
+				const value = (_ref2 = controlledApiEnabled ? child.props.value : void 0) !== null && _ref2 !== void 0 ? _ref2 : `${panelIndex}`;
+				panelIndex++;
+				return /*#__PURE__*/ cloneElement(child, { value });
+			}
 			return child;
 		});
 		const tabs = [];
 		const tabPanels = [];
+		const tabValues = [];
+		const panelValues = [];
 		let selectedFromProps;
 		for (const child of Children.toArray(childrenWithProps)) {
 			if (!/*#__PURE__*/ isValidElement(child)) continue;
 			if (child.type === Tab || isSlot(child, Tab)) {
+				const value = child.props.value;
+				if (value !== void 0) tabValues.push(value);
 				const ariaSelected = child.props["aria-selected"];
-				if (ariaSelected === true || ariaSelected === "true") selectedFromProps = `${tabs.length}`;
+				if (ariaSelected === true || ariaSelected === "true") selectedFromProps = value;
 				tabs.push(child);
-			} else if (child.type === Panel || isSlot(child, Panel)) tabPanels.push(child);
+			} else if (child.type === Panel || isSlot(child, Panel)) {
+				const value = child.props.value;
+				if (value !== void 0) panelValues.push(value);
+				tabPanels.push(child);
+			}
 		}
 		return [
 			tabs,
 			tabPanels,
 			tabs.some((tab) => /*#__PURE__*/ React.isValidElement(tab) && tab.props.icon),
-			selectedFromProps
+			selectedFromProps,
+			tabValues,
+			panelValues
 		];
-	}, [children]);
-	const [selectedValue, setSelectedValue] = useState(() => selectedFromProps !== null && selectedFromProps !== void 0 ? selectedFromProps : "0");
+	}, [children, controlledApiEnabled]);
+	const isControlled = controlledValue !== void 0;
+	const [uncontrolledValue, setUncontrolledValue] = useState(() => {
+		var _ref3;
+		return (_ref3 = defaultValue !== null && defaultValue !== void 0 ? defaultValue : selectedFromProps) !== null && _ref3 !== void 0 ? _ref3 : "0";
+	});
 	const [prevSelectedFromProps, setPrevSelectedFromProps] = useState(selectedFromProps);
-	if (selectedFromProps !== prevSelectedFromProps) {
+	if (!isControlled && selectedFromProps !== prevSelectedFromProps) {
 		setPrevSelectedFromProps(selectedFromProps);
-		if (selectedFromProps !== void 0 && selectedFromProps !== selectedValue) setSelectedValue(selectedFromProps);
+		if (selectedFromProps !== void 0 && selectedFromProps !== uncontrolledValue) setUncontrolledValue(selectedFromProps);
 	}
+	const selectedValue = isControlled ? controlledValue : uncontrolledValue;
+	const effectiveValue = tabValues.includes(selectedValue) ? selectedValue : (_tabValues$ = tabValues[0]) !== null && _tabValues$ !== void 0 ? _tabValues$ : selectedValue;
+	const handleValueChange = (value) => {
+		if (!isControlled) setUncontrolledValue(value);
+		onChange === null || onChange === void 0 || onChange({ value });
+	};
 	const { tabListProps } = useTabList({
 		"aria-label": ariaLabel,
 		"aria-labelledby": ariaLabelledBy,
@@ -78,17 +115,31 @@ const UnderlinePanels = ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabel
 		const wrapperWidth = resizeObserverEntries[0].contentRect.width;
 		setIconsVisible(wrapperWidth > listWidthRef.current);
 	}, wrapperRef, []);
-	!(tabs.filter((tab) => {
-		const ariaSelected = /*#__PURE__*/ React.isValidElement(tab) && tab.props["aria-selected"];
-		return ariaSelected === true || ariaSelected === "true";
-	}).length <= 1) && invariant(false, "Only one tab can be selected at a time.");
-	!(tabs.length === tabPanels.length) && invariant(false, `The number of tabs and panels must be equal. Counted ${tabs.length} tabs and ${tabPanels.length} panels.`);
+	{
+		const selectedTabs = tabs.filter((tab) => {
+			const ariaSelected = /*#__PURE__*/ React.isValidElement(tab) && tab.props["aria-selected"];
+			return ariaSelected === true || ariaSelected === "true";
+		});
+		!(selectedTabs.length <= 1) && invariant(false, "Only one tab can be selected at a time.");
+		!(tabs.length === tabPanels.length) && invariant(false, `The number of tabs and panels must be equal. Counted ${tabs.length} tabs and ${tabPanels.length} panels.`);
+		const duplicateTabValue = tabValues.find((value, index) => tabValues.indexOf(value) !== index);
+		!(duplicateTabValue === void 0) && invariant(false, `Every tab must have a unique \`value\`. Found duplicate "${duplicateTabValue}".`);
+		const duplicatePanelValue = panelValues.find((value, index) => panelValues.indexOf(value) !== index);
+		!(duplicatePanelValue === void 0) && invariant(false, `Every panel must have a unique \`value\`. Found duplicate "${duplicatePanelValue}".`);
+		const unmatchedTabValue = tabValues.find((value) => !panelValues.includes(value));
+		!(unmatchedTabValue === void 0) && invariant(false, `Tab with \`value\` "${unmatchedTabValue}" has no matching panel. Give a \`UnderlinePanels.Panel\` the same \`value\`.`);
+		warning(isControlled && selectedTabs.length > 0, "UnderlinePanels: do not combine the controlled `value` prop with `aria-selected` on a tab. `value` takes precedence; use `value`/`onChange` (or `defaultValue`) to drive selection.");
+		warning(controlledValue !== void 0 && defaultValue !== void 0, "UnderlinePanels: do not combine the controlled `value` prop with `defaultValue`. `value` takes precedence; use one or the other.");
+		const providedValue = controlledValue !== null && controlledValue !== void 0 ? controlledValue : defaultValue;
+		warning(providedValue !== void 0 && tabValues.length > 0 && !tabValues.includes(providedValue), `UnderlinePanels: the selected value "${providedValue}" does not match any tab, so the first tab is selected instead. Provide a \`value\`/\`defaultValue\` that matches a \`UnderlinePanels.Tab\` \`value\`.`);
+	}
 	return /*#__PURE__*/ jsx(UnderlinePanelsContext.Provider, {
 		value: contextValue,
 		children: /*#__PURE__*/ jsxs(Tabs, {
 			id: parentId,
-			value: selectedValue,
-			onValueChange: ({ value }) => setSelectedValue(value),
+			value: effectiveValue,
+			activationMode,
+			onValueChange: ({ value }) => handleValueChange(value),
 			children: [/*#__PURE__*/ jsx(UnderlineWrapper, {
 				ref: wrapperRef,
 				"data-icons-visible": iconsVisible,

package/dist/hooks/useFocusTrap.js

@@ -27,13 +27,15 @@ function useFocusTrap(settings, dependencies = []) {
 		}
 	}
 	React.useEffect(() => {
-		if (containerRef.current instanceof HTMLElement) if (!disabled) {
-			var _initialFocusRef$curr;
-			abortController.current = focusTrap(containerRef.current, (_initialFocusRef$curr = initialFocusRef.current) !== null && _initialFocusRef$curr !== void 0 ? _initialFocusRef$curr : void 0);
-			return () => {
-				disableTrap();
-			};
-		} else disableTrap();
+		if (containerRef.current instanceof HTMLElement) {
+			if (!disabled) {
+				var _initialFocusRef$curr;
+				abortController.current = focusTrap(containerRef.current, (_initialFocusRef$curr = initialFocusRef.current) !== null && _initialFocusRef$curr !== void 0 ? _initialFocusRef$curr : void 0);
+				return () => {
+					disableTrap();
+				};
+			} else disableTrap();
+		}
 	}, [
 		containerRef,
 		initialFocusRef,

package/dist/hooks/useFocusZone.js

@@ -10,20 +10,22 @@ function useFocusZone(settings = {}, dependencies = []) {
 	const disabled = settings.disabled;
 	const abortController = React.useRef();
 	useEffect(() => {
-		if (containerRef.current instanceof HTMLElement && (!useActiveDescendant || activeDescendantControlRef.current instanceof HTMLElement)) if (!disabled) {
-			var _activeDescendantCont;
-			const vanillaSettings = {
-				...settings,
-				activeDescendantControl: (_activeDescendantCont = activeDescendantControlRef.current) !== null && _activeDescendantCont !== void 0 ? _activeDescendantCont : void 0
-			};
-			abortController.current = focusZone(containerRef.current, vanillaSettings);
-			return () => {
-				var _abortController$curr;
-				(_abortController$curr = abortController.current) === null || _abortController$curr === void 0 || _abortController$curr.abort();
-			};
-		} else {
-			var _abortController$curr2;
-			(_abortController$curr2 = abortController.current) === null || _abortController$curr2 === void 0 || _abortController$curr2.abort();
+		if (containerRef.current instanceof HTMLElement && (!useActiveDescendant || activeDescendantControlRef.current instanceof HTMLElement)) {
+			if (!disabled) {
+				var _activeDescendantCont;
+				const vanillaSettings = {
+					...settings,
+					activeDescendantControl: (_activeDescendantCont = activeDescendantControlRef.current) !== null && _activeDescendantCont !== void 0 ? _activeDescendantCont : void 0
+				};
+				abortController.current = focusZone(containerRef.current, vanillaSettings);
+				return () => {
+					var _abortController$curr;
+					(_abortController$curr = abortController.current) === null || _abortController$curr === void 0 || _abortController$curr.abort();
+				};
+			} else {
+				var _abortController$curr2;
+				(_abortController$curr2 = abortController.current) === null || _abortController$curr2 === void 0 || _abortController$curr2.abort();
+			}
 		}
 	}, [disabled, ...dependencies]);
 	return {

package/dist/hooks/useMenuInitialFocus.js

@@ -43,9 +43,10 @@ const useMenuInitialFocus = (open, containerRef, anchorRef) => {
 		t2 = function moveFocusOnOpen() {
 			if (!open || !(containerRef !== null && containerRef !== void 0 && containerRef.current)) return;
 			const iterable = iterateFocusableElements(containerRef.current);
-			if (openingGesture === "mouse-click") if (anchorRef !== null && anchorRef !== void 0 && anchorRef.current) anchorRef.current.focus();
-			else throw new Error("For focus management, please attach anchorRef");
-			else if (openingGesture && [
+			if (openingGesture === "mouse-click") {
+				if (anchorRef !== null && anchorRef !== void 0 && anchorRef.current) anchorRef.current.focus();
+				else throw new Error("For focus management, please attach anchorRef");
+			} else if (openingGesture && [
 				"ArrowDown",
 				"Space",
 				"Enter"