@atlaskit/section-message 9.0.0 → 9.1.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 (9) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/dist/cjs/section-message-action.compiled.css +4 -4
  3. package/dist/cjs/section-message-action.js +12 -7
  4. package/dist/es2019/section-message-action.compiled.css +4 -4
  5. package/dist/es2019/section-message-action.js +14 -9
  6. package/dist/esm/section-message-action.compiled.css +4 -4
  7. package/dist/esm/section-message-action.js +13 -8
  8. package/dist/types/section-message-action.d.ts +1 -1
  9. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,12 @@
1
1
  # @atlaskit/section-message
2
2
 
3
+ ## 9.1.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`e2597c94593a1`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e2597c94593a1) -
8
+ Add ref forwarding to section message actions.
9
+
3
10
  ## 9.0.0
4
11
 
5
12
  ### Major Changes
package/dist/cjs/section-message-action.compiled.css CHANGED
@@ -1,13 +1,13 @@
1
1
  ._11c8fhey{font:var(--ds-font-body,normal 400 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
2
2
  ._2rkolb4i{border-radius:var(--ds-radius-xsmall,2px)}
3
- ._19bvze3t{padding-left:var(--ds-space-0,0)}
3
+ ._1q51ze3t{padding-block-start:var(--ds-space-0,0)}
4
+ ._85i5ze3t{padding-block-end:var(--ds-space-0,0)}
4
5
  ._bfhk1j28{background-color:transparent}
5
- ._ca0qze3t{padding-top:var(--ds-space-0,0)}
6
+ ._bozgze3t{padding-inline-start:var(--ds-space-0,0)}
6
7
  ._k48p1wq8{font-weight:var(--ds-font-weight-medium,500)}
7
8
  ._k48pi7a9{font-weight:var(--ds-font-weight-regular,400)}
8
- ._n3tdze3t{padding-bottom:var(--ds-space-0,0)}
9
9
  ._syaz13af{color:var(--ds-link,#1868db)}
10
- ._u5f3ze3t{padding-right:var(--ds-space-0,0)}
10
+ ._y4tize3t{padding-inline-end:var(--ds-space-0,0)}
11
11
  ._1bnx8stv:hover{text-decoration-line:underline}
12
12
  ._30l313af:hover{color:var(--ds-link,#1868db)}
13
13
  ._9oik1r31:hover{text-decoration-color:currentColor}
package/dist/cjs/section-message-action.js CHANGED
@@ -20,7 +20,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
20
20
  var styles = {
21
21
  common: "_11c8fhey",
22
22
  anchor: "_k48pi7a9",
23
- pressable: "_syaz13af _k48p1wq8 _bfhk1j28 _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t _9oik1r31 _1bnx8stv _jf4cnqa1 _30l313af _9h8h12zz",
23
+ pressable: "_syaz13af _k48p1wq8 _bfhk1j28 _1q51ze3t _y4tize3t _85i5ze3t _bozgze3t _9oik1r31 _1bnx8stv _jf4cnqa1 _30l313af _9h8h12zz",
24
24
  pressableT26Shape: "_2rkolb4i"
25
25
  };
26
26
 
@@ -33,7 +33,7 @@ var styles = {
33
33
  *
34
34
  * - [Examples](https://atlassian.design/components/section-message/examples#actions)
35
35
  */
36
- var SectionMessageAction = /*#__PURE__*/(0, _react.memo)(function SectionMessageAction(_ref) {
36
+ var SectionMessageAction = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(function SectionMessageAction(_ref, ref) {
37
37
  var children = _ref.children,
38
38
  onClick = _ref.onClick,
39
39
  href = _ref.href,
@@ -48,20 +48,23 @@ var SectionMessageAction = /*#__PURE__*/(0, _react.memo)(function SectionMessage
48
48
  testId: testId,
49
49
  onClick: onClick,
50
50
  href: href,
51
- target: target
51
+ target: target,
52
+ ref: ref
52
53
  }, children));
53
54
  }
54
55
  if (onClick) {
55
56
  return /*#__PURE__*/React.createElement(_compiled.Pressable, {
56
57
  testId: testId,
57
58
  onClick: onClick,
58
- xcss: (0, _css.cx)(styles.common, styles.pressable, (0, _platformFeatureFlags.fg)('platform-dst-shape-theme-default') && styles.pressableT26Shape)
59
+ xcss: (0, _css.cx)(styles.common, styles.pressable, (0, _platformFeatureFlags.fg)('platform-dst-shape-theme-default') && styles.pressableT26Shape),
60
+ ref: ref
59
61
  }, children);
60
62
  }
61
63
  return /*#__PURE__*/React.createElement(_compiled.Box, {
62
64
  as: "span",
63
65
  testId: testId,
64
- xcss: styles.common
66
+ xcss: styles.common,
67
+ ref: ref
65
68
  }, children);
66
69
  }
67
70
 
@@ -72,7 +75,9 @@ var SectionMessageAction = /*#__PURE__*/(0, _react.memo)(function SectionMessage
72
75
  spacing: "none",
73
76
  onClick: onClick,
74
77
  href: href,
75
- component: href ? linkComponent : undefined
78
+ component: href ? linkComponent : undefined,
79
+ ref: ref
76
80
  }, children) : /*#__PURE__*/React.createElement(_react.Fragment, null, children);
77
- });
81
+ }));
82
+ SectionMessageAction.displayName = 'SectionMessageAction';
78
83
  var _default = exports.default = SectionMessageAction;
package/dist/es2019/section-message-action.compiled.css CHANGED
@@ -1,13 +1,13 @@
1
1
  ._11c8fhey{font:var(--ds-font-body,normal 400 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
2
2
  ._2rkolb4i{border-radius:var(--ds-radius-xsmall,2px)}
3
- ._19bvze3t{padding-left:var(--ds-space-0,0)}
3
+ ._1q51ze3t{padding-block-start:var(--ds-space-0,0)}
4
+ ._85i5ze3t{padding-block-end:var(--ds-space-0,0)}
4
5
  ._bfhk1j28{background-color:transparent}
5
- ._ca0qze3t{padding-top:var(--ds-space-0,0)}
6
+ ._bozgze3t{padding-inline-start:var(--ds-space-0,0)}
6
7
  ._k48p1wq8{font-weight:var(--ds-font-weight-medium,500)}
7
8
  ._k48pi7a9{font-weight:var(--ds-font-weight-regular,400)}
8
- ._n3tdze3t{padding-bottom:var(--ds-space-0,0)}
9
9
  ._syaz13af{color:var(--ds-link,#1868db)}
10
- ._u5f3ze3t{padding-right:var(--ds-space-0,0)}
10
+ ._y4tize3t{padding-inline-end:var(--ds-space-0,0)}
11
11
  ._1bnx8stv:hover{text-decoration-line:underline}
12
12
  ._30l313af:hover{color:var(--ds-link,#1868db)}
13
13
  ._9oik1r31:hover{text-decoration-color:currentColor}
package/dist/es2019/section-message-action.js CHANGED
@@ -2,7 +2,7 @@
2
2
  import "./section-message-action.compiled.css";
3
3
  import * as React from 'react';
4
4
  import { ax, ix } from "@compiled/react/runtime";
5
- import { Fragment, memo } from 'react';
5
+ import { forwardRef, Fragment, memo } from 'react';
6
6
  import Button from '@atlaskit/button/standard-button';
7
7
  import { cx } from '@atlaskit/css';
8
8
  import Link from '@atlaskit/link';
@@ -11,7 +11,7 @@ import { Box, Pressable } from '@atlaskit/primitives/compiled';
11
11
  const styles = {
12
12
  common: "_11c8fhey",
13
13
  anchor: "_k48pi7a9",
14
- pressable: "_syaz13af _k48p1wq8 _bfhk1j28 _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t _9oik1r31 _1bnx8stv _jf4cnqa1 _30l313af _9h8h12zz",
14
+ pressable: "_syaz13af _k48p1wq8 _bfhk1j28 _1q51ze3t _y4tize3t _85i5ze3t _bozgze3t _9oik1r31 _1bnx8stv _jf4cnqa1 _30l313af _9h8h12zz",
15
15
  pressableT26Shape: "_2rkolb4i"
16
16
  };
17
17
 
@@ -24,14 +24,14 @@ const styles = {
24
24
  *
25
25
  * - [Examples](https://atlassian.design/components/section-message/examples#actions)
26
26
  */
27
- const SectionMessageAction = /*#__PURE__*/memo(function SectionMessageAction({
27
+ const SectionMessageAction = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function SectionMessageAction({
28
28
  children,
29
29
  onClick,
30
30
  href,
31
31
  testId,
32
32
  linkComponent,
33
33
  target
34
- }) {
34
+ }, ref) {
35
35
  if (!linkComponent) {
36
36
  if (href) {
37
37
  return /*#__PURE__*/React.createElement("span", {
@@ -40,20 +40,23 @@ const SectionMessageAction = /*#__PURE__*/memo(function SectionMessageAction({
40
40
  testId: testId,
41
41
  onClick: onClick,
42
42
  href: href,
43
- target: target
43
+ target: target,
44
+ ref: ref
44
45
  }, children));
45
46
  }
46
47
  if (onClick) {
47
48
  return /*#__PURE__*/React.createElement(Pressable, {
48
49
  testId: testId,
49
50
  onClick: onClick,
50
- xcss: cx(styles.common, styles.pressable, fg('platform-dst-shape-theme-default') && styles.pressableT26Shape)
51
+ xcss: cx(styles.common, styles.pressable, fg('platform-dst-shape-theme-default') && styles.pressableT26Shape),
52
+ ref: ref
51
53
  }, children);
52
54
  }
53
55
  return /*#__PURE__*/React.createElement(Box, {
54
56
  as: "span",
55
57
  testId: testId,
56
- xcss: styles.common
58
+ xcss: styles.common,
59
+ ref: ref
57
60
  }, children);
58
61
  }
59
62
 
@@ -64,7 +67,9 @@ const SectionMessageAction = /*#__PURE__*/memo(function SectionMessageAction({
64
67
  spacing: "none",
65
68
  onClick: onClick,
66
69
  href: href,
67
- component: href ? linkComponent : undefined
70
+ component: href ? linkComponent : undefined,
71
+ ref: ref
68
72
  }, children) : /*#__PURE__*/React.createElement(Fragment, null, children);
69
- });
73
+ }));
74
+ SectionMessageAction.displayName = 'SectionMessageAction';
70
75
  export default SectionMessageAction;
package/dist/esm/section-message-action.compiled.css CHANGED
@@ -1,13 +1,13 @@
1
1
  ._11c8fhey{font:var(--ds-font-body,normal 400 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
2
2
  ._2rkolb4i{border-radius:var(--ds-radius-xsmall,2px)}
3
- ._19bvze3t{padding-left:var(--ds-space-0,0)}
3
+ ._1q51ze3t{padding-block-start:var(--ds-space-0,0)}
4
+ ._85i5ze3t{padding-block-end:var(--ds-space-0,0)}
4
5
  ._bfhk1j28{background-color:transparent}
5
- ._ca0qze3t{padding-top:var(--ds-space-0,0)}
6
+ ._bozgze3t{padding-inline-start:var(--ds-space-0,0)}
6
7
  ._k48p1wq8{font-weight:var(--ds-font-weight-medium,500)}
7
8
  ._k48pi7a9{font-weight:var(--ds-font-weight-regular,400)}
8
- ._n3tdze3t{padding-bottom:var(--ds-space-0,0)}
9
9
  ._syaz13af{color:var(--ds-link,#1868db)}
10
- ._u5f3ze3t{padding-right:var(--ds-space-0,0)}
10
+ ._y4tize3t{padding-inline-end:var(--ds-space-0,0)}
11
11
  ._1bnx8stv:hover{text-decoration-line:underline}
12
12
  ._30l313af:hover{color:var(--ds-link,#1868db)}
13
13
  ._9oik1r31:hover{text-decoration-color:currentColor}
package/dist/esm/section-message-action.js CHANGED
@@ -2,7 +2,7 @@
2
2
  import "./section-message-action.compiled.css";
3
3
  import * as React from 'react';
4
4
  import { ax, ix } from "@compiled/react/runtime";
5
- import { Fragment, memo } from 'react';
5
+ import { forwardRef, Fragment, memo } from 'react';
6
6
  import Button from '@atlaskit/button/standard-button';
7
7
  import { cx } from '@atlaskit/css';
8
8
  import Link from '@atlaskit/link';
@@ -11,7 +11,7 @@ import { Box, Pressable } from '@atlaskit/primitives/compiled';
11
11
  var styles = {
12
12
  common: "_11c8fhey",
13
13
  anchor: "_k48pi7a9",
14
- pressable: "_syaz13af _k48p1wq8 _bfhk1j28 _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t _9oik1r31 _1bnx8stv _jf4cnqa1 _30l313af _9h8h12zz",
14
+ pressable: "_syaz13af _k48p1wq8 _bfhk1j28 _1q51ze3t _y4tize3t _85i5ze3t _bozgze3t _9oik1r31 _1bnx8stv _jf4cnqa1 _30l313af _9h8h12zz",
15
15
  pressableT26Shape: "_2rkolb4i"
16
16
  };
17
17
 
@@ -24,7 +24,7 @@ var styles = {
24
24
  *
25
25
  * - [Examples](https://atlassian.design/components/section-message/examples#actions)
26
26
  */
27
- var SectionMessageAction = /*#__PURE__*/memo(function SectionMessageAction(_ref) {
27
+ var SectionMessageAction = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function SectionMessageAction(_ref, ref) {
28
28
  var children = _ref.children,
29
29
  onClick = _ref.onClick,
30
30
  href = _ref.href,
@@ -39,20 +39,23 @@ var SectionMessageAction = /*#__PURE__*/memo(function SectionMessageAction(_ref)
39
39
  testId: testId,
40
40
  onClick: onClick,
41
41
  href: href,
42
- target: target
42
+ target: target,
43
+ ref: ref
43
44
  }, children));
44
45
  }
45
46
  if (onClick) {
46
47
  return /*#__PURE__*/React.createElement(Pressable, {
47
48
  testId: testId,
48
49
  onClick: onClick,
49
- xcss: cx(styles.common, styles.pressable, fg('platform-dst-shape-theme-default') && styles.pressableT26Shape)
50
+ xcss: cx(styles.common, styles.pressable, fg('platform-dst-shape-theme-default') && styles.pressableT26Shape),
51
+ ref: ref
50
52
  }, children);
51
53
  }
52
54
  return /*#__PURE__*/React.createElement(Box, {
53
55
  as: "span",
54
56
  testId: testId,
55
- xcss: styles.common
57
+ xcss: styles.common,
58
+ ref: ref
56
59
  }, children);
57
60
  }
58
61
 
@@ -63,7 +66,9 @@ var SectionMessageAction = /*#__PURE__*/memo(function SectionMessageAction(_ref)
63
66
  spacing: "none",
64
67
  onClick: onClick,
65
68
  href: href,
66
- component: href ? linkComponent : undefined
69
+ component: href ? linkComponent : undefined,
70
+ ref: ref
67
71
  }, children) : /*#__PURE__*/React.createElement(Fragment, null, children);
68
- });
72
+ }));
73
+ SectionMessageAction.displayName = 'SectionMessageAction';
69
74
  export default SectionMessageAction;
package/dist/types/section-message-action.d.ts CHANGED
@@ -8,5 +8,5 @@ import type { SectionMessageActionProps } from './types';
8
8
  *
9
9
  * - [Examples](https://atlassian.design/components/section-message/examples#actions)
10
10
  */
11
- declare const SectionMessageAction: import('react').NamedExoticComponent<SectionMessageActionProps>;
11
+ declare const SectionMessageAction: React.MemoExoticComponent<React.ForwardRefExoticComponent<React.PropsWithoutRef<SectionMessageActionProps> & React.RefAttributes<HTMLElement>>>;
12
12
  export default SectionMessageAction;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/section-message",
3
- "version": "9.0.0",
3
+ "version": "9.1.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/"
@@ -31,7 +31,7 @@
31
31
  }
32
32
  },
33
33
  "dependencies": {
34
- "@atlaskit/button": "^24.0.0",
34
+ "@atlaskit/button": "^24.1.0",
35
35
  "@atlaskit/css": "^1.0.0",
36
36
  "@atlaskit/heading": "^6.0.0",
37
37
  "@atlaskit/icon": "^36.0.0",