@atlaskit/popup 1.13.2 → 1.14.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/popup
 
+## 1.14.1
+
+### Patch Changes
+
+- [#94316](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/94316) [`35fd5ed8e1d7`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/35fd5ed8e1d7) - Upgrading internal dependency `bind-event-listener` to `@^3.0.0`
+
+## 1.14.0
+
+### Minor Changes
+
+- [#84410](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/84410) [`9d5dc8f7de85`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/9d5dc8f7de85) - Adds a new `strategy` prop to control the positioning strategy to use other than the default 'fixed' position.
+
 ## 1.13.2
 
 ### Patch Changes

package/dist/cjs/popper-wrapper.js

@@ -76,7 +76,8 @@ function PopperWrapper(_ref) {
     triggerRef = _ref.triggerRef,
     shouldUseCaptureOnOutsideClick = _ref.shouldUseCaptureOnOutsideClick,
     shouldRenderToParent = _ref.shouldRenderToParent,
-    shouldDisableFocusLock = _ref.shouldDisableFocusLock;
+    shouldDisableFocusLock = _ref.shouldDisableFocusLock,
+    strategy = _ref.strategy;
   var _useState = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     popupRef = _useState2[0],
@@ -118,7 +119,8 @@ function PopperWrapper(_ref) {
   return (0, _react2.jsx)(_popper.Popper, {
     placement: placement,
     offset: offset,
-    modifiers: modifiers
+    modifiers: modifiers,
+    strategy: strategy
   }, function (_ref2) {
     var _ref3 = _ref2.ref,
       style = _ref2.style,

package/dist/cjs/popup.js

@@ -44,7 +44,8 @@ var Popup = exports.Popup = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     _ref$shouldRenderToPa = _ref.shouldRenderToParent,
     shouldRenderToParent = _ref$shouldRenderToPa === void 0 ? false : _ref$shouldRenderToPa,
     _ref$shouldDisableFoc = _ref.shouldDisableFocusLock,
-    shouldDisableFocusLock = _ref$shouldDisableFoc === void 0 ? false : _ref$shouldDisableFoc;
+    shouldDisableFocusLock = _ref$shouldDisableFoc === void 0 ? false : _ref$shouldDisableFoc,
+    strategy = _ref.strategy;
   var _useState = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     triggerRef = _useState2[0],
@@ -95,7 +96,8 @@ var Popup = exports.Popup = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     shouldUseCaptureOnOutsideClick: shouldUseCaptureOnOutsideClick,
     shouldRenderToParent: shouldRenderToParent,
     shouldDisableFocusLock: shouldDisableFocusLock,
-    triggerRef: triggerRef
+    triggerRef: triggerRef,
+    strategy: strategy
   }));
   return (0, _react2.jsx)(_popper.Manager, null, (0, _react2.jsx)(_popper.Reference, null, function (_ref2) {
     var ref = _ref2.ref;

package/dist/es2019/popper-wrapper.js

@@ -65,7 +65,8 @@ function PopperWrapper({
   triggerRef,
   shouldUseCaptureOnOutsideClick,
   shouldRenderToParent,
-  shouldDisableFocusLock
+  shouldDisableFocusLock,
+  strategy
 }) {
   const [popupRef, setPopupRef] = useState(null);
   const [initialFocusRef, setInitialFocusRef] = useState(null);
@@ -101,7 +102,8 @@ function PopperWrapper({
   return jsx(Popper, {
     placement: placement,
     offset: offset,
-    modifiers: modifiers
+    modifiers: modifiers,
+    strategy: strategy
   }, ({
     ref,
     style,

package/dist/es2019/popup.js

@@ -27,7 +27,8 @@ export const Popup = /*#__PURE__*/memo(({
   zIndex = defaultLayer,
   shouldUseCaptureOnOutsideClick = false,
   shouldRenderToParent = false,
-  shouldDisableFocusLock = false
+  shouldDisableFocusLock = false,
+  strategy
 }) => {
   const [triggerRef, setTriggerRef] = useState(null);
 
@@ -72,7 +73,8 @@ export const Popup = /*#__PURE__*/memo(({
     shouldUseCaptureOnOutsideClick: shouldUseCaptureOnOutsideClick,
     shouldRenderToParent: shouldRenderToParent,
     shouldDisableFocusLock: shouldDisableFocusLock,
-    triggerRef: triggerRef
+    triggerRef: triggerRef,
+    strategy: strategy
   }));
   return jsx(Manager, null, jsx(Reference, null, ({
     ref

package/dist/esm/popper-wrapper.js

@@ -69,7 +69,8 @@ function PopperWrapper(_ref) {
     triggerRef = _ref.triggerRef,
     shouldUseCaptureOnOutsideClick = _ref.shouldUseCaptureOnOutsideClick,
     shouldRenderToParent = _ref.shouldRenderToParent,
-    shouldDisableFocusLock = _ref.shouldDisableFocusLock;
+    shouldDisableFocusLock = _ref.shouldDisableFocusLock,
+    strategy = _ref.strategy;
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     popupRef = _useState2[0],
@@ -111,7 +112,8 @@ function PopperWrapper(_ref) {
   return jsx(Popper, {
     placement: placement,
     offset: offset,
-    modifiers: modifiers
+    modifiers: modifiers,
+    strategy: strategy
   }, function (_ref2) {
     var _ref3 = _ref2.ref,
       style = _ref2.style,

package/dist/esm/popup.js

@@ -36,7 +36,8 @@ export var Popup = /*#__PURE__*/memo(function (_ref) {
     _ref$shouldRenderToPa = _ref.shouldRenderToParent,
     shouldRenderToParent = _ref$shouldRenderToPa === void 0 ? false : _ref$shouldRenderToPa,
     _ref$shouldDisableFoc = _ref.shouldDisableFocusLock,
-    shouldDisableFocusLock = _ref$shouldDisableFoc === void 0 ? false : _ref$shouldDisableFoc;
+    shouldDisableFocusLock = _ref$shouldDisableFoc === void 0 ? false : _ref$shouldDisableFoc,
+    strategy = _ref.strategy;
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     triggerRef = _useState2[0],
@@ -87,7 +88,8 @@ export var Popup = /*#__PURE__*/memo(function (_ref) {
     shouldUseCaptureOnOutsideClick: shouldUseCaptureOnOutsideClick,
     shouldRenderToParent: shouldRenderToParent,
     shouldDisableFocusLock: shouldDisableFocusLock,
-    triggerRef: triggerRef
+    triggerRef: triggerRef,
+    strategy: strategy
   }));
   return jsx(Manager, null, jsx(Reference, null, function (_ref2) {
     var ref = _ref2.ref;

package/dist/types/popper-wrapper.d.ts

@@ -1,4 +1,4 @@
 import { jsx } from '@emotion/react';
 import { PopperWrapperProps } from './types';
-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;
+declare function PopperWrapper({ isOpen, id, offset, testId, content, fallbackPlacements, onClose, boundary, rootBoundary, shouldFlip, placement, popupComponent: PopupContainer, autoFocus, triggerRef, shouldUseCaptureOnOutsideClick, shouldRenderToParent, shouldDisableFocusLock, strategy, }: PopperWrapperProps): jsx.JSX.Element;
 export default PopperWrapper;

package/dist/types/types.d.ts

@@ -10,8 +10,8 @@ export type PopupRef = HTMLDivElement | null;
 export type TriggerRef = HTMLElement | HTMLButtonElement | null;
 export interface ContentProps {
     /**
-     * Will reposition the popup if any of the content has changed.
-     * Useful for when positions change and the popup was not aware.
+     * This will reposition the popup if any of the content has changed.
+     * This is useful when positions change, and the popup wasn't aware.
      */
     update: PopperChildrenProps['update'];
     /**
@@ -23,13 +23,13 @@ export interface ContentProps {
      */
     onClose?: BaseProps['onClose'];
     /**
-     * Escape hatch to set the initial focus for a specific element when the popup is opened.
+     * Escape hatch to set the initial focus for a specific element, when the popup is opened.
      */
     setInitialFocusRef: Dispatch<SetStateAction<HTMLElement | null>>;
 }
 export interface PopupComponentProps {
     /**
-     * Children passed passed through by the parent popup.
+     * Children passed through by the parent popup.
      */
     children: ReactNode;
     /**
@@ -37,11 +37,11 @@ export interface PopupComponentProps {
      */
     'data-placement': Placement;
     /**
-     * Test id passed through by the parent popup.
+     * Test ID passed through by the parent popup.
      */
     'data-testid'?: string;
     /**
-     * Id passed through by the parent popup.
+     * ID passed through by the parent popup.
      */
     id?: string;
     /**
@@ -58,14 +58,14 @@ export interface PopupComponentProps {
     tabIndex: number | undefined;
     /**
      * The root element where the popup should be rendered.
-     * Defaults to `false`.
+     * The default is `false`.
      */
     shouldRenderToParent?: boolean;
 }
 interface BaseProps {
     /**
-     * Used to either show or hide the popup.
-     * When set to `false` popup will not render anything to the DOM.
+     * Use this to either show or hide the popup.
+     * When set to `false` the popup will not render anything to the DOM.
      */
     isOpen: boolean;
     /**
@@ -73,41 +73,41 @@ interface BaseProps {
      */
     content: (props: ContentProps) => React.ReactNode;
     /**
-     * Id that is assigned to the popup container element.
+     * ID that is assigned to the popup container element.
      */
     id?: string;
     /**
-     * Distance the popup should be offset from the reference in the format of [along, away] (units in px).
-     * Defaults to [0, 8] - which means the popup will be 8px away from the edge of the reference specified
+     * The distance the popup should be offset from the reference in the format of [along, away] (units in px).
+     * The default is `[0, 8]`, which means the popup will be `8px` away from the edge of the reference specified
      * by the `placement` prop.
      */
     offset?: [number, number];
     /**
      * Placement of where the popup should be displayed relative to the trigger element.
-     * Defaults to `"auto"`.
+     * The default is `"auto"`.
      */
     placement?: Placement;
     /**
-     * Defines a list of placements to try.
-     * When no space is available on the preferred placement,
+     * This is a list of backup placements for the popup to try.
+     * When the preferred placement doesn't have enough space,
      * the modifier will test the ones provided in the list, and use the first suitable one.
      * If no fallback placements are suitable, it reverts back to the original placement.
      */
     fallbackPlacements?: Placement[];
     /**
      * The boundary element that the popup will check for overflow.
-     * Defaults to `"clippingParents"` which are parent scroll containers,
+     * The default is `"clippingParents"` which are parent scroll containers,
      * but can be set to any element.
      */
     boundary?: 'clippingParents' | HTMLElement;
     /**
      * The root boundary that the popup will check for overflow.
-     * Defaults to `"viewport"` but can be set to `"document"`.
+     * The default is `"viewport"` but it can be set to `"document"`.
      */
     rootBoundary?: 'viewport' | 'document';
     /**
-     * Allows the Popup to be placed on the opposite side of its trigger if it does not fit in the viewport.
-     * Defaults to `true`.
+     * Allows the popup to be placed on the opposite side of its trigger if it doesn't fit in the viewport.
+     * The default is `true`.
      */
     shouldFlip?: boolean;
     /**
@@ -118,24 +118,24 @@ interface BaseProps {
     testId?: string;
     /**
      * Handler that is called when the popup wants to close itself.
-     * Generally this will be either when clicking away from the popup or pressing the escape key.
-     * You'll want to use this to set open state accordingly and then pump it back into the `isOpen` prop.
+     * This happens either when clicking away from the popup or pressing the escape key.
+     * You'll want to use this to set open state accordingly, and then pump it back into the `isOpen` prop.
      */
     onClose?(event: Event | React.MouseEvent | React.KeyboardEvent): void;
     /**
      * The element that is shown when `isOpen` prop is `true`.
      * The result of the `content` prop will be placed as children here.
-     * Defaults to an element with an elevation of `e200` with _no padding_.
+     * The default is an element with an elevation of `e200` with _no padding_.
      */
     popupComponent?: ComponentType<PopupComponentProps>;
     /**
-     * Controls whether the popup takes focus when opening.
+     * This controls whether the popup takes focus when opening.
      * This changes the `popupComponent` component tabIndex to `null`.
-     * Defaults to `true`.
+     * The default is `true`.
      */
     autoFocus?: boolean;
     /**
-     * Controls if the event which handles clicks outside the popup is be bound with
+     * This controls if the event which handles clicks outside the popup is be bound with
      *  `capture: true`.
      */
     shouldUseCaptureOnOutsideClick?: boolean;
@@ -145,10 +145,15 @@ interface BaseProps {
      */
     shouldRenderToParent?: boolean;
     /**
-     * Allows the Popup disable focus lock. Will only work when shouldRenderToParent is true.
-     * Defaults to `false`.
+     * This allows the Popup disable focus lock. It will only work when `shouldRenderToParent` is `true`.
+     * The default is `false`.
      */
     shouldDisableFocusLock?: boolean;
+    /**
+     * This controls the positioning strategy to use. Can vary between `absolute` and `fixed`.
+     * The default is `fixed`.
+     */
+    strategy?: 'absolute' | 'fixed';
 }
 export interface PopupProps extends BaseProps {
     /**
@@ -160,7 +165,7 @@ export interface PopupProps extends BaseProps {
     /**
      * Z-index that the popup should be displayed in.
      * This is passed to the portal component.
-     * Defaults to `layers.layer()` from `@atlaskit/theme`.
+     * The default is `layers.layer()` from `@atlaskit/theme`.
      */
     zIndex?: number;
 }

package/dist/types-ts4.5/popper-wrapper.d.ts

@@ -1,4 +1,4 @@
 import { jsx } from '@emotion/react';
 import { PopperWrapperProps } from './types';
-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;
+declare function PopperWrapper({ isOpen, id, offset, testId, content, fallbackPlacements, onClose, boundary, rootBoundary, shouldFlip, placement, popupComponent: PopupContainer, autoFocus, triggerRef, shouldUseCaptureOnOutsideClick, shouldRenderToParent, shouldDisableFocusLock, strategy, }: PopperWrapperProps): jsx.JSX.Element;
 export default PopperWrapper;

package/dist/types-ts4.5/types.d.ts

@@ -10,8 +10,8 @@ export type PopupRef = HTMLDivElement | null;
 export type TriggerRef = HTMLElement | HTMLButtonElement | null;
 export interface ContentProps {
     /**
-     * Will reposition the popup if any of the content has changed.
-     * Useful for when positions change and the popup was not aware.
+     * This will reposition the popup if any of the content has changed.
+     * This is useful when positions change, and the popup wasn't aware.
      */
     update: PopperChildrenProps['update'];
     /**
@@ -23,13 +23,13 @@ export interface ContentProps {
      */
     onClose?: BaseProps['onClose'];
     /**
-     * Escape hatch to set the initial focus for a specific element when the popup is opened.
+     * Escape hatch to set the initial focus for a specific element, when the popup is opened.
      */
     setInitialFocusRef: Dispatch<SetStateAction<HTMLElement | null>>;
 }
 export interface PopupComponentProps {
     /**
-     * Children passed passed through by the parent popup.
+     * Children passed through by the parent popup.
      */
     children: ReactNode;
     /**
@@ -37,11 +37,11 @@ export interface PopupComponentProps {
      */
     'data-placement': Placement;
     /**
-     * Test id passed through by the parent popup.
+     * Test ID passed through by the parent popup.
      */
     'data-testid'?: string;
     /**
-     * Id passed through by the parent popup.
+     * ID passed through by the parent popup.
      */
     id?: string;
     /**
@@ -58,14 +58,14 @@ export interface PopupComponentProps {
     tabIndex: number | undefined;
     /**
      * The root element where the popup should be rendered.
-     * Defaults to `false`.
+     * The default is `false`.
      */
     shouldRenderToParent?: boolean;
 }
 interface BaseProps {
     /**
-     * Used to either show or hide the popup.
-     * When set to `false` popup will not render anything to the DOM.
+     * Use this to either show or hide the popup.
+     * When set to `false` the popup will not render anything to the DOM.
      */
     isOpen: boolean;
     /**
@@ -73,12 +73,12 @@ interface BaseProps {
      */
     content: (props: ContentProps) => React.ReactNode;
     /**
-     * Id that is assigned to the popup container element.
+     * ID that is assigned to the popup container element.
      */
     id?: string;
     /**
-     * Distance the popup should be offset from the reference in the format of [along, away] (units in px).
-     * Defaults to [0, 8] - which means the popup will be 8px away from the edge of the reference specified
+     * The distance the popup should be offset from the reference in the format of [along, away] (units in px).
+     * The default is `[0, 8]`, which means the popup will be `8px` away from the edge of the reference specified
      * by the `placement` prop.
      */
     offset?: [
@@ -87,30 +87,30 @@ interface BaseProps {
     ];
     /**
      * Placement of where the popup should be displayed relative to the trigger element.
-     * Defaults to `"auto"`.
+     * The default is `"auto"`.
      */
     placement?: Placement;
     /**
-     * Defines a list of placements to try.
-     * When no space is available on the preferred placement,
+     * This is a list of backup placements for the popup to try.
+     * When the preferred placement doesn't have enough space,
      * the modifier will test the ones provided in the list, and use the first suitable one.
      * If no fallback placements are suitable, it reverts back to the original placement.
      */
     fallbackPlacements?: Placement[];
     /**
      * The boundary element that the popup will check for overflow.
-     * Defaults to `"clippingParents"` which are parent scroll containers,
+     * The default is `"clippingParents"` which are parent scroll containers,
      * but can be set to any element.
      */
     boundary?: 'clippingParents' | HTMLElement;
     /**
      * The root boundary that the popup will check for overflow.
-     * Defaults to `"viewport"` but can be set to `"document"`.
+     * The default is `"viewport"` but it can be set to `"document"`.
      */
     rootBoundary?: 'viewport' | 'document';
     /**
-     * Allows the Popup to be placed on the opposite side of its trigger if it does not fit in the viewport.
-     * Defaults to `true`.
+     * Allows the popup to be placed on the opposite side of its trigger if it doesn't fit in the viewport.
+     * The default is `true`.
      */
     shouldFlip?: boolean;
     /**
@@ -121,24 +121,24 @@ interface BaseProps {
     testId?: string;
     /**
      * Handler that is called when the popup wants to close itself.
-     * Generally this will be either when clicking away from the popup or pressing the escape key.
-     * You'll want to use this to set open state accordingly and then pump it back into the `isOpen` prop.
+     * This happens either when clicking away from the popup or pressing the escape key.
+     * You'll want to use this to set open state accordingly, and then pump it back into the `isOpen` prop.
      */
     onClose?(event: Event | React.MouseEvent | React.KeyboardEvent): void;
     /**
      * The element that is shown when `isOpen` prop is `true`.
      * The result of the `content` prop will be placed as children here.
-     * Defaults to an element with an elevation of `e200` with _no padding_.
+     * The default is an element with an elevation of `e200` with _no padding_.
      */
     popupComponent?: ComponentType<PopupComponentProps>;
     /**
-     * Controls whether the popup takes focus when opening.
+     * This controls whether the popup takes focus when opening.
      * This changes the `popupComponent` component tabIndex to `null`.
-     * Defaults to `true`.
+     * The default is `true`.
      */
     autoFocus?: boolean;
     /**
-     * Controls if the event which handles clicks outside the popup is be bound with
+     * This controls if the event which handles clicks outside the popup is be bound with
      *  `capture: true`.
      */
     shouldUseCaptureOnOutsideClick?: boolean;
@@ -148,10 +148,15 @@ interface BaseProps {
      */
     shouldRenderToParent?: boolean;
     /**
-     * Allows the Popup disable focus lock. Will only work when shouldRenderToParent is true.
-     * Defaults to `false`.
+     * This allows the Popup disable focus lock. It will only work when `shouldRenderToParent` is `true`.
+     * The default is `false`.
      */
     shouldDisableFocusLock?: boolean;
+    /**
+     * This controls the positioning strategy to use. Can vary between `absolute` and `fixed`.
+     * The default is `fixed`.
+     */
+    strategy?: 'absolute' | 'fixed';
 }
 export interface PopupProps extends BaseProps {
     /**
@@ -163,7 +168,7 @@ export interface PopupProps extends BaseProps {
     /**
      * Z-index that the popup should be displayed in.
      * This is passed to the portal component.
-     * Defaults to `layers.layer()` from `@atlaskit/theme`.
+     * The default is `layers.layer()` from `@atlaskit/theme`.
      */
     zIndex?: number;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/popup",
-  "version": "1.13.2",
+  "version": "1.14.1",
   "description": "A popup displays brief content in an overlay.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -38,16 +38,16 @@
     }
   },
   "dependencies": {
-    "@atlaskit/ds-lib": "^2.2.0",
+    "@atlaskit/ds-lib": "^2.3.0",
     "@atlaskit/layering": "^0.2.0",
     "@atlaskit/platform-feature-flags": "^0.2.0",
     "@atlaskit/popper": "^5.5.0",
     "@atlaskit/portal": "^4.4.0",
-    "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.42.0",
+    "@atlaskit/theme": "^12.7.0",
+    "@atlaskit/tokens": "^1.43.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
-    "bind-event-listener": "^2.1.1",
+    "bind-event-listener": "^3.0.0",
     "focus-trap": "^2.4.5",
     "memoize-one": "^6.0.0"
   },
@@ -58,7 +58,7 @@
   "devDependencies": {
     "@af/accessibility-testing": "*",
     "@af/visual-regression": "*",
-    "@atlaskit/button": "^17.7.0",
+    "@atlaskit/button": "^17.14.0",
     "@atlaskit/icon": "^22.1.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",