@atlaskit/inline-dialog 13.1.9 → 13.3.0

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # @atlaskit/inline-dialog
 
+## 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
+
+- Updated dependencies
+
+## 13.2.0
+
+### Minor Changes
+
+- [`2fe0d03807f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2fe0d03807f) - This removes the preventDefault functionality (reverts it back to the previous version of inline dialog where event listeners were added in the capture phase). It also refactors handleClickOutside so that it is now triggered by a ref.
+
 ## 13.1.9
 
 ### 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.1.9";
+var packageVersion = "13.3.0";
 
 var checkIsChildOfPortal = function checkIsChildOfPortal(node) {
   if (!node) {
@@ -54,16 +54,19 @@ 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;
   var containerRef = (0, _react.useRef)(null);
-  var triggerRef = (0, _react.useRef)(null);
-  var handleClickOutside = (0, _react.useCallback)(function (event) {
-    if (event.defaultPrevented) {
-      return;
-    }
+  var triggerRef = (0, _react.useRef)(null); // we put this into a ref to avoid handleClickOutside having this as a dependency
 
+  var onCloseRef = (0, _react.useRef)(onClose);
+  (0, _react.useEffect)(function () {
+    onCloseRef.current = onClose;
+  });
+  var handleClickOutside = (0, _react.useCallback)(function (event) {
     var target = event.target; // checks for when target is not HTMLElement
 
     if (!(target instanceof HTMLElement)) {
@@ -89,45 +92,34 @@ var InlineDialog = /*#__PURE__*/(0, _react.memo)(function InlineDialog(_ref) {
 
 
     if (containerRef.current && !containerRef.current.contains(target)) {
-      onClose && onClose({
+      var _onCloseRef$current;
+
+      (_onCloseRef$current = onCloseRef.current) === null || _onCloseRef$current === void 0 ? void 0 : _onCloseRef$current.call(onCloseRef, {
         isOpen: false,
         event: event
       });
     }
-  }, [onClose]);
+  }, []);
   (0, _react.useEffect)(function () {
     if (!isOpen) {
       return;
     }
 
-    var unbind; // Under most circumstances, `useEffect` should run after an event has ended
-    // In this particular case, the popperjs library has a setState inside of a ref,
-    // which cases `useEffect` to run synchronously instead. To avoid this, we use a
-    // `setTimeout` so `useEffect` after the event. We only want to start listening
-    // for clicks after the original click event that triggered the dialog
-    // has finished. You can see more in the Codesandbox here:
-    // https://codesandbox.io/s/useeffect-and-event-timing-refs-in-state-5tys3?file=/src/App.tsx
-
-    var timeoutId = setTimeout(function () {
-      unbind = (0, _bindEventListener.bind)(window, {
-        type: 'click',
-        listener: function listener(event) {
-          return handleClickOutside(event);
-        },
-        options: {
-          capture: false
-        }
-      });
+    var unbind;
+    unbind = (0, _bindEventListener.bind)(window, {
+      type: 'click',
+      listener: function listener(e) {
+        return handleClickOutside(e);
+      },
+      options: {
+        capture: true
+      }
     });
-    return function () {
-      var _unbind;
-
-      window.clearTimeout(timeoutId);
-      (_unbind = unbind) === null || _unbind === void 0 ? void 0 : _unbind();
-    };
-  }, [handleClickOutside, isOpen]);
+    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;
@@ -164,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

@@ -25,21 +25,21 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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; }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+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.1.9",
+	"version": "13.3.0",
 	"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.1.9";
+const packageVersion = "13.3.0";
 
 const checkIsChildOfPortal = node => {
   if (!node) {
@@ -25,17 +25,19 @@ const InlineDialog = /*#__PURE__*/memo(function InlineDialog({
   onContentFocus = noop,
   onClose = noop,
   placement = 'bottom-start',
+  strategy = 'fixed',
   testId,
   content,
   children
 }) {
   const containerRef = useRef(null);
-  const triggerRef = useRef(null);
-  const handleClickOutside = useCallback(event => {
-    if (event.defaultPrevented) {
-      return;
-    }
+  const triggerRef = useRef(null); // we put this into a ref to avoid handleClickOutside having this as a dependency
 
+  const onCloseRef = useRef(onClose);
+  useEffect(() => {
+    onCloseRef.current = onClose;
+  });
+  const handleClickOutside = useCallback(event => {
     const {
       target
     } = event; // checks for when target is not HTMLElement
@@ -63,43 +65,32 @@ const InlineDialog = /*#__PURE__*/memo(function InlineDialog({
 
 
     if (containerRef.current && !containerRef.current.contains(target)) {
-      onClose && onClose({
+      var _onCloseRef$current;
+
+      (_onCloseRef$current = onCloseRef.current) === null || _onCloseRef$current === void 0 ? void 0 : _onCloseRef$current.call(onCloseRef, {
         isOpen: false,
         event: event
       });
     }
-  }, [onClose]);
+  }, []);
   useEffect(() => {
     if (!isOpen) {
       return;
     }
 
-    let unbind; // Under most circumstances, `useEffect` should run after an event has ended
-    // In this particular case, the popperjs library has a setState inside of a ref,
-    // which cases `useEffect` to run synchronously instead. To avoid this, we use a
-    // `setTimeout` so `useEffect` after the event. We only want to start listening
-    // for clicks after the original click event that triggered the dialog
-    // has finished. You can see more in the Codesandbox here:
-    // https://codesandbox.io/s/useeffect-and-event-timing-refs-in-state-5tys3?file=/src/App.tsx
-
-    const timeoutId = setTimeout(() => {
-      unbind = bind(window, {
-        type: 'click',
-        listener: event => handleClickOutside(event),
-        options: {
-          capture: false
-        }
-      });
+    let unbind;
+    unbind = bind(window, {
+      type: 'click',
+      listener: e => handleClickOutside(e),
+      options: {
+        capture: true
+      }
     });
-    return () => {
-      var _unbind;
-
-      window.clearTimeout(timeoutId);
-      (_unbind = unbind) === null || _unbind === void 0 ? void 0 : _unbind();
-    };
-  }, [handleClickOutside, isOpen]);
+    return unbind;
+  }, [isOpen, handleClickOutside]);
   const popper = isOpen ? jsx(Popper, {
-    placement: placement
+    placement: placement,
+    strategy: strategy
   }, ({
     ref,
     style
@@ -134,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.1.9",
+	"version": "13.3.0",
 	"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.1.9";
+var packageVersion = "13.3.0";
 
 var checkIsChildOfPortal = function checkIsChildOfPortal(node) {
   if (!node) {
@@ -31,16 +31,19 @@ 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;
   var containerRef = useRef(null);
-  var triggerRef = useRef(null);
-  var handleClickOutside = useCallback(function (event) {
-    if (event.defaultPrevented) {
-      return;
-    }
+  var triggerRef = useRef(null); // we put this into a ref to avoid handleClickOutside having this as a dependency
 
+  var onCloseRef = useRef(onClose);
+  useEffect(function () {
+    onCloseRef.current = onClose;
+  });
+  var handleClickOutside = useCallback(function (event) {
     var target = event.target; // checks for when target is not HTMLElement
 
     if (!(target instanceof HTMLElement)) {
@@ -66,45 +69,34 @@ var InlineDialog = /*#__PURE__*/memo(function InlineDialog(_ref) {
 
 
     if (containerRef.current && !containerRef.current.contains(target)) {
-      onClose && onClose({
+      var _onCloseRef$current;
+
+      (_onCloseRef$current = onCloseRef.current) === null || _onCloseRef$current === void 0 ? void 0 : _onCloseRef$current.call(onCloseRef, {
         isOpen: false,
         event: event
       });
     }
-  }, [onClose]);
+  }, []);
   useEffect(function () {
     if (!isOpen) {
       return;
     }
 
-    var unbind; // Under most circumstances, `useEffect` should run after an event has ended
-    // In this particular case, the popperjs library has a setState inside of a ref,
-    // which cases `useEffect` to run synchronously instead. To avoid this, we use a
-    // `setTimeout` so `useEffect` after the event. We only want to start listening
-    // for clicks after the original click event that triggered the dialog
-    // has finished. You can see more in the Codesandbox here:
-    // https://codesandbox.io/s/useeffect-and-event-timing-refs-in-state-5tys3?file=/src/App.tsx
-
-    var timeoutId = setTimeout(function () {
-      unbind = bind(window, {
-        type: 'click',
-        listener: function listener(event) {
-          return handleClickOutside(event);
-        },
-        options: {
-          capture: false
-        }
-      });
+    var unbind;
+    unbind = bind(window, {
+      type: 'click',
+      listener: function listener(e) {
+        return handleClickOutside(e);
+      },
+      options: {
+        capture: true
+      }
     });
-    return function () {
-      var _unbind;
-
-      window.clearTimeout(timeoutId);
-      (_unbind = unbind) === null || _unbind === void 0 ? void 0 : _unbind();
-    };
-  }, [handleClickOutside, isOpen]);
+    return unbind;
+  }, [isOpen, handleClickOutside]);
   var popper = isOpen ? jsx(Popper, {
-    placement: placement
+    placement: placement,
+    strategy: strategy
   }, function (_ref2) {
     var _ref3 = _ref2.ref,
         style = _ref2.style;
@@ -141,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

@@ -1,8 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+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) { _defineProperty(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; }
 
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 
@@ -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.1.9",
+	"version": "13.3.0",
 	"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/extract-react-types/inline-dialog-props.tsx

@@ -0,0 +1,5 @@
+import { InlineDialogProps } from '../src/types';
+
+export default function InlineDialogProp(props: InlineDialogProps) {
+  return null;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/inline-dialog",
-  "version": "13.1.9",
+  "version": "13.3.0",
   "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/"
@@ -17,7 +17,6 @@
   "atlassian": {
     "team": "Design System Team",
     "deprecatedAutoEntryPoints": true,
-    "inPublicMirror": true,
     "releaseModel": "scheduled",
     "website": {
       "name": "Inline dialog"
@@ -25,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.0.0",
-    "@atlaskit/tokens": "^0.4.0",
+    "@atlaskit/theme": "^12.1.0",
+    "@atlaskit/tokens": "^0.6.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9",
     "bind-event-listener": "^1.0.2",
@@ -38,11 +37,10 @@
     "react": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/build-utils": "*",
     "@atlaskit/button": "^16.1.0",
     "@atlaskit/datetime-picker": "^11.1.0",
     "@atlaskit/docs": "*",
-    "@atlaskit/icon": "^21.9.0",
+    "@atlaskit/icon": "^21.10.0",
     "@atlaskit/modal-dialog": "^12.2.0",
     "@atlaskit/section-message": "^6.1.0",
     "@atlaskit/select": "^15.0.0",
@@ -51,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",