@atlaskit/modal-dialog 12.9.1 → 12.10.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/modal-dialog
 
+## 12.10.1
+
+### Patch Changes
+
+- [#58698](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/58698) [`222c15fb9a38`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/222c15fb9a38) - Modal gutter is now 64px instead of 60px. This means the modal now displays slightly lower than before and will be slightly more inset when at max width/height.
+
+## 12.10.0
+
+### Minor Changes
+
+- [#57627](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/57627) [`bef9748d9db2`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/bef9748d9db2) - [ux] We are testing default return focus on modal close behind a feature flag. This change returns focus to the element which triggered the modal to open. If this fix is successful, it will be available in a later release.
+
 ## 12.9.1
 
 ### Patch Changes

package/dist/cjs/internal/constants.js

@@ -16,7 +16,7 @@ var width = exports.width = {
   },
   defaultValue: 'medium'
 };
-var gutter = exports.gutter = 60;
+var gutter = exports.gutter = 64;
 var gridSize = (0, _constants.gridSize)();
 var borderRadius = exports.borderRadius = (0, _constants.borderRadius)();
 var verticalOffset = exports.verticalOffset = gridSize * 2;

package/dist/cjs/modal-wrapper.js

@@ -87,7 +87,7 @@ var ModalWrapper = function ModalWrapper(props) {
     action: 'closed',
     componentName: 'modalDialog',
     packageName: "@atlaskit/modal-dialog",
-    packageVersion: "12.9.1"
+    packageVersion: "12.10.1"
   });
   var onBlanketClicked = (0, _react.useCallback)(function (e) {
     if (shouldCloseOnOverlayClick) {
@@ -134,7 +134,7 @@ var ModalWrapper = function ModalWrapper(props) {
       "aria-hidden": !isForeground
     }), (0, _react2.jsx)(_reactFocusLock.default, {
       autoFocus: autoFocusLock,
-      disabled: !isForeground,
+      disabled: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.multiple-modal-inappropriate-focus_z5u4j') ? undefined : !isForeground,
       returnFocus: returnFocus,
       onDeactivation: onDeactivation,
       whiteList: whiteListElements

package/dist/es2019/internal/constants.js

@@ -12,7 +12,7 @@ export const width = {
   },
   defaultValue: 'medium'
 };
-export const gutter = 60;
+export const gutter = 64;
 const gridSize = getGridSize();
 export const borderRadius = getBorderRadius();
 export const verticalOffset = gridSize * 2;

package/dist/es2019/modal-wrapper.js

@@ -72,7 +72,7 @@ const ModalWrapper = props => {
     action: 'closed',
     componentName: 'modalDialog',
     packageName: "@atlaskit/modal-dialog",
-    packageVersion: "12.9.1"
+    packageVersion: "12.10.1"
   });
   const onBlanketClicked = useCallback(e => {
     if (shouldCloseOnOverlayClick) {
@@ -118,7 +118,7 @@ const ModalWrapper = props => {
     "aria-hidden": !isForeground
   }), jsx(FocusLock, {
     autoFocus: autoFocusLock,
-    disabled: !isForeground,
+    disabled: getBooleanFF('platform.design-system-team.multiple-modal-inappropriate-focus_z5u4j') ? undefined : !isForeground,
     returnFocus: returnFocus,
     onDeactivation: onDeactivation,
     whiteList: whiteListElements

package/dist/esm/internal/constants.js

@@ -12,7 +12,7 @@ export var width = {
   },
   defaultValue: 'medium'
 };
-export var gutter = 60;
+export var gutter = 64;
 var gridSize = getGridSize();
 export var borderRadius = getBorderRadius();
 export var verticalOffset = gridSize * 2;

package/dist/esm/modal-wrapper.js

@@ -77,7 +77,7 @@ var ModalWrapper = function ModalWrapper(props) {
     action: 'closed',
     componentName: 'modalDialog',
     packageName: "@atlaskit/modal-dialog",
-    packageVersion: "12.9.1"
+    packageVersion: "12.10.1"
   });
   var onBlanketClicked = useCallback(function (e) {
     if (shouldCloseOnOverlayClick) {
@@ -124,7 +124,7 @@ var ModalWrapper = function ModalWrapper(props) {
       "aria-hidden": !isForeground
     }), jsx(FocusLock, {
       autoFocus: autoFocusLock,
-      disabled: !isForeground,
+      disabled: getBooleanFF('platform.design-system-team.multiple-modal-inappropriate-focus_z5u4j') ? undefined : !isForeground,
       returnFocus: returnFocus,
       onDeactivation: onDeactivation,
       whiteList: whiteListElements

package/dist/types/internal/constants.d.ts

@@ -8,7 +8,7 @@ interface Width {
     defaultValue: string;
 }
 export declare const width: Width;
-export declare const gutter = 60;
+export declare const gutter = 64;
 export declare const borderRadius: number;
 export declare const verticalOffset: number;
 export declare const padding: number;

package/dist/types/types.d.ts

@@ -62,9 +62,10 @@ export interface ModalDialogProps {
      */
     shouldCloseOnEscapePress?: boolean;
     /**
-     * ReturnFocus is used to control what happens when the user exists
-     * focus lock mode. If true, focus will be returned to the element that had focus before focus lock
+     * ReturnFocus controls what happens when the user exits
+     * focus lock mode. If true, focus returns to the element that had focus before focus lock
      * was activated. If false, focus remains where it was when the FocusLock was deactivated.
+     * If ref is passed, focus returns to that specific ref element.
      */
     shouldReturnFocus?: boolean | RefObject<HTMLElement>;
     /**

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

@@ -8,7 +8,7 @@ interface Width {
     defaultValue: string;
 }
 export declare const width: Width;
-export declare const gutter = 60;
+export declare const gutter = 64;
 export declare const borderRadius: number;
 export declare const verticalOffset: number;
 export declare const padding: number;

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

@@ -62,9 +62,10 @@ export interface ModalDialogProps {
      */
     shouldCloseOnEscapePress?: boolean;
     /**
-     * ReturnFocus is used to control what happens when the user exists
-     * focus lock mode. If true, focus will be returned to the element that had focus before focus lock
+     * ReturnFocus controls what happens when the user exits
+     * focus lock mode. If true, focus returns to the element that had focus before focus lock
      * was activated. If false, focus remains where it was when the FocusLock was deactivated.
+     * If ref is passed, focus returns to that specific ref element.
      */
     shouldReturnFocus?: boolean | RefObject<HTMLElement>;
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/modal-dialog",
-  "version": "12.9.1",
+  "version": "12.10.1",
   "description": "A modal dialog displays content that requires user interaction, in a layer above the page.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -39,7 +39,7 @@
     "@atlaskit/motion": "^1.5.0",
     "@atlaskit/platform-feature-flags": "^0.2.0",
     "@atlaskit/portal": "^4.4.0",
-    "@atlaskit/primitives": "^1.12.0",
+    "@atlaskit/primitives": "^1.13.0",
     "@atlaskit/theme": "^12.6.0",
     "@atlaskit/tokens": "^1.29.0",
     "@babel/runtime": "^7.0.0",
@@ -131,6 +131,9 @@
     "platform.design-system-team.popup-select-close_8h15h": {
       "type": "boolean",
       "referenceOnly": "true"
+    },
+    "platform.design-system-team.multiple-modal-inappropriate-focus_z5u4j": {
+      "type": "boolean"
     }
   },
   "homepage": "https://atlassian.design/components/modal-dialog/",

package/tmp/api-report-tmp.d.ts

@@ -1,114 +0,0 @@
-## API Report File for "@atlaskit/modal-dialog"
-
-> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
-
-```ts
-
-/// <reference types="react" />
-
-import { ExitingPersistenceProps } from '@atlaskit/motion/exiting-persistence';
-import { jsx } from '@emotion/react';
-import { default as React_2 } from 'react';
-import { ReactNode } from 'react';
-import { RefObject } from 'react';
-import type { UIAnalyticsEvent } from '@atlaskit/analytics-next';
-
-// @public (undocumented)
-export type Appearance = 'danger' | 'warning';
-
-// @public (undocumented)
-export type KeyboardOrMouseEvent = KeyboardEvent | React_2.KeyboardEvent<any> | React_2.MouseEvent<any>;
-
-// @public (undocumented)
-export type ModalAttributes = {
-    testId?: ModalDialogProps['testId'];
-    titleId: string;
-    onClose?: OnCloseHandler;
-};
-
-// @public
-export const ModalBody: (props: ModalBodyProps) => jsx.JSX.Element;
-
-// @public (undocumented)
-export interface ModalBodyProps {
-    children: React_2.ReactNode;
-    testId?: string;
-}
-
-// @public (undocumented)
-export interface ModalDialogProps {
-    autoFocus?: RefObject<HTMLElement | null | undefined> | boolean;
-    children?: React_2.ReactNode;
-    height?: number | string;
-    isBlanketHidden?: boolean;
-    label?: string;
-    onClose?: OnCloseHandler;
-    onCloseComplete?: OnCloseCompleteHandler;
-    onOpenComplete?: OnOpenCompleteHandler;
-    onStackChange?: OnStackChangeHandler;
-    shouldCloseOnEscapePress?: boolean;
-    shouldCloseOnOverlayClick?: boolean;
-    shouldReturnFocus?: RefObject<HTMLElement> | boolean;
-    shouldScrollInViewport?: boolean;
-    stackIndex?: number;
-    testId?: string;
-    width?: WidthNames | number | string;
-}
-
-// @public
-export const ModalFooter: (props: ModalFooterProps) => jsx.JSX.Element;
-
-// @public (undocumented)
-export interface ModalFooterProps {
-    children?: ReactNode;
-    testId?: string;
-}
-
-// @public
-export const ModalHeader: (props: ModalHeaderProps) => jsx.JSX.Element;
-
-// @public (undocumented)
-export interface ModalHeaderProps {
-    children?: React_2.ReactNode;
-    testId?: string;
-}
-
-// @public
-export const ModalTitle: (props: ModalTitleProps) => jsx.JSX.Element;
-
-// @public (undocumented)
-export interface ModalTitleProps {
-    appearance?: Appearance;
-    children?: ReactNode;
-    isMultiline?: boolean;
-    testId?: string;
-}
-
-// @public
-export const ModalTransition: (props: Pick<ExitingPersistenceProps, 'children'>) => JSX.Element;
-
-// @public
-const ModalWrapper: (props: ModalDialogProps) => jsx.JSX.Element;
-export default ModalWrapper;
-
-// @public (undocumented)
-export type OnCloseCompleteHandler = (element: HTMLElement) => void;
-
-// @public (undocumented)
-export type OnCloseHandler = (e: KeyboardOrMouseEvent, analyticEvent: UIAnalyticsEvent) => void;
-
-// @public (undocumented)
-export type OnOpenCompleteHandler = (node: HTMLElement, isAppearing: boolean) => void;
-
-// @public (undocumented)
-export type OnStackChangeHandler = (stackIndex: number) => void;
-
-// @public (undocumented)
-export const useModal: () => ModalAttributes;
-
-// @public (undocumented)
-type WidthNames = 'large' | 'medium' | 'small' | 'x-large';
-
-// (No @packageDocumentation comment for this package)
-
-```