@atlaskit/modal-dialog 12.5.7 → 12.6.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/modal-dialog
 
+## 12.6.1
+
+### Patch Changes
+
+- [`b6b02e57520`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b6b02e57520) - Restore support for foreground modal
+
+## 12.6.0
+
+### Minor Changes
+
+- [`26388cfdd23`](https://bitbucket.org/atlassian/atlassian-frontend/commits/26388cfdd23) - Adds `label` prop for users of assistive technology to receive more context when using the modal.
+
 ## 12.5.7
 
 ### Patch Changes

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

@@ -87,6 +87,7 @@ var ModalDialog = function ModalDialog(props) {
     onOpenComplete = props.onOpenComplete,
     height = props.height,
     children = props.children,
+    label = props.label,
     testId = props.testId;
   var id = (0, _reactUid.useUID)();
   var titleId = "modal-dialog-title-".concat(id);
@@ -120,6 +121,7 @@ var ModalDialog = function ModalDialog(props) {
     onFinish: onMotionFinish
   }, function (bottomFadeInProps) {
     return (0, _react2.jsx)(_focusRing.default, null, (0, _react2.jsx)("section", (0, _extends2.default)({}, bottomFadeInProps, {
+      "aria-label": label,
       ref: (0, _mergeRefs.default)([bottomFadeInProps.ref, motionRef]),
       style: {
         '--modal-dialog-width': (0, _utils.dialogWidth)(width),
@@ -127,7 +129,7 @@ var ModalDialog = function ModalDialog(props) {
       },
       css: [dialogStyles, shouldScrollInViewport ? viewportScrollStyles : bodyScrollStyles],
       role: "dialog",
-      "aria-labelledby": titleId,
+      "aria-labelledby": label ? undefined : titleId,
       "data-testid": testId,
       "data-modal-stack": stackIndex,
       tabIndex: -1,

package/dist/cjs/modal-wrapper.js

@@ -71,6 +71,7 @@ var ModalWrapper = function ModalWrapper(props) {
     width = props.width,
     onCloseComplete = props.onCloseComplete,
     onOpenComplete = props.onOpenComplete,
+    label = props.label,
     testId = props.testId;
   var calculatedStackIndex = (0, _useModalStack.default)({
     onStackChange: onStackChange
@@ -85,7 +86,7 @@ var ModalWrapper = function ModalWrapper(props) {
     action: 'closed',
     componentName: 'modalDialog',
     packageName: "@atlaskit/modal-dialog",
-    packageVersion: "12.5.7"
+    packageVersion: "12.6.1"
   });
   var onBlanketClicked = (0, _react.useCallback)(function (e) {
     if (shouldCloseOnOverlayClick) {
@@ -103,6 +104,7 @@ var ModalWrapper = function ModalWrapper(props) {
     testId: testId && "".concat(testId, "--blanket")
   }, (0, _react2.jsx)(_modalDialog.default, {
     testId: testId,
+    label: label,
     autoFocus: autoFocus,
     stackIndex: stackIndex,
     onClose: onCloseHandler,
@@ -120,6 +122,7 @@ var ModalWrapper = function ModalWrapper(props) {
       "aria-hidden": !isForeground
     }), (0, _react2.jsx)(_reactFocusLock.default, {
       autoFocus: autoFocusLock,
+      disabled: !isForeground,
       returnFocus: true,
       whiteList: whiteListElements
     }, (0, _react2.jsx)(_reactScrolllock.default, null), shouldScrollInViewport ? (0, _react2.jsx)(_reactScrolllock.TouchScrollable, null, modalDialogWithBlanket) : modalDialogWithBlanket));

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/modal-dialog",
-	"version": "12.5.7",
+	"version": "12.6.1",
 	"sideEffects": false
 }

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

@@ -76,6 +76,7 @@ const ModalDialog = props => {
     onOpenComplete,
     height,
     children,
+    label,
     testId
   } = props;
   const id = useUID();
@@ -104,6 +105,7 @@ const ModalDialog = props => {
     entranceDirection: "bottom",
     onFinish: onMotionFinish
   }, bottomFadeInProps => jsx(FocusRing, null, jsx("section", _extends({}, bottomFadeInProps, {
+    "aria-label": label,
     ref: mergeRefs([bottomFadeInProps.ref, motionRef]),
     style: {
       '--modal-dialog-width': dialogWidth(width),
@@ -111,7 +113,7 @@ const ModalDialog = props => {
     },
     css: [dialogStyles, shouldScrollInViewport ? viewportScrollStyles : bodyScrollStyles],
     role: "dialog",
-    "aria-labelledby": titleId,
+    "aria-labelledby": label ? undefined : titleId,
     "data-testid": testId,
     "data-modal-stack": stackIndex,
     tabIndex: -1,

package/dist/es2019/modal-wrapper.js

@@ -56,6 +56,7 @@ const ModalWrapper = props => {
     width,
     onCloseComplete,
     onOpenComplete,
+    label,
     testId
   } = props;
   const calculatedStackIndex = useModalStack({
@@ -71,7 +72,7 @@ const ModalWrapper = props => {
     action: 'closed',
     componentName: 'modalDialog',
     packageName: "@atlaskit/modal-dialog",
-    packageVersion: "12.5.7"
+    packageVersion: "12.6.1"
   });
   const onBlanketClicked = useCallback(e => {
     if (shouldCloseOnOverlayClick) {
@@ -89,6 +90,7 @@ const ModalWrapper = props => {
     testId: testId && `${testId}--blanket`
   }, jsx(ModalDialog, {
     testId: testId,
+    label: label,
     autoFocus: autoFocus,
     stackIndex: stackIndex,
     onClose: onCloseHandler,
@@ -105,6 +107,7 @@ const ModalWrapper = props => {
     "aria-hidden": !isForeground
   }), jsx(FocusLock, {
     autoFocus: autoFocusLock,
+    disabled: !isForeground,
     returnFocus: true,
     whiteList: whiteListElements
   }, jsx(ScrollLock, null), shouldScrollInViewport ? jsx(TouchScrollable, null, modalDialogWithBlanket) : modalDialogWithBlanket))));

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/modal-dialog",
-	"version": "12.5.7",
+	"version": "12.6.1",
 	"sideEffects": false
 }

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

@@ -79,6 +79,7 @@ var ModalDialog = function ModalDialog(props) {
     onOpenComplete = props.onOpenComplete,
     height = props.height,
     children = props.children,
+    label = props.label,
     testId = props.testId;
   var id = useUID();
   var titleId = "modal-dialog-title-".concat(id);
@@ -112,6 +113,7 @@ var ModalDialog = function ModalDialog(props) {
     onFinish: onMotionFinish
   }, function (bottomFadeInProps) {
     return jsx(FocusRing, null, jsx("section", _extends({}, bottomFadeInProps, {
+      "aria-label": label,
       ref: mergeRefs([bottomFadeInProps.ref, motionRef]),
       style: {
         '--modal-dialog-width': dialogWidth(width),
@@ -119,7 +121,7 @@ var ModalDialog = function ModalDialog(props) {
       },
       css: [dialogStyles, shouldScrollInViewport ? viewportScrollStyles : bodyScrollStyles],
       role: "dialog",
-      "aria-labelledby": titleId,
+      "aria-labelledby": label ? undefined : titleId,
       "data-testid": testId,
       "data-modal-stack": stackIndex,
       tabIndex: -1,

package/dist/esm/modal-wrapper.js

@@ -61,6 +61,7 @@ var ModalWrapper = function ModalWrapper(props) {
     width = props.width,
     onCloseComplete = props.onCloseComplete,
     onOpenComplete = props.onOpenComplete,
+    label = props.label,
     testId = props.testId;
   var calculatedStackIndex = useModalStack({
     onStackChange: onStackChange
@@ -75,7 +76,7 @@ var ModalWrapper = function ModalWrapper(props) {
     action: 'closed',
     componentName: 'modalDialog',
     packageName: "@atlaskit/modal-dialog",
-    packageVersion: "12.5.7"
+    packageVersion: "12.6.1"
   });
   var onBlanketClicked = useCallback(function (e) {
     if (shouldCloseOnOverlayClick) {
@@ -93,6 +94,7 @@ var ModalWrapper = function ModalWrapper(props) {
     testId: testId && "".concat(testId, "--blanket")
   }, jsx(ModalDialog, {
     testId: testId,
+    label: label,
     autoFocus: autoFocus,
     stackIndex: stackIndex,
     onClose: onCloseHandler,
@@ -110,6 +112,7 @@ var ModalWrapper = function ModalWrapper(props) {
       "aria-hidden": !isForeground
     }), jsx(FocusLock, {
       autoFocus: autoFocusLock,
+      disabled: !isForeground,
       returnFocus: true,
       whiteList: whiteListElements
     }, jsx(ScrollLock, null), shouldScrollInViewport ? jsx(TouchScrollable, null, modalDialogWithBlanket) : modalDialogWithBlanket));

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/modal-dialog",
-	"version": "12.5.7",
+	"version": "12.6.1",
 	"sideEffects": false
 }

package/dist/types/types.d.ts

@@ -70,6 +70,13 @@ export interface ModalDialogProps {
      * This offsets the modal dialogs vertical position.
      */
     stackIndex?: number;
+    /**
+     * The label of the modal dialog that is announced to users of assistive
+     * technology. This should only be used if there is no modal title being
+     * associated to your modal, either via using the modal title component or the
+     * `titleId` prop within the `useModal` context.
+     */
+    label?: string;
     /**
      * 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,

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

@@ -70,6 +70,13 @@ export interface ModalDialogProps {
      * This offsets the modal dialogs vertical position.
      */
     stackIndex?: number;
+    /**
+     * The label of the modal dialog that is announced to users of assistive
+     * technology. This should only be used if there is no modal title being
+     * associated to your modal, either via using the modal title component or the
+     * `titleId` prop within the `useModal` context.
+     */
+    label?: string;
     /**
      * 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,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/modal-dialog",
-  "version": "12.5.7",
+  "version": "12.6.1",
   "description": "A modal dialog displays content that requires user interaction, in a layer above the page.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -35,7 +35,7 @@
   "atlaskit:src": "src/index.tsx",
   "atlassian": {
     "team": "Design System Team",
-    "releaseModel": "scheduled",
+    "releaseModel": "continuous",
     "website": {
       "name": "Modal dialog",
       "category": "Components"

package/report.api.md

@@ -55,6 +55,7 @@ export interface ModalDialogProps {
   children?: React_2.ReactNode;
   height?: number | string;
   isBlanketHidden?: boolean;
+  label?: string;
   onClose?: OnCloseHandler;
   onCloseComplete?: OnCloseCompleteHandler;
   onOpenComplete?: OnOpenCompleteHandler;

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

@@ -0,0 +1,113 @@
+## 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;
+    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)
+
+```