@lobehub/ui 5.36.2 → 5.36.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.
- package/es/base-ui/Input/style.d.mts +1 -1
- package/es/base-ui/Modal/Modal.mjs +1 -1
- package/es/base-ui/Modal/Modal.mjs.map +1 -1
- package/es/base-ui/Modal/imperative.mjs +3 -1
- package/es/base-ui/Modal/imperative.mjs.map +1 -1
- package/es/base-ui/Modal/style.mjs +8 -6
- package/es/base-ui/Modal/style.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -24,7 +24,7 @@ declare const styles: {
|
|
|
24
24
|
declare const rootVariants: (props?: ({
|
|
25
25
|
shadow?: boolean | null | undefined;
|
|
26
26
|
size?: "small" | "middle" | "large" | null | undefined;
|
|
27
|
-
variant?: "filled" | "
|
|
27
|
+
variant?: "filled" | "outlined" | "borderless" | null | undefined;
|
|
28
28
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
29
29
|
//#endregion
|
|
30
30
|
export { rootVariants, styles };
|
|
@@ -193,7 +193,7 @@ const Modal = memo(({ open, title, children, onOk, onCancel, okText = "OK", canc
|
|
|
193
193
|
})]
|
|
194
194
|
}),
|
|
195
195
|
/* @__PURE__ */ jsx(ModalContent, {
|
|
196
|
-
className: classNames?.body,
|
|
196
|
+
className: cx(!showHeader && styles.contentNoHeader, classNames?.body),
|
|
197
197
|
style: {
|
|
198
198
|
...hasHeight || isFullscreen ? { flex: 1 } : {},
|
|
199
199
|
...semanticStyles?.body
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.mjs","names":[],"sources":["../../../src/base-ui/Modal/Modal.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { Maximize2, Minimize2, X } from 'lucide-react';\nimport { useDragControls } from 'motion/react';\nimport type { MouseEvent, PointerEvent } from 'react';\nimport type React from 'react';\nimport { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { stopPropagation } from '@/utils/dom';\n\nimport { Button } from '../Button';\nimport {\n ModalBackdrop,\n ModalContent,\n ModalFooter,\n ModalHeader,\n ModalPopup,\n ModalPortal,\n ModalRoot,\n ModalTitle,\n} from './atoms';\nimport { styles } from './style';\nimport type { ModalComponentProps } from './type';\n\ninterface OkBtnProps {\n confirmLoading?: boolean;\n okButtonProps?: ModalComponentProps['okButtonProps'];\n okText?: React.ReactNode;\n onOk: (e: MouseEvent<HTMLButtonElement>) => void;\n}\n\nconst OkBtn: React.FC<OkBtnProps> = ({ confirmLoading, okButtonProps, okText, onOk }) => {\n const { onClick: userOnClick, ...restOk } = okButtonProps ?? {};\n return (\n <Button\n loading={confirmLoading}\n type=\"primary\"\n {...restOk}\n onClick={(e) => {\n onOk(e as MouseEvent<HTMLButtonElement>);\n userOnClick?.(e as never);\n }}\n >\n {okText}\n </Button>\n );\n};\ninterface CancelBtnProps {\n cancelButtonProps?: ModalComponentProps['cancelButtonProps'];\n cancelText?: React.ReactNode;\n onCancel: (e: MouseEvent<HTMLButtonElement>) => void;\n}\n\nconst CancelBtn: React.FC<CancelBtnProps> = ({ cancelButtonProps, cancelText, onCancel }) => {\n const { onClick: userOnClick, ...restCancel } = cancelButtonProps ?? {};\n return (\n <Button\n {...restCancel}\n onClick={(e) => {\n onCancel(e as MouseEvent<HTMLButtonElement>);\n userOnClick?.(e as never);\n }}\n >\n {cancelText}\n </Button>\n );\n};\n\nconst Modal = memo<ModalComponentProps>(\n ({\n open,\n title,\n children,\n onOk,\n onCancel,\n okText = 'OK',\n cancelText = 'Cancel',\n okButtonProps,\n cancelButtonProps,\n confirmLoading,\n footer,\n width,\n height,\n maskClosable = true,\n closable = true,\n closeIcon,\n className,\n style,\n classNames,\n styles: semanticStyles,\n zIndex,\n afterClose,\n afterOpenChange,\n loading,\n getContainer,\n mask = true,\n keyboard,\n draggable = true,\n allowFullscreen = false,\n }) => {\n const dragControls = useDragControls();\n const constraintsRef = useRef<HTMLDivElement>(null);\n const [isFullscreen, setIsFullscreen] = useState(false);\n const [isDragging, setIsDragging] = useState(false);\n const [isDenying, setIsDenying] = useState(false);\n const denyTimerRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n\n useEffect(() => () => clearTimeout(denyTimerRef.current), []);\n\n const triggerDeny = useCallback(() => {\n clearTimeout(denyTimerRef.current);\n setIsDenying(true);\n denyTimerRef.current = setTimeout(() => setIsDenying(false), 300);\n }, []);\n\n const handleOpenChange = useCallback(\n (nextOpen: boolean, eventDetails: { reason: string }) => {\n if (!open) return;\n if (!nextOpen && keyboard === false && eventDetails.reason === 'escape-key') return;\n if (!nextOpen && !maskClosable && eventDetails.reason === 'outside-press') {\n triggerDeny();\n return;\n }\n if (!nextOpen) {\n onCancel?.(new MouseEvent('click') as unknown as MouseEvent<HTMLButtonElement>);\n }\n },\n [onCancel, keyboard, maskClosable, open, triggerDeny],\n );\n\n const handleExitComplete = useCallback(() => {\n setIsFullscreen(false);\n afterClose?.();\n afterOpenChange?.(false);\n }, [afterClose, afterOpenChange]);\n\n const handleAnimationComplete = useCallback(() => {\n if (open) afterOpenChange?.(true);\n }, [open, afterOpenChange]);\n\n const handleDragStart = useCallback(\n (e: PointerEvent) => {\n if (draggable && !isFullscreen) {\n dragControls.start(e);\n setIsDragging(true);\n }\n },\n [draggable, dragControls, isFullscreen],\n );\n\n const handleDragEnd = useCallback(() => {\n setIsDragging(false);\n }, []);\n\n const handleOk = useCallback(\n (e: MouseEvent<HTMLButtonElement>) => {\n onOk?.(e);\n },\n [onOk],\n );\n\n const handleCancel = useCallback(\n (e: MouseEvent<HTMLButtonElement>) => {\n onCancel?.(e);\n },\n [onCancel],\n );\n\n const footerNode = useMemo(() => {\n if (footer === false || footer === null) return null;\n const cancelBtnNode = (\n <CancelBtn\n cancelButtonProps={cancelButtonProps}\n cancelText={cancelText}\n onCancel={handleCancel}\n />\n );\n const okBtnNode = (\n <OkBtn\n confirmLoading={confirmLoading}\n okButtonProps={okButtonProps}\n okText={okText}\n onOk={handleOk}\n />\n );\n const defaultFooter = (\n <>\n {cancelBtnNode}\n {okBtnNode}\n </>\n );\n\n if (typeof footer === 'function') {\n const BoundCancelBtn: React.FC = () => cancelBtnNode;\n const BoundOkBtn: React.FC = () => okBtnNode;\n return footer(defaultFooter, { CancelBtn: BoundCancelBtn, OkBtn: BoundOkBtn });\n }\n\n return footer ?? defaultFooter;\n }, [\n footer,\n cancelButtonProps,\n cancelText,\n handleCancel,\n confirmLoading,\n okButtonProps,\n okText,\n handleOk,\n ]);\n\n const container = getContainer === false ? undefined : (getContainer ?? undefined);\n\n const shouldDrag = draggable && !isFullscreen;\n const dragProps = shouldDrag\n ? {\n drag: true as const,\n dragConstraints: constraintsRef,\n dragControls,\n dragElastic: 0,\n dragListener: false,\n dragMomentum: false,\n whileDrag: { cursor: 'grabbing' as const },\n }\n : {};\n\n const showTitle = title !== undefined && title !== false && title !== null;\n const showHeader = showTitle || closable || allowFullscreen;\n\n const hasHeight = height !== undefined;\n const panelStyle: React.CSSProperties = {\n ...(hasHeight && !isFullscreen ? { height } : {}),\n ...style,\n };\n\n return (\n <ModalRoot\n open={open ?? false}\n zIndex={zIndex}\n onExitComplete={handleExitComplete}\n onOpenChange={handleOpenChange}\n >\n <ModalPortal container={container}>\n {mask && <ModalBackdrop className={classNames?.mask} style={semanticStyles?.mask} />}\n <ModalPopup\n className={classNames?.wrapper}\n popupStyle={semanticStyles?.wrapper}\n ref={constraintsRef}\n style={panelStyle}\n width={isFullscreen ? undefined : width}\n motionProps={{\n ...dragProps,\n onAnimationComplete: handleAnimationComplete,\n }}\n panelClassName={cx(\n className,\n isFullscreen && styles.fullscreenPopupInner,\n isDenying && styles.denyAnimation,\n )}\n >\n {showHeader && (\n <ModalHeader\n className={cx(classNames?.header, shouldDrag && styles.headerDraggable)}\n style={{\n ...(isDragging ? { cursor: 'grabbing' } : {}),\n ...semanticStyles?.header,\n }}\n onPointerCancel={handleDragEnd}\n onPointerDown={handleDragStart}\n onPointerUp={handleDragEnd}\n >\n {showTitle ? (\n <ModalTitle className={classNames?.title} style={semanticStyles?.title}>\n {title}\n </ModalTitle>\n ) : (\n <span />\n )}\n <div className={styles.headerActions} onPointerDown={stopPropagation}>\n {allowFullscreen && (\n <button\n aria-label={isFullscreen ? 'Exit fullscreen' : 'Fullscreen'}\n className={styles.fullscreenToggle}\n type=\"button\"\n onClick={() => setIsFullscreen((prev) => !prev)}\n >\n {isFullscreen ? <Minimize2 size={14} /> : <Maximize2 size={14} />}\n </button>\n )}\n {closable && (\n <button\n aria-label=\"Close\"\n className={styles.closeInline}\n type=\"button\"\n onClick={handleCancel}\n >\n {closeIcon ?? <X size={16} />}\n </button>\n )}\n </div>\n </ModalHeader>\n )}\n <ModalContent\n className={classNames?.body}\n style={{\n ...(hasHeight || isFullscreen ? { flex: 1 } : {}),\n ...semanticStyles?.body,\n }}\n >\n {loading ? (\n <div\n style={{\n display: 'flex',\n justifyContent: 'center',\n padding: '32px 0',\n }}\n >\n <span className={styles.loadingSpinner} style={{ height: 24, width: 24 }} />\n </div>\n ) : (\n children\n )}\n </ModalContent>\n {footerNode !== null && (\n <ModalFooter className={classNames?.footer} style={semanticStyles?.footer}>\n {footerNode}\n </ModalFooter>\n )}\n </ModalPopup>\n </ModalPortal>\n </ModalRoot>\n );\n },\n);\n\nModal.displayName = 'Modal';\n\nexport default Modal;\n"],"mappings":";;;;;;;;;;;AAgCA,MAAM,SAA+B,EAAE,gBAAgB,eAAe,QAAQ,WAAW;CACvF,MAAM,EAAE,SAAS,aAAa,GAAG,WAAW,iBAAiB,CAAC;CAC9D,OACE,oBAAC,QAAD;EACE,SAAS;EACT,MAAK;EACL,GAAI;EACJ,UAAU,MAAM;GACd,KAAK,CAAkC;GACvC,cAAc,CAAU;EAC1B;EAEC,UAAA;CACK,CAAA;AAEZ;AAOA,MAAM,aAAuC,EAAE,mBAAmB,YAAY,eAAe;CAC3F,MAAM,EAAE,SAAS,aAAa,GAAG,eAAe,qBAAqB,CAAC;CACtE,OACE,oBAAC,QAAD;EACE,GAAI;EACJ,UAAU,MAAM;GACd,SAAS,CAAkC;GAC3C,cAAc,CAAU;EAC1B;EAEC,UAAA;CACK,CAAA;AAEZ;AAEA,MAAM,QAAQ,MACX,EACC,MACA,OACA,UACA,MACA,UACA,SAAS,MACT,aAAa,UACb,eACA,mBACA,gBACA,QACA,OACA,QACA,eAAe,MACf,WAAW,MACX,WACA,WACA,OACA,YACA,QAAQ,gBACR,QACA,YACA,iBACA,SACA,cACA,OAAO,MACP,UACA,YAAY,MACZ,kBAAkB,YACd;CACJ,MAAM,eAAe,gBAAgB;CACrC,MAAM,iBAAiB,OAAuB,IAAI;CAClD,MAAM,CAAC,cAAc,mBAAmB,SAAS,KAAK;CACtD,MAAM,CAAC,YAAY,iBAAiB,SAAS,KAAK;CAClD,MAAM,CAAC,WAAW,gBAAgB,SAAS,KAAK;CAChD,MAAM,eAAe,OAAkD,KAAA,CAAS;CAEhF,sBAAsB,aAAa,aAAa,OAAO,GAAG,CAAC,CAAC;CAE5D,MAAM,cAAc,kBAAkB;EACpC,aAAa,aAAa,OAAO;EACjC,aAAa,IAAI;EACjB,aAAa,UAAU,iBAAiB,aAAa,KAAK,GAAG,GAAG;CAClE,GAAG,CAAC,CAAC;CAEL,MAAM,mBAAmB,aACtB,UAAmB,iBAAqC;EACvD,IAAI,CAAC,MAAM;EACX,IAAI,CAAC,YAAY,aAAa,SAAS,aAAa,WAAW,cAAc;EAC7E,IAAI,CAAC,YAAY,CAAC,gBAAgB,aAAa,WAAW,iBAAiB;GACzE,YAAY;GACZ;EACF;EACA,IAAI,CAAC,UACH,WAAW,IAAI,WAAW,OAAO,CAA6C;CAElF,GACA;EAAC;EAAU;EAAU;EAAc;EAAM;CAAW,CACtD;CAEA,MAAM,qBAAqB,kBAAkB;EAC3C,gBAAgB,KAAK;EACrB,aAAa;EACb,kBAAkB,KAAK;CACzB,GAAG,CAAC,YAAY,eAAe,CAAC;CAEhC,MAAM,0BAA0B,kBAAkB;EAChD,IAAI,MAAM,kBAAkB,IAAI;CAClC,GAAG,CAAC,MAAM,eAAe,CAAC;CAE1B,MAAM,kBAAkB,aACrB,MAAoB;EACnB,IAAI,aAAa,CAAC,cAAc;GAC9B,aAAa,MAAM,CAAC;GACpB,cAAc,IAAI;EACpB;CACF,GACA;EAAC;EAAW;EAAc;CAAY,CACxC;CAEA,MAAM,gBAAgB,kBAAkB;EACtC,cAAc,KAAK;CACrB,GAAG,CAAC,CAAC;CAEL,MAAM,WAAW,aACd,MAAqC;EACpC,OAAO,CAAC;CACV,GACA,CAAC,IAAI,CACP;CAEA,MAAM,eAAe,aAClB,MAAqC;EACpC,WAAW,CAAC;CACd,GACA,CAAC,QAAQ,CACX;CAEA,MAAM,aAAa,cAAc;EAC/B,IAAI,WAAW,SAAS,WAAW,MAAM,OAAO;EAChD,MAAM,gBACJ,oBAAC,WAAD;GACqB;GACP;GACZ,UAAU;EACX,CAAA;EAEH,MAAM,YACJ,oBAAC,OAAD;GACkB;GACD;GACP;GACR,MAAM;EACP,CAAA;EAEH,MAAM,gBACJ,qBAAA,YAAA,EAAA,UAAA,CACG,eACA,SACD,EAAA,CAAA;EAGJ,IAAI,OAAO,WAAW,YAAY;GAChC,MAAM,uBAAiC;GACvC,MAAM,mBAA6B;GACnC,OAAO,OAAO,eAAe;IAAE,WAAW;IAAgB,OAAO;GAAW,CAAC;EAC/E;EAEA,OAAO,UAAU;CACnB,GAAG;EACD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,YAAY,iBAAiB,QAAQ,KAAA,IAAa,gBAAgB,KAAA;CAExE,MAAM,aAAa,aAAa,CAAC;CACjC,MAAM,YAAY,aACd;EACE,MAAM;EACN,iBAAiB;EACjB;EACA,aAAa;EACb,cAAc;EACd,cAAc;EACd,WAAW,EAAE,QAAQ,WAAoB;CAC3C,IACA,CAAC;CAEL,MAAM,YAAY,UAAU,KAAA,KAAa,UAAU,SAAS,UAAU;CACtE,MAAM,aAAa,aAAa,YAAY;CAE5C,MAAM,YAAY,WAAW,KAAA;CAC7B,MAAM,aAAkC;EACtC,GAAI,aAAa,CAAC,eAAe,EAAE,OAAO,IAAI,CAAC;EAC/C,GAAG;CACL;CAEA,OACE,oBAAC,WAAD;EACE,MAAM,QAAQ;EACN;EACR,gBAAgB;EAChB,cAAc;EAEd,UAAA,qBAAC,aAAD;GAAwB;GAAxB,UAAA,CACG,QAAQ,oBAAC,eAAD;IAAe,WAAW,YAAY;IAAM,OAAO,gBAAgB;GAAO,CAAA,GACnF,qBAAC,YAAD;IACE,WAAW,YAAY;IACvB,YAAY,gBAAgB;IAC5B,KAAK;IACL,OAAO;IACP,OAAO,eAAe,KAAA,IAAY;IAClC,aAAa;KACX,GAAG;KACH,qBAAqB;IACvB;IACA,gBAAgB,GACd,WACA,gBAAgB,OAAO,sBACvB,aAAa,OAAO,aACtB;IAdF,UAAA;KAgBG,cACC,qBAAC,aAAD;MACE,WAAW,GAAG,YAAY,QAAQ,cAAc,OAAO,eAAe;MACtE,OAAO;OACL,GAAI,aAAa,EAAE,QAAQ,WAAW,IAAI,CAAC;OAC3C,GAAG,gBAAgB;MACrB;MACA,iBAAiB;MACjB,eAAe;MACf,aAAa;MARf,UAAA,CAUG,YACC,oBAAC,YAAD;OAAY,WAAW,YAAY;OAAO,OAAO,gBAAgB;OAC9D,UAAA;MACS,CAAA,IAEZ,oBAAC,QAAD,CAAO,CAAA,GAET,qBAAC,OAAD;OAAK,WAAW,OAAO;OAAe,eAAe;OAArD,UAAA,CACG,mBACC,oBAAC,UAAD;QACE,cAAY,eAAe,oBAAoB;QAC/C,WAAW,OAAO;QAClB,MAAK;QACL,eAAe,iBAAiB,SAAS,CAAC,IAAI;QAE7C,UAAA,eAAe,oBAAC,WAAD,EAAW,MAAM,GAAK,CAAA,IAAI,oBAAC,WAAD,EAAW,MAAM,GAAK,CAAA;OAC1D,CAAA,GAET,YACC,oBAAC,UAAD;QACE,cAAW;QACX,WAAW,OAAO;QAClB,MAAK;QACL,SAAS;QAER,UAAA,aAAa,oBAAC,GAAD,EAAG,MAAM,GAAK,CAAA;OACtB,CAAA,CAEP;MACM,CAAA,CAAA;;KAEf,oBAAC,cAAD;MACE,WAAW,YAAY;MACvB,OAAO;OACL,GAAI,aAAa,eAAe,EAAE,MAAM,EAAE,IAAI,CAAC;OAC/C,GAAG,gBAAgB;MACrB;MAEC,UAAA,UACC,oBAAC,OAAD;OACE,OAAO;QACL,SAAS;QACT,gBAAgB;QAChB,SAAS;OACX;OAEA,UAAA,oBAAC,QAAD;QAAM,WAAW,OAAO;QAAgB,OAAO;SAAE,QAAQ;SAAI,OAAO;QAAG;OAAI,CAAA;MACxE,CAAA,IAEL;KAEU,CAAA;KACb,eAAe,QACd,oBAAC,aAAD;MAAa,WAAW,YAAY;MAAQ,OAAO,gBAAgB;MAChE,UAAA;KACU,CAAA;IAEL;GACD,CAAA,CAAA;;CACJ,CAAA;AAEf,CACF;AAEA,MAAM,cAAc"}
|
|
1
|
+
{"version":3,"file":"Modal.mjs","names":[],"sources":["../../../src/base-ui/Modal/Modal.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { Maximize2, Minimize2, X } from 'lucide-react';\nimport { useDragControls } from 'motion/react';\nimport type { MouseEvent, PointerEvent } from 'react';\nimport type React from 'react';\nimport { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { stopPropagation } from '@/utils/dom';\n\nimport { Button } from '../Button';\nimport {\n ModalBackdrop,\n ModalContent,\n ModalFooter,\n ModalHeader,\n ModalPopup,\n ModalPortal,\n ModalRoot,\n ModalTitle,\n} from './atoms';\nimport { styles } from './style';\nimport type { ModalComponentProps } from './type';\n\ninterface OkBtnProps {\n confirmLoading?: boolean;\n okButtonProps?: ModalComponentProps['okButtonProps'];\n okText?: React.ReactNode;\n onOk: (e: MouseEvent<HTMLButtonElement>) => void;\n}\n\nconst OkBtn: React.FC<OkBtnProps> = ({ confirmLoading, okButtonProps, okText, onOk }) => {\n const { onClick: userOnClick, ...restOk } = okButtonProps ?? {};\n return (\n <Button\n loading={confirmLoading}\n type=\"primary\"\n {...restOk}\n onClick={(e) => {\n onOk(e as MouseEvent<HTMLButtonElement>);\n userOnClick?.(e as never);\n }}\n >\n {okText}\n </Button>\n );\n};\ninterface CancelBtnProps {\n cancelButtonProps?: ModalComponentProps['cancelButtonProps'];\n cancelText?: React.ReactNode;\n onCancel: (e: MouseEvent<HTMLButtonElement>) => void;\n}\n\nconst CancelBtn: React.FC<CancelBtnProps> = ({ cancelButtonProps, cancelText, onCancel }) => {\n const { onClick: userOnClick, ...restCancel } = cancelButtonProps ?? {};\n return (\n <Button\n {...restCancel}\n onClick={(e) => {\n onCancel(e as MouseEvent<HTMLButtonElement>);\n userOnClick?.(e as never);\n }}\n >\n {cancelText}\n </Button>\n );\n};\n\nconst Modal = memo<ModalComponentProps>(\n ({\n open,\n title,\n children,\n onOk,\n onCancel,\n okText = 'OK',\n cancelText = 'Cancel',\n okButtonProps,\n cancelButtonProps,\n confirmLoading,\n footer,\n width,\n height,\n maskClosable = true,\n closable = true,\n closeIcon,\n className,\n style,\n classNames,\n styles: semanticStyles,\n zIndex,\n afterClose,\n afterOpenChange,\n loading,\n getContainer,\n mask = true,\n keyboard,\n draggable = true,\n allowFullscreen = false,\n }) => {\n const dragControls = useDragControls();\n const constraintsRef = useRef<HTMLDivElement>(null);\n const [isFullscreen, setIsFullscreen] = useState(false);\n const [isDragging, setIsDragging] = useState(false);\n const [isDenying, setIsDenying] = useState(false);\n const denyTimerRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n\n useEffect(() => () => clearTimeout(denyTimerRef.current), []);\n\n const triggerDeny = useCallback(() => {\n clearTimeout(denyTimerRef.current);\n setIsDenying(true);\n denyTimerRef.current = setTimeout(() => setIsDenying(false), 300);\n }, []);\n\n const handleOpenChange = useCallback(\n (nextOpen: boolean, eventDetails: { reason: string }) => {\n if (!open) return;\n if (!nextOpen && keyboard === false && eventDetails.reason === 'escape-key') return;\n if (!nextOpen && !maskClosable && eventDetails.reason === 'outside-press') {\n triggerDeny();\n return;\n }\n if (!nextOpen) {\n onCancel?.(new MouseEvent('click') as unknown as MouseEvent<HTMLButtonElement>);\n }\n },\n [onCancel, keyboard, maskClosable, open, triggerDeny],\n );\n\n const handleExitComplete = useCallback(() => {\n setIsFullscreen(false);\n afterClose?.();\n afterOpenChange?.(false);\n }, [afterClose, afterOpenChange]);\n\n const handleAnimationComplete = useCallback(() => {\n if (open) afterOpenChange?.(true);\n }, [open, afterOpenChange]);\n\n const handleDragStart = useCallback(\n (e: PointerEvent) => {\n if (draggable && !isFullscreen) {\n dragControls.start(e);\n setIsDragging(true);\n }\n },\n [draggable, dragControls, isFullscreen],\n );\n\n const handleDragEnd = useCallback(() => {\n setIsDragging(false);\n }, []);\n\n const handleOk = useCallback(\n (e: MouseEvent<HTMLButtonElement>) => {\n onOk?.(e);\n },\n [onOk],\n );\n\n const handleCancel = useCallback(\n (e: MouseEvent<HTMLButtonElement>) => {\n onCancel?.(e);\n },\n [onCancel],\n );\n\n const footerNode = useMemo(() => {\n if (footer === false || footer === null) return null;\n const cancelBtnNode = (\n <CancelBtn\n cancelButtonProps={cancelButtonProps}\n cancelText={cancelText}\n onCancel={handleCancel}\n />\n );\n const okBtnNode = (\n <OkBtn\n confirmLoading={confirmLoading}\n okButtonProps={okButtonProps}\n okText={okText}\n onOk={handleOk}\n />\n );\n const defaultFooter = (\n <>\n {cancelBtnNode}\n {okBtnNode}\n </>\n );\n\n if (typeof footer === 'function') {\n const BoundCancelBtn: React.FC = () => cancelBtnNode;\n const BoundOkBtn: React.FC = () => okBtnNode;\n return footer(defaultFooter, { CancelBtn: BoundCancelBtn, OkBtn: BoundOkBtn });\n }\n\n return footer ?? defaultFooter;\n }, [\n footer,\n cancelButtonProps,\n cancelText,\n handleCancel,\n confirmLoading,\n okButtonProps,\n okText,\n handleOk,\n ]);\n\n const container = getContainer === false ? undefined : (getContainer ?? undefined);\n\n const shouldDrag = draggable && !isFullscreen;\n const dragProps = shouldDrag\n ? {\n drag: true as const,\n dragConstraints: constraintsRef,\n dragControls,\n dragElastic: 0,\n dragListener: false,\n dragMomentum: false,\n whileDrag: { cursor: 'grabbing' as const },\n }\n : {};\n\n const showTitle = title !== undefined && title !== false && title !== null;\n const showHeader = showTitle || closable || allowFullscreen;\n\n const hasHeight = height !== undefined;\n const panelStyle: React.CSSProperties = {\n ...(hasHeight && !isFullscreen ? { height } : {}),\n ...style,\n };\n\n return (\n <ModalRoot\n open={open ?? false}\n zIndex={zIndex}\n onExitComplete={handleExitComplete}\n onOpenChange={handleOpenChange}\n >\n <ModalPortal container={container}>\n {mask && <ModalBackdrop className={classNames?.mask} style={semanticStyles?.mask} />}\n <ModalPopup\n className={classNames?.wrapper}\n popupStyle={semanticStyles?.wrapper}\n ref={constraintsRef}\n style={panelStyle}\n width={isFullscreen ? undefined : width}\n motionProps={{\n ...dragProps,\n onAnimationComplete: handleAnimationComplete,\n }}\n panelClassName={cx(\n className,\n isFullscreen && styles.fullscreenPopupInner,\n isDenying && styles.denyAnimation,\n )}\n >\n {showHeader && (\n <ModalHeader\n className={cx(classNames?.header, shouldDrag && styles.headerDraggable)}\n style={{\n ...(isDragging ? { cursor: 'grabbing' } : {}),\n ...semanticStyles?.header,\n }}\n onPointerCancel={handleDragEnd}\n onPointerDown={handleDragStart}\n onPointerUp={handleDragEnd}\n >\n {showTitle ? (\n <ModalTitle className={classNames?.title} style={semanticStyles?.title}>\n {title}\n </ModalTitle>\n ) : (\n <span />\n )}\n <div className={styles.headerActions} onPointerDown={stopPropagation}>\n {allowFullscreen && (\n <button\n aria-label={isFullscreen ? 'Exit fullscreen' : 'Fullscreen'}\n className={styles.fullscreenToggle}\n type=\"button\"\n onClick={() => setIsFullscreen((prev) => !prev)}\n >\n {isFullscreen ? <Minimize2 size={14} /> : <Maximize2 size={14} />}\n </button>\n )}\n {closable && (\n <button\n aria-label=\"Close\"\n className={styles.closeInline}\n type=\"button\"\n onClick={handleCancel}\n >\n {closeIcon ?? <X size={16} />}\n </button>\n )}\n </div>\n </ModalHeader>\n )}\n <ModalContent\n className={cx(!showHeader && styles.contentNoHeader, classNames?.body)}\n style={{\n ...(hasHeight || isFullscreen ? { flex: 1 } : {}),\n ...semanticStyles?.body,\n }}\n >\n {loading ? (\n <div\n style={{\n display: 'flex',\n justifyContent: 'center',\n padding: '32px 0',\n }}\n >\n <span className={styles.loadingSpinner} style={{ height: 24, width: 24 }} />\n </div>\n ) : (\n children\n )}\n </ModalContent>\n {footerNode !== null && (\n <ModalFooter className={classNames?.footer} style={semanticStyles?.footer}>\n {footerNode}\n </ModalFooter>\n )}\n </ModalPopup>\n </ModalPortal>\n </ModalRoot>\n );\n },\n);\n\nModal.displayName = 'Modal';\n\nexport default Modal;\n"],"mappings":"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"}
|
|
@@ -3,10 +3,12 @@ import { useIsClient } from "../../hooks/useIsClient.mjs";
|
|
|
3
3
|
import { useAppElement } from "../../ThemeProvider/AppElementContext.mjs";
|
|
4
4
|
import Button from "../Button/Button.mjs";
|
|
5
5
|
import { registerDevSingleton } from "../../utils/devSingleton.mjs";
|
|
6
|
+
import { styles } from "./style.mjs";
|
|
6
7
|
import { ModalBackdrop, ModalClose, ModalContent, ModalFooter, ModalHeader, ModalPopup, ModalPortal, ModalRoot, ModalTitle } from "./atoms.mjs";
|
|
7
8
|
import { ModalContext, useModalContext } from "./context.mjs";
|
|
8
9
|
import { memo, useCallback, useEffect, useState, useSyncExternalStore } from "react";
|
|
9
10
|
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
|
|
11
|
+
import { cx } from "antd-style";
|
|
10
12
|
import { createPortal } from "react-dom";
|
|
11
13
|
//#region src/base-ui/Modal/imperative.tsx
|
|
12
14
|
const ModalPortalWrapper = ({ children, root }) => {
|
|
@@ -140,7 +142,7 @@ function createModalSystem() {
|
|
|
140
142
|
})]
|
|
141
143
|
}),
|
|
142
144
|
/* @__PURE__ */ jsx(ModalContent, {
|
|
143
|
-
className: classNames?.content,
|
|
145
|
+
className: cx(!showTitle && styles.contentNoHeader, classNames?.content),
|
|
144
146
|
style: semanticStyles?.content,
|
|
145
147
|
children: content ?? children
|
|
146
148
|
}),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"imperative.mjs","names":[],"sources":["../../../src/base-ui/Modal/imperative.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode } from 'react';\nimport { memo, useCallback, useEffect, useState, useSyncExternalStore } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { useIsClient } from '@/hooks/useIsClient';\nimport { useAppElement } from '@/ThemeProvider';\nimport { registerDevSingleton } from '@/utils/devSingleton';\n\nimport { Button } from '../Button';\nimport {\n ModalBackdrop,\n ModalClose,\n ModalContent,\n ModalFooter,\n ModalHeader,\n ModalPopup,\n ModalPortal,\n ModalRoot,\n ModalTitle,\n} from './atoms';\nimport { ModalContext, useModalContext } from './context';\nimport type { ImperativeModalProps, ModalConfirmConfig, ModalInstance } from './type';\n\n// --- Shared types ---\n\ntype ModalStackEntry = {\n id: string;\n props: ImperativeModalProps;\n};\n\n// --- Shared components (stack-independent) ---\n\nconst ModalPortalWrapper = ({\n children,\n root,\n}: {\n children: ReactNode;\n root?: HTMLElement | ShadowRoot | null;\n}) => {\n const appElement = useAppElement();\n const container = root ?? appElement ?? document.body;\n return createPortal(children, container);\n};\n\nconst ConfirmBody = ({ config }: { config: ModalConfirmConfig }) => {\n const { close } = useModalContext();\n const [loading, setLoading] = useState(false);\n\n const { cancelText = 'Cancel', content, okButtonProps, okText = 'OK', onCancel, onOk } = config;\n\n const handleCancel = useCallback(() => {\n close();\n onCancel?.();\n }, [close, onCancel]);\n\n const handleOk = useCallback(async () => {\n if (onOk) {\n try {\n const result = onOk();\n if (result && typeof (result as any).then === 'function') {\n setLoading(true);\n await result;\n setLoading(false);\n }\n } catch {\n setLoading(false);\n return;\n }\n }\n close();\n }, [close, onOk]);\n\n return (\n <>\n {content && <div style={{ padding: '12px 16px' }}>{content}</div>}\n <ModalFooter>\n <Button onClick={handleCancel}>{cancelText}</Button>\n <Button loading={loading} type=\"primary\" {...okButtonProps} onClick={handleOk}>\n {okText}\n </Button>\n </ModalFooter>\n </>\n );\n};\nConfirmBody.displayName = 'ConfirmBody';\n\n// --- Factory ---\n\nexport interface ModalHostProps {\n root?: HTMLElement | ShadowRoot | null;\n}\n\nexport interface ModalSystem {\n confirmModal: (config: ModalConfirmConfig) => { close: () => void; destroy: () => void };\n createModal: (props: ImperativeModalProps) => ModalInstance;\n ModalHost: React.FC<ModalHostProps>;\n}\n\nlet systemSeed = 0;\n\nexport function createModalSystem(): ModalSystem {\n const systemId = systemSeed++;\n const singletonName = systemId === 0 ? 'BaseModalHost' : `BaseModalHost-${systemId}`;\n\n // --- Stack state (isolated per system) ---\n let modalStack: ModalStackEntry[] = [];\n let modalSeed = 0;\n const listeners = new Set<() => void>();\n\n const notify = () => listeners.forEach((l) => l());\n const subscribe = (l: () => void) => {\n listeners.add(l);\n return () => listeners.delete(l);\n };\n const EMPTY: ModalStackEntry[] = [];\n const getSnapshot = () => modalStack;\n const getServerSnapshot = () => EMPTY;\n\n // --- Stack operations ---\n\n const updateModal = (id: string, next: Partial<ImperativeModalProps>) => {\n let changed = false;\n modalStack = modalStack.map((item) => {\n if (item.id !== id) return item;\n changed = true;\n return { ...item, props: { ...item.props, ...next } };\n });\n if (changed) notify();\n };\n\n const closeModal = (id: string) => {\n updateModal(id, { open: false });\n };\n\n const destroyModal = (id: string) => {\n const next = modalStack.filter((item) => item.id !== id);\n if (next.length === modalStack.length) return;\n modalStack = next;\n notify();\n };\n\n // --- Stack Item (captures operations via closure) ---\n\n const StackItem = memo(({ entry }: { entry: ModalStackEntry }) => {\n const { id, props } = entry;\n const {\n children,\n classNames,\n content,\n footer,\n maskClosable,\n onOpenChange,\n onOpenChangeComplete,\n open,\n styles: semanticStyles,\n title,\n width,\n } = props;\n\n const isOpen = open ?? true;\n\n const handleOpenChange = useCallback(\n (nextOpen: boolean, eventDetails?: { reason: string }) => {\n if (!nextOpen && maskClosable === false && eventDetails?.reason === 'outside-press') return;\n if (!nextOpen) closeModal(id);\n onOpenChange?.(nextOpen);\n },\n [id, maskClosable, onOpenChange],\n );\n\n const handleExitComplete = useCallback(() => {\n onOpenChangeComplete?.(false);\n destroyModal(id);\n }, [id, onOpenChangeComplete]);\n\n const close = useCallback(() => closeModal(id), [id]);\n const setCanDismissByClickOutside = useCallback(\n (value: boolean) => updateModal(id, { maskClosable: value }),\n [id],\n );\n\n const showTitle = title !== undefined && title !== false && title !== null;\n\n return (\n <ModalContext value={{ close, setCanDismissByClickOutside }}>\n <ModalRoot\n open={isOpen}\n onExitComplete={handleExitComplete}\n onOpenChange={handleOpenChange}\n >\n <ModalPortal>\n <ModalBackdrop className={classNames?.backdrop} style={semanticStyles?.backdrop} />\n <ModalPopup\n className={classNames?.popup}\n popupStyle={semanticStyles?.popup}\n width={width}\n >\n {showTitle && (\n <ModalHeader className={classNames?.header} style={semanticStyles?.header}>\n <ModalTitle className={classNames?.title} style={semanticStyles?.title}>\n {title}\n </ModalTitle>\n <ModalClose className={classNames?.close} style={semanticStyles?.close} />\n </ModalHeader>\n )}\n <ModalContent className={classNames?.content} style={semanticStyles?.content}>\n {content ?? children}\n </ModalContent>\n {footer}\n </ModalPopup>\n </ModalPortal>\n </ModalRoot>\n </ModalContext>\n );\n });\n StackItem.displayName = 'ModalStackItem';\n\n const StackRenderer = memo(({ stack }: { stack: ModalStackEntry[] }) => {\n const isClient = useIsClient();\n if (!isClient) return null;\n return stack.map((entry) => <StackItem entry={entry} key={entry.id} />);\n });\n StackRenderer.displayName = 'ModalStackRenderer';\n\n // --- ModalHost ---\n\n const Host = ({ root }: ModalHostProps) => {\n const stack = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);\n const isClient = useIsClient();\n\n useEffect(() => {\n if (!isClient) return;\n const scope = root ?? document.body;\n return registerDevSingleton(singletonName, scope);\n }, [isClient, root]);\n\n if (!isClient) return null;\n if (stack.length === 0) return null;\n\n return (\n <ModalPortalWrapper root={root}>\n <StackRenderer stack={stack} />\n </ModalPortalWrapper>\n );\n };\n\n // --- createModal ---\n\n const create = (props: ImperativeModalProps): ModalInstance => {\n const id = `base-modal-${Date.now()}-${modalSeed++}`;\n modalStack = [...modalStack, { id, props: { ...props, open: props.open ?? true } }];\n notify();\n\n return {\n close: () => closeModal(id),\n destroy: () => destroyModal(id),\n setCanDismissByClickOutside: (value) => updateModal(id, { maskClosable: value }),\n update: (nextProps) => updateModal(id, nextProps),\n };\n };\n\n // --- confirmModal ---\n\n const confirm = (config: ModalConfirmConfig) => {\n const instance = create({\n content: <ConfirmBody config={config} />,\n styles: { content: { padding: 0 } },\n title: config.title,\n width: 420,\n });\n\n return {\n close: instance.close,\n destroy: instance.destroy,\n };\n };\n\n return { ModalHost: Host, confirmModal: confirm, createModal: create };\n}\n\n// --- Default global instance (backward compatible) ---\n\nconst defaultSystem = createModalSystem();\nexport const ModalHost = defaultSystem.ModalHost;\nexport const createModal = defaultSystem.createModal;\nexport const confirmModal = defaultSystem.confirmModal;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"imperative.mjs","names":[],"sources":["../../../src/base-ui/Modal/imperative.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport type { ReactNode } from 'react';\nimport { memo, useCallback, useEffect, useState, useSyncExternalStore } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { useIsClient } from '@/hooks/useIsClient';\nimport { useAppElement } from '@/ThemeProvider';\nimport { registerDevSingleton } from '@/utils/devSingleton';\n\nimport { Button } from '../Button';\nimport {\n ModalBackdrop,\n ModalClose,\n ModalContent,\n ModalFooter,\n ModalHeader,\n ModalPopup,\n ModalPortal,\n ModalRoot,\n ModalTitle,\n} from './atoms';\nimport { ModalContext, useModalContext } from './context';\nimport { styles } from './style';\nimport type { ImperativeModalProps, ModalConfirmConfig, ModalInstance } from './type';\n\n// --- Shared types ---\n\ntype ModalStackEntry = {\n id: string;\n props: ImperativeModalProps;\n};\n\n// --- Shared components (stack-independent) ---\n\nconst ModalPortalWrapper = ({\n children,\n root,\n}: {\n children: ReactNode;\n root?: HTMLElement | ShadowRoot | null;\n}) => {\n const appElement = useAppElement();\n const container = root ?? appElement ?? document.body;\n return createPortal(children, container);\n};\n\nconst ConfirmBody = ({ config }: { config: ModalConfirmConfig }) => {\n const { close } = useModalContext();\n const [loading, setLoading] = useState(false);\n\n const { cancelText = 'Cancel', content, okButtonProps, okText = 'OK', onCancel, onOk } = config;\n\n const handleCancel = useCallback(() => {\n close();\n onCancel?.();\n }, [close, onCancel]);\n\n const handleOk = useCallback(async () => {\n if (onOk) {\n try {\n const result = onOk();\n if (result && typeof (result as any).then === 'function') {\n setLoading(true);\n await result;\n setLoading(false);\n }\n } catch {\n setLoading(false);\n return;\n }\n }\n close();\n }, [close, onOk]);\n\n return (\n <>\n {content && <div style={{ padding: '12px 16px' }}>{content}</div>}\n <ModalFooter>\n <Button onClick={handleCancel}>{cancelText}</Button>\n <Button loading={loading} type=\"primary\" {...okButtonProps} onClick={handleOk}>\n {okText}\n </Button>\n </ModalFooter>\n </>\n );\n};\nConfirmBody.displayName = 'ConfirmBody';\n\n// --- Factory ---\n\nexport interface ModalHostProps {\n root?: HTMLElement | ShadowRoot | null;\n}\n\nexport interface ModalSystem {\n confirmModal: (config: ModalConfirmConfig) => { close: () => void; destroy: () => void };\n createModal: (props: ImperativeModalProps) => ModalInstance;\n ModalHost: React.FC<ModalHostProps>;\n}\n\nlet systemSeed = 0;\n\nexport function createModalSystem(): ModalSystem {\n const systemId = systemSeed++;\n const singletonName = systemId === 0 ? 'BaseModalHost' : `BaseModalHost-${systemId}`;\n\n // --- Stack state (isolated per system) ---\n let modalStack: ModalStackEntry[] = [];\n let modalSeed = 0;\n const listeners = new Set<() => void>();\n\n const notify = () => listeners.forEach((l) => l());\n const subscribe = (l: () => void) => {\n listeners.add(l);\n return () => listeners.delete(l);\n };\n const EMPTY: ModalStackEntry[] = [];\n const getSnapshot = () => modalStack;\n const getServerSnapshot = () => EMPTY;\n\n // --- Stack operations ---\n\n const updateModal = (id: string, next: Partial<ImperativeModalProps>) => {\n let changed = false;\n modalStack = modalStack.map((item) => {\n if (item.id !== id) return item;\n changed = true;\n return { ...item, props: { ...item.props, ...next } };\n });\n if (changed) notify();\n };\n\n const closeModal = (id: string) => {\n updateModal(id, { open: false });\n };\n\n const destroyModal = (id: string) => {\n const next = modalStack.filter((item) => item.id !== id);\n if (next.length === modalStack.length) return;\n modalStack = next;\n notify();\n };\n\n // --- Stack Item (captures operations via closure) ---\n\n const StackItem = memo(({ entry }: { entry: ModalStackEntry }) => {\n const { id, props } = entry;\n const {\n children,\n classNames,\n content,\n footer,\n maskClosable,\n onOpenChange,\n onOpenChangeComplete,\n open,\n styles: semanticStyles,\n title,\n width,\n } = props;\n\n const isOpen = open ?? true;\n\n const handleOpenChange = useCallback(\n (nextOpen: boolean, eventDetails?: { reason: string }) => {\n if (!nextOpen && maskClosable === false && eventDetails?.reason === 'outside-press') return;\n if (!nextOpen) closeModal(id);\n onOpenChange?.(nextOpen);\n },\n [id, maskClosable, onOpenChange],\n );\n\n const handleExitComplete = useCallback(() => {\n onOpenChangeComplete?.(false);\n destroyModal(id);\n }, [id, onOpenChangeComplete]);\n\n const close = useCallback(() => closeModal(id), [id]);\n const setCanDismissByClickOutside = useCallback(\n (value: boolean) => updateModal(id, { maskClosable: value }),\n [id],\n );\n\n const showTitle = title !== undefined && title !== false && title !== null;\n\n return (\n <ModalContext value={{ close, setCanDismissByClickOutside }}>\n <ModalRoot\n open={isOpen}\n onExitComplete={handleExitComplete}\n onOpenChange={handleOpenChange}\n >\n <ModalPortal>\n <ModalBackdrop className={classNames?.backdrop} style={semanticStyles?.backdrop} />\n <ModalPopup\n className={classNames?.popup}\n popupStyle={semanticStyles?.popup}\n width={width}\n >\n {showTitle && (\n <ModalHeader className={classNames?.header} style={semanticStyles?.header}>\n <ModalTitle className={classNames?.title} style={semanticStyles?.title}>\n {title}\n </ModalTitle>\n <ModalClose className={classNames?.close} style={semanticStyles?.close} />\n </ModalHeader>\n )}\n <ModalContent\n className={cx(!showTitle && styles.contentNoHeader, classNames?.content)}\n style={semanticStyles?.content}\n >\n {content ?? children}\n </ModalContent>\n {footer}\n </ModalPopup>\n </ModalPortal>\n </ModalRoot>\n </ModalContext>\n );\n });\n StackItem.displayName = 'ModalStackItem';\n\n const StackRenderer = memo(({ stack }: { stack: ModalStackEntry[] }) => {\n const isClient = useIsClient();\n if (!isClient) return null;\n return stack.map((entry) => <StackItem entry={entry} key={entry.id} />);\n });\n StackRenderer.displayName = 'ModalStackRenderer';\n\n // --- ModalHost ---\n\n const Host = ({ root }: ModalHostProps) => {\n const stack = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);\n const isClient = useIsClient();\n\n useEffect(() => {\n if (!isClient) return;\n const scope = root ?? document.body;\n return registerDevSingleton(singletonName, scope);\n }, [isClient, root]);\n\n if (!isClient) return null;\n if (stack.length === 0) return null;\n\n return (\n <ModalPortalWrapper root={root}>\n <StackRenderer stack={stack} />\n </ModalPortalWrapper>\n );\n };\n\n // --- createModal ---\n\n const create = (props: ImperativeModalProps): ModalInstance => {\n const id = `base-modal-${Date.now()}-${modalSeed++}`;\n modalStack = [...modalStack, { id, props: { ...props, open: props.open ?? true } }];\n notify();\n\n return {\n close: () => closeModal(id),\n destroy: () => destroyModal(id),\n setCanDismissByClickOutside: (value) => updateModal(id, { maskClosable: value }),\n update: (nextProps) => updateModal(id, nextProps),\n };\n };\n\n // --- confirmModal ---\n\n const confirm = (config: ModalConfirmConfig) => {\n const instance = create({\n content: <ConfirmBody config={config} />,\n styles: { content: { padding: 0 } },\n title: config.title,\n width: 420,\n });\n\n return {\n close: instance.close,\n destroy: instance.destroy,\n };\n };\n\n return { ModalHost: Host, confirmModal: confirm, createModal: create };\n}\n\n// --- Default global instance (backward compatible) ---\n\nconst defaultSystem = createModalSystem();\nexport const ModalHost = defaultSystem.ModalHost;\nexport const createModal = defaultSystem.createModal;\nexport const confirmModal = defaultSystem.confirmModal;\n"],"mappings":";;;;;;;;;;;;;AAoCA,MAAM,sBAAsB,EAC1B,UACA,WAII;CACJ,MAAM,aAAa,cAAc;CACjC,MAAM,YAAY,QAAQ,cAAc,SAAS;CACjD,OAAO,aAAa,UAAU,SAAS;AACzC;AAEA,MAAM,eAAe,EAAE,aAA6C;CAClE,MAAM,EAAE,UAAU,gBAAgB;CAClC,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAE5C,MAAM,EAAE,aAAa,UAAU,SAAS,eAAe,SAAS,MAAM,UAAU,SAAS;CAEzF,MAAM,eAAe,kBAAkB;EACrC,MAAM;EACN,WAAW;CACb,GAAG,CAAC,OAAO,QAAQ,CAAC;CAEpB,MAAM,WAAW,YAAY,YAAY;EACvC,IAAI,MACF,IAAI;GACF,MAAM,SAAS,KAAK;GACpB,IAAI,UAAU,OAAQ,OAAe,SAAS,YAAY;IACxD,WAAW,IAAI;IACf,MAAM;IACN,WAAW,KAAK;GAClB;EACF,QAAQ;GACN,WAAW,KAAK;GAChB;EACF;EAEF,MAAM;CACR,GAAG,CAAC,OAAO,IAAI,CAAC;CAEhB,OACE,qBAAA,YAAA,EAAA,UAAA,CACG,WAAW,oBAAC,OAAD;EAAK,OAAO,EAAE,SAAS,YAAY;EAAI,UAAA;CAAa,CAAA,GAChE,qBAAC,aAAD,EAAA,UAAA,CACE,oBAAC,QAAD;EAAQ,SAAS;EAAe,UAAA;CAAmB,CAAA,GACnD,oBAAC,QAAD;EAAiB;EAAS,MAAK;EAAU,GAAI;EAAe,SAAS;EAClE,UAAA;CACK,CAAA,CACG,EAAA,CAAA,CACb,EAAA,CAAA;AAEN;AACA,YAAY,cAAc;AAc1B,IAAI,aAAa;AAEjB,SAAgB,oBAAiC;CAC/C,MAAM,WAAW;CACjB,MAAM,gBAAgB,aAAa,IAAI,kBAAkB,iBAAiB;CAG1E,IAAI,aAAgC,CAAC;CACrC,IAAI,YAAY;CAChB,MAAM,4BAAY,IAAI,IAAgB;CAEtC,MAAM,eAAe,UAAU,SAAS,MAAM,EAAE,CAAC;CACjD,MAAM,aAAa,MAAkB;EACnC,UAAU,IAAI,CAAC;EACf,aAAa,UAAU,OAAO,CAAC;CACjC;CACA,MAAM,QAA2B,CAAC;CAClC,MAAM,oBAAoB;CAC1B,MAAM,0BAA0B;CAIhC,MAAM,eAAe,IAAY,SAAwC;EACvE,IAAI,UAAU;EACd,aAAa,WAAW,KAAK,SAAS;GACpC,IAAI,KAAK,OAAO,IAAI,OAAO;GAC3B,UAAU;GACV,OAAO;IAAE,GAAG;IAAM,OAAO;KAAE,GAAG,KAAK;KAAO,GAAG;IAAK;GAAE;EACtD,CAAC;EACD,IAAI,SAAS,OAAO;CACtB;CAEA,MAAM,cAAc,OAAe;EACjC,YAAY,IAAI,EAAE,MAAM,MAAM,CAAC;CACjC;CAEA,MAAM,gBAAgB,OAAe;EACnC,MAAM,OAAO,WAAW,QAAQ,SAAS,KAAK,OAAO,EAAE;EACvD,IAAI,KAAK,WAAW,WAAW,QAAQ;EACvC,aAAa;EACb,OAAO;CACT;CAIA,MAAM,YAAY,MAAM,EAAE,YAAwC;EAChE,MAAM,EAAE,IAAI,UAAU;EACtB,MAAM,EACJ,UACA,YACA,SACA,QACA,cACA,cACA,sBACA,MACA,QAAQ,gBACR,OACA,UACE;EAEJ,MAAM,SAAS,QAAQ;EAEvB,MAAM,mBAAmB,aACtB,UAAmB,iBAAsC;GACxD,IAAI,CAAC,YAAY,iBAAiB,SAAS,cAAc,WAAW,iBAAiB;GACrF,IAAI,CAAC,UAAU,WAAW,EAAE;GAC5B,eAAe,QAAQ;EACzB,GACA;GAAC;GAAI;GAAc;EAAY,CACjC;EAEA,MAAM,qBAAqB,kBAAkB;GAC3C,uBAAuB,KAAK;GAC5B,aAAa,EAAE;EACjB,GAAG,CAAC,IAAI,oBAAoB,CAAC;EAE7B,MAAM,QAAQ,kBAAkB,WAAW,EAAE,GAAG,CAAC,EAAE,CAAC;EACpD,MAAM,8BAA8B,aACjC,UAAmB,YAAY,IAAI,EAAE,cAAc,MAAM,CAAC,GAC3D,CAAC,EAAE,CACL;EAEA,MAAM,YAAY,UAAU,KAAA,KAAa,UAAU,SAAS,UAAU;EAEtE,OACE,oBAAC,cAAD;GAAc,OAAO;IAAE;IAAO;GAA4B;GACxD,UAAA,oBAAC,WAAD;IACE,MAAM;IACN,gBAAgB;IAChB,cAAc;IAEd,UAAA,qBAAC,aAAD,EAAA,UAAA,CACE,oBAAC,eAAD;KAAe,WAAW,YAAY;KAAU,OAAO,gBAAgB;IAAW,CAAA,GAClF,qBAAC,YAAD;KACE,WAAW,YAAY;KACvB,YAAY,gBAAgB;KACrB;KAHT,UAAA;MAKG,aACC,qBAAC,aAAD;OAAa,WAAW,YAAY;OAAQ,OAAO,gBAAgB;OAAnE,UAAA,CACE,oBAAC,YAAD;QAAY,WAAW,YAAY;QAAO,OAAO,gBAAgB;QAC9D,UAAA;OACS,CAAA,GACZ,oBAAC,YAAD;QAAY,WAAW,YAAY;QAAO,OAAO,gBAAgB;OAAQ,CAAA,CAC9D;;MAEf,oBAAC,cAAD;OACE,WAAW,GAAG,CAAC,aAAa,OAAO,iBAAiB,YAAY,OAAO;OACvE,OAAO,gBAAgB;OAEtB,UAAA,WAAW;MACA,CAAA;MACb;KACS;IACD,CAAA,CAAA,EAAA,CAAA;GACJ,CAAA;EACC,CAAA;CAElB,CAAC;CACD,UAAU,cAAc;CAExB,MAAM,gBAAgB,MAAM,EAAE,YAA0C;EAEtE,IAAI,CADa,YACL,GAAG,OAAO;EACtB,OAAO,MAAM,KAAK,UAAU,oBAAC,WAAD,EAAkB,MAAuB,GAAX,MAAM,EAAK,CAAC;CACxE,CAAC;CACD,cAAc,cAAc;CAI5B,MAAM,QAAQ,EAAE,WAA2B;EACzC,MAAM,QAAQ,qBAAqB,WAAW,aAAa,iBAAiB;EAC5E,MAAM,WAAW,YAAY;EAE7B,gBAAgB;GACd,IAAI,CAAC,UAAU;GACf,MAAM,QAAQ,QAAQ,SAAS;GAC/B,OAAO,qBAAqB,eAAe,KAAK;EAClD,GAAG,CAAC,UAAU,IAAI,CAAC;EAEnB,IAAI,CAAC,UAAU,OAAO;EACtB,IAAI,MAAM,WAAW,GAAG,OAAO;EAE/B,OACE,oBAAC,oBAAD;GAA0B;GACxB,UAAA,oBAAC,eAAD,EAAsB,MAAQ,CAAA;EACZ,CAAA;CAExB;CAIA,MAAM,UAAU,UAA+C;EAC7D,MAAM,KAAK,cAAc,KAAK,IAAI,EAAE,GAAG;EACvC,aAAa,CAAC,GAAG,YAAY;GAAE;GAAI,OAAO;IAAE,GAAG;IAAO,MAAM,MAAM,QAAQ;GAAK;EAAE,CAAC;EAClF,OAAO;EAEP,OAAO;GACL,aAAa,WAAW,EAAE;GAC1B,eAAe,aAAa,EAAE;GAC9B,8BAA8B,UAAU,YAAY,IAAI,EAAE,cAAc,MAAM,CAAC;GAC/E,SAAS,cAAc,YAAY,IAAI,SAAS;EAClD;CACF;CAIA,MAAM,WAAW,WAA+B;EAC9C,MAAM,WAAW,OAAO;GACtB,SAAS,oBAAC,aAAD,EAAqB,OAAS,CAAA;GACvC,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,EAAE;GAClC,OAAO,OAAO;GACd,OAAO;EACT,CAAC;EAED,OAAO;GACL,OAAO,SAAS;GAChB,SAAS,SAAS;EACpB;CACF;CAEA,OAAO;EAAE,WAAW;EAAM,cAAc;EAAS,aAAa;CAAO;AACvE;AAIA,MAAM,gBAAgB,kBAAkB;AACxC,MAAa,YAAY,cAAc;AACvC,MAAa,cAAc,cAAc;AACzC,MAAa,eAAe,cAAc"}
|
|
@@ -19,7 +19,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
|
|
|
19
19
|
cursor: pointer;
|
|
20
20
|
|
|
21
21
|
position: absolute;
|
|
22
|
-
inset-block-start:
|
|
22
|
+
inset-block-start: 8px;
|
|
23
23
|
inset-inline-end: 12px;
|
|
24
24
|
|
|
25
25
|
display: flex;
|
|
@@ -81,8 +81,11 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
|
|
|
81
81
|
`,
|
|
82
82
|
content: css`
|
|
83
83
|
overflow: hidden auto;
|
|
84
|
-
padding-block:
|
|
84
|
+
padding-block: 0 16px;
|
|
85
85
|
padding-inline: 16px;
|
|
86
|
+
`,
|
|
87
|
+
contentNoHeader: css`
|
|
88
|
+
padding-block-start: 16px;
|
|
86
89
|
`,
|
|
87
90
|
footer: css`
|
|
88
91
|
display: flex;
|
|
@@ -98,8 +101,8 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
|
|
|
98
101
|
align-items: center;
|
|
99
102
|
justify-content: space-between;
|
|
100
103
|
|
|
101
|
-
min-height:
|
|
102
|
-
padding-block:
|
|
104
|
+
min-height: 48px;
|
|
105
|
+
padding-block: 8px;
|
|
103
106
|
padding-inline: 16px;
|
|
104
107
|
`,
|
|
105
108
|
headerDraggable: css`
|
|
@@ -155,11 +158,10 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
|
|
|
155
158
|
title: css`
|
|
156
159
|
margin: 0;
|
|
157
160
|
|
|
158
|
-
font-size:
|
|
161
|
+
font-size: 14px;
|
|
159
162
|
font-weight: 600;
|
|
160
163
|
line-height: 1.4;
|
|
161
164
|
color: ${cssVar.colorText};
|
|
162
|
-
letter-spacing: -0.005em;
|
|
163
165
|
`,
|
|
164
166
|
loadingSpinner: css`
|
|
165
167
|
@keyframes modal-spin {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Modal/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n backdrop: css`\n position: fixed;\n z-index: 1200;\n inset: 0;\n\n background: color-mix(in srgb, ${cssVar.colorBgContainer} 60%, transparent);\n\n transition: opacity 180ms cubic-bezier(0.32, 0.72, 0, 1);\n\n &[data-starting-style],\n &[data-ending-style] {\n opacity: 0;\n }\n `,\n\n close: css`\n cursor: pointer;\n\n position: absolute;\n inset-block-start:
|
|
1
|
+
{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Modal/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n backdrop: css`\n position: fixed;\n z-index: 1200;\n inset: 0;\n\n background: color-mix(in srgb, ${cssVar.colorBgContainer} 60%, transparent);\n\n transition: opacity 180ms cubic-bezier(0.32, 0.72, 0, 1);\n\n &[data-starting-style],\n &[data-ending-style] {\n opacity: 0;\n }\n `,\n\n close: css`\n cursor: pointer;\n\n position: absolute;\n inset-block-start: 8px;\n inset-inline-end: 12px;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n width: 32px;\n height: 32px;\n padding: 0;\n border: none;\n border-radius: 12px;\n\n color: ${cssVar.colorTextTertiary};\n\n background: transparent;\n\n transition: all 160ms cubic-bezier(0.32, 0.72, 0, 1);\n\n &:hover {\n transform: scale(1.04);\n color: ${cssVar.colorText};\n background: ${cssVar.colorFillSecondary};\n }\n\n &:focus-visible {\n outline: none;\n box-shadow: 0 0 0 2px ${cssVar.colorPrimaryBorder};\n }\n `,\n\n closeInline: css`\n cursor: pointer;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n width: 32px;\n height: 32px;\n padding: 0;\n border: none;\n border-radius: 12px;\n\n color: ${cssVar.colorTextTertiary};\n\n background: transparent;\n\n transition: all 160ms cubic-bezier(0.32, 0.72, 0, 1);\n\n &:hover {\n transform: scale(1.04);\n color: ${cssVar.colorText};\n background: ${cssVar.colorFillSecondary};\n }\n\n &:focus-visible {\n outline: none;\n box-shadow: 0 0 0 2px ${cssVar.colorPrimaryBorder};\n }\n `,\n\n content: css`\n overflow: hidden auto;\n padding-block: 0 16px;\n padding-inline: 16px;\n `,\n\n contentNoHeader: css`\n padding-block-start: 16px;\n `,\n\n footer: css`\n display: flex;\n gap: 8px;\n align-items: center;\n justify-content: flex-end;\n\n padding-block: 12px;\n padding-inline: 16px;\n `,\n\n header: css`\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n min-height: 48px;\n padding-block: 8px;\n padding-inline: 16px;\n `,\n\n headerDraggable: css`\n cursor: default;\n user-select: none;\n `,\n\n popup: css`\n pointer-events: none;\n\n position: fixed;\n z-index: 1201;\n inset: 0;\n\n display: flex;\n align-items: center;\n justify-content: center;\n `,\n\n popupInner: css`\n pointer-events: auto;\n\n position: relative;\n\n overflow: hidden;\n display: flex;\n flex-direction: column;\n\n box-sizing: border-box;\n width: calc(100% - 32px);\n max-width: 520px;\n max-height: calc(100dvh - 64px);\n border: 1px solid ${cssVar.colorBorderSecondary};\n border-radius: 12px;\n\n background: ${cssVar.colorBgElevated};\n box-shadow: ${cssVar.boxShadow};\n\n transition:\n transform 220ms cubic-bezier(0.32, 0.72, 0, 1),\n opacity 220ms cubic-bezier(0.32, 0.72, 0, 1);\n\n &[data-starting-style] {\n transform: scale(0.97);\n opacity: 0;\n }\n\n &[data-ending-style] {\n transform: scale(0.98);\n opacity: 0;\n transition-timing-function: cubic-bezier(0.4, 0, 1, 1);\n transition-duration: 120ms;\n }\n `,\n\n title: css`\n margin: 0;\n\n font-size: 14px;\n font-weight: 600;\n line-height: 1.4;\n color: ${cssVar.colorText};\n `,\n\n loadingSpinner: css`\n @keyframes modal-spin {\n to {\n transform: rotate(360deg);\n }\n }\n\n display: inline-block;\n\n width: 14px;\n height: 14px;\n border: 2px solid currentcolor;\n border-block-start-color: transparent;\n border-radius: 50%;\n\n animation: modal-spin 0.6s linear infinite;\n `,\n\n fullscreenPopupInner: css`\n width: 100% !important;\n max-width: 100% !important;\n height: 100dvh !important;\n max-height: 100dvh !important;\n border: none;\n border-radius: 12px;\n `,\n\n fullscreenToggle: css`\n cursor: pointer;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n width: 28px;\n height: 28px;\n padding: 0;\n border: none;\n border-radius: 12px;\n\n color: ${cssVar.colorTextTertiary};\n\n background: transparent;\n\n transition: all 160ms cubic-bezier(0.32, 0.72, 0, 1);\n\n &:hover {\n transform: scale(1.04);\n color: ${cssVar.colorText};\n background: ${cssVar.colorFillSecondary};\n }\n\n &:focus-visible {\n outline: none;\n box-shadow: 0 0 0 2px ${cssVar.colorPrimaryBorder};\n }\n `,\n\n headerActions: css`\n display: flex;\n gap: 4px;\n align-items: center;\n margin-inline-end: -4px;\n `,\n\n denyAnimation: css`\n @keyframes modal-deny {\n 0%,\n 100% {\n transform: translateX(0);\n }\n\n 20% {\n transform: translateX(-5px);\n }\n\n 40% {\n transform: translateX(5px);\n }\n\n 60% {\n transform: translateX(-3px);\n }\n\n 80% {\n transform: translateX(2px);\n }\n }\n\n animation: modal-deny 280ms cubic-bezier(0.36, 0.66, 0.04, 1);\n `,\n\n viewport: css`\n position: fixed;\n z-index: 1200;\n inset: 0;\n overflow: auto;\n `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,UAAU,GAAG;;;;;qCAKsB,OAAO,iBAAiB;;;;;;;;;CAU3D,OAAO,GAAG;;;;;;;;;;;;;;;;;aAiBC,OAAO,kBAAkB;;;;;;;;eAQvB,OAAO,UAAU;oBACZ,OAAO,mBAAmB;;;;;8BAKhB,OAAO,mBAAmB;;;CAItD,aAAa,GAAG;;;;;;;;;;;;;aAaL,OAAO,kBAAkB;;;;;;;;eAQvB,OAAO,UAAU;oBACZ,OAAO,mBAAmB;;;;;8BAKhB,OAAO,mBAAmB;;;CAItD,SAAS,GAAG;;;;;CAMZ,iBAAiB,GAAG;;;CAIpB,QAAQ,GAAG;;;;;;;;;CAUX,QAAQ,GAAG;;;;;;;;;CAUX,iBAAiB,GAAG;;;;CAKpB,OAAO,GAAG;;;;;;;;;;;CAYV,YAAY,GAAG;;;;;;;;;;;;;wBAaO,OAAO,qBAAqB;;;kBAGlC,OAAO,gBAAgB;kBACvB,OAAO,UAAU;;;;;;;;;;;;;;;;;;CAmBjC,OAAO,GAAG;;;;;;aAMC,OAAO,UAAU;;CAG5B,gBAAgB,GAAG;;;;;;;;;;;;;;;;;CAkBnB,sBAAsB,GAAG;;;;;;;;CASzB,kBAAkB,GAAG;;;;;;;;;;;;;aAaV,OAAO,kBAAkB;;;;;;;;eAQvB,OAAO,UAAU;oBACZ,OAAO,mBAAmB;;;;;8BAKhB,OAAO,mBAAmB;;;CAItD,eAAe,GAAG;;;;;;CAOlB,eAAe,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BlB,UAAU,GAAG;;;;;;AAMf,EAAE"}
|