design-zystem 1.0.213 → 1.0.214

package/dist/index.d.mts

@@ -776,6 +776,33 @@ declare const formatDuration: (minutes: number | null | undefined, language?: st
 declare const truncateText: (text: string | null | undefined, maxLength?: number) => string;
 declare const truncateFileName: (fileName: string | null | undefined, maxLength?: number) => string;
 
+/**
+ * Optimiser image:
+ * - Converti en webp (ou png/jpeg selon support navigateur)
+ * - Resize l'image pour ne pas dépasser maxDimension
+ * - Compression à la taille cible (meilleur effort)
+ *
+ * Retourne { file, error } — jamais de throw.
+ * Si error !== null, l'appelant peut afficher un message à l'utilisateur.
+ * Si l'environnement ne supporte pas les APIs nécessaires, passthrough silencieux.
+ */
+interface OptimizeImageResult {
+    file: File | null | undefined;
+    error: string | null;
+}
+interface OptimizeImageOptions {
+    maxDimension?: number;
+    targetSizeKB?: number;
+    qualityStart?: number;
+    qualityMin?: number;
+    qualityStep?: number;
+    /** Timeout en ms pour le chargement de l'image (défaut : 15 000) */
+    imageLoadTimeoutMs?: number;
+    /** Timeout en ms pour toBlob (défaut : 15 000) */
+    toBlobTimeoutMs?: number;
+}
+declare const optimizeImage: (file: File | null | undefined, desiredBaseName: string, opts?: OptimizeImageOptions) => Promise<OptimizeImageResult>;
+
 declare const colors: {
     readonly primary: "#52bdc4";
     readonly secondary: "#f8af2d";
@@ -851,4 +878,4 @@ declare const colors: {
     readonly light_blue: "#F1F5F9";
 };
 
-export { Accordion, type AccordionItem, Box, Bubble, Bulk, Button, CardSkeleton, Checkbox, Col, ColorPicker, DatePicker, Divider, Drawer, FileUploadZone, Grid, Icon, IconTabs, Image, Input, Link, List, ListItem, MetricCard, Modal, ModalConfirmation, MultiSelect, NewModal, Options, PageContainer, Pagination, Popover, Radio, Row, Select, type SelectOption, type SelectProps, SkeletonRow, SliderInput, Spinner, Stepper, Switch, Table, TableBody, TableCell, TableFooter, TableFooterCell, TableFooterRow, TableHeader, TableHeaderCell, TableHeaderRow, TableRow, Tabs, TagBubble, Text, Tooltip, colors, formatDate, formatDistance, formatDuration, truncateFileName, truncateText };
+export { Accordion, type AccordionItem, Box, Bubble, Bulk, Button, CardSkeleton, Checkbox, Col, ColorPicker, DatePicker, Divider, Drawer, FileUploadZone, Grid, Icon, IconTabs, Image, Input, Link, List, ListItem, MetricCard, Modal, ModalConfirmation, MultiSelect, NewModal, Options, PageContainer, Pagination, Popover, Radio, Row, Select, type SelectOption, type SelectProps, SkeletonRow, SliderInput, Spinner, Stepper, Switch, Table, TableBody, TableCell, TableFooter, TableFooterCell, TableFooterRow, TableHeader, TableHeaderCell, TableHeaderRow, TableRow, Tabs, TagBubble, Text, Tooltip, colors, formatDate, formatDistance, formatDuration, optimizeImage, truncateFileName, truncateText };

package/dist/index.d.ts

@@ -776,6 +776,33 @@ declare const formatDuration: (minutes: number | null | undefined, language?: st
 declare const truncateText: (text: string | null | undefined, maxLength?: number) => string;
 declare const truncateFileName: (fileName: string | null | undefined, maxLength?: number) => string;
 
+/**
+ * Optimiser image:
+ * - Converti en webp (ou png/jpeg selon support navigateur)
+ * - Resize l'image pour ne pas dépasser maxDimension
+ * - Compression à la taille cible (meilleur effort)
+ *
+ * Retourne { file, error } — jamais de throw.
+ * Si error !== null, l'appelant peut afficher un message à l'utilisateur.
+ * Si l'environnement ne supporte pas les APIs nécessaires, passthrough silencieux.
+ */
+interface OptimizeImageResult {
+    file: File | null | undefined;
+    error: string | null;
+}
+interface OptimizeImageOptions {
+    maxDimension?: number;
+    targetSizeKB?: number;
+    qualityStart?: number;
+    qualityMin?: number;
+    qualityStep?: number;
+    /** Timeout en ms pour le chargement de l'image (défaut : 15 000) */
+    imageLoadTimeoutMs?: number;
+    /** Timeout en ms pour toBlob (défaut : 15 000) */
+    toBlobTimeoutMs?: number;
+}
+declare const optimizeImage: (file: File | null | undefined, desiredBaseName: string, opts?: OptimizeImageOptions) => Promise<OptimizeImageResult>;
+
 declare const colors: {
     readonly primary: "#52bdc4";
     readonly secondary: "#f8af2d";
@@ -851,4 +878,4 @@ declare const colors: {
     readonly light_blue: "#F1F5F9";
 };
 
-export { Accordion, type AccordionItem, Box, Bubble, Bulk, Button, CardSkeleton, Checkbox, Col, ColorPicker, DatePicker, Divider, Drawer, FileUploadZone, Grid, Icon, IconTabs, Image, Input, Link, List, ListItem, MetricCard, Modal, ModalConfirmation, MultiSelect, NewModal, Options, PageContainer, Pagination, Popover, Radio, Row, Select, type SelectOption, type SelectProps, SkeletonRow, SliderInput, Spinner, Stepper, Switch, Table, TableBody, TableCell, TableFooter, TableFooterCell, TableFooterRow, TableHeader, TableHeaderCell, TableHeaderRow, TableRow, Tabs, TagBubble, Text, Tooltip, colors, formatDate, formatDistance, formatDuration, truncateFileName, truncateText };
+export { Accordion, type AccordionItem, Box, Bubble, Bulk, Button, CardSkeleton, Checkbox, Col, ColorPicker, DatePicker, Divider, Drawer, FileUploadZone, Grid, Icon, IconTabs, Image, Input, Link, List, ListItem, MetricCard, Modal, ModalConfirmation, MultiSelect, NewModal, Options, PageContainer, Pagination, Popover, Radio, Row, Select, type SelectOption, type SelectProps, SkeletonRow, SliderInput, Spinner, Stepper, Switch, Table, TableBody, TableCell, TableFooter, TableFooterCell, TableFooterRow, TableHeader, TableHeaderCell, TableHeaderRow, TableRow, Tabs, TagBubble, Text, Tooltip, colors, formatDate, formatDistance, formatDuration, optimizeImage, truncateFileName, truncateText };

package/dist/index.js

@@ -75,7 +75,7 @@ __export(index_exports, {
   Grid: () => Grid,
   Icon: () => Icon,
   IconTabs: () => IconTabs,
-  Image: () => Image,
+  Image: () => Image2,
   Input: () => Input,
   Link: () => Link,
   List: () => List,
@@ -115,6 +115,7 @@ __export(index_exports, {
   formatDate: () => formatDate,
   formatDistance: () => formatDistance,
   formatDuration: () => formatDuration,
+  optimizeImage: () => optimizeImage_default,
   truncateFileName: () => truncateFileName,
   truncateText: () => truncateText
 });
@@ -3799,7 +3800,7 @@ var StyledImage = import_styled_components36.default.img`
   height: ${(props) => props.height || "auto"};
   display: block;
 `;
-var Image = (_a) => {
+var Image2 = (_a) => {
   var _b = _a, {
     src,
     alt = "",
@@ -4305,15 +4306,25 @@ var Popover = ({ items = [], children }) => {
   const menuRef = (0, import_react21.useRef)(null);
   const [menuPosition, setMenuPosition] = (0, import_react21.useState)({ top: 0, left: 0 });
   const updatePosition = (0, import_react21.useCallback)(() => {
+    var _a;
     if (!ref.current) {
       return;
     }
     const rect = ref.current.getBoundingClientRect();
+    const estimatedMenuHeight = items.length * 42 + 8;
+    const menuHeight = ((_a = menuRef.current) == null ? void 0 : _a.getBoundingClientRect().height) ? menuRef.current.getBoundingClientRect().height : estimatedMenuHeight;
+    const viewportPadding = 8;
+    const spaceBelow = window.innerHeight - rect.bottom;
+    const shouldOpenAbove = spaceBelow < menuHeight + 6;
+    const top = shouldOpenAbove ? rect.top - menuHeight - 6 : rect.bottom + 6;
     setMenuPosition({
-      top: rect.bottom + 6,
+      top: Math.max(
+        viewportPadding,
+        Math.min(top, window.innerHeight - menuHeight - viewportPadding)
+      ),
       left: rect.right
     });
-  }, []);
+  }, [items.length]);
   (0, import_react21.useEffect)(() => {
     const handleClickOutside = (event) => {
       var _a, _b;
@@ -4324,7 +4335,7 @@ var Popover = ({ items = [], children }) => {
       }
     };
     if (open) {
-      updatePosition();
+      requestAnimationFrame(updatePosition);
       window.addEventListener("scroll", updatePosition, true);
       window.addEventListener("resize", updatePosition);
       document.addEventListener("mousedown", handleClickOutside);
@@ -5035,6 +5046,140 @@ var truncateFileName = (fileName, maxLength = 20) => {
   }
   return fileName;
 };
+
+// src/services/optimizeImage/optimizeImage.ts
+var hasDocument = () => typeof document !== "undefined";
+var hasObjectURL = () => typeof URL !== "undefined" && typeof URL.createObjectURL === "function" && typeof URL.revokeObjectURL === "function";
+var readArrayBuffer = (file) => {
+  if (typeof file.arrayBuffer === "function") {
+    return file.arrayBuffer();
+  }
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(reader.result);
+    reader.onerror = () => {
+      var _a;
+      return reject((_a = reader.error) != null ? _a : new Error("FileReader error"));
+    };
+    reader.readAsArrayBuffer(file);
+  });
+};
+var loadImage = (blob, timeoutMs) => new Promise((resolve, reject) => {
+  const url = URL.createObjectURL(blob);
+  let settled = false;
+  const cleanup = () => {
+    URL.revokeObjectURL(url);
+  };
+  const timer = setTimeout(() => {
+    if (settled) return;
+    settled = true;
+    cleanup();
+    reject(new Error("Image load timeout"));
+  }, timeoutMs);
+  const img = new Image();
+  img.onload = () => {
+    if (settled) return;
+    settled = true;
+    clearTimeout(timer);
+    cleanup();
+    resolve(img);
+  };
+  img.onerror = (e) => {
+    if (settled) return;
+    settled = true;
+    clearTimeout(timer);
+    cleanup();
+    reject(e instanceof Error ? e : new Error("Image load error"));
+  };
+  img.src = url;
+});
+var canvasToBlob = (canvas, mime, quality, timeoutMs) => new Promise((resolve, reject) => {
+  const timer = setTimeout(
+    () => reject(new Error("toBlob timeout")),
+    timeoutMs
+  );
+  canvas.toBlob(
+    (blob) => {
+      clearTimeout(timer);
+      if (blob) {
+        resolve(blob);
+      } else {
+        reject(new Error("toBlob returned null"));
+      }
+    },
+    mime,
+    quality
+  );
+});
+var optimizeImage = async (file, desiredBaseName, opts = {}) => {
+  var _a;
+  if (!file || !((_a = file.type) == null ? void 0 : _a.startsWith("image/"))) {
+    return { file, error: null };
+  }
+  if (!hasDocument() || !hasObjectURL()) {
+    return { file, error: null };
+  }
+  const {
+    maxDimension = 1920,
+    targetSizeKB = 1024,
+    qualityStart = 0.86,
+    qualityMin = 0.5,
+    qualityStep = 0.08,
+    imageLoadTimeoutMs = 15e3,
+    toBlobTimeoutMs = 15e3
+  } = opts;
+  try {
+    const arrayBuf = await readArrayBuffer(file);
+    const blob = new Blob([arrayBuf], { type: file.type });
+    const img = await loadImage(blob, imageLoadTimeoutMs);
+    const scale = Math.min(1, maxDimension / Math.max(img.width, img.height));
+    const outW = Math.max(1, Math.round(img.width * scale));
+    const outH = Math.max(1, Math.round(img.height * scale));
+    const canvas = document.createElement("canvas");
+    canvas.width = outW;
+    canvas.height = outH;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) throw new Error("Canvas 2D context unavailable");
+    if ("imageSmoothingQuality" in ctx) {
+      ctx.imageSmoothingQuality = "high";
+    }
+    ctx.drawImage(img, 0, 0, outW, outH);
+    const supportsWebP = (() => {
+      try {
+        const probe = document.createElement("canvas");
+        return probe.toDataURL("image/webp").startsWith("data:image/webp");
+      } catch (e) {
+        return false;
+      }
+    })();
+    const sourceHasAlphaHint = /png|webp|gif|avif/i.test(file.type);
+    const preferPNG = !supportsWebP && sourceHasAlphaHint;
+    const targetMime = supportsWebP ? "image/webp" : preferPNG ? "image/png" : "image/jpeg";
+    let q = qualityStart;
+    let outBlob = await canvasToBlob(canvas, targetMime, q, toBlobTimeoutMs);
+    let actualMime = outBlob.type || targetMime;
+    if (/webp|jpeg/.test(actualMime)) {
+      while (outBlob.size / 1024 > targetSizeKB && q > qualityMin) {
+        q = Math.max(qualityMin, q - qualityStep);
+        outBlob = await canvasToBlob(canvas, actualMime, q, toBlobTimeoutMs);
+        actualMime = outBlob.type || actualMime;
+      }
+    }
+    const ext = actualMime.includes("webp") ? "webp" : actualMime.includes("png") ? "png" : "jpg";
+    const optimizedFile = new File([outBlob], `${desiredBaseName}.${ext}`, {
+      type: actualMime,
+      lastModified: Date.now()
+    });
+    return { file: optimizedFile, error: null };
+  } catch (error) {
+    console.error("Image optimization error:", error);
+    return {
+      file,
+      error: "Une erreur est survenue lors de l'optimisation de l'image."
+    };
+  }
+};
+var optimizeImage_default = optimizeImage;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Accordion,
@@ -5093,6 +5238,7 @@ var truncateFileName = (fileName, maxLength = 20) => {
   formatDate,
   formatDistance,
   formatDuration,
+  optimizeImage,
   truncateFileName,
   truncateText
 });

package/dist/index.mjs

@@ -3729,7 +3729,7 @@ var StyledImage = styled36.img`
   height: ${(props) => props.height || "auto"};
   display: block;
 `;
-var Image = (_a) => {
+var Image2 = (_a) => {
   var _b = _a, {
     src,
     alt = "",
@@ -4235,15 +4235,25 @@ var Popover = ({ items = [], children }) => {
   const menuRef = useRef12(null);
   const [menuPosition, setMenuPosition] = useState12({ top: 0, left: 0 });
   const updatePosition = useCallback3(() => {
+    var _a;
     if (!ref.current) {
       return;
     }
     const rect = ref.current.getBoundingClientRect();
+    const estimatedMenuHeight = items.length * 42 + 8;
+    const menuHeight = ((_a = menuRef.current) == null ? void 0 : _a.getBoundingClientRect().height) ? menuRef.current.getBoundingClientRect().height : estimatedMenuHeight;
+    const viewportPadding = 8;
+    const spaceBelow = window.innerHeight - rect.bottom;
+    const shouldOpenAbove = spaceBelow < menuHeight + 6;
+    const top = shouldOpenAbove ? rect.top - menuHeight - 6 : rect.bottom + 6;
     setMenuPosition({
-      top: rect.bottom + 6,
+      top: Math.max(
+        viewportPadding,
+        Math.min(top, window.innerHeight - menuHeight - viewportPadding)
+      ),
       left: rect.right
     });
-  }, []);
+  }, [items.length]);
   useEffect13(() => {
     const handleClickOutside = (event) => {
       var _a, _b;
@@ -4254,7 +4264,7 @@ var Popover = ({ items = [], children }) => {
       }
     };
     if (open) {
-      updatePosition();
+      requestAnimationFrame(updatePosition);
       window.addEventListener("scroll", updatePosition, true);
       window.addEventListener("resize", updatePosition);
       document.addEventListener("mousedown", handleClickOutside);
@@ -4965,6 +4975,140 @@ var truncateFileName = (fileName, maxLength = 20) => {
   }
   return fileName;
 };
+
+// src/services/optimizeImage/optimizeImage.ts
+var hasDocument = () => typeof document !== "undefined";
+var hasObjectURL = () => typeof URL !== "undefined" && typeof URL.createObjectURL === "function" && typeof URL.revokeObjectURL === "function";
+var readArrayBuffer = (file) => {
+  if (typeof file.arrayBuffer === "function") {
+    return file.arrayBuffer();
+  }
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(reader.result);
+    reader.onerror = () => {
+      var _a;
+      return reject((_a = reader.error) != null ? _a : new Error("FileReader error"));
+    };
+    reader.readAsArrayBuffer(file);
+  });
+};
+var loadImage = (blob, timeoutMs) => new Promise((resolve, reject) => {
+  const url = URL.createObjectURL(blob);
+  let settled = false;
+  const cleanup = () => {
+    URL.revokeObjectURL(url);
+  };
+  const timer = setTimeout(() => {
+    if (settled) return;
+    settled = true;
+    cleanup();
+    reject(new Error("Image load timeout"));
+  }, timeoutMs);
+  const img = new Image();
+  img.onload = () => {
+    if (settled) return;
+    settled = true;
+    clearTimeout(timer);
+    cleanup();
+    resolve(img);
+  };
+  img.onerror = (e) => {
+    if (settled) return;
+    settled = true;
+    clearTimeout(timer);
+    cleanup();
+    reject(e instanceof Error ? e : new Error("Image load error"));
+  };
+  img.src = url;
+});
+var canvasToBlob = (canvas, mime, quality, timeoutMs) => new Promise((resolve, reject) => {
+  const timer = setTimeout(
+    () => reject(new Error("toBlob timeout")),
+    timeoutMs
+  );
+  canvas.toBlob(
+    (blob) => {
+      clearTimeout(timer);
+      if (blob) {
+        resolve(blob);
+      } else {
+        reject(new Error("toBlob returned null"));
+      }
+    },
+    mime,
+    quality
+  );
+});
+var optimizeImage = async (file, desiredBaseName, opts = {}) => {
+  var _a;
+  if (!file || !((_a = file.type) == null ? void 0 : _a.startsWith("image/"))) {
+    return { file, error: null };
+  }
+  if (!hasDocument() || !hasObjectURL()) {
+    return { file, error: null };
+  }
+  const {
+    maxDimension = 1920,
+    targetSizeKB = 1024,
+    qualityStart = 0.86,
+    qualityMin = 0.5,
+    qualityStep = 0.08,
+    imageLoadTimeoutMs = 15e3,
+    toBlobTimeoutMs = 15e3
+  } = opts;
+  try {
+    const arrayBuf = await readArrayBuffer(file);
+    const blob = new Blob([arrayBuf], { type: file.type });
+    const img = await loadImage(blob, imageLoadTimeoutMs);
+    const scale = Math.min(1, maxDimension / Math.max(img.width, img.height));
+    const outW = Math.max(1, Math.round(img.width * scale));
+    const outH = Math.max(1, Math.round(img.height * scale));
+    const canvas = document.createElement("canvas");
+    canvas.width = outW;
+    canvas.height = outH;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) throw new Error("Canvas 2D context unavailable");
+    if ("imageSmoothingQuality" in ctx) {
+      ctx.imageSmoothingQuality = "high";
+    }
+    ctx.drawImage(img, 0, 0, outW, outH);
+    const supportsWebP = (() => {
+      try {
+        const probe = document.createElement("canvas");
+        return probe.toDataURL("image/webp").startsWith("data:image/webp");
+      } catch (e) {
+        return false;
+      }
+    })();
+    const sourceHasAlphaHint = /png|webp|gif|avif/i.test(file.type);
+    const preferPNG = !supportsWebP && sourceHasAlphaHint;
+    const targetMime = supportsWebP ? "image/webp" : preferPNG ? "image/png" : "image/jpeg";
+    let q = qualityStart;
+    let outBlob = await canvasToBlob(canvas, targetMime, q, toBlobTimeoutMs);
+    let actualMime = outBlob.type || targetMime;
+    if (/webp|jpeg/.test(actualMime)) {
+      while (outBlob.size / 1024 > targetSizeKB && q > qualityMin) {
+        q = Math.max(qualityMin, q - qualityStep);
+        outBlob = await canvasToBlob(canvas, actualMime, q, toBlobTimeoutMs);
+        actualMime = outBlob.type || actualMime;
+      }
+    }
+    const ext = actualMime.includes("webp") ? "webp" : actualMime.includes("png") ? "png" : "jpg";
+    const optimizedFile = new File([outBlob], `${desiredBaseName}.${ext}`, {
+      type: actualMime,
+      lastModified: Date.now()
+    });
+    return { file: optimizedFile, error: null };
+  } catch (error) {
+    console.error("Image optimization error:", error);
+    return {
+      file,
+      error: "Une erreur est survenue lors de l'optimisation de l'image."
+    };
+  }
+};
+var optimizeImage_default = optimizeImage;
 export {
   Accordion,
   Box,
@@ -4982,7 +5126,7 @@ export {
   Grid,
   Icon,
   IconTabs,
-  Image,
+  Image2 as Image,
   Input,
   Link,
   List,
@@ -5022,6 +5166,7 @@ export {
   formatDate,
   formatDistance,
   formatDuration,
+  optimizeImage_default as optimizeImage,
   truncateFileName,
   truncateText
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "design-zystem",
-  "version": "1.0.213",
+  "version": "1.0.214",
   "description": "A React design system of importable components",
   "main": "dist/index.js",
   "module": "dist/index.mjs",