@atlaskit/inline-message 15.3.5 → 15.3.7

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 (14) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/constants/package.json +1 -1
  3. package/dist/cjs/components/inline-message/index.compiled.css +20 -4
  4. package/dist/cjs/components/inline-message/index.js +59 -36
  5. package/dist/es2019/components/inline-message/index.compiled.css +20 -4
  6. package/dist/es2019/components/inline-message/index.js +55 -37
  7. package/dist/esm/components/inline-message/index.compiled.css +20 -4
  8. package/dist/esm/components/inline-message/index.js +60 -37
  9. package/dist/types/components/inline-message/index.d.ts +7 -7
  10. package/dist/types/types.d.ts +1 -1
  11. package/dist/types-ts4.5/components/inline-message/index.d.ts +7 -7
  12. package/dist/types-ts4.5/types.d.ts +1 -1
  13. package/package.json +10 -10
  14. package/types/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @atlaskit/inline-message
2
2
 
3
+ ## 15.3.7
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
9
+ ## 15.3.6
10
+
11
+ ### Patch Changes
12
+
13
+ - Updated dependencies
14
+
3
15
  ## 15.3.5
4
16
 
5
17
  ### Patch Changes
package/constants/package.json CHANGED
@@ -8,7 +8,7 @@
8
8
  ],
9
9
  "types": "../dist/types/constants.d.ts",
10
10
  "typesVersions": {
11
- ">=4.5 <5.4": {
11
+ ">=4.5 <5.9": {
12
12
  "*": [
13
13
  "../dist/types-ts4.5/constants.d.ts"
14
14
  ]
package/dist/cjs/components/inline-message/index.compiled.css CHANGED
@@ -1,14 +1,30 @@
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
+ ._18zrze3t{padding-inline:var(--ds-space-0,0)}
3
+ ._1rjcze3t{padding-block:var(--ds-space-0,0)}
4
+ ._1bsb1wug{width:auto}
5
+ ._1e0c116y{display:inline-flex}
1
6
  ._1e0c1o8l{display:inline-block}
2
- ._1o0knqa1:hover [data-ds--inline-message--button]{text-decoration-style:solid}
7
+ ._1q51pxbi{padding-block-start:var(--ds-space-200,1pc)}
3
8
  ._1yyu1kum:hover [data-ds--inline-message--icon]{color:var(--icon-accent-color)}
4
- ._38q98stv:hover [data-ds--inline-message--button]{text-decoration-line:underline}
5
- ._kvh01r31:hover [data-ds--inline-message--button]{text-decoration-color:currentColor}
9
+ ._4cvr1q9y{align-items:baseline}
10
+ ._4t3i1wug{height:auto}
11
+ ._85i5pxbi{padding-block-end:var(--ds-space-200,1pc)}
12
+ ._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
13
+ ._bozg1ejb{padding-inline-start:var(--ds-space-300,24px)}
14
+ ._kqswh2mm{position:relative}
15
+ ._o5721q9c{white-space:nowrap}
6
16
  ._p12f1osq{max-width:100%}
17
+ ._s7n41q9y{vertical-align:baseline}
18
+ ._syaz1gjq{color:var(--ds-text-subtle,#44546f)}
7
19
  ._x5v913wx{--icon-accent-color:var(--ds-icon-discovery,#8777d9)}
8
20
  ._x5v91fgg{--icon-accent-color:var(--ds-icon-success,#57d9a3)}
9
21
  ._x5v91r2e{--icon-accent-color:var(--ds-icon-brand,#0065ff)}
10
22
  ._x5v9f6ss{--icon-accent-color:var(--ds-icon-warning,#ffc400)}
11
23
  ._x5v9k8x7{--icon-accent-color:var(--ds-icon-danger,#ff5630)}
24
+ ._y4ti1ejb{padding-inline-end:var(--ds-space-300,24px)}
12
25
  ._1hvwt94y:focus{outline-width:1px}
13
26
  ._49pcnqa1:focus{outline-style:solid}
14
- ._nt751r31:focus{outline-color:currentColor}
27
+ ._nt751r31:focus{outline-color:currentColor}
28
+ ._1bnx8stv:hover{text-decoration-line:underline}
29
+ ._9oik1r31:hover{text-decoration-color:currentColor}
30
+ ._jf4cnqa1:hover{text-decoration-style:solid}
package/dist/cjs/components/inline-message/index.js CHANGED
@@ -11,14 +11,21 @@ require("./index.compiled.css");
11
11
  var _react = _interopRequireWildcard(require("react"));
12
12
  var React = _react;
13
13
  var _runtime = require("@compiled/react/runtime");
14
+ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
15
+ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
14
16
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
15
- var _button = _interopRequireDefault(require("@atlaskit/button"));
16
- var _inlineDialog = _interopRequireDefault(require("@atlaskit/inline-dialog"));
17
+ var _useId = require("@atlaskit/ds-lib/use-id");
18
+ var _popup = _interopRequireDefault(require("@atlaskit/popup"));
17
19
  var _compiled = require("@atlaskit/primitives/compiled");
18
20
  var _colors = require("@atlaskit/theme/colors");
19
21
  var _messageIcon = _interopRequireDefault(require("../message-icon"));
22
+ var _excluded = ["ref"];
20
23
  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); }
21
- var rootStyles = null;
24
+ var styles = {
25
+ contentStyles: "_bozg1ejb _y4ti1ejb _1q51pxbi _85i5pxbi",
26
+ rootStyles: "_1e0c1o8l _p12f1osq _1yyu1kum _nt751r31 _49pcnqa1 _1hvwt94y",
27
+ pressableStyles: "_11c82smr _1rjcze3t _18zrze3t _1e0c116y _bfhksm61 _syaz1gjq _o5721q9c _kqswh2mm _4cvr1q9y _p12f1osq _4t3i1wug _1bsb1wug _s7n41q9y _9oik1r31 _1bnx8stv _jf4cnqa1"
28
+ };
22
29
  var iconColor = {
23
30
  connectivity: "_x5v91r2e",
24
31
  confirmation: "_x5v91fgg",
@@ -68,6 +75,7 @@ var InlineMessage = function InlineMessage(_ref) {
68
75
  _useState2 = (0, _slicedToArray2.default)(_useState, 2),
69
76
  isOpen = _useState2[0],
70
77
  setIsOpen = _useState2[1];
78
+ var id = (0, _useId.useId)();
71
79
  var toggleDialog = (0, _react.useCallback)(function () {
72
80
  setIsOpen(function (oldState) {
73
81
  return !oldState;
@@ -78,41 +86,56 @@ var InlineMessage = function InlineMessage(_ref) {
78
86
  }, [setIsOpen]);
79
87
  return /*#__PURE__*/React.createElement("div", {
80
88
  "data-testid": testId,
81
- className: (0, _runtime.ax)(["_1e0c1o8l _p12f1osq _nt751r31 _49pcnqa1 _1hvwt94y _kvh01r31 _38q98stv _1o0knqa1 _1yyu1kum", iconColor[appearance]])
82
- }, /*#__PURE__*/React.createElement(_inlineDialog.default, {
89
+ className: (0, _runtime.ax)([styles.rootStyles, iconColor[appearance]])
90
+ }, /*#__PURE__*/React.createElement(_popup.default, {
83
91
  onClose: onCloseDialog,
84
- content: children,
92
+ content: function content() {
93
+ return /*#__PURE__*/React.createElement(_compiled.Box, {
94
+ xcss: styles.contentStyles
95
+ }, children);
96
+ },
85
97
  isOpen: isOpen,
86
98
  placement: placement,
87
- testId: testId && "".concat(testId, "--inline-dialog"),
88
- fallbackPlacements: fallbackPlacements
89
- }, /*#__PURE__*/React.createElement(_button.default, {
90
- "data-ds--inline-message--button": true,
91
- appearance: "subtle-link",
92
- onClick: toggleDialog,
93
- spacing: "none",
94
- testId: testId && "".concat(testId, "--button"),
95
- "aria-expanded": isOpen
96
- }, /*#__PURE__*/React.createElement(_compiled.Inline, {
97
- as: "span",
98
- space: "space.050",
99
- alignBlock: "center"
100
- }, /*#__PURE__*/React.createElement(_messageIcon.default, {
101
- isOpen: isOpen,
102
- appearance: appearance,
103
- label: iconLabel,
104
- spacing: spacing
105
- }), /*#__PURE__*/React.createElement(_compiled.Inline, {
106
- as: "span",
107
- space: "space.100"
108
- }, title && /*#__PURE__*/React.createElement(_compiled.Text, {
109
- weight: "medium",
110
- testId: testId && "".concat(testId, "--title")
111
- }, title), secondaryText && /*#__PURE__*/React.createElement(_compiled.Text, {
112
- weight: "medium",
113
- color: "color.text.subtlest",
114
- maxLines: 1,
115
- testId: testId && "".concat(testId, "--text")
116
- }, secondaryText))))));
99
+ testId: testId && "".concat(testId, "--popup"),
100
+ fallbackPlacements: fallbackPlacements,
101
+ shouldRenderToParent: true,
102
+ role: "dialog",
103
+ titleId: id,
104
+ shouldDisableFocusLock: true,
105
+ autoFocus: false,
106
+ trigger: function trigger(_ref2) {
107
+ var ref = _ref2.ref,
108
+ triggerProps = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
109
+ return /*#__PURE__*/React.createElement(_compiled.Pressable, (0, _extends2.default)({}, triggerProps, {
110
+ ref: ref,
111
+ id: id,
112
+ "data-ds--inline-message--button": true,
113
+ onClick: toggleDialog,
114
+ testId: testId && "".concat(testId, "--button"),
115
+ xcss: styles.pressableStyles,
116
+ "aria-expanded": isOpen
117
+ }), /*#__PURE__*/React.createElement(_compiled.Inline, {
118
+ as: "span",
119
+ space: "space.050",
120
+ alignBlock: "center"
121
+ }, /*#__PURE__*/React.createElement(_messageIcon.default, {
122
+ isOpen: isOpen,
123
+ appearance: appearance,
124
+ label: iconLabel,
125
+ spacing: spacing
126
+ }), /*#__PURE__*/React.createElement(_compiled.Inline, {
127
+ as: "span",
128
+ space: "space.100"
129
+ }, title && /*#__PURE__*/React.createElement(_compiled.Text, {
130
+ weight: "medium",
131
+ testId: testId && "".concat(testId, "--title")
132
+ }, title), secondaryText && /*#__PURE__*/React.createElement(_compiled.Text, {
133
+ weight: "medium",
134
+ color: "color.text.subtlest",
135
+ maxLines: 1,
136
+ testId: testId && "".concat(testId, "--text")
137
+ }, secondaryText))));
138
+ }
139
+ }));
117
140
  };
118
141
  var _default = exports.default = InlineMessage;
package/dist/es2019/components/inline-message/index.compiled.css CHANGED
@@ -1,14 +1,30 @@
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
+ ._18zrze3t{padding-inline:var(--ds-space-0,0)}
3
+ ._1rjcze3t{padding-block:var(--ds-space-0,0)}
4
+ ._1bsb1wug{width:auto}
5
+ ._1e0c116y{display:inline-flex}
1
6
  ._1e0c1o8l{display:inline-block}
2
- ._1o0knqa1:hover [data-ds--inline-message--button]{text-decoration-style:solid}
7
+ ._1q51pxbi{padding-block-start:var(--ds-space-200,1pc)}
3
8
  ._1yyu1kum:hover [data-ds--inline-message--icon]{color:var(--icon-accent-color)}
4
- ._38q98stv:hover [data-ds--inline-message--button]{text-decoration-line:underline}
5
- ._kvh01r31:hover [data-ds--inline-message--button]{text-decoration-color:currentColor}
9
+ ._4cvr1q9y{align-items:baseline}
10
+ ._4t3i1wug{height:auto}
11
+ ._85i5pxbi{padding-block-end:var(--ds-space-200,1pc)}
12
+ ._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
13
+ ._bozg1ejb{padding-inline-start:var(--ds-space-300,24px)}
14
+ ._kqswh2mm{position:relative}
15
+ ._o5721q9c{white-space:nowrap}
6
16
  ._p12f1osq{max-width:100%}
17
+ ._s7n41q9y{vertical-align:baseline}
18
+ ._syaz1gjq{color:var(--ds-text-subtle,#44546f)}
7
19
  ._x5v913wx{--icon-accent-color:var(--ds-icon-discovery,#8777d9)}
8
20
  ._x5v91fgg{--icon-accent-color:var(--ds-icon-success,#57d9a3)}
9
21
  ._x5v91r2e{--icon-accent-color:var(--ds-icon-brand,#0065ff)}
10
22
  ._x5v9f6ss{--icon-accent-color:var(--ds-icon-warning,#ffc400)}
11
23
  ._x5v9k8x7{--icon-accent-color:var(--ds-icon-danger,#ff5630)}
24
+ ._y4ti1ejb{padding-inline-end:var(--ds-space-300,24px)}
12
25
  ._1hvwt94y:focus{outline-width:1px}
13
26
  ._49pcnqa1:focus{outline-style:solid}
14
- ._nt751r31:focus{outline-color:currentColor}
27
+ ._nt751r31:focus{outline-color:currentColor}
28
+ ._1bnx8stv:hover{text-decoration-line:underline}
29
+ ._9oik1r31:hover{text-decoration-color:currentColor}
30
+ ._jf4cnqa1:hover{text-decoration-style:solid}
package/dist/es2019/components/inline-message/index.js CHANGED
@@ -1,14 +1,19 @@
1
1
  /* index.tsx generated by @compiled/babel-plugin v0.36.1 */
2
+ import _extends from "@babel/runtime/helpers/extends";
2
3
  import "./index.compiled.css";
3
4
  import * as React from 'react';
4
5
  import { ax, ix } from "@compiled/react/runtime";
5
6
  import { useCallback, useState } from 'react';
6
- import Button from '@atlaskit/button';
7
- import InlineDialog from '@atlaskit/inline-dialog';
8
- import { Inline, Text } from '@atlaskit/primitives/compiled';
7
+ import { useId } from '@atlaskit/ds-lib/use-id';
8
+ import Popup from '@atlaskit/popup';
9
+ import { Box, Inline, Pressable, Text } from '@atlaskit/primitives/compiled';
9
10
  import { B300, G200, P200, R300, Y200 } from '@atlaskit/theme/colors';
10
11
  import MessageIcon from '../message-icon';
11
- const rootStyles = null;
12
+ const styles = {
13
+ contentStyles: "_bozg1ejb _y4ti1ejb _1q51pxbi _85i5pxbi",
14
+ rootStyles: "_1e0c1o8l _p12f1osq _1yyu1kum _nt751r31 _49pcnqa1 _1hvwt94y",
15
+ pressableStyles: "_11c82smr _1rjcze3t _18zrze3t _1e0c116y _bfhksm61 _syaz1gjq _o5721q9c _kqswh2mm _4cvr1q9y _p12f1osq _4t3i1wug _1bsb1wug _s7n41q9y _9oik1r31 _1bnx8stv _jf4cnqa1"
16
+ };
12
17
  const iconColor = {
13
18
  connectivity: "_x5v91r2e",
14
19
  confirmation: "_x5v91fgg",
@@ -51,47 +56,60 @@ const InlineMessage = ({
51
56
  fallbackPlacements
52
57
  }) => {
53
58
  const [isOpen, setIsOpen] = useState(false);
59
+ const id = useId();
54
60
  const toggleDialog = useCallback(() => {
55
61
  setIsOpen(oldState => !oldState);
56
62
  }, [setIsOpen]);
57
63
  const onCloseDialog = useCallback(() => setIsOpen(false), [setIsOpen]);
58
64
  return /*#__PURE__*/React.createElement("div", {
59
65
  "data-testid": testId,
60
- className: ax(["_1e0c1o8l _p12f1osq _nt751r31 _49pcnqa1 _1hvwt94y _kvh01r31 _38q98stv _1o0knqa1 _1yyu1kum", iconColor[appearance]])
61
- }, /*#__PURE__*/React.createElement(InlineDialog, {
66
+ className: ax([styles.rootStyles, iconColor[appearance]])
67
+ }, /*#__PURE__*/React.createElement(Popup, {
62
68
  onClose: onCloseDialog,
63
- content: children,
69
+ content: () => /*#__PURE__*/React.createElement(Box, {
70
+ xcss: styles.contentStyles
71
+ }, children),
64
72
  isOpen: isOpen,
65
73
  placement: placement,
66
- testId: testId && `${testId}--inline-dialog`,
67
- fallbackPlacements: fallbackPlacements
68
- }, /*#__PURE__*/React.createElement(Button, {
69
- "data-ds--inline-message--button": true,
70
- appearance: "subtle-link",
71
- onClick: toggleDialog,
72
- spacing: "none",
73
- testId: testId && `${testId}--button`,
74
- "aria-expanded": isOpen
75
- }, /*#__PURE__*/React.createElement(Inline, {
76
- as: "span",
77
- space: "space.050",
78
- alignBlock: "center"
79
- }, /*#__PURE__*/React.createElement(MessageIcon, {
80
- isOpen: isOpen,
81
- appearance: appearance,
82
- label: iconLabel,
83
- spacing: spacing
84
- }), /*#__PURE__*/React.createElement(Inline, {
85
- as: "span",
86
- space: "space.100"
87
- }, title && /*#__PURE__*/React.createElement(Text, {
88
- weight: "medium",
89
- testId: testId && `${testId}--title`
90
- }, title), secondaryText && /*#__PURE__*/React.createElement(Text, {
91
- weight: "medium",
92
- color: "color.text.subtlest",
93
- maxLines: 1,
94
- testId: testId && `${testId}--text`
95
- }, secondaryText))))));
74
+ testId: testId && `${testId}--popup`,
75
+ fallbackPlacements: fallbackPlacements,
76
+ shouldRenderToParent: true,
77
+ role: "dialog",
78
+ titleId: id,
79
+ shouldDisableFocusLock: true,
80
+ autoFocus: false,
81
+ trigger: ({
82
+ ref,
83
+ ...triggerProps
84
+ }) => /*#__PURE__*/React.createElement(Pressable, _extends({}, triggerProps, {
85
+ ref: ref,
86
+ id: id,
87
+ "data-ds--inline-message--button": true,
88
+ onClick: toggleDialog,
89
+ testId: testId && `${testId}--button`,
90
+ xcss: styles.pressableStyles,
91
+ "aria-expanded": isOpen
92
+ }), /*#__PURE__*/React.createElement(Inline, {
93
+ as: "span",
94
+ space: "space.050",
95
+ alignBlock: "center"
96
+ }, /*#__PURE__*/React.createElement(MessageIcon, {
97
+ isOpen: isOpen,
98
+ appearance: appearance,
99
+ label: iconLabel,
100
+ spacing: spacing
101
+ }), /*#__PURE__*/React.createElement(Inline, {
102
+ as: "span",
103
+ space: "space.100"
104
+ }, title && /*#__PURE__*/React.createElement(Text, {
105
+ weight: "medium",
106
+ testId: testId && `${testId}--title`
107
+ }, title), secondaryText && /*#__PURE__*/React.createElement(Text, {
108
+ weight: "medium",
109
+ color: "color.text.subtlest",
110
+ maxLines: 1,
111
+ testId: testId && `${testId}--text`
112
+ }, secondaryText))))
113
+ }));
96
114
  };
97
115
  export default InlineMessage;
package/dist/esm/components/inline-message/index.compiled.css CHANGED
@@ -1,14 +1,30 @@
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
+ ._18zrze3t{padding-inline:var(--ds-space-0,0)}
3
+ ._1rjcze3t{padding-block:var(--ds-space-0,0)}
4
+ ._1bsb1wug{width:auto}
5
+ ._1e0c116y{display:inline-flex}
1
6
  ._1e0c1o8l{display:inline-block}
2
- ._1o0knqa1:hover [data-ds--inline-message--button]{text-decoration-style:solid}
7
+ ._1q51pxbi{padding-block-start:var(--ds-space-200,1pc)}
3
8
  ._1yyu1kum:hover [data-ds--inline-message--icon]{color:var(--icon-accent-color)}
4
- ._38q98stv:hover [data-ds--inline-message--button]{text-decoration-line:underline}
5
- ._kvh01r31:hover [data-ds--inline-message--button]{text-decoration-color:currentColor}
9
+ ._4cvr1q9y{align-items:baseline}
10
+ ._4t3i1wug{height:auto}
11
+ ._85i5pxbi{padding-block-end:var(--ds-space-200,1pc)}
12
+ ._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
13
+ ._bozg1ejb{padding-inline-start:var(--ds-space-300,24px)}
14
+ ._kqswh2mm{position:relative}
15
+ ._o5721q9c{white-space:nowrap}
6
16
  ._p12f1osq{max-width:100%}
17
+ ._s7n41q9y{vertical-align:baseline}
18
+ ._syaz1gjq{color:var(--ds-text-subtle,#44546f)}
7
19
  ._x5v913wx{--icon-accent-color:var(--ds-icon-discovery,#8777d9)}
8
20
  ._x5v91fgg{--icon-accent-color:var(--ds-icon-success,#57d9a3)}
9
21
  ._x5v91r2e{--icon-accent-color:var(--ds-icon-brand,#0065ff)}
10
22
  ._x5v9f6ss{--icon-accent-color:var(--ds-icon-warning,#ffc400)}
11
23
  ._x5v9k8x7{--icon-accent-color:var(--ds-icon-danger,#ff5630)}
24
+ ._y4ti1ejb{padding-inline-end:var(--ds-space-300,24px)}
12
25
  ._1hvwt94y:focus{outline-width:1px}
13
26
  ._49pcnqa1:focus{outline-style:solid}
14
- ._nt751r31:focus{outline-color:currentColor}
27
+ ._nt751r31:focus{outline-color:currentColor}
28
+ ._1bnx8stv:hover{text-decoration-line:underline}
29
+ ._9oik1r31:hover{text-decoration-color:currentColor}
30
+ ._jf4cnqa1:hover{text-decoration-style:solid}
package/dist/esm/components/inline-message/index.js CHANGED
@@ -1,15 +1,22 @@
1
1
  /* index.tsx generated by @compiled/babel-plugin v0.36.1 */
2
+ import _extends from "@babel/runtime/helpers/extends";
3
+ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
2
4
  import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
5
+ var _excluded = ["ref"];
3
6
  import "./index.compiled.css";
4
7
  import * as React from 'react';
5
8
  import { ax, ix } from "@compiled/react/runtime";
6
9
  import { useCallback, useState } from 'react';
7
- import Button from '@atlaskit/button';
8
- import InlineDialog from '@atlaskit/inline-dialog';
9
- import { Inline, Text } from '@atlaskit/primitives/compiled';
10
+ import { useId } from '@atlaskit/ds-lib/use-id';
11
+ import Popup from '@atlaskit/popup';
12
+ import { Box, Inline, Pressable, Text } from '@atlaskit/primitives/compiled';
10
13
  import { B300, G200, P200, R300, Y200 } from '@atlaskit/theme/colors';
11
14
  import MessageIcon from '../message-icon';
12
- var rootStyles = null;
15
+ var styles = {
16
+ contentStyles: "_bozg1ejb _y4ti1ejb _1q51pxbi _85i5pxbi",
17
+ rootStyles: "_1e0c1o8l _p12f1osq _1yyu1kum _nt751r31 _49pcnqa1 _1hvwt94y",
18
+ pressableStyles: "_11c82smr _1rjcze3t _18zrze3t _1e0c116y _bfhksm61 _syaz1gjq _o5721q9c _kqswh2mm _4cvr1q9y _p12f1osq _4t3i1wug _1bsb1wug _s7n41q9y _9oik1r31 _1bnx8stv _jf4cnqa1"
19
+ };
13
20
  var iconColor = {
14
21
  connectivity: "_x5v91r2e",
15
22
  confirmation: "_x5v91fgg",
@@ -59,6 +66,7 @@ var InlineMessage = function InlineMessage(_ref) {
59
66
  _useState2 = _slicedToArray(_useState, 2),
60
67
  isOpen = _useState2[0],
61
68
  setIsOpen = _useState2[1];
69
+ var id = useId();
62
70
  var toggleDialog = useCallback(function () {
63
71
  setIsOpen(function (oldState) {
64
72
  return !oldState;
@@ -69,41 +77,56 @@ var InlineMessage = function InlineMessage(_ref) {
69
77
  }, [setIsOpen]);
70
78
  return /*#__PURE__*/React.createElement("div", {
71
79
  "data-testid": testId,
72
- className: ax(["_1e0c1o8l _p12f1osq _nt751r31 _49pcnqa1 _1hvwt94y _kvh01r31 _38q98stv _1o0knqa1 _1yyu1kum", iconColor[appearance]])
73
- }, /*#__PURE__*/React.createElement(InlineDialog, {
80
+ className: ax([styles.rootStyles, iconColor[appearance]])
81
+ }, /*#__PURE__*/React.createElement(Popup, {
74
82
  onClose: onCloseDialog,
75
- content: children,
83
+ content: function content() {
84
+ return /*#__PURE__*/React.createElement(Box, {
85
+ xcss: styles.contentStyles
86
+ }, children);
87
+ },
76
88
  isOpen: isOpen,
77
89
  placement: placement,
78
- testId: testId && "".concat(testId, "--inline-dialog"),
79
- fallbackPlacements: fallbackPlacements
80
- }, /*#__PURE__*/React.createElement(Button, {
81
- "data-ds--inline-message--button": true,
82
- appearance: "subtle-link",
83
- onClick: toggleDialog,
84
- spacing: "none",
85
- testId: testId && "".concat(testId, "--button"),
86
- "aria-expanded": isOpen
87
- }, /*#__PURE__*/React.createElement(Inline, {
88
- as: "span",
89
- space: "space.050",
90
- alignBlock: "center"
91
- }, /*#__PURE__*/React.createElement(MessageIcon, {
92
- isOpen: isOpen,
93
- appearance: appearance,
94
- label: iconLabel,
95
- spacing: spacing
96
- }), /*#__PURE__*/React.createElement(Inline, {
97
- as: "span",
98
- space: "space.100"
99
- }, title && /*#__PURE__*/React.createElement(Text, {
100
- weight: "medium",
101
- testId: testId && "".concat(testId, "--title")
102
- }, title), secondaryText && /*#__PURE__*/React.createElement(Text, {
103
- weight: "medium",
104
- color: "color.text.subtlest",
105
- maxLines: 1,
106
- testId: testId && "".concat(testId, "--text")
107
- }, secondaryText))))));
90
+ testId: testId && "".concat(testId, "--popup"),
91
+ fallbackPlacements: fallbackPlacements,
92
+ shouldRenderToParent: true,
93
+ role: "dialog",
94
+ titleId: id,
95
+ shouldDisableFocusLock: true,
96
+ autoFocus: false,
97
+ trigger: function trigger(_ref2) {
98
+ var ref = _ref2.ref,
99
+ triggerProps = _objectWithoutProperties(_ref2, _excluded);
100
+ return /*#__PURE__*/React.createElement(Pressable, _extends({}, triggerProps, {
101
+ ref: ref,
102
+ id: id,
103
+ "data-ds--inline-message--button": true,
104
+ onClick: toggleDialog,
105
+ testId: testId && "".concat(testId, "--button"),
106
+ xcss: styles.pressableStyles,
107
+ "aria-expanded": isOpen
108
+ }), /*#__PURE__*/React.createElement(Inline, {
109
+ as: "span",
110
+ space: "space.050",
111
+ alignBlock: "center"
112
+ }, /*#__PURE__*/React.createElement(MessageIcon, {
113
+ isOpen: isOpen,
114
+ appearance: appearance,
115
+ label: iconLabel,
116
+ spacing: spacing
117
+ }), /*#__PURE__*/React.createElement(Inline, {
118
+ as: "span",
119
+ space: "space.100"
120
+ }, title && /*#__PURE__*/React.createElement(Text, {
121
+ weight: "medium",
122
+ testId: testId && "".concat(testId, "--title")
123
+ }, title), secondaryText && /*#__PURE__*/React.createElement(Text, {
124
+ weight: "medium",
125
+ color: "color.text.subtlest",
126
+ maxLines: 1,
127
+ testId: testId && "".concat(testId, "--text")
128
+ }, secondaryText))));
129
+ }
130
+ }));
108
131
  };
109
132
  export default InlineMessage;
package/dist/types/components/inline-message/index.d.ts CHANGED
@@ -3,18 +3,18 @@
3
3
  * @jsx jsx
4
4
  */
5
5
  import { type FC, type ReactNode } from 'react';
6
- import { type InlineDialogProps } from '@atlaskit/inline-dialog';
7
- import type { IconAppearance, IconSpacing, InlineDialogPlacement } from '../../types';
8
- interface InlineMessageProps extends Pick<InlineDialogProps, 'fallbackPlacements'> {
6
+ import { type PopupProps } from '@atlaskit/popup';
7
+ import type { IconAppearance, IconSpacing, PopupPlacement } from '../../types';
8
+ interface InlineMessageProps extends Pick<PopupProps, 'fallbackPlacements'> {
9
9
  /**
10
- * The elements to be displayed by the inline dialog.
10
+ * The elements to be displayed by the popup.
11
11
  */
12
12
  children?: ReactNode;
13
13
  /**
14
- * The placement to be passed to the inline dialog. Determines where around
14
+ * The placement to be passed to the popup. Determines where around
15
15
  * the text the dialog is displayed.
16
16
  */
17
- placement?: InlineDialogPlacement;
17
+ placement?: PopupPlacement;
18
18
  /**
19
19
  * Text to display second.
20
20
  */
@@ -38,7 +38,7 @@ interface InlineMessageProps extends Pick<InlineDialogProps, 'fallbackPlacements
38
38
  *
39
39
  * The value of `testId` is attached to the different sub-components in Inline Message:
40
40
  * - `testId`: the top-level inline message component
41
- * - `testId--inline-dialog`: the content of the message
41
+ * - `testId--popup`: the content of the message
42
42
  * - `testId--button`: the button element that opens the dialog on press
43
43
  * - `testId--title`: the title of the message
44
44
  * - `testId--text`: the text of the message
package/dist/types/types.d.ts CHANGED
@@ -7,4 +7,4 @@ export interface Icon {
7
7
  export type IconAppearanceMap = Record<IconAppearance, Icon>;
8
8
  export type IconAppearance = 'connectivity' | 'confirmation' | 'info' | 'warning' | 'error';
9
9
  export type IconSpacing = 'spacious' | 'compact';
10
- export type InlineDialogPlacement = 'auto-start' | 'auto' | 'auto-end' | 'top-start' | 'top' | 'top-end' | 'right-start' | 'right' | 'right-end' | 'bottom-end' | 'bottom' | 'bottom-start' | 'left-end' | 'left' | 'left-start';
10
+ export type { Placement as PopupPlacement } from '@atlaskit/popper';
package/dist/types-ts4.5/components/inline-message/index.d.ts CHANGED
@@ -3,18 +3,18 @@
3
3
  * @jsx jsx
4
4
  */
5
5
  import { type FC, type ReactNode } from 'react';
6
- import { type InlineDialogProps } from '@atlaskit/inline-dialog';
7
- import type { IconAppearance, IconSpacing, InlineDialogPlacement } from '../../types';
8
- interface InlineMessageProps extends Pick<InlineDialogProps, 'fallbackPlacements'> {
6
+ import { type PopupProps } from '@atlaskit/popup';
7
+ import type { IconAppearance, IconSpacing, PopupPlacement } from '../../types';
8
+ interface InlineMessageProps extends Pick<PopupProps, 'fallbackPlacements'> {
9
9
  /**
10
- * The elements to be displayed by the inline dialog.
10
+ * The elements to be displayed by the popup.
11
11
  */
12
12
  children?: ReactNode;
13
13
  /**
14
- * The placement to be passed to the inline dialog. Determines where around
14
+ * The placement to be passed to the popup. Determines where around
15
15
  * the text the dialog is displayed.
16
16
  */
17
- placement?: InlineDialogPlacement;
17
+ placement?: PopupPlacement;
18
18
  /**
19
19
  * Text to display second.
20
20
  */
@@ -38,7 +38,7 @@ interface InlineMessageProps extends Pick<InlineDialogProps, 'fallbackPlacements
38
38
  *
39
39
  * The value of `testId` is attached to the different sub-components in Inline Message:
40
40
  * - `testId`: the top-level inline message component
41
- * - `testId--inline-dialog`: the content of the message
41
+ * - `testId--popup`: the content of the message
42
42
  * - `testId--button`: the button element that opens the dialog on press
43
43
  * - `testId--title`: the title of the message
44
44
  * - `testId--text`: the text of the message
package/dist/types-ts4.5/types.d.ts CHANGED
@@ -7,4 +7,4 @@ export interface Icon {
7
7
  export type IconAppearanceMap = Record<IconAppearance, Icon>;
8
8
  export type IconAppearance = 'connectivity' | 'confirmation' | 'info' | 'warning' | 'error';
9
9
  export type IconSpacing = 'spacious' | 'compact';
10
- export type InlineDialogPlacement = 'auto-start' | 'auto' | 'auto-end' | 'top-start' | 'top' | 'top-end' | 'right-start' | 'right' | 'right-end' | 'bottom-end' | 'bottom' | 'bottom-start' | 'left-end' | 'left' | 'left-start';
10
+ export type { Placement as PopupPlacement } from '@atlaskit/popper';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/inline-message",
3
- "version": "15.3.5",
3
+ "version": "15.3.7",
4
4
  "description": "An inline message lets users know when important information is available or when an action is required.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -29,14 +29,16 @@
29
29
  }
30
30
  },
31
31
  "dependencies": {
32
- "@atlaskit/button": "^23.2.0",
33
- "@atlaskit/icon": "^27.5.0",
34
- "@atlaskit/inline-dialog": "^17.2.0",
32
+ "@atlaskit/button": "^23.4.0",
33
+ "@atlaskit/ds-lib": "^5.0.0",
34
+ "@atlaskit/icon": "^28.0.0",
35
35
  "@atlaskit/link": "^3.2.0",
36
36
  "@atlaskit/platform-feature-flags": "^1.1.0",
37
- "@atlaskit/primitives": "^14.10.0",
37
+ "@atlaskit/popper": "^7.1.0",
38
+ "@atlaskit/popup": "^4.3.0",
39
+ "@atlaskit/primitives": "^14.11.0",
38
40
  "@atlaskit/theme": "^19.0.0",
39
- "@atlaskit/tokens": "^5.6.0",
41
+ "@atlaskit/tokens": "^6.0.0",
40
42
  "@babel/runtime": "^7.0.0",
41
43
  "@compiled/react": "^0.18.3"
42
44
  },
@@ -48,15 +50,13 @@
48
50
  "@af/integration-testing": "workspace:^",
49
51
  "@af/visual-regression": "workspace:^",
50
52
  "@atlaskit/docs": "^11.0.0",
51
- "@atlaskit/ds-lib": "^4.1.0",
52
53
  "@atlaskit/heading": "^5.2.0",
53
54
  "@atlaskit/modal-dialog": "^14.3.0",
54
- "@atlaskit/section-message": "^8.2.0",
55
+ "@atlaskit/section-message": "^8.5.0",
55
56
  "@atlassian/ssr-tests": "^0.2.0",
56
57
  "@testing-library/react": "^13.4.0",
57
58
  "@testing-library/user-event": "^14.4.3",
58
- "react-dom": "^18.2.0",
59
- "typescript": "~5.4.2"
59
+ "react-dom": "^18.2.0"
60
60
  },
61
61
  "keywords": [
62
62
  "atlaskit",
package/types/package.json CHANGED
@@ -8,7 +8,7 @@
8
8
  ],
9
9
  "types": "../dist/types/types.d.ts",
10
10
  "typesVersions": {
11
- ">=4.5 <5.4": {
11
+ ">=4.5 <5.9": {
12
12
  "*": [
13
13
  "../dist/types-ts4.5/types.d.ts"
14
14
  ]