yet-another-react-lightbox 1.7.0 → 1.7.1

package/dist/Lightbox.js

@@ -5,8 +5,9 @@ const renderNode = (node, props) => {
     var _a;
     return React.createElement(node.module.component, { key: node.module.name, ...props }, (_a = node.children) === null || _a === void 0 ? void 0 : _a.map((child) => renderNode(child, props)));
 };
-const LightboxComponent = (props) => {
-    const { plugins } = props;
+export const Lightbox = (props) => {
+    const { carousel, animation, render, toolbar, controller, on, plugins, ...restProps } = props;
+    const { carousel: defaultCarousel, animation: defaultAnimation, render: defaultRender, toolbar: defaultToolbar, controller: defaultController, on: defaultOn, ...restDefaultProps } = LightboxDefaultProps;
     const { config, augmentation } = withPlugins([
         createNode(PortalModule, [
             createNode(NoScrollModule, [
@@ -18,13 +19,17 @@ const LightboxComponent = (props) => {
             ]),
         ]),
     ], plugins);
-    const augmentedProps = augmentation(props);
+    const augmentedProps = augmentation({
+        carousel: { ...defaultCarousel, ...carousel },
+        animation: { ...defaultAnimation, ...animation },
+        render: { ...defaultRender, ...render },
+        toolbar: { ...defaultToolbar, ...toolbar },
+        controller: { ...defaultController, ...controller },
+        on: { ...defaultOn, ...on },
+        ...restDefaultProps,
+        ...restProps,
+    });
     if (!augmentedProps.open)
         return null;
     return React.createElement(React.Fragment, null, renderNode(createNode(CoreModule, config), augmentedProps));
 };
-export const Lightbox = (props) => {
-    const { carousel, animation, render, toolbar, controller, on, ...restProps } = props;
-    const { carousel: defaultCarousel, animation: defaultAnimation, render: defaultRender, toolbar: defaultToolbar, controller: defaultController, on: defaultOn, ...restDefaultProps } = LightboxDefaultProps;
-    return (React.createElement(LightboxComponent, { carousel: { ...defaultCarousel, ...carousel }, animation: { ...defaultAnimation, ...animation }, render: { ...defaultRender, ...render }, toolbar: { ...defaultToolbar, ...toolbar }, controller: { ...defaultController, ...controller }, on: { ...defaultOn, ...on }, ...restDefaultProps, ...restProps }));
-};

package/dist/core/modules/Carousel.js

@@ -38,12 +38,13 @@ export const Carousel = ({ slides, carousel: { finite, preload, padding, spacing
             }
         }
     }
+    const sanitize = (value) => value === 0 || value.trim() === "" || value.trim() === "0" ? "0px" : value;
     return (React.createElement("div", { className: cssClass("carousel"), style: {
             ...(padding !== LightboxDefaultProps.carousel.padding
-                ? { [cssVar("carousel_padding")]: padding }
+                ? { [cssVar("carousel_padding")]: sanitize(padding) }
                 : null),
             ...(spacing !== LightboxDefaultProps.carousel.spacing
-                ? { [cssVar("carousel_spacing")]: spacing !== 0 ? spacing : "0px" }
+                ? { [cssVar("carousel_spacing")]: sanitize(spacing) }
                 : null),
         } }, items));
 };

package/dist/core/modules/Controller.js

@@ -281,11 +281,18 @@ export const Controller = ({ children, ...props }) => {
         isRTL: state.isRTL,
         subscribeSensors,
     }), [latestProps, containerRef, state.currentIndex, state.globalIndex, state.isRTL, subscribeSensors]);
-    return (React.createElement("div", { ref: setContainerRef, className: clsx(cssClass("container"), refs.current.swipeState === "swipe" && cssClass("container_swipe")), style: refs.current.swipeAnimationDuration !== LightboxDefaultProps.animation.swipe
-            ? {
-                [cssVar("swipe_animation_duration")]: `${Math.round(refs.current.swipeAnimationDuration)}ms`,
-            }
-            : undefined, role: "presentation", "aria-live": "polite", tabIndex: -1, ...registerSensors },
+    return (React.createElement("div", { ref: setContainerRef, className: clsx(cssClass("container"), refs.current.swipeState === "swipe" && cssClass("container_swipe")), style: {
+            ...(refs.current.swipeAnimationDuration !== LightboxDefaultProps.animation.swipe
+                ? {
+                    [cssVar("swipe_animation_duration")]: `${Math.round(refs.current.swipeAnimationDuration)}ms`,
+                }
+                : null),
+            ...(props.controller.touchAction !== "none"
+                ? {
+                    [cssVar("controller_touch_action")]: props.controller.touchAction,
+                }
+                : null),
+        }, role: "presentation", "aria-live": "polite", tabIndex: -1, ...registerSensors },
         React.createElement(ControllerContext.Provider, { value: context }, children)));
 };
 export const ControllerModule = createModule("controller", Controller);

package/dist/plugins/Inline.js

@@ -3,7 +3,7 @@ import { createModule } from "../core/index.js";
 export const InlineContainer = ({ inline, children }) => React.createElement("div", { ...inline }, children);
 export const InlineModule = createModule("inline", InlineContainer);
 export const Inline = ({ augment, replace, remove }) => {
-    augment(({ toolbar: { buttons, ...restToolbar }, open, close, controller: { focus, ...restController }, ...restProps }) => ({
+    augment(({ toolbar: { buttons, ...restToolbar }, open, close, controller: { focus, touchAction, ...restController }, ...restProps }) => ({
         open: true,
         close: () => { },
         toolbar: {
@@ -11,7 +11,7 @@ export const Inline = ({ augment, replace, remove }) => {
             ...restToolbar,
         },
         inline: { style: { width: "100%", height: "100%" } },
-        controller: { focus: false, ...restController },
+        controller: { focus: false, touchAction: "pan-y", ...restController },
         ...restProps,
     }));
     remove("no-scroll");

package/dist/styles.css

@@ -9,12 +9,12 @@
 .yarl__portal_open {
   opacity: 1;
 }
-.yarl__container, .yarl__carousel, .yarl__slide {
+.yarl__container {
   -webkit-user-select: none;
      -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
-  touch-action: pan-y;
+  touch-action: var(--yarl__controller_touch_action, none);
 }
 .yarl__container {
   width: 100%;

package/dist/types.d.ts

@@ -33,10 +33,10 @@ export interface CarouselSettings {
     finite: boolean;
     /** the lightbox preloads (2 * preload + 1) slides */
     preload: number;
-    /** padding around each slide */
-    padding: string | number;
+    /** padding around each slide (e.g., "16px", "10px 20px" or 0) */
+    padding: string | 0;
     /** spacing between slides (e.g., "100px", "50%" or 0) */
-    spacing: string | number;
+    spacing: string | 0;
     /** `object-fit` setting for image slides */
     imageFit: ImageFit;
 }
@@ -51,6 +51,8 @@ export interface AnimationSettings {
 export interface ControllerSettings {
     /** if true, the lightbox captures focus when it opens */
     focus: boolean;
+    /** controller `touch-action` */
+    touchAction: "none" | "pan-y";
 }
 /** Custom render functions. */
 export interface Render {

package/dist/types.js

@@ -20,6 +20,7 @@ export const LightboxDefaultProps = {
     },
     controller: {
         focus: true,
+        touchAction: "none",
     },
     on: {},
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "yet-another-react-lightbox",
-    "version": "1.7.0",
+    "version": "1.7.1",
     "description": "Modern React lightbox component",
     "author": "Igor Danchenko",
     "license": "MIT",
@@ -87,7 +87,7 @@
         "@testing-library/react": "^13.3.0",
         "@testing-library/user-event": "^14.2.0",
         "@types/jest": "^28.1.1",
-        "@types/react": "^18.0.12",
+        "@types/react": "^18.0.13",
         "@types/react-dom": "^18.0.5",
         "@typescript-eslint/eslint-plugin": "^5.28.0",
         "@typescript-eslint/parser": "^5.28.0",
@@ -104,11 +104,11 @@
         "husky": "^8.0.1",
         "jest": "^28.1.1",
         "jest-environment-jsdom": "^28.1.1",
-        "lint-staged": "^13.0.1",
+        "lint-staged": "^13.0.2",
         "npm-run-all": "^4.1.5",
         "postcss": "^8.4.14",
         "postcss-cli": "^9.1.0",
-        "prettier": "^2.7.0",
+        "prettier": "^2.7.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "rimraf": "^3.0.2",