@alveole/components 1.8.1 → 1.8.3

package/dist/ui/DocumentViewer/DocumentViewerPDF.web.js

@@ -1,11 +1,11 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Box } from '@alveole/components';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Typography } from '@alveole/components';
 import React from 'react';
 import { useStyles } from './DocumentViewer.styles';
 const isPdfCancellationError = (error) => {
     if (!(error instanceof Error))
         return false;
-    return (['RenderingCancelledException', 'AbortException', 'UnknownErrorException'].includes(error.name) ||
+    return (['RenderingCancelledException', 'AbortException'].includes(error.name) ||
         error.message.includes('Worker was terminated') ||
         error.message.includes("Cannot read properties of null (reading 'sendWithPromise')"));
 };
@@ -34,14 +34,21 @@ const loadPdfJs = (() => {
     };
 })();
 export const DocumentViewerPDF = (props) => {
-    const { source, page, rotation, height = '100%', scale = 1, onReady } = props;
+    const { source, page, rotation, height = '100%', scale = 1, onReady, errorLabel = 'Le PDF ne peut pas être affiché', } = props;
     const styles = useStyles();
     const [pdf, setPdf] = React.useState(null);
+    const [hasError, setHasError] = React.useState(false);
+    const [prevSource, setPrevSource] = React.useState(source);
+    if (prevSource !== source) {
+        setPrevSource(source);
+        setHasError(false);
+    }
     const [viewerSize, setViewerSize] = React.useState({ width: 0, height: 0 });
     const [isHovered, setIsHovered] = React.useState(false);
     const [transformOrigin, setTransformOrigin] = React.useState('50% 50%');
     const [renderedPageSize, setRenderedPageSize] = React.useState({ width: 0, height: 0 });
     const canvasRef = React.useRef(null);
+    const measureRef = React.useRef(null);
     const onReadyRef = React.useRef(onReady);
     const hoveredScale = isHovered ? 2 : 1;
     React.useEffect(() => {
@@ -60,6 +67,7 @@ export const DocumentViewerPDF = (props) => {
         if (!active)
             return;
         setPdf(null);
+        setHasError(true);
     }, []);
     const onPageLoadedSuccess = React.useCallback(async (pagePdf, active) => {
         if (!active || !canvasRef.current)
@@ -85,6 +93,27 @@ export const DocumentViewerPDF = (props) => {
             transform: pixelRatio === 1 ? undefined : [pixelRatio, 0, 0, pixelRatio, 0, 0],
         });
     }, [rotation, scale, viewerSize.height, viewerSize.width]);
+    // ResizeObserver pour mesurer le conteneur — onLayout React Native for Web
+    // ne fonctionne pas avec les custom HTML tags (tag="document-viewer-pdf").
+    React.useEffect(() => {
+        const el = measureRef.current;
+        if (!el)
+            return;
+        const update = (width, height) => {
+            if (width > 0 && height > 0) {
+                setViewerSize({ width, height });
+            }
+        };
+        const observer = new ResizeObserver(entries => {
+            const entry = entries[0];
+            if (entry)
+                update(entry.contentRect.width, entry.contentRect.height);
+        });
+        observer.observe(el);
+        const rect = el.getBoundingClientRect();
+        update(rect.width, rect.height);
+        return () => observer.disconnect();
+    }, []);
     React.useEffect(() => {
         let isActive = true;
         let loadingTask = null;
@@ -92,7 +121,7 @@ export const DocumentViewerPDF = (props) => {
             .then(pdfjs => {
             if (!isActive)
                 return;
-            loadingTask = pdfjs.getDocument(source);
+            loadingTask = pdfjs.getDocument({ url: source });
             return loadingTask.promise
                 .then(nextPdf => onPdfLoadedSuccess(nextPdf, isActive))
                 .catch(error => {
@@ -136,13 +165,6 @@ export const DocumentViewerPDF = (props) => {
             renderTask?.cancel?.();
         };
     }, [pdf, page, rotation, scale, viewerSize, onPageLoadedSuccess, onPdfLoadedError]);
-    const handleLayout = React.useCallback((event) => {
-        const nextWidth = event?.nativeEvent?.layout?.width;
-        const nextHeight = event?.nativeEvent?.layout?.height;
-        if (typeof nextWidth === 'number' && nextWidth > 0 && typeof nextHeight === 'number' && nextHeight > 0) {
-            setViewerSize({ width: nextWidth, height: nextHeight });
-        }
-    }, []);
     const handlePointerMove = React.useCallback((event) => {
         const rect = event.currentTarget?.getBoundingClientRect?.();
         if (!rect)
@@ -152,13 +174,13 @@ export const DocumentViewerPDF = (props) => {
         setTransformOrigin(`${Math.max(0, Math.min(100, x))}% ${Math.max(0, Math.min(100, y))}%`);
     }, []);
     React.useEffect(() => () => void pdf?.destroy?.(), [pdf]);
-    return (_jsx(Box, { tag: "document-viewer-pdf", width: '100%', height: height, onLayout: handleLayout, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), onPointerEnter: () => setIsHovered(true), onPointerLeave: () => setIsHovered(false), onPointerMove: handlePointerMove, style: styles.viewerPdfContent, children: _jsx(Box, { width: '100%', height: '100%', p: '1V', style: styles.viewerPdfStage, children: _jsx(Box, { style: [
-                    styles.viewerPdfCanvasWrapper,
-                    {
-                        width: renderedPageSize.width,
-                        height: renderedPageSize.height,
-                        transformOrigin,
-                        transform: [{ scale: hoveredScale }],
-                    },
-                ], children: _jsx("canvas", { ref: canvasRef, style: styles.viewerPdfCanvas }) }) }) }));
+    return (_jsxs(Box, { tag: "document-viewer-pdf", width: '100%', height: height, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), onPointerEnter: () => setIsHovered(true), onPointerLeave: () => setIsHovered(false), onPointerMove: handlePointerMove, style: [styles.viewerPdfContent, { position: 'relative' }], children: [_jsx("div", { ref: measureRef, style: { position: 'absolute', inset: 0, pointerEvents: 'none' } }), _jsxs(Box, { width: '100%', height: '100%', p: '1V', style: styles.viewerPdfStage, children: [_jsx(Box, { style: [
+                            styles.viewerPdfCanvasWrapper,
+                            {
+                                width: renderedPageSize.width,
+                                height: renderedPageSize.height,
+                                transformOrigin,
+                                transform: [{ scale: hoveredScale }],
+                            },
+                        ], children: _jsx("canvas", { ref: canvasRef, style: styles.viewerPdfCanvas }) }), hasError && (_jsx(Box, { style: styles.viewerPdfOverlay, children: _jsx(Typography, { style: styles.viewerPdfErrorLabel, children: errorLabel }) }))] })] }));
 };

package/dist/ui/DurationInput/DurationInput.js

@@ -18,5 +18,5 @@ export const DurationInput = React.forwardRef(function DurationInput({ label, la
         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 })] }));
+    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 })] }));
 });

package/dist/ui/EmailField/EmailField.js

@@ -4,5 +4,5 @@ import React from 'react';
 import { EmailInput } from '../EmailInput';
 export const EmailField = React.forwardRef(function EmailField(props, ref) {
     const { label, labelRight, hint, error, success, disabled, onChange } = props;
-    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(EmailInput, { ref: ref, onChangeText: onChange, ...props }), (error || success) && _jsx(FormControlCaption, { error: error, success: success })] }));
+    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(EmailInput, { ref: ref, onChangeText: onChange, ...props }), (error || success) && _jsx(FormControlCaption, { error: error, success: success })] }));
 });

package/dist/ui/FileField/FileField.js

@@ -23,5 +23,5 @@ export const FileField = (props) => {
             });
         }
     };
-    return (_jsxs(FormControl, { style: styles.fileInput, 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(FormControlFileInput, { ...props, onChange: onValueChange }), (error || success) && _jsx(FormControlCaption, { error: error, success: success })] }));
+    return (_jsxs(FormControl, { style: styles.fileInput, 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(FormControlFileInput, { ...props, onChange: onValueChange }), (error || success) && _jsx(FormControlCaption, { error: error, success: success })] }));
 };

package/dist/ui/FormControl/FormControlDateInput.js

@@ -34,7 +34,7 @@ export const FormControlDateInput = React.forwardRef(function DateInput(props, r
             return formatForInput(value, 'month');
         return value;
     }, [type, value]);
-    return (_jsx(Box, { tag: "form-control-text-input", style: styles.inputContainer, children: _jsx(Box, { tag: "form-control-text-input-inner", style: {
+    return (_jsx(Box, { tag: "form-control-date-input", style: styles.inputContainer, children: _jsx(Box, { tag: "form-control-date-input-inner", style: {
                 ...styles.inputInner,
                 ...(props.disabled ? styles.inputDisabled : {}),
             }, children: _jsx("input", { ref: ref, onChange: e => {

package/dist/ui/FormControl/FormControlHint.js

@@ -4,5 +4,5 @@ import { useStyles } from './FormControl.styles';
 export const FormControlHint = (props) => {
     const { hint, disabled } = props;
     const styles = useStyles();
-    return (_jsx(Box, { style: styles.hintContainer, children: _jsx(Typography, { style: { ...styles.hint, ...(disabled ? styles.hintDisabled : {}) }, children: hint }) }));
+    return (_jsx(Box, { tag: "form-control-hint", style: styles.hintContainer, children: _jsx(Typography, { style: { ...styles.hint, ...(disabled ? styles.hintDisabled : {}) }, children: hint }) }));
 };

package/dist/ui/FormControl/FormControlLabel.js

@@ -4,10 +4,10 @@ import { useStyles } from './FormControl.styles';
 export const FormControlLabel = (props) => {
     const { label, labelRight, optional = false, optionalText = '(optionnel)', disabled, error, success } = props;
     const styles = useStyles();
-    return (_jsxs(Box, { style: styles.labelContainer, children: [_jsx(Typography, { style: {
+    return (_jsxs(Box, { tag: "form-control-label", style: styles.labelContainer, children: [_jsx(Typography, { style: {
                     ...styles.label,
                     ...(error ? styles.errorText : {}),
                     ...(success ? styles.successText : {}),
                     ...(disabled ? styles.labelDisabled : {}),
-                }, children: label }), optional && _jsx(Typography, { style: styles.optionalText, children: optionalText }), label && (_jsx(Box, { mt: 'auto', mb: 'auto', ml: 'auto', children: labelRight }))] }));
+                }, children: label }), !!optional && _jsx(Typography, { style: styles.optionalText, children: optionalText }), !!label && (_jsx(Box, { mt: 'auto', mb: 'auto', ml: 'auto', children: labelRight }))] }));
 };

package/dist/ui/FormControl/FormControlNumberInput.js

@@ -5,7 +5,7 @@ import { useStyles } from './FormControl.styles';
 export const FormControlNumberInput = React.forwardRef(function DateInput(props, ref) {
     const { value, onChange, startAdornment, endAdornment, ...inputProps } = props;
     const styles = useStyles();
-    return (_jsx(Box, { tag: "form-control-text-input", style: styles.inputContainer, children: _jsxs(Box, { tag: "form-control-text-input-inner", style: {
+    return (_jsx(Box, { tag: "form-control-number-input", style: styles.inputContainer, children: _jsxs(Box, { tag: "form-control-number-input-inner", style: {
                 ...styles.inputInner,
                 ...(props.disabled ? styles.inputDisabled : {}),
                 ...(endAdornment ? { paddingRight: 0 } : {}),