@atlaskit/mention 23.4.6 → 23.4.7

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/mention
 
+## 23.4.7
+
+### Patch Changes
+
+- [#178297](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/178297)
+  [`7abc8162b32ab`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/7abc8162b32ab) -
+  Internal changes to typography styles. There may be some minor visual changes to align with
+  modernized typography styles.
+
 ## 23.4.6
 
 ### Patch Changes

package/dist/cjs/components/MentionListError/index.js

@@ -11,9 +11,10 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _react = _interopRequireDefault(require("react"));
+var _heading = _interopRequireDefault(require("@atlaskit/heading"));
+var _primitives = require("@atlaskit/primitives");
 var _i18n = require("../../util/i18n");
 var _GenericErrorIllustration = require("./GenericErrorIllustration");
-var _styles = require("./styles");
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 var advisedActionMessages = {
@@ -32,7 +33,20 @@ var MentionListError = exports.default = /*#__PURE__*/function (_React$PureCompo
     value: function render() {
       var error = this.props.error;
       var ErrorMessage = MentionListError.getAdvisedActionMessage(error);
-      return /*#__PURE__*/_react.default.createElement(_styles.MentionListErrorStyle, null, /*#__PURE__*/_react.default.createElement(_GenericErrorIllustration.GenericErrorIllustration, null), /*#__PURE__*/_react.default.createElement(_styles.MentionListErrorHeadlineStyle, null, /*#__PURE__*/_react.default.createElement(_i18n.DefaultHeadline, null)), /*#__PURE__*/_react.default.createElement(_styles.MentionListAdviceStyle, null, /*#__PURE__*/_react.default.createElement(ErrorMessage, null)));
+      return /*#__PURE__*/_react.default.createElement(_primitives.Stack, {
+        space: "space.400",
+        alignBlock: "center",
+        alignInline: "center",
+        xcss: mentionListErrorStyles
+      }, /*#__PURE__*/_react.default.createElement(_GenericErrorIllustration.GenericErrorIllustration, null), /*#__PURE__*/_react.default.createElement(_primitives.Stack, {
+        space: "space.100"
+      }, /*#__PURE__*/_react.default.createElement(_heading.default, {
+        size: "xsmall",
+        as: "div"
+      }, /*#__PURE__*/_react.default.createElement(_i18n.DefaultHeadline, null)), /*#__PURE__*/_react.default.createElement(_primitives.Text, {
+        as: "p",
+        color: "color.text.subtle"
+      }, /*#__PURE__*/_react.default.createElement(ErrorMessage, null))));
     }
   }], [{
     key: "getAdvisedActionMessage",
@@ -50,4 +64,8 @@ var MentionListError = exports.default = /*#__PURE__*/function (_React$PureCompo
       return advisedActionMessages.default;
     }
   }]);
-}(_react.default.PureComponent);
+}(_react.default.PureComponent);
+var mentionListErrorStyles = (0, _primitives.xcss)({
+  paddingBlock: 'space.500',
+  textAlign: 'center'
+});

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

@@ -4,38 +4,11 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.MentionListErrorStyle = exports.MentionListErrorHeadlineStyle = exports.MentionListAdviceStyle = exports.GenericErrorVisualStyle = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+exports.GenericErrorVisualStyle = void 0;
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-var _constants = require("@atlaskit/theme/constants");
-var _colors = require("@atlaskit/theme/colors");
-var _typography = require("@atlaskit/theme/typography");
-var _templateObject; // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var MentionListErrorStyle = exports.MentionListErrorStyle = _styled.default.div({
-  alignItems: 'center',
-  display: 'flex',
-  justifyContent: 'center',
-  flexDirection: 'column',
-  backgroundColor: "var(--ds-surface-overlay, white)",
-  color: "var(--ds-text-subtle, ".concat(_colors.N500, ")"),
-  border: "1px solid ".concat("var(--ds-surface-overlay, #fff)"),
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  borderRadius: "".concat((0, _constants.borderRadius)(), "px")
-});
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var GenericErrorVisualStyle = exports.GenericErrorVisualStyle = _styled.default.div({
-  marginBottom: "var(--ds-space-100, 8px)",
-  marginTop: "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
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-styled-tagged-template-expression -- Ignored via go/DSP-18766
-var MentionListErrorHeadlineStyle = exports.MentionListErrorHeadlineStyle = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t", ";\n\tmargin-bottom: ", ";\n"])), (0, _typography.h400)(), "var(--ds-space-100, 8px)");
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var MentionListAdviceStyle = exports.MentionListAdviceStyle = _styled.default.div({
-  marginBottom: "var(--ds-space-600, 48px)"
 });

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 = "23.4.6";
+var packageVersion = "23.4.7";
 var SLI_EVENT_TYPE = exports.SLI_EVENT_TYPE = 'sli';
 var SMART_EVENT_TYPE = exports.SMART_EVENT_TYPE = 'smart';
 var fireAnalyticsMentionTypeaheadEvent = exports.fireAnalyticsMentionTypeaheadEvent = function fireAnalyticsMentionTypeaheadEvent(props) {

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

@@ -1,7 +1,8 @@
 import React from 'react';
+import Heading from '@atlaskit/heading';
+import { Stack, Text, xcss } from '@atlaskit/primitives';
 import { DefaultAdvisedAction, DefaultHeadline, DifferentText, LoginAgain } from '../../util/i18n';
 import { GenericErrorIllustration } from './GenericErrorIllustration';
-import { MentionListAdviceStyle, MentionListErrorHeadlineStyle, MentionListErrorStyle } from './styles';
 const advisedActionMessages = {
   '401': LoginAgain,
   '403': DifferentText,
@@ -25,6 +26,23 @@ export default class MentionListError extends React.PureComponent {
       error
     } = this.props;
     const ErrorMessage = MentionListError.getAdvisedActionMessage(error);
-    return /*#__PURE__*/React.createElement(MentionListErrorStyle, null, /*#__PURE__*/React.createElement(GenericErrorIllustration, null), /*#__PURE__*/React.createElement(MentionListErrorHeadlineStyle, null, /*#__PURE__*/React.createElement(DefaultHeadline, null)), /*#__PURE__*/React.createElement(MentionListAdviceStyle, null, /*#__PURE__*/React.createElement(ErrorMessage, null)));
+    return /*#__PURE__*/React.createElement(Stack, {
+      space: "space.400",
+      alignBlock: "center",
+      alignInline: "center",
+      xcss: mentionListErrorStyles
+    }, /*#__PURE__*/React.createElement(GenericErrorIllustration, null), /*#__PURE__*/React.createElement(Stack, {
+      space: "space.100"
+    }, /*#__PURE__*/React.createElement(Heading, {
+      size: "xsmall",
+      as: "div"
+    }, /*#__PURE__*/React.createElement(DefaultHeadline, null)), /*#__PURE__*/React.createElement(Text, {
+      as: "p",
+      color: "color.text.subtle"
+    }, /*#__PURE__*/React.createElement(ErrorMessage, null))));
   }
-}
+}
+const mentionListErrorStyles = xcss({
+  paddingBlock: 'space.500',
+  textAlign: 'center'
+});

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

@@ -1,37 +1,6 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import styled from '@emotion/styled';
-import { borderRadius } from '@atlaskit/theme/constants';
-import { N500 } from '@atlaskit/theme/colors';
-import { h400 } from '@atlaskit/theme/typography';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const MentionListErrorStyle = styled.div({
-  alignItems: 'center',
-  display: 'flex',
-  justifyContent: 'center',
-  flexDirection: 'column',
-  backgroundColor: "var(--ds-surface-overlay, white)",
-  color: `var(--ds-text-subtle, ${N500})`,
-  border: `1px solid ${"var(--ds-surface-overlay, #fff)"}`,
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  borderRadius: `${borderRadius()}px`
-});
-
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const GenericErrorVisualStyle = styled.div({
-  marginBottom: "var(--ds-space-100, 8px)",
-  marginTop: "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
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-styled-tagged-template-expression -- Ignored via go/DSP-18766
-export const MentionListErrorHeadlineStyle = styled.div`
-	${h400()};
-	margin-bottom: ${"var(--ds-space-100, 8px)"};
-`;
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const MentionListAdviceStyle = styled.div({
-  marginBottom: "var(--ds-space-600, 48px)"
 });

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 { ComponentNames, isSpecialMentionText } from '../types';
 const packageName = "@atlaskit/mention";
-const packageVersion = "23.4.6";
+const packageVersion = "23.4.7";
 export const SLI_EVENT_TYPE = 'sli';
 export const SMART_EVENT_TYPE = 'smart';
 export const fireAnalyticsMentionTypeaheadEvent = props => (action, duration, userIds = [], query) => {

package/dist/esm/components/MentionListError/index.js

@@ -6,9 +6,10 @@ import _inherits from "@babel/runtime/helpers/inherits";
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React from 'react';
+import Heading from '@atlaskit/heading';
+import { Stack, Text, xcss } from '@atlaskit/primitives';
 import { DefaultAdvisedAction, DefaultHeadline, DifferentText, LoginAgain } from '../../util/i18n';
 import { GenericErrorIllustration } from './GenericErrorIllustration';
-import { MentionListAdviceStyle, MentionListErrorHeadlineStyle, MentionListErrorStyle } from './styles';
 var advisedActionMessages = {
   '401': LoginAgain,
   '403': DifferentText,
@@ -25,7 +26,20 @@ var MentionListError = /*#__PURE__*/function (_React$PureComponent) {
     value: function render() {
       var error = this.props.error;
       var ErrorMessage = MentionListError.getAdvisedActionMessage(error);
-      return /*#__PURE__*/React.createElement(MentionListErrorStyle, null, /*#__PURE__*/React.createElement(GenericErrorIllustration, null), /*#__PURE__*/React.createElement(MentionListErrorHeadlineStyle, null, /*#__PURE__*/React.createElement(DefaultHeadline, null)), /*#__PURE__*/React.createElement(MentionListAdviceStyle, null, /*#__PURE__*/React.createElement(ErrorMessage, null)));
+      return /*#__PURE__*/React.createElement(Stack, {
+        space: "space.400",
+        alignBlock: "center",
+        alignInline: "center",
+        xcss: mentionListErrorStyles
+      }, /*#__PURE__*/React.createElement(GenericErrorIllustration, null), /*#__PURE__*/React.createElement(Stack, {
+        space: "space.100"
+      }, /*#__PURE__*/React.createElement(Heading, {
+        size: "xsmall",
+        as: "div"
+      }, /*#__PURE__*/React.createElement(DefaultHeadline, null)), /*#__PURE__*/React.createElement(Text, {
+        as: "p",
+        color: "color.text.subtle"
+      }, /*#__PURE__*/React.createElement(ErrorMessage, null))));
     }
   }], [{
     key: "getAdvisedActionMessage",
@@ -44,4 +58,8 @@ var MentionListError = /*#__PURE__*/function (_React$PureComponent) {
     }
   }]);
 }(React.PureComponent);
-export { MentionListError as default };
+export { MentionListError as default };
+var mentionListErrorStyles = xcss({
+  paddingBlock: 'space.500',
+  textAlign: 'center'
+});

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

@@ -1,36 +1,6 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import styled from '@emotion/styled';
-import { borderRadius } from '@atlaskit/theme/constants';
-import { N500 } from '@atlaskit/theme/colors';
-import { h400 } from '@atlaskit/theme/typography';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var MentionListErrorStyle = styled.div({
-  alignItems: 'center',
-  display: 'flex',
-  justifyContent: 'center',
-  flexDirection: 'column',
-  backgroundColor: "var(--ds-surface-overlay, white)",
-  color: "var(--ds-text-subtle, ".concat(N500, ")"),
-  border: "1px solid ".concat("var(--ds-surface-overlay, #fff)"),
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  borderRadius: "".concat(borderRadius(), "px")
-});
-
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export var GenericErrorVisualStyle = styled.div({
-  marginBottom: "var(--ds-space-100, 8px)",
-  marginTop: "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
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-styled-tagged-template-expression -- Ignored via go/DSP-18766
-export var MentionListErrorHeadlineStyle = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t", ";\n\tmargin-bottom: ", ";\n"])), h400(), "var(--ds-space-100, 8px)");
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var MentionListAdviceStyle = styled.div({
-  marginBottom: "var(--ds-space-600, 48px)"
 });

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 { ComponentNames, isSpecialMentionText } from '../types';
 var packageName = "@atlaskit/mention";
-var packageVersion = "23.4.6";
+var packageVersion = "23.4.7";
 export var SLI_EVENT_TYPE = 'sli';
 export var SMART_EVENT_TYPE = 'smart';
 export var fireAnalyticsMentionTypeaheadEvent = function fireAnalyticsMentionTypeaheadEvent(props) {

package/dist/types/components/MentionListError/styles.d.ts

@@ -1,17 +1,5 @@
 /// <reference types="react" />
-export declare const MentionListErrorStyle: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const GenericErrorVisualStyle: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const MentionListErrorHeadlineStyle: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const MentionListAdviceStyle: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/types-ts4.5/components/MentionListError/styles.d.ts

@@ -1,17 +1,5 @@
 /// <reference types="react" />
-export declare const MentionListErrorStyle: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const GenericErrorVisualStyle: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const MentionListErrorHeadlineStyle: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const MentionListAdviceStyle: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/mention",
-	"version": "23.4.6",
+	"version": "23.4.7",
 	"description": "A React component used to display user profiles in a list for 'Mention' functionality",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"