@atlaskit/inline-dialog 13.2.1 → 13.3.1

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @atlaskit/inline-dialog
 
+## 13.3.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 13.3.0
+
+### Minor Changes
+
+- [`2a53f51adc6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2a53f51adc6) - Introduce the prop `strategy` to allow consumers to override the default positioning strategy
+
+### Patch Changes
+
+- Updated dependencies
+
+## 13.2.2
+
+### Patch Changes
+
+- [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - Updates usage of deprecated token names so they're aligned with the latest naming conventions. No UI or visual changes
+- Updated dependencies
+
 ## 13.2.1
 
 ### Patch Changes

package/dist/cjs/InlineDialog/index.js

@@ -31,7 +31,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 /** @jsx jsx */
 var packageName = "@atlaskit/inline-dialog";
-var packageVersion = "13.2.1";
+var packageVersion = "13.3.1";
 
 var checkIsChildOfPortal = function checkIsChildOfPortal(node) {
   if (!node) {
@@ -54,6 +54,8 @@ var InlineDialog = /*#__PURE__*/(0, _react.memo)(function InlineDialog(_ref) {
       onClose = _ref$onClose === void 0 ? _noop.default : _ref$onClose,
       _ref$placement = _ref.placement,
       placement = _ref$placement === void 0 ? 'bottom-start' : _ref$placement,
+      _ref$strategy = _ref.strategy,
+      strategy = _ref$strategy === void 0 ? 'fixed' : _ref$strategy,
       testId = _ref.testId,
       content = _ref.content,
       children = _ref.children;
@@ -116,7 +118,8 @@ var InlineDialog = /*#__PURE__*/(0, _react.memo)(function InlineDialog(_ref) {
     return unbind;
   }, [isOpen, handleClickOutside]);
   var popper = isOpen ? (0, _core.jsx)(_popper.Popper, {
-    placement: placement
+    placement: placement,
+    strategy: strategy
   }, function (_ref2) {
     var _ref3 = _ref2.ref,
         style = _ref2.style;
@@ -153,8 +156,7 @@ var InlineDialog = /*#__PURE__*/(0, _react.memo)(function InlineDialog(_ref) {
       }
     }, children);
   }), popper);
-}); // enzyme relies on components having a display name
-
+});
 exports.InlineDialogWithoutAnalytics = InlineDialog;
 InlineDialog.displayName = 'InlineDialog';
 var createAndFireEventOnAtlaskit = (0, _analyticsNext.createAndFireEvent)('atlaskit');

package/dist/cjs/InlineDialog/styled/container.js

@@ -30,16 +30,16 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var themedBackground = (0, _components.themed)({
-  light: "var(--ds-background-overlay, ".concat(_colors.N0, ")"),
-  dark: "var(--ds-background-overlay, ".concat(_colors.DN50, ")")
+  light: "var(--ds-surface-overlay, ".concat(_colors.N0, ")"),
+  dark: "var(--ds-surface-overlay, ".concat(_colors.DN50, ")")
 });
 var themedColor = (0, _components.themed)({
-  light: "var(--ds-text-highEmphasis, ".concat(_colors.N900, ")"),
-  dark: "var(--ds-text-highEmphasis, ".concat(_colors.DN600, ")")
+  light: "var(--ds-text, ".concat(_colors.N900, ")"),
+  dark: "var(--ds-text, ".concat(_colors.DN600, ")")
 });
 var themedBoxShadow = (0, _components.themed)({
-  light: "var(--ds-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A), ")"),
-  dark: "var(--ds-overlay, ".concat("0 4px 8px -2px ".concat(_colors.DN50A, ", 0 0 1px ").concat(_colors.DN60A), ")")
+  light: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A), ")"),
+  dark: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.DN50A, ", 0 0 1px ").concat(_colors.DN60A), ")")
 });
 var borderRadius = (0, _constants.borderRadius)();
 var gridSize = (0, _constants.gridSize)();

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/inline-dialog",
-	"version": "13.2.1",
+	"version": "13.3.1",
 	"sideEffects": false
 }

package/dist/es2019/InlineDialog/index.js

@@ -8,7 +8,7 @@ import noop from '@atlaskit/ds-lib/noop';
 import { Manager, Popper, Reference } from '@atlaskit/popper';
 import { Container } from './styled/container';
 const packageName = "@atlaskit/inline-dialog";
-const packageVersion = "13.2.1";
+const packageVersion = "13.3.1";
 
 const checkIsChildOfPortal = node => {
   if (!node) {
@@ -25,6 +25,7 @@ const InlineDialog = /*#__PURE__*/memo(function InlineDialog({
   onContentFocus = noop,
   onClose = noop,
   placement = 'bottom-start',
+  strategy = 'fixed',
   testId,
   content,
   children
@@ -88,7 +89,8 @@ const InlineDialog = /*#__PURE__*/memo(function InlineDialog({
     return unbind;
   }, [isOpen, handleClickOutside]);
   const popper = isOpen ? jsx(Popper, {
-    placement: placement
+    placement: placement,
+    strategy: strategy
   }, ({
     ref,
     style
@@ -123,8 +125,7 @@ const InlineDialog = /*#__PURE__*/memo(function InlineDialog({
       }
     }
   }, children)), popper);
-}); // enzyme relies on components having a display name
-
+});
 InlineDialog.displayName = 'InlineDialog';
 export { InlineDialog as InlineDialogWithoutAnalytics };
 const createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');

package/dist/es2019/InlineDialog/styled/container.js

@@ -9,16 +9,16 @@ import { DN50, DN50A, DN600, DN60A, N0, N50A, N60A, N900 } from '@atlaskit/theme
 import { themed, useGlobalTheme } from '@atlaskit/theme/components';
 import { borderRadius as getBorderRadius, gridSize as getGridSize, layers } from '@atlaskit/theme/constants';
 const themedBackground = themed({
-  light: `var(--ds-background-overlay, ${N0})`,
-  dark: `var(--ds-background-overlay, ${DN50})`
+  light: `var(--ds-surface-overlay, ${N0})`,
+  dark: `var(--ds-surface-overlay, ${DN50})`
 });
 const themedColor = themed({
-  light: `var(--ds-text-highEmphasis, ${N900})`,
-  dark: `var(--ds-text-highEmphasis, ${DN600})`
+  light: `var(--ds-text, ${N900})`,
+  dark: `var(--ds-text, ${DN600})`
 });
 const themedBoxShadow = themed({
-  light: `var(--ds-overlay, ${`0 4px 8px -2px ${N50A}, 0 0 1px ${N60A}`})`,
-  dark: `var(--ds-overlay, ${`0 4px 8px -2px ${DN50A}, 0 0 1px ${DN60A}`})`
+  light: `var(--ds-shadow-overlay, ${`0 4px 8px -2px ${N50A}, 0 0 1px ${N60A}`})`,
+  dark: `var(--ds-shadow-overlay, ${`0 4px 8px -2px ${DN50A}, 0 0 1px ${DN60A}`})`
 });
 const borderRadius = getBorderRadius();
 const gridSize = getGridSize();

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/inline-dialog",
-	"version": "13.2.1",
+	"version": "13.3.1",
 	"sideEffects": false
 }

package/dist/esm/InlineDialog/index.js

@@ -8,7 +8,7 @@ import noop from '@atlaskit/ds-lib/noop';
 import { Manager, Popper, Reference } from '@atlaskit/popper';
 import { Container } from './styled/container';
 var packageName = "@atlaskit/inline-dialog";
-var packageVersion = "13.2.1";
+var packageVersion = "13.3.1";
 
 var checkIsChildOfPortal = function checkIsChildOfPortal(node) {
   if (!node) {
@@ -31,6 +31,8 @@ var InlineDialog = /*#__PURE__*/memo(function InlineDialog(_ref) {
       onClose = _ref$onClose === void 0 ? noop : _ref$onClose,
       _ref$placement = _ref.placement,
       placement = _ref$placement === void 0 ? 'bottom-start' : _ref$placement,
+      _ref$strategy = _ref.strategy,
+      strategy = _ref$strategy === void 0 ? 'fixed' : _ref$strategy,
       testId = _ref.testId,
       content = _ref.content,
       children = _ref.children;
@@ -93,7 +95,8 @@ var InlineDialog = /*#__PURE__*/memo(function InlineDialog(_ref) {
     return unbind;
   }, [isOpen, handleClickOutside]);
   var popper = isOpen ? jsx(Popper, {
-    placement: placement
+    placement: placement,
+    strategy: strategy
   }, function (_ref2) {
     var _ref3 = _ref2.ref,
         style = _ref2.style;
@@ -130,8 +133,7 @@ var InlineDialog = /*#__PURE__*/memo(function InlineDialog(_ref) {
       }
     }, children);
   }), popper);
-}); // enzyme relies on components having a display name
-
+});
 InlineDialog.displayName = 'InlineDialog';
 export { InlineDialog as InlineDialogWithoutAnalytics };
 var createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');

package/dist/esm/InlineDialog/styled/container.js

@@ -15,16 +15,16 @@ import { DN50, DN50A, DN600, DN60A, N0, N50A, N60A, N900 } from '@atlaskit/theme
 import { themed, useGlobalTheme } from '@atlaskit/theme/components';
 import { borderRadius as getBorderRadius, gridSize as getGridSize, layers } from '@atlaskit/theme/constants';
 var themedBackground = themed({
-  light: "var(--ds-background-overlay, ".concat(N0, ")"),
-  dark: "var(--ds-background-overlay, ".concat(DN50, ")")
+  light: "var(--ds-surface-overlay, ".concat(N0, ")"),
+  dark: "var(--ds-surface-overlay, ".concat(DN50, ")")
 });
 var themedColor = themed({
-  light: "var(--ds-text-highEmphasis, ".concat(N900, ")"),
-  dark: "var(--ds-text-highEmphasis, ".concat(DN600, ")")
+  light: "var(--ds-text, ".concat(N900, ")"),
+  dark: "var(--ds-text, ".concat(DN600, ")")
 });
 var themedBoxShadow = themed({
-  light: "var(--ds-overlay, ".concat("0 4px 8px -2px ".concat(N50A, ", 0 0 1px ").concat(N60A), ")"),
-  dark: "var(--ds-overlay, ".concat("0 4px 8px -2px ".concat(DN50A, ", 0 0 1px ").concat(DN60A), ")")
+  light: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N50A, ", 0 0 1px ").concat(N60A), ")"),
+  dark: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(DN50A, ", 0 0 1px ").concat(DN60A), ")")
 });
 var borderRadius = getBorderRadius();
 var gridSize = getGridSize();

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/inline-dialog",
-	"version": "13.2.1",
+	"version": "13.3.1",
 	"sideEffects": false
 }

package/dist/types/InlineDialog/index.d.ts

@@ -3,5 +3,5 @@ import React, { FC } from 'react';
 import type { InlineDialogProps } from '../types';
 declare const InlineDialog: FC<InlineDialogProps>;
 export { InlineDialog as InlineDialogWithoutAnalytics };
-declare const _default: React.ForwardRefExoticComponent<Pick<Pick<React.PropsWithChildren<InlineDialogProps>, "content" | "children" | "testId" | "isOpen" | "onContentBlur" | "onContentClick" | "onContentFocus" | "onClose" | "placement"> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "content" | "children" | "testId" | "isOpen" | "onContentBlur" | "onContentClick" | "onContentFocus" | "onClose" | "placement" | "key" | "analyticsContext"> & React.RefAttributes<any>>;
+declare const _default: React.ForwardRefExoticComponent<Pick<Pick<React.PropsWithChildren<InlineDialogProps>, "content" | "children" | "testId" | "isOpen" | "onContentBlur" | "onContentClick" | "onContentFocus" | "onClose" | "placement" | "strategy"> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "content" | "children" | "testId" | "isOpen" | "onContentBlur" | "onContentClick" | "onContentFocus" | "onClose" | "placement" | "strategy" | "key" | "analyticsContext"> & React.RefAttributes<any>>;
 export default _default;

package/dist/types/types.d.ts

@@ -38,6 +38,10 @@ export interface InlineDialogProps extends WithAnalyticsEventsProps {
      * Where the dialog should appear, relative to the contents of the children.
      */
     placement?: Placement;
+    /**
+     * Placement strategy used. Can be 'fixed' or 'absolute'. Defaults to 'fixed'.
+     */
+    strategy?: 'fixed' | 'absolute';
     /**
      * A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/inline-dialog",
-  "version": "13.2.1",
+  "version": "13.3.1",
   "description": "An inline dialog is a pop-up container for small amounts of information. It can also contain controls.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -24,10 +24,10 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^8.2.0",
-    "@atlaskit/ds-lib": "^1.3.0",
+    "@atlaskit/ds-lib": "^1.4.0",
     "@atlaskit/popper": "^5.0.0",
     "@atlaskit/theme": "^12.1.0",
-    "@atlaskit/tokens": "^0.5.0",
+    "@atlaskit/tokens": "^0.7.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9",
     "bind-event-listener": "^1.0.2",
@@ -37,7 +37,7 @@
     "react": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/button": "^16.1.0",
+    "@atlaskit/button": "^16.2.0",
     "@atlaskit/datetime-picker": "^11.1.0",
     "@atlaskit/docs": "*",
     "@atlaskit/icon": "^21.10.0",
@@ -49,7 +49,6 @@
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@testing-library/react": "^8.0.1",
-    "enzyme": "^3.10.0",
     "react-dom": "^16.8.0",
     "react-lorem-component": "^0.13.0",
     "typescript": "3.9.6",