yet-another-react-lightbox 2.0.1 → 2.1.0

package/dist/core/components/ImageSlide.d.ts

@@ -11,4 +11,4 @@ export declare type ImageSlideProps = {
     onLoad?: (image: HTMLImageElement) => void;
     style?: React.CSSProperties;
 };
-export declare const ImageSlide: ({ slide: image, offset, render, rect, imageFit, onClick, onLoad, style, }: ImageSlideProps) => JSX.Element;
+export declare const ImageSlide: ({ slide, offset, render, rect, imageFit, onClick, onLoad, style, }: ImageSlideProps) => JSX.Element;

package/dist/core/modules/Carousel.js

@@ -57,7 +57,7 @@ export const Carousel = ({ slides, carousel: { finite, preload, padding, spacing
             items.push(!finite || i <= slides.length - 1 ? (React.createElement(CarouselSlide, { key: key, slide: slides[i % slides.length], offset: i - currentIndex })) : (React.createElement(Placeholder, { key: key })));
         }
     }
-    return (React.createElement("div", { ref: setCarouselRef, className: cssClass(cssPrefix()), style: {
+    return (React.createElement("div", { ref: setCarouselRef, className: clsx(cssClass(cssPrefix()), items.length > 0 && cssClass(cssPrefix("with_slides"))), style: {
             [`${cssVar(cssPrefix("slides_count"))}`]: items.length,
             [`${cssVar(cssPrefix("spacing_px"))}`]: spacingValue.pixel || 0,
             [`${cssVar(cssPrefix("spacing_percent"))}`]: spacingValue.percent || 0,

package/dist/core/modules/Navigation.js

@@ -24,7 +24,7 @@ export const Navigation = ({ slides, carousel: { finite }, labels, render: { but
     });
     React.useEffect(() => subscribeSensors(EVENT_ON_KEY_DOWN, handleKeyDown), [subscribeSensors, handleKeyDown]);
     return (React.createElement(React.Fragment, null,
-        buttonPrev ? (buttonPrev()) : (React.createElement(NavigationButton, { label: "Previous", action: ACTION_PREV, icon: PreviousIcon, renderIcon: iconPrev, disabled: finite && currentIndex === 0, labels: labels, publish: publish })),
-        buttonNext ? (buttonNext()) : (React.createElement(NavigationButton, { label: "Next", action: ACTION_NEXT, icon: NextIcon, renderIcon: iconNext, disabled: finite && currentIndex === slides.length - 1, labels: labels, publish: publish }))));
+        buttonPrev ? (buttonPrev()) : (React.createElement(NavigationButton, { label: "Previous", action: ACTION_PREV, icon: PreviousIcon, renderIcon: iconPrev, disabled: slides.length === 0 || (finite && currentIndex === 0), labels: labels, publish: publish })),
+        buttonNext ? (buttonNext()) : (React.createElement(NavigationButton, { label: "Next", action: ACTION_NEXT, icon: NextIcon, renderIcon: iconNext, disabled: slides.length === 0 || (finite && currentIndex === slides.length - 1), labels: labels, publish: publish }))));
 };
 export const NavigationModule = createModule(MODULE_NAVIGATION, Navigation);

package/dist/core/utils.d.ts

@@ -7,7 +7,7 @@ export declare const composePrefix: (base: string, prefix?: string) => string;
 export declare const makeComposePrefix: (base: string) => (prefix?: string) => string;
 export declare const label: (labels: Labels | undefined, lbl: string) => string;
 export declare const cleanup: (...cleaners: (() => void)[]) => () => void;
-export declare const makeUseContext: <T>(name: string, contextName: string, context: React.Context<T | null>) => () => T;
+export declare const makeUseContext: <T>(name: string, contextName: string, context: React.Context<T | null>) => () => NonNullable<T>;
 export declare const hasWindow: () => boolean;
 export declare const isDefined: <T = any>(x: T | undefined) => x is T;
 export declare const isNumber: (value: any) => value is number;

package/dist/plugins/slideshow/SlideshowButton.js

@@ -18,7 +18,7 @@ export const SlideshowButton = () => {
         clearTimeout(scheduler.current);
         scheduler.current = undefined;
     }, [clearTimeout]);
-    const reachedLastSlide = useEventCallback(() => finite && currentIndex === slidesCount - 1);
+    const reachedLastSlide = useEventCallback(() => slides.length === 0 || (finite && currentIndex === slidesCount - 1));
     const scheduleNextSlide = useEventCallback(() => {
         cancelScheduler();
         if (!playing ||

package/dist/plugins/zoom/ZoomContext.js

@@ -7,7 +7,7 @@ export const ZoomContextProvider = ({ slides, children }) => {
     const [isMaxZoom, setIsMaxZoom] = React.useState(false);
     const [isZoomSupported, setIsZoomSupported] = React.useState(false);
     const { state: { currentIndex }, } = useLightboxState();
-    const updateZoomSupported = useEventCallback(() => setIsZoomSupported(isImageSlide(slides[currentIndex])));
+    const updateZoomSupported = useEventCallback(() => setIsZoomSupported(slides.length > currentIndex && isImageSlide(slides[currentIndex])));
     useLayoutEffect(updateZoomSupported, [currentIndex, updateZoomSupported]);
     const context = React.useMemo(() => ({
         isMinZoom,

package/dist/styles.css

@@ -35,13 +35,15 @@
   align-content: center;
   justify-content: center;
   align-items: stretch;
-  width: calc(100% + (var(--yarl__carousel_slides_count, 0) - 1) * (100% + var(--yarl__carousel_spacing_px, 0) * 1px + var(--yarl__carousel_spacing_percent, 0) * 1%));
-  -webkit-column-gap: calc(var(--yarl__carousel_spacing_px, 0) * 1px + 100 / (100 * var(--yarl__carousel_slides_count, 0) + (var(--yarl__carousel_slides_count, 0) - 1) * var(--yarl__carousel_spacing_percent, 0)) * var(--yarl__carousel_spacing_percent, 0) * 1%);
-     -moz-column-gap: calc(var(--yarl__carousel_spacing_px, 0) * 1px + 100 / (100 * var(--yarl__carousel_slides_count, 0) + (var(--yarl__carousel_slides_count, 0) - 1) * var(--yarl__carousel_spacing_percent, 0)) * var(--yarl__carousel_spacing_percent, 0) * 1%);
-          column-gap: calc(var(--yarl__carousel_spacing_px, 0) * 1px + 100 / (100 * var(--yarl__carousel_slides_count, 0) + (var(--yarl__carousel_slides_count, 0) - 1) * var(--yarl__carousel_spacing_percent, 0)) * var(--yarl__carousel_spacing_percent, 0) * 1%);
+  width: calc(100% + (var(--yarl__carousel_slides_count) - 1) * (100% + var(--yarl__carousel_spacing_px, 0) * 1px + var(--yarl__carousel_spacing_percent, 0) * 1%));
   -webkit-transform: translateX(var(--yarl__swipe_offset, 0px));
           transform: translateX(var(--yarl__swipe_offset, 0px));
 }
+.yarl__carousel_with_slides {
+  -webkit-column-gap: calc(var(--yarl__carousel_spacing_px, 0) * 1px + 100 / (100 * var(--yarl__carousel_slides_count) + (var(--yarl__carousel_slides_count) - 1) * var(--yarl__carousel_spacing_percent, 0)) * var(--yarl__carousel_spacing_percent, 0) * 1%);
+     -moz-column-gap: calc(var(--yarl__carousel_spacing_px, 0) * 1px + 100 / (100 * var(--yarl__carousel_slides_count) + (var(--yarl__carousel_slides_count) - 1) * var(--yarl__carousel_spacing_percent, 0)) * var(--yarl__carousel_spacing_percent, 0) * 1%);
+          column-gap: calc(var(--yarl__carousel_spacing_px, 0) * 1px + 100 / (100 * var(--yarl__carousel_slides_count) + (var(--yarl__carousel_slides_count) - 1) * var(--yarl__carousel_spacing_percent, 0)) * var(--yarl__carousel_spacing_percent, 0) * 1%);
+}
 .yarl__flex_center {
   display: flex;
   justify-content: center;
@@ -51,7 +53,7 @@
 .yarl__slide {
   flex: 1;
   position: relative;
-  padding: calc(var(--yarl__carousel_padding_px, 0) * 1px + 100 / (100 * var(--yarl__carousel_slides_count, 0) + (var(--yarl__carousel_slides_count, 0) - 1) * var(--yarl__carousel_spacing_percent, 0)) * var(--yarl__carousel_padding_percent, 0) * 1%);
+  padding: calc(var(--yarl__carousel_padding_px, 0) * 1px + 100 / (100 * var(--yarl__carousel_slides_count) + (var(--yarl__carousel_slides_count) - 1) * var(--yarl__carousel_spacing_percent, 0)) * var(--yarl__carousel_padding_percent, 0) * 1%);
 }
 [dir=rtl] .yarl__slide {
   --yarl__direction: -1;

package/dist/types.d.ts

@@ -227,9 +227,9 @@ export declare type DeepPartial<T, K extends keyof T> = Omit<T, K> & {
     [P in keyof Pick<T, K>]?: Partial<Pick<T, K>[P]>;
 };
 /** Deep non-nullable utility type */
-export declare type DeepNonNullable<T> = NonNullable<{
+export declare type DeepNonNullable<T> = T extends {} ? {
     [K in keyof T]-?: NonNullable<T[K]>;
-}>;
+} : never;
 /** Lightbox external props */
 export declare type LightboxExternalProps = DeepPartial<Partial<LightboxProps>, "carousel" | "animation" | "controller" | "toolbar">;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "yet-another-react-lightbox",
-    "version": "2.0.1",
+    "version": "2.1.0",
     "description": "Modern React lightbox component",
     "author": "Igor Danchenko",
     "license": "MIT",
@@ -90,27 +90,27 @@
         "react-dom": ">=16.8.0"
     },
     "devDependencies": {
-        "@commitlint/cli": "^17.0.3",
-        "@commitlint/config-conventional": "^17.0.3",
+        "@commitlint/cli": "^17.1.2",
+        "@commitlint/config-conventional": "^17.1.0",
         "@semantic-release/changelog": "^6.0.1",
-        "@semantic-release/github": "^8.0.5",
+        "@semantic-release/github": "^8.0.6",
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^13.3.0",
         "@testing-library/user-event": "^14.4.3",
-        "@types/jest": "^28.1.6",
-        "@types/react": "^18.0.17",
+        "@types/jest": "^28.1.8",
+        "@types/react": "^18.0.18",
         "@types/react-dom": "^18.0.6",
-        "@typescript-eslint/eslint-plugin": "^5.33.0",
-        "@typescript-eslint/parser": "^5.33.0",
+        "@typescript-eslint/eslint-plugin": "^5.36.1",
+        "@typescript-eslint/parser": "^5.36.1",
         "autoprefixer": "^10.4.8",
-        "eslint": "^8.21.0",
+        "eslint": "^8.23.0",
         "eslint-config-airbnb": "^19.0.4",
         "eslint-config-airbnb-typescript": "^17.0.0",
         "eslint-config-prettier": "^8.5.0",
         "eslint-plugin-import": "^2.26.0",
         "eslint-plugin-jsx-a11y": "^6.6.1",
         "eslint-plugin-prettier": "^4.2.1",
-        "eslint-plugin-react": "^7.30.1",
+        "eslint-plugin-react": "^7.31.1",
         "eslint-plugin-react-hooks": "^4.6.0",
         "husky": "^8.0.1",
         "jest": "^28.1.3",
@@ -123,9 +123,9 @@
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "rimraf": "^3.0.2",
-        "sass": "^1.54.4",
-        "ts-jest": "^28.0.7",
-        "typescript": "^4.7.4"
+        "sass": "^1.54.8",
+        "ts-jest": "^28.0.8",
+        "typescript": "^4.8.2"
     },
     "keywords": [
         "react",