@atlaskit/smart-card 24.1.3 → 24.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @atlaskit/smart-card
2
2
 
3
+ ## 24.3.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`9f903aa9c4e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9f903aa9c4e) - Fixes rethrow logic in flex ui to not rely on reference to APIError constructor.
8
+
9
+ ## 24.2.0
10
+
11
+ ### Minor Changes
12
+
13
+ - [`ef5f28bfbcb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ef5f28bfbcb) - [ux] Support to hide the full screen view button in hover previews was added. A new prop 'hideHoverCardPreviewButton' was added to FlexibleUiOptions which allows for not showing the button in the hover preview shown on flexui cards. A new prop was also added to standlone hover card called 'hidePreviewButton' which allows for removing the same button when directly consuming hover card.
14
+
3
15
  ## 24.1.3
4
16
 
5
17
  ### Patch Changes
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/smart-card",
3
- "version": "24.1.3",
3
+ "version": "24.3.0",
4
4
  "sideEffects": false
5
5
  }
@@ -18,7 +18,6 @@ var _InlineCard = require("../InlineCard");
18
18
  var _EmbedCard = require("../EmbedCard");
19
19
  var _flexible = require("../../utils/flexible");
20
20
  var _FlexibleCard = _interopRequireDefault(require("../FlexibleCard"));
21
- var _ = require("../..");
22
21
  var _constants = require("../../constants");
23
22
  var _click = require("../../utils/analytics/click");
24
23
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -172,7 +171,7 @@ function CardWithUrlContent(_ref) {
172
171
  if (isFlexibleUi) {
173
172
  var cardState = state;
174
173
  if (error) {
175
- if ((error === null || error === void 0 ? void 0 : error.constructor) === _.APIError) {
174
+ if ((error === null || error === void 0 ? void 0 : error.name) === 'APIError') {
176
175
  cardState = {
177
176
  status: 'errored'
178
177
  };
@@ -147,6 +147,8 @@ var Container = function Container(_ref3) {
147
147
  hideBackground = _ref3$hideBackground === void 0 ? false : _ref3$hideBackground,
148
148
  _ref3$hideElevation = _ref3.hideElevation,
149
149
  hideElevation = _ref3$hideElevation === void 0 ? false : _ref3$hideElevation,
150
+ _ref3$hideHoverCardPr = _ref3.hideHoverCardPreviewButton,
151
+ hideHoverCardPreviewButton = _ref3$hideHoverCardPr === void 0 ? false : _ref3$hideHoverCardPr,
150
152
  _ref3$hidePadding = _ref3.hidePadding,
151
153
  hidePadding = _ref3$hidePadding === void 0 ? false : _ref3$hidePadding,
152
154
  _ref3$showHoverPrevie = _ref3.showHoverPreview,
@@ -178,7 +180,8 @@ var Container = function Container(_ref3) {
178
180
  return (0, _react2.jsx)(_HoverCard.HoverCard, {
179
181
  url: context === null || context === void 0 ? void 0 : context.url,
180
182
  canOpen: hoverCardCanOpen,
181
- closeOnChildClick: true
183
+ closeOnChildClick: true,
184
+ hidePreviewButton: hideHoverCardPreviewButton
182
185
  }, containerContent);
183
186
  }
184
187
  return containerContent;
@@ -29,7 +29,9 @@ var HoverCardComponent = function HoverCardComponent(_ref) {
29
29
  _ref$canOpen = _ref.canOpen,
30
30
  canOpen = _ref$canOpen === void 0 ? true : _ref$canOpen,
31
31
  _ref$closeOnChildClic = _ref.closeOnChildClick,
32
- closeOnChildClick = _ref$closeOnChildClic === void 0 ? false : _ref$closeOnChildClic;
32
+ closeOnChildClick = _ref$closeOnChildClic === void 0 ? false : _ref$closeOnChildClic,
33
+ _ref$hidePreviewButto = _ref.hidePreviewButton,
34
+ hidePreviewButton = _ref$hidePreviewButto === void 0 ? false : _ref$hidePreviewButto;
33
35
  var delay = 300;
34
36
  var _React$useState = _react2.default.useState(false),
35
37
  _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
@@ -108,6 +110,11 @@ var HoverCardComponent = function HoverCardComponent(_ref) {
108
110
  analyticsHandler: analyticsHandler,
109
111
  origin: 'smartLinkPreviewHoverCard'
110
112
  });
113
+ var filteredActions = (0, _react2.useMemo)(function () {
114
+ return hidePreviewButton ? linkActions.filter(function (action) {
115
+ return action.id !== 'preview-content';
116
+ }) : linkActions;
117
+ }, [hidePreviewButton, linkActions]);
111
118
  var onActionClick = (0, _react2.useCallback)(function (actionId) {
112
119
  if (actionId === 'preview-content') {
113
120
  hideCard();
@@ -128,14 +135,14 @@ var HoverCardComponent = function HoverCardComponent(_ref) {
128
135
  onMouseEnter: initShowCard,
129
136
  onMouseLeave: initHideCard,
130
137
  analytics: analytics,
131
- cardActions: linkActions,
138
+ cardActions: filteredActions,
132
139
  cardState: linkState,
133
140
  onActionClick: onActionClick,
134
141
  onResolve: update,
135
142
  renderers: renderers,
136
143
  url: url
137
144
  });
138
- }, [analytics, initHideCard, initShowCard, linkActions, linkState, onActionClick, renderers, url]);
145
+ }, [analytics, initHideCard, initShowCard, filteredActions, linkState, onActionClick, renderers, url]);
139
146
  var trigger = (0, _react2.useCallback)(function (triggerProps) {
140
147
  return (0, _react.jsx)("span", {
141
148
  ref: parentSpan
@@ -16,7 +16,8 @@ var flexibleUiOptions = {
16
16
  size: _constants.SmartLinkSize.Medium,
17
17
  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
18
18
  theme: _constants.SmartLinkTheme.Black,
19
- hidePadding: true
19
+ hidePadding: true,
20
+ hideHoverCardPreviewButton: false
20
21
  };
21
22
  exports.flexibleUiOptions = flexibleUiOptions;
22
23
  var CARD_WIDTH_REM = 24;
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/smart-card",
3
- "version": "24.1.3",
3
+ "version": "24.3.0",
4
4
  "sideEffects": false
5
5
  }
@@ -10,7 +10,6 @@ import { InlineCard } from '../InlineCard';
10
10
  import { EmbedCard } from '../EmbedCard';
11
11
  import { isFlexibleUiCard } from '../../utils/flexible';
12
12
  import FlexibleCard from '../FlexibleCard';
13
- import { APIError } from '../..';
14
13
  import { CardDisplay } from '../../constants';
15
14
  import { fireLinkClickedEvent } from '../../utils/analytics/click';
16
15
  export function CardWithUrlContent({
@@ -159,7 +158,7 @@ export function CardWithUrlContent({
159
158
  if (isFlexibleUi) {
160
159
  let cardState = state;
161
160
  if (error) {
162
- if ((error === null || error === void 0 ? void 0 : error.constructor) === APIError) {
161
+ if ((error === null || error === void 0 ? void 0 : error.name) === 'APIError') {
163
162
  cardState = {
164
163
  status: 'errored'
165
164
  };
@@ -175,6 +175,7 @@ const Container = ({
175
175
  clickableContainer = false,
176
176
  hideBackground = false,
177
177
  hideElevation = false,
178
+ hideHoverCardPreviewButton = false,
178
179
  hidePadding = false,
179
180
  showHoverPreview = false,
180
181
  onClick,
@@ -197,7 +198,8 @@ const Container = ({
197
198
  return jsx(HoverCard, {
198
199
  url: context === null || context === void 0 ? void 0 : context.url,
199
200
  canOpen: hoverCardCanOpen,
200
- closeOnChildClick: true
201
+ closeOnChildClick: true,
202
+ hidePreviewButton: hideHoverCardPreviewButton
201
203
  }, containerContent);
202
204
  }
203
205
  return containerContent;
@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
2
2
  /** @jsx jsx */
3
3
  import Popup from '@atlaskit/popup';
4
4
  import { jsx } from '@emotion/react';
5
- import React, { useCallback, useRef } from 'react';
5
+ import React, { useCallback, useMemo, useRef } from 'react';
6
6
  import { useSmartLinkActions } from '../../../state/hooks-external/useSmartLinkActions';
7
7
  import { useSmartLinkRenderers } from '../../../state/renderers';
8
8
  import { useSmartCardState as useLinkState } from '../../../state/store';
@@ -15,7 +15,8 @@ export const HoverCardComponent = ({
15
15
  analyticsHandler,
16
16
  analytics,
17
17
  canOpen = true,
18
- closeOnChildClick = false
18
+ closeOnChildClick = false,
19
+ hidePreviewButton = false
19
20
  }) => {
20
21
  const delay = 300;
21
22
  const [isOpen, setIsOpen] = React.useState(false);
@@ -91,6 +92,9 @@ export const HoverCardComponent = ({
91
92
  analyticsHandler,
92
93
  origin: 'smartLinkPreviewHoverCard'
93
94
  });
95
+ const filteredActions = useMemo(() => {
96
+ return hidePreviewButton ? linkActions.filter(action => action.id !== 'preview-content') : linkActions;
97
+ }, [hidePreviewButton, linkActions]);
94
98
  const onActionClick = useCallback(actionId => {
95
99
  if (actionId === 'preview-content') {
96
100
  hideCard();
@@ -111,13 +115,13 @@ export const HoverCardComponent = ({
111
115
  onMouseEnter: initShowCard,
112
116
  onMouseLeave: initHideCard,
113
117
  analytics: analytics,
114
- cardActions: linkActions,
118
+ cardActions: filteredActions,
115
119
  cardState: linkState,
116
120
  onActionClick: onActionClick,
117
121
  onResolve: update,
118
122
  renderers: renderers,
119
123
  url: url
120
- }), [analytics, initHideCard, initShowCard, linkActions, linkState, onActionClick, renderers, url]);
124
+ }), [analytics, initHideCard, initShowCard, filteredActions, linkState, onActionClick, renderers, url]);
121
125
  const trigger = useCallback(triggerProps => jsx("span", {
122
126
  ref: parentSpan
123
127
  }, jsx("span", _extends({}, triggerProps, {
@@ -7,7 +7,8 @@ export const flexibleUiOptions = {
7
7
  size: SmartLinkSize.Medium,
8
8
  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
9
9
  theme: SmartLinkTheme.Black,
10
- hidePadding: true
10
+ hidePadding: true,
11
+ hideHoverCardPreviewButton: false
11
12
  };
12
13
  export const CARD_WIDTH_REM = 24;
13
14
  // gap between mouse cursor and hover card
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/smart-card",
3
- "version": "24.1.3",
3
+ "version": "24.3.0",
4
4
  "sideEffects": false
5
5
  }
@@ -10,7 +10,6 @@ import { InlineCard } from '../InlineCard';
10
10
  import { EmbedCard } from '../EmbedCard';
11
11
  import { isFlexibleUiCard } from '../../utils/flexible';
12
12
  import FlexibleCard from '../FlexibleCard';
13
- import { APIError } from '../..';
14
13
  import { CardDisplay } from '../../constants';
15
14
  import { fireLinkClickedEvent } from '../../utils/analytics/click';
16
15
  export function CardWithUrlContent(_ref) {
@@ -162,7 +161,7 @@ export function CardWithUrlContent(_ref) {
162
161
  if (isFlexibleUi) {
163
162
  var cardState = state;
164
163
  if (error) {
165
- if ((error === null || error === void 0 ? void 0 : error.constructor) === APIError) {
164
+ if ((error === null || error === void 0 ? void 0 : error.name) === 'APIError') {
166
165
  cardState = {
167
166
  status: 'errored'
168
167
  };
@@ -137,6 +137,8 @@ var Container = function Container(_ref3) {
137
137
  hideBackground = _ref3$hideBackground === void 0 ? false : _ref3$hideBackground,
138
138
  _ref3$hideElevation = _ref3.hideElevation,
139
139
  hideElevation = _ref3$hideElevation === void 0 ? false : _ref3$hideElevation,
140
+ _ref3$hideHoverCardPr = _ref3.hideHoverCardPreviewButton,
141
+ hideHoverCardPreviewButton = _ref3$hideHoverCardPr === void 0 ? false : _ref3$hideHoverCardPr,
140
142
  _ref3$hidePadding = _ref3.hidePadding,
141
143
  hidePadding = _ref3$hidePadding === void 0 ? false : _ref3$hidePadding,
142
144
  _ref3$showHoverPrevie = _ref3.showHoverPreview,
@@ -168,7 +170,8 @@ var Container = function Container(_ref3) {
168
170
  return jsx(HoverCard, {
169
171
  url: context === null || context === void 0 ? void 0 : context.url,
170
172
  canOpen: hoverCardCanOpen,
171
- closeOnChildClick: true
173
+ closeOnChildClick: true,
174
+ hidePreviewButton: hideHoverCardPreviewButton
172
175
  }, containerContent);
173
176
  }
174
177
  return containerContent;
@@ -3,7 +3,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
3
3
  /** @jsx jsx */
4
4
  import Popup from '@atlaskit/popup';
5
5
  import { jsx } from '@emotion/react';
6
- import React, { useCallback, useRef } from 'react';
6
+ import React, { useCallback, useMemo, useRef } from 'react';
7
7
  import { useSmartLinkActions } from '../../../state/hooks-external/useSmartLinkActions';
8
8
  import { useSmartLinkRenderers } from '../../../state/renderers';
9
9
  import { useSmartCardState as useLinkState } from '../../../state/store';
@@ -18,7 +18,9 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
18
18
  _ref$canOpen = _ref.canOpen,
19
19
  canOpen = _ref$canOpen === void 0 ? true : _ref$canOpen,
20
20
  _ref$closeOnChildClic = _ref.closeOnChildClick,
21
- closeOnChildClick = _ref$closeOnChildClic === void 0 ? false : _ref$closeOnChildClic;
21
+ closeOnChildClick = _ref$closeOnChildClic === void 0 ? false : _ref$closeOnChildClic,
22
+ _ref$hidePreviewButto = _ref.hidePreviewButton,
23
+ hidePreviewButton = _ref$hidePreviewButto === void 0 ? false : _ref$hidePreviewButto;
22
24
  var delay = 300;
23
25
  var _React$useState = React.useState(false),
24
26
  _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -97,6 +99,11 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
97
99
  analyticsHandler: analyticsHandler,
98
100
  origin: 'smartLinkPreviewHoverCard'
99
101
  });
102
+ var filteredActions = useMemo(function () {
103
+ return hidePreviewButton ? linkActions.filter(function (action) {
104
+ return action.id !== 'preview-content';
105
+ }) : linkActions;
106
+ }, [hidePreviewButton, linkActions]);
100
107
  var onActionClick = useCallback(function (actionId) {
101
108
  if (actionId === 'preview-content') {
102
109
  hideCard();
@@ -117,14 +124,14 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
117
124
  onMouseEnter: initShowCard,
118
125
  onMouseLeave: initHideCard,
119
126
  analytics: analytics,
120
- cardActions: linkActions,
127
+ cardActions: filteredActions,
121
128
  cardState: linkState,
122
129
  onActionClick: onActionClick,
123
130
  onResolve: update,
124
131
  renderers: renderers,
125
132
  url: url
126
133
  });
127
- }, [analytics, initHideCard, initShowCard, linkActions, linkState, onActionClick, renderers, url]);
134
+ }, [analytics, initHideCard, initShowCard, filteredActions, linkState, onActionClick, renderers, url]);
128
135
  var trigger = useCallback(function (triggerProps) {
129
136
  return jsx("span", {
130
137
  ref: parentSpan
@@ -9,7 +9,8 @@ export var flexibleUiOptions = {
9
9
  size: SmartLinkSize.Medium,
10
10
  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
11
11
  theme: SmartLinkTheme.Black,
12
- hidePadding: true
12
+ hidePadding: true,
13
+ hideHoverCardPreviewButton: false
13
14
  };
14
15
  export var CARD_WIDTH_REM = 24;
15
16
  // gap between mouse cursor and hover card
@@ -104,6 +104,11 @@ export declare type FlexibleUiOptions = {
104
104
  * Can be Black or Link (default URL blue)
105
105
  */
106
106
  theme?: SmartLinkTheme;
107
+ /**
108
+ * Determines whether to hide hover preview's full screen view.
109
+ * Only applies if showHoverPreview from FlexibleCardProps is true
110
+ */
111
+ hideHoverCardPreviewButton?: boolean;
107
112
  };
108
113
  /**
109
114
  * Retry options used if Smart Link resolves to an errored state.
@@ -1,3 +1,3 @@
1
1
  /// <reference types="react" />
2
2
  import { HoverCardProps } from './types';
3
- export declare const HoverCard: import("react").ForwardRefExoticComponent<Pick<Omit<import("react").PropsWithChildren<HoverCardProps>, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "url" | "children" | "key" | "id" | "analyticsContext" | "onAuthorize" | "canOpen" | "closeOnChildClick"> & import("react").RefAttributes<any>>;
3
+ export declare const HoverCard: import("react").ForwardRefExoticComponent<Pick<Omit<import("react").PropsWithChildren<HoverCardProps>, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "url" | "children" | "key" | "id" | "analyticsContext" | "onAuthorize" | "canOpen" | "closeOnChildClick" | "hidePreviewButton"> & import("react").RefAttributes<any>>;
@@ -34,6 +34,10 @@ export interface HoverCardProps extends WithAnalyticsEventsProps {
34
34
  * clicked.
35
35
  */
36
36
  closeOnChildClick?: boolean;
37
+ /**
38
+ * Determines if the hover card should display the "Full Screen View" button.
39
+ */
40
+ hidePreviewButton?: boolean;
37
41
  }
38
42
  export interface HoverCardComponentProps extends HoverCardProps {
39
43
  analyticsHandler: AnalyticsHandler;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/smart-card",
3
- "version": "24.1.3",
3
+ "version": "24.3.0",
4
4
  "description": "Smart card component",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -27,13 +27,13 @@
27
27
  "@atlaskit/avatar": "^21.1.0",
28
28
  "@atlaskit/avatar-group": "^9.2.0",
29
29
  "@atlaskit/button": "^16.5.0",
30
- "@atlaskit/dropdown-menu": "^11.5.0",
30
+ "@atlaskit/dropdown-menu": "^11.6.0",
31
31
  "@atlaskit/icon": "^21.11.0",
32
32
  "@atlaskit/icon-file-type": "^6.3.0",
33
33
  "@atlaskit/icon-object": "^6.2.0",
34
34
  "@atlaskit/icon-priority": "^6.3.0",
35
35
  "@atlaskit/in-product-testing": "^0.1.0",
36
- "@atlaskit/linking-common": "^2.0.0",
36
+ "@atlaskit/linking-common": "^2.1.0",
37
37
  "@atlaskit/logo": "^13.11.0",
38
38
  "@atlaskit/lozenge": "^11.3.0",
39
39
  "@atlaskit/media-common": "^2.19.0",
package/report.api.md CHANGED
@@ -540,6 +540,7 @@ type FlexibleUiOptions = {
540
540
  hideBackground?: boolean;
541
541
  size?: SmartLinkSize;
542
542
  theme?: SmartLinkTheme;
543
+ hideHoverCardPreviewButton?: boolean;
543
544
  };
544
545
 
545
546
  // @public
@@ -413,6 +413,7 @@ type FlexibleUiOptions = {
413
413
  hideBackground?: boolean;
414
414
  size?: SmartLinkSize;
415
415
  theme?: SmartLinkTheme;
416
+ hideHoverCardPreviewButton?: boolean;
416
417
  };
417
418
 
418
419
  // @public