@umodeapporg/ui 0.22.0 → 0.22.1
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.
|
@@ -28,7 +28,7 @@ const ImageZoomOverlay = ({ src, onClose }) => {
|
|
|
28
28
|
role: "dialog",
|
|
29
29
|
"aria-modal": true,
|
|
30
30
|
"aria-label": t("imageZoom.title"),
|
|
31
|
-
className: "fixed inset-0 z-[
|
|
31
|
+
className: "fixed inset-0 z-[9999] flex items-center justify-center p-6 glass-scrim",
|
|
32
32
|
children: [
|
|
33
33
|
/* @__PURE__ */ jsx(ControlledTooltip, { content: t("imageZoom.close"), className: "z-[9999]", children: /* @__PURE__ */ jsx(
|
|
34
34
|
ControlledButton,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ImageZoomOverlay.js","sources":["../../../src/components/UI/ImageZoomOverlay.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport { createPortal } from 'react-dom';\nimport { useTranslation } from 'react-i18next';\n\nimport ControlledButton from '@/components/Form/ControlledButton';\nimport ControlledImage from '@/components/Form/ControlledImage';\nimport ControlledTooltip from '@/components/UI/ControlledTooltip';\nimport { MaterialSymbol } from '@/components/UI/MaterialSymbol';\nimport { getPortalHost } from '@/helpers/portalHost';\n\ninterface IImageZoomOverlayProps {\n src: string;\n onClose: () => void;\n}\n\n// Visualização ampliada em tela cheia (portal). Fecha com Esc, clique fora ou\n// no botão de fechar.\nconst ImageZoomOverlay: React.FC<IImageZoomOverlayProps> = ({ src, onClose }) => {\n const { t } = useTranslation('ui');\n\n useEffect(() => {\n const onKeyDown = (event: KeyboardEvent): void => {\n if (event.key !== 'Escape') return;\n // Na captura e barrando a propagação: o drawer que abriu esta imagem também escuta Esc no\n // document, e sem isso uma tecla fecharia a imagem E o drawer atrás dela.\n event.stopPropagation();\n onClose();\n };\n document.addEventListener('keydown', onKeyDown, true);\n return () => document.removeEventListener('keydown', onKeyDown, true);\n }, [onClose]);\n\n const portalHost = getPortalHost();\n if (portalHost === null) return null;\n\n return createPortal(\n <div\n onClick={onClose}\n // `role=\"dialog\"` não é enfeite: é como `isPressOnLayeredSurface` reconhece esta camada. Sem\n // ele, o drawer por baixo lê o clique no X como \"clicou fora de mim\" e se fecha junto.\n role=\"dialog\"\n aria-modal={true}\n aria-label={t('imageZoom.title')}\n className=\"fixed inset-0 z-[
|
|
1
|
+
{"version":3,"file":"ImageZoomOverlay.js","sources":["../../../src/components/UI/ImageZoomOverlay.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport { createPortal } from 'react-dom';\nimport { useTranslation } from 'react-i18next';\n\nimport ControlledButton from '@/components/Form/ControlledButton';\nimport ControlledImage from '@/components/Form/ControlledImage';\nimport ControlledTooltip from '@/components/UI/ControlledTooltip';\nimport { MaterialSymbol } from '@/components/UI/MaterialSymbol';\nimport { getPortalHost } from '@/helpers/portalHost';\n\ninterface IImageZoomOverlayProps {\n src: string;\n onClose: () => void;\n}\n\n// Visualização ampliada em tela cheia (portal). Fecha com Esc, clique fora ou\n// no botão de fechar.\nconst ImageZoomOverlay: React.FC<IImageZoomOverlayProps> = ({ src, onClose }) => {\n const { t } = useTranslation('ui');\n\n useEffect(() => {\n const onKeyDown = (event: KeyboardEvent): void => {\n if (event.key !== 'Escape') return;\n // Na captura e barrando a propagação: o drawer que abriu esta imagem também escuta Esc no\n // document, e sem isso uma tecla fecharia a imagem E o drawer atrás dela.\n event.stopPropagation();\n onClose();\n };\n document.addEventListener('keydown', onKeyDown, true);\n return () => document.removeEventListener('keydown', onKeyDown, true);\n }, [onClose]);\n\n const portalHost = getPortalHost();\n if (portalHost === null) return null;\n\n return createPortal(\n <div\n onClick={onClose}\n // `role=\"dialog\"` não é enfeite: é como `isPressOnLayeredSurface` reconhece esta camada. Sem\n // ele, o drawer por baixo lê o clique no X como \"clicou fora de mim\" e se fecha junto.\n role=\"dialog\"\n aria-modal={true}\n aria-label={t('imageZoom.title')}\n // Same layer as ControlledDialog: mounted after the dialog that opened it, DOM order puts\n // the zoom on top. Any lower value hides it behind the dialog's scrim.\n className=\"fixed inset-0 z-[9999] flex items-center justify-center p-6 glass-scrim\"\n >\n <ControlledTooltip content={t('imageZoom.close')} className=\"z-[9999]\">\n <ControlledButton\n defaultHtmlButton\n onClick={onClose}\n className=\"absolute right-4 top-4 flex items-center justify-center rounded-full bg-glass/10 p-2 text-white transition-interactive duration-base ease-enter hover:bg-glass/20 active:scale-90\"\n >\n <MaterialSymbol icon=\"close\" size={24} />\n </ControlledButton>\n </ControlledTooltip>\n <div onClick={(event) => event.stopPropagation()} className=\"flex max-h-full max-w-full\">\n <ControlledImage src={src} className=\"max-h-[90vh] max-w-[90vw] object-contain\" />\n </div>\n </div>,\n portalHost,\n );\n};\n\nexport default ImageZoomOverlay;\n"],"names":[],"mappings":";;;;;;;;;AAiBA,MAAM,mBAAqD,CAAC,EAAE,KAAK,cAAc;AAC/E,QAAM,EAAE,EAAA,IAAM,eAAe,IAAI;AAEjC,YAAU,MAAM;AACd,UAAM,YAAY,CAAC,UAA+B;AAChD,UAAI,MAAM,QAAQ,SAAU;AAG5B,YAAM,gBAAA;AACN,cAAA;AAAA,IACF;AACA,aAAS,iBAAiB,WAAW,WAAW,IAAI;AACpD,WAAO,MAAM,SAAS,oBAAoB,WAAW,WAAW,IAAI;AAAA,EACtE,GAAG,CAAC,OAAO,CAAC;AAEZ,QAAM,aAAa,cAAA;AACnB,MAAI,eAAe,KAAM,QAAO;AAEhC,SAAO;AAAA,IACL;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAS;AAAA,QAGT,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,cAAY,EAAE,iBAAiB;AAAA,QAG/B,WAAU;AAAA,QAEV,UAAA;AAAA,UAAA,oBAAC,qBAAkB,SAAS,EAAE,iBAAiB,GAAG,WAAU,YAC1D,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,mBAAiB;AAAA,cACjB,SAAS;AAAA,cACT,WAAU;AAAA,cAEV,UAAA,oBAAC,gBAAA,EAAe,MAAK,SAAQ,MAAM,GAAA,CAAI;AAAA,YAAA;AAAA,UAAA,GAE3C;AAAA,UACA,oBAAC,OAAA,EAAI,SAAS,CAAC,UAAU,MAAM,mBAAmB,WAAU,8BAC1D,UAAA,oBAAC,iBAAA,EAAgB,KAAU,WAAU,4CAA2C,EAAA,CAClF;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAEF;AAAA,EAAA;AAEJ;"}
|