@cfx-dev/ui-components 5.0.25 → 5.0.27

package/dist/utils/hooks/useKeyboardArrows.d.ts

@@ -0,0 +1,5 @@
+export declare function useKeyboardArrows<T extends (direction: 'left' | 'right') => void>(callback: T): void;
+export declare namespace useKeyboardArrows {
+    var isArrowLeft: (event: KeyboardEvent) => boolean;
+    var isArrowRight: (event: KeyboardEvent) => boolean;
+}

package/dist/utils/hooks/useKeyboardArrows.js

@@ -0,0 +1,13 @@
+import { useDynamicRef as t } from "./useDynamicRef.js";
+import { useGlobalKeyboardEvent as f } from "./useGlobalKeyboardEvent.js";
+function o(r) {
+  const e = t((i) => {
+    o.isArrowLeft(i) && r("left"), o.isArrowRight(i) && r("right");
+  });
+  f(e);
+}
+o.isArrowLeft = (r) => r.key === "ArrowLeft";
+o.isArrowRight = (r) => r.key === "ArrowRight";
+export {
+  o as useKeyboardArrows
+};

package/dist/utils/hooks/useLightbox.d.ts

@@ -0,0 +1,21 @@
+import { default as React } from 'react';
+import { MediaItem, UseLightboxOptions } from '../../components/Lightbox/types';
+
+export declare function useLightboxOpener(initialIndex?: number): {
+    isOpen: boolean;
+    openLightbox: (idx: number) => void;
+    closeLightbox: () => void;
+    currentIndex: number;
+    handleIndexChange: (idx: number) => void;
+};
+export declare function useLightbox({ currentIndex, isOpen, onClose, onIndexChange, initialIndex, }: UseLightboxOptions & {
+    initialIndex?: number;
+}): {
+    emblaRef: import('embla-carousel-react').EmblaViewportRefType;
+    getSelectedIndex: () => number;
+    handlePrevious: () => void;
+    handleNext: () => void;
+    handleOverlayClick: (e: React.MouseEvent) => void;
+    handleOverlayKeyDown: (e: React.KeyboardEvent) => void;
+};
+export declare const usePreloadMedia: (items: MediaItem[], open: boolean) => void;

package/dist/utils/hooks/useLightbox.js

@@ -0,0 +1,80 @@
+import { u as b } from "../../embla-carousel-react.esm-BE464U1q.js";
+import { useCallback as c, useEffect as i, useState as g } from "react";
+import { useBodyScrollLock as y } from "./useBodyScrollLock.js";
+function L(o = 0) {
+  const [s, t] = g(!1), [l, n] = g(o), f = c((a) => {
+    n(a), t(!0);
+  }, []), e = c(() => {
+    t(!1);
+  }, []), u = c((a) => {
+    n(a);
+  }, []);
+  return {
+    isOpen: s,
+    openLightbox: f,
+    closeLightbox: e,
+    currentIndex: l,
+    handleIndexChange: u
+  };
+}
+function v({
+  currentIndex: o,
+  isOpen: s,
+  onClose: t,
+  onIndexChange: l,
+  initialIndex: n
+}) {
+  const [f, e] = b({
+    loop: !1,
+    startIndex: typeof n == "number" ? n : o
+  }), u = c(() => {
+    e && e.scrollPrev();
+  }, [e]), a = c(() => {
+    e && e.scrollNext();
+  }, [e]), d = c(
+    (r) => {
+      r.target === r.currentTarget && t();
+    },
+    [t]
+  ), p = c(
+    (r) => {
+      (r.key === "Enter" || r.key === " ") && r.target === r.currentTarget && t();
+    },
+    [t]
+  ), h = c(() => e ? e.selectedScrollSnap() : o, [e, o]);
+  return i(() => {
+    e && s && e.scrollTo(o);
+  }, [e, o, s]), i(() => {
+    if (!e)
+      return;
+    const r = () => {
+      const m = e.selectedScrollSnap();
+      l(m);
+    };
+    return e.on("select", r), () => {
+      e.off("select", r);
+    };
+  }, [e, l]), y(s), {
+    emblaRef: f,
+    getSelectedIndex: h,
+    handlePrevious: u,
+    handleNext: a,
+    handleOverlayClick: d,
+    handleOverlayKeyDown: p
+  };
+}
+const w = (o, s) => {
+  i(() => {
+    s && o.forEach((t) => {
+      if (t.type === "image" && t.src) {
+        const l = new window.Image();
+        l.src = t.src;
+      }
+    });
+  }, [s, o]);
+};
+export {
+  v as useLightbox,
+  L as useLightboxOpener,
+  w as usePreloadMedia
+};

package/dist/utils/hooks/usePopoverController.js

@@ -1,35 +1,38 @@
 import e from "react";
-import { fastRandomId as b } from "../random.js";
+import { fastRandomId as h } from "../random.js";
 let n = null;
-const h = 80, k = 350;
-function T() {
-  const [d, l] = e.useState(!1), i = e.useRef(!1), s = e.useRef(null), u = e.useRef(null), c = e.useRef(!1), o = e.useRef(b()), f = e.useCallback((t) => {
-    const R = t ? h : k;
-    u.current !== null && clearTimeout(u.current), u.current = setTimeout(() => {
-      u.current = null, !(!t && c.current) && (l(t), i.current = t, t && (n == null ? void 0 : n.id) !== o.current && (n == null || n.update(!1)), t && (n = {
-        id: o.current,
-        update: l
-      }), !t && (n == null ? void 0 : n.id) === o.current && (n = null));
-    }, R);
+const k = 80, w = 350;
+function m(u) {
+  n && u && n.id === u.id || (n = u);
+}
+function C() {
+  const [u, f] = e.useState(!1), l = e.useRef(!1), o = e.useRef(null), c = e.useRef(null), s = e.useRef(!1), i = e.useRef(h()), d = e.useCallback((t) => {
+    const b = t ? k : w;
+    c.current !== null && clearTimeout(c.current), c.current = setTimeout(() => {
+      c.current = null, !(!t && s.current) && (f(t), l.current = t, t && (n == null ? void 0 : n.id) !== i.current && (n == null || n.update(!1)), t && m({
+        id: i.current,
+        update: f
+      }), !t && (n == null ? void 0 : n.id) === i.current && m(null));
+    }, b);
   }, []), r = e.useCallback((t) => {
-    !t && c.current || f(t);
-  }, [f]), p = e.useCallback(() => {
+    !t && s.current || d(t);
+  }, [d]), p = e.useCallback(() => {
     r(!0);
-  }, [r]), m = e.useCallback(() => {
-    r(!1);
   }, [r]), v = e.useCallback(() => {
-    c.current = !0;
+    r(!1);
+  }, [r]), R = e.useCallback(() => {
+    s.current = !0;
   }, []), a = e.useCallback((t) => {
-    c.current = !1, s.current && (s.current.contains(t.target) || i.current && r(!1));
+    s.current = !1, o.current && (o.current.contains(t.target) || l.current && r(!1));
   }, [r]);
   return e.useEffect(() => (window.addEventListener("mouseup", a), () => window.removeEventListener("mouseup", a)), [a]), {
-    active: d,
-    wrapperRef: s,
+    active: u,
+    wrapperRef: o,
     handleMouseEnter: p,
-    handleMouseLeave: m,
-    handleMouseDown: v
+    handleMouseLeave: v,
+    handleMouseDown: R
   };
 }
 export {
-  T as usePopoverController
+  C as usePopoverController
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cfx-dev/ui-components",
-  "version": "5.0.25",
+  "version": "5.0.27",
   "type": "module",
   "license": "MIT",
   "main": "dist/main.js",