@inertiaui/modal-react 0.15.0 → 0.16.0
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/dist/inertiaui-modal.js +1845 -1832
- package/dist/inertiaui-modal.umd.cjs +13 -20
- package/package.json +5 -4
- package/src/Modal.jsx +6 -13
- package/src/ModalContent.jsx +15 -24
- package/src/SlideoverContent.jsx +15 -24
- package/src/helpers.js +2 -2
- package/src/useFocusTrap.js +0 -25
package/src/ModalContent.jsx
CHANGED
|
@@ -1,11 +1,8 @@
|
|
|
1
|
-
import { TransitionChild } from '@headlessui/react'
|
|
1
|
+
import { TransitionChild, DialogPanel } from '@headlessui/react'
|
|
2
2
|
import CloseButton from './CloseButton'
|
|
3
3
|
import clsx from 'clsx'
|
|
4
|
-
import { useFocusTrap } from './useFocusTrap'
|
|
5
4
|
|
|
6
5
|
const ModalContent = ({ modalContext, config, children }) => {
|
|
7
|
-
const wrapper = useFocusTrap(config?.closeExplicitly, () => modalContext.close())
|
|
8
|
-
|
|
9
6
|
return (
|
|
10
7
|
<div className="im-modal-container fixed inset-0 z-40 overflow-y-auto p-4">
|
|
11
8
|
<div
|
|
@@ -16,38 +13,32 @@ const ModalContent = ({ modalContext, config, children }) => {
|
|
|
16
13
|
})}
|
|
17
14
|
>
|
|
18
15
|
<TransitionChild
|
|
19
|
-
as="div"
|
|
20
|
-
ref={wrapper}
|
|
21
16
|
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
|
22
17
|
enterTo="opacity-100 translate-y-0 sm:scale-100"
|
|
23
18
|
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
|
|
24
19
|
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
|
25
20
|
afterLeave={modalContext.afterLeave}
|
|
26
|
-
className={clsx(
|
|
27
|
-
'
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
'sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-5xl 2xl:max-w-6xl': config.maxWidth === '6xl',
|
|
39
|
-
'sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-5xl 2xl:max-w-7xl': config.maxWidth === '7xl',
|
|
40
|
-
},
|
|
41
|
-
)}
|
|
21
|
+
className={clsx('im-modal-wrapper w-full transition duration-300 ease-in-out', modalContext.onTopOfStack ? '' : 'blur-sm', {
|
|
22
|
+
'sm:max-w-sm': config.maxWidth === 'sm',
|
|
23
|
+
'sm:max-w-md': config.maxWidth === 'md',
|
|
24
|
+
'sm:max-w-md md:max-w-lg': config.maxWidth === 'lg',
|
|
25
|
+
'sm:max-w-md md:max-w-xl': config.maxWidth === 'xl',
|
|
26
|
+
'sm:max-w-md md:max-w-xl lg:max-w-2xl': config.maxWidth === '2xl',
|
|
27
|
+
'sm:max-w-md md:max-w-xl lg:max-w-3xl': config.maxWidth === '3xl',
|
|
28
|
+
'sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-4xl': config.maxWidth === '4xl',
|
|
29
|
+
'sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-5xl': config.maxWidth === '5xl',
|
|
30
|
+
'sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-5xl 2xl:max-w-6xl': config.maxWidth === '6xl',
|
|
31
|
+
'sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-5xl 2xl:max-w-7xl': config.maxWidth === '7xl',
|
|
32
|
+
})}
|
|
42
33
|
>
|
|
43
|
-
<
|
|
34
|
+
<DialogPanel className={`im-modal-content relative ${config.paddingClasses} ${config.panelClasses}`}>
|
|
44
35
|
{config.closeButton && (
|
|
45
36
|
<div className="absolute right-0 top-0 pr-3 pt-3">
|
|
46
37
|
<CloseButton onClick={modalContext.close} />
|
|
47
38
|
</div>
|
|
48
39
|
)}
|
|
49
40
|
{typeof children === 'function' ? children({ modalContext, config }) : children}
|
|
50
|
-
</
|
|
41
|
+
</DialogPanel>
|
|
51
42
|
</TransitionChild>
|
|
52
43
|
</div>
|
|
53
44
|
</div>
|
package/src/SlideoverContent.jsx
CHANGED
|
@@ -1,11 +1,8 @@
|
|
|
1
|
-
import { TransitionChild } from '@headlessui/react'
|
|
1
|
+
import { TransitionChild, DialogPanel } from '@headlessui/react'
|
|
2
2
|
import CloseButton from './CloseButton'
|
|
3
3
|
import clsx from 'clsx'
|
|
4
|
-
import { useFocusTrap } from './useFocusTrap'
|
|
5
4
|
|
|
6
5
|
const SlideoverContent = ({ modalContext, config, children }) => {
|
|
7
|
-
const wrapper = useFocusTrap(config?.closeExplicitly, () => modalContext.close())
|
|
8
|
-
|
|
9
6
|
return (
|
|
10
7
|
<div className="im-slideover-container fixed inset-0 z-40 overflow-y-auto overflow-x-hidden">
|
|
11
8
|
<div
|
|
@@ -15,38 +12,32 @@ const SlideoverContent = ({ modalContext, config, children }) => {
|
|
|
15
12
|
})}
|
|
16
13
|
>
|
|
17
14
|
<TransitionChild
|
|
18
|
-
as="div"
|
|
19
|
-
ref={wrapper}
|
|
20
15
|
enterFrom={`opacity-0 ${config.position === 'left' ? '-translate-x-full' : 'translate-x-full'}`}
|
|
21
16
|
enterTo="opacity-100 translate-x-0"
|
|
22
17
|
leaveFrom="opacity-100 translate-x-0"
|
|
23
18
|
leaveTo={`opacity-0 ${config.position === 'left' ? '-translate-x-full' : 'translate-x-full'}`}
|
|
24
19
|
afterLeave={modalContext.afterLeave}
|
|
25
|
-
className={clsx(
|
|
26
|
-
'
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
'sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-5xl 2xl:max-w-6xl': config.maxWidth === '6xl',
|
|
38
|
-
'sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-5xl 2xl:max-w-7xl': config.maxWidth === '7xl',
|
|
39
|
-
},
|
|
40
|
-
)}
|
|
20
|
+
className={clsx('im-slideover-wrapper w-full transition duration-300 ease-in-out', modalContext.onTopOfStack ? '' : 'blur-sm', {
|
|
21
|
+
'sm:max-w-sm': config.maxWidth === 'sm',
|
|
22
|
+
'sm:max-w-md': config.maxWidth === 'md',
|
|
23
|
+
'sm:max-w-md md:max-w-lg': config.maxWidth === 'lg',
|
|
24
|
+
'sm:max-w-md md:max-w-xl': config.maxWidth === 'xl',
|
|
25
|
+
'sm:max-w-md md:max-w-xl lg:max-w-2xl': config.maxWidth === '2xl',
|
|
26
|
+
'sm:max-w-md md:max-w-xl lg:max-w-3xl': config.maxWidth === '3xl',
|
|
27
|
+
'sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-4xl': config.maxWidth === '4xl',
|
|
28
|
+
'sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-5xl': config.maxWidth === '5xl',
|
|
29
|
+
'sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-5xl 2xl:max-w-6xl': config.maxWidth === '6xl',
|
|
30
|
+
'sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-5xl 2xl:max-w-7xl': config.maxWidth === '7xl',
|
|
31
|
+
})}
|
|
41
32
|
>
|
|
42
|
-
<
|
|
33
|
+
<DialogPanel className={`im-slideover-content relative ${config.paddingClasses} ${config.panelClasses}`}>
|
|
43
34
|
{config.closeButton && (
|
|
44
35
|
<div className="absolute right-0 top-0 pr-3 pt-3">
|
|
45
36
|
<CloseButton onClick={modalContext.close} />
|
|
46
37
|
</div>
|
|
47
38
|
)}
|
|
48
39
|
{typeof children === 'function' ? children({ modalContext, config }) : children}
|
|
49
|
-
</
|
|
40
|
+
</DialogPanel>
|
|
50
41
|
</TransitionChild>
|
|
51
42
|
</div>
|
|
52
43
|
</div>
|
package/src/helpers.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import {
|
|
2
|
-
export {
|
|
1
|
+
import { except, only, rejectNullValues, waitFor, kebabCase } from './../../vue/src/helpers.js'
|
|
2
|
+
export { except, only, rejectNullValues, waitFor, kebabCase }
|
package/src/useFocusTrap.js
DELETED
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
import { useEffect, useRef } from 'react'
|
|
2
|
-
import { createFocusTrap } from 'focus-trap'
|
|
3
|
-
|
|
4
|
-
export function useFocusTrap(closeExplicitly, onDeactivateCallback) {
|
|
5
|
-
const wrapperRef = useRef(null)
|
|
6
|
-
|
|
7
|
-
useEffect(() => {
|
|
8
|
-
if (!wrapperRef.current) {
|
|
9
|
-
return
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
const trap = createFocusTrap(wrapperRef.current, {
|
|
13
|
-
clickOutsideDeactivates: !closeExplicitly,
|
|
14
|
-
escapeDeactivates: !closeExplicitly,
|
|
15
|
-
onDeactivate: () => onDeactivateCallback?.(),
|
|
16
|
-
fallbackFocus: () => wrapperRef.current,
|
|
17
|
-
})
|
|
18
|
-
|
|
19
|
-
trap.activate()
|
|
20
|
-
|
|
21
|
-
return () => trap.deactivate()
|
|
22
|
-
}, [])
|
|
23
|
-
|
|
24
|
-
return wrapperRef
|
|
25
|
-
}
|