@fluentui/react-positioning 9.22.1 → 9.22.3

package/CHANGELOG.md

@@ -1,17 +1,36 @@
 # Change Log - @fluentui/react-positioning
 
-This log was last generated on Thu, 23 Apr 2026 11:59:29 GMT and should not be manually modified.
+This log was last generated on Wed, 24 Jun 2026 11:03:41 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.22.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.22.3)
+
+Wed, 24 Jun 2026 11:03:41 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.22.2..@fluentui/react-positioning_v9.22.3)
+
+### Patches
+
+- fix: remove redundant use no memo directives, and add justification to valid ones ([PR #36224](https://github.com/microsoft/fluentui/pull/36224) by martinhochel@microsoft.com)
+- Bump @fluentui/react-utilities to v9.26.5 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
+
+## [9.22.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.22.2)
+
+Tue, 26 May 2026 09:39:32 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.22.1..@fluentui/react-positioning_v9.22.2)
+
+### Patches
+
+- Bump @fluentui/react-utilities to v9.26.4 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+
 ## [9.22.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.22.1)
 
-Thu, 23 Apr 2026 11:59:29 GMT 
+Thu, 23 Apr 2026 14:21:10 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.22.0..@fluentui/react-positioning_v9.22.1)
 
 ### Patches
 
-- Bump @fluentui/react-utilities to v9.26.3 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
+- Bump @fluentui/react-utilities to v9.26.3 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
 
 ## [9.22.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.22.0)
 

package/lib/hooks/useSafeZoneArea/useSafeZoneArea.js

@@ -20,6 +20,7 @@ export function useSafeZoneArea({ debug = false, disabled = false, onSafeZoneEnt
         x: 0,
         y: 0
     });
+    // eslint-disable-next-line react-hooks/preserve-manual-memoization
     const containerListenerRef = React.useMemo(()=>{
         if (disabled) {
             return ()=>{
@@ -43,6 +44,7 @@ export function useSafeZoneArea({ debug = false, disabled = false, onSafeZoneEnt
         disabled,
         stateStore
     ]);
+    // eslint-disable-next-line react-hooks/preserve-manual-memoization
     const targetListenerRef = React.useMemo(()=>{
         if (disabled) {
             return ()=>{

package/lib/hooks/useSafeZoneArea/useSafeZoneArea.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/hooks/useSafeZoneArea/useSafeZoneArea.tsx"],"sourcesContent":["'use client';\n\nimport { useAnimationFrame, useEventCallback, useMergedRefs, useTimeout } from '@fluentui/react-utilities';\nimport type { JSXElement, RefObjectFunction } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { createSafeZoneAreaStateStore } from './createSafeZoneAreaStateStore';\nimport { type SafeZoneAreaImperativeHandle, SafeZoneArea } from './SafeZoneArea';\n\nexport type UseSafeZoneOptions = {\n  /** Enables debug mode: makes drawn shapes visible. */\n  debug?: boolean;\n\n  /** Disables the safe zone area. */\n  disabled?: boolean;\n\n  /** The time in milliseconds to wait before clearing the safe zone. */\n  timeout?: number;\n\n  /** Called when the mouse enters the safe zone. */\n  onSafeZoneEnter?: (e: React.MouseEvent) => void;\n\n  /** Called when the mouse moves within the safe zone. */\n  onSafeZoneMove?: (e: React.MouseEvent) => void;\n\n  /** Called when the mouse leaves the safe zone. */\n  onSafeZoneLeave?: (e: React.MouseEvent) => void;\n\n  /** Called when the safe zone times out, even if a cursor is still over a safe zone. */\n  onSafeZoneTimeout?: () => void;\n};\n\n/**\n * Time in milliseconds after which the safe zone area will be cleared if no mouse movement is detected.\n *\n * Only affects the target element, not the safe zone area itself.\n */\nconst MOUSE_MOVE_TARGET_POLLING_TIMEOUT = 2000;\n\n// ---\n\nexport function useSafeZoneArea({\n  debug = false,\n  disabled = false,\n\n  onSafeZoneEnter,\n  onSafeZoneMove,\n  onSafeZoneLeave,\n  onSafeZoneTimeout,\n\n  timeout = 1500,\n}: UseSafeZoneOptions = {}): {\n  containerRef: RefObjectFunction<HTMLElement>;\n  targetRef: RefObjectFunction<HTMLElement>;\n  elementToRender: JSXElement | null;\n} {\n  const [stateStore] = React.useState(createSafeZoneAreaStateStore);\n\n  const safeZoneAreaRef = React.useRef<SafeZoneAreaImperativeHandle>(null);\n  const containerRef = React.useRef<HTMLElement>(null);\n  const targetRef = React.useRef<HTMLElement>(null);\n\n  const [setSafeZoneCloseTimeout, clearSafeZoneCloseTimeout] = useTimeout();\n  const [requestUpdateFrame, clearUpdateFrame] = useAnimationFrame();\n\n  const mouseCoordinatesRef = React.useRef<{ x: number; y: number }>({ x: 0, y: 0 });\n\n  const containerListenerRef = React.useMemo(() => {\n    if (disabled) {\n      return () => {\n        // do nothing\n      };\n    }\n\n    let containerEl: HTMLElement | null = null;\n\n    function onContainerMouseEnter() {\n      clearSafeZoneCloseTimeout();\n      stateStore.toggleActive(false);\n    }\n\n    return (el: HTMLElement | null) => {\n      if (el === null) {\n        containerEl?.removeEventListener('mouseenter', onContainerMouseEnter);\n      }\n\n      containerEl = el;\n      el?.addEventListener('mouseenter', onContainerMouseEnter);\n    };\n  }, [clearSafeZoneCloseTimeout, disabled, stateStore]);\n\n  const targetListenerRef = React.useMemo(() => {\n    if (disabled) {\n      return () => {\n        // do nothing\n      };\n    }\n\n    let targetEl: HTMLElement | null = null;\n\n    function onTargetMouseMove(e: MouseEvent) {\n      mouseCoordinatesRef.current = { x: e.clientX, y: e.clientY };\n\n      if (!stateStore.isActive()) {\n        stateStore.toggleActive(true);\n      }\n\n      setSafeZoneCloseTimeout(() => {\n        stateStore.toggleActive(false);\n      }, MOUSE_MOVE_TARGET_POLLING_TIMEOUT);\n    }\n\n    return (el: HTMLElement | null) => {\n      if (el === null) {\n        clearUpdateFrame();\n        clearSafeZoneCloseTimeout();\n\n        targetEl?.removeEventListener('mousemove', onTargetMouseMove);\n      }\n\n      targetEl = el;\n      el?.addEventListener('mousemove', onTargetMouseMove);\n    };\n  }, [clearUpdateFrame, clearSafeZoneCloseTimeout, disabled, stateStore, setSafeZoneCloseTimeout]);\n\n  const onSvgMouseEnter = useEventCallback((e: React.MouseEvent) => {\n    onSafeZoneEnter?.(e);\n\n    setSafeZoneCloseTimeout(() => {\n      stateStore.toggleActive(false);\n      onSafeZoneTimeout?.();\n    }, timeout);\n  });\n\n  const onSvgMouseMove = useEventCallback((e: React.MouseEvent) => {\n    setSafeZoneCloseTimeout(() => {\n      stateStore.toggleActive(false);\n      onSafeZoneTimeout?.();\n    }, timeout);\n    onSafeZoneMove?.(e);\n  });\n\n  const onSvgMouseLeave = useEventCallback((e: React.MouseEvent) => {\n    onSafeZoneLeave?.(e);\n  });\n\n  React.useEffect(() => {\n    return stateStore.subscribe(isActive => {\n      if (isActive) {\n        function updateSVGs() {\n          const containerEl = containerRef.current;\n          const targetEl = targetRef.current;\n\n          if (containerEl && targetEl) {\n            safeZoneAreaRef.current?.updateSVG({\n              containerRect: containerEl.getBoundingClientRect(),\n              mouseCoordinates: [mouseCoordinatesRef.current.x, mouseCoordinatesRef.current.y],\n              targetRect: targetEl.getBoundingClientRect(),\n            });\n          }\n\n          requestUpdateFrame(updateSVGs);\n        }\n\n        updateSVGs();\n        return;\n      }\n\n      clearUpdateFrame();\n    });\n  }, [clearUpdateFrame, requestUpdateFrame, stateStore]);\n\n  return {\n    containerRef: useMergedRefs(containerRef, containerListenerRef),\n    targetRef: useMergedRefs(targetRef, targetListenerRef),\n\n    elementToRender: React.useMemo(\n      () =>\n        disabled ? null : (\n          <SafeZoneArea\n            debug={debug}\n            onMouseEnter={onSvgMouseEnter}\n            onMouseMove={onSvgMouseMove}\n            onMouseLeave={onSvgMouseLeave}\n            imperativeRef={safeZoneAreaRef}\n            stateStore={stateStore}\n          />\n        ),\n      [disabled, debug, onSvgMouseEnter, onSvgMouseMove, onSvgMouseLeave, stateStore],\n    ),\n  };\n}\n"],"names":["useAnimationFrame","useEventCallback","useMergedRefs","useTimeout","React","createSafeZoneAreaStateStore","SafeZoneArea","MOUSE_MOVE_TARGET_POLLING_TIMEOUT","useSafeZoneArea","debug","disabled","onSafeZoneEnter","onSafeZoneMove","onSafeZoneLeave","onSafeZoneTimeout","timeout","stateStore","useState","safeZoneAreaRef","useRef","containerRef","targetRef","setSafeZoneCloseTimeout","clearSafeZoneCloseTimeout","requestUpdateFrame","clearUpdateFrame","mouseCoordinatesRef","x","y","containerListenerRef","useMemo","containerEl","onContainerMouseEnter","toggleActive","el","removeEventListener","addEventListener","targetListenerRef","targetEl","onTargetMouseMove","e","current","clientX","clientY","isActive","onSvgMouseEnter","onSvgMouseMove","onSvgMouseLeave","useEffect","subscribe","updateSVGs","updateSVG","containerRect","getBoundingClientRect","mouseCoordinates","targetRect","elementToRender","onMouseEnter","onMouseMove","onMouseLeave","imperativeRef"],"mappings":"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"}
+{"version":3,"sources":["../src/hooks/useSafeZoneArea/useSafeZoneArea.tsx"],"sourcesContent":["'use client';\n\nimport { useAnimationFrame, useEventCallback, useMergedRefs, useTimeout } from '@fluentui/react-utilities';\nimport type { JSXElement, RefObjectFunction } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { createSafeZoneAreaStateStore } from './createSafeZoneAreaStateStore';\nimport { type SafeZoneAreaImperativeHandle, SafeZoneArea } from './SafeZoneArea';\n\nexport type UseSafeZoneOptions = {\n  /** Enables debug mode: makes drawn shapes visible. */\n  debug?: boolean;\n\n  /** Disables the safe zone area. */\n  disabled?: boolean;\n\n  /** The time in milliseconds to wait before clearing the safe zone. */\n  timeout?: number;\n\n  /** Called when the mouse enters the safe zone. */\n  onSafeZoneEnter?: (e: React.MouseEvent) => void;\n\n  /** Called when the mouse moves within the safe zone. */\n  onSafeZoneMove?: (e: React.MouseEvent) => void;\n\n  /** Called when the mouse leaves the safe zone. */\n  onSafeZoneLeave?: (e: React.MouseEvent) => void;\n\n  /** Called when the safe zone times out, even if a cursor is still over a safe zone. */\n  onSafeZoneTimeout?: () => void;\n};\n\n/**\n * Time in milliseconds after which the safe zone area will be cleared if no mouse movement is detected.\n *\n * Only affects the target element, not the safe zone area itself.\n */\nconst MOUSE_MOVE_TARGET_POLLING_TIMEOUT = 2000;\n\n// ---\n\nexport function useSafeZoneArea({\n  debug = false,\n  disabled = false,\n\n  onSafeZoneEnter,\n  onSafeZoneMove,\n  onSafeZoneLeave,\n  onSafeZoneTimeout,\n\n  timeout = 1500,\n}: UseSafeZoneOptions = {}): {\n  containerRef: RefObjectFunction<HTMLElement>;\n  targetRef: RefObjectFunction<HTMLElement>;\n  elementToRender: JSXElement | null;\n} {\n  const [stateStore] = React.useState(createSafeZoneAreaStateStore);\n\n  const safeZoneAreaRef = React.useRef<SafeZoneAreaImperativeHandle>(null);\n  const containerRef = React.useRef<HTMLElement>(null);\n  const targetRef = React.useRef<HTMLElement>(null);\n\n  const [setSafeZoneCloseTimeout, clearSafeZoneCloseTimeout] = useTimeout();\n  const [requestUpdateFrame, clearUpdateFrame] = useAnimationFrame();\n\n  const mouseCoordinatesRef = React.useRef<{ x: number; y: number }>({ x: 0, y: 0 });\n\n  // eslint-disable-next-line react-hooks/preserve-manual-memoization\n  const containerListenerRef = React.useMemo(() => {\n    if (disabled) {\n      return () => {\n        // do nothing\n      };\n    }\n\n    let containerEl: HTMLElement | null = null;\n\n    function onContainerMouseEnter() {\n      clearSafeZoneCloseTimeout();\n      stateStore.toggleActive(false);\n    }\n\n    return (el: HTMLElement | null) => {\n      if (el === null) {\n        containerEl?.removeEventListener('mouseenter', onContainerMouseEnter);\n      }\n\n      containerEl = el;\n      el?.addEventListener('mouseenter', onContainerMouseEnter);\n    };\n  }, [clearSafeZoneCloseTimeout, disabled, stateStore]);\n\n  // eslint-disable-next-line react-hooks/preserve-manual-memoization\n  const targetListenerRef = React.useMemo(() => {\n    if (disabled) {\n      return () => {\n        // do nothing\n      };\n    }\n\n    let targetEl: HTMLElement | null = null;\n\n    function onTargetMouseMove(e: MouseEvent) {\n      mouseCoordinatesRef.current = { x: e.clientX, y: e.clientY };\n\n      if (!stateStore.isActive()) {\n        stateStore.toggleActive(true);\n      }\n\n      setSafeZoneCloseTimeout(() => {\n        stateStore.toggleActive(false);\n      }, MOUSE_MOVE_TARGET_POLLING_TIMEOUT);\n    }\n\n    return (el: HTMLElement | null) => {\n      if (el === null) {\n        clearUpdateFrame();\n        clearSafeZoneCloseTimeout();\n\n        targetEl?.removeEventListener('mousemove', onTargetMouseMove);\n      }\n\n      targetEl = el;\n      el?.addEventListener('mousemove', onTargetMouseMove);\n    };\n  }, [clearUpdateFrame, clearSafeZoneCloseTimeout, disabled, stateStore, setSafeZoneCloseTimeout]);\n\n  const onSvgMouseEnter = useEventCallback((e: React.MouseEvent) => {\n    onSafeZoneEnter?.(e);\n\n    setSafeZoneCloseTimeout(() => {\n      stateStore.toggleActive(false);\n      onSafeZoneTimeout?.();\n    }, timeout);\n  });\n\n  const onSvgMouseMove = useEventCallback((e: React.MouseEvent) => {\n    setSafeZoneCloseTimeout(() => {\n      stateStore.toggleActive(false);\n      onSafeZoneTimeout?.();\n    }, timeout);\n    onSafeZoneMove?.(e);\n  });\n\n  const onSvgMouseLeave = useEventCallback((e: React.MouseEvent) => {\n    onSafeZoneLeave?.(e);\n  });\n\n  React.useEffect(() => {\n    return stateStore.subscribe(isActive => {\n      if (isActive) {\n        function updateSVGs() {\n          const containerEl = containerRef.current;\n          const targetEl = targetRef.current;\n\n          if (containerEl && targetEl) {\n            safeZoneAreaRef.current?.updateSVG({\n              containerRect: containerEl.getBoundingClientRect(),\n              mouseCoordinates: [mouseCoordinatesRef.current.x, mouseCoordinatesRef.current.y],\n              targetRect: targetEl.getBoundingClientRect(),\n            });\n          }\n\n          requestUpdateFrame(updateSVGs);\n        }\n\n        updateSVGs();\n        return;\n      }\n\n      clearUpdateFrame();\n    });\n  }, [clearUpdateFrame, requestUpdateFrame, stateStore]);\n\n  return {\n    containerRef: useMergedRefs(containerRef, containerListenerRef),\n    targetRef: useMergedRefs(targetRef, targetListenerRef),\n\n    elementToRender: React.useMemo(\n      () =>\n        disabled ? null : (\n          <SafeZoneArea\n            debug={debug}\n            onMouseEnter={onSvgMouseEnter}\n            onMouseMove={onSvgMouseMove}\n            onMouseLeave={onSvgMouseLeave}\n            imperativeRef={safeZoneAreaRef}\n            stateStore={stateStore}\n          />\n        ),\n      [disabled, debug, onSvgMouseEnter, onSvgMouseMove, onSvgMouseLeave, stateStore],\n    ),\n  };\n}\n"],"names":["useAnimationFrame","useEventCallback","useMergedRefs","useTimeout","React","createSafeZoneAreaStateStore","SafeZoneArea","MOUSE_MOVE_TARGET_POLLING_TIMEOUT","useSafeZoneArea","debug","disabled","onSafeZoneEnter","onSafeZoneMove","onSafeZoneLeave","onSafeZoneTimeout","timeout","stateStore","useState","safeZoneAreaRef","useRef","containerRef","targetRef","setSafeZoneCloseTimeout","clearSafeZoneCloseTimeout","requestUpdateFrame","clearUpdateFrame","mouseCoordinatesRef","x","y","containerListenerRef","useMemo","containerEl","onContainerMouseEnter","toggleActive","el","removeEventListener","addEventListener","targetListenerRef","targetEl","onTargetMouseMove","e","current","clientX","clientY","isActive","onSvgMouseEnter","onSvgMouseMove","onSvgMouseLeave","useEffect","subscribe","updateSVGs","updateSVG","containerRect","getBoundingClientRect","mouseCoordinates","targetRect","elementToRender","onMouseEnter","onMouseMove","onMouseLeave","imperativeRef"],"mappings":"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"}

package/lib/usePositioning.js

@@ -8,7 +8,6 @@ import { useCallbackRef, hasAutofocusFilter } from './utils';
 /**
  * @internal
  */ export function usePositioning(options) {
-    'use no memo';
     const managerRef = React.useRef(null);
     const targetRef = React.useRef(null);
     const overrideTargetRef = React.useRef(null);

package/lib/usePositioning.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/usePositioning.ts"],"sourcesContent":["'use client';\n\nimport { canUseDOM, useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { POSITIONING_END_EVENT } from './constants';\nimport { createPositionManager } from './createPositionManager';\nimport type {\n  OnPositioningEndEvent,\n  PositioningOptions,\n  PositioningProps,\n  PositionManager,\n  TargetElement,\n  UsePositioningReturn,\n} from './types';\nimport { usePositioningOptions } from './usePositioningOptions';\nimport { useCallbackRef, hasAutofocusFilter } from './utils';\n\n/**\n * @internal\n */\nexport function usePositioning(options: PositioningProps & PositioningOptions): UsePositioningReturn {\n  'use no memo';\n\n  const managerRef = React.useRef<PositionManager | null>(null);\n  const targetRef = React.useRef<TargetElement | null>(null);\n  const overrideTargetRef = React.useRef<TargetElement | null>(null);\n  const containerRef = React.useRef<HTMLElement | null>(null);\n  const arrowRef = React.useRef<HTMLElement | null>(null);\n\n  const { enabled = true } = options;\n  const resolvePositioningOptions = usePositioningOptions(options);\n  const updatePositionManager = React.useCallback(() => {\n    if (managerRef.current) {\n      managerRef.current.dispose();\n    }\n    managerRef.current = null;\n\n    const target = overrideTargetRef.current ?? targetRef.current;\n\n    if (enabled && canUseDOM() && target && containerRef.current) {\n      managerRef.current = createPositionManager({\n        container: containerRef.current,\n        target,\n        arrow: arrowRef.current,\n        ...resolvePositioningOptions(containerRef.current, arrowRef.current),\n      });\n    }\n  }, [enabled, resolvePositioningOptions]);\n\n  const setOverrideTarget = useEventCallback((target: TargetElement | null) => {\n    overrideTargetRef.current = target;\n    updatePositionManager();\n  });\n\n  React.useImperativeHandle(\n    options.positioningRef,\n    () => ({\n      updatePosition: () => managerRef.current?.updatePosition(),\n      setTarget: (target: TargetElement | null) => {\n        if (options.target && process.env.NODE_ENV !== 'production') {\n          const err = new Error();\n          // eslint-disable-next-line no-console\n          console.warn('Imperative setTarget should not be used at the same time as target option');\n          // eslint-disable-next-line no-console\n          console.warn(err.stack);\n        }\n\n        setOverrideTarget(target);\n      },\n    }),\n    [options.target, setOverrideTarget],\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    setOverrideTarget(options.target ?? null);\n  }, [options.target, setOverrideTarget]);\n\n  useIsomorphicLayoutEffect(() => {\n    updatePositionManager();\n  }, [updatePositionManager]);\n\n  if (process.env.NODE_ENV !== 'production') {\n    // This checked should run only in development mode\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    React.useEffect(() => {\n      if (containerRef.current) {\n        const contentNode = containerRef.current;\n        const treeWalker = contentNode.ownerDocument?.createTreeWalker(contentNode, NodeFilter.SHOW_ELEMENT, {\n          acceptNode: hasAutofocusFilter,\n        });\n\n        while (treeWalker.nextNode()) {\n          const node = treeWalker.currentNode;\n          // eslint-disable-next-line no-console\n          console.warn('usePositioning():', node);\n          // eslint-disable-next-line no-console\n          console.warn(\n            [\n              'usePositioning(): ^ this node contains \"autoFocus\" prop on a React element. This can break the initial',\n              'positioning of an element and cause a window jump effect. This issue occurs because React polyfills',\n              '\"autoFocus\" behavior to solve inconsistencies between different browsers:',\n              'https://github.com/facebook/react/issues/11851#issuecomment-351787078',\n              '\\n',\n              'However, \".focus()\" in this case occurs before any other React effects will be executed',\n              '(React.useEffect(), componentDidMount(), etc.) and we can not prevent this behavior. If you really',\n              'want to use \"autoFocus\" please add \"position: fixed\" to styles of the element that is wrapped by',\n              '\"Popper\".',\n              `In general, it's not recommended to use \"autoFocus\" as it may break accessibility aspects:`,\n              'https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-autofocus.md',\n              '\\n',\n              'We suggest to use the \"trapFocus\" prop on Fluent components or a catch \"ref\" and then use',\n              '\"ref.current.focus\" in React.useEffect():',\n              'https://reactjs.org/docs/refs-and-the-dom.html#adding-a-ref-to-a-dom-element',\n            ].join(' '),\n          );\n        }\n      }\n      // We run this check once, no need to add deps here\n      // TODO: Should be rework to handle options.enabled and contentRef updates\n    }, []);\n  }\n\n  const setTarget = useCallbackRef<TargetElement>(null, target => {\n    if (targetRef.current !== target) {\n      targetRef.current = target;\n      updatePositionManager();\n    }\n  });\n\n  const onPositioningEnd = useEventCallback((e: OnPositioningEndEvent) => options.onPositioningEnd?.(e));\n  const setContainer = useCallbackRef<HTMLElement | null>(null, container => {\n    if (containerRef.current !== container) {\n      // Cast because CustomEvent<OnPositioningEndEventDetail> is not assignable to EventListener\n      containerRef.current?.removeEventListener(POSITIONING_END_EVENT, onPositioningEnd as EventListener);\n      container?.addEventListener(POSITIONING_END_EVENT, onPositioningEnd as EventListener);\n      containerRef.current = container;\n      updatePositionManager();\n    }\n  });\n\n  const setArrow = useCallbackRef<HTMLElement | null>(null, arrow => {\n    if (arrowRef.current !== arrow) {\n      arrowRef.current = arrow;\n      updatePositionManager();\n    }\n  });\n\n  // Let users use callback refs so they feel like 'normal' DOM refs\n  return { targetRef: setTarget, containerRef: setContainer, arrowRef: setArrow };\n}\n"],"names":["canUseDOM","useEventCallback","useIsomorphicLayoutEffect","React","POSITIONING_END_EVENT","createPositionManager","usePositioningOptions","useCallbackRef","hasAutofocusFilter","usePositioning","options","managerRef","useRef","targetRef","overrideTargetRef","containerRef","arrowRef","enabled","resolvePositioningOptions","updatePositionManager","useCallback","current","dispose","target","container","arrow","setOverrideTarget","useImperativeHandle","positioningRef","updatePosition","setTarget","process","env","NODE_ENV","err","Error","console","warn","stack","useEffect","contentNode","treeWalker","ownerDocument","createTreeWalker","NodeFilter","SHOW_ELEMENT","acceptNode","nextNode","node","currentNode","join","onPositioningEnd","e","setContainer","removeEventListener","addEventListener","setArrow"],"mappings":"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"}
+{"version":3,"sources":["../src/usePositioning.ts"],"sourcesContent":["'use client';\n\nimport { canUseDOM, useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { POSITIONING_END_EVENT } from './constants';\nimport { createPositionManager } from './createPositionManager';\nimport type {\n  OnPositioningEndEvent,\n  PositioningOptions,\n  PositioningProps,\n  PositionManager,\n  TargetElement,\n  UsePositioningReturn,\n} from './types';\nimport { usePositioningOptions } from './usePositioningOptions';\nimport { useCallbackRef, hasAutofocusFilter } from './utils';\n\n/**\n * @internal\n */\nexport function usePositioning(options: PositioningProps & PositioningOptions): UsePositioningReturn {\n  const managerRef = React.useRef<PositionManager | null>(null);\n  const targetRef = React.useRef<TargetElement | null>(null);\n  const overrideTargetRef = React.useRef<TargetElement | null>(null);\n  const containerRef = React.useRef<HTMLElement | null>(null);\n  const arrowRef = React.useRef<HTMLElement | null>(null);\n\n  const { enabled = true } = options;\n  const resolvePositioningOptions = usePositioningOptions(options);\n  const updatePositionManager = React.useCallback(() => {\n    if (managerRef.current) {\n      managerRef.current.dispose();\n    }\n    managerRef.current = null;\n\n    const target = overrideTargetRef.current ?? targetRef.current;\n\n    if (enabled && canUseDOM() && target && containerRef.current) {\n      managerRef.current = createPositionManager({\n        container: containerRef.current,\n        target,\n        arrow: arrowRef.current,\n        ...resolvePositioningOptions(containerRef.current, arrowRef.current),\n      });\n    }\n  }, [enabled, resolvePositioningOptions]);\n\n  const setOverrideTarget = useEventCallback((target: TargetElement | null) => {\n    overrideTargetRef.current = target;\n    updatePositionManager();\n  });\n\n  React.useImperativeHandle(\n    options.positioningRef,\n    () => ({\n      updatePosition: () => managerRef.current?.updatePosition(),\n      setTarget: (target: TargetElement | null) => {\n        if (options.target && process.env.NODE_ENV !== 'production') {\n          const err = new Error();\n          // eslint-disable-next-line no-console\n          console.warn('Imperative setTarget should not be used at the same time as target option');\n          // eslint-disable-next-line no-console\n          console.warn(err.stack);\n        }\n\n        setOverrideTarget(target);\n      },\n    }),\n    [options.target, setOverrideTarget],\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    setOverrideTarget(options.target ?? null);\n  }, [options.target, setOverrideTarget]);\n\n  useIsomorphicLayoutEffect(() => {\n    updatePositionManager();\n  }, [updatePositionManager]);\n\n  if (process.env.NODE_ENV !== 'production') {\n    // This checked should run only in development mode\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    React.useEffect(() => {\n      if (containerRef.current) {\n        const contentNode = containerRef.current;\n        const treeWalker = contentNode.ownerDocument?.createTreeWalker(contentNode, NodeFilter.SHOW_ELEMENT, {\n          acceptNode: hasAutofocusFilter,\n        });\n\n        while (treeWalker.nextNode()) {\n          const node = treeWalker.currentNode;\n          // eslint-disable-next-line no-console\n          console.warn('usePositioning():', node);\n          // eslint-disable-next-line no-console\n          console.warn(\n            [\n              'usePositioning(): ^ this node contains \"autoFocus\" prop on a React element. This can break the initial',\n              'positioning of an element and cause a window jump effect. This issue occurs because React polyfills',\n              '\"autoFocus\" behavior to solve inconsistencies between different browsers:',\n              'https://github.com/facebook/react/issues/11851#issuecomment-351787078',\n              '\\n',\n              'However, \".focus()\" in this case occurs before any other React effects will be executed',\n              '(React.useEffect(), componentDidMount(), etc.) and we can not prevent this behavior. If you really',\n              'want to use \"autoFocus\" please add \"position: fixed\" to styles of the element that is wrapped by',\n              '\"Popper\".',\n              `In general, it's not recommended to use \"autoFocus\" as it may break accessibility aspects:`,\n              'https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-autofocus.md',\n              '\\n',\n              'We suggest to use the \"trapFocus\" prop on Fluent components or a catch \"ref\" and then use',\n              '\"ref.current.focus\" in React.useEffect():',\n              'https://reactjs.org/docs/refs-and-the-dom.html#adding-a-ref-to-a-dom-element',\n            ].join(' '),\n          );\n        }\n      }\n      // We run this check once, no need to add deps here\n      // TODO: Should be rework to handle options.enabled and contentRef updates\n    }, []);\n  }\n\n  const setTarget = useCallbackRef<TargetElement>(null, target => {\n    if (targetRef.current !== target) {\n      targetRef.current = target;\n      updatePositionManager();\n    }\n  });\n\n  const onPositioningEnd = useEventCallback((e: OnPositioningEndEvent) => options.onPositioningEnd?.(e));\n  const setContainer = useCallbackRef<HTMLElement | null>(null, container => {\n    if (containerRef.current !== container) {\n      // Cast because CustomEvent<OnPositioningEndEventDetail> is not assignable to EventListener\n      containerRef.current?.removeEventListener(POSITIONING_END_EVENT, onPositioningEnd as EventListener);\n      container?.addEventListener(POSITIONING_END_EVENT, onPositioningEnd as EventListener);\n      containerRef.current = container;\n      updatePositionManager();\n    }\n  });\n\n  const setArrow = useCallbackRef<HTMLElement | null>(null, arrow => {\n    if (arrowRef.current !== arrow) {\n      arrowRef.current = arrow;\n      updatePositionManager();\n    }\n  });\n\n  // Let users use callback refs so they feel like 'normal' DOM refs\n  return { targetRef: setTarget, containerRef: setContainer, arrowRef: setArrow };\n}\n"],"names":["canUseDOM","useEventCallback","useIsomorphicLayoutEffect","React","POSITIONING_END_EVENT","createPositionManager","usePositioningOptions","useCallbackRef","hasAutofocusFilter","usePositioning","options","managerRef","useRef","targetRef","overrideTargetRef","containerRef","arrowRef","enabled","resolvePositioningOptions","updatePositionManager","useCallback","current","dispose","target","container","arrow","setOverrideTarget","useImperativeHandle","positioningRef","updatePosition","setTarget","process","env","NODE_ENV","err","Error","console","warn","stack","useEffect","contentNode","treeWalker","ownerDocument","createTreeWalker","NodeFilter","SHOW_ELEMENT","acceptNode","nextNode","node","currentNode","join","onPositioningEnd","e","setContainer","removeEventListener","addEventListener","setArrow"],"mappings":"AAAA;AAEA,SAASA,SAAS,EAAEC,gBAAgB,EAAEC,yBAAyB,QAAQ,4BAA4B;AACnG,YAAYC,WAAW,QAAQ;AAE/B,SAASC,qBAAqB,QAAQ,cAAc;AACpD,SAASC,qBAAqB,QAAQ,0BAA0B;AAShE,SAASC,qBAAqB,QAAQ,0BAA0B;AAChE,SAASC,cAAc,EAAEC,kBAAkB,QAAQ,UAAU;AAE7D;;CAEC,GACD,OAAO,SAASC,eAAeC,OAA8C;IAC3E,MAAMC,aAAaR,MAAMS,MAAM,CAAyB;IACxD,MAAMC,YAAYV,MAAMS,MAAM,CAAuB;IACrD,MAAME,oBAAoBX,MAAMS,MAAM,CAAuB;IAC7D,MAAMG,eAAeZ,MAAMS,MAAM,CAAqB;IACtD,MAAMI,WAAWb,MAAMS,MAAM,CAAqB;IAElD,MAAM,EAAEK,UAAU,IAAI,EAAE,GAAGP;IAC3B,MAAMQ,4BAA4BZ,sBAAsBI;IACxD,MAAMS,wBAAwBhB,MAAMiB,WAAW,CAAC;QAC9C,IAAIT,WAAWU,OAAO,EAAE;YACtBV,WAAWU,OAAO,CAACC,OAAO;QAC5B;QACAX,WAAWU,OAAO,GAAG;YAENP;QAAf,MAAMS,SAAST,CAAAA,6BAAAA,kBAAkBO,OAAO,cAAzBP,wCAAAA,6BAA6BD,UAAUQ,OAAO;QAE7D,IAAIJ,WAAWjB,eAAeuB,UAAUR,aAAaM,OAAO,EAAE;YAC5DV,WAAWU,OAAO,GAAGhB,sBAAsB;gBACzCmB,WAAWT,aAAaM,OAAO;gBAC/BE;gBACAE,OAAOT,SAASK,OAAO;gBACvB,GAAGH,0BAA0BH,aAAaM,OAAO,EAAEL,SAASK,OAAO,CAAC;YACtE;QACF;IACF,GAAG;QAACJ;QAASC;KAA0B;IAEvC,MAAMQ,oBAAoBzB,iBAAiB,CAACsB;QAC1CT,kBAAkBO,OAAO,GAAGE;QAC5BJ;IACF;IAEAhB,MAAMwB,mBAAmB,CACvBjB,QAAQkB,cAAc,EACtB,IAAO,CAAA;YACLC,gBAAgB;oBAAMlB;wBAAAA,sBAAAA,WAAWU,OAAO,cAAlBV,0CAAAA,oBAAoBkB,cAAc;;YACxDC,WAAW,CAACP;gBACV,IAAIb,QAAQa,MAAM,IAAIQ,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;oBAC3D,MAAMC,MAAM,IAAIC;oBAChB,sCAAsC;oBACtCC,QAAQC,IAAI,CAAC;oBACb,sCAAsC;oBACtCD,QAAQC,IAAI,CAACH,IAAII,KAAK;gBACxB;gBAEAZ,kBAAkBH;YACpB;QACF,CAAA,GACA;QAACb,QAAQa,MAAM;QAAEG;KAAkB;IAGrCxB,0BAA0B;YACNQ;QAAlBgB,kBAAkBhB,CAAAA,kBAAAA,QAAQa,MAAM,cAAdb,6BAAAA,kBAAkB;IACtC,GAAG;QAACA,QAAQa,MAAM;QAAEG;KAAkB;IAEtCxB,0BAA0B;QACxBiB;IACF,GAAG;QAACA;KAAsB;IAE1B,IAAIY,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,mDAAmD;QACnD,sDAAsD;QACtD9B,MAAMoC,SAAS,CAAC;YACd,IAAIxB,aAAaM,OAAO,EAAE;oBAELmB;gBADnB,MAAMA,cAAczB,aAAaM,OAAO;gBACxC,MAAMoB,cAAaD,6BAAAA,YAAYE,aAAa,cAAzBF,iDAAAA,2BAA2BG,gBAAgB,CAACH,aAAaI,WAAWC,YAAY,EAAE;oBACnGC,YAAYtC;gBACd;gBAEA,MAAOiC,WAAWM,QAAQ,GAAI;oBAC5B,MAAMC,OAAOP,WAAWQ,WAAW;oBACnC,sCAAsC;oBACtCb,QAAQC,IAAI,CAAC,qBAAqBW;oBAClC,sCAAsC;oBACtCZ,QAAQC,IAAI,CACV;wBACE;wBACA;wBACA;wBACA;wBACA;wBACA;wBACA;wBACA;wBACA;wBACA,CAAC,0FAA0F,CAAC;wBAC5F;wBACA;wBACA;wBACA;wBACA;qBACD,CAACa,IAAI,CAAC;gBAEX;YACF;QACA,mDAAmD;QACnD,0EAA0E;QAC5E,GAAG,EAAE;IACP;IAEA,MAAMpB,YAAYvB,eAA8B,MAAMgB,CAAAA;QACpD,IAAIV,UAAUQ,OAAO,KAAKE,QAAQ;YAChCV,UAAUQ,OAAO,GAAGE;YACpBJ;QACF;IACF;IAEA,MAAMgC,mBAAmBlD,iBAAiB,CAACmD;YAA6B1C;gBAAAA,4BAAAA,QAAQyC,gBAAgB,cAAxBzC,gDAAAA,+BAAAA,SAA2B0C;;IACnG,MAAMC,eAAe9C,eAAmC,MAAMiB,CAAAA;QAC5D,IAAIT,aAAaM,OAAO,KAAKG,WAAW;gBACtC,2FAA2F;YAC3FT;aAAAA,wBAAAA,aAAaM,OAAO,cAApBN,4CAAAA,sBAAsBuC,mBAAmB,CAAClD,uBAAuB+C;YACjE3B,sBAAAA,gCAAAA,UAAW+B,gBAAgB,CAACnD,uBAAuB+C;YACnDpC,aAAaM,OAAO,GAAGG;YACvBL;QACF;IACF;IAEA,MAAMqC,WAAWjD,eAAmC,MAAMkB,CAAAA;QACxD,IAAIT,SAASK,OAAO,KAAKI,OAAO;YAC9BT,SAASK,OAAO,GAAGI;YACnBN;QACF;IACF;IAEA,kEAAkE;IAClE,OAAO;QAAEN,WAAWiB;QAAWf,cAAcsC;QAAcrC,UAAUwC;IAAS;AAChF"}

package/lib-commonjs/hooks/useSafeZoneArea/useSafeZoneArea.js

@@ -30,6 +30,7 @@ function useSafeZoneArea({ debug = false, disabled = false, onSafeZoneEnter, onS
         x: 0,
         y: 0
     });
+    // eslint-disable-next-line react-hooks/preserve-manual-memoization
     const containerListenerRef = _react.useMemo(()=>{
         if (disabled) {
             return ()=>{
@@ -53,6 +54,7 @@ function useSafeZoneArea({ debug = false, disabled = false, onSafeZoneEnter, onS
         disabled,
         stateStore
     ]);
+    // eslint-disable-next-line react-hooks/preserve-manual-memoization
     const targetListenerRef = _react.useMemo(()=>{
         if (disabled) {
             return ()=>{

package/lib-commonjs/hooks/useSafeZoneArea/useSafeZoneArea.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/hooks/useSafeZoneArea/useSafeZoneArea.tsx"],"sourcesContent":["'use client';\n\nimport { useAnimationFrame, useEventCallback, useMergedRefs, useTimeout } from '@fluentui/react-utilities';\nimport type { JSXElement, RefObjectFunction } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { createSafeZoneAreaStateStore } from './createSafeZoneAreaStateStore';\nimport { type SafeZoneAreaImperativeHandle, SafeZoneArea } from './SafeZoneArea';\n\nexport type UseSafeZoneOptions = {\n  /** Enables debug mode: makes drawn shapes visible. */\n  debug?: boolean;\n\n  /** Disables the safe zone area. */\n  disabled?: boolean;\n\n  /** The time in milliseconds to wait before clearing the safe zone. */\n  timeout?: number;\n\n  /** Called when the mouse enters the safe zone. */\n  onSafeZoneEnter?: (e: React.MouseEvent) => void;\n\n  /** Called when the mouse moves within the safe zone. */\n  onSafeZoneMove?: (e: React.MouseEvent) => void;\n\n  /** Called when the mouse leaves the safe zone. */\n  onSafeZoneLeave?: (e: React.MouseEvent) => void;\n\n  /** Called when the safe zone times out, even if a cursor is still over a safe zone. */\n  onSafeZoneTimeout?: () => void;\n};\n\n/**\n * Time in milliseconds after which the safe zone area will be cleared if no mouse movement is detected.\n *\n * Only affects the target element, not the safe zone area itself.\n */\nconst MOUSE_MOVE_TARGET_POLLING_TIMEOUT = 2000;\n\n// ---\n\nexport function useSafeZoneArea({\n  debug = false,\n  disabled = false,\n\n  onSafeZoneEnter,\n  onSafeZoneMove,\n  onSafeZoneLeave,\n  onSafeZoneTimeout,\n\n  timeout = 1500,\n}: UseSafeZoneOptions = {}): {\n  containerRef: RefObjectFunction<HTMLElement>;\n  targetRef: RefObjectFunction<HTMLElement>;\n  elementToRender: JSXElement | null;\n} {\n  const [stateStore] = React.useState(createSafeZoneAreaStateStore);\n\n  const safeZoneAreaRef = React.useRef<SafeZoneAreaImperativeHandle>(null);\n  const containerRef = React.useRef<HTMLElement>(null);\n  const targetRef = React.useRef<HTMLElement>(null);\n\n  const [setSafeZoneCloseTimeout, clearSafeZoneCloseTimeout] = useTimeout();\n  const [requestUpdateFrame, clearUpdateFrame] = useAnimationFrame();\n\n  const mouseCoordinatesRef = React.useRef<{ x: number; y: number }>({ x: 0, y: 0 });\n\n  const containerListenerRef = React.useMemo(() => {\n    if (disabled) {\n      return () => {\n        // do nothing\n      };\n    }\n\n    let containerEl: HTMLElement | null = null;\n\n    function onContainerMouseEnter() {\n      clearSafeZoneCloseTimeout();\n      stateStore.toggleActive(false);\n    }\n\n    return (el: HTMLElement | null) => {\n      if (el === null) {\n        containerEl?.removeEventListener('mouseenter', onContainerMouseEnter);\n      }\n\n      containerEl = el;\n      el?.addEventListener('mouseenter', onContainerMouseEnter);\n    };\n  }, [clearSafeZoneCloseTimeout, disabled, stateStore]);\n\n  const targetListenerRef = React.useMemo(() => {\n    if (disabled) {\n      return () => {\n        // do nothing\n      };\n    }\n\n    let targetEl: HTMLElement | null = null;\n\n    function onTargetMouseMove(e: MouseEvent) {\n      mouseCoordinatesRef.current = { x: e.clientX, y: e.clientY };\n\n      if (!stateStore.isActive()) {\n        stateStore.toggleActive(true);\n      }\n\n      setSafeZoneCloseTimeout(() => {\n        stateStore.toggleActive(false);\n      }, MOUSE_MOVE_TARGET_POLLING_TIMEOUT);\n    }\n\n    return (el: HTMLElement | null) => {\n      if (el === null) {\n        clearUpdateFrame();\n        clearSafeZoneCloseTimeout();\n\n        targetEl?.removeEventListener('mousemove', onTargetMouseMove);\n      }\n\n      targetEl = el;\n      el?.addEventListener('mousemove', onTargetMouseMove);\n    };\n  }, [clearUpdateFrame, clearSafeZoneCloseTimeout, disabled, stateStore, setSafeZoneCloseTimeout]);\n\n  const onSvgMouseEnter = useEventCallback((e: React.MouseEvent) => {\n    onSafeZoneEnter?.(e);\n\n    setSafeZoneCloseTimeout(() => {\n      stateStore.toggleActive(false);\n      onSafeZoneTimeout?.();\n    }, timeout);\n  });\n\n  const onSvgMouseMove = useEventCallback((e: React.MouseEvent) => {\n    setSafeZoneCloseTimeout(() => {\n      stateStore.toggleActive(false);\n      onSafeZoneTimeout?.();\n    }, timeout);\n    onSafeZoneMove?.(e);\n  });\n\n  const onSvgMouseLeave = useEventCallback((e: React.MouseEvent) => {\n    onSafeZoneLeave?.(e);\n  });\n\n  React.useEffect(() => {\n    return stateStore.subscribe(isActive => {\n      if (isActive) {\n        function updateSVGs() {\n          const containerEl = containerRef.current;\n          const targetEl = targetRef.current;\n\n          if (containerEl && targetEl) {\n            safeZoneAreaRef.current?.updateSVG({\n              containerRect: containerEl.getBoundingClientRect(),\n              mouseCoordinates: [mouseCoordinatesRef.current.x, mouseCoordinatesRef.current.y],\n              targetRect: targetEl.getBoundingClientRect(),\n            });\n          }\n\n          requestUpdateFrame(updateSVGs);\n        }\n\n        updateSVGs();\n        return;\n      }\n\n      clearUpdateFrame();\n    });\n  }, [clearUpdateFrame, requestUpdateFrame, stateStore]);\n\n  return {\n    containerRef: useMergedRefs(containerRef, containerListenerRef),\n    targetRef: useMergedRefs(targetRef, targetListenerRef),\n\n    elementToRender: React.useMemo(\n      () =>\n        disabled ? null : (\n          <SafeZoneArea\n            debug={debug}\n            onMouseEnter={onSvgMouseEnter}\n            onMouseMove={onSvgMouseMove}\n            onMouseLeave={onSvgMouseLeave}\n            imperativeRef={safeZoneAreaRef}\n            stateStore={stateStore}\n          />\n        ),\n      [disabled, debug, onSvgMouseEnter, onSvgMouseMove, onSvgMouseLeave, stateStore],\n    ),\n  };\n}\n"],"names":["useAnimationFrame","useEventCallback","useMergedRefs","useTimeout","React","createSafeZoneAreaStateStore","SafeZoneArea","MOUSE_MOVE_TARGET_POLLING_TIMEOUT","useSafeZoneArea","debug","disabled","onSafeZoneEnter","onSafeZoneMove","onSafeZoneLeave","onSafeZoneTimeout","timeout","stateStore","useState","safeZoneAreaRef","useRef","containerRef","targetRef","setSafeZoneCloseTimeout","clearSafeZoneCloseTimeout","requestUpdateFrame","clearUpdateFrame","mouseCoordinatesRef","x","y","containerListenerRef","useMemo","containerEl","onContainerMouseEnter","toggleActive","el","removeEventListener","addEventListener","targetListenerRef","targetEl","onTargetMouseMove","e","current","clientX","clientY","isActive","onSvgMouseEnter","onSvgMouseMove","onSvgMouseLeave","useEffect","subscribe","updateSVGs","updateSVG","containerRect","getBoundingClientRect","mouseCoordinates","targetRect","elementToRender","onMouseEnter","onMouseMove","onMouseLeave","imperativeRef"],"mappings":"AAAA;;;;;+BAyCgBQ;;;;;;;gCAvC+D,4BAA4B;iEAEpF,QAAQ;8CAEc,iCAAiC;8BACd,iBAAiB;AAyBjF;;;;CAIC,GACD,MAAMD,oCAAoC;AAInC,yBAAyB,EAC9BE,QAAQ,KAAK,EACbC,WAAW,KAAK,EAEhBC,eAAe,EACfC,cAAc,EACdC,eAAe,EACfC,iBAAiB,EAEjBC,UAAU,IAAI,EACK,GAAG,CAAC,CAAC;IAKxB,MAAM,CAACC,WAAW,GAAGZ,OAAMa,QAAQ,CAACZ,0DAAAA;IAEpC,MAAMa,kBAAkBd,OAAMe,MAAM,CAA+B;IACnE,MAAMC,eAAehB,OAAMe,MAAM,CAAc;IAC/C,MAAME,YAAYjB,OAAMe,MAAM,CAAc;IAE5C,MAAM,CAACG,yBAAyBC,0BAA0B,OAAGpB,0BAAAA;IAC7D,MAAM,CAACqB,oBAAoBC,iBAAiB,OAAGzB,iCAAAA;IAE/C,MAAM0B,sBAAsBtB,OAAMe,MAAM,CAA2B;QAAEQ,GAAG;QAAGC,GAAG;IAAE;IAEhF,MAAMC,uBAAuBzB,OAAM0B,OAAO,CAAC;QACzC,IAAIpB,UAAU;YACZ,OAAO;YACL,aAAa;YACf;QACF;QAEA,IAAIqB,cAAkC;QAEtC,SAASC;YACPT;YACAP,WAAWiB,YAAY,CAAC;QAC1B;QAEA,OAAO,CAACC;YACN,IAAIA,OAAO,MAAM;gBACfH,gBAAAA,QAAAA,gBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,YAAaI,mBAAmB,CAAC,cAAcH;YACjD;YAEAD,cAAcG;YACdA,OAAAA,QAAAA,OAAAA,KAAAA,IAAAA,KAAAA,IAAAA,GAAIE,gBAAgB,CAAC,cAAcJ;QACrC;IACF,GAAG;QAACT;QAA2Bb;QAAUM;KAAW;IAEpD,MAAMqB,oBAAoBjC,OAAM0B,OAAO,CAAC;QACtC,IAAIpB,UAAU;YACZ,OAAO;YACL,aAAa;YACf;QACF;QAEA,IAAI4B,WAA+B;QAEnC,SAASC,kBAAkBC,CAAa;YACtCd,oBAAoBe,OAAO,GAAG;gBAAEd,GAAGa,EAAEE,OAAO;gBAAEd,GAAGY,EAAEG,OAAO;YAAC;YAE3D,IAAI,CAAC3B,WAAW4B,QAAQ,IAAI;gBAC1B5B,WAAWiB,YAAY,CAAC;YAC1B;YAEAX,wBAAwB;gBACtBN,WAAWiB,YAAY,CAAC;YAC1B,GAAG1B;QACL;QAEA,OAAO,CAAC2B;YACN,IAAIA,OAAO,MAAM;gBACfT;gBACAF;gBAEAe,aAAAA,QAAAA,aAAAA,KAAAA,IAAAA,KAAAA,IAAAA,SAAUH,mBAAmB,CAAC,aAAaI;YAC7C;YAEAD,WAAWJ;YACXA,OAAAA,QAAAA,OAAAA,KAAAA,IAAAA,KAAAA,IAAAA,GAAIE,gBAAgB,CAAC,aAAaG;QACpC;IACF,GAAG;QAACd;QAAkBF;QAA2Bb;QAAUM;QAAYM;KAAwB;IAE/F,MAAMuB,sBAAkB5C,gCAAAA,EAAiB,CAACuC;QACxC7B,oBAAAA,QAAAA,oBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,gBAAkB6B;QAElBlB,wBAAwB;YACtBN,WAAWiB,YAAY,CAAC;YACxBnB,sBAAAA,QAAAA,sBAAAA,KAAAA,IAAAA,KAAAA,IAAAA;QACF,GAAGC;IACL;IAEA,MAAM+B,qBAAiB7C,gCAAAA,EAAiB,CAACuC;QACvClB,wBAAwB;YACtBN,WAAWiB,YAAY,CAAC;YACxBnB,sBAAAA,QAAAA,sBAAAA,KAAAA,IAAAA,KAAAA,IAAAA;QACF,GAAGC;QACHH,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAiB4B;IACnB;IAEA,MAAMO,kBAAkB9C,oCAAAA,EAAiB,CAACuC;QACxC3B,oBAAAA,QAAAA,oBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,gBAAkB2B;IACpB;IAEApC,OAAM4C,SAAS,CAAC;QACd,OAAOhC,WAAWiC,SAAS,CAACL,CAAAA;YAC1B,IAAIA,UAAU;gBACZ,SAASM;oBACP,MAAMnB,cAAcX,aAAaqB,OAAO;oBACxC,MAAMH,WAAWjB,UAAUoB,OAAO;oBAElC,IAAIV,eAAeO,UAAU;4BAC3BpB;yBAAAA,2BAAAA,gBAAgBuB,OAAAA,AAAO,MAAA,QAAvBvB,6BAAAA,KAAAA,IAAAA,KAAAA,IAAAA,yBAAyBiC,SAAS,CAAC;4BACjCC,eAAerB,YAAYsB,qBAAqB;4BAChDC,kBAAkB;gCAAC5B,oBAAoBe,OAAO,CAACd,CAAC;gCAAED,oBAAoBe,OAAO,CAACb,CAAC;6BAAC;4BAChF2B,YAAYjB,SAASe,qBAAqB;wBAC5C;oBACF;oBAEA7B,mBAAmB0B;gBACrB;gBAEAA;gBACA;YACF;YAEAzB;QACF;IACF,GAAG;QAACA;QAAkBD;QAAoBR;KAAW;IAErD,OAAO;QACLI,kBAAclB,6BAAAA,EAAckB,cAAcS;QAC1CR,eAAWnB,6BAAAA,EAAcmB,WAAWgB;QAEpCmB,iBAAiBpD,OAAM0B,OAAO,CAC5B,IACEpB,WAAW,OAAA,WAAA,GACT,OAAA,aAAA,CAACJ,0BAAAA,EAAAA;gBACCG,OAAOA;gBACPgD,cAAcZ;gBACda,aAAaZ;gBACba,cAAcZ;gBACda,eAAe1C;gBACfF,YAAYA;gBAGlB;YAACN;YAAUD;YAAOoC;YAAiBC;YAAgBC;YAAiB/B;SAAW;IAEnF;AACF"}
+{"version":3,"sources":["../src/hooks/useSafeZoneArea/useSafeZoneArea.tsx"],"sourcesContent":["'use client';\n\nimport { useAnimationFrame, useEventCallback, useMergedRefs, useTimeout } from '@fluentui/react-utilities';\nimport type { JSXElement, RefObjectFunction } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { createSafeZoneAreaStateStore } from './createSafeZoneAreaStateStore';\nimport { type SafeZoneAreaImperativeHandle, SafeZoneArea } from './SafeZoneArea';\n\nexport type UseSafeZoneOptions = {\n  /** Enables debug mode: makes drawn shapes visible. */\n  debug?: boolean;\n\n  /** Disables the safe zone area. */\n  disabled?: boolean;\n\n  /** The time in milliseconds to wait before clearing the safe zone. */\n  timeout?: number;\n\n  /** Called when the mouse enters the safe zone. */\n  onSafeZoneEnter?: (e: React.MouseEvent) => void;\n\n  /** Called when the mouse moves within the safe zone. */\n  onSafeZoneMove?: (e: React.MouseEvent) => void;\n\n  /** Called when the mouse leaves the safe zone. */\n  onSafeZoneLeave?: (e: React.MouseEvent) => void;\n\n  /** Called when the safe zone times out, even if a cursor is still over a safe zone. */\n  onSafeZoneTimeout?: () => void;\n};\n\n/**\n * Time in milliseconds after which the safe zone area will be cleared if no mouse movement is detected.\n *\n * Only affects the target element, not the safe zone area itself.\n */\nconst MOUSE_MOVE_TARGET_POLLING_TIMEOUT = 2000;\n\n// ---\n\nexport function useSafeZoneArea({\n  debug = false,\n  disabled = false,\n\n  onSafeZoneEnter,\n  onSafeZoneMove,\n  onSafeZoneLeave,\n  onSafeZoneTimeout,\n\n  timeout = 1500,\n}: UseSafeZoneOptions = {}): {\n  containerRef: RefObjectFunction<HTMLElement>;\n  targetRef: RefObjectFunction<HTMLElement>;\n  elementToRender: JSXElement | null;\n} {\n  const [stateStore] = React.useState(createSafeZoneAreaStateStore);\n\n  const safeZoneAreaRef = React.useRef<SafeZoneAreaImperativeHandle>(null);\n  const containerRef = React.useRef<HTMLElement>(null);\n  const targetRef = React.useRef<HTMLElement>(null);\n\n  const [setSafeZoneCloseTimeout, clearSafeZoneCloseTimeout] = useTimeout();\n  const [requestUpdateFrame, clearUpdateFrame] = useAnimationFrame();\n\n  const mouseCoordinatesRef = React.useRef<{ x: number; y: number }>({ x: 0, y: 0 });\n\n  // eslint-disable-next-line react-hooks/preserve-manual-memoization\n  const containerListenerRef = React.useMemo(() => {\n    if (disabled) {\n      return () => {\n        // do nothing\n      };\n    }\n\n    let containerEl: HTMLElement | null = null;\n\n    function onContainerMouseEnter() {\n      clearSafeZoneCloseTimeout();\n      stateStore.toggleActive(false);\n    }\n\n    return (el: HTMLElement | null) => {\n      if (el === null) {\n        containerEl?.removeEventListener('mouseenter', onContainerMouseEnter);\n      }\n\n      containerEl = el;\n      el?.addEventListener('mouseenter', onContainerMouseEnter);\n    };\n  }, [clearSafeZoneCloseTimeout, disabled, stateStore]);\n\n  // eslint-disable-next-line react-hooks/preserve-manual-memoization\n  const targetListenerRef = React.useMemo(() => {\n    if (disabled) {\n      return () => {\n        // do nothing\n      };\n    }\n\n    let targetEl: HTMLElement | null = null;\n\n    function onTargetMouseMove(e: MouseEvent) {\n      mouseCoordinatesRef.current = { x: e.clientX, y: e.clientY };\n\n      if (!stateStore.isActive()) {\n        stateStore.toggleActive(true);\n      }\n\n      setSafeZoneCloseTimeout(() => {\n        stateStore.toggleActive(false);\n      }, MOUSE_MOVE_TARGET_POLLING_TIMEOUT);\n    }\n\n    return (el: HTMLElement | null) => {\n      if (el === null) {\n        clearUpdateFrame();\n        clearSafeZoneCloseTimeout();\n\n        targetEl?.removeEventListener('mousemove', onTargetMouseMove);\n      }\n\n      targetEl = el;\n      el?.addEventListener('mousemove', onTargetMouseMove);\n    };\n  }, [clearUpdateFrame, clearSafeZoneCloseTimeout, disabled, stateStore, setSafeZoneCloseTimeout]);\n\n  const onSvgMouseEnter = useEventCallback((e: React.MouseEvent) => {\n    onSafeZoneEnter?.(e);\n\n    setSafeZoneCloseTimeout(() => {\n      stateStore.toggleActive(false);\n      onSafeZoneTimeout?.();\n    }, timeout);\n  });\n\n  const onSvgMouseMove = useEventCallback((e: React.MouseEvent) => {\n    setSafeZoneCloseTimeout(() => {\n      stateStore.toggleActive(false);\n      onSafeZoneTimeout?.();\n    }, timeout);\n    onSafeZoneMove?.(e);\n  });\n\n  const onSvgMouseLeave = useEventCallback((e: React.MouseEvent) => {\n    onSafeZoneLeave?.(e);\n  });\n\n  React.useEffect(() => {\n    return stateStore.subscribe(isActive => {\n      if (isActive) {\n        function updateSVGs() {\n          const containerEl = containerRef.current;\n          const targetEl = targetRef.current;\n\n          if (containerEl && targetEl) {\n            safeZoneAreaRef.current?.updateSVG({\n              containerRect: containerEl.getBoundingClientRect(),\n              mouseCoordinates: [mouseCoordinatesRef.current.x, mouseCoordinatesRef.current.y],\n              targetRect: targetEl.getBoundingClientRect(),\n            });\n          }\n\n          requestUpdateFrame(updateSVGs);\n        }\n\n        updateSVGs();\n        return;\n      }\n\n      clearUpdateFrame();\n    });\n  }, [clearUpdateFrame, requestUpdateFrame, stateStore]);\n\n  return {\n    containerRef: useMergedRefs(containerRef, containerListenerRef),\n    targetRef: useMergedRefs(targetRef, targetListenerRef),\n\n    elementToRender: React.useMemo(\n      () =>\n        disabled ? null : (\n          <SafeZoneArea\n            debug={debug}\n            onMouseEnter={onSvgMouseEnter}\n            onMouseMove={onSvgMouseMove}\n            onMouseLeave={onSvgMouseLeave}\n            imperativeRef={safeZoneAreaRef}\n            stateStore={stateStore}\n          />\n        ),\n      [disabled, debug, onSvgMouseEnter, onSvgMouseMove, onSvgMouseLeave, stateStore],\n    ),\n  };\n}\n"],"names":["useAnimationFrame","useEventCallback","useMergedRefs","useTimeout","React","createSafeZoneAreaStateStore","SafeZoneArea","MOUSE_MOVE_TARGET_POLLING_TIMEOUT","useSafeZoneArea","debug","disabled","onSafeZoneEnter","onSafeZoneMove","onSafeZoneLeave","onSafeZoneTimeout","timeout","stateStore","useState","safeZoneAreaRef","useRef","containerRef","targetRef","setSafeZoneCloseTimeout","clearSafeZoneCloseTimeout","requestUpdateFrame","clearUpdateFrame","mouseCoordinatesRef","x","y","containerListenerRef","useMemo","containerEl","onContainerMouseEnter","toggleActive","el","removeEventListener","addEventListener","targetListenerRef","targetEl","onTargetMouseMove","e","current","clientX","clientY","isActive","onSvgMouseEnter","onSvgMouseMove","onSvgMouseLeave","useEffect","subscribe","updateSVGs","updateSVG","containerRect","getBoundingClientRect","mouseCoordinates","targetRect","elementToRender","onMouseEnter","onMouseMove","onMouseLeave","imperativeRef"],"mappings":"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"}

package/lib-commonjs/usePositioning.js

@@ -17,7 +17,6 @@ const _createPositionManager = require("./createPositionManager");
 const _usePositioningOptions = require("./usePositioningOptions");
 const _utils = require("./utils");
 function usePositioning(options) {
-    'use no memo';
     const managerRef = _react.useRef(null);
     const targetRef = _react.useRef(null);
     const overrideTargetRef = _react.useRef(null);

package/lib-commonjs/usePositioning.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/usePositioning.ts"],"sourcesContent":["'use client';\n\nimport { canUseDOM, useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { POSITIONING_END_EVENT } from './constants';\nimport { createPositionManager } from './createPositionManager';\nimport type {\n  OnPositioningEndEvent,\n  PositioningOptions,\n  PositioningProps,\n  PositionManager,\n  TargetElement,\n  UsePositioningReturn,\n} from './types';\nimport { usePositioningOptions } from './usePositioningOptions';\nimport { useCallbackRef, hasAutofocusFilter } from './utils';\n\n/**\n * @internal\n */\nexport function usePositioning(options: PositioningProps & PositioningOptions): UsePositioningReturn {\n  'use no memo';\n\n  const managerRef = React.useRef<PositionManager | null>(null);\n  const targetRef = React.useRef<TargetElement | null>(null);\n  const overrideTargetRef = React.useRef<TargetElement | null>(null);\n  const containerRef = React.useRef<HTMLElement | null>(null);\n  const arrowRef = React.useRef<HTMLElement | null>(null);\n\n  const { enabled = true } = options;\n  const resolvePositioningOptions = usePositioningOptions(options);\n  const updatePositionManager = React.useCallback(() => {\n    if (managerRef.current) {\n      managerRef.current.dispose();\n    }\n    managerRef.current = null;\n\n    const target = overrideTargetRef.current ?? targetRef.current;\n\n    if (enabled && canUseDOM() && target && containerRef.current) {\n      managerRef.current = createPositionManager({\n        container: containerRef.current,\n        target,\n        arrow: arrowRef.current,\n        ...resolvePositioningOptions(containerRef.current, arrowRef.current),\n      });\n    }\n  }, [enabled, resolvePositioningOptions]);\n\n  const setOverrideTarget = useEventCallback((target: TargetElement | null) => {\n    overrideTargetRef.current = target;\n    updatePositionManager();\n  });\n\n  React.useImperativeHandle(\n    options.positioningRef,\n    () => ({\n      updatePosition: () => managerRef.current?.updatePosition(),\n      setTarget: (target: TargetElement | null) => {\n        if (options.target && process.env.NODE_ENV !== 'production') {\n          const err = new Error();\n          // eslint-disable-next-line no-console\n          console.warn('Imperative setTarget should not be used at the same time as target option');\n          // eslint-disable-next-line no-console\n          console.warn(err.stack);\n        }\n\n        setOverrideTarget(target);\n      },\n    }),\n    [options.target, setOverrideTarget],\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    setOverrideTarget(options.target ?? null);\n  }, [options.target, setOverrideTarget]);\n\n  useIsomorphicLayoutEffect(() => {\n    updatePositionManager();\n  }, [updatePositionManager]);\n\n  if (process.env.NODE_ENV !== 'production') {\n    // This checked should run only in development mode\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    React.useEffect(() => {\n      if (containerRef.current) {\n        const contentNode = containerRef.current;\n        const treeWalker = contentNode.ownerDocument?.createTreeWalker(contentNode, NodeFilter.SHOW_ELEMENT, {\n          acceptNode: hasAutofocusFilter,\n        });\n\n        while (treeWalker.nextNode()) {\n          const node = treeWalker.currentNode;\n          // eslint-disable-next-line no-console\n          console.warn('usePositioning():', node);\n          // eslint-disable-next-line no-console\n          console.warn(\n            [\n              'usePositioning(): ^ this node contains \"autoFocus\" prop on a React element. This can break the initial',\n              'positioning of an element and cause a window jump effect. This issue occurs because React polyfills',\n              '\"autoFocus\" behavior to solve inconsistencies between different browsers:',\n              'https://github.com/facebook/react/issues/11851#issuecomment-351787078',\n              '\\n',\n              'However, \".focus()\" in this case occurs before any other React effects will be executed',\n              '(React.useEffect(), componentDidMount(), etc.) and we can not prevent this behavior. If you really',\n              'want to use \"autoFocus\" please add \"position: fixed\" to styles of the element that is wrapped by',\n              '\"Popper\".',\n              `In general, it's not recommended to use \"autoFocus\" as it may break accessibility aspects:`,\n              'https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-autofocus.md',\n              '\\n',\n              'We suggest to use the \"trapFocus\" prop on Fluent components or a catch \"ref\" and then use',\n              '\"ref.current.focus\" in React.useEffect():',\n              'https://reactjs.org/docs/refs-and-the-dom.html#adding-a-ref-to-a-dom-element',\n            ].join(' '),\n          );\n        }\n      }\n      // We run this check once, no need to add deps here\n      // TODO: Should be rework to handle options.enabled and contentRef updates\n    }, []);\n  }\n\n  const setTarget = useCallbackRef<TargetElement>(null, target => {\n    if (targetRef.current !== target) {\n      targetRef.current = target;\n      updatePositionManager();\n    }\n  });\n\n  const onPositioningEnd = useEventCallback((e: OnPositioningEndEvent) => options.onPositioningEnd?.(e));\n  const setContainer = useCallbackRef<HTMLElement | null>(null, container => {\n    if (containerRef.current !== container) {\n      // Cast because CustomEvent<OnPositioningEndEventDetail> is not assignable to EventListener\n      containerRef.current?.removeEventListener(POSITIONING_END_EVENT, onPositioningEnd as EventListener);\n      container?.addEventListener(POSITIONING_END_EVENT, onPositioningEnd as EventListener);\n      containerRef.current = container;\n      updatePositionManager();\n    }\n  });\n\n  const setArrow = useCallbackRef<HTMLElement | null>(null, arrow => {\n    if (arrowRef.current !== arrow) {\n      arrowRef.current = arrow;\n      updatePositionManager();\n    }\n  });\n\n  // Let users use callback refs so they feel like 'normal' DOM refs\n  return { targetRef: setTarget, containerRef: setContainer, arrowRef: setArrow };\n}\n"],"names":["canUseDOM","useEventCallback","useIsomorphicLayoutEffect","React","POSITIONING_END_EVENT","createPositionManager","usePositioningOptions","useCallbackRef","hasAutofocusFilter","usePositioning","options","managerRef","useRef","targetRef","overrideTargetRef","containerRef","arrowRef","enabled","resolvePositioningOptions","updatePositionManager","useCallback","current","dispose","target","container","arrow","setOverrideTarget","useImperativeHandle","positioningRef","updatePosition","setTarget","process","env","NODE_ENV","err","Error","console","warn","stack","useEffect","contentNode","treeWalker","ownerDocument","createTreeWalker","NodeFilter","SHOW_ELEMENT","acceptNode","nextNode","node","currentNode","join","onPositioningEnd","e","setContainer","removeEventListener","addEventListener","setArrow"],"mappings":"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"}
+{"version":3,"sources":["../src/usePositioning.ts"],"sourcesContent":["'use client';\n\nimport { canUseDOM, useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { POSITIONING_END_EVENT } from './constants';\nimport { createPositionManager } from './createPositionManager';\nimport type {\n  OnPositioningEndEvent,\n  PositioningOptions,\n  PositioningProps,\n  PositionManager,\n  TargetElement,\n  UsePositioningReturn,\n} from './types';\nimport { usePositioningOptions } from './usePositioningOptions';\nimport { useCallbackRef, hasAutofocusFilter } from './utils';\n\n/**\n * @internal\n */\nexport function usePositioning(options: PositioningProps & PositioningOptions): UsePositioningReturn {\n  const managerRef = React.useRef<PositionManager | null>(null);\n  const targetRef = React.useRef<TargetElement | null>(null);\n  const overrideTargetRef = React.useRef<TargetElement | null>(null);\n  const containerRef = React.useRef<HTMLElement | null>(null);\n  const arrowRef = React.useRef<HTMLElement | null>(null);\n\n  const { enabled = true } = options;\n  const resolvePositioningOptions = usePositioningOptions(options);\n  const updatePositionManager = React.useCallback(() => {\n    if (managerRef.current) {\n      managerRef.current.dispose();\n    }\n    managerRef.current = null;\n\n    const target = overrideTargetRef.current ?? targetRef.current;\n\n    if (enabled && canUseDOM() && target && containerRef.current) {\n      managerRef.current = createPositionManager({\n        container: containerRef.current,\n        target,\n        arrow: arrowRef.current,\n        ...resolvePositioningOptions(containerRef.current, arrowRef.current),\n      });\n    }\n  }, [enabled, resolvePositioningOptions]);\n\n  const setOverrideTarget = useEventCallback((target: TargetElement | null) => {\n    overrideTargetRef.current = target;\n    updatePositionManager();\n  });\n\n  React.useImperativeHandle(\n    options.positioningRef,\n    () => ({\n      updatePosition: () => managerRef.current?.updatePosition(),\n      setTarget: (target: TargetElement | null) => {\n        if (options.target && process.env.NODE_ENV !== 'production') {\n          const err = new Error();\n          // eslint-disable-next-line no-console\n          console.warn('Imperative setTarget should not be used at the same time as target option');\n          // eslint-disable-next-line no-console\n          console.warn(err.stack);\n        }\n\n        setOverrideTarget(target);\n      },\n    }),\n    [options.target, setOverrideTarget],\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    setOverrideTarget(options.target ?? null);\n  }, [options.target, setOverrideTarget]);\n\n  useIsomorphicLayoutEffect(() => {\n    updatePositionManager();\n  }, [updatePositionManager]);\n\n  if (process.env.NODE_ENV !== 'production') {\n    // This checked should run only in development mode\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    React.useEffect(() => {\n      if (containerRef.current) {\n        const contentNode = containerRef.current;\n        const treeWalker = contentNode.ownerDocument?.createTreeWalker(contentNode, NodeFilter.SHOW_ELEMENT, {\n          acceptNode: hasAutofocusFilter,\n        });\n\n        while (treeWalker.nextNode()) {\n          const node = treeWalker.currentNode;\n          // eslint-disable-next-line no-console\n          console.warn('usePositioning():', node);\n          // eslint-disable-next-line no-console\n          console.warn(\n            [\n              'usePositioning(): ^ this node contains \"autoFocus\" prop on a React element. This can break the initial',\n              'positioning of an element and cause a window jump effect. This issue occurs because React polyfills',\n              '\"autoFocus\" behavior to solve inconsistencies between different browsers:',\n              'https://github.com/facebook/react/issues/11851#issuecomment-351787078',\n              '\\n',\n              'However, \".focus()\" in this case occurs before any other React effects will be executed',\n              '(React.useEffect(), componentDidMount(), etc.) and we can not prevent this behavior. If you really',\n              'want to use \"autoFocus\" please add \"position: fixed\" to styles of the element that is wrapped by',\n              '\"Popper\".',\n              `In general, it's not recommended to use \"autoFocus\" as it may break accessibility aspects:`,\n              'https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-autofocus.md',\n              '\\n',\n              'We suggest to use the \"trapFocus\" prop on Fluent components or a catch \"ref\" and then use',\n              '\"ref.current.focus\" in React.useEffect():',\n              'https://reactjs.org/docs/refs-and-the-dom.html#adding-a-ref-to-a-dom-element',\n            ].join(' '),\n          );\n        }\n      }\n      // We run this check once, no need to add deps here\n      // TODO: Should be rework to handle options.enabled and contentRef updates\n    }, []);\n  }\n\n  const setTarget = useCallbackRef<TargetElement>(null, target => {\n    if (targetRef.current !== target) {\n      targetRef.current = target;\n      updatePositionManager();\n    }\n  });\n\n  const onPositioningEnd = useEventCallback((e: OnPositioningEndEvent) => options.onPositioningEnd?.(e));\n  const setContainer = useCallbackRef<HTMLElement | null>(null, container => {\n    if (containerRef.current !== container) {\n      // Cast because CustomEvent<OnPositioningEndEventDetail> is not assignable to EventListener\n      containerRef.current?.removeEventListener(POSITIONING_END_EVENT, onPositioningEnd as EventListener);\n      container?.addEventListener(POSITIONING_END_EVENT, onPositioningEnd as EventListener);\n      containerRef.current = container;\n      updatePositionManager();\n    }\n  });\n\n  const setArrow = useCallbackRef<HTMLElement | null>(null, arrow => {\n    if (arrowRef.current !== arrow) {\n      arrowRef.current = arrow;\n      updatePositionManager();\n    }\n  });\n\n  // Let users use callback refs so they feel like 'normal' DOM refs\n  return { targetRef: setTarget, containerRef: setContainer, arrowRef: setArrow };\n}\n"],"names":["canUseDOM","useEventCallback","useIsomorphicLayoutEffect","React","POSITIONING_END_EVENT","createPositionManager","usePositioningOptions","useCallbackRef","hasAutofocusFilter","usePositioning","options","managerRef","useRef","targetRef","overrideTargetRef","containerRef","arrowRef","enabled","resolvePositioningOptions","updatePositionManager","useCallback","current","dispose","target","container","arrow","setOverrideTarget","useImperativeHandle","positioningRef","updatePosition","setTarget","process","env","NODE_ENV","err","Error","console","warn","stack","useEffect","contentNode","treeWalker","ownerDocument","createTreeWalker","NodeFilter","SHOW_ELEMENT","acceptNode","nextNode","node","currentNode","join","onPositioningEnd","e","setContainer","removeEventListener","addEventListener","setArrow"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-positioning",
-  "version": "9.22.1",
+  "version": "9.22.3",
   "description": "A react wrapper around Popper.js for Fluent UI",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -16,7 +16,7 @@
     "@floating-ui/devtools": "^0.2.3",
     "@fluentui/react-shared-contexts": "^9.26.2",
     "@fluentui/react-theme": "^9.2.1",
-    "@fluentui/react-utilities": "^9.26.3",
+    "@fluentui/react-utilities": "^9.26.5",
     "@griffel/react": "^1.5.32",
     "@swc/helpers": "^0.5.1",
     "use-sync-external-store": "^1.2.0"