@atlaskit/popup 1.12.0 → 1.13.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 CHANGED
@@ -1,5 +1,17 @@
1
1
  # @atlaskit/popup
2
2
 
3
+ ## 1.13.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [#80085](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/80085) [`7febfed958dd`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/7febfed958dd) - Update usage of `React.FC` to explicity include `children`
8
+
9
+ ## 1.13.0
10
+
11
+ ### Minor Changes
12
+
13
+ - [#70573](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/70573) [`c8fa9cdd08e4`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c8fa9cdd08e4) - Accessibility changes. Add a new optional prop `shouldDisableFocusLock`. We are testing the ability to close the popup by pressing the Tab key when `shouldDisableFocusLock` is `true` and `shouldRenderToParent` is `true` behind a feature flag. This is necessary for the dropdown menu to work correctly. If this fix is successful it will be available in a later release.
14
+
3
15
  ## 1.12.0
4
16
 
5
17
  ### Minor Changes
@@ -75,7 +75,8 @@ function PopperWrapper(_ref) {
75
75
  autoFocus = _ref$autoFocus === void 0 ? true : _ref$autoFocus,
76
76
  triggerRef = _ref.triggerRef,
77
77
  shouldUseCaptureOnOutsideClick = _ref.shouldUseCaptureOnOutsideClick,
78
- shouldRenderToParent = _ref.shouldRenderToParent;
78
+ shouldRenderToParent = _ref.shouldRenderToParent,
79
+ shouldDisableFocusLock = _ref.shouldDisableFocusLock;
79
80
  var _useState = (0, _react.useState)(null),
80
81
  _useState2 = (0, _slicedToArray2.default)(_useState, 2),
81
82
  popupRef = _useState2[0],
@@ -84,16 +85,22 @@ function PopperWrapper(_ref) {
84
85
  _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
85
86
  initialFocusRef = _useState4[0],
86
87
  setInitialFocusRef = _useState4[1];
88
+
89
+ // We have cases when we need to prohibit focus locking
90
+ // e.g. in DropdownMenu
91
+ var shouldCloseOnTab = shouldRenderToParent && shouldDisableFocusLock;
87
92
  (0, _useFocusManager.useFocusManager)({
88
93
  initialFocusRef: initialFocusRef,
89
- popupRef: popupRef
94
+ popupRef: popupRef,
95
+ shouldCloseOnTab: shouldCloseOnTab
90
96
  });
91
97
  (0, _useCloseManager.useCloseManager)({
92
98
  isOpen: isOpen,
93
99
  onClose: onClose,
94
100
  popupRef: popupRef,
95
101
  triggerRef: triggerRef,
96
- shouldUseCaptureOnOutsideClick: shouldUseCaptureOnOutsideClick
102
+ shouldUseCaptureOnOutsideClick: shouldUseCaptureOnOutsideClick,
103
+ shouldCloseOnTab: shouldCloseOnTab
97
104
  });
98
105
  var _UNSAFE_useLayering = (0, _layering.UNSAFE_useLayering)(),
99
106
  currentLevel = _UNSAFE_useLayering.currentLevel;
package/dist/cjs/popup.js CHANGED
@@ -42,7 +42,9 @@ var Popup = exports.Popup = /*#__PURE__*/(0, _react.memo)(function (_ref) {
42
42
  _ref$shouldUseCapture = _ref.shouldUseCaptureOnOutsideClick,
43
43
  shouldUseCaptureOnOutsideClick = _ref$shouldUseCapture === void 0 ? false : _ref$shouldUseCapture,
44
44
  _ref$shouldRenderToPa = _ref.shouldRenderToParent,
45
- shouldRenderToParent = _ref$shouldRenderToPa === void 0 ? false : _ref$shouldRenderToPa;
45
+ shouldRenderToParent = _ref$shouldRenderToPa === void 0 ? false : _ref$shouldRenderToPa,
46
+ _ref$shouldDisableFoc = _ref.shouldDisableFocusLock,
47
+ shouldDisableFocusLock = _ref$shouldDisableFoc === void 0 ? false : _ref$shouldDisableFoc;
46
48
  var _useState = (0, _react.useState)(null),
47
49
  _useState2 = (0, _slicedToArray2.default)(_useState, 2),
48
50
  triggerRef = _useState2[0],
@@ -92,6 +94,7 @@ var Popup = exports.Popup = /*#__PURE__*/(0, _react.memo)(function (_ref) {
92
94
  autoFocus: autoFocus,
93
95
  shouldUseCaptureOnOutsideClick: shouldUseCaptureOnOutsideClick,
94
96
  shouldRenderToParent: shouldRenderToParent,
97
+ shouldDisableFocusLock: shouldDisableFocusLock,
95
98
  triggerRef: triggerRef
96
99
  }));
97
100
  return (0, _react2.jsx)(_popper.Manager, null, (0, _react2.jsx)(_popper.Reference, null, function (_ref2) {
@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
6
6
  });
7
7
  exports.RepositionOnUpdate = void 0;
8
8
  var _react = _interopRequireWildcard(require("react"));
9
- function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
10
- function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
9
+ 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); }
10
+ 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; }
11
11
  // eslint-disable-next-line @repo/internal/react/require-jsdoc
12
12
  var RepositionOnUpdate = exports.RepositionOnUpdate = function RepositionOnUpdate(_ref) {
13
13
  var children = _ref.children,
@@ -14,7 +14,8 @@ var useCloseManager = exports.useCloseManager = function useCloseManager(_ref) {
14
14
  onClose = _ref.onClose,
15
15
  popupRef = _ref.popupRef,
16
16
  triggerRef = _ref.triggerRef,
17
- capture = _ref.shouldUseCaptureOnOutsideClick;
17
+ capture = _ref.shouldUseCaptureOnOutsideClick,
18
+ shouldCloseOnTab = _ref.shouldCloseOnTab;
18
19
  var _UNSAFE_useLayering = (0, _layering.UNSAFE_useLayering)(),
19
20
  isLayerDisabled = _UNSAFE_useLayering.isLayerDisabled;
20
21
  (0, _react.useEffect)(function () {
@@ -51,7 +52,7 @@ var useCloseManager = exports.useCloseManager = function useCloseManager(_ref) {
51
52
  return;
52
53
  }
53
54
  var key = event.key;
54
- if (key === 'Escape' || key === 'Esc') {
55
+ if (key === 'Escape' || key === 'Esc' || shouldCloseOnTab && key === 'Tab') {
55
56
  closePopup(event);
56
57
  }
57
58
  };
@@ -66,5 +67,5 @@ var useCloseManager = exports.useCloseManager = function useCloseManager(_ref) {
66
67
  listener: onKeyDown
67
68
  }]);
68
69
  return unbind;
69
- }, [isOpen, onClose, popupRef, triggerRef, capture, isLayerDisabled]);
70
+ }, [isOpen, onClose, popupRef, triggerRef, capture, isLayerDisabled, shouldCloseOnTab]);
70
71
  };
@@ -10,9 +10,10 @@ var _focusTrap = _interopRequireDefault(require("focus-trap"));
10
10
  var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
11
11
  var useFocusManager = exports.useFocusManager = function useFocusManager(_ref) {
12
12
  var initialFocusRef = _ref.initialFocusRef,
13
- popupRef = _ref.popupRef;
13
+ popupRef = _ref.popupRef,
14
+ shouldCloseOnTab = _ref.shouldCloseOnTab;
14
15
  (0, _react.useEffect)(function () {
15
- if (!popupRef) {
16
+ if (!popupRef || shouldCloseOnTab) {
16
17
  return _noop.default;
17
18
  }
18
19
  var trapConfig = {
@@ -37,5 +38,5 @@ var useFocusManager = exports.useFocusManager = function useFocusManager(_ref) {
37
38
  }
38
39
  focusTrap.deactivate();
39
40
  };
40
- }, [popupRef, initialFocusRef]);
41
+ }, [popupRef, initialFocusRef, shouldCloseOnTab]);
41
42
  };
@@ -64,20 +64,27 @@ function PopperWrapper({
64
64
  autoFocus = true,
65
65
  triggerRef,
66
66
  shouldUseCaptureOnOutsideClick,
67
- shouldRenderToParent
67
+ shouldRenderToParent,
68
+ shouldDisableFocusLock
68
69
  }) {
69
70
  const [popupRef, setPopupRef] = useState(null);
70
71
  const [initialFocusRef, setInitialFocusRef] = useState(null);
72
+
73
+ // We have cases when we need to prohibit focus locking
74
+ // e.g. in DropdownMenu
75
+ const shouldCloseOnTab = shouldRenderToParent && shouldDisableFocusLock;
71
76
  useFocusManager({
72
77
  initialFocusRef,
73
- popupRef
78
+ popupRef,
79
+ shouldCloseOnTab
74
80
  });
75
81
  useCloseManager({
76
82
  isOpen,
77
83
  onClose,
78
84
  popupRef,
79
85
  triggerRef,
80
- shouldUseCaptureOnOutsideClick
86
+ shouldUseCaptureOnOutsideClick,
87
+ shouldCloseOnTab
81
88
  });
82
89
  const {
83
90
  currentLevel
@@ -26,7 +26,8 @@ export const Popup = /*#__PURE__*/memo(({
26
26
  autoFocus = true,
27
27
  zIndex = defaultLayer,
28
28
  shouldUseCaptureOnOutsideClick = false,
29
- shouldRenderToParent = false
29
+ shouldRenderToParent = false,
30
+ shouldDisableFocusLock = false
30
31
  }) => {
31
32
  const [triggerRef, setTriggerRef] = useState(null);
32
33
 
@@ -70,6 +71,7 @@ export const Popup = /*#__PURE__*/memo(({
70
71
  autoFocus: autoFocus,
71
72
  shouldUseCaptureOnOutsideClick: shouldUseCaptureOnOutsideClick,
72
73
  shouldRenderToParent: shouldRenderToParent,
74
+ shouldDisableFocusLock: shouldDisableFocusLock,
73
75
  triggerRef: triggerRef
74
76
  }));
75
77
  return jsx(Manager, null, jsx(Reference, null, ({
@@ -7,7 +7,8 @@ export const useCloseManager = ({
7
7
  onClose,
8
8
  popupRef,
9
9
  triggerRef,
10
- shouldUseCaptureOnOutsideClick: capture
10
+ shouldUseCaptureOnOutsideClick: capture,
11
+ shouldCloseOnTab
11
12
  }) => {
12
13
  const {
13
14
  isLayerDisabled
@@ -50,7 +51,7 @@ export const useCloseManager = ({
50
51
  const {
51
52
  key
52
53
  } = event;
53
- if (key === 'Escape' || key === 'Esc') {
54
+ if (key === 'Escape' || key === 'Esc' || shouldCloseOnTab && key === 'Tab') {
54
55
  closePopup(event);
55
56
  }
56
57
  };
@@ -65,5 +66,5 @@ export const useCloseManager = ({
65
66
  listener: onKeyDown
66
67
  }]);
67
68
  return unbind;
68
- }, [isOpen, onClose, popupRef, triggerRef, capture, isLayerDisabled]);
69
+ }, [isOpen, onClose, popupRef, triggerRef, capture, isLayerDisabled, shouldCloseOnTab]);
69
70
  };
@@ -3,10 +3,11 @@ import createFocusTrap from 'focus-trap';
3
3
  import noop from '@atlaskit/ds-lib/noop';
4
4
  export const useFocusManager = ({
5
5
  initialFocusRef,
6
- popupRef
6
+ popupRef,
7
+ shouldCloseOnTab
7
8
  }) => {
8
9
  useEffect(() => {
9
- if (!popupRef) {
10
+ if (!popupRef || shouldCloseOnTab) {
10
11
  return noop;
11
12
  }
12
13
  const trapConfig = {
@@ -31,5 +32,5 @@ export const useFocusManager = ({
31
32
  }
32
33
  focusTrap.deactivate();
33
34
  };
34
- }, [popupRef, initialFocusRef]);
35
+ }, [popupRef, initialFocusRef, shouldCloseOnTab]);
35
36
  };
@@ -68,7 +68,8 @@ function PopperWrapper(_ref) {
68
68
  autoFocus = _ref$autoFocus === void 0 ? true : _ref$autoFocus,
69
69
  triggerRef = _ref.triggerRef,
70
70
  shouldUseCaptureOnOutsideClick = _ref.shouldUseCaptureOnOutsideClick,
71
- shouldRenderToParent = _ref.shouldRenderToParent;
71
+ shouldRenderToParent = _ref.shouldRenderToParent,
72
+ shouldDisableFocusLock = _ref.shouldDisableFocusLock;
72
73
  var _useState = useState(null),
73
74
  _useState2 = _slicedToArray(_useState, 2),
74
75
  popupRef = _useState2[0],
@@ -77,16 +78,22 @@ function PopperWrapper(_ref) {
77
78
  _useState4 = _slicedToArray(_useState3, 2),
78
79
  initialFocusRef = _useState4[0],
79
80
  setInitialFocusRef = _useState4[1];
81
+
82
+ // We have cases when we need to prohibit focus locking
83
+ // e.g. in DropdownMenu
84
+ var shouldCloseOnTab = shouldRenderToParent && shouldDisableFocusLock;
80
85
  useFocusManager({
81
86
  initialFocusRef: initialFocusRef,
82
- popupRef: popupRef
87
+ popupRef: popupRef,
88
+ shouldCloseOnTab: shouldCloseOnTab
83
89
  });
84
90
  useCloseManager({
85
91
  isOpen: isOpen,
86
92
  onClose: onClose,
87
93
  popupRef: popupRef,
88
94
  triggerRef: triggerRef,
89
- shouldUseCaptureOnOutsideClick: shouldUseCaptureOnOutsideClick
95
+ shouldUseCaptureOnOutsideClick: shouldUseCaptureOnOutsideClick,
96
+ shouldCloseOnTab: shouldCloseOnTab
90
97
  });
91
98
  var _UNSAFE_useLayering = UNSAFE_useLayering(),
92
99
  currentLevel = _UNSAFE_useLayering.currentLevel;
package/dist/esm/popup.js CHANGED
@@ -34,7 +34,9 @@ export var Popup = /*#__PURE__*/memo(function (_ref) {
34
34
  _ref$shouldUseCapture = _ref.shouldUseCaptureOnOutsideClick,
35
35
  shouldUseCaptureOnOutsideClick = _ref$shouldUseCapture === void 0 ? false : _ref$shouldUseCapture,
36
36
  _ref$shouldRenderToPa = _ref.shouldRenderToParent,
37
- shouldRenderToParent = _ref$shouldRenderToPa === void 0 ? false : _ref$shouldRenderToPa;
37
+ shouldRenderToParent = _ref$shouldRenderToPa === void 0 ? false : _ref$shouldRenderToPa,
38
+ _ref$shouldDisableFoc = _ref.shouldDisableFocusLock,
39
+ shouldDisableFocusLock = _ref$shouldDisableFoc === void 0 ? false : _ref$shouldDisableFoc;
38
40
  var _useState = useState(null),
39
41
  _useState2 = _slicedToArray(_useState, 2),
40
42
  triggerRef = _useState2[0],
@@ -84,6 +86,7 @@ export var Popup = /*#__PURE__*/memo(function (_ref) {
84
86
  autoFocus: autoFocus,
85
87
  shouldUseCaptureOnOutsideClick: shouldUseCaptureOnOutsideClick,
86
88
  shouldRenderToParent: shouldRenderToParent,
89
+ shouldDisableFocusLock: shouldDisableFocusLock,
87
90
  triggerRef: triggerRef
88
91
  }));
89
92
  return jsx(Manager, null, jsx(Reference, null, function (_ref2) {
@@ -7,7 +7,8 @@ export var useCloseManager = function useCloseManager(_ref) {
7
7
  onClose = _ref.onClose,
8
8
  popupRef = _ref.popupRef,
9
9
  triggerRef = _ref.triggerRef,
10
- capture = _ref.shouldUseCaptureOnOutsideClick;
10
+ capture = _ref.shouldUseCaptureOnOutsideClick,
11
+ shouldCloseOnTab = _ref.shouldCloseOnTab;
11
12
  var _UNSAFE_useLayering = UNSAFE_useLayering(),
12
13
  isLayerDisabled = _UNSAFE_useLayering.isLayerDisabled;
13
14
  useEffect(function () {
@@ -44,7 +45,7 @@ export var useCloseManager = function useCloseManager(_ref) {
44
45
  return;
45
46
  }
46
47
  var key = event.key;
47
- if (key === 'Escape' || key === 'Esc') {
48
+ if (key === 'Escape' || key === 'Esc' || shouldCloseOnTab && key === 'Tab') {
48
49
  closePopup(event);
49
50
  }
50
51
  };
@@ -59,5 +60,5 @@ export var useCloseManager = function useCloseManager(_ref) {
59
60
  listener: onKeyDown
60
61
  }]);
61
62
  return unbind;
62
- }, [isOpen, onClose, popupRef, triggerRef, capture, isLayerDisabled]);
63
+ }, [isOpen, onClose, popupRef, triggerRef, capture, isLayerDisabled, shouldCloseOnTab]);
63
64
  };
@@ -3,9 +3,10 @@ import createFocusTrap from 'focus-trap';
3
3
  import noop from '@atlaskit/ds-lib/noop';
4
4
  export var useFocusManager = function useFocusManager(_ref) {
5
5
  var initialFocusRef = _ref.initialFocusRef,
6
- popupRef = _ref.popupRef;
6
+ popupRef = _ref.popupRef,
7
+ shouldCloseOnTab = _ref.shouldCloseOnTab;
7
8
  useEffect(function () {
8
- if (!popupRef) {
9
+ if (!popupRef || shouldCloseOnTab) {
9
10
  return noop;
10
11
  }
11
12
  var trapConfig = {
@@ -30,5 +31,5 @@ export var useFocusManager = function useFocusManager(_ref) {
30
31
  }
31
32
  focusTrap.deactivate();
32
33
  };
33
- }, [popupRef, initialFocusRef]);
34
+ }, [popupRef, initialFocusRef, shouldCloseOnTab]);
34
35
  };
@@ -1,4 +1,4 @@
1
1
  import { jsx } from '@emotion/react';
2
2
  import { PopperWrapperProps } from './types';
3
- declare function PopperWrapper({ isOpen, id, offset, testId, content, fallbackPlacements, onClose, boundary, rootBoundary, shouldFlip, placement, popupComponent: PopupContainer, autoFocus, triggerRef, shouldUseCaptureOnOutsideClick, shouldRenderToParent, }: PopperWrapperProps): jsx.JSX.Element;
3
+ declare function PopperWrapper({ isOpen, id, offset, testId, content, fallbackPlacements, onClose, boundary, rootBoundary, shouldFlip, placement, popupComponent: PopupContainer, autoFocus, triggerRef, shouldUseCaptureOnOutsideClick, shouldRenderToParent, shouldDisableFocusLock, }: PopperWrapperProps): jsx.JSX.Element;
4
4
  export default PopperWrapper;
@@ -1,3 +1,3 @@
1
- import { FC } from 'react';
1
+ /// <reference types="react" />
2
2
  import { RepositionOnUpdateProps } from './types';
3
- export declare const RepositionOnUpdate: FC<RepositionOnUpdateProps>;
3
+ export declare const RepositionOnUpdate: ({ children, update, }: RepositionOnUpdateProps) => JSX.Element;
@@ -1,4 +1,4 @@
1
- import React, { ComponentType, CSSProperties, Dispatch, ReactNode, Ref, SetStateAction } from 'react';
1
+ import React, { ComponentType, CSSProperties, Dispatch, PropsWithChildren, ReactNode, Ref, SetStateAction } from 'react';
2
2
  import { Placement, PopperChildrenProps } from '@atlaskit/popper';
3
3
  export interface TriggerProps {
4
4
  ref: Ref<any>;
@@ -144,6 +144,11 @@ interface BaseProps {
144
144
  * Defaults to `false`.
145
145
  */
146
146
  shouldRenderToParent?: boolean;
147
+ /**
148
+ * Allows the Popup disable focus lock. Will only work when shouldRenderToParent is true.
149
+ * Defaults to `false`.
150
+ */
151
+ shouldDisableFocusLock?: boolean;
147
152
  }
148
153
  export interface PopupProps extends BaseProps {
149
154
  /**
@@ -166,12 +171,14 @@ export type CloseManagerHook = Pick<PopupProps, 'isOpen' | 'onClose'> & {
166
171
  popupRef: PopupRef;
167
172
  triggerRef: TriggerRef;
168
173
  shouldUseCaptureOnOutsideClick?: boolean;
174
+ shouldCloseOnTab?: boolean;
169
175
  };
170
176
  export type FocusManagerHook = {
171
177
  initialFocusRef: HTMLElement | null;
172
178
  popupRef: PopupRef;
179
+ shouldCloseOnTab?: boolean;
173
180
  };
174
- export type RepositionOnUpdateProps = {
181
+ export type RepositionOnUpdateProps = PropsWithChildren<{
175
182
  update: PopperChildrenProps['update'];
176
- };
183
+ }>;
177
184
  export {};
@@ -1,2 +1,2 @@
1
1
  import { CloseManagerHook } from './types';
2
- export declare const useCloseManager: ({ isOpen, onClose, popupRef, triggerRef, shouldUseCaptureOnOutsideClick: capture, }: CloseManagerHook) => void;
2
+ export declare const useCloseManager: ({ isOpen, onClose, popupRef, triggerRef, shouldUseCaptureOnOutsideClick: capture, shouldCloseOnTab, }: CloseManagerHook) => void;
@@ -1,2 +1,2 @@
1
1
  import { FocusManagerHook } from './types';
2
- export declare const useFocusManager: ({ initialFocusRef, popupRef, }: FocusManagerHook) => void;
2
+ export declare const useFocusManager: ({ initialFocusRef, popupRef, shouldCloseOnTab, }: FocusManagerHook) => void;
@@ -1,4 +1,4 @@
1
1
  import { jsx } from '@emotion/react';
2
2
  import { PopperWrapperProps } from './types';
3
- declare function PopperWrapper({ isOpen, id, offset, testId, content, fallbackPlacements, onClose, boundary, rootBoundary, shouldFlip, placement, popupComponent: PopupContainer, autoFocus, triggerRef, shouldUseCaptureOnOutsideClick, shouldRenderToParent, }: PopperWrapperProps): jsx.JSX.Element;
3
+ declare function PopperWrapper({ isOpen, id, offset, testId, content, fallbackPlacements, onClose, boundary, rootBoundary, shouldFlip, placement, popupComponent: PopupContainer, autoFocus, triggerRef, shouldUseCaptureOnOutsideClick, shouldRenderToParent, shouldDisableFocusLock, }: PopperWrapperProps): jsx.JSX.Element;
4
4
  export default PopperWrapper;
@@ -1,3 +1,3 @@
1
- import { FC } from 'react';
1
+ /// <reference types="react" />
2
2
  import { RepositionOnUpdateProps } from './types';
3
- export declare const RepositionOnUpdate: FC<RepositionOnUpdateProps>;
3
+ export declare const RepositionOnUpdate: ({ children, update, }: RepositionOnUpdateProps) => JSX.Element;
@@ -1,4 +1,4 @@
1
- import React, { ComponentType, CSSProperties, Dispatch, ReactNode, Ref, SetStateAction } from 'react';
1
+ import React, { ComponentType, CSSProperties, Dispatch, PropsWithChildren, ReactNode, Ref, SetStateAction } from 'react';
2
2
  import { Placement, PopperChildrenProps } from '@atlaskit/popper';
3
3
  export interface TriggerProps {
4
4
  ref: Ref<any>;
@@ -147,6 +147,11 @@ interface BaseProps {
147
147
  * Defaults to `false`.
148
148
  */
149
149
  shouldRenderToParent?: boolean;
150
+ /**
151
+ * Allows the Popup disable focus lock. Will only work when shouldRenderToParent is true.
152
+ * Defaults to `false`.
153
+ */
154
+ shouldDisableFocusLock?: boolean;
150
155
  }
151
156
  export interface PopupProps extends BaseProps {
152
157
  /**
@@ -169,12 +174,14 @@ export type CloseManagerHook = Pick<PopupProps, 'isOpen' | 'onClose'> & {
169
174
  popupRef: PopupRef;
170
175
  triggerRef: TriggerRef;
171
176
  shouldUseCaptureOnOutsideClick?: boolean;
177
+ shouldCloseOnTab?: boolean;
172
178
  };
173
179
  export type FocusManagerHook = {
174
180
  initialFocusRef: HTMLElement | null;
175
181
  popupRef: PopupRef;
182
+ shouldCloseOnTab?: boolean;
176
183
  };
177
- export type RepositionOnUpdateProps = {
184
+ export type RepositionOnUpdateProps = PropsWithChildren<{
178
185
  update: PopperChildrenProps['update'];
179
- };
186
+ }>;
180
187
  export {};
@@ -1,2 +1,2 @@
1
1
  import { CloseManagerHook } from './types';
2
- export declare const useCloseManager: ({ isOpen, onClose, popupRef, triggerRef, shouldUseCaptureOnOutsideClick: capture, }: CloseManagerHook) => void;
2
+ export declare const useCloseManager: ({ isOpen, onClose, popupRef, triggerRef, shouldUseCaptureOnOutsideClick: capture, shouldCloseOnTab, }: CloseManagerHook) => void;
@@ -1,2 +1,2 @@
1
1
  import { FocusManagerHook } from './types';
2
- export declare const useFocusManager: ({ initialFocusRef, popupRef, }: FocusManagerHook) => void;
2
+ export declare const useFocusManager: ({ initialFocusRef, popupRef, shouldCloseOnTab, }: FocusManagerHook) => void;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/popup",
3
- "version": "1.12.0",
3
+ "version": "1.13.1",
4
4
  "description": "A popup displays brief content in an overlay.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -44,7 +44,7 @@
44
44
  "@atlaskit/popper": "^5.5.0",
45
45
  "@atlaskit/portal": "^4.4.0",
46
46
  "@atlaskit/theme": "^12.6.0",
47
- "@atlaskit/tokens": "^1.35.0",
47
+ "@atlaskit/tokens": "^1.41.0",
48
48
  "@babel/runtime": "^7.0.0",
49
49
  "@emotion/react": "^11.7.1",
50
50
  "bind-event-listener": "^2.1.1",
@@ -58,8 +58,8 @@
58
58
  "devDependencies": {
59
59
  "@af/accessibility-testing": "*",
60
60
  "@af/visual-regression": "*",
61
- "@atlaskit/button": "^17.3.0",
62
- "@atlaskit/icon": "^22.0.0",
61
+ "@atlaskit/button": "^17.7.0",
62
+ "@atlaskit/icon": "^22.1.0",
63
63
  "@atlaskit/ssr": "*",
64
64
  "@atlaskit/visual-regression": "*",
65
65
  "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",