@atlaskit/mention 22.1.10 → 23.0.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/mention
 
+## 23.0.0
+
+### Major Changes
+
+- [#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.
+
+### Patch Changes
+
+- [#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
+
 ## 22.1.10
 
 ### Patch Changes

package/dist/cjs/components/MentionItem/styles.js

@@ -9,11 +9,11 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _colors = require("@atlaskit/theme/colors");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
-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)");
+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)");
 var AvatarStyle = exports.AvatarStyle = _styled.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  flex: initial;\n  opacity: ", ";\n"])), function (props) {
   return props.restricted ? '0.5' : 'inherit';
 });
-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) {
+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) {
   return props.restricted ? '0.5' : 'inherit';
 });
 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;
 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) {
   return props.selected ? "var(--ds-background-selected, ".concat(_colors.N30, ")") : 'transparent';
 }, MENTION_ITEM_HEIGHT);
-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, ")"));
+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

@@ -12,7 +12,7 @@ var _colors = require("@atlaskit/theme/colors");
 var _typography = require("@atlaskit/theme/typography");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 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)());
-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)");
+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)");
 
 // TODO: Figure out why the themed css function is causing type errors when passed prop children
 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

@@ -13,4 +13,4 @@ var _templateObject, _templateObject2;
 var MentionPickerStyle = exports.MentionPickerStyle = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: ", ";\n"])), function (props) {
   return props.visible ? 'block' : 'none';
 });
-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);
+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

@@ -12,7 +12,7 @@ var _types = require("../types");
 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; }
 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; }
 var packageName = "@atlaskit/mention";
-var packageVersion = "22.1.10";
+var packageVersion = "23.0.0";
 var SLI_EVENT_TYPE = exports.SLI_EVENT_TYPE = 'sli';
 var SMART_EVENT_TYPE = exports.SMART_EVENT_TYPE = 'smart';
 var SliNames = exports.SliNames = /*#__PURE__*/function (SliNames) {

package/dist/es2019/components/MentionItem/styles.js

@@ -6,7 +6,7 @@ export const RowStyle = styled.div`
   flex-direction: row;
   flex-wrap: wrap;
   overflow: hidden;
-  padding: ${"var(--ds-space-075, 6px)"} 14px;
+  padding: ${"var(--ds-space-075, 6px)"} ${"var(--ds-space-150, 12px)"};
   text-overflow: ellipsis;
   vertical-align: middle;
 `;
@@ -18,7 +18,7 @@ export const AvatarStyle = styled.span`
 export const NameSectionStyle = styled.div`
   flex: 1;
   min-width: 0;
-  margin-left: 14px;
+  margin-left: ${"var(--ds-space-150, 12px)"};
   opacity: ${props => props.restricted ? '0.5' : 'inherit'};
 `;
 export const FullNameStyle = styled.span`
@@ -58,6 +58,6 @@ export const MentionItemStyle = styled.div`
   cursor: pointer;
 `;
 export const AccessSectionStyle = styled.div`
-  padding-left: 5px;
+  padding-left: ${"var(--ds-space-050, 4px)"};
   color: ${`var(--ds-text-subtle, ${N500})`};
 `;

package/dist/es2019/components/MentionListError/styles.js

@@ -13,10 +13,9 @@ export const MentionListErrorStyle = styled.div`
   border-radius: ${borderRadius()}px;
 `;
 export const GenericErrorVisualStyle = styled.div`
-  height: 108px;
   margin-bottom: ${"var(--ds-space-100, 8px)"};
-  margin-top: 36px;
-  width: 83px;
+  margin-top: ${"var(--ds-space-400, 32px)"};
+  width: ${"var(--ds-space-1000, 80px)"};
 `;
 
 // TODO: Figure out why the themed css function is causing type errors when passed prop children

package/dist/es2019/components/MentionPicker/styles.js

@@ -18,7 +18,7 @@ export const MentionPickerInfoStyle = styled.div`
     p {
       margin: 0;
       overflow: hidden;
-      padding: 9px;
+      padding: ${"var(--ds-space-100, 8px)"};
       text-overflow: ellipsis;
     }
   }

package/dist/es2019/util/analytics.js

@@ -2,7 +2,7 @@ import { OPERATIONAL_EVENT_TYPE, UI_EVENT_TYPE } from '@atlaskit/analytics-gas-t
 import { ELEMENTS_CHANNEL } from '../_constants';
 import { isSpecialMentionText } from '../types';
 const packageName = "@atlaskit/mention";
-const packageVersion = "22.1.10";
+const packageVersion = "23.0.0";
 export const SLI_EVENT_TYPE = 'sli';
 export const SMART_EVENT_TYPE = 'smart';
 export let SliNames = /*#__PURE__*/function (SliNames) {

package/dist/esm/components/MentionItem/styles.js

@@ -2,11 +2,11 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 import styled from '@emotion/styled';
 import { N900, N100, N30, N500 } from '@atlaskit/theme/colors';
-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)");
+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)");
 export var AvatarStyle = styled.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: relative;\n  flex: initial;\n  opacity: ", ";\n"])), function (props) {
   return props.restricted ? '0.5' : 'inherit';
 });
-export var NameSectionStyle = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  flex: 1;\n  min-width: 0;\n  margin-left: 14px;\n  opacity: ", ";\n"])), function (props) {
+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) {
   return props.restricted ? '0.5' : 'inherit';
 });
 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;
 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) {
   return props.selected ? "var(--ds-background-selected, ".concat(N30, ")") : 'transparent';
 }, MENTION_ITEM_HEIGHT);
-export var AccessSectionStyle = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  padding-left: 5px;\n  color: ", ";\n"])), "var(--ds-text-subtle, ".concat(N500, ")"));
+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

@@ -5,7 +5,7 @@ import { borderRadius } from '@atlaskit/theme/constants';
 import { N500 } from '@atlaskit/theme/colors';
 import { h400 } from '@atlaskit/theme/typography';
 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());
-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)");
+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)");
 
 // TODO: Figure out why the themed css function is causing type errors when passed prop children
 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

@@ -6,4 +6,4 @@ import { mentionListWidth, noDialogContainerBorderColor, noDialogContainerBorder
 export var MentionPickerStyle = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: ", ";\n"])), function (props) {
   return props.visible ? 'block' : 'none';
 });
-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);
+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

@@ -5,7 +5,7 @@ import { OPERATIONAL_EVENT_TYPE, UI_EVENT_TYPE } from '@atlaskit/analytics-gas-t
 import { ELEMENTS_CHANNEL } from '../_constants';
 import { isSpecialMentionText } from '../types';
 var packageName = "@atlaskit/mention";
-var packageVersion = "22.1.10";
+var packageVersion = "23.0.0";
 export var SLI_EVENT_TYPE = 'sli';
 export var SMART_EVENT_TYPE = 'smart';
 export var SliNames = /*#__PURE__*/function (SliNames) {

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@atlaskit/mention",
-  "version": "22.1.10",
+  "version": "23.0.0",
   "description": "A React component used to display user profiles in a list for 'Mention' functionality",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
-  "repository": "https://bitbucket.org/atlassian/atlassian-frontend",
+  "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
   "main": "dist/cjs/index.js",
@@ -24,7 +24,6 @@
   "atlaskit:src": "src/index.ts",
   "atlassian": {
     "team": "Search Platform: Search Experience",
-    "deprecatedAutoEntryPoints": true,
     "releaseModel": "continuous",
     "productPushConsumption": [
       "jira"
@@ -38,14 +37,14 @@
   },
   "dependencies": {
     "@atlaskit/analytics-gas-types": "^5.1.0",
-    "@atlaskit/analytics-next": "^9.1.0",
+    "@atlaskit/analytics-next": "^9.2.0",
     "@atlaskit/avatar": "^21.4.0",
     "@atlaskit/focus-ring": "^1.3.0",
     "@atlaskit/icon": "^22.0.0",
-    "@atlaskit/lozenge": "^11.5.0",
+    "@atlaskit/lozenge": "^11.6.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.29.0",
-    "@atlaskit/tooltip": "^18.0.0",
+    "@atlaskit/tokens": "^1.37.0",
+    "@atlaskit/tooltip": "^18.1.0",
     "@atlaskit/ufo": "^0.2.0",
     "@atlaskit/util-service-support": "^6.2.0",
     "@babel/runtime": "^7.0.0",
@@ -92,5 +91,16 @@
       ]
     }
   },
-  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
-}
+  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1",
+  "af:exports": {
+    ".": "./src/index.ts",
+    "./element": "./src/element.ts",
+    "./i18n": "./src/i18n.ts",
+    "./item": "./src/item.ts",
+    "./resource": "./src/resource.ts",
+    "./shared-styles": "./src/shared-styles.ts",
+    "./team-resource": "./src/team-resource.ts",
+    "./typeahead": "./src/typeahead.ts",
+    "./types": "./src/types.ts"
+  }
+}

package/_constants/package.json

@@ -1,15 +0,0 @@
-{
-  "name": "@atlaskit/mention/_constants",
-  "main": "../dist/cjs/_constants.js",
-  "module": "../dist/esm/_constants.js",
-  "module:es2019": "../dist/es2019/_constants.js",
-  "sideEffects": false,
-  "types": "../dist/types/_constants.d.ts",
-  "typesVersions": {
-    ">=4.5 <4.9": {
-      "*": [
-        "../dist/types-ts4.5/_constants.d.ts"
-      ]
-    }
-  }
-}