@atlaskit/inline-dialog 14.1.2 → 14.2.1
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.
- package/CHANGELOG.md +23 -1
- package/README.md +4 -2
- package/__perf__/default.tsx +24 -24
- package/dist/cjs/InlineDialog/index.js +55 -25
- package/dist/cjs/InlineDialog/styled/container.js +3 -1
- package/dist/es2019/InlineDialog/index.js +34 -3
- package/dist/es2019/InlineDialog/styled/container.js +6 -0
- package/dist/esm/InlineDialog/index.js +56 -26
- package/dist/esm/InlineDialog/styled/container.js +5 -0
- package/dist/types/InlineDialog/index.d.ts +3 -0
- package/dist/types/InlineDialog/styled/container.d.ts +3 -0
- package/dist/types-ts4.5/InlineDialog/index.d.ts +3 -0
- package/dist/types-ts4.5/InlineDialog/styled/container.d.ts +3 -0
- package/package.json +122 -122
- package/report.api.md +46 -48
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,27 @@
|
|
|
1
1
|
# @atlaskit/inline-dialog
|
|
2
2
|
|
|
3
|
+
## 14.2.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#113051](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/113051)
|
|
8
|
+
[`8fb8ca26fb173`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8fb8ca26fb173) -
|
|
9
|
+
Integrate layering in inline dialog
|
|
10
|
+
- Updated dependencies
|
|
11
|
+
|
|
12
|
+
## 14.2.0
|
|
13
|
+
|
|
14
|
+
### Minor Changes
|
|
15
|
+
|
|
16
|
+
- [#110670](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/110670)
|
|
17
|
+
[`c733254a2dd6e`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c733254a2dd6e) -
|
|
18
|
+
Explicitly set jsxRuntime to classic via pragma comments in order to avoid issues where jsxRuntime
|
|
19
|
+
is implicitly set to automatic.
|
|
20
|
+
|
|
21
|
+
### Patch Changes
|
|
22
|
+
|
|
23
|
+
- Updated dependencies
|
|
24
|
+
|
|
3
25
|
## 14.1.2
|
|
4
26
|
|
|
5
27
|
### Patch Changes
|
|
@@ -20,7 +42,7 @@
|
|
|
20
42
|
|
|
21
43
|
- [#102965](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/102965)
|
|
22
44
|
[`af5ae74f2af1`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/af5ae74f2af1) -
|
|
23
|
-
Add support for React 18.
|
|
45
|
+
Add support for React 18 in non-strict mode.
|
|
24
46
|
|
|
25
47
|
## 14.0.4
|
|
26
48
|
|
package/README.md
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
# Inline dialog
|
|
2
2
|
|
|
3
|
-
An inline dialog is a pop-up container for small amounts of information. It can also contain
|
|
3
|
+
An inline dialog is a pop-up container for small amounts of information. It can also contain
|
|
4
|
+
controls.
|
|
4
5
|
|
|
5
6
|
## Installation
|
|
6
7
|
|
|
@@ -10,4 +11,5 @@ yarn add @atlaskit/inline-dialog
|
|
|
10
11
|
|
|
11
12
|
## Usage
|
|
12
13
|
|
|
13
|
-
Detailed docs and example usage can be found
|
|
14
|
+
Detailed docs and example usage can be found
|
|
15
|
+
[here](https://atlassian.design/components/inline-dialog/).
|
package/__perf__/default.tsx
CHANGED
|
@@ -3,36 +3,36 @@ import React, { Component } from 'react';
|
|
|
3
3
|
import InlineDialog from '../src';
|
|
4
4
|
|
|
5
5
|
interface State {
|
|
6
|
-
|
|
6
|
+
dialogOpen: boolean;
|
|
7
7
|
}
|
|
8
8
|
|
|
9
9
|
const content = (
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
10
|
+
<div>
|
|
11
|
+
<p>Hello!</p>
|
|
12
|
+
</div>
|
|
13
13
|
);
|
|
14
14
|
|
|
15
15
|
export default class InlineDialogExample extends Component<{}, State> {
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
16
|
+
state = {
|
|
17
|
+
dialogOpen: true,
|
|
18
|
+
};
|
|
19
19
|
|
|
20
|
-
|
|
20
|
+
toggleDialog = () => this.setState({ dialogOpen: !this.state.dialogOpen });
|
|
21
21
|
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
22
|
+
render() {
|
|
23
|
+
return (
|
|
24
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
25
|
+
<div style={{ minHeight: '120px' }}>
|
|
26
|
+
<InlineDialog
|
|
27
|
+
onClose={() => {
|
|
28
|
+
this.setState({ dialogOpen: false });
|
|
29
|
+
}}
|
|
30
|
+
content={content}
|
|
31
|
+
isOpen={this.state.dialogOpen}
|
|
32
|
+
>
|
|
33
|
+
A plain dialog
|
|
34
|
+
</InlineDialog>
|
|
35
|
+
</div>
|
|
36
|
+
);
|
|
37
|
+
}
|
|
38
38
|
}
|
|
@@ -18,34 +18,64 @@ var _popper = require("@atlaskit/popper");
|
|
|
18
18
|
var _container = require("./styled/container");
|
|
19
19
|
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
20
|
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 && Object.prototype.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
|
+
*/
|
|
21
24
|
/** @jsx jsx */
|
|
22
25
|
|
|
26
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
27
|
+
|
|
23
28
|
var packageName = "@atlaskit/inline-dialog";
|
|
24
|
-
var packageVersion = "14.1
|
|
29
|
+
var packageVersion = "14.2.1";
|
|
25
30
|
var checkIsChildOfPortal = function checkIsChildOfPortal(node) {
|
|
26
31
|
if (!node) {
|
|
27
32
|
return false;
|
|
28
33
|
}
|
|
29
34
|
return node.classList && node.classList.contains('atlaskit-portal-container') || checkIsChildOfPortal(node.parentElement);
|
|
30
35
|
};
|
|
31
|
-
var
|
|
32
|
-
var
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
onContentFocus = _ref$onContentFocus === void 0 ? _noop.default : _ref$onContentFocus,
|
|
40
|
-
_ref$onClose = _ref.onClose,
|
|
41
|
-
onClose = _ref$onClose === void 0 ? _noop.default : _ref$onClose,
|
|
42
|
-
_ref$placement = _ref.placement,
|
|
43
|
-
placement = _ref$placement === void 0 ? 'bottom-start' : _ref$placement,
|
|
44
|
-
_ref$strategy = _ref.strategy,
|
|
45
|
-
strategy = _ref$strategy === void 0 ? 'fixed' : _ref$strategy,
|
|
36
|
+
var InlineDialogWithLayering = function InlineDialogWithLayering(_ref) {
|
|
37
|
+
var isOpen = _ref.isOpen,
|
|
38
|
+
onContentBlur = _ref.onContentBlur,
|
|
39
|
+
onContentClick = _ref.onContentClick,
|
|
40
|
+
onContentFocus = _ref.onContentFocus,
|
|
41
|
+
onClose = _ref.onClose,
|
|
42
|
+
placement = _ref.placement,
|
|
43
|
+
strategy = _ref.strategy,
|
|
46
44
|
testId = _ref.testId,
|
|
47
45
|
content = _ref.content,
|
|
48
46
|
children = _ref.children;
|
|
47
|
+
return (0, _react2.jsx)(_layering.UNSAFE_LAYERING, {
|
|
48
|
+
isDisabled: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.inline-message-layering_wfp1p') ? !isOpen : true
|
|
49
|
+
}, (0, _react2.jsx)(InlineDialog, {
|
|
50
|
+
isOpen: isOpen,
|
|
51
|
+
onContentBlur: onContentBlur,
|
|
52
|
+
onContentClick: onContentClick,
|
|
53
|
+
onContentFocus: onContentFocus,
|
|
54
|
+
onClose: onClose,
|
|
55
|
+
placement: placement,
|
|
56
|
+
strategy: strategy,
|
|
57
|
+
testId: testId,
|
|
58
|
+
content: content
|
|
59
|
+
}, children));
|
|
60
|
+
};
|
|
61
|
+
var InlineDialog = exports.InlineDialogWithoutAnalytics = /*#__PURE__*/(0, _react.memo)(function InlineDialog(_ref2) {
|
|
62
|
+
var _ref2$isOpen = _ref2.isOpen,
|
|
63
|
+
isOpen = _ref2$isOpen === void 0 ? false : _ref2$isOpen,
|
|
64
|
+
_ref2$onContentBlur = _ref2.onContentBlur,
|
|
65
|
+
onContentBlur = _ref2$onContentBlur === void 0 ? _noop.default : _ref2$onContentBlur,
|
|
66
|
+
_ref2$onContentClick = _ref2.onContentClick,
|
|
67
|
+
onContentClick = _ref2$onContentClick === void 0 ? _noop.default : _ref2$onContentClick,
|
|
68
|
+
_ref2$onContentFocus = _ref2.onContentFocus,
|
|
69
|
+
onContentFocus = _ref2$onContentFocus === void 0 ? _noop.default : _ref2$onContentFocus,
|
|
70
|
+
_ref2$onClose = _ref2.onClose,
|
|
71
|
+
onClose = _ref2$onClose === void 0 ? _noop.default : _ref2$onClose,
|
|
72
|
+
_ref2$placement = _ref2.placement,
|
|
73
|
+
placement = _ref2$placement === void 0 ? 'bottom-start' : _ref2$placement,
|
|
74
|
+
_ref2$strategy = _ref2.strategy,
|
|
75
|
+
strategy = _ref2$strategy === void 0 ? 'fixed' : _ref2$strategy,
|
|
76
|
+
testId = _ref2.testId,
|
|
77
|
+
content = _ref2.content,
|
|
78
|
+
children = _ref2.children;
|
|
49
79
|
var containerRef = (0, _react.useRef)(null);
|
|
50
80
|
var triggerRef = (0, _react.useRef)(null);
|
|
51
81
|
// we put this into a ref to avoid handleCloseRequest having this as a dependency
|
|
@@ -140,9 +170,9 @@ var InlineDialog = exports.InlineDialogWithoutAnalytics = /*#__PURE__*/(0, _reac
|
|
|
140
170
|
var popper = isOpen ? (0, _react2.jsx)(_popper.Popper, {
|
|
141
171
|
placement: placement,
|
|
142
172
|
strategy: strategy
|
|
143
|
-
}, function (
|
|
144
|
-
var
|
|
145
|
-
style =
|
|
173
|
+
}, function (_ref3) {
|
|
174
|
+
var _ref4 = _ref3.ref,
|
|
175
|
+
style = _ref3.style;
|
|
146
176
|
return (0, _react2.jsx)(_container.Container, {
|
|
147
177
|
onBlur: onContentBlur,
|
|
148
178
|
onFocus: onContentFocus,
|
|
@@ -150,10 +180,10 @@ var InlineDialog = exports.InlineDialogWithoutAnalytics = /*#__PURE__*/(0, _reac
|
|
|
150
180
|
ref: function ref(node) {
|
|
151
181
|
if (node) {
|
|
152
182
|
containerRef.current = node;
|
|
153
|
-
if (typeof
|
|
154
|
-
|
|
183
|
+
if (typeof _ref4 === 'function') {
|
|
184
|
+
_ref4(node);
|
|
155
185
|
} else {
|
|
156
|
-
|
|
186
|
+
_ref4.current = node;
|
|
157
187
|
}
|
|
158
188
|
}
|
|
159
189
|
}
|
|
@@ -163,8 +193,8 @@ var InlineDialog = exports.InlineDialogWithoutAnalytics = /*#__PURE__*/(0, _reac
|
|
|
163
193
|
testId: testId
|
|
164
194
|
}, content);
|
|
165
195
|
}) : null;
|
|
166
|
-
return (0, _react2.jsx)(_popper.Manager, null, (0, _react2.jsx)(_popper.Reference, null, function (
|
|
167
|
-
var ref =
|
|
196
|
+
return (0, _react2.jsx)(_popper.Manager, null, (0, _react2.jsx)(_popper.Reference, null, function (_ref5) {
|
|
197
|
+
var ref = _ref5.ref;
|
|
168
198
|
return (0, _react2.jsx)(_reactNodeResolver.default, {
|
|
169
199
|
innerRef: function innerRef(node) {
|
|
170
200
|
triggerRef.current = node;
|
|
@@ -193,4 +223,4 @@ var _default = exports.default = (0, _analyticsNext.withAnalyticsContext)({
|
|
|
193
223
|
packageVersion: packageVersion
|
|
194
224
|
}
|
|
195
225
|
})
|
|
196
|
-
})(
|
|
226
|
+
})(InlineDialogWithLayering));
|
|
@@ -14,7 +14,9 @@ var _constants = require("@atlaskit/theme/constants");
|
|
|
14
14
|
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); }
|
|
15
15
|
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 && Object.prototype.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; }
|
|
16
16
|
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; }
|
|
17
|
-
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; } /**
|
|
17
|
+
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
|
+
* @jsxRuntime classic
|
|
19
|
+
*/ /** @jsx jsx */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
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';
|
|
@@ -1,22 +1,53 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @jsxRuntime classic
|
|
3
|
+
*/
|
|
1
4
|
/** @jsx jsx */
|
|
2
5
|
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
|
|
3
8
|
import { jsx } from '@emotion/react';
|
|
4
9
|
import { bind } from 'bind-event-listener';
|
|
5
10
|
import NodeResolver from 'react-node-resolver';
|
|
6
11
|
import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
|
|
7
12
|
import noop from '@atlaskit/ds-lib/noop';
|
|
8
|
-
import { UNSAFE_useLayering } from '@atlaskit/layering';
|
|
13
|
+
import { UNSAFE_LAYERING, UNSAFE_useLayering } from '@atlaskit/layering';
|
|
9
14
|
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
10
15
|
import { Manager, Popper, Reference } from '@atlaskit/popper';
|
|
11
16
|
import { Container } from './styled/container';
|
|
12
17
|
const packageName = "@atlaskit/inline-dialog";
|
|
13
|
-
const packageVersion = "14.1
|
|
18
|
+
const packageVersion = "14.2.1";
|
|
14
19
|
const checkIsChildOfPortal = node => {
|
|
15
20
|
if (!node) {
|
|
16
21
|
return false;
|
|
17
22
|
}
|
|
18
23
|
return node.classList && node.classList.contains('atlaskit-portal-container') || checkIsChildOfPortal(node.parentElement);
|
|
19
24
|
};
|
|
25
|
+
const InlineDialogWithLayering = ({
|
|
26
|
+
isOpen,
|
|
27
|
+
onContentBlur,
|
|
28
|
+
onContentClick,
|
|
29
|
+
onContentFocus,
|
|
30
|
+
onClose,
|
|
31
|
+
placement,
|
|
32
|
+
strategy,
|
|
33
|
+
testId,
|
|
34
|
+
content,
|
|
35
|
+
children
|
|
36
|
+
}) => {
|
|
37
|
+
return jsx(UNSAFE_LAYERING, {
|
|
38
|
+
isDisabled: getBooleanFF('platform.design-system-team.inline-message-layering_wfp1p') ? !isOpen : true
|
|
39
|
+
}, jsx(InlineDialog, {
|
|
40
|
+
isOpen: isOpen,
|
|
41
|
+
onContentBlur: onContentBlur,
|
|
42
|
+
onContentClick: onContentClick,
|
|
43
|
+
onContentFocus: onContentFocus,
|
|
44
|
+
onClose: onClose,
|
|
45
|
+
placement: placement,
|
|
46
|
+
strategy: strategy,
|
|
47
|
+
testId: testId,
|
|
48
|
+
content: content
|
|
49
|
+
}, children));
|
|
50
|
+
};
|
|
20
51
|
const InlineDialog = /*#__PURE__*/memo(function InlineDialog({
|
|
21
52
|
isOpen = false,
|
|
22
53
|
onContentBlur = noop,
|
|
@@ -178,4 +209,4 @@ export default withAnalyticsContext({
|
|
|
178
209
|
packageVersion
|
|
179
210
|
}
|
|
180
211
|
})
|
|
181
|
-
})(
|
|
212
|
+
})(InlineDialogWithLayering));
|
|
@@ -1,5 +1,10 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @jsxRuntime classic
|
|
3
|
+
*/
|
|
1
4
|
/** @jsx jsx */
|
|
2
5
|
import React, { forwardRef } from 'react';
|
|
6
|
+
|
|
7
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
3
8
|
import { css, jsx } from '@emotion/react';
|
|
4
9
|
import { N0, N50A, N60A, N900 } from '@atlaskit/theme/colors';
|
|
5
10
|
import { layers } from '@atlaskit/theme/constants';
|
|
@@ -52,6 +57,7 @@ export const Container = /*#__PURE__*/forwardRef(({
|
|
|
52
57
|
[CSS_THEME_COLOR]: `var(--ds-text, ${N900})`,
|
|
53
58
|
[CSS_THEME_BOX_SHADOW]: `var(--ds-shadow-overlay, ${`0 4px 8px -2px ${N50A}, 0 0 1px ${N60A}`})`,
|
|
54
59
|
...style
|
|
60
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
55
61
|
}
|
|
56
62
|
}, children)
|
|
57
63
|
);
|
|
@@ -1,40 +1,70 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @jsxRuntime classic
|
|
3
|
+
*/
|
|
1
4
|
/** @jsx jsx */
|
|
2
5
|
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
|
|
3
8
|
import { jsx } from '@emotion/react';
|
|
4
9
|
import { bind } from 'bind-event-listener';
|
|
5
10
|
import NodeResolver from 'react-node-resolver';
|
|
6
11
|
import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
|
|
7
12
|
import noop from '@atlaskit/ds-lib/noop';
|
|
8
|
-
import { UNSAFE_useLayering } from '@atlaskit/layering';
|
|
13
|
+
import { UNSAFE_LAYERING, UNSAFE_useLayering } from '@atlaskit/layering';
|
|
9
14
|
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
10
15
|
import { Manager, Popper, Reference } from '@atlaskit/popper';
|
|
11
16
|
import { Container } from './styled/container';
|
|
12
17
|
var packageName = "@atlaskit/inline-dialog";
|
|
13
|
-
var packageVersion = "14.1
|
|
18
|
+
var packageVersion = "14.2.1";
|
|
14
19
|
var checkIsChildOfPortal = function checkIsChildOfPortal(node) {
|
|
15
20
|
if (!node) {
|
|
16
21
|
return false;
|
|
17
22
|
}
|
|
18
23
|
return node.classList && node.classList.contains('atlaskit-portal-container') || checkIsChildOfPortal(node.parentElement);
|
|
19
24
|
};
|
|
20
|
-
var
|
|
21
|
-
var
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
onContentFocus = _ref$onContentFocus === void 0 ? noop : _ref$onContentFocus,
|
|
29
|
-
_ref$onClose = _ref.onClose,
|
|
30
|
-
onClose = _ref$onClose === void 0 ? noop : _ref$onClose,
|
|
31
|
-
_ref$placement = _ref.placement,
|
|
32
|
-
placement = _ref$placement === void 0 ? 'bottom-start' : _ref$placement,
|
|
33
|
-
_ref$strategy = _ref.strategy,
|
|
34
|
-
strategy = _ref$strategy === void 0 ? 'fixed' : _ref$strategy,
|
|
25
|
+
var InlineDialogWithLayering = function InlineDialogWithLayering(_ref) {
|
|
26
|
+
var isOpen = _ref.isOpen,
|
|
27
|
+
onContentBlur = _ref.onContentBlur,
|
|
28
|
+
onContentClick = _ref.onContentClick,
|
|
29
|
+
onContentFocus = _ref.onContentFocus,
|
|
30
|
+
onClose = _ref.onClose,
|
|
31
|
+
placement = _ref.placement,
|
|
32
|
+
strategy = _ref.strategy,
|
|
35
33
|
testId = _ref.testId,
|
|
36
34
|
content = _ref.content,
|
|
37
35
|
children = _ref.children;
|
|
36
|
+
return jsx(UNSAFE_LAYERING, {
|
|
37
|
+
isDisabled: getBooleanFF('platform.design-system-team.inline-message-layering_wfp1p') ? !isOpen : true
|
|
38
|
+
}, jsx(InlineDialog, {
|
|
39
|
+
isOpen: isOpen,
|
|
40
|
+
onContentBlur: onContentBlur,
|
|
41
|
+
onContentClick: onContentClick,
|
|
42
|
+
onContentFocus: onContentFocus,
|
|
43
|
+
onClose: onClose,
|
|
44
|
+
placement: placement,
|
|
45
|
+
strategy: strategy,
|
|
46
|
+
testId: testId,
|
|
47
|
+
content: content
|
|
48
|
+
}, children));
|
|
49
|
+
};
|
|
50
|
+
var InlineDialog = /*#__PURE__*/memo(function InlineDialog(_ref2) {
|
|
51
|
+
var _ref2$isOpen = _ref2.isOpen,
|
|
52
|
+
isOpen = _ref2$isOpen === void 0 ? false : _ref2$isOpen,
|
|
53
|
+
_ref2$onContentBlur = _ref2.onContentBlur,
|
|
54
|
+
onContentBlur = _ref2$onContentBlur === void 0 ? noop : _ref2$onContentBlur,
|
|
55
|
+
_ref2$onContentClick = _ref2.onContentClick,
|
|
56
|
+
onContentClick = _ref2$onContentClick === void 0 ? noop : _ref2$onContentClick,
|
|
57
|
+
_ref2$onContentFocus = _ref2.onContentFocus,
|
|
58
|
+
onContentFocus = _ref2$onContentFocus === void 0 ? noop : _ref2$onContentFocus,
|
|
59
|
+
_ref2$onClose = _ref2.onClose,
|
|
60
|
+
onClose = _ref2$onClose === void 0 ? noop : _ref2$onClose,
|
|
61
|
+
_ref2$placement = _ref2.placement,
|
|
62
|
+
placement = _ref2$placement === void 0 ? 'bottom-start' : _ref2$placement,
|
|
63
|
+
_ref2$strategy = _ref2.strategy,
|
|
64
|
+
strategy = _ref2$strategy === void 0 ? 'fixed' : _ref2$strategy,
|
|
65
|
+
testId = _ref2.testId,
|
|
66
|
+
content = _ref2.content,
|
|
67
|
+
children = _ref2.children;
|
|
38
68
|
var containerRef = useRef(null);
|
|
39
69
|
var triggerRef = useRef(null);
|
|
40
70
|
// we put this into a ref to avoid handleCloseRequest having this as a dependency
|
|
@@ -129,9 +159,9 @@ var InlineDialog = /*#__PURE__*/memo(function InlineDialog(_ref) {
|
|
|
129
159
|
var popper = isOpen ? jsx(Popper, {
|
|
130
160
|
placement: placement,
|
|
131
161
|
strategy: strategy
|
|
132
|
-
}, function (
|
|
133
|
-
var
|
|
134
|
-
style =
|
|
162
|
+
}, function (_ref3) {
|
|
163
|
+
var _ref4 = _ref3.ref,
|
|
164
|
+
style = _ref3.style;
|
|
135
165
|
return jsx(Container, {
|
|
136
166
|
onBlur: onContentBlur,
|
|
137
167
|
onFocus: onContentFocus,
|
|
@@ -139,10 +169,10 @@ var InlineDialog = /*#__PURE__*/memo(function InlineDialog(_ref) {
|
|
|
139
169
|
ref: function ref(node) {
|
|
140
170
|
if (node) {
|
|
141
171
|
containerRef.current = node;
|
|
142
|
-
if (typeof
|
|
143
|
-
|
|
172
|
+
if (typeof _ref4 === 'function') {
|
|
173
|
+
_ref4(node);
|
|
144
174
|
} else {
|
|
145
|
-
|
|
175
|
+
_ref4.current = node;
|
|
146
176
|
}
|
|
147
177
|
}
|
|
148
178
|
}
|
|
@@ -152,8 +182,8 @@ var InlineDialog = /*#__PURE__*/memo(function InlineDialog(_ref) {
|
|
|
152
182
|
testId: testId
|
|
153
183
|
}, content);
|
|
154
184
|
}) : null;
|
|
155
|
-
return jsx(Manager, null, jsx(Reference, null, function (
|
|
156
|
-
var ref =
|
|
185
|
+
return jsx(Manager, null, jsx(Reference, null, function (_ref5) {
|
|
186
|
+
var ref = _ref5.ref;
|
|
157
187
|
return jsx(NodeResolver, {
|
|
158
188
|
innerRef: function innerRef(node) {
|
|
159
189
|
triggerRef.current = node;
|
|
@@ -183,4 +213,4 @@ export default withAnalyticsContext({
|
|
|
183
213
|
packageVersion: packageVersion
|
|
184
214
|
}
|
|
185
215
|
})
|
|
186
|
-
})(
|
|
216
|
+
})(InlineDialogWithLayering));
|
|
@@ -1,8 +1,13 @@
|
|
|
1
1
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
2
|
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
3
|
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
|
+
*/
|
|
4
7
|
/** @jsx jsx */
|
|
5
8
|
import React, { forwardRef } from 'react';
|
|
9
|
+
|
|
10
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
6
11
|
import { css, jsx } from '@emotion/react';
|
|
7
12
|
import { N0, N50A, N60A, N900 } from '@atlaskit/theme/colors';
|
|
8
13
|
import { layers } from '@atlaskit/theme/constants';
|
package/package.json
CHANGED
|
@@ -1,123 +1,123 @@
|
|
|
1
1
|
{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
}
|
|
2
|
+
"name": "@atlaskit/inline-dialog",
|
|
3
|
+
"version": "14.2.1",
|
|
4
|
+
"description": "An inline dialog is a pop-up container for small amounts of information. It can also contain controls.",
|
|
5
|
+
"publishConfig": {
|
|
6
|
+
"registry": "https://registry.npmjs.org/"
|
|
7
|
+
},
|
|
8
|
+
"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
|
|
9
|
+
"author": "Atlassian Pty Ltd",
|
|
10
|
+
"license": "Apache-2.0",
|
|
11
|
+
"main": "dist/cjs/index.js",
|
|
12
|
+
"module": "dist/esm/index.js",
|
|
13
|
+
"module:es2019": "dist/es2019/index.js",
|
|
14
|
+
"types": "dist/types/index.d.ts",
|
|
15
|
+
"sideEffects": false,
|
|
16
|
+
"atlaskit:src": "src/index.tsx",
|
|
17
|
+
"af:exports": {
|
|
18
|
+
".": "./src/index.tsx",
|
|
19
|
+
"./types": "./src/types.tsx"
|
|
20
|
+
},
|
|
21
|
+
"atlassian": {
|
|
22
|
+
"team": "Design System Team",
|
|
23
|
+
"releaseModel": "continuous",
|
|
24
|
+
"runReact18": true,
|
|
25
|
+
"productPushConsumption": [
|
|
26
|
+
"jira"
|
|
27
|
+
],
|
|
28
|
+
"website": {
|
|
29
|
+
"name": "Inline dialog",
|
|
30
|
+
"status": {
|
|
31
|
+
"type": "intent-to-deprecate",
|
|
32
|
+
"description": "We are planning on deprecating Inline dialog. We recommend using the Popup component instead.",
|
|
33
|
+
"actions": [
|
|
34
|
+
{
|
|
35
|
+
"text": "View Popup documentation",
|
|
36
|
+
"href": "https://atlassian.design/components/popup/examples"
|
|
37
|
+
}
|
|
38
|
+
]
|
|
39
|
+
},
|
|
40
|
+
"category": "Components"
|
|
41
|
+
}
|
|
42
|
+
},
|
|
43
|
+
"dependencies": {
|
|
44
|
+
"@atlaskit/analytics-next": "^9.3.0",
|
|
45
|
+
"@atlaskit/ds-lib": "^2.3.0",
|
|
46
|
+
"@atlaskit/layering": "^0.3.0",
|
|
47
|
+
"@atlaskit/platform-feature-flags": "^0.2.0",
|
|
48
|
+
"@atlaskit/popper": "^6.1.0",
|
|
49
|
+
"@atlaskit/theme": "^12.11.0",
|
|
50
|
+
"@atlaskit/tokens": "^1.51.0",
|
|
51
|
+
"@babel/runtime": "^7.0.0",
|
|
52
|
+
"@emotion/react": "^11.7.1",
|
|
53
|
+
"bind-event-listener": "^3.0.0",
|
|
54
|
+
"react-node-resolver": "^1.0.1"
|
|
55
|
+
},
|
|
56
|
+
"peerDependencies": {
|
|
57
|
+
"react": "^16.8.0 || ^17.0.0 || ~18.2.0"
|
|
58
|
+
},
|
|
59
|
+
"devDependencies": {
|
|
60
|
+
"@af/accessibility-testing": "*",
|
|
61
|
+
"@af/integration-testing": "*",
|
|
62
|
+
"@af/visual-regression": "*",
|
|
63
|
+
"@atlaskit/button": "^17.22.0",
|
|
64
|
+
"@atlaskit/datetime-picker": "^13.6.0",
|
|
65
|
+
"@atlaskit/docs": "*",
|
|
66
|
+
"@atlaskit/modal-dialog": "^12.14.0",
|
|
67
|
+
"@atlaskit/section-message": "^6.5.0",
|
|
68
|
+
"@atlaskit/select": "^17.11.0",
|
|
69
|
+
"@atlaskit/ssr": "*",
|
|
70
|
+
"@atlaskit/visual-regression": "*",
|
|
71
|
+
"@testing-library/react": "^12.1.5",
|
|
72
|
+
"@types/react-node-resolver": "^2.0.0",
|
|
73
|
+
"react-dom": "^16.8.0",
|
|
74
|
+
"react-lorem-component": "^0.13.0",
|
|
75
|
+
"typescript": "~5.4.2",
|
|
76
|
+
"wait-for-expect": "^1.2.0"
|
|
77
|
+
},
|
|
78
|
+
"keywords": [
|
|
79
|
+
"atlaskit",
|
|
80
|
+
"react",
|
|
81
|
+
"ui"
|
|
82
|
+
],
|
|
83
|
+
"techstack": {
|
|
84
|
+
"@atlassian/frontend": {
|
|
85
|
+
"import-structure": "atlassian-conventions"
|
|
86
|
+
},
|
|
87
|
+
"@repo/internal": {
|
|
88
|
+
"dom-events": "use-bind-event-listener",
|
|
89
|
+
"analytics": "analytics-next",
|
|
90
|
+
"design-tokens": [
|
|
91
|
+
"color",
|
|
92
|
+
"spacing"
|
|
93
|
+
],
|
|
94
|
+
"theming": [
|
|
95
|
+
"react-context"
|
|
96
|
+
],
|
|
97
|
+
"styling": [
|
|
98
|
+
"static",
|
|
99
|
+
"emotion"
|
|
100
|
+
],
|
|
101
|
+
"design-system": "v1",
|
|
102
|
+
"deprecation": "no-deprecated-imports"
|
|
103
|
+
}
|
|
104
|
+
},
|
|
105
|
+
"typesVersions": {
|
|
106
|
+
">=4.5 <4.9": {
|
|
107
|
+
"*": [
|
|
108
|
+
"dist/types-ts4.5/*",
|
|
109
|
+
"dist/types-ts4.5/index.d.ts"
|
|
110
|
+
]
|
|
111
|
+
}
|
|
112
|
+
},
|
|
113
|
+
"platform-feature-flags": {
|
|
114
|
+
"platform.design-system-team.layering_qmiw3": {
|
|
115
|
+
"type": "boolean",
|
|
116
|
+
"referenceOnly": true
|
|
117
|
+
},
|
|
118
|
+
"platform.design-system-team.inline-message-layering_wfp1p": {
|
|
119
|
+
"type": "boolean"
|
|
120
|
+
}
|
|
121
|
+
},
|
|
122
|
+
"homepage": "https://atlassian.design/components/inline-dialog/"
|
|
123
|
+
}
|
package/report.api.md
CHANGED
|
@@ -2,7 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
## API Report File for "@atlaskit/inline-dialog"
|
|
4
4
|
|
|
5
|
-
> Do not edit this file. This report is auto-generated using
|
|
5
|
+
> Do not edit this file. This report is auto-generated using
|
|
6
|
+
> [API Extractor](https://api-extractor.com/).
|
|
6
7
|
> [Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
|
|
7
8
|
|
|
8
9
|
### Table of contents
|
|
@@ -22,61 +23,58 @@ import { WithContextProps } from '@atlaskit/analytics-next';
|
|
|
22
23
|
|
|
23
24
|
// @public (undocumented)
|
|
24
25
|
const _default: React_2.ForwardRefExoticComponent<
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
| 'testId'
|
|
44
|
-
> &
|
|
45
|
-
React_2.RefAttributes<any>
|
|
26
|
+
Pick<
|
|
27
|
+
Omit<React_2.PropsWithChildren<InlineDialogProps>, keyof WithAnalyticsEventsProps> &
|
|
28
|
+
React_2.RefAttributes<any> &
|
|
29
|
+
WithContextProps,
|
|
30
|
+
| 'analyticsContext'
|
|
31
|
+
| 'children'
|
|
32
|
+
| 'content'
|
|
33
|
+
| 'isOpen'
|
|
34
|
+
| 'key'
|
|
35
|
+
| 'onClose'
|
|
36
|
+
| 'onContentBlur'
|
|
37
|
+
| 'onContentClick'
|
|
38
|
+
| 'onContentFocus'
|
|
39
|
+
| 'placement'
|
|
40
|
+
| 'strategy'
|
|
41
|
+
| 'testId'
|
|
42
|
+
> &
|
|
43
|
+
React_2.RefAttributes<any>
|
|
46
44
|
>;
|
|
47
45
|
export default _default;
|
|
48
46
|
|
|
49
47
|
// @public (undocumented)
|
|
50
48
|
interface InlineDialogProps extends WithAnalyticsEventsProps {
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
49
|
+
children: ReactNode;
|
|
50
|
+
content: ReactNode;
|
|
51
|
+
isOpen?: boolean;
|
|
52
|
+
onClose?: (obj: { isOpen: boolean; event: Event }) => void;
|
|
53
|
+
onContentBlur?: () => void;
|
|
54
|
+
onContentClick?: () => void;
|
|
55
|
+
onContentFocus?: () => void;
|
|
56
|
+
placement?: Placement;
|
|
57
|
+
strategy?: 'absolute' | 'fixed';
|
|
58
|
+
testId?: string;
|
|
61
59
|
}
|
|
62
60
|
|
|
63
61
|
// @public (undocumented)
|
|
64
62
|
export type Placement =
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
63
|
+
| 'auto'
|
|
64
|
+
| 'auto-end'
|
|
65
|
+
| 'auto-start'
|
|
66
|
+
| 'bottom'
|
|
67
|
+
| 'bottom-end'
|
|
68
|
+
| 'bottom-start'
|
|
69
|
+
| 'left'
|
|
70
|
+
| 'left-end'
|
|
71
|
+
| 'left-start'
|
|
72
|
+
| 'right'
|
|
73
|
+
| 'right-end'
|
|
74
|
+
| 'right-start'
|
|
75
|
+
| 'top'
|
|
76
|
+
| 'top-end'
|
|
77
|
+
| 'top-start';
|
|
80
78
|
|
|
81
79
|
// (No @packageDocumentation comment for this package)
|
|
82
80
|
```
|
|
@@ -89,7 +87,7 @@ export type Placement =
|
|
|
89
87
|
|
|
90
88
|
```json
|
|
91
89
|
{
|
|
92
|
-
|
|
90
|
+
"react": "^16.8.0"
|
|
93
91
|
}
|
|
94
92
|
```
|
|
95
93
|
|