@atlaskit/section-message 6.9.3 → 7.0.0

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @atlaskit/section-message
 
+## 7.0.0
+
+### Major Changes
+
+- [#116552](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/116552)
+  [`e002c7033f5f3`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e002c7033f5f3) -
+  Migrated from `@emotion/react` to `@compiled/react` in order to improve performance, align with
+  the rest of the Atlaskit techstack, and support React 18 Streaming SSR. Please note, in order to
+  use this version of `@atlaskit/section-message`, you will need to ensure that your bundler is
+  configured to handle `.css` imports correctly.
+
+  Most bundlers come with built-in support for `.css` imports, so you may not need to do anything.
+  If you are using a different bundler, please refer to the documentation for that bundler to
+  understand how to handle `.css` imports. For more information on the migration, please refer to
+  [RFC-73 Migrating our components to Compiled CSS-in-JS](https://community.developer.atlassian.com/t/rfc-73-migrating-our-components-to-compiled-css-in-js/85953).
+
+### Patch Changes
+
+- Updated dependencies
+
+## 6.9.4
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 6.9.3
 
 ### Patch Changes

package/dist/cjs/section-message-action.js

@@ -13,7 +13,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
 var _css = require("@atlaskit/css");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _primitives = require("@atlaskit/primitives");
+var _compiled = require("@atlaskit/primitives/compiled");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var styles = {
@@ -39,7 +39,7 @@ var SectionMessageAction = /*#__PURE__*/(0, _react.memo)(function SectionMessage
     linkComponent = _ref.linkComponent;
   if (!linkComponent && (0, _platformFeatureFlags.fg)('platform_section_message_action_migration')) {
     if (href) {
-      return /*#__PURE__*/_react.default.createElement(_primitives.Anchor, {
+      return /*#__PURE__*/_react.default.createElement(_compiled.Anchor, {
         testId: testId,
         onClick: onClick,
         href: href,
@@ -47,13 +47,13 @@ var SectionMessageAction = /*#__PURE__*/(0, _react.memo)(function SectionMessage
       }, children);
     }
     if (onClick) {
-      return /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
+      return /*#__PURE__*/_react.default.createElement(_compiled.Pressable, {
         testId: testId,
         onClick: onClick,
         xcss: (0, _css.cx)(styles.common, styles.pressable)
       }, children);
     }
-    return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+    return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
       as: "span",
       testId: testId
     }, children);

package/dist/cjs/section-message.compiled.css

@@ -0,0 +1,6 @@
+._11c81oud{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._2rkoglpi{border-radius:var(--ds-border-radius,4px)}
+._1mou1i6y{margin-block:var(--ds-space-negative-025,-2px)}
+._1e0c1txw{display:flex}
+._1nmz1hna{word-break:break-word}
+._syaz1fxt{color:var(--ds-text,#172b4d)}

package/dist/cjs/section-message.js

@@ -1,3 +1,4 @@
+/* section-message.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -6,24 +7,19 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+require("./section-message.compiled.css");
+var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireWildcard(require("react"));
 var _heading = _interopRequireDefault(require("@atlaskit/heading"));
-var _primitives = require("@atlaskit/primitives");
+var _compiled = require("@atlaskit/primitives/compiled");
 var _appearanceIcon = require("./internal/appearance-icon");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-var containerStyles = (0, _primitives.xcss)({
-  wordBreak: 'break-word',
-  borderRadius: 'border.radius'
-});
-var bleedStyles = (0, _primitives.xcss)({
-  display: 'flex',
-  marginBlock: 'space.negative.025'
-});
-var contentStyles = (0, _primitives.xcss)({
-  color: 'color.text',
-  font: 'font.body'
-});
+var sectionMessageStyles = {
+  container: "_2rkoglpi _1nmz1hna",
+  bleed: "_1mou1i6y _1e0c1txw",
+  content: "_11c81oud _syaz1fxt"
+};
 
 /**
  * __Section message__
@@ -48,18 +44,18 @@ var SectionMessage = /*#__PURE__*/(0, _react.forwardRef)(function SectionMessage
     Icon = _getAppearanceIconSty.Icon;
   var actionElements = actions && actions.type === _react.default.Fragment ? actions.props.children : actions;
   var actionsArray = _react.default.Children.toArray(actionElements);
-  return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+  return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
     as: "section",
     backgroundColor: appearanceMap[appearance],
     padding: "space.200",
     testId: testId,
     ref: ref,
-    xcss: containerStyles
-  }, /*#__PURE__*/_react.default.createElement(_primitives.Inline, {
+    xcss: sectionMessageStyles.container
+  }, /*#__PURE__*/_react.default.createElement(_compiled.Inline, {
     space: "space.200",
     alignBlock: "stretch"
-  }, /*#__PURE__*/_react.default.createElement(_primitives.Box, {
-    xcss: bleedStyles
+  }, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: sectionMessageStyles.bleed
   }, /*#__PURE__*/_react.default.createElement(Icon, {
     size: "medium",
     primaryColor: primaryColor,
@@ -69,15 +65,15 @@ var SectionMessage = /*#__PURE__*/(0, _react.forwardRef)(function SectionMessage
     LEGACY_size: "medium",
     color: primaryColor,
     spacing: "spacious"
-  })), /*#__PURE__*/_react.default.createElement(_primitives.Stack, {
+  })), /*#__PURE__*/_react.default.createElement(_compiled.Stack, {
     space: "space.100",
     testId: testId && "".concat(testId, "--content")
   }, !!title && /*#__PURE__*/_react.default.createElement(_heading.default, {
     as: "h2",
     size: "small"
-  }, title), /*#__PURE__*/_react.default.createElement(_primitives.Box, {
-    xcss: contentStyles
-  }, children), actionsArray.length > 0 && /*#__PURE__*/_react.default.createElement(_primitives.Inline, {
+  }, title), /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: sectionMessageStyles.content
+  }, children), actionsArray.length > 0 && /*#__PURE__*/_react.default.createElement(_compiled.Inline, {
     shouldWrap: true,
     testId: testId && "".concat(testId, "--actions"),
     separator: "\xB7",
@@ -85,7 +81,7 @@ var SectionMessage = /*#__PURE__*/(0, _react.forwardRef)(function SectionMessage
     rowSpace: "space.0",
     role: "list"
   }, actionsArray.map(function (action, id) {
-    return /*#__PURE__*/_react.default.createElement(_primitives.Inline, {
+    return /*#__PURE__*/_react.default.createElement(_compiled.Inline, {
       role: "listitem",
       key: id
     }, action);

package/dist/es2019/section-message-action.js

@@ -5,7 +5,7 @@ import React, { memo } from 'react';
 import Button from '@atlaskit/button/standard-button';
 import { cx } from '@atlaskit/css';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { Anchor, Box, Pressable } from '@atlaskit/primitives';
+import { Anchor, Box, Pressable } from '@atlaskit/primitives/compiled';
 const styles = {
   common: "_11c81oud _syaz14q2 _k48p1wq8 _30l314q2 _9h8h16c2",
   anchor: "_1053w7te _9oik1r31 _1bnx8stv _jf4cnqa1 _n0fxw7te _1vhvg3x0",

package/dist/es2019/section-message.compiled.css

@@ -0,0 +1,6 @@
+._11c81oud{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._2rkoglpi{border-radius:var(--ds-border-radius,4px)}
+._1mou1i6y{margin-block:var(--ds-space-negative-025,-2px)}
+._1e0c1txw{display:flex}
+._1nmz1hna{word-break:break-word}
+._syaz1fxt{color:var(--ds-text,#172b4d)}

package/dist/es2019/section-message.js

@@ -1,19 +1,15 @@
+/* section-message.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./section-message.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React, { forwardRef } from 'react';
 import Heading from '@atlaskit/heading';
-import { Box, Inline, Stack, xcss } from '@atlaskit/primitives';
+import { Box, Inline, Stack } from '@atlaskit/primitives/compiled';
 import { getAppearanceIconStyles } from './internal/appearance-icon';
-const containerStyles = xcss({
-  wordBreak: 'break-word',
-  borderRadius: 'border.radius'
-});
-const bleedStyles = xcss({
-  display: 'flex',
-  marginBlock: 'space.negative.025'
-});
-const contentStyles = xcss({
-  color: 'color.text',
-  font: 'font.body'
-});
+const sectionMessageStyles = {
+  container: "_2rkoglpi _1nmz1hna",
+  bleed: "_1mou1i6y _1e0c1txw",
+  content: "_11c81oud _syaz1fxt"
+};
 
 /**
  * __Section message__
@@ -45,12 +41,12 @@ const SectionMessage = /*#__PURE__*/forwardRef(function SectionMessage({
     padding: "space.200",
     testId: testId,
     ref: ref,
-    xcss: containerStyles
+    xcss: sectionMessageStyles.container
   }, /*#__PURE__*/React.createElement(Inline, {
     space: "space.200",
     alignBlock: "stretch"
   }, /*#__PURE__*/React.createElement(Box, {
-    xcss: bleedStyles
+    xcss: sectionMessageStyles.bleed
   }, /*#__PURE__*/React.createElement(Icon, {
     size: "medium",
     primaryColor: primaryColor,
@@ -67,7 +63,7 @@ const SectionMessage = /*#__PURE__*/forwardRef(function SectionMessage({
     as: "h2",
     size: "small"
   }, title), /*#__PURE__*/React.createElement(Box, {
-    xcss: contentStyles
+    xcss: sectionMessageStyles.content
   }, children), actionsArray.length > 0 && /*#__PURE__*/React.createElement(Inline, {
     shouldWrap: true,
     testId: testId && `${testId}--actions`,

package/dist/esm/section-message-action.js

@@ -5,7 +5,7 @@ import React, { memo } from 'react';
 import Button from '@atlaskit/button/standard-button';
 import { cx } from '@atlaskit/css';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { Anchor, Box, Pressable } from '@atlaskit/primitives';
+import { Anchor, Box, Pressable } from '@atlaskit/primitives/compiled';
 var styles = {
   common: "_11c81oud _syaz14q2 _k48p1wq8 _30l314q2 _9h8h16c2",
   anchor: "_1053w7te _9oik1r31 _1bnx8stv _jf4cnqa1 _n0fxw7te _1vhvg3x0",

package/dist/esm/section-message.compiled.css

@@ -0,0 +1,6 @@
+._11c81oud{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._2rkoglpi{border-radius:var(--ds-border-radius,4px)}
+._1mou1i6y{margin-block:var(--ds-space-negative-025,-2px)}
+._1e0c1txw{display:flex}
+._1nmz1hna{word-break:break-word}
+._syaz1fxt{color:var(--ds-text,#172b4d)}

package/dist/esm/section-message.js

@@ -1,19 +1,15 @@
+/* section-message.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./section-message.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React, { forwardRef } from 'react';
 import Heading from '@atlaskit/heading';
-import { Box, Inline, Stack, xcss } from '@atlaskit/primitives';
+import { Box, Inline, Stack } from '@atlaskit/primitives/compiled';
 import { getAppearanceIconStyles } from './internal/appearance-icon';
-var containerStyles = xcss({
-  wordBreak: 'break-word',
-  borderRadius: 'border.radius'
-});
-var bleedStyles = xcss({
-  display: 'flex',
-  marginBlock: 'space.negative.025'
-});
-var contentStyles = xcss({
-  color: 'color.text',
-  font: 'font.body'
-});
+var sectionMessageStyles = {
+  container: "_2rkoglpi _1nmz1hna",
+  bleed: "_1mou1i6y _1e0c1txw",
+  content: "_11c81oud _syaz1fxt"
+};
 
 /**
  * __Section message__
@@ -44,12 +40,12 @@ var SectionMessage = /*#__PURE__*/forwardRef(function SectionMessage(_ref, ref)
     padding: "space.200",
     testId: testId,
     ref: ref,
-    xcss: containerStyles
+    xcss: sectionMessageStyles.container
   }, /*#__PURE__*/React.createElement(Inline, {
     space: "space.200",
     alignBlock: "stretch"
   }, /*#__PURE__*/React.createElement(Box, {
-    xcss: bleedStyles
+    xcss: sectionMessageStyles.bleed
   }, /*#__PURE__*/React.createElement(Icon, {
     size: "medium",
     primaryColor: primaryColor,
@@ -66,7 +62,7 @@ var SectionMessage = /*#__PURE__*/forwardRef(function SectionMessage(_ref, ref)
     as: "h2",
     size: "small"
   }, title), /*#__PURE__*/React.createElement(Box, {
-    xcss: contentStyles
+    xcss: sectionMessageStyles.content
   }, children), actionsArray.length > 0 && /*#__PURE__*/React.createElement(Inline, {
     shouldWrap: true,
     testId: testId && "".concat(testId, "--actions"),

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/section-message",
-	"version": "6.9.3",
+	"version": "7.0.0",
 	"description": "A section message is used to alert users to a particular section of the screen.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -41,11 +41,11 @@
 	"dependencies": {
 		"@atlaskit/button": "^20.5.0",
 		"@atlaskit/codemod-utils": "^4.2.0",
-		"@atlaskit/css": "^0.8.0",
-		"@atlaskit/heading": "^4.1.0",
-		"@atlaskit/icon": "^23.9.0",
+		"@atlaskit/css": "^0.9.0",
+		"@atlaskit/heading": "^4.3.0",
+		"@atlaskit/icon": "^23.11.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/primitives": "^13.5.0",
+		"@atlaskit/primitives": "^13.6.0",
 		"@atlaskit/theme": "^16.0.0",
 		"@atlaskit/tokens": "^3.3.0",
 		"@babel/runtime": "^7.0.0"