@alveole/components 1.9.0 → 2.0.0-alpha

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

@@ -11,7 +11,7 @@ declare const _default: {
             borderStyle: "dashed";
             borderColor: string;
             padding: string | number;
-            borderRadius: number;
+            borderRadius: import("@alveole/theme").Radius;
             backgroundColor: string;
             cursor: "pointer";
         };
@@ -38,60 +38,14 @@ declare const _default: {
             color: string;
             backgroundColor: string;
             padding: string | number;
-            borderRadius: number;
+            borderRadius: import("@alveole/theme").Radius;
             width: import("@alveole/theme").Spacing;
             height: import("@alveole/theme").Spacing;
             marginBottom: string | number;
         };
-        filesListContainer: {
-            marginTop: string | number;
-        };
-        filesListHeader: {
-            display: "flex";
-            flexDirection: "row";
-            justifyContent: "space-between";
-            alignItems: "center";
-            marginBottom: string | number;
-        };
-        filesListTitle: {
-            fontWeight: "bold";
-        };
-        filesListBox: {
-            borderWidth: number;
-            borderColor: string;
-            borderRadius: number;
-            padding: string | number;
-            backgroundColor: string;
-        };
-        fileItemContainer: {
-            display: "flex";
-            flexDirection: "row";
-            alignItems: "center";
-            gap: string | number;
-            padding: string | number;
-            marginBottom: string | number;
-            backgroundColor: string;
-            borderRadius: number;
-        };
-        fileItemContainerLast: {
-            marginBottom: number;
-        };
-        fileIcon: {
-            color: string;
-        };
-        fileInfo: {
-            flex: number;
-            display: "flex";
-            flexDirection: "column";
-            gap: string | number;
-        };
         fileName: {
             fontWeight: "bold";
         };
-        fileSize: {
-            fontSize: number;
-            color: string;
-        };
     };
 };
 export default _default;

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

@@ -1 +1 @@
-{"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"}
+{"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,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box } from '../../core';
+import { Box } from '../../core/Box';
 import { DragAndDropFile } from './DragAndDropFile';
 import { useStyles } from './DragAndDropFile.styles';
 export default {

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

@@ -4,7 +4,7 @@ export declare const useStyles: () => {
         borderStyle: "dashed";
         borderColor: string;
         padding: string | number;
-        borderRadius: number;
+        borderRadius: import("@alveole/theme").Radius;
         backgroundColor: string;
         cursor: "pointer";
     };
@@ -31,59 +31,13 @@ export declare const useStyles: () => {
         color: string;
         backgroundColor: string;
         padding: string | number;
-        borderRadius: number;
+        borderRadius: import("@alveole/theme").Radius;
         width: import("@alveole/theme").Spacing;
         height: import("@alveole/theme").Spacing;
         marginBottom: string | number;
     };
-    filesListContainer: {
-        marginTop: string | number;
-    };
-    filesListHeader: {
-        display: "flex";
-        flexDirection: "row";
-        justifyContent: "space-between";
-        alignItems: "center";
-        marginBottom: string | number;
-    };
-    filesListTitle: {
-        fontWeight: "bold";
-    };
-    filesListBox: {
-        borderWidth: number;
-        borderColor: string;
-        borderRadius: number;
-        padding: string | number;
-        backgroundColor: string;
-    };
-    fileItemContainer: {
-        display: "flex";
-        flexDirection: "row";
-        alignItems: "center";
-        gap: string | number;
-        padding: string | number;
-        marginBottom: string | number;
-        backgroundColor: string;
-        borderRadius: number;
-    };
-    fileItemContainerLast: {
-        marginBottom: number;
-    };
-    fileIcon: {
-        color: string;
-    };
-    fileInfo: {
-        flex: number;
-        display: "flex";
-        flexDirection: "column";
-        gap: string | number;
-    };
     fileName: {
         fontWeight: "bold";
     };
-    fileSize: {
-        fontSize: number;
-        color: string;
-    };
 };
 //# sourceMappingURL=DragAndDropFile.styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"DragAndDropFile.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/DragAndDropFile/DragAndDropFile.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuFnB,CAAC"}
+{"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,11 +1,11 @@
 import { makeStyles } from '@alveole/theme';
-export const useStyles = makeStyles(({ color, spacing, spacingValue }) => ({
+export const useStyles = makeStyles(({ color, spacing, spacingValue, radius }) => ({
     container: {
         borderWidth: 1,
         borderStyle: 'dashed',
         borderColor: color.border['contrast-grey'],
-        padding: spacing('200'),
-        borderRadius: 8,
+        padding: spacing('4W'),
+        borderRadius: radius('lg'),
         backgroundColor: color.alpha(color.background['alt-grey'], 0.3),
         cursor: 'pointer',
     },
@@ -31,59 +31,13 @@ export const useStyles = makeStyles(({ color, spacing, spacingValue }) => ({
     icon: {
         color: color.text.mention,
         backgroundColor: color.background['alt-grey'],
-        padding: spacing('100'),
-        borderRadius: 12,
+        padding: spacing('2W'),
+        borderRadius: radius('lg'),
         width: spacingValue('200'),
         height: spacingValue('200'),
-        marginBottom: spacing('100'),
-    },
-    filesListContainer: {
-        marginTop: spacing('100'),
-    },
-    filesListHeader: {
-        display: 'flex',
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        marginBottom: spacing('050'),
-    },
-    filesListTitle: {
-        fontWeight: 'bold',
-    },
-    filesListBox: {
-        borderWidth: 1,
-        borderColor: color.border['default-grey'],
-        borderRadius: 8,
-        padding: spacing('050'),
-        backgroundColor: color.background.default,
-    },
-    fileItemContainer: {
-        display: 'flex',
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: spacing('050'),
-        padding: spacing('050'),
-        marginBottom: spacing('025'),
-        backgroundColor: color.background['alt-grey'],
-        borderRadius: 8,
-    },
-    fileItemContainerLast: {
-        marginBottom: 0,
-    },
-    fileIcon: {
-        color: color.text['default-error'],
-    },
-    fileInfo: {
-        flex: 1,
-        display: 'flex',
-        flexDirection: 'column',
-        gap: spacing('025'),
+        marginBottom: spacing('2W'),
     },
     fileName: {
         fontWeight: 'bold',
     },
-    fileSize: {
-        fontSize: 12,
-        color: color.text['default-grey'],
-    },
 }));

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import { DragAndDropFileProps } from './DragAndDropFile';
-export declare const DragAndDropFile: (props: DragAndDropFileProps) => React.JSX.Element;
+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 +1 @@
-{"version":3,"file":"DragAndDropFile.web.d.ts","sourceRoot":"","sources":["../../../src/ui/DragAndDropFile/DragAndDropFile.web.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AA8BzD,eAAO,MAAM,eAAe,GAAI,OAAO,oBAAoB,sBAyN1D,CAAC"}
+{"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,175 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, FormControlCaption, FormControlFileInput, FormControlHint, FormControlLabel, LucideIcon, } from '@alveole/components';
-import React from 'react';
-import { Alert } from '../../core/Alert';
+import { Box } from '../../core/Box';
+import { FileInput, FormControlCaption, FormControlHint, FormControlLabel } from '../FormControl';
+import { LeadingSlot } from '../Leading';
 import { useStyles } from './DragAndDropFile.styles';
-function fileMatchesType(file, types) {
-    if (!types || types.length === 0)
-        return true;
-    const mime = file.type || '';
-    const wantsImage = types.includes('image');
-    const wantsPdf = types.includes('pdf');
-    const wantsCsv = types.includes('csv');
-    if (wantsImage && mime.startsWith('image/'))
-        return true;
-    if (wantsPdf && (mime === 'application/pdf' || mime.endsWith('/pdf')))
-        return true;
-    if (wantsCsv && (mime === 'text/csv' || mime === 'application/csv' || file.name?.endsWith('.csv')))
-        return true;
-    return false;
-}
-function fileToDocumentPickerAsset(file) {
-    const uri = URL.createObjectURL(file);
-    return {
-        uri,
-        name: file.name,
-        size: file.size,
-        mimeType: file.type || 'application/octet-stream',
-        file,
-    };
-}
-function filesToDocumentPickerAssets(files) {
-    return files.map(file => fileToDocumentPickerAsset(file));
-}
+import { useDepotFichier } from './useDepotFichier';
 export const DragAndDropFile = (props) => {
-    const { value, label, hint, icon, type, error, success, onChange, multiple } = props;
+    const { label, hint, leading, type, error, success, multiple } = props;
     const styles = useStyles();
-    const [isOver, setIsOver] = React.useState(false);
-    const [isMouthOver, setIsMouthOver] = React.useState(false);
-    const [forceOpen, setForceOpen] = React.useState(false);
-    const onValueChange = v => {
-        if (type == null)
-            return onChange(v);
-        if (multiple && Array.isArray(v)) {
-            const invalidFiles = v.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(v);
-        }
-        const mimeType = v?.mimeType;
-        if (mimeType == null)
-            return onChange(v);
-        const fileName = v?.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(v);
-        Alert.alert({ title: 'Type de fichier incorrect', message: `Le format du fichier n'est pas pris en charge` });
-    };
-    const emitFile = React.useCallback((file) => {
-        if (!fileMatchesType(file, type)) {
-            Alert.alert({ title: 'Type de fichier incorrect', message: `Le format du fichier n'est pas pris en charge` });
-            return;
-        }
-        const asset = fileToDocumentPickerAsset(file);
-        onValueChange?.(asset);
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [type]);
-    const emitFiles = React.useCallback((files) => {
-        const validFiles = files.filter(file => fileMatchesType(file, type));
-        const invalidFiles = files.filter(file => !fileMatchesType(file, type));
-        if (invalidFiles.length > 0) {
-            Alert.alert({ title: 'Type de fichier incorrect', message: `Certains fichiers ne sont pas pris en charge` });
-        }
-        if (validFiles.length > 0) {
-            const assets = filesToDocumentPickerAssets(validFiles);
-            onValueChange?.(assets);
-        }
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [type]);
-    const onDrop = React.useCallback((e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        setIsOver(false);
-        const dt = e.dataTransfer;
-        const files = [];
-        if (dt?.items?.length) {
-            for (let i = 0; i < dt.items.length; i++) {
-                const it = dt.items[i];
-                if (it.kind === 'file') {
-                    const f = it.getAsFile();
-                    if (f)
-                        files.push(f);
-                }
-            }
-        }
-        else if (dt?.files?.length) {
-            for (let i = 0; i < dt.files.length; i++) {
-                const f = dt.files[i];
-                if (f)
-                    files.push(f);
-            }
-        }
-        if (files.length > 0) {
-            if (multiple)
-                emitFiles(files);
-            else
-                emitFile(files[0]);
-        }
-    }, [emitFile, emitFiles, multiple]);
-    const onDragOver = React.useCallback((e) => {
-        e.preventDefault();
-        if (!isOver)
-            setIsOver(true);
-    }, [isOver]);
-    const onDragLeave = React.useCallback((e) => {
-        e.preventDefault();
-        if (isOver)
-            setIsOver(false);
-    }, [isOver]);
-    const onMouseOver = React.useCallback((e) => {
-        e.preventDefault();
-        if (!isMouthOver)
-            setIsMouthOver(true);
-    }, [isMouthOver]);
-    const onMouseLeave = React.useCallback((e) => {
-        e.preventDefault();
-        if (isMouthOver)
-            setIsMouthOver(false);
-    }, [isMouthOver]);
-    React.useEffect(() => {
-        return () => {
-            if (Array.isArray(value)) {
-                value.forEach(file => {
-                    const uri = file?.uri;
-                    if (uri?.startsWith('blob:'))
-                        try {
-                            URL.revokeObjectURL(uri);
-                        }
-                        catch { }
-                });
-            }
-            else {
-                const uri = value?.uri;
-                if (uri?.startsWith('blob:'))
-                    try {
-                        URL.revokeObjectURL(uri);
-                    }
-                    catch { }
-            }
-        };
-    }, [value]);
-    const styleContainer = React.useMemo(() => ({
+    const depot = useDepotFichier(props);
+    const styleContainer = {
         ...styles.container,
-        ...(isMouthOver ? styles.containerMouseHover : {}),
-        ...(isOver ? styles.containerHover : {}),
+        ...(depot.isMouseOver ? styles.containerMouseHover : {}),
+        ...(depot.isOver ? styles.containerHover : {}),
         ...(error ? styles.containerError : {}),
-    }), 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [error, isMouthOver, isOver]);
-    return (_jsxs("div", { tabIndex: 0, onDrop: onDrop, onDragOver: onDragOver, onDragEnter: onDragOver, onDragLeave: onDragLeave, onMouseOver: onMouseOver, onMouseEnter: onMouseOver, onMouseLeave: onMouseLeave, onClick: () => setForceOpen(true), style: styleContainer, children: [_jsx(Box, { tag: "drag-and-drop-file-icon", display: "flex", flexDirection: "row", justify: "center", children: _jsx(LucideIcon, { size: "xl", name: icon ?? 'Upload', 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(FormControlFileInput, { ...props, canChange: false, onChange: onValueChange, reopen: forceOpen, onPickStart: () => setForceOpen(false), multiple: multiple, type: type }) }) }), (error || success) && (_jsx(Box, { tag: "drag-and-drop-file-error", style: styles.webError, children: _jsx(FormControlCaption, { ...props }) }))] }));
+    };
+    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

@@ -0,0 +1,22 @@
+type ItemDepose = {
+    kind: string;
+    getAsFile(): File | null;
+};
+/**
+ * Sous-ensemble de `DataTransfer` utilise par ce module. Un vrai `DataTransfer` du
+ * navigateur le satisfait deja structurellement : le typer ainsi, plutot que sur
+ * `DataTransfer` en entier, permet de le simuler dans les tests avec de simples objets
+ * litteraux, sans double assertion de type.
+ */
+type DepotDeFichiers = {
+    items?: ArrayLike<ItemDepose>;
+    files?: ArrayLike<File>;
+} | null | undefined;
+/**
+ * Fichiers deposes (drag-and-drop) portes par un DataTransfer, lus via l'API moderne
+ * `items` (qui permet d'ignorer les items non-fichiers), avec repli sur l'API historique
+ * `files` quand `items` est absent ou vide.
+ */
+export declare const fichiersDuDataTransfer: (dt: DepotDeFichiers) => File[];
+export {};
+//# sourceMappingURL=fichiersDuDataTransfer.d.ts.map

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

@@ -0,0 +1 @@
+{"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/fichiersDuDataTransfer.js

@@ -0,0 +1,16 @@
+const fichiersDepuisItems = (items) => Array.from(items)
+    .filter(item => item.kind === 'file')
+    .map(item => item.getAsFile())
+    .filter((fichier) => fichier !== null);
+/**
+ * Fichiers deposes (drag-and-drop) portes par un DataTransfer, lus via l'API moderne
+ * `items` (qui permet d'ignorer les items non-fichiers), avec repli sur l'API historique
+ * `files` quand `items` est absent ou vide.
+ */
+export const fichiersDuDataTransfer = (dt) => {
+    if (dt?.items?.length)
+        return fichiersDepuisItems(dt.items);
+    if (dt?.files?.length)
+        return Array.from(dt.files);
+    return [];
+};

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

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,77 @@
+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),
+    };
+};

package/dist/ui/DurationInput/DurationInput.d.ts

@@ -1,21 +1,10 @@
-import { FormControlCaptionProps, FormControlHintProps, FormControlLabelProps } from '@alveole/components';
 import React from 'react';
-export type DurationInputProps = FormControlLabelProps & FormControlHintProps & FormControlCaptionProps & {
+import { ChampHHMMProps } from '../FormControl/ChampHHMM';
+export type DurationInputProps = ChampHHMMProps;
+export declare const DurationInput: React.ForwardRefExoticComponent<import("..").FormControlCaptionProps & {
     value?: string;
     onChange?: (value: string) => void;
     onBlur?: () => void;
     disabled?: boolean;
-};
-export declare const DurationInput: React.ForwardRefExoticComponent<{
-    label: string;
-    labelRight?: React.ReactNode;
-    optional?: boolean;
-    optionalText?: string;
-    disabled?: boolean;
-} & FormControlCaptionProps & FormControlHintProps & {
-    value?: string;
-    onChange?: (value: string) => void;
-    onBlur?: () => void;
-    disabled?: boolean;
-} & React.RefAttributes<any>>;
+} & React.RefAttributes<import("react-native").TextInput>>;
 //# sourceMappingURL=DurationInput.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"DurationInput.d.ts","sourceRoot":"","sources":["../../../src/ui/DurationInput/DurationInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,uBAAuB,EAEvB,oBAAoB,EAEpB,qBAAqB,EAGtB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,MAAM,kBAAkB,GAAG,qBAAqB,GACpD,oBAAoB,GACpB,uBAAuB,GAAG;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEJ,eAAO,MAAM,aAAa;;;;;;;YANd,MAAM;eACH,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;aACzB,MAAM,IAAI;eACR,OAAO;6BAkDpB,CAAC"}
+{"version":3,"file":"DurationInput.d.ts","sourceRoot":"","sources":["../../../src/ui/DurationInput/DurationInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAa,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAErE,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAAC;AAEhD,eAAO,MAAM,aAAa;;;;;0DAExB,CAAC"}

package/dist/ui/DurationInput/DurationInput.js

@@ -1,22 +1,7 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { FormControl, FormControlCaption, FormControlHint, FormControlLabel, InputHeading, TextInput, } from '@alveole/components';
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
-export const DurationInput = React.forwardRef(function DurationInput({ label, labelRight, hint, error, success, value, onChange, onBlur, disabled }, ref) {
-    const [localValue, setLocalValue] = React.useState(value ?? '');
-    React.useEffect(() => {
-        setLocalValue(value ?? '');
-    }, [value]);
-    const handleChangeText = (text) => {
-        const digits = text.replace(/\D/g, '').slice(0, 4);
-        const formatted = digits.length <= 2 ? digits : `${digits.slice(0, 2)}:${digits.slice(2)}`;
-        setLocalValue(formatted);
-        if (digits.length === 0 || digits.length === 4) {
-            onChange?.(formatted);
-        }
-    };
-    const handleBlur = () => {
-        onChange?.(localValue);
-        onBlur?.();
-    };
-    return (_jsxs(FormControl, { children: [_jsxs(InputHeading, { children: [!!label && (_jsx(FormControlLabel, { labelRight: labelRight, label: label, disabled: disabled, error: error, success: success })), !!hint && _jsx(FormControlHint, { hint: hint, disabled: disabled })] }), _jsx(TextInput, { ref: ref, placeholder: "HH:MM", value: localValue, onChangeText: handleChangeText, onBlur: handleBlur, disabled: disabled, inputMode: "numeric", maxLength: 5 }), (error || success) && _jsx(FormControlCaption, { error: error, success: success })] }));
+import { formaterHHMM } from '../FormControl';
+import { ChampHHMM } from '../FormControl/ChampHHMM';
+export const DurationInput = React.forwardRef(function DurationInput(props, ref) {
+    return _jsx(ChampHHMM, { ref: ref, ...props, formater: formaterHHMM, clavier: { inputMode: 'numeric' } });
 });