@atlaskit/inline-dialog 17.0.2 → 17.1.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/inline-dialog
 
+## 17.1.0
+
+### Minor Changes
+
+- [#152852](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/152852)
+  [`ae720e711e4d2`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ae720e711e4d2) -
+  Adds `fallbackPlacements` prop for specifying a list of backup placements to try when the main
+  `placement` does not have enough space. This matches the API of `Popup`.
+
 ## 17.0.2
 
 ### Patch Changes

package/dist/cjs/InlineDialog/index.js

@@ -68,7 +68,8 @@ var InlineDialog = /*#__PURE__*/(0, _react.memo)(function InlineDialog(_ref2) {
     strategy = _ref2$strategy === void 0 ? 'fixed' : _ref2$strategy,
     testId = _ref2.testId,
     content = _ref2.content,
-    children = _ref2.children;
+    children = _ref2.children,
+    fallbackPlacements = _ref2.fallbackPlacements;
   var containerRef = (0, _react.useRef)(null);
   var triggerRef = (0, _react.useRef)(null);
   var onClose = (0, _analyticsNext.usePlatformLeafEventHandler)({
@@ -78,7 +79,7 @@ var InlineDialog = /*#__PURE__*/(0, _react.memo)(function InlineDialog(_ref2) {
     action: 'closed',
     componentName: 'inlineDialog',
     packageName: "@atlaskit/inline-dialog",
-    packageVersion: "17.0.2"
+    packageVersion: "17.1.0"
   });
 
   // we put this into a ref to avoid handleCloseRequest having this as a dependency
@@ -133,9 +134,25 @@ var InlineDialog = /*#__PURE__*/(0, _react.memo)(function InlineDialog(_ref2) {
     }
     handleCloseRequest(event);
   }, [handleCloseRequest, containerRef, triggerRef]);
+
+  /**
+   * Auto-flip is enabled by default in `@atlaskit/popper` and
+   * the `InlineDialog` API does not allow disabling it.
+   *
+   * We only need to override it if there are `fallbackPlacements` specified.
+   */
+  var modifiers = (0, _react.useMemo)(function () {
+    return fallbackPlacements ? [{
+      name: 'flip',
+      options: {
+        fallbackPlacements: fallbackPlacements
+      }
+    }] : [];
+  }, [fallbackPlacements]);
   var popper = isOpen ? /*#__PURE__*/_react.default.createElement(_popper.Popper, {
     placement: placement,
-    strategy: strategy
+    strategy: strategy,
+    modifiers: modifiers
   }, function (_ref3) {
     var _ref4 = _ref3.ref,
       style = _ref3.style;
@@ -169,7 +186,6 @@ var InlineDialog = /*#__PURE__*/(0, _react.memo)(function InlineDialog(_ref2) {
         } else {
           ref.current = node;
         }
-        // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
       },
       hasNodeResolver: !(0, _platformFeatureFlags.fg)('platform_design_system_team_portal_logic_r18_fix')
     }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children));

package/dist/es2019/InlineDialog/index.js

@@ -1,4 +1,4 @@
-import React, { memo, useCallback, useEffect, useRef } from 'react';
+import React, { memo, useCallback, useEffect, useMemo, useRef } from 'react';
 import { bind } from 'bind-event-listener';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
 import noop from '@atlaskit/ds-lib/noop';
@@ -53,7 +53,8 @@ const InlineDialog = /*#__PURE__*/memo(function InlineDialog({
   strategy = 'fixed',
   testId,
   content,
-  children
+  children,
+  fallbackPlacements
 }) {
   const containerRef = useRef(null);
   const triggerRef = useRef(null);
@@ -62,7 +63,7 @@ const InlineDialog = /*#__PURE__*/memo(function InlineDialog({
     action: 'closed',
     componentName: 'inlineDialog',
     packageName: "@atlaskit/inline-dialog",
-    packageVersion: "17.0.2"
+    packageVersion: "17.1.0"
   });
 
   // we put this into a ref to avoid handleCloseRequest having this as a dependency
@@ -119,9 +120,23 @@ const InlineDialog = /*#__PURE__*/memo(function InlineDialog({
     }
     handleCloseRequest(event);
   }, [handleCloseRequest, containerRef, triggerRef]);
+
+  /**
+   * Auto-flip is enabled by default in `@atlaskit/popper` and
+   * the `InlineDialog` API does not allow disabling it.
+   *
+   * We only need to override it if there are `fallbackPlacements` specified.
+   */
+  const modifiers = useMemo(() => fallbackPlacements ? [{
+    name: 'flip',
+    options: {
+      fallbackPlacements
+    }
+  }] : [], [fallbackPlacements]);
   const popper = isOpen ? /*#__PURE__*/React.createElement(Popper, {
     placement: placement,
-    strategy: strategy
+    strategy: strategy,
+    modifiers: modifiers
   }, ({
     ref,
     style
@@ -154,7 +169,6 @@ const InlineDialog = /*#__PURE__*/memo(function InlineDialog({
       } else {
         ref.current = node;
       }
-      // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
     },
     hasNodeResolver: !fg('platform_design_system_team_portal_logic_r18_fix')
   }, /*#__PURE__*/React.createElement(React.Fragment, null, children))), isOpen ? /*#__PURE__*/React.createElement(Layering, {

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

@@ -36,7 +36,6 @@ export const Container = /*#__PURE__*/forwardRef(({
       [CSS_THEME_COLOR]: `var(--ds-text, ${N900})`,
       [CSS_THEME_BOX_SHADOW]: `var(--ds-shadow-overlay, ${`0 4px 8px -2px ${N50A}, 0 0 1px ${N60A}`})`,
       ...style
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     },
     className: ax(["_11q7gluh _2rko1sit _vchh1ntv _p12flti4 _c71llti4 _1pbyowjs _16qs1r44 _syazjslb _85i5pxbi _1q51pxbi _y4ti1ejb _bozg1ejb _nt751r31 _49pcglyw _1hvw1o36"])
   }, typeof children === 'function' ? children() : children);

package/dist/esm/InlineDialog/index.js

@@ -1,4 +1,4 @@
-import React, { memo, useCallback, useEffect, useRef } from 'react';
+import React, { memo, useCallback, useEffect, useMemo, useRef } from 'react';
 import { bind } from 'bind-event-listener';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
 import noop from '@atlaskit/ds-lib/noop';
@@ -58,7 +58,8 @@ var InlineDialog = /*#__PURE__*/memo(function InlineDialog(_ref2) {
     strategy = _ref2$strategy === void 0 ? 'fixed' : _ref2$strategy,
     testId = _ref2.testId,
     content = _ref2.content,
-    children = _ref2.children;
+    children = _ref2.children,
+    fallbackPlacements = _ref2.fallbackPlacements;
   var containerRef = useRef(null);
   var triggerRef = useRef(null);
   var onClose = usePlatformLeafEventHandler({
@@ -68,7 +69,7 @@ var InlineDialog = /*#__PURE__*/memo(function InlineDialog(_ref2) {
     action: 'closed',
     componentName: 'inlineDialog',
     packageName: "@atlaskit/inline-dialog",
-    packageVersion: "17.0.2"
+    packageVersion: "17.1.0"
   });
 
   // we put this into a ref to avoid handleCloseRequest having this as a dependency
@@ -123,9 +124,25 @@ var InlineDialog = /*#__PURE__*/memo(function InlineDialog(_ref2) {
     }
     handleCloseRequest(event);
   }, [handleCloseRequest, containerRef, triggerRef]);
+
+  /**
+   * Auto-flip is enabled by default in `@atlaskit/popper` and
+   * the `InlineDialog` API does not allow disabling it.
+   *
+   * We only need to override it if there are `fallbackPlacements` specified.
+   */
+  var modifiers = useMemo(function () {
+    return fallbackPlacements ? [{
+      name: 'flip',
+      options: {
+        fallbackPlacements: fallbackPlacements
+      }
+    }] : [];
+  }, [fallbackPlacements]);
   var popper = isOpen ? /*#__PURE__*/React.createElement(Popper, {
     placement: placement,
-    strategy: strategy
+    strategy: strategy,
+    modifiers: modifiers
   }, function (_ref3) {
     var _ref4 = _ref3.ref,
       style = _ref3.style;
@@ -159,7 +176,6 @@ var InlineDialog = /*#__PURE__*/memo(function InlineDialog(_ref2) {
         } else {
           ref.current = node;
         }
-        // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
       },
       hasNodeResolver: !fg('platform_design_system_team_portal_logic_r18_fix')
     }, /*#__PURE__*/React.createElement(React.Fragment, null, children));

package/dist/types/types.d.ts

@@ -46,4 +46,11 @@ export interface InlineDialogProps extends WithAnalyticsEventsProps {
      * 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
      */
     testId?: string;
+    /**
+     * This is a list of backup placements to try.
+     * When the preferred placement doesn't have enough space,
+     * the modifier will test the ones provided in the list, and use the first suitable one.
+     * If no fallback placements are suitable, it reverts back to the original placement.
+     */
+    fallbackPlacements?: Placement[];
 }

package/dist/types-ts4.5/types.d.ts

@@ -46,4 +46,11 @@ export interface InlineDialogProps extends WithAnalyticsEventsProps {
      * 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
      */
     testId?: string;
+    /**
+     * This is a list of backup placements to try.
+     * When the preferred placement doesn't have enough space,
+     * the modifier will test the ones provided in the list, and use the first suitable one.
+     * If no fallback placements are suitable, it reverts back to the original placement.
+     */
+    fallbackPlacements?: Placement[];
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/inline-dialog",
-	"version": "17.0.2",
+	"version": "17.1.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/"
@@ -42,11 +42,11 @@
 		"@atlaskit/analytics-next": "^11.0.0",
 		"@atlaskit/css": "^0.10.0",
 		"@atlaskit/ds-lib": "^4.0.0",
-		"@atlaskit/layering": "^2.0.0",
+		"@atlaskit/layering": "^2.1.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/popper": "^7.0.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tokens": "^4.5.0",
+		"@atlaskit/tokens": "^4.8.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.18.3",
 		"bind-event-listener": "^3.0.0",
@@ -56,19 +56,19 @@
 		"react": "^18.2.0"
 	},
 	"devDependencies": {
-		"@af/accessibility-testing": "^2.0.0",
-		"@af/integration-testing": "^0.5.0",
-		"@af/visual-regression": "^1.3.0",
-		"@atlaskit/button": "^21.1.0",
-		"@atlaskit/datetime-picker": "^16.2.0",
+		"@af/accessibility-testing": "workspace:^",
+		"@af/integration-testing": "workspace:^",
+		"@af/visual-regression": "workspace:^",
+		"@atlaskit/button": "^23.0.0",
+		"@atlaskit/datetime-picker": "^17.0.0",
 		"@atlaskit/docs": "^10.0.0",
-		"@atlaskit/dropdown-menu": "^13.0.0",
-		"@atlaskit/link": "^3.0.0",
-		"@atlaskit/modal-dialog": "^13.4.0",
-		"@atlaskit/primitives": "^14.2.0",
+		"@atlaskit/dropdown-menu": "^14.2.0",
+		"@atlaskit/link": "^3.1.0",
+		"@atlaskit/modal-dialog": "^14.2.0",
+		"@atlaskit/primitives": "^14.7.0",
 		"@atlaskit/section-message": "^8.2.0",
-		"@atlaskit/select": "^20.0.0",
-		"@atlaskit/ssr": "^0.4.0",
+		"@atlaskit/select": "^20.4.0",
+		"@atlassian/ssr-tests": "^0.2.0",
 		"@testing-library/react": "^13.4.0",
 		"@types/react-node-resolver": "^2.0.0",
 		"react-dom": "^18.2.0",