@atlaskit/popper 5.4.11 → 5.5.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/popper
 
+## 5.5.1
+
+### Patch Changes
+
+- [`f859e9ccda4`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f859e9ccda4) - Migrates unit tests from enzyme to RTL.
+
+## 5.5.0
+
+### Minor Changes
+
+- [`56507598609`](https://bitbucket.org/atlassian/atlassian-frontend/commits/56507598609) - Skip minor dependency bump
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 5.4.11
 
 ### Patch Changes
@@ -392,7 +408,7 @@
 
 - [major][ebfeb03eb7](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/ebfeb03eb7):
 
-  popper has been converted to Typescript. Typescript consumers will now get static type safety. Flow types are no longer provided. No API or behavioural changes.
+  popper has been converted to Typescript. Typescript consumers will now get static type safety. Flow types are no longer provided. No API or behavioral changes.
 
 ## 2.0.1
 
@@ -548,8 +564,8 @@
 
 ## 0.1.2
 
-- [patch] Replace @atlaskit/layer in date time picker with @atlaskit/popper, changed configuration of flipBehaviour modifier to use viewport as the element boundary rather than the window. [4286672](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/4286672)
-- [patch] Updated datetime-picker to use @atlaskit/popper internally instead of @atlaskit/layer. Minor fix to @atlaskit/popper, boundariesElement for flipbehaviour is now viewport and not window. [f2159f4](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/f2159f4)
+- [patch] Replace @atlaskit/layer in date time picker with @atlaskit/popper, changed configuration of flipbehavior modifier to use viewport as the element boundary rather than the window. [4286672](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/4286672)
+- [patch] Updated datetime-picker to use @atlaskit/popper internally instead of @atlaskit/layer. Minor fix to @atlaskit/popper, boundariesElement for flipbehavior is now viewport and not window. [f2159f4](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/f2159f4)
 - [none] Updated dependencies [4286672](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/4286672)
 - [none] Updated dependencies [f2159f4](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/f2159f4)
 

package/README.md

@@ -10,4 +10,4 @@ yarn add @atlaskit/popper
 
 ## Usage
 
-Detailed docs and example usage can be found [here](https://atlaskit.atlassian.com/packages/core/popper).
+[View documentation](https://atlassian.design/components/popper).

package/dist/cjs/__tests_external__/index.js

@@ -9,5 +9,4 @@ Object.defineProperty(exports, "popperRendersTestCase", {
     return _popper.popperRendersTestCase;
   }
 });
-
 var _popper = require("./test-cases/popper");

package/dist/cjs/__tests_external__/page-objects/base-popper.js

@@ -1,38 +1,25 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.BasePopperPageObject = void 0;
-
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
 var _inProductTesting = require("@atlaskit/in-product-testing");
-
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
 var BasePopperPageObject = /*#__PURE__*/function (_InProductTestPageObj) {
   (0, _inherits2.default)(BasePopperPageObject, _InProductTestPageObj);
-
   var _super = _createSuper(BasePopperPageObject);
-
   function BasePopperPageObject() {
     (0, _classCallCheck2.default)(this, BasePopperPageObject);
     return _super.apply(this, arguments);
   }
-
   (0, _createClass2.default)(BasePopperPageObject, [{
     key: "assertPopperStyle",
     value: function assertPopperStyle(elementSelector) {
@@ -41,5 +28,4 @@ var BasePopperPageObject = /*#__PURE__*/function (_InProductTestPageObj) {
   }]);
   return BasePopperPageObject;
 }(_inProductTesting.InProductTestPageObject);
-
 exports.BasePopperPageObject = BasePopperPageObject;

package/dist/cjs/__tests_external__/test-cases/popper.js

@@ -4,11 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.popperRendersTestCase = void 0;
-
 var _inProductTesting = require("@atlaskit/in-product-testing");
-
 var _basePopper = require("../page-objects/base-popper");
-
 var popperRendersTestCase = function popperRendersTestCase(elementSelector) {
   return new _inProductTesting.InProductTestCase({
     title: 'Popped container renders with position fixed',
@@ -19,5 +16,4 @@ var popperRendersTestCase = function popperRendersTestCase(elementSelector) {
     }
   });
 };
-
 exports.popperRendersTestCase = popperRendersTestCase;

package/dist/cjs/in-product.js

@@ -9,5 +9,4 @@ Object.defineProperty(exports, "popperRendersTestCase", {
     return _tests_external__.popperRendersTestCase;
   }
 });
-
 var _tests_external__ = require("./__tests_external__");

package/dist/cjs/index.js

@@ -27,7 +27,5 @@ Object.defineProperty(exports, "placements", {
     return _popper.placements;
   }
 });
-
 var _popper = require("./popper");
-
 var _reactPopper = require("react-popper");

package/dist/cjs/popper.js

@@ -1,9 +1,7 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -14,20 +12,14 @@ Object.defineProperty(exports, "placements", {
     return _core.placements;
   }
 });
-
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _reactPopper = require("react-popper");
-
 var _core = require("@popperjs/core");
-
 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); }
-
 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; }
+// Export types from PopperJS / React Popper
 
 var constantModifiers = [{
   name: 'flip',
@@ -44,30 +36,25 @@ var constantModifiers = [{
     rootBoundary: 'document'
   }
 }];
-
 function defaultChildrenFn() {
   return null;
 }
-
 var defaultOffset = [0, 8];
-
 function Popper(_ref) {
   var _ref$children = _ref.children,
-      children = _ref$children === void 0 ? defaultChildrenFn : _ref$children,
-      _ref$offset = _ref.offset,
-      offset = _ref$offset === void 0 ? defaultOffset : _ref$offset,
-      _ref$placement = _ref.placement,
-      placement = _ref$placement === void 0 ? 'bottom-start' : _ref$placement,
-      _ref$referenceElement = _ref.referenceElement,
-      referenceElement = _ref$referenceElement === void 0 ? undefined : _ref$referenceElement,
-      modifiers = _ref.modifiers,
-      _ref$strategy = _ref.strategy,
-      strategy = _ref$strategy === void 0 ? 'fixed' : _ref$strategy;
-
+    children = _ref$children === void 0 ? defaultChildrenFn : _ref$children,
+    _ref$offset = _ref.offset,
+    offset = _ref$offset === void 0 ? defaultOffset : _ref$offset,
+    _ref$placement = _ref.placement,
+    placement = _ref$placement === void 0 ? 'bottom-start' : _ref$placement,
+    _ref$referenceElement = _ref.referenceElement,
+    referenceElement = _ref$referenceElement === void 0 ? undefined : _ref$referenceElement,
+    modifiers = _ref.modifiers,
+    _ref$strategy = _ref.strategy,
+    strategy = _ref$strategy === void 0 ? 'fixed' : _ref$strategy;
   var _offset = (0, _slicedToArray2.default)(offset, 2),
-      offsetX = _offset[0],
-      offsetY = _offset[1];
-
+    offsetX = _offset[0],
+    offsetY = _offset[1];
   // Merge a new offset modifier only if new offset values passed in
   var internalModifiers = (0, _react.useMemo)(function () {
     var offsetModifier = {
@@ -77,13 +64,13 @@ function Popper(_ref) {
       }
     };
     return [].concat(constantModifiers, [offsetModifier]);
-  }, [offsetX, offsetY]); // Merge custom props and memoize
+  }, [offsetX, offsetY]);
 
+  // Merge custom props and memoize
   var mergedModifiers = (0, _react.useMemo)(function () {
     if (modifiers == null) {
       return internalModifiers;
     }
-
     return [].concat((0, _toConsumableArray2.default)(internalModifiers), (0, _toConsumableArray2.default)(modifiers));
   }, [internalModifiers, modifiers]);
   return /*#__PURE__*/_react.default.createElement(_reactPopper.Popper, {

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/popper",
-	"version": "5.4.11",
+	"version": "5.5.1",
 	"sideEffects": false
 }

package/dist/es2019/__tests_external__/page-objects/base-popper.js

@@ -3,5 +3,4 @@ export class BasePopperPageObject extends InProductTestPageObject {
   assertPopperStyle(elementSelector) {
     return this.cy.get(elementSelector).should('be.visible');
   }
-
 }

package/dist/es2019/popper.js

@@ -1,6 +1,7 @@
 import React, { useMemo } from 'react';
 import { Popper as ReactPopper } from 'react-popper';
-export { placements } from '@popperjs/core'; // Export types from PopperJS / React Popper
+export { placements } from '@popperjs/core';
+// Export types from PopperJS / React Popper
 
 const constantModifiers = [{
   name: 'flip',
@@ -17,11 +18,9 @@ const constantModifiers = [{
     rootBoundary: 'document'
   }
 }];
-
 function defaultChildrenFn() {
   return null;
 }
-
 const defaultOffset = [0, 8];
 export function Popper({
   children = defaultChildrenFn,
@@ -41,13 +40,13 @@ export function Popper({
       }
     };
     return [...constantModifiers, offsetModifier];
-  }, [offsetX, offsetY]); // Merge custom props and memoize
+  }, [offsetX, offsetY]);
 
+  // Merge custom props and memoize
   const mergedModifiers = useMemo(() => {
     if (modifiers == null) {
       return internalModifiers;
     }
-
     return [...internalModifiers, ...modifiers];
   }, [internalModifiers, modifiers]);
   return /*#__PURE__*/React.createElement(ReactPopper, {

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/popper",
-	"version": "5.4.11",
+	"version": "5.5.1",
 	"sideEffects": false
 }

package/dist/esm/__tests_external__/page-objects/base-popper.js

@@ -3,29 +3,21 @@ import _createClass from "@babel/runtime/helpers/createClass";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
 import { InProductTestPageObject } from '@atlaskit/in-product-testing';
 export var BasePopperPageObject = /*#__PURE__*/function (_InProductTestPageObj) {
   _inherits(BasePopperPageObject, _InProductTestPageObj);
-
   var _super = _createSuper(BasePopperPageObject);
-
   function BasePopperPageObject() {
     _classCallCheck(this, BasePopperPageObject);
-
     return _super.apply(this, arguments);
   }
-
   _createClass(BasePopperPageObject, [{
     key: "assertPopperStyle",
     value: function assertPopperStyle(elementSelector) {
       return this.cy.get(elementSelector).should('be.visible');
     }
   }]);
-
   return BasePopperPageObject;
 }(InProductTestPageObject);

package/dist/esm/popper.js

@@ -2,7 +2,8 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useMemo } from 'react';
 import { Popper as ReactPopper } from 'react-popper';
-export { placements } from '@popperjs/core'; // Export types from PopperJS / React Popper
+export { placements } from '@popperjs/core';
+// Export types from PopperJS / React Popper
 
 var constantModifiers = [{
   name: 'flip',
@@ -19,29 +20,25 @@ var constantModifiers = [{
     rootBoundary: 'document'
   }
 }];
-
 function defaultChildrenFn() {
   return null;
 }
-
 var defaultOffset = [0, 8];
 export function Popper(_ref) {
   var _ref$children = _ref.children,
-      children = _ref$children === void 0 ? defaultChildrenFn : _ref$children,
-      _ref$offset = _ref.offset,
-      offset = _ref$offset === void 0 ? defaultOffset : _ref$offset,
-      _ref$placement = _ref.placement,
-      placement = _ref$placement === void 0 ? 'bottom-start' : _ref$placement,
-      _ref$referenceElement = _ref.referenceElement,
-      referenceElement = _ref$referenceElement === void 0 ? undefined : _ref$referenceElement,
-      modifiers = _ref.modifiers,
-      _ref$strategy = _ref.strategy,
-      strategy = _ref$strategy === void 0 ? 'fixed' : _ref$strategy;
-
+    children = _ref$children === void 0 ? defaultChildrenFn : _ref$children,
+    _ref$offset = _ref.offset,
+    offset = _ref$offset === void 0 ? defaultOffset : _ref$offset,
+    _ref$placement = _ref.placement,
+    placement = _ref$placement === void 0 ? 'bottom-start' : _ref$placement,
+    _ref$referenceElement = _ref.referenceElement,
+    referenceElement = _ref$referenceElement === void 0 ? undefined : _ref$referenceElement,
+    modifiers = _ref.modifiers,
+    _ref$strategy = _ref.strategy,
+    strategy = _ref$strategy === void 0 ? 'fixed' : _ref$strategy;
   var _offset = _slicedToArray(offset, 2),
-      offsetX = _offset[0],
-      offsetY = _offset[1];
-
+    offsetX = _offset[0],
+    offsetY = _offset[1];
   // Merge a new offset modifier only if new offset values passed in
   var internalModifiers = useMemo(function () {
     var offsetModifier = {
@@ -51,13 +48,13 @@ export function Popper(_ref) {
       }
     };
     return [].concat(constantModifiers, [offsetModifier]);
-  }, [offsetX, offsetY]); // Merge custom props and memoize
+  }, [offsetX, offsetY]);
 
+  // Merge custom props and memoize
   var mergedModifiers = useMemo(function () {
     if (modifiers == null) {
       return internalModifiers;
     }
-
     return [].concat(_toConsumableArray(internalModifiers), _toConsumableArray(modifiers));
   }, [internalModifiers, modifiers]);
   return /*#__PURE__*/React.createElement(ReactPopper, {

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/popper",
-	"version": "5.4.11",
+	"version": "5.5.1",
 	"sideEffects": false
 }

package/dist/types-ts4.0/__tests_external__/index.d.ts

@@ -0,0 +1 @@
+export { popperRendersTestCase } from './test-cases/popper';

package/dist/types-ts4.0/__tests_external__/page-objects/base-popper.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="cypress" />
+import { InProductTestPageObject } from '@atlaskit/in-product-testing';
+export declare class BasePopperPageObject extends InProductTestPageObject {
+    assertPopperStyle(elementSelector: keyof HTMLElementTagNameMap | string): Cypress.Chainable<JQuery<HTMLElement>>;
+}

package/dist/types-ts4.0/__tests_external__/test-cases/popper.d.ts

@@ -0,0 +1,2 @@
+import { InProductTestCase } from '@atlaskit/in-product-testing';
+export declare const popperRendersTestCase: (elementSelector: keyof HTMLElementTagNameMap | string) => InProductTestCase;

package/dist/types-ts4.0/in-product.d.ts

@@ -0,0 +1 @@
+export { popperRendersTestCase } from './__tests_external__';

package/dist/types-ts4.0/index.d.ts

@@ -0,0 +1,3 @@
+export { Popper, placements } from './popper';
+export type { ManagerProps, ReferenceProps, PopperProps, PopperArrowProps, PopperChildrenProps, StrictModifier, Modifier, Placement, } from './popper';
+export { Manager, Reference } from 'react-popper';

package/dist/types-ts4.0/popper.d.ts

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Placement, VirtualElement } from '@popperjs/core';
+import { PopperChildrenProps, PopperProps } from 'react-popper';
+export { placements } from '@popperjs/core';
+export type { Placement, VirtualElement } from '@popperjs/core';
+export type { ManagerProps, ReferenceProps, PopperProps, PopperArrowProps, PopperChildrenProps, StrictModifier, Modifier, } from 'react-popper';
+declare type Offset = [
+    number | null | undefined,
+    number | null | undefined
+];
+export interface CustomPopperProps<Modifiers> {
+    /**
+     * Returns the element to be positioned.
+     */
+    children?: (childrenProps: PopperChildrenProps) => React.ReactNode;
+    /**
+     * 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
+     * by the `placement` prop.
+     */
+    offset?: Offset;
+    /**
+     * Which side of the Reference to show on.
+     */
+    placement?: Placement;
+    /**
+     * Replacement reference element to position popper relative to.
+     */
+    referenceElement?: HTMLElement | VirtualElement;
+    /**
+     * Additional modifiers and modifier overwrites.
+     */
+    modifiers?: PopperProps<Modifiers>['modifiers'];
+    /**
+     * Placement strategy used. Can be 'fixed' or 'absolute'
+     */
+    strategy?: PopperProps<Modifiers>['strategy'];
+}
+export declare function Popper<CustomModifiers>({ children, offset, placement, referenceElement, modifiers, strategy, }: CustomPopperProps<CustomModifiers>): JSX.Element;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@atlaskit/popper",
-  "version": "5.4.11",
-  "description": "Wrapper for react-popper with common config and some helpers",
+  "version": "5.5.1",
+  "description": "A wrapper for React Popper for situations which require a bespoke popup where other ADS components are deemed unsuitable",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
@@ -30,7 +30,7 @@
     ],
     "website": {
       "name": "Popper",
-      "category": "Components"
+      "category": "Libraries"
     }
   },
   "af:exports": {
@@ -39,7 +39,7 @@
     "./in-product": "./src/in-product.tsx"
   },
   "dependencies": {
-    "@atlaskit/in-product-testing": "^0.1.5",
+    "@atlaskit/in-product-testing": "^0.2.0",
     "@babel/runtime": "^7.0.0",
     "@popperjs/core": "^2.9.1",
     "react-popper": "^2.2.3"
@@ -48,17 +48,21 @@
     "react": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/button": "^16.5.0",
+    "@atlaskit/button": "^16.7.0",
     "@atlaskit/docs": "*",
-    "@atlaskit/ds-lib": "^2.1.0",
+    "@atlaskit/ds-lib": "^2.2.0",
+    "@atlaskit/section-message": "^6.4.0",
     "@atlaskit/ssr": "*",
-    "@atlaskit/theme": "^12.2.0",
+    "@atlaskit/theme": "^12.5.0",
+    "@atlaskit/tokens": "^1.3.0",
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
+    "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.0.0",
+    "@testing-library/react": "^12.1.5",
+    "@testing-library/user-event": "^14.4.3",
     "@types/jscodeshift": "^0.11.0",
     "ast-types": "^0.13.3",
-    "enzyme": "^3.10.0",
     "jscodeshift": "^0.13.0",
     "react-dom": "^16.8.0",
     "react-lorem-component": "^0.13.0",
@@ -78,8 +82,10 @@
       "design-system": "v1",
       "ui-components": "lite-mode",
       "analytics": "analytics-next",
-      "design-tokens": "spacing",
-      "theming": "tokens",
+      "design-tokens": [
+        "color",
+        "spacing"
+      ],
       "deprecation": "no-deprecated-imports",
       "styling": [
         "static",
@@ -87,6 +93,6 @@
       ]
     }
   },
-  "homepage": "https://atlaskit.atlassian.com/packages/design-system/popper",
+  "homepage": "https://atlassian.design/components/popper",
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
 }