@atlaskit/modal-dialog 12.14.5 → 12.14.6

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/modal-dialog
 
+## 12.14.6
+
+### Patch Changes
+
+- [#122769](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/122769)
+  [`e5aebb55bcafc`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e5aebb55bcafc) -
+  [ux] This version removes `platform.design-system-team.multiple-modal-inappropriate-focus_z5u4j`
+  feature flag. Now focus returns back to trigger elements upon closing nested modals.
+
 ## 12.14.5
 
 ### Patch Changes

package/dist/cjs/internal/components/modal-dialog.js

@@ -29,8 +29,8 @@ var _positioner = _interopRequireDefault(require("./positioner"));
 var _css;
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles, @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 // reset pointer-events on iframe inside modal
 var resetPointerEventsOnIframeStyles = (0, _react2.css)({

package/dist/cjs/internal/components/positioner.js

@@ -15,8 +15,8 @@ var _constants2 = require("../constants");
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 

package/dist/cjs/internal/components/scroll-container.js

@@ -23,8 +23,8 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 

package/dist/cjs/modal-body.js

@@ -14,8 +14,8 @@ var _constants = require("./internal/constants");
 var _useScroll = _interopRequireDefault(require("./internal/hooks/use-scroll"));
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 

package/dist/cjs/modal-footer.js

@@ -9,8 +9,8 @@ var _hooks = require("./hooks");
 var _constants = require("./internal/constants");
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 

package/dist/cjs/modal-header.js

@@ -11,8 +11,8 @@ var _hooks = require("./hooks");
 var _constants = require("./internal/constants");
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 

package/dist/cjs/modal-title.js

@@ -12,8 +12,8 @@ var _hooks = require("./hooks");
 var _constants = require("./internal/constants");
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 

package/dist/cjs/modal-wrapper.js

@@ -26,8 +26,8 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
@@ -100,7 +100,7 @@ var ModalWrapper = function ModalWrapper(props) {
     action: 'closed',
     componentName: 'modalDialog',
     packageName: "@atlaskit/modal-dialog",
-    packageVersion: "12.14.5"
+    packageVersion: "12.14.6"
   });
   var onBlanketClicked = (0, _react.useCallback)(function (e) {
     if (shouldCloseOnOverlayClick) {
@@ -138,7 +138,7 @@ var ModalWrapper = function ModalWrapper(props) {
     };
   }
   return (0, _react2.jsx)(_layering.UNSAFE_LAYERING, {
-    isDisabled: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.layering_qmiw3') ? false : true
+    isDisabled: (0, _platformFeatureFlags.fg)('platform.design-system-team.layering_qmiw3') ? false : true
   }, (0, _react2.jsx)(_portal.default, {
     zIndex: _constants.layers.modal()
   }, (0, _react2.jsx)(_fadeIn.default, null, function (fadeInProps) {
@@ -147,7 +147,6 @@ var ModalWrapper = function ModalWrapper(props) {
       "aria-hidden": !isForeground
     }), (0, _react2.jsx)(_reactFocusLock.default, {
       autoFocus: autoFocusLock,
-      disabled: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.multiple-modal-inappropriate-focus_z5u4j') ? undefined : !isForeground,
       returnFocus: returnFocus,
       onDeactivation: onDeactivation,
       whiteList: function whiteList(element) {

package/dist/es2019/internal/components/modal-dialog.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 import { useMemo } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles, @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766

package/dist/es2019/internal/components/positioner.js

@@ -1,8 +1,8 @@
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';

package/dist/es2019/internal/components/scroll-container.js

@@ -1,7 +1,7 @@
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 
 import React, { forwardRef, useEffect, useRef, useState } from 'react';
 

package/dist/es2019/modal-body.js

@@ -1,7 +1,7 @@
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 
 import React from 'react';
 

package/dist/es2019/modal-footer.js

@@ -1,7 +1,7 @@
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';

package/dist/es2019/modal-header.js

@@ -1,7 +1,7 @@
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 import React from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766

package/dist/es2019/modal-title.js

@@ -1,7 +1,7 @@
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';

package/dist/es2019/modal-wrapper.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 
 import { useCallback } from 'react';
 
@@ -15,7 +15,7 @@ import Blanket from '@atlaskit/blanket';
 import noop from '@atlaskit/ds-lib/noop';
 import { UNSAFE_LAYERING } from '@atlaskit/layering';
 import FadeIn from '@atlaskit/motion/fade-in';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { fg } from '@atlaskit/platform-feature-flags';
 import Portal from '@atlaskit/portal';
 import { layers } from '@atlaskit/theme/constants';
 import ModalDialog from './internal/components/modal-dialog';
@@ -85,7 +85,7 @@ const ModalWrapper = props => {
     action: 'closed',
     componentName: 'modalDialog',
     packageName: "@atlaskit/modal-dialog",
-    packageVersion: "12.14.5"
+    packageVersion: "12.14.6"
   });
   const onBlanketClicked = useCallback(e => {
     if (shouldCloseOnOverlayClick) {
@@ -123,7 +123,7 @@ const ModalWrapper = props => {
     };
   }
   return jsx(UNSAFE_LAYERING, {
-    isDisabled: getBooleanFF('platform.design-system-team.layering_qmiw3') ? false : true
+    isDisabled: fg('platform.design-system-team.layering_qmiw3') ? false : true
   }, jsx(Portal, {
     zIndex: layers.modal()
   }, jsx(FadeIn, null, fadeInProps => jsx("div", _extends({}, fadeInProps, {
@@ -131,7 +131,6 @@ const ModalWrapper = props => {
     "aria-hidden": !isForeground
   }), jsx(FocusLock, {
     autoFocus: autoFocusLock,
-    disabled: getBooleanFF('platform.design-system-team.multiple-modal-inappropriate-focus_z5u4j') ? undefined : !isForeground,
     returnFocus: returnFocus,
     onDeactivation: onDeactivation,
     whiteList: element => allowlistElements(element, focusLockAllowlist)

package/dist/esm/internal/components/modal-dialog.js

@@ -5,8 +5,8 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _css;
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 import { useMemo } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles, @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766

package/dist/esm/internal/components/positioner.js

@@ -2,8 +2,8 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';

package/dist/esm/internal/components/scroll-container.js

@@ -2,8 +2,8 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 
 import React, { forwardRef, useEffect, useRef, useState } from 'react';
 

package/dist/esm/modal-body.js

@@ -1,7 +1,7 @@
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 
 import React from 'react';
 

package/dist/esm/modal-footer.js

@@ -1,7 +1,7 @@
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';

package/dist/esm/modal-header.js

@@ -1,7 +1,7 @@
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 import React from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766

package/dist/esm/modal-title.js

@@ -1,7 +1,7 @@
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';

package/dist/esm/modal-wrapper.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 
 import { useCallback } from 'react';
 
@@ -15,7 +15,7 @@ import Blanket from '@atlaskit/blanket';
 import noop from '@atlaskit/ds-lib/noop';
 import { UNSAFE_LAYERING } from '@atlaskit/layering';
 import FadeIn from '@atlaskit/motion/fade-in';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { fg } from '@atlaskit/platform-feature-flags';
 import Portal from '@atlaskit/portal';
 import { layers } from '@atlaskit/theme/constants';
 import ModalDialog from './internal/components/modal-dialog';
@@ -90,7 +90,7 @@ var ModalWrapper = function ModalWrapper(props) {
     action: 'closed',
     componentName: 'modalDialog',
     packageName: "@atlaskit/modal-dialog",
-    packageVersion: "12.14.5"
+    packageVersion: "12.14.6"
   });
   var onBlanketClicked = useCallback(function (e) {
     if (shouldCloseOnOverlayClick) {
@@ -128,7 +128,7 @@ var ModalWrapper = function ModalWrapper(props) {
     };
   }
   return jsx(UNSAFE_LAYERING, {
-    isDisabled: getBooleanFF('platform.design-system-team.layering_qmiw3') ? false : true
+    isDisabled: fg('platform.design-system-team.layering_qmiw3') ? false : true
   }, jsx(Portal, {
     zIndex: layers.modal()
   }, jsx(FadeIn, null, function (fadeInProps) {
@@ -137,7 +137,6 @@ var ModalWrapper = function ModalWrapper(props) {
       "aria-hidden": !isForeground
     }), jsx(FocusLock, {
       autoFocus: autoFocusLock,
-      disabled: getBooleanFF('platform.design-system-team.multiple-modal-inappropriate-focus_z5u4j') ? undefined : !isForeground,
       returnFocus: returnFocus,
       onDeactivation: onDeactivation,
       whiteList: function whiteList(element) {

package/dist/types/internal/components/positioner.d.ts

@@ -1,7 +1,7 @@
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 import { type ReactNode } from 'react';
 import { jsx } from '@emotion/react';
 interface PositionerProps {

package/dist/types/internal/components/scroll-container.d.ts

@@ -1,7 +1,7 @@
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 import React from 'react';
 interface ScrollContainerProps {
     /**

package/dist/types/modal-body.d.ts

@@ -1,7 +1,7 @@
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 import React from 'react';
 import { jsx } from '@emotion/react';
 export interface ModalBodyProps {

package/dist/types/modal-footer.d.ts

@@ -1,7 +1,7 @@
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 import { type ReactNode } from 'react';
 import { jsx } from '@emotion/react';
 export interface ModalFooterProps {

package/dist/types/modal-header.d.ts

@@ -1,7 +1,7 @@
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 import React from 'react';
 import { jsx } from '@emotion/react';
 export interface ModalHeaderProps {

package/dist/types/modal-title.d.ts

@@ -1,7 +1,7 @@
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 import { type ReactNode } from 'react';
 import { jsx } from '@emotion/react';
 import { type Appearance } from './types';

package/dist/types/modal-wrapper.d.ts

@@ -1,7 +1,7 @@
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 import { jsx } from '@emotion/react';
 import type { ModalDialogProps } from './types';
 export type { ModalDialogProps };

package/dist/types/types.d.ts

@@ -25,7 +25,6 @@ export interface ModalDialogProps {
     /**
      * Callback function which lets you allowlist nodes so they can be interacted with outside of the focus lock.
      * Return `true` if focus lock should handle element, `false` if not.
-     * Works when `platform.design-system-team.multiple-modal-inappropriate-focus_z5u4j` feature flag is enabled.
      */
     focusLockAllowlist?: (element: HTMLElement) => boolean;
     /**
@@ -79,8 +78,10 @@ export interface ModalDialogProps {
      */
     isBlanketHidden?: boolean;
     /**
-     * Number representing where in the stack of modals this modal sits.
-     * This offsets the modal dialogs vertical position.
+     * The stackIndex is a reference to the position (index) of the calling dialog in a modal dialog stack.
+     * New modals added to the stack receive the highest stack index of 0. As more modals are added to the stack, their index is dynamically increased according to their new position.
+     * Don't alter the modal stack position using `stackIndex` in implementations of third-party libraries (e.g. AUI modal), it may lead to unpredictable bugs, especially if the third party library has its own focus lock.
+     * Additionally, each modal in the stack gets a vertical offset based on `stackIndex` value.
      */
     stackIndex?: number;
     /**

package/dist/types-ts4.5/internal/components/positioner.d.ts

@@ -1,7 +1,7 @@
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 import { type ReactNode } from 'react';
 import { jsx } from '@emotion/react';
 interface PositionerProps {

package/dist/types-ts4.5/internal/components/scroll-container.d.ts

@@ -1,7 +1,7 @@
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 import React from 'react';
 interface ScrollContainerProps {
     /**

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

@@ -1,7 +1,7 @@
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 import React from 'react';
 import { jsx } from '@emotion/react';
 export interface ModalBodyProps {

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

@@ -1,7 +1,7 @@
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 import { type ReactNode } from 'react';
 import { jsx } from '@emotion/react';
 export interface ModalFooterProps {

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

@@ -1,7 +1,7 @@
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 import React from 'react';
 import { jsx } from '@emotion/react';
 export interface ModalHeaderProps {

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

@@ -1,7 +1,7 @@
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 import { type ReactNode } from 'react';
 import { jsx } from '@emotion/react';
 import { type Appearance } from './types';

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

@@ -1,7 +1,7 @@
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 import { jsx } from '@emotion/react';
 import type { ModalDialogProps } from './types';
 export type { ModalDialogProps };

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

@@ -25,7 +25,6 @@ export interface ModalDialogProps {
     /**
      * Callback function which lets you allowlist nodes so they can be interacted with outside of the focus lock.
      * Return `true` if focus lock should handle element, `false` if not.
-     * Works when `platform.design-system-team.multiple-modal-inappropriate-focus_z5u4j` feature flag is enabled.
      */
     focusLockAllowlist?: (element: HTMLElement) => boolean;
     /**
@@ -79,8 +78,10 @@ export interface ModalDialogProps {
      */
     isBlanketHidden?: boolean;
     /**
-     * Number representing where in the stack of modals this modal sits.
-     * This offsets the modal dialogs vertical position.
+     * The stackIndex is a reference to the position (index) of the calling dialog in a modal dialog stack.
+     * New modals added to the stack receive the highest stack index of 0. As more modals are added to the stack, their index is dynamically increased according to their new position.
+     * Don't alter the modal stack position using `stackIndex` in implementations of third-party libraries (e.g. AUI modal), it may lead to unpredictable bugs, especially if the third party library has its own focus lock.
+     * Additionally, each modal in the stack gets a vertical offset based on `stackIndex` value.
      */
     stackIndex?: number;
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/modal-dialog",
-	"version": "12.14.5",
+	"version": "12.14.6",
 	"description": "A modal dialog displays content that requires user interaction, in a layer above the page.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -42,7 +42,7 @@
 		"@atlaskit/portal": "^4.6.0",
 		"@atlaskit/primitives": "^11.0.0",
 		"@atlaskit/theme": "^12.11.0",
-		"@atlaskit/tokens": "^1.53.0",
+		"@atlaskit/tokens": "^1.56.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"bind-event-listener": "^3.0.0",
@@ -135,9 +135,6 @@
 			"type": "boolean",
 			"referenceOnly": "true"
 		},
-		"platform.design-system-team.multiple-modal-inappropriate-focus_z5u4j": {
-			"type": "boolean"
-		},
 		"platform.design-system-team.iframe_gojiv": {
 			"type": "boolean"
 		},

package/extract-react-types/modal-attributes.tsx

@@ -1,5 +0,0 @@
-import { type ModalAttributes } from '../src/internal/context';
-
-export default function ModalAttributesFunction(props: ModalAttributes) {
-	return null;
-}