yet-another-react-lightbox-lite 1.7.0 → 1.8.0

package/README.md

@@ -192,7 +192,7 @@ A callback to update current slide index state. This prop is required.
 
 ### labels
 
-Type: `{ [key: string]: string }`
+Type: `keyof Labels`
 
 Custom UI labels / translations.
 
@@ -569,22 +569,22 @@ defines the fixed position without visual styles.
 ## Text Selection
 
 The lightbox is rendered with the `user-select: none` CSS style. If you'd like
-to make some of your custom elements user-selectable, use the `yarll_selectable`
-CSS class. This class sets the `user-select: text` style and turns off
-click-and-drag slide navigation, likely interfering with text selection UX.
+to make some of your custom elements user-selectable, use the
+`yarll__selectable` CSS class. This class sets the `user-select: text` style and
+turns off click-and-drag slide navigation, likely interfering with text
+selection UX.
 
-## Hooks (experimental)
+## Hooks
 
-The library exports the following experimental hooks that you may find helpful
-in customizing lightbox functionality. All experimental hooks are currently
-exported with the `unstable_` prefix.
+The library exports the following hooks that you may find helpful in customizing
+lightbox functionality.
 
 ### useZoom
 
 You can use the `useZoom` hook to build your custom zoom controls.
 
 ```tsx
-import { unstable_useZoom as useZoom } from "yet-another-react-lightbox-lite";
+import { useZoom } from "yet-another-react-lightbox-lite";
 ```
 
 The hook provides an object with the following props:

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { Dispatch, SetStateAction, Key, ReactNode, ComponentProps, CSSProperties, MouseEvent } from 'react';
+import { Key, Dispatch, SetStateAction, ReactNode, ComponentProps, CSSProperties, MouseEvent } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 /** Lightbox props */
@@ -198,4 +198,5 @@ type ZoomContextType = {
 /** `useZoom` hook */
 declare const useZoom: () => ZoomContextType;
 
-export { type Callback, type CarouselSettings, type ControllerSettings, type GenericSlide, type ImageSource, type Label, type Labels, type LightboxProps, type Rect, type Render, type RenderFunction, type RenderSlideProps, type Slide, type SlideImage, type SlideTypeKey, type SlideTypes, type Slot, type SlotStyles, type SlotType, type ToolbarSettings, type ZoomSettings, Lightbox as default, useZoom as unstable_useZoom };
+export { Lightbox as default, useZoom };
+export type { Callback, CarouselSettings, ControllerSettings, GenericSlide, ImageSource, Label, Labels, LightboxProps, Rect, Render, RenderFunction, RenderSlideProps, Slide, SlideImage, SlideTypeKey, SlideTypes, Slot, SlotStyles, SlotType, ToolbarSettings, ZoomSettings };

package/dist/index.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useContext, createContext, useState, useRef, useLayoutEffect, useCallback, useMemo, useEffect, isValidElement, cloneElement } from 'react';
+import { useContext, createContext, useState, useRef, useLayoutEffect, useCallback, useMemo, useEffect, cloneElement, isValidElement } from 'react';
 import { flushSync, createPortal } from 'react-dom';
 
 const cssPrefix = "yarll__";
@@ -66,7 +66,7 @@ function getImageDimensions(slide, rect) {
 }
 function ImageSlide({ slide, rect, zoom }) {
     const [scale, setScale] = useState(1);
-    const persistScaleTimeout = useRef();
+    const persistScaleTimeout = useRef(undefined);
     const { carousel: { imageProps } = {}, styles } = useLightboxContext();
     if (zoom > scale) {
         clearTimeout(persistScaleTimeout.current);
@@ -93,7 +93,7 @@ function Zoom({ children }) {
     const [offsetX, setOffsetX] = useState(0);
     const [offsetY, setOffsetY] = useState(0);
     const [rect, setRect] = useState();
-    const observer = useRef();
+    const observer = useRef(undefined);
     const carouselRef = useRef(null);
     const { index, slides, zoom: { supports, disabled } = {} } = useLightboxContext();
     const [prevIndex, setPrevIndex] = useState(index);
@@ -104,7 +104,9 @@ function Zoom({ children }) {
         setPrevIndex(index);
     }
     const slide = slides[index];
-    const maxZoom = (isImageSlide(slide) && !disabled) || (supports || []).includes(slide.type) ? 8 : 1;
+    const maxZoom = (isImageSlide(slide) && !disabled) || (supports || []).includes(slide.type)
+        ? 8
+        : 1;
     useLayoutEffect(() => {
         const carouselHalfWidth = (rect?.width || 0) / 2;
         const carouselHalfHeight = (rect?.height || 0) / 2;
@@ -260,7 +262,7 @@ function useSensors() {
     const wheelCooldown = useRef(null);
     const wheelCooldownMomentum = useRef(null);
     const activePointers = useRef([]);
-    const pinchZoomDistance = useRef();
+    const pinchZoomDistance = useRef(undefined);
     const { zoom, maxZoom, changeZoom, changeOffsets } = useZoom();
     const { carouselRef } = useZoomInternal();
     const { prev, next, close } = useController();
@@ -295,11 +297,11 @@ function useSensors() {
                 if (key === "ArrowUp")
                     move(0, KEYBOARD_MOVE_DISTANCE);
                 if (key === "ArrowDown")
-                    move(0, -KEYBOARD_MOVE_DISTANCE);
+                    move(0, -50);
                 if (key === "ArrowLeft")
                     move(KEYBOARD_MOVE_DISTANCE, 0);
                 if (key === "ArrowRight")
-                    move(-KEYBOARD_MOVE_DISTANCE, 0);
+                    move(-50, 0);
                 return;
             }
             if (key === "ArrowLeft")
@@ -469,7 +471,7 @@ function Portal({ children }) {
     const cleanup = useRef([]);
     const [mounted, setMounted] = useState(false);
     const [visible, setVisible] = useState(false);
-    const onTransitionEnd = useRef();
+    const onTransitionEnd = useRef(undefined);
     const restoreFocus = useRef(null);
     const sensors = useSensors();
     const { addExitHook } = useController();
@@ -548,4 +550,4 @@ function Lightbox({ slides, index, setIndex, ...rest }) {
     return (jsx(LightboxContextProvider, { slides, index, ...rest, children: jsx(Controller, { setIndex, children: jsx(Zoom, { children: jsxs(Portal, { children: [jsx(Toolbar, {}), jsx(Carousel, {}), jsx(Navigation, {})] }) }) }) }));
 }
 
-export { Lightbox as default, useZoom as unstable_useZoom };
+export { Lightbox as default, useZoom };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yet-another-react-lightbox-lite",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "description": "Lightweight React lightbox component",
   "author": "Igor Danchenko",
   "license": "MIT",
@@ -39,10 +39,10 @@
     "provenance": true
   },
   "peerDependencies": {
-    "@types/react": ">=18",
-    "@types/react-dom": ">=18",
-    "react": ">=18",
-    "react-dom": ">=18"
+    "@types/react": "^18 || ^19",
+    "@types/react-dom": "^18 || ^19",
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19"
   },
   "peerDependenciesMeta": {
     "@types/react": {