@atlaskit/modal-dialog 15.2.8 → 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.
Files changed (44) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/close-button/package.json +1 -8
  3. package/dist/cjs/internal/components/modal-wrapper.js +2 -2
  4. package/dist/es2019/internal/components/modal-wrapper.js +3 -3
  5. package/dist/esm/internal/components/modal-wrapper.js +3 -3
  6. package/full-screen/package.json +1 -8
  7. package/hooks/package.json +1 -8
  8. package/modal-body/package.json +1 -8
  9. package/modal-dialog/package.json +1 -8
  10. package/modal-footer/package.json +1 -8
  11. package/modal-header/package.json +1 -8
  12. package/modal-title/package.json +1 -8
  13. package/modal-transition/package.json +1 -8
  14. package/package.json +4 -4
  15. package/types/package.json +1 -8
  16. package/dist/types-ts4.5/close-button.d.ts +0 -34
  17. package/dist/types-ts4.5/full-screen.d.ts +0 -10
  18. package/dist/types-ts4.5/hooks.d.ts +0 -2
  19. package/dist/types-ts4.5/index.d.ts +0 -9
  20. package/dist/types-ts4.5/internal/components/dialog-height.d.ts +0 -2
  21. package/dist/types-ts4.5/internal/components/dialog-width.d.ts +0 -2
  22. package/dist/types-ts4.5/internal/components/modal-dialog.d.ts +0 -9
  23. package/dist/types-ts4.5/internal/components/modal-wrapper.d.ts +0 -9
  24. package/dist/types-ts4.5/internal/components/positioner.d.ts +0 -14
  25. package/dist/types-ts4.5/internal/components/scroll-container.d.ts +0 -23
  26. package/dist/types-ts4.5/internal/context.d.ts +0 -30
  27. package/dist/types-ts4.5/internal/hooks/use-modal-stack.d.ts +0 -13
  28. package/dist/types-ts4.5/internal/hooks/use-on-motion-finish.d.ts +0 -11
  29. package/dist/types-ts4.5/internal/hooks/use-prevent-programmatic-scroll.d.ts +0 -7
  30. package/dist/types-ts4.5/internal/hooks/use-scroll.d.ts +0 -5
  31. package/dist/types-ts4.5/internal/pragmatic-drag-and-drop/disable-dragging-to-cross-origin-iframes/element.d.ts +0 -2
  32. package/dist/types-ts4.5/internal/pragmatic-drag-and-drop/disable-dragging-to-cross-origin-iframes/external.d.ts +0 -2
  33. package/dist/types-ts4.5/internal/pragmatic-drag-and-drop/disable-dragging-to-cross-origin-iframes/make-fix-for-adapter.d.ts +0 -11
  34. package/dist/types-ts4.5/internal/pragmatic-drag-and-drop/disable-dragging-to-cross-origin-iframes/text-selection.d.ts +0 -2
  35. package/dist/types-ts4.5/internal/scroll-context.d.ts +0 -11
  36. package/dist/types-ts4.5/internal/types.d.ts +0 -16
  37. package/dist/types-ts4.5/internal/width.d.ts +0 -10
  38. package/dist/types-ts4.5/modal-body.d.ts +0 -32
  39. package/dist/types-ts4.5/modal-dialog.d.ts +0 -15
  40. package/dist/types-ts4.5/modal-footer.d.ts +0 -28
  41. package/dist/types-ts4.5/modal-header.d.ts +0 -33
  42. package/dist/types-ts4.5/modal-title.d.ts +0 -38
  43. package/dist/types-ts4.5/modal-transition.d.ts +0 -13
  44. package/dist/types-ts4.5/types.d.ts +0 -118
package/CHANGELOG.md CHANGED
@@ -1,5 +1,22 @@
1
1
  # @atlaskit/modal-dialog
2
2
 
3
+ ## 15.3.1
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
9
+ ## 15.3.0
10
+
11
+ ### Minor Changes
12
+
13
+ - [`2fd74328732bf`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2fd74328732bf) -
14
+ Updated to use new motion in top layer dialog
15
+
16
+ ### Patch Changes
17
+
18
+ - Updated dependencies
19
+
3
20
  ## 15.2.8
4
21
 
5
22
  ### Patch Changes
@@ -6,12 +6,5 @@
6
6
  "sideEffects": [
7
7
  "**/*.compiled.css"
8
8
  ],
9
- "types": "../dist/types/close-button.d.ts",
10
- "typesVersions": {
11
- ">=4.5 <5.9": {
12
- "*": [
13
- "../dist/types-ts4.5/close-button.d.ts"
14
- ]
15
- }
16
- }
9
+ "types": "../dist/types/close-button.d.ts"
17
10
  }
@@ -42,7 +42,7 @@ var _dialogHeight = require("./dialog-height");
42
42
  var _dialogWidth = require("./dialog-width");
43
43
  var _modalDialog = _interopRequireDefault(require("./modal-dialog"));
44
44
  function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
45
- var modalAnimation = (0, _animations.dialogSlideUpAndFade)();
45
+ var modalAnimation = (0, _animations.dialogMotion)();
46
46
  var fillScreenStyles = null;
47
47
 
48
48
  // Visual styles for modal content inside native <dialog>.
@@ -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.2.7"
117
+ packageVersion: "15.3.0"
118
118
  });
119
119
  var onBlanketClicked = (0, _react.useCallback)(function (e) {
120
120
  if (shouldCloseOnOverlayClick) {
@@ -20,7 +20,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
20
20
  import Portal from '@atlaskit/portal';
21
21
  import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
22
22
  import { layers } from '@atlaskit/theme/constants';
23
- import { dialogSlideUpAndFade } from '@atlaskit/top-layer/animations';
23
+ import { dialogMotion } from '@atlaskit/top-layer/animations';
24
24
  import { createCloseEvent, Dialog } from '@atlaskit/top-layer/dialog';
25
25
  import { DialogScrollLock } from '@atlaskit/top-layer/dialog-scroll-lock';
26
26
  import { ModalContext, ScrollContext } from '../context';
@@ -32,7 +32,7 @@ import { disableDraggingToCrossOriginIFramesForTextSelection } from '../pragmati
32
32
  import { dialogHeight } from './dialog-height';
33
33
  import { dialogWidth as getDialogWidth } from './dialog-width';
34
34
  import ModalDialog from './modal-dialog';
35
- const modalAnimation = dialogSlideUpAndFade();
35
+ const modalAnimation = dialogMotion();
36
36
  const fillScreenStyles = null;
37
37
 
38
38
  // Visual styles for modal content inside native <dialog>.
@@ -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.2.7"
103
+ packageVersion: "15.3.0"
104
104
  });
105
105
  const onBlanketClicked = useCallback(e => {
106
106
  if (shouldCloseOnOverlayClick) {
@@ -21,7 +21,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
21
21
  import Portal from '@atlaskit/portal';
22
22
  import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
23
23
  import { layers } from '@atlaskit/theme/constants';
24
- import { dialogSlideUpAndFade } from '@atlaskit/top-layer/animations';
24
+ import { dialogMotion } from '@atlaskit/top-layer/animations';
25
25
  import { createCloseEvent, Dialog } from '@atlaskit/top-layer/dialog';
26
26
  import { DialogScrollLock } from '@atlaskit/top-layer/dialog-scroll-lock';
27
27
  import { ModalContext, ScrollContext } from '../context';
@@ -33,7 +33,7 @@ import { disableDraggingToCrossOriginIFramesForTextSelection } from '../pragmati
33
33
  import { dialogHeight } from './dialog-height';
34
34
  import { dialogWidth as getDialogWidth } from './dialog-width';
35
35
  import ModalDialog from './modal-dialog';
36
- var modalAnimation = dialogSlideUpAndFade();
36
+ var modalAnimation = dialogMotion();
37
37
  var fillScreenStyles = null;
38
38
 
39
39
  // Visual styles for modal content inside native <dialog>.
@@ -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.2.7"
108
+ packageVersion: "15.3.0"
109
109
  });
110
110
  var onBlanketClicked = useCallback(function (e) {
111
111
  if (shouldCloseOnOverlayClick) {
@@ -6,12 +6,5 @@
6
6
  "sideEffects": [
7
7
  "**/*.compiled.css"
8
8
  ],
9
- "types": "../dist/types/full-screen.d.ts",
10
- "typesVersions": {
11
- ">=4.5 <5.9": {
12
- "*": [
13
- "../dist/types-ts4.5/full-screen.d.ts"
14
- ]
15
- }
16
- }
9
+ "types": "../dist/types/full-screen.d.ts"
17
10
  }
@@ -6,12 +6,5 @@
6
6
  "sideEffects": [
7
7
  "**/*.compiled.css"
8
8
  ],
9
- "types": "../dist/types/hooks.d.ts",
10
- "typesVersions": {
11
- ">=4.5 <5.9": {
12
- "*": [
13
- "../dist/types-ts4.5/hooks.d.ts"
14
- ]
15
- }
16
- }
9
+ "types": "../dist/types/hooks.d.ts"
17
10
  }
@@ -6,12 +6,5 @@
6
6
  "sideEffects": [
7
7
  "**/*.compiled.css"
8
8
  ],
9
- "types": "../dist/types/modal-body.d.ts",
10
- "typesVersions": {
11
- ">=4.5 <5.9": {
12
- "*": [
13
- "../dist/types-ts4.5/modal-body.d.ts"
14
- ]
15
- }
16
- }
9
+ "types": "../dist/types/modal-body.d.ts"
17
10
  }
@@ -6,12 +6,5 @@
6
6
  "sideEffects": [
7
7
  "**/*.compiled.css"
8
8
  ],
9
- "types": "../dist/types/modal-dialog.d.ts",
10
- "typesVersions": {
11
- ">=4.5 <5.9": {
12
- "*": [
13
- "../dist/types-ts4.5/modal-dialog.d.ts"
14
- ]
15
- }
16
- }
9
+ "types": "../dist/types/modal-dialog.d.ts"
17
10
  }
@@ -6,12 +6,5 @@
6
6
  "sideEffects": [
7
7
  "**/*.compiled.css"
8
8
  ],
9
- "types": "../dist/types/modal-footer.d.ts",
10
- "typesVersions": {
11
- ">=4.5 <5.9": {
12
- "*": [
13
- "../dist/types-ts4.5/modal-footer.d.ts"
14
- ]
15
- }
16
- }
9
+ "types": "../dist/types/modal-footer.d.ts"
17
10
  }
@@ -6,12 +6,5 @@
6
6
  "sideEffects": [
7
7
  "**/*.compiled.css"
8
8
  ],
9
- "types": "../dist/types/modal-header.d.ts",
10
- "typesVersions": {
11
- ">=4.5 <5.9": {
12
- "*": [
13
- "../dist/types-ts4.5/modal-header.d.ts"
14
- ]
15
- }
16
- }
9
+ "types": "../dist/types/modal-header.d.ts"
17
10
  }
@@ -6,12 +6,5 @@
6
6
  "sideEffects": [
7
7
  "**/*.compiled.css"
8
8
  ],
9
- "types": "../dist/types/modal-title.d.ts",
10
- "typesVersions": {
11
- ">=4.5 <5.9": {
12
- "*": [
13
- "../dist/types-ts4.5/modal-title.d.ts"
14
- ]
15
- }
16
- }
9
+ "types": "../dist/types/modal-title.d.ts"
17
10
  }
@@ -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.2.8",
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/"
@@ -47,8 +47,8 @@
47
47
  "@atlaskit/pragmatic-drag-and-drop": "^1.8.0",
48
48
  "@atlaskit/primitives": "^19.0.0",
49
49
  "@atlaskit/theme": "^25.0.0",
50
- "@atlaskit/tokens": "^13.3.0",
51
- "@atlaskit/top-layer": "^0.16.0",
50
+ "@atlaskit/tokens": "^13.4.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",
@@ -76,7 +76,7 @@
76
76
  "@atlaskit/form": "^15.5.0",
77
77
  "@atlaskit/heading": "^5.4.0",
78
78
  "@atlaskit/link": "^3.4.0",
79
- "@atlaskit/popup": "^4.23.0",
79
+ "@atlaskit/popup": "^4.25.0",
80
80
  "@atlaskit/radio": "^8.6.0",
81
81
  "@atlaskit/section-message": "^8.13.0",
82
82
  "@atlaskit/select": "^21.12.0",
@@ -6,12 +6,5 @@
6
6
  "sideEffects": [
7
7
  "**/*.compiled.css"
8
8
  ],
9
- "types": "../dist/types/types.d.ts",
10
- "typesVersions": {
11
- ">=4.5 <5.9": {
12
- "*": [
13
- "../dist/types-ts4.5/types.d.ts"
14
- ]
15
- }
16
- }
9
+ "types": "../dist/types/types.d.ts"
17
10
  }
@@ -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,2 +0,0 @@
1
- import { type ModalAttributes } from './internal/context';
2
- export declare const useModal: () => ModalAttributes;
@@ -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,2 +0,0 @@
1
- import type { ModalDialogProps } from '../../types';
2
- export declare const dialogHeight: (input?: ModalDialogProps["height"]) => string;
@@ -1,2 +0,0 @@
1
- import type { ModalDialogProps } from '../../types';
2
- export declare const dialogWidth: (input?: ModalDialogProps["width"]) => string;
@@ -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,5 +0,0 @@
1
- /**
2
- * This returns whether or not scrolling is allowed based on the existing
3
- * scrolling context.
4
- */
5
- export default function useScroll(): boolean;
@@ -1,2 +0,0 @@
1
- import { type CleanupFn } from '@atlaskit/pragmatic-drag-and-drop/types';
2
- export declare function disableDraggingToCrossOriginIFramesForElement(): CleanupFn;
@@ -1,2 +0,0 @@
1
- import { type CleanupFn } from '@atlaskit/pragmatic-drag-and-drop/types';
2
- export declare function disableDraggingToCrossOriginIFramesForExternal(): CleanupFn;
@@ -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,2 +0,0 @@
1
- import { type CleanupFn } from '@atlaskit/pragmatic-drag-and-drop/types';
2
- export declare function disableDraggingToCrossOriginIFramesForTextSelection(): CleanupFn;
@@ -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,10 +0,0 @@
1
- import type { WidthNames } from '../types';
2
- interface Width {
3
- values: string[];
4
- widths: {
5
- [index in WidthNames]: number;
6
- };
7
- defaultValue: string;
8
- }
9
- export declare const width: Width;
10
- export {};
@@ -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
- }