@bioturing/components 0.44.0 → 0.45.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/base.d.ts +2 -0
- package/dist/base.d.ts.map +1 -1
- package/dist/base.js +2 -0
- package/dist/base.js.map +1 -1
- package/dist/components/choice-list/component.d.ts +11 -1
- package/dist/components/choice-list/component.d.ts.map +1 -1
- package/dist/components/choice-list/component.js +79 -82
- package/dist/components/choice-list/component.js.map +1 -1
- package/dist/components/choice-list/style.css +1 -1
- package/dist/components/command-palette/style.css +1 -1
- package/dist/components/data-table/style.css +1 -1
- package/dist/components/dialog/Dialog.d.ts.map +1 -1
- package/dist/components/dialog/Dialog.js +73 -69
- package/dist/components/dialog/Dialog.js.map +1 -1
- package/dist/components/dialog/dialog.css +1 -1
- package/dist/components/ds-root/component.d.ts.map +1 -1
- package/dist/components/ds-root/component.js +16 -14
- package/dist/components/ds-root/component.js.map +1 -1
- package/dist/components/index.d.ts +2 -1
- package/dist/components/index.d.ts.map +1 -1
- package/dist/components/input/component.d.ts +1 -1
- package/dist/components/input/component.d.ts.map +1 -1
- package/dist/components/input/component.js +55 -45
- package/dist/components/input/component.js.map +1 -1
- package/dist/components/modal/Modal.d.ts.map +1 -1
- package/dist/components/modal/Modal.js +151 -132
- package/dist/components/modal/Modal.js.map +1 -1
- package/dist/components/modal/style.css +1 -1
- package/dist/components/notification/NotificationProvider.d.ts +6 -0
- package/dist/components/notification/NotificationProvider.d.ts.map +1 -0
- package/dist/components/notification/NotificationProvider.js +67 -0
- package/dist/components/notification/NotificationProvider.js.map +1 -0
- package/dist/components/notification/NotificationService.d.ts +35 -0
- package/dist/components/notification/NotificationService.d.ts.map +1 -0
- package/dist/components/notification/NotificationService.js +26 -0
- package/dist/components/notification/NotificationService.js.map +1 -0
- package/dist/components/notification/functions.d.ts +11 -0
- package/dist/components/notification/functions.d.ts.map +1 -0
- package/dist/components/notification/functions.js +38 -0
- package/dist/components/notification/functions.js.map +1 -0
- package/dist/components/notification/index.d.ts +11 -0
- package/dist/components/notification/index.d.ts.map +1 -0
- package/dist/components/notification/index.js +27 -0
- package/dist/components/notification/index.js.map +1 -0
- package/dist/components/notification/style.css +1 -0
- package/dist/components/notification/themedNotificationConfig.d.ts +5 -0
- package/dist/components/notification/themedNotificationConfig.d.ts.map +1 -0
- package/dist/components/notification/themedNotificationConfig.js +34 -0
- package/dist/components/notification/themedNotificationConfig.js.map +1 -0
- package/dist/components/notification/useNotification.d.ts +3 -0
- package/dist/components/notification/useNotification.d.ts.map +1 -0
- package/dist/components/notification/useNotification.js +25 -0
- package/dist/components/notification/useNotification.js.map +1 -0
- package/dist/components/tour/style.css +1 -1
- package/dist/index.js +267 -255
- package/dist/index.js.map +1 -1
- package/dist/metadata.d.ts +9 -0
- package/dist/metadata.d.ts.map +1 -1
- package/dist/metadata.js +13 -0
- package/dist/metadata.js.map +1 -1
- package/dist/stats.html +1 -1
- package/package.json +4 -4
|
@@ -1,71 +1,81 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as e } from "react/jsx-runtime";
|
|
3
|
-
import { MagnifyingGlassIcon as
|
|
3
|
+
import { MagnifyingGlassIcon as f, EyeIcon as x, EyeClosedIcon as z } from "@bioturing/assets";
|
|
4
4
|
import { Input as o } from "antd";
|
|
5
|
-
import { forwardRef as a, useCallback as
|
|
5
|
+
import { forwardRef as a, useCallback as i, useMemo as I } from "react";
|
|
6
6
|
import './style.css';/* empty css */
|
|
7
|
-
import { useCls as
|
|
8
|
-
import { Spin as
|
|
9
|
-
import { IconButton as
|
|
10
|
-
const
|
|
11
|
-
const
|
|
12
|
-
|
|
13
|
-
|
|
7
|
+
import { useCls as M } from "../utils/antdUtils.js";
|
|
8
|
+
import { Spin as T } from "../spin/component.js";
|
|
9
|
+
import { IconButton as y } from "../icon-button/component.js";
|
|
10
|
+
const A = (n, r) => /* @__PURE__ */ e(o, { ref: r, ...n }), E = ({ iconRender: n, ...r }, s) => {
|
|
11
|
+
const c = i(
|
|
12
|
+
(t) => /* @__PURE__ */ e(
|
|
13
|
+
y,
|
|
14
14
|
{
|
|
15
15
|
size: "small",
|
|
16
|
-
label:
|
|
17
|
-
children:
|
|
16
|
+
label: t ? "Hide password" : "Show password",
|
|
17
|
+
children: t ? /* @__PURE__ */ e(x, {}) : /* @__PURE__ */ e(z, {})
|
|
18
18
|
}
|
|
19
19
|
),
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
return /* @__PURE__ */ e(
|
|
23
|
-
|
|
24
|
-
|
|
20
|
+
[]
|
|
21
|
+
);
|
|
22
|
+
return /* @__PURE__ */ e(
|
|
23
|
+
o.Password,
|
|
24
|
+
{
|
|
25
|
+
ref: s,
|
|
26
|
+
iconRender: n ?? c,
|
|
27
|
+
...r
|
|
28
|
+
}
|
|
29
|
+
);
|
|
30
|
+
}, R = ({
|
|
31
|
+
enterButton: n = !1,
|
|
25
32
|
onSearch: r,
|
|
26
|
-
prefix:
|
|
27
|
-
onPressEnter:
|
|
28
|
-
onClear:
|
|
29
|
-
loading:
|
|
30
|
-
...
|
|
31
|
-
},
|
|
32
|
-
const
|
|
33
|
-
(
|
|
34
|
-
r?.(
|
|
33
|
+
prefix: s,
|
|
34
|
+
onPressEnter: c,
|
|
35
|
+
onClear: t,
|
|
36
|
+
loading: u,
|
|
37
|
+
...l
|
|
38
|
+
}, m) => {
|
|
39
|
+
const p = M(), w = i(
|
|
40
|
+
(d) => {
|
|
41
|
+
r?.(d.currentTarget.value, d, { source: "input" });
|
|
35
42
|
},
|
|
36
43
|
[r]
|
|
37
|
-
),
|
|
44
|
+
), P = i(() => {
|
|
38
45
|
r?.("", void 0, { source: "clear" });
|
|
39
|
-
}, [r])
|
|
40
|
-
|
|
46
|
+
}, [r]), C = I(() => s || (u ? /* @__PURE__ */ e(T, { size: 16 }) : /* @__PURE__ */ e(f, { size: 16, className: p("input-search-icon") })), [s, u, p]), h = I(
|
|
47
|
+
() => n === !0 ? /* @__PURE__ */ e(f, { size: 16 }) : n,
|
|
48
|
+
[n]
|
|
49
|
+
);
|
|
50
|
+
return n === !1 ? /* @__PURE__ */ e(
|
|
41
51
|
o,
|
|
42
52
|
{
|
|
43
|
-
ref:
|
|
44
|
-
prefix:
|
|
45
|
-
onPressEnter:
|
|
46
|
-
onClear:
|
|
53
|
+
ref: m,
|
|
54
|
+
prefix: C,
|
|
55
|
+
onPressEnter: c || w,
|
|
56
|
+
onClear: t || P,
|
|
47
57
|
allowClear: !0,
|
|
48
|
-
...
|
|
58
|
+
...l
|
|
49
59
|
}
|
|
50
60
|
) : /* @__PURE__ */ e(
|
|
51
61
|
o.Search,
|
|
52
62
|
{
|
|
53
|
-
ref:
|
|
54
|
-
prefix:
|
|
55
|
-
onPressEnter:
|
|
63
|
+
ref: m,
|
|
64
|
+
prefix: s,
|
|
65
|
+
onPressEnter: c,
|
|
56
66
|
onSearch: r,
|
|
57
|
-
onClear:
|
|
58
|
-
loading:
|
|
59
|
-
enterButton:
|
|
60
|
-
...
|
|
67
|
+
onClear: t,
|
|
68
|
+
loading: u,
|
|
69
|
+
enterButton: h,
|
|
70
|
+
...l
|
|
61
71
|
}
|
|
62
72
|
);
|
|
63
|
-
},
|
|
64
|
-
Password:
|
|
65
|
-
Search:
|
|
66
|
-
TextArea:
|
|
73
|
+
}, b = (n, r) => /* @__PURE__ */ e(o.TextArea, { ref: r, ...n }), g = a(A), j = a(E), k = a(R), G = a(b), D = Object.assign(g, {
|
|
74
|
+
Password: j,
|
|
75
|
+
Search: k,
|
|
76
|
+
TextArea: G
|
|
67
77
|
});
|
|
68
78
|
export {
|
|
69
|
-
|
|
79
|
+
D as Input
|
|
70
80
|
};
|
|
71
81
|
//# sourceMappingURL=component.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"component.js","sources":["../../../src/components/input/component.tsx"],"sourcesContent":["\"use client\";\nimport { EyeIcon, EyeClosedIcon, MagnifyingGlassIcon } from \"@bioturing/assets\";\nimport {\n Input as AntInput,\n type InputProps as AntInputProps,\n type InputRef,\n} from \"antd\";\nimport { type PasswordProps as AntPasswordProps } from \"antd/es/input\";\nimport { type SearchProps as AntSearchProps } from \"antd/es/input\";\nimport { type TextAreaProps as AntTextAreaProps } from \"antd/es/input\";\nimport { forwardRef, useCallback, useMemo } from \"react\"
|
|
1
|
+
{"version":3,"file":"component.js","sources":["../../../src/components/input/component.tsx"],"sourcesContent":["\"use client\";\nimport { EyeIcon, EyeClosedIcon, MagnifyingGlassIcon } from \"@bioturing/assets\";\nimport {\n Input as AntInput,\n type InputProps as AntInputProps,\n type InputRef,\n} from \"antd\";\nimport { type PasswordProps as AntPasswordProps } from \"antd/es/input\";\nimport { type SearchProps as AntSearchProps } from \"antd/es/input\";\nimport { type TextAreaProps as AntTextAreaProps } from \"antd/es/input\";\nimport { forwardRef, useCallback, useMemo } from \"react\"; // useMemo still used in SearchInner\nimport { useCls } from \"../utils\";\nimport { Spin } from \"../spin\";\n\nimport \"./style.css\";\nimport { IconButton } from \"../icon-button\";\n\n// Define props interfaces\nexport interface InputProps extends AntInputProps {}\nexport interface PasswordProps extends AntPasswordProps {}\nexport interface TextAreaProps extends AntTextAreaProps {}\nexport interface SearchProps extends AntSearchProps {}\n\n// Create inner function for main Input\nconst MainInputInner = (props: InputProps, ref: React.Ref<InputRef>) => {\n return <AntInput ref={ref} {...props} />;\n};\n\n// Create inner function for Password\nconst PasswordInner = (\n { iconRender, ...rest }: PasswordProps,\n ref: React.Ref<InputRef>,\n) => {\n // Apply default iconRender unless overridden by props\n const defaultIconRender = useCallback(\n (visible: boolean) => (\n <IconButton\n size=\"small\"\n label={visible ? \"Hide password\" : \"Show password\"}\n >\n {visible ? <EyeIcon /> : <EyeClosedIcon />}\n </IconButton>\n ),\n [],\n );\n\n return (\n <AntInput.Password\n ref={ref}\n iconRender={iconRender ?? defaultIconRender}\n {...rest}\n />\n );\n};\n\n// Create inner function for Search\nconst SearchInner = (\n {\n enterButton = false,\n onSearch,\n prefix,\n onPressEnter,\n onClear,\n loading,\n ...rest\n }: SearchProps,\n ref: React.Ref<InputRef>,\n) => {\n const cls = useCls();\n\n const handlePressEnter = useCallback(\n (event: React.KeyboardEvent<HTMLInputElement>) => {\n onSearch?.(event.currentTarget.value, event, { source: \"input\" });\n },\n [onSearch],\n );\n\n const handleClear = useCallback(() => {\n onSearch?.(\"\", undefined, { source: \"clear\" });\n }, [onSearch]);\n\n const defaultPrefix = useMemo(() => {\n if (prefix) return prefix;\n if (loading) return <Spin size={16} />;\n return (\n <MagnifyingGlassIcon size={16} className={cls(\"input-search-icon\")} />\n );\n }, [prefix, loading, cls]);\n\n const enterButtonProp = useMemo(\n () =>\n enterButton === true ? <MagnifyingGlassIcon size={16} /> : enterButton,\n [enterButton],\n );\n\n return enterButton === false ? (\n <AntInput\n ref={ref}\n prefix={defaultPrefix}\n onPressEnter={onPressEnter || handlePressEnter}\n onClear={onClear || handleClear}\n allowClear\n {...rest}\n />\n ) : (\n <AntInput.Search\n ref={ref}\n prefix={prefix}\n onPressEnter={onPressEnter}\n onSearch={onSearch}\n onClear={onClear}\n loading={loading}\n enterButton={enterButtonProp}\n {...rest}\n />\n );\n};\n\n// Create inner function for TextArea\nconst TextAreaInner = (\n props: TextAreaProps,\n ref: React.Ref<HTMLTextAreaElement>,\n) => {\n return <AntInput.TextArea ref={ref} {...props} />;\n};\n\n// Use forwardRef with type assertion for main Input\nconst MainInput = forwardRef(MainInputInner) as (\n props: InputProps & {\n ref?: React.ForwardedRef<InputRef>;\n },\n) => ReturnType<typeof MainInputInner>;\n\n// Use forwardRef with type assertion for Password\nconst Password = forwardRef(PasswordInner) as (\n props: PasswordProps & {\n ref?: React.ForwardedRef<InputRef>;\n },\n) => ReturnType<typeof PasswordInner>;\n\n// Use forwardRef with type assertion for Search\nconst Search = forwardRef(SearchInner) as (\n props: SearchProps & {\n ref?: React.ForwardedRef<InputRef>;\n },\n) => ReturnType<typeof SearchInner>;\n\n// Use forwardRef with type assertion for TextArea\nconst TextArea = forwardRef(TextAreaInner) as (\n props: TextAreaProps & {\n ref?: React.ForwardedRef<HTMLTextAreaElement>;\n },\n) => ReturnType<typeof TextAreaInner>;\n\n// Export the final composed component\nexport const Input = Object.assign(MainInput, {\n Password,\n Search,\n TextArea,\n});\n"],"names":["MainInputInner","props","ref","jsx","AntInput","PasswordInner","iconRender","rest","defaultIconRender","useCallback","visible","IconButton","EyeIcon","EyeClosedIcon","SearchInner","enterButton","onSearch","prefix","onPressEnter","onClear","loading","cls","useCls","handlePressEnter","event","handleClear","defaultPrefix","useMemo","Spin","MagnifyingGlassIcon","enterButtonProp","TextAreaInner","MainInput","forwardRef","Password","Search","TextArea","Input"],"mappings":";;;;;;;;;AAwBA,MAAMA,IAAiB,CAACC,GAAmBC,MAClC,gBAAAC,EAACC,GAAA,EAAS,KAAAF,GAAW,GAAGD,EAAA,CAAO,GAIlCI,IAAgB,CACpB,EAAE,YAAAC,GAAY,GAAGC,EAAA,GACjBL,MACG;AAEH,QAAMM,IAAoBC;AAAA,IACxB,CAACC,MACC,gBAAAP;AAAA,MAACQ;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAOD,IAAU,kBAAkB;AAAA,QAElC,UAAAA,IAAU,gBAAAP,EAACS,GAAA,CAAA,CAAQ,sBAAMC,GAAA,CAAA,CAAc;AAAA,MAAA;AAAA,IAAA;AAAA,IAG5C,CAAA;AAAA,EAAC;AAGH,SACE,gBAAAV;AAAA,IAACC,EAAS;AAAA,IAAT;AAAA,MACC,KAAAF;AAAA,MACA,YAAYI,KAAcE;AAAA,MACzB,GAAGD;AAAA,IAAA;AAAA,EAAA;AAGV,GAGMO,IAAc,CAClB;AAAA,EACE,aAAAC,IAAc;AAAA,EACd,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,cAAAC;AAAA,EACA,SAAAC;AAAA,EACA,SAAAC;AAAA,EACA,GAAGb;AACL,GACAL,MACG;AACH,QAAMmB,IAAMC,EAAA,GAENC,IAAmBd;AAAA,IACvB,CAACe,MAAiD;AAChD,MAAAR,IAAWQ,EAAM,cAAc,OAAOA,GAAO,EAAE,QAAQ,SAAS;AAAA,IAClE;AAAA,IACA,CAACR,CAAQ;AAAA,EAAA,GAGLS,IAAchB,EAAY,MAAM;AACpC,IAAAO,IAAW,IAAI,QAAW,EAAE,QAAQ,SAAS;AAAA,EAC/C,GAAG,CAACA,CAAQ,CAAC,GAEPU,IAAgBC,EAAQ,MACxBV,MACAG,IAAgB,gBAAAjB,EAACyB,GAAA,EAAK,MAAM,IAAI,sBAEjCC,GAAA,EAAoB,MAAM,IAAI,WAAWR,EAAI,mBAAmB,GAAG,IAErE,CAACJ,GAAQG,GAASC,CAAG,CAAC,GAEnBS,IAAkBH;AAAA,IACtB,MACEZ,MAAgB,uBAAQc,GAAA,EAAoB,MAAM,IAAI,IAAKd;AAAA,IAC7D,CAACA,CAAW;AAAA,EAAA;AAGd,SAAOA,MAAgB,KACrB,gBAAAZ;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,QAAQwB;AAAA,MACR,cAAcR,KAAgBK;AAAA,MAC9B,SAASJ,KAAWM;AAAA,MACpB,YAAU;AAAA,MACT,GAAGlB;AAAA,IAAA;AAAA,EAAA,IAGN,gBAAAJ;AAAA,IAACC,EAAS;AAAA,IAAT;AAAA,MACC,KAAAF;AAAA,MACA,QAAAe;AAAA,MACA,cAAAC;AAAA,MACA,UAAAF;AAAA,MACA,SAAAG;AAAA,MACA,SAAAC;AAAA,MACA,aAAaU;AAAA,MACZ,GAAGvB;AAAA,IAAA;AAAA,EAAA;AAGV,GAGMwB,IAAgB,CACpB9B,GACAC,wBAEQE,EAAS,UAAT,EAAkB,KAAAF,GAAW,GAAGD,GAAO,GAI3C+B,IAAYC,EAAWjC,CAAc,GAOrCkC,IAAWD,EAAW5B,CAAa,GAOnC8B,IAASF,EAAWnB,CAAW,GAO/BsB,IAAWH,EAAWF,CAAa,GAO5BM,IAAQ,OAAO,OAAOL,GAAW;AAAA,EAC5C,UAAAE;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AACF,CAAC;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/modal/Modal.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,KAAK,UAAU,IAAI,aAAa,EACjC,MAAM,eAAe,CAAC;AAEvB,OAAO,KAMN,MAAM,OAAO,CAAC;AAUf,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/modal/Modal.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,KAAK,UAAU,IAAI,aAAa,EACjC,MAAM,eAAe,CAAC;AAEvB,OAAO,KAMN,MAAM,OAAO,CAAC;AAUf,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAOxC,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,aAAa,EAAE,UAAU,CAAC;IACjE;;;;;;;;;OASG;IACH,IAAI,CAAC,EACD,QAAQ,GACR,OAAO,GACP,QAAQ,GACR,OAAO,GACP,QAAQ,GACR,SAAS,GACT,YAAY,CAAC;IACjB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;IAC3C;;OAEG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B;;OAEG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACpC;;OAEG;IACH,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC;;;OAGG;IACH,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,UAAU,CAAC,EAAE,UAAU,GAAG,WAAW,CAAC;IACtC;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAGD,eAAO,MAAM,KAAK,GAAI,ibAkCnB,UAAU,4CAqSZ,CAAC"}
|
|
@@ -1,193 +1,212 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsx as o, jsxs as
|
|
3
|
-
import
|
|
4
|
-
import { XIcon as
|
|
5
|
-
import {
|
|
6
|
-
import { useStableCallback as
|
|
7
|
-
import { ModalContextProvider as
|
|
8
|
-
import
|
|
9
|
-
import
|
|
10
|
-
import { getConfirmLocale as
|
|
11
|
-
import { useLocale as
|
|
12
|
-
import { ModalSize as
|
|
13
|
-
import { Stack as
|
|
14
|
-
import { Truncate as
|
|
15
|
-
import { IconButton as
|
|
16
|
-
import { useCls as
|
|
17
|
-
import { useTheme as
|
|
18
|
-
import { clsx as
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
2
|
+
import { jsx as o, jsxs as i, Fragment as Q } from "react/jsx-runtime";
|
|
3
|
+
import xe from "antd/es/modal";
|
|
4
|
+
import { XIcon as Se } from "@bioturing/assets";
|
|
5
|
+
import { useState as x, useMemo as n, useRef as ze, useCallback as we, useEffect as Me } from "react";
|
|
6
|
+
import { useStableCallback as ke } from "@base-ui/utils/useStableCallback";
|
|
7
|
+
import { ModalContextProvider as Te } from "antd/es/modal/context";
|
|
8
|
+
import U from "antd/es/modal/components/NormalCancelBtn";
|
|
9
|
+
import Y from "antd/es/modal/components/NormalOkBtn";
|
|
10
|
+
import { getConfirmLocale as Ne } from "antd/es/modal/locale";
|
|
11
|
+
import { useLocale as Ie } from "antd/es/locale";
|
|
12
|
+
import { ModalSize as d } from "./constants.js";
|
|
13
|
+
import { Stack as S } from "../stack/index.js";
|
|
14
|
+
import { Truncate as Oe } from "../truncate/component.js";
|
|
15
|
+
import { IconButton as Re } from "../icon-button/component.js";
|
|
16
|
+
import { useCls as Be } from "../utils/antdUtils.js";
|
|
17
|
+
import { useTheme as Ee } from "../theme-provider/context/themeStore.js";
|
|
18
|
+
import { clsx as $e } from "../utils/cn.js";
|
|
19
|
+
import { Spin as qe } from "../spin/component.js";
|
|
20
|
+
const to = ({
|
|
21
|
+
open: z,
|
|
22
|
+
closeIcon: w,
|
|
23
|
+
children: Z,
|
|
24
|
+
size: _,
|
|
25
|
+
footer: M,
|
|
26
|
+
width: P,
|
|
27
|
+
style: k,
|
|
27
28
|
styles: f,
|
|
28
|
-
classNames:
|
|
29
|
-
okButtonProps:
|
|
30
|
-
cancelButtonProps:
|
|
31
|
-
loading:
|
|
32
|
-
onOk:
|
|
33
|
-
onCancel:
|
|
34
|
-
okText:
|
|
35
|
-
okType:
|
|
36
|
-
confirmLoading:
|
|
37
|
-
cancelText:
|
|
38
|
-
hideOkButton:
|
|
39
|
-
hideCancelButton:
|
|
40
|
-
contentPadding:
|
|
41
|
-
title:
|
|
42
|
-
afterTitle:
|
|
43
|
-
beforeCloseButton:
|
|
44
|
-
afterCloseButton:
|
|
45
|
-
defaultFixedHeaderFooter:
|
|
46
|
-
centered:
|
|
47
|
-
type:
|
|
48
|
-
defaultOpen:
|
|
49
|
-
background:
|
|
50
|
-
bodyScrollable:
|
|
51
|
-
rootClassName:
|
|
52
|
-
...
|
|
29
|
+
classNames: ee,
|
|
30
|
+
okButtonProps: T,
|
|
31
|
+
cancelButtonProps: N,
|
|
32
|
+
loading: I,
|
|
33
|
+
onOk: u,
|
|
34
|
+
onCancel: O,
|
|
35
|
+
okText: R,
|
|
36
|
+
okType: B = "primary",
|
|
37
|
+
confirmLoading: a,
|
|
38
|
+
cancelText: E = "Close",
|
|
39
|
+
hideOkButton: p = !1,
|
|
40
|
+
hideCancelButton: h = !1,
|
|
41
|
+
contentPadding: t,
|
|
42
|
+
title: g,
|
|
43
|
+
afterTitle: $,
|
|
44
|
+
beforeCloseButton: oe,
|
|
45
|
+
afterCloseButton: re,
|
|
46
|
+
defaultFixedHeaderFooter: te = !1,
|
|
47
|
+
centered: le = !0,
|
|
48
|
+
type: se = "default",
|
|
49
|
+
defaultOpen: ne = !0,
|
|
50
|
+
background: ae,
|
|
51
|
+
bodyScrollable: ie = !0,
|
|
52
|
+
rootClassName: ce,
|
|
53
|
+
...me
|
|
53
54
|
}) => {
|
|
54
|
-
const
|
|
55
|
+
const de = w === void 0 ? /* @__PURE__ */ o(Se, { size: 16, weight: "bold" }) : w, l = _ || (se === "default" ? "medium" : "xsmall"), fe = P || d[l], [s, q] = x({
|
|
56
|
+
headerHeight: void 0,
|
|
57
|
+
footerHeight: void 0
|
|
58
|
+
}), F = ae || (l in d && parseInt(d[l]) <= parseInt(d.medium) ? "elevated" : "container"), ue = n(
|
|
55
59
|
() => ({
|
|
56
|
-
"--ds-modal-bg": `var(--ds-color-bg-${
|
|
57
|
-
|
|
60
|
+
"--ds-modal-bg": `var(--ds-color-bg-${F})`,
|
|
61
|
+
"--ds-modal-header-height": s.headerHeight ? `${s.headerHeight}px` : void 0,
|
|
62
|
+
"--ds-modal-footer-height": s.footerHeight ? `${s.footerHeight}px` : void 0,
|
|
63
|
+
...k,
|
|
58
64
|
...l === "fullscreen" ? { top: 0, maxWidth: "100%", height: "100%" } : {}
|
|
59
65
|
}),
|
|
60
|
-
[
|
|
61
|
-
|
|
66
|
+
[
|
|
67
|
+
F,
|
|
68
|
+
k,
|
|
69
|
+
l,
|
|
70
|
+
s.headerHeight,
|
|
71
|
+
s.footerHeight
|
|
72
|
+
]
|
|
73
|
+
), pe = n(
|
|
62
74
|
() => ({
|
|
63
75
|
...f,
|
|
64
76
|
body: {
|
|
65
|
-
...typeof
|
|
66
|
-
"--ds-modal-content-padding":
|
|
77
|
+
...typeof t < "u" ? {
|
|
78
|
+
"--ds-modal-content-padding": t === !1 || t === 0 ? "0" : typeof t == "number" ? `${t}px` : t
|
|
67
79
|
} : {},
|
|
68
80
|
...f?.body
|
|
69
81
|
}
|
|
70
82
|
}),
|
|
71
|
-
[f,
|
|
72
|
-
), [
|
|
83
|
+
[f, t]
|
|
84
|
+
), [L, he] = x(!1), r = Be(), { className: ge } = Ee(), c = ze(null), ve = we(
|
|
73
85
|
(e) => {
|
|
74
86
|
if (!e) return;
|
|
75
|
-
const
|
|
76
|
-
if (!(
|
|
77
|
-
const
|
|
78
|
-
const
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
87
|
+
const m = e.querySelector("." + r("modal-body"));
|
|
88
|
+
if (!(m instanceof HTMLElement)) return;
|
|
89
|
+
const D = e.querySelector("." + r("modal-header")), G = e.querySelector("." + r("modal-footer")), J = () => {
|
|
90
|
+
const Ce = m.scrollHeight > m.clientHeight;
|
|
91
|
+
he(Ce), D instanceof HTMLElement && q((C) => ({
|
|
92
|
+
...C,
|
|
93
|
+
headerHeight: D.offsetHeight
|
|
94
|
+
})), G instanceof HTMLElement && q((C) => ({
|
|
95
|
+
...C,
|
|
96
|
+
footerHeight: G.offsetHeight
|
|
97
|
+
}));
|
|
98
|
+
}, K = new ResizeObserver(J);
|
|
99
|
+
c.current = K, K.observe(m), J();
|
|
84
100
|
},
|
|
85
|
-
[
|
|
101
|
+
[r]
|
|
86
102
|
);
|
|
87
|
-
|
|
103
|
+
Me(() => () => {
|
|
88
104
|
c.current && (c.current.disconnect(), c.current = null);
|
|
89
105
|
}, []);
|
|
90
|
-
const [
|
|
106
|
+
const [j] = Ie("Modal", Ne()), W = R || j?.okText, A = E || j?.cancelText, v = n(
|
|
91
107
|
() => ({
|
|
92
108
|
// loading: typeof confirmLoading === "boolean" ? confirmLoading : loading,
|
|
93
|
-
...
|
|
109
|
+
...T
|
|
94
110
|
}),
|
|
95
|
-
[
|
|
96
|
-
),
|
|
111
|
+
[T]
|
|
112
|
+
), H = n(
|
|
97
113
|
() => ({
|
|
98
|
-
...
|
|
114
|
+
...N
|
|
99
115
|
}),
|
|
100
|
-
[
|
|
101
|
-
), [
|
|
116
|
+
[N]
|
|
117
|
+
), [He, V] = x(ne), b = typeof z > "u", be = b ? He : z, y = ke(
|
|
102
118
|
(e) => {
|
|
103
|
-
|
|
119
|
+
a || O?.(e);
|
|
104
120
|
}
|
|
105
|
-
),
|
|
121
|
+
), X = n(
|
|
106
122
|
() => ({
|
|
107
|
-
okButtonProps:
|
|
108
|
-
cancelButtonProps:
|
|
123
|
+
okButtonProps: v,
|
|
124
|
+
cancelButtonProps: H,
|
|
109
125
|
onCancel: y,
|
|
110
|
-
onOk:
|
|
111
|
-
okType:
|
|
112
|
-
confirmLoading:
|
|
113
|
-
okTextLocale:
|
|
114
|
-
cancelTextLocale:
|
|
126
|
+
onOk: u,
|
|
127
|
+
okType: B,
|
|
128
|
+
confirmLoading: a,
|
|
129
|
+
okTextLocale: W,
|
|
130
|
+
cancelTextLocale: A
|
|
115
131
|
}),
|
|
116
132
|
[
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
F,
|
|
133
|
+
v,
|
|
134
|
+
H,
|
|
135
|
+
u,
|
|
136
|
+
B,
|
|
137
|
+
a,
|
|
123
138
|
W,
|
|
139
|
+
A,
|
|
124
140
|
y
|
|
125
141
|
]
|
|
126
|
-
),
|
|
127
|
-
() => /* @__PURE__ */ o(
|
|
128
|
-
/* @__PURE__ */ o(
|
|
129
|
-
/* @__PURE__ */ o(
|
|
142
|
+
), ye = n(
|
|
143
|
+
() => /* @__PURE__ */ o(Te, { value: X, children: p ? /* @__PURE__ */ o(U, {}) : h ? /* @__PURE__ */ o(Y, {}) : /* @__PURE__ */ i(Q, { children: [
|
|
144
|
+
/* @__PURE__ */ o(U, {}),
|
|
145
|
+
/* @__PURE__ */ o(Y, {})
|
|
130
146
|
] }) }),
|
|
131
|
-
[
|
|
147
|
+
[X, p, h]
|
|
132
148
|
);
|
|
133
|
-
return /* @__PURE__ */
|
|
134
|
-
|
|
149
|
+
return /* @__PURE__ */ i(
|
|
150
|
+
xe,
|
|
135
151
|
{
|
|
136
152
|
closeIcon: !1,
|
|
137
|
-
open:
|
|
138
|
-
width:
|
|
139
|
-
style:
|
|
140
|
-
title: /* @__PURE__ */
|
|
141
|
-
/* @__PURE__ */
|
|
142
|
-
/* @__PURE__ */ o(
|
|
143
|
-
/* @__PURE__ */
|
|
144
|
-
|
|
153
|
+
open: be,
|
|
154
|
+
width: fe,
|
|
155
|
+
style: ue,
|
|
156
|
+
title: /* @__PURE__ */ i(Q, { children: [
|
|
157
|
+
/* @__PURE__ */ i(S, { align: "center", gap: 8, className: r("modal-title-wrapper"), children: [
|
|
158
|
+
/* @__PURE__ */ o(S.Child, { grow: !0, children: typeof g == "string" ? /* @__PURE__ */ o(Oe, { children: g }) : g }),
|
|
159
|
+
/* @__PURE__ */ i(S.Child, { stack: !0, hug: !0, align: "center", gap: 8, children: [
|
|
160
|
+
oe,
|
|
145
161
|
/* @__PURE__ */ o(
|
|
146
|
-
|
|
162
|
+
Re,
|
|
147
163
|
{
|
|
148
164
|
onClick: (e) => y(e),
|
|
149
|
-
children:
|
|
165
|
+
children: de
|
|
150
166
|
}
|
|
151
167
|
),
|
|
152
|
-
|
|
168
|
+
re
|
|
153
169
|
] })
|
|
154
170
|
] }),
|
|
155
|
-
|
|
171
|
+
$ || null
|
|
156
172
|
] }),
|
|
157
|
-
rootClassName:
|
|
173
|
+
rootClassName: $e(ge, ce),
|
|
158
174
|
classNames: {
|
|
159
|
-
...
|
|
160
|
-
wrapper:
|
|
175
|
+
...ee,
|
|
176
|
+
wrapper: r(
|
|
161
177
|
"modal-wrap",
|
|
162
178
|
l == "fullscreen" && "modal-fullscreen",
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
179
|
+
L && "modal-content-overflow",
|
|
180
|
+
ie === !1 && "modal-no-body-scroll",
|
|
181
|
+
I && "modal-loading",
|
|
182
|
+
te || L || l == "fullscreen" ? "modal-fixed" : ""
|
|
166
183
|
)
|
|
167
184
|
},
|
|
168
|
-
styles:
|
|
169
|
-
modalRender: (e) => /* @__PURE__ */ o("div", { ref:
|
|
170
|
-
okButtonProps:
|
|
171
|
-
cancelButtonProps:
|
|
185
|
+
styles: pe,
|
|
186
|
+
modalRender: (e) => /* @__PURE__ */ o("div", { ref: ve, className: r("modal-inner"), children: e }),
|
|
187
|
+
okButtonProps: v,
|
|
188
|
+
cancelButtonProps: H,
|
|
172
189
|
onOk: (e) => {
|
|
173
|
-
|
|
190
|
+
b && V(!1), u?.(e);
|
|
174
191
|
},
|
|
175
192
|
onCancel: (e) => {
|
|
176
|
-
|
|
193
|
+
a || (b && V(!1), O?.(e));
|
|
177
194
|
},
|
|
178
|
-
okText:
|
|
179
|
-
cancelText:
|
|
195
|
+
okText: R,
|
|
196
|
+
cancelText: E,
|
|
180
197
|
okType: "primary",
|
|
181
|
-
confirmLoading:
|
|
182
|
-
footer: typeof
|
|
183
|
-
centered:
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
198
|
+
confirmLoading: a,
|
|
199
|
+
footer: typeof M > "u" ? p && h ? null : ye : M,
|
|
200
|
+
centered: le,
|
|
201
|
+
...me,
|
|
202
|
+
children: [
|
|
203
|
+
Z,
|
|
204
|
+
I ? /* @__PURE__ */ o("div", { className: r("modal-loading-overlay"), children: /* @__PURE__ */ o(qe, {}) }) : null
|
|
205
|
+
]
|
|
187
206
|
}
|
|
188
207
|
);
|
|
189
208
|
};
|
|
190
209
|
export {
|
|
191
|
-
|
|
210
|
+
to as Modal
|
|
192
211
|
};
|
|
193
212
|
//# sourceMappingURL=Modal.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.js","sources":["../../../src/components/modal/Modal.tsx"],"sourcesContent":["\"use client\";\nimport {\n default as AntModal,\n type ModalProps as AntModalProps,\n} from \"antd/es/modal\";\nimport { XIcon } from \"@bioturing/assets\";\nimport React, {\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { useStableCallback } from \"@base-ui/utils/useStableCallback\";\nimport { clsx, useCls } from \"../utils\";\nimport { ModalContextProvider } from \"antd/es/modal/context\";\nimport NormalCancelBtn from \"antd/es/modal/components/NormalCancelBtn\";\nimport NormalOkBtn from \"antd/es/modal/components/NormalOkBtn\";\nimport { getConfirmLocale } from \"antd/es/modal/locale\";\nimport { useLocale } from \"antd/es/locale\";\nimport { IconButton } from \"../icon-button\";\nimport { ModalSize } from \"./constants\";\nimport { ModalType } from \"./functions\";\nimport { Truncate } from \"../truncate\";\nimport { Stack } from \"../stack\";\nimport { useTheme } from \"../theme-provider\";\n\n// Define props interface extending Ant Design's ModalProps\nexport interface ModalProps extends Omit<AntModalProps, \"centered\"> {\n /**\n * Predefined sizes for the modal\n * - xsmall: 400px\n * - small: 520px\n * - medium: 640px (default)\n * - large: 840px\n * - xlarge: 1024px\n * - fullscreen: 100vw (takes full screen width with margins)\n * @default \"medium\" for default type, \"xsmall\" for other types\n */\n size?:\n | \"xsmall\"\n | \"small\"\n | \"medium\"\n | \"large\"\n | \"xlarge\"\n | \"xxlarge\"\n | \"fullscreen\";\n /**\n * Mark modal as loading\n * @default false\n */\n loading?: boolean;\n /**\n * Hide Ok button\n * @default false\n */\n hideOkButton?: boolean;\n /**\n * Hide Cancel button\n * @default false\n */\n hideCancelButton?: boolean;\n /**\n * Custom Content Padding\n * @default \"24px\"\n */\n contentPadding?: number | string | boolean;\n /**\n * Add more content below the title\n */\n afterTitle?: React.ReactNode;\n /**\n * Add more actions before close button\n */\n beforeCloseButton?: React.ReactNode;\n /**\n * Add more actions after close button\n */\n afterCloseButton?: React.ReactNode;\n /**\n * Set header and footer to fixed position\n * @default false\n */\n defaultFixedHeaderFooter?: boolean;\n /**\n * Centered Modal\n * @default true\n */\n centered?: boolean;\n /**\n * Modal type\n * @default \"default\"\n */\n type?: ModalType;\n /**\n * Default open state for uncontrolled modal\n * @default true\n */\n defaultOpen?: boolean;\n /**\n * Modal background\n * @default \"elevated\" if size smaller than \"medium\", otherwise \"container\"\n */\n background?: \"elevated\" | \"container\";\n /**\n * Modal old close callback\n * @deprecated use onCancel instead\n */\n onClose?: () => void;\n /**\n * Make modal body scrollable\n * @default true\n */\n bodyScrollable?: boolean;\n}\n\n// Create Modal component\nexport const Modal = ({\n open: externalOpen,\n closeIcon,\n children,\n size: sizeProp,\n footer,\n width,\n style,\n styles,\n classNames,\n okButtonProps,\n cancelButtonProps,\n loading,\n onOk,\n onCancel,\n okText,\n okType = \"primary\",\n confirmLoading,\n cancelText = \"Close\",\n hideOkButton = false,\n hideCancelButton = false,\n contentPadding,\n title,\n afterTitle,\n beforeCloseButton,\n afterCloseButton,\n defaultFixedHeaderFooter = false,\n centered = true,\n type = \"default\",\n defaultOpen = true,\n background: backgroundProp,\n bodyScrollable = true,\n rootClassName,\n ...rest\n}: ModalProps) => {\n // Default close icon with Phosphor icon\n const defaultCloseIcon =\n closeIcon === undefined ? <XIcon size={16} weight=\"bold\" /> : closeIcon;\n\n // Use custom width if provided, otherwise use the size from the map\n const defaultModalSize = type === \"default\" ? \"medium\" : \"xsmall\";\n\n const size: keyof typeof ModalSize = sizeProp || defaultModalSize;\n const modalWidth = width || ModalSize[size];\n\n const background =\n backgroundProp ||\n (size &&\n size in ModalSize &&\n parseInt(ModalSize[size]) <= parseInt(ModalSize.medium)\n ? \"elevated\"\n : \"container\");\n\n // Memoize modal styles to prevent recreating on every render\n const modalStyle = useMemo(\n () =>\n ({\n \"--ds-modal-bg\": `var(--ds-color-bg-${background})`,\n ...style,\n ...(size === \"fullscreen\"\n ? { top: 0, maxWidth: \"100%\", height: \"100%\" }\n : {}),\n }) as React.CSSProperties,\n [background, style, size],\n );\n\n const modalStyles = useMemo(\n () => ({\n ...styles,\n body: {\n ...((typeof contentPadding != \"undefined\"\n ? {\n \"--ds-modal-content-padding\":\n contentPadding === false || contentPadding === 0\n ? \"0\"\n : typeof contentPadding == \"number\"\n ? `${contentPadding}px`\n : contentPadding,\n }\n : {}) as React.CSSProperties),\n ...styles?.body,\n },\n }),\n [styles, contentPadding],\n );\n\n const [isContentOverflow, setIsContentOverflow] = useState(false);\n\n const cls = useCls();\n\n const { className: themeClassName } = useTheme();\n\n const resizeObserverRef = useRef<ResizeObserver | null>(null);\n\n const modalInnerRef = useCallback(\n (node: HTMLElement | null) => {\n // If the node is null (component unmounting), just return\n if (!node) return;\n\n const modalBody = node.querySelector(\".\" + cls(\"modal-body\"));\n if (!(modalBody instanceof HTMLElement)) return;\n\n // Create ResizeObserver to detect overflow\n const resizeObserver = new ResizeObserver(() => {\n const hasOverflow = modalBody.scrollHeight > modalBody.clientHeight;\n setIsContentOverflow(hasOverflow);\n });\n\n // Store reference to the observer\n resizeObserverRef.current = resizeObserver;\n\n // Start observing\n resizeObserver.observe(modalBody);\n\n // Initial check\n const hasOverflow = modalBody.scrollHeight > modalBody.clientHeight;\n setIsContentOverflow(hasOverflow);\n },\n [cls],\n );\n\n // clean up resize observer\n useEffect(() => {\n return () => {\n if (resizeObserverRef.current) {\n resizeObserverRef.current.disconnect();\n resizeObserverRef.current = null;\n }\n };\n }, []);\n\n const [locale] = useLocale(\"Modal\", getConfirmLocale());\n\n const okTextLocale: React.ReactNode = okText || locale?.okText;\n const cancelTextLocale = cancelText || locale?.cancelText;\n\n const modalOkButtonProps = useMemo(\n () => ({\n // loading: typeof confirmLoading === \"boolean\" ? confirmLoading : loading,\n ...okButtonProps,\n }),\n [okButtonProps],\n );\n\n const modalCancelButtonProps = useMemo(\n () => ({\n ...cancelButtonProps,\n }),\n [cancelButtonProps],\n );\n\n const [internalOpen, setInternalOpen] = useState(defaultOpen);\n\n const uncontrolledOpen = typeof externalOpen === \"undefined\";\n\n const open = uncontrolledOpen ? internalOpen : externalOpen;\n\n const handleCancel = useStableCallback(\n (e: React.MouseEvent<HTMLButtonElement>) => {\n if (confirmLoading) {\n return;\n }\n onCancel?.(e);\n },\n );\n\n const modalContextValue = useMemo(\n () => ({\n okButtonProps: modalOkButtonProps,\n cancelButtonProps: modalCancelButtonProps,\n onCancel: handleCancel,\n onOk,\n okType,\n confirmLoading,\n okTextLocale,\n cancelTextLocale,\n }),\n [\n modalOkButtonProps,\n modalCancelButtonProps,\n onOk,\n okType,\n confirmLoading,\n okTextLocale,\n cancelTextLocale,\n handleCancel,\n ],\n );\n\n const defaultFooter = useMemo(\n () => (\n <ModalContextProvider value={modalContextValue}>\n {hideOkButton ? (\n <NormalCancelBtn />\n ) : hideCancelButton ? (\n <NormalOkBtn />\n ) : (\n <>\n <NormalCancelBtn />\n <NormalOkBtn />\n </>\n )}\n </ModalContextProvider>\n ),\n [modalContextValue, hideOkButton, hideCancelButton],\n );\n\n const renderTitle = () => {\n return (\n <>\n <Stack align=\"center\" gap={8} className={cls(\"modal-title-wrapper\")}>\n <Stack.Child grow>\n {typeof title === \"string\" ? <Truncate>{title}</Truncate> : title}\n </Stack.Child>\n <Stack.Child stack hug align=\"center\" gap={8}>\n {beforeCloseButton}\n <IconButton\n onClick={(e: React.MouseEvent<HTMLButtonElement>) =>\n handleCancel(e)\n }\n >\n {defaultCloseIcon}\n </IconButton>\n {afterCloseButton}\n </Stack.Child>\n {}\n </Stack>\n {afterTitle ? afterTitle : null}\n </>\n );\n };\n return (\n <AntModal\n closeIcon={false}\n open={open}\n width={modalWidth}\n style={modalStyle}\n title={renderTitle()}\n rootClassName={clsx(themeClassName, rootClassName)}\n classNames={{\n ...classNames,\n wrapper: cls(\n \"modal-wrap\",\n size == \"fullscreen\" && \"modal-fullscreen\",\n isContentOverflow && \"modal-content-overflow\",\n bodyScrollable === false && \"modal-no-body-scroll\",\n defaultFixedHeaderFooter || isContentOverflow || size == \"fullscreen\"\n ? \"modal-fixed\"\n : \"\",\n ),\n }}\n styles={modalStyles}\n modalRender={(modal) => (\n <div ref={modalInnerRef} className={cls(\"modal-inner\")}>\n {modal}\n </div>\n )}\n okButtonProps={modalOkButtonProps}\n cancelButtonProps={modalCancelButtonProps}\n onOk={(e) => {\n if (uncontrolledOpen) setInternalOpen(false);\n onOk?.(e);\n }}\n onCancel={(e) => {\n if (confirmLoading) return;\n if (uncontrolledOpen) setInternalOpen(false);\n onCancel?.(e);\n }}\n okText={okText}\n cancelText={cancelText}\n okType=\"primary\"\n confirmLoading={confirmLoading}\n footer={\n typeof footer === \"undefined\"\n ? hideOkButton && hideCancelButton\n ? null\n : defaultFooter\n : footer\n }\n centered={centered}\n loading={loading}\n {...rest}\n >\n {children}\n </AntModal>\n );\n};\n"],"names":["Modal","externalOpen","closeIcon","children","sizeProp","footer","width","style","styles","classNames","okButtonProps","cancelButtonProps","loading","onOk","onCancel","okText","okType","confirmLoading","cancelText","hideOkButton","hideCancelButton","contentPadding","title","afterTitle","beforeCloseButton","afterCloseButton","defaultFixedHeaderFooter","centered","type","defaultOpen","backgroundProp","bodyScrollable","rootClassName","rest","defaultCloseIcon","jsx","XIcon","size","modalWidth","ModalSize","background","modalStyle","useMemo","modalStyles","isContentOverflow","setIsContentOverflow","useState","cls","useCls","themeClassName","useTheme","resizeObserverRef","useRef","modalInnerRef","useCallback","node","modalBody","resizeObserver","hasOverflow","useEffect","locale","useLocale","getConfirmLocale","okTextLocale","cancelTextLocale","modalOkButtonProps","modalCancelButtonProps","internalOpen","setInternalOpen","uncontrolledOpen","open","handleCancel","useStableCallback","modalContextValue","defaultFooter","ModalContextProvider","NormalCancelBtn","NormalOkBtn","jsxs","Fragment","AntModal","Stack","Truncate","IconButton","clsx","modal"],"mappings":";;;;;;;;;;;;;;;;;;AAqHO,MAAMA,KAAQ,CAAC;AAAA,EACpB,MAAMC;AAAA,EACN,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAMC;AAAA,EACN,QAAAC;AAAA,EACA,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,YAAAC;AAAA,EACA,eAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,SAAAC;AAAA,EACA,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,gBAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,cAAAC,IAAe;AAAA,EACf,kBAAAC,IAAmB;AAAA,EACnB,gBAAAC;AAAA,EACA,OAAAC;AAAA,EACA,YAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,0BAAAC,IAA2B;AAAA,EAC3B,UAAAC,IAAW;AAAA,EACX,MAAAC,KAAO;AAAA,EACP,aAAAC,KAAc;AAAA,EACd,YAAYC;AAAA,EACZ,gBAAAC,KAAiB;AAAA,EACjB,eAAAC;AAAA,EACA,GAAGC;AACL,MAAkB;AAEhB,QAAMC,KACJhC,MAAc,SAAY,gBAAAiC,EAACC,MAAM,MAAM,IAAI,QAAO,OAAA,CAAO,IAAKlC,GAK1DmC,IAA+BjC,MAFZwB,OAAS,YAAY,WAAW,WAGnDU,KAAahC,KAASiC,EAAUF,CAAI,GAEpCG,IACJV,OAEAO,KAAQE,KACR,SAASA,EAAUF,CAAI,CAAC,KAAK,SAASE,EAAU,MAAM,IAClD,aACA,cAGAE,KAAaC;AAAA,IACjB,OACG;AAAA,MACC,iBAAiB,qBAAqBF,CAAU;AAAA,MAChD,GAAGjC;AAAA,MACH,GAAI8B,MAAS,eACT,EAAE,KAAK,GAAG,UAAU,QAAQ,QAAQ,WACpC,CAAA;AAAA,IAAC;AAAA,IAET,CAACG,GAAYjC,GAAO8B,CAAI;AAAA,EAAA,GAGpBM,KAAcD;AAAA,IAClB,OAAO;AAAA,MACL,GAAGlC;AAAA,MACH,MAAM;AAAA,QACJ,GAAK,OAAOa,IAAkB,MAC1B;AAAA,UACE,8BACEA,MAAmB,MAASA,MAAmB,IAC3C,MACA,OAAOA,KAAkB,WACvB,GAAGA,CAAc,OACjBA;AAAA,QAAA,IAEV,CAAA;AAAA,QACJ,GAAGb,GAAQ;AAAA,MAAA;AAAA,IACb;AAAA,IAEF,CAACA,GAAQa,CAAc;AAAA,EAAA,GAGnB,CAACuB,GAAmBC,CAAoB,IAAIC,EAAS,EAAK,GAE1DC,IAAMC,GAAA,GAEN,EAAE,WAAWC,GAAA,IAAmBC,GAAA,GAEhCC,IAAoBC,GAA8B,IAAI,GAEtDC,KAAgBC;AAAA,IACpB,CAACC,MAA6B;AAE5B,UAAI,CAACA,EAAM;AAEX,YAAMC,IAAYD,EAAK,cAAc,MAAMR,EAAI,YAAY,CAAC;AAC5D,UAAI,EAAES,aAAqB,aAAc;AAGzC,YAAMC,IAAiB,IAAI,eAAe,MAAM;AAC9C,cAAMC,KAAcF,EAAU,eAAeA,EAAU;AACvD,QAAAX,EAAqBa,EAAW;AAAA,MAClC,CAAC;AAGD,MAAAP,EAAkB,UAAUM,GAG5BA,EAAe,QAAQD,CAAS;AAGhC,YAAME,KAAcF,EAAU,eAAeA,EAAU;AACvD,MAAAX,EAAqBa,EAAW;AAAA,IAClC;AAAA,IACA,CAACX,CAAG;AAAA,EAAA;AAIN,EAAAY,GAAU,MACD,MAAM;AACX,IAAIR,EAAkB,YACpBA,EAAkB,QAAQ,WAAA,GAC1BA,EAAkB,UAAU;AAAA,EAEhC,GACC,CAAA,CAAE;AAEL,QAAM,CAACS,CAAM,IAAIC,GAAU,SAASC,IAAkB,GAEhDC,IAAgChD,KAAU6C,GAAQ,QAClDI,IAAmB9C,KAAc0C,GAAQ,YAEzCK,IAAqBvB;AAAA,IACzB,OAAO;AAAA;AAAA,MAEL,GAAGhC;AAAA,IAAA;AAAA,IAEL,CAACA,CAAa;AAAA,EAAA,GAGVwD,IAAyBxB;AAAA,IAC7B,OAAO;AAAA,MACL,GAAG/B;AAAA,IAAA;AAAA,IAEL,CAACA,CAAiB;AAAA,EAAA,GAGd,CAACwD,IAAcC,CAAe,IAAItB,EAASjB,EAAW,GAEtDwC,IAAmB,OAAOpE,IAAiB,KAE3CqE,KAAOD,IAAmBF,KAAelE,GAEzCsE,IAAeC;AAAA,IACnB,CAAC,MAA2C;AAC1C,MAAIvD,KAGJH,IAAW,CAAC;AAAA,IACd;AAAA,EAAA,GAGI2D,IAAoB/B;AAAA,IACxB,OAAO;AAAA,MACL,eAAeuB;AAAA,MACf,mBAAmBC;AAAA,MACnB,UAAUK;AAAA,MACV,MAAA1D;AAAA,MACA,QAAAG;AAAA,MACA,gBAAAC;AAAA,MACA,cAAA8C;AAAA,MACA,kBAAAC;AAAA,IAAA;AAAA,IAEF;AAAA,MACEC;AAAA,MACAC;AAAA,MACArD;AAAA,MACAG;AAAA,MACAC;AAAA,MACA8C;AAAA,MACAC;AAAA,MACAO;AAAA,IAAA;AAAA,EACF,GAGIG,KAAgBhC;AAAA,IACpB,MACE,gBAAAP,EAACwC,IAAA,EAAqB,OAAOF,GAC1B,UAAAtD,IACC,gBAAAgB,EAACyC,GAAA,CAAA,CAAgB,IACfxD,IACF,gBAAAe,EAAC0C,GAAA,CAAA,CAAY,IAEb,gBAAAC,EAAAC,GAAA,EACE,UAAA;AAAA,MAAA,gBAAA5C,EAACyC,GAAA,EAAgB;AAAA,wBAChBC,GAAA,CAAA,CAAY;AAAA,IAAA,EAAA,CACf,EAAA,CAEJ;AAAA,IAEF,CAACJ,GAAmBtD,GAAcC,CAAgB;AAAA,EAAA;AA2BpD,SACE,gBAAAe;AAAA,IAAC6C;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,MACX,MAAAV;AAAA,MACA,OAAOhC;AAAA,MACP,OAAOG;AAAA,MACP,OA5BA,gBAAAqC,EAAAC,GAAA,EACE,UAAA;AAAA,QAAA,gBAAAD,EAACG,GAAA,EAAM,OAAM,UAAS,KAAK,GAAG,WAAWlC,EAAI,qBAAqB,GAChE,UAAA;AAAA,UAAA,gBAAAZ,EAAC8C,EAAM,OAAN,EAAY,MAAI,IACd,UAAA,OAAO3D,KAAU,WAAW,gBAAAa,EAAC+C,IAAA,EAAU,UAAA5D,EAAA,CAAM,IAAcA,GAC9D;AAAA,UACA,gBAAAwD,EAACG,EAAM,OAAN,EAAY,OAAK,IAAC,KAAG,IAAC,OAAM,UAAS,KAAK,GACxC,UAAA;AAAA,YAAAzD;AAAA,YACD,gBAAAW;AAAA,cAACgD;AAAA,cAAA;AAAA,gBACC,SAAS,CAAC,MACRZ,EAAa,CAAC;AAAA,gBAGf,UAAArC;AAAA,cAAA;AAAA,YAAA;AAAA,YAEFT;AAAA,UAAA,EAAA,CACH;AAAA,QAAA,GAEF;AAAA,QACCF,KAA0B;AAAA,MAAA,GAC7B;AAAA,MAUA,eAAe6D,GAAKnC,IAAgBjB,EAAa;AAAA,MACjD,YAAY;AAAA,QACV,GAAGvB;AAAA,QACH,SAASsC;AAAA,UACP;AAAA,UACAV,KAAQ,gBAAgB;AAAA,UACxBO,KAAqB;AAAA,UACrBb,OAAmB,MAAS;AAAA,UAC5BL,KAA4BkB,KAAqBP,KAAQ,eACrD,gBACA;AAAA,QAAA;AAAA,MACN;AAAA,MAEF,QAAQM;AAAA,MACR,aAAa,CAAC0C,MACZ,gBAAAlD,EAAC,OAAA,EAAI,KAAKkB,IAAe,WAAWN,EAAI,aAAa,GAClD,UAAAsC,EAAA,CACH;AAAA,MAEF,eAAepB;AAAA,MACf,mBAAmBC;AAAA,MACnB,MAAM,CAAC,MAAM;AACX,QAAIG,OAAkC,EAAK,GAC3CxD,IAAO,CAAC;AAAA,MACV;AAAA,MACA,UAAU,CAAC,MAAM;AACf,QAAII,MACAoD,OAAkC,EAAK,GAC3CvD,IAAW,CAAC;AAAA,MACd;AAAA,MACA,QAAAC;AAAA,MACA,YAAAG;AAAA,MACA,QAAO;AAAA,MACP,gBAAAD;AAAA,MACA,QACE,OAAOZ,IAAW,MACdc,KAAgBC,IACd,OACAsD,KACFrE;AAAA,MAEN,UAAAsB;AAAA,MACA,SAAAf;AAAA,MACC,GAAGqB;AAAA,MAEH,UAAA9B;AAAA,IAAA;AAAA,EAAA;AAGP;"}
|
|
1
|
+
{"version":3,"file":"Modal.js","sources":["../../../src/components/modal/Modal.tsx"],"sourcesContent":["\"use client\";\nimport {\n default as AntModal,\n type ModalProps as AntModalProps,\n} from \"antd/es/modal\";\nimport { XIcon } from \"@bioturing/assets\";\nimport React, {\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { useStableCallback } from \"@base-ui/utils/useStableCallback\";\nimport { clsx, useCls } from \"../utils\";\nimport { ModalContextProvider } from \"antd/es/modal/context\";\nimport NormalCancelBtn from \"antd/es/modal/components/NormalCancelBtn\";\nimport NormalOkBtn from \"antd/es/modal/components/NormalOkBtn\";\nimport { getConfirmLocale } from \"antd/es/modal/locale\";\nimport { useLocale } from \"antd/es/locale\";\nimport { IconButton } from \"../icon-button\";\nimport { ModalSize } from \"./constants\";\nimport { ModalType } from \"./functions\";\nimport { Truncate } from \"../truncate\";\nimport { Stack } from \"../stack\";\nimport { useTheme } from \"../theme-provider\";\nimport { Spin } from \"../spin\";\n\n// Define props interface extending Ant Design's ModalProps\nexport interface ModalProps extends Omit<AntModalProps, \"centered\"> {\n /**\n * Predefined sizes for the modal\n * - xsmall: 400px\n * - small: 520px\n * - medium: 640px (default)\n * - large: 840px\n * - xlarge: 1024px\n * - fullscreen: 100vw (takes full screen width with margins)\n * @default \"medium\" for default type, \"xsmall\" for other types\n */\n size?:\n | \"xsmall\"\n | \"small\"\n | \"medium\"\n | \"large\"\n | \"xlarge\"\n | \"xxlarge\"\n | \"fullscreen\";\n /**\n * Mark modal as loading\n * @default false\n */\n loading?: boolean;\n /**\n * Hide Ok button\n * @default false\n */\n hideOkButton?: boolean;\n /**\n * Hide Cancel button\n * @default false\n */\n hideCancelButton?: boolean;\n /**\n * Custom Content Padding\n * @default \"24px\"\n */\n contentPadding?: number | string | boolean;\n /**\n * Add more content below the title\n */\n afterTitle?: React.ReactNode;\n /**\n * Add more actions before close button\n */\n beforeCloseButton?: React.ReactNode;\n /**\n * Add more actions after close button\n */\n afterCloseButton?: React.ReactNode;\n /**\n * Set header and footer to fixed position\n * @default false\n */\n defaultFixedHeaderFooter?: boolean;\n /**\n * Centered Modal\n * @default true\n */\n centered?: boolean;\n /**\n * Modal type\n * @default \"default\"\n */\n type?: ModalType;\n /**\n * Default open state for uncontrolled modal\n * @default true\n */\n defaultOpen?: boolean;\n /**\n * Modal background\n * @default \"elevated\" if size smaller than \"medium\", otherwise \"container\"\n */\n background?: \"elevated\" | \"container\";\n /**\n * Modal old close callback\n * @deprecated use onCancel instead\n */\n onClose?: () => void;\n /**\n * Make modal body scrollable\n * @default true\n */\n bodyScrollable?: boolean;\n}\n\n// Create Modal component\nexport const Modal = ({\n open: externalOpen,\n closeIcon,\n children,\n size: sizeProp,\n footer,\n width,\n style,\n styles,\n classNames,\n okButtonProps,\n cancelButtonProps,\n loading,\n onOk,\n onCancel,\n okText,\n okType = \"primary\",\n confirmLoading,\n cancelText = \"Close\",\n hideOkButton = false,\n hideCancelButton = false,\n contentPadding,\n title,\n afterTitle,\n beforeCloseButton,\n afterCloseButton,\n defaultFixedHeaderFooter = false,\n centered = true,\n type = \"default\",\n defaultOpen = true,\n background: backgroundProp,\n bodyScrollable = true,\n rootClassName,\n ...rest\n}: ModalProps) => {\n // Default close icon with Phosphor icon\n const defaultCloseIcon =\n closeIcon === undefined ? <XIcon size={16} weight=\"bold\" /> : closeIcon;\n\n // Use custom width if provided, otherwise use the size from the map\n const defaultModalSize = type === \"default\" ? \"medium\" : \"xsmall\";\n\n const size: keyof typeof ModalSize = sizeProp || defaultModalSize;\n const modalWidth = width || ModalSize[size];\n\n const [sizeTracking, setSizeTracking] = useState<{\n headerHeight: number | undefined;\n footerHeight: number | undefined;\n }>({\n headerHeight: undefined,\n footerHeight: undefined,\n });\n\n const background =\n backgroundProp ||\n (size &&\n size in ModalSize &&\n parseInt(ModalSize[size]) <= parseInt(ModalSize.medium)\n ? \"elevated\"\n : \"container\");\n\n // Memoize modal styles to prevent recreating on every render\n const modalStyle = useMemo(\n () =>\n ({\n \"--ds-modal-bg\": `var(--ds-color-bg-${background})`,\n \"--ds-modal-header-height\": sizeTracking.headerHeight\n ? `${sizeTracking.headerHeight}px`\n : undefined,\n \"--ds-modal-footer-height\": sizeTracking.footerHeight\n ? `${sizeTracking.footerHeight}px`\n : undefined,\n ...style,\n ...(size === \"fullscreen\"\n ? { top: 0, maxWidth: \"100%\", height: \"100%\" }\n : {}),\n }) as React.CSSProperties,\n [\n background,\n style,\n size,\n sizeTracking.headerHeight,\n sizeTracking.footerHeight,\n ],\n );\n\n const modalStyles = useMemo(\n () => ({\n ...styles,\n body: {\n ...((typeof contentPadding != \"undefined\"\n ? {\n \"--ds-modal-content-padding\":\n contentPadding === false || contentPadding === 0\n ? \"0\"\n : typeof contentPadding == \"number\"\n ? `${contentPadding}px`\n : contentPadding,\n }\n : {}) as React.CSSProperties),\n ...styles?.body,\n },\n }),\n [styles, contentPadding],\n );\n\n const [isContentOverflow, setIsContentOverflow] = useState(false);\n\n const cls = useCls();\n\n const { className: themeClassName } = useTheme();\n\n const resizeObserverRef = useRef<ResizeObserver | null>(null);\n\n const modalInnerRef = useCallback(\n (node: HTMLElement | null) => {\n // If the node is null (component unmounting), just return\n if (!node) return;\n\n const modalBody = node.querySelector(\".\" + cls(\"modal-body\"));\n if (!(modalBody instanceof HTMLElement)) return;\n\n const modalHeader = node.querySelector(\".\" + cls(\"modal-header\"));\n const modalFooter = node.querySelector(\".\" + cls(\"modal-footer\"));\n\n const resizeObserverHandler = () => {\n const hasOverflow = modalBody.scrollHeight > modalBody.clientHeight;\n setIsContentOverflow(hasOverflow);\n if (modalHeader instanceof HTMLElement) {\n setSizeTracking((prev) => ({\n ...prev,\n headerHeight: modalHeader.offsetHeight,\n }));\n }\n if (modalFooter instanceof HTMLElement) {\n setSizeTracking((prev) => ({\n ...prev,\n footerHeight: modalFooter.offsetHeight,\n }));\n }\n };\n\n // Create ResizeObserver to detect overflow\n const resizeObserver = new ResizeObserver(resizeObserverHandler);\n\n // Store reference to the observer\n resizeObserverRef.current = resizeObserver;\n\n // Start observing\n resizeObserver.observe(modalBody);\n\n // Initial check\n resizeObserverHandler();\n },\n [cls],\n );\n\n // clean up resize observer\n useEffect(() => {\n return () => {\n if (resizeObserverRef.current) {\n resizeObserverRef.current.disconnect();\n resizeObserverRef.current = null;\n }\n };\n }, []);\n\n const [locale] = useLocale(\"Modal\", getConfirmLocale());\n\n const okTextLocale: React.ReactNode = okText || locale?.okText;\n const cancelTextLocale = cancelText || locale?.cancelText;\n\n const modalOkButtonProps = useMemo(\n () => ({\n // loading: typeof confirmLoading === \"boolean\" ? confirmLoading : loading,\n ...okButtonProps,\n }),\n [okButtonProps],\n );\n\n const modalCancelButtonProps = useMemo(\n () => ({\n ...cancelButtonProps,\n }),\n [cancelButtonProps],\n );\n\n const [internalOpen, setInternalOpen] = useState(defaultOpen);\n\n const uncontrolledOpen = typeof externalOpen === \"undefined\";\n\n const open = uncontrolledOpen ? internalOpen : externalOpen;\n\n const handleCancel = useStableCallback(\n (e: React.MouseEvent<HTMLButtonElement>) => {\n if (confirmLoading) {\n return;\n }\n onCancel?.(e);\n },\n );\n\n const modalContextValue = useMemo(\n () => ({\n okButtonProps: modalOkButtonProps,\n cancelButtonProps: modalCancelButtonProps,\n onCancel: handleCancel,\n onOk,\n okType,\n confirmLoading,\n okTextLocale,\n cancelTextLocale,\n }),\n [\n modalOkButtonProps,\n modalCancelButtonProps,\n onOk,\n okType,\n confirmLoading,\n okTextLocale,\n cancelTextLocale,\n handleCancel,\n ],\n );\n\n const defaultFooter = useMemo(\n () => (\n <ModalContextProvider value={modalContextValue}>\n {hideOkButton ? (\n <NormalCancelBtn />\n ) : hideCancelButton ? (\n <NormalOkBtn />\n ) : (\n <>\n <NormalCancelBtn />\n <NormalOkBtn />\n </>\n )}\n </ModalContextProvider>\n ),\n [modalContextValue, hideOkButton, hideCancelButton],\n );\n\n const renderTitle = () => {\n return (\n <>\n <Stack align=\"center\" gap={8} className={cls(\"modal-title-wrapper\")}>\n <Stack.Child grow>\n {typeof title === \"string\" ? <Truncate>{title}</Truncate> : title}\n </Stack.Child>\n <Stack.Child stack hug align=\"center\" gap={8}>\n {beforeCloseButton}\n <IconButton\n onClick={(e: React.MouseEvent<HTMLButtonElement>) =>\n handleCancel(e)\n }\n >\n {defaultCloseIcon}\n </IconButton>\n {afterCloseButton}\n </Stack.Child>\n {}\n </Stack>\n {afterTitle ? afterTitle : null}\n </>\n );\n };\n return (\n <AntModal\n closeIcon={false}\n open={open}\n width={modalWidth}\n style={modalStyle}\n title={renderTitle()}\n rootClassName={clsx(themeClassName, rootClassName)}\n classNames={{\n ...classNames,\n wrapper: cls(\n \"modal-wrap\",\n size == \"fullscreen\" && \"modal-fullscreen\",\n isContentOverflow && \"modal-content-overflow\",\n bodyScrollable === false && \"modal-no-body-scroll\",\n loading && \"modal-loading\",\n defaultFixedHeaderFooter || isContentOverflow || size == \"fullscreen\"\n ? \"modal-fixed\"\n : \"\",\n ),\n }}\n styles={modalStyles}\n modalRender={(modal) => (\n <div ref={modalInnerRef} className={cls(\"modal-inner\")}>\n {modal}\n </div>\n )}\n okButtonProps={modalOkButtonProps}\n cancelButtonProps={modalCancelButtonProps}\n onOk={(e) => {\n if (uncontrolledOpen) setInternalOpen(false);\n onOk?.(e);\n }}\n onCancel={(e) => {\n if (confirmLoading) return;\n if (uncontrolledOpen) setInternalOpen(false);\n onCancel?.(e);\n }}\n okText={okText}\n cancelText={cancelText}\n okType=\"primary\"\n confirmLoading={confirmLoading}\n footer={\n typeof footer === \"undefined\"\n ? hideOkButton && hideCancelButton\n ? null\n : defaultFooter\n : footer\n }\n centered={centered}\n {...rest}\n >\n {children}\n {loading ? (\n <div className={cls(\"modal-loading-overlay\")}>\n <Spin />\n </div>\n ) : null}\n </AntModal>\n );\n};\n"],"names":["Modal","externalOpen","closeIcon","children","sizeProp","footer","width","style","styles","classNames","okButtonProps","cancelButtonProps","loading","onOk","onCancel","okText","okType","confirmLoading","cancelText","hideOkButton","hideCancelButton","contentPadding","title","afterTitle","beforeCloseButton","afterCloseButton","defaultFixedHeaderFooter","centered","type","defaultOpen","backgroundProp","bodyScrollable","rootClassName","rest","defaultCloseIcon","jsx","XIcon","size","modalWidth","ModalSize","sizeTracking","setSizeTracking","useState","background","modalStyle","useMemo","modalStyles","isContentOverflow","setIsContentOverflow","cls","useCls","themeClassName","useTheme","resizeObserverRef","useRef","modalInnerRef","useCallback","node","modalBody","modalHeader","modalFooter","resizeObserverHandler","hasOverflow","prev","resizeObserver","useEffect","locale","useLocale","getConfirmLocale","okTextLocale","cancelTextLocale","modalOkButtonProps","modalCancelButtonProps","internalOpen","setInternalOpen","uncontrolledOpen","open","handleCancel","useStableCallback","modalContextValue","defaultFooter","ModalContextProvider","NormalCancelBtn","NormalOkBtn","jsxs","Fragment","AntModal","Stack","Truncate","IconButton","clsx","modal","Spin"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer components{.ds-modal-wrap{max-height:100vh}.ds-modal-wrap .ds-modal-close-x{width:100%;display:flex}.ds-modal-wrap .ds-modal{padding-bottom:0;margin-top:0;margin-bottom:0;max-height:100vh;top:0}.ds-modal-wrap .ds-modal .ds-modal-content{display:flex;flex-direction:column;padding:0;box-shadow:var(--ds-box-shadow-secondary);background:var(--ds-modal-bg, var(--ds-modal-content-bg))}.ds-modal-wrap .ds-modal .ds-modal-body{padding:var(--ds-modal-content-padding);flex-grow:1;flex-shrink:1;min-height:0;overflow:auto}.ds-modal-wrap .ds-modal .ds-modal-header{padding:calc(var(--ds-modal-padding) * 2 / 3) var(--ds-modal-padding) 0 var(--ds-modal-padding);margin-bottom:0;background:transparent}.ds-modal-wrap .ds-modal .ds-modal-footer{padding:0 var(--ds-modal-padding) var(--ds-modal-padding) var(--ds-modal-padding);margin-top:0;background:transparent}.ds-modal-wrap .ds-modal .ds-modal-close{top:calc(var(--ds-modal-padding) * 2 / 3 - 4px)}.ds-modal-wrap:not(.ds-modal-centered) .ds-modal-inner{margin-top:4rem}.ds-modal-wrap:not(.ds-modal-fullscreen) .ds-modal-content{max-height:calc(100vh - var(--ds-modal-edge-padding) * 2);margin:var(--ds-modal-edge-padding)}.ds-modal-wrap:not(.ds-modal-fullscreen) .ds-modal>div[tabindex="0"]{max-height:calc(100vh - var(--ds-modal-edge-padding) * 2)}.ds-modal-no-body-scroll .ds-modal{max-height:100%}.ds-modal-no-body-scroll .ds-modal .ds-modal-body{overflow:hidden;display:grid}.ds-modal-no-body-scroll .ds-modal .ds-modal-body>*{min-height:0}.ds-modal-fullscreen .ds-modal>div[tabindex="0"]{height:100%}.ds-modal-fullscreen .ds-modal .ds-modal-inner{height:100%}.ds-modal-fullscreen .ds-modal .ds-modal-content{border-radius:0;height:100%;width:100%}.ds-modal-fixed .ds-modal .ds-modal-footer{border-top:1px solid var(--ds-color-split);margin-top:0;padding:calc(var(--ds-modal-padding) / 2) var(--ds-modal-padding)}.ds-modal-fixed .ds-modal .ds-modal-header{border-bottom:1px solid var(--ds-color-split);margin-bottom:0;padding:calc(var(--ds-modal-padding) / 2) var(--ds-modal-padding)}.ds-modal-fixed .ds-modal .ds-modal-close{top:8px}.ds-modal-content-overflow .ds-modal .ds-modal-inner{margin-top:0}}
|
|
1
|
+
@layer components{.ds-modal-wrap{max-height:100vh}.ds-modal-wrap .ds-modal-close-x{width:100%;display:flex}.ds-modal-wrap .ds-modal{padding-bottom:0;margin-top:0;margin-bottom:0;max-height:100vh;top:0}.ds-modal-wrap .ds-modal .ds-modal-content{display:flex;flex-direction:column;padding:0;box-shadow:var(--ds-box-shadow-secondary);background:var(--ds-modal-bg, var(--ds-modal-content-bg));position:relative}.ds-modal-wrap .ds-modal .ds-modal-body{padding:var(--ds-modal-content-padding);flex-grow:1;flex-shrink:1;min-height:0;overflow:auto}.ds-modal-wrap .ds-modal .ds-modal-header{padding:calc(var(--ds-modal-padding) * 2 / 3) var(--ds-modal-padding) 0 var(--ds-modal-padding);margin-bottom:0;background:transparent}.ds-modal-wrap .ds-modal .ds-modal-footer{padding:0 var(--ds-modal-padding) var(--ds-modal-padding) var(--ds-modal-padding);margin-top:0;background:transparent}.ds-modal-wrap .ds-modal .ds-modal-close{top:calc(var(--ds-modal-padding) * 2 / 3 - 4px)}.ds-modal-wrap:not(.ds-modal-centered) .ds-modal-inner{margin-top:4rem}.ds-modal-wrap:not(.ds-modal-fullscreen) .ds-modal-content{max-height:calc(100vh - var(--ds-modal-edge-padding) * 2);margin:var(--ds-modal-edge-padding)}.ds-modal-wrap:not(.ds-modal-fullscreen) .ds-modal>div[tabindex="0"]{max-height:calc(100vh - var(--ds-modal-edge-padding) * 2)}.ds-modal-no-body-scroll .ds-modal{max-height:100%}.ds-modal-no-body-scroll .ds-modal .ds-modal-body{overflow:hidden;display:grid}.ds-modal-no-body-scroll .ds-modal .ds-modal-body>*{min-height:0}.ds-modal-fullscreen .ds-modal>div[tabindex="0"]{height:100%}.ds-modal-fullscreen .ds-modal .ds-modal-inner{height:100%}.ds-modal-fullscreen .ds-modal .ds-modal-content{border-radius:0;height:100%;width:100%}.ds-modal-fixed .ds-modal .ds-modal-footer{border-top:1px solid var(--ds-color-split);margin-top:0;padding:calc(var(--ds-modal-padding) / 2) var(--ds-modal-padding)}.ds-modal-fixed .ds-modal .ds-modal-header{border-bottom:1px solid var(--ds-color-split);margin-bottom:0;padding:calc(var(--ds-modal-padding) / 2) var(--ds-modal-padding)}.ds-modal-fixed .ds-modal .ds-modal-close{top:8px}.ds-modal-content-overflow .ds-modal .ds-modal-inner{margin-top:0}.ds-modal-loading-overlay{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;background-color:color-mix(in oklab,var(--ds-modal-bg) 60%,transparent);margin-top:calc(var(--ds-modal-header-height, 0));margin-bottom:calc(var(--ds-modal-footer-height, 0))}}
|