@atlaskit/modal-dialog 12.0.2

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

@@ -0,0 +1,16 @@
+/** @jsx jsx */
+import React from '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;
+}
+declare const ModalHeader: (props: ModalHeaderProps) => JSX.Element;
+export default ModalHeader;

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

@@ -0,0 +1,26 @@
+/** @jsx jsx */
+import { ReactNode } from '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;
+}
+declare const ModalTitle: (props: ModalTitleProps) => JSX.Element;
+export default ModalTitle;

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

@@ -0,0 +1,3 @@
+import { ExitingPersistenceProps } from '@atlaskit/motion/exiting-persistence';
+declare const ModalTransition: (props: Pick<ExitingPersistenceProps, 'children'>) => JSX.Element;
+export default ModalTransition;

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

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

package/dist/types/types.d.ts

@@ -0,0 +1,90 @@
+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;
+}

package/extract-react-types/modal-attributes.tsx

@@ -0,0 +1,5 @@
+import { ModalAttributes } from '../src/internal/context';
+
+export default function ModalAttributesFunction(props: ModalAttributes) {
+  return null;
+}

package/hooks/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@atlaskit/modal-dialog/hooks",
+  "main": "../dist/cjs/hooks.js",
+  "module": "../dist/esm/hooks.js",
+  "module:es2019": "../dist/es2019/hooks.js",
+  "types": "../dist/types/hooks.d.ts"
+}

package/modal-body/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@atlaskit/modal-dialog/modal-body",
+  "main": "../dist/cjs/modal-body.js",
+  "module": "../dist/esm/modal-body.js",
+  "module:es2019": "../dist/es2019/modal-body.js",
+  "types": "../dist/types/modal-body.d.ts"
+}

package/modal-dialog/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@atlaskit/modal-dialog/modal-dialog",
+  "main": "../dist/cjs/modal-wrapper.js",
+  "module": "../dist/esm/modal-wrapper.js",
+  "module:es2019": "../dist/es2019/modal-wrapper.js",
+  "types": "../dist/types/modal-wrapper.d.ts"
+}

package/modal-footer/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@atlaskit/modal-dialog/modal-footer",
+  "main": "../dist/cjs/modal-footer.js",
+  "module": "../dist/esm/modal-footer.js",
+  "module:es2019": "../dist/es2019/modal-footer.js",
+  "types": "../dist/types/modal-footer.d.ts"
+}

package/modal-header/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@atlaskit/modal-dialog/modal-header",
+  "main": "../dist/cjs/modal-header.js",
+  "module": "../dist/esm/modal-header.js",
+  "module:es2019": "../dist/es2019/modal-header.js",
+  "types": "../dist/types/modal-header.d.ts"
+}

package/modal-title/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@atlaskit/modal-dialog/modal-title",
+  "main": "../dist/cjs/modal-title.js",
+  "module": "../dist/esm/modal-title.js",
+  "module:es2019": "../dist/es2019/modal-title.js",
+  "types": "../dist/types/modal-title.d.ts"
+}

package/modal-transition/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@atlaskit/modal-dialog/modal-transition",
+  "main": "../dist/cjs/modal-transition.js",
+  "module": "../dist/esm/modal-transition.js",
+  "module:es2019": "../dist/es2019/modal-transition.js",
+  "types": "../dist/types/modal-transition.d.ts"
+}

package/package.json

@@ -0,0 +1,113 @@
+{
+  "name": "@atlaskit/modal-dialog",
+  "version": "12.0.2",
+  "description": "A modal dialog displays content that requires user interaction, in a layer above the page.",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "repository": "https://bitbucket.org/atlassian/atlassian-frontend",
+  "author": "Atlassian Pty Ltd",
+  "license": "Apache-2.0",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "module:es2019": "dist/es2019/index.js",
+  "types": "dist/types/index.d.ts",
+  "sideEffects": false,
+  "af:exports": {
+    ".": "./src/index.ts",
+    "./types": "./src/types.ts",
+    "./hooks": "./src/hooks.ts",
+    "./modal-dialog": "./src/modal-wrapper.tsx",
+    "./modal-header": "./src/modal-header.tsx",
+    "./modal-title": "./src/modal-title.tsx",
+    "./modal-body": "./src/modal-body.tsx",
+    "./modal-footer": "./src/modal-footer.tsx",
+    "./modal-transition": "./src/modal-transition.tsx"
+  },
+  "atlaskit:src": "src/index.ts",
+  "atlassian": {
+    "team": "Design System Team",
+    "inPublicMirror": true,
+    "releaseModel": "scheduled",
+    "website": {
+      "name": "Modal dialog"
+    }
+  },
+  "scripts": {
+    "watch": "tsc --watch --noEmit --project './tsconfig.json'"
+  },
+  "dependencies": {
+    "@atlaskit/analytics-next": "^8.2.0",
+    "@atlaskit/blanket": "^12.2.0",
+    "@atlaskit/codemod-utils": "^3.4.0",
+    "@atlaskit/ds-lib": "^1.3.0",
+    "@atlaskit/focus-ring": "0.2.2",
+    "@atlaskit/icon": "^21.9.0",
+    "@atlaskit/motion": "^1.0.0",
+    "@atlaskit/portal": "^4.1.0",
+    "@atlaskit/theme": "^12.0.0",
+    "@babel/runtime": "^7.0.0",
+    "@emotion/core": "^10.0.9",
+    "raf-schd": "^2.1.0",
+    "react-focus-lock": "^1.19.1",
+    "react-scrolllock": "^5.0.1",
+    "react-uid": "^2.2.0"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0"
+  },
+  "devDependencies": {
+    "@atlaskit/avatar": "*",
+    "@atlaskit/avatar-group": "*",
+    "@atlaskit/breadcrumbs": "*",
+    "@atlaskit/build-utils": "*",
+    "@atlaskit/button": "*",
+    "@atlaskit/checkbox": "*",
+    "@atlaskit/datetime-picker": "*",
+    "@atlaskit/docs": "*",
+    "@atlaskit/dropdown-menu": "*",
+    "@atlaskit/flag": "*",
+    "@atlaskit/form": "*",
+    "@atlaskit/inline-dialog": "*",
+    "@atlaskit/popup": "*",
+    "@atlaskit/radio": "*",
+    "@atlaskit/section-message": "*",
+    "@atlaskit/select": "*",
+    "@atlaskit/ssr": "*",
+    "@atlaskit/textfield": "*",
+    "@atlaskit/tooltip": "*",
+    "@atlaskit/visual-regression": "*",
+    "@atlaskit/webdriver-runner": "*",
+    "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
+    "@testing-library/dom": "^7.7.3",
+    "@testing-library/react": "^8.0.1",
+    "@testing-library/react-hooks": "^1.0.4",
+    "@types/react-beautiful-dnd": "^11.0.1",
+    "jscodeshift": "^0.13.0",
+    "react-beautiful-dnd": "^12.1.1",
+    "react-dom": "^16.8.0",
+    "react-lorem-component": "^0.13.0",
+    "storybook-addon-performance": "^0.16.0",
+    "typescript": "3.9.6",
+    "wait-for-expect": "^1.2.0"
+  },
+  "keywords": [
+    "atlaskit",
+    "react",
+    "ui"
+  ],
+  "techstack": {
+    "@atlassian/frontend": {
+      "import-structure": "atlassian-conventions"
+    },
+    "@repo/internal": {
+      "ui-components": "lite-mode",
+      "analytics": "analytics-next",
+      "theming": "new-theming-api",
+      "deprecation": "no-deprecated-imports",
+      "styling": "emotion"
+    }
+  },
+  "homepage": "https://atlassian.design/components/modal-dialog/",
+  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
+}

package/types/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@atlaskit/modal-dialog/types",
+  "main": "../dist/cjs/types.js",
+  "module": "../dist/esm/types.js",
+  "module:es2019": "../dist/es2019/types.js",
+  "types": "../dist/types/types.d.ts"
+}