@atlaskit/popup 4.12.0 → 4.13.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.
- package/CHANGELOG.md +9 -0
- package/dist/cjs/popper-wrapper.compiled.css +1 -0
- package/dist/cjs/popper-wrapper.js +2 -1
- package/dist/es2019/popper-wrapper.compiled.css +1 -0
- package/dist/es2019/popper-wrapper.js +2 -1
- package/dist/esm/popper-wrapper.compiled.css +1 -0
- package/dist/esm/popper-wrapper.js +2 -1
- package/dist/types/types.d.ts +2 -0
- package/dist/types-ts4.5/types.d.ts +2 -0
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,14 @@
|
|
|
1
1
|
# @atlaskit/popup
|
|
2
2
|
|
|
3
|
+
## 4.13.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [`dd02781bfb92f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/dd02781bfb92f) -
|
|
8
|
+
Increases the height of the popup on viewports with appearance `UNSAFE_modal-below-sm`, i.e.
|
|
9
|
+
viewports below "sm" (mobile) from 50vh to 100vh. This change is behind the
|
|
10
|
+
`platform_dst_nav4_flyout_menu_slots_close_button` feature gate.
|
|
11
|
+
|
|
3
12
|
## 4.12.0
|
|
4
13
|
|
|
5
14
|
### Minor Changes
|
|
@@ -12,6 +12,7 @@
|
|
|
12
12
|
._1reo1wug{overflow-x:auto}
|
|
13
13
|
._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
|
|
14
14
|
._bfhk1i5c{background-color:var(--ds-blanket,#050c1f75)}
|
|
15
|
+
._c71l1ei0{max-height:calc(100vh - var(--ds-space-050, 4px)*2)}
|
|
15
16
|
._c71ldtre{max-height:50vh}
|
|
16
17
|
._kqsw1n9t{position:fixed}
|
|
17
18
|
._syazi7uo{color:var(--ds-text,#292a2e)}
|
|
@@ -32,6 +32,7 @@ var wrapperStyles = {
|
|
|
32
32
|
var scrollableStyles = null;
|
|
33
33
|
var blanketStyles = null;
|
|
34
34
|
var modalStyles = null;
|
|
35
|
+
var newModalStyles = null;
|
|
35
36
|
var focusRingStyles = {
|
|
36
37
|
root: "_mizu194a _1ah3dkaa _ra3xnqa1 _128mdkaa _1cvmnqa1 _4davt94y"
|
|
37
38
|
};
|
|
@@ -46,7 +47,7 @@ var DefaultPopupComponent = /*#__PURE__*/(0, _react.forwardRef)(function (props,
|
|
|
46
47
|
htmlAttributes = (0, _objectWithoutProperties2.default)(props, _excluded);
|
|
47
48
|
return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
|
|
48
49
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
|
|
49
|
-
className: (0, _runtime.ax)([wrapperStyles.root, (0, _platformFeatureFlags.fg)('platform-dst-shape-theme-default') && wrapperStyles.rootT26Shape, appearance === 'UNSAFE_modal-below-sm' && "_dk5d1b66 _c71ldtre _kqsw1n9t _152t1b66", (!shouldRenderToParent || shouldFitViewport && (0, _platformFeatureFlags.fg)('platform_dst_nav4_flyoutmenuitem_render_to_parent')) && "_1reo1wug _18m91wug", shouldFitContainer && "_1bsb1osq", className])
|
|
50
|
+
className: (0, _runtime.ax)([wrapperStyles.root, (0, _platformFeatureFlags.fg)('platform-dst-shape-theme-default') && wrapperStyles.rootT26Shape, appearance === 'UNSAFE_modal-below-sm' && !(0, _platformFeatureFlags.fg)('platform_dst_nav4_flyout_menu_slots_close_button') && "_dk5d1b66 _c71ldtre _kqsw1n9t _152t1b66", appearance === 'UNSAFE_modal-below-sm' && (0, _platformFeatureFlags.fg)('platform_dst_nav4_flyout_menu_slots_close_button') && "_dk5d1b66 _c71l1ei0 _kqsw1n9t _152t1b66", (!shouldRenderToParent || shouldFitViewport && (0, _platformFeatureFlags.fg)('platform_dst_nav4_flyoutmenuitem_render_to_parent')) && "_1reo1wug _18m91wug", shouldFitContainer && "_1bsb1osq", className])
|
|
50
51
|
}, htmlAttributes, {
|
|
51
52
|
ref: ref
|
|
52
53
|
}), children);
|
|
@@ -12,6 +12,7 @@
|
|
|
12
12
|
._1reo1wug{overflow-x:auto}
|
|
13
13
|
._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
|
|
14
14
|
._bfhk1i5c{background-color:var(--ds-blanket,#050c1f75)}
|
|
15
|
+
._c71l1ei0{max-height:calc(100vh - var(--ds-space-050, 4px)*2)}
|
|
15
16
|
._c71ldtre{max-height:50vh}
|
|
16
17
|
._kqsw1n9t{position:fixed}
|
|
17
18
|
._syazi7uo{color:var(--ds-text,#292a2e)}
|
|
@@ -19,6 +19,7 @@ const wrapperStyles = {
|
|
|
19
19
|
const scrollableStyles = null;
|
|
20
20
|
const blanketStyles = null;
|
|
21
21
|
const modalStyles = null;
|
|
22
|
+
const newModalStyles = null;
|
|
22
23
|
const focusRingStyles = {
|
|
23
24
|
root: "_mizu194a _1ah3dkaa _ra3xnqa1 _128mdkaa _1cvmnqa1 _4davt94y"
|
|
24
25
|
};
|
|
@@ -35,7 +36,7 @@ const DefaultPopupComponent = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
35
36
|
} = props;
|
|
36
37
|
return /*#__PURE__*/React.createElement("div", _extends({
|
|
37
38
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
|
|
38
|
-
className: ax([wrapperStyles.root, fg('platform-dst-shape-theme-default') && wrapperStyles.rootT26Shape, appearance === 'UNSAFE_modal-below-sm' && "_dk5d1b66 _c71ldtre _kqsw1n9t _152t1b66", (!shouldRenderToParent || shouldFitViewport && fg('platform_dst_nav4_flyoutmenuitem_render_to_parent')) && "_1reo1wug _18m91wug", shouldFitContainer && "_1bsb1osq", className])
|
|
39
|
+
className: ax([wrapperStyles.root, fg('platform-dst-shape-theme-default') && wrapperStyles.rootT26Shape, appearance === 'UNSAFE_modal-below-sm' && !fg('platform_dst_nav4_flyout_menu_slots_close_button') && "_dk5d1b66 _c71ldtre _kqsw1n9t _152t1b66", appearance === 'UNSAFE_modal-below-sm' && fg('platform_dst_nav4_flyout_menu_slots_close_button') && "_dk5d1b66 _c71l1ei0 _kqsw1n9t _152t1b66", (!shouldRenderToParent || shouldFitViewport && fg('platform_dst_nav4_flyoutmenuitem_render_to_parent')) && "_1reo1wug _18m91wug", shouldFitContainer && "_1bsb1osq", className])
|
|
39
40
|
}, htmlAttributes, {
|
|
40
41
|
ref: ref
|
|
41
42
|
}), children);
|
|
@@ -12,6 +12,7 @@
|
|
|
12
12
|
._1reo1wug{overflow-x:auto}
|
|
13
13
|
._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
|
|
14
14
|
._bfhk1i5c{background-color:var(--ds-blanket,#050c1f75)}
|
|
15
|
+
._c71l1ei0{max-height:calc(100vh - var(--ds-space-050, 4px)*2)}
|
|
15
16
|
._c71ldtre{max-height:50vh}
|
|
16
17
|
._kqsw1n9t{position:fixed}
|
|
17
18
|
._syazi7uo{color:var(--ds-text,#292a2e)}
|
|
@@ -23,6 +23,7 @@ var wrapperStyles = {
|
|
|
23
23
|
var scrollableStyles = null;
|
|
24
24
|
var blanketStyles = null;
|
|
25
25
|
var modalStyles = null;
|
|
26
|
+
var newModalStyles = null;
|
|
26
27
|
var focusRingStyles = {
|
|
27
28
|
root: "_mizu194a _1ah3dkaa _ra3xnqa1 _128mdkaa _1cvmnqa1 _4davt94y"
|
|
28
29
|
};
|
|
@@ -37,7 +38,7 @@ var DefaultPopupComponent = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
37
38
|
htmlAttributes = _objectWithoutProperties(props, _excluded);
|
|
38
39
|
return /*#__PURE__*/React.createElement("div", _extends({
|
|
39
40
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
|
|
40
|
-
className: ax([wrapperStyles.root, fg('platform-dst-shape-theme-default') && wrapperStyles.rootT26Shape, appearance === 'UNSAFE_modal-below-sm' && "_dk5d1b66 _c71ldtre _kqsw1n9t _152t1b66", (!shouldRenderToParent || shouldFitViewport && fg('platform_dst_nav4_flyoutmenuitem_render_to_parent')) && "_1reo1wug _18m91wug", shouldFitContainer && "_1bsb1osq", className])
|
|
41
|
+
className: ax([wrapperStyles.root, fg('platform-dst-shape-theme-default') && wrapperStyles.rootT26Shape, appearance === 'UNSAFE_modal-below-sm' && !fg('platform_dst_nav4_flyout_menu_slots_close_button') && "_dk5d1b66 _c71ldtre _kqsw1n9t _152t1b66", appearance === 'UNSAFE_modal-below-sm' && fg('platform_dst_nav4_flyout_menu_slots_close_button') && "_dk5d1b66 _c71l1ei0 _kqsw1n9t _152t1b66", (!shouldRenderToParent || shouldFitViewport && fg('platform_dst_nav4_flyoutmenuitem_render_to_parent')) && "_1reo1wug _18m91wug", shouldFitContainer && "_1bsb1osq", className])
|
|
41
42
|
}, htmlAttributes, {
|
|
42
43
|
ref: ref
|
|
43
44
|
}), children);
|
package/dist/types/types.d.ts
CHANGED
|
@@ -98,6 +98,8 @@ export interface PopupComponentProps {
|
|
|
98
98
|
/**
|
|
99
99
|
* The "default" appearance is used for standard popups.
|
|
100
100
|
* The "UNSAFE_modal-below-sm" appearance makes the popup appear as a modal when the viewport is smaller than "sm".
|
|
101
|
+
* When the feature gate `platform_dst_nav4_flyout_menu_slots_close_button` is enabled, the appearance should only
|
|
102
|
+
* be set to "UNSAFE_modal-below-sm" if the provided popup includes a close button.
|
|
101
103
|
*/
|
|
102
104
|
appearance?: 'default' | 'UNSAFE_modal-below-sm';
|
|
103
105
|
/**
|
|
@@ -98,6 +98,8 @@ export interface PopupComponentProps {
|
|
|
98
98
|
/**
|
|
99
99
|
* The "default" appearance is used for standard popups.
|
|
100
100
|
* The "UNSAFE_modal-below-sm" appearance makes the popup appear as a modal when the viewport is smaller than "sm".
|
|
101
|
+
* When the feature gate `platform_dst_nav4_flyout_menu_slots_close_button` is enabled, the appearance should only
|
|
102
|
+
* be set to "UNSAFE_modal-below-sm" if the provided popup includes a close button.
|
|
101
103
|
*/
|
|
102
104
|
appearance?: 'default' | 'UNSAFE_modal-below-sm';
|
|
103
105
|
/**
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/popup",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.13.0",
|
|
4
4
|
"description": "A popup displays brief content in an overlay.",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -60,7 +60,7 @@
|
|
|
60
60
|
"@atlaskit/docs": "^11.2.0",
|
|
61
61
|
"@atlaskit/form": "^15.2.0",
|
|
62
62
|
"@atlaskit/heading": "^5.2.0",
|
|
63
|
-
"@atlaskit/icon": "^29.
|
|
63
|
+
"@atlaskit/icon": "^29.4.0",
|
|
64
64
|
"@atlaskit/link": "^3.3.0",
|
|
65
65
|
"@atlaskit/modal-dialog": "^14.9.0",
|
|
66
66
|
"@atlaskit/section-message": "^8.11.0",
|