@atlaskit/smart-card 26.1.4 → 26.1.5

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/smart-card
 
+## 26.1.5
+
+### Patch Changes
+
+- [`6fa208a0d81`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6fa208a0d81) - Fixes internal useSmartCardState to internally use useSyncExternalStore to fix bugs relating to syncronous updates to the store in the same phase that the store is subscribed to.
+
 ## 26.1.4
 
 ### Patch Changes

package/dist/cjs/state/store/index.js

@@ -1,33 +1,19 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useSmartCardState = useSmartCardState;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = require("react");
+var _withSelector = require("use-sync-external-store/shim/with-selector");
 var _linkProvider = require("@atlaskit/link-provider");
-var _linkingCommon = require("@atlaskit/linking-common");
+var PENDING_STATE = {
+  status: 'pending'
+};
 function useSmartCardState(url) {
   var _useSmartLinkContext = (0, _linkProvider.useSmartLinkContext)(),
     store = _useSmartLinkContext.store;
-  // Initially, card state should be pending and 'empty'.
-  var newCardState = (0, _linkingCommon.getUrl)(store, url);
-  var _useState = (0, _react.useState)(newCardState),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    setCardState = _useState2[1];
-  // Selector for initial and subsequent states.
-  (0, _react.useEffect)(function () {
-    var unsubscribe = store.subscribe(function () {
-      // forcing re-renders when the store changes
-      setCardState((0, _linkingCommon.getUrl)(store, url));
-    });
-    return function () {
-      return unsubscribe();
-    };
-  }, [url, store]);
-
-  // Returning fresh state for use in view components. Added as a part of the fix in EDM-4422.
-  return newCardState;
+  var cardState = (0, _withSelector.useSyncExternalStoreWithSelector)(store.subscribe, store.getState, store.getState, function (state) {
+    return state[url];
+  });
+  return cardState !== null && cardState !== void 0 ? cardState : PENDING_STATE;
 }

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "26.1.4",
+	"version": "26.1.5",
 	"sideEffects": false
 }

package/dist/es2019/state/store/index.js

@@ -1,22 +1,12 @@
-import { useEffect, useState } from 'react';
+import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector';
 import { useSmartLinkContext } from '@atlaskit/link-provider';
-import { getUrl } from '@atlaskit/linking-common';
+const PENDING_STATE = {
+  status: 'pending'
+};
 export function useSmartCardState(url) {
   const {
     store
   } = useSmartLinkContext();
-  // Initially, card state should be pending and 'empty'.
-  const newCardState = getUrl(store, url);
-  const [, setCardState] = useState(newCardState);
-  // Selector for initial and subsequent states.
-  useEffect(() => {
-    const unsubscribe = store.subscribe(() => {
-      // forcing re-renders when the store changes
-      setCardState(getUrl(store, url));
-    });
-    return () => unsubscribe();
-  }, [url, store]);
-
-  // Returning fresh state for use in view components. Added as a part of the fix in EDM-4422.
-  return newCardState;
+  const cardState = useSyncExternalStoreWithSelector(store.subscribe, store.getState, store.getState, state => state[url]);
+  return cardState !== null && cardState !== void 0 ? cardState : PENDING_STATE;
 }

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "26.1.4",
+	"version": "26.1.5",
 	"sideEffects": false
 }

package/dist/esm/state/store/index.js

@@ -1,26 +1,13 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import { useEffect, useState } from 'react';
+import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector';
 import { useSmartLinkContext } from '@atlaskit/link-provider';
-import { getUrl } from '@atlaskit/linking-common';
+var PENDING_STATE = {
+  status: 'pending'
+};
 export function useSmartCardState(url) {
   var _useSmartLinkContext = useSmartLinkContext(),
     store = _useSmartLinkContext.store;
-  // Initially, card state should be pending and 'empty'.
-  var newCardState = getUrl(store, url);
-  var _useState = useState(newCardState),
-    _useState2 = _slicedToArray(_useState, 2),
-    setCardState = _useState2[1];
-  // Selector for initial and subsequent states.
-  useEffect(function () {
-    var unsubscribe = store.subscribe(function () {
-      // forcing re-renders when the store changes
-      setCardState(getUrl(store, url));
-    });
-    return function () {
-      return unsubscribe();
-    };
-  }, [url, store]);
-
-  // Returning fresh state for use in view components. Added as a part of the fix in EDM-4422.
-  return newCardState;
+  var cardState = useSyncExternalStoreWithSelector(store.subscribe, store.getState, store.getState, function (state) {
+    return state[url];
+  });
+  return cardState !== null && cardState !== void 0 ? cardState : PENDING_STATE;
 }

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "26.1.4",
+	"version": "26.1.5",
 	"sideEffects": false
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "26.1.4",
+  "version": "26.1.5",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -42,7 +42,7 @@
     "@atlaskit/icon-priority": "^6.3.0",
     "@atlaskit/in-product-testing": "^0.2.0",
     "@atlaskit/link-client-extension": "^1.1.0",
-    "@atlaskit/linking-common": "^2.9.0",
+    "@atlaskit/linking-common": "^2.10.0",
     "@atlaskit/linking-types": "^1.5.0",
     "@atlaskit/logo": "^13.14.0",
     "@atlaskit/lozenge": "^11.4.0",
@@ -65,6 +65,7 @@
     "react-lazily-render": "^1.2.0",
     "react-loadable": "^5.1.0",
     "react-render-image": "^1.1.3",
+    "use-sync-external-store": "^1.2.0",
     "uuid": "^3.1.0"
   },
   "peerDependencies": {
@@ -106,6 +107,7 @@
     "@types/lorem-ipsum": "^1.0.2",
     "@types/react": "^16.8.0",
     "@types/react-loadable": "^5.4.1",
+    "@types/use-sync-external-store": "^0.0.3",
     "abortcontroller-polyfill": "^1.1.9",
     "brace": "^0.11.1",
     "fetch-mock": "^8.0.0",