@atlaskit/top-layer 0.3.0 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,40 @@
 # @atlaskit/top-layer
 
+## 0.5.0
+
+### Minor Changes
+
+- [`6e656fce5ceee`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6e656fce5ceee) -
+  Fix anchor positioning so multiple popovers can share the same trigger element. Previously the
+  second `useAnchorPosition` call on the same trigger would overwrite the first call's `anchor-name`
+  style, leaving the first popover unpositioned.
+
+## 0.4.0
+
+### Minor Changes
+
+- [`58c9d421e96b1`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/58c9d421e96b1) -
+  Improves the jsdom test polyfill (`testing/polyfill`) to better match WHATWG popover spec
+  semantics:
+  - Adds the `el.popover` IDL getter/setter so feature-detection (`supportsPopoverHint()` etc) works
+    in jsdom and `popover="hint"` is exercised in tests rather than silently falling back to
+    `popover="auto"`.
+  - Implements a separate hint stack so opening a `hint` does not close open `auto` popovers;
+    opening an `auto` closes all hints; light-dismiss and Escape walk both stacks per spec.
+  - Implements proper "topmost popover ancestor" lookup that walks both DOM ancestry and the invoker
+    chain (via `popovertarget`), so opening a popover from a button inside another popover does not
+    close the parent.
+  - Light-dismiss now uses pointerdown + pointerup (with `mousedown` + `mouseup` fallback) and a
+    same-target check so drag-out and drag-in gestures do not dismiss popovers.
+  - `togglePopover()` now returns the actual resulting open state.
+  - Per-method patching (`showPopover` / `hidePopover` / `togglePopover`) so partial native support
+    in future jsdom versions still patches the missing methods.
+  - Disconnected popovers are pruned from the open stacks (defends against test-pollution).
+  - Clears any inline `opacity: 0` set by callers (such as `use-anchor-positioning`'s
+    "hide-until-measured" guard) once the open toggle fires, since jsdom does not deliver
+    `ResizeObserver` callbacks.
+  - Treats `popover=""` (empty value) as `auto` per spec.
+
 ## 0.3.0
 
 ### Minor Changes

package/dist/cjs/internal/use-anchor-positioning.js

@@ -234,7 +234,6 @@ function useAnchorPosition(_ref5) {
     forceFallbackPositioning = _ref5$forceFallbackPo === void 0 ? false : _ref5$forceFallbackPo,
     arrow = _ref5.arrow;
   var id = (0, _react.useId)();
-  var anchorName = "--anchor-".concat(id.replace(/:/g, ''));
   (0, _react.useLayoutEffect)(function () {
     var trigger = anchorRef.current;
     var popover = popoverRef.current;
@@ -248,6 +247,9 @@ function useAnchorPosition(_ref5) {
     var crossAxisShiftCssValue = resolvedPlacement.offset.crossAxisShift.value;
     var shouldForceFallback = Boolean(forceFallbackPositioning);
     if (supportsAnchorPositioning() && !shouldForceFallback) {
+      // Reuse an existing `anchor-name` if the element already has one.
+      // Another popover might already be anchored to the old name.
+      var anchorName = trigger.style.getPropertyValue('anchor-name') || "--anchor-".concat(id.replace(/:/g, ''));
       var gap = edgeMargin({
         placement: resolvedPlacement,
         offset: gapCssValue
@@ -345,13 +347,26 @@ function useAnchorPosition(_ref5) {
         // because that's where useAnchorPosition sets the margin gap.
         popover.setAttribute('data-ds-popover-arrow', '');
       }
+
+      /**
+       * **We are never cleaning up anchor names**
+       *
+       * _Rationale_
+       *
+       * - Multiple popovers can share the same anchor element.
+       * - Sometimes the `useAnchorPosition` hook and `Popover`
+       *   are not in the same component.
+       * - There can be times when, even with reference counting, we
+       *   could remove the anchor-name while it's still being used
+       *   by something else - especially with async react updates
+       *   which can cause tearing
+       *
+       * _More_
+       *
+       * See `notes/decisions/anchor-name-lifetime.md`
+       */
+      trigger.style.setProperty('anchor-name', anchorName);
       var _undoPositioning = (0, _combine.combine)((0, _setStyle.setStyle)({
-        el: trigger,
-        styles: [{
-          property: 'anchor-name',
-          value: anchorName
-        }]
-      }), (0, _setStyle.setStyle)({
         el: popover,
         styles: popoverStyles
       }), arrow ? function () {
@@ -483,5 +498,5 @@ function useAnchorPosition(_ref5) {
       popover.style.removeProperty('opacity');
     });
     return undoPositioning;
-  }, [anchorRef, popoverRef, placement, anchorName, forceFallbackPositioning, arrow]);
+  }, [anchorRef, popoverRef, placement, forceFallbackPositioning, arrow, id]);
 }