@atlaskit/top-layer 0.4.0 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @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

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]);
 }

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

@@ -230,7 +230,6 @@ export function useAnchorPosition({
   arrow
 }) {
   const id = useId();
-  const anchorName = `--anchor-${id.replace(/:/g, '')}`;
   useLayoutEffect(() => {
     const trigger = anchorRef.current;
     const popover = popoverRef.current;
@@ -244,6 +243,9 @@ export function useAnchorPosition({
     const crossAxisShiftCssValue = resolvedPlacement.offset.crossAxisShift.value;
     const 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.
+      const anchorName = trigger.style.getPropertyValue('anchor-name') || `--anchor-${id.replace(/:/g, '')}`;
       const gap = edgeMargin({
         placement: resolvedPlacement,
         offset: gapCssValue
@@ -341,13 +343,26 @@ export function useAnchorPosition({
         // 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);
       const undoPositioning = combine(setStyle({
-        el: trigger,
-        styles: [{
-          property: 'anchor-name',
-          value: anchorName
-        }]
-      }), setStyle({
         el: popover,
         styles: popoverStyles
       }), arrow ? () => popover.removeAttribute('data-ds-popover-arrow') : () => {});
@@ -476,5 +491,5 @@ export function useAnchorPosition({
       popover.style.removeProperty('opacity');
     });
     return undoPositioning;
-  }, [anchorRef, popoverRef, placement, anchorName, forceFallbackPositioning, arrow]);
+  }, [anchorRef, popoverRef, placement, forceFallbackPositioning, arrow, id]);
 }

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

@@ -220,7 +220,6 @@ export function useAnchorPosition(_ref5) {
     forceFallbackPositioning = _ref5$forceFallbackPo === void 0 ? false : _ref5$forceFallbackPo,
     arrow = _ref5.arrow;
   var id = useId();
-  var anchorName = "--anchor-".concat(id.replace(/:/g, ''));
   useLayoutEffect(function () {
     var trigger = anchorRef.current;
     var popover = popoverRef.current;
@@ -234,6 +233,9 @@ export 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
@@ -331,13 +333,26 @@ export 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 = combine(setStyle({
-        el: trigger,
-        styles: [{
-          property: 'anchor-name',
-          value: anchorName
-        }]
-      }), setStyle({
         el: popover,
         styles: popoverStyles
       }), arrow ? function () {
@@ -469,5 +484,5 @@ export function useAnchorPosition(_ref5) {
       popover.style.removeProperty('opacity');
     });
     return undoPositioning;
-  }, [anchorRef, popoverRef, placement, anchorName, forceFallbackPositioning, arrow]);
+  }, [anchorRef, popoverRef, placement, forceFallbackPositioning, arrow, id]);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/top-layer",
-	"version": "0.4.0",
+	"version": "0.5.0",
 	"description": "Low-level layering primitives based on popover and dialog",
 	"homepage": "https://atlassian.design/components/top-layer",
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",