boreal-ui 0.0.78 → 0.0.79
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/core/{Breadcrumbs-B7hp9_u1.cjs → Breadcrumbs-B-I-UmIg.cjs} +1 -2
- package/dist/core/{Breadcrumbs-B7hp9_u1.cjs.map → Breadcrumbs-B-I-UmIg.cjs.map} +1 -1
- package/dist/core/{Breadcrumbs-kbOyaea6.js → Breadcrumbs-BwDAukNi.js} +1 -2
- package/dist/core/{Breadcrumbs-kbOyaea6.js.map → Breadcrumbs-BwDAukNi.js.map} +1 -1
- package/dist/core/Breadcrumbs.cjs.js +1 -1
- package/dist/core/Breadcrumbs.js +1 -1
- package/dist/core/{Card-C3kfPs8j.cjs → Card-B2gCUSuQ.cjs} +1 -2
- package/dist/core/{Card-C3kfPs8j.cjs.map → Card-B2gCUSuQ.cjs.map} +1 -1
- package/dist/core/{Card-CZY1qzwZ.js → Card-CnvOGnWI.js} +1 -2
- package/dist/core/{Card-CZY1qzwZ.js.map → Card-CnvOGnWI.js.map} +1 -1
- package/dist/core/Card.cjs.js +1 -1
- package/dist/core/Card.js +1 -1
- package/dist/core/{CommandPalette-BtpQ9cio.cjs → CommandPalette-BKd-BCUk.cjs} +2 -2
- package/dist/core/{CommandPalette-BtpQ9cio.cjs.map → CommandPalette-BKd-BCUk.cjs.map} +1 -1
- package/dist/core/{CommandPalette-0uVG4iR2.js → CommandPalette-C5XB2s4L.js} +2 -2
- package/dist/core/{CommandPalette-0uVG4iR2.js.map → CommandPalette-C5XB2s4L.js.map} +1 -1
- package/dist/core/CommandPalette.cjs.js +1 -1
- package/dist/core/CommandPalette.js +1 -1
- package/dist/core/{Dropdown-B7-_OH9p.cjs → Dropdown-DflOD92W.cjs} +1 -2
- package/dist/core/{Dropdown-B7-_OH9p.cjs.map → Dropdown-DflOD92W.cjs.map} +1 -1
- package/dist/core/{Dropdown-BEPGhf-i.js → Dropdown-fr7AR3nt.js} +1 -2
- package/dist/core/{Dropdown-BEPGhf-i.js.map → Dropdown-fr7AR3nt.js.map} +1 -1
- package/dist/core/Dropdown.cjs.js +1 -1
- package/dist/core/Dropdown.js +1 -1
- package/dist/core/{EmptyState-Du2xqi6G.cjs → EmptyState-BSVIrZHm.cjs} +1 -2
- package/dist/core/{EmptyState-Du2xqi6G.cjs.map → EmptyState-BSVIrZHm.cjs.map} +1 -1
- package/dist/core/{EmptyState-CM7nlKER.js → EmptyState-ClFhpjyo.js} +1 -2
- package/dist/core/{EmptyState-CM7nlKER.js.map → EmptyState-ClFhpjyo.js.map} +1 -1
- package/dist/core/EmptyState.cjs.js +1 -1
- package/dist/core/EmptyState.js +1 -1
- package/dist/core/{Footer-60sTURxB.cjs → Footer-CDcKfT68.cjs} +37 -37
- package/dist/core/Footer-CDcKfT68.cjs.map +1 -0
- package/dist/core/{Footer-Q_60pe6o.js → Footer-DaEqi5su.js} +38 -38
- package/dist/core/Footer-DaEqi5su.js.map +1 -0
- package/dist/core/Footer.cjs.js +1 -1
- package/dist/core/Footer.js +1 -1
- package/dist/core/{NotificationCenter-DA-WGPP9.js → NotificationCenter-B8e8mMb_.js} +1 -2
- package/dist/core/{NotificationCenter-DA-WGPP9.js.map → NotificationCenter-B8e8mMb_.js.map} +1 -1
- package/dist/core/{NotificationCenter-CsKJTZhk.cjs → NotificationCenter-Dg_F-nLl.cjs} +1 -2
- package/dist/core/{NotificationCenter-CsKJTZhk.cjs.map → NotificationCenter-Dg_F-nLl.cjs.map} +1 -1
- package/dist/core/NotificationCenter.cjs.js +1 -1
- package/dist/core/NotificationCenter.js +1 -1
- package/dist/core/{Pager-B4hyIUdo.js → Pager-BH8hdkMS.js} +1 -2
- package/dist/core/{Pager-B4hyIUdo.js.map → Pager-BH8hdkMS.js.map} +1 -1
- package/dist/core/{Pager-wl7_umU4.cjs → Pager-BXAAjmIk.cjs} +1 -2
- package/dist/core/{Pager-wl7_umU4.cjs.map → Pager-BXAAjmIk.cjs.map} +1 -1
- package/dist/core/Pager.cjs.js +1 -1
- package/dist/core/Pager.js +1 -1
- package/dist/core/{Stepper-CQRJID19.cjs → Stepper-BImUKM9h.cjs} +1 -2
- package/dist/core/{Stepper-CQRJID19.cjs.map → Stepper-BImUKM9h.cjs.map} +1 -1
- package/dist/core/{Stepper-CLfy0_gZ.js → Stepper-DRCnDvvv.js} +1 -2
- package/dist/core/{Stepper-CLfy0_gZ.js.map → Stepper-DRCnDvvv.js.map} +1 -1
- package/dist/core/Stepper.cjs.js +1 -1
- package/dist/core/Stepper.js +1 -1
- package/dist/core/{TagInput-YieWARAt.js → TagInput-BO0Br1nf.js} +2 -2
- package/dist/core/{TagInput-YieWARAt.js.map → TagInput-BO0Br1nf.js.map} +1 -1
- package/dist/core/{TagInput-pWRdhaP3.cjs → TagInput-CpJ--Wzp.cjs} +2 -2
- package/dist/core/{TagInput-pWRdhaP3.cjs.map → TagInput-CpJ--Wzp.cjs.map} +1 -1
- package/dist/core/TagInput.cjs.js +1 -1
- package/dist/core/TagInput.js +1 -1
- package/dist/core/{TextInput-Bc2YpcvM.js → TextInput-CXyzklAm.js} +1 -2
- package/dist/core/{TextInput-Bc2YpcvM.js.map → TextInput-CXyzklAm.js.map} +1 -1
- package/dist/core/{TextInput-DbAsQxjr.cjs → TextInput-xBrLtn_h.cjs} +1 -2
- package/dist/core/{TextInput-DbAsQxjr.cjs.map → TextInput-xBrLtn_h.cjs.map} +1 -1
- package/dist/core/TextInput.cjs.js +1 -1
- package/dist/core/TextInput.js +1 -1
- package/dist/core/boreal-ui.css +1137 -1137
- package/dist/core/index.cjs.js +11 -12
- package/dist/core/index.cjs.js.map +1 -1
- package/dist/core/index.js +11 -12
- package/dist/core/index.js.map +1 -1
- package/dist/next/{Breadcrumbs-eetAtAHU.js → Breadcrumbs-BEDmdhgu.js} +2 -3
- package/dist/next/{Breadcrumbs-eetAtAHU.js.map → Breadcrumbs-BEDmdhgu.js.map} +1 -1
- package/dist/next/{Breadcrumbs-33eZmvpJ.cjs → Breadcrumbs-CMOeEih6.cjs} +2 -3
- package/dist/next/{Breadcrumbs-33eZmvpJ.cjs.map → Breadcrumbs-CMOeEih6.cjs.map} +1 -1
- package/dist/next/Breadcrumbs.cjs.js +1 -1
- package/dist/next/Breadcrumbs.js +1 -1
- package/dist/next/{Card-CO--D_GK.js → Card-C4l2NTBd.js} +2 -3
- package/dist/next/{Card-CO--D_GK.js.map → Card-C4l2NTBd.js.map} +1 -1
- package/dist/next/{Card-o8DszZPj.cjs → Card-DcQ0V83P.cjs} +2 -3
- package/dist/next/{Card-o8DszZPj.cjs.map → Card-DcQ0V83P.cjs.map} +1 -1
- package/dist/next/Card.cjs.js +1 -1
- package/dist/next/Card.js +1 -1
- package/dist/next/CheckBox.cjs.js +1 -1
- package/dist/next/CheckBox.js +1 -1
- package/dist/next/{Checkbox-KIXViPTB.js → Checkbox-D6Msnkyl.js} +75 -75
- package/dist/next/{Checkbox-KIXViPTB.js.map → Checkbox-D6Msnkyl.js.map} +1 -1
- package/dist/next/{Checkbox-UqOL3aqk.cjs → Checkbox-IK6dY7ED.cjs} +74 -74
- package/dist/next/{Checkbox-UqOL3aqk.cjs.map → Checkbox-IK6dY7ED.cjs.map} +1 -1
- package/dist/next/{Chip-D-QH1huh.js → Chip-BweeZwb7.js} +84 -85
- package/dist/next/{Chip-D-QH1huh.js.map → Chip-BweeZwb7.js.map} +1 -1
- package/dist/next/{Chip-BQv3NoJL.cjs → Chip-DNyF7UUP.cjs} +85 -86
- package/dist/next/{Chip-BQv3NoJL.cjs.map → Chip-DNyF7UUP.cjs.map} +1 -1
- package/dist/next/Chip.cjs.js +1 -1
- package/dist/next/Chip.js +1 -1
- package/dist/next/{CircularProgress-BG83Q-uO.cjs → CircularProgress-0bh-uYuv.cjs} +58 -58
- package/dist/next/{CircularProgress-BG83Q-uO.cjs.map → CircularProgress-0bh-uYuv.cjs.map} +1 -1
- package/dist/next/{CircularProgress-Bfanw-2S.js → CircularProgress-BHOMzVmz.js} +59 -59
- package/dist/next/{CircularProgress-Bfanw-2S.js.map → CircularProgress-BHOMzVmz.js.map} +1 -1
- package/dist/next/CircularProgress.cjs.js +1 -1
- package/dist/next/CircularProgress.js +1 -1
- package/dist/next/{ColorPicker-BJfyM0Ay.js → ColorPicker-BhDo-h8k.js} +50 -50
- package/dist/next/{ColorPicker-BJfyM0Ay.js.map → ColorPicker-BhDo-h8k.js.map} +1 -1
- package/dist/next/{ColorPicker-DmubVH4p.cjs → ColorPicker-DlyqseYs.cjs} +49 -49
- package/dist/next/{ColorPicker-DmubVH4p.cjs.map → ColorPicker-DlyqseYs.cjs.map} +1 -1
- package/dist/next/ColorPicker.cjs.js +1 -1
- package/dist/next/ColorPicker.js +1 -1
- package/dist/next/{CommandPalette-CNaU5jTY.js → CommandPalette-BAgsEdVA.js} +67 -68
- package/dist/next/{CommandPalette-CNaU5jTY.js.map → CommandPalette-BAgsEdVA.js.map} +1 -1
- package/dist/next/{CommandPalette-_Lpb0UOI.cjs → CommandPalette-CNs6UpbZ.cjs} +68 -69
- package/dist/next/{CommandPalette-_Lpb0UOI.cjs.map → CommandPalette-CNs6UpbZ.cjs.map} +1 -1
- package/dist/next/CommandPalette.cjs.js +1 -1
- package/dist/next/CommandPalette.js +1 -1
- package/dist/next/{DateTimePicker-WVVLqcd9.js → DateTimePicker-D2thRuf1.js} +65 -65
- package/dist/next/{DateTimePicker-WVVLqcd9.js.map → DateTimePicker-D2thRuf1.js.map} +1 -1
- package/dist/next/{DateTimePicker-CU-b9irX.cjs → DateTimePicker-Dp0y3k4y.cjs} +65 -65
- package/dist/next/{DateTimePicker-CU-b9irX.cjs.map → DateTimePicker-Dp0y3k4y.cjs.map} +1 -1
- package/dist/next/DateTimePicker.cjs.js +1 -1
- package/dist/next/DateTimePicker.js +1 -1
- package/dist/next/{Divider-BXSDTRTU.js → Divider-C41EKGIw.js} +30 -30
- package/dist/next/{Divider-BXSDTRTU.js.map → Divider-C41EKGIw.js.map} +1 -1
- package/dist/next/{Divider-BGxUapmt.cjs → Divider-CVOkAhn6.cjs} +29 -29
- package/dist/next/{Divider-BGxUapmt.cjs.map → Divider-CVOkAhn6.cjs.map} +1 -1
- package/dist/next/Divider.cjs.js +1 -1
- package/dist/next/Divider.js +1 -1
- package/dist/next/{Dropdown-CUYItZDk.cjs → Dropdown-BYmta_HY.cjs} +42 -43
- package/dist/next/{Dropdown-CUYItZDk.cjs.map → Dropdown-BYmta_HY.cjs.map} +1 -1
- package/dist/next/{Dropdown-B7vrHg0z.js → Dropdown-DavPqfaS.js} +41 -42
- package/dist/next/{Dropdown-B7vrHg0z.js.map → Dropdown-DavPqfaS.js.map} +1 -1
- package/dist/next/Dropdown.cjs.js +1 -1
- package/dist/next/Dropdown.js +1 -1
- package/dist/next/{EmptyState-MT9_qwrB.js → EmptyState-CiTGvH-L.js} +72 -73
- package/dist/next/{EmptyState-MT9_qwrB.js.map → EmptyState-CiTGvH-L.js.map} +1 -1
- package/dist/next/{EmptyState-sh7Vn6eC.cjs → EmptyState-kAjC_DXY.cjs} +73 -74
- package/dist/next/{EmptyState-sh7Vn6eC.cjs.map → EmptyState-kAjC_DXY.cjs.map} +1 -1
- package/dist/next/EmptyState.cjs.js +1 -1
- package/dist/next/EmptyState.js +1 -1
- package/dist/next/{FileUpload-Bvj5JEBv.js → FileUpload-HiZuJjoA.js} +82 -83
- package/dist/next/{FileUpload-Bvj5JEBv.js.map → FileUpload-HiZuJjoA.js.map} +1 -1
- package/dist/next/{FileUpload-CD_i5Md2.cjs → FileUpload-qzSlXJzW.cjs} +82 -83
- package/dist/next/{FileUpload-CD_i5Md2.cjs.map → FileUpload-qzSlXJzW.cjs.map} +1 -1
- package/dist/next/FileUpload.cjs.js +1 -1
- package/dist/next/FileUpload.js +1 -1
- package/dist/next/{Footer-DJjzgwpc.cjs → Footer-BNHMeMTO.cjs} +102 -103
- package/dist/next/Footer-BNHMeMTO.cjs.map +1 -0
- package/dist/next/{Footer-Bdu_9H3p.js → Footer-BTd8oTYi.js} +102 -103
- package/dist/next/Footer-BTd8oTYi.js.map +1 -0
- package/dist/next/Footer.cjs.js +1 -1
- package/dist/next/Footer.css +673 -0
- package/dist/next/Footer.js +1 -1
- package/dist/next/{MessagePopup-DLodDCIa.js → MessagePopup-BAvnVw84.js} +2 -3
- package/dist/next/{MessagePopup-DLodDCIa.js.map → MessagePopup-BAvnVw84.js.map} +1 -1
- package/dist/next/{MessagePopup-CizqwWmH.cjs → MessagePopup-CixIzgoc.cjs} +2 -3
- package/dist/next/{MessagePopup-CizqwWmH.cjs.map → MessagePopup-CixIzgoc.cjs.map} +1 -1
- package/dist/next/MessagePopup.cjs.js +1 -1
- package/dist/next/MessagePopup.js +1 -1
- package/dist/next/{Modal-BajWiIo7.js → Modal-5Reb9Rx-.js} +2 -3
- package/dist/next/{Modal-BajWiIo7.js.map → Modal-5Reb9Rx-.js.map} +1 -1
- package/dist/next/{Modal-j59Cj0t1.cjs → Modal-DfVyL8yk.cjs} +2 -3
- package/dist/next/{Modal-j59Cj0t1.cjs.map → Modal-DfVyL8yk.cjs.map} +1 -1
- package/dist/next/Modal.cjs.js +1 -1
- package/dist/next/Modal.js +1 -1
- package/dist/next/{NotificationCenter-obd1jF2n.cjs → NotificationCenter-BcEB_4HS.cjs} +2 -3
- package/dist/next/{NotificationCenter-obd1jF2n.cjs.map → NotificationCenter-BcEB_4HS.cjs.map} +1 -1
- package/dist/next/{NotificationCenter-BDd4Zr8Y.js → NotificationCenter-DvoC0SI9.js} +2 -3
- package/dist/next/{NotificationCenter-BDd4Zr8Y.js.map → NotificationCenter-DvoC0SI9.js.map} +1 -1
- package/dist/next/NotificationCenter.cjs.js +1 -1
- package/dist/next/NotificationCenter.js +1 -1
- package/dist/next/{Pager-8dIVqCGz.cjs → Pager-BZLZA8KD.cjs} +2 -3
- package/dist/next/{Pager-8dIVqCGz.cjs.map → Pager-BZLZA8KD.cjs.map} +1 -1
- package/dist/next/{Pager-C7n5x44P.js → Pager-D11plHRn.js} +2 -3
- package/dist/next/{Pager-C7n5x44P.js.map → Pager-D11plHRn.js.map} +1 -1
- package/dist/next/Pager.cjs.js +1 -1
- package/dist/next/Pager.js +1 -1
- package/dist/next/{Stepper-em6Gl32O.js → Stepper-B2X72Iir.js} +2 -3
- package/dist/next/{Stepper-em6Gl32O.js.map → Stepper-B2X72Iir.js.map} +1 -1
- package/dist/next/{Stepper-CpgJBKz7.cjs → Stepper-fE7prDWu.cjs} +2 -3
- package/dist/next/{Stepper-CpgJBKz7.cjs.map → Stepper-fE7prDWu.cjs.map} +1 -1
- package/dist/next/Stepper.cjs.js +1 -1
- package/dist/next/Stepper.js +1 -1
- package/dist/next/{TagInput-DVmBv7Mn.cjs → TagInput-BycAVBEu.cjs} +3 -4
- package/dist/next/{TagInput-DVmBv7Mn.cjs.map → TagInput-BycAVBEu.cjs.map} +1 -1
- package/dist/next/{TagInput-8nVGDluu.js → TagInput-CabR-drk.js} +3 -4
- package/dist/next/{TagInput-8nVGDluu.js.map → TagInput-CabR-drk.js.map} +1 -1
- package/dist/next/TagInput.cjs.js +1 -1
- package/dist/next/TagInput.js +1 -1
- package/dist/next/{TextInput-CKM34-yu.js → TextInput-B4s9TMoa.js} +2 -3
- package/dist/next/{TextInput-CKM34-yu.js.map → TextInput-B4s9TMoa.js.map} +1 -1
- package/dist/next/{TextInput-BRl37zMW.cjs → TextInput-SqTFFVZ8.cjs} +2 -3
- package/dist/next/{TextInput-BRl37zMW.cjs.map → TextInput-SqTFFVZ8.cjs.map} +1 -1
- package/dist/next/TextInput.cjs.js +1 -1
- package/dist/next/TextInput.js +1 -1
- package/dist/next/index.cjs.js +22 -23
- package/dist/next/index.cjs.js.map +1 -1
- package/dist/next/index.js +21 -22
- package/dist/next/index.js.map +1 -1
- package/dist/tsconfig.build.tsbuildinfo +1 -1
- package/dist/types/components/Card/core/Card.d.ts.map +1 -1
- package/dist/types/components/Card/next/Card.d.ts.map +1 -1
- package/dist/types/components/FileUpload/next/FileUpload.d.ts.map +1 -1
- package/dist/types/components/Footer/next/Footer.d.ts.map +1 -1
- package/dist/types/components/MessagePopup/next/MessagePopup.d.ts.map +1 -1
- package/dist/types/components/NotificationCenter/core/NotificationCenter.d.ts.map +1 -1
- package/dist/types/components/NotificationCenter/next/NotificationCenter.d.ts.map +1 -1
- package/dist/types/components/Pager/core/Pager.d.ts.map +1 -1
- package/dist/types/components/Pager/next/Pager.d.ts.map +1 -1
- package/dist/types/components/TagInput/next/TagInput.d.ts.map +1 -1
- package/package.json +1 -1
- package/dist/core/Footer-60sTURxB.cjs.map +0 -1
- package/dist/core/Footer-Q_60pe6o.js.map +0 -1
- package/dist/next/Footer-Bdu_9H3p.js.map +0 -1
- package/dist/next/Footer-DJjzgwpc.cjs.map +0 -1
- package/dist/next/globals.css +0 -674
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MessagePopup-DLodDCIa.js","sources":["../../src/components/MessagePopup/MessagePopupBase.tsx","../../src/components/MessagePopup/next/MessagePopup.tsx"],"sourcesContent":["import React, {\r\n useEffect,\r\n useRef,\r\n useState,\r\n useId,\r\n KeyboardEvent,\r\n} from \"react\";\r\nimport ReactDOM from \"react-dom\";\r\nimport { CloseIcon } from \"../../Icons\";\r\nimport { BaseMessagePopupProps } from \"./MessagePopup.types\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport { capitalize } from \"../../utils/capitalize\";\r\nimport {\r\n getDefaultRounding,\r\n getDefaultShadow,\r\n} from \"../../config/boreal-style-config\";\r\n\r\nconst BaseMessagePopup: React.FC<BaseMessagePopupProps> = ({\r\n message,\r\n title,\r\n onClose,\r\n onConfirm,\r\n onCancel,\r\n controlsRounding = getDefaultRounding(),\r\n rounding = getDefaultRounding(),\r\n shadow = getDefaultShadow(),\r\n confirmText = \"Confirm\",\r\n cancelText = \"Cancel\",\r\n dialogRole = \"dialog\",\r\n \"aria-label\": ariaLabel,\r\n \"aria-labelledby\": ariaLabelledBy,\r\n \"aria-describedby\": ariaDescribedBy,\r\n \"aria-label-close-button\": ariaLabelCloseButton = \"Close popup\",\r\n \"aria-live\": ariaLive,\r\n className = \"\",\r\n \"data-testid\": testId = \"message-popup\",\r\n Button,\r\n IconButton,\r\n classMap,\r\n}) => {\r\n const [isMounted, setIsMounted] = useState(false);\r\n const [portalElement, setPortalElement] = useState<HTMLElement | null>(null);\r\n const dialogRef = useRef<HTMLDivElement>(null);\r\n const firstButtonRef = useRef<HTMLButtonElement>(null);\r\n const cancelButtonRef = useRef<HTMLButtonElement>(null);\r\n const closeBtnRef = useRef<HTMLButtonElement>(null);\r\n const openerRef = useRef<HTMLElement | null>(null);\r\n const focusablesRef = useRef<HTMLElement[]>([]);\r\n const messageId = useId();\r\n const titleId = useId();\r\n\r\n const internalLabelledById = title ? titleId : messageId;\r\n const resolvedAriaLabelledBy =\r\n ariaLabelledBy ?? (!ariaLabel ? internalLabelledById : undefined);\r\n const resolvedAriaDescribedBy = ariaDescribedBy ?? messageId;\r\n\r\n useEffect(() => {\r\n setIsMounted(true);\r\n openerRef.current = (document.activeElement as HTMLElement) ?? null;\r\n\r\n let portal = document.getElementById(\"popup-portal\");\r\n if (!portal) {\r\n portal = document.createElement(\"div\");\r\n portal.id = \"popup-portal\";\r\n document.body.appendChild(portal);\r\n }\r\n setPortalElement(portal);\r\n document.body.classList.add(\"no-scroll\");\r\n\r\n const roots = Array.from(document.body.children);\r\n const restored: Array<HTMLElement> = [];\r\n roots.forEach((el) => {\r\n if (el !== portal && !el.hasAttribute(\"aria-hidden\")) {\r\n el.setAttribute(\"aria-hidden\", \"true\");\r\n restored.push(el as HTMLElement);\r\n }\r\n });\r\n\r\n const handleEscape = (e: globalThis.KeyboardEvent) => {\r\n if (e.key === \"Escape\") onClose();\r\n };\r\n document.addEventListener(\"keydown\", handleEscape);\r\n\r\n return () => {\r\n document.body.classList.remove(\"no-scroll\");\r\n document.removeEventListener(\"keydown\", handleEscape);\r\n restored.forEach((el) => el.removeAttribute(\"aria-hidden\"));\r\n openerRef.current?.focus?.();\r\n };\r\n }, [onClose]);\r\n\r\n useEffect(() => {\r\n if (!dialogRef.current) return;\r\n\r\n focusablesRef.current = Array.from(\r\n dialogRef.current.querySelectorAll<HTMLElement>(\r\n 'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\r\n ),\r\n ).filter((el) => !el.hasAttribute(\"disabled\") && el.tabIndex !== -1);\r\n\r\n const target =\r\n firstButtonRef.current ||\r\n cancelButtonRef.current ||\r\n (closeBtnRef.current as HTMLElement | null) ||\r\n focusablesRef.current[0];\r\n\r\n target?.focus?.();\r\n }, [isMounted]);\r\n\r\n const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\r\n if (e.key !== \"Tab\") return;\r\n\r\n const list = focusablesRef.current;\r\n if (!list.length) return;\r\n\r\n const first = list[0];\r\n const last = list[list.length - 1];\r\n\r\n if (e.shiftKey && document.activeElement === first) {\r\n e.preventDefault();\r\n last.focus();\r\n } else if (!e.shiftKey && document.activeElement === last) {\r\n e.preventDefault();\r\n first.focus();\r\n }\r\n };\r\n\r\n if (!isMounted || !portalElement) return null;\r\n\r\n const wrapperClass = combineClassNames(\r\n classMap.wrapper,\r\n shadow && classMap[`shadow${capitalize(shadow)}`],\r\n rounding && classMap[`round${capitalize(rounding)}`],\r\n className,\r\n );\r\n\r\n return ReactDOM.createPortal(\r\n <div\r\n className={wrapperClass}\r\n onClick={onClose}\r\n role=\"presentation\"\r\n data-testid={testId}\r\n >\r\n <div\r\n className={classMap.content}\r\n onClick={(e) => e.stopPropagation()}\r\n role={dialogRole}\r\n aria-modal={true}\r\n aria-label={ariaLabel}\r\n aria-labelledby={resolvedAriaLabelledBy}\r\n aria-describedby={resolvedAriaDescribedBy}\r\n tabIndex={-1}\r\n ref={dialogRef}\r\n onKeyDown={handleKeyDown}\r\n data-testid={`${testId}-dialog`}\r\n >\r\n {title && (\r\n <div className={classMap.header} data-testid={`${testId}-header`}>\r\n <h2\r\n id={titleId}\r\n className={classMap.title}\r\n data-testid={`${testId}-title`}\r\n >\r\n {title}\r\n </h2>\r\n\r\n <IconButton\r\n ref={closeBtnRef}\r\n className={classMap.close}\r\n onClick={onClose}\r\n aria-label={ariaLabelCloseButton}\r\n icon={CloseIcon}\r\n state=\"error\"\r\n size=\"small\"\r\n type=\"button\"\r\n data-testid={`${testId}-close`}\r\n />\r\n </div>\r\n )}\r\n\r\n {!title && (\r\n <IconButton\r\n ref={closeBtnRef}\r\n className={classMap.close}\r\n onClick={onClose}\r\n aria-label={ariaLabelCloseButton}\r\n icon={CloseIcon}\r\n state=\"error\"\r\n size=\"small\"\r\n type=\"button\"\r\n data-testid={`${testId}-close`}\r\n />\r\n )}\r\n\r\n <div className={classMap.body} data-testid={`${testId}-body`}>\r\n <p\r\n id={messageId}\r\n className={classMap.message}\r\n aria-live={ariaLive}\r\n data-testid={`${testId}-message`}\r\n >\r\n {message}\r\n </p>\r\n\r\n <div className={classMap.actions} data-testid={`${testId}-actions`}>\r\n {onConfirm && (\r\n <Button\r\n className={classMap.confirm}\r\n state=\"success\"\r\n onClick={onConfirm}\r\n ref={firstButtonRef}\r\n rounding={controlsRounding}\r\n type=\"button\"\r\n data-testid={`${testId}-confirm`}\r\n >\r\n {confirmText}\r\n </Button>\r\n )}\r\n\r\n {onCancel && (\r\n <Button\r\n ref={cancelButtonRef}\r\n className={classMap.cancel}\r\n state=\"warning\"\r\n onClick={onCancel}\r\n type=\"button\"\r\n data-testid={`${testId}-cancel`}\r\n >\r\n {cancelText}\r\n </Button>\r\n )}\r\n </div>\r\n </div>\r\n </div>\r\n </div>,\r\n portalElement,\r\n );\r\n};\r\n\r\nBaseMessagePopup.displayName = \"BaseMessagePopup\";\r\nexport default BaseMessagePopup;\r\n","\"use client\";\r\n\r\nimport React from \"react\";\r\nimport BaseMessagePopUp from \"../MessagePopupBase\";\r\nimport { Button, IconButton } from \"../../../index.next\";\r\nimport styles from \"./MessagePopup.module.scss\";\r\nimport { MessagePopupProps } from \"../MessagePopup.types\";\r\n\r\nconst MessagePopup: React.FC<MessagePopupProps> = (props) => {\r\n return (\r\n <BaseMessagePopUp\r\n {...props}\r\n Button={Button}\r\n IconButton={IconButton}\r\n classMap={styles}\r\n />\r\n );\r\n};\r\nMessagePopup.displayName = \"MessagePopup\";\r\nexport default MessagePopup;\r\n"],"names":["message","title","Button","IconButton","BaseMessagePopUp"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"MessagePopup-BAvnVw84.js","sources":["../../src/components/MessagePopup/MessagePopupBase.tsx","../../src/components/MessagePopup/next/MessagePopup.tsx"],"sourcesContent":["import React, {\r\n useEffect,\r\n useRef,\r\n useState,\r\n useId,\r\n KeyboardEvent,\r\n} from \"react\";\r\nimport ReactDOM from \"react-dom\";\r\nimport { CloseIcon } from \"../../Icons\";\r\nimport { BaseMessagePopupProps } from \"./MessagePopup.types\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport { capitalize } from \"../../utils/capitalize\";\r\nimport {\r\n getDefaultRounding,\r\n getDefaultShadow,\r\n} from \"../../config/boreal-style-config\";\r\n\r\nconst BaseMessagePopup: React.FC<BaseMessagePopupProps> = ({\r\n message,\r\n title,\r\n onClose,\r\n onConfirm,\r\n onCancel,\r\n controlsRounding = getDefaultRounding(),\r\n rounding = getDefaultRounding(),\r\n shadow = getDefaultShadow(),\r\n confirmText = \"Confirm\",\r\n cancelText = \"Cancel\",\r\n dialogRole = \"dialog\",\r\n \"aria-label\": ariaLabel,\r\n \"aria-labelledby\": ariaLabelledBy,\r\n \"aria-describedby\": ariaDescribedBy,\r\n \"aria-label-close-button\": ariaLabelCloseButton = \"Close popup\",\r\n \"aria-live\": ariaLive,\r\n className = \"\",\r\n \"data-testid\": testId = \"message-popup\",\r\n Button,\r\n IconButton,\r\n classMap,\r\n}) => {\r\n const [isMounted, setIsMounted] = useState(false);\r\n const [portalElement, setPortalElement] = useState<HTMLElement | null>(null);\r\n const dialogRef = useRef<HTMLDivElement>(null);\r\n const firstButtonRef = useRef<HTMLButtonElement>(null);\r\n const cancelButtonRef = useRef<HTMLButtonElement>(null);\r\n const closeBtnRef = useRef<HTMLButtonElement>(null);\r\n const openerRef = useRef<HTMLElement | null>(null);\r\n const focusablesRef = useRef<HTMLElement[]>([]);\r\n const messageId = useId();\r\n const titleId = useId();\r\n\r\n const internalLabelledById = title ? titleId : messageId;\r\n const resolvedAriaLabelledBy =\r\n ariaLabelledBy ?? (!ariaLabel ? internalLabelledById : undefined);\r\n const resolvedAriaDescribedBy = ariaDescribedBy ?? messageId;\r\n\r\n useEffect(() => {\r\n setIsMounted(true);\r\n openerRef.current = (document.activeElement as HTMLElement) ?? null;\r\n\r\n let portal = document.getElementById(\"popup-portal\");\r\n if (!portal) {\r\n portal = document.createElement(\"div\");\r\n portal.id = \"popup-portal\";\r\n document.body.appendChild(portal);\r\n }\r\n setPortalElement(portal);\r\n document.body.classList.add(\"no-scroll\");\r\n\r\n const roots = Array.from(document.body.children);\r\n const restored: Array<HTMLElement> = [];\r\n roots.forEach((el) => {\r\n if (el !== portal && !el.hasAttribute(\"aria-hidden\")) {\r\n el.setAttribute(\"aria-hidden\", \"true\");\r\n restored.push(el as HTMLElement);\r\n }\r\n });\r\n\r\n const handleEscape = (e: globalThis.KeyboardEvent) => {\r\n if (e.key === \"Escape\") onClose();\r\n };\r\n document.addEventListener(\"keydown\", handleEscape);\r\n\r\n return () => {\r\n document.body.classList.remove(\"no-scroll\");\r\n document.removeEventListener(\"keydown\", handleEscape);\r\n restored.forEach((el) => el.removeAttribute(\"aria-hidden\"));\r\n openerRef.current?.focus?.();\r\n };\r\n }, [onClose]);\r\n\r\n useEffect(() => {\r\n if (!dialogRef.current) return;\r\n\r\n focusablesRef.current = Array.from(\r\n dialogRef.current.querySelectorAll<HTMLElement>(\r\n 'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\r\n ),\r\n ).filter((el) => !el.hasAttribute(\"disabled\") && el.tabIndex !== -1);\r\n\r\n const target =\r\n firstButtonRef.current ||\r\n cancelButtonRef.current ||\r\n (closeBtnRef.current as HTMLElement | null) ||\r\n focusablesRef.current[0];\r\n\r\n target?.focus?.();\r\n }, [isMounted]);\r\n\r\n const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\r\n if (e.key !== \"Tab\") return;\r\n\r\n const list = focusablesRef.current;\r\n if (!list.length) return;\r\n\r\n const first = list[0];\r\n const last = list[list.length - 1];\r\n\r\n if (e.shiftKey && document.activeElement === first) {\r\n e.preventDefault();\r\n last.focus();\r\n } else if (!e.shiftKey && document.activeElement === last) {\r\n e.preventDefault();\r\n first.focus();\r\n }\r\n };\r\n\r\n if (!isMounted || !portalElement) return null;\r\n\r\n const wrapperClass = combineClassNames(\r\n classMap.wrapper,\r\n shadow && classMap[`shadow${capitalize(shadow)}`],\r\n rounding && classMap[`round${capitalize(rounding)}`],\r\n className,\r\n );\r\n\r\n return ReactDOM.createPortal(\r\n <div\r\n className={wrapperClass}\r\n onClick={onClose}\r\n role=\"presentation\"\r\n data-testid={testId}\r\n >\r\n <div\r\n className={classMap.content}\r\n onClick={(e) => e.stopPropagation()}\r\n role={dialogRole}\r\n aria-modal={true}\r\n aria-label={ariaLabel}\r\n aria-labelledby={resolvedAriaLabelledBy}\r\n aria-describedby={resolvedAriaDescribedBy}\r\n tabIndex={-1}\r\n ref={dialogRef}\r\n onKeyDown={handleKeyDown}\r\n data-testid={`${testId}-dialog`}\r\n >\r\n {title && (\r\n <div className={classMap.header} data-testid={`${testId}-header`}>\r\n <h2\r\n id={titleId}\r\n className={classMap.title}\r\n data-testid={`${testId}-title`}\r\n >\r\n {title}\r\n </h2>\r\n\r\n <IconButton\r\n ref={closeBtnRef}\r\n className={classMap.close}\r\n onClick={onClose}\r\n aria-label={ariaLabelCloseButton}\r\n icon={CloseIcon}\r\n state=\"error\"\r\n size=\"small\"\r\n type=\"button\"\r\n data-testid={`${testId}-close`}\r\n />\r\n </div>\r\n )}\r\n\r\n {!title && (\r\n <IconButton\r\n ref={closeBtnRef}\r\n className={classMap.close}\r\n onClick={onClose}\r\n aria-label={ariaLabelCloseButton}\r\n icon={CloseIcon}\r\n state=\"error\"\r\n size=\"small\"\r\n type=\"button\"\r\n data-testid={`${testId}-close`}\r\n />\r\n )}\r\n\r\n <div className={classMap.body} data-testid={`${testId}-body`}>\r\n <p\r\n id={messageId}\r\n className={classMap.message}\r\n aria-live={ariaLive}\r\n data-testid={`${testId}-message`}\r\n >\r\n {message}\r\n </p>\r\n\r\n <div className={classMap.actions} data-testid={`${testId}-actions`}>\r\n {onConfirm && (\r\n <Button\r\n className={classMap.confirm}\r\n state=\"success\"\r\n onClick={onConfirm}\r\n ref={firstButtonRef}\r\n rounding={controlsRounding}\r\n type=\"button\"\r\n data-testid={`${testId}-confirm`}\r\n >\r\n {confirmText}\r\n </Button>\r\n )}\r\n\r\n {onCancel && (\r\n <Button\r\n ref={cancelButtonRef}\r\n className={classMap.cancel}\r\n state=\"warning\"\r\n onClick={onCancel}\r\n type=\"button\"\r\n data-testid={`${testId}-cancel`}\r\n >\r\n {cancelText}\r\n </Button>\r\n )}\r\n </div>\r\n </div>\r\n </div>\r\n </div>,\r\n portalElement,\r\n );\r\n};\r\n\r\nBaseMessagePopup.displayName = \"BaseMessagePopup\";\r\nexport default BaseMessagePopup;\r\n","\"use client\";\r\n\r\nimport React from \"react\";\r\nimport BaseMessagePopUp from \"../MessagePopupBase\";\r\nimport Button from \"../../Button/next/Button\";\r\nimport IconButton from \"../../IconButton/next/IconButton\";\r\nimport styles from \"./MessagePopup.module.scss\";\r\nimport { MessagePopupProps } from \"../MessagePopup.types\";\r\n\r\nconst MessagePopup: React.FC<MessagePopupProps> = (props) => {\r\n return (\r\n <BaseMessagePopUp\r\n {...props}\r\n Button={Button}\r\n IconButton={IconButton}\r\n classMap={styles}\r\n />\r\n );\r\n};\r\nMessagePopup.displayName = \"MessagePopup\";\r\nexport default MessagePopup;\r\n"],"names":["message","title","Button","IconButton","BaseMessagePopUp"],"mappings":"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"}
|
|
@@ -1,12 +1,11 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
require('./
|
|
2
|
+
require('./MessagePopup.css');const require$$2 = require("react/jsx-runtime");
|
|
3
3
|
const React = require("react");
|
|
4
4
|
const ReactDOM = require("react-dom");
|
|
5
5
|
const CloseIcon = require("./CloseIcon-7hy4qJ9o.cjs");
|
|
6
6
|
const classNames = require("./classNames-BcWMx052.cjs");
|
|
7
7
|
const capitalize = require("./capitalize-DoV-nOmN.cjs");
|
|
8
8
|
const borealStyleConfig = require("./boreal-style-config-C1UIwOFN.cjs");
|
|
9
|
-
;/* empty css */
|
|
10
9
|
const Button = require("./Button-CmH6HYjc.cjs");
|
|
11
10
|
const IconButton = require("./IconButton-C66aQhKe.cjs");
|
|
12
11
|
const BaseMessagePopup = ({
|
|
@@ -271,4 +270,4 @@ const MessagePopup = (props) => {
|
|
|
271
270
|
};
|
|
272
271
|
MessagePopup.displayName = "MessagePopup";
|
|
273
272
|
exports.MessagePopup = MessagePopup;
|
|
274
|
-
//# sourceMappingURL=MessagePopup-
|
|
273
|
+
//# sourceMappingURL=MessagePopup-CixIzgoc.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MessagePopup-CizqwWmH.cjs","sources":["../../src/components/MessagePopup/MessagePopupBase.tsx","../../src/components/MessagePopup/next/MessagePopup.tsx"],"sourcesContent":["import React, {\r\n useEffect,\r\n useRef,\r\n useState,\r\n useId,\r\n KeyboardEvent,\r\n} from \"react\";\r\nimport ReactDOM from \"react-dom\";\r\nimport { CloseIcon } from \"../../Icons\";\r\nimport { BaseMessagePopupProps } from \"./MessagePopup.types\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport { capitalize } from \"../../utils/capitalize\";\r\nimport {\r\n getDefaultRounding,\r\n getDefaultShadow,\r\n} from \"../../config/boreal-style-config\";\r\n\r\nconst BaseMessagePopup: React.FC<BaseMessagePopupProps> = ({\r\n message,\r\n title,\r\n onClose,\r\n onConfirm,\r\n onCancel,\r\n controlsRounding = getDefaultRounding(),\r\n rounding = getDefaultRounding(),\r\n shadow = getDefaultShadow(),\r\n confirmText = \"Confirm\",\r\n cancelText = \"Cancel\",\r\n dialogRole = \"dialog\",\r\n \"aria-label\": ariaLabel,\r\n \"aria-labelledby\": ariaLabelledBy,\r\n \"aria-describedby\": ariaDescribedBy,\r\n \"aria-label-close-button\": ariaLabelCloseButton = \"Close popup\",\r\n \"aria-live\": ariaLive,\r\n className = \"\",\r\n \"data-testid\": testId = \"message-popup\",\r\n Button,\r\n IconButton,\r\n classMap,\r\n}) => {\r\n const [isMounted, setIsMounted] = useState(false);\r\n const [portalElement, setPortalElement] = useState<HTMLElement | null>(null);\r\n const dialogRef = useRef<HTMLDivElement>(null);\r\n const firstButtonRef = useRef<HTMLButtonElement>(null);\r\n const cancelButtonRef = useRef<HTMLButtonElement>(null);\r\n const closeBtnRef = useRef<HTMLButtonElement>(null);\r\n const openerRef = useRef<HTMLElement | null>(null);\r\n const focusablesRef = useRef<HTMLElement[]>([]);\r\n const messageId = useId();\r\n const titleId = useId();\r\n\r\n const internalLabelledById = title ? titleId : messageId;\r\n const resolvedAriaLabelledBy =\r\n ariaLabelledBy ?? (!ariaLabel ? internalLabelledById : undefined);\r\n const resolvedAriaDescribedBy = ariaDescribedBy ?? messageId;\r\n\r\n useEffect(() => {\r\n setIsMounted(true);\r\n openerRef.current = (document.activeElement as HTMLElement) ?? null;\r\n\r\n let portal = document.getElementById(\"popup-portal\");\r\n if (!portal) {\r\n portal = document.createElement(\"div\");\r\n portal.id = \"popup-portal\";\r\n document.body.appendChild(portal);\r\n }\r\n setPortalElement(portal);\r\n document.body.classList.add(\"no-scroll\");\r\n\r\n const roots = Array.from(document.body.children);\r\n const restored: Array<HTMLElement> = [];\r\n roots.forEach((el) => {\r\n if (el !== portal && !el.hasAttribute(\"aria-hidden\")) {\r\n el.setAttribute(\"aria-hidden\", \"true\");\r\n restored.push(el as HTMLElement);\r\n }\r\n });\r\n\r\n const handleEscape = (e: globalThis.KeyboardEvent) => {\r\n if (e.key === \"Escape\") onClose();\r\n };\r\n document.addEventListener(\"keydown\", handleEscape);\r\n\r\n return () => {\r\n document.body.classList.remove(\"no-scroll\");\r\n document.removeEventListener(\"keydown\", handleEscape);\r\n restored.forEach((el) => el.removeAttribute(\"aria-hidden\"));\r\n openerRef.current?.focus?.();\r\n };\r\n }, [onClose]);\r\n\r\n useEffect(() => {\r\n if (!dialogRef.current) return;\r\n\r\n focusablesRef.current = Array.from(\r\n dialogRef.current.querySelectorAll<HTMLElement>(\r\n 'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\r\n ),\r\n ).filter((el) => !el.hasAttribute(\"disabled\") && el.tabIndex !== -1);\r\n\r\n const target =\r\n firstButtonRef.current ||\r\n cancelButtonRef.current ||\r\n (closeBtnRef.current as HTMLElement | null) ||\r\n focusablesRef.current[0];\r\n\r\n target?.focus?.();\r\n }, [isMounted]);\r\n\r\n const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\r\n if (e.key !== \"Tab\") return;\r\n\r\n const list = focusablesRef.current;\r\n if (!list.length) return;\r\n\r\n const first = list[0];\r\n const last = list[list.length - 1];\r\n\r\n if (e.shiftKey && document.activeElement === first) {\r\n e.preventDefault();\r\n last.focus();\r\n } else if (!e.shiftKey && document.activeElement === last) {\r\n e.preventDefault();\r\n first.focus();\r\n }\r\n };\r\n\r\n if (!isMounted || !portalElement) return null;\r\n\r\n const wrapperClass = combineClassNames(\r\n classMap.wrapper,\r\n shadow && classMap[`shadow${capitalize(shadow)}`],\r\n rounding && classMap[`round${capitalize(rounding)}`],\r\n className,\r\n );\r\n\r\n return ReactDOM.createPortal(\r\n <div\r\n className={wrapperClass}\r\n onClick={onClose}\r\n role=\"presentation\"\r\n data-testid={testId}\r\n >\r\n <div\r\n className={classMap.content}\r\n onClick={(e) => e.stopPropagation()}\r\n role={dialogRole}\r\n aria-modal={true}\r\n aria-label={ariaLabel}\r\n aria-labelledby={resolvedAriaLabelledBy}\r\n aria-describedby={resolvedAriaDescribedBy}\r\n tabIndex={-1}\r\n ref={dialogRef}\r\n onKeyDown={handleKeyDown}\r\n data-testid={`${testId}-dialog`}\r\n >\r\n {title && (\r\n <div className={classMap.header} data-testid={`${testId}-header`}>\r\n <h2\r\n id={titleId}\r\n className={classMap.title}\r\n data-testid={`${testId}-title`}\r\n >\r\n {title}\r\n </h2>\r\n\r\n <IconButton\r\n ref={closeBtnRef}\r\n className={classMap.close}\r\n onClick={onClose}\r\n aria-label={ariaLabelCloseButton}\r\n icon={CloseIcon}\r\n state=\"error\"\r\n size=\"small\"\r\n type=\"button\"\r\n data-testid={`${testId}-close`}\r\n />\r\n </div>\r\n )}\r\n\r\n {!title && (\r\n <IconButton\r\n ref={closeBtnRef}\r\n className={classMap.close}\r\n onClick={onClose}\r\n aria-label={ariaLabelCloseButton}\r\n icon={CloseIcon}\r\n state=\"error\"\r\n size=\"small\"\r\n type=\"button\"\r\n data-testid={`${testId}-close`}\r\n />\r\n )}\r\n\r\n <div className={classMap.body} data-testid={`${testId}-body`}>\r\n <p\r\n id={messageId}\r\n className={classMap.message}\r\n aria-live={ariaLive}\r\n data-testid={`${testId}-message`}\r\n >\r\n {message}\r\n </p>\r\n\r\n <div className={classMap.actions} data-testid={`${testId}-actions`}>\r\n {onConfirm && (\r\n <Button\r\n className={classMap.confirm}\r\n state=\"success\"\r\n onClick={onConfirm}\r\n ref={firstButtonRef}\r\n rounding={controlsRounding}\r\n type=\"button\"\r\n data-testid={`${testId}-confirm`}\r\n >\r\n {confirmText}\r\n </Button>\r\n )}\r\n\r\n {onCancel && (\r\n <Button\r\n ref={cancelButtonRef}\r\n className={classMap.cancel}\r\n state=\"warning\"\r\n onClick={onCancel}\r\n type=\"button\"\r\n data-testid={`${testId}-cancel`}\r\n >\r\n {cancelText}\r\n </Button>\r\n )}\r\n </div>\r\n </div>\r\n </div>\r\n </div>,\r\n portalElement,\r\n );\r\n};\r\n\r\nBaseMessagePopup.displayName = \"BaseMessagePopup\";\r\nexport default BaseMessagePopup;\r\n","\"use client\";\r\n\r\nimport React from \"react\";\r\nimport BaseMessagePopUp from \"../MessagePopupBase\";\r\nimport { Button, IconButton } from \"../../../index.next\";\r\nimport styles from \"./MessagePopup.module.scss\";\r\nimport { MessagePopupProps } from \"../MessagePopup.types\";\r\n\r\nconst MessagePopup: React.FC<MessagePopupProps> = (props) => {\r\n return (\r\n <BaseMessagePopUp\r\n {...props}\r\n Button={Button}\r\n IconButton={IconButton}\r\n classMap={styles}\r\n />\r\n );\r\n};\r\nMessagePopup.displayName = \"MessagePopup\";\r\nexport default MessagePopup;\r\n"],"names":["message","title","getDefaultRounding","getDefaultShadow","Button","IconButton","useState","useRef","useId","useEffect","combineClassNames","capitalize","jsx","jsxs","CloseIcon","BaseMessagePopUp"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"MessagePopup-CixIzgoc.cjs","sources":["../../src/components/MessagePopup/MessagePopupBase.tsx","../../src/components/MessagePopup/next/MessagePopup.tsx"],"sourcesContent":["import React, {\r\n useEffect,\r\n useRef,\r\n useState,\r\n useId,\r\n KeyboardEvent,\r\n} from \"react\";\r\nimport ReactDOM from \"react-dom\";\r\nimport { CloseIcon } from \"../../Icons\";\r\nimport { BaseMessagePopupProps } from \"./MessagePopup.types\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport { capitalize } from \"../../utils/capitalize\";\r\nimport {\r\n getDefaultRounding,\r\n getDefaultShadow,\r\n} from \"../../config/boreal-style-config\";\r\n\r\nconst BaseMessagePopup: React.FC<BaseMessagePopupProps> = ({\r\n message,\r\n title,\r\n onClose,\r\n onConfirm,\r\n onCancel,\r\n controlsRounding = getDefaultRounding(),\r\n rounding = getDefaultRounding(),\r\n shadow = getDefaultShadow(),\r\n confirmText = \"Confirm\",\r\n cancelText = \"Cancel\",\r\n dialogRole = \"dialog\",\r\n \"aria-label\": ariaLabel,\r\n \"aria-labelledby\": ariaLabelledBy,\r\n \"aria-describedby\": ariaDescribedBy,\r\n \"aria-label-close-button\": ariaLabelCloseButton = \"Close popup\",\r\n \"aria-live\": ariaLive,\r\n className = \"\",\r\n \"data-testid\": testId = \"message-popup\",\r\n Button,\r\n IconButton,\r\n classMap,\r\n}) => {\r\n const [isMounted, setIsMounted] = useState(false);\r\n const [portalElement, setPortalElement] = useState<HTMLElement | null>(null);\r\n const dialogRef = useRef<HTMLDivElement>(null);\r\n const firstButtonRef = useRef<HTMLButtonElement>(null);\r\n const cancelButtonRef = useRef<HTMLButtonElement>(null);\r\n const closeBtnRef = useRef<HTMLButtonElement>(null);\r\n const openerRef = useRef<HTMLElement | null>(null);\r\n const focusablesRef = useRef<HTMLElement[]>([]);\r\n const messageId = useId();\r\n const titleId = useId();\r\n\r\n const internalLabelledById = title ? titleId : messageId;\r\n const resolvedAriaLabelledBy =\r\n ariaLabelledBy ?? (!ariaLabel ? internalLabelledById : undefined);\r\n const resolvedAriaDescribedBy = ariaDescribedBy ?? messageId;\r\n\r\n useEffect(() => {\r\n setIsMounted(true);\r\n openerRef.current = (document.activeElement as HTMLElement) ?? null;\r\n\r\n let portal = document.getElementById(\"popup-portal\");\r\n if (!portal) {\r\n portal = document.createElement(\"div\");\r\n portal.id = \"popup-portal\";\r\n document.body.appendChild(portal);\r\n }\r\n setPortalElement(portal);\r\n document.body.classList.add(\"no-scroll\");\r\n\r\n const roots = Array.from(document.body.children);\r\n const restored: Array<HTMLElement> = [];\r\n roots.forEach((el) => {\r\n if (el !== portal && !el.hasAttribute(\"aria-hidden\")) {\r\n el.setAttribute(\"aria-hidden\", \"true\");\r\n restored.push(el as HTMLElement);\r\n }\r\n });\r\n\r\n const handleEscape = (e: globalThis.KeyboardEvent) => {\r\n if (e.key === \"Escape\") onClose();\r\n };\r\n document.addEventListener(\"keydown\", handleEscape);\r\n\r\n return () => {\r\n document.body.classList.remove(\"no-scroll\");\r\n document.removeEventListener(\"keydown\", handleEscape);\r\n restored.forEach((el) => el.removeAttribute(\"aria-hidden\"));\r\n openerRef.current?.focus?.();\r\n };\r\n }, [onClose]);\r\n\r\n useEffect(() => {\r\n if (!dialogRef.current) return;\r\n\r\n focusablesRef.current = Array.from(\r\n dialogRef.current.querySelectorAll<HTMLElement>(\r\n 'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\r\n ),\r\n ).filter((el) => !el.hasAttribute(\"disabled\") && el.tabIndex !== -1);\r\n\r\n const target =\r\n firstButtonRef.current ||\r\n cancelButtonRef.current ||\r\n (closeBtnRef.current as HTMLElement | null) ||\r\n focusablesRef.current[0];\r\n\r\n target?.focus?.();\r\n }, [isMounted]);\r\n\r\n const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\r\n if (e.key !== \"Tab\") return;\r\n\r\n const list = focusablesRef.current;\r\n if (!list.length) return;\r\n\r\n const first = list[0];\r\n const last = list[list.length - 1];\r\n\r\n if (e.shiftKey && document.activeElement === first) {\r\n e.preventDefault();\r\n last.focus();\r\n } else if (!e.shiftKey && document.activeElement === last) {\r\n e.preventDefault();\r\n first.focus();\r\n }\r\n };\r\n\r\n if (!isMounted || !portalElement) return null;\r\n\r\n const wrapperClass = combineClassNames(\r\n classMap.wrapper,\r\n shadow && classMap[`shadow${capitalize(shadow)}`],\r\n rounding && classMap[`round${capitalize(rounding)}`],\r\n className,\r\n );\r\n\r\n return ReactDOM.createPortal(\r\n <div\r\n className={wrapperClass}\r\n onClick={onClose}\r\n role=\"presentation\"\r\n data-testid={testId}\r\n >\r\n <div\r\n className={classMap.content}\r\n onClick={(e) => e.stopPropagation()}\r\n role={dialogRole}\r\n aria-modal={true}\r\n aria-label={ariaLabel}\r\n aria-labelledby={resolvedAriaLabelledBy}\r\n aria-describedby={resolvedAriaDescribedBy}\r\n tabIndex={-1}\r\n ref={dialogRef}\r\n onKeyDown={handleKeyDown}\r\n data-testid={`${testId}-dialog`}\r\n >\r\n {title && (\r\n <div className={classMap.header} data-testid={`${testId}-header`}>\r\n <h2\r\n id={titleId}\r\n className={classMap.title}\r\n data-testid={`${testId}-title`}\r\n >\r\n {title}\r\n </h2>\r\n\r\n <IconButton\r\n ref={closeBtnRef}\r\n className={classMap.close}\r\n onClick={onClose}\r\n aria-label={ariaLabelCloseButton}\r\n icon={CloseIcon}\r\n state=\"error\"\r\n size=\"small\"\r\n type=\"button\"\r\n data-testid={`${testId}-close`}\r\n />\r\n </div>\r\n )}\r\n\r\n {!title && (\r\n <IconButton\r\n ref={closeBtnRef}\r\n className={classMap.close}\r\n onClick={onClose}\r\n aria-label={ariaLabelCloseButton}\r\n icon={CloseIcon}\r\n state=\"error\"\r\n size=\"small\"\r\n type=\"button\"\r\n data-testid={`${testId}-close`}\r\n />\r\n )}\r\n\r\n <div className={classMap.body} data-testid={`${testId}-body`}>\r\n <p\r\n id={messageId}\r\n className={classMap.message}\r\n aria-live={ariaLive}\r\n data-testid={`${testId}-message`}\r\n >\r\n {message}\r\n </p>\r\n\r\n <div className={classMap.actions} data-testid={`${testId}-actions`}>\r\n {onConfirm && (\r\n <Button\r\n className={classMap.confirm}\r\n state=\"success\"\r\n onClick={onConfirm}\r\n ref={firstButtonRef}\r\n rounding={controlsRounding}\r\n type=\"button\"\r\n data-testid={`${testId}-confirm`}\r\n >\r\n {confirmText}\r\n </Button>\r\n )}\r\n\r\n {onCancel && (\r\n <Button\r\n ref={cancelButtonRef}\r\n className={classMap.cancel}\r\n state=\"warning\"\r\n onClick={onCancel}\r\n type=\"button\"\r\n data-testid={`${testId}-cancel`}\r\n >\r\n {cancelText}\r\n </Button>\r\n )}\r\n </div>\r\n </div>\r\n </div>\r\n </div>,\r\n portalElement,\r\n );\r\n};\r\n\r\nBaseMessagePopup.displayName = \"BaseMessagePopup\";\r\nexport default BaseMessagePopup;\r\n","\"use client\";\r\n\r\nimport React from \"react\";\r\nimport BaseMessagePopUp from \"../MessagePopupBase\";\r\nimport Button from \"../../Button/next/Button\";\r\nimport IconButton from \"../../IconButton/next/IconButton\";\r\nimport styles from \"./MessagePopup.module.scss\";\r\nimport { MessagePopupProps } from \"../MessagePopup.types\";\r\n\r\nconst MessagePopup: React.FC<MessagePopupProps> = (props) => {\r\n return (\r\n <BaseMessagePopUp\r\n {...props}\r\n Button={Button}\r\n IconButton={IconButton}\r\n classMap={styles}\r\n />\r\n );\r\n};\r\nMessagePopup.displayName = \"MessagePopup\";\r\nexport default MessagePopup;\r\n"],"names":["message","title","getDefaultRounding","getDefaultShadow","Button","IconButton","useState","useRef","useId","useEffect","combineClassNames","capitalize","jsx","jsxs","CloseIcon","BaseMessagePopUp"],"mappings":"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"}
|
|
@@ -5,9 +5,8 @@ import { C as CloseIcon } from "./CloseIcon-C3eQm4EK.js";
|
|
|
5
5
|
import { c as combineClassNames } from "./classNames-AS8QjFq7.js";
|
|
6
6
|
import { c as capitalize } from "./capitalize-C0TSQSPh.js";
|
|
7
7
|
import { a as getDefaultRounding, b as getDefaultShadow } from "./boreal-style-config-DsaRlxmw.js";
|
|
8
|
-
import './globals.css';import './Modal.css';/* empty css */
|
|
9
8
|
import { I as IconButton } from "./IconButton-0JJ1aiqr.js";
|
|
10
|
-
const BaseModal = ({
|
|
9
|
+
import './Modal.css';const BaseModal = ({
|
|
11
10
|
className = "",
|
|
12
11
|
children,
|
|
13
12
|
title: title2 = "Modal Dialog",
|
|
@@ -256,4 +255,4 @@ Modal.displayName = "Modal";
|
|
|
256
255
|
export {
|
|
257
256
|
Modal as M
|
|
258
257
|
};
|
|
259
|
-
//# sourceMappingURL=Modal-
|
|
258
|
+
//# sourceMappingURL=Modal-5Reb9Rx-.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal-BajWiIo7.js","sources":["../../src/components/Modal/ModalBase.tsx","../../src/components/Modal/next/Modal.tsx"],"sourcesContent":["import React, {\r\n useEffect,\r\n useRef,\r\n useState,\r\n useId,\r\n KeyboardEvent,\r\n useCallback,\r\n} from \"react\";\r\nimport ReactDOM from \"react-dom\";\r\nimport { CloseIcon } from \"../../Icons\";\r\nimport { BaseModalProps } from \"./Modal.types\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport { capitalize } from \"../../utils/capitalize\";\r\nimport {\r\n getDefaultRounding,\r\n getDefaultShadow,\r\n} from \"../../config/boreal-style-config\";\r\n\r\nconst BaseModal: React.FC<BaseModalProps> = ({\r\n className = \"\",\r\n children,\r\n title = \"Modal Dialog\",\r\n header,\r\n footer,\r\n rounding = getDefaultRounding(),\r\n shadow = getDefaultShadow(),\r\n open,\r\n onClose,\r\n \"aria-label\": ariaLabel,\r\n \"aria-labelledby\": ariaLabelledBy,\r\n \"aria-describedby\": ariaDescribedBy,\r\n closeButtonAriaLabel = \"Close modal\",\r\n \"data-testid\": testId = \"modal\",\r\n IconButton,\r\n classMap,\r\n portalId = \"widget-portal\",\r\n}) => {\r\n const [isVisible, setIsVisible] = useState(false);\r\n const [portalElement, setPortalElement] = useState<HTMLElement | null>(null);\r\n const [isRendered, setIsRendered] = useState(false);\r\n\r\n const isControlled = typeof open === \"boolean\";\r\n const shouldBeOpen = isControlled ? open : true;\r\n\r\n const overlayRef = useRef<HTMLDivElement>(null);\r\n const dialogRef = useRef<HTMLDivElement>(null);\r\n const closeBtnRef = useRef<HTMLButtonElement>(null);\r\n const openerRef = useRef<HTMLElement | null>(null);\r\n const focusablesRef = useRef<HTMLElement[]>([]);\r\n\r\n const uid = useId();\r\n const fallbackLabelId = `${uid}-label`;\r\n\r\n const handleClose = useCallback(() => {\r\n setIsVisible(false);\r\n window.setTimeout(() => onClose(), 200);\r\n }, [onClose]);\r\n\r\n useEffect(() => {\r\n if (!isRendered) return;\r\n\r\n openerRef.current = (document.activeElement as HTMLElement) ?? null;\r\n\r\n let portal = document.getElementById(portalId);\r\n if (!portal) {\r\n portal = document.createElement(\"div\");\r\n portal.id = portalId;\r\n document.body.appendChild(portal);\r\n }\r\n setPortalElement(portal);\r\n document.body.classList.add(\"noScroll\");\r\n\r\n const siblings = Array.from(document.body.children) as HTMLElement[];\r\n const hidden: HTMLElement[] = [];\r\n\r\n siblings.forEach((el) => {\r\n if (el !== portal && !el.hasAttribute(\"aria-hidden\")) {\r\n el.setAttribute(\"aria-hidden\", \"true\");\r\n hidden.push(el);\r\n }\r\n });\r\n\r\n const handleEsc = (e: globalThis.KeyboardEvent) => {\r\n if (e.key === \"Escape\") handleClose();\r\n };\r\n\r\n document.addEventListener(\"keydown\", handleEsc);\r\n\r\n return () => {\r\n document.body.classList.remove(\"noScroll\");\r\n document.removeEventListener(\"keydown\", handleEsc);\r\n hidden.forEach((el) => el.removeAttribute(\"aria-hidden\"));\r\n openerRef.current?.focus?.();\r\n setPortalElement(null);\r\n };\r\n }, [isRendered, portalId, handleClose]);\r\n\r\n useEffect(() => {\r\n if (!isRendered) return;\r\n\r\n requestAnimationFrame(() => {\r\n setIsVisible(true);\r\n\r\n if (dialogRef.current) {\r\n focusablesRef.current = Array.from(\r\n dialogRef.current.querySelectorAll<HTMLElement>(\r\n 'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\r\n ),\r\n ).filter((el) => !el.hasAttribute(\"disabled\") && el.tabIndex !== -1);\r\n }\r\n\r\n (\r\n focusablesRef.current[0] ??\r\n closeBtnRef.current ??\r\n dialogRef.current\r\n )?.focus?.();\r\n });\r\n }, [isRendered]);\r\n\r\n useEffect(() => {\r\n if (shouldBeOpen) {\r\n setIsRendered(true);\r\n } else if (isControlled) {\r\n setIsVisible(false);\r\n const t = window.setTimeout(() => setIsRendered(false), 200);\r\n return () => window.clearTimeout(t);\r\n } else {\r\n setIsRendered(false);\r\n }\r\n }, [shouldBeOpen, isControlled]);\r\n\r\n const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\r\n if (e.key !== \"Tab\") return;\r\n\r\n const list = focusablesRef.current;\r\n if (!list.length) return;\r\n\r\n const first = list[0];\r\n const last = list[list.length - 1];\r\n\r\n if (e.shiftKey && document.activeElement === first) {\r\n e.preventDefault();\r\n last.focus();\r\n } else if (!e.shiftKey && document.activeElement === last) {\r\n e.preventDefault();\r\n first.focus();\r\n }\r\n };\r\n\r\n if (!isRendered || !portalElement) return null;\r\n\r\n const contentClassName = combineClassNames(\r\n classMap.content,\r\n className,\r\n shadow && classMap[`shadow${capitalize(shadow)}`],\r\n rounding && classMap[`round${capitalize(rounding)}`],\r\n );\r\n\r\n const hasHeader = Boolean(header) || Boolean(title);\r\n const hasFooter = Boolean(footer);\r\n\r\n const resolvedAriaLabelledBy =\r\n ariaLabelledBy ?? (!ariaLabel && hasHeader ? fallbackLabelId : undefined);\r\n\r\n const shouldRenderFallbackLabel = resolvedAriaLabelledBy === fallbackLabelId;\r\n\r\n return ReactDOM.createPortal(\r\n <div\r\n ref={overlayRef}\r\n className={combineClassNames(\r\n classMap.overlay,\r\n isVisible ? classMap.visible : classMap.hidden,\r\n )}\r\n onClick={handleClose}\r\n role=\"presentation\"\r\n data-testid={testId}\r\n >\r\n <div\r\n ref={dialogRef}\r\n className={contentClassName}\r\n onClick={(e) => e.stopPropagation()}\r\n role=\"dialog\"\r\n aria-modal=\"true\"\r\n aria-label={ariaLabel}\r\n aria-labelledby={resolvedAriaLabelledBy}\r\n aria-describedby={ariaDescribedBy}\r\n tabIndex={-1}\r\n onKeyDown={handleKeyDown}\r\n data-testid={`${testId}-content`}\r\n >\r\n {shouldRenderFallbackLabel && (\r\n <h2 id={fallbackLabelId} className={classMap.srOnly ?? \"sr_only\"}>\r\n {typeof title === \"string\" ? title : \"Modal Dialog\"}\r\n </h2>\r\n )}\r\n\r\n {hasHeader && (\r\n <div className={classMap.header} data-testid={`${testId}-header`}>\r\n <div className={classMap.headerContent}>\r\n {header ?? <div className={classMap.title}>{title}</div>}\r\n </div>\r\n\r\n <IconButton\r\n ref={closeBtnRef}\r\n className={classMap.closeButton}\r\n state=\"error\"\r\n size=\"small\"\r\n icon={CloseIcon}\r\n aria-label={closeButtonAriaLabel}\r\n onClick={(e: React.MouseEvent) => {\r\n e.stopPropagation();\r\n handleClose();\r\n }}\r\n title=\"Close\"\r\n data-testid={`${testId}-close`}\r\n type=\"button\"\r\n />\r\n </div>\r\n )}\r\n\r\n {!hasHeader && (\r\n <IconButton\r\n ref={closeBtnRef}\r\n className={classMap.closeButtonFloating ?? classMap.closeButton}\r\n state=\"error\"\r\n size=\"small\"\r\n icon={CloseIcon}\r\n aria-label={closeButtonAriaLabel}\r\n onClick={(e: React.MouseEvent) => {\r\n e.stopPropagation();\r\n handleClose();\r\n }}\r\n title=\"Close\"\r\n data-testid={`${testId}-close`}\r\n type=\"button\"\r\n />\r\n )}\r\n\r\n <div className={classMap.body} data-testid={`${testId}-body`}>\r\n {children}\r\n </div>\r\n\r\n {hasFooter && (\r\n <div className={classMap.footer} data-testid={`${testId}-footer`}>\r\n {footer}\r\n </div>\r\n )}\r\n </div>\r\n </div>,\r\n portalElement,\r\n );\r\n};\r\n\r\nBaseModal.displayName = \"BaseModal\";\r\nexport default BaseModal;\r\n","\"use client\";\r\n\r\nimport React from \"react\";\r\nimport BaseModal from \"../ModalBase\";\r\nimport styles from \"./Modal.module.scss\";\r\nimport { IconButton } from \"@/index.next\";\r\nimport { ModalProps } from \"../Modal.types\";\r\n\r\nconst Modal: React.FC<ModalProps> = (props) => {\r\n return <BaseModal {...props} IconButton={IconButton} classMap={styles} />;\r\n};\r\nModal.displayName = \"Modal\";\r\nexport default Modal;\r\n"],"names":["title","header","footer","IconButton","hidden"],"mappings":";;;;;;;;;AAkBA,MAAM,YAAsC,CAAC;AAAA,EAC3C,YAAY;AAAA,EACZ;AAAA,EACA,OAAAA,SAAQ;AAAA,EACR,QAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAW,mBAAA;AAAA,EACX,SAAS,iBAAA;AAAA,EACT;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,mBAAmB;AAAA,EACnB,oBAAoB;AAAA,EACpB,uBAAuB;AAAA,EACvB,eAAe,SAAS;AAAA,EACxB,YAAAC;AAAA,EACA;AAAA,EACA,WAAW;AACb,MAAM;AACJ,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAA6B,IAAI;AAC3E,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,KAAK;AAElD,QAAM,eAAe,OAAO,SAAS;AACrC,QAAM,eAAe,eAAe,OAAO;AAE3C,QAAM,aAAa,OAAuB,IAAI;AAC9C,QAAM,YAAY,OAAuB,IAAI;AAC7C,QAAM,cAAc,OAA0B,IAAI;AAClD,QAAM,YAAY,OAA2B,IAAI;AACjD,QAAM,gBAAgB,OAAsB,EAAE;AAE9C,QAAM,MAAM,MAAA;AACZ,QAAM,kBAAkB,GAAG,GAAG;AAE9B,QAAM,cAAc,YAAY,MAAM;AACpC,iBAAa,KAAK;AAClB,WAAO,WAAW,MAAM,QAAA,GAAW,GAAG;AAAA,EACxC,GAAG,CAAC,OAAO,CAAC;AAEZ,YAAU,MAAM;AACd,QAAI,CAAC,WAAY;AAEjB,cAAU,UAAW,SAAS,iBAAiC;AAE/D,QAAI,SAAS,SAAS,eAAe,QAAQ;AAC7C,QAAI,CAAC,QAAQ;AACX,eAAS,SAAS,cAAc,KAAK;AACrC,aAAO,KAAK;AACZ,eAAS,KAAK,YAAY,MAAM;AAAA,IAClC;AACA,qBAAiB,MAAM;AACvB,aAAS,KAAK,UAAU,IAAI,UAAU;AAEtC,UAAM,WAAW,MAAM,KAAK,SAAS,KAAK,QAAQ;AAClD,UAAMC,UAAwB,CAAA;AAE9B,aAAS,QAAQ,CAAC,OAAO;AACvB,UAAI,OAAO,UAAU,CAAC,GAAG,aAAa,aAAa,GAAG;AACpD,WAAG,aAAa,eAAe,MAAM;AACrC,QAAAA,QAAO,KAAK,EAAE;AAAA,MAChB;AAAA,IACF,CAAC;AAED,UAAM,YAAY,CAAC,MAAgC;AACjD,UAAI,EAAE,QAAQ,SAAU,aAAA;AAAA,IAC1B;AAEA,aAAS,iBAAiB,WAAW,SAAS;AAE9C,WAAO,MAAM;;AACX,eAAS,KAAK,UAAU,OAAO,UAAU;AACzC,eAAS,oBAAoB,WAAW,SAAS;AACjD,MAAAA,QAAO,QAAQ,CAAC,OAAO,GAAG,gBAAgB,aAAa,CAAC;AACxD,4BAAU,YAAV,mBAAmB,UAAnB;AACA,uBAAiB,IAAI;AAAA,IACvB;AAAA,EACF,GAAG,CAAC,YAAY,UAAU,WAAW,CAAC;AAEtC,YAAU,MAAM;AACd,QAAI,CAAC,WAAY;AAEjB,0BAAsB,MAAM;;AAC1B,mBAAa,IAAI;AAEjB,UAAI,UAAU,SAAS;AACrB,sBAAc,UAAU,MAAM;AAAA,UAC5B,UAAU,QAAQ;AAAA,YAChB;AAAA,UAAA;AAAA,QACF,EACA,OAAO,CAAC,OAAO,CAAC,GAAG,aAAa,UAAU,KAAK,GAAG,aAAa,EAAE;AAAA,MACrE;AAEA,OACE,yBAAc,QAAQ,CAAC,KACvB,YAAY,WACZ,UAAU,YAFV,mBAGC,UAHD;AAAA,IAIJ,CAAC;AAAA,EACH,GAAG,CAAC,UAAU,CAAC;AAEf,YAAU,MAAM;AACd,QAAI,cAAc;AAChB,oBAAc,IAAI;AAAA,IACpB,WAAW,cAAc;AACvB,mBAAa,KAAK;AAClB,YAAM,IAAI,OAAO,WAAW,MAAM,cAAc,KAAK,GAAG,GAAG;AAC3D,aAAO,MAAM,OAAO,aAAa,CAAC;AAAA,IACpC,OAAO;AACL,oBAAc,KAAK;AAAA,IACrB;AAAA,EACF,GAAG,CAAC,cAAc,YAAY,CAAC;AAE/B,QAAM,gBAAgB,CAAC,MAAqC;AAC1D,QAAI,EAAE,QAAQ,MAAO;AAErB,UAAM,OAAO,cAAc;AAC3B,QAAI,CAAC,KAAK,OAAQ;AAElB,UAAM,QAAQ,KAAK,CAAC;AACpB,UAAM,OAAO,KAAK,KAAK,SAAS,CAAC;AAEjC,QAAI,EAAE,YAAY,SAAS,kBAAkB,OAAO;AAClD,QAAE,eAAA;AACF,WAAK,MAAA;AAAA,IACP,WAAW,CAAC,EAAE,YAAY,SAAS,kBAAkB,MAAM;AACzD,QAAE,eAAA;AACF,YAAM,MAAA;AAAA,IACR;AAAA,EACF;AAEA,MAAI,CAAC,cAAc,CAAC,cAAe,QAAO;AAE1C,QAAM,mBAAmB;AAAA,IACvB,SAAS;AAAA,IACT;AAAA,IACA,UAAU,SAAS,SAAS,WAAW,MAAM,CAAC,EAAE;AAAA,IAChD,YAAY,SAAS,QAAQ,WAAW,QAAQ,CAAC,EAAE;AAAA,EAAA;AAGrD,QAAM,YAAY,QAAQH,OAAM,KAAK,QAAQD,MAAK;AAClD,QAAM,YAAY,QAAQE,OAAM;AAEhC,QAAM,yBACJ,mBAAmB,CAAC,aAAa,YAAY,kBAAkB;AAEjE,QAAM,4BAA4B,2BAA2B;AAE7D,SAAO,SAAS;AAAA,IACd;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK;AAAA,QACL,WAAW;AAAA,UACT,SAAS;AAAA,UACT,YAAY,SAAS,UAAU,SAAS;AAAA,QAAA;AAAA,QAE1C,SAAS;AAAA,QACT,MAAK;AAAA,QACL,eAAa;AAAA,QAEb,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAK;AAAA,YACL,WAAW;AAAA,YACX,SAAS,CAAC,MAAM,EAAE,gBAAA;AAAA,YAClB,MAAK;AAAA,YACL,cAAW;AAAA,YACX,cAAY;AAAA,YACZ,mBAAiB;AAAA,YACjB,oBAAkB;AAAA,YAClB,UAAU;AAAA,YACV,WAAW;AAAA,YACX,eAAa,GAAG,MAAM;AAAA,YAErB,UAAA;AAAA,cAAA,6BACC,oBAAC,MAAA,EAAG,IAAI,iBAAiB,WAAW,SAAS,UAAU,WACpD,UAAA,OAAOF,WAAU,WAAWA,SAAQ,gBACvC;AAAA,cAGD,kCACE,OAAA,EAAI,WAAW,SAAS,QAAQ,eAAa,GAAG,MAAM,WACrD,UAAA;AAAA,gBAAA,oBAAC,OAAA,EAAI,WAAW,SAAS,eACtB,UAAAC,WAAU,oBAAC,OAAA,EAAI,WAAW,SAAS,OAAQ,UAAAD,OAAA,CAAM,GACpD;AAAA,gBAEA;AAAA,kBAACG;AAAA,kBAAA;AAAA,oBACC,KAAK;AAAA,oBACL,WAAW,SAAS;AAAA,oBACpB,OAAM;AAAA,oBACN,MAAK;AAAA,oBACL,MAAM;AAAA,oBACN,cAAY;AAAA,oBACZ,SAAS,CAAC,MAAwB;AAChC,wBAAE,gBAAA;AACF,kCAAA;AAAA,oBACF;AAAA,oBACA,OAAM;AAAA,oBACN,eAAa,GAAG,MAAM;AAAA,oBACtB,MAAK;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACP,GACF;AAAA,cAGD,CAAC,aACA;AAAA,gBAACA;AAAA,gBAAA;AAAA,kBACC,KAAK;AAAA,kBACL,WAAW,SAAS,uBAAuB,SAAS;AAAA,kBACpD,OAAM;AAAA,kBACN,MAAK;AAAA,kBACL,MAAM;AAAA,kBACN,cAAY;AAAA,kBACZ,SAAS,CAAC,MAAwB;AAChC,sBAAE,gBAAA;AACF,gCAAA;AAAA,kBACF;AAAA,kBACA,OAAM;AAAA,kBACN,eAAa,GAAG,MAAM;AAAA,kBACtB,MAAK;AAAA,gBAAA;AAAA,cAAA;AAAA,cAIT,oBAAC,SAAI,WAAW,SAAS,MAAM,eAAa,GAAG,MAAM,SAClD,SAAA,CACH;AAAA,cAEC,aACC,oBAAC,OAAA,EAAI,WAAW,SAAS,QAAQ,eAAa,GAAG,MAAM,WACpD,UAAAD,QAAA,CACH;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MAEJ;AAAA,IAAA;AAAA,IAEF;AAAA,EAAA;AAEJ;AAEA,UAAU,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACrPxB,MAAM,QAA8B,CAAC,UAAU;AAC7C,6BAAQ,WAAA,EAAW,GAAG,OAAO,YAAwB,UAAU,QAAQ;AACzE;AACA,MAAM,cAAc;"}
|
|
1
|
+
{"version":3,"file":"Modal-5Reb9Rx-.js","sources":["../../src/components/Modal/ModalBase.tsx","../../src/components/Modal/next/Modal.tsx"],"sourcesContent":["import React, {\r\n useEffect,\r\n useRef,\r\n useState,\r\n useId,\r\n KeyboardEvent,\r\n useCallback,\r\n} from \"react\";\r\nimport ReactDOM from \"react-dom\";\r\nimport { CloseIcon } from \"../../Icons\";\r\nimport { BaseModalProps } from \"./Modal.types\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport { capitalize } from \"../../utils/capitalize\";\r\nimport {\r\n getDefaultRounding,\r\n getDefaultShadow,\r\n} from \"../../config/boreal-style-config\";\r\n\r\nconst BaseModal: React.FC<BaseModalProps> = ({\r\n className = \"\",\r\n children,\r\n title = \"Modal Dialog\",\r\n header,\r\n footer,\r\n rounding = getDefaultRounding(),\r\n shadow = getDefaultShadow(),\r\n open,\r\n onClose,\r\n \"aria-label\": ariaLabel,\r\n \"aria-labelledby\": ariaLabelledBy,\r\n \"aria-describedby\": ariaDescribedBy,\r\n closeButtonAriaLabel = \"Close modal\",\r\n \"data-testid\": testId = \"modal\",\r\n IconButton,\r\n classMap,\r\n portalId = \"widget-portal\",\r\n}) => {\r\n const [isVisible, setIsVisible] = useState(false);\r\n const [portalElement, setPortalElement] = useState<HTMLElement | null>(null);\r\n const [isRendered, setIsRendered] = useState(false);\r\n\r\n const isControlled = typeof open === \"boolean\";\r\n const shouldBeOpen = isControlled ? open : true;\r\n\r\n const overlayRef = useRef<HTMLDivElement>(null);\r\n const dialogRef = useRef<HTMLDivElement>(null);\r\n const closeBtnRef = useRef<HTMLButtonElement>(null);\r\n const openerRef = useRef<HTMLElement | null>(null);\r\n const focusablesRef = useRef<HTMLElement[]>([]);\r\n\r\n const uid = useId();\r\n const fallbackLabelId = `${uid}-label`;\r\n\r\n const handleClose = useCallback(() => {\r\n setIsVisible(false);\r\n window.setTimeout(() => onClose(), 200);\r\n }, [onClose]);\r\n\r\n useEffect(() => {\r\n if (!isRendered) return;\r\n\r\n openerRef.current = (document.activeElement as HTMLElement) ?? null;\r\n\r\n let portal = document.getElementById(portalId);\r\n if (!portal) {\r\n portal = document.createElement(\"div\");\r\n portal.id = portalId;\r\n document.body.appendChild(portal);\r\n }\r\n setPortalElement(portal);\r\n document.body.classList.add(\"noScroll\");\r\n\r\n const siblings = Array.from(document.body.children) as HTMLElement[];\r\n const hidden: HTMLElement[] = [];\r\n\r\n siblings.forEach((el) => {\r\n if (el !== portal && !el.hasAttribute(\"aria-hidden\")) {\r\n el.setAttribute(\"aria-hidden\", \"true\");\r\n hidden.push(el);\r\n }\r\n });\r\n\r\n const handleEsc = (e: globalThis.KeyboardEvent) => {\r\n if (e.key === \"Escape\") handleClose();\r\n };\r\n\r\n document.addEventListener(\"keydown\", handleEsc);\r\n\r\n return () => {\r\n document.body.classList.remove(\"noScroll\");\r\n document.removeEventListener(\"keydown\", handleEsc);\r\n hidden.forEach((el) => el.removeAttribute(\"aria-hidden\"));\r\n openerRef.current?.focus?.();\r\n setPortalElement(null);\r\n };\r\n }, [isRendered, portalId, handleClose]);\r\n\r\n useEffect(() => {\r\n if (!isRendered) return;\r\n\r\n requestAnimationFrame(() => {\r\n setIsVisible(true);\r\n\r\n if (dialogRef.current) {\r\n focusablesRef.current = Array.from(\r\n dialogRef.current.querySelectorAll<HTMLElement>(\r\n 'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\r\n ),\r\n ).filter((el) => !el.hasAttribute(\"disabled\") && el.tabIndex !== -1);\r\n }\r\n\r\n (\r\n focusablesRef.current[0] ??\r\n closeBtnRef.current ??\r\n dialogRef.current\r\n )?.focus?.();\r\n });\r\n }, [isRendered]);\r\n\r\n useEffect(() => {\r\n if (shouldBeOpen) {\r\n setIsRendered(true);\r\n } else if (isControlled) {\r\n setIsVisible(false);\r\n const t = window.setTimeout(() => setIsRendered(false), 200);\r\n return () => window.clearTimeout(t);\r\n } else {\r\n setIsRendered(false);\r\n }\r\n }, [shouldBeOpen, isControlled]);\r\n\r\n const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\r\n if (e.key !== \"Tab\") return;\r\n\r\n const list = focusablesRef.current;\r\n if (!list.length) return;\r\n\r\n const first = list[0];\r\n const last = list[list.length - 1];\r\n\r\n if (e.shiftKey && document.activeElement === first) {\r\n e.preventDefault();\r\n last.focus();\r\n } else if (!e.shiftKey && document.activeElement === last) {\r\n e.preventDefault();\r\n first.focus();\r\n }\r\n };\r\n\r\n if (!isRendered || !portalElement) return null;\r\n\r\n const contentClassName = combineClassNames(\r\n classMap.content,\r\n className,\r\n shadow && classMap[`shadow${capitalize(shadow)}`],\r\n rounding && classMap[`round${capitalize(rounding)}`],\r\n );\r\n\r\n const hasHeader = Boolean(header) || Boolean(title);\r\n const hasFooter = Boolean(footer);\r\n\r\n const resolvedAriaLabelledBy =\r\n ariaLabelledBy ?? (!ariaLabel && hasHeader ? fallbackLabelId : undefined);\r\n\r\n const shouldRenderFallbackLabel = resolvedAriaLabelledBy === fallbackLabelId;\r\n\r\n return ReactDOM.createPortal(\r\n <div\r\n ref={overlayRef}\r\n className={combineClassNames(\r\n classMap.overlay,\r\n isVisible ? classMap.visible : classMap.hidden,\r\n )}\r\n onClick={handleClose}\r\n role=\"presentation\"\r\n data-testid={testId}\r\n >\r\n <div\r\n ref={dialogRef}\r\n className={contentClassName}\r\n onClick={(e) => e.stopPropagation()}\r\n role=\"dialog\"\r\n aria-modal=\"true\"\r\n aria-label={ariaLabel}\r\n aria-labelledby={resolvedAriaLabelledBy}\r\n aria-describedby={ariaDescribedBy}\r\n tabIndex={-1}\r\n onKeyDown={handleKeyDown}\r\n data-testid={`${testId}-content`}\r\n >\r\n {shouldRenderFallbackLabel && (\r\n <h2 id={fallbackLabelId} className={classMap.srOnly ?? \"sr_only\"}>\r\n {typeof title === \"string\" ? title : \"Modal Dialog\"}\r\n </h2>\r\n )}\r\n\r\n {hasHeader && (\r\n <div className={classMap.header} data-testid={`${testId}-header`}>\r\n <div className={classMap.headerContent}>\r\n {header ?? <div className={classMap.title}>{title}</div>}\r\n </div>\r\n\r\n <IconButton\r\n ref={closeBtnRef}\r\n className={classMap.closeButton}\r\n state=\"error\"\r\n size=\"small\"\r\n icon={CloseIcon}\r\n aria-label={closeButtonAriaLabel}\r\n onClick={(e: React.MouseEvent) => {\r\n e.stopPropagation();\r\n handleClose();\r\n }}\r\n title=\"Close\"\r\n data-testid={`${testId}-close`}\r\n type=\"button\"\r\n />\r\n </div>\r\n )}\r\n\r\n {!hasHeader && (\r\n <IconButton\r\n ref={closeBtnRef}\r\n className={classMap.closeButtonFloating ?? classMap.closeButton}\r\n state=\"error\"\r\n size=\"small\"\r\n icon={CloseIcon}\r\n aria-label={closeButtonAriaLabel}\r\n onClick={(e: React.MouseEvent) => {\r\n e.stopPropagation();\r\n handleClose();\r\n }}\r\n title=\"Close\"\r\n data-testid={`${testId}-close`}\r\n type=\"button\"\r\n />\r\n )}\r\n\r\n <div className={classMap.body} data-testid={`${testId}-body`}>\r\n {children}\r\n </div>\r\n\r\n {hasFooter && (\r\n <div className={classMap.footer} data-testid={`${testId}-footer`}>\r\n {footer}\r\n </div>\r\n )}\r\n </div>\r\n </div>,\r\n portalElement,\r\n );\r\n};\r\n\r\nBaseModal.displayName = \"BaseModal\";\r\nexport default BaseModal;\r\n","\"use client\";\r\n\r\nimport React from \"react\";\r\nimport BaseModal from \"../ModalBase\";\r\nimport styles from \"./Modal.module.scss\";\r\nimport IconButton from \"../../IconButton/next/IconButton\";\r\nimport { ModalProps } from \"../Modal.types\";\r\n\r\nconst Modal: React.FC<ModalProps> = (props) => {\r\n return <BaseModal {...props} IconButton={IconButton} classMap={styles} />;\r\n};\r\nModal.displayName = \"Modal\";\r\nexport default Modal;\r\n"],"names":["title","header","footer","IconButton","hidden"],"mappings":"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"}
|
|
@@ -1,12 +1,11 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
require('./
|
|
2
|
+
require('./Modal.css');const require$$2 = require("react/jsx-runtime");
|
|
3
3
|
const React = require("react");
|
|
4
4
|
const ReactDOM = require("react-dom");
|
|
5
5
|
const CloseIcon = require("./CloseIcon-7hy4qJ9o.cjs");
|
|
6
6
|
const classNames = require("./classNames-BcWMx052.cjs");
|
|
7
7
|
const capitalize = require("./capitalize-DoV-nOmN.cjs");
|
|
8
8
|
const borealStyleConfig = require("./boreal-style-config-C1UIwOFN.cjs");
|
|
9
|
-
;/* empty css */
|
|
10
9
|
const IconButton = require("./IconButton-C66aQhKe.cjs");
|
|
11
10
|
const BaseModal = ({
|
|
12
11
|
className = "",
|
|
@@ -255,4 +254,4 @@ const Modal = (props) => {
|
|
|
255
254
|
};
|
|
256
255
|
Modal.displayName = "Modal";
|
|
257
256
|
exports.Modal = Modal;
|
|
258
|
-
//# sourceMappingURL=Modal-
|
|
257
|
+
//# sourceMappingURL=Modal-DfVyL8yk.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal-j59Cj0t1.cjs","sources":["../../src/components/Modal/ModalBase.tsx","../../src/components/Modal/next/Modal.tsx"],"sourcesContent":["import React, {\r\n useEffect,\r\n useRef,\r\n useState,\r\n useId,\r\n KeyboardEvent,\r\n useCallback,\r\n} from \"react\";\r\nimport ReactDOM from \"react-dom\";\r\nimport { CloseIcon } from \"../../Icons\";\r\nimport { BaseModalProps } from \"./Modal.types\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport { capitalize } from \"../../utils/capitalize\";\r\nimport {\r\n getDefaultRounding,\r\n getDefaultShadow,\r\n} from \"../../config/boreal-style-config\";\r\n\r\nconst BaseModal: React.FC<BaseModalProps> = ({\r\n className = \"\",\r\n children,\r\n title = \"Modal Dialog\",\r\n header,\r\n footer,\r\n rounding = getDefaultRounding(),\r\n shadow = getDefaultShadow(),\r\n open,\r\n onClose,\r\n \"aria-label\": ariaLabel,\r\n \"aria-labelledby\": ariaLabelledBy,\r\n \"aria-describedby\": ariaDescribedBy,\r\n closeButtonAriaLabel = \"Close modal\",\r\n \"data-testid\": testId = \"modal\",\r\n IconButton,\r\n classMap,\r\n portalId = \"widget-portal\",\r\n}) => {\r\n const [isVisible, setIsVisible] = useState(false);\r\n const [portalElement, setPortalElement] = useState<HTMLElement | null>(null);\r\n const [isRendered, setIsRendered] = useState(false);\r\n\r\n const isControlled = typeof open === \"boolean\";\r\n const shouldBeOpen = isControlled ? open : true;\r\n\r\n const overlayRef = useRef<HTMLDivElement>(null);\r\n const dialogRef = useRef<HTMLDivElement>(null);\r\n const closeBtnRef = useRef<HTMLButtonElement>(null);\r\n const openerRef = useRef<HTMLElement | null>(null);\r\n const focusablesRef = useRef<HTMLElement[]>([]);\r\n\r\n const uid = useId();\r\n const fallbackLabelId = `${uid}-label`;\r\n\r\n const handleClose = useCallback(() => {\r\n setIsVisible(false);\r\n window.setTimeout(() => onClose(), 200);\r\n }, [onClose]);\r\n\r\n useEffect(() => {\r\n if (!isRendered) return;\r\n\r\n openerRef.current = (document.activeElement as HTMLElement) ?? null;\r\n\r\n let portal = document.getElementById(portalId);\r\n if (!portal) {\r\n portal = document.createElement(\"div\");\r\n portal.id = portalId;\r\n document.body.appendChild(portal);\r\n }\r\n setPortalElement(portal);\r\n document.body.classList.add(\"noScroll\");\r\n\r\n const siblings = Array.from(document.body.children) as HTMLElement[];\r\n const hidden: HTMLElement[] = [];\r\n\r\n siblings.forEach((el) => {\r\n if (el !== portal && !el.hasAttribute(\"aria-hidden\")) {\r\n el.setAttribute(\"aria-hidden\", \"true\");\r\n hidden.push(el);\r\n }\r\n });\r\n\r\n const handleEsc = (e: globalThis.KeyboardEvent) => {\r\n if (e.key === \"Escape\") handleClose();\r\n };\r\n\r\n document.addEventListener(\"keydown\", handleEsc);\r\n\r\n return () => {\r\n document.body.classList.remove(\"noScroll\");\r\n document.removeEventListener(\"keydown\", handleEsc);\r\n hidden.forEach((el) => el.removeAttribute(\"aria-hidden\"));\r\n openerRef.current?.focus?.();\r\n setPortalElement(null);\r\n };\r\n }, [isRendered, portalId, handleClose]);\r\n\r\n useEffect(() => {\r\n if (!isRendered) return;\r\n\r\n requestAnimationFrame(() => {\r\n setIsVisible(true);\r\n\r\n if (dialogRef.current) {\r\n focusablesRef.current = Array.from(\r\n dialogRef.current.querySelectorAll<HTMLElement>(\r\n 'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\r\n ),\r\n ).filter((el) => !el.hasAttribute(\"disabled\") && el.tabIndex !== -1);\r\n }\r\n\r\n (\r\n focusablesRef.current[0] ??\r\n closeBtnRef.current ??\r\n dialogRef.current\r\n )?.focus?.();\r\n });\r\n }, [isRendered]);\r\n\r\n useEffect(() => {\r\n if (shouldBeOpen) {\r\n setIsRendered(true);\r\n } else if (isControlled) {\r\n setIsVisible(false);\r\n const t = window.setTimeout(() => setIsRendered(false), 200);\r\n return () => window.clearTimeout(t);\r\n } else {\r\n setIsRendered(false);\r\n }\r\n }, [shouldBeOpen, isControlled]);\r\n\r\n const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\r\n if (e.key !== \"Tab\") return;\r\n\r\n const list = focusablesRef.current;\r\n if (!list.length) return;\r\n\r\n const first = list[0];\r\n const last = list[list.length - 1];\r\n\r\n if (e.shiftKey && document.activeElement === first) {\r\n e.preventDefault();\r\n last.focus();\r\n } else if (!e.shiftKey && document.activeElement === last) {\r\n e.preventDefault();\r\n first.focus();\r\n }\r\n };\r\n\r\n if (!isRendered || !portalElement) return null;\r\n\r\n const contentClassName = combineClassNames(\r\n classMap.content,\r\n className,\r\n shadow && classMap[`shadow${capitalize(shadow)}`],\r\n rounding && classMap[`round${capitalize(rounding)}`],\r\n );\r\n\r\n const hasHeader = Boolean(header) || Boolean(title);\r\n const hasFooter = Boolean(footer);\r\n\r\n const resolvedAriaLabelledBy =\r\n ariaLabelledBy ?? (!ariaLabel && hasHeader ? fallbackLabelId : undefined);\r\n\r\n const shouldRenderFallbackLabel = resolvedAriaLabelledBy === fallbackLabelId;\r\n\r\n return ReactDOM.createPortal(\r\n <div\r\n ref={overlayRef}\r\n className={combineClassNames(\r\n classMap.overlay,\r\n isVisible ? classMap.visible : classMap.hidden,\r\n )}\r\n onClick={handleClose}\r\n role=\"presentation\"\r\n data-testid={testId}\r\n >\r\n <div\r\n ref={dialogRef}\r\n className={contentClassName}\r\n onClick={(e) => e.stopPropagation()}\r\n role=\"dialog\"\r\n aria-modal=\"true\"\r\n aria-label={ariaLabel}\r\n aria-labelledby={resolvedAriaLabelledBy}\r\n aria-describedby={ariaDescribedBy}\r\n tabIndex={-1}\r\n onKeyDown={handleKeyDown}\r\n data-testid={`${testId}-content`}\r\n >\r\n {shouldRenderFallbackLabel && (\r\n <h2 id={fallbackLabelId} className={classMap.srOnly ?? \"sr_only\"}>\r\n {typeof title === \"string\" ? title : \"Modal Dialog\"}\r\n </h2>\r\n )}\r\n\r\n {hasHeader && (\r\n <div className={classMap.header} data-testid={`${testId}-header`}>\r\n <div className={classMap.headerContent}>\r\n {header ?? <div className={classMap.title}>{title}</div>}\r\n </div>\r\n\r\n <IconButton\r\n ref={closeBtnRef}\r\n className={classMap.closeButton}\r\n state=\"error\"\r\n size=\"small\"\r\n icon={CloseIcon}\r\n aria-label={closeButtonAriaLabel}\r\n onClick={(e: React.MouseEvent) => {\r\n e.stopPropagation();\r\n handleClose();\r\n }}\r\n title=\"Close\"\r\n data-testid={`${testId}-close`}\r\n type=\"button\"\r\n />\r\n </div>\r\n )}\r\n\r\n {!hasHeader && (\r\n <IconButton\r\n ref={closeBtnRef}\r\n className={classMap.closeButtonFloating ?? classMap.closeButton}\r\n state=\"error\"\r\n size=\"small\"\r\n icon={CloseIcon}\r\n aria-label={closeButtonAriaLabel}\r\n onClick={(e: React.MouseEvent) => {\r\n e.stopPropagation();\r\n handleClose();\r\n }}\r\n title=\"Close\"\r\n data-testid={`${testId}-close`}\r\n type=\"button\"\r\n />\r\n )}\r\n\r\n <div className={classMap.body} data-testid={`${testId}-body`}>\r\n {children}\r\n </div>\r\n\r\n {hasFooter && (\r\n <div className={classMap.footer} data-testid={`${testId}-footer`}>\r\n {footer}\r\n </div>\r\n )}\r\n </div>\r\n </div>,\r\n portalElement,\r\n );\r\n};\r\n\r\nBaseModal.displayName = \"BaseModal\";\r\nexport default BaseModal;\r\n","\"use client\";\r\n\r\nimport React from \"react\";\r\nimport BaseModal from \"../ModalBase\";\r\nimport styles from \"./Modal.module.scss\";\r\nimport { IconButton } from \"@/index.next\";\r\nimport { ModalProps } from \"../Modal.types\";\r\n\r\nconst Modal: React.FC<ModalProps> = (props) => {\r\n return <BaseModal {...props} IconButton={IconButton} classMap={styles} />;\r\n};\r\nModal.displayName = \"Modal\";\r\nexport default Modal;\r\n"],"names":["title","header","footer","getDefaultRounding","getDefaultShadow","IconButton","useState","useRef","useId","useCallback","useEffect","hidden","combineClassNames","capitalize","jsx","jsxs","CloseIcon"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Modal-DfVyL8yk.cjs","sources":["../../src/components/Modal/ModalBase.tsx","../../src/components/Modal/next/Modal.tsx"],"sourcesContent":["import React, {\r\n useEffect,\r\n useRef,\r\n useState,\r\n useId,\r\n KeyboardEvent,\r\n useCallback,\r\n} from \"react\";\r\nimport ReactDOM from \"react-dom\";\r\nimport { CloseIcon } from \"../../Icons\";\r\nimport { BaseModalProps } from \"./Modal.types\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport { capitalize } from \"../../utils/capitalize\";\r\nimport {\r\n getDefaultRounding,\r\n getDefaultShadow,\r\n} from \"../../config/boreal-style-config\";\r\n\r\nconst BaseModal: React.FC<BaseModalProps> = ({\r\n className = \"\",\r\n children,\r\n title = \"Modal Dialog\",\r\n header,\r\n footer,\r\n rounding = getDefaultRounding(),\r\n shadow = getDefaultShadow(),\r\n open,\r\n onClose,\r\n \"aria-label\": ariaLabel,\r\n \"aria-labelledby\": ariaLabelledBy,\r\n \"aria-describedby\": ariaDescribedBy,\r\n closeButtonAriaLabel = \"Close modal\",\r\n \"data-testid\": testId = \"modal\",\r\n IconButton,\r\n classMap,\r\n portalId = \"widget-portal\",\r\n}) => {\r\n const [isVisible, setIsVisible] = useState(false);\r\n const [portalElement, setPortalElement] = useState<HTMLElement | null>(null);\r\n const [isRendered, setIsRendered] = useState(false);\r\n\r\n const isControlled = typeof open === \"boolean\";\r\n const shouldBeOpen = isControlled ? open : true;\r\n\r\n const overlayRef = useRef<HTMLDivElement>(null);\r\n const dialogRef = useRef<HTMLDivElement>(null);\r\n const closeBtnRef = useRef<HTMLButtonElement>(null);\r\n const openerRef = useRef<HTMLElement | null>(null);\r\n const focusablesRef = useRef<HTMLElement[]>([]);\r\n\r\n const uid = useId();\r\n const fallbackLabelId = `${uid}-label`;\r\n\r\n const handleClose = useCallback(() => {\r\n setIsVisible(false);\r\n window.setTimeout(() => onClose(), 200);\r\n }, [onClose]);\r\n\r\n useEffect(() => {\r\n if (!isRendered) return;\r\n\r\n openerRef.current = (document.activeElement as HTMLElement) ?? null;\r\n\r\n let portal = document.getElementById(portalId);\r\n if (!portal) {\r\n portal = document.createElement(\"div\");\r\n portal.id = portalId;\r\n document.body.appendChild(portal);\r\n }\r\n setPortalElement(portal);\r\n document.body.classList.add(\"noScroll\");\r\n\r\n const siblings = Array.from(document.body.children) as HTMLElement[];\r\n const hidden: HTMLElement[] = [];\r\n\r\n siblings.forEach((el) => {\r\n if (el !== portal && !el.hasAttribute(\"aria-hidden\")) {\r\n el.setAttribute(\"aria-hidden\", \"true\");\r\n hidden.push(el);\r\n }\r\n });\r\n\r\n const handleEsc = (e: globalThis.KeyboardEvent) => {\r\n if (e.key === \"Escape\") handleClose();\r\n };\r\n\r\n document.addEventListener(\"keydown\", handleEsc);\r\n\r\n return () => {\r\n document.body.classList.remove(\"noScroll\");\r\n document.removeEventListener(\"keydown\", handleEsc);\r\n hidden.forEach((el) => el.removeAttribute(\"aria-hidden\"));\r\n openerRef.current?.focus?.();\r\n setPortalElement(null);\r\n };\r\n }, [isRendered, portalId, handleClose]);\r\n\r\n useEffect(() => {\r\n if (!isRendered) return;\r\n\r\n requestAnimationFrame(() => {\r\n setIsVisible(true);\r\n\r\n if (dialogRef.current) {\r\n focusablesRef.current = Array.from(\r\n dialogRef.current.querySelectorAll<HTMLElement>(\r\n 'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\r\n ),\r\n ).filter((el) => !el.hasAttribute(\"disabled\") && el.tabIndex !== -1);\r\n }\r\n\r\n (\r\n focusablesRef.current[0] ??\r\n closeBtnRef.current ??\r\n dialogRef.current\r\n )?.focus?.();\r\n });\r\n }, [isRendered]);\r\n\r\n useEffect(() => {\r\n if (shouldBeOpen) {\r\n setIsRendered(true);\r\n } else if (isControlled) {\r\n setIsVisible(false);\r\n const t = window.setTimeout(() => setIsRendered(false), 200);\r\n return () => window.clearTimeout(t);\r\n } else {\r\n setIsRendered(false);\r\n }\r\n }, [shouldBeOpen, isControlled]);\r\n\r\n const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\r\n if (e.key !== \"Tab\") return;\r\n\r\n const list = focusablesRef.current;\r\n if (!list.length) return;\r\n\r\n const first = list[0];\r\n const last = list[list.length - 1];\r\n\r\n if (e.shiftKey && document.activeElement === first) {\r\n e.preventDefault();\r\n last.focus();\r\n } else if (!e.shiftKey && document.activeElement === last) {\r\n e.preventDefault();\r\n first.focus();\r\n }\r\n };\r\n\r\n if (!isRendered || !portalElement) return null;\r\n\r\n const contentClassName = combineClassNames(\r\n classMap.content,\r\n className,\r\n shadow && classMap[`shadow${capitalize(shadow)}`],\r\n rounding && classMap[`round${capitalize(rounding)}`],\r\n );\r\n\r\n const hasHeader = Boolean(header) || Boolean(title);\r\n const hasFooter = Boolean(footer);\r\n\r\n const resolvedAriaLabelledBy =\r\n ariaLabelledBy ?? (!ariaLabel && hasHeader ? fallbackLabelId : undefined);\r\n\r\n const shouldRenderFallbackLabel = resolvedAriaLabelledBy === fallbackLabelId;\r\n\r\n return ReactDOM.createPortal(\r\n <div\r\n ref={overlayRef}\r\n className={combineClassNames(\r\n classMap.overlay,\r\n isVisible ? classMap.visible : classMap.hidden,\r\n )}\r\n onClick={handleClose}\r\n role=\"presentation\"\r\n data-testid={testId}\r\n >\r\n <div\r\n ref={dialogRef}\r\n className={contentClassName}\r\n onClick={(e) => e.stopPropagation()}\r\n role=\"dialog\"\r\n aria-modal=\"true\"\r\n aria-label={ariaLabel}\r\n aria-labelledby={resolvedAriaLabelledBy}\r\n aria-describedby={ariaDescribedBy}\r\n tabIndex={-1}\r\n onKeyDown={handleKeyDown}\r\n data-testid={`${testId}-content`}\r\n >\r\n {shouldRenderFallbackLabel && (\r\n <h2 id={fallbackLabelId} className={classMap.srOnly ?? \"sr_only\"}>\r\n {typeof title === \"string\" ? title : \"Modal Dialog\"}\r\n </h2>\r\n )}\r\n\r\n {hasHeader && (\r\n <div className={classMap.header} data-testid={`${testId}-header`}>\r\n <div className={classMap.headerContent}>\r\n {header ?? <div className={classMap.title}>{title}</div>}\r\n </div>\r\n\r\n <IconButton\r\n ref={closeBtnRef}\r\n className={classMap.closeButton}\r\n state=\"error\"\r\n size=\"small\"\r\n icon={CloseIcon}\r\n aria-label={closeButtonAriaLabel}\r\n onClick={(e: React.MouseEvent) => {\r\n e.stopPropagation();\r\n handleClose();\r\n }}\r\n title=\"Close\"\r\n data-testid={`${testId}-close`}\r\n type=\"button\"\r\n />\r\n </div>\r\n )}\r\n\r\n {!hasHeader && (\r\n <IconButton\r\n ref={closeBtnRef}\r\n className={classMap.closeButtonFloating ?? classMap.closeButton}\r\n state=\"error\"\r\n size=\"small\"\r\n icon={CloseIcon}\r\n aria-label={closeButtonAriaLabel}\r\n onClick={(e: React.MouseEvent) => {\r\n e.stopPropagation();\r\n handleClose();\r\n }}\r\n title=\"Close\"\r\n data-testid={`${testId}-close`}\r\n type=\"button\"\r\n />\r\n )}\r\n\r\n <div className={classMap.body} data-testid={`${testId}-body`}>\r\n {children}\r\n </div>\r\n\r\n {hasFooter && (\r\n <div className={classMap.footer} data-testid={`${testId}-footer`}>\r\n {footer}\r\n </div>\r\n )}\r\n </div>\r\n </div>,\r\n portalElement,\r\n );\r\n};\r\n\r\nBaseModal.displayName = \"BaseModal\";\r\nexport default BaseModal;\r\n","\"use client\";\r\n\r\nimport React from \"react\";\r\nimport BaseModal from \"../ModalBase\";\r\nimport styles from \"./Modal.module.scss\";\r\nimport IconButton from \"../../IconButton/next/IconButton\";\r\nimport { ModalProps } from \"../Modal.types\";\r\n\r\nconst Modal: React.FC<ModalProps> = (props) => {\r\n return <BaseModal {...props} IconButton={IconButton} classMap={styles} />;\r\n};\r\nModal.displayName = \"Modal\";\r\nexport default Modal;\r\n"],"names":["title","header","footer","getDefaultRounding","getDefaultShadow","IconButton","useState","useRef","useId","useCallback","useEffect","hidden","combineClassNames","capitalize","jsx","jsxs","CloseIcon"],"mappings":"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"}
|
package/dist/next/Modal.cjs.js
CHANGED
package/dist/next/Modal.js
CHANGED
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
require('./
|
|
2
|
+
require('./NotificationCenter.css');const require$$2 = require("react/jsx-runtime");
|
|
3
3
|
const React = require("react");
|
|
4
4
|
const CloseIcon = require("./CloseIcon-7hy4qJ9o.cjs");
|
|
5
5
|
const classNames = require("./classNames-BcWMx052.cjs");
|
|
6
6
|
const capitalize = require("./capitalize-DoV-nOmN.cjs");
|
|
7
7
|
const borealStyleConfig = require("./boreal-style-config-C1UIwOFN.cjs");
|
|
8
|
-
;/* empty css */
|
|
9
8
|
const Button = require("./Button-CmH6HYjc.cjs");
|
|
10
9
|
const IconButton = require("./IconButton-C66aQhKe.cjs");
|
|
11
10
|
var DefaultContext = {
|
|
@@ -455,4 +454,4 @@ const NotificationCenter = (props) => {
|
|
|
455
454
|
};
|
|
456
455
|
NotificationCenter.displayName = "NotificationCenter";
|
|
457
456
|
exports.NotificationCenter = NotificationCenter;
|
|
458
|
-
//# sourceMappingURL=NotificationCenter-
|
|
457
|
+
//# sourceMappingURL=NotificationCenter-BcEB_4HS.cjs.map
|