@atlaskit/smart-card 26.1.3 → 26.1.5

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @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
+
+- [`cee3699d4a8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cee3699d4a8) - [ux] Minor style updates for a Smart Link Error Lozenge
+
 ## 26.1.3
 
 ### 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.3",
+	"version": "26.1.5",
 	"sideEffects": false
 }

package/dist/cjs/view/FlexibleCard/components/common/lozenge-action/lozenge-action-error/styled.js

@@ -13,7 +13,7 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 var dropdownItemGroupStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  button {\n    width: 220px;\n\n    &:hover {\n      background-color: inherit;\n      cursor: default;\n    }\n  }\n"])));
 exports.dropdownItemGroupStyles = dropdownItemGroupStyles;
 var sharedBlockStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  gap: 0.5rem;\n  line-height: 1rem;\n  min-width: 0;\n  overflow: hidden;\n  flex-direction: row;\n  align-items: center;\n"])));
-var contentStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n\n  margin-top: ", ";\n  align-items: flex-start;\n\n  > span,\n  > div {\n    &[data-smart-element-text] {\n      font-size: 0.875rem;\n      color: ", ";\n    }\n  }\n"])), sharedBlockStyles, "var(--ds-space-025, 2px)", "var(--ds-text, ".concat(_colors.N800, ")"));
+var contentStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n\n  margin-top: ", ";\n  align-items: flex-start;\n\n  > span,\n  > div {\n    font-size: 0.875rem;\n    line-height: 1.25rem;\n    color: ", ";\n  }\n"])), sharedBlockStyles, "var(--ds-space-025, 2px)", "var(--ds-text, ".concat(_colors.N800, ")"));
 exports.contentStyles = contentStyles;
 var linkStyles = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n\n  font-size: 0.875rem;\n  margin-top: 10px;\n  margin-left: ", ";\n  margin-bottom: ", ";\n"])), sharedBlockStyles, "var(--ds-space-400, 32px)", "var(--ds-space-025, 2px)");
 exports.linkStyles = linkStyles;

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.3",
+	"version": "26.1.5",
 	"sideEffects": false
 }

package/dist/es2019/view/FlexibleCard/components/common/lozenge-action/lozenge-action-error/styled.js

@@ -28,10 +28,9 @@ export const contentStyles = css`
 
   > span,
   > div {
-    &[data-smart-element-text] {
-      font-size: 0.875rem;
-      color: ${`var(--ds-text, ${N800})`};
-    }
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    color: ${`var(--ds-text, ${N800})`};
   }
 `;
 export const linkStyles = css`

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.3",
+	"version": "26.1.5",
 	"sideEffects": false
 }

package/dist/esm/view/FlexibleCard/components/common/lozenge-action/lozenge-action-error/styled.js

@@ -5,7 +5,7 @@ import { N800 } from '@atlaskit/theme/colors';
 import { getTruncateStyles } from '../../../utils';
 export var dropdownItemGroupStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  button {\n    width: 220px;\n\n    &:hover {\n      background-color: inherit;\n      cursor: default;\n    }\n  }\n"])));
 var sharedBlockStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  gap: 0.5rem;\n  line-height: 1rem;\n  min-width: 0;\n  overflow: hidden;\n  flex-direction: row;\n  align-items: center;\n"])));
-export var contentStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", ";\n\n  margin-top: ", ";\n  align-items: flex-start;\n\n  > span,\n  > div {\n    &[data-smart-element-text] {\n      font-size: 0.875rem;\n      color: ", ";\n    }\n  }\n"])), sharedBlockStyles, "var(--ds-space-025, 2px)", "var(--ds-text, ".concat(N800, ")"));
+export var contentStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", ";\n\n  margin-top: ", ";\n  align-items: flex-start;\n\n  > span,\n  > div {\n    font-size: 0.875rem;\n    line-height: 1.25rem;\n    color: ", ";\n  }\n"])), sharedBlockStyles, "var(--ds-space-025, 2px)", "var(--ds-text, ".concat(N800, ")"));
 export var linkStyles = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", ";\n\n  font-size: 0.875rem;\n  margin-top: 10px;\n  margin-left: ", ";\n  margin-bottom: ", ";\n"])), sharedBlockStyles, "var(--ds-space-400, 32px)", "var(--ds-space-025, 2px)");
 export var textStyles = function textStyles(maxLines) {
   return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  line-height: 1rem;\n  white-space: normal;\n  ", ";\n"])), getTruncateStyles(maxLines));

package/dist/types-ts4.5/__fixtures__/bitbucket-pull-request.d.ts

@@ -0,0 +1,73 @@
+declare const _default: {
+    meta: {
+        visibility: string;
+        access: string;
+        resourceType: string;
+        key: string;
+    };
+    data: {
+        '@id': string;
+        '@context': {
+            '@vocab': string;
+            atlassian: string;
+            schema: string;
+        };
+        '@type': string[];
+        url: string;
+        attributedTo: {
+            '@type': string;
+            name: string;
+            icon: string;
+        };
+        'schema:dateCreated': string;
+        generator: {
+            '@type': string;
+            name: string;
+            icon: {
+                '@type': string;
+                url: string;
+            };
+        };
+        icon: {
+            '@type': string;
+            url: string;
+        };
+        name: string;
+        summary: string;
+        'atlassian:mergeSource': {
+            '@type': string;
+            href: string;
+            name: string;
+        };
+        'atlassian:mergeDestination': {
+            '@type': string;
+            href: string;
+            name: string;
+        };
+        updated: string;
+        'atlassian:internalId': string;
+        'atlassian:isMerged': boolean;
+        'atlassian:state': string;
+        'atlassian:reviewer': {
+            '@type': string;
+            name: string;
+            icon: string;
+        }[];
+        'atlassian:updatedBy': {
+            '@type': string;
+            name: string;
+            icon: string;
+        };
+        audience: {
+            '@type': string;
+            name: string;
+            icon: string;
+        }[];
+        context: {
+            '@type': string;
+            name: string;
+            url: string;
+        };
+    };
+};
+export default _default;

package/dist/types-ts4.5/__fixtures__/confluence-blog.d.ts

@@ -0,0 +1,49 @@
+declare const _default: {
+    meta: {
+        auth: never[];
+        definitionId: string;
+        visibility: string;
+        access: string;
+        resourceType: string;
+        key: string;
+    };
+    data: {
+        '@context': {
+            '@vocab': string;
+            atlassian: string;
+            schema: string;
+        };
+        generator: {
+            '@type': string;
+            '@id': string;
+            name: string;
+        };
+        '@type': string[];
+        url: string;
+        name: string;
+        'atlassian:state': string;
+        summary: string;
+        'schema:commentCount': number;
+        'atlassian:subscriberCount': number;
+        'atlassian:titlePrefix': {
+            text: string;
+            '@type': string;
+        };
+        'atlassian:attributedTo': {
+            '@type': string;
+            name: string;
+            icon: string;
+        };
+        'atlassian:ownedBy': {
+            '@type': string;
+            name: string;
+            icon: string;
+        };
+        preview: {
+            '@type': string;
+            href: string;
+            'atlassian:supportedPlatforms': string[];
+        };
+    };
+};
+export default _default;

package/dist/types-ts4.5/__fixtures__/confluence-page.d.ts

@@ -0,0 +1,49 @@
+declare const _default: {
+    meta: {
+        auth: never[];
+        definitionId: string;
+        visibility: string;
+        access: string;
+        resourceType: string;
+        key: string;
+    };
+    data: {
+        '@context': {
+            '@vocab': string;
+            atlassian: string;
+            schema: string;
+        };
+        generator: {
+            '@type': string;
+            '@id': string;
+            name: string;
+        };
+        '@type': string[];
+        url: string;
+        name: string;
+        'atlassian:state': string;
+        summary: string;
+        'schema:commentCount': number;
+        'atlassian:subscriberCount': number;
+        'atlassian:titlePrefix': {
+            text: string;
+            '@type': string;
+        };
+        'atlassian:attributedTo': {
+            '@type': string;
+            name: string;
+            icon: string;
+        };
+        'atlassian:ownedBy': {
+            '@type': string;
+            name: string;
+            icon: string;
+        };
+        preview: {
+            '@type': string;
+            href: string;
+            'atlassian:supportedPlatforms': string[];
+        };
+    };
+};
+export default _default;

package/dist/types-ts4.5/__fixtures__/confluence-space.d.ts

@@ -0,0 +1,36 @@
+declare const _default: {
+    meta: {
+        auth: never[];
+        definitionId: string;
+        visibility: string;
+        access: string;
+        resourceType: string;
+        key: string;
+    };
+    data: {
+        '@context': {
+            '@vocab': string;
+            atlassian: string;
+            schema: string;
+        };
+        generator: {
+            '@type': string;
+            '@id': string;
+            name: string;
+        };
+        '@type': string[];
+        url: string;
+        icon: {
+            '@type': string;
+            url: string;
+        };
+        name: string;
+        'atlassian:state': string;
+        summary: string;
+        'atlassian:titlePrefix': {
+            text: string;
+            '@type': string;
+        };
+    };
+};
+export default _default;

package/dist/types-ts4.5/__fixtures__/confluence-template.d.ts

@@ -0,0 +1,31 @@
+declare const _default: {
+    data: {
+        '@context': {
+            '@vocab': string;
+            atlassian: string;
+            schema: string;
+        };
+        '@type': string[];
+        generator: {
+            '@id': string;
+            '@type': string;
+            name: string;
+        };
+        icon: undefined;
+        name: string;
+        summary: string;
+        'atlassian:titlePrefix': {
+            '@type': string;
+            text: string;
+        };
+        url: string;
+    };
+    meta: {
+        access: string;
+        auth: never[];
+        definitionId: string;
+        resourceType: string;
+        visibility: string;
+    };
+};
+export default _default;

package/dist/types-ts4.5/__fixtures__/figma.d.ts

@@ -0,0 +1,43 @@
+declare const _default: {
+    meta: {
+        access: string;
+        visibility: string;
+        auth: {
+            key: string;
+            displayName: string;
+            url: string;
+        }[];
+        definitionId: string;
+        key: string;
+        resourceType: string;
+        version: string;
+    };
+    data: {
+        url: string;
+        '@context': {
+            '@vocab': string;
+            atlassian: string;
+            schema: string;
+        };
+        '@type': string;
+        name: string;
+        updated: string;
+        image: {
+            '@type': string;
+            url: string;
+        };
+        generator: {
+            '@type': string;
+            name: string;
+            icon: {
+                '@type': string;
+                url: string;
+            };
+        };
+        preview: {
+            '@type': string;
+            href: string;
+        };
+    };
+};
+export default _default;

package/dist/types-ts4.5/__fixtures__/flexible-ui-data-context.d.ts

@@ -0,0 +1,3 @@
+import { FlexibleUiDataContext } from '../state/flexible-ui-context/types';
+declare const context: FlexibleUiDataContext;
+export default context;

package/dist/types-ts4.5/__fixtures__/jira-roadmap.d.ts

@@ -0,0 +1,35 @@
+declare const _default: {
+    meta: {
+        auth: never[];
+        definitionId: string;
+        visibility: string;
+        access: string;
+        resourceType: string;
+        key: string;
+    };
+    data: {
+        '@context': {
+            '@vocab': string;
+            atlassian: string;
+            schema: string;
+        };
+        generator: {
+            '@type': string;
+            '@id': string;
+            name: string;
+        };
+        '@type': string[];
+        url: string;
+        name: string;
+        summary: string;
+        icon: {
+            '@type': string;
+            url: string;
+        };
+        preview: {
+            href: string;
+            'atlassian:supportedPlatforms': string[];
+        };
+    };
+};
+export default _default;

package/dist/types-ts4.5/__fixtures__/jira-task.d.ts

@@ -0,0 +1,78 @@
+import { SmartLinkActionType } from '@atlaskit/linking-types';
+declare const _default: {
+    meta: {
+        auth: never[];
+        definitionId: string;
+        visibility: string;
+        access: string;
+        resourceType: string;
+        key: string;
+    };
+    data: {
+        '@context': {
+            '@vocab': string;
+            atlassian: string;
+            schema: string;
+        };
+        generator: {
+            '@type': string;
+            '@id': string;
+            name: string;
+        };
+        '@type': string[];
+        name: string;
+        'schema:dateCreated': string;
+        updated: string;
+        'schema:commentCount': number;
+        'atlassian:subscriberCount': number;
+        tag: {
+            '@type': string;
+            name: string;
+            appearance: string;
+        };
+        taskType: {
+            '@type': string[];
+            '@id': string;
+            name: string;
+            icon: {
+                '@type': string;
+                url: string;
+            };
+        };
+        icon: {
+            '@type': string;
+            url: string;
+        };
+        attributedTo: {
+            '@type': string;
+            name: string;
+        };
+        url: string;
+        'atlassian:priority': {
+            '@type': string;
+            name: string;
+            icon: {
+                '@type': string;
+                url: string;
+            };
+        };
+        'atlassian:serverAction': {
+            '@type': string;
+            name: string;
+            dataRetrievalAction: {
+                '@type': string;
+                name: SmartLinkActionType;
+            };
+            dataUpdateAction: {
+                '@type': string;
+                name: SmartLinkActionType;
+            };
+            refField: string;
+            resourceIdentifiers: {
+                issueKey: string;
+                hostname: string;
+            };
+        }[];
+    };
+};
+export default _default;

package/dist/types-ts4.5/__fixtures__/youtube-video.d.ts

@@ -0,0 +1,44 @@
+declare const _default: {
+    meta: {
+        access: string;
+        visibility: string;
+        auth: never[];
+        definitionId: string;
+        key: string;
+        resourceType: string;
+    };
+    data: {
+        '@type': string;
+        '@context': {
+            '@vocab': string;
+            atlassian: string;
+            schema: string;
+        };
+        url: string;
+        name: string;
+        updated: string;
+        summary: string;
+        generator: {
+            '@type': string;
+            name: string;
+            icon: {
+                '@type': string;
+                url: string;
+            };
+        };
+        icon: {
+            '@type': string;
+            url: string;
+        };
+        image: {
+            '@type': string;
+            url: string;
+        };
+        preview: {
+            '@type': string;
+            href: string;
+            'atlassian:aspectRatio': number;
+        };
+    };
+};
+export default _default;

package/dist/types-ts4.5/__tests_external__/index.d.ts

@@ -0,0 +1,6 @@
+export { InlineCardPageObject } from './page-objects/InlineCard';
+export { BlockCardPageObject } from './page-objects/BlockCard';
+export { EmbedCardPageObject } from './page-objects/EmbedCard';
+export { inlineSmartLinkRendersTestCase } from './test-cases/inline';
+export { blockSmartLinkRendersTestCase } from './test-cases/card';
+export { embedSmartLinkRendersTestCase } from './test-cases/embed';

package/dist/types-ts4.5/__tests_external__/page-objects/BaseCard.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="cypress" />
+import { InProductTestPageObject, CypressType } from '@atlaskit/in-product-testing';
+import { CardType, CardAppearance } from '@atlaskit/linking-common';
+export declare class BaseCardPageObject extends InProductTestPageObject {
+    protected cy: CypressType;
+    protected appearance: CardAppearance;
+    protected constructor(cy: CypressType, appearance: CardAppearance);
+    private static CARD_TIMEOUT;
+    private _toSelector;
+    expectCardReady(numOfCards?: number, status?: CardType): Cypress.Chainable<JQuery<HTMLElement>>;
+    expectCardNotExists(status?: CardType): Cypress.Chainable<JQuery<HTMLElement>>;
+    findCardNth(nth?: number, status?: CardType): Cypress.Chainable<JQuery<HTMLElement>>;
+    assertHrefRendered(url: string): Cypress.Chainable<JQuery<HTMLElement>>;
+    assertHrefNotRendered(url: string): Cypress.Chainable<JQuery<HTMLElement>>;
+    click(status?: CardType): Cypress.Chainable<JQuery<HTMLElement>>;
+}

package/dist/types-ts4.5/__tests_external__/page-objects/BlockCard.d.ts

@@ -0,0 +1,6 @@
+import { CypressType } from '@atlaskit/in-product-testing';
+import { BaseCardPageObject } from './BaseCard';
+export declare class BlockCardPageObject extends BaseCardPageObject {
+    protected cy: CypressType;
+    constructor(cy: CypressType);
+}