@ryuzaki13/react-foundation-ui 1.0.0 → 1.0.2

package/dist/chunks/modal-B3HY3laL.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal-B3HY3laL.js","names":[],"sources":["../../src/modal/Modal.module.scss","../../src/modal/useModalManager.ts","../../src/modal/Modal.tsx","../../src/modal/ModalManagerProvider.tsx"],"sourcesContent":["@use \"@/styles/mixins\" as *;\n\n.modal {\n\tdisplay: grid;\n\tgrid-auto-rows: auto 1fr;\n\n\tposition: fixed;\n\tinset: 0;\n\tmargin: auto;\n\tz-index: var(--z-modal);\n\twidth: 90%;\n\theight: fit-content;\n\tmax-height: calc(100dvh - var(--space-lg));\n\tborder: var(--border);\n\tborder-radius: var(--radius-md);\n\tbackground-color: var(--surface-1);\n\tbox-shadow: var(--shadow-lg);\n\n\t&:not(:last-child) {\n\t\tpointer-events: none;\n\t\tfilter: grayscale(0.5) opacity(0.75);\n\t\t// opacity: 0.5;\n\t}\n\n\t&.sm {\n\t\tmax-width: min(30em, 93dvw);\n\t}\n\n\t&.md {\n\t\tmax-width: min(50em, 93dvw);\n\t}\n\n\t&.lg {\n\t\tmax-width: min(70em, 93dvw);\n\t}\n\n\t&.xl {\n\t\tmax-width: min(80em, 93dvw);\n\t}\n\n\t&.xxl {\n\t\twidth: 93dvw;\n\t\theight: 90dvh;\n\t\tmax-width: none;\n\t\tmax-height: none;\n\t}\n\n\t&.inside {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tmax-width: none;\n\t\tmax-height: none;\n\n\t\t.header,\n\t\t.body {\n\t\t\tborder-radius: 0;\n\t\t}\n\t}\n}\n\n.header {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\tbackground-color: var(--surface-2);\n\tborder-top-left-radius: var(--radius-md);\n\tborder-top-right-radius: var(--radius-md);\n}\n\n.headerText {\n\tmargin: 0;\n\tpadding-inline: var(--space-md);\n\tfont-size: var(--font-size-md);\n\tfont-variation-settings: \"wght\" 600;\n}\n\n.headerButton {\n\tmargin-block: var(--space-xs);\n\tmargin-inline: var(--space-sm);\n\tflex: 0;\n}\n\n.body {\n\toverflow: hidden;\n\tborder-bottom-left-radius: var(--radius-md);\n\tborder-bottom-right-radius: var(--radius-md);\n}\n","import { createContext, useContext } from \"react\";\n\nexport const ModalManagerContext = createContext<{\n\tmodals: string[];\n\topenModal: (id: string) => void;\n\tcloseModal: (id: string) => void;\n\tisTopModal: (id: string) => boolean;\n}>({\n\tmodals: [],\n\topenModal: () => {},\n\tcloseModal: () => {},\n\tisTopModal: () => false\n});\n\nexport const useModalManager = () => useContext(ModalManagerContext);\n","import React, { Children, useEffect, useEffectEvent, useId, useState } from \"react\";\n\nimport { getOrCreatePortalRoot, useEscapeDismiss, useFocusTrap } from \"@ryuzaki13/react-foundation-lib/dom\";\nimport { cn } from \"@ryuzaki13/react-foundation-lib/utils\";\nimport { X } from \"lucide-react\";\nimport { createPortal } from \"react-dom\";\n\nimport { Button } from \"../button\";\nimport { FlexContainer } from \"../flex\";\nimport { GridContainer } from \"../grid\";\nimport { Scrollable } from \"../misc\";\n\nimport styles from \"./Modal.module.scss\";\nimport { ModalSize } from \"./types\";\nimport { useModalManager } from \"./useModalManager\";\n\n// Подкомпоненты\nexport interface ModalCompositionProps {\n\tchildren: React.ReactNode;\n\tclassName?: string;\n}\n\nexport const ModalToolbar: React.FC<ModalCompositionProps> = ({ children, className }) => {\n\treturn <div className={cn(\"surface2 paddingMd borderBottom\", className)}>{children}</div>;\n};\nModalToolbar.displayName = \"Modal.Toolbar\";\n\nexport const ModalContent: React.FC<ModalCompositionProps & { scrollable?: boolean }> = ({ children, className, scrollable }) => {\n\treturn (\n\t\t<div className={cn(\"paddingMd h100 overflowHidden\", className)}>\n\t\t\t{scrollable ? <Scrollable className=\"h100\">{children}</Scrollable> : children}\n\t\t</div>\n\t);\n};\nModalContent.displayName = \"Modal.Content\";\n\nexport const ModalFooter: React.FC<ModalCompositionProps> = ({ children, className }) => {\n\treturn (\n\t\t<div className={cn(\"surface2 borderTop paddingMd\", className)}>\n\t\t\t<FlexContainer gap=\"sm\" align=\"center\" justify=\"end\">\n\t\t\t\t{children}\n\t\t\t</FlexContainer>\n\t\t</div>\n\t);\n};\nModalFooter.displayName = \"Modal.Footer\";\n\ntype ToolbarElement = React.ReactElement<ModalCompositionProps, typeof ModalToolbar>;\ntype ContentElement = React.ReactElement<ModalCompositionProps, typeof ModalContent>;\ntype FooterElement = React.ReactElement<ModalCompositionProps, typeof ModalFooter>;\n\ntype ModalChildren =\n\t[ToolbarElement, ContentElement, FooterElement] | [ToolbarElement, ContentElement] | [ContentElement, FooterElement] | ContentElement;\n\nexport interface ModalProps {\n\t/** Открыто ли модальное окно */\n\tisOpen?: boolean;\n\t/** Заголовок */\n\ttitle?: string;\n\t/** Размер модального окна */\n\tsize?: keyof typeof ModalSize;\n\theight?: string;\n\t/** Обработчик закрытия */\n\tonClose: () => void;\n\tchildren: ModalChildren;\n}\n\nexport const Modal: React.FC<ModalProps> = ({ isOpen, title, size = \"sm\", height, onClose, children }) => {\n\tconst modalId = useId();\n\tconst titleId = useId();\n\n\tconst { modals, openModal, closeModal, isTopModal } = useModalManager();\n\tconst [isMounted, setIsMounted] = useState(false);\n\tconst mountModal = useEffectEvent(() => setIsMounted(true));\n\tconst unmountModal = useEffectEvent(() => setIsMounted(false));\n\n\t/**\n\t * Если provider менеджера не подключен, считаем одиночную модалку активной,\n\t * иначе логика Escape/focus trap никогда не включится.\n\t */\n\tconst isActive = isOpen && (modals.length === 0 || isTopModal(modalId));\n\n\tconst modalRef = useFocusTrap(isOpen || false);\n\n\tuseEscapeDismiss({\n\t\tactive: isActive || false,\n\t\tonDismiss: onClose,\n\t\tcontainerRef: modalRef\n\t});\n\n\tuseEffect(() => {\n\t\tif (isOpen) {\n\t\t\topenModal(modalId);\n\t\t\tmountModal();\n\t\t}\n\n\t\treturn () => {\n\t\t\tcloseModal(modalId);\n\t\t\tunmountModal();\n\t\t};\n\t}, [closeModal, isOpen, modalId, openModal]);\n\n\tif (!isMounted) return null;\n\n\tconst modalRoot = getOrCreatePortalRoot(\"modal-root\");\n\n\tif (!modalRoot) {\n\t\treturn null;\n\t}\n\n\tlet toolbar: React.ReactNode = null;\n\tlet content: React.ReactNode = null;\n\tlet footer: React.ReactNode = null;\n\n\tconst childArray = Children.toArray(children) as (ToolbarElement | ContentElement | FooterElement)[];\n\n\tfor (const child of childArray) {\n\t\tconst typeName = child.type.displayName;\n\n\t\tswitch (typeName) {\n\t\t\tcase ModalToolbar.displayName:\n\t\t\t\tif (toolbar) throw new Error(\"Modal: duplicate <Toolbar> found\");\n\t\t\t\ttoolbar = child; //.props.children;\n\t\t\t\tbreak;\n\t\t\tcase ModalFooter.displayName:\n\t\t\t\tif (footer) throw new Error(\"Modal: duplicate <Footer> found\");\n\t\t\t\tfooter = child; //props.children;\n\t\t\t\tbreak;\n\t\t\tcase ModalContent.displayName:\n\t\t\t\tif (content) throw new Error(\"Modal: duplicate <Content> found\");\n\t\t\t\tcontent = child; //.props.children;\n\t\t\t\tbreak;\n\t\t}\n\t}\n\n\treturn createPortal(\n\t\t<>\n\t\t\t<div\n\t\t\t\tref={modalRef}\n\t\t\t\tclassName={cn(styles.modal, styles[size])}\n\t\t\t\tstyle={{ height }}\n\t\t\t\trole=\"dialog\"\n\t\t\t\taria-modal=\"true\"\n\t\t\t\taria-labelledby={titleId}\n\t\t\t\taria-describedby={`${titleId}-content`}>\n\t\t\t\t<div className={cn(styles.header, toolbar ? \"\" : \"borderBottom\")}>\n\t\t\t\t\t<h3 className={styles.headerText} id={titleId}>\n\t\t\t\t\t\t{title}\n\t\t\t\t\t</h3>\n\t\t\t\t\t<Button\n\t\t\t\t\t\ticon={<X />}\n\t\t\t\t\t\tclassName={styles.headerButton}\n\t\t\t\t\t\tvariant={\"ghost\"}\n\t\t\t\t\t\tautoFocus={true}\n\t\t\t\t\t\taria-label={\"Закрыть модальное окно\"}\n\t\t\t\t\t\tonClick={onClose}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\n\t\t\t\t<GridContainer\n\t\t\t\t\tid={`${titleId}-content`}\n\t\t\t\t\ttemplateRows={`${toolbar ? \"auto\" : \"\"} 1fr ${footer ? \"auto\" : \"\"}`.trim()}\n\t\t\t\t\t// gap=\"md\"\n\t\t\t\t\tclassName={styles.body}>\n\t\t\t\t\t{toolbar}\n\t\t\t\t\t{content}\n\t\t\t\t\t{footer}\n\t\t\t\t</GridContainer>\n\t\t\t</div>\n\t\t</>,\n\t\tmodalRoot\n\t);\n};\n","// ModalManagerContext.tsx\nimport React, { useCallback, useEffect, useRef, useState } from \"react\";\n\nimport { ModalManagerContext } from \"./useModalManager\";\n\n/**\n * Провайдер для централизованного управления стеком модальных окон. Дает вложенным компонентам доступ к открытию и закрытию модалок через контекст.\n */\nexport function ModalManagerProvider({ children }: { children: React.ReactNode }) {\n\tconst [modals, setModals] = useState<string[]>([]);\n\tconst prevModalsLength = useRef(0);\n\n\tconst openModal = useCallback((id: string) => {\n\t\tsetModals((prev) => [...prev, id]);\n\t}, []);\n\n\tconst closeModal = useCallback((id: string) => {\n\t\tsetModals((prev) => prev.filter((mid) => mid !== id));\n\t}, []);\n\n\tconst isTopModal = useCallback(\n\t\t(id: string) => {\n\t\t\treturn modals[modals.length - 1] === id;\n\t\t},\n\t\t[modals]\n\t);\n\n\tuseEffect(() => {\n\t\tconst wasEmpty = prevModalsLength.current === 0;\n\t\tconst isNowEmpty = modals.length === 0;\n\n\t\tif (wasEmpty && modals.length > 0) {\n\t\t\t// первая модалка открыта — ставим стили\n\t\t\tconst scrollY = window.scrollY;\n\t\t\t// const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;\n\t\t\tconst appRoot = document.querySelector(\"#app-root\");\n\n\t\t\tdocument.body.style.position = \"fixed\";\n\t\t\tdocument.body.style.top = `-${scrollY}px`;\n\t\t\tdocument.body.style.width = \"100%\";\n\t\t\t// document.body.style.paddingRight = `${scrollbarWidth}px`;\n\t\t\tappRoot?.setAttribute(\"inert\", \"true\");\n\n\t\t\tprevModalsLength.current = modals.length;\n\t\t\treturn;\n\t\t}\n\n\t\tif (!wasEmpty && isNowEmpty) {\n\t\t\t// последняя модалка закрыта — снимаем стили\n\t\t\tconst appRoot = document.querySelector(\"#app-root\");\n\t\t\tconst scrollY = parseInt(document.body.style.top || \"0\") * -1;\n\n\t\t\tdocument.body.style.position = \"\";\n\t\t\tdocument.body.style.top = \"\";\n\t\t\tdocument.body.style.width = \"\";\n\t\t\t// document.body.style.paddingRight = \"\";\n\n\t\t\tappRoot?.removeAttribute(\"inert\");\n\n\t\t\twindow.scrollTo({ top: scrollY, left: 0, behavior: \"instant\" });\n\t\t}\n\n\t\tprevModalsLength.current = modals.length;\n\t}, [modals.length]);\n\n\treturn <ModalManagerContext.Provider value={{ modals, openModal, closeModal, isTopModal }}>{children}</ModalManagerContext.Provider>;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;GCEa,IAAsB,EAKhC;CACF,QAAQ,CAAC;CACT,iBAAiB,CAAC;CAClB,kBAAkB,CAAC;CACnB,kBAAkB;AACnB,CAAC,GAEY,UAAwB,EAAW,CAAmB,GCQtD,KAAiD,EAAE,aAAU,mBAClE,kBAAC,OAAD;CAAK,WAAW,EAAG,mCAAmC,CAAS;CAAI;AAAc,CAAA;AAEzF,EAAa,cAAc;AAE3B,IAAa,KAA4E,EAAE,aAAU,cAAW,oBAE9G,kBAAC,OAAD;CAAK,WAAW,EAAG,iCAAiC,CAAS;WAC3D,IAAa,kBAAC,GAAD;EAAY,WAAU;EAAQ;CAAqB,CAAA,IAAI;AACjE,CAAA;AAGP,EAAa,cAAc;AAE3B,IAAa,KAAgD,EAAE,aAAU,mBAEvE,kBAAC,OAAD;CAAK,WAAW,EAAG,gCAAgC,CAAS;WAC3D,kBAAC,GAAD;EAAe,KAAI;EAAK,OAAM;EAAS,SAAQ;EAC7C;CACa,CAAA;AACX,CAAA;AAGP,EAAY,cAAc;AAsB1B,IAAa,KAA+B,EAAE,WAAQ,UAAO,UAAO,MAAM,WAAQ,YAAS,kBAAe;CACzG,IAAM,IAAU,EAAM,GAChB,IAAU,EAAM,GAEhB,EAAE,WAAQ,cAAW,eAAY,kBAAe,EAAgB,GAChE,CAAC,GAAW,KAAgB,EAAS,EAAK,GAC1C,IAAa,QAAqB,EAAa,EAAI,CAAC,GACpD,IAAe,QAAqB,EAAa,EAAK,CAAC,GAMvD,IAAW,MAAW,EAAO,WAAW,KAAK,EAAW,CAAO,IAE/D,IAAW,EAAa,KAAU,EAAK;CAoB7C,IAlBA,EAAiB;EAChB,QAAQ,KAAY;EACpB,WAAW;EACX,cAAc;CACf,CAAC,GAED,SACK,MACH,EAAU,CAAO,GACjB,EAAW,UAGC;EAEZ,AADA,EAAW,CAAO,GAClB,EAAa;CACd,IACE;EAAC;EAAY;EAAQ;EAAS;CAAS,CAAC,GAEvC,CAAC,GAAW,OAAO;CAEvB,IAAM,IAAY,EAAsB,YAAY;CAEpD,IAAI,CAAC,GACJ,OAAO;CAGR,IAAI,IAA2B,MAC3B,IAA2B,MAC3B,IAA0B,MAExB,IAAa,EAAS,QAAQ,CAAQ;CAE5C,KAAK,IAAM,KAAS,GAGnB,QAFiB,EAAM,KAAK,aAE5B;EACC,KAAK,EAAa;GACjB,IAAI,GAAS,MAAU,MAAM,kCAAkC;GAC/D,IAAU;GACV;EACD,KAAK,EAAY;GAChB,IAAI,GAAQ,MAAU,MAAM,iCAAiC;GAC7D,IAAS;GACT;EACD,KAAK,EAAa;GACjB,IAAI,GAAS,MAAU,MAAM,kCAAkC;GAC/D,IAAU;GACV;CACF;CAGD,OAAO,EACN,kBAAA,GAAA,EAAA,UACC,kBAAC,OAAD;EACC,KAAK;EACL,WAAW,EAAG,EAAO,OAAO,EAAO,EAAK;EACxC,OAAO,EAAE,UAAO;EAChB,MAAK;EACL,cAAW;EACX,mBAAiB;EACjB,oBAAkB,GAAG,EAAQ;YAP9B,CAQC,kBAAC,OAAD;GAAK,WAAW,EAAG,EAAO,QAAQ,IAAU,KAAK,cAAc;aAA/D,CACC,kBAAC,MAAD;IAAI,WAAW,EAAO;IAAY,IAAI;cACpC;GACE,CAAA,GACJ,kBAAC,GAAD;IACC,MAAM,kBAAC,GAAD,CAAI,CAAA;IACV,WAAW,EAAO;IAClB,SAAS;IACT,WAAW;IACX,cAAY;IACZ,SAAS;GACT,CAAA,CACG;MAEL,kBAAC,GAAD;GACC,IAAI,GAAG,EAAQ;GACf,cAAc,GAAG,IAAU,SAAS,GAAG,OAAO,IAAS,SAAS,KAAK,KAAK;GAE1E,WAAW,EAAO;aAJnB;IAKE;IACA;IACA;GACa;IACX;IACJ,CAAA,GACF,CACD;AACD;;;ACpKA,SAAgB,EAAqB,EAAE,eAA2C;CACjF,IAAM,CAAC,GAAQ,KAAa,EAAmB,CAAC,CAAC,GAC3C,IAAmB,EAAO,CAAC,GAE3B,IAAY,GAAa,MAAe;EAC7C,GAAW,MAAS,CAAC,GAAG,GAAM,CAAE,CAAC;CAClC,GAAG,CAAC,CAAC,GAEC,IAAa,GAAa,MAAe;EAC9C,GAAW,MAAS,EAAK,QAAQ,MAAQ,MAAQ,CAAE,CAAC;CACrD,GAAG,CAAC,CAAC,GAEC,IAAa,GACjB,MACO,EAAO,EAAO,SAAS,OAAO,GAEtC,CAAC,CAAM,CACR;CAwCA,OAtCA,QAAgB;EACf,IAAM,IAAW,EAAiB,YAAY,GACxC,IAAa,EAAO,WAAW;EAErC,IAAI,KAAY,EAAO,SAAS,GAAG;GAElC,IAAM,IAAU,OAAO,SAEjB,IAAU,SAAS,cAAc,WAAW;GAQlD,AANA,SAAS,KAAK,MAAM,WAAW,SAC/B,SAAS,KAAK,MAAM,MAAM,IAAI,EAAQ,KACtC,SAAS,KAAK,MAAM,QAAQ,QAE5B,GAAS,aAAa,SAAS,MAAM,GAErC,EAAiB,UAAU,EAAO;GAClC;EACD;EAEA,IAAI,CAAC,KAAY,GAAY;GAE5B,IAAM,IAAU,SAAS,cAAc,WAAW,GAC5C,IAAU,SAAS,SAAS,KAAK,MAAM,OAAO,GAAG,IAAI;GAS3D,AAPA,SAAS,KAAK,MAAM,WAAW,IAC/B,SAAS,KAAK,MAAM,MAAM,IAC1B,SAAS,KAAK,MAAM,QAAQ,IAG5B,GAAS,gBAAgB,OAAO,GAEhC,OAAO,SAAS;IAAE,KAAK;IAAS,MAAM;IAAG,UAAU;GAAU,CAAC;EAC/D;EAEA,EAAiB,UAAU,EAAO;CACnC,GAAG,CAAC,EAAO,MAAM,CAAC,GAEX,kBAAC,EAAoB,UAArB;EAA8B,OAAO;GAAE;GAAQ;GAAW;GAAY;EAAW;EAAI;CAAuC,CAAA;AACpI"}