@atlaskit/inline-dialog 15.3.0 → 16.0.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 (13) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/dist/cjs/InlineDialog/index.js +9 -17
  3. package/dist/cjs/InlineDialog/styled/container.compiled.css +12 -0
  4. package/dist/cjs/InlineDialog/styled/container.js +27 -37
  5. package/dist/es2019/InlineDialog/index.js +8 -15
  6. package/dist/es2019/InlineDialog/styled/container.compiled.css +12 -0
  7. package/dist/es2019/InlineDialog/styled/container.js +22 -43
  8. package/dist/esm/InlineDialog/index.js +9 -16
  9. package/dist/esm/InlineDialog/styled/container.compiled.css +12 -0
  10. package/dist/esm/InlineDialog/styled/container.js +22 -38
  11. package/dist/types/InlineDialog/index.d.ts +0 -4
  12. package/dist/types-ts4.5/InlineDialog/index.d.ts +0 -4
  13. package/package.json +9 -8
package/CHANGELOG.md CHANGED
@@ -1,5 +1,29 @@
1
1
  # @atlaskit/inline-dialog
2
2
 
3
+ ## 16.0.0
4
+
5
+ ### Major Changes
6
+
7
+ - [#174572](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/174572)
8
+ [`a6642c2335879`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a6642c2335879) -
9
+ Migrated from `@emotion/react` to `@compiled/react` in order to improve performance, align with
10
+ the rest of the Atlaskit techstack, and support React 18 Streaming SSR.
11
+
12
+ Please note, in order to use this version of `@atlaskit/inline-dialog`, you will need to ensure
13
+ that your bundler is configured to handle `.css` imports correctly. Most bundlers come with
14
+ built-in support for `.css` imports, so you may not need to do anything. If you are using a
15
+ different bundler, please refer to the documentation for that bundler to understand how to handle
16
+ `.css` imports.
17
+
18
+ For more information on the migration, please refer to
19
+ [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).
20
+
21
+ ## 15.3.1
22
+
23
+ ### Patch Changes
24
+
25
+ - Updated dependencies
26
+
3
27
  ## 15.3.0
4
28
 
5
29
  ### Minor Changes
package/dist/cjs/InlineDialog/index.js CHANGED
@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
7
7
  });
8
8
  exports.default = void 0;
9
9
  var _react = _interopRequireWildcard(require("react"));
10
- var _react2 = require("@emotion/react");
11
10
  var _bindEventListener = require("bind-event-listener");
12
11
  var _analyticsNext = require("@atlaskit/analytics-next");
13
12
  var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
@@ -18,13 +17,6 @@ var _nodeResolverWrapper = _interopRequireDefault(require("./node-resolver-wrapp
18
17
  var _container = require("./styled/container");
19
18
  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); }
20
19
  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; }
21
- /**
22
- * @jsxRuntime classic
23
- * @jsx jsx
24
- */
25
-
26
- // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
27
-
28
20
  var checkIsChildOfPortal = function checkIsChildOfPortal(node) {
29
21
  if (!node) {
30
22
  return false;
@@ -57,7 +49,7 @@ var CloseManager = function CloseManager(_ref) {
57
49
  }, [handleClick, isLayerDisabled]);
58
50
 
59
51
  // only create a dummy component for using ths hook in class component
60
- return (0, _react2.jsx)("span", null);
52
+ return /*#__PURE__*/_react.default.createElement("span", null);
61
53
  };
62
54
  var InlineDialog = /*#__PURE__*/(0, _react.memo)(function InlineDialog(_ref2) {
63
55
  var _ref2$isOpen = _ref2.isOpen,
@@ -86,7 +78,7 @@ var InlineDialog = /*#__PURE__*/(0, _react.memo)(function InlineDialog(_ref2) {
86
78
  action: 'closed',
87
79
  componentName: 'inlineDialog',
88
80
  packageName: "@atlaskit/inline-dialog",
89
- packageVersion: "15.3.0"
81
+ packageVersion: "16.0.0"
90
82
  });
91
83
 
92
84
  // we put this into a ref to avoid handleCloseRequest having this as a dependency
@@ -141,13 +133,13 @@ var InlineDialog = /*#__PURE__*/(0, _react.memo)(function InlineDialog(_ref2) {
141
133
  }
142
134
  handleCloseRequest(event);
143
135
  }, [handleCloseRequest, containerRef, triggerRef]);
144
- var popper = isOpen ? (0, _react2.jsx)(_popper.Popper, {
136
+ var popper = isOpen ? /*#__PURE__*/_react.default.createElement(_popper.Popper, {
145
137
  placement: placement,
146
138
  strategy: strategy
147
139
  }, function (_ref3) {
148
140
  var _ref4 = _ref3.ref,
149
141
  style = _ref3.style;
150
- return (0, _react2.jsx)(_container.Container, {
142
+ return /*#__PURE__*/_react.default.createElement(_container.Container, {
151
143
  onBlur: onContentBlur,
152
144
  onFocus: onContentFocus,
153
145
  onClick: onContentClick,
@@ -167,9 +159,9 @@ var InlineDialog = /*#__PURE__*/(0, _react.memo)(function InlineDialog(_ref2) {
167
159
  testId: testId
168
160
  }, typeof content === 'function' ? content() : content);
169
161
  }) : null;
170
- return (0, _react2.jsx)(_popper.Manager, null, (0, _react2.jsx)(_popper.Reference, null, function (_ref5) {
162
+ return /*#__PURE__*/_react.default.createElement(_popper.Manager, null, /*#__PURE__*/_react.default.createElement(_popper.Reference, null, function (_ref5) {
171
163
  var ref = _ref5.ref;
172
- return (0, _react2.jsx)(_nodeResolverWrapper.default, {
164
+ return /*#__PURE__*/_react.default.createElement(_nodeResolverWrapper.default, {
173
165
  innerRef: function innerRef(node) {
174
166
  triggerRef.current = node;
175
167
  if (typeof ref === 'function') {
@@ -180,10 +172,10 @@ var InlineDialog = /*#__PURE__*/(0, _react.memo)(function InlineDialog(_ref2) {
180
172
  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
181
173
  },
182
174
  hasNodeResolver: !(0, _platformFeatureFlags.fg)('platform_design_system_team_portal_logic_r18_fix')
183
- }, (0, _react2.jsx)(_react.default.Fragment, null, children));
184
- }), isOpen ? (0, _react2.jsx)(_layering.Layering, {
175
+ }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children));
176
+ }), isOpen ? /*#__PURE__*/_react.default.createElement(_layering.Layering, {
185
177
  isDisabled: false
186
- }, popper, (0, _react2.jsx)(CloseManager, {
178
+ }, popper, /*#__PURE__*/_react.default.createElement(CloseManager, {
187
179
  handleEscapeClose: handleCloseRequest,
188
180
  handleClick: handleClick
189
181
  })) : popper);
package/dist/cjs/InlineDialog/styled/container.compiled.css ADDED
@@ -0,0 +1,12 @@
1
+ ._11q717w6{background:var(--_902zhz)}
2
+ ._1yt4t9rj{padding:var(--_186zcqb)}
3
+ ._2rko1sit{border-radius:var(--ds-border-radius,3px)}
4
+ ._16qs11gm{box-shadow:var(--_uojrza)}
5
+ ._1pbyowjs{z-index:300}
6
+ ._c71l184t{max-height:var(--_n6nwya)}
7
+ ._p12f184t{max-width:var(--_n6nwya)}
8
+ ._syaz1xgh{color:var(--_1yif2ym)}
9
+ ._vchh18uv{box-sizing:initial}
10
+ ._1hvw1o36:focus{outline-width:medium}
11
+ ._49pcglyw:focus{outline-style:none}
12
+ ._nt751r31:focus{outline-color:currentColor}
package/dist/cjs/InlineDialog/styled/container.js CHANGED
@@ -1,37 +1,26 @@
1
+ /* container.tsx generated by @compiled/babel-plugin v0.32.2 */
1
2
  "use strict";
2
3
 
3
4
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
5
+ var _typeof = require("@babel/runtime/helpers/typeof");
4
6
  Object.defineProperty(exports, "__esModule", {
5
7
  value: true
6
8
  });
7
9
  exports.Container = void 0;
10
+ require("./container.compiled.css");
11
+ var _react = _interopRequireWildcard(require("react"));
12
+ var React = _react;
13
+ var _runtime = require("@compiled/react/runtime");
8
14
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
9
- var _react = require("react");
10
- var _react2 = require("@emotion/react");
11
15
  var _colors = require("@atlaskit/theme/colors");
12
- var _constants = require("@atlaskit/theme/constants");
16
+ 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); }
17
+ 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; }
13
18
  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; }
14
- 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; } /**
15
- * @jsxRuntime classic
16
- * @jsx jsx
17
- */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
19
+ 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; }
18
20
  var CSS_THEME_BACKGROUND = '--theme-background';
19
21
  var CSS_THEME_COLOR = '--theme-color';
20
22
  var CSS_THEME_BOX_SHADOW = '--theme-box-shadow';
21
- var containerStyles = (0, _react2.css)({
22
- boxSizing: 'content-box',
23
- maxWidth: "".concat(8 * 56, "px"),
24
- maxHeight: "".concat(8 * 56, "px"),
25
- padding: "var(--ds-space-200, 16px)".concat(" ", "var(--ds-space-300, 24px)"),
26
- zIndex: _constants.layers.dialog(),
27
- background: "var(".concat(CSS_THEME_BACKGROUND, ")"),
28
- borderRadius: "var(--ds-border-radius, 3px)",
29
- boxShadow: "var(".concat(CSS_THEME_BOX_SHADOW, ")"),
30
- color: "var(".concat(CSS_THEME_COLOR, ")"),
31
- '&:focus': {
32
- outline: 'none'
33
- }
34
- });
23
+ var containerStyles = null;
35
24
  /**
36
25
  * __Container__
37
26
  *
@@ -40,26 +29,27 @@ var containerStyles = (0, _react2.css)({
40
29
  *
41
30
  */
42
31
  var Container = exports.Container = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
43
- var _objectSpread2;
44
32
  var children = _ref.children,
45
33
  onBlur = _ref.onBlur,
46
34
  onClick = _ref.onClick,
47
35
  onFocus = _ref.onFocus,
48
36
  style = _ref.style,
49
37
  testId = _ref.testId;
50
- return (
51
- // Unfortunately, these are used for products to pass through. Inline Dialog is being deprecated anyway
52
- // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
53
- (0, _react2.jsx)("div", {
54
- css: containerStyles,
55
- "data-testid": testId,
56
- onBlur: onBlur,
57
- onClick: onClick,
58
- onFocus: onFocus,
59
- ref: ref
60
- // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
61
- ,
62
- style: _objectSpread((_objectSpread2 = {}, (0, _defineProperty2.default)(_objectSpread2, CSS_THEME_BACKGROUND, "var(--ds-surface-overlay, ".concat(_colors.N0, ")")), (0, _defineProperty2.default)(_objectSpread2, CSS_THEME_COLOR, "var(--ds-text, ".concat(_colors.N900, ")")), (0, _defineProperty2.default)(_objectSpread2, CSS_THEME_BOX_SHADOW, "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A), ")")), _objectSpread2), style)
63
- }, typeof children === 'function' ? children() : children)
64
- );
38
+ return /*#__PURE__*/React.createElement("div", {
39
+ "data-testid": testId,
40
+ onBlur: onBlur,
41
+ onClick: onClick,
42
+ onFocus: onFocus,
43
+ ref: ref
44
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
45
+ ,
46
+ className: (0, _runtime.ax)(["_vchh18uv _p12f184t _c71l184t _1yt4t9rj _1pbyowjs _11q717w6 _2rko1sit _16qs11gm _syaz1xgh _nt751r31 _49pcglyw _1hvw1o36"]),
47
+ style: _objectSpread(_objectSpread({}, _objectSpread((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, CSS_THEME_BACKGROUND, "var(--ds-surface-overlay, ".concat(_colors.N0, ")")), CSS_THEME_COLOR, "var(--ds-text, ".concat(_colors.N900, ")")), CSS_THEME_BOX_SHADOW, "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A), ")")), style)), {}, {
48
+ "--_n6nwya": (0, _runtime.ix)("".concat(8 * 56, "px")),
49
+ "--_186zcqb": (0, _runtime.ix)("var(--ds-space-200, 16px)".concat(" ", "var(--ds-space-300, 24px)")),
50
+ "--_902zhz": (0, _runtime.ix)("var(".concat(CSS_THEME_BACKGROUND, ")")),
51
+ "--_uojrza": (0, _runtime.ix)("var(".concat(CSS_THEME_BOX_SHADOW, ")")),
52
+ "--_1yif2ym": (0, _runtime.ix)("var(".concat(CSS_THEME_COLOR, ")"))
53
+ })
54
+ }, typeof children === 'function' ? children() : children);
65
55
  });
package/dist/es2019/InlineDialog/index.js CHANGED
@@ -1,11 +1,4 @@
1
- /**
2
- * @jsxRuntime classic
3
- * @jsx jsx
4
- */
5
1
  import React, { memo, useCallback, useEffect, useRef } from 'react';
6
-
7
- // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
8
- import { jsx } from '@emotion/react';
9
2
  import { bind } from 'bind-event-listener';
10
3
  import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
11
4
  import noop from '@atlaskit/ds-lib/noop';
@@ -48,7 +41,7 @@ const CloseManager = ({
48
41
  }, [handleClick, isLayerDisabled]);
49
42
 
50
43
  // only create a dummy component for using ths hook in class component
51
- return jsx("span", null);
44
+ return /*#__PURE__*/React.createElement("span", null);
52
45
  };
53
46
  const InlineDialog = /*#__PURE__*/memo(function InlineDialog({
54
47
  isOpen = false,
@@ -69,7 +62,7 @@ const InlineDialog = /*#__PURE__*/memo(function InlineDialog({
69
62
  action: 'closed',
70
63
  componentName: 'inlineDialog',
71
64
  packageName: "@atlaskit/inline-dialog",
72
- packageVersion: "15.3.0"
65
+ packageVersion: "16.0.0"
73
66
  });
74
67
 
75
68
  // we put this into a ref to avoid handleCloseRequest having this as a dependency
@@ -126,13 +119,13 @@ const InlineDialog = /*#__PURE__*/memo(function InlineDialog({
126
119
  }
127
120
  handleCloseRequest(event);
128
121
  }, [handleCloseRequest, containerRef, triggerRef]);
129
- const popper = isOpen ? jsx(Popper, {
122
+ const popper = isOpen ? /*#__PURE__*/React.createElement(Popper, {
130
123
  placement: placement,
131
124
  strategy: strategy
132
125
  }, ({
133
126
  ref,
134
127
  style
135
- }) => jsx(Container, {
128
+ }) => /*#__PURE__*/React.createElement(Container, {
136
129
  onBlur: onContentBlur,
137
130
  onFocus: onContentFocus,
138
131
  onClick: onContentClick,
@@ -151,9 +144,9 @@ const InlineDialog = /*#__PURE__*/memo(function InlineDialog({
151
144
  style: style,
152
145
  testId: testId
153
146
  }, typeof content === 'function' ? content() : content)) : null;
154
- return jsx(Manager, null, jsx(Reference, null, ({
147
+ return /*#__PURE__*/React.createElement(Manager, null, /*#__PURE__*/React.createElement(Reference, null, ({
155
148
  ref
156
- }) => jsx(NodeResolverWrapper, {
149
+ }) => /*#__PURE__*/React.createElement(NodeResolverWrapper, {
157
150
  innerRef: node => {
158
151
  triggerRef.current = node;
159
152
  if (typeof ref === 'function') {
@@ -164,9 +157,9 @@ const InlineDialog = /*#__PURE__*/memo(function InlineDialog({
164
157
  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
165
158
  },
166
159
  hasNodeResolver: !fg('platform_design_system_team_portal_logic_r18_fix')
167
- }, jsx(React.Fragment, null, children))), isOpen ? jsx(Layering, {
160
+ }, /*#__PURE__*/React.createElement(React.Fragment, null, children))), isOpen ? /*#__PURE__*/React.createElement(Layering, {
168
161
  isDisabled: false
169
- }, popper, jsx(CloseManager, {
162
+ }, popper, /*#__PURE__*/React.createElement(CloseManager, {
170
163
  handleEscapeClose: handleCloseRequest,
171
164
  handleClick: handleClick
172
165
  })) : popper);
package/dist/es2019/InlineDialog/styled/container.compiled.css ADDED
@@ -0,0 +1,12 @@
1
+ ._11q7gluh{background:var(--theme-background)}
2
+ ._1yt44ar7{padding:var(--ds-space-200,1pc) var(--ds-space-300,24px)}
3
+ ._2rko1sit{border-radius:var(--ds-border-radius,3px)}
4
+ ._16qs1r44{box-shadow:var(--theme-box-shadow)}
5
+ ._1pbyowjs{z-index:300}
6
+ ._c71llti4{max-height:28pc}
7
+ ._p12flti4{max-width:28pc}
8
+ ._syazjslb{color:var(--theme-color)}
9
+ ._vchh18uv{box-sizing:initial}
10
+ ._1hvw1o36:focus{outline-width:medium}
11
+ ._49pcglyw:focus{outline-style:none}
12
+ ._nt751r31:focus{outline-color:currentColor}
package/dist/es2019/InlineDialog/styled/container.js CHANGED
@@ -1,30 +1,13 @@
1
- /**
2
- * @jsxRuntime classic
3
- * @jsx jsx
4
- */
1
+ /* container.tsx generated by @compiled/babel-plugin v0.32.2 */
2
+ import "./container.compiled.css";
3
+ import * as React from 'react';
4
+ import { ax, ix } from "@compiled/react/runtime";
5
5
  import { forwardRef } from 'react';
6
-
7
- // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
8
- import { css, jsx } from '@emotion/react';
9
6
  import { N0, N50A, N60A, N900 } from '@atlaskit/theme/colors';
10
- import { layers } from '@atlaskit/theme/constants';
11
7
  const CSS_THEME_BACKGROUND = '--theme-background';
12
8
  const CSS_THEME_COLOR = '--theme-color';
13
9
  const CSS_THEME_BOX_SHADOW = '--theme-box-shadow';
14
- const containerStyles = css({
15
- boxSizing: 'content-box',
16
- maxWidth: `${8 * 56}px`,
17
- maxHeight: `${8 * 56}px`,
18
- padding: `${"var(--ds-space-200, 16px)"} ${"var(--ds-space-300, 24px)"}`,
19
- zIndex: layers.dialog(),
20
- background: `var(${CSS_THEME_BACKGROUND})`,
21
- borderRadius: "var(--ds-border-radius, 3px)",
22
- boxShadow: `var(${CSS_THEME_BOX_SHADOW})`,
23
- color: `var(${CSS_THEME_COLOR})`,
24
- '&:focus': {
25
- outline: 'none'
26
- }
27
- });
10
+ const containerStyles = null;
28
11
  /**
29
12
  * __Container__
30
13
  *
@@ -40,25 +23,21 @@ export const Container = /*#__PURE__*/forwardRef(({
40
23
  style,
41
24
  testId
42
25
  }, ref) => {
43
- return (
44
- // Unfortunately, these are used for products to pass through. Inline Dialog is being deprecated anyway
45
- // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
46
- jsx("div", {
47
- css: containerStyles,
48
- "data-testid": testId,
49
- onBlur: onBlur,
50
- onClick: onClick,
51
- onFocus: onFocus,
52
- ref: ref
53
- // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
54
- ,
55
- style: {
56
- [CSS_THEME_BACKGROUND]: `var(--ds-surface-overlay, ${N0})`,
57
- [CSS_THEME_COLOR]: `var(--ds-text, ${N900})`,
58
- [CSS_THEME_BOX_SHADOW]: `var(--ds-shadow-overlay, ${`0 4px 8px -2px ${N50A}, 0 0 1px ${N60A}`})`,
59
- ...style
60
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
61
- }
62
- }, typeof children === 'function' ? children() : children)
63
- );
26
+ return /*#__PURE__*/React.createElement("div", {
27
+ "data-testid": testId,
28
+ onBlur: onBlur,
29
+ onClick: onClick,
30
+ onFocus: onFocus,
31
+ ref: ref
32
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
33
+ ,
34
+ style: {
35
+ [CSS_THEME_BACKGROUND]: `var(--ds-surface-overlay, ${N0})`,
36
+ [CSS_THEME_COLOR]: `var(--ds-text, ${N900})`,
37
+ [CSS_THEME_BOX_SHADOW]: `var(--ds-shadow-overlay, ${`0 4px 8px -2px ${N50A}, 0 0 1px ${N60A}`})`,
38
+ ...style
39
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
40
+ },
41
+ className: ax(["_vchh18uv _p12flti4 _c71llti4 _1yt44ar7 _1pbyowjs _11q7gluh _2rko1sit _16qs1r44 _syazjslb _nt751r31 _49pcglyw _1hvw1o36"])
42
+ }, typeof children === 'function' ? children() : children);
64
43
  });
package/dist/esm/InlineDialog/index.js CHANGED
@@ -1,11 +1,4 @@
1
- /**
2
- * @jsxRuntime classic
3
- * @jsx jsx
4
- */
5
1
  import React, { memo, useCallback, useEffect, useRef } from 'react';
6
-
7
- // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
8
- import { jsx } from '@emotion/react';
9
2
  import { bind } from 'bind-event-listener';
10
3
  import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
11
4
  import noop from '@atlaskit/ds-lib/noop';
@@ -46,7 +39,7 @@ var CloseManager = function CloseManager(_ref) {
46
39
  }, [handleClick, isLayerDisabled]);
47
40
 
48
41
  // only create a dummy component for using ths hook in class component
49
- return jsx("span", null);
42
+ return /*#__PURE__*/React.createElement("span", null);
50
43
  };
51
44
  var InlineDialog = /*#__PURE__*/memo(function InlineDialog(_ref2) {
52
45
  var _ref2$isOpen = _ref2.isOpen,
@@ -75,7 +68,7 @@ var InlineDialog = /*#__PURE__*/memo(function InlineDialog(_ref2) {
75
68
  action: 'closed',
76
69
  componentName: 'inlineDialog',
77
70
  packageName: "@atlaskit/inline-dialog",
78
- packageVersion: "15.3.0"
71
+ packageVersion: "16.0.0"
79
72
  });
80
73
 
81
74
  // we put this into a ref to avoid handleCloseRequest having this as a dependency
@@ -130,13 +123,13 @@ var InlineDialog = /*#__PURE__*/memo(function InlineDialog(_ref2) {
130
123
  }
131
124
  handleCloseRequest(event);
132
125
  }, [handleCloseRequest, containerRef, triggerRef]);
133
- var popper = isOpen ? jsx(Popper, {
126
+ var popper = isOpen ? /*#__PURE__*/React.createElement(Popper, {
134
127
  placement: placement,
135
128
  strategy: strategy
136
129
  }, function (_ref3) {
137
130
  var _ref4 = _ref3.ref,
138
131
  style = _ref3.style;
139
- return jsx(Container, {
132
+ return /*#__PURE__*/React.createElement(Container, {
140
133
  onBlur: onContentBlur,
141
134
  onFocus: onContentFocus,
142
135
  onClick: onContentClick,
@@ -156,9 +149,9 @@ var InlineDialog = /*#__PURE__*/memo(function InlineDialog(_ref2) {
156
149
  testId: testId
157
150
  }, typeof content === 'function' ? content() : content);
158
151
  }) : null;
159
- return jsx(Manager, null, jsx(Reference, null, function (_ref5) {
152
+ return /*#__PURE__*/React.createElement(Manager, null, /*#__PURE__*/React.createElement(Reference, null, function (_ref5) {
160
153
  var ref = _ref5.ref;
161
- return jsx(NodeResolverWrapper, {
154
+ return /*#__PURE__*/React.createElement(NodeResolverWrapper, {
162
155
  innerRef: function innerRef(node) {
163
156
  triggerRef.current = node;
164
157
  if (typeof ref === 'function') {
@@ -169,10 +162,10 @@ var InlineDialog = /*#__PURE__*/memo(function InlineDialog(_ref2) {
169
162
  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
170
163
  },
171
164
  hasNodeResolver: !fg('platform_design_system_team_portal_logic_r18_fix')
172
- }, jsx(React.Fragment, null, children));
173
- }), isOpen ? jsx(Layering, {
165
+ }, /*#__PURE__*/React.createElement(React.Fragment, null, children));
166
+ }), isOpen ? /*#__PURE__*/React.createElement(Layering, {
174
167
  isDisabled: false
175
- }, popper, jsx(CloseManager, {
168
+ }, popper, /*#__PURE__*/React.createElement(CloseManager, {
176
169
  handleEscapeClose: handleCloseRequest,
177
170
  handleClick: handleClick
178
171
  })) : popper);
package/dist/esm/InlineDialog/styled/container.compiled.css ADDED
@@ -0,0 +1,12 @@
1
+ ._11q717w6{background:var(--_902zhz)}
2
+ ._1yt4t9rj{padding:var(--_186zcqb)}
3
+ ._2rko1sit{border-radius:var(--ds-border-radius,3px)}
4
+ ._16qs11gm{box-shadow:var(--_uojrza)}
5
+ ._1pbyowjs{z-index:300}
6
+ ._c71l184t{max-height:var(--_n6nwya)}
7
+ ._p12f184t{max-width:var(--_n6nwya)}
8
+ ._syaz1xgh{color:var(--_1yif2ym)}
9
+ ._vchh18uv{box-sizing:initial}
10
+ ._1hvw1o36:focus{outline-width:medium}
11
+ ._49pcglyw:focus{outline-style:none}
12
+ ._nt751r31:focus{outline-color:currentColor}
package/dist/esm/InlineDialog/styled/container.js CHANGED
@@ -1,33 +1,16 @@
1
+ /* container.tsx generated by @compiled/babel-plugin v0.32.2 */
1
2
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
3
+ import "./container.compiled.css";
4
+ import * as React from 'react';
5
+ import { ax, ix } from "@compiled/react/runtime";
2
6
  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; }
3
7
  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) { _defineProperty(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; }
4
- /**
5
- * @jsxRuntime classic
6
- * @jsx jsx
7
- */
8
8
  import { forwardRef } from 'react';
9
-
10
- // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
11
- import { css, jsx } from '@emotion/react';
12
9
  import { N0, N50A, N60A, N900 } from '@atlaskit/theme/colors';
13
- import { layers } from '@atlaskit/theme/constants';
14
10
  var CSS_THEME_BACKGROUND = '--theme-background';
15
11
  var CSS_THEME_COLOR = '--theme-color';
16
12
  var CSS_THEME_BOX_SHADOW = '--theme-box-shadow';
17
- var containerStyles = css({
18
- boxSizing: 'content-box',
19
- maxWidth: "".concat(8 * 56, "px"),
20
- maxHeight: "".concat(8 * 56, "px"),
21
- padding: "var(--ds-space-200, 16px)".concat(" ", "var(--ds-space-300, 24px)"),
22
- zIndex: layers.dialog(),
23
- background: "var(".concat(CSS_THEME_BACKGROUND, ")"),
24
- borderRadius: "var(--ds-border-radius, 3px)",
25
- boxShadow: "var(".concat(CSS_THEME_BOX_SHADOW, ")"),
26
- color: "var(".concat(CSS_THEME_COLOR, ")"),
27
- '&:focus': {
28
- outline: 'none'
29
- }
30
- });
13
+ var containerStyles = null;
31
14
  /**
32
15
  * __Container__
33
16
  *
@@ -36,26 +19,27 @@ var containerStyles = css({
36
19
  *
37
20
  */
38
21
  export var Container = /*#__PURE__*/forwardRef(function (_ref, ref) {
39
- var _objectSpread2;
40
22
  var children = _ref.children,
41
23
  onBlur = _ref.onBlur,
42
24
  onClick = _ref.onClick,
43
25
  onFocus = _ref.onFocus,
44
26
  style = _ref.style,
45
27
  testId = _ref.testId;
46
- return (
47
- // Unfortunately, these are used for products to pass through. Inline Dialog is being deprecated anyway
48
- // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
49
- jsx("div", {
50
- css: containerStyles,
51
- "data-testid": testId,
52
- onBlur: onBlur,
53
- onClick: onClick,
54
- onFocus: onFocus,
55
- ref: ref
56
- // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
57
- ,
58
- style: _objectSpread((_objectSpread2 = {}, _defineProperty(_objectSpread2, CSS_THEME_BACKGROUND, "var(--ds-surface-overlay, ".concat(N0, ")")), _defineProperty(_objectSpread2, CSS_THEME_COLOR, "var(--ds-text, ".concat(N900, ")")), _defineProperty(_objectSpread2, CSS_THEME_BOX_SHADOW, "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N50A, ", 0 0 1px ").concat(N60A), ")")), _objectSpread2), style)
59
- }, typeof children === 'function' ? children() : children)
60
- );
28
+ return /*#__PURE__*/React.createElement("div", {
29
+ "data-testid": testId,
30
+ onBlur: onBlur,
31
+ onClick: onClick,
32
+ onFocus: onFocus,
33
+ ref: ref
34
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
35
+ ,
36
+ className: ax(["_vchh18uv _p12f184t _c71l184t _1yt4t9rj _1pbyowjs _11q717w6 _2rko1sit _16qs11gm _syaz1xgh _nt751r31 _49pcglyw _1hvw1o36"]),
37
+ style: _objectSpread(_objectSpread({}, _objectSpread(_defineProperty(_defineProperty(_defineProperty({}, CSS_THEME_BACKGROUND, "var(--ds-surface-overlay, ".concat(N0, ")")), CSS_THEME_COLOR, "var(--ds-text, ".concat(N900, ")")), CSS_THEME_BOX_SHADOW, "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N50A, ", 0 0 1px ").concat(N60A), ")")), style)), {}, {
38
+ "--_n6nwya": ix("".concat(8 * 56, "px")),
39
+ "--_186zcqb": ix("var(--ds-space-200, 16px)".concat(" ", "var(--ds-space-300, 24px)")),
40
+ "--_902zhz": ix("var(".concat(CSS_THEME_BACKGROUND, ")")),
41
+ "--_uojrza": ix("var(".concat(CSS_THEME_BOX_SHADOW, ")")),
42
+ "--_1yif2ym": ix("var(".concat(CSS_THEME_COLOR, ")"))
43
+ })
44
+ }, typeof children === 'function' ? children() : children);
61
45
  });
package/dist/types/InlineDialog/index.d.ts CHANGED
@@ -1,7 +1,3 @@
1
- /**
2
- * @jsxRuntime classic
3
- * @jsx jsx
4
- */
5
1
  import { type FC } from 'react';
6
2
  import type { InlineDialogProps } from '../types';
7
3
  declare const InlineDialog: FC<InlineDialogProps>;
package/dist/types-ts4.5/InlineDialog/index.d.ts CHANGED
@@ -1,7 +1,3 @@
1
- /**
2
- * @jsxRuntime classic
3
- * @jsx jsx
4
- */
5
1
  import { type FC } from 'react';
6
2
  import type { InlineDialogProps } from '../types';
7
3
  declare const InlineDialog: FC<InlineDialogProps>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/inline-dialog",
3
- "version": "15.3.0",
3
+ "version": "16.0.0",
4
4
  "description": "An inline dialog is a pop-up container for small amounts of information. It can also contain controls.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -39,15 +39,16 @@
39
39
  }
40
40
  },
41
41
  "dependencies": {
42
- "@atlaskit/analytics-next": "^10.1.0",
42
+ "@atlaskit/analytics-next": "^10.2.0",
43
+ "@atlaskit/css": "^0.7.0",
43
44
  "@atlaskit/ds-lib": "^3.3.0",
44
- "@atlaskit/layering": "^0.8.0",
45
+ "@atlaskit/layering": "^1.0.0",
45
46
  "@atlaskit/platform-feature-flags": "^0.3.0",
46
47
  "@atlaskit/popper": "^6.3.0",
47
48
  "@atlaskit/theme": "^14.0.0",
48
49
  "@atlaskit/tokens": "^2.4.0",
49
50
  "@babel/runtime": "^7.0.0",
50
- "@emotion/react": "^11.7.1",
51
+ "@compiled/react": "^0.18.1",
51
52
  "bind-event-listener": "^3.0.0",
52
53
  "react-node-resolver": "^1.0.1"
53
54
  },
@@ -59,12 +60,12 @@
59
60
  "@af/integration-testing": "*",
60
61
  "@af/visual-regression": "*",
61
62
  "@atlaskit/button": "^20.3.0",
62
- "@atlaskit/datetime-picker": "^15.9.0",
63
+ "@atlaskit/datetime-picker": "^15.10.0",
63
64
  "@atlaskit/docs": "*",
64
65
  "@atlaskit/dropdown-menu": "^12.23.0",
65
- "@atlaskit/modal-dialog": "^12.17.0",
66
- "@atlaskit/section-message": "^6.7.0",
67
- "@atlaskit/select": "^18.6.0",
66
+ "@atlaskit/modal-dialog": "^12.18.0",
67
+ "@atlaskit/section-message": "^6.8.0",
68
+ "@atlaskit/select": "^18.8.0",
68
69
  "@atlaskit/ssr": "*",
69
70
  "@atlaskit/visual-regression": "*",
70
71
  "@testing-library/react": "^12.1.5",