@negative-space/modal 1.0.1 → 1.1.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/index.d.mts +4 -1
- package/dist/index.d.ts +4 -1
- package/dist/index.js +48 -39
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +49 -40
- package/dist/index.mjs.map +1 -1
- package/package.json +5 -4
package/dist/index.d.mts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import { IconButtonProps } from '@negative-space/button/src/IconButton';
|
|
3
3
|
import { PopoverHandle, FixedPosition, PopoverProps } from '@negative-space/popover';
|
|
4
|
+
import { TooltipProps } from '@negative-space/tooltip';
|
|
4
5
|
import React from 'react';
|
|
5
6
|
|
|
6
7
|
interface UseModalOptions {
|
|
@@ -21,15 +22,17 @@ interface ModalProps extends Omit<PopoverProps, 'popover' | 'classNames' | 'styl
|
|
|
21
22
|
classNames?: Omit<NonNullable<PopoverProps['classNames']>, 'arrow'> & {
|
|
22
23
|
closeButton?: string;
|
|
23
24
|
closeIcon?: string;
|
|
25
|
+
tooltip?: TooltipProps['classNames'];
|
|
24
26
|
};
|
|
25
27
|
styles?: Omit<NonNullable<PopoverProps['styles']>, 'arrow'> & {
|
|
26
28
|
closeButton?: React.CSSProperties;
|
|
27
29
|
closeIcon?: React.CSSProperties;
|
|
30
|
+
tooltip?: TooltipProps['styles'];
|
|
28
31
|
};
|
|
29
32
|
hideCloseButton?: boolean;
|
|
30
33
|
buttonProps?: Omit<IconButtonProps, 'onClick' | 'aria-label' | 'className' | 'style'>;
|
|
31
34
|
modal: ModalHandle;
|
|
32
35
|
}
|
|
33
|
-
declare const Modal: ({ modal, hideCloseButton, classNames, styles, children, ...popoverProps }: ModalProps) => react_jsx_runtime.JSX.Element;
|
|
36
|
+
declare const Modal: ({ modal, hideCloseButton, classNames, styles, title, children, ...popoverProps }: ModalProps) => react_jsx_runtime.JSX.Element;
|
|
34
37
|
|
|
35
38
|
export { Modal, type ModalHandle, type ModalProps, type UseModalOptions, useModal };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import { IconButtonProps } from '@negative-space/button/src/IconButton';
|
|
3
3
|
import { PopoverHandle, FixedPosition, PopoverProps } from '@negative-space/popover';
|
|
4
|
+
import { TooltipProps } from '@negative-space/tooltip';
|
|
4
5
|
import React from 'react';
|
|
5
6
|
|
|
6
7
|
interface UseModalOptions {
|
|
@@ -21,15 +22,17 @@ interface ModalProps extends Omit<PopoverProps, 'popover' | 'classNames' | 'styl
|
|
|
21
22
|
classNames?: Omit<NonNullable<PopoverProps['classNames']>, 'arrow'> & {
|
|
22
23
|
closeButton?: string;
|
|
23
24
|
closeIcon?: string;
|
|
25
|
+
tooltip?: TooltipProps['classNames'];
|
|
24
26
|
};
|
|
25
27
|
styles?: Omit<NonNullable<PopoverProps['styles']>, 'arrow'> & {
|
|
26
28
|
closeButton?: React.CSSProperties;
|
|
27
29
|
closeIcon?: React.CSSProperties;
|
|
30
|
+
tooltip?: TooltipProps['styles'];
|
|
28
31
|
};
|
|
29
32
|
hideCloseButton?: boolean;
|
|
30
33
|
buttonProps?: Omit<IconButtonProps, 'onClick' | 'aria-label' | 'className' | 'style'>;
|
|
31
34
|
modal: ModalHandle;
|
|
32
35
|
}
|
|
33
|
-
declare const Modal: ({ modal, hideCloseButton, classNames, styles, children, ...popoverProps }: ModalProps) => react_jsx_runtime.JSX.Element;
|
|
36
|
+
declare const Modal: ({ modal, hideCloseButton, classNames, styles, title, children, ...popoverProps }: ModalProps) => react_jsx_runtime.JSX.Element;
|
|
34
37
|
|
|
35
38
|
export { Modal, type ModalHandle, type ModalProps, type UseModalOptions, useModal };
|
package/dist/index.js
CHANGED
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
var IconButton = require('@negative-space/button/src/IconButton');
|
|
4
4
|
var popover = require('@negative-space/popover');
|
|
5
5
|
var system = require('@negative-space/system');
|
|
6
|
+
var tooltip = require('@negative-space/tooltip');
|
|
6
7
|
var jsxRuntime = require('react/jsx-runtime');
|
|
7
8
|
|
|
8
9
|
// src/Modal.tsx
|
|
@@ -11,48 +12,56 @@ var Modal = ({
|
|
|
11
12
|
hideCloseButton,
|
|
12
13
|
classNames,
|
|
13
14
|
styles,
|
|
15
|
+
title,
|
|
14
16
|
children,
|
|
15
17
|
...popoverProps
|
|
16
18
|
}) => {
|
|
17
|
-
const { global } = system.useNSUI();
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
popover
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
19
|
+
const { global, components } = system.useNSUI();
|
|
20
|
+
const Title = title ?? components.modal?.closeTitle;
|
|
21
|
+
const tooltip$1 = tooltip.useTooltip();
|
|
22
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
23
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
24
|
+
popover.Popover,
|
|
25
|
+
{
|
|
26
|
+
...popoverProps,
|
|
27
|
+
popover: modal,
|
|
28
|
+
role: "dialog",
|
|
29
|
+
classNames: {
|
|
30
|
+
root: system.cn(`${global.prefixCls}-modal`, classNames?.root),
|
|
31
|
+
content: system.cn(`${global.prefixCls}-modal-content`, classNames?.content),
|
|
32
|
+
overlay: system.cn(`${global.prefixCls}-modal-overlay`, classNames?.overlay)
|
|
33
|
+
},
|
|
34
|
+
styles: {
|
|
35
|
+
root: { ...styles?.root },
|
|
36
|
+
content: { ...styles?.content },
|
|
37
|
+
overlay: { ...styles?.overlay }
|
|
38
|
+
},
|
|
39
|
+
children: [
|
|
40
|
+
!hideCloseButton && /* @__PURE__ */ jsxRuntime.jsx(
|
|
41
|
+
IconButton.IconButton,
|
|
42
|
+
{
|
|
43
|
+
...modal.triggerProps,
|
|
44
|
+
...tooltip$1.triggerProps,
|
|
45
|
+
"aria-label": Title,
|
|
46
|
+
title: !global.tooltip ? Title : void 0,
|
|
47
|
+
onClick: modal.close,
|
|
48
|
+
className: system.cn(`${global.prefixCls}-modal-close-button`, classNames?.closeButton),
|
|
49
|
+
style: { position: "absolute", right: "0.5rem", top: "0.5rem", ...styles?.closeButton },
|
|
50
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
51
|
+
system.X,
|
|
52
|
+
{
|
|
53
|
+
className: system.cn(`${global.prefixCls}-modal-close-icon`, classNames?.closeIcon),
|
|
54
|
+
style: styles?.closeIcon
|
|
55
|
+
}
|
|
56
|
+
)
|
|
57
|
+
}
|
|
58
|
+
),
|
|
59
|
+
children
|
|
60
|
+
]
|
|
61
|
+
}
|
|
62
|
+
),
|
|
63
|
+
global.tooltip && modal.isOpen && /* @__PURE__ */ jsxRuntime.jsx(tooltip.Tooltip, { tooltip: tooltip$1, classNames: classNames?.tooltip, styles: styles?.tooltip, children: Title })
|
|
64
|
+
] });
|
|
56
65
|
};
|
|
57
66
|
function useModal(options = {}) {
|
|
58
67
|
const { position = "center", ...rest } = options;
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Modal.tsx","../src/useModal.ts"],"names":["useNSUI","jsxs","Popover","cn","jsx","IconButton","X","usePopover"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../src/Modal.tsx","../src/useModal.ts"],"names":["useNSUI","tooltip","useTooltip","jsxs","Fragment","Popover","cn","jsx","IconButton","X","Tooltip","usePopover"],"mappings":"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","file":"index.js","sourcesContent":["import { IconButton, type IconButtonProps } from '@negative-space/button/src/IconButton'\nimport { Popover, type PopoverProps } from '@negative-space/popover'\nimport { cn, useNSUI, X } from '@negative-space/system'\nimport { Tooltip, type TooltipProps, useTooltip } from '@negative-space/tooltip'\nimport React from 'react'\n\nimport { type ModalHandle } from './useModal'\n\nexport interface ModalProps extends Omit<PopoverProps, 'popover' | 'classNames' | 'styles'> {\n classNames?: Omit<NonNullable<PopoverProps['classNames']>, 'arrow'> & {\n closeButton?: string\n closeIcon?: string\n tooltip?: TooltipProps['classNames']\n }\n styles?: Omit<NonNullable<PopoverProps['styles']>, 'arrow'> & {\n closeButton?: React.CSSProperties\n closeIcon?: React.CSSProperties\n tooltip?: TooltipProps['styles']\n }\n hideCloseButton?: boolean\n buttonProps?: Omit<IconButtonProps, 'onClick' | 'aria-label' | 'className' | 'style'>\n modal: ModalHandle\n}\n\nexport const Modal = ({\n modal,\n hideCloseButton,\n classNames,\n styles,\n title,\n children,\n ...popoverProps\n}: ModalProps) => {\n const { global, components } = useNSUI()\n\n const Title = title ?? components.modal?.closeTitle\n\n const tooltip = useTooltip()\n\n return (\n <>\n <Popover\n {...popoverProps}\n popover={modal}\n role=\"dialog\"\n classNames={{\n root: cn(`${global.prefixCls}-modal`, classNames?.root),\n content: cn(`${global.prefixCls}-modal-content`, classNames?.content),\n overlay: cn(`${global.prefixCls}-modal-overlay`, classNames?.overlay)\n }}\n styles={{\n root: { ...styles?.root },\n content: { ...styles?.content },\n overlay: { ...styles?.overlay }\n }}\n >\n {!hideCloseButton && (\n <IconButton\n {...modal.triggerProps}\n {...tooltip.triggerProps}\n aria-label={Title}\n title={!global.tooltip ? Title : undefined}\n onClick={modal.close}\n className={cn(`${global.prefixCls}-modal-close-button`, classNames?.closeButton)}\n style={{ position: 'absolute', right: '0.5rem', top: '0.5rem', ...styles?.closeButton }}\n >\n <X\n className={cn(`${global.prefixCls}-modal-close-icon`, classNames?.closeIcon)}\n style={styles?.closeIcon}\n />\n </IconButton>\n )}\n {children}\n </Popover>\n {global.tooltip && modal.isOpen && (\n <Tooltip tooltip={tooltip} classNames={classNames?.tooltip} styles={styles?.tooltip}>\n {Title}\n </Tooltip>\n )}\n </>\n )\n}\n","import {\n type FixedPosition,\n type PopoverHandle,\n usePopover,\n type UsePopoverOptions\n} from '@negative-space/popover'\n\nexport type { FixedPosition as ModalPosition }\n\nexport interface UseModalOptions {\n defaultOpen?: boolean\n open?: boolean\n onOpenChange?: (open: boolean) => void\n dismissOnClickOutside?: boolean\n dismissOnEscape?: boolean\n trapFocus?: boolean\n usePortal?: boolean\n zIndex?: number\n position?: FixedPosition\n}\n\nexport type ModalHandle = PopoverHandle\n\nexport function useModal(options: UseModalOptions = {}): ModalHandle {\n const { position = 'center', ...rest } = options\n\n return usePopover({\n ...rest,\n overlay: true,\n showArrow: false,\n trigger: 'click',\n trapFocus: true,\n usePortal: true,\n zIndex: 9999,\n fixedPosition: position\n } satisfies UsePopoverOptions)\n}\n"]}
|
package/dist/index.mjs
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { IconButton } from '@negative-space/button/src/IconButton';
|
|
2
2
|
import { Popover, usePopover } from '@negative-space/popover';
|
|
3
3
|
import { useNSUI, cn, X } from '@negative-space/system';
|
|
4
|
-
import {
|
|
4
|
+
import { useTooltip, Tooltip } from '@negative-space/tooltip';
|
|
5
|
+
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
|
|
5
6
|
|
|
6
7
|
// src/Modal.tsx
|
|
7
8
|
var Modal = ({
|
|
@@ -9,48 +10,56 @@ var Modal = ({
|
|
|
9
10
|
hideCloseButton,
|
|
10
11
|
classNames,
|
|
11
12
|
styles,
|
|
13
|
+
title,
|
|
12
14
|
children,
|
|
13
15
|
...popoverProps
|
|
14
16
|
}) => {
|
|
15
|
-
const { global } = useNSUI();
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
17
|
+
const { global, components } = useNSUI();
|
|
18
|
+
const Title = title ?? components.modal?.closeTitle;
|
|
19
|
+
const tooltip = useTooltip();
|
|
20
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
21
|
+
/* @__PURE__ */ jsxs(
|
|
22
|
+
Popover,
|
|
23
|
+
{
|
|
24
|
+
...popoverProps,
|
|
25
|
+
popover: modal,
|
|
26
|
+
role: "dialog",
|
|
27
|
+
classNames: {
|
|
28
|
+
root: cn(`${global.prefixCls}-modal`, classNames?.root),
|
|
29
|
+
content: cn(`${global.prefixCls}-modal-content`, classNames?.content),
|
|
30
|
+
overlay: cn(`${global.prefixCls}-modal-overlay`, classNames?.overlay)
|
|
31
|
+
},
|
|
32
|
+
styles: {
|
|
33
|
+
root: { ...styles?.root },
|
|
34
|
+
content: { ...styles?.content },
|
|
35
|
+
overlay: { ...styles?.overlay }
|
|
36
|
+
},
|
|
37
|
+
children: [
|
|
38
|
+
!hideCloseButton && /* @__PURE__ */ jsx(
|
|
39
|
+
IconButton,
|
|
40
|
+
{
|
|
41
|
+
...modal.triggerProps,
|
|
42
|
+
...tooltip.triggerProps,
|
|
43
|
+
"aria-label": Title,
|
|
44
|
+
title: !global.tooltip ? Title : void 0,
|
|
45
|
+
onClick: modal.close,
|
|
46
|
+
className: cn(`${global.prefixCls}-modal-close-button`, classNames?.closeButton),
|
|
47
|
+
style: { position: "absolute", right: "0.5rem", top: "0.5rem", ...styles?.closeButton },
|
|
48
|
+
children: /* @__PURE__ */ jsx(
|
|
49
|
+
X,
|
|
50
|
+
{
|
|
51
|
+
className: cn(`${global.prefixCls}-modal-close-icon`, classNames?.closeIcon),
|
|
52
|
+
style: styles?.closeIcon
|
|
53
|
+
}
|
|
54
|
+
)
|
|
55
|
+
}
|
|
56
|
+
),
|
|
57
|
+
children
|
|
58
|
+
]
|
|
59
|
+
}
|
|
60
|
+
),
|
|
61
|
+
global.tooltip && modal.isOpen && /* @__PURE__ */ jsx(Tooltip, { tooltip, classNames: classNames?.tooltip, styles: styles?.tooltip, children: Title })
|
|
62
|
+
] });
|
|
54
63
|
};
|
|
55
64
|
function useModal(options = {}) {
|
|
56
65
|
const { position = "center", ...rest } = options;
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Modal.tsx","../src/useModal.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../src/Modal.tsx","../src/useModal.ts"],"names":[],"mappings":"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","file":"index.mjs","sourcesContent":["import { IconButton, type IconButtonProps } from '@negative-space/button/src/IconButton'\nimport { Popover, type PopoverProps } from '@negative-space/popover'\nimport { cn, useNSUI, X } from '@negative-space/system'\nimport { Tooltip, type TooltipProps, useTooltip } from '@negative-space/tooltip'\nimport React from 'react'\n\nimport { type ModalHandle } from './useModal'\n\nexport interface ModalProps extends Omit<PopoverProps, 'popover' | 'classNames' | 'styles'> {\n classNames?: Omit<NonNullable<PopoverProps['classNames']>, 'arrow'> & {\n closeButton?: string\n closeIcon?: string\n tooltip?: TooltipProps['classNames']\n }\n styles?: Omit<NonNullable<PopoverProps['styles']>, 'arrow'> & {\n closeButton?: React.CSSProperties\n closeIcon?: React.CSSProperties\n tooltip?: TooltipProps['styles']\n }\n hideCloseButton?: boolean\n buttonProps?: Omit<IconButtonProps, 'onClick' | 'aria-label' | 'className' | 'style'>\n modal: ModalHandle\n}\n\nexport const Modal = ({\n modal,\n hideCloseButton,\n classNames,\n styles,\n title,\n children,\n ...popoverProps\n}: ModalProps) => {\n const { global, components } = useNSUI()\n\n const Title = title ?? components.modal?.closeTitle\n\n const tooltip = useTooltip()\n\n return (\n <>\n <Popover\n {...popoverProps}\n popover={modal}\n role=\"dialog\"\n classNames={{\n root: cn(`${global.prefixCls}-modal`, classNames?.root),\n content: cn(`${global.prefixCls}-modal-content`, classNames?.content),\n overlay: cn(`${global.prefixCls}-modal-overlay`, classNames?.overlay)\n }}\n styles={{\n root: { ...styles?.root },\n content: { ...styles?.content },\n overlay: { ...styles?.overlay }\n }}\n >\n {!hideCloseButton && (\n <IconButton\n {...modal.triggerProps}\n {...tooltip.triggerProps}\n aria-label={Title}\n title={!global.tooltip ? Title : undefined}\n onClick={modal.close}\n className={cn(`${global.prefixCls}-modal-close-button`, classNames?.closeButton)}\n style={{ position: 'absolute', right: '0.5rem', top: '0.5rem', ...styles?.closeButton }}\n >\n <X\n className={cn(`${global.prefixCls}-modal-close-icon`, classNames?.closeIcon)}\n style={styles?.closeIcon}\n />\n </IconButton>\n )}\n {children}\n </Popover>\n {global.tooltip && modal.isOpen && (\n <Tooltip tooltip={tooltip} classNames={classNames?.tooltip} styles={styles?.tooltip}>\n {Title}\n </Tooltip>\n )}\n </>\n )\n}\n","import {\n type FixedPosition,\n type PopoverHandle,\n usePopover,\n type UsePopoverOptions\n} from '@negative-space/popover'\n\nexport type { FixedPosition as ModalPosition }\n\nexport interface UseModalOptions {\n defaultOpen?: boolean\n open?: boolean\n onOpenChange?: (open: boolean) => void\n dismissOnClickOutside?: boolean\n dismissOnEscape?: boolean\n trapFocus?: boolean\n usePortal?: boolean\n zIndex?: number\n position?: FixedPosition\n}\n\nexport type ModalHandle = PopoverHandle\n\nexport function useModal(options: UseModalOptions = {}): ModalHandle {\n const { position = 'center', ...rest } = options\n\n return usePopover({\n ...rest,\n overlay: true,\n showArrow: false,\n trigger: 'click',\n trapFocus: true,\n usePortal: true,\n zIndex: 9999,\n fixedPosition: position\n } satisfies UsePopoverOptions)\n}\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@negative-space/modal",
|
|
3
|
-
"version": "1.0
|
|
3
|
+
"version": "1.1.0",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -30,9 +30,10 @@
|
|
|
30
30
|
"url": "https://github.com/negative-space-ui/nsui/issues"
|
|
31
31
|
},
|
|
32
32
|
"dependencies": {
|
|
33
|
-
"@negative-space/button": "2.6.
|
|
34
|
-
"@negative-space/
|
|
35
|
-
"@negative-space/
|
|
33
|
+
"@negative-space/button": "2.6.1",
|
|
34
|
+
"@negative-space/system": "1.3.1",
|
|
35
|
+
"@negative-space/tooltip": "1.0.1",
|
|
36
|
+
"@negative-space/popover": "1.0.1"
|
|
36
37
|
},
|
|
37
38
|
"peerDependencies": {
|
|
38
39
|
"react": "^19.2.3"
|