Fix linting errors from eslint-plugin-react-hooks v7 upgrade

[Copilot]

The v7 upgrade introduces stricter rules around ref access, mutations, and component creation during render. All violations have been addressed while preserving existing behavior.

Changes by category

Ref access during render

• useElementVisible, useStickyIntersectionObserver: Accept refs instead of ref.current
• Feel.js (5 instances), FeelEditor.js, TemplatingEditor.js: Wrap ref assignments in useEffect
• Tooltip.js: Move position calculation to state with useEffect
• DropdownButton.js: Pass refs to useGlobalClick, dereference inside effect

Ref naming convention

• Renamed refs accessed in event handlers to end in Ref suffix per v7 hint:
  • timeout → timeoutRef in Tooltip.js
  • isAutoCompletionOpen → isAutoCompletionOpenRef in FeelPopup.js
  • context → contextRef in Popup.js
  • isMounted → isMountedRef in PropertiesPanel.js
  • focus → focusRef in useShowEntryEvent.js
  • didMount → didMountRef in useEvent.js

Hook rewrites

• usePrevious: Use state + ref to avoid returning ref.current during render
• useEvent: Simplify to effect-only subscription (remove immediate subscription pattern)
• useStaticCallback: Move callbackRef.current assignment to useEffect

Component creation

• Header.js: Memoize icon element creation instead of component reference

Example fix pattern

Before (v6):

const visible = useElementVisible(ref.current);

After (v7):

const visible = useElementVisible(ref);

// In useElementVisible hook:
useLayoutEffect(() => {
  const element = ref.current;
  // ... use element
}, [ref]);

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[CLAassistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

[Copilot]

Just as a heads up, I was blocked by some firewall rules while working on your feedback. Expand below for details.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• googlechromelabs.github.io
  • Triggering command: node install.mjs (dns block)
• https://storage.googleapis.com/chrome-for-testing-public/131.0.6778.264/linux64/chrome-linux64.zip
  • Triggering command: node install.mjs (http block)
• www-api.ibm.com
  • Triggering command: node /home/REDACTED/work/properties-panel/properties-panel/node_modules/@ibm/telemetry-js/dist/REDACTED-process.js --log=/tmp/ibmtelemetry-20251118T124406128Z-662902.log --config=telemetry.yml (dns block)
  • Triggering command: node /home/REDACTED/work/properties-panel/properties-panel/node_modules/@ibm/telemetry-js/dist/REDACTED-process.js --log=/tmp/ibmtelemetry-20251118T124458558Z-795702.log --config=telemetry.yml (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)