@alveole/components 1.10.0 → 2.0.0-alpha

package/dist/ui/DocumentViewer/documentViewerPdfCalculs.d.ts

@@ -0,0 +1,52 @@
+/**
+ * Ce que pdfjs rejette quand une page ou un document se voit remplace en cours de rendu :
+ * un changement rapide de page ou de source annule le rendu precedent, et cette annulation
+ * n'est pas une erreur a montrer. Le rejet n'est pas toujours une instance d'`Error`.
+ */
+export declare const estUneErreurDAnnulationPdf: (erreur: unknown) => boolean;
+export type DimensionsDePage = {
+    pageWidth: number;
+    pageHeight: number;
+    viewerWidth: number;
+    viewerHeight: number;
+    /** Le zoom demande par l'appelant, applique par-dessus l'ajustement au cadre. */
+    zoom?: number;
+};
+/**
+ * L'echelle qui fait tenir une page dans son cadre. Les deux dimensions contraignent
+ * l'echelle independamment ; la plus stricte des deux decide, sans quoi la page deborderait
+ * du cote que l'autre laisse passer.
+ */
+export declare const echelleAjustee: ({ pageWidth, pageHeight, viewerWidth, viewerHeight, zoom }: DimensionsDePage) => number;
+export type PositionDePointeur = {
+    clientX: number;
+    clientY: number;
+    rect: {
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+    };
+};
+/**
+ * La position du pointeur dans son cadre, en pourcentage. Bornee au cadre : pendant un
+ * glisser, le pointeur peut en sortir, et l'origine d'un zoom n'a pas de sens hors de la
+ * surface qu'elle decrit.
+ */
+export declare const positionEnPourcentage: ({ clientX, clientY, rect }: PositionDePointeur) => {
+    x: number;
+    y: number;
+};
+/**
+ * Une taille mesuree, ou `null` quand elle n'est pas encore exploitable : au premier rendu,
+ * avant que la mise en page ou le `ResizeObserver` n'ait rapporte quoi que ce soit, les
+ * dimensions sont nulles ou absentes.
+ */
+export declare const tailleValidee: ({ width, height }: {
+    width: number | undefined;
+    height: number | undefined;
+}) => {
+    width: number;
+    height: number;
+} | null;
+//# sourceMappingURL=documentViewerPdfCalculs.d.ts.map

package/dist/ui/DocumentViewer/documentViewerPdfCalculs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"documentViewerPdfCalculs.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/documentViewerPdfCalculs.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,eAAO,MAAM,0BAA0B,GAAI,QAAQ,OAAO,KAAG,OAQ5D,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,iFAAiF;IACjF,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,cAAc,GAAI,4DAAgE,gBAAgB,WAC1C,CAAC;AAEtE,MAAM,MAAM,kBAAkB,GAAG;IAC/B,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;CACpE,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,qBAAqB,GAAI,4BAA4B,kBAAkB;;;CAKnF,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,aAAa,GAAI,mBAAmB;IAAE,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAA;CAAE;;;QACK,CAAC"}

package/dist/ui/DocumentViewer/documentViewerPdfCalculs.js

@@ -0,0 +1,34 @@
+/**
+ * Ce que pdfjs rejette quand une page ou un document se voit remplace en cours de rendu :
+ * un changement rapide de page ou de source annule le rendu precedent, et cette annulation
+ * n'est pas une erreur a montrer. Le rejet n'est pas toujours une instance d'`Error`.
+ */
+export const estUneErreurDAnnulationPdf = (erreur) => {
+    if (!(erreur instanceof Error))
+        return false;
+    return (['RenderingCancelledException', 'AbortException'].includes(erreur.name) ||
+        erreur.message.includes('Worker was terminated') ||
+        erreur.message.includes("Cannot read properties of null (reading 'sendWithPromise')"));
+};
+/**
+ * L'echelle qui fait tenir une page dans son cadre. Les deux dimensions contraignent
+ * l'echelle independamment ; la plus stricte des deux decide, sans quoi la page deborderait
+ * du cote que l'autre laisse passer.
+ */
+export const echelleAjustee = ({ pageWidth, pageHeight, viewerWidth, viewerHeight, zoom = 1 }) => Math.min(viewerWidth / pageWidth, viewerHeight / pageHeight) * zoom;
+/**
+ * La position du pointeur dans son cadre, en pourcentage. Bornee au cadre : pendant un
+ * glisser, le pointeur peut en sortir, et l'origine d'un zoom n'a pas de sens hors de la
+ * surface qu'elle decrit.
+ */
+export const positionEnPourcentage = ({ clientX, clientY, rect }) => {
+    const x = ((clientX - rect.left) / rect.width) * 100;
+    const y = ((clientY - rect.top) / rect.height) * 100;
+    return { x: Math.max(0, Math.min(100, x)), y: Math.max(0, Math.min(100, y)) };
+};
+/**
+ * Une taille mesuree, ou `null` quand elle n'est pas encore exploitable : au premier rendu,
+ * avant que la mise en page ou le `ResizeObserver` n'ait rapporte quoi que ce soit, les
+ * dimensions sont nulles ou absentes.
+ */
+export const tailleValidee = ({ width, height }) => typeof width === 'number' && width > 0 && typeof height === 'number' && height > 0 ? { width, height } : null;

package/dist/ui/DocumentViewer/index.d.ts

@@ -1,2 +1,3 @@
 export * from './DocumentViewer';
+export * from './DocumentViewer.types';
 //# sourceMappingURL=index.d.ts.map

package/dist/ui/DocumentViewer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC"}

package/dist/ui/DocumentViewer/index.js

@@ -1 +1,2 @@
 export * from './DocumentViewer';
+export * from './DocumentViewer.types';

package/dist/ui/DocumentViewer/pointeurWeb.d.ts

@@ -0,0 +1,12 @@
+import type { PointerEvent } from 'react-native';
+/**
+ * La position du pointeur et le cadre qu'il survole, lus sur un evenement RN. Sur le web,
+ * react-native-web transmet l'evenement du DOM : `nativeEvent` porte les coordonnees et
+ * `currentTarget` est l'element survole. Hors du DOM, il n'y a pas de cadre a mesurer.
+ */
+export declare const lirePointeurWeb: (event: PointerEvent) => {
+    clientX: number;
+    clientY: number;
+    rect: DOMRect;
+} | undefined;
+//# sourceMappingURL=pointeurWeb.d.ts.map

package/dist/ui/DocumentViewer/pointeurWeb.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pointeurWeb.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/pointeurWeb.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAEjD;;;;GAIG;AACH,eAAO,MAAM,eAAe,GAAI,OAAO,YAAY;;;;aAMlD,CAAC"}

package/dist/ui/DocumentViewer/pointeurWeb.js

@@ -0,0 +1,12 @@
+/**
+ * La position du pointeur et le cadre qu'il survole, lus sur un evenement RN. Sur le web,
+ * react-native-web transmet l'evenement du DOM : `nativeEvent` porte les coordonnees et
+ * `currentTarget` est l'element survole. Hors du DOM, il n'y a pas de cadre a mesurer.
+ */
+export const lirePointeurWeb = (event) => {
+    const cible = event.currentTarget;
+    if (typeof Element === 'undefined' || !(cible instanceof Element))
+        return undefined;
+    const { clientX, clientY } = event.nativeEvent;
+    return { clientX, clientY, rect: cible.getBoundingClientRect() };
+};

package/dist/ui/DocumentViewer/useDocumentPdfCharge.d.ts

@@ -0,0 +1,15 @@
+import { PDFDocumentProxyLike } from './chargementDePdfJs';
+/**
+ * Le document PDF charge depuis sa source. La page precedente est detruite des qu'une
+ * nouvelle se substitue a elle avec succes : le document est lourd, et le garder en memoire
+ * une fois remplace fuirait a chaque navigation.
+ *
+ * `hasError` se remet a zero des le changement de source, avant meme que le chargement ne
+ * commence : sans cela, l'erreur de la source precedente resterait affichee un instant sur
+ * la nouvelle.
+ */
+export declare const useDocumentPdfCharge: (source: string, onLoaded?: (document: PDFDocumentProxyLike) => void) => {
+    pdf: PDFDocumentProxyLike | null;
+    hasError: boolean;
+};
+//# sourceMappingURL=useDocumentPdfCharge.d.ts.map

package/dist/ui/DocumentViewer/useDocumentPdfCharge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDocumentPdfCharge.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/useDocumentPdfCharge.ts"],"names":[],"mappings":"AACA,OAAO,EAAa,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAItE;;;;;;;;GAQG;AACH,eAAO,MAAM,oBAAoB,GAAI,QAAQ,MAAM,EAAE,WAAW,CAAC,QAAQ,EAAE,oBAAoB,KAAK,IAAI;;;CAgDvG,CAAC"}

package/dist/ui/DocumentViewer/useDocumentPdfCharge.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import { loadPdfJs } from './chargementDePdfJs';
+import { estUneErreurDAnnulationPdf } from './documentViewerPdfCalculs';
+import { useEtatReinitialiseParCle } from './useEtatReinitialiseParCle';
+/**
+ * Le document PDF charge depuis sa source. La page precedente est detruite des qu'une
+ * nouvelle se substitue a elle avec succes : le document est lourd, et le garder en memoire
+ * une fois remplace fuirait a chaque navigation.
+ *
+ * `hasError` se remet a zero des le changement de source, avant meme que le chargement ne
+ * commence : sans cela, l'erreur de la source precedente resterait affichee un instant sur
+ * la nouvelle.
+ */
+export const useDocumentPdfCharge = (source, onLoaded) => {
+    const [pdf, setPdf] = React.useState(null);
+    const [hasError, setHasError] = useEtatReinitialiseParCle(source);
+    const onLoadedRef = React.useRef(onLoaded);
+    React.useEffect(() => {
+        onLoadedRef.current = onLoaded;
+    }, [onLoaded]);
+    React.useEffect(() => {
+        let active = true;
+        let tache = null;
+        loadPdfJs()
+            .then(pdfjs => {
+            if (!active)
+                return;
+            tache = pdfjs.getDocument({ url: source });
+            return tache.promise
+                .then(documentPdf => {
+                if (!active)
+                    return void documentPdf.destroy?.();
+                setPdf(precedent => {
+                    void precedent?.destroy?.();
+                    return documentPdf;
+                });
+                onLoadedRef.current?.(documentPdf);
+            })
+                .catch(erreur => {
+                if (!active || estUneErreurDAnnulationPdf(erreur))
+                    return;
+                setPdf(null);
+                setHasError(true);
+            });
+        })
+            .catch(erreur => {
+            if (!active || estUneErreurDAnnulationPdf(erreur))
+                return;
+            setHasError(true);
+        });
+        return () => {
+            active = false;
+            tache?.destroy();
+        };
+    }, [source, setHasError]);
+    React.useEffect(() => () => void pdf?.destroy?.(), [pdf]);
+    return { pdf, hasError };
+};

package/dist/ui/DocumentViewer/useEtatReinitialiseParCle.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+/**
+ * Un booleen qui se remet a `false` des qu'une cle change, avant meme le prochain effet :
+ * l'erreur d'une source ne doit jamais rester affichee un instant sur la suivante. La mise a
+ * jour se fait au rendu plutot que dans un effet, pour eviter cet instant.
+ */
+export declare const useEtatReinitialiseParCle: <Cle>(cle: Cle) => readonly [boolean, React.Dispatch<React.SetStateAction<boolean>>];
+//# sourceMappingURL=useEtatReinitialiseParCle.d.ts.map

package/dist/ui/DocumentViewer/useEtatReinitialiseParCle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEtatReinitialiseParCle.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/useEtatReinitialiseParCle.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;;;GAIG;AACH,eAAO,MAAM,yBAAyB,GAAI,GAAG,EAAE,KAAK,GAAG,sEAUtD,CAAC"}

package/dist/ui/DocumentViewer/useEtatReinitialiseParCle.js

@@ -0,0 +1,15 @@
+import React from 'react';
+/**
+ * Un booleen qui se remet a `false` des qu'une cle change, avant meme le prochain effet :
+ * l'erreur d'une source ne doit jamais rester affichee un instant sur la suivante. La mise a
+ * jour se fait au rendu plutot que dans un effet, pour eviter cet instant.
+ */
+export const useEtatReinitialiseParCle = (cle) => {
+    const [actif, setActif] = React.useState(false);
+    const [clePrecedente, setClePrecedente] = React.useState(cle);
+    if (clePrecedente !== cle) {
+        setClePrecedente(cle);
+        setActif(false);
+    }
+    return [actif, setActif];
+};

package/dist/ui/DocumentViewer/usePilotageDeDocument.d.ts

@@ -0,0 +1,21 @@
+import type { DocumentViewerRotation } from './DocumentViewer.types';
+import type { DocumentViewerToolbarState } from './DocumentViewerToolbar';
+export declare const rotationSuivante: (rotation: DocumentViewerRotation, direction: "right" | "left") => DocumentViewerRotation;
+/**
+ * Ce que la barre d'outils pilote : l'orientation et la page courante. C'est le seul etat du
+ * visualiseur, et il vivait dans le composant, ou il se melait au rendu au point de lui faire
+ * passer les soixante lignes.
+ */
+export declare const usePilotageDeDocument: (type: DocumentViewerToolbarState["fileType"]) => {
+    rotation: DocumentViewerRotation;
+    page: number;
+    state: DocumentViewerToolbarState;
+    onRotateRight: () => void;
+    onRotateLeft: () => void;
+    onNextPage: () => void;
+    onPreviousPage: () => void;
+    onPdfReady: (proxy: {
+        numPages: number;
+    }) => void;
+};
+//# sourceMappingURL=usePilotageDeDocument.d.ts.map

package/dist/ui/DocumentViewer/usePilotageDeDocument.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePilotageDeDocument.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/usePilotageDeDocument.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AACrE,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,yBAAyB,CAAC;AAW1E,eAAO,MAAM,gBAAgB,GAC3B,UAAU,sBAAsB,EAChC,WAAW,OAAO,GAAG,MAAM,KAC1B,sBAA4D,CAAC;AAEhE;;;;GAIG;AACH,eAAO,MAAM,qBAAqB,GAAI,MAAM,0BAA0B,CAAC,UAAU,CAAC;;;;;;;;wBAuBnC;QAAE,QAAQ,EAAE,MAAM,CAAA;KAAE;CAMlE,CAAC"}

package/dist/ui/DocumentViewer/usePilotageDeDocument.js

@@ -0,0 +1,36 @@
+import React from 'react';
+/**
+ * Le quart de tour suivant, dans un sens ou dans l'autre. Les quatre orientations sont posees en
+ * table : le compilateur verifie chaque arrivee, la ou un calcul modulo ne rendait qu'un nombre.
+ */
+const QUART_DE_TOUR = {
+    right: { 0: 90, 90: 180, 180: 270, 270: 0 },
+    left: { 0: 270, 90: 0, 180: 90, 270: 180 },
+};
+export const rotationSuivante = (rotation, direction) => QUART_DE_TOUR[direction][rotation];
+/**
+ * Ce que la barre d'outils pilote : l'orientation et la page courante. C'est le seul etat du
+ * visualiseur, et il vivait dans le composant, ou il se melait au rendu au point de lui faire
+ * passer les soixante lignes.
+ */
+export const usePilotageDeDocument = (type) => {
+    const [rotation, setRotation] = React.useState(0);
+    const [page, setPage] = React.useState(1);
+    const [totalPages, setTotalPages] = React.useState(1);
+    const state = React.useMemo(() => ({ fileType: type, rotation, page, totalPages }), [type, rotation, page, totalPages]);
+    const onRotateRight = React.useCallback(() => setRotation(courante => rotationSuivante(courante, 'right')), []);
+    const onRotateLeft = React.useCallback(() => setRotation(courante => rotationSuivante(courante, 'left')), []);
+    const onNextPage = React.useCallback(() => {
+        setPage(courante => Math.min(courante + 1, totalPages));
+    }, [totalPages]);
+    const onPreviousPage = React.useCallback(() => {
+        setPage(courante => Math.max(courante - 1, 1));
+    }, []);
+    // Le PDF n'annonce son nombre de pages qu'une fois charge : la page courante peut deja etre
+    // au-dela si le document precedent en avait davantage.
+    const onPdfReady = React.useCallback((proxy) => {
+        setTotalPages(proxy.numPages);
+        setPage(courante => Math.min(courante, proxy.numPages));
+    }, []);
+    return { rotation, page, state, onRotateRight, onRotateLeft, onNextPage, onPreviousPage, onPdfReady };
+};

package/dist/ui/DocumentViewer/useRenduDePage.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import type { PDFDocumentProxyLike } from './chargementDePdfJs';
+import { DocumentViewerRotation } from './DocumentViewer.types';
+type TailleDeCadre = {
+    width: number;
+    height: number;
+};
+/**
+ * Le rendu d'une page du document sur un canvas, refait a chaque changement de page, de
+ * rotation, de zoom ou de taille du cadre. Un rendu en cours est annule des que ses parametres
+ * changent : sinon deux rendus concurrents dessineraient sur le meme canvas.
+ */
+export declare const useRenduDePage: (params: {
+    pdf: PDFDocumentProxyLike | null;
+    page: number;
+    rotation: DocumentViewerRotation;
+    scale: number;
+    cadre: TailleDeCadre | null;
+    canvasRef: React.RefObject<HTMLCanvasElement | null>;
+    onErreur: () => void;
+}) => {
+    width: number;
+    height: number;
+};
+export {};
+//# sourceMappingURL=useRenduDePage.d.ts.map

package/dist/ui/DocumentViewer/useRenduDePage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRenduDePage.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/useRenduDePage.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAChE,OAAO,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AAGhE,KAAK,aAAa,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAAC;AA4CvD;;;;GAIG;AACH,eAAO,MAAM,cAAc,GAAI,QAAQ;IACrC,GAAG,EAAE,oBAAoB,GAAG,IAAI,CAAC;IACjC,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,sBAAsB,CAAC;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,aAAa,GAAG,IAAI,CAAC;IAC5B,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;IACrD,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;;;CAqCA,CAAC"}

package/dist/ui/DocumentViewer/useRenduDePage.js

@@ -0,0 +1,72 @@
+import React from 'react';
+import { echelleAjustee, estUneErreurDAnnulationPdf } from './documentViewerPdfCalculs';
+/** Dessine une page sur le canvas fourni, a l'echelle qui la fait tenir dans le cadre. */
+const dessinerLaPage = ({ pagePdf, canvas, cadre, rotation, scale }) => {
+    const contexte = canvas.getContext('2d');
+    if (contexte == null)
+        return null;
+    const cadrage = pagePdf.getViewport({ scale: 1, rotation });
+    const echelle = echelleAjustee({
+        pageWidth: cadrage.width,
+        pageHeight: cadrage.height,
+        viewerWidth: cadre.width,
+        viewerHeight: cadre.height,
+        zoom: scale,
+    });
+    const viewport = pagePdf.getViewport({ scale: echelle, rotation });
+    const pixelRatio = window.devicePixelRatio || 1;
+    canvas.width = Math.floor(viewport.width * pixelRatio);
+    canvas.height = Math.floor(viewport.height * pixelRatio);
+    canvas.style.width = `${viewport.width}px`;
+    canvas.style.height = `${viewport.height}px`;
+    contexte.setTransform(1, 0, 0, 1, 0, 0);
+    contexte.clearRect(0, 0, canvas.width, canvas.height);
+    return {
+        taille: { width: viewport.width, height: viewport.height },
+        tache: pagePdf.render({
+            canvasContext: contexte,
+            viewport,
+            transform: pixelRatio === 1 ? undefined : [pixelRatio, 0, 0, pixelRatio, 0, 0],
+        }),
+    };
+};
+/**
+ * Le rendu d'une page du document sur un canvas, refait a chaque changement de page, de
+ * rotation, de zoom ou de taille du cadre. Un rendu en cours est annule des que ses parametres
+ * changent : sinon deux rendus concurrents dessineraient sur le meme canvas.
+ */
+export const useRenduDePage = (params) => {
+    const { pdf, page, rotation, scale, cadre, canvasRef, onErreur } = params;
+    const [tailleRendue, setTailleRendue] = React.useState({ width: 0, height: 0 });
+    React.useEffect(() => {
+        if (!pdf || !canvasRef.current || !cadre)
+            return;
+        let active = true;
+        let tacheEnCours = null;
+        pdf
+            .getPage(page)
+            .then(pagePdf => {
+            if (!active || !canvasRef.current)
+                return;
+            const rendu = dessinerLaPage({ pagePdf, canvas: canvasRef.current, cadre, rotation, scale });
+            if (!rendu)
+                return;
+            setTailleRendue(rendu.taille);
+            tacheEnCours = rendu.tache;
+            return rendu.tache?.promise.then(() => {
+                if (active)
+                    pagePdf.cleanup?.();
+            });
+        })
+            .catch(erreur => {
+            if (!active || estUneErreurDAnnulationPdf(erreur))
+                return;
+            onErreur();
+        });
+        return () => {
+            active = false;
+            tacheEnCours?.cancel?.();
+        };
+    }, [pdf, page, rotation, scale, cadre, canvasRef, onErreur]);
+    return tailleRendue;
+};

package/dist/ui/DocumentViewer/useSurvolAvecZoom.d.ts

@@ -0,0 +1,15 @@
+import type { PointerEvent } from 'react-native';
+/**
+ * Le zoom qui suit le pointeur au survol : la page grossit autour du point survole, comme une
+ * loupe. L'origine de l'agrandissement est la position du pointeur en pourcentage du cadre,
+ * recalculee a chaque deplacement.
+ */
+export declare const useSurvolAvecZoom: () => {
+    survole: boolean;
+    origine: string;
+    echelle: number;
+    onEntree: () => void;
+    onSortie: () => void;
+    onDeplacement: (event: PointerEvent) => void;
+};
+//# sourceMappingURL=useSurvolAvecZoom.d.ts.map

package/dist/ui/DocumentViewer/useSurvolAvecZoom.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSurvolAvecZoom.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/useSurvolAvecZoom.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAIjD;;;;GAIG;AACH,eAAO,MAAM,iBAAiB;;;;;;2BAIoB,YAAY;CAgB7D,CAAC"}

package/dist/ui/DocumentViewer/useSurvolAvecZoom.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { positionEnPourcentage } from './documentViewerPdfCalculs';
+import { lirePointeurWeb } from './pointeurWeb';
+/**
+ * Le zoom qui suit le pointeur au survol : la page grossit autour du point survole, comme une
+ * loupe. L'origine de l'agrandissement est la position du pointeur en pourcentage du cadre,
+ * recalculee a chaque deplacement.
+ */
+export const useSurvolAvecZoom = () => {
+    const [survole, setSurvole] = React.useState(false);
+    const [origine, setOrigine] = React.useState('50% 50%');
+    const onDeplacement = React.useCallback((event) => {
+        const pointeur = lirePointeurWeb(event);
+        if (!pointeur)
+            return;
+        const { x, y } = positionEnPourcentage(pointeur);
+        setOrigine(`${x}% ${y}%`);
+    }, []);
+    return {
+        survole,
+        origine,
+        echelle: survole ? 2 : 1,
+        onEntree: () => setSurvole(true),
+        onSortie: () => setSurvole(false),
+        onDeplacement,
+    };
+};

package/dist/ui/DocumentViewer/useTailleParResizeObserver.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+/**
+ * La taille d'un cadre, mesuree par `ResizeObserver` plutot que par `onLayout` : `onLayout`
+ * de React Native for Web ne se declenche pas sur une balise HTML personnalisee comme
+ * `document-viewer-pdf`. Le cadre est mesure des le montage, puis a chaque redimensionnement.
+ */
+export declare const useTailleParResizeObserver: () => {
+    mesureRef: React.RefObject<HTMLDivElement | null>;
+    taille: {
+        width: number;
+        height: number;
+    } | null;
+};
+//# sourceMappingURL=useTailleParResizeObserver.d.ts.map

package/dist/ui/DocumentViewer/useTailleParResizeObserver.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTailleParResizeObserver.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/useTailleParResizeObserver.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B;;;;GAIG;AACH,eAAO,MAAM,0BAA0B;;;eAEe,MAAM;gBAAU,MAAM;;CAyB3E,CAAC"}

package/dist/ui/DocumentViewer/useTailleParResizeObserver.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { tailleValidee } from './documentViewerPdfCalculs';
+/**
+ * La taille d'un cadre, mesuree par `ResizeObserver` plutot que par `onLayout` : `onLayout`
+ * de React Native for Web ne se declenche pas sur une balise HTML personnalisee comme
+ * `document-viewer-pdf`. Le cadre est mesure des le montage, puis a chaque redimensionnement.
+ */
+export const useTailleParResizeObserver = () => {
+    const mesureRef = React.useRef(null);
+    const [taille, setTaille] = React.useState(null);
+    React.useEffect(() => {
+        const element = mesureRef.current;
+        if (!element)
+            return;
+        const mettreAJour = (width, height) => {
+            const valide = tailleValidee({ width, height });
+            if (valide)
+                setTaille(valide);
+        };
+        const observer = new ResizeObserver(entries => {
+            const entree = entries[0];
+            if (entree)
+                mettreAJour(entree.contentRect.width, entree.contentRect.height);
+        });
+        observer.observe(element);
+        const rect = element.getBoundingClientRect();
+        mettreAJour(rect.width, rect.height);
+        return () => observer.disconnect();
+    }, []);
+    return { mesureRef, taille };
+};

package/dist/ui/DragAndDropFile/DragAndDropFile.d.ts

@@ -1,9 +1,10 @@
-import { FormControlCaptionProps, FormControlFileInputProps, FormControlFileInputValue, FormControlHintProps, LucideIconProps } from '@alveole/components';
 import React from 'react';
-export type DragAndDropFileValue = FormControlFileInputValue;
-export type DragAndDropFileProps = FormControlHintProps & FormControlCaptionProps & FormControlFileInputProps & {
+import { FileInputProps, FileInputValue, FormControlCaptionProps, FormControlHintProps } from '../FormControl';
+import { Leading } from '../Leading';
+export type DragAndDropFileValue = FileInputValue;
+export type DragAndDropFileProps = FormControlHintProps & FormControlCaptionProps & FileInputProps & {
     label: string;
-    icon?: LucideIconProps['name'];
+    leading?: Leading;
 };
 export declare const DragAndDropFile: (props: DragAndDropFileProps) => React.JSX.Element;
 //# sourceMappingURL=DragAndDropFile.d.ts.map

package/dist/ui/DragAndDropFile/DragAndDropFile.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DragAndDropFile.d.ts","sourceRoot":"","sources":["../../../src/ui/DragAndDropFile/DragAndDropFile.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,uBAAuB,EAEvB,yBAAyB,EACzB,yBAAyB,EAEzB,oBAAoB,EAIpB,eAAe,EAChB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,MAAM,oBAAoB,GAAG,yBAAyB,CAAC;AAC7D,MAAM,MAAM,oBAAoB,GAAG,oBAAoB,GACrD,uBAAuB,GACvB,yBAAyB,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;CAChC,CAAC;AAEJ,eAAO,MAAM,eAAe,GAAI,OAAO,oBAAoB,sBAqG1D,CAAC"}
+{"version":3,"file":"DragAndDropFile.d.ts","sourceRoot":"","sources":["../../../src/ui/DragAndDropFile/DragAndDropFile.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAEL,cAAc,EACd,cAAc,EAEd,uBAAuB,EAEvB,oBAAoB,EAErB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,OAAO,EAAe,MAAM,YAAY,CAAC;AAGlD,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC;AAClD,MAAM,MAAM,oBAAoB,GAAG,oBAAoB,GACrD,uBAAuB,GACvB,cAAc,GAAG;IACf,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEJ,eAAO,MAAM,eAAe,GAAI,OAAO,oBAAoB,sBAuD1D,CAAC"}

package/dist/ui/DragAndDropFile/DragAndDropFile.js

@@ -1,50 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, FormControlCaption, FormControlFileInput, FormControlHint, FormControlLabel, Image, LucideIcon, } from '@alveole/components';
 import React from 'react';
-import { Alert } from '../../core/Alert';
+import { Box } from '../../core/Box';
+import { Image } from '../../core/Image';
+import { FileInput, FormControlCaption, FormControlHint, FormControlLabel, } from '../FormControl';
+import { LeadingSlot } from '../Leading';
 import { useStyles } from './DragAndDropFile.styles';
 export const DragAndDropFile = (props) => {
-    const { label, hint, icon, type, error, success, onChange, multiple } = props;
+    const { label, hint, leading, type, error, success, multiple } = props;
     const styles = useStyles();
     const [forceOpen, setForceOpen] = React.useState(false);
-    const onValueChange = value => {
-        if (type == null)
-            return onChange(value);
-        if (multiple && Array.isArray(value)) {
-            const invalidFiles = value.filter(file => {
-                const mimeType = file?.mimeType;
-                const fileName = file?.name;
-                if (mimeType == null)
-                    return true;
-                return !((type.includes('image') && mimeType.startsWith('image')) ||
-                    (type.includes('pdf') && mimeType.endsWith('pdf')) ||
-                    (type.includes('csv') &&
-                        (mimeType === 'text/csv' || mimeType === 'application/csv' || fileName?.endsWith('.csv'))));
-            });
-            if (invalidFiles.length > 0) {
-                Alert.alert({
-                    title: 'Type de fichier incorrect',
-                    message: `Certains fichiers ne sont pas pris en charge`,
-                });
-                return;
-            }
-            return onChange(value);
-        }
-        const mimeType = value?.mimeType;
-        if (mimeType == null)
-            return onChange(value);
-        const fileName = value?.name;
-        if ((type.includes('image') && mimeType.startsWith('image')) ||
-            (type.includes('pdf') && mimeType.endsWith('pdf')) ||
-            (type.includes('csv') &&
-                (mimeType === 'text/csv' || mimeType === 'application/csv' || fileName?.endsWith('.csv'))))
-            return onChange(value);
-        else {
-            Alert.alert({
-                title: 'Type de fichier incorrect',
-                message: `Le format du fichier n'est pas pris en charge`,
-            });
-        }
-    };
-    return (_jsxs(Box, { tag: "drag-and-drop-file", style: styles.container, display: "flex", flexDirection: "row", justify: "space-between", onPress: () => setForceOpen(true), children: [_jsxs(Box, { children: [_jsxs(Box, { tag: "drag-and-drop-file-icon", display: "flex", flexDirection: "row", justify: "center", gap: '050', children: [_jsx(LucideIcon, { size: "md", name: icon ?? 'Upload' }), _jsx(Box, { mt: 'auto', mb: 'auto', children: _jsx(FormControlLabel, { label: label }) })] }), _jsx(Box, { tag: "drag-and-drop-file-hint", display: "flex", flexDirection: "row", justify: "center", children: hint && _jsx(FormControlHint, { hint: hint }) }), _jsx(Box, { tag: "drag-and-drop-file-input", children: _jsx(FormControlFileInput, { ...props, hideButton: true, hideFilename: true, canChange: false, onChange: onValueChange, reopen: forceOpen, onPickStart: () => setForceOpen(false), type: type, multiple: multiple }) }), (error || success) && (_jsx(Box, { tag: "drag-and-drop-file-error", mt: '075', display: "flex", flexDirection: "row", justify: "center", children: _jsx(Box, { p: 16, children: _jsx(FormControlCaption, { ...props }) }) }))] }), _jsx(Box, { children: props.previewURL && _jsx(Image, { source: { uri: props.previewURL }, height: 40, width: 30, contentFit: "cover" }) })] }));
+    return (_jsxs(Box, { tag: "drag-and-drop-file", style: styles.container, display: "flex", flexDirection: "row", justify: "space-between", onPress: () => setForceOpen(true), children: [_jsxs(Box, { children: [_jsxs(Box, { tag: "drag-and-drop-file-icon", display: "flex", flexDirection: "row", justify: "center", gap: '050', children: [_jsx(LeadingSlot, { contenu: leading === undefined ? 'Upload' : leading, apparence: { size: 'md' } }), _jsx(Box, { mt: 'auto', mb: 'auto', children: _jsx(FormControlLabel, { label: label }) })] }), _jsx(Box, { tag: "drag-and-drop-file-hint", display: "flex", flexDirection: "row", justify: "center", children: hint && _jsx(FormControlHint, { hint: hint }) }), _jsx(Box, { tag: "drag-and-drop-file-input", children: _jsx(FileInput, { ...props, hideButton: true, hideFilename: true, canChange: false, reopen: forceOpen, onPickStart: () => setForceOpen(false), type: type, multiple: multiple }) }), (error || success) && (_jsx(Box, { tag: "drag-and-drop-file-error", mt: '075', display: "flex", flexDirection: "row", justify: "center", children: _jsx(Box, { p: 16, children: _jsx(FormControlCaption, { ...props }) }) }))] }), _jsx(Box, { children: props.previewURL && _jsx(Image, { source: { uri: props.previewURL }, height: 40, width: 30, contentFit: "cover" }) })] }));
 };