@atlaskit/mention 22.1.9 → 23.0.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.
Files changed (20) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/afm-cc/tsconfig.json +55 -0
  3. package/dist/cjs/components/Mention/PrimitiveMention.js +12 -52
  4. package/dist/cjs/components/MentionItem/styles.js +3 -3
  5. package/dist/cjs/components/MentionListError/styles.js +1 -1
  6. package/dist/cjs/components/MentionPicker/styles.js +1 -1
  7. package/dist/cjs/util/analytics.js +1 -1
  8. package/dist/es2019/components/Mention/PrimitiveMention.js +13 -53
  9. package/dist/es2019/components/MentionItem/styles.js +3 -3
  10. package/dist/es2019/components/MentionListError/styles.js +2 -3
  11. package/dist/es2019/components/MentionPicker/styles.js +1 -1
  12. package/dist/es2019/util/analytics.js +1 -1
  13. package/dist/esm/components/Mention/PrimitiveMention.js +13 -53
  14. package/dist/esm/components/MentionItem/styles.js +3 -3
  15. package/dist/esm/components/MentionListError/styles.js +1 -1
  16. package/dist/esm/components/MentionPicker/styles.js +1 -1
  17. package/dist/esm/util/analytics.js +1 -1
  18. package/package.json +19 -9
  19. package/_constants/package.json +0 -15
  20. package/tmp/api-report-tmp.d.ts +0 -818
package/CHANGELOG.md CHANGED
@@ -1,5 +1,21 @@
1
1
  # @atlaskit/mention
2
2
 
3
+ ## 23.0.0
4
+
5
+ ### Major Changes
6
+
7
+ - [#65974](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/65974) [`edca08bd6e06`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/edca08bd6e06) - Migrate @atlaskit/mention to use declarative entry points. /\_constants public endpoint has been removed as part of the migration process.
8
+
9
+ ### Patch Changes
10
+
11
+ - [#72162](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/72162) [`dadc682d36ba`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/dadc682d36ba) - Replace hardcoded values with space tokens
12
+
13
+ ## 22.1.10
14
+
15
+ ### Patch Changes
16
+
17
+ - [#57137](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/57137) [`9b9900944973`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/9b9900944973) - Remove legacy theming logic from @atlaskit/date, @atlaskit/mention, @atlaskit/task-decision and @atlaskit/user-picker.
18
+
3
19
  ## 22.1.9
4
20
 
5
21
  ### Patch Changes
package/afm-cc/tsconfig.json ADDED
@@ -0,0 +1,55 @@
1
+ {
2
+ "extends": "../../../../tsconfig.entry-points.confluence.json",
3
+ "compilerOptions": {
4
+ "declaration": true,
5
+ "target": "es5",
6
+ "composite": true,
7
+ "outDir": "../dist",
8
+ "rootDir": "../",
9
+ "baseUrl": "../"
10
+ },
11
+ "include": [
12
+ "../src/**/*.ts",
13
+ "../src/**/*.tsx"
14
+ ],
15
+ "exclude": [
16
+ "../src/**/__tests__/*",
17
+ "../src/**/*.test.*",
18
+ "../src/**/test.*"
19
+ ],
20
+ "references": [
21
+ {
22
+ "path": "../../../analytics/analytics-gas-types/afm-cc/tsconfig.json"
23
+ },
24
+ {
25
+ "path": "../../../analytics/analytics-next/afm-cc/tsconfig.json"
26
+ },
27
+ {
28
+ "path": "../../../design-system/avatar/afm-cc/tsconfig.json"
29
+ },
30
+ {
31
+ "path": "../../../design-system/focus-ring/afm-cc/tsconfig.json"
32
+ },
33
+ {
34
+ "path": "../../../design-system/icon/afm-cc/tsconfig.json"
35
+ },
36
+ {
37
+ "path": "../../../design-system/lozenge/afm-cc/tsconfig.json"
38
+ },
39
+ {
40
+ "path": "../../../design-system/theme/afm-cc/tsconfig.json"
41
+ },
42
+ {
43
+ "path": "../../../design-system/tokens/afm-cc/tsconfig.json"
44
+ },
45
+ {
46
+ "path": "../../../design-system/tooltip/afm-cc/tsconfig.json"
47
+ },
48
+ {
49
+ "path": "../../../data/ufo-external/afm-cc/tsconfig.json"
50
+ },
51
+ {
52
+ "path": "../../util-service-support/afm-cc/tsconfig.json"
53
+ }
54
+ ]
55
+ }
package/dist/cjs/components/Mention/PrimitiveMention.js CHANGED
@@ -10,7 +10,6 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
10
10
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
11
11
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
12
12
  var _react = require("@emotion/react");
13
- var _components = require("@atlaskit/theme/components");
14
13
  var _colors = require("@atlaskit/theme/colors");
15
14
  var _types = require("../../types");
16
15
  var _react2 = require("react");
@@ -18,82 +17,43 @@ var _excluded = ["mentionType"];
18
17
  var _mentionStyle, _templateObject;
19
18
  /** @jsx jsx */
20
19
  var mentionStyle = (_mentionStyle = {}, (0, _defineProperty2.default)(_mentionStyle, _types.MentionType.SELF, {
21
- background: (0, _components.themed)({
22
- light: "var(--ds-background-brand-bold, ".concat(_colors.B400, ")"),
23
- dark: "var(--ds-background-brand-bold, ".concat(_colors.B200, ")")
24
- }),
20
+ background: "var(--ds-background-brand-bold, ".concat(_colors.B400, ")"),
25
21
  borderColor: 'transparent',
26
- text: (0, _components.themed)({
27
- light: "var(--ds-text-inverse, ".concat(_colors.N20, ")"),
28
- dark: "var(--ds-text-inverse, ".concat(_colors.DN30, ")")
29
- }),
30
- hoveredBackground: (0, _components.themed)({
31
- light: "var(--ds-background-brand-bold-hovered, ".concat(_colors.B400, ")"),
32
- dark: "var(--ds-background-brand-bold-hovered, ".concat(_colors.B200, ")")
33
- }),
34
- pressedBackground: (0, _components.themed)({
35
- light: "var(--ds-background-brand-bold-pressed, ".concat(_colors.B400, ")"),
36
- dark: "var(--ds-background-brand-bold-pressed, ".concat(_colors.B200, ")")
37
- })
22
+ text: "var(--ds-text-inverse, ".concat(_colors.N20, ")"),
23
+ hoveredBackground: "var(--ds-background-brand-bold-hovered, ".concat(_colors.B400, ")"),
24
+ pressedBackground: "var(--ds-background-brand-bold-pressed, ".concat(_colors.B400, ")")
38
25
  }), (0, _defineProperty2.default)(_mentionStyle, _types.MentionType.RESTRICTED, {
39
26
  background: 'transparent',
40
- borderColor: (0, _components.themed)({
41
- light: "var(--ds-border-bold, ".concat(_colors.N500, ")"),
42
- dark: "var(--ds-border-bold, ".concat(_colors.DN80, ")")
43
- }),
44
- text: (0, _components.themed)({
45
- light: "var(--ds-text, ".concat(_colors.N500, ")"),
46
- dark: "var(--ds-text, ".concat(_colors.DN100, ")")
47
- }),
27
+ borderColor: "var(--ds-border-bold, ".concat(_colors.N500, ")"),
28
+ text: "var(--ds-text, ".concat(_colors.N500, ")"),
48
29
  hoveredBackground: 'transparent',
49
30
  pressedBackground: 'transparent'
50
31
  }), (0, _defineProperty2.default)(_mentionStyle, _types.MentionType.DEFAULT, {
51
- background: (0, _components.themed)({
52
- light: "var(--ds-background-neutral, ".concat(_colors.N30A, ")"),
53
- dark: "var(--ds-background-neutral, ".concat(_colors.DN80, ")")
54
- }),
32
+ background: "var(--ds-background-neutral, ".concat(_colors.N30A, ")"),
55
33
  borderColor: 'transparent',
56
- text: (0, _components.themed)({
57
- light: "var(--ds-text-subtle, ".concat(_colors.N500, ")"),
58
- dark: "var(--ds-text-subtle, ".concat(_colors.DN800, ")")
59
- }),
60
- hoveredBackground: (0, _components.themed)({
61
- light: "var(--ds-background-neutral-hovered, ".concat(_colors.N30A, ")"),
62
- dark: "var(--ds-background-neutral-hovered, ".concat(_colors.DN80, ")")
63
- }),
64
- pressedBackground: (0, _components.themed)({
65
- light: "var(--ds-background-neutral-pressed, ".concat(_colors.N30A, ")"),
66
- dark: "var(--ds-background-neutral-pressed, ".concat(_colors.DN80, ")")
67
- })
34
+ text: "var(--ds-text-subtle, ".concat(_colors.N500, ")"),
35
+ hoveredBackground: "var(--ds-background-neutral-hovered, ".concat(_colors.N30A, ")"),
36
+ pressedBackground: "var(--ds-background-neutral-pressed, ".concat(_colors.N30A, ")")
68
37
  }), _mentionStyle);
69
38
  var getStyle = function getStyle(_ref, property) {
70
- var mentionType = _ref.mentionType,
71
- theme = _ref.theme;
39
+ var mentionType = _ref.mentionType;
72
40
  var obj = mentionStyle[mentionType][property];
73
- return typeof obj === 'string' ? obj : obj({
74
- theme: theme
75
- });
41
+ return typeof obj === 'string' ? obj : obj;
76
42
  };
77
43
  var PrimitiveMention = /*#__PURE__*/(0, _react2.forwardRef)(function (_ref2, ref) {
78
44
  var mentionType = _ref2.mentionType,
79
45
  other = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
80
- var theme = (0, _components.useGlobalTheme)();
81
46
  return (0, _react.jsx)("span", (0, _extends2.default)({
82
47
  ref: ref,
83
48
  css: (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: inline;\n border: 1px solid ", ";\n background: ", ";\n color: ", ";\n border-radius: 20px;\n cursor: pointer;\n padding: 0 0.3em 2px 0.23em;\n line-height: 1.714;\n font-size: 1em;\n font-weight: normal;\n word-break: break-word;\n &:hover {\n background: ", ";\n }\n &:active {\n background: ", ";\n }\n "])), getStyle({
84
- theme: theme,
85
49
  mentionType: mentionType
86
50
  }, 'borderColor'), getStyle({
87
- theme: theme,
88
51
  mentionType: mentionType
89
52
  }, 'background'), getStyle({
90
- theme: theme,
91
53
  mentionType: mentionType
92
54
  }, 'text'), getStyle({
93
- theme: theme,
94
55
  mentionType: mentionType
95
56
  }, 'hoveredBackground'), getStyle({
96
- theme: theme,
97
57
  mentionType: mentionType
98
58
  }, 'pressedBackground'))
99
59
  }, other));
package/dist/cjs/components/MentionItem/styles.js CHANGED
@@ -9,11 +9,11 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
9
9
  var _styled = _interopRequireDefault(require("@emotion/styled"));
10
10
  var _colors = require("@atlaskit/theme/colors");
11
11
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
12
- var RowStyle = exports.RowStyle = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n align-items: center;\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n overflow: hidden;\n padding: ", " 14px;\n text-overflow: ellipsis;\n vertical-align: middle;\n"])), "var(--ds-space-075, 6px)");
12
+ var RowStyle = exports.RowStyle = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n align-items: center;\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n overflow: hidden;\n padding: ", " ", ";\n text-overflow: ellipsis;\n vertical-align: middle;\n"])), "var(--ds-space-075, 6px)", "var(--ds-space-150, 12px)");
13
13
  var AvatarStyle = exports.AvatarStyle = _styled.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n flex: initial;\n opacity: ", ";\n"])), function (props) {
14
14
  return props.restricted ? '0.5' : 'inherit';
15
15
  });
16
- var NameSectionStyle = exports.NameSectionStyle = _styled.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n flex: 1;\n min-width: 0;\n margin-left: 14px;\n opacity: ", ";\n"])), function (props) {
16
+ var NameSectionStyle = exports.NameSectionStyle = _styled.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n flex: 1;\n min-width: 0;\n margin-left: ", ";\n opacity: ", ";\n"])), "var(--ds-space-150, 12px)", function (props) {
17
17
  return props.restricted ? '0.5' : 'inherit';
18
18
  });
19
19
  var FullNameStyle = exports.FullNameStyle = _styled.default.span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n display: block;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: ", ";\n"])), "var(--ds-text, ".concat(_colors.N900, ")"));
@@ -25,4 +25,4 @@ var MENTION_ITEM_HEIGHT = exports.MENTION_ITEM_HEIGHT = 48;
25
25
  var MentionItemStyle = exports.MentionItemStyle = _styled.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n background-color: ", ";\n display: block;\n overflow: hidden;\n list-style-type: none;\n height: ", "px;\n line-height: 1.2;\n cursor: pointer;\n"])), function (props) {
26
26
  return props.selected ? "var(--ds-background-selected, ".concat(_colors.N30, ")") : 'transparent';
27
27
  }, MENTION_ITEM_HEIGHT);
28
- var AccessSectionStyle = exports.AccessSectionStyle = _styled.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n padding-left: 5px;\n color: ", ";\n"])), "var(--ds-text-subtle, ".concat(_colors.N500, ")"));
28
+ var AccessSectionStyle = exports.AccessSectionStyle = _styled.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n padding-left: ", ";\n color: ", ";\n"])), "var(--ds-space-050, 4px)", "var(--ds-text-subtle, ".concat(_colors.N500, ")"));
package/dist/cjs/components/MentionListError/styles.js CHANGED
@@ -12,7 +12,7 @@ var _colors = require("@atlaskit/theme/colors");
12
12
  var _typography = require("@atlaskit/theme/typography");
13
13
  var _templateObject, _templateObject2, _templateObject3, _templateObject4;
14
14
  var MentionListErrorStyle = exports.MentionListErrorStyle = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n align-items: center;\n display: flex;\n justify-content: center;\n flex-direction: column;\n background-color: ", ";\n color: ", ";\n border: 1px solid ", ";\n border-radius: ", "px;\n"])), "var(--ds-surface-overlay, white)", "var(--ds-text-subtle, ".concat(_colors.N500, ")"), "var(--ds-surface-overlay, #fff)", (0, _constants.borderRadius)());
15
- var GenericErrorVisualStyle = exports.GenericErrorVisualStyle = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n height: 108px;\n margin-bottom: ", ";\n margin-top: 36px;\n width: 83px;\n"])), "var(--ds-space-100, 8px)");
15
+ var GenericErrorVisualStyle = exports.GenericErrorVisualStyle = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n margin-bottom: ", ";\n margin-top: ", ";\n width: ", ";\n"])), "var(--ds-space-100, 8px)", "var(--ds-space-400, 32px)", "var(--ds-space-1000, 80px)");
16
16
 
17
17
  // TODO: Figure out why the themed css function is causing type errors when passed prop children
18
18
  var MentionListErrorHeadlineStyle = exports.MentionListErrorHeadlineStyle = _styled.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n ", ";\n margin-bottom: ", ";\n"])), (0, _typography.h400)(), "var(--ds-space-100, 8px)");
package/dist/cjs/components/MentionPicker/styles.js CHANGED
@@ -13,4 +13,4 @@ var _templateObject, _templateObject2;
13
13
  var MentionPickerStyle = exports.MentionPickerStyle = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: ", ";\n"])), function (props) {
14
14
  return props.visible ? 'block' : 'none';
15
15
  });
16
- var MentionPickerInfoStyle = exports.MentionPickerInfoStyle = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n background: ", ";\n color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n box-shadow: ", ";\n display: block;\n width: ", ";\n white-space: nowrap;\n\n & {\n p {\n margin: 0;\n overflow: hidden;\n padding: 9px;\n text-overflow: ellipsis;\n }\n }\n"])), "var(--ds-surface, #fff)", "var(--ds-text-subtlest, ".concat(_colors.N100, ")"), _sharedStyles.noDialogContainerBorderColor, _sharedStyles.noDialogContainerBorderRadius, _sharedStyles.noDialogContainerBoxShadow, _sharedStyles.mentionListWidth);
16
+ var MentionPickerInfoStyle = exports.MentionPickerInfoStyle = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n background: ", ";\n color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n box-shadow: ", ";\n display: block;\n width: ", ";\n white-space: nowrap;\n\n & {\n p {\n margin: 0;\n overflow: hidden;\n padding: ", ";\n text-overflow: ellipsis;\n }\n }\n"])), "var(--ds-surface, #fff)", "var(--ds-text-subtlest, ".concat(_colors.N100, ")"), _sharedStyles.noDialogContainerBorderColor, _sharedStyles.noDialogContainerBorderRadius, _sharedStyles.noDialogContainerBoxShadow, _sharedStyles.mentionListWidth, "var(--ds-space-100, 8px)");
package/dist/cjs/util/analytics.js CHANGED
@@ -12,7 +12,7 @@ var _types = require("../types");
12
12
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
13
13
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
14
14
  var packageName = "@atlaskit/mention";
15
- var packageVersion = "22.1.9";
15
+ var packageVersion = "23.0.0";
16
16
  var SLI_EVENT_TYPE = exports.SLI_EVENT_TYPE = 'sli';
17
17
  var SMART_EVENT_TYPE = exports.SMART_EVENT_TYPE = 'smart';
18
18
  var SliNames = exports.SliNames = /*#__PURE__*/function (SliNames) {
package/dist/es2019/components/Mention/PrimitiveMention.js CHANGED
@@ -1,91 +1,53 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
2
  /** @jsx jsx */
3
3
  import { jsx, css } from '@emotion/react';
4
- import { themed, useGlobalTheme } from '@atlaskit/theme/components';
5
- import { B400, B200, N500, DN800, DN100, DN80, N30A, DN30, N20 } from '@atlaskit/theme/colors';
4
+ import { B400, N500, N30A, N20 } from '@atlaskit/theme/colors';
6
5
  import { MentionType } from '../../types';
7
6
  import { forwardRef } from 'react';
8
7
  const mentionStyle = {
9
8
  [MentionType.SELF]: {
10
- background: themed({
11
- light: `var(--ds-background-brand-bold, ${B400})`,
12
- dark: `var(--ds-background-brand-bold, ${B200})`
13
- }),
9
+ background: `var(--ds-background-brand-bold, ${B400})`,
14
10
  borderColor: 'transparent',
15
- text: themed({
16
- light: `var(--ds-text-inverse, ${N20})`,
17
- dark: `var(--ds-text-inverse, ${DN30})`
18
- }),
19
- hoveredBackground: themed({
20
- light: `var(--ds-background-brand-bold-hovered, ${B400})`,
21
- dark: `var(--ds-background-brand-bold-hovered, ${B200})`
22
- }),
23
- pressedBackground: themed({
24
- light: `var(--ds-background-brand-bold-pressed, ${B400})`,
25
- dark: `var(--ds-background-brand-bold-pressed, ${B200})`
26
- })
11
+ text: `var(--ds-text-inverse, ${N20})`,
12
+ hoveredBackground: `var(--ds-background-brand-bold-hovered, ${B400})`,
13
+ pressedBackground: `var(--ds-background-brand-bold-pressed, ${B400})`
27
14
  },
28
15
  [MentionType.RESTRICTED]: {
29
16
  background: 'transparent',
30
- borderColor: themed({
31
- light: `var(--ds-border-bold, ${N500})`,
32
- dark: `var(--ds-border-bold, ${DN80})`
33
- }),
34
- text: themed({
35
- light: `var(--ds-text, ${N500})`,
36
- dark: `var(--ds-text, ${DN100})`
37
- }),
17
+ borderColor: `var(--ds-border-bold, ${N500})`,
18
+ text: `var(--ds-text, ${N500})`,
38
19
  hoveredBackground: 'transparent',
39
20
  pressedBackground: 'transparent'
40
21
  },
41
22
  [MentionType.DEFAULT]: {
42
- background: themed({
43
- light: `var(--ds-background-neutral, ${N30A})`,
44
- dark: `var(--ds-background-neutral, ${DN80})`
45
- }),
23
+ background: `var(--ds-background-neutral, ${N30A})`,
46
24
  borderColor: 'transparent',
47
- text: themed({
48
- light: `var(--ds-text-subtle, ${N500})`,
49
- dark: `var(--ds-text-subtle, ${DN800})`
50
- }),
51
- hoveredBackground: themed({
52
- light: `var(--ds-background-neutral-hovered, ${N30A})`,
53
- dark: `var(--ds-background-neutral-hovered, ${DN80})`
54
- }),
55
- pressedBackground: themed({
56
- light: `var(--ds-background-neutral-pressed, ${N30A})`,
57
- dark: `var(--ds-background-neutral-pressed, ${DN80})`
58
- })
25
+ text: `var(--ds-text-subtle, ${N500})`,
26
+ hoveredBackground: `var(--ds-background-neutral-hovered, ${N30A})`,
27
+ pressedBackground: `var(--ds-background-neutral-pressed, ${N30A})`
59
28
  }
60
29
  };
61
30
  const getStyle = ({
62
- mentionType,
63
- theme
31
+ mentionType
64
32
  }, property) => {
65
33
  const obj = mentionStyle[mentionType][property];
66
- return typeof obj === 'string' ? obj : obj({
67
- theme
68
- });
34
+ return typeof obj === 'string' ? obj : obj;
69
35
  };
70
36
  const PrimitiveMention = /*#__PURE__*/forwardRef(({
71
37
  mentionType,
72
38
  ...other
73
39
  }, ref) => {
74
- const theme = useGlobalTheme();
75
40
  return jsx("span", _extends({
76
41
  ref: ref,
77
42
  css: css`
78
43
  display: inline;
79
44
  border: 1px solid ${getStyle({
80
- theme,
81
45
  mentionType
82
46
  }, 'borderColor')};
83
47
  background: ${getStyle({
84
- theme,
85
48
  mentionType
86
49
  }, 'background')};
87
50
  color: ${getStyle({
88
- theme,
89
51
  mentionType
90
52
  }, 'text')};
91
53
  border-radius: 20px;
@@ -97,13 +59,11 @@ const PrimitiveMention = /*#__PURE__*/forwardRef(({
97
59
  word-break: break-word;
98
60
  &:hover {
99
61
  background: ${getStyle({
100
- theme,
101
62
  mentionType
102
63
  }, 'hoveredBackground')};
103
64
  }
104
65
  &:active {
105
66
  background: ${getStyle({
106
- theme,
107
67
  mentionType
108
68
  }, 'pressedBackground')};
109
69
  }
package/dist/es2019/components/MentionItem/styles.js CHANGED
@@ -6,7 +6,7 @@ export const RowStyle = styled.div`
6
6
  flex-direction: row;
7
7
  flex-wrap: wrap;
8
8
  overflow: hidden;
9
- padding: ${"var(--ds-space-075, 6px)"} 14px;
9
+ padding: ${"var(--ds-space-075, 6px)"} ${"var(--ds-space-150, 12px)"};
10
10
  text-overflow: ellipsis;
11
11
  vertical-align: middle;
12
12
  `;
@@ -18,7 +18,7 @@ export const AvatarStyle = styled.span`
18
18
  export const NameSectionStyle = styled.div`
19
19
  flex: 1;
20
20
  min-width: 0;
21
- margin-left: 14px;
21
+ margin-left: ${"var(--ds-space-150, 12px)"};
22
22
  opacity: ${props => props.restricted ? '0.5' : 'inherit'};
23
23
  `;
24
24
  export const FullNameStyle = styled.span`
@@ -58,6 +58,6 @@ export const MentionItemStyle = styled.div`
58
58
  cursor: pointer;
59
59
  `;
60
60
  export const AccessSectionStyle = styled.div`
61
- padding-left: 5px;
61
+ padding-left: ${"var(--ds-space-050, 4px)"};
62
62
  color: ${`var(--ds-text-subtle, ${N500})`};
63
63
  `;
package/dist/es2019/components/MentionListError/styles.js CHANGED
@@ -13,10 +13,9 @@ export const MentionListErrorStyle = styled.div`
13
13
  border-radius: ${borderRadius()}px;
14
14
  `;
15
15
  export const GenericErrorVisualStyle = styled.div`
16
- height: 108px;
17
16
  margin-bottom: ${"var(--ds-space-100, 8px)"};
18
- margin-top: 36px;
19
- width: 83px;
17
+ margin-top: ${"var(--ds-space-400, 32px)"};
18
+ width: ${"var(--ds-space-1000, 80px)"};
20
19
  `;
21
20
 
22
21
  // TODO: Figure out why the themed css function is causing type errors when passed prop children
package/dist/es2019/components/MentionPicker/styles.js CHANGED
@@ -18,7 +18,7 @@ export const MentionPickerInfoStyle = styled.div`
18
18
  p {
19
19
  margin: 0;
20
20
  overflow: hidden;
21
- padding: 9px;
21
+ padding: ${"var(--ds-space-100, 8px)"};
22
22
  text-overflow: ellipsis;
23
23
  }
24
24
  }
package/dist/es2019/util/analytics.js CHANGED
@@ -2,7 +2,7 @@ import { OPERATIONAL_EVENT_TYPE, UI_EVENT_TYPE } from '@atlaskit/analytics-gas-t
2
2
  import { ELEMENTS_CHANNEL } from '../_constants';
3
3
  import { isSpecialMentionText } from '../types';
4
4
  const packageName = "@atlaskit/mention";
5
- const packageVersion = "22.1.9";
5
+ const packageVersion = "23.0.0";
6
6
  export const SLI_EVENT_TYPE = 'sli';
7
7
  export const SMART_EVENT_TYPE = 'smart';
8
8
  export let SliNames = /*#__PURE__*/function (SliNames) {
package/dist/esm/components/Mention/PrimitiveMention.js CHANGED
@@ -6,87 +6,47 @@ var _excluded = ["mentionType"];
6
6
  var _mentionStyle, _templateObject;
7
7
  /** @jsx jsx */
8
8
  import { jsx, css } from '@emotion/react';
9
- import { themed, useGlobalTheme } from '@atlaskit/theme/components';
10
- import { B400, B200, N500, DN800, DN100, DN80, N30A, DN30, N20 } from '@atlaskit/theme/colors';
9
+ import { B400, N500, N30A, N20 } from '@atlaskit/theme/colors';
11
10
  import { MentionType } from '../../types';
12
11
  import { forwardRef } from 'react';
13
12
  var mentionStyle = (_mentionStyle = {}, _defineProperty(_mentionStyle, MentionType.SELF, {
14
- background: themed({
15
- light: "var(--ds-background-brand-bold, ".concat(B400, ")"),
16
- dark: "var(--ds-background-brand-bold, ".concat(B200, ")")
17
- }),
13
+ background: "var(--ds-background-brand-bold, ".concat(B400, ")"),
18
14
  borderColor: 'transparent',
19
- text: themed({
20
- light: "var(--ds-text-inverse, ".concat(N20, ")"),
21
- dark: "var(--ds-text-inverse, ".concat(DN30, ")")
22
- }),
23
- hoveredBackground: themed({
24
- light: "var(--ds-background-brand-bold-hovered, ".concat(B400, ")"),
25
- dark: "var(--ds-background-brand-bold-hovered, ".concat(B200, ")")
26
- }),
27
- pressedBackground: themed({
28
- light: "var(--ds-background-brand-bold-pressed, ".concat(B400, ")"),
29
- dark: "var(--ds-background-brand-bold-pressed, ".concat(B200, ")")
30
- })
15
+ text: "var(--ds-text-inverse, ".concat(N20, ")"),
16
+ hoveredBackground: "var(--ds-background-brand-bold-hovered, ".concat(B400, ")"),
17
+ pressedBackground: "var(--ds-background-brand-bold-pressed, ".concat(B400, ")")
31
18
  }), _defineProperty(_mentionStyle, MentionType.RESTRICTED, {
32
19
  background: 'transparent',
33
- borderColor: themed({
34
- light: "var(--ds-border-bold, ".concat(N500, ")"),
35
- dark: "var(--ds-border-bold, ".concat(DN80, ")")
36
- }),
37
- text: themed({
38
- light: "var(--ds-text, ".concat(N500, ")"),
39
- dark: "var(--ds-text, ".concat(DN100, ")")
40
- }),
20
+ borderColor: "var(--ds-border-bold, ".concat(N500, ")"),
21
+ text: "var(--ds-text, ".concat(N500, ")"),
41
22
  hoveredBackground: 'transparent',
42
23
  pressedBackground: 'transparent'
43
24
  }), _defineProperty(_mentionStyle, MentionType.DEFAULT, {
44
- background: themed({
45
- light: "var(--ds-background-neutral, ".concat(N30A, ")"),
46
- dark: "var(--ds-background-neutral, ".concat(DN80, ")")
47
- }),
25
+ background: "var(--ds-background-neutral, ".concat(N30A, ")"),
48
26
  borderColor: 'transparent',
49
- text: themed({
50
- light: "var(--ds-text-subtle, ".concat(N500, ")"),
51
- dark: "var(--ds-text-subtle, ".concat(DN800, ")")
52
- }),
53
- hoveredBackground: themed({
54
- light: "var(--ds-background-neutral-hovered, ".concat(N30A, ")"),
55
- dark: "var(--ds-background-neutral-hovered, ".concat(DN80, ")")
56
- }),
57
- pressedBackground: themed({
58
- light: "var(--ds-background-neutral-pressed, ".concat(N30A, ")"),
59
- dark: "var(--ds-background-neutral-pressed, ".concat(DN80, ")")
60
- })
27
+ text: "var(--ds-text-subtle, ".concat(N500, ")"),
28
+ hoveredBackground: "var(--ds-background-neutral-hovered, ".concat(N30A, ")"),
29
+ pressedBackground: "var(--ds-background-neutral-pressed, ".concat(N30A, ")")
61
30
  }), _mentionStyle);
62
31
  var getStyle = function getStyle(_ref, property) {
63
- var mentionType = _ref.mentionType,
64
- theme = _ref.theme;
32
+ var mentionType = _ref.mentionType;
65
33
  var obj = mentionStyle[mentionType][property];
66
- return typeof obj === 'string' ? obj : obj({
67
- theme: theme
68
- });
34
+ return typeof obj === 'string' ? obj : obj;
69
35
  };
70
36
  var PrimitiveMention = /*#__PURE__*/forwardRef(function (_ref2, ref) {
71
37
  var mentionType = _ref2.mentionType,
72
38
  other = _objectWithoutProperties(_ref2, _excluded);
73
- var theme = useGlobalTheme();
74
39
  return jsx("span", _extends({
75
40
  ref: ref,
76
41
  css: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: inline;\n border: 1px solid ", ";\n background: ", ";\n color: ", ";\n border-radius: 20px;\n cursor: pointer;\n padding: 0 0.3em 2px 0.23em;\n line-height: 1.714;\n font-size: 1em;\n font-weight: normal;\n word-break: break-word;\n &:hover {\n background: ", ";\n }\n &:active {\n background: ", ";\n }\n "])), getStyle({
77
- theme: theme,
78
42
  mentionType: mentionType
79
43
  }, 'borderColor'), getStyle({
80
- theme: theme,
81
44
  mentionType: mentionType
82
45
  }, 'background'), getStyle({
83
- theme: theme,
84
46
  mentionType: mentionType
85
47
  }, 'text'), getStyle({
86
- theme: theme,
87
48
  mentionType: mentionType
88
49
  }, 'hoveredBackground'), getStyle({
89
- theme: theme,
90
50
  mentionType: mentionType
91
51
  }, 'pressedBackground'))
92
52
  }, other));
package/dist/esm/components/MentionItem/styles.js CHANGED
@@ -2,11 +2,11 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
2
2
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
3
3
  import styled from '@emotion/styled';
4
4
  import { N900, N100, N30, N500 } from '@atlaskit/theme/colors';
5
- export var RowStyle = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n align-items: center;\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n overflow: hidden;\n padding: ", " 14px;\n text-overflow: ellipsis;\n vertical-align: middle;\n"])), "var(--ds-space-075, 6px)");
5
+ export var RowStyle = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n align-items: center;\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n overflow: hidden;\n padding: ", " ", ";\n text-overflow: ellipsis;\n vertical-align: middle;\n"])), "var(--ds-space-075, 6px)", "var(--ds-space-150, 12px)");
6
6
  export var AvatarStyle = styled.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n position: relative;\n flex: initial;\n opacity: ", ";\n"])), function (props) {
7
7
  return props.restricted ? '0.5' : 'inherit';
8
8
  });
9
- export var NameSectionStyle = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n flex: 1;\n min-width: 0;\n margin-left: 14px;\n opacity: ", ";\n"])), function (props) {
9
+ export var NameSectionStyle = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n flex: 1;\n min-width: 0;\n margin-left: ", ";\n opacity: ", ";\n"])), "var(--ds-space-150, 12px)", function (props) {
10
10
  return props.restricted ? '0.5' : 'inherit';
11
11
  });
12
12
  export var FullNameStyle = styled.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n display: block;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: ", ";\n"])), "var(--ds-text, ".concat(N900, ")"));
@@ -18,4 +18,4 @@ export var MENTION_ITEM_HEIGHT = 48;
18
18
  export var MentionItemStyle = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n background-color: ", ";\n display: block;\n overflow: hidden;\n list-style-type: none;\n height: ", "px;\n line-height: 1.2;\n cursor: pointer;\n"])), function (props) {
19
19
  return props.selected ? "var(--ds-background-selected, ".concat(N30, ")") : 'transparent';
20
20
  }, MENTION_ITEM_HEIGHT);
21
- export var AccessSectionStyle = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n padding-left: 5px;\n color: ", ";\n"])), "var(--ds-text-subtle, ".concat(N500, ")"));
21
+ export var AccessSectionStyle = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n padding-left: ", ";\n color: ", ";\n"])), "var(--ds-space-050, 4px)", "var(--ds-text-subtle, ".concat(N500, ")"));
package/dist/esm/components/MentionListError/styles.js CHANGED
@@ -5,7 +5,7 @@ import { borderRadius } from '@atlaskit/theme/constants';
5
5
  import { N500 } from '@atlaskit/theme/colors';
6
6
  import { h400 } from '@atlaskit/theme/typography';
7
7
  export var MentionListErrorStyle = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n align-items: center;\n display: flex;\n justify-content: center;\n flex-direction: column;\n background-color: ", ";\n color: ", ";\n border: 1px solid ", ";\n border-radius: ", "px;\n"])), "var(--ds-surface-overlay, white)", "var(--ds-text-subtle, ".concat(N500, ")"), "var(--ds-surface-overlay, #fff)", borderRadius());
8
- export var GenericErrorVisualStyle = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n height: 108px;\n margin-bottom: ", ";\n margin-top: 36px;\n width: 83px;\n"])), "var(--ds-space-100, 8px)");
8
+ export var GenericErrorVisualStyle = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n margin-bottom: ", ";\n margin-top: ", ";\n width: ", ";\n"])), "var(--ds-space-100, 8px)", "var(--ds-space-400, 32px)", "var(--ds-space-1000, 80px)");
9
9
 
10
10
  // TODO: Figure out why the themed css function is causing type errors when passed prop children
11
11
  export var MentionListErrorHeadlineStyle = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n ", ";\n margin-bottom: ", ";\n"])), h400(), "var(--ds-space-100, 8px)");
package/dist/esm/components/MentionPicker/styles.js CHANGED
@@ -6,4 +6,4 @@ import { mentionListWidth, noDialogContainerBorderColor, noDialogContainerBorder
6
6
  export var MentionPickerStyle = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: ", ";\n"])), function (props) {
7
7
  return props.visible ? 'block' : 'none';
8
8
  });
9
- export var MentionPickerInfoStyle = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n background: ", ";\n color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n box-shadow: ", ";\n display: block;\n width: ", ";\n white-space: nowrap;\n\n & {\n p {\n margin: 0;\n overflow: hidden;\n padding: 9px;\n text-overflow: ellipsis;\n }\n }\n"])), "var(--ds-surface, #fff)", "var(--ds-text-subtlest, ".concat(N100, ")"), noDialogContainerBorderColor, noDialogContainerBorderRadius, noDialogContainerBoxShadow, mentionListWidth);
9
+ export var MentionPickerInfoStyle = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n background: ", ";\n color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n box-shadow: ", ";\n display: block;\n width: ", ";\n white-space: nowrap;\n\n & {\n p {\n margin: 0;\n overflow: hidden;\n padding: ", ";\n text-overflow: ellipsis;\n }\n }\n"])), "var(--ds-surface, #fff)", "var(--ds-text-subtlest, ".concat(N100, ")"), noDialogContainerBorderColor, noDialogContainerBorderRadius, noDialogContainerBoxShadow, mentionListWidth, "var(--ds-space-100, 8px)");
package/dist/esm/util/analytics.js CHANGED
@@ -5,7 +5,7 @@ import { OPERATIONAL_EVENT_TYPE, UI_EVENT_TYPE } from '@atlaskit/analytics-gas-t
5
5
  import { ELEMENTS_CHANNEL } from '../_constants';
6
6
  import { isSpecialMentionText } from '../types';
7
7
  var packageName = "@atlaskit/mention";
8
- var packageVersion = "22.1.9";
8
+ var packageVersion = "23.0.0";
9
9
  export var SLI_EVENT_TYPE = 'sli';
10
10
  export var SMART_EVENT_TYPE = 'smart';
11
11
  export var SliNames = /*#__PURE__*/function (SliNames) {
package/package.json CHANGED
@@ -1,11 +1,11 @@
1
1
  {
2
2
  "name": "@atlaskit/mention",
3
- "version": "22.1.9",
3
+ "version": "23.0.0",
4
4
  "description": "A React component used to display user profiles in a list for 'Mention' functionality",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
7
7
  },
8
- "repository": "https://bitbucket.org/atlassian/atlassian-frontend",
8
+ "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
9
9
  "author": "Atlassian Pty Ltd",
10
10
  "license": "Apache-2.0",
11
11
  "main": "dist/cjs/index.js",
@@ -24,7 +24,6 @@
24
24
  "atlaskit:src": "src/index.ts",
25
25
  "atlassian": {
26
26
  "team": "Search Platform: Search Experience",
27
- "deprecatedAutoEntryPoints": true,
28
27
  "releaseModel": "continuous",
29
28
  "productPushConsumption": [
30
29
  "jira"
@@ -38,14 +37,14 @@
38
37
  },
39
38
  "dependencies": {
40
39
  "@atlaskit/analytics-gas-types": "^5.1.0",
41
- "@atlaskit/analytics-next": "^9.1.0",
40
+ "@atlaskit/analytics-next": "^9.2.0",
42
41
  "@atlaskit/avatar": "^21.4.0",
43
42
  "@atlaskit/focus-ring": "^1.3.0",
44
43
  "@atlaskit/icon": "^22.0.0",
45
- "@atlaskit/lozenge": "^11.4.0",
44
+ "@atlaskit/lozenge": "^11.6.0",
46
45
  "@atlaskit/theme": "^12.6.0",
47
- "@atlaskit/tokens": "^1.28.0",
48
- "@atlaskit/tooltip": "^18.0.0",
46
+ "@atlaskit/tokens": "^1.37.0",
47
+ "@atlaskit/tooltip": "^18.1.0",
49
48
  "@atlaskit/ufo": "^0.2.0",
50
49
  "@atlaskit/util-service-support": "^6.2.0",
51
50
  "@babel/runtime": "^7.0.0",
@@ -92,5 +91,16 @@
92
91
  ]
93
92
  }
94
93
  },
95
- "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
96
- }
94
+ "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1",
95
+ "af:exports": {
96
+ ".": "./src/index.ts",
97
+ "./element": "./src/element.ts",
98
+ "./i18n": "./src/i18n.ts",
99
+ "./item": "./src/item.ts",
100
+ "./resource": "./src/resource.ts",
101
+ "./shared-styles": "./src/shared-styles.ts",
102
+ "./team-resource": "./src/team-resource.ts",
103
+ "./typeahead": "./src/typeahead.ts",
104
+ "./types": "./src/types.ts"
105
+ }
106
+ }