@atlaskit/popup 1.1.5 → 1.1.6

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @atlaskit/popup
 
+## 1.1.6
+
+### 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,
@@ -94,10 +93,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,6 +39,7 @@ 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,
@@ -74,6 +75,7 @@ var Popup = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     content: content,
     isOpen: isOpen,
     placement: placement,
+    fallbackPlacements: fallbackPlacements,
     boundary: boundary,
     rootBoundary: rootBoundary,
     shouldFlip: shouldFlip,

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/popup",
-	"version": "1.1.5",
+	"version": "1.1.6",
 	"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,
@@ -59,10 +59,11 @@ function PopperWrapper({
     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,6 +18,7 @@ export const Popup = /*#__PURE__*/memo(({
   rootBoundary = 'viewport',
   shouldFlip = true,
   placement = 'auto',
+  fallbackPlacements,
   popupComponent: PopupContainer,
   autoFocus = true,
   zIndex = defaultLayer
@@ -48,6 +49,7 @@ export const Popup = /*#__PURE__*/memo(({
     content: content,
     isOpen: isOpen,
     placement: placement,
+    fallbackPlacements: fallbackPlacements,
     boundary: boundary,
     rootBoundary: rootBoundary,
     shouldFlip: shouldFlip,

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/popup",
-	"version": "1.1.5",
+	"version": "1.1.6",
 	"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,
@@ -75,10 +75,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,6 +23,7 @@ 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,
@@ -58,6 +59,7 @@ export var Popup = /*#__PURE__*/memo(function (_ref) {
     content: content,
     isOpen: isOpen,
     placement: placement,
+    fallbackPlacements: fallbackPlacements,
     boundary: boundary,
     rootBoundary: rootBoundary,
     shouldFlip: shouldFlip,

package/dist/esm/version.json

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

package/dist/types/PopperWrapper.d.ts

@@ -1,3 +1,3 @@
 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, }: 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,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/popup",
-  "version": "1.1.5",
+  "version": "1.1.6",
   "description": "A portalled popup primitive that is tied to a trigger element.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -30,7 +30,7 @@
     "@atlaskit/popper": "^5.0.0",
     "@atlaskit/portal": "^4.0.0",
     "@atlaskit/theme": "^12.0.0",
-    "@atlaskit/tokens": "^0.3.0",
+    "@atlaskit/tokens": "^0.4.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9",
     "bind-event-listener": "^1.0.2",
@@ -77,7 +77,10 @@
       "analytics": "analytics-next",
       "theming": "tokens",
       "deprecation": "no-deprecated-imports",
-      "styling": "emotion"
+      "styling": [
+        "static",
+        "emotion"
+      ]
     }
   },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"