@atlaskit/modal-dialog 12.6.8 → 12.6.10

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/modal-dialog
 
+## 12.6.10
+
+### Patch Changes
+
+- [`6900f89eb0e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6900f89eb0e) - Internal changes to use space tokens. There is no expected visual or behaviour change.
+
+## 12.6.9
+
+### Patch Changes
+
+- [`c8d28bd7519`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c8d28bd7519) - Adds role of region to modal dialog body when scrollable
+
 ## 12.6.8
 
 ### Patch Changes

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

@@ -109,8 +109,10 @@ var ScrollContainer = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
   return (0, _react2.jsx)(_focusRing.default, {
     isInset: true
   }, (0, _react2.jsx)("div", {
+    // tabindex is allowed here so that keyboard users can scroll content
     // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
     tabIndex: showContentFocus ? 0 : undefined,
+    role: showContentFocus ? 'region' : undefined,
     "aria-label": showContentFocus ? 'Scrollable content' : undefined,
     "data-testid": testId && "".concat(testId, "--scrollable"),
     ref: (0, _mergeRefs.default)([ref, scrollableRef]),

package/dist/cjs/modal-title.js

@@ -57,9 +57,9 @@ var truncatedTextStyles = (0, _react.css)({
     overflowX: 'clip'
   },
   '@supports not (overflow-x: clip)': {
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/design-system/ensure-design-token-usage/preview
     marginTop: "".concat(lineHeightOffset / 2, "px"),
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/design-system/ensure-design-token-usage/preview
     marginBottom: "".concat(lineHeightOffset / 2, "px"),
     lineHeight: adjustedLineHeight,
     overflow: 'hidden'
@@ -67,7 +67,7 @@ var truncatedTextStyles = (0, _react.css)({
 });
 var truncatedTextIconStyles = (0, _react.css)({
   '@supports not (overflow-x: clip)': {
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/design-system/ensure-design-token-usage/preview
     marginBottom: "".concat(lineHeightOffset / 2, "px"),
     lineHeight: 1.2
   }

package/dist/cjs/modal-wrapper.js

@@ -84,7 +84,7 @@ var ModalWrapper = function ModalWrapper(props) {
     action: 'closed',
     componentName: 'modalDialog',
     packageName: "@atlaskit/modal-dialog",
-    packageVersion: "12.6.8"
+    packageVersion: "12.6.10"
   });
   var onBlanketClicked = (0, _react.useCallback)(function (e) {
     if (shouldCloseOnOverlayClick) {

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

@@ -88,8 +88,10 @@ const ScrollContainer = /*#__PURE__*/forwardRef((props, ref) => {
   return jsx(FocusRing, {
     isInset: true
   }, jsx("div", {
+    // tabindex is allowed here so that keyboard users can scroll content
     // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
     tabIndex: showContentFocus ? 0 : undefined,
+    role: showContentFocus ? 'region' : undefined,
     "aria-label": showContentFocus ? 'Scrollable content' : undefined,
     "data-testid": testId && `${testId}--scrollable`,
     ref: mergeRefs([ref, scrollableRef]),

package/dist/es2019/modal-title.js

@@ -50,9 +50,9 @@ const truncatedTextStyles = css({
     overflowX: 'clip'
   },
   '@supports not (overflow-x: clip)': {
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/design-system/ensure-design-token-usage/preview
     marginTop: `${lineHeightOffset / 2}px`,
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/design-system/ensure-design-token-usage/preview
     marginBottom: `${lineHeightOffset / 2}px`,
     lineHeight: adjustedLineHeight,
     overflow: 'hidden'
@@ -60,7 +60,7 @@ const truncatedTextStyles = css({
 });
 const truncatedTextIconStyles = css({
   '@supports not (overflow-x: clip)': {
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/design-system/ensure-design-token-usage/preview
     marginBottom: `${lineHeightOffset / 2}px`,
     lineHeight: 1.2
   }

package/dist/es2019/modal-wrapper.js

@@ -70,7 +70,7 @@ const ModalWrapper = props => {
     action: 'closed',
     componentName: 'modalDialog',
     packageName: "@atlaskit/modal-dialog",
-    packageVersion: "12.6.8"
+    packageVersion: "12.6.10"
   });
   const onBlanketClicked = useCallback(e => {
     if (shouldCloseOnOverlayClick) {

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

@@ -99,8 +99,10 @@ var ScrollContainer = /*#__PURE__*/forwardRef(function (props, ref) {
   return jsx(FocusRing, {
     isInset: true
   }, jsx("div", {
+    // tabindex is allowed here so that keyboard users can scroll content
     // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
     tabIndex: showContentFocus ? 0 : undefined,
+    role: showContentFocus ? 'region' : undefined,
     "aria-label": showContentFocus ? 'Scrollable content' : undefined,
     "data-testid": testId && "".concat(testId, "--scrollable"),
     ref: mergeRefs([ref, scrollableRef]),

package/dist/esm/modal-title.js

@@ -50,9 +50,9 @@ var truncatedTextStyles = css({
     overflowX: 'clip'
   },
   '@supports not (overflow-x: clip)': {
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/design-system/ensure-design-token-usage/preview
     marginTop: "".concat(lineHeightOffset / 2, "px"),
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/design-system/ensure-design-token-usage/preview
     marginBottom: "".concat(lineHeightOffset / 2, "px"),
     lineHeight: adjustedLineHeight,
     overflow: 'hidden'
@@ -60,7 +60,7 @@ var truncatedTextStyles = css({
 });
 var truncatedTextIconStyles = css({
   '@supports not (overflow-x: clip)': {
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/design-system/ensure-design-token-usage/preview
     marginBottom: "".concat(lineHeightOffset / 2, "px"),
     lineHeight: 1.2
   }

package/dist/esm/modal-wrapper.js

@@ -74,7 +74,7 @@ var ModalWrapper = function ModalWrapper(props) {
     action: 'closed',
     componentName: 'modalDialog',
     packageName: "@atlaskit/modal-dialog",
-    packageVersion: "12.6.8"
+    packageVersion: "12.6.10"
   });
   var onBlanketClicked = useCallback(function (e) {
     if (shouldCloseOnOverlayClick) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/modal-dialog",
-  "version": "12.6.8",
+  "version": "12.6.10",
   "description": "A modal dialog displays content that requires user interaction, in a layer above the page.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -34,9 +34,9 @@
     "@atlaskit/icon": "^21.12.0",
     "@atlaskit/motion": "^1.4.0",
     "@atlaskit/portal": "^4.3.0",
-    "@atlaskit/primitives": "^1.2.0",
-    "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.16.0",
+    "@atlaskit/primitives": "^1.4.0",
+    "@atlaskit/theme": "^12.6.0",
+    "@atlaskit/tokens": "^1.21.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "bind-event-listener": "^2.1.1",
@@ -50,6 +50,7 @@
   },
   "devDependencies": {
     "@af/accessibility-testing": "*",
+    "@af/integration-testing": "*",
     "@af/visual-regression": "*",
     "@atlaskit/button": "*",
     "@atlaskit/ssr": "*",

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)
+
+```