@atlaskit/smart-card 25.8.0 → 25.9.1

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.
Files changed (67) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/dist/cjs/constants.js +13 -7
  3. package/dist/cjs/extractors/flexible/index.js +1 -0
  4. package/dist/cjs/extractors/flexible/utils.js +14 -2
  5. package/dist/cjs/state/actions/index.js +11 -27
  6. package/dist/cjs/state/hooks/use-resolve/index.js +12 -21
  7. package/dist/cjs/version.json +1 -1
  8. package/dist/cjs/view/BlockCard/views/flexible/FlexibleResolvedView.js +4 -1
  9. package/dist/cjs/view/CardWithUrl/component.js +3 -12
  10. package/dist/cjs/view/FlexibleCard/components/blocks/element-group/index.js +6 -4
  11. package/dist/cjs/view/FlexibleCard/components/blocks/title-block/resolved/index.js +7 -2
  12. package/dist/cjs/view/FlexibleCard/components/blocks/utils.js +1 -1
  13. package/dist/cjs/view/FlexibleCard/components/elements/index.js +9 -2
  14. package/dist/cjs/view/FlexibleCard/components/elements/link/index.js +8 -4
  15. package/dist/cjs/view/FlexibleCard/components/elements/utils.js +5 -0
  16. package/dist/cjs/view/HoverCard/components/HoverCardComponent.js +4 -11
  17. package/dist/cjs/view/HoverCard/styled.js +1 -1
  18. package/dist/cjs/view/HoverCard/utils.js +1 -1
  19. package/dist/es2019/constants.js +10 -5
  20. package/dist/es2019/extractors/flexible/index.js +2 -1
  21. package/dist/es2019/extractors/flexible/utils.js +12 -0
  22. package/dist/es2019/state/actions/index.js +12 -32
  23. package/dist/es2019/state/hooks/use-resolve/index.js +12 -21
  24. package/dist/es2019/version.json +1 -1
  25. package/dist/es2019/view/BlockCard/views/flexible/FlexibleResolvedView.js +4 -1
  26. package/dist/es2019/view/CardWithUrl/component.js +2 -8
  27. package/dist/es2019/view/FlexibleCard/components/blocks/element-group/index.js +6 -4
  28. package/dist/es2019/view/FlexibleCard/components/blocks/title-block/resolved/index.js +8 -3
  29. package/dist/es2019/view/FlexibleCard/components/blocks/utils.js +5 -4
  30. package/dist/es2019/view/FlexibleCard/components/elements/index.js +6 -0
  31. package/dist/es2019/view/FlexibleCard/components/elements/link/index.js +17 -1
  32. package/dist/es2019/view/FlexibleCard/components/elements/utils.js +7 -1
  33. package/dist/es2019/view/HoverCard/components/HoverCardComponent.js +3 -10
  34. package/dist/es2019/view/HoverCard/styled.js +1 -1
  35. package/dist/es2019/view/HoverCard/utils.js +1 -1
  36. package/dist/esm/constants.js +10 -5
  37. package/dist/esm/extractors/flexible/index.js +2 -1
  38. package/dist/esm/extractors/flexible/utils.js +11 -0
  39. package/dist/esm/state/actions/index.js +11 -27
  40. package/dist/esm/state/hooks/use-resolve/index.js +12 -21
  41. package/dist/esm/version.json +1 -1
  42. package/dist/esm/view/BlockCard/views/flexible/FlexibleResolvedView.js +4 -1
  43. package/dist/esm/view/CardWithUrl/component.js +2 -10
  44. package/dist/esm/view/FlexibleCard/components/blocks/element-group/index.js +7 -5
  45. package/dist/esm/view/FlexibleCard/components/blocks/title-block/resolved/index.js +8 -3
  46. package/dist/esm/view/FlexibleCard/components/blocks/utils.js +1 -1
  47. package/dist/esm/view/FlexibleCard/components/elements/index.js +6 -0
  48. package/dist/esm/view/FlexibleCard/components/elements/link/index.js +9 -5
  49. package/dist/esm/view/FlexibleCard/components/elements/utils.js +6 -1
  50. package/dist/esm/view/HoverCard/components/HoverCardComponent.js +4 -11
  51. package/dist/esm/view/HoverCard/styled.js +1 -1
  52. package/dist/esm/view/HoverCard/utils.js +1 -1
  53. package/dist/types/constants.d.ts +6 -2
  54. package/dist/types/extractors/flexible/utils.d.ts +2 -0
  55. package/dist/types/state/flexible-ui-context/types.d.ts +10 -0
  56. package/dist/types/view/CardWithUrl/component.d.ts +1 -1
  57. package/dist/types/view/FlexibleCard/components/blocks/element-group/index.d.ts +2 -2
  58. package/dist/types/view/FlexibleCard/components/blocks/element-group/types.d.ts +2 -1
  59. package/dist/types/view/FlexibleCard/components/blocks/types.d.ts +7 -1
  60. package/dist/types/view/FlexibleCard/components/elements/index.d.ts +6 -0
  61. package/package.json +2 -3
  62. package/report.api.md +8 -0
  63. package/tmp/api-report-tmp.d.ts +8 -1
  64. package/dist/cjs/utils/analytics/SmartLinkAnalyticsContext.js +0 -47
  65. package/dist/es2019/utils/analytics/SmartLinkAnalyticsContext.js +0 -35
  66. package/dist/esm/utils/analytics/SmartLinkAnalyticsContext.js +0 -36
  67. package/dist/types/utils/analytics/SmartLinkAnalyticsContext.d.ts +0 -9
@@ -79,7 +79,10 @@ var FlexibleResolvedView = function FlexibleResolvedView(_ref) {
79
79
  }, {
80
80
  name: ElementName.State
81
81
  }],
82
- hideRetry: true
82
+ hideRetry: true,
83
+ subtitle: [{
84
+ name: ElementName.Location
85
+ }]
83
86
  }), /*#__PURE__*/React.createElement(MetadataBlock, {
84
87
  primary: metadata,
85
88
  maxLines: 1
@@ -12,8 +12,7 @@ import { isFlexibleUiCard } from '../../utils/flexible';
12
12
  import FlexibleCard from '../FlexibleCard';
13
13
  import { CardDisplay } from '../../constants';
14
14
  import { fireLinkClickedEvent } from '../../utils/analytics/click';
15
- import { SmartLinkAnalyticsContext } from '../../utils/analytics/SmartLinkAnalyticsContext';
16
- function Component(_ref) {
15
+ export function CardWithUrlContent(_ref) {
17
16
  var id = _ref.id,
18
17
  url = _ref.url,
19
18
  isSelected = _ref.isSelected,
@@ -258,11 +257,4 @@ function Component(_ref) {
258
257
  onIframeFocus: onIframeFocus
259
258
  });
260
259
  }
261
- }
262
- export var CardWithUrlContent = function CardWithUrlContent(props) {
263
- return /*#__PURE__*/React.createElement(SmartLinkAnalyticsContext, {
264
- url: props.url,
265
- appearance: props.appearance,
266
- id: props.id
267
- }, /*#__PURE__*/React.createElement(Component, props));
268
- };
260
+ }
@@ -3,7 +3,7 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
3
3
  /** @jsx jsx */
4
4
  import React from 'react';
5
5
  import { css, jsx } from '@emotion/react';
6
- import { SmartLinkAlignment, SmartLinkDirection, SmartLinkSize, SmartLinkWidth } from '../../../../../constants';
6
+ import { SmartLinkAlignment, SmartLinkDirection, SmartLinkPosition, SmartLinkSize, SmartLinkWidth } from '../../../../../constants';
7
7
  import { getBaseStyles, getGapSize, renderChildren } from '../utils';
8
8
  import { getMaxLineHeight, getTruncateStyles } from '../../utils';
9
9
  var getAlignmentStyles = function getAlignmentStyles(align) {
@@ -26,8 +26,8 @@ var getHorizontalDirectionStyles = function getHorizontalDirectionStyles(size, a
26
26
  var lineHeight = getMaxLineHeight(size);
27
27
  return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n display: block;\n vertical-align: middle;\n ", "\n\n > span, > div {\n vertical-align: middle;\n\n &[data-smart-element-date-time],\n &[data-smart-element-text] {\n // Show all/wrapped/truncated\n display: inline;\n }\n }\n\n ", "\n "])), getTruncateStyles(1, lineHeight + 'rem'), getGapStyles(size, align));
28
28
  };
29
- export var getElementGroupStyles = function getElementGroupStyles(direction, size, align, width) {
30
- return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n ", "\n ", "\n min-width: 10%;\n ", "\n ", "\n"])), getBaseStyles(direction, size), getAlignmentStyles(align), width === SmartLinkWidth.Flexible ? "flex: 1 3;" : '', direction === SmartLinkDirection.Horizontal ? getHorizontalDirectionStyles(size, align) : '');
29
+ export var getElementGroupStyles = function getElementGroupStyles(direction, size, align, width, position) {
30
+ return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n ", "\n ", "\n min-width: 10%;\n ", "\n ", "\n ", "\n"])), getBaseStyles(direction, size), getAlignmentStyles(align), width === SmartLinkWidth.Flexible ? "flex: 1 3;" : '', direction === SmartLinkDirection.Horizontal ? getHorizontalDirectionStyles(size, align) : '', position === SmartLinkPosition.Top ? 'align-self: flex-start;' : '');
31
31
  };
32
32
 
33
33
  /**
@@ -49,9 +49,11 @@ var ElementGroup = function ElementGroup(_ref) {
49
49
  _ref$testId = _ref.testId,
50
50
  testId = _ref$testId === void 0 ? 'smart-element-group' : _ref$testId,
51
51
  _ref$width = _ref.width,
52
- width = _ref$width === void 0 ? SmartLinkWidth.FitToContent : _ref$width;
52
+ width = _ref$width === void 0 ? SmartLinkWidth.FitToContent : _ref$width,
53
+ _ref$position = _ref.position,
54
+ position = _ref$position === void 0 ? SmartLinkPosition.Center : _ref$position;
53
55
  return jsx("div", {
54
- css: [getElementGroupStyles(direction, size, align, width), overrideCss],
56
+ css: [getElementGroupStyles(direction, size, align, width, position), overrideCss],
55
57
  "data-smart-element-group": true,
56
58
  "data-testid": testId
57
59
  }, renderChildren(children, size));
@@ -1,11 +1,14 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
+ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
2
3
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
4
+ var _templateObject;
3
5
  var _excluded = ["actionGroup", "metadata", "position", "subtitle", "testId", "text", "title"];
4
6
  import React from 'react';
7
+ import { css } from '@emotion/react';
5
8
  import { LinkIcon } from '../../../elements';
6
9
  import Block from '../../block';
7
10
  import ElementGroup from '../../element-group';
8
- import { SmartLinkAlignment, SmartLinkDirection, SmartLinkWidth } from '../../../../../../constants';
11
+ import { SmartLinkAlignment, SmartLinkDirection, SmartLinkPosition, SmartLinkWidth } from '../../../../../../constants';
9
12
  import { renderElementItems } from '../../utils';
10
13
 
11
14
  /**
@@ -32,12 +35,14 @@ var TitleBlockResolvedView = function TitleBlockResolvedView(_ref) {
32
35
  position: position
33
36
  }), /*#__PURE__*/React.createElement(ElementGroup, {
34
37
  direction: SmartLinkDirection.Vertical,
35
- width: SmartLinkWidth.Flexible
38
+ width: SmartLinkWidth.Flexible,
39
+ overrideCss: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n gap: 0.25rem;\n "])))
36
40
  }, title, subtitleElements && /*#__PURE__*/React.createElement(ElementGroup, {
37
41
  direction: SmartLinkDirection.Horizontal
38
42
  }, subtitleElements)), metadataElements && /*#__PURE__*/React.createElement(ElementGroup, {
39
43
  direction: SmartLinkDirection.Horizontal,
40
- align: SmartLinkAlignment.Right
44
+ align: SmartLinkAlignment.Right,
45
+ position: SmartLinkPosition.Top
41
46
  }, metadataElements), actionGroup);
42
47
  };
43
48
  export default TitleBlockResolvedView;
@@ -15,7 +15,7 @@ import ElementGroup from './element-group';
15
15
 
16
16
  // Determine whether the element can be display as inline/block.
17
17
 
18
- export var ElementDisplaySchema = (_ElementDisplaySchema = {}, _defineProperty(_ElementDisplaySchema, ElementName.AttachmentCount, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.AuthorGroup, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.ChecklistProgress, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.CollaboratorGroup, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.CommentCount, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.ViewCount, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.ReactCount, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.VoteCount, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.CreatedBy, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.CreatedOn, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.DueOn, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.LatestCommit, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.LinkIcon, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.ModifiedBy, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.ModifiedOn, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.OwnedBy, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.Preview, ['block']), _defineProperty(_ElementDisplaySchema, ElementName.Priority, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.ProgrammingLanguage, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.Provider, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.Snippet, ['block']), _defineProperty(_ElementDisplaySchema, ElementName.SourceBranch, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.State, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.SubscriberCount, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.TargetBranch, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.Title, ['inline']), _ElementDisplaySchema);
18
+ export var ElementDisplaySchema = (_ElementDisplaySchema = {}, _defineProperty(_ElementDisplaySchema, ElementName.AttachmentCount, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.AuthorGroup, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.ChecklistProgress, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.CollaboratorGroup, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.CommentCount, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.CreatedBy, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.CreatedOn, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.DueOn, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.LatestCommit, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.LinkIcon, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.Location, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.ModifiedBy, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.ModifiedOn, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.OwnedBy, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.Preview, ['block']), _defineProperty(_ElementDisplaySchema, ElementName.Priority, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.ProgrammingLanguage, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.Provider, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.ReactCount, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.Snippet, ['block']), _defineProperty(_ElementDisplaySchema, ElementName.SourceBranch, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.State, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.SubscriberCount, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.TargetBranch, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.Title, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.ViewCount, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.VoteCount, ['inline']), _ElementDisplaySchema);
19
19
  var getDirectionStyles = function getDirectionStyles(direction) {
20
20
  switch (direction) {
21
21
  case SmartLinkDirection.Vertical:
@@ -52,6 +52,12 @@ export var LatestCommit = createElement(ElementName.LatestCommit);
52
52
  * @see Icon
53
53
  */
54
54
  export var LinkIcon = createElement(ElementName.LinkIcon);
55
+ /**
56
+ * Creates a Location Link element.
57
+ * This represents the location or container of the resource.
58
+ * @see Link
59
+ */
60
+ export var Location = createElement(ElementName.Location);
55
61
  /**
56
62
  * Creates a ModifiedBy Text element using the data from ModifiedBy in the Flexible UI Context.
57
63
  * @see Text
@@ -1,10 +1,10 @@
1
1
  import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
2
- var _templateObject, _templateObject2, _templateObject3, _templateObject4;
2
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
3
3
  /** @jsx jsx */
4
4
  import React, { useMemo } from 'react';
5
5
  import { css, jsx } from '@emotion/react';
6
6
  import Tooltip from '@atlaskit/tooltip';
7
- import { SmartLinkSize, SmartLinkTheme } from '../../../../../constants';
7
+ import { SmartLinkInternalTheme, SmartLinkSize, SmartLinkTheme } from '../../../../../constants';
8
8
  import { getLinkLineHeight, getLinkSizeStyles, getTruncateStyles, hasWhiteSpace } from '../../utils';
9
9
  import { tokens } from '../../../../../utils/token';
10
10
  import useMouseDownEvent from '../../../../../state/analytics/useMouseDownEvent';
@@ -14,17 +14,21 @@ var MINIMUM_MAX_LINES = 1;
14
14
  var containerStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n flex: 1 1 auto;\n"])));
15
15
  var getThemeStyles = function getThemeStyles(theme) {
16
16
  switch (theme) {
17
+ case SmartLinkInternalTheme.Grey:
18
+ // We are being specifc with the CSS selectors to ensure that Confluence overrides
19
+ // do not affect our internal Smart Card styles
20
+ return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n a& {\n color: ", ";\n &:active,\n &:visited,\n &:focus,\n &:hover {\n color: ", ";\n text-decoration: underline;\n }\n font-size: 12px;\n }\n "])), "var(--ds-text-subtlest, #626F86)", "var(--ds-text-subtlest, #626F86)");
17
21
  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
18
22
  case SmartLinkTheme.Black:
19
- return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n color: ", ";\n :active {\n color: ", ";\n }\n :hover {\n color: ", ";\n text-decoration: underline;\n }\n "])), tokens.blackLink, tokens.blackLinkPressed, tokens.blackLink);
23
+ return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n color: ", ";\n :active {\n color: ", ";\n }\n :hover {\n color: ", ";\n text-decoration: underline;\n }\n "])), tokens.blackLink, tokens.blackLinkPressed, tokens.blackLink);
20
24
  case SmartLinkTheme.Link:
21
25
  default:
22
- return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n color: ", ";\n :active {\n color: ", ";\n }\n :hover {\n color: ", ";\n text-decoration: underline;\n }\n "])), tokens.blueLink, tokens.blueLinkPressed, tokens.blueLink);
26
+ return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n color: ", ";\n :active {\n color: ", ";\n }\n :hover {\n color: ", ";\n text-decoration: underline;\n }\n "])), tokens.blueLink, tokens.blueLinkPressed, tokens.blueLink);
23
27
  }
24
28
  };
25
29
  var getAnchorStyles = function getAnchorStyles(size, theme, maxLines, hasSpace) {
26
30
  var sizeStyles = getLinkSizeStyles(size);
27
- return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n flex: 1 1 auto;\n ", "\n ", "\n // Theme should be last to be spread because it contains override values\n ", "\n "])), sizeStyles, getTruncateStyles(maxLines, getLinkLineHeight(size), hasSpace ? 'break-word' : 'break-all'), getThemeStyles(theme));
31
+ return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n flex: 1 1 auto;\n ", "\n ", "\n // Theme should be last to be spread because it contains override values\n ", "\n "])), sizeStyles, getTruncateStyles(maxLines, getLinkLineHeight(size), hasSpace ? 'break-word' : 'break-all'), getThemeStyles(theme));
28
32
  };
29
33
  var getMaxLines = function getMaxLines(maxLines) {
30
34
  if (maxLines > MAXIMUM_MAX_LINES) {
@@ -5,7 +5,7 @@ var _templateObject, _elementMappings;
5
5
  import React, { useContext } from 'react';
6
6
  import { FormattedDate } from 'react-intl-next';
7
7
  import { css } from '@emotion/react';
8
- import { ElementName, IconType } from '../../../../constants';
8
+ import { ElementName, IconType, SmartLinkInternalTheme } from '../../../../constants';
9
9
  import Icon from './icon';
10
10
  import Link from './link';
11
11
  import Lozenge from './lozenge';
@@ -101,6 +101,11 @@ var elementMappings = (_elementMappings = {}, _defineProperty(_elementMappings,
101
101
  component: Text
102
102
  }), _defineProperty(_elementMappings, ElementName.Title, {
103
103
  component: Link
104
+ }), _defineProperty(_elementMappings, ElementName.Location, {
105
+ component: Link,
106
+ props: {
107
+ theme: SmartLinkInternalTheme.Grey
108
+ }
104
109
  }), _elementMappings);
105
110
  var getContextKey = function getContextKey(name) {
106
111
  // Attempt to predict context prop name in advance to reduce the amount of
@@ -10,11 +10,9 @@ import { useSmartCardState as useLinkState } from '../../../state/store';
10
10
  import HoverCardContent from '../components/HoverCardContent';
11
11
  import { CARD_GAP_PX, HOVER_CARD_Z_INDEX } from '../styled';
12
12
  import { CardDisplay } from '../../../constants';
13
- import { SmartLinkAnalyticsContext } from '../../../utils/analytics/SmartLinkAnalyticsContext';
14
13
  export var HoverCardComponent = function HoverCardComponent(_ref) {
15
14
  var children = _ref.children,
16
15
  url = _ref.url,
17
- id = _ref.id,
18
16
  analyticsHandler = _ref.analyticsHandler,
19
17
  analytics = _ref.analytics,
20
18
  _ref$canOpen = _ref.canOpen,
@@ -124,11 +122,7 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
124
122
  }, [closeOnChildClick, hideCard]);
125
123
  var content = useCallback(function (_ref2) {
126
124
  var update = _ref2.update;
127
- return jsx(SmartLinkAnalyticsContext, {
128
- url: url,
129
- appearance: CardDisplay.HoverCardPreview,
130
- id: id
131
- }, jsx(HoverCardContent, {
125
+ return jsx(HoverCardContent, {
132
126
  onMouseEnter: initShowCard,
133
127
  onMouseLeave: initHideCard,
134
128
  analytics: analytics,
@@ -138,10 +132,9 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
138
132
  onResolve: update,
139
133
  renderers: renderers,
140
134
  showServerActions: showServerActions,
141
- url: url,
142
- id: id
143
- }));
144
- }, [analytics, initHideCard, initShowCard, filteredActions, linkState, onActionClick, renderers, showServerActions, url, id]);
135
+ url: url
136
+ });
137
+ }, [analytics, initHideCard, initShowCard, filteredActions, linkState, onActionClick, renderers, showServerActions, url]);
145
138
  var trigger = useCallback(function (triggerProps) {
146
139
  return jsx("span", {
147
140
  ref: parentSpan
@@ -22,7 +22,7 @@ var blockGap = '0.5rem';
22
22
  var elementGap = '0.5rem';
23
23
  export var separatorCss = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n [data-separator] + [data-separator]:before {\n margin-right: ", ";\n }\n"])), elementGap);
24
24
  export var HoverCardContainer = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n background: none;\n border-width: 0;\n box-sizing: border-box;\n width: ", "rem;\n padding: 1rem;\n\n .", " {\n display: none;\n }\n"])), CARD_WIDTH_REM, loadingPlaceholderClassName);
25
- export var titleBlockCss = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n gap: ", ";\n\n ", "\n\n // title and subtitle element group\n [data-smart-element-group] {\n // gap between title and subtitle\n gap: 0.06rem;\n\n /* subtitle element group */\n > [data-smart-element-group] {\n > span {\n margin-right: ", ";\n }\n }\n }\n"])), blockGap, separatorCss, elementGap);
25
+ export var titleBlockCss = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n gap: ", ";\n\n ", "\n\n // title and subtitle element group\n [data-smart-element-group] {\n // gap between title and subtitle\n gap: 0.06rem;\n display: flex;\n /* subtitle element group */\n > [data-smart-element-group] {\n > span {\n margin-right: ", ";\n }\n }\n }\n"])), blockGap, separatorCss, elementGap);
26
26
  export var getTransitionStyles = function getTransitionStyles(snippetHeight) {
27
27
  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n transition: height 300ms ease-in-out;\n height: ", "px;\n"])), snippetHeight);
28
28
  };
@@ -49,7 +49,7 @@ export var getSimulatedMetadata = function getSimulatedMetadata() {
49
49
  metadata: {
50
50
  primary: [ElementName.AuthorGroup, ElementName.State, ElementName.DueOn],
51
51
  secondary: [ElementName.ReactCount, ElementName.CommentCount, ElementName.AttachmentCount, ElementName.ChecklistProgress],
52
- subtitle: []
52
+ subtitle: [ElementName.Location]
53
53
  }
54
54
  };
55
55
  case 'watermelon-object-provider':
@@ -55,6 +55,9 @@ export declare enum SmartLinkTheme {
55
55
  Black = "black",
56
56
  Link = "link"
57
57
  }
58
+ export declare enum SmartLinkInternalTheme {
59
+ Grey = "grey"
60
+ }
58
61
  /**
59
62
  * Determines whether the container size will fit to the content
60
63
  * or expand to the available width or the parent component.
@@ -89,7 +92,9 @@ export declare enum ElementName {
89
92
  CreatedBy = "CreatedBy",
90
93
  CreatedOn = "CreatedOn",
91
94
  DueOn = "DueOn",
95
+ LatestCommit = "LatestCommit",
92
96
  LinkIcon = "LinkIcon",
97
+ Location = "Location",
93
98
  ModifiedBy = "ModifiedBy",
94
99
  ModifiedOn = "ModifiedOn",
95
100
  OwnedBy = "OwnedBy",
@@ -105,8 +110,7 @@ export declare enum ElementName {
105
110
  TargetBranch = "TargetBranch",
106
111
  Title = "Title",
107
112
  ViewCount = "ViewCount",
108
- VoteCount = "VoteCount",
109
- LatestCommit = "LatestCommit"
113
+ VoteCount = "VoteCount"
110
114
  }
111
115
  /**
112
116
  * Flexible UI action (button)
@@ -1,4 +1,5 @@
1
1
  import { JsonLd } from 'json-ld-types';
2
+ import { LinkLocation } from '../../state/flexible-ui-context/types';
2
3
  export declare const extractCommentCount: (data: JsonLd.Data.BaseData) => number | undefined;
3
4
  export declare const extractDueOn: (data: JsonLd.Data.BaseData) => string | undefined;
4
5
  export declare const extractViewCount: (data: JsonLd.Data.BaseData) => number | undefined;
@@ -13,3 +14,4 @@ export declare const extractSubscriberCount: (data: JsonLd.Data.BaseData) => num
13
14
  export declare const extractAttachmentCount: (data: JsonLd.Data.BaseData) => number | undefined;
14
15
  export declare const extractTargetBranch: (data: JsonLd.Data.SourceCodePullRequest) => string | undefined;
15
16
  export declare const extractChecklistProgress: (data: JsonLd.Data.BaseData) => string | undefined;
17
+ export declare const extractLocation: (data: JsonLd.Data.BaseData) => LinkLocation | undefined;
@@ -182,12 +182,22 @@ export declare type FlexibleUiDataContext = {
182
182
  * @see Title
183
183
  */
184
184
  url?: string;
185
+ /**
186
+ * Contains the name and url of the location that the resource is located in.
187
+ * @type LinkLocation
188
+ * @see Location
189
+ */
190
+ location?: LinkLocation;
185
191
  };
186
192
  export declare type Icon = {
187
193
  icon?: IconType;
188
194
  label?: string;
189
195
  url?: string;
190
196
  };
197
+ export declare type LinkLocation = {
198
+ text: string;
199
+ url: string;
200
+ };
191
201
  export declare type Media = {
192
202
  type: MediaType;
193
203
  url: string;
@@ -1,3 +1,3 @@
1
1
  /// <reference types="react" />
2
2
  import { CardWithUrlContentProps } from './types';
3
- export declare const CardWithUrlContent: (props: CardWithUrlContentProps) => JSX.Element;
3
+ export declare function CardWithUrlContent({ id, url, isSelected, isFrameVisible, frameStyle, platform, onClick, appearance, dispatchAnalytics, onResolve, onError, testId, showActions, showServerActions: showServerActionsProp, inheritDimensions, embedIframeRef, embedIframeUrlType, inlinePreloaderStyle, ui, children, showHoverPreview, showAuthTooltip: showAuthTooltipProp, analyticsEvents, }: CardWithUrlContentProps): JSX.Element;
@@ -2,8 +2,8 @@
2
2
  import React from 'react';
3
3
  import { SerializedStyles } from '@emotion/react';
4
4
  import { ElementGroupProps } from './types';
5
- import { SmartLinkAlignment, SmartLinkDirection, SmartLinkSize, SmartLinkWidth } from '../../../../../constants';
6
- export declare const getElementGroupStyles: (direction: SmartLinkDirection, size: SmartLinkSize, align: SmartLinkAlignment, width: SmartLinkWidth) => SerializedStyles;
5
+ import { SmartLinkAlignment, SmartLinkDirection, SmartLinkPosition, SmartLinkSize, SmartLinkWidth } from '../../../../../constants';
6
+ export declare const getElementGroupStyles: (direction: SmartLinkDirection, size: SmartLinkSize, align: SmartLinkAlignment, width: SmartLinkWidth, position: SmartLinkPosition) => SerializedStyles;
7
7
  /**
8
8
  * Creates a group of Action components. Accepts an array of Actions, in addition to some styling
9
9
  * preferences.
@@ -1,5 +1,5 @@
1
1
  import { SerializedStyles } from '@emotion/react';
2
- import { SmartLinkAlignment, SmartLinkDirection, SmartLinkSize, SmartLinkWidth } from '../../../../../constants';
2
+ import { SmartLinkAlignment, SmartLinkDirection, SmartLinkPosition, SmartLinkSize, SmartLinkWidth } from '../../../../../constants';
3
3
  export declare type ElementGroupProps = {
4
4
  align?: SmartLinkAlignment;
5
5
  direction?: SmartLinkDirection;
@@ -7,4 +7,5 @@ export declare type ElementGroupProps = {
7
7
  size?: SmartLinkSize;
8
8
  width?: SmartLinkWidth;
9
9
  testId?: string;
10
+ position?: SmartLinkPosition;
10
11
  };
@@ -168,7 +168,7 @@ export declare type OnActionMenuOpenChangeOptions = {
168
168
  /**
169
169
  * A type that contains all the possible combinations of elements with their corresponding props.
170
170
  */
171
- export declare type ElementItemProps = AttachmentCount | AuthorGroup | ChecklistProgress | CollaboratorGroup | CommentCount | CreatedBy | CreatedOn | DueOn | LatestCommit | LinkIcon | ModifiedBy | ModifiedOn | OwnedBy | Preview | Priority | ProgrammingLanguage | Provider | ReactCount | Snippet | SourceBranch | State | SubscriberCount | TargetBranch | Title | ViewCount | VoteCount;
171
+ export declare type ElementItemProps = AttachmentCount | AuthorGroup | ChecklistProgress | CollaboratorGroup | CommentCount | CreatedBy | CreatedOn | DueOn | LatestCommit | LinkIcon | Location | ModifiedBy | ModifiedOn | OwnedBy | Preview | Priority | ProgrammingLanguage | Provider | ReactCount | Snippet | SourceBranch | State | SubscriberCount | TargetBranch | Title | ViewCount | VoteCount;
172
172
  /**
173
173
  * Represents the props available for an AttachmentCount element.
174
174
  * @see AttachmentCount
@@ -250,6 +250,12 @@ export declare type LatestCommit = {
250
250
  export declare type LinkIcon = {
251
251
  name: ElementName.LinkIcon;
252
252
  };
253
+ /**
254
+ * Represents the props for the Location element.
255
+ */
256
+ export declare type Location = {
257
+ name: ElementName.Location;
258
+ };
253
259
  /**
254
260
  * Represents the props available for an ModifiedBy element.
255
261
  * @see ModifiedBy
@@ -56,6 +56,12 @@ export declare const LatestCommit: import("react").FC<BadgeProps>;
56
56
  * @see Icon
57
57
  */
58
58
  export declare const LinkIcon: import("react").FC<IconProps>;
59
+ /**
60
+ * Creates a Location Link element.
61
+ * This represents the location or container of the resource.
62
+ * @see Link
63
+ */
64
+ export declare const Location: import("react").FC<LinkProps>;
59
65
  /**
60
66
  * Creates a ModifiedBy Text element using the data from ModifiedBy in the Flexible UI Context.
61
67
  * @see Text
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/smart-card",
3
- "version": "25.8.0",
3
+ "version": "25.9.1",
4
4
  "description": "Smart card component",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -33,7 +33,6 @@
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/link-analytics": "^7.0.5",
37
36
  "@atlaskit/link-client-extension": "^0.5.0",
38
37
  "@atlaskit/linking-common": "^2.6.0",
39
38
  "@atlaskit/linking-types": "^1.3.0",
@@ -73,7 +72,7 @@
73
72
  "@atlaskit/css-reset": "^6.4.0",
74
73
  "@atlaskit/docs": "*",
75
74
  "@atlaskit/field-base": "^15.1.0",
76
- "@atlaskit/form": "^8.9.0",
75
+ "@atlaskit/form": "^8.10.0",
77
76
  "@atlaskit/inline-message": "^11.4.0",
78
77
  "@atlaskit/link-test-helpers": "^2.2.0",
79
78
  "@atlaskit/lozenge": "^11.3.0",
package/report.api.md CHANGED
@@ -440,6 +440,7 @@ type ElementItemProps =
440
440
  | DueOn
441
441
  | LatestCommit
442
442
  | LinkIcon
443
+ | Location_2
443
444
  | ModifiedBy
444
445
  | ModifiedOn
445
446
  | OwnedBy
@@ -480,6 +481,8 @@ export enum ElementName {
480
481
  // (undocumented)
481
482
  LinkIcon = 'LinkIcon',
482
483
  // (undocumented)
484
+ Location = 'Location',
485
+ // (undocumented)
483
486
  ModifiedBy = 'ModifiedBy',
484
487
  // (undocumented)
485
488
  ModifiedOn = 'ModifiedOn',
@@ -611,6 +614,11 @@ type LinkIcon = {
611
614
  // @public (undocumented)
612
615
  export const loadingPlaceholderClassName = 'smart-link-loading-placeholder';
613
616
 
617
+ // @public
618
+ type Location_2 = {
619
+ name: ElementName.Location;
620
+ };
621
+
614
622
  // @public (undocumented)
615
623
  export enum MediaPlacement {
616
624
  // (undocumented)
@@ -333,7 +333,7 @@ export type ElementItem = {
333
333
  } & ElementItemProps;
334
334
 
335
335
  // @public
336
- type ElementItemProps = AttachmentCount | AuthorGroup | ChecklistProgress | CollaboratorGroup | CommentCount | CreatedBy | CreatedOn | DueOn | LatestCommit | LinkIcon | ModifiedBy | ModifiedOn | OwnedBy | Preview | Priority | ProgrammingLanguage | Provider_2 | ReactCount | Snippet | SourceBranch | State_2 | SubscriberCount | TargetBranch | Title | ViewCount | VoteCount;
336
+ type ElementItemProps = AttachmentCount | AuthorGroup | ChecklistProgress | CollaboratorGroup | CommentCount | CreatedBy | CreatedOn | DueOn | LatestCommit | LinkIcon | Location_2 | ModifiedBy | ModifiedOn | OwnedBy | Preview | Priority | ProgrammingLanguage | Provider_2 | ReactCount | Snippet | SourceBranch | State_2 | SubscriberCount | TargetBranch | Title | ViewCount | VoteCount;
337
337
 
338
338
  // @public
339
339
  export enum ElementName {
@@ -358,6 +358,8 @@ export enum ElementName {
358
358
  // (undocumented)
359
359
  LinkIcon = "LinkIcon",
360
360
  // (undocumented)
361
+ Location = "Location",
362
+ // (undocumented)
361
363
  ModifiedBy = "ModifiedBy",
362
364
  // (undocumented)
363
365
  ModifiedOn = "ModifiedOn",
@@ -479,6 +481,11 @@ type LinkIcon = {
479
481
  // @public (undocumented)
480
482
  export const loadingPlaceholderClassName = "smart-link-loading-placeholder";
481
483
 
484
+ // @public
485
+ type Location_2 = {
486
+ name: ElementName.Location;
487
+ };
488
+
482
489
  // @public (undocumented)
483
490
  export enum MediaPlacement {
484
491
  // (undocumented)
@@ -1,47 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
- var _typeof = require("@babel/runtime/helpers/typeof");
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports.SmartLinkAnalyticsContext = void 0;
9
- var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
10
- var _react = _interopRequireWildcard(require("react"));
11
- var _analyticsNext = require("@atlaskit/analytics-next");
12
- var _resolvedAttributes = require("@atlaskit/link-analytics/resolved-attributes");
13
- var _flexible = require("../flexible");
14
- var _constants = require("../../constants");
15
- var _store = require("../../state/store");
16
- 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); }
17
- function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
18
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
19
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
20
- var SmartLinkAnalyticsContext = function SmartLinkAnalyticsContext(_ref) {
21
- var children = _ref.children,
22
- url = _ref.url,
23
- appearance = _ref.appearance,
24
- id = _ref.id;
25
- var _useSmartLinkState = (0, _store.useSmartCardState)(url),
26
- details = _useSmartLinkState.details,
27
- status = _useSmartLinkState.status;
28
- var resolvedAttributes = (0, _resolvedAttributes.getResolvedAttributes)({
29
- url: url
30
- }, details, status);
31
- var _getUrlAttributes = (0, _resolvedAttributes.getUrlAttributes)(url),
32
- urlHash = _getUrlAttributes.urlHash;
33
- var isFlexibleUi = (0, _react.useMemo)(function () {
34
- return (0, _flexible.isFlexibleUiCard)(children);
35
- }, [children]);
36
- var display = isFlexibleUi ? _constants.CardDisplay.Flexible : appearance;
37
- return /*#__PURE__*/_react.default.createElement(_analyticsNext.AnalyticsContext, {
38
- data: {
39
- attributes: _objectSpread(_objectSpread({}, resolvedAttributes), {}, {
40
- urlHash: urlHash,
41
- display: display,
42
- id: id
43
- })
44
- }
45
- }, children);
46
- };
47
- exports.SmartLinkAnalyticsContext = SmartLinkAnalyticsContext;
@@ -1,35 +0,0 @@
1
- import React, { useMemo } from 'react';
2
- import { AnalyticsContext } from '@atlaskit/analytics-next';
3
- import { getResolvedAttributes, getUrlAttributes } from '@atlaskit/link-analytics/resolved-attributes';
4
- import { isFlexibleUiCard } from '../flexible';
5
- import { CardDisplay } from '../../constants';
6
- import { useSmartCardState as useSmartLinkState } from '../../state/store';
7
- export const SmartLinkAnalyticsContext = ({
8
- children,
9
- url,
10
- appearance,
11
- id
12
- }) => {
13
- const {
14
- details,
15
- status
16
- } = useSmartLinkState(url);
17
- const resolvedAttributes = getResolvedAttributes({
18
- url
19
- }, details, status);
20
- const {
21
- urlHash
22
- } = getUrlAttributes(url);
23
- const isFlexibleUi = useMemo(() => isFlexibleUiCard(children), [children]);
24
- const display = isFlexibleUi ? CardDisplay.Flexible : appearance;
25
- return /*#__PURE__*/React.createElement(AnalyticsContext, {
26
- data: {
27
- attributes: {
28
- ...resolvedAttributes,
29
- urlHash,
30
- display,
31
- id
32
- }
33
- }
34
- }, children);
35
- };
@@ -1,36 +0,0 @@
1
- import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
3
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
4
- import React, { useMemo } from 'react';
5
- import { AnalyticsContext } from '@atlaskit/analytics-next';
6
- import { getResolvedAttributes, getUrlAttributes } from '@atlaskit/link-analytics/resolved-attributes';
7
- import { isFlexibleUiCard } from '../flexible';
8
- import { CardDisplay } from '../../constants';
9
- import { useSmartCardState as useSmartLinkState } from '../../state/store';
10
- export var SmartLinkAnalyticsContext = function SmartLinkAnalyticsContext(_ref) {
11
- var children = _ref.children,
12
- url = _ref.url,
13
- appearance = _ref.appearance,
14
- id = _ref.id;
15
- var _useSmartLinkState = useSmartLinkState(url),
16
- details = _useSmartLinkState.details,
17
- status = _useSmartLinkState.status;
18
- var resolvedAttributes = getResolvedAttributes({
19
- url: url
20
- }, details, status);
21
- var _getUrlAttributes = getUrlAttributes(url),
22
- urlHash = _getUrlAttributes.urlHash;
23
- var isFlexibleUi = useMemo(function () {
24
- return isFlexibleUiCard(children);
25
- }, [children]);
26
- var display = isFlexibleUi ? CardDisplay.Flexible : appearance;
27
- return /*#__PURE__*/React.createElement(AnalyticsContext, {
28
- data: {
29
- attributes: _objectSpread(_objectSpread({}, resolvedAttributes), {}, {
30
- urlHash: urlHash,
31
- display: display,
32
- id: id
33
- })
34
- }
35
- }, children);
36
- };
@@ -1,9 +0,0 @@
1
- import { FC } from 'react';
2
- import { CardInnerAppearance } from '../../view/Card/types';
3
- declare type SmartLinkAnalyticsContextProps = {
4
- url: string;
5
- appearance: CardInnerAppearance;
6
- id: string | undefined;
7
- };
8
- export declare const SmartLinkAnalyticsContext: FC<SmartLinkAnalyticsContextProps>;
9
- export {};