yet-another-react-lightbox-lite 1.11.0 → 1.11.1

package/dist/index.js

@@ -112,6 +112,7 @@ function Zoom({ children }) {
     const [rect, setRect] = useState();
     const observer = useRef(undefined);
     const carouselRef = useRef(null);
+    const carouselRectRef = useRef(undefined);
     const slideDimensionsRef = useRef([0, 0]);
     const { index, slides, zoom: { supports, disabled } = {} } = useLightboxContext();
     const [prevIndex, setPrevIndex] = useState(index);
@@ -148,7 +149,10 @@ function Zoom({ children }) {
         carouselRef.current = node;
         observer.current?.disconnect();
         observer.current = undefined;
-        const updateRect = () => setRect(node ? { width: node.clientWidth, height: node.clientHeight } : undefined);
+        const updateRect = () => {
+            carouselRectRef.current = node?.getBoundingClientRect();
+            setRect(node ? { width: node.clientWidth, height: node.clientHeight } : undefined);
+        };
         updateRect();
         if (node && typeof ResizeObserver !== "undefined") {
             observer.current = new ResizeObserver(updateRect);
@@ -163,9 +167,9 @@ function Zoom({ children }) {
         setZoom(newZoom);
         let newOffsetX = offsetX;
         let newOffsetY = offsetY;
-        if (event && carouselRef.current) {
+        if (event && carouselRectRef.current) {
             const { clientX, clientY } = event;
-            const { left, top, width, height } = carouselRef.current.getBoundingClientRect();
+            const { left, top, width, height } = carouselRectRef.current;
             const zoomDelta = newZoom / zoom - 1;
             newOffsetX += (left + width / 2 + offsetX - clientX) * zoomDelta;
             newOffsetY += (top + height / 2 + offsetY - clientY) * zoomDelta;
@@ -343,10 +347,14 @@ function useSensors() {
                 move(-KEYBOARD_MOVE_DISTANCE, 0);
             return;
         }
-        if (key === "ArrowLeft")
+        if (key === "ArrowLeft") {
+            preventDefault();
             prev();
-        if (key === "ArrowRight")
+        }
+        if (key === "ArrowRight") {
+            preventDefault();
             next();
+        }
     });
     const onPointerDown = useEventCallback((event) => {
         if (shouldIgnoreEvent(event))
@@ -546,7 +554,7 @@ function Portal({ children }) {
         }
     }, [handleCleanup]);
     return mounted
-        ? createPortal(jsx("div", { "aria-modal": true, role: "dialog", "aria-label": translateLabel(labels, "Lightbox"), tabIndex: -1, ref: handleRef, style: styles?.portal, className: clsx(cssClass("portal"), !visible && cssClass("portal_closed"), className), onTransitionEnd: () => onTransitionEnd.current?.(), onFocus: (event) => {
+        ? createPortal(jsx("div", { "aria-modal": true, role: "dialog", "aria-label": translateLabel(labels, "Lightbox"), tabIndex: -1, ref: handleRef, style: styles?.portal, className: clsx(cssClass("portal"), !visible && cssClass("portal_closed"), className), onTransitionEnd: (event) => event.target === portalRef.current && onTransitionEnd.current?.(), onFocus: (event) => {
                 if (!restoreFocus.current) {
                     restoreFocus.current = event.relatedTarget;
                 }

package/dist/styles.css

@@ -1 +1 @@
-html:has(body>.yarll__portal){overscroll-behavior:none}body:has(>.yarll__portal:not(.yarll__no_scroll_lock)){height:100%;overflow:hidden;padding-right:var(--yarll__scrollbar-width,0)}body:has(>.yarll__portal:not(.yarll__no_scroll_lock)) .yarll__fixed{padding-right:var(--yarll__scrollbar-width,0)}.yarll__portal{align-items:center;display:flex;flex-direction:column;inset:0;justify-content:center;outline:none;overflow:hidden;overscroll-behavior:none;position:fixed;touch-action:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;z-index:var(--yarll__portal_zindex,9999);-webkit-touch-callout:none;background-color:var(--yarll__backdrop_color,#000);color:var(--yarll__color,#fff);opacity:1;transition:var(--yarll__fade_transition,opacity .3s ease)}@media (prefers-reduced-motion:reduce){.yarll__portal{transition-duration:0s}}.yarll__portal_closed{opacity:0}.yarll__portal *{box-sizing:border-box}.yarll__carousel{align-self:stretch;flex:1;margin:var(--yarll__carousel_margin,16px);position:relative}.yarll__slide{align-items:center;display:flex;flex-direction:column;inset:0;justify-content:center;position:absolute}.yarll__slide[hidden]{display:none}.yarll__slide_image{display:block;max-height:100%;max-width:100%;min-height:0;min-width:0;-o-object-fit:contain;object-fit:contain}.yarll__toolbar{align-items:center;display:flex;position:absolute;right:var(--yarll__toolbar_margin,8px);top:var(--yarll__toolbar_margin,8px);z-index:1}.yarll__toolbar_fixed{align-self:flex-end;margin-inline-end:var(--yarll__toolbar_margin,8px);position:static}.yarll__toolbar_fixed,.yarll__toolbar_fixed+.yarll__carousel{margin-block-start:var(--yarll__toolbar_margin,8px)}.yarll__button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--yarll__button_background_color,transparent);border:0;color:var(--yarll__button_color,hsla(0,0%,100%,.8));cursor:pointer;filter:var(--yarll__button_filter,drop-shadow(2px 2px 2px rgba(0,0,0,.8)));margin:0;padding:var(--yarll__button_padding,8px)}.yarll__button:focus-visible{box-shadow:var(--yarll__button_focus_box_shadow,0 0 0 4px #fff);color:var(--yarll__button_color_active,#fff);outline:var(--yarll__button_focus_outline,6px double #000)}@supports not selector(:focus-visible){.yarll__button:focus{box-shadow:var(--yarll__button_focus_box_shadow,0 0 0 4px #fff);color:var(--yarll__button_color_active,#fff);outline:var(--yarll__button_focus_outline,6px double #000)}}@media (hover:hover){.yarll__button:focus-visible:hover,.yarll__button:focus:hover,.yarll__button:hover{color:var(--yarll__button_color_active,#fff)}}.yarll__button_next,.yarll__button_prev{padding:var(--yarll__navigation_button_padding,24px 8px);position:absolute}.yarll__button_prev{left:8px}.yarll__button_next{right:8px}.yarll__button:disabled{color:var(--yarll__button_color_disabled,hsla(0,0%,100%,.4));cursor:default}.yarll__icon{display:block;fill:currentColor;height:var(--yarll__icon_size,32px);pointer-events:none;width:var(--yarll__icon_size,32px)}.yarll__selectable{-webkit-user-select:text;-moz-user-select:text;user-select:text}
+html:has(body>.yarll__portal){overscroll-behavior:none}@media (prefers-reduced-motion:reduce){html:has(body>.yarll__portal)::view-transition-new(*),html:has(body>.yarll__portal)::view-transition-old(*){animation-duration:0s}}body:has(>.yarll__portal:not(.yarll__no_scroll_lock)){height:100%;overflow:hidden;padding-right:var(--yarll__scrollbar-width,0)}body:has(>.yarll__portal:not(.yarll__no_scroll_lock)) .yarll__fixed{padding-right:var(--yarll__scrollbar-width,0)}.yarll__portal{align-items:center;display:flex;flex-direction:column;inset:0;justify-content:center;outline:none;overflow:hidden;overscroll-behavior:none;position:fixed;touch-action:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;z-index:var(--yarll__portal_zindex,9999);-webkit-touch-callout:none;background-color:var(--yarll__backdrop_color,#000);color:var(--yarll__color,#fff);opacity:1;transition:var(--yarll__fade_transition,opacity .3s ease)}@media (prefers-reduced-motion:reduce){.yarll__portal{transition-duration:0s}}.yarll__portal_closed{opacity:0}.yarll__portal *{box-sizing:border-box}.yarll__carousel{align-self:stretch;flex:1;margin:var(--yarll__carousel_margin,16px);position:relative}.yarll__slide{align-items:center;display:flex;flex-direction:column;inset:0;justify-content:center;position:absolute}.yarll__slide[hidden]{display:none}.yarll__slide_image{display:block;max-height:100%;max-width:100%;min-height:0;min-width:0;-o-object-fit:contain;object-fit:contain}.yarll__toolbar{align-items:center;display:flex;position:absolute;right:var(--yarll__toolbar_margin,8px);top:var(--yarll__toolbar_margin,8px);z-index:1}.yarll__toolbar_fixed{align-self:flex-end;margin-inline-end:var(--yarll__toolbar_margin,8px);position:static}.yarll__toolbar_fixed,.yarll__toolbar_fixed+.yarll__carousel{margin-block-start:var(--yarll__toolbar_margin,8px)}.yarll__button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--yarll__button_background_color,transparent);border:0;color:var(--yarll__button_color,hsla(0,0%,100%,.8));cursor:pointer;filter:var(--yarll__button_filter,drop-shadow(2px 2px 2px rgba(0,0,0,.8)));margin:0;padding:var(--yarll__button_padding,8px)}.yarll__button:focus-visible{box-shadow:var(--yarll__button_focus_box_shadow,0 0 0 4px #fff);color:var(--yarll__button_color_active,#fff);outline:var(--yarll__button_focus_outline,6px double #000)}@supports not selector(:focus-visible){.yarll__button:focus{box-shadow:var(--yarll__button_focus_box_shadow,0 0 0 4px #fff);color:var(--yarll__button_color_active,#fff);outline:var(--yarll__button_focus_outline,6px double #000)}}@media (hover:hover){.yarll__button:focus-visible:hover,.yarll__button:focus:hover,.yarll__button:hover{color:var(--yarll__button_color_active,#fff)}}.yarll__button_next,.yarll__button_prev{padding:var(--yarll__navigation_button_padding,24px 8px);position:absolute}.yarll__button_prev{left:8px}.yarll__button_next{right:8px}.yarll__button:disabled{color:var(--yarll__button_color_disabled,hsla(0,0%,100%,.4));cursor:default}.yarll__icon{display:block;fill:currentColor;height:var(--yarll__icon_size,32px);pointer-events:none;width:var(--yarll__icon_size,32px)}.yarll__selectable{-webkit-user-select:text;-moz-user-select:text;user-select:text}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yet-another-react-lightbox-lite",
-  "version": "1.11.0",
+  "version": "1.11.1",
   "description": "Lightweight React lightbox component",
   "author": "Igor Danchenko",
   "license": "MIT",