@atlaskit/popup 1.1.5 → 1.3.1

package/CHANGELOG.md

@@ -1,5 +1,42 @@
 # @atlaskit/popup
 
+## 1.3.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 1.3.0
+
+### Minor Changes
+
+- [`2e42aa0d900`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2e42aa0d900) - **Note**: It is a re-release of the wrongly `patched` version `1.1.6` that should have been a `minor` release.
+
+  Expose `fallbackPlacement` modifier from to specify a list of fallback options to try incase there isn't enough space
+
+### Patch Changes
+
+- Updated dependencies
+
+## 1.2.0
+
+### Minor Changes
+
+- [`c2dd770a743`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c2dd770a743) - Add new prop which controls is outside click should be bound using capture
+
+## 1.1.6
+
+_WRONG RELEASE TYPE - DON'T USE_
+
+### Minor Changes
+
+- [`f142150a3e8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f142150a3e8) - Expose `fallbackPlacement` modifier from to specify a list of fallback options to try incase there isn't enough space
+
+### Patch Changes
+
+- [`f460cc7c411`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f460cc7c411) - Builds for this package now pass through a tokens babel plugin, removing runtime invocations of the tokens() function and improving bundle size.
+- Updated dependencies
+
 ## 1.1.5
 
 ### Patch Changes

package/dist/cjs/PopperWrapper.js

@@ -21,8 +21,6 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _constants = require("@atlaskit/theme/constants");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _RepositionOnUpdate = require("./RepositionOnUpdate");
 
 var _useCloseManager = require("./useCloseManager");
@@ -35,9 +33,9 @@ var popupStyles = (0, _core.css)({
   boxSizing: 'border-box',
   zIndex: _constants.layers.layer(),
   flex: '1 1 auto',
-  backgroundColor: (0, _tokens.token)('color.background.overlay', _colors.N0),
+  backgroundColor: "var(--ds-background-overlay, ".concat(_colors.N0, ")"),
   borderRadius: "".concat((0, _constants.borderRadius)(), "px"),
-  boxShadow: (0, _tokens.token)('shadow.overlay', "0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A)),
+  boxShadow: "var(--ds-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A), ")"),
   overflow: 'auto',
   ':focus': {
     outline: 'none'
@@ -56,6 +54,7 @@ function PopperWrapper(_ref) {
       offset = _ref.offset,
       testId = _ref.testId,
       content = _ref.content,
+      fallbackPlacements = _ref.fallbackPlacements,
       onClose = _ref.onClose,
       boundary = _ref.boundary,
       rootBoundary = _ref.rootBoundary,
@@ -66,7 +65,8 @@ function PopperWrapper(_ref) {
       PopupContainer = _ref$popupComponent === void 0 ? DefaultPopupComponent : _ref$popupComponent,
       _ref$autoFocus = _ref.autoFocus,
       autoFocus = _ref$autoFocus === void 0 ? true : _ref$autoFocus,
-      triggerRef = _ref.triggerRef;
+      triggerRef = _ref.triggerRef,
+      shouldUseCaptureOnOutsideClick = _ref.shouldUseCaptureOnOutsideClick;
 
   var _useState = (0, _react.useState)(null),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -86,7 +86,8 @@ function PopperWrapper(_ref) {
     isOpen: isOpen,
     onClose: onClose,
     popupRef: popupRef,
-    triggerRef: triggerRef
+    triggerRef: triggerRef,
+    shouldUseCaptureOnOutsideClick: shouldUseCaptureOnOutsideClick
   });
   var modifiers = (0, _react.useMemo)(function () {
     return [{
@@ -94,10 +95,11 @@ function PopperWrapper(_ref) {
       enabled: shouldFlip,
       options: {
         rootBoundary: rootBoundary,
-        boundary: boundary
+        boundary: boundary,
+        fallbackPlacements: fallbackPlacements
       }
     }];
-  }, [shouldFlip, rootBoundary, boundary]);
+  }, [shouldFlip, rootBoundary, boundary, fallbackPlacements]);
   return (0, _core.jsx)(_popper.Popper, {
     placement: placement,
     offset: offset,

package/dist/cjs/Popup.js

@@ -39,11 +39,14 @@ var Popup = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       shouldFlip = _ref$shouldFlip === void 0 ? true : _ref$shouldFlip,
       _ref$placement = _ref.placement,
       placement = _ref$placement === void 0 ? 'auto' : _ref$placement,
+      fallbackPlacements = _ref.fallbackPlacements,
       PopupContainer = _ref.popupComponent,
       _ref$autoFocus = _ref.autoFocus,
       autoFocus = _ref$autoFocus === void 0 ? true : _ref$autoFocus,
       _ref$zIndex = _ref.zIndex,
-      zIndex = _ref$zIndex === void 0 ? defaultLayer : _ref$zIndex;
+      zIndex = _ref$zIndex === void 0 ? defaultLayer : _ref$zIndex,
+      _ref$shouldUseCapture = _ref.shouldUseCaptureOnOutsideClick,
+      shouldUseCaptureOnOutsideClick = _ref$shouldUseCapture === void 0 ? false : _ref$shouldUseCapture;
 
   var _useState = (0, _react.useState)(null),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -74,6 +77,7 @@ var Popup = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     content: content,
     isOpen: isOpen,
     placement: placement,
+    fallbackPlacements: fallbackPlacements,
     boundary: boundary,
     rootBoundary: rootBoundary,
     shouldFlip: shouldFlip,
@@ -83,6 +87,7 @@ var Popup = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     testId: testId,
     onClose: onClose,
     autoFocus: autoFocus,
+    shouldUseCaptureOnOutsideClick: shouldUseCaptureOnOutsideClick,
     triggerRef: triggerRef
   })));
 });

package/dist/cjs/useCloseManager.js

@@ -15,7 +15,8 @@ var useCloseManager = function useCloseManager(_ref) {
   var isOpen = _ref.isOpen,
       onClose = _ref.onClose,
       popupRef = _ref.popupRef,
-      triggerRef = _ref.triggerRef;
+      triggerRef = _ref.triggerRef,
+      capture = _ref.shouldUseCaptureOnOutsideClick;
   (0, _react.useEffect)(function () {
     if (!isOpen || !popupRef) {
       return noop;
@@ -61,13 +62,16 @@ var useCloseManager = function useCloseManager(_ref) {
     var unbind = (0, _bindEventListener.bindAll)(window, [// --strictFunctionTypes prevents the above events from being recognised as event listeners
     {
       type: 'click',
-      listener: onClick
+      listener: onClick,
+      options: {
+        capture: capture
+      }
     }, {
       type: 'keydown',
       listener: onKeyDown
     }]);
     return unbind;
-  }, [isOpen, onClose, popupRef, triggerRef]);
+  }, [isOpen, onClose, popupRef, triggerRef, capture]);
 };
 
 exports.useCloseManager = useCloseManager;

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/popup",
-	"version": "1.1.5",
+	"version": "1.3.1",
 	"sideEffects": false
 }

package/dist/es2019/PopperWrapper.js

@@ -6,7 +6,6 @@ import { css, jsx } from '@emotion/core';
 import { Popper } from '@atlaskit/popper';
 import { N0, N50A, N60A } from '@atlaskit/theme/colors';
 import { borderRadius, layers } from '@atlaskit/theme/constants';
-import { token } from '@atlaskit/tokens';
 import { RepositionOnUpdate } from './RepositionOnUpdate';
 import { useCloseManager } from './useCloseManager';
 import { useFocusManager } from './useFocusManager';
@@ -15,9 +14,9 @@ const popupStyles = css({
   boxSizing: 'border-box',
   zIndex: layers.layer(),
   flex: '1 1 auto',
-  backgroundColor: token('color.background.overlay', N0),
+  backgroundColor: `var(--ds-background-overlay, ${N0})`,
   borderRadius: `${borderRadius()}px`,
-  boxShadow: token('shadow.overlay', `0 4px 8px -2px ${N50A}, 0 0 1px ${N60A}`),
+  boxShadow: `var(--ds-overlay, ${`0 4px 8px -2px ${N50A}, 0 0 1px ${N60A}`})`,
   overflow: 'auto',
   ':focus': {
     outline: 'none'
@@ -34,6 +33,7 @@ function PopperWrapper({
   offset,
   testId,
   content,
+  fallbackPlacements,
   onClose,
   boundary,
   rootBoundary,
@@ -41,7 +41,8 @@ function PopperWrapper({
   placement = 'auto',
   popupComponent: PopupContainer = DefaultPopupComponent,
   autoFocus = true,
-  triggerRef
+  triggerRef,
+  shouldUseCaptureOnOutsideClick
 }) {
   const [popupRef, setPopupRef] = useState(null);
   const [initialFocusRef, setInitialFocusRef] = useState(null);
@@ -53,16 +54,18 @@ function PopperWrapper({
     isOpen,
     onClose,
     popupRef,
-    triggerRef
+    triggerRef,
+    shouldUseCaptureOnOutsideClick
   });
   const modifiers = useMemo(() => [{
     name: 'flip',
     enabled: shouldFlip,
     options: {
-      rootBoundary: rootBoundary,
-      boundary: boundary
+      rootBoundary,
+      boundary,
+      fallbackPlacements
     }
-  }], [shouldFlip, rootBoundary, boundary]);
+  }], [shouldFlip, rootBoundary, boundary, fallbackPlacements]);
   return jsx(Popper, {
     placement: placement,
     offset: offset,

package/dist/es2019/Popup.js

@@ -18,9 +18,11 @@ export const Popup = /*#__PURE__*/memo(({
   rootBoundary = 'viewport',
   shouldFlip = true,
   placement = 'auto',
+  fallbackPlacements,
   popupComponent: PopupContainer,
   autoFocus = true,
-  zIndex = defaultLayer
+  zIndex = defaultLayer,
+  shouldUseCaptureOnOutsideClick = false
 }) => {
   const [triggerRef, setTriggerRef] = useState(null);
   return jsx(Manager, null, jsx(Reference, null, ({
@@ -48,6 +50,7 @@ export const Popup = /*#__PURE__*/memo(({
     content: content,
     isOpen: isOpen,
     placement: placement,
+    fallbackPlacements: fallbackPlacements,
     boundary: boundary,
     rootBoundary: rootBoundary,
     shouldFlip: shouldFlip,
@@ -57,6 +60,7 @@ export const Popup = /*#__PURE__*/memo(({
     testId: testId,
     onClose: onClose,
     autoFocus: autoFocus,
+    shouldUseCaptureOnOutsideClick: shouldUseCaptureOnOutsideClick,
     triggerRef: triggerRef
   })));
 });

package/dist/es2019/useCloseManager.js

@@ -7,7 +7,8 @@ export const useCloseManager = ({
   isOpen,
   onClose,
   popupRef,
-  triggerRef
+  triggerRef,
+  shouldUseCaptureOnOutsideClick: capture
 }) => {
   useEffect(() => {
     if (!isOpen || !popupRef) {
@@ -57,11 +58,14 @@ export const useCloseManager = ({
     const unbind = bindAll(window, [// --strictFunctionTypes prevents the above events from being recognised as event listeners
     {
       type: 'click',
-      listener: onClick
+      listener: onClick,
+      options: {
+        capture
+      }
     }, {
       type: 'keydown',
       listener: onKeyDown
     }]);
     return unbind;
-  }, [isOpen, onClose, popupRef, triggerRef]);
+  }, [isOpen, onClose, popupRef, triggerRef, capture]);
 };

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/popup",
-	"version": "1.1.5",
+	"version": "1.3.1",
 	"sideEffects": false
 }

package/dist/esm/PopperWrapper.js

@@ -7,7 +7,6 @@ import { css, jsx } from '@emotion/core';
 import { Popper } from '@atlaskit/popper';
 import { N0, N50A, N60A } from '@atlaskit/theme/colors';
 import { borderRadius, layers } from '@atlaskit/theme/constants';
-import { token } from '@atlaskit/tokens';
 import { RepositionOnUpdate } from './RepositionOnUpdate';
 import { useCloseManager } from './useCloseManager';
 import { useFocusManager } from './useFocusManager';
@@ -16,9 +15,9 @@ var popupStyles = css({
   boxSizing: 'border-box',
   zIndex: layers.layer(),
   flex: '1 1 auto',
-  backgroundColor: token('color.background.overlay', N0),
+  backgroundColor: "var(--ds-background-overlay, ".concat(N0, ")"),
   borderRadius: "".concat(borderRadius(), "px"),
-  boxShadow: token('shadow.overlay', "0 4px 8px -2px ".concat(N50A, ", 0 0 1px ").concat(N60A)),
+  boxShadow: "var(--ds-overlay, ".concat("0 4px 8px -2px ".concat(N50A, ", 0 0 1px ").concat(N60A), ")"),
   overflow: 'auto',
   ':focus': {
     outline: 'none'
@@ -37,6 +36,7 @@ function PopperWrapper(_ref) {
       offset = _ref.offset,
       testId = _ref.testId,
       content = _ref.content,
+      fallbackPlacements = _ref.fallbackPlacements,
       onClose = _ref.onClose,
       boundary = _ref.boundary,
       rootBoundary = _ref.rootBoundary,
@@ -47,7 +47,8 @@ function PopperWrapper(_ref) {
       PopupContainer = _ref$popupComponent === void 0 ? DefaultPopupComponent : _ref$popupComponent,
       _ref$autoFocus = _ref.autoFocus,
       autoFocus = _ref$autoFocus === void 0 ? true : _ref$autoFocus,
-      triggerRef = _ref.triggerRef;
+      triggerRef = _ref.triggerRef,
+      shouldUseCaptureOnOutsideClick = _ref.shouldUseCaptureOnOutsideClick;
 
   var _useState = useState(null),
       _useState2 = _slicedToArray(_useState, 2),
@@ -67,7 +68,8 @@ function PopperWrapper(_ref) {
     isOpen: isOpen,
     onClose: onClose,
     popupRef: popupRef,
-    triggerRef: triggerRef
+    triggerRef: triggerRef,
+    shouldUseCaptureOnOutsideClick: shouldUseCaptureOnOutsideClick
   });
   var modifiers = useMemo(function () {
     return [{
@@ -75,10 +77,11 @@ function PopperWrapper(_ref) {
       enabled: shouldFlip,
       options: {
         rootBoundary: rootBoundary,
-        boundary: boundary
+        boundary: boundary,
+        fallbackPlacements: fallbackPlacements
       }
     }];
-  }, [shouldFlip, rootBoundary, boundary]);
+  }, [shouldFlip, rootBoundary, boundary, fallbackPlacements]);
   return jsx(Popper, {
     placement: placement,
     offset: offset,

package/dist/esm/Popup.js

@@ -23,11 +23,14 @@ export var Popup = /*#__PURE__*/memo(function (_ref) {
       shouldFlip = _ref$shouldFlip === void 0 ? true : _ref$shouldFlip,
       _ref$placement = _ref.placement,
       placement = _ref$placement === void 0 ? 'auto' : _ref$placement,
+      fallbackPlacements = _ref.fallbackPlacements,
       PopupContainer = _ref.popupComponent,
       _ref$autoFocus = _ref.autoFocus,
       autoFocus = _ref$autoFocus === void 0 ? true : _ref$autoFocus,
       _ref$zIndex = _ref.zIndex,
-      zIndex = _ref$zIndex === void 0 ? defaultLayer : _ref$zIndex;
+      zIndex = _ref$zIndex === void 0 ? defaultLayer : _ref$zIndex,
+      _ref$shouldUseCapture = _ref.shouldUseCaptureOnOutsideClick,
+      shouldUseCaptureOnOutsideClick = _ref$shouldUseCapture === void 0 ? false : _ref$shouldUseCapture;
 
   var _useState = useState(null),
       _useState2 = _slicedToArray(_useState, 2),
@@ -58,6 +61,7 @@ export var Popup = /*#__PURE__*/memo(function (_ref) {
     content: content,
     isOpen: isOpen,
     placement: placement,
+    fallbackPlacements: fallbackPlacements,
     boundary: boundary,
     rootBoundary: rootBoundary,
     shouldFlip: shouldFlip,
@@ -67,6 +71,7 @@ export var Popup = /*#__PURE__*/memo(function (_ref) {
     testId: testId,
     onClose: onClose,
     autoFocus: autoFocus,
+    shouldUseCaptureOnOutsideClick: shouldUseCaptureOnOutsideClick,
     triggerRef: triggerRef
   })));
 });

package/dist/esm/useCloseManager.js

@@ -7,7 +7,8 @@ export var useCloseManager = function useCloseManager(_ref) {
   var isOpen = _ref.isOpen,
       onClose = _ref.onClose,
       popupRef = _ref.popupRef,
-      triggerRef = _ref.triggerRef;
+      triggerRef = _ref.triggerRef,
+      capture = _ref.shouldUseCaptureOnOutsideClick;
   useEffect(function () {
     if (!isOpen || !popupRef) {
       return noop;
@@ -53,11 +54,14 @@ export var useCloseManager = function useCloseManager(_ref) {
     var unbind = bindAll(window, [// --strictFunctionTypes prevents the above events from being recognised as event listeners
     {
       type: 'click',
-      listener: onClick
+      listener: onClick,
+      options: {
+        capture: capture
+      }
     }, {
       type: 'keydown',
       listener: onKeyDown
     }]);
     return unbind;
-  }, [isOpen, onClose, popupRef, triggerRef]);
+  }, [isOpen, onClose, popupRef, triggerRef, capture]);
 };

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/popup",
-	"version": "1.1.5",
+	"version": "1.3.1",
 	"sideEffects": false
 }

package/dist/types/PopperWrapper.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { PopperWrapperProps } from './types';
-declare function PopperWrapper({ isOpen, id, offset, testId, content, onClose, boundary, rootBoundary, shouldFlip, placement, popupComponent: PopupContainer, autoFocus, triggerRef, }: PopperWrapperProps): JSX.Element;
+declare function PopperWrapper({ isOpen, id, offset, testId, content, fallbackPlacements, onClose, boundary, rootBoundary, shouldFlip, placement, popupComponent: PopupContainer, autoFocus, triggerRef, shouldUseCaptureOnOutsideClick, }: PopperWrapperProps): JSX.Element;
 export default PopperWrapper;

package/dist/types/types.d.ts

@@ -7,7 +7,7 @@ export interface TriggerProps {
     'aria-haspopup': boolean;
 }
 export declare type PopupRef = HTMLDivElement | null;
-export declare type TriggerRef = HTMLElement | null;
+export declare type TriggerRef = HTMLElement | HTMLButtonElement | null;
 export interface ContentProps {
     /**
      * Will reposition the popup if any of the content has changed.
@@ -82,6 +82,12 @@ interface BaseProps {
      * Defaults to `"auto"`.
      */
     placement?: Placement;
+    /**
+     * Defines a list of placements to try.
+     * When no space is available on the preferred placement,
+     * the modifier will test the ones provided in the list, and use the first useful one.
+     */
+    fallbackPlacements?: Placement[];
     /**
      * The boundary element that the popup will check for overflow.
      * Defaults to `"clippingParents"` which are parent scroll containers,
@@ -122,6 +128,11 @@ interface BaseProps {
      * Defaults to `true`.
      */
     autoFocus?: boolean;
+    /**
+     * Controls if the event which handles clicks outside the popup is be bound with
+     *  `capture: true`
+     */
+    shouldUseCaptureOnOutsideClick?: boolean;
 }
 export interface PopupProps extends BaseProps {
     /**
@@ -143,6 +154,7 @@ export interface PopperWrapperProps extends BaseProps {
 export declare type CloseManagerHook = Pick<PopupProps, 'isOpen' | 'onClose'> & {
     popupRef: PopupRef;
     triggerRef: TriggerRef;
+    shouldUseCaptureOnOutsideClick?: boolean;
 };
 export declare type FocusManagerHook = {
     popupRef: PopupRef;

package/dist/types/useCloseManager.d.ts

@@ -1,2 +1,2 @@
 import { CloseManagerHook } from './types';
-export declare const useCloseManager: ({ isOpen, onClose, popupRef, triggerRef, }: CloseManagerHook) => void;
+export declare const useCloseManager: ({ isOpen, onClose, popupRef, triggerRef, shouldUseCaptureOnOutsideClick: capture, }: CloseManagerHook) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/popup",
-  "version": "1.1.5",
+  "version": "1.3.1",
   "description": "A portalled popup primitive that is tied to a trigger element.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -20,7 +20,6 @@
   },
   "atlassian": {
     "team": "Design System Team",
-    "inPublicMirror": true,
     "releaseModel": "scheduled",
     "website": {
       "name": "Popup"
@@ -29,8 +28,8 @@
   "dependencies": {
     "@atlaskit/popper": "^5.0.0",
     "@atlaskit/portal": "^4.0.0",
-    "@atlaskit/theme": "^12.0.0",
-    "@atlaskit/tokens": "^0.3.0",
+    "@atlaskit/theme": "^12.1.0",
+    "@atlaskit/tokens": "^0.5.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9",
     "bind-event-listener": "^1.0.2",
@@ -41,10 +40,9 @@
     "react-dom": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/build-utils": "*",
     "@atlaskit/button": "^16.1.0",
     "@atlaskit/docs": "*",
-    "@atlaskit/icon": "^21.9.0",
+    "@atlaskit/icon": "^21.10.0",
     "@atlaskit/menu": "^1.2.0",
     "@atlaskit/radio": "^5.3.0",
     "@atlaskit/select": "^15.0.0",
@@ -77,7 +75,10 @@
       "analytics": "analytics-next",
       "theming": "tokens",
       "deprecation": "no-deprecated-imports",
-      "styling": "emotion"
+      "styling": [
+        "static",
+        "emotion"
+      ]
     }
   },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"