@atlaskit/motion - npm Package Compare versions

Comparing version 1.7.4 to 1.8.0

CHANGELOG.md

 # @atlaskit/motion
 
+## 1.8.0
+
+### Minor Changes
+
+- [#125755](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/125755)
+  [`861f8cfbff102`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/861f8cfbff102) -
+  Refactor internals to better support React 18 strict mode.
+
 ## 1.7.4
@@ -4,0 +12,0 @@

dist/cjs/entering/exiting-persistence.js

@@ -9,6 +9,5 @@ "use strict";
 exports.wrapChildWithContextProvider = exports.useExitingPersistence = exports.spliceNewElementsIntoPrevious = exports.emptyContext = exports.default = exports.childrenToObj = exports.childrenToArray = exports.ExitingContext = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _exitMotionNew = _interopRequireDefault(require("./exit-motion-new"));
-var _exitMotionOld = _interopRequireDefault(require("./exit-motion-old"));
+var _accessibility = require("../utils/accessibility");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -88,2 +87,16 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 };
+var getMissingKeys = function getMissingKeys(current, previous) {
+  var currentMapKeys = new Set(current.map(function (child) {
+    return child.key;
+  }));
+  var missing = new Set();
+  for (var i = 0; i < previous.length; i++) {
+    var element = previous[i];
+    var _key = element.key;
+    if (!currentMapKeys.has(_key)) {
+      missing.add(_key);
+    }
+  }
+  return missing;
+};
 
@@ -102,11 +115,86 @@ /**
     exitThenEnter = _ref.exitThenEnter;
-  return (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-motion-for-strict-mode_p6qs0') ? /*#__PURE__*/_react.default.createElement(_exitMotionNew.default, {
-    appear: appear,
-    children: children,
-    exitThenEnter: exitThenEnter
-  }) : /*#__PURE__*/_react.default.createElement(_exitMotionOld.default, {
-    appear: appear,
-    children: children,
-    exitThenEnter: exitThenEnter
-  });
+  var _useState = (0, _react.useState)([null, children]),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    stateChildren = _useState2[0],
+    setChildren = _useState2[1];
+  var _useState3 = (0, _react.useState)([]),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    exitingChildren = _useState4[0],
+    setExitingChildren = _useState4[1];
+  var _useState5 = (0, _react.useState)(function () {
+      return {
+        appear: appear,
+        isExiting: false
+      };
+    }),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    defaultContext = _useState6[0],
+    setDefaultContext = _useState6[1];
+  (0, _react.useEffect)(function () {
+    if (!defaultContext.appear) {
+      setDefaultContext({
+        appear: true,
+        isExiting: false
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  if ((0, _accessibility.isReducedMotion)()) {
+    return children;
+  }
+
+  /**
+   * NOTE: This is a workaround for the test case written in Jira where the stateChildren is a boolean value because
+   * useState is mocked to return a boolean value.
+   */
+  if (typeof stateChildren === 'boolean') {
+    return children;
+  }
+  var _stateChildren = (0, _slicedToArray2.default)(stateChildren, 2),
+    previousChildren = _stateChildren[0],
+    currentChildren = _stateChildren[1];
+  var previous = childrenToArray(previousChildren);
+  var current = childrenToArray(currentChildren);
+  if (currentChildren !== children) {
+    setChildren([currentChildren, children]);
+  }
+  var missingKeys = getMissingKeys(current, previous);
+  var isSomeChildRemoved = !!missingKeys.size;
+  var visibleChildren = current;
+  if (isSomeChildRemoved) {
+    visibleChildren = spliceNewElementsIntoPrevious(current, previous);
+  }
+  if (exitThenEnter) {
+    if (exitingChildren.length) {
+      visibleChildren = exitingChildren;
+    } else {
+      var nextExitingChildren = visibleChildren.filter(function (child) {
+        return missingKeys.has(child.key);
+      });
+      if (nextExitingChildren.length) {
+        setExitingChildren(nextExitingChildren);
+      }
+    }
+  }
+  if (missingKeys.size) {
+    visibleChildren = visibleChildren.map(function (child) {
+      var isExiting = missingKeys.has(child.key);
+      return wrapChildWithContextProvider(child, {
+        appear: true,
+        isExiting: isExiting,
+        onFinish: isExiting ? function () {
+          missingKeys.delete(child.key);
+          if (missingKeys.size === 0) {
+            setChildren([null, children]);
+            setExitingChildren([]);
+          }
+        } : undefined
+      });
+    });
+  } else {
+    visibleChildren = visibleChildren.map(function (child) {
+      return wrapChildWithContextProvider(child, defaultContext);
+    });
+  }
+  return visibleChildren;
 });
@@ -113,0 +201,0 @@ var useExitingPersistence = exports.useExitingPersistence = function useExitingPersistence() {

dist/cjs/resizing/height.js

@@ -120,2 +120,3 @@ "use strict";
  */
+// eslint-disable-next-line import/no-anonymous-default-export
 var _default = exports.default = function _default(_opts) {};

dist/es2019/entering/exiting-persistence.js

@@ -1,5 +0,3 @@
-import React, { Children, createContext, memo, useContext } from 'react';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
-import WithStrictModeSupport from './exit-motion-new';
-import WithoutStrictModeSupport from './exit-motion-old';
+import React, { Children, createContext, memo, useContext, useEffect, useState } from 'react';
+import { isReducedMotion } from '../utils/accessibility';
 
@@ -77,2 +75,14 @@ /**
 };
+const getMissingKeys = (current, previous) => {
+  const currentMapKeys = new Set(current.map(child => child.key));
+  const missing = new Set();
+  for (let i = 0; i < previous.length; i++) {
+    const element = previous[i];
+    const key = element.key;
+    if (!currentMapKeys.has(key)) {
+      missing.add(key);
+    }
+  }
+  return missing;
+};
 
@@ -91,11 +101,69 @@ /**
 }) => {
-  return getBooleanFF('platform.design-system-team.update-motion-for-strict-mode_p6qs0') ? /*#__PURE__*/React.createElement(WithStrictModeSupport, {
-    appear: appear,
-    children: children,
-    exitThenEnter: exitThenEnter
-  }) : /*#__PURE__*/React.createElement(WithoutStrictModeSupport, {
-    appear: appear,
-    children: children,
-    exitThenEnter: exitThenEnter
-  });
+  const [stateChildren, setChildren] = useState([null, children]);
+  const [exitingChildren, setExitingChildren] = useState([]);
+  const [defaultContext, setDefaultContext] = useState(() => ({
+    appear,
+    isExiting: false
+  }));
+  useEffect(() => {
+    if (!defaultContext.appear) {
+      setDefaultContext({
+        appear: true,
+        isExiting: false
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  if (isReducedMotion()) {
+    return children;
+  }
+
+  /**
+   * NOTE: This is a workaround for the test case written in Jira where the stateChildren is a boolean value because
+   * useState is mocked to return a boolean value.
+   */
+  if (typeof stateChildren === 'boolean') {
+    return children;
+  }
+  const [previousChildren, currentChildren] = stateChildren;
+  const previous = childrenToArray(previousChildren);
+  const current = childrenToArray(currentChildren);
+  if (currentChildren !== children) {
+    setChildren([currentChildren, children]);
+  }
+  const missingKeys = getMissingKeys(current, previous);
+  const isSomeChildRemoved = !!missingKeys.size;
+  let visibleChildren = current;
+  if (isSomeChildRemoved) {
+    visibleChildren = spliceNewElementsIntoPrevious(current, previous);
+  }
+  if (exitThenEnter) {
+    if (exitingChildren.length) {
+      visibleChildren = exitingChildren;
+    } else {
+      const nextExitingChildren = visibleChildren.filter(child => missingKeys.has(child.key));
+      if (nextExitingChildren.length) {
+        setExitingChildren(nextExitingChildren);
+      }
+    }
+  }
+  if (missingKeys.size) {
+    visibleChildren = visibleChildren.map(child => {
+      const isExiting = missingKeys.has(child.key);
+      return wrapChildWithContextProvider(child, {
+        appear: true,
+        isExiting,
+        onFinish: isExiting ? () => {
+          missingKeys.delete(child.key);
+          if (missingKeys.size === 0) {
+            setChildren([null, children]);
+            setExitingChildren([]);
+          }
+        } : undefined
+      });
+    });
+  } else {
+    visibleChildren = visibleChildren.map(child => wrapChildWithContextProvider(child, defaultContext));
+  }
+  return visibleChildren;
 });
@@ -102,0 +170,0 @@ export const useExitingPersistence = () => {

dist/es2019/resizing/height.js

@@ -99,2 +99,3 @@ import React, { Fragment, useRef } from 'react';
  */
+// eslint-disable-next-line import/no-anonymous-default-export
 export default (_opts => {});

dist/esm/entering/exiting-persistence.js

@@ -1,5 +0,4 @@
-import React, { Children, createContext, memo, useContext } from 'react';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
-import WithStrictModeSupport from './exit-motion-new';
-import WithoutStrictModeSupport from './exit-motion-old';
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { Children, createContext, memo, useContext, useEffect, useState } from 'react';
+import { isReducedMotion } from '../utils/accessibility';
 
@@ -78,2 +77,16 @@ /**
 };
+var getMissingKeys = function getMissingKeys(current, previous) {
+  var currentMapKeys = new Set(current.map(function (child) {
+    return child.key;
+  }));
+  var missing = new Set();
+  for (var i = 0; i < previous.length; i++) {
+    var element = previous[i];
+    var _key = element.key;
+    if (!currentMapKeys.has(_key)) {
+      missing.add(_key);
+    }
+  }
+  return missing;
+};
 
@@ -92,11 +105,86 @@ /**
     exitThenEnter = _ref.exitThenEnter;
-  return getBooleanFF('platform.design-system-team.update-motion-for-strict-mode_p6qs0') ? /*#__PURE__*/React.createElement(WithStrictModeSupport, {
-    appear: appear,
-    children: children,
-    exitThenEnter: exitThenEnter
-  }) : /*#__PURE__*/React.createElement(WithoutStrictModeSupport, {
-    appear: appear,
-    children: children,
-    exitThenEnter: exitThenEnter
-  });
+  var _useState = useState([null, children]),
+    _useState2 = _slicedToArray(_useState, 2),
+    stateChildren = _useState2[0],
+    setChildren = _useState2[1];
+  var _useState3 = useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    exitingChildren = _useState4[0],
+    setExitingChildren = _useState4[1];
+  var _useState5 = useState(function () {
+      return {
+        appear: appear,
+        isExiting: false
+      };
+    }),
+    _useState6 = _slicedToArray(_useState5, 2),
+    defaultContext = _useState6[0],
+    setDefaultContext = _useState6[1];
+  useEffect(function () {
+    if (!defaultContext.appear) {
+      setDefaultContext({
+        appear: true,
+        isExiting: false
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  if (isReducedMotion()) {
+    return children;
+  }
+
+  /**
+   * NOTE: This is a workaround for the test case written in Jira where the stateChildren is a boolean value because
+   * useState is mocked to return a boolean value.
+   */
+  if (typeof stateChildren === 'boolean') {
+    return children;
+  }
+  var _stateChildren = _slicedToArray(stateChildren, 2),
+    previousChildren = _stateChildren[0],
+    currentChildren = _stateChildren[1];
+  var previous = childrenToArray(previousChildren);
+  var current = childrenToArray(currentChildren);
+  if (currentChildren !== children) {
+    setChildren([currentChildren, children]);
+  }
+  var missingKeys = getMissingKeys(current, previous);
+  var isSomeChildRemoved = !!missingKeys.size;
+  var visibleChildren = current;
+  if (isSomeChildRemoved) {
+    visibleChildren = spliceNewElementsIntoPrevious(current, previous);
+  }
+  if (exitThenEnter) {
+    if (exitingChildren.length) {
+      visibleChildren = exitingChildren;
+    } else {
+      var nextExitingChildren = visibleChildren.filter(function (child) {
+        return missingKeys.has(child.key);
+      });
+      if (nextExitingChildren.length) {
+        setExitingChildren(nextExitingChildren);
+      }
+    }
+  }
+  if (missingKeys.size) {
+    visibleChildren = visibleChildren.map(function (child) {
+      var isExiting = missingKeys.has(child.key);
+      return wrapChildWithContextProvider(child, {
+        appear: true,
+        isExiting: isExiting,
+        onFinish: isExiting ? function () {
+          missingKeys.delete(child.key);
+          if (missingKeys.size === 0) {
+            setChildren([null, children]);
+            setExitingChildren([]);
+          }
+        } : undefined
+      });
+    });
+  } else {
+    visibleChildren = visibleChildren.map(function (child) {
+      return wrapChildWithContextProvider(child, defaultContext);
+    });
+  }
+  return visibleChildren;
 });
@@ -103,0 +191,0 @@ export var useExitingPersistence = function useExitingPersistence() {

dist/esm/resizing/height.js

@@ -110,2 +110,3 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
  */
+// eslint-disable-next-line import/no-anonymous-default-export
 export default (function (_opts) {});

package.json

 {
 	"name": "@atlaskit/motion",
-	"version": "1.7.4",
+	"version": "1.8.0",
 	"description": "A set of utilities to apply motion in your application.",
@@ -52,3 +52,2 @@ "publishConfig": {
 		"@atlaskit/ds-lib": "^2.3.0",
-		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@babel/runtime": "^7.0.0",
@@ -100,7 +99,3 @@ "@emotion/react": "^11.7.1",
 	"homepage": "https://atlassian.design/components/motion/",
-	"platform-feature-flags": {
-		"platform.design-system-team.update-motion-for-strict-mode_p6qs0": {
-			"type": "boolean"
-		}
-	}
+	"platform-feature-flags": {}
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Dependency count

5

decreased by-16.67%

Worsened metrics

Total package byte prevSize

210768

decreased by-9.01%

Number of package files

161

decreased by-5.85%

Lines of code

4196

decreased by-9.86%

Dependency changes

• - Removed@atlaskit/platform-feature-flags@^0.3.0