@atlaskit/top-layer 3.1.0 → 3.2.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/top-layer
 
+## 3.2.0
+
+### Minor Changes
+
+- [`2857e277050c6`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2857e277050c6) -
+  Behind the `platform-dst-top-layer` feature gate, `@atlaskit/popper/unsafe-imperative`'s
+  `createPopper` now renders and positions in the browser top layer via `@atlaskit/top-layer`
+  instead of running the Popper.js engine. Positioning and teardown are applied asynchronously, as
+  Popper.js' own first update is. Flag-off behaviour is unchanged.
+
+  `@atlaskit/top-layer`: the JavaScript positioning fallback no longer clears a consumer's own
+  inline positioning and visibility styles.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 3.1.0
 
 ### Minor Changes

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

@@ -344,6 +344,38 @@ function useAnchorPosition(_ref3) {
         value: 'auto'
       }]
     });
+
+    // The popover can be consumer-owned (`@atlaskit/popper`'s `createPopper`),
+    // so restore prior inline values rather than removing ours.
+    var undoPosition;
+    var undoHide;
+
+    // `opacity: 0` not `visibility: hidden`: Firefox skips visibility-hidden
+    // elements during `<dialog>` initial-focus traversal.
+    function hideUntilPositioned() {
+      // Keep the first snapshot, else we capture our own `opacity: 0`.
+      // (`!popover` is for TS: narrowing does not reach nested functions.)
+      if (!popover || undoHide) {
+        return;
+      }
+      undoHide = (0, _setStyle.setStyle)({
+        element: popover,
+        styles: [{
+          property: 'opacity',
+          value: '0'
+        }]
+      });
+    }
+    function reveal() {
+      var _undoHide;
+      (_undoHide = undoHide) === null || _undoHide === void 0 || _undoHide();
+      undoHide = undefined;
+    }
+    function restorePosition() {
+      var _undoPosition;
+      (_undoPosition = undoPosition) === null || _undoPosition === void 0 || _undoPosition();
+      undoPosition = undefined;
+    }
     function update() {
       if (!trigger || !popover) {
         return;
@@ -382,11 +414,20 @@ function useAnchorPosition(_ref3) {
         }),
         top = _computeFallbackPosit.top,
         left = _computeFallbackPosit.left;
-      popover.style.setProperty('top', "".concat(top, "px"));
-      popover.style.setProperty('left', "".concat(left, "px"));
-      // Reveal the popover only after it has been positioned.
-      // See the toggle listener below for why we hide on open.
-      popover.style.removeProperty('opacity');
+
+      // Restore first so the snapshot stays the consumer's value.
+      restorePosition();
+      undoPosition = (0, _setStyle.setStyle)({
+        element: popover,
+        styles: [{
+          property: 'top',
+          value: "".concat(top, "px")
+        }, {
+          property: 'left',
+          value: "".concat(left, "px")
+        }]
+      });
+      reveal();
     }
 
     // Throttle scroll/resize updates to one per animation frame
@@ -420,22 +461,17 @@ function useAnchorPosition(_ref3) {
     // event has already fired and our listener below would miss it. Start
     // observing immediately so the first measurement still happens.
     if (isPopoverOpen(popover)) {
-      popover.style.setProperty('opacity', '0');
+      hideUntilPositioned();
       resizeObserver.observe(popover);
     }
     var undoPositioning = (0, _combine.combine)(cleanupBaseStyles,
-    // On every open: hide synchronously so the user never sees
-    // the UA-default position, then re-observe for a fresh
-    // measurement. We use `opacity: 0` rather than
-    // `visibility: hidden` because Firefox skips visibility-hidden
-    // elements during `<dialog>` initial-focus traversal. See
-    // `form-in-popup.spec.tsx` on `desktop-firefox`.
+    // Each open needs a fresh measurement, so hide and re-observe.
     (0, _bindEventListener.bind)(popover, {
       type: 'toggle',
       listener: function listener(event) {
         var toggleEvent = event;
         if (toggleEvent.newState === 'open') {
-          popover.style.setProperty('opacity', '0');
+          hideUntilPositioned();
           resizeObserver.observe(popover);
         }
       }
@@ -456,9 +492,8 @@ function useAnchorPosition(_ref3) {
       }
     }), function () {
       scheduledUpdate.cancel();
-      popover.style.removeProperty('top');
-      popover.style.removeProperty('left');
-      popover.style.removeProperty('opacity');
+      restorePosition();
+      reveal();
     });
     return undoPositioning;
   }, [anchorRef, popoverRef, stablePlacement, forceFallbackPositioning, isEnabled, id, isOpen]);

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

@@ -327,6 +327,38 @@ export function useAnchorPosition({
         value: 'auto'
       }]
     });
+
+    // The popover can be consumer-owned (`@atlaskit/popper`'s `createPopper`),
+    // so restore prior inline values rather than removing ours.
+    let undoPosition;
+    let undoHide;
+
+    // `opacity: 0` not `visibility: hidden`: Firefox skips visibility-hidden
+    // elements during `<dialog>` initial-focus traversal.
+    function hideUntilPositioned() {
+      // Keep the first snapshot, else we capture our own `opacity: 0`.
+      // (`!popover` is for TS: narrowing does not reach nested functions.)
+      if (!popover || undoHide) {
+        return;
+      }
+      undoHide = setStyle({
+        element: popover,
+        styles: [{
+          property: 'opacity',
+          value: '0'
+        }]
+      });
+    }
+    function reveal() {
+      var _undoHide;
+      (_undoHide = undoHide) === null || _undoHide === void 0 ? void 0 : _undoHide();
+      undoHide = undefined;
+    }
+    function restorePosition() {
+      var _undoPosition;
+      (_undoPosition = undoPosition) === null || _undoPosition === void 0 ? void 0 : _undoPosition();
+      undoPosition = undefined;
+    }
     function update() {
       if (!trigger || !popover) {
         return;
@@ -366,11 +398,20 @@ export function useAnchorPosition({
           direction: stablePlacement.offset.crossAxisShift.direction
         }
       });
-      popover.style.setProperty('top', `${top}px`);
-      popover.style.setProperty('left', `${left}px`);
-      // Reveal the popover only after it has been positioned.
-      // See the toggle listener below for why we hide on open.
-      popover.style.removeProperty('opacity');
+
+      // Restore first so the snapshot stays the consumer's value.
+      restorePosition();
+      undoPosition = setStyle({
+        element: popover,
+        styles: [{
+          property: 'top',
+          value: `${top}px`
+        }, {
+          property: 'left',
+          value: `${left}px`
+        }]
+      });
+      reveal();
     }
 
     // Throttle scroll/resize updates to one per animation frame
@@ -404,22 +445,17 @@ export function useAnchorPosition({
     // event has already fired and our listener below would miss it. Start
     // observing immediately so the first measurement still happens.
     if (isPopoverOpen(popover)) {
-      popover.style.setProperty('opacity', '0');
+      hideUntilPositioned();
       resizeObserver.observe(popover);
     }
     const undoPositioning = combine(cleanupBaseStyles,
-    // On every open: hide synchronously so the user never sees
-    // the UA-default position, then re-observe for a fresh
-    // measurement. We use `opacity: 0` rather than
-    // `visibility: hidden` because Firefox skips visibility-hidden
-    // elements during `<dialog>` initial-focus traversal. See
-    // `form-in-popup.spec.tsx` on `desktop-firefox`.
+    // Each open needs a fresh measurement, so hide and re-observe.
     bind(popover, {
       type: 'toggle',
       listener: event => {
         const toggleEvent = event;
         if (toggleEvent.newState === 'open') {
-          popover.style.setProperty('opacity', '0');
+          hideUntilPositioned();
           resizeObserver.observe(popover);
         }
       }
@@ -438,9 +474,8 @@ export function useAnchorPosition({
       }
     }), () => {
       scheduledUpdate.cancel();
-      popover.style.removeProperty('top');
-      popover.style.removeProperty('left');
-      popover.style.removeProperty('opacity');
+      restorePosition();
+      reveal();
     });
     return undoPositioning;
   }, [anchorRef, popoverRef, stablePlacement, forceFallbackPositioning, isEnabled, id, isOpen]);

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

@@ -337,6 +337,38 @@ export function useAnchorPosition(_ref3) {
         value: 'auto'
       }]
     });
+
+    // The popover can be consumer-owned (`@atlaskit/popper`'s `createPopper`),
+    // so restore prior inline values rather than removing ours.
+    var undoPosition;
+    var undoHide;
+
+    // `opacity: 0` not `visibility: hidden`: Firefox skips visibility-hidden
+    // elements during `<dialog>` initial-focus traversal.
+    function hideUntilPositioned() {
+      // Keep the first snapshot, else we capture our own `opacity: 0`.
+      // (`!popover` is for TS: narrowing does not reach nested functions.)
+      if (!popover || undoHide) {
+        return;
+      }
+      undoHide = setStyle({
+        element: popover,
+        styles: [{
+          property: 'opacity',
+          value: '0'
+        }]
+      });
+    }
+    function reveal() {
+      var _undoHide;
+      (_undoHide = undoHide) === null || _undoHide === void 0 || _undoHide();
+      undoHide = undefined;
+    }
+    function restorePosition() {
+      var _undoPosition;
+      (_undoPosition = undoPosition) === null || _undoPosition === void 0 || _undoPosition();
+      undoPosition = undefined;
+    }
     function update() {
       if (!trigger || !popover) {
         return;
@@ -375,11 +407,20 @@ export function useAnchorPosition(_ref3) {
         }),
         top = _computeFallbackPosit.top,
         left = _computeFallbackPosit.left;
-      popover.style.setProperty('top', "".concat(top, "px"));
-      popover.style.setProperty('left', "".concat(left, "px"));
-      // Reveal the popover only after it has been positioned.
-      // See the toggle listener below for why we hide on open.
-      popover.style.removeProperty('opacity');
+
+      // Restore first so the snapshot stays the consumer's value.
+      restorePosition();
+      undoPosition = setStyle({
+        element: popover,
+        styles: [{
+          property: 'top',
+          value: "".concat(top, "px")
+        }, {
+          property: 'left',
+          value: "".concat(left, "px")
+        }]
+      });
+      reveal();
     }
 
     // Throttle scroll/resize updates to one per animation frame
@@ -413,22 +454,17 @@ export function useAnchorPosition(_ref3) {
     // event has already fired and our listener below would miss it. Start
     // observing immediately so the first measurement still happens.
     if (isPopoverOpen(popover)) {
-      popover.style.setProperty('opacity', '0');
+      hideUntilPositioned();
       resizeObserver.observe(popover);
     }
     var undoPositioning = combine(cleanupBaseStyles,
-    // On every open: hide synchronously so the user never sees
-    // the UA-default position, then re-observe for a fresh
-    // measurement. We use `opacity: 0` rather than
-    // `visibility: hidden` because Firefox skips visibility-hidden
-    // elements during `<dialog>` initial-focus traversal. See
-    // `form-in-popup.spec.tsx` on `desktop-firefox`.
+    // Each open needs a fresh measurement, so hide and re-observe.
     bind(popover, {
       type: 'toggle',
       listener: function listener(event) {
         var toggleEvent = event;
         if (toggleEvent.newState === 'open') {
-          popover.style.setProperty('opacity', '0');
+          hideUntilPositioned();
           resizeObserver.observe(popover);
         }
       }
@@ -449,9 +485,8 @@ export function useAnchorPosition(_ref3) {
       }
     }), function () {
       scheduledUpdate.cancel();
-      popover.style.removeProperty('top');
-      popover.style.removeProperty('left');
-      popover.style.removeProperty('opacity');
+      restorePosition();
+      reveal();
     });
     return undoPositioning;
   }, [anchorRef, popoverRef, stablePlacement, forceFallbackPositioning, isEnabled, id, isOpen]);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/top-layer",
-	"version": "3.1.0",
+	"version": "3.2.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",
@@ -40,7 +40,7 @@
 		"@atlaskit/ds-lib": "^8.0.0",
 		"@atlaskit/layering": "^5.0.0",
 		"@atlaskit/react-compiler-gating": "^0.2.0",
-		"@atlaskit/tokens": "^16.3.0",
+		"@atlaskit/tokens": "^16.4.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^1.0.0",
 		"bind-event-listener": "^3.0.0",