react-responsive-modal 4.0.1 → 5.0.3

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 (35) hide show
  1. package/LICENSE +1 -1
  2. package/README.md +4 -35
  3. package/dist/CloseIcon.d.ts +19 -0
  4. package/dist/FocusTrap.d.ts +6 -0
  5. package/dist/focusTrapJs.d.ts +3 -0
  6. package/dist/index.d.ts +118 -0
  7. package/dist/index.js +8 -0
  8. package/dist/modalManager.d.ts +26 -0
  9. package/dist/react-responsive-modal.cjs.development.js +439 -0
  10. package/dist/react-responsive-modal.cjs.development.js.map +1 -0
  11. package/dist/react-responsive-modal.cjs.production.min.js +2 -0
  12. package/dist/react-responsive-modal.cjs.production.min.js.map +1 -0
  13. package/dist/react-responsive-modal.esm.js +432 -0
  14. package/dist/react-responsive-modal.esm.js.map +1 -0
  15. package/dist/utils.d.ts +3 -0
  16. package/package.json +57 -85
  17. package/src/CloseIcon.tsx +54 -0
  18. package/src/FocusTrap.tsx +54 -0
  19. package/src/focusTrapJs.ts +79 -0
  20. package/src/index.tsx +339 -0
  21. package/src/modalManager.ts +37 -0
  22. package/src/utils.ts +17 -0
  23. package/{src/styles.css → styles.css} +25 -19
  24. package/lib/index.es.js +0 -629
  25. package/lib/index.es.js.map +0 -1
  26. package/lib/index.js +0 -634
  27. package/lib/index.js.map +0 -1
  28. package/src/close-icon.js +0 -47
  29. package/src/index.js +0 -3
  30. package/src/modal-manager.js +0 -36
  31. package/src/modal.js +0 -394
  32. package/types/index.d.ts +0 -113
  33. package/types/test.tsx +0 -29
  34. package/types/tsconfig.json +0 -16
  35. package/types/tslint.json +0 -3
package/LICENSE CHANGED
@@ -1,6 +1,6 @@
1
1
  The MIT License (MIT)
2
2
 
3
- Copyright (c) 2018 Léo Pradel
3
+ Copyright (c) 2020 Léo Pradel
4
4
 
5
5
  Permission is hereby granted, free of charge, to any person obtaining a copy
6
6
  of this software and associated documentation files (the "Software"), to deal
package/README.md CHANGED
@@ -11,6 +11,7 @@ A simple responsive and accessible react modal compatible with React 16 and read
11
11
  - Centered modals.
12
12
  - Scrolling modals.
13
13
  - Multiple modals.
14
+ - Accessible modals.
14
15
  - Easily customizable via props.
15
16
 
16
17
  ## Documentation
@@ -40,7 +41,8 @@ Or with yarn: `yarn add react-responsive-modal`
40
41
  ```javascript
41
42
  import React from 'react';
42
43
  import ReactDOM from 'react-dom';
43
- import Modal from 'react-responsive-modal';
44
+ import 'react-responsive-modal/styles.css';
45
+ import { Modal } from 'react-responsive-modal';
44
46
 
45
47
  export default class App extends React.Component {
46
48
  state = {
@@ -73,40 +75,7 @@ ReactDOM.render(<App />, document.getElementById('app'));
73
75
 
74
76
  ## Props
75
77
 
76
- <!-- --begin-insert-props-- -->
77
-
78
- ### Modal
79
-
80
- | Name | Type | Default | Description |
81
- | ------------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
82
- | closeOnEsc | `bool` | `true` | Is the modal closable when user press esc key. |
83
- | closeOnOverlayClick | `bool` | `true` | Is the modal closable when user click on overlay. |
84
- | onEntered | `func` | `null` | Callback fired when the Modal is open and the animation is finished. |
85
- | onExited | `func` | `null` | Callback fired when the Modal has exited and the animation is finished. |
86
- | **onClose\*** | `func` | | Callback fired when the Modal is requested to be closed by a click on the overlay or when user press esc key. |
87
- | onEscKeyDown | `func` | `null` | Callback fired when the escape key is pressed. |
88
- | onOverlayClick | `func` | `null` | Callback fired when the overlay is clicked. |
89
- | **open\*** | `bool` | | Control if the modal is open or not. |
90
- | classNames | `object` | | An object containing classNames to style the modal, can have properties 'overlay' (classname for overlay div), 'modal' (classname for modal content div), 'closeButton' (classname for the button that contain the close icon), 'closeIcon' (classname for close icon svg). You can customize the transition with 'transitionEnter', 'transitionEnterActive', 'transitionExit', 'transitionExitActive' |
91
- | styles | `object` | | An object containing the styles objects to style the modal, can have properties 'overlay', 'modal', 'closeButton', 'closeIcon'. |
92
- | children | `node` | `null` | The content of the modal. |
93
- | center | `bool` | `false` | Should the dialog be centered. |
94
- | showCloseIcon | `bool` | `true` | Show the close icon. |
95
- | closeIconSize | `number` | `28` | Close icon size. |
96
- | closeIconSvgPath | `node` | `<path d="M28.5 9.62L26.38 7.5 18 15.88 9.62 7.5 7.5 9.62 15.88 18 7.5 26.38l2.12 2.12L18 20.12l8.38 8.38 2.12-2.12L20.12 18z" />` | A valid svg path to show as icon. |
97
- | animationDuration | `number` | `500` | Animation duration in milliseconds. |
98
- | container | `object` | | You can specify a container prop which should be of type `Element`. The portal will be rendered inside that element. The default behavior will create a div node and render it at the at the end of document.body. |
99
- | blockScroll | `bool` | `true` | Whether to block scrolling when dialog is open |
100
- | focusTrapped | `bool` | `false` | When the modal is open, trap focus within it |
101
- | focusTrapOptions | `object` | | Options to be passed to the focus trap, details available at https://github.com/davidtheclark/focus-trap#focustrap--createfocustrapelement-createoptions |
102
- | overlayId | `string` | `null` | id attribute for overlay |
103
- | modalId | `string` | `null` | id attribute for modal |
104
- | closeIconId | `string` | `null` | id attribute for close icon |
105
- | role | `string` | `'dialog'` | ARIA role for modal |
106
- | ariaLabelledby | `string` | | ARIA label for modal |
107
- | ariaDescribedby | `string` | | ARIA description for modal |
108
-
109
- <!-- --end-insert-props-- -->
78
+ Check the documentation: https://react-responsive-modal.leopradel.com/#props.
110
79
 
111
80
  ## License
112
81
 
package/dist/CloseIcon.d.ts ADDED
@@ -0,0 +1,19 @@
1
+ import React from 'react';
2
+ interface CloseIconProps {
3
+ id?: string;
4
+ closeIcon?: React.ReactNode;
5
+ styles?: {
6
+ closeButton?: React.CSSProperties;
7
+ closeIcon?: React.CSSProperties;
8
+ };
9
+ classNames?: {
10
+ closeButton?: string;
11
+ closeIcon?: string;
12
+ };
13
+ classes: {
14
+ closeButton?: string;
15
+ };
16
+ onClickCloseIcon: () => void;
17
+ }
18
+ declare const CloseIcon: ({ classes, classNames, styles, id, closeIcon, onClickCloseIcon, }: CloseIconProps) => JSX.Element;
19
+ export default CloseIcon;
package/dist/FocusTrap.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ /// <reference types="react" />
2
+ interface FocusTrapProps {
3
+ container?: React.RefObject<HTMLElement> | null;
4
+ }
5
+ export declare const FocusTrap: ({ container }: FocusTrapProps) => null;
6
+ export {};
package/dist/focusTrapJs.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ export declare const candidateSelectors: string[];
2
+ export declare function getAllTabbingElements(parentElem: any): any[];
3
+ export declare function tabTrappingKey(event: any, parentElem: any): boolean | undefined;
package/dist/index.d.ts ADDED
@@ -0,0 +1,118 @@
1
+ import React from 'react';
2
+ interface ModalProps {
3
+ /**
4
+ * Control if the modal is open or not.
5
+ */
6
+ open: boolean;
7
+ /**
8
+ * Should the dialog be centered.
9
+ *
10
+ * Default to false.
11
+ */
12
+ center?: boolean;
13
+ /**
14
+ * Is the modal closable when user press esc key.
15
+ *
16
+ * Default to true.
17
+ */
18
+ closeOnEsc?: boolean;
19
+ /**
20
+ * Is the modal closable when user click on overlay.
21
+ *
22
+ * Default to true.
23
+ */
24
+ closeOnOverlayClick?: boolean;
25
+ /**
26
+ * Whether to block scrolling when dialog is open.
27
+ *
28
+ * Default to true.
29
+ */
30
+ blockScroll?: boolean;
31
+ /**
32
+ * Show the close icon.
33
+ */
34
+ showCloseIcon?: boolean;
35
+ /**
36
+ * id attribute for the close icon button.
37
+ */
38
+ closeIconId?: string;
39
+ /**
40
+ * Custom icon to render (svg, img, etc...).
41
+ */
42
+ closeIcon?: React.ReactNode;
43
+ /**
44
+ * When the modal is open, trap focus within it.
45
+ *
46
+ * Default to true.
47
+ */
48
+ focusTrapped?: boolean;
49
+ /**
50
+ * You can specify a container prop which should be of type `Element`.
51
+ * The portal will be rendered inside that element.
52
+ * The default behavior will create a div node and render it at the at the end of document.body.
53
+ */
54
+ container?: Element;
55
+ /**
56
+ * An object containing classNames to style the modal.
57
+ */
58
+ classNames?: {
59
+ overlay?: string;
60
+ modal?: string;
61
+ closeButton?: string;
62
+ closeIcon?: string;
63
+ animationIn?: string;
64
+ animationOut?: string;
65
+ };
66
+ /**
67
+ * An object containing the styles objects to style the modal.
68
+ */
69
+ styles?: {
70
+ overlay?: React.CSSProperties;
71
+ modal?: React.CSSProperties;
72
+ closeButton?: React.CSSProperties;
73
+ closeIcon?: React.CSSProperties;
74
+ };
75
+ /**
76
+ * Animation duration in milliseconds.
77
+ *
78
+ * Default to 500.
79
+ */
80
+ animationDuration?: number;
81
+ /**
82
+ * ARIA role for modal
83
+ *
84
+ * Default to 'dialog'.
85
+ */
86
+ role?: string;
87
+ /**
88
+ * ARIA label for modal
89
+ */
90
+ ariaLabelledby?: string;
91
+ /**
92
+ * ARIA description for modal
93
+ */
94
+ ariaDescribedby?: string;
95
+ /**
96
+ * id attribute for modal
97
+ */
98
+ modalId?: string;
99
+ /**
100
+ * Callback fired when the Modal is requested to be closed by a click on the overlay or when user press esc key.
101
+ */
102
+ onClose: () => void;
103
+ /**
104
+ * Callback fired when the escape key is pressed.
105
+ */
106
+ onEscKeyDown?: (event: KeyboardEvent) => void;
107
+ /**
108
+ * Callback fired when the overlay is clicked.
109
+ */
110
+ onOverlayClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
111
+ /**
112
+ * Callback fired when the Modal has exited and the animation is finished.
113
+ */
114
+ onAnimationEnd?: () => void;
115
+ children?: React.ReactNode;
116
+ }
117
+ export declare const Modal: ({ open, center, blockScroll, closeOnEsc, closeOnOverlayClick, container, showCloseIcon, closeIconId, closeIcon, focusTrapped, animationDuration, classNames, styles, role, ariaDescribedby, ariaLabelledby, modalId, onClose, onEscKeyDown, onOverlayClick, onAnimationEnd, children, }: ModalProps) => React.ReactPortal | null;
118
+ export default Modal;
package/dist/index.js ADDED
@@ -0,0 +1,8 @@
1
+
2
+ 'use strict'
3
+
4
+ if (process.env.NODE_ENV === 'production') {
5
+ module.exports = require('./react-responsive-modal.cjs.production.min.js')
6
+ } else {
7
+ module.exports = require('./react-responsive-modal.cjs.development.js')
8
+ }
package/dist/modalManager.d.ts ADDED
@@ -0,0 +1,26 @@
1
+ declare const _default: {
2
+ /**
3
+ * Return the modals array
4
+ */
5
+ modals: () => {
6
+ element: HTMLDivElement;
7
+ blockScroll: boolean;
8
+ }[];
9
+ /**
10
+ * Register a new modal
11
+ */
12
+ add: (newModal: HTMLDivElement, blockScroll: boolean) => void;
13
+ /**
14
+ * Remove a modal
15
+ */
16
+ remove: (oldModal: HTMLDivElement) => void;
17
+ /**
18
+ * Check if the modal is the first one on the screen
19
+ */
20
+ isTopModal: (modal: HTMLDivElement) => boolean;
21
+ };
22
+ /**
23
+ * Handle the order of the modals.
24
+ * Inspired by the material-ui implementation.
25
+ */
26
+ export default _default;