@atlaskit/modal-dialog 15.3.0 → 15.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -0
- package/close-button/package.json +1 -8
- package/dist/cjs/internal/components/modal-wrapper.js +1 -1
- package/dist/es2019/internal/components/modal-wrapper.js +1 -1
- package/dist/esm/internal/components/modal-wrapper.js +1 -1
- package/full-screen/package.json +1 -8
- package/hooks/package.json +1 -8
- package/modal-body/package.json +1 -8
- package/modal-dialog/package.json +1 -8
- package/modal-footer/package.json +1 -8
- package/modal-header/package.json +1 -8
- package/modal-title/package.json +1 -8
- package/modal-transition/package.json +1 -8
- package/package.json +2 -2
- package/types/package.json +1 -8
- package/dist/types-ts4.5/close-button.d.ts +0 -34
- package/dist/types-ts4.5/full-screen.d.ts +0 -10
- package/dist/types-ts4.5/hooks.d.ts +0 -2
- package/dist/types-ts4.5/index.d.ts +0 -9
- package/dist/types-ts4.5/internal/components/dialog-height.d.ts +0 -2
- package/dist/types-ts4.5/internal/components/dialog-width.d.ts +0 -2
- package/dist/types-ts4.5/internal/components/modal-dialog.d.ts +0 -9
- package/dist/types-ts4.5/internal/components/modal-wrapper.d.ts +0 -9
- package/dist/types-ts4.5/internal/components/positioner.d.ts +0 -14
- package/dist/types-ts4.5/internal/components/scroll-container.d.ts +0 -23
- package/dist/types-ts4.5/internal/context.d.ts +0 -30
- package/dist/types-ts4.5/internal/hooks/use-modal-stack.d.ts +0 -13
- package/dist/types-ts4.5/internal/hooks/use-on-motion-finish.d.ts +0 -11
- package/dist/types-ts4.5/internal/hooks/use-prevent-programmatic-scroll.d.ts +0 -7
- package/dist/types-ts4.5/internal/hooks/use-scroll.d.ts +0 -5
- package/dist/types-ts4.5/internal/pragmatic-drag-and-drop/disable-dragging-to-cross-origin-iframes/element.d.ts +0 -2
- package/dist/types-ts4.5/internal/pragmatic-drag-and-drop/disable-dragging-to-cross-origin-iframes/external.d.ts +0 -2
- package/dist/types-ts4.5/internal/pragmatic-drag-and-drop/disable-dragging-to-cross-origin-iframes/make-fix-for-adapter.d.ts +0 -11
- package/dist/types-ts4.5/internal/pragmatic-drag-and-drop/disable-dragging-to-cross-origin-iframes/text-selection.d.ts +0 -2
- package/dist/types-ts4.5/internal/scroll-context.d.ts +0 -11
- package/dist/types-ts4.5/internal/types.d.ts +0 -16
- package/dist/types-ts4.5/internal/width.d.ts +0 -10
- package/dist/types-ts4.5/modal-body.d.ts +0 -32
- package/dist/types-ts4.5/modal-dialog.d.ts +0 -15
- package/dist/types-ts4.5/modal-footer.d.ts +0 -28
- package/dist/types-ts4.5/modal-header.d.ts +0 -33
- package/dist/types-ts4.5/modal-title.d.ts +0 -38
- package/dist/types-ts4.5/modal-transition.d.ts +0 -13
- package/dist/types-ts4.5/types.d.ts +0 -118
package/CHANGELOG.md
CHANGED
|
@@ -114,7 +114,7 @@ var InternalModalWrapper = /*#__PURE__*/(0, _react.forwardRef)(function (props,
|
|
|
114
114
|
action: 'closed',
|
|
115
115
|
componentName: 'modalDialog',
|
|
116
116
|
packageName: "@atlaskit/modal-dialog",
|
|
117
|
-
packageVersion: "15.
|
|
117
|
+
packageVersion: "15.3.0"
|
|
118
118
|
});
|
|
119
119
|
var onBlanketClicked = (0, _react.useCallback)(function (e) {
|
|
120
120
|
if (shouldCloseOnOverlayClick) {
|
|
@@ -100,7 +100,7 @@ const InternalModalWrapper = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
100
100
|
action: 'closed',
|
|
101
101
|
componentName: 'modalDialog',
|
|
102
102
|
packageName: "@atlaskit/modal-dialog",
|
|
103
|
-
packageVersion: "15.
|
|
103
|
+
packageVersion: "15.3.0"
|
|
104
104
|
});
|
|
105
105
|
const onBlanketClicked = useCallback(e => {
|
|
106
106
|
if (shouldCloseOnOverlayClick) {
|
|
@@ -105,7 +105,7 @@ var InternalModalWrapper = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
105
105
|
action: 'closed',
|
|
106
106
|
componentName: 'modalDialog',
|
|
107
107
|
packageName: "@atlaskit/modal-dialog",
|
|
108
|
-
packageVersion: "15.
|
|
108
|
+
packageVersion: "15.3.0"
|
|
109
109
|
});
|
|
110
110
|
var onBlanketClicked = useCallback(function (e) {
|
|
111
111
|
if (shouldCloseOnOverlayClick) {
|
package/full-screen/package.json
CHANGED
package/hooks/package.json
CHANGED
package/modal-body/package.json
CHANGED
package/modal-title/package.json
CHANGED
|
@@ -6,12 +6,5 @@
|
|
|
6
6
|
"sideEffects": [
|
|
7
7
|
"**/*.compiled.css"
|
|
8
8
|
],
|
|
9
|
-
"types": "../dist/types/modal-transition.d.ts"
|
|
10
|
-
"typesVersions": {
|
|
11
|
-
">=4.5 <5.9": {
|
|
12
|
-
"*": [
|
|
13
|
-
"../dist/types-ts4.5/modal-transition.d.ts"
|
|
14
|
-
]
|
|
15
|
-
}
|
|
16
|
-
}
|
|
9
|
+
"types": "../dist/types/modal-transition.d.ts"
|
|
17
10
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/modal-dialog",
|
|
3
|
-
"version": "15.3.
|
|
3
|
+
"version": "15.3.1",
|
|
4
4
|
"description": "A modal dialog displays content that requires user interaction, in a layer above the page.",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
"@atlaskit/primitives": "^19.0.0",
|
|
49
49
|
"@atlaskit/theme": "^25.0.0",
|
|
50
50
|
"@atlaskit/tokens": "^13.4.0",
|
|
51
|
-
"@atlaskit/top-layer": "^0.
|
|
51
|
+
"@atlaskit/top-layer": "^0.18.0",
|
|
52
52
|
"@babel/runtime": "^7.0.0",
|
|
53
53
|
"@compiled/react": "^0.20.0",
|
|
54
54
|
"bind-event-listener": "^3.0.0",
|
package/types/package.json
CHANGED
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
import React, { type FocusEventHandler } from 'react';
|
|
2
|
-
import { type OnCloseHandler } from './types';
|
|
3
|
-
type CloseButtonProps = {
|
|
4
|
-
/**
|
|
5
|
-
* The accessible name to give to the close button.
|
|
6
|
-
*/
|
|
7
|
-
label?: string;
|
|
8
|
-
/**
|
|
9
|
-
* The `onBlur` handler for the close button.
|
|
10
|
-
*/
|
|
11
|
-
onBlur?: FocusEventHandler<HTMLButtonElement>;
|
|
12
|
-
/**
|
|
13
|
-
* The same close handler you give to the top-level modal component.
|
|
14
|
-
*/
|
|
15
|
-
onClick: OnCloseHandler;
|
|
16
|
-
/**
|
|
17
|
-
* The prefix to use. Renders as `{testId}--close-button`.
|
|
18
|
-
*/
|
|
19
|
-
testId?: string;
|
|
20
|
-
};
|
|
21
|
-
/**
|
|
22
|
-
* __Close button__
|
|
23
|
-
*
|
|
24
|
-
* The close button is to be used for customized modal headers to ensure that
|
|
25
|
-
* all users have an accessible and obvious way to close the modal dialog.
|
|
26
|
-
*
|
|
27
|
-
* When using this in a custom header, ensure that the close button renders
|
|
28
|
-
* first in the DOM to make sure that users will encounter all elements of the
|
|
29
|
-
* modal dialog, including everything within the modal header. This can be done
|
|
30
|
-
* using a `Flex` primitive as the custom header's container with a flex
|
|
31
|
-
* direction of `row-reverse`.
|
|
32
|
-
*/
|
|
33
|
-
export declare const CloseButton: ({ label, onBlur, onClick, testId, }: CloseButtonProps) => React.JSX.Element;
|
|
34
|
-
export {};
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import type { ModalDialogProps } from './types';
|
|
3
|
-
export interface FullScreenModalDialogProps extends Omit<ModalDialogProps, 'width' | 'height' | 'shouldScrollInViewport' | 'shouldCloseOnOverlayClick' | 'isBlanketHidden'> {
|
|
4
|
-
}
|
|
5
|
-
export declare const FullScreenModalDialog: React.ForwardRefExoticComponent<React.PropsWithoutRef<FullScreenModalDialogProps> & React.RefAttributes<HTMLElement>>;
|
|
6
|
-
export { default as ModalTransition } from './modal-transition';
|
|
7
|
-
export { default as ModalHeader } from './modal-header';
|
|
8
|
-
export { default as ModalTitle } from './modal-title';
|
|
9
|
-
export { default as ModalBody } from './modal-body';
|
|
10
|
-
export { default as ModalFooter } from './modal-footer';
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
export { default } from './modal-dialog';
|
|
2
|
-
export { default as ModalTransition } from './modal-transition';
|
|
3
|
-
export type { KeyboardOrMouseEvent, Appearance, ModalAttributes, ModalDialogProps, ModalHeaderProps, ModalTitleProps, ModalBodyProps, ModalFooterProps, OnCloseHandler, OnCloseCompleteHandler, OnOpenCompleteHandler, OnStackChangeHandler, } from './types';
|
|
4
|
-
export { default as ModalHeader } from './modal-header';
|
|
5
|
-
export { default as ModalTitle } from './modal-title';
|
|
6
|
-
export { default as ModalBody } from './modal-body';
|
|
7
|
-
export { default as ModalFooter } from './modal-footer';
|
|
8
|
-
export { CloseButton } from './close-button';
|
|
9
|
-
export { useModal } from './hooks';
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @jsxRuntime classic
|
|
3
|
-
* @jsx jsx
|
|
4
|
-
*/
|
|
5
|
-
import type { InternalModalDialogProps } from '../types';
|
|
6
|
-
declare const ModalDialog: React.ForwardRefExoticComponent<React.PropsWithoutRef<InternalModalDialogProps> & React.RefAttributes<HTMLElement>>;
|
|
7
|
-
export default ModalDialog;
|
|
8
|
-
export { dialogWidth } from './dialog-width';
|
|
9
|
-
export { dialogHeight } from './dialog-height';
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @jsxRuntime classic
|
|
3
|
-
* @jsx jsx
|
|
4
|
-
*/
|
|
5
|
-
import type { ModalDialogProps } from '../../types';
|
|
6
|
-
import type { InternalModalWrapperProps } from '../types';
|
|
7
|
-
export type { ModalDialogProps };
|
|
8
|
-
declare const InternalModalWrapper: React.ForwardRefExoticComponent<React.PropsWithoutRef<InternalModalWrapperProps> & React.RefAttributes<HTMLElement>>;
|
|
9
|
-
export default InternalModalWrapper;
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @jsxRuntime classic
|
|
3
|
-
* @jsx jsx
|
|
4
|
-
*/
|
|
5
|
-
import { type ReactNode } from 'react';
|
|
6
|
-
interface PositionerProps {
|
|
7
|
-
children?: ReactNode;
|
|
8
|
-
stackIndex: number;
|
|
9
|
-
shouldScrollInViewport: boolean;
|
|
10
|
-
testId?: string;
|
|
11
|
-
isFullScreen: boolean;
|
|
12
|
-
}
|
|
13
|
-
declare const Positioner: (props: PositionerProps) => JSX.Element;
|
|
14
|
-
export default Positioner;
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @jsxRuntime classic
|
|
3
|
-
* @jsx jsx
|
|
4
|
-
*/
|
|
5
|
-
import React from 'react';
|
|
6
|
-
interface ScrollContainerProps {
|
|
7
|
-
/**
|
|
8
|
-
* Children of the body within modal dialog.
|
|
9
|
-
*/
|
|
10
|
-
children: React.ReactNode;
|
|
11
|
-
/**
|
|
12
|
-
* A `testId` prop is provided for specified elements,
|
|
13
|
-
* which is a unique string that appears as a data attribute `data-testid` in the rendered code,
|
|
14
|
-
* serving as a hook for automated tests.
|
|
15
|
-
*/
|
|
16
|
-
testId?: string;
|
|
17
|
-
}
|
|
18
|
-
/**
|
|
19
|
-
* A container that shows top and bottom keylines when the
|
|
20
|
-
* content overflows into the scrollable element.
|
|
21
|
-
*/
|
|
22
|
-
declare const ScrollContainer: React.ForwardRefExoticComponent<React.PropsWithoutRef<ScrollContainerProps> & React.RefAttributes<HTMLElement | null>>;
|
|
23
|
-
export default ScrollContainer;
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
import { type Context } from 'react';
|
|
2
|
-
import { type ModalDialogProps, type OnCloseHandler } from '../types';
|
|
3
|
-
export type ModalAttributes = {
|
|
4
|
-
/**
|
|
5
|
-
* Test ID passed to the modal dialog.
|
|
6
|
-
*/
|
|
7
|
-
testId?: ModalDialogProps['testId'];
|
|
8
|
-
/**
|
|
9
|
-
* Id referenced by the modal dialog's `aria-labelledby` attribute.
|
|
10
|
-
* This id should be assigned to the modal title element.
|
|
11
|
-
*/
|
|
12
|
-
titleId: string;
|
|
13
|
-
/**
|
|
14
|
-
* Callback function called when the modal dialog is requesting to be closed,
|
|
15
|
-
* wrapped in modal dialog's analytic event context.
|
|
16
|
-
*/
|
|
17
|
-
onClose: OnCloseHandler;
|
|
18
|
-
/**
|
|
19
|
-
* A boolean for if the onClose is provided. We define a `noop` as our onClose
|
|
20
|
-
* at the top level, but we need to know if one is provided for the close
|
|
21
|
-
* button to be rendered.
|
|
22
|
-
*/
|
|
23
|
-
hasProvidedOnClose?: boolean;
|
|
24
|
-
/**
|
|
25
|
-
* Whether or not the modal is fullscreen (when `width="full"` is passed to the modal).
|
|
26
|
-
*/
|
|
27
|
-
isFullScreen: boolean;
|
|
28
|
-
};
|
|
29
|
-
export declare const ModalContext: Context<ModalAttributes | null>;
|
|
30
|
-
export { ScrollContext } from './scroll-context';
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
interface ModalStackOpts {
|
|
2
|
-
/**
|
|
3
|
-
* Fired when the modal dialog stack has changed.
|
|
4
|
-
*/
|
|
5
|
-
onStackChange: (newStackIndex: number) => void;
|
|
6
|
-
}
|
|
7
|
-
/**
|
|
8
|
-
* Returns the position of the calling modal dialog in the modal dialog stack.
|
|
9
|
-
* Stack index of `0` is the highest position in the stack,
|
|
10
|
-
* with every higher number being behind in the stack.
|
|
11
|
-
*/
|
|
12
|
-
export default function useModalStack({ onStackChange }: ModalStackOpts): number;
|
|
13
|
-
export {};
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import { type RefObject } from 'react';
|
|
2
|
-
import type { Transition } from '@atlaskit/motion/types';
|
|
3
|
-
import { type ModalDialogProps } from '../../types';
|
|
4
|
-
/**
|
|
5
|
-
* This will run the respective passed in callback functions when modal is
|
|
6
|
-
* opened or closed.
|
|
7
|
-
*/
|
|
8
|
-
export default function useOnMotionFinish({ onOpenComplete, onCloseComplete, }: Pick<ModalDialogProps, 'onOpenComplete' | 'onCloseComplete'>): [
|
|
9
|
-
RefObject<HTMLElement>,
|
|
10
|
-
(state: Transition) => void
|
|
11
|
-
];
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Prevents programatic scrolling of the viewport with `scrollIntoView`.
|
|
3
|
-
* Should be used in conjunction with a scroll lock to prevent a user from scrolling.
|
|
4
|
-
*
|
|
5
|
-
* @returns scroll top offset of the viewport
|
|
6
|
-
*/
|
|
7
|
-
export default function usePreventProgrammaticScroll(): number;
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import { type CleanupFn } from '@atlaskit/pragmatic-drag-and-drop/types';
|
|
2
|
-
export declare function makeFixForAdapter({ watchForInteractionStart, watchForInteractionEnd, }: {
|
|
3
|
-
watchForInteractionStart: ({ start }: {
|
|
4
|
-
start: () => void;
|
|
5
|
-
}) => CleanupFn;
|
|
6
|
-
watchForInteractionEnd: ({ stop }: {
|
|
7
|
-
stop: () => void;
|
|
8
|
-
}) => CleanupFn;
|
|
9
|
-
}): {
|
|
10
|
-
registerUsage: () => CleanupFn;
|
|
11
|
-
};
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import { type Context } from 'react';
|
|
2
|
-
/**
|
|
3
|
-
* __Scroll context__
|
|
4
|
-
*
|
|
5
|
-
* A scroll context {description}.
|
|
6
|
-
*
|
|
7
|
-
* - [Examples](https://atlassian.design/components/{packageName}/examples)
|
|
8
|
-
* - [Code](https://atlassian.design/components/{packageName}/code)
|
|
9
|
-
* - [Usage](https://atlassian.design/components/{packageName}/usage)
|
|
10
|
-
*/
|
|
11
|
-
export declare const ScrollContext: Context<boolean | null>;
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import type { KeyboardOrMouseEvent, ModalDialogProps } from '../types';
|
|
2
|
-
export interface InternalModalWrapperProps extends ModalDialogProps {
|
|
3
|
-
/**
|
|
4
|
-
* Whether or not the modal is fullscreen, covering the entire viewport.
|
|
5
|
-
*/
|
|
6
|
-
isFullScreen?: boolean;
|
|
7
|
-
}
|
|
8
|
-
export interface InternalModalDialogProps extends InternalModalWrapperProps {
|
|
9
|
-
/**
|
|
10
|
-
* A boolean for if the onClose is provided. We define a `noop` as our onClose
|
|
11
|
-
* at the top level, but we need to know if one is provided for the close
|
|
12
|
-
* button to be rendered.
|
|
13
|
-
*/
|
|
14
|
-
hasProvidedOnClose: boolean;
|
|
15
|
-
onClose: (value: KeyboardOrMouseEvent) => void;
|
|
16
|
-
}
|
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @jsxRuntime classic
|
|
3
|
-
* @jsx jsx
|
|
4
|
-
*/
|
|
5
|
-
import React from 'react';
|
|
6
|
-
export interface ModalBodyProps {
|
|
7
|
-
/**
|
|
8
|
-
* Children of modal dialog footer.
|
|
9
|
-
*/
|
|
10
|
-
children: React.ReactNode;
|
|
11
|
-
/**
|
|
12
|
-
* A `testId` prop is provided for specified elements,
|
|
13
|
-
* which is a unique string that appears as a data attribute `data-testid` in the rendered code,
|
|
14
|
-
* serving as a hook for automated tests.
|
|
15
|
-
*/
|
|
16
|
-
testId?: string;
|
|
17
|
-
/**
|
|
18
|
-
* Determines whether inline padding will be applied. Defaults to true.
|
|
19
|
-
*/
|
|
20
|
-
hasInlinePadding?: boolean;
|
|
21
|
-
}
|
|
22
|
-
/**
|
|
23
|
-
* __Modal body__
|
|
24
|
-
*
|
|
25
|
-
* A modal body is used to display the main content of a modal.
|
|
26
|
-
*
|
|
27
|
-
* - [Examples](https://atlassian.design/components/modal-dialog/examples)
|
|
28
|
-
* - [Code](https://atlassian.design/components/modal-dialog/code#modal-body-props)
|
|
29
|
-
* - [Usage](https://atlassian.design/components/modal-dialog/usage)
|
|
30
|
-
*/
|
|
31
|
-
declare const ModalBody: (props: ModalBodyProps) => JSX.Element;
|
|
32
|
-
export default ModalBody;
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { type ModalDialogProps } from './internal/components/modal-wrapper';
|
|
3
|
-
export type { ModalDialogProps };
|
|
4
|
-
/**
|
|
5
|
-
* __Modal wrapper__
|
|
6
|
-
*
|
|
7
|
-
* A modal wrapper displays content that requires user interaction, in a layer above the page.
|
|
8
|
-
* This component is primary container for other modal components.
|
|
9
|
-
*
|
|
10
|
-
* - [Examples](https://atlassian.design/components/modal-dialog/examples)
|
|
11
|
-
* - [Code](https://atlassian.design/components/modal-dialog/code)
|
|
12
|
-
* - [Usage](https://atlassian.design/components/modal-dialog/usage)
|
|
13
|
-
*/
|
|
14
|
-
declare const ModalWrapper: React.ForwardRefExoticComponent<React.PropsWithoutRef<ModalDialogProps> & React.RefAttributes<HTMLElement>>;
|
|
15
|
-
export default ModalWrapper;
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @jsxRuntime classic
|
|
3
|
-
* @jsx jsx
|
|
4
|
-
*/
|
|
5
|
-
import { type ReactNode } from 'react';
|
|
6
|
-
export interface ModalFooterProps {
|
|
7
|
-
/**
|
|
8
|
-
* Children of modal dialog footer.
|
|
9
|
-
*/
|
|
10
|
-
children?: ReactNode;
|
|
11
|
-
/**
|
|
12
|
-
* A `testId` prop is provided for specified elements,
|
|
13
|
-
* which is a unique string that appears as a data attribute `data-testid` in the rendered code,
|
|
14
|
-
* serving as a hook for automated tests.
|
|
15
|
-
*/
|
|
16
|
-
testId?: string;
|
|
17
|
-
}
|
|
18
|
-
/**
|
|
19
|
-
* __Modal footer__
|
|
20
|
-
*
|
|
21
|
-
* A modal footer often contains a primary action and the ability to cancel and close the dialog, though can contain any React element.
|
|
22
|
-
*
|
|
23
|
-
* - [Examples](https://atlassian.design/components/modal-dialog/examples#modal-footer)
|
|
24
|
-
* - [Code](https://atlassian.design/components/modal-dialog/code#modal-footer-props)
|
|
25
|
-
* - [Usage](https://atlassian.design/components/modal-dialog/usage)
|
|
26
|
-
*/
|
|
27
|
-
declare const ModalFooter: (props: ModalFooterProps) => JSX.Element;
|
|
28
|
-
export default ModalFooter;
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @jsxRuntime classic
|
|
3
|
-
* @jsx jsx
|
|
4
|
-
*/
|
|
5
|
-
import React from 'react';
|
|
6
|
-
export interface ModalHeaderProps {
|
|
7
|
-
/**
|
|
8
|
-
* Children of modal dialog header.
|
|
9
|
-
*/
|
|
10
|
-
children?: React.ReactNode;
|
|
11
|
-
/**
|
|
12
|
-
* Shows a close button at the end of the header.
|
|
13
|
-
* @default false
|
|
14
|
-
*/
|
|
15
|
-
hasCloseButton?: boolean;
|
|
16
|
-
/**
|
|
17
|
-
* A `testId` prop is provided for specified elements,
|
|
18
|
-
* which is a unique string that appears as a data attribute `data-testid` in the rendered code,
|
|
19
|
-
* serving as a hook for automated tests.
|
|
20
|
-
*/
|
|
21
|
-
testId?: string;
|
|
22
|
-
}
|
|
23
|
-
/**
|
|
24
|
-
* __Modal header__
|
|
25
|
-
*
|
|
26
|
-
* A modal header contains the title of the modal and can contain other React elements such as a close button.
|
|
27
|
-
*
|
|
28
|
-
* - [Examples](https://atlassian.design/components/modal-dialog/examples#modal-header)
|
|
29
|
-
* - [Code](https://atlassian.design/components/modal-dialog/code#modal-header-props)
|
|
30
|
-
* - [Usage](https://atlassian.design/components/modal-dialog/usage)
|
|
31
|
-
*/
|
|
32
|
-
declare const ModalHeader: (props: ModalHeaderProps) => JSX.Element;
|
|
33
|
-
export default ModalHeader;
|
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @jsxRuntime classic
|
|
3
|
-
* @jsx jsx
|
|
4
|
-
*/
|
|
5
|
-
import { type ReactNode } from 'react';
|
|
6
|
-
import { type Appearance } from './types';
|
|
7
|
-
export interface ModalTitleProps {
|
|
8
|
-
/**
|
|
9
|
-
* Appearance of the modal that changes the color of the primary action and adds an icon to the title.
|
|
10
|
-
*/
|
|
11
|
-
appearance?: Appearance;
|
|
12
|
-
/**
|
|
13
|
-
* Children of modal dialog header.
|
|
14
|
-
*/
|
|
15
|
-
children?: ReactNode;
|
|
16
|
-
/**
|
|
17
|
-
* When `true` will allow the title to span multiple lines.
|
|
18
|
-
* Defaults to `true`.
|
|
19
|
-
*/
|
|
20
|
-
isMultiline?: boolean;
|
|
21
|
-
/**
|
|
22
|
-
* A `testId` prop is provided for specified elements,
|
|
23
|
-
* which is a unique string that appears as a data attribute `data-testid` in the rendered code,
|
|
24
|
-
* serving as a hook for automated tests.
|
|
25
|
-
*/
|
|
26
|
-
testId?: string;
|
|
27
|
-
}
|
|
28
|
-
/**
|
|
29
|
-
* __Modal title__
|
|
30
|
-
*
|
|
31
|
-
* A modal title is used to display a title within a modal.
|
|
32
|
-
*
|
|
33
|
-
* - [Examples](https://atlassian.design/components/modal-dialog/examples)
|
|
34
|
-
* - [Code](https://atlassian.design/components/modal-dialog/code)
|
|
35
|
-
* - [Usage](https://atlassian.design/components/modal-dialog/usage)
|
|
36
|
-
*/
|
|
37
|
-
declare const ModalTitle: (props: ModalTitleProps) => JSX.Element;
|
|
38
|
-
export default ModalTitle;
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { type ExitingPersistenceProps } from '@atlaskit/motion/exiting-persistence';
|
|
3
|
-
/**
|
|
4
|
-
* __Modal transition__
|
|
5
|
-
*
|
|
6
|
-
* A modal transition wraps a modal to provide a fluid transition upon opening and closing.
|
|
7
|
-
*
|
|
8
|
-
* - [Examples](https://atlassian.design/components/modal-dialog/examples)
|
|
9
|
-
* - [Code](https://atlassian.design/components/modal-dialog/code)
|
|
10
|
-
* - [Usage](https://atlassian.design/components/modal-dialog/usage)
|
|
11
|
-
*/
|
|
12
|
-
declare const ModalTransition: (props: Pick<ExitingPersistenceProps, "children">) => React.JSX.Element;
|
|
13
|
-
export default ModalTransition;
|
|
@@ -1,118 +0,0 @@
|
|
|
1
|
-
import { type default as React, type RefObject } from 'react';
|
|
2
|
-
import type { UIAnalyticsEvent } from '@atlaskit/analytics-next';
|
|
3
|
-
export type WidthNames = 'small' | 'medium' | 'large' | 'x-large';
|
|
4
|
-
export type KeyboardOrMouseEvent = React.MouseEvent<any> | React.KeyboardEvent<any> | KeyboardEvent;
|
|
5
|
-
export type Appearance = 'danger' | 'warning';
|
|
6
|
-
export type OnCloseHandler = (e: KeyboardOrMouseEvent, analyticEvent: UIAnalyticsEvent) => void;
|
|
7
|
-
export type OnCloseCompleteHandler = (element: HTMLElement) => void;
|
|
8
|
-
export type OnOpenCompleteHandler = (node: HTMLElement, isAppearing: boolean) => void;
|
|
9
|
-
export type OnStackChangeHandler = (stackIndex: number) => void;
|
|
10
|
-
export type { ModalHeaderProps } from './modal-header';
|
|
11
|
-
export type { ModalTitleProps } from './modal-title';
|
|
12
|
-
export type { ModalBodyProps } from './modal-body';
|
|
13
|
-
export type { ModalFooterProps } from './modal-footer';
|
|
14
|
-
export type { ModalAttributes } from './internal/context';
|
|
15
|
-
export interface ModalDialogProps {
|
|
16
|
-
/**
|
|
17
|
-
* Pass an element `ref` to focus on a specific element on load. Default
|
|
18
|
-
* behavior is focus is moved to the first interactive element inside the
|
|
19
|
-
* modal dialog.
|
|
20
|
-
*/
|
|
21
|
-
autoFocus?: RefObject<HTMLElement | null | undefined>;
|
|
22
|
-
/**
|
|
23
|
-
* Contents of the modal dialog.
|
|
24
|
-
*/
|
|
25
|
-
children?: React.ReactNode;
|
|
26
|
-
/**
|
|
27
|
-
* Callback function which lets you allowlist nodes so they can be interacted with outside of the focus lock.
|
|
28
|
-
* Return `true` if focus lock should handle element, `false` if not.
|
|
29
|
-
*/
|
|
30
|
-
focusLockAllowlist?: (element: HTMLElement) => boolean;
|
|
31
|
-
/**
|
|
32
|
-
* Height of the modal dialog.
|
|
33
|
-
* When unset the modal dialog will grow to fill the viewport and then start overflowing its contents.
|
|
34
|
-
*/
|
|
35
|
-
height?: number | string;
|
|
36
|
-
/**
|
|
37
|
-
* Width of the modal dialog.
|
|
38
|
-
* The recommended way to specify modal width is using named size options.
|
|
39
|
-
*/
|
|
40
|
-
width?: number | string | WidthNames;
|
|
41
|
-
/**
|
|
42
|
-
* Callback function called when the modal dialog is requesting to be closed.
|
|
43
|
-
*/
|
|
44
|
-
onClose?: OnCloseHandler;
|
|
45
|
-
/**
|
|
46
|
-
* Callback function called when the modal dialog has finished closing.
|
|
47
|
-
*/
|
|
48
|
-
onCloseComplete?: OnCloseCompleteHandler;
|
|
49
|
-
/**
|
|
50
|
-
* Callback function called when the modal dialog has finished opening.
|
|
51
|
-
*/
|
|
52
|
-
onOpenComplete?: OnOpenCompleteHandler;
|
|
53
|
-
/**
|
|
54
|
-
* Callback function called when the modal changes position in the stack.
|
|
55
|
-
*/
|
|
56
|
-
onStackChange?: OnStackChangeHandler;
|
|
57
|
-
/**
|
|
58
|
-
* Will set the scroll boundary to the viewport.
|
|
59
|
-
* If set to false, the scroll boundary is set to the modal dialog body.
|
|
60
|
-
*/
|
|
61
|
-
shouldScrollInViewport?: boolean;
|
|
62
|
-
/**
|
|
63
|
-
* Calls `onClose` when clicking the blanket behind the modal dialog.
|
|
64
|
-
*/
|
|
65
|
-
shouldCloseOnOverlayClick?: boolean;
|
|
66
|
-
/**
|
|
67
|
-
* Calls `onClose` when pressing escape.
|
|
68
|
-
*/
|
|
69
|
-
shouldCloseOnEscapePress?: boolean;
|
|
70
|
-
/**
|
|
71
|
-
* ReturnFocus controls what happens when the user exits
|
|
72
|
-
* focus lock mode. If true, focus returns to the element that had focus before focus lock
|
|
73
|
-
* was activated. If false, focus remains where it was when the FocusLock was deactivated.
|
|
74
|
-
* If ref is passed, focus returns to that specific ref element.
|
|
75
|
-
*/
|
|
76
|
-
shouldReturnFocus?: boolean | RefObject<HTMLElement>;
|
|
77
|
-
/**
|
|
78
|
-
* Will remove the blanket tinted background color.
|
|
79
|
-
*/
|
|
80
|
-
isBlanketHidden?: boolean;
|
|
81
|
-
/**
|
|
82
|
-
* The stackIndex is a reference to the position (index) of the calling dialog in a modal dialog stack.
|
|
83
|
-
* New modals added to the stack receive the highest stack index of 0. As more modals are added to the stack, their index is dynamically increased according to their new position.
|
|
84
|
-
* Don't alter the modal stack position using `stackIndex` in implementations of third-party libraries (e.g. AUI modal), it may lead to unpredictable bugs, especially if the third party library has its own focus lock.
|
|
85
|
-
* Additionally, each modal in the stack gets a vertical offset based on `stackIndex` value.
|
|
86
|
-
*/
|
|
87
|
-
stackIndex?: number;
|
|
88
|
-
/**
|
|
89
|
-
* The label of the modal dialog that is announced to users of assistive
|
|
90
|
-
* technology. This should only be used if there is no modal title being
|
|
91
|
-
* associated to your modal, either via using the modal title component or the
|
|
92
|
-
* `titleId` prop within the `useModal` context.
|
|
93
|
-
*/
|
|
94
|
-
label?: string;
|
|
95
|
-
/**
|
|
96
|
-
* A `testId` prop is provided for specified elements,
|
|
97
|
-
* which is a unique string that appears as a data attribute `data-testid` in the rendered code,
|
|
98
|
-
* serving as a hook for automated tests.
|
|
99
|
-
* If not overridden using `testId` prop in the respective components, this will set `data-testid` on these elements when defined:
|
|
100
|
-
* - Modal dialog: `{testId}`
|
|
101
|
-
* - Modal header: `{testId}--header`
|
|
102
|
-
* - Close button: `{testId}--close-button`
|
|
103
|
-
* - Modal title: `{testId}--title`
|
|
104
|
-
* - Modal body: `{testId}--body`
|
|
105
|
-
* - Modal footer: `{testId}--footer`
|
|
106
|
-
* - Scrollable element: `{testId}--scrollable`
|
|
107
|
-
* - Blanket: `{testId}--blanket`
|
|
108
|
-
*/
|
|
109
|
-
testId?: string;
|
|
110
|
-
/**
|
|
111
|
-
* @internal NOT FOR PUBLIC USE.
|
|
112
|
-
* This prop is used to disable the new motion uplift.
|
|
113
|
-
* It is strictly only used for cases where the motion uplift is not working as expected.
|
|
114
|
-
*
|
|
115
|
-
* @warning Use with caution. This prop will be removed in a future release.
|
|
116
|
-
*/
|
|
117
|
-
UNSAFE_shouldDisableMotionUplift?: boolean | undefined;
|
|
118
|
-
}
|