@atlaskit/modal-dialog 12.4.0 → 12.4.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/modal-dialog
 
+## 12.4.2
+
+### Patch Changes
+
+- Updated dependencies
+
+## 12.4.1
+
+### Patch Changes
+
+- [`9de88fa1e1e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9de88fa1e1e) - Internal changes to include spacing tokens in component implementations.
+
 ## 12.4.0
 
 ### Minor Changes

package/codemods/migrations/map-actions-prop.tsx

@@ -87,8 +87,9 @@ export const mapActionsProp = (
     .forEach((element: ASTPath<JSXElement>) => {
       getJSXAttributesByName(j, element, ACTIONS_PROP_NAME).forEach(
         (attribute: ASTPath<JSXAttribute>) => {
-          const actionsPropValue = (attribute.node
-            .value as JSXExpressionContainer)?.expression;
+          const actionsPropValue = (
+            attribute.node.value as JSXExpressionContainer
+          )?.expression;
 
           if (
             !actionsPropValue ||
@@ -380,8 +381,9 @@ const findAppearanceInActions = (
        * If actions prop is declared as variable, and we can find the declaration
        * in the same file, we check if there's any appearance property set.
        */
-      const actionPropVariableValue = (actionsVariableDeclaration as any)?.nodes()[0]
-        .declarations[0]?.init;
+      const actionPropVariableValue = (
+        actionsVariableDeclaration as any
+      )?.nodes()[0].declarations[0]?.init;
 
       return checkAppearancePropertyExistence(actionPropVariableValue);
     }
@@ -419,7 +421,8 @@ const getVariableDeclarationByName = (
     .filter((variableDeclaration: ASTPath<VariableDeclaration>) => {
       return variableDeclaration.node.declarations.some(
         (variableDeclarator) => {
-          const variableDeclaratorTyped = variableDeclarator as VariableDeclarator;
+          const variableDeclaratorTyped =
+            variableDeclarator as VariableDeclarator;
           return (
             variableDeclaratorTyped.id.type === 'Identifier' &&
             variableDeclaratorTyped.id.name === variableName

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

@@ -38,7 +38,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 /** @jsx jsx */
 var baseStyles = (0, _react2.css)({
   display: 'inherit',
-  margin: 0,
+  // TODO Delete this comment after verifying spacing token -> previous value `0`
+  margin: "var(--ds-scale-0, 0px)",
   flex: 'inherit',
   flexDirection: 'inherit',
   flexGrow: 1,

package/dist/cjs/modal-title.js

@@ -24,7 +24,8 @@ var adjustedLineHeight = 1.2;
 var titleStyles = (0, _react.css)({
   display: 'flex',
   minWidth: 0,
-  margin: 0,
+  // TODO Delete this comment after verifying spacing token -> previous value `0`
+  margin: "var(--ds-scale-0, 0px)",
   alignItems: 'center',
   fontSize: "".concat(fontSize, "px"),
   fontStyle: 'inherit',

package/dist/cjs/modal-wrapper.js

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

package/dist/cjs/version.json

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

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

@@ -11,7 +11,8 @@ import FocusRing from '@atlaskit/focus-ring';
 import { keylineColor, keylineHeight } from '../constants';
 const baseStyles = css({
   display: 'inherit',
-  margin: 0,
+  // TODO Delete this comment after verifying spacing token -> previous value `0`
+  margin: "var(--ds-scale-0, 0px)",
   flex: 'inherit',
   flexDirection: 'inherit',
   flexGrow: 1,

package/dist/es2019/modal-title.js

@@ -10,7 +10,8 @@ const adjustedLineHeight = 1.2;
 const titleStyles = css({
   display: 'flex',
   minWidth: 0,
-  margin: 0,
+  // TODO Delete this comment after verifying spacing token -> previous value `0`
+  margin: "var(--ds-scale-0, 0px)",
   alignItems: 'center',
   fontSize: `${fontSize}px`,
   fontStyle: 'inherit',

package/dist/es2019/modal-wrapper.js

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

package/dist/es2019/version.json

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

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

@@ -13,7 +13,8 @@ import FocusRing from '@atlaskit/focus-ring';
 import { keylineColor, keylineHeight } from '../constants';
 var baseStyles = css({
   display: 'inherit',
-  margin: 0,
+  // TODO Delete this comment after verifying spacing token -> previous value `0`
+  margin: "var(--ds-scale-0, 0px)",
   flex: 'inherit',
   flexDirection: 'inherit',
   flexGrow: 1,

package/dist/esm/modal-title.js

@@ -10,7 +10,8 @@ var adjustedLineHeight = 1.2;
 var titleStyles = css({
   display: 'flex',
   minWidth: 0,
-  margin: 0,
+  // TODO Delete this comment after verifying spacing token -> previous value `0`
+  margin: "var(--ds-scale-0, 0px)",
   alignItems: 'center',
   fontSize: "".concat(fontSize, "px"),
   fontStyle: 'inherit',

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.4.0"
+    packageVersion: "12.4.2"
   });
   var onBlanketClicked = useCallback(function (e) {
     if (shouldCloseOnOverlayClick) {

package/dist/esm/version.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/modal-dialog",
-  "version": "12.4.0",
+  "version": "12.4.2",
   "description": "A modal dialog displays content that requires user interaction, in a layer above the page.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -12,13 +12,6 @@
   "module": "dist/esm/index.js",
   "module:es2019": "dist/es2019/index.js",
   "types": "dist/types/index.d.ts",
-  "typesVersions": {
-    ">=4.0 <4.5": {
-      "*": [
-        "dist/types-ts4.0/*"
-      ]
-    }
-  },
   "sideEffects": false,
   "af:exports": {
     ".": "./src/index.tsx",
@@ -33,6 +26,7 @@
   },
   "atlaskit:src": "src/index.tsx",
   "atlassian": {
+    "disableProductCI": true,
     "team": "Design System Team",
     "releaseModel": "scheduled",
     "website": {
@@ -48,12 +42,12 @@
     "@atlaskit/blanket": "^12.3.0",
     "@atlaskit/codemod-utils": "^4.1.0",
     "@atlaskit/ds-lib": "^2.1.0",
-    "@atlaskit/focus-ring": "^1.1.0",
+    "@atlaskit/focus-ring": "^1.2.0",
     "@atlaskit/icon": "^21.11.0",
-    "@atlaskit/motion": "^1.2.0",
+    "@atlaskit/motion": "^1.3.0",
     "@atlaskit/portal": "^4.1.0",
     "@atlaskit/theme": "^12.2.0",
-    "@atlaskit/tokens": "^0.10.0",
+    "@atlaskit/tokens": "^0.11.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "bind-event-listener": "^2.1.1",
@@ -114,6 +108,7 @@
       "design-system": "v1",
       "ui-components": "lite-mode",
       "analytics": "analytics-next",
+      "design-tokens": "spacing",
       "theming": "tokens",
       "deprecation": "no-deprecated-imports",
       "styling": [

package/report.api.md

@@ -1,6 +1,10 @@
-## API Report File for "@atlaskit/modal-dialog".
+## API Report File for "@atlaskit/modal-dialog"
 
-> Do not edit this file. This report is auto-generated by [API Extractor](https://api-extractor.com/).
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+<!--
+	Generated API Report version: 2.0
+-->
 
 [Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
 
@@ -14,255 +18,110 @@ import { ReactNode } from 'react';
 import { RefObject } from 'react';
 import type { UIAnalyticsEvent } from '@atlaskit/analytics-next';
 
-export declare type Appearance = 'danger' | 'warning';
+// @public (undocumented)
+export type Appearance = 'danger' | 'warning';
 
-export declare type KeyboardOrMouseEvent =
+// @public (undocumented)
+export type KeyboardOrMouseEvent =
   | React_2.MouseEvent<any>
   | React_2.KeyboardEvent<any>
   | KeyboardEvent;
 
-export declare type ModalAttributes = {
-  /**
-   * Test id passed to the modal dialog.
-   */
+// @public (undocumented)
+export type ModalAttributes = {
   testId?: ModalDialogProps['testId'];
-  /**
-   * Id referenced by the modal dialog's `aria-labelledby` attribute.
-   * This id should be assigned to the modal title element.
-   */
   titleId: string;
-  /**
-   * Callback function called when the modal dialog is requesting to be closed,
-   * wrapped in modal dialog's analytic event context.
-   */
   onClose?: OnCloseHandler;
 };
 
-/**
- * __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)
- */
-export declare const ModalBody: (props: ModalBodyProps) => jsx.JSX.Element;
+// @public
+export const ModalBody: (props: ModalBodyProps) => jsx.JSX.Element;
 
-export declare interface ModalBodyProps {
-  /**
-   * Children of modal dialog footer.
-   */
+// @public (undocumented)
+export interface ModalBodyProps {
   children: React_2.ReactNode;
-  /**
-   * 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.
-   */
   testId?: string;
 }
 
-export declare interface ModalDialogProps {
-  /**
-   * Focus is moved to the first interactive element inside the modal dialog when `true`.
-   * Pass an element `ref` to focus on a specific element.
-   */
+// @public (undocumented)
+export interface ModalDialogProps {
   autoFocus?: boolean | RefObject<HTMLElement | null | undefined>;
-  /**
-   * Contents of the modal dialog.
-   */
   children?: React_2.ReactNode;
-  /**
-   * Height of the modal dialog.
-   * When unset the modal dialog will grow to fill the viewport and then start overflowing its contents.
-   */
   height?: number | string;
-  /**
-   * Width of the modal dialog.
-   * The recommended way to specify modal width is using named size options.
-   */
-  width?: number | string | WidthNames;
-  /**
-   * Callback function called when the modal dialog is requesting to be closed.
-   */
+  isBlanketHidden?: boolean;
   onClose?: OnCloseHandler;
-  /**
-   * Callback function called when the modal dialog has finished closing.
-   */
   onCloseComplete?: OnCloseCompleteHandler;
-  /**
-   * Callback function called when the modal dialog has finished opening.
-   */
   onOpenComplete?: OnOpenCompleteHandler;
-  /**
-   * Callback function called when the modal changes position in the stack.
-   */
   onStackChange?: OnStackChangeHandler;
-  /**
-   * Will set the scroll boundary to the viewport.
-   * If set to false, the scroll boundary is set to the modal dialog body.
-   */
-  shouldScrollInViewport?: boolean;
-  /**
-   * Calls `onClose` when clicking the blanket behind the modal dialog.
-   */
-  shouldCloseOnOverlayClick?: boolean;
-  /**
-   * Calls `onClose` when pressing escape.
-   */
   shouldCloseOnEscapePress?: boolean;
-  /**
-   * Will remove the blanket tinted background color.
-   */
-  isBlanketHidden?: boolean;
-  /**
-   * Number representing where in the stack of modals this modal sits.
-   * This offsets the modal dialogs vertical position.
-   */
+  shouldCloseOnOverlayClick?: boolean;
+  shouldScrollInViewport?: boolean;
   stackIndex?: number;
-  /**
-   * 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`
-   * - Modal body - `{testId}--body`
-   * - Modal footer - `{testId}--footer`
-   * - Scrollable element - `{testId}--scrollable`
-   * - Blanket - `{testId}--blanket`
-   */
   testId?: string;
+  width?: number | string | WidthNames;
 }
 
-/**
- * __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)
- */
-export declare const ModalFooter: (props: ModalFooterProps) => jsx.JSX.Element;
+// @public
+export const ModalFooter: (props: ModalFooterProps) => jsx.JSX.Element;
 
-export declare interface ModalFooterProps {
-  /**
-   * Children of modal dialog footer.
-   */
+// @public (undocumented)
+export interface ModalFooterProps {
   children?: ReactNode;
-  /**
-   * 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.
-   */
   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)
- */
-export declare const ModalHeader: (props: ModalHeaderProps) => jsx.JSX.Element;
+// @public
+export const ModalHeader: (props: ModalHeaderProps) => jsx.JSX.Element;
 
-export declare interface ModalHeaderProps {
-  /**
-   * Children of modal dialog header.
-   */
+// @public (undocumented)
+export interface ModalHeaderProps {
   children?: React_2.ReactNode;
-  /**
-   * 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.
-   */
   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)
- */
-export declare const ModalTitle: (props: ModalTitleProps) => jsx.JSX.Element;
+// @public
+export const ModalTitle: (props: ModalTitleProps) => jsx.JSX.Element;
 
-export declare interface ModalTitleProps {
-  /**
-   * Appearance of the modal that changes the color of the primary action and adds an icon to the title.
-   */
+// @public (undocumented)
+export interface ModalTitleProps {
   appearance?: Appearance;
-  /**
-   * Children of modal dialog header.
-   */
   children?: ReactNode;
-  /**
-   * When `true` will allow the title to span multiple lines.
-   * Defaults to `true`.
-   */
   isMultiline?: boolean;
-  /**
-   * 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.
-   */
   testId?: string;
 }
 
-/**
- * __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)
- */
-export declare const ModalTransition: (
+// @public
+export const ModalTransition: (
   props: Pick<ExitingPersistenceProps, 'children'>,
 ) => JSX.Element;
 
-/**
- * __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.JSX.Element;
+// @public
+const ModalWrapper: (props: ModalDialogProps) => jsx.JSX.Element;
 export default ModalWrapper;
 
-export declare type OnCloseCompleteHandler = (element: HTMLElement) => void;
+// @public (undocumented)
+export type OnCloseCompleteHandler = (element: HTMLElement) => void;
 
-export declare type OnCloseHandler = (
+// @public (undocumented)
+export type OnCloseHandler = (
   e: KeyboardOrMouseEvent,
   analyticEvent: UIAnalyticsEvent,
 ) => void;
 
-export declare type OnOpenCompleteHandler = (
+// @public (undocumented)
+export type OnOpenCompleteHandler = (
   node: HTMLElement,
   isAppearing: boolean,
 ) => void;
 
-export declare type OnStackChangeHandler = (stackIndex: number) => void;
+// @public (undocumented)
+export type OnStackChangeHandler = (stackIndex: number) => void;
 
-export declare const useModal: () => ModalAttributes;
+// @public (undocumented)
+export const useModal: () => ModalAttributes;
 
-declare type WidthNames = 'small' | 'medium' | 'large' | 'x-large';
+// @public (undocumented)
+type WidthNames = 'small' | 'medium' | 'large' | 'x-large';
 
-export {};
+// (No @packageDocumentation comment for this package)
 ```

package/dist/types-ts4.0/hooks.d.ts

@@ -1 +0,0 @@
-export declare const useModal: () => import("./internal/context").ModalAttributes;

package/dist/types-ts4.0/index.d.ts

@@ -1,8 +0,0 @@
-export { default } from './modal-wrapper';
-export { default as ModalTransition } from './modal-transition';
-export type { KeyboardOrMouseEvent, Appearance, ModalAttributes, ModalDialogProps, ModalHeaderProps, ModalTitleProps, ModalBodyProps, ModalFooterProps, OnCloseHandler, OnCloseCompleteHandler, OnOpenCompleteHandler, OnStackChangeHandler, } from './types';
-export { default as ModalHeader } from './modal-header';
-export { default as ModalTitle } from './modal-title';
-export { default as ModalBody } from './modal-body';
-export { default as ModalFooter } from './modal-footer';
-export { useModal } from './hooks';

package/dist/types-ts4.0/internal/components/modal-dialog.d.ts

@@ -1,4 +0,0 @@
-import { jsx } from '@emotion/react';
-import type { ModalDialogProps } from '../../types';
-declare const ModalDialog: (props: ModalDialogProps) => jsx.JSX.Element;
-export default ModalDialog;

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

@@ -1,11 +0,0 @@
-/** @jsx jsx */
-import { ReactNode } from 'react';
-import { jsx } from '@emotion/react';
-interface PositionerProps {
-    children?: ReactNode;
-    stackIndex: number;
-    shouldScrollInViewport: boolean;
-    testId?: string;
-}
-declare const Positioner: (props: PositionerProps) => jsx.JSX.Element;
-export default Positioner;

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

@@ -1,20 +0,0 @@
-/** @jsx jsx */
-import React from 'react';
-interface ScrollContainerProps {
-    /**
-     * Children of the body within modal dialog.
-     */
-    children: React.ReactNode;
-    /**
-     * 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.
-     */
-    testId?: string;
-}
-/**
- * A container that shows top and bottom keylines when the
- * content overflows into the scrollable element.
- */
-declare const ScrollContainer: React.ForwardRefExoticComponent<ScrollContainerProps & React.RefAttributes<HTMLElement | null>>;
-export default ScrollContainer;

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

@@ -1,23 +0,0 @@
-import type { Appearance } from '../types';
-export declare type WidthNames = 'small' | 'medium' | 'large' | 'x-large';
-interface Width {
-    values: string[];
-    widths: {
-        [index in WidthNames]: number;
-    };
-    defaultValue: string;
-}
-export declare const width: Width;
-export declare const gutter = 60;
-export declare const borderRadius: number;
-export declare const verticalOffset: number;
-export declare const padding: number;
-export declare const footerItemGap: number;
-export declare const titleIconMargin: number;
-export declare const keylineHeight = 2;
-export declare const keylineColor: "var(--ds-border)";
-export declare const textColor: "var(--ds-text)";
-export declare const iconColor: {
-    [key in Appearance]: string;
-};
-export {};

package/dist/types-ts4.0/internal/context.d.ts

@@ -1,20 +0,0 @@
-/// <reference types="react" />
-import { ModalDialogProps, OnCloseHandler } from '../types';
-export declare type ModalAttributes = {
-    /**
-     * Test id passed to the modal dialog.
-     */
-    testId?: ModalDialogProps['testId'];
-    /**
-     * Id referenced by the modal dialog's `aria-labelledby` attribute.
-     * This id should be assigned to the modal title element.
-     */
-    titleId: string;
-    /**
-     * Callback function called when the modal dialog is requesting to be closed,
-     * wrapped in modal dialog's analytic event context.
-     */
-    onClose?: OnCloseHandler;
-};
-export declare const ModalContext: import("react").Context<ModalAttributes | null>;
-export declare const ScrollContext: import("react").Context<boolean | null>;

package/dist/types-ts4.0/internal/hooks/use-modal-stack.d.ts

@@ -1,13 +0,0 @@
-interface ModalStackOpts {
-    /**
-     * Fired when the modal dialog stack has changed.
-     */
-    onStackChange: (newStackIndex: number) => void;
-}
-/**
- * Returns the position of the calling modal dialog in the modal dialog stack.
- * Stack index of `0` is the highest position in the stack,
- * with every higher number being behind in the stack.
- */
-export default function useModalStack({ onStackChange, }: ModalStackOpts): number;
-export {};

package/dist/types-ts4.0/internal/hooks/use-on-motion-finish.d.ts

@@ -1,7 +0,0 @@
-import { RefObject } from 'react';
-import type { Transition } from '@atlaskit/motion/types';
-import { ModalDialogProps } from '../../types';
-export default function useOnMotionFinish({ onOpenComplete, onCloseComplete, }: Pick<ModalDialogProps, 'onOpenComplete' | 'onCloseComplete'>): [
-    RefObject<HTMLElement>,
-    (state: Transition) => void
-];

package/dist/types-ts4.0/internal/hooks/use-prevent-programmatic-scroll.d.ts

@@ -1,7 +0,0 @@
-/**
- * Prevents programatic scrolling of the viewport with `scrollIntoView`.
- * Should be used in conjunction with a scroll lock to prevent a user from scrolling.
- *
- * @returns scroll top offset of the viewport
- */
-export default function usePreventProgrammaticScroll(): number;

package/dist/types-ts4.0/internal/hooks/use-scroll.d.ts

@@ -1 +0,0 @@
-export default function useScroll(): boolean;

package/dist/types-ts4.0/internal/utils.d.ts

@@ -1,3 +0,0 @@
-import { ModalDialogProps } from '../types';
-export declare const dialogWidth: (input?: ModalDialogProps['width']) => string;
-export declare const dialogHeight: (input?: ModalDialogProps['height']) => string;

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

@@ -1,26 +0,0 @@
-/** @jsx jsx */
-import React from 'react';
-import { jsx } from '@emotion/react';
-export interface ModalBodyProps {
-    /**
-     * Children of modal dialog footer.
-     */
-    children: React.ReactNode;
-    /**
-     * 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.
-     */
-    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.JSX.Element;
-export default ModalBody;

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

@@ -1,26 +0,0 @@
-/** @jsx jsx */
-import { ReactNode } from 'react';
-import { jsx } from '@emotion/react';
-export interface ModalFooterProps {
-    /**
-     * Children of modal dialog footer.
-     */
-    children?: ReactNode;
-    /**
-     * 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.
-     */
-    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.JSX.Element;
-export default ModalFooter;

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

@@ -1,26 +0,0 @@
-/** @jsx jsx */
-import React from 'react';
-import { jsx } from '@emotion/react';
-export interface ModalHeaderProps {
-    /**
-     * Children of modal dialog header.
-     */
-    children?: React.ReactNode;
-    /**
-     * 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.
-     */
-    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.JSX.Element;
-export default ModalHeader;

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

@@ -1,36 +0,0 @@
-/** @jsx jsx */
-import { ReactNode } from 'react';
-import { jsx } from '@emotion/react';
-import { Appearance } from './types';
-export interface ModalTitleProps {
-    /**
-     * Appearance of the modal that changes the color of the primary action and adds an icon to the title.
-     */
-    appearance?: Appearance;
-    /**
-     * Children of modal dialog header.
-     */
-    children?: ReactNode;
-    /**
-     * When `true` will allow the title to span multiple lines.
-     * Defaults to `true`.
-     */
-    isMultiline?: boolean;
-    /**
-     * 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.
-     */
-    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.JSX.Element;
-export default ModalTitle;

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

@@ -1,13 +0,0 @@
-/// <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-ts4.0/modal-wrapper.d.ts

@@ -1,16 +0,0 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/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.JSX.Element;
-export default ModalWrapper;

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

@@ -1,90 +0,0 @@
-import React, { RefObject } from 'react';
-import type { UIAnalyticsEvent } from '@atlaskit/analytics-next';
-import type { WidthNames } from './internal/constants';
-export declare type KeyboardOrMouseEvent = React.MouseEvent<any> | React.KeyboardEvent<any> | KeyboardEvent;
-export declare type Appearance = 'danger' | 'warning';
-export declare type OnCloseHandler = (e: KeyboardOrMouseEvent, analyticEvent: UIAnalyticsEvent) => void;
-export declare type OnCloseCompleteHandler = (element: HTMLElement) => void;
-export declare type OnOpenCompleteHandler = (node: HTMLElement, isAppearing: boolean) => void;
-export declare type OnStackChangeHandler = (stackIndex: number) => void;
-export type { ModalHeaderProps } from './modal-header';
-export type { ModalTitleProps } from './modal-title';
-export type { ModalBodyProps } from './modal-body';
-export type { ModalFooterProps } from './modal-footer';
-export type { ModalAttributes } from './internal/context';
-export interface ModalDialogProps {
-    /**
-     * Focus is moved to the first interactive element inside the modal dialog when `true`.
-     * Pass an element `ref` to focus on a specific element.
-     */
-    autoFocus?: boolean | RefObject<HTMLElement | null | undefined>;
-    /**
-     * Contents of the modal dialog.
-     */
-    children?: React.ReactNode;
-    /**
-     * Height of the modal dialog.
-     * When unset the modal dialog will grow to fill the viewport and then start overflowing its contents.
-     */
-    height?: number | string;
-    /**
-     * Width of the modal dialog.
-     * The recommended way to specify modal width is using named size options.
-     */
-    width?: number | string | WidthNames;
-    /**
-     * Callback function called when the modal dialog is requesting to be closed.
-     */
-    onClose?: OnCloseHandler;
-    /**
-     * Callback function called when the modal dialog has finished closing.
-     */
-    onCloseComplete?: OnCloseCompleteHandler;
-    /**
-     * Callback function called when the modal dialog has finished opening.
-     */
-    onOpenComplete?: OnOpenCompleteHandler;
-    /**
-     * Callback function called when the modal changes position in the stack.
-     */
-    onStackChange?: OnStackChangeHandler;
-    /**
-     * Will set the scroll boundary to the viewport.
-     * If set to false, the scroll boundary is set to the modal dialog body.
-     */
-    shouldScrollInViewport?: boolean;
-    /**
-     * Calls `onClose` when clicking the blanket behind the modal dialog.
-     */
-    shouldCloseOnOverlayClick?: boolean;
-    /**
-     * Calls `onClose` when pressing escape.
-     */
-    shouldCloseOnEscapePress?: boolean;
-    /**
-     * Will remove the blanket tinted background color.
-     */
-    isBlanketHidden?: boolean;
-    /**
-     * Number representing where in the stack of modals this modal sits.
-     * This offsets the modal dialogs vertical position.
-     */
-    stackIndex?: number;
-    /**
-     * 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`
-     * - Modal body - `{testId}--body`
-     * - Modal footer - `{testId}--footer`
-     * - Scrollable element - `{testId}--scrollable`
-     * - Blanket - `{testId}--blanket`
-     */
-    testId?: string;
-}