yet-another-react-lightbox 2.0.2 → 2.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist/core/components/ImageSlide.d.ts +1 -1
  2. package/dist/core/modules/Navigation.js +2 -2
  3. package/dist/core/utils.d.ts +1 -1
  4. package/dist/plugins/fullscreen/FullscreenButton.js +3 -1
  5. package/dist/plugins/slideshow/SlideshowButton.js +1 -1
  6. package/dist/plugins/zoom/ResponsiveImage.js +2 -2
  7. package/dist/plugins/zoom/ZoomContext.js +1 -1
  8. package/dist/styles.css +6 -6
  9. package/dist/types.d.ts +2 -2
  10. package/package.json +13 -13
package/dist/core/components/ImageSlide.d.ts CHANGED
@@ -11,4 +11,4 @@ export declare type ImageSlideProps = {
11
11
  onLoad?: (image: HTMLImageElement) => void;
12
12
  style?: React.CSSProperties;
13
13
  };
14
- export declare const ImageSlide: ({ slide: image, offset, render, rect, imageFit, onClick, onLoad, style, }: ImageSlideProps) => JSX.Element;
14
+ export declare const ImageSlide: ({ slide, offset, render, rect, imageFit, onClick, onLoad, style, }: ImageSlideProps) => JSX.Element;
package/dist/core/modules/Navigation.js CHANGED
@@ -24,7 +24,7 @@ export const Navigation = ({ slides, carousel: { finite }, labels, render: { but
24
24
  });
25
25
  React.useEffect(() => subscribeSensors(EVENT_ON_KEY_DOWN, handleKeyDown), [subscribeSensors, handleKeyDown]);
26
26
  return (React.createElement(React.Fragment, null,
27
- buttonPrev ? (buttonPrev()) : (React.createElement(NavigationButton, { label: "Previous", action: ACTION_PREV, icon: PreviousIcon, renderIcon: iconPrev, disabled: finite && currentIndex === 0, labels: labels, publish: publish })),
28
- buttonNext ? (buttonNext()) : (React.createElement(NavigationButton, { label: "Next", action: ACTION_NEXT, icon: NextIcon, renderIcon: iconNext, disabled: finite && currentIndex === slides.length - 1, labels: labels, publish: publish }))));
27
+ 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 })),
28
+ 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 }))));
29
29
  };
30
30
  export const NavigationModule = createModule(MODULE_NAVIGATION, Navigation);
package/dist/core/utils.d.ts CHANGED
@@ -7,7 +7,7 @@ export declare const composePrefix: (base: string, prefix?: string) => string;
7
7
  export declare const makeComposePrefix: (base: string) => (prefix?: string) => string;
8
8
  export declare const label: (labels: Labels | undefined, lbl: string) => string;
9
9
  export declare const cleanup: (...cleaners: (() => void)[]) => () => void;
10
- export declare const makeUseContext: <T>(name: string, contextName: string, context: React.Context<T | null>) => () => T;
10
+ export declare const makeUseContext: <T>(name: string, contextName: string, context: React.Context<T | null>) => () => NonNullable<T>;
11
11
  export declare const hasWindow: () => boolean;
12
12
  export declare const isDefined: <T = any>(x: T | undefined) => x is T;
13
13
  export declare const isNumber: (value: any) => value is number;
package/dist/plugins/fullscreen/FullscreenButton.js CHANGED
@@ -4,6 +4,7 @@ import { useFullscreen } from "./FullscreenContext.js";
4
4
  const EnterFullscreenIcon = createIcon("EnterFullscreen", React.createElement("path", { d: "M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" }));
5
5
  const ExitFullscreenIcon = createIcon("ExitFullscreen", React.createElement("path", { d: "M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z" }));
6
6
  export const FullscreenButton = ({ auto, labels, render }) => {
7
+ var _a;
7
8
  const [mounted, setMounted] = React.useState(false);
8
9
  const [fullscreen, setFullscreen] = React.useState(false);
9
10
  const containerRef = useFullscreen();
@@ -100,5 +101,6 @@ export const FullscreenButton = ({ auto, labels, render }) => {
100
101
  }, [handleAutoFullscreen, exitFullscreen]);
101
102
  if (!mounted || !isFullscreenEnabled())
102
103
  return null;
103
- return render.buttonFullscreen ? (React.createElement(React.Fragment, null, render.buttonFullscreen({ fullscreen, toggleFullscreen }))) : (React.createElement(IconButton, { label: fullscreen ? label(labels, "Exit Fullscreen") : label(labels, "Enter Fullscreen"), icon: fullscreen ? ExitFullscreenIcon : EnterFullscreenIcon, renderIcon: fullscreen ? render.iconExitFullscreen : render.iconEnterFullscreen, onClick: toggleFullscreen }));
104
+ const customButton = (_a = render.buttonFullscreen) === null || _a === void 0 ? void 0 : _a.call(render, { fullscreen, toggleFullscreen });
105
+ return customButton === undefined ? (React.createElement(IconButton, { label: fullscreen ? label(labels, "Exit Fullscreen") : label(labels, "Enter Fullscreen"), icon: fullscreen ? ExitFullscreenIcon : EnterFullscreenIcon, renderIcon: fullscreen ? render.iconExitFullscreen : render.iconEnterFullscreen, onClick: toggleFullscreen })) : (React.createElement(React.Fragment, null, customButton));
104
106
  };
package/dist/plugins/slideshow/SlideshowButton.js CHANGED
@@ -18,7 +18,7 @@ export const SlideshowButton = () => {
18
18
  clearTimeout(scheduler.current);
19
19
  scheduler.current = undefined;
20
20
  }, [clearTimeout]);
21
- const reachedLastSlide = useEventCallback(() => finite && currentIndex === slidesCount - 1);
21
+ const reachedLastSlide = useEventCallback(() => slides.length === 0 || (finite && currentIndex === slidesCount - 1));
22
22
  const scheduleNextSlide = useEventCallback(() => {
23
23
  cancelScheduler();
24
24
  if (!playing ||
package/dist/plugins/zoom/ResponsiveImage.js CHANGED
@@ -39,10 +39,10 @@ export const ResponsiveImage = (props) => {
39
39
  : { width: "auto", height: "100%" }),
40
40
  };
41
41
  return (React.createElement(React.Fragment, null,
42
- preload && preload !== current && (React.createElement(ImageSlide, { key: preload, ...props, slide: { ...image, src: preload, srcSet: undefined }, style: { position: "absolute", visibility: "hidden", ...style }, onLoad: () => handlePreload(preload), render: {
42
+ preload && preload !== current && (React.createElement(ImageSlide, { key: "preload", ...props, slide: { ...image, src: preload, srcSet: undefined }, style: { position: "absolute", visibility: "hidden", ...style }, onLoad: () => handlePreload(preload), render: {
43
43
  ...render,
44
44
  iconLoading: () => null,
45
45
  iconError: () => null,
46
46
  } })),
47
- current && (React.createElement(ImageSlide, { key: current, ...props, slide: { ...image, src: current, srcSet: undefined }, style: style }))));
47
+ current && (React.createElement(ImageSlide, { key: "current", ...props, slide: { ...image, src: current, srcSet: undefined }, style: style }))));
48
48
  };
package/dist/plugins/zoom/ZoomContext.js CHANGED
@@ -7,7 +7,7 @@ export const ZoomContextProvider = ({ slides, children }) => {
7
7
  const [isMaxZoom, setIsMaxZoom] = React.useState(false);
8
8
  const [isZoomSupported, setIsZoomSupported] = React.useState(false);
9
9
  const { state: { currentIndex }, } = useLightboxState();
10
- const updateZoomSupported = useEventCallback(() => setIsZoomSupported(isImageSlide(slides[currentIndex])));
10
+ const updateZoomSupported = useEventCallback(() => setIsZoomSupported(slides.length > currentIndex && isImageSlide(slides[currentIndex])));
11
11
  useLayoutEffect(updateZoomSupported, [currentIndex, updateZoomSupported]);
12
12
  const context = React.useMemo(() => ({
13
13
  isMinZoom,
package/dist/styles.css CHANGED
@@ -35,14 +35,14 @@
35
35
  align-content: center;
36
36
  justify-content: center;
37
37
  align-items: stretch;
38
- 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%));
38
+ width: calc(100% + (var(--yarl__carousel_slides_count) - 1) * (100% + var(--yarl__carousel_spacing_px, 0) * 1px + var(--yarl__carousel_spacing_percent, 0) * 1%));
39
39
  -webkit-transform: translateX(var(--yarl__swipe_offset, 0px));
40
40
  transform: translateX(var(--yarl__swipe_offset, 0px));
41
41
  }
42
42
  .yarl__carousel_with_slides {
43
- -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%);
44
- -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%);
45
- 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%);
43
+ -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%);
44
+ -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%);
45
+ 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%);
46
46
  }
47
47
  .yarl__flex_center {
48
48
  display: flex;
@@ -53,7 +53,7 @@
53
53
  .yarl__slide {
54
54
  flex: 1;
55
55
  position: relative;
56
- 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%);
56
+ 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%);
57
57
  }
58
58
  [dir=rtl] .yarl__slide {
59
59
  --yarl__direction: -1;
@@ -63,7 +63,7 @@
63
63
  max-height: 100%;
64
64
  -o-object-fit: contain;
65
65
  object-fit: contain;
66
- pointer-events: none;
66
+ touch-action: none;
67
67
  -moz-user-select: none;
68
68
  user-select: none;
69
69
  -webkit-user-select: none;
package/dist/types.d.ts CHANGED
@@ -227,9 +227,9 @@ export declare type DeepPartial<T, K extends keyof T> = Omit<T, K> & {
227
227
  [P in keyof Pick<T, K>]?: Partial<Pick<T, K>[P]>;
228
228
  };
229
229
  /** Deep non-nullable utility type */
230
- export declare type DeepNonNullable<T> = NonNullable<{
230
+ export declare type DeepNonNullable<T> = T extends {} ? {
231
231
  [K in keyof T]-?: NonNullable<T[K]>;
232
- }>;
232
+ } : never;
233
233
  /** Lightbox external props */
234
234
  export declare type LightboxExternalProps = DeepPartial<Partial<LightboxProps>, "carousel" | "animation" | "controller" | "toolbar">;
235
235
  export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "yet-another-react-lightbox",
3
- "version": "2.0.2",
3
+ "version": "2.1.1",
4
4
  "description": "Modern React lightbox component",
5
5
  "author": "Igor Danchenko",
6
6
  "license": "MIT",
@@ -90,27 +90,27 @@
90
90
  "react-dom": ">=16.8.0"
91
91
  },
92
92
  "devDependencies": {
93
- "@commitlint/cli": "^17.0.3",
94
- "@commitlint/config-conventional": "^17.0.3",
93
+ "@commitlint/cli": "^17.1.2",
94
+ "@commitlint/config-conventional": "^17.1.0",
95
95
  "@semantic-release/changelog": "^6.0.1",
96
- "@semantic-release/github": "^8.0.5",
96
+ "@semantic-release/github": "^8.0.6",
97
97
  "@testing-library/jest-dom": "^5.16.5",
98
- "@testing-library/react": "^13.3.0",
98
+ "@testing-library/react": "^13.4.0",
99
99
  "@testing-library/user-event": "^14.4.3",
100
- "@types/jest": "^28.1.7",
101
- "@types/react": "^18.0.17",
100
+ "@types/jest": "^28.1.8",
101
+ "@types/react": "^18.0.18",
102
102
  "@types/react-dom": "^18.0.6",
103
- "@typescript-eslint/eslint-plugin": "^5.33.1",
104
- "@typescript-eslint/parser": "^5.33.1",
103
+ "@typescript-eslint/eslint-plugin": "^5.36.2",
104
+ "@typescript-eslint/parser": "^5.36.2",
105
105
  "autoprefixer": "^10.4.8",
106
- "eslint": "^8.22.0",
106
+ "eslint": "^8.23.0",
107
107
  "eslint-config-airbnb": "^19.0.4",
108
108
  "eslint-config-airbnb-typescript": "^17.0.0",
109
109
  "eslint-config-prettier": "^8.5.0",
110
110
  "eslint-plugin-import": "^2.26.0",
111
111
  "eslint-plugin-jsx-a11y": "^6.6.1",
112
112
  "eslint-plugin-prettier": "^4.2.1",
113
- "eslint-plugin-react": "^7.30.1",
113
+ "eslint-plugin-react": "^7.31.7",
114
114
  "eslint-plugin-react-hooks": "^4.6.0",
115
115
  "husky": "^8.0.1",
116
116
  "jest": "^28.1.3",
@@ -123,9 +123,9 @@
123
123
  "react": "^18.2.0",
124
124
  "react-dom": "^18.2.0",
125
125
  "rimraf": "^3.0.2",
126
- "sass": "^1.54.4",
126
+ "sass": "^1.54.8",
127
127
  "ts-jest": "^28.0.8",
128
- "typescript": "^4.7.4"
128
+ "typescript": "^4.8.2"
129
129
  },
130
130
  "keywords": [
131
131
  "react",