@atlaskit/section-message 8.4.0 → 8.5.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 (12) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/cjs/section-message.compiled.css +9 -0
  3. package/dist/cjs/section-message.js +52 -31
  4. package/dist/es2019/section-message.compiled.css +9 -0
  5. package/dist/es2019/section-message.js +43 -26
  6. package/dist/esm/section-message.compiled.css +9 -0
  7. package/dist/esm/section-message.js +47 -26
  8. package/dist/types/section-message.d.ts +2 -2
  9. package/dist/types/types.d.ts +6 -0
  10. package/dist/types-ts4.5/section-message.d.ts +2 -2
  11. package/dist/types-ts4.5/types.d.ts +6 -0
  12. package/package.json +4 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # @atlaskit/section-message
2
2
 
3
+ ## 8.5.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#191290](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/191290)
8
+ [`65bf86ed3a096`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/65bf86ed3a096) -
9
+ Adds new prop `isDismissible` that allows messages to be dismissed and removed from the page.
10
+
3
11
  ## 8.4.0
4
12
 
5
13
  ### Minor Changes
package/dist/cjs/section-message.compiled.css CHANGED
@@ -1,6 +1,15 @@
1
1
  ._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
2
2
  ._2rkoglpi{border-radius:var(--ds-border-radius,4px)}
3
+ ._18zrpxbi{padding-inline:var(--ds-space-200,1pc)}
3
4
  ._1mou1i6y{margin-block:var(--ds-space-negative-025,-2px)}
5
+ ._1rjcpxbi{padding-block:var(--ds-space-200,1pc)}
6
+ ._16jlkb7n{flex-grow:1}
7
+ ._19pk1i6y{margin-top:var(--ds-space-negative-025,-2px)}
4
8
  ._1e0c1txw{display:flex}
5
9
  ._1nmz1hna{word-break:break-word}
10
+ ._bfhk1gly{background-color:var(--ds-background-danger,#ffeceb)}
11
+ ._bfhk1nvp{background-color:var(--ds-background-discovery,#f3f0ff)}
12
+ ._bfhk1tzq{background-color:var(--ds-background-warning,#fff7d6)}
13
+ ._bfhk33gi{background-color:var(--ds-background-information,#e9f2ff)}
14
+ ._bfhkmv6i{background-color:var(--ds-background-success,#dcfff1)}
6
15
  ._syaz1fxt{color:var(--ds-text,#172b4d)}
package/dist/cjs/section-message.js CHANGED
@@ -8,18 +8,31 @@ Object.defineProperty(exports, "__esModule", {
8
8
  });
9
9
  exports.default = void 0;
10
10
  require("./section-message.compiled.css");
11
- var _runtime = require("@compiled/react/runtime");
12
11
  var _react = _interopRequireWildcard(require("react"));
12
+ var React = _react;
13
+ var _runtime = require("@compiled/react/runtime");
14
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
15
+ var _new = require("@atlaskit/button/new");
13
16
  var _heading = _interopRequireDefault(require("@atlaskit/heading"));
17
+ var _cross = _interopRequireDefault(require("@atlaskit/icon/core/migration/cross"));
14
18
  var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
15
19
  var _compiled = require("@atlaskit/primitives/compiled");
16
20
  var _appearanceIcon = require("./internal/appearance-icon");
17
21
  function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
18
22
  var sectionMessageStyles = {
19
- container: "_2rkoglpi _1nmz1hna",
20
- bleed: "_1mou1i6y _1e0c1txw",
23
+ container: "_2rkoglpi _1rjcpxbi _18zrpxbi _1nmz1hna",
24
+ iconContainer: "_1mou1i6y _1e0c1txw",
25
+ contentContainer: "_16jlkb7n",
21
26
  content: "_11c82smr _syaz1fxt",
22
- actionsContainer: "_11c82smr"
27
+ actionsContainer: "_11c82smr",
28
+ dismissButtonContainer: "_19pk1i6y"
29
+ };
30
+ var appearanceStyles = {
31
+ information: "_bfhk33gi",
32
+ warning: "_bfhk1tzq",
33
+ error: "_bfhk1gly",
34
+ success: "_bfhkmv6i",
35
+ discovery: "_bfhk1nvp"
23
36
  };
24
37
 
25
38
  /**
@@ -38,26 +51,31 @@ var SectionMessage = /*#__PURE__*/(0, _react.forwardRef)(function SectionMessage
38
51
  actions = _ref.actions,
39
52
  title = _ref.title,
40
53
  icon = _ref.icon,
54
+ isDismissible = _ref.isDismissible,
41
55
  testId = _ref.testId;
56
+ var _useState = (0, _react.useState)(false),
57
+ _useState2 = (0, _slicedToArray2.default)(_useState, 2),
58
+ dismissed = _useState2[0],
59
+ setDismissed = _useState2[1];
60
+ var handleDismiss = (0, _react.useCallback)(function () {
61
+ setDismissed(true);
62
+ }, []);
42
63
  var _getAppearanceIconSty = (0, _appearanceIcon.getAppearanceIconStyles)(appearance, icon),
43
64
  primaryColor = _getAppearanceIconSty.primaryIconColor,
44
65
  secondaryColor = _getAppearanceIconSty.backgroundColor,
45
66
  Icon = _getAppearanceIconSty.Icon;
46
- var actionElements = actions && actions.type === _react.default.Fragment ? actions.props.children : actions;
47
- var actionsArray = _react.default.Children.toArray(actionElements);
48
- return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
49
- as: "section",
50
- backgroundColor: appearanceMap[appearance],
51
- padding: "space.200",
52
- testId: testId,
67
+ var actionElements = actions && actions.type === _react.Fragment ? actions.props.children : actions;
68
+ var actionsArray = _react.Children.toArray(actionElements);
69
+ return isDismissible && dismissed ? null : /*#__PURE__*/React.createElement("section", {
70
+ "data-testid": testId,
53
71
  ref: ref,
54
- xcss: sectionMessageStyles.container
55
- }, /*#__PURE__*/_react.default.createElement(_compiled.Inline, {
72
+ className: (0, _runtime.ax)([sectionMessageStyles.container, appearanceStyles[appearance]])
73
+ }, /*#__PURE__*/React.createElement(_compiled.Inline, {
56
74
  space: "space.200",
57
75
  alignBlock: "stretch"
58
- }, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
59
- xcss: sectionMessageStyles.bleed
60
- }, /*#__PURE__*/_react.default.createElement(Icon, {
76
+ }, /*#__PURE__*/React.createElement("div", {
77
+ className: (0, _runtime.ax)([sectionMessageStyles.iconContainer])
78
+ }, /*#__PURE__*/React.createElement(Icon, {
61
79
  size: "medium",
62
80
  primaryColor: primaryColor,
63
81
  secondaryColor: secondaryColor
@@ -66,15 +84,16 @@ var SectionMessage = /*#__PURE__*/(0, _react.forwardRef)(function SectionMessage
66
84
  LEGACY_size: "medium",
67
85
  color: primaryColor,
68
86
  spacing: "spacious"
69
- })), /*#__PURE__*/_react.default.createElement(_compiled.Stack, {
87
+ })), /*#__PURE__*/React.createElement(_compiled.Stack, {
70
88
  space: "space.100",
71
- testId: testId && "".concat(testId, "--content")
72
- }, !!title && /*#__PURE__*/_react.default.createElement(_heading.default, {
89
+ testId: testId && "".concat(testId, "--content"),
90
+ xcss: sectionMessageStyles.contentContainer
91
+ }, !!title && /*#__PURE__*/React.createElement(_heading.default, {
73
92
  as: "h2",
74
93
  size: "small"
75
- }, title), /*#__PURE__*/_react.default.createElement(_compiled.Box, {
76
- xcss: sectionMessageStyles.content
77
- }, children), actionsArray.length > 0 && /*#__PURE__*/_react.default.createElement(_compiled.Inline, {
94
+ }, title), /*#__PURE__*/React.createElement("div", {
95
+ className: (0, _runtime.ax)([sectionMessageStyles.content])
96
+ }, children), actionsArray.length > 0 && /*#__PURE__*/React.createElement(_compiled.Inline, {
78
97
  shouldWrap: true,
79
98
  testId: testId && "".concat(testId, "--actions"),
80
99
  separator: "\xB7",
@@ -88,19 +107,21 @@ var SectionMessage = /*#__PURE__*/(0, _react.forwardRef)(function SectionMessage
88
107
  return (
89
108
  /*#__PURE__*/
90
109
  // Only use a listitem role if more than one action is present
91
- _react.default.createElement(_compiled.Inline, {
110
+ React.createElement(_compiled.Inline, {
92
111
  role: actionsArray.length > 1 ? 'listitem' : undefined,
93
112
  key: id
94
113
  }, action)
95
114
  );
96
- })))));
115
+ }))), isDismissible && /*#__PURE__*/React.createElement("div", {
116
+ className: (0, _runtime.ax)([sectionMessageStyles.dismissButtonContainer])
117
+ }, /*#__PURE__*/React.createElement(_new.IconButton, {
118
+ testId: testId && "".concat(testId, "--dismiss-button"),
119
+ label: "Dismiss",
120
+ icon: _cross.default,
121
+ appearance: "subtle",
122
+ onClick: handleDismiss,
123
+ spacing: "compact"
124
+ }))));
97
125
  });
98
- var appearanceMap = {
99
- information: 'color.background.information',
100
- warning: 'color.background.warning',
101
- error: 'color.background.danger',
102
- success: 'color.background.success',
103
- discovery: 'color.background.discovery'
104
- };
105
126
  SectionMessage.displayName = 'SectionMessage';
106
127
  var _default = exports.default = SectionMessage;
package/dist/es2019/section-message.compiled.css CHANGED
@@ -1,6 +1,15 @@
1
1
  ._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
2
2
  ._2rkoglpi{border-radius:var(--ds-border-radius,4px)}
3
+ ._18zrpxbi{padding-inline:var(--ds-space-200,1pc)}
3
4
  ._1mou1i6y{margin-block:var(--ds-space-negative-025,-2px)}
5
+ ._1rjcpxbi{padding-block:var(--ds-space-200,1pc)}
6
+ ._16jlkb7n{flex-grow:1}
7
+ ._19pk1i6y{margin-top:var(--ds-space-negative-025,-2px)}
4
8
  ._1e0c1txw{display:flex}
5
9
  ._1nmz1hna{word-break:break-word}
10
+ ._bfhk1gly{background-color:var(--ds-background-danger,#ffeceb)}
11
+ ._bfhk1nvp{background-color:var(--ds-background-discovery,#f3f0ff)}
12
+ ._bfhk1tzq{background-color:var(--ds-background-warning,#fff7d6)}
13
+ ._bfhk33gi{background-color:var(--ds-background-information,#e9f2ff)}
14
+ ._bfhkmv6i{background-color:var(--ds-background-success,#dcfff1)}
6
15
  ._syaz1fxt{color:var(--ds-text,#172b4d)}
package/dist/es2019/section-message.js CHANGED
@@ -1,16 +1,28 @@
1
1
  /* section-message.tsx generated by @compiled/babel-plugin v0.36.1 */
2
2
  import "./section-message.compiled.css";
3
+ import * as React from 'react';
3
4
  import { ax, ix } from "@compiled/react/runtime";
4
- import React, { forwardRef } from 'react';
5
+ import { Children, forwardRef, Fragment, useCallback, useState } from 'react';
6
+ import { IconButton } from '@atlaskit/button/new';
5
7
  import Heading from '@atlaskit/heading';
8
+ import CrossIcon from '@atlaskit/icon/core/migration/cross';
6
9
  import { fg } from '@atlaskit/platform-feature-flags';
7
- import { Box, Inline, Stack } from '@atlaskit/primitives/compiled';
10
+ import { Inline, Stack } from '@atlaskit/primitives/compiled';
8
11
  import { getAppearanceIconStyles } from './internal/appearance-icon';
9
12
  const sectionMessageStyles = {
10
- container: "_2rkoglpi _1nmz1hna",
11
- bleed: "_1mou1i6y _1e0c1txw",
13
+ container: "_2rkoglpi _1rjcpxbi _18zrpxbi _1nmz1hna",
14
+ iconContainer: "_1mou1i6y _1e0c1txw",
15
+ contentContainer: "_16jlkb7n",
12
16
  content: "_11c82smr _syaz1fxt",
13
- actionsContainer: "_11c82smr"
17
+ actionsContainer: "_11c82smr",
18
+ dismissButtonContainer: "_19pk1i6y"
19
+ };
20
+ const appearanceStyles = {
21
+ information: "_bfhk33gi",
22
+ warning: "_bfhk1tzq",
23
+ error: "_bfhk1gly",
24
+ success: "_bfhkmv6i",
25
+ discovery: "_bfhk1nvp"
14
26
  };
15
27
 
16
28
  /**
@@ -28,27 +40,29 @@ const SectionMessage = /*#__PURE__*/forwardRef(function SectionMessage({
28
40
  actions,
29
41
  title,
30
42
  icon,
43
+ isDismissible,
31
44
  testId
32
45
  }, ref) {
46
+ const [dismissed, setDismissed] = useState(false);
47
+ const handleDismiss = useCallback(() => {
48
+ setDismissed(true);
49
+ }, []);
33
50
  const {
34
51
  primaryIconColor: primaryColor,
35
52
  backgroundColor: secondaryColor,
36
53
  Icon
37
54
  } = getAppearanceIconStyles(appearance, icon);
38
- const actionElements = actions && actions.type === React.Fragment ? actions.props.children : actions;
39
- const actionsArray = React.Children.toArray(actionElements);
40
- return /*#__PURE__*/React.createElement(Box, {
41
- as: "section",
42
- backgroundColor: appearanceMap[appearance],
43
- padding: "space.200",
44
- testId: testId,
55
+ const actionElements = actions && actions.type === Fragment ? actions.props.children : actions;
56
+ const actionsArray = Children.toArray(actionElements);
57
+ return isDismissible && dismissed ? null : /*#__PURE__*/React.createElement("section", {
58
+ "data-testid": testId,
45
59
  ref: ref,
46
- xcss: sectionMessageStyles.container
60
+ className: ax([sectionMessageStyles.container, appearanceStyles[appearance]])
47
61
  }, /*#__PURE__*/React.createElement(Inline, {
48
62
  space: "space.200",
49
63
  alignBlock: "stretch"
50
- }, /*#__PURE__*/React.createElement(Box, {
51
- xcss: sectionMessageStyles.bleed
64
+ }, /*#__PURE__*/React.createElement("div", {
65
+ className: ax([sectionMessageStyles.iconContainer])
52
66
  }, /*#__PURE__*/React.createElement(Icon, {
53
67
  size: "medium",
54
68
  primaryColor: primaryColor,
@@ -60,12 +74,13 @@ const SectionMessage = /*#__PURE__*/forwardRef(function SectionMessage({
60
74
  spacing: "spacious"
61
75
  })), /*#__PURE__*/React.createElement(Stack, {
62
76
  space: "space.100",
63
- testId: testId && `${testId}--content`
77
+ testId: testId && `${testId}--content`,
78
+ xcss: sectionMessageStyles.contentContainer
64
79
  }, !!title && /*#__PURE__*/React.createElement(Heading, {
65
80
  as: "h2",
66
81
  size: "small"
67
- }, title), /*#__PURE__*/React.createElement(Box, {
68
- xcss: sectionMessageStyles.content
82
+ }, title), /*#__PURE__*/React.createElement("div", {
83
+ className: ax([sectionMessageStyles.content])
69
84
  }, children), actionsArray.length > 0 && /*#__PURE__*/React.createElement(Inline, {
70
85
  shouldWrap: true,
71
86
  testId: testId && `${testId}--actions`,
@@ -82,14 +97,16 @@ const SectionMessage = /*#__PURE__*/forwardRef(function SectionMessage({
82
97
  React.createElement(Inline, {
83
98
  role: actionsArray.length > 1 ? 'listitem' : undefined,
84
99
  key: id
85
- }, action))))));
100
+ }, action)))), isDismissible && /*#__PURE__*/React.createElement("div", {
101
+ className: ax([sectionMessageStyles.dismissButtonContainer])
102
+ }, /*#__PURE__*/React.createElement(IconButton, {
103
+ testId: testId && `${testId}--dismiss-button`,
104
+ label: "Dismiss",
105
+ icon: CrossIcon,
106
+ appearance: "subtle",
107
+ onClick: handleDismiss,
108
+ spacing: "compact"
109
+ }))));
86
110
  });
87
- const appearanceMap = {
88
- information: 'color.background.information',
89
- warning: 'color.background.warning',
90
- error: 'color.background.danger',
91
- success: 'color.background.success',
92
- discovery: 'color.background.discovery'
93
- };
94
111
  SectionMessage.displayName = 'SectionMessage';
95
112
  export default SectionMessage;
package/dist/esm/section-message.compiled.css CHANGED
@@ -1,6 +1,15 @@
1
1
  ._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
2
2
  ._2rkoglpi{border-radius:var(--ds-border-radius,4px)}
3
+ ._18zrpxbi{padding-inline:var(--ds-space-200,1pc)}
3
4
  ._1mou1i6y{margin-block:var(--ds-space-negative-025,-2px)}
5
+ ._1rjcpxbi{padding-block:var(--ds-space-200,1pc)}
6
+ ._16jlkb7n{flex-grow:1}
7
+ ._19pk1i6y{margin-top:var(--ds-space-negative-025,-2px)}
4
8
  ._1e0c1txw{display:flex}
5
9
  ._1nmz1hna{word-break:break-word}
10
+ ._bfhk1gly{background-color:var(--ds-background-danger,#ffeceb)}
11
+ ._bfhk1nvp{background-color:var(--ds-background-discovery,#f3f0ff)}
12
+ ._bfhk1tzq{background-color:var(--ds-background-warning,#fff7d6)}
13
+ ._bfhk33gi{background-color:var(--ds-background-information,#e9f2ff)}
14
+ ._bfhkmv6i{background-color:var(--ds-background-success,#dcfff1)}
6
15
  ._syaz1fxt{color:var(--ds-text,#172b4d)}
package/dist/esm/section-message.js CHANGED
@@ -1,16 +1,29 @@
1
1
  /* section-message.tsx generated by @compiled/babel-plugin v0.36.1 */
2
+ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
2
3
  import "./section-message.compiled.css";
4
+ import * as React from 'react';
3
5
  import { ax, ix } from "@compiled/react/runtime";
4
- import React, { forwardRef } from 'react';
6
+ import { Children, forwardRef, Fragment, useCallback, useState } from 'react';
7
+ import { IconButton } from '@atlaskit/button/new';
5
8
  import Heading from '@atlaskit/heading';
9
+ import CrossIcon from '@atlaskit/icon/core/migration/cross';
6
10
  import { fg } from '@atlaskit/platform-feature-flags';
7
- import { Box, Inline, Stack } from '@atlaskit/primitives/compiled';
11
+ import { Inline, Stack } from '@atlaskit/primitives/compiled';
8
12
  import { getAppearanceIconStyles } from './internal/appearance-icon';
9
13
  var sectionMessageStyles = {
10
- container: "_2rkoglpi _1nmz1hna",
11
- bleed: "_1mou1i6y _1e0c1txw",
14
+ container: "_2rkoglpi _1rjcpxbi _18zrpxbi _1nmz1hna",
15
+ iconContainer: "_1mou1i6y _1e0c1txw",
16
+ contentContainer: "_16jlkb7n",
12
17
  content: "_11c82smr _syaz1fxt",
13
- actionsContainer: "_11c82smr"
18
+ actionsContainer: "_11c82smr",
19
+ dismissButtonContainer: "_19pk1i6y"
20
+ };
21
+ var appearanceStyles = {
22
+ information: "_bfhk33gi",
23
+ warning: "_bfhk1tzq",
24
+ error: "_bfhk1gly",
25
+ success: "_bfhkmv6i",
26
+ discovery: "_bfhk1nvp"
14
27
  };
15
28
 
16
29
  /**
@@ -29,25 +42,30 @@ var SectionMessage = /*#__PURE__*/forwardRef(function SectionMessage(_ref, ref)
29
42
  actions = _ref.actions,
30
43
  title = _ref.title,
31
44
  icon = _ref.icon,
45
+ isDismissible = _ref.isDismissible,
32
46
  testId = _ref.testId;
47
+ var _useState = useState(false),
48
+ _useState2 = _slicedToArray(_useState, 2),
49
+ dismissed = _useState2[0],
50
+ setDismissed = _useState2[1];
51
+ var handleDismiss = useCallback(function () {
52
+ setDismissed(true);
53
+ }, []);
33
54
  var _getAppearanceIconSty = getAppearanceIconStyles(appearance, icon),
34
55
  primaryColor = _getAppearanceIconSty.primaryIconColor,
35
56
  secondaryColor = _getAppearanceIconSty.backgroundColor,
36
57
  Icon = _getAppearanceIconSty.Icon;
37
- var actionElements = actions && actions.type === React.Fragment ? actions.props.children : actions;
38
- var actionsArray = React.Children.toArray(actionElements);
39
- return /*#__PURE__*/React.createElement(Box, {
40
- as: "section",
41
- backgroundColor: appearanceMap[appearance],
42
- padding: "space.200",
43
- testId: testId,
58
+ var actionElements = actions && actions.type === Fragment ? actions.props.children : actions;
59
+ var actionsArray = Children.toArray(actionElements);
60
+ return isDismissible && dismissed ? null : /*#__PURE__*/React.createElement("section", {
61
+ "data-testid": testId,
44
62
  ref: ref,
45
- xcss: sectionMessageStyles.container
63
+ className: ax([sectionMessageStyles.container, appearanceStyles[appearance]])
46
64
  }, /*#__PURE__*/React.createElement(Inline, {
47
65
  space: "space.200",
48
66
  alignBlock: "stretch"
49
- }, /*#__PURE__*/React.createElement(Box, {
50
- xcss: sectionMessageStyles.bleed
67
+ }, /*#__PURE__*/React.createElement("div", {
68
+ className: ax([sectionMessageStyles.iconContainer])
51
69
  }, /*#__PURE__*/React.createElement(Icon, {
52
70
  size: "medium",
53
71
  primaryColor: primaryColor,
@@ -59,12 +77,13 @@ var SectionMessage = /*#__PURE__*/forwardRef(function SectionMessage(_ref, ref)
59
77
  spacing: "spacious"
60
78
  })), /*#__PURE__*/React.createElement(Stack, {
61
79
  space: "space.100",
62
- testId: testId && "".concat(testId, "--content")
80
+ testId: testId && "".concat(testId, "--content"),
81
+ xcss: sectionMessageStyles.contentContainer
63
82
  }, !!title && /*#__PURE__*/React.createElement(Heading, {
64
83
  as: "h2",
65
84
  size: "small"
66
- }, title), /*#__PURE__*/React.createElement(Box, {
67
- xcss: sectionMessageStyles.content
85
+ }, title), /*#__PURE__*/React.createElement("div", {
86
+ className: ax([sectionMessageStyles.content])
68
87
  }, children), actionsArray.length > 0 && /*#__PURE__*/React.createElement(Inline, {
69
88
  shouldWrap: true,
70
89
  testId: testId && "".concat(testId, "--actions"),
@@ -84,14 +103,16 @@ var SectionMessage = /*#__PURE__*/forwardRef(function SectionMessage(_ref, ref)
84
103
  key: id
85
104
  }, action)
86
105
  );
87
- })))));
106
+ }))), isDismissible && /*#__PURE__*/React.createElement("div", {
107
+ className: ax([sectionMessageStyles.dismissButtonContainer])
108
+ }, /*#__PURE__*/React.createElement(IconButton, {
109
+ testId: testId && "".concat(testId, "--dismiss-button"),
110
+ label: "Dismiss",
111
+ icon: CrossIcon,
112
+ appearance: "subtle",
113
+ onClick: handleDismiss,
114
+ spacing: "compact"
115
+ }))));
88
116
  });
89
- var appearanceMap = {
90
- information: 'color.background.information',
91
- warning: 'color.background.warning',
92
- error: 'color.background.danger',
93
- success: 'color.background.success',
94
- discovery: 'color.background.discovery'
95
- };
96
117
  SectionMessage.displayName = 'SectionMessage';
97
118
  export default SectionMessage;
package/dist/types/section-message.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import React from 'react';
1
+ /// <reference types="react" />
2
2
  import type { SectionMessageProps } from './types';
3
3
  /**
4
4
  * __Section message__
@@ -9,5 +9,5 @@ import type { SectionMessageProps } from './types';
9
9
  * - [Code](https://atlassian.design/components/section-message/code)
10
10
  * - [Usage](https://atlassian.design/components/section-message/usage)
11
11
  */
12
- declare const SectionMessage: React.ForwardRefExoticComponent<SectionMessageProps & React.RefAttributes<HTMLElement>>;
12
+ declare const SectionMessage: import("react").ForwardRefExoticComponent<SectionMessageProps & import("react").RefAttributes<HTMLElement>>;
13
13
  export default SectionMessage;
package/dist/types/types.d.ts CHANGED
@@ -33,6 +33,12 @@ export interface SectionMessageProps {
33
33
  * to see how to provide this icon.
34
34
  */
35
35
  icon?: React.ElementType;
36
+ /**
37
+ * Displays a dismiss button, that allows the user to dismiss the message.
38
+ * It will be removed from the DOM immediately and will not be re-rendered.
39
+ * It does not handle persistence of the dismissed state across page reloads or remounts.
40
+ */
41
+ isDismissible?: boolean;
36
42
  /**
37
43
  * A `testId` prop is a unique string that appears as a data attribute `data-testid`
38
44
  * in the rendered code, serving as a hook for automated tests.
package/dist/types-ts4.5/section-message.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import React from 'react';
1
+ /// <reference types="react" />
2
2
  import type { SectionMessageProps } from './types';
3
3
  /**
4
4
  * __Section message__
@@ -9,5 +9,5 @@ import type { SectionMessageProps } from './types';
9
9
  * - [Code](https://atlassian.design/components/section-message/code)
10
10
  * - [Usage](https://atlassian.design/components/section-message/usage)
11
11
  */
12
- declare const SectionMessage: React.ForwardRefExoticComponent<SectionMessageProps & React.RefAttributes<HTMLElement>>;
12
+ declare const SectionMessage: import("react").ForwardRefExoticComponent<SectionMessageProps & import("react").RefAttributes<HTMLElement>>;
13
13
  export default SectionMessage;
package/dist/types-ts4.5/types.d.ts CHANGED
@@ -33,6 +33,12 @@ export interface SectionMessageProps {
33
33
  * to see how to provide this icon.
34
34
  */
35
35
  icon?: React.ElementType;
36
+ /**
37
+ * Displays a dismiss button, that allows the user to dismiss the message.
38
+ * It will be removed from the DOM immediately and will not be re-rendered.
39
+ * It does not handle persistence of the dismissed state across page reloads or remounts.
40
+ */
41
+ isDismissible?: boolean;
36
42
  /**
37
43
  * A `testId` prop is a unique string that appears as a data attribute `data-testid`
38
44
  * in the rendered code, serving as a hook for automated tests.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/section-message",
3
- "version": "8.4.0",
3
+ "version": "8.5.0",
4
4
  "description": "A section message is used to alert users to a particular section of the screen.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -38,11 +38,11 @@
38
38
  ".": "./src/index.tsx"
39
39
  },
40
40
  "dependencies": {
41
- "@atlaskit/button": "^23.2.0",
41
+ "@atlaskit/button": "^23.3.0",
42
42
  "@atlaskit/codemod-utils": "^4.2.0",
43
43
  "@atlaskit/css": "^0.12.0",
44
44
  "@atlaskit/heading": "^5.2.0",
45
- "@atlaskit/icon": "^27.6.0",
45
+ "@atlaskit/icon": "^27.7.0",
46
46
  "@atlaskit/link": "^3.2.0",
47
47
  "@atlaskit/platform-feature-flags": "^1.1.0",
48
48
  "@atlaskit/primitives": "^14.10.0",
@@ -66,6 +66,7 @@
66
66
  "@atlassian/feature-flags-test-utils": "^0.3.0",
67
67
  "@atlassian/ssr-tests": "^0.2.0",
68
68
  "@testing-library/react": "^13.4.0",
69
+ "@testing-library/user-event": "^14.4.3",
69
70
  "react-dom": "^18.2.0",
70
71
  "typescript": "~5.4.2"
71
72
  },