@atlaskit/popup 1.20.2 → 1.21.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/popup
 
+## 1.21.0
+
+### Minor Changes
+
+- [`8b8090800a35d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8b8090800a35d) -
+  Bump peer dependency for react-dom to include version 17 and 18.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 1.20.3
+
+### Patch Changes
+
+- [#123803](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/123803)
+  [`741dadf4fa8f9`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/741dadf4fa8f9) -
+  Added modifiers prop to the popup
+
 ## 1.20.2
 
 ### Patch Changes

package/dist/cjs/popper-wrapper.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
@@ -89,7 +90,8 @@ function PopperWrapper(_ref) {
     strategy = _ref.strategy,
     role = _ref.role,
     label = _ref.label,
-    titleId = _ref.titleId;
+    titleId = _ref.titleId,
+    modifiers = _ref.modifiers;
   var _useState = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     popupRef = _useState2[0],
@@ -117,7 +119,7 @@ function PopperWrapper(_ref) {
   });
   var _UNSAFE_useLayering = (0, _layering.UNSAFE_useLayering)(),
     currentLevel = _UNSAFE_useLayering.currentLevel;
-  var modifiers = (0, _react.useMemo)(function () {
+  var mergedModifiers = (0, _react.useMemo)(function () {
     return [{
       name: 'flip',
       enabled: shouldFlip,
@@ -126,12 +128,12 @@ function PopperWrapper(_ref) {
         boundary: boundary,
         fallbackPlacements: fallbackPlacements
       }
-    }];
-  }, [shouldFlip, rootBoundary, boundary, fallbackPlacements]);
+    }].concat((0, _toConsumableArray2.default)(modifiers || []));
+  }, [shouldFlip, rootBoundary, boundary, fallbackPlacements, modifiers]);
   return (0, _react2.jsx)(_popper.Popper, {
     placement: placement,
     offset: offset,
-    modifiers: modifiers,
+    modifiers: mergedModifiers,
     strategy: strategy
   }, function (_ref2) {
     var _ref3 = _ref2.ref,
@@ -165,7 +167,7 @@ function PopperWrapper(_ref) {
       tabIndex: autoFocus ? 0 : undefined,
       shouldRenderToParent: shouldRenderToParent,
       shouldFitContainer: shouldFitContainer
-    }, (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.iframe_gojiv') && (0, _react2.jsx)(_react2.Global, {
+    }, (0, _platformFeatureFlags.fg)('platform.design-system-team.iframe_gojiv') && (0, _react2.jsx)(_react2.Global, {
       styles: blockPointerEventsOnExternalIframeStyles
     }), (0, _react2.jsx)(_repositionOnUpdate.RepositionOnUpdate, {
       update: update

package/dist/cjs/popup.js

@@ -60,7 +60,8 @@ var Popup = exports.Popup = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     strategy = _ref.strategy,
     role = _ref.role,
     label = _ref.label,
-    titleId = _ref.titleId;
+    titleId = _ref.titleId,
+    modifiers = _ref.modifiers;
   var _useState = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     triggerRef = _useState2[0],
@@ -92,7 +93,8 @@ var Popup = exports.Popup = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     strategy: shouldFitContainer ? 'absolute' : strategy,
     role: role,
     label: label,
-    titleId: titleId
+    titleId: titleId,
+    modifiers: modifiers
   }));
   var popupContent = (0, _react2.jsx)(_popper.Manager, null, (0, _react2.jsx)(_popper.Reference, null, function (_ref2) {
     var ref = _ref2.ref;

package/dist/es2019/popper-wrapper.js

@@ -8,7 +8,7 @@ import { forwardRef, useMemo, useState } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles, @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, Global, jsx } from '@emotion/react';
 import { UNSAFE_useLayering } from '@atlaskit/layering';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Popper } from '@atlaskit/popper';
 import { N0, N50A, N60A } from '@atlaskit/theme/colors';
 import { layers } from '@atlaskit/theme/constants';
@@ -69,6 +69,7 @@ function PopperWrapper({
   rootBoundary,
   shouldFlip,
   placement = 'auto',
+  // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
   popupComponent: PopupContainer = DefaultPopupComponent,
   autoFocus = true,
   triggerRef,
@@ -79,7 +80,8 @@ function PopperWrapper({
   strategy,
   role,
   label,
-  titleId
+  titleId,
+  modifiers
 }) {
   const [popupRef, setPopupRef] = useState(null);
   const [initialFocusRef, setInitialFocusRef] = useState(null);
@@ -103,7 +105,7 @@ function PopperWrapper({
   const {
     currentLevel
   } = UNSAFE_useLayering();
-  const modifiers = useMemo(() => [{
+  const mergedModifiers = useMemo(() => [{
     name: 'flip',
     enabled: shouldFlip,
     options: {
@@ -111,11 +113,11 @@ function PopperWrapper({
       boundary,
       fallbackPlacements
     }
-  }], [shouldFlip, rootBoundary, boundary, fallbackPlacements]);
+  }, ...(modifiers || [])], [shouldFlip, rootBoundary, boundary, fallbackPlacements, modifiers]);
   return jsx(Popper, {
     placement: placement,
     offset: offset,
-    modifiers: modifiers,
+    modifiers: mergedModifiers,
     strategy: strategy
   }, ({
     ref,
@@ -150,7 +152,7 @@ function PopperWrapper({
       tabIndex: autoFocus ? 0 : undefined,
       shouldRenderToParent: shouldRenderToParent,
       shouldFitContainer: shouldFitContainer
-    }, getBooleanFF('platform.design-system-team.iframe_gojiv') && jsx(Global, {
+    }, fg('platform.design-system-team.iframe_gojiv') && jsx(Global, {
       styles: blockPointerEventsOnExternalIframeStyles
     }), jsx(RepositionOnUpdate, {
       update: update

package/dist/es2019/popup.js

@@ -42,7 +42,8 @@ export const Popup = /*#__PURE__*/memo(({
   strategy,
   role,
   label,
-  titleId
+  titleId,
+  modifiers
 }) => {
   const [triggerRef, setTriggerRef] = useState(null);
   const getMergedTriggerRef = useGetMemoizedMergedTriggerRef();
@@ -72,7 +73,8 @@ export const Popup = /*#__PURE__*/memo(({
     strategy: shouldFitContainer ? 'absolute' : strategy,
     role: role,
     label: label,
-    titleId: titleId
+    titleId: titleId,
+    modifiers: modifiers
   }));
   const popupContent = jsx(Manager, null, jsx(Reference, null, ({
     ref

package/dist/esm/popper-wrapper.js

@@ -1,3 +1,4 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
@@ -13,7 +14,7 @@ import { forwardRef, useMemo, useState } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles, @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, Global, jsx } from '@emotion/react';
 import { UNSAFE_useLayering } from '@atlaskit/layering';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Popper } from '@atlaskit/popper';
 import { N0, N50A, N60A } from '@atlaskit/theme/colors';
 import { layers } from '@atlaskit/theme/constants';
@@ -83,7 +84,8 @@ function PopperWrapper(_ref) {
     strategy = _ref.strategy,
     role = _ref.role,
     label = _ref.label,
-    titleId = _ref.titleId;
+    titleId = _ref.titleId,
+    modifiers = _ref.modifiers;
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     popupRef = _useState2[0],
@@ -111,7 +113,7 @@ function PopperWrapper(_ref) {
   });
   var _UNSAFE_useLayering = UNSAFE_useLayering(),
     currentLevel = _UNSAFE_useLayering.currentLevel;
-  var modifiers = useMemo(function () {
+  var mergedModifiers = useMemo(function () {
     return [{
       name: 'flip',
       enabled: shouldFlip,
@@ -120,12 +122,12 @@ function PopperWrapper(_ref) {
         boundary: boundary,
         fallbackPlacements: fallbackPlacements
       }
-    }];
-  }, [shouldFlip, rootBoundary, boundary, fallbackPlacements]);
+    }].concat(_toConsumableArray(modifiers || []));
+  }, [shouldFlip, rootBoundary, boundary, fallbackPlacements, modifiers]);
   return jsx(Popper, {
     placement: placement,
     offset: offset,
-    modifiers: modifiers,
+    modifiers: mergedModifiers,
     strategy: strategy
   }, function (_ref2) {
     var _ref3 = _ref2.ref,
@@ -159,7 +161,7 @@ function PopperWrapper(_ref) {
       tabIndex: autoFocus ? 0 : undefined,
       shouldRenderToParent: shouldRenderToParent,
       shouldFitContainer: shouldFitContainer
-    }, getBooleanFF('platform.design-system-team.iframe_gojiv') && jsx(Global, {
+    }, fg('platform.design-system-team.iframe_gojiv') && jsx(Global, {
       styles: blockPointerEventsOnExternalIframeStyles
     }), jsx(RepositionOnUpdate, {
       update: update

package/dist/esm/popup.js

@@ -52,7 +52,8 @@ export var Popup = /*#__PURE__*/memo(function (_ref) {
     strategy = _ref.strategy,
     role = _ref.role,
     label = _ref.label,
-    titleId = _ref.titleId;
+    titleId = _ref.titleId,
+    modifiers = _ref.modifiers;
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     triggerRef = _useState2[0],
@@ -84,7 +85,8 @@ export var Popup = /*#__PURE__*/memo(function (_ref) {
     strategy: shouldFitContainer ? 'absolute' : strategy,
     role: role,
     label: label,
-    titleId: titleId
+    titleId: titleId,
+    modifiers: modifiers
   }));
   var popupContent = 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 { type PopperWrapperProps } from './types';
-declare function PopperWrapper({ isOpen, id, offset, testId, content, fallbackPlacements, onClose, boundary, rootBoundary, shouldFlip, placement, popupComponent: PopupContainer, autoFocus, triggerRef, shouldUseCaptureOnOutsideClick, shouldRenderToParent, shouldFitContainer, shouldDisableFocusLock, strategy, role, label, titleId, }: PopperWrapperProps): jsx.JSX.Element;
+declare function PopperWrapper({ isOpen, id, offset, testId, content, fallbackPlacements, onClose, boundary, rootBoundary, shouldFlip, placement, popupComponent: PopupContainer, autoFocus, triggerRef, shouldUseCaptureOnOutsideClick, shouldRenderToParent, shouldFitContainer, shouldDisableFocusLock, strategy, role, label, titleId, modifiers, }: PopperWrapperProps): jsx.JSX.Element;
 export default PopperWrapper;

package/dist/types/types.d.ts

@@ -1,5 +1,5 @@
 import { type ComponentType, type CSSProperties, type Dispatch, type PropsWithChildren, type default as React, type ReactNode, type Ref, type SetStateAction } from 'react';
-import { type Placement, type PopperChildrenProps } from '@atlaskit/popper';
+import { type Modifier, type Placement, type PopperChildrenProps } from '@atlaskit/popper';
 export interface TriggerProps {
     ref: Ref<any>;
     'aria-controls'?: string;
@@ -189,6 +189,11 @@ interface BaseProps {
      * Usage of either this, or the `label` attribute is strongly recommended.
      */
     titleId?: string;
+    /**
+     * Additional modifiers and modifier overwrites.
+     * for more details - https://popper.js.org/docs/v1/#modifiers
+     */
+    modifiers?: Partial<Modifier<string, object>>[];
 }
 interface InternalPopupProps extends BaseProps {
     /**

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

@@ -1,4 +1,4 @@
 import { jsx } from '@emotion/react';
 import { type PopperWrapperProps } from './types';
-declare function PopperWrapper({ isOpen, id, offset, testId, content, fallbackPlacements, onClose, boundary, rootBoundary, shouldFlip, placement, popupComponent: PopupContainer, autoFocus, triggerRef, shouldUseCaptureOnOutsideClick, shouldRenderToParent, shouldFitContainer, shouldDisableFocusLock, strategy, role, label, titleId, }: PopperWrapperProps): jsx.JSX.Element;
+declare function PopperWrapper({ isOpen, id, offset, testId, content, fallbackPlacements, onClose, boundary, rootBoundary, shouldFlip, placement, popupComponent: PopupContainer, autoFocus, triggerRef, shouldUseCaptureOnOutsideClick, shouldRenderToParent, shouldFitContainer, shouldDisableFocusLock, strategy, role, label, titleId, modifiers, }: PopperWrapperProps): jsx.JSX.Element;
 export default PopperWrapper;

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

@@ -1,5 +1,5 @@
 import { type ComponentType, type CSSProperties, type Dispatch, type PropsWithChildren, type default as React, type ReactNode, type Ref, type SetStateAction } from 'react';
-import { type Placement, type PopperChildrenProps } from '@atlaskit/popper';
+import { type Modifier, type Placement, type PopperChildrenProps } from '@atlaskit/popper';
 export interface TriggerProps {
     ref: Ref<any>;
     'aria-controls'?: string;
@@ -192,6 +192,11 @@ interface BaseProps {
      * Usage of either this, or the `label` attribute is strongly recommended.
      */
     titleId?: string;
+    /**
+     * Additional modifiers and modifier overwrites.
+     * for more details - https://popper.js.org/docs/v1/#modifiers
+     */
+    modifiers?: Partial<Modifier<string, object>>[];
 }
 interface InternalPopupProps extends BaseProps {
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/popup",
-	"version": "1.20.2",
+	"version": "1.21.0",
 	"description": "A popup displays brief content in an overlay.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -44,10 +44,10 @@
 		"@atlaskit/layering": "^0.3.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/popper": "^6.1.0",
-		"@atlaskit/portal": "^4.6.0",
-		"@atlaskit/primitives": "^11.0.0",
+		"@atlaskit/portal": "^4.7.0",
+		"@atlaskit/primitives": "^11.1.0",
 		"@atlaskit/theme": "^12.11.0",
-		"@atlaskit/tokens": "^1.56.0",
+		"@atlaskit/tokens": "^1.57.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"bind-event-listener": "^3.0.0",
@@ -58,13 +58,13 @@
 	},
 	"peerDependencies": {
 		"react": "^16.8.0 || ^17.0.0 || ~18.2.0",
-		"react-dom": "^16.8.0"
+		"react-dom": "^16.8.0 || ^17.0.0 || ~18.2.0"
 	},
 	"devDependencies": {
 		"@af/accessibility-testing": "*",
 		"@af/visual-regression": "*",
-		"@atlaskit/button": "^19.0.0",
-		"@atlaskit/icon": "^22.7.0",
+		"@atlaskit/button": "^19.1.0",
+		"@atlaskit/icon": "^22.10.0",
 		"@atlaskit/ssr": "*",
 		"@atlaskit/textfield": "^6.4.0",
 		"@atlaskit/toggle": "^13.2.0",