zuii 1.4.7 → 1.4.8

package/dist/components/Context-menu/js/context-menu.d.ts

@@ -31,9 +31,11 @@ export declare const isItemDisabled: (item: ContextMenuItem) => boolean;
  * @param {number} y - Position Y souhaitée.
  * @param {number} menuWidth - Largeur du menu.
  * @param {number} menuHeight - Hauteur du menu.
+ * @param {number} [offsetX=2] - Décalage horizontal par rapport au clic.
+ * @param {number} [offsetY=2] - Décalage vertical par rapport au clic.
  * @returns {{x: number, y: number}} La position corrigée.
  */
-export declare const calculatePosition: (x: number, y: number, menuWidth: number, menuHeight: number) => {
+export declare const calculatePosition: (x: number, y: number, menuWidth: number, menuHeight: number, offsetX?: number, offsetY?: number) => {
     x: number;
     y: number;
 };

package/dist/components/Context-menu/js/context-menu.js

@@ -1,19 +1,22 @@
-const n = (t) => {
+const c = (t) => {
   const e = t.items && t.items.length > 0;
   return !!(t.disabled || !e && !t.onAction && !t.action && t.type !== "separator");
-}, r = (t, e, o, a) => {
-  let l = t, i = e;
-  return t + o > window.innerWidth && (l = t - o), e + a > window.innerHeight && (i = e - a), { x: Math.max(0, l), y: Math.max(0, i) };
-}, s = () => {
+}, s = (t, e, o, a, n = 2, r = 2) => {
+  let l = t + n, i = e + r;
+  return l + o > window.innerWidth && (l = t - o - n), i + a > window.innerHeight && (i = e - a - r), {
+    x: Math.max(0, Math.min(l, window.innerWidth - o)),
+    y: Math.max(0, Math.min(i, window.innerHeight - a))
+  };
+}, d = () => {
   document.body.style.overflow = "hidden";
-}, c = () => {
+}, b = () => {
   document.body.style.overflow = "";
-}, d = (t) => {
+}, h = (t) => {
   const e = t.getBoundingClientRect();
   e.right > window.innerWidth && (t.style.left = "auto", t.style.right = "100%", t.style.marginLeft = "0", t.style.marginRight = "2px"), e.bottom > window.innerHeight && (t.style.top = "auto", t.style.bottom = "0");
-}, b = (t, e) => {
-  n(t) || t.type === "separator" || (t.onAction && t.onAction(), t.action && e && e(t.action));
-}, p = (t) => !t || t.length === 0 ? "" : t.join(" + "), h = {
+}, p = (t, e) => {
+  c(t) || t.type === "separator" || (t.onAction && t.onAction(), t.action && e && e(t.action));
+}, u = (t) => !t || t.length === 0 ? "" : t.join(" + "), w = {
   items: [
     {
       label: "Nouveau",
@@ -74,12 +77,12 @@ const n = (t) => {
   ]
 };
 export {
-  d as adjustSubMenuPosition,
-  r as calculatePosition,
-  h as contextMenuData,
-  b as executeAction,
-  p as getDisplayShortcut,
-  n as isItemDisabled,
-  s as lockScroll,
-  c as unlockScroll
+  h as adjustSubMenuPosition,
+  s as calculatePosition,
+  w as contextMenuData,
+  p as executeAction,
+  u as getDisplayShortcut,
+  c as isItemDisabled,
+  d as lockScroll,
+  b as unlockScroll
 };

package/dist/components/Context-menu/react/index.js

@@ -1,29 +1,29 @@
-import { jsxs as M, jsx as u } from "react/jsx-runtime";
-import { useState as b, useRef as _, useCallback as x, useEffect as S } from "react";
-import { calculatePosition as C, lockScroll as y, unlockScroll as h, contextMenuData as g, getDisplayShortcut as N, isItemDisabled as k, adjustSubMenuPosition as D, executeAction as E } from "../js/context-menu.js";
+import { jsxs as M, jsx as l } from "react/jsx-runtime";
+import { useState as b, useRef as v, useCallback as h, useEffect as x } from "react";
+import { calculatePosition as C, lockScroll as g, unlockScroll as y, contextMenuData as N, getDisplayShortcut as k, isItemDisabled as D, adjustSubMenuPosition as E, executeAction as I } from "../js/context-menu.js";
 import '../style/index.css';/* empty css                  */
-const $ = ({ item: e, onAction: f, closeMenu: p }) => {
-  const [l, o] = b(!1), c = _(null), t = "context-menu", n = !!(e.items && e.items.length > 0), r = N(e.shortcuts), i = k(e);
-  return S(() => {
-    l && c.current && D(c.current);
-  }, [l]), e.type === "separator" ? /* @__PURE__ */ u("div", { className: `${t}__separator` }) : /* @__PURE__ */ M(
+const $ = ({ item: s, onAction: f, closeMenu: p }) => {
+  const [u, o] = b(!1), r = v(null), e = "context-menu", i = !!(s.items && s.items.length > 0), t = k(s.shortcuts), c = D(s);
+  return x(() => {
+    u && r.current && E(r.current);
+  }, [u]), s.type === "separator" ? /* @__PURE__ */ l("div", { className: `${e}__separator` }) : /* @__PURE__ */ M(
     "div",
     {
-      className: `${t}__item ${n ? `${t}__sub-trigger` : ""} ${i ? "disabled" : ""}`.trim(),
-      onMouseEnter: () => n && !i && o(!0),
-      onMouseLeave: () => n && !i && o(!1),
+      className: `${e}__item ${i ? `${e}__sub-trigger` : ""} ${c ? "disabled" : ""}`.trim(),
+      onMouseEnter: () => i && !c && o(!0),
+      onMouseLeave: () => i && !c && o(!1),
       onClick: (a) => {
-        !n && !i && (a.stopPropagation(), E(e, f), p());
+        !i && !c && (a.stopPropagation(), I(s, f), p());
       },
       children: [
-        e.label,
-        r && /* @__PURE__ */ u("span", { className: `${t}__shortcut`, children: r }),
-        n && l && /* @__PURE__ */ u(
+        s.label,
+        t && /* @__PURE__ */ l("span", { className: `${e}__shortcut`, children: t }),
+        i && u && /* @__PURE__ */ l(
           "div",
           {
-            ref: c,
-            className: `${t} ${t}__sub-menu`,
-            children: e.items.map((a, m) => /* @__PURE__ */ u(
+            ref: r,
+            className: `${e} ${e}__sub-menu`,
+            children: s.items.map((a, m) => /* @__PURE__ */ l(
               $,
               {
                 item: a,
@@ -37,46 +37,51 @@ const $ = ({ item: e, onAction: f, closeMenu: p }) => {
       ]
     }
   );
-}, w = ({
-  items: e = g.items,
+}, L = ({
+  items: s = N.items,
   onAction: f,
   children: p,
-  className: l = ""
+  className: u = ""
 }) => {
-  const [o, c] = b(!1), [t, n] = b({ x: 0, y: 0 }), r = _(null), i = "context-menu", a = x((s) => {
-    s.preventDefault(), c(!0);
-    const { x: d, y: v } = C(s.clientX, s.clientY, 160, 200);
-    n({ x: d, y: v });
-  }, []), m = x(() => {
-    c(!1);
+  const [o, r] = b(!1), [e, i] = b({ x: 0, y: 0 }), t = v(null), c = "context-menu", a = h((n) => {
+    n.preventDefault(), i({ x: n.clientX, y: n.clientY }), r(!0);
+  }, []), m = h(() => {
+    r(!1);
   }, []);
-  return S(() => {
-    const s = (d) => {
-      r.current && !r.current.contains(d.target) && m();
+  return x(() => {
+    if (o && t.current) {
+      const { offsetWidth: n, offsetHeight: d } = t.current, { x: _, y: S } = C(e.x, e.y, n, d);
+      t.current.style.top = `${S}px`, t.current.style.left = `${_}px`, t.current.style.visibility = "visible";
+    }
+  }, [o, e.x, e.y]), x(() => {
+    const n = (d) => {
+      t.current && !t.current.contains(d.target) && m();
     };
-    return o ? (document.addEventListener("mousedown", s), y()) : h(), () => {
-      document.removeEventListener("mousedown", s), h();
+    return o ? (document.addEventListener("mousedown", n), g()) : y(), () => {
+      document.removeEventListener("mousedown", n), y();
     };
   }, [o, m]), /* @__PURE__ */ M(
     "div",
     {
       onContextMenu: a,
-      className: `context-menu-wrapper ${l}`,
+      className: `context-menu-wrapper ${u}`,
       children: [
         p,
-        o && /* @__PURE__ */ u(
+        o && /* @__PURE__ */ l(
           "div",
           {
-            ref: r,
-            className: i,
+            ref: t,
+            className: c,
             style: {
-              top: t.y,
-              left: t.x
+              top: e.y,
+              left: e.x,
+              visibility: "hidden"
+              // Caché le temps de la mesure au premier affichage
             },
-            children: e.map((s, d) => /* @__PURE__ */ u(
+            children: s.map((n, d) => /* @__PURE__ */ l(
               $,
               {
-                item: s,
+                item: n,
                 onAction: f,
                 closeMenu: m
               },
@@ -89,5 +94,5 @@ const $ = ({ item: e, onAction: f, closeMenu: p }) => {
   );
 };
 export {
-  w as ContextMenu
+  L as ContextMenu
 };

package/dist/components/Dropdown/react/index.d.ts

@@ -3,6 +3,7 @@ interface DropdownItem {
     label?: string;
     href?: string;
     type?: "divider" | "item";
+    onClick?: () => void;
 }
 interface Props extends Omit<DropdownProps, "children"> {
     /**
@@ -25,6 +26,10 @@ interface Props extends Omit<DropdownProps, "children"> {
      * Contenu optionnel.
      */
     children?: React.ReactNode;
+    /**
+     * Fonction appelée lorsque le dropdown est ouvert.
+     */
+    onClick?: () => void;
 }
 /**
  * Composant Dropdown personnalisé.
@@ -34,7 +39,7 @@ interface Props extends Omit<DropdownProps, "children"> {
  * @returns {JSX.Element} Le composant Dropdown rendu.
  */
 export declare const Dropdown: {
-    ({ label, variant, items, align, className, children, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+    ({ label, variant, items, align, className, children, onClick, ...props }: Props): import("react/jsx-runtime").JSX.Element;
     Toggle({ className, ...props }: any): import("react/jsx-runtime").JSX.Element;
     Menu({ className, ...props }: any): import("react/jsx-runtime").JSX.Element;
     Item({ className, ...props }: any): import("react/jsx-runtime").JSX.Element;

package/dist/components/Dropdown/react/index.js

@@ -1,33 +1,35 @@
-import { jsx as o, jsxs as c, Fragment as $ } from "react/jsx-runtime";
+import { jsx as o, jsxs as _, Fragment as $ } from "react/jsx-runtime";
 import { Dropdown as d } from "react-bootstrap";
 import '../style/index.css';/* empty css                  */
-const s = ({
+const n = ({
   label: r = "Dropdown",
   variant: e = "primary",
-  items: t = [],
-  align: l = "start",
-  className: p = "",
-  children: a,
-  ..._
+  items: l = [],
+  align: t = "start",
+  className: c = "",
+  children: s,
+  onClick: g,
+  ...p
 }) => {
-  const m = "dropdown";
-  return /* @__PURE__ */ o(d, { className: `${m} ${p}`.trim(), align: l, ..._, children: a || /* @__PURE__ */ c($, { children: [
-    /* @__PURE__ */ o(d.Toggle, { variant: e, id: `dropdown-${r}`, className: `${m}__toggle`, children: r }),
-    /* @__PURE__ */ o(d.Menu, { className: `${m}__menu`, children: t.map((i, n) => i.type === "divider" ? /* @__PURE__ */ o(d.Divider, { className: `${m}__divider` }, n) : /* @__PURE__ */ o(
+  const i = "dropdown";
+  return /* @__PURE__ */ o(d, { className: `${i} ${c}`.trim(), align: t, ...p, children: s || /* @__PURE__ */ _($, { children: [
+    /* @__PURE__ */ o(d.Toggle, { variant: e, id: `dropdown-${r}`, className: `${i}__toggle`, children: r }),
+    /* @__PURE__ */ o(d.Menu, { className: `${i}__menu`, children: l.map((m, a) => m.type === "divider" ? /* @__PURE__ */ o(d.Divider, { className: `${i}__divider` }, a) : /* @__PURE__ */ o(
       d.Item,
       {
-        href: i.href,
-        className: `${m}__item`,
-        children: i.label
+        href: m.href,
+        className: `${i}__item`,
+        onClick: m.onClick,
+        children: m.label
       },
-      n
+      a
     )) })
   ] }) });
 };
-s.Toggle = ({ className: r = "", ...e }) => /* @__PURE__ */ o(d.Toggle, { className: `dropdown__toggle ${r}`.trim(), ...e });
-s.Menu = ({ className: r = "", ...e }) => /* @__PURE__ */ o(d.Menu, { className: `dropdown__menu ${r}`.trim(), ...e });
-s.Item = ({ className: r = "", ...e }) => /* @__PURE__ */ o(d.Item, { className: `dropdown__item ${r}`.trim(), ...e });
-s.Divider = ({ className: r = "", ...e }) => /* @__PURE__ */ o(d.Divider, { className: `dropdown__divider ${r}`.trim(), ...e });
+n.Toggle = ({ className: r = "", ...e }) => /* @__PURE__ */ o(d.Toggle, { className: `dropdown__toggle ${r}`.trim(), ...e });
+n.Menu = ({ className: r = "", ...e }) => /* @__PURE__ */ o(d.Menu, { className: `dropdown__menu ${r}`.trim(), ...e });
+n.Item = ({ className: r = "", ...e }) => /* @__PURE__ */ o(d.Item, { className: `dropdown__item ${r}`.trim(), ...e });
+n.Divider = ({ className: r = "", ...e }) => /* @__PURE__ */ o(d.Divider, { className: `dropdown__divider ${r}`.trim(), ...e });
 export {
-  s as Dropdown
+  n as Dropdown
 };

package/dist/templates/Dropdowns/Dropdowns.tsx

@@ -71,6 +71,9 @@ export const Dropdowns = () => {
 										Action 3
 									</Group>
 								</Dropdown.Item>
+								<Dropdown.Item onClick={() => console.log('Hello World')}>
+									Hello World console.log
+								</Dropdown.Item>
 							</Dropdown.Menu>
 						</Dropdown>
 					</div>

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "zuii",
-	"version": "1.4.7",
+	"version": "1.4.8",
 	"description": "Bibliothèque de composants UI légère, intuitive et modulaire pour les interfaces web modernes.",
 	"type": "module",
 	"repository": {