@atlaskit/modal-dialog 12.2.13 → 12.3.0

package/dist/es2019/modal-wrapper.js

@@ -25,6 +25,22 @@ const fillScreenStyles = css({
   WebkitOverflowScrolling: 'touch'
 });
 
+const whiteListElements = element => {
+  // allows focus to reach elements outside the modal if they contain the data-atlas-extension attribute
+  return !element.hasAttribute('data-atlas-extension');
+};
+/**
+ * __Modal wrapper__
+ *
+ * A modal wrapper displays content that requires user interaction, in a layer above the page.
+ * This component is primary container for other modal components.
+ *
+ * - [Examples](https://atlassian.design/components/modal-dialog/examples)
+ * - [Code](https://atlassian.design/components/modal-dialog/code)
+ * - [Usage](https://atlassian.design/components/modal-dialog/usage)
+ */
+
+
 const ModalWrapper = props => {
   const {
     autoFocus = true,
@@ -35,8 +51,12 @@ const ModalWrapper = props => {
     onClose = noop,
     onStackChange = noop,
     isBlanketHidden,
-    testId,
-    ...modalDialogProps
+    children,
+    height,
+    width,
+    onCloseComplete,
+    onOpenComplete,
+    testId
   } = props;
   const calculatedStackIndex = useModalStack({
     onStackChange
@@ -50,7 +70,7 @@ const ModalWrapper = props => {
     action: 'closed',
     componentName: 'modalDialog',
     packageName: "@atlaskit/modal-dialog",
-    packageVersion: "12.2.13"
+    packageVersion: "12.3.0"
   });
   const onBlanketClicked = useCallback(e => {
     if (shouldCloseOnOverlayClick) {
@@ -66,13 +86,17 @@ const ModalWrapper = props => {
     isTinted: !isBlanketHidden,
     onBlanketClicked: onBlanketClicked,
     testId: testId && `${testId}--blanket`
-  }, jsx(ModalDialog, _extends({
+  }, jsx(ModalDialog, {
     testId: testId,
     autoFocus: autoFocus,
     stackIndex: stackIndex,
     onClose: onCloseHandler,
-    shouldScrollInViewport: shouldScrollInViewport
-  }, modalDialogProps)));
+    shouldScrollInViewport: shouldScrollInViewport,
+    height: height,
+    width: width,
+    onCloseComplete: onCloseComplete,
+    onOpenComplete: onOpenComplete
+  }, children));
   return jsx(Portal, {
     zIndex: layers.modal()
   }, jsx(FadeIn, null, fadeInProps => jsx("div", _extends({}, fadeInProps, {
@@ -81,7 +105,8 @@ const ModalWrapper = props => {
   }), jsx(FocusLock, {
     autoFocus: autoFocusLock,
     disabled: !isForeground,
-    returnFocus: true
+    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.2.13",
+	"version": "12.3.0",
 	"sideEffects": false
 }

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

@@ -128,6 +128,7 @@ var ModalDialog = function ModalDialog(props) {
       "aria-modal": true
     }), children));
   }))));
-};
+}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 
 export default ModalDialog;

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

@@ -44,9 +44,11 @@ var stackTransitionStyles = css({
   transitionProperty: 'transform',
   transitionTimingFunction: easeInOut,
 
-  /** Duplicated from @atlaskit/motion/accessibility
+  /**
+   * Duplicated from @atlaskit/motion/accessibility
    * because @repo/internal/styles/consistent-style-ordering
-   * doesn't work well with object spreading. */
+   * doesn't work well with object spreading.
+   */
   '@media (prefers-reduced-motion: reduce)': {
     animation: 'none',
     transition: 'none'
@@ -73,6 +75,7 @@ var Positioner = function Positioner(props) {
     stackIndex > 0 ? stackTransformStyles : stackIdleStyles, shouldScrollInViewport ? viewportScrollStyles : bodyScrollStyles],
     "data-testid": testId && "".concat(testId, "--positioner")
   }, children);
-};
+}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 
 export default Positioner;

package/dist/esm/internal/context.js

@@ -1,3 +1,4 @@
+/* eslint-disable @repo/internal/react/require-jsdoc */
 import { createContext } from 'react';
 export var ModalContext = /*#__PURE__*/createContext(null);
 export var ScrollContext = /*#__PURE__*/createContext(null);

package/dist/esm/internal/hooks/use-on-motion-finish.js

@@ -1,4 +1,5 @@
 import { useCallback, useRef } from 'react';
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
 export default function useOnMotionFinish(_ref) {
   var onOpenComplete = _ref.onOpenComplete,
       onCloseComplete = _ref.onCloseComplete;

package/dist/esm/internal/hooks/use-scroll.js

@@ -1,5 +1,6 @@
 import { useContext } from 'react';
-import { ScrollContext } from '../context';
+import { ScrollContext } from '../context'; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 export default function useScroll() {
   var shouldScrollInViewport = useContext(ScrollContext);
 

package/dist/esm/modal-body.js

@@ -13,19 +13,30 @@ var bodyStyles = css({
 /**
  * Adding the padding here avoids cropping the keyline on its sides.
  * The combined vertical spacing is maintained by subtracting the
- * keyline height from header and footer. */
+ * keyline height from header and footer.
+ */
 
 var bodyScrollStyles = css({
   padding: "".concat(keylineHeight, "px ").concat(padding, "px")
 });
 /**
  * Keylines will not be shown if scrolling in viewport so we do
- * not account for them in this case. */
+ * not account for them in this case.
+ */
 
 var viewportScrollStyles = css({
   padding: "0px ".concat(padding, "px")
 });
 
+/**
+ * __Modal body__
+ *
+ * A modal body is used to display the main content of a modal.
+ *
+ * - [Examples](https://atlassian.design/components/modal-dialog/examples)
+ * - [Code](https://atlassian.design/components/modal-dialog/code#modal-body-props)
+ * - [Usage](https://atlassian.design/components/modal-dialog/usage)
+ */
 var ModalBody = function ModalBody(props) {
   var children = props.children,
       userDefinedTestId = props.testId;

package/dist/esm/modal-footer.js

@@ -12,6 +12,15 @@ var footerStyles = css({
   gap: "".concat(footerItemGap, "px")
 });
 
+/**
+ * __Modal footer__
+ *
+ * A modal footer often contains a primary action and the ability to cancel and close the dialog, though can contain any React element.
+ *
+ * - [Examples](https://atlassian.design/components/modal-dialog/examples#modal-footer)
+ * - [Code](https://atlassian.design/components/modal-dialog/code#modal-footer-props)
+ * - [Usage](https://atlassian.design/components/modal-dialog/usage)
+ */
 var ModalFooter = function ModalFooter(props) {
   var children = props.children,
       userDefinedTestId = props.testId;

package/dist/esm/modal-header.js

@@ -12,6 +12,15 @@ var headerStyles = css({
   justifyContent: 'space-between'
 });
 
+/**
+ * __Modal header__
+ *
+ * A modal header contains the title of the modal and can contain other React elements such as a close button.
+ *
+ * - [Examples](https://atlassian.design/components/modal-dialog/examples#modal-header)
+ * - [Code](https://atlassian.design/components/modal-dialog/code#modal-header-props)
+ * - [Usage](https://atlassian.design/components/modal-dialog/usage)
+ */
 var ModalHeader = function ModalHeader(props) {
   var children = props.children,
       userDefinedTestId = props.testId;

package/dist/esm/modal-title.js

@@ -24,7 +24,8 @@ var textStyles = css({
   /**
    * This ensures that the element fills the whole header space
    * and its content does not overflow (since flex items don't
-   * shrink past its content size by default). */
+   * shrink past its content size by default).
+   */
   flex: '1 1 auto',
   wordWrap: 'break-word'
 });
@@ -36,7 +37,8 @@ var iconStyles = css({
 /**
  * When the title is truncated (not multi-line), we adjust the
  * line height to avoid cropping the descenders. This removes
- * the extra spacing that we get from that adjustment. */
+ * the extra spacing that we get from that adjustment.
+ */
 
 var lineHeightOffset = fontSize - fontSize * adjustedLineHeight;
 var truncatedTextStyles = css({
@@ -64,6 +66,15 @@ var TitleIcon = function TitleIcon(_ref) {
   }));
 };
 
+/**
+ * __Modal title__
+ *
+ * A modal title is used to display a title within a modal.
+ *
+ * - [Examples](https://atlassian.design/components/modal-dialog/examples)
+ * - [Code](https://atlassian.design/components/modal-dialog/code)
+ * - [Usage](https://atlassian.design/components/modal-dialog/usage)
+ */
 var ModalTitle = function ModalTitle(props) {
   var appearance = props.appearance,
       children = props.children,

package/dist/esm/modal-transition.js

@@ -1,5 +1,14 @@
 import React from 'react';
 import ExitingPersistence from '@atlaskit/motion/exiting-persistence';
+/**
+ * __Modal transition__
+ *
+ * A modal transition wraps a modal to provide a fluid transition upon opening and closing.
+ *
+ * - [Examples](https://atlassian.design/components/modal-dialog/examples)
+ * - [Code](https://atlassian.design/components/modal-dialog/code)
+ * - [Usage](https://atlassian.design/components/modal-dialog/usage)
+ */
 
 var ModalTransition = function ModalTransition(props) {
   return /*#__PURE__*/React.createElement(ExitingPersistence, {

package/dist/esm/modal-wrapper.js

@@ -1,6 +1,4 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["autoFocus", "shouldCloseOnEscapePress", "shouldCloseOnOverlayClick", "shouldScrollInViewport", "stackIndex", "onClose", "onStackChange", "isBlanketHidden", "testId"];
 
 /** @jsx jsx */
 import { useCallback } from 'react';
@@ -27,6 +25,22 @@ var fillScreenStyles = css({
   WebkitOverflowScrolling: 'touch'
 });
 
+var whiteListElements = function whiteListElements(element) {
+  // allows focus to reach elements outside the modal if they contain the data-atlas-extension attribute
+  return !element.hasAttribute('data-atlas-extension');
+};
+/**
+ * __Modal wrapper__
+ *
+ * A modal wrapper displays content that requires user interaction, in a layer above the page.
+ * This component is primary container for other modal components.
+ *
+ * - [Examples](https://atlassian.design/components/modal-dialog/examples)
+ * - [Code](https://atlassian.design/components/modal-dialog/code)
+ * - [Usage](https://atlassian.design/components/modal-dialog/usage)
+ */
+
+
 var ModalWrapper = function ModalWrapper(props) {
   var _props$autoFocus = props.autoFocus,
       autoFocus = _props$autoFocus === void 0 ? true : _props$autoFocus,
@@ -42,9 +56,12 @@ var ModalWrapper = function ModalWrapper(props) {
       _props$onStackChange = props.onStackChange,
       onStackChange = _props$onStackChange === void 0 ? noop : _props$onStackChange,
       isBlanketHidden = props.isBlanketHidden,
-      testId = props.testId,
-      modalDialogProps = _objectWithoutProperties(props, _excluded);
-
+      children = props.children,
+      height = props.height,
+      width = props.width,
+      onCloseComplete = props.onCloseComplete,
+      onOpenComplete = props.onOpenComplete,
+      testId = props.testId;
   var calculatedStackIndex = useModalStack({
     onStackChange: onStackChange
   });
@@ -57,7 +74,7 @@ var ModalWrapper = function ModalWrapper(props) {
     action: 'closed',
     componentName: 'modalDialog',
     packageName: "@atlaskit/modal-dialog",
-    packageVersion: "12.2.13"
+    packageVersion: "12.3.0"
   });
   var onBlanketClicked = useCallback(function (e) {
     if (shouldCloseOnOverlayClick) {
@@ -73,13 +90,17 @@ var ModalWrapper = function ModalWrapper(props) {
     isTinted: !isBlanketHidden,
     onBlanketClicked: onBlanketClicked,
     testId: testId && "".concat(testId, "--blanket")
-  }, jsx(ModalDialog, _extends({
+  }, jsx(ModalDialog, {
     testId: testId,
     autoFocus: autoFocus,
     stackIndex: stackIndex,
     onClose: onCloseHandler,
-    shouldScrollInViewport: shouldScrollInViewport
-  }, modalDialogProps)));
+    shouldScrollInViewport: shouldScrollInViewport,
+    height: height,
+    width: width,
+    onCloseComplete: onCloseComplete,
+    onOpenComplete: onOpenComplete
+  }, children));
   return jsx(Portal, {
     zIndex: layers.modal()
   }, jsx(FadeIn, null, function (fadeInProps) {
@@ -89,7 +110,8 @@ var ModalWrapper = function ModalWrapper(props) {
     }), jsx(FocusLock, {
       autoFocus: autoFocusLock,
       disabled: !isForeground,
-      returnFocus: true
+      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.2.13",
+	"version": "12.3.0",
 	"sideEffects": false
 }

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

@@ -12,5 +12,14 @@ export interface ModalBodyProps {
      */
     testId?: string;
 }
+/**
+ * __Modal body__
+ *
+ * A modal body is used to display the main content of a modal.
+ *
+ * - [Examples](https://atlassian.design/components/modal-dialog/examples)
+ * - [Code](https://atlassian.design/components/modal-dialog/code#modal-body-props)
+ * - [Usage](https://atlassian.design/components/modal-dialog/usage)
+ */
 declare const ModalBody: (props: ModalBodyProps) => JSX.Element;
 export default ModalBody;

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

@@ -12,5 +12,14 @@ export interface ModalFooterProps {
      */
     testId?: string;
 }
+/**
+ * __Modal footer__
+ *
+ * A modal footer often contains a primary action and the ability to cancel and close the dialog, though can contain any React element.
+ *
+ * - [Examples](https://atlassian.design/components/modal-dialog/examples#modal-footer)
+ * - [Code](https://atlassian.design/components/modal-dialog/code#modal-footer-props)
+ * - [Usage](https://atlassian.design/components/modal-dialog/usage)
+ */
 declare const ModalFooter: (props: ModalFooterProps) => JSX.Element;
 export default ModalFooter;

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

@@ -12,5 +12,14 @@ export interface ModalHeaderProps {
      */
     testId?: string;
 }
+/**
+ * __Modal header__
+ *
+ * A modal header contains the title of the modal and can contain other React elements such as a close button.
+ *
+ * - [Examples](https://atlassian.design/components/modal-dialog/examples#modal-header)
+ * - [Code](https://atlassian.design/components/modal-dialog/code#modal-header-props)
+ * - [Usage](https://atlassian.design/components/modal-dialog/usage)
+ */
 declare const ModalHeader: (props: ModalHeaderProps) => JSX.Element;
 export default ModalHeader;

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

@@ -22,5 +22,14 @@ export interface ModalTitleProps {
      */
     testId?: string;
 }
+/**
+ * __Modal title__
+ *
+ * A modal title is used to display a title within a modal.
+ *
+ * - [Examples](https://atlassian.design/components/modal-dialog/examples)
+ * - [Code](https://atlassian.design/components/modal-dialog/code)
+ * - [Usage](https://atlassian.design/components/modal-dialog/usage)
+ */
 declare const ModalTitle: (props: ModalTitleProps) => JSX.Element;
 export default ModalTitle;

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

@@ -1,4 +1,13 @@
 /// <reference types="react" />
 import { ExitingPersistenceProps } from '@atlaskit/motion/exiting-persistence';
+/**
+ * __Modal transition__
+ *
+ * A modal transition wraps a modal to provide a fluid transition upon opening and closing.
+ *
+ * - [Examples](https://atlassian.design/components/modal-dialog/examples)
+ * - [Code](https://atlassian.design/components/modal-dialog/code)
+ * - [Usage](https://atlassian.design/components/modal-dialog/usage)
+ */
 declare const ModalTransition: (props: Pick<ExitingPersistenceProps, 'children'>) => JSX.Element;
 export default ModalTransition;

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

@@ -2,5 +2,15 @@
 /// <reference types="react" />
 import type { ModalDialogProps } from './types';
 export type { ModalDialogProps };
+/**
+ * __Modal wrapper__
+ *
+ * A modal wrapper displays content that requires user interaction, in a layer above the page.
+ * This component is primary container for other modal components.
+ *
+ * - [Examples](https://atlassian.design/components/modal-dialog/examples)
+ * - [Code](https://atlassian.design/components/modal-dialog/code)
+ * - [Usage](https://atlassian.design/components/modal-dialog/usage)
+ */
 declare const ModalWrapper: (props: ModalDialogProps) => JSX.Element;
 export default ModalWrapper;

package/dist/types/types.d.ts

@@ -74,10 +74,10 @@ export interface ModalDialogProps {
      * 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.
-  
+     *
      * If not overridden using `testId` prop in the respective components,
      * this will set `data-testid` on these elements when defined:
-  
+     *
      * - Modal dialog - `{testId}`
      * - Modal header - `{testId}--header`
      * - Modal title - `{testId}--title`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/modal-dialog",
-  "version": "12.2.13",
+  "version": "12.3.0",
   "description": "A modal dialog displays content that requires user interaction, in a layer above the page.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -14,9 +14,9 @@
   "types": "dist/types/index.d.ts",
   "sideEffects": false,
   "af:exports": {
-    ".": "./src/index.ts",
-    "./types": "./src/types.ts",
-    "./hooks": "./src/hooks.ts",
+    ".": "./src/index.tsx",
+    "./types": "./src/types.tsx",
+    "./hooks": "./src/hooks.tsx",
     "./modal-dialog": "./src/modal-wrapper.tsx",
     "./modal-header": "./src/modal-header.tsx",
     "./modal-title": "./src/modal-title.tsx",
@@ -24,7 +24,7 @@
     "./modal-footer": "./src/modal-footer.tsx",
     "./modal-transition": "./src/modal-transition.tsx"
   },
-  "atlaskit:src": "src/index.ts",
+  "atlaskit:src": "src/index.tsx",
   "atlassian": {
     "team": "Design System Team",
     "releaseModel": "scheduled",
@@ -40,12 +40,12 @@
     "@atlaskit/analytics-next": "^8.2.0",
     "@atlaskit/blanket": "^12.2.0",
     "@atlaskit/codemod-utils": "^4.1.0",
-    "@atlaskit/ds-lib": "^2.0.0",
+    "@atlaskit/ds-lib": "^2.1.0",
     "@atlaskit/focus-ring": "^1.0.0",
     "@atlaskit/icon": "^21.10.0",
-    "@atlaskit/motion": "^1.1.0",
+    "@atlaskit/motion": "^1.2.0",
     "@atlaskit/portal": "^4.1.0",
-    "@atlaskit/theme": "^12.1.0",
+    "@atlaskit/theme": "^12.2.0",
     "@atlaskit/tokens": "^0.10.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9",
@@ -90,7 +90,7 @@
     "react-dom": "^16.8.0",
     "react-lorem-component": "^0.13.0",
     "storybook-addon-performance": "^0.16.0",
-    "typescript": "4.2.4",
+    "typescript": "4.3.5",
     "wait-for-expect": "^1.2.0"
   },
   "keywords": [
@@ -104,6 +104,7 @@
     },
     "@repo/internal": {
       "dom-events": "use-bind-event-listener",
+      "design-system": "v1",
       "ui-components": "lite-mode",
       "analytics": "analytics-next",
       "theming": "tokens",