@atlaskit/top-layer 6.2.3 → 6.2.4

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/top-layer
 
+## 6.2.4
+
+### Patch Changes
+
+- [`4247678302a95`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4247678302a95) -
+  Fixed server-side rendering errors and warnings in the top-layer popover, dialog and popper paths
+  (`platform-dst-top-layer`).
+- Updated dependencies
+
 ## 6.2.3
 
 ### Patch Changes

package/dist/cjs/dialog/dialog-content.js

@@ -14,6 +14,7 @@ var _react2 = require("@compiled/react");
 var _bindEventListener = require("bind-event-listener");
 var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
+var _useLayoutEffect = require("@atlaskit/ds-lib/use-layout-effect");
 var _useNotifyOpenLayerObserver = require("@atlaskit/layering/use-notify-open-layer-observer");
 var _useAnimatedVisibility = require("../internal/use-animated-visibility");
 var _useFocusWrap = require("../internal/use-focus-wrap");
@@ -83,7 +84,7 @@ var Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(function Dialo
   var dismissedByRef = (0, _react.useRef)(dismissedBy);
   var onCloseRef = (0, _react.useRef)(onClose);
   // Keep native event handlers stable while ensuring they read the latest committed props.
-  (0, _react.useLayoutEffect)(function () {
+  (0, _useLayoutEffect.useLayoutEffect)(function () {
     dismissedByRef.current = dismissedBy;
     onCloseRef.current = onClose;
   }, [dismissedBy, onClose]);
@@ -102,7 +103,7 @@ var Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(function Dialo
   // Ordering is important: bind native lifecycle listeners before the later
   // layout effect calls showModal() or close(), because `beforetoggle` fires
   // synchronously during those calls.
-  (0, _react.useLayoutEffect)(function () {
+  (0, _useLayoutEffect.useLayoutEffect)(function () {
     if (!isMounted) {
       return;
     }
@@ -161,7 +162,7 @@ var Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(function Dialo
     // No-op: no current use case for programmatic close via OpenLayerObserver.
     onClose: _noop.default
   });
-  (0, _react.useLayoutEffect)(function () {
+  (0, _useLayoutEffect.useLayoutEffect)(function () {
     var dialog = ownRef.current;
     if (!dialog) {
       return;

package/dist/cjs/dialog-scroll-lock/index.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DialogScrollLock = DialogScrollLock;
-var _react = require("react");
 var _browserApis = require("@atlaskit/browser-apis");
+var _useLayoutEffect = require("@atlaskit/ds-lib/use-layout-effect");
 /**
  * __DialogScrollLock__
  *
@@ -37,7 +37,7 @@ var _browserApis = require("@atlaskit/browser-apis");
  */
 function DialogScrollLock(_ref) {
   var isOpen = _ref.isOpen;
-  (0, _react.useLayoutEffect)(function () {
+  (0, _useLayoutEffect.useLayoutEffect)(function () {
     var _getDocument;
     if (!isOpen) {
       return;

package/dist/cjs/internal/use-anchored-popover-at-point.js

@@ -8,6 +8,7 @@ exports.useAnchoredPopoverAtPoint = useAnchoredPopoverAtPoint;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = require("react");
+var _useLayoutEffect = require("@atlaskit/ds-lib/use-layout-effect");
 var _useAnchoredPopover = require("./use-anchored-popover");
 var _excluded = ["getPoint", "isEnabled"];
 /**
@@ -97,7 +98,7 @@ function useAnchoredPopoverAtPoint(_ref2) {
   // effect must not depend on anything the delegated effect does not: a dependency
   // here alone re-creates the element without that hook writing an `anchor-name`
   // onto it, and positioning silently dies.
-  (0, _react.useLayoutEffect)(function () {
+  (0, _useLayoutEffect.useLayoutEffect)(function () {
     if (!isEnabled) {
       return;
     }

package/dist/cjs/internal/use-anchored-popover.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.useAnchoredPopover = useAnchoredPopover;
 var _react = require("react");
 var _useId = require("@atlaskit/ds-lib/use-id");
+var _useLayoutEffect = require("@atlaskit/ds-lib/use-layout-effect");
 var _applyAnchorPositioning = require("./anchor-positioning/apply-anchor-positioning");
 var _anchoredPopoverSize = require("./anchored-popover-size");
 var _applyJavascriptFallbackPositioning = require("./javascript-fallback/apply-javascript-fallback-positioning");
@@ -214,7 +215,7 @@ function useAnchoredPopover(_ref3) {
   // element (the point hook remounts its `<div>`).
   var fallbackAnchorName = useNewAnchorName();
   var stablePlacement = useStablePlacement(placement);
-  (0, _react.useLayoutEffect)(function () {
+  (0, _useLayoutEffect.useLayoutEffect)(function () {
     if (!isEnabled) {
       return;
     }

package/dist/cjs/internal/use-animated-visibility.js

@@ -8,6 +8,7 @@ exports.useAnimatedVisibility = useAnimatedVisibility;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
+var _useLayoutEffect = require("@atlaskit/ds-lib/use-layout-effect");
 var _isNativeElementOpen = require("./is-native-element-open");
 var _reducedMotion = require("./reduced-motion");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -208,7 +209,7 @@ function useAnimatedVisibility(_ref4) {
   var onEnterFinishRef = (0, _react.useRef)(onEnterFinish);
   var onExitFinishRef = (0, _react.useRef)(onExitFinish);
   var willAnimateRef = (0, _react.useRef)(willAnimate);
-  (0, _react.useLayoutEffect)(function () {
+  (0, _useLayoutEffect.useLayoutEffect)(function () {
     onEnterFinishRef.current = onEnterFinish;
     onExitFinishRef.current = onExitFinish;
     willAnimateRef.current = willAnimate;
@@ -324,7 +325,7 @@ function useAnimatedVisibility(_ref4) {
       onSettled: settleExit
     });
   }, [elementRef, settleExit]);
-  (0, _react.useLayoutEffect)(function () {
+  (0, _useLayoutEffect.useLayoutEffect)(function () {
     return function () {
       // Prevent a pending animation or microtask from notifying after unmount.
       cancelExitSettlementRef.current();

package/dist/cjs/popover/popover.js

@@ -14,6 +14,7 @@ var _react2 = require("@compiled/react");
 var _bindEventListener = require("bind-event-listener");
 var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
 var _once = _interopRequireDefault(require("@atlaskit/ds-lib/once"));
+var _useLayoutEffect = require("@atlaskit/ds-lib/use-layout-effect");
 var _useNotifyOpenLayerObserver = require("@atlaskit/layering/use-notify-open-layer-observer");
 var _isNativeElementOpen = require("../internal/is-native-element-open");
 var _resolvePlacement2 = require("../internal/resolve-placement");
@@ -172,7 +173,7 @@ var Popover = exports.Popover = /*#__PURE__*/(0, _react.forwardRef)(function Pop
   // Keep the semantic callback current without rebinding native lifecycle
   // listeners during the same commit that calls showPopover()/hidePopover().
   var onCloseRef = (0, _react.useRef)(onClose);
-  (0, _react.useLayoutEffect)(function () {
+  (0, _useLayoutEffect.useLayoutEffect)(function () {
     onCloseRef.current = onClose;
   }, [onClose]);
 
@@ -295,7 +296,7 @@ var Popover = exports.Popover = /*#__PURE__*/(0, _react.forwardRef)(function Pop
   // first dispatch, dropping the `focusRestorationTargetRef` snapshot
   // and breaking nested-popover focus restoration on close. React runs
   // layout effects in source order on the same commit.
-  (0, _react.useLayoutEffect)(function () {
+  (0, _useLayoutEffect.useLayoutEffect)(function () {
     var element = ownRef.current;
     if (!element) {
       return;
@@ -344,7 +345,7 @@ var Popover = exports.Popover = /*#__PURE__*/(0, _react.forwardRef)(function Pop
   // Show/hide based on isOpen. `showPopover`/`hidePopover` are no-ops when
   // already in the target state. Try/catch guards `InvalidStateError` on
   // disconnected elements (StrictMode/concurrent/unmount edge cases).
-  (0, _react.useLayoutEffect)(function () {
+  (0, _useLayoutEffect.useLayoutEffect)(function () {
     var element = ownRef.current;
     if (!element) {
       return;

package/dist/es2019/dialog/dialog-content.js

@@ -1,11 +1,12 @@
 /* dialog-content.tsx generated by @compiled/babel-plugin v3.0.2 */
 import "./dialog-content.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
-import React, { forwardRef, useCallback, useId, useLayoutEffect, useRef } from 'react';
+import React, { forwardRef, useCallback, useId, useRef } from 'react';
 import { cx } from '@compiled/react';
 import { bindAll } from 'bind-event-listener';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import noop from '@atlaskit/ds-lib/noop';
+import { useLayoutEffect } from '@atlaskit/ds-lib/use-layout-effect';
 import { useNotifyOpenLayerObserver } from '@atlaskit/layering/use-notify-open-layer-observer';
 import { useAnimatedVisibility } from '../internal/use-animated-visibility';
 import { useFocusWrap } from '../internal/use-focus-wrap';

package/dist/es2019/dialog-scroll-lock/index.js

@@ -1,5 +1,5 @@
-import { useLayoutEffect } from 'react';
 import { getDocument } from '@atlaskit/browser-apis';
+import { useLayoutEffect } from '@atlaskit/ds-lib/use-layout-effect';
 /**
  * __DialogScrollLock__
  *

package/dist/es2019/internal/use-anchored-popover-at-point.js

@@ -7,7 +7,8 @@
  * See `notes/decisions/anchored-popover-at-point.md` for why this is a sibling
  * hook instead of an anchor union inside `useAnchoredPopover`.
  */
-import { useLayoutEffect, useRef } from 'react';
+import { useRef } from 'react';
+import { useLayoutEffect } from '@atlaskit/ds-lib/use-layout-effect';
 import { useAnchoredPopover } from './use-anchored-popover';
 
 /**

package/dist/es2019/internal/use-anchored-popover.js

@@ -10,8 +10,9 @@
  * See `notes/architecture/positioning.md` and
  * `notes/decisions/fit-available-space.md`.
  */
-import { useLayoutEffect, useMemo } from 'react';
+import { useMemo } from 'react';
 import { useId } from '@atlaskit/ds-lib/use-id';
+import { useLayoutEffect } from '@atlaskit/ds-lib/use-layout-effect';
 import { applyAnchorPositioning } from './anchor-positioning/apply-anchor-positioning';
 import { getAnchoredPopoverSizeDeclarations } from './anchored-popover-size';
 import { applyJavaScriptFallbackPositioning } from './javascript-fallback/apply-javascript-fallback-positioning';

package/dist/es2019/internal/use-animated-visibility.js

@@ -1,4 +1,5 @@
-import { useCallback, useEffect, useLayoutEffect, useReducer, useRef } from 'react';
+import { useCallback, useEffect, useReducer, useRef } from 'react';
+import { useLayoutEffect } from '@atlaskit/ds-lib/use-layout-effect';
 import { isNativeElementOpen } from './is-native-element-open';
 import { prefersReducedMotion } from './reduced-motion';
 function runCancellableSettlement({

package/dist/es2019/popover/popover.js

@@ -1,11 +1,12 @@
 /* popover.tsx generated by @compiled/babel-plugin v3.0.2 */
 import "./popover.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
-import React, { forwardRef, useCallback, useId, useLayoutEffect, useMemo, useRef } from 'react';
+import React, { forwardRef, useCallback, useId, useMemo, useRef } from 'react';
 import { cx } from '@compiled/react';
 import { bind } from 'bind-event-listener';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import once from '@atlaskit/ds-lib/once';
+import { useLayoutEffect } from '@atlaskit/ds-lib/use-layout-effect';
 import { useNotifyOpenLayerObserver } from '@atlaskit/layering/use-notify-open-layer-observer';
 import { isNativeElementOpen } from '../internal/is-native-element-open';
 import { resolvePlacement } from '../internal/resolve-placement';

package/dist/esm/dialog/dialog-content.js

@@ -1,11 +1,12 @@
 /* dialog-content.tsx generated by @compiled/babel-plugin v3.0.2 */
 import "./dialog-content.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
-import React, { forwardRef, useCallback, useId, useLayoutEffect, useRef } from 'react';
+import React, { forwardRef, useCallback, useId, useRef } from 'react';
 import { cx } from '@compiled/react';
 import { bindAll } from 'bind-event-listener';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import noop from '@atlaskit/ds-lib/noop';
+import { useLayoutEffect } from '@atlaskit/ds-lib/use-layout-effect';
 import { useNotifyOpenLayerObserver } from '@atlaskit/layering/use-notify-open-layer-observer';
 import { useAnimatedVisibility } from '../internal/use-animated-visibility';
 import { useFocusWrap } from '../internal/use-focus-wrap';

package/dist/esm/dialog-scroll-lock/index.js

@@ -1,5 +1,5 @@
-import { useLayoutEffect } from 'react';
 import { getDocument } from '@atlaskit/browser-apis';
+import { useLayoutEffect } from '@atlaskit/ds-lib/use-layout-effect';
 /**
  * __DialogScrollLock__
  *

package/dist/esm/internal/use-anchored-popover-at-point.js

@@ -12,7 +12,8 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * See `notes/decisions/anchored-popover-at-point.md` for why this is a sibling
  * hook instead of an anchor union inside `useAnchoredPopover`.
  */
-import { useLayoutEffect, useRef } from 'react';
+import { useRef } from 'react';
+import { useLayoutEffect } from '@atlaskit/ds-lib/use-layout-effect';
 import { useAnchoredPopover } from './use-anchored-popover';
 
 /**

package/dist/esm/internal/use-anchored-popover.js

@@ -10,8 +10,9 @@
  * See `notes/architecture/positioning.md` and
  * `notes/decisions/fit-available-space.md`.
  */
-import { useLayoutEffect, useMemo } from 'react';
+import { useMemo } from 'react';
 import { useId } from '@atlaskit/ds-lib/use-id';
+import { useLayoutEffect } from '@atlaskit/ds-lib/use-layout-effect';
 import { applyAnchorPositioning } from './anchor-positioning/apply-anchor-positioning';
 import { getAnchoredPopoverSizeDeclarations } from './anchored-popover-size';
 import { applyJavaScriptFallbackPositioning } from './javascript-fallback/apply-javascript-fallback-positioning';

package/dist/esm/internal/use-animated-visibility.js

@@ -2,7 +2,8 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-import { useCallback, useEffect, useLayoutEffect, useReducer, useRef } from 'react';
+import { useCallback, useEffect, useReducer, useRef } from 'react';
+import { useLayoutEffect } from '@atlaskit/ds-lib/use-layout-effect';
 import { isNativeElementOpen } from './is-native-element-open';
 import { prefersReducedMotion } from './reduced-motion';
 function runCancellableSettlement(_ref) {

package/dist/esm/popover/popover.js

@@ -1,11 +1,12 @@
 /* popover.tsx generated by @compiled/babel-plugin v3.0.2 */
 import "./popover.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
-import React, { forwardRef, useCallback, useId, useLayoutEffect, useMemo, useRef } from 'react';
+import React, { forwardRef, useCallback, useId, useMemo, useRef } from 'react';
 import { cx } from '@compiled/react';
 import { bind } from 'bind-event-listener';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import once from '@atlaskit/ds-lib/once';
+import { useLayoutEffect } from '@atlaskit/ds-lib/use-layout-effect';
 import { useNotifyOpenLayerObserver } from '@atlaskit/layering/use-notify-open-layer-observer';
 import { isNativeElementOpen } from '../internal/is-native-element-open';
 import { resolvePlacement } from '../internal/resolve-placement';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/top-layer",
-	"version": "6.2.3",
+	"version": "6.2.4",
 	"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",