@cfx-dev/ui-components 5.0.26 → 5.0.28

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/package.json

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