@alveole/components 2.0.0-alpha → 2.0.0-alpha.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alveole/components",
-  "version": "2.0.0-alpha",
+  "version": "2.0.0-alpha.1",
   "description": "Shared UI components.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -33,15 +33,16 @@
     "@testing-library/react": "16.3.3",
     "@testing-library/react-native": "14.0.1",
     "@types/react-syntax-highlighter": "15.5.13",
-    "babel-preset-expo": "57.0.13",
+    "babel-preset-expo": "57.0.14",
     "eslint": "10.10.0",
-    "expo": "57.0.26",
+    "expo": "57.0.27",
     "expo-application": "57.0.3",
     "expo-asset": "57.0.19",
     "expo-document-picker": "57.0.3",
+    "expo-image-picker": "57.0.20",
     "expo-in-app-updates": "0.12.0",
-    "expo-modules-core": "57.0.20",
-    "expo-router": "57.0.24",
+    "expo-modules-core": "57.0.21",
+    "expo-router": "57.0.25",
     "expo-system-ui": "57.0.4",
     "expo-web-browser": "57.0.3",
     "jest": "29.7.0",
@@ -53,9 +54,9 @@
     "react-native": "0.86.3",
     "react-native-keyboard-controller": "1.21.9",
     "react-native-otp-entry": "1.8.6",
-    "react-native-web": "0.21.3",
+    "react-native-web": "0.21.4",
     "react-select": "5.10.2",
-    "react-syntax-highlighter": "16.1.1",
+    "react-syntax-highlighter": "16.1.2",
     "tamagui": "1.144.4",
     "test-renderer": "1.2.0"
   },
@@ -90,6 +91,7 @@
     "expo-constants": "*",
     "expo-document-picker": "*",
     "expo-image": "*",
+    "expo-image-picker": "*",
     "expo-in-app-updates": "*",
     "expo-router": "*",
     "expo-web-browser": "*",

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

@@ -1,10 +0,0 @@
-import React from 'react';
-import { FileInputProps, FileInputValue, FormControlCaptionProps, FormControlHintProps } from '../FormControl';
-import { Leading } from '../Leading';
-export type DragAndDropFileValue = FileInputValue;
-export type DragAndDropFileProps = FormControlHintProps & FormControlCaptionProps & FileInputProps & {
-    label: string;
-    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 +0,0 @@
-{"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,13 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
-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, leading, type, error, success, multiple } = props;
-    const styles = useStyles();
-    const [forceOpen, setForceOpen] = React.useState(false);
-    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" }) })] }));
-};

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

@@ -1,56 +0,0 @@
-declare const _default: {
-    title: string;
-    tags: "ui"[];
-    experimental: false;
-    webOnly: true;
-    description: string;
-    component: (props: import("./DragAndDropFile").DragAndDropFileProps) => import("react").JSX.Element;
-    styleFn: () => {
-        container: {
-            borderWidth: number;
-            borderStyle: "dashed";
-            borderColor: string;
-            padding: string | number;
-            borderRadius: import("@alveole/theme").Radius;
-            backgroundColor: string;
-            cursor: "pointer";
-        };
-        containerHover: {
-            borderStyle: "solid";
-            borderColor: string;
-            backgroundColor: string;
-        };
-        containerMouseHover: {
-            borderStyle: "dashed";
-            borderColor: string;
-            backgroundColor: string;
-        };
-        containerError: {
-            borderStyle: "dashed";
-            borderColor: string;
-            backgroundColor: string;
-        };
-        webError: {
-            width: "100%";
-            alignItems: "center";
-        };
-        icon: {
-            color: string;
-            backgroundColor: string;
-            padding: string | number;
-            borderRadius: import("@alveole/theme").Radius;
-            width: import("@alveole/theme").Spacing;
-            height: import("@alveole/theme").Spacing;
-            marginBottom: string | number;
-        };
-        fileName: {
-            fontWeight: "bold";
-        };
-    };
-};
-export default _default;
-export declare const Default: () => import("react").JSX.Element;
-export declare const Multiple: () => import("react").JSX.Element;
-export declare const WithError: () => import("react").JSX.Element;
-export * as Sources from './DragAndDropFile.stories.sources';
-//# sourceMappingURL=DragAndDropFile.stories.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"DragAndDropFile.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/DragAndDropFile/DragAndDropFile.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,wBAQkB;AAElB,eAAO,MAAM,OAAO,mCAKnB,CAAC;AAEF,eAAO,MAAM,QAAQ,mCAEpB,CAAC;AAEF,eAAO,MAAM,SAAS,mCAErB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,mCAAmC,CAAC"}

package/dist/ui/DragAndDropFile/DragAndDropFile.stories.js

@@ -1,17 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box } from '../../core/Box';
-import { DragAndDropFile } from './DragAndDropFile';
-import { useStyles } from './DragAndDropFile.styles';
-export default {
-    title: 'DragAndDropFile',
-    tags: ['ui'],
-    experimental: false,
-    webOnly: true,
-    description: 'Zone de dépôt de fichiers par glisser-déposer ou clic.',
-    component: DragAndDropFile,
-    styleFn: useStyles,
-};
-export const Default = () => (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 24, children: [_jsx(DragAndDropFile, { label: "Document", value: null, onChange: () => { } }), _jsx(DragAndDropFile, { label: "Image uniquement", type: "image/*", value: null, onChange: () => { } })] }));
-export const Multiple = () => (_jsx(DragAndDropFile, { label: "Documents (plusieurs)", multiple: true, value: null, onChange: () => { } }));
-export const WithError = () => (_jsx(DragAndDropFile, { label: "Document", error: "Format non support\u00E9", value: null, onChange: () => { } }));
-export * as Sources from './DragAndDropFile.stories.sources';

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

@@ -1,10 +0,0 @@
-export declare const Default: () => string;
-export declare const Multiple: () => string;
-export declare const WithError: () => string;
-export declare const storySources: {
-    readonly Default: () => string;
-    readonly Multiple: () => string;
-    readonly WithError: () => string;
-};
-export type StorySourceName = keyof typeof storySources;
-//# sourceMappingURL=DragAndDropFile.stories.sources.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"DragAndDropFile.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/DragAndDropFile/DragAndDropFile.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAAsS,CAAC;AAE3T,eAAO,MAAM,QAAQ,cAA+I,CAAC;AAErK,eAAO,MAAM,SAAS,cAAwJ,CAAC;AAE/K,eAAO,MAAM,YAAY;;;;CAIf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}

package/dist/ui/DragAndDropFile/DragAndDropFile.stories.sources.js

@@ -1,10 +0,0 @@
-// This file is generated. Do not edit manually.
-// Source: src/ui/DragAndDropFile/DragAndDropFile.stories.tsx
-export const Default = () => "export const Default = () => (\n  <Box display=\"flex\" flexDirection=\"column\" gap={24}>\n    <DragAndDropFile label=\"Document\" value={null} onChange={() => {}} />\n    <DragAndDropFile label=\"Image uniquement\" type=\"image/*\" value={null} onChange={() => {}} />\n  </Box>\n);";
-export const Multiple = () => "export const Multiple = () => (\n  <DragAndDropFile label=\"Documents (plusieurs)\" multiple value={null} onChange={() => {}} />\n);";
-export const WithError = () => "export const WithError = () => (\n  <DragAndDropFile label=\"Document\" error=\"Format non supporté\" value={null} onChange={() => {}} />\n);";
-export const storySources = {
-    Default,
-    Multiple,
-    WithError,
-};

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

@@ -1,43 +0,0 @@
-export declare const useStyles: () => {
-    container: {
-        borderWidth: number;
-        borderStyle: "dashed";
-        borderColor: string;
-        padding: string | number;
-        borderRadius: import("@alveole/theme").Radius;
-        backgroundColor: string;
-        cursor: "pointer";
-    };
-    containerHover: {
-        borderStyle: "solid";
-        borderColor: string;
-        backgroundColor: string;
-    };
-    containerMouseHover: {
-        borderStyle: "dashed";
-        borderColor: string;
-        backgroundColor: string;
-    };
-    containerError: {
-        borderStyle: "dashed";
-        borderColor: string;
-        backgroundColor: string;
-    };
-    webError: {
-        width: "100%";
-        alignItems: "center";
-    };
-    icon: {
-        color: string;
-        backgroundColor: string;
-        padding: string | number;
-        borderRadius: import("@alveole/theme").Radius;
-        width: import("@alveole/theme").Spacing;
-        height: import("@alveole/theme").Spacing;
-        marginBottom: string | number;
-    };
-    fileName: {
-        fontWeight: "bold";
-    };
-};
-//# sourceMappingURL=DragAndDropFile.styles.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"DragAndDropFile.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/DragAndDropFile/DragAndDropFile.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyCnB,CAAC"}

package/dist/ui/DragAndDropFile/DragAndDropFile.styles.js

@@ -1,43 +0,0 @@
-import { makeStyles } from '@alveole/theme';
-export const useStyles = makeStyles(({ color, spacing, spacingValue, radius }) => ({
-    container: {
-        borderWidth: 1,
-        borderStyle: 'dashed',
-        borderColor: color.border['contrast-grey'],
-        padding: spacing('4W'),
-        borderRadius: radius('lg'),
-        backgroundColor: color.alpha(color.background['alt-grey'], 0.3),
-        cursor: 'pointer',
-    },
-    containerHover: {
-        borderStyle: 'solid',
-        borderColor: color.border['disabled-grey'],
-        backgroundColor: color.alpha(color.background['alt-grey'], 0.25),
-    },
-    containerMouseHover: {
-        borderStyle: 'dashed',
-        borderColor: color.border['contrast-grey'],
-        backgroundColor: color.alpha(color.background['alt-grey'], 0.75),
-    },
-    containerError: {
-        borderStyle: 'dashed',
-        borderColor: color.alpha(color.border['plain-error'], 0.5),
-        backgroundColor: color.alpha(color.background['alt-grey'], 0.25),
-    },
-    webError: {
-        width: '100%',
-        alignItems: 'center',
-    },
-    icon: {
-        color: color.text.mention,
-        backgroundColor: color.background['alt-grey'],
-        padding: spacing('2W'),
-        borderRadius: radius('lg'),
-        width: spacingValue('200'),
-        height: spacingValue('200'),
-        marginBottom: spacing('2W'),
-    },
-    fileName: {
-        fontWeight: 'bold',
-    },
-}));

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

@@ -1,3 +0,0 @@
-import { DragAndDropFileProps } from './DragAndDropFile';
-export declare const DragAndDropFile: (props: DragAndDropFileProps) => import("react").JSX.Element;
-//# sourceMappingURL=DragAndDropFile.web.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"DragAndDropFile.web.d.ts","sourceRoot":"","sources":["../../../src/ui/DragAndDropFile/DragAndDropFile.web.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAIzD,eAAO,MAAM,eAAe,GAAI,OAAO,oBAAoB,gCA6D1D,CAAC"}

package/dist/ui/DragAndDropFile/DragAndDropFile.web.js

@@ -1,18 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box } from '../../core/Box';
-import { FileInput, FormControlCaption, FormControlHint, FormControlLabel } from '../FormControl';
-import { LeadingSlot } from '../Leading';
-import { useStyles } from './DragAndDropFile.styles';
-import { useDepotFichier } from './useDepotFichier';
-export const DragAndDropFile = (props) => {
-    const { label, hint, leading, type, error, success, multiple } = props;
-    const styles = useStyles();
-    const depot = useDepotFichier(props);
-    const styleContainer = {
-        ...styles.container,
-        ...(depot.isMouseOver ? styles.containerMouseHover : {}),
-        ...(depot.isOver ? styles.containerHover : {}),
-        ...(error ? styles.containerError : {}),
-    };
-    return (_jsxs("div", { tabIndex: 0, onDrop: depot.onDrop, onDragOver: depot.onDragOver, onDragEnter: depot.onDragOver, onDragLeave: depot.onDragLeave, onMouseOver: depot.onMouseOver, onMouseEnter: depot.onMouseOver, onMouseLeave: depot.onMouseLeave, onClick: depot.ouvrir, style: styleContainer, children: [_jsx(Box, { tag: "drag-and-drop-file-icon", display: "flex", flexDirection: "row", justify: "center", children: _jsx(LeadingSlot, { contenu: leading === undefined ? 'Upload' : leading, apparence: { size: 'xl', style: styles.icon } }) }), _jsx(Box, { tag: "drag-and-drop-file-label", display: "flex", flexDirection: "row", justify: "center", 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", display: "flex", flexDirection: "row", justify: "center", children: _jsx(Box, { pt: 16, children: _jsx(FileInput, { ...props, canChange: false, reopen: depot.forceOpen, onPickStart: depot.fermer, multiple: multiple, type: type }) }) }), (error || success) && (_jsx(Box, { tag: "drag-and-drop-file-error", style: styles.webError, children: _jsx(FormControlCaption, { ...props }) }))] }));
-};

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

@@ -1 +0,0 @@
-{"version":3,"file":"fichiersDuDataTransfer.d.ts","sourceRoot":"","sources":["../../../src/ui/DragAndDropFile/fichiersDuDataTransfer.ts"],"names":[],"mappings":"AAAA,KAAK,UAAU,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,SAAS,IAAI,IAAI,GAAG,IAAI,CAAA;CAAE,CAAC;AAE7D;;;;;GAKG;AACH,KAAK,eAAe,GAAG;IAAE,KAAK,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;IAAC,KAAK,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC,CAAA;CAAE,GAAG,IAAI,GAAG,SAAS,CAAC;AAQrG;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,GAAI,IAAI,eAAe,KAAG,IAAI,EAIhE,CAAC"}

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/DragAndDropFile/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC"}

package/dist/ui/DragAndDropFile/index.js

@@ -1 +0,0 @@
-export * from './DragAndDropFile';

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

@@ -1,21 +0,0 @@
-import React from 'react';
-import { FileInputProps } from '../FormControl';
-/**
- * Tout ce que la zone de depot fait en plus du champ de fichier ordinaire : suivre le survol et
- * le survol de glissement, convertir les fichiers laches en valeurs du champ, et liberer les URL
- * d'objet. Ecrit dans le composant, ce comportement en occupait les cinq sixiemes et noyait le
- * peu de rendu qu'il contient.
- */
-export declare const useDepotFichier: ({ value, type, multiple, onChange, }: Pick<FileInputProps, "value" | "type" | "multiple" | "onChange">) => {
-    isOver: boolean;
-    isMouseOver: boolean;
-    forceOpen: boolean;
-    ouvrir: () => void;
-    fermer: () => void;
-    onDrop: (e: React.DragEvent<HTMLDivElement>) => void;
-    onDragOver: (e: React.DragEvent<HTMLDivElement>) => void;
-    onDragLeave: (e: React.DragEvent<HTMLDivElement>) => void;
-    onMouseOver: (e: React.DragEvent<HTMLDivElement>) => void;
-    onMouseLeave: (e: React.DragEvent<HTMLDivElement>) => void;
-};
-//# sourceMappingURL=useDepotFichier.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"useDepotFichier.d.ts","sourceRoot":"","sources":["../../../src/ui/DragAndDropFile/useDepotFichier.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAA2B,cAAc,EAAgC,MAAM,gBAAgB,CAAC;AA0BvG;;;;;GAKG;AACH,eAAO,MAAM,eAAe,GAAI,sCAK7B,IAAI,CAAC,cAAc,EAAE,OAAO,GAAG,MAAM,GAAG,UAAU,GAAG,UAAU,CAAC;;;;;;gBAuB9C,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC;oBAS0B,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC;qBAA/B,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC;qBAA/B,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC;sBAA/B,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC;CAmB5G,CAAC"}

package/dist/ui/DragAndDropFile/useDepotFichier.js

@@ -1,77 +0,0 @@
-import React from 'react';
-import { Alert } from '../../core/Alert';
-import { fichierCorrespondAuType, valideLeType } from '../FormControl';
-import { fichiersDuDataTransfer } from './fichiersDuDataTransfer';
-const enAsset = (file) => ({
-    uri: URL.createObjectURL(file),
-    name: file.name,
-    size: file.size,
-    mimeType: file.type || 'application/octet-stream',
-    lastModified: file.lastModified,
-    file,
-});
-// Chaque fichier depose est publie derriere une URL d'objet, que le navigateur garde en memoire
-// tant qu'on ne la revoque pas. Sans ce nettoyage au changement de valeur, un formulaire ou
-// l'utilisateur hesite accumule les fichiers relaches dans l'onglet.
-const revoquer = (value) => {
-    const uris = (Array.isArray(value) ? value : [value]).map(fichier => fichier?.uri);
-    uris.forEach(uri => {
-        if (!uri?.startsWith('blob:'))
-            return;
-        try {
-            URL.revokeObjectURL(uri);
-        }
-        catch { }
-    });
-};
-/**
- * Tout ce que la zone de depot fait en plus du champ de fichier ordinaire : suivre le survol et
- * le survol de glissement, convertir les fichiers laches en valeurs du champ, et liberer les URL
- * d'objet. Ecrit dans le composant, ce comportement en occupait les cinq sixiemes et noyait le
- * peu de rendu qu'il contient.
- */
-export const useDepotFichier = ({ value, type, multiple, onChange, }) => {
-    const [isOver, setIsOver] = React.useState(false);
-    const [isMouseOver, setIsMouseOver] = React.useState(false);
-    const [forceOpen, setForceOpen] = React.useState(false);
-    const onValueChange = valideLeType({ type, onChange });
-    // `deposer` et `onDrop` etaient memoises en omettant `onValueChange` de leurs dependances,
-    // pour ne pas recreer les gestionnaires de glisser-deposer a chaque frappe du formulaire. Le
-    // gain etait nul : `survol` reconstruit deja les quatre autres gestionnaires a chaque rendu.
-    // Le cout, lui, etait reel : la memoisation figeait le gestionnaire du premier rendu, et un
-    // formulaire controle deposait dans un `onChange` perime.
-    const deposer = (files) => {
-        const valides = files.filter(file => fichierCorrespondAuType(file.type || '', file.name, type));
-        if (valides.length < files.length) {
-            Alert.alert({ title: 'Type de fichier incorrect', message: 'Certains fichiers ne sont pas pris en charge' });
-        }
-        if (valides.length === 0)
-            return;
-        onValueChange(multiple ? valides.map(enAsset) : enAsset(valides[0]));
-    };
-    const onDrop = (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        setIsOver(false);
-        const files = fichiersDuDataTransfer(e.dataTransfer);
-        if (files.length > 0)
-            deposer(multiple ? files : [files[0]]);
-    };
-    const survol = (actif, appliquer) => (e) => {
-        e.preventDefault();
-        appliquer(actif);
-    };
-    React.useEffect(() => () => revoquer(value), [value]);
-    return {
-        isOver,
-        isMouseOver,
-        forceOpen,
-        ouvrir: () => setForceOpen(true),
-        fermer: () => setForceOpen(false),
-        onDrop,
-        onDragOver: survol(true, setIsOver),
-        onDragLeave: survol(false, setIsOver),
-        onMouseOver: survol(true, setIsMouseOver),
-        onMouseLeave: survol(false, setIsMouseOver),
-    };
-};