@atlaskit/popup 1.30.1 → 1.30.2

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 (15) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/cjs/popper-wrapper.js +3 -4
  3. package/dist/cjs/popup.js +1 -1
  4. package/dist/cjs/use-close-manager.js +11 -13
  5. package/dist/cjs/use-get-memoized-merged-trigger-ref-new.js +1 -1
  6. package/dist/es2019/popup.js +1 -1
  7. package/dist/es2019/use-close-manager.js +11 -13
  8. package/dist/es2019/use-get-memoized-merged-trigger-ref-new.js +1 -1
  9. package/dist/esm/popper-wrapper.js +3 -4
  10. package/dist/esm/popup.js +1 -1
  11. package/dist/esm/use-close-manager.js +11 -13
  12. package/dist/esm/use-get-memoized-merged-trigger-ref-new.js +1 -1
  13. package/dist/types/use-get-memoized-merged-trigger-ref-new.d.ts +1 -1
  14. package/dist/types-ts4.5/use-get-memoized-merged-trigger-ref-new.d.ts +1 -1
  15. package/package.json +5 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # @atlaskit/popup
2
2
 
3
+ ## 1.30.2
4
+
5
+ ### Patch Changes
6
+
7
+ - [#180699](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/180699)
8
+ [`ba9603c950de1`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ba9603c950de1) -
9
+ Clicking outside should close all popups
10
+
3
11
  ## 1.30.1
4
12
 
5
13
  ### Patch Changes
package/dist/cjs/popper-wrapper.js CHANGED
@@ -23,7 +23,6 @@ var _repositionOnUpdate = require("./reposition-on-update");
23
23
  var _useCloseManager = require("./use-close-manager");
24
24
  var _useFocusManager = require("./use-focus-manager");
25
25
  var _excluded = ["shouldRenderToParent", "shouldFitContainer", "children", "appearance", "xcss"];
26
- var _css;
27
26
  /**
28
27
  * @jsxRuntime classic
29
28
  * @jsx jsx
@@ -31,7 +30,7 @@ var _css;
31
30
  var fullWidthStyles = (0, _react2.css)({
32
31
  width: '100%'
33
32
  });
34
- var rootStyles = (0, _react2.css)((_css = {
33
+ var rootStyles = (0, _react2.css)((0, _defineProperty2.default)((0, _defineProperty2.default)({
35
34
  display: 'block',
36
35
  boxSizing: 'border-box',
37
36
  zIndex: _constants.layers.layer(),
@@ -42,9 +41,9 @@ var rootStyles = (0, _react2.css)((_css = {
42
41
  // Otherwise, when rendering into the parent (not using a portal),
43
42
  // the text color can be inherited from the parent.
44
43
  color: "var(--ds-text, #172B4D)"
45
- }, (0, _defineProperty2.default)(_css, _tokens.CURRENT_SURFACE_CSS_VAR, "var(--ds-surface-overlay, ".concat(_colors.N0, ")")), (0, _defineProperty2.default)(_css, '&:focus', {
44
+ }, _tokens.CURRENT_SURFACE_CSS_VAR, "var(--ds-surface-overlay, ".concat(_colors.N0, ")")), '&:focus', {
46
45
  outline: 'none'
47
- }), _css));
46
+ }));
48
47
  var scrollableStyles = (0, _react2.css)({
49
48
  overflow: 'auto'
50
49
  });
package/dist/cjs/popup.js CHANGED
@@ -125,7 +125,7 @@ var Popup = exports.Popup = /*#__PURE__*/(0, _react.memo)(function (_ref) {
125
125
  var popupContent = (0, _react2.jsx)(_popper.Manager, null, (0, _react2.jsx)(_popper.Reference, null, function (_ref2) {
126
126
  var ref = _ref2.ref;
127
127
  return trigger({
128
- ref: !(0, _platformFeatureFlags.fg)('platform-design-system-dsp-20476-dropdown-menu') ? getMergedTriggerRef(ref, setTriggerRef, isOpen) : getMergedTriggerRefNew(ref, setTriggerRef),
128
+ ref: !(0, _platformFeatureFlags.fg)('platform-design-system-popup-ref') ? getMergedTriggerRef(ref, setTriggerRef, isOpen) : getMergedTriggerRefNew(ref, setTriggerRef),
129
129
  'aria-controls': isOpen ? id : undefined,
130
130
  'aria-expanded': isOpen,
131
131
  'aria-haspopup': role === 'dialog' && (0, _platformFeatureFlags.fg)('platform_dst_popup-disable-focuslock') ? 'dialog' : true
package/dist/cjs/use-close-manager.js CHANGED
@@ -76,19 +76,17 @@ var useCloseManager = exports.useCloseManager = function useCloseManager(_ref) {
76
76
  if (target instanceof HTMLElement) {
77
77
  var _target$closest;
78
78
  var layeredElement = (_target$closest = target.closest) === null || _target$closest === void 0 ? void 0 : _target$closest.call(target, "[data-ds--level]");
79
- if (!layeredElement) {
80
- // if no layered element, we disable the click event of disabled layers.
81
- return;
82
- }
83
- var closeType = layeredElement.getAttribute('[data-ds--close--type]');
84
- if (closeType === 'single') {
85
- // if the close type is single, we won't close other disabled layers when clicking outside
86
- return;
87
- }
88
- var levelOfClickedLayer = layeredElement.getAttribute('data-ds--level');
89
- if (levelOfClickedLayer && Number(levelOfClickedLayer) > currentLevel) {
90
- // won't trigger onClick event when we click in a higher layer.
91
- return;
79
+ if (layeredElement) {
80
+ var closeType = layeredElement.getAttribute('[data-ds--close--type]');
81
+ if (closeType === 'single') {
82
+ // if the close type is single, we won't close other disabled layers when clicking outside
83
+ return;
84
+ }
85
+ var levelOfClickedLayer = layeredElement.getAttribute('data-ds--level');
86
+ if (levelOfClickedLayer && Number(levelOfClickedLayer) > currentLevel) {
87
+ // won't trigger onClick event when we click in a higher layer.
88
+ return;
89
+ }
92
90
  }
93
91
  }
94
92
  } else {
package/dist/cjs/use-get-memoized-merged-trigger-ref-new.js CHANGED
@@ -10,7 +10,7 @@ var _react = require("react");
10
10
  var _memoizeOne = _interopRequireDefault(require("memoize-one"));
11
11
  /**
12
12
  * Here setting ref is not dependent on isOpen flag which is failing in React 18 strict mode
13
- * Implemented behind ff `platform-design-system-dsp-20476-dropdown-menu`
13
+ * Implemented behind ff `platform-design-system-popup-ref`
14
14
  * @returns Function to set trigger ref
15
15
  */
16
16
  var useGetMemoizedMergedTriggerRefNew = exports.useGetMemoizedMergedTriggerRefNew = function useGetMemoizedMergedTriggerRefNew() {
package/dist/es2019/popup.js CHANGED
@@ -105,7 +105,7 @@ export const Popup = /*#__PURE__*/memo(({
105
105
  ref
106
106
  }) => {
107
107
  return trigger({
108
- ref: !fg('platform-design-system-dsp-20476-dropdown-menu') ? getMergedTriggerRef(ref, setTriggerRef, isOpen) : getMergedTriggerRefNew(ref, setTriggerRef),
108
+ ref: !fg('platform-design-system-popup-ref') ? getMergedTriggerRef(ref, setTriggerRef, isOpen) : getMergedTriggerRefNew(ref, setTriggerRef),
109
109
  'aria-controls': isOpen ? id : undefined,
110
110
  'aria-expanded': isOpen,
111
111
  'aria-haspopup': role === 'dialog' && fg('platform_dst_popup-disable-focuslock') ? 'dialog' : true
package/dist/es2019/use-close-manager.js CHANGED
@@ -73,19 +73,17 @@ export const useCloseManager = ({
73
73
  if (target instanceof HTMLElement) {
74
74
  var _target$closest;
75
75
  const layeredElement = (_target$closest = target.closest) === null || _target$closest === void 0 ? void 0 : _target$closest.call(target, `[data-ds--level]`);
76
- if (!layeredElement) {
77
- // if no layered element, we disable the click event of disabled layers.
78
- return;
79
- }
80
- const closeType = layeredElement.getAttribute('[data-ds--close--type]');
81
- if (closeType === 'single') {
82
- // if the close type is single, we won't close other disabled layers when clicking outside
83
- return;
84
- }
85
- const levelOfClickedLayer = layeredElement.getAttribute('data-ds--level');
86
- if (levelOfClickedLayer && Number(levelOfClickedLayer) > currentLevel) {
87
- // won't trigger onClick event when we click in a higher layer.
88
- return;
76
+ if (layeredElement) {
77
+ const closeType = layeredElement.getAttribute('[data-ds--close--type]');
78
+ if (closeType === 'single') {
79
+ // if the close type is single, we won't close other disabled layers when clicking outside
80
+ return;
81
+ }
82
+ const levelOfClickedLayer = layeredElement.getAttribute('data-ds--level');
83
+ if (levelOfClickedLayer && Number(levelOfClickedLayer) > currentLevel) {
84
+ // won't trigger onClick event when we click in a higher layer.
85
+ return;
86
+ }
89
87
  }
90
88
  }
91
89
  } else {
package/dist/es2019/use-get-memoized-merged-trigger-ref-new.js CHANGED
@@ -3,7 +3,7 @@ import memoizeOne from 'memoize-one';
3
3
 
4
4
  /**
5
5
  * Here setting ref is not dependent on isOpen flag which is failing in React 18 strict mode
6
- * Implemented behind ff `platform-design-system-dsp-20476-dropdown-menu`
6
+ * Implemented behind ff `platform-design-system-popup-ref`
7
7
  * @returns Function to set trigger ref
8
8
  */
9
9
  export const useGetMemoizedMergedTriggerRefNew = () => {
package/dist/esm/popper-wrapper.js CHANGED
@@ -4,7 +4,6 @@ import _extends from "@babel/runtime/helpers/extends";
4
4
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
5
5
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
6
6
  var _excluded = ["shouldRenderToParent", "shouldFitContainer", "children", "appearance", "xcss"];
7
- var _css;
8
7
  /**
9
8
  * @jsxRuntime classic
10
9
  * @jsx jsx
@@ -24,7 +23,7 @@ import { useFocusManager } from './use-focus-manager';
24
23
  var fullWidthStyles = css({
25
24
  width: '100%'
26
25
  });
27
- var rootStyles = css((_css = {
26
+ var rootStyles = css(_defineProperty(_defineProperty({
28
27
  display: 'block',
29
28
  boxSizing: 'border-box',
30
29
  zIndex: layers.layer(),
@@ -35,9 +34,9 @@ var rootStyles = css((_css = {
35
34
  // Otherwise, when rendering into the parent (not using a portal),
36
35
  // the text color can be inherited from the parent.
37
36
  color: "var(--ds-text, #172B4D)"
38
- }, _defineProperty(_css, CURRENT_SURFACE_CSS_VAR, "var(--ds-surface-overlay, ".concat(N0, ")")), _defineProperty(_css, '&:focus', {
37
+ }, CURRENT_SURFACE_CSS_VAR, "var(--ds-surface-overlay, ".concat(N0, ")")), '&:focus', {
39
38
  outline: 'none'
40
- }), _css));
39
+ }));
41
40
  var scrollableStyles = css({
42
41
  overflow: 'auto'
43
42
  });
package/dist/esm/popup.js CHANGED
@@ -117,7 +117,7 @@ export var Popup = /*#__PURE__*/memo(function (_ref) {
117
117
  var popupContent = jsx(Manager, null, jsx(Reference, null, function (_ref2) {
118
118
  var ref = _ref2.ref;
119
119
  return trigger({
120
- ref: !fg('platform-design-system-dsp-20476-dropdown-menu') ? getMergedTriggerRef(ref, setTriggerRef, isOpen) : getMergedTriggerRefNew(ref, setTriggerRef),
120
+ ref: !fg('platform-design-system-popup-ref') ? getMergedTriggerRef(ref, setTriggerRef, isOpen) : getMergedTriggerRefNew(ref, setTriggerRef),
121
121
  'aria-controls': isOpen ? id : undefined,
122
122
  'aria-expanded': isOpen,
123
123
  'aria-haspopup': role === 'dialog' && fg('platform_dst_popup-disable-focuslock') ? 'dialog' : true
package/dist/esm/use-close-manager.js CHANGED
@@ -68,19 +68,17 @@ export var useCloseManager = function useCloseManager(_ref) {
68
68
  if (target instanceof HTMLElement) {
69
69
  var _target$closest;
70
70
  var layeredElement = (_target$closest = target.closest) === null || _target$closest === void 0 ? void 0 : _target$closest.call(target, "[data-ds--level]");
71
- if (!layeredElement) {
72
- // if no layered element, we disable the click event of disabled layers.
73
- return;
74
- }
75
- var closeType = layeredElement.getAttribute('[data-ds--close--type]');
76
- if (closeType === 'single') {
77
- // if the close type is single, we won't close other disabled layers when clicking outside
78
- return;
79
- }
80
- var levelOfClickedLayer = layeredElement.getAttribute('data-ds--level');
81
- if (levelOfClickedLayer && Number(levelOfClickedLayer) > currentLevel) {
82
- // won't trigger onClick event when we click in a higher layer.
83
- return;
71
+ if (layeredElement) {
72
+ var closeType = layeredElement.getAttribute('[data-ds--close--type]');
73
+ if (closeType === 'single') {
74
+ // if the close type is single, we won't close other disabled layers when clicking outside
75
+ return;
76
+ }
77
+ var levelOfClickedLayer = layeredElement.getAttribute('data-ds--level');
78
+ if (levelOfClickedLayer && Number(levelOfClickedLayer) > currentLevel) {
79
+ // won't trigger onClick event when we click in a higher layer.
80
+ return;
81
+ }
84
82
  }
85
83
  }
86
84
  } else {
package/dist/esm/use-get-memoized-merged-trigger-ref-new.js CHANGED
@@ -4,7 +4,7 @@ import memoizeOne from 'memoize-one';
4
4
 
5
5
  /**
6
6
  * Here setting ref is not dependent on isOpen flag which is failing in React 18 strict mode
7
- * Implemented behind ff `platform-design-system-dsp-20476-dropdown-menu`
7
+ * Implemented behind ff `platform-design-system-popup-ref`
8
8
  * @returns Function to set trigger ref
9
9
  */
10
10
  export var useGetMemoizedMergedTriggerRefNew = function useGetMemoizedMergedTriggerRefNew() {
package/dist/types/use-get-memoized-merged-trigger-ref-new.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import { type Dispatch, type SetStateAction } from 'react';
2
2
  /**
3
3
  * Here setting ref is not dependent on isOpen flag which is failing in React 18 strict mode
4
- * Implemented behind ff `platform-design-system-dsp-20476-dropdown-menu`
4
+ * Implemented behind ff `platform-design-system-popup-ref`
5
5
  * @returns Function to set trigger ref
6
6
  */
7
7
  export declare const useGetMemoizedMergedTriggerRefNew: () => import("memoize-one").MemoizedFn<(ref: React.RefCallback<HTMLElement> | React.MutableRefObject<HTMLElement> | null, setTriggerRef: Dispatch<SetStateAction<HTMLElement | null>>) => (node: HTMLElement | null) => void>;
package/dist/types-ts4.5/use-get-memoized-merged-trigger-ref-new.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import { type Dispatch, type SetStateAction } from 'react';
2
2
  /**
3
3
  * Here setting ref is not dependent on isOpen flag which is failing in React 18 strict mode
4
- * Implemented behind ff `platform-design-system-dsp-20476-dropdown-menu`
4
+ * Implemented behind ff `platform-design-system-popup-ref`
5
5
  * @returns Function to set trigger ref
6
6
  */
7
7
  export declare const useGetMemoizedMergedTriggerRefNew: () => import("memoize-one").MemoizedFn<(ref: React.RefCallback<HTMLElement> | React.MutableRefObject<HTMLElement> | null, setTriggerRef: Dispatch<SetStateAction<HTMLElement | null>>) => (node: HTMLElement | null) => void>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/popup",
3
- "version": "1.30.1",
3
+ "version": "1.30.2",
4
4
  "description": "A popup displays brief content in an overlay.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -44,10 +44,10 @@
44
44
  "@atlaskit/layering": "^1.0.0",
45
45
  "@atlaskit/platform-feature-flags": "^0.3.0",
46
46
  "@atlaskit/popper": "^6.3.0",
47
- "@atlaskit/portal": "^4.9.0",
47
+ "@atlaskit/portal": "^4.10.0",
48
48
  "@atlaskit/primitives": "^13.3.0",
49
49
  "@atlaskit/theme": "^14.0.0",
50
- "@atlaskit/tokens": "^2.4.0",
50
+ "@atlaskit/tokens": "^2.5.0",
51
51
  "@babel/runtime": "^7.0.0",
52
52
  "@emotion/react": "^11.7.1",
53
53
  "bind-event-listener": "^3.0.0",
@@ -67,7 +67,7 @@
67
67
  "@atlaskit/icon": "^23.1.0",
68
68
  "@atlaskit/ssr": "*",
69
69
  "@atlaskit/textfield": "^6.7.0",
70
- "@atlaskit/toggle": "^13.4.0",
70
+ "@atlaskit/toggle": "^14.0.0",
71
71
  "@atlaskit/visual-regression": "*",
72
72
  "@atlassian/feature-flags-test-utils": "*",
73
73
  "@compiled/react": "^0.18.1",
@@ -112,7 +112,7 @@
112
112
  "platform_dst_popup-disable-focuslock": {
113
113
  "type": "boolean"
114
114
  },
115
- "platform-design-system-dsp-20476-dropdown-menu": {
115
+ "platform-design-system-popup-ref": {
116
116
  "type": "boolean"
117
117
  },
118
118
  "design-system-closed-all-when-click-outside": {