yet-another-react-lightbox 3.32.0 → 3.32.2
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.
- package/README.md +10 -4
- package/dist/index.d.ts +1 -1
- package/dist/index.js +2 -2
- package/dist/plugins/captions/captions.css +1 -1
- package/dist/plugins/counter/counter.css +1 -1
- package/dist/plugins/download/index.js +23 -1
- package/dist/plugins/thumbnails/thumbnails.css +1 -1
- package/dist/styles.css +1 -1
- package/package.json +7 -9
package/README.md
CHANGED
|
@@ -1,13 +1,19 @@
|
|
|
1
|
+
<div align="center">
|
|
2
|
+
|
|
3
|
+
<img alt="" src=".github/assets/logo.webp" width="180" height="180" />
|
|
4
|
+
|
|
1
5
|
# Yet Another React Lightbox
|
|
2
6
|
|
|
7
|
+
[](https://www.npmjs.com/package/yet-another-react-lightbox)
|
|
8
|
+
[](https://github.com/igordanchenko/yet-another-react-lightbox/blob/main/.size-limit.json)
|
|
9
|
+
[](https://github.com/igordanchenko/yet-another-react-lightbox/blob/main/LICENSE)
|
|
10
|
+
|
|
3
11
|
Modern React lightbox component. Performant, easy to use, customizable, and
|
|
4
12
|
extendable.
|
|
5
13
|
|
|
6
|
-
|
|
14
|
+
</div>
|
|
7
15
|
|
|
8
|
-
|
|
9
|
-
[](https://bundlephobia.com/package/yet-another-react-lightbox)
|
|
10
|
-
[](https://github.com/igordanchenko/yet-another-react-lightbox/blob/main/LICENSE)
|
|
16
|
+
## Overview
|
|
11
17
|
|
|
12
18
|
- **Built for React:** works with React 19, 18, 17, and 16.8.0+
|
|
13
19
|
- **UX:** supports keyboard, mouse, touchpad, and touchscreen navigation
|
package/dist/index.d.ts
CHANGED
|
@@ -87,7 +87,7 @@ declare function useEventCallback<Args extends unknown[], Return>(fn: (...args:
|
|
|
87
87
|
declare function setRef<T>(ref: React.MutableRefObject<T | null> | ((instance: T | null) => void) | null | undefined, value: T | null): void;
|
|
88
88
|
declare function useForkRef<InstanceA, InstanceB>(refA: React.Ref<InstanceA> | null | undefined, refB: React.Ref<InstanceB> | null | undefined): React.Ref<InstanceA & InstanceB> | null;
|
|
89
89
|
|
|
90
|
-
declare const useLayoutEffect: typeof React.
|
|
90
|
+
declare const useLayoutEffect: typeof React.useLayoutEffect;
|
|
91
91
|
|
|
92
92
|
declare function useLoseFocus(focus: () => void, disabled?: boolean): {
|
|
93
93
|
onFocus: () => void;
|
package/dist/index.js
CHANGED
|
@@ -662,11 +662,11 @@ function useThrottle(callback, delay) {
|
|
|
662
662
|
const delayCallback = useDelay();
|
|
663
663
|
const executeCallback = useEventCallback((...args) => {
|
|
664
664
|
lastCallbackTime.current = Date.now();
|
|
665
|
-
callback(args);
|
|
665
|
+
callback(...args);
|
|
666
666
|
});
|
|
667
667
|
return React.useCallback((...args) => {
|
|
668
668
|
delayCallback(() => {
|
|
669
|
-
executeCallback(args);
|
|
669
|
+
executeCallback(...args);
|
|
670
670
|
}, delay - (Date.now() - lastCallbackTime.current));
|
|
671
671
|
}, [delay, executeCallback, delayCallback]);
|
|
672
672
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.yarl__slide_captions_container{
|
|
1
|
+
.yarl__slide_captions_container{position:absolute;left:var(--yarl__slide_captions_container_left,0);right:var(--yarl__slide_captions_container_right,0);padding:var(--yarl__slide_captions_container_padding,16px);background:var(--yarl__slide_captions_container_background,rgba(0,0,0,.5));-webkit-transform:translateZ(0)}.yarl__slide_title{color:var(--yarl__slide_title_color,#fff);font-size:var(--yarl__slide_title_font_size,125%);font-weight:var(--yarl__slide_title_font_weight,bolder);max-width:calc(100% - var(--yarl__toolbar_width, 0px));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.yarl__slide_title_container{top:var(--yarl__slide_title_container_top,0)}.yarl__slide_description{overflow:hidden;hyphens:auto;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--yarl__slide_description_max_lines,3);text-align:var(--yarl__slide_description_text_align,start);color:var(--yarl__slide_description_color,#fff)}.yarl__slide_description_container{bottom:var(--yarl__slide_description_container_bottom,0)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.yarl__counter{bottom:var(--yarl__counter_bottom,unset);color:var(--yarl__counter_color,var(--yarl__color_button,hsla(0,0%,100%,.8)));filter:var(--yarl__counter_filter,drop-shadow(2px 2px 2px rgba(0,0,0,.8)));
|
|
1
|
+
.yarl__counter{position:var(--yarl__counter_position,absolute);top:var(--yarl__counter_top,0);left:var(--yarl__counter_left,0);bottom:var(--yarl__counter_bottom,unset);right:var(--yarl__counter_right,unset);color:var(--yarl__counter_color,var(--yarl__color_button,hsla(0,0%,100%,.8)));filter:var(--yarl__counter_filter,drop-shadow(2px 2px 2px rgba(0,0,0,.8)));margin:var(--yarl__counter_margin,var(--yarl__toolbar_padding,8px));padding:var(--yarl__counter_padding,var(--yarl__button_padding,8px));line-height:var(--yarl__counter_line_height,var(--yarl__icon_size,32px));-webkit-user-select:var(--yarl__counter_user_select,none);-moz-user-select:var(--yarl__counter_user_select,none);user-select:var(--yarl__counter_user_select,none)}[dir=rtl] .yarl__counter{left:var(--yarl__counter_rtl_left,unset);right:var(--yarl__counter_rtl_right,0)}
|
|
@@ -10,12 +10,34 @@ const resolveDownloadProps = (download) => ({
|
|
|
10
10
|
...download,
|
|
11
11
|
});
|
|
12
12
|
|
|
13
|
+
function parseContentDispositionFilename(disposition) {
|
|
14
|
+
if (!disposition) {
|
|
15
|
+
return undefined;
|
|
16
|
+
}
|
|
17
|
+
const extended = /filename\*\s*=\s*UTF-8''([^;]+)/i.exec(disposition);
|
|
18
|
+
if (extended) {
|
|
19
|
+
try {
|
|
20
|
+
const decoded = decodeURIComponent(extended[1].trim());
|
|
21
|
+
if (decoded) {
|
|
22
|
+
return decoded;
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
catch (_) {
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
const plain = /filename\s*=\s*("[^"]*"|[^;]+)/i.exec(disposition);
|
|
29
|
+
return (plain === null || plain === void 0 ? void 0 : plain[1].trim().replace(/^"(.*)"$/, "$1")) || undefined;
|
|
30
|
+
}
|
|
31
|
+
function getContentDisposition(xhr) {
|
|
32
|
+
var _a, _b;
|
|
33
|
+
return (_b = (_a = /^content-disposition:(.*)$/im.exec(xhr.getAllResponseHeaders())) === null || _a === void 0 ? void 0 : _a[1]) !== null && _b !== void 0 ? _b : null;
|
|
34
|
+
}
|
|
13
35
|
function download(url, name) {
|
|
14
36
|
const xhr = new XMLHttpRequest();
|
|
15
37
|
xhr.open("GET", url);
|
|
16
38
|
xhr.responseType = "blob";
|
|
17
39
|
xhr.onload = () => {
|
|
18
|
-
saveAs(xhr.response, name);
|
|
40
|
+
saveAs(xhr.response, name || parseContentDispositionFilename(getContentDisposition(xhr)));
|
|
19
41
|
};
|
|
20
42
|
xhr.onerror = () => {
|
|
21
43
|
console.error("Failed to download file");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.yarl__thumbnails{display:flex;height:100%}.yarl__thumbnails_bottom,.yarl__thumbnails_end .yarl__thumbnails_track,.yarl__thumbnails_start .yarl__thumbnails_track,.yarl__thumbnails_top{flex-direction:column}.yarl__thumbnails_wrapper{flex:1;position:relative}.yarl__thumbnails_container{background-color:var(--yarl__thumbnails_container_background_color,var(--yarl__color_backdrop,#000));
|
|
1
|
+
.yarl__thumbnails{display:flex;height:100%}.yarl__thumbnails_bottom,.yarl__thumbnails_end .yarl__thumbnails_track,.yarl__thumbnails_start .yarl__thumbnails_track,.yarl__thumbnails_top{flex-direction:column}.yarl__thumbnails_wrapper{flex:1;position:relative}.yarl__thumbnails_container{flex:0 0 auto;background-color:var(--yarl__thumbnails_container_background_color,var(--yarl__color_backdrop,#000));padding:var(--yarl__thumbnails_container_padding,16px);position:relative;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-touch-callout:none}.yarl__thumbnails_vignette{position:absolute;pointer-events:none;--yarl__thumbnails_vignette_size:12%}@media (min-width:1200px){.yarl__thumbnails_vignette{--yarl__thumbnails_vignette_size:8%}}@media (min-width:2000px){.yarl__thumbnails_vignette{--yarl__thumbnails_vignette_size:5%}}.yarl__thumbnails_bottom .yarl__thumbnails_vignette,.yarl__thumbnails_top .yarl__thumbnails_vignette{height:100%;left:0;right:0;background:linear-gradient(to right,var(--yarl__color_backdrop,#000) 0,transparent var(--yarl__thumbnails_vignette_size,12%) calc(100% - var(--yarl__thumbnails_vignette_size, 12%)),var(--yarl__color_backdrop,#000) 100%)}.yarl__thumbnails_end .yarl__thumbnails_vignette,.yarl__thumbnails_start .yarl__thumbnails_vignette{width:100%;top:0;bottom:0;background:linear-gradient(to bottom,var(--yarl__color_backdrop,#000) 0,transparent var(--yarl__thumbnails_vignette_size,12%) calc(100% - var(--yarl__thumbnails_vignette_size, 12%)),var(--yarl__color_backdrop,#000) 100%)}.yarl__thumbnails_track{outline:none;gap:var(--yarl__thumbnails_thumbnail_gap,16px)}.yarl__thumbnails_thumbnail{flex:0 0 auto;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--yarl__thumbnails_thumbnail_background,#000);border-width:var(--yarl__thumbnails_thumbnail_border,1px);border-style:var(--yarl__thumbnails_thumbnail_border_style,solid);border-color:var(--yarl__thumbnails_thumbnail_border_color,var(--yarl__color_button,hsla(0,0%,100%,.8)));border-radius:var(--yarl__thumbnails_thumbnail_border_radius,4px);-webkit-tap-highlight-color:transparent;position:relative;overflow:hidden;padding:var(--yarl__thumbnails_thumbnail_padding,4px);outline:none;width:var(--yarl__thumbnails_thumbnail_width,120px);height:var(--yarl__thumbnails_thumbnail_height,80px);box-sizing:content-box}.yarl__thumbnails_thumbnail_active{border-color:var(--yarl__thumbnails_thumbnail_active_border_color,var(--yarl__color_button_active,#fff))}.yarl__thumbnails_thumbnail_fadein{opacity:0;animation:yarl__thumbnails_thumbnail_fadein var(--yarl__thumbnails_thumbnail_fadein_duration,.5s) ease-in-out var(--yarl__thumbnails_thumbnail_fadein_delay,0s) forwards}.yarl__thumbnails_thumbnail_fadeout{animation:yarl__thumbnails_thumbnail_fadeout var(--yarl__thumbnails_thumbnail_fadeout_duration,.5s) ease-in-out var(--yarl__thumbnails_thumbnail_fadeout_delay,0s) forwards;cursor:unset}.yarl__thumbnails_thumbnail_placeholder{visibility:hidden;cursor:unset}.yarl__thumbnails_thumbnail:focus{box-shadow:var(--yarl__thumbnails_thumbnail_focus_box_shadow,#000 0 0 0 2px,var(--yarl__color_button,hsla(0,0%,100%,.8)) 0 0 0 4px)}.yarl__thumbnails_thumbnail:focus:not(:focus-visible){box-shadow:unset}.yarl__thumbnails_thumbnail:focus-visible{box-shadow:var(--yarl__thumbnails_thumbnail_focus_box_shadow,#000 0 0 0 2px,var(--yarl__color_button,hsla(0,0%,100%,.8)) 0 0 0 4px)}.yarl__thumbnails_thumbnail_icon{color:var(--yarl__thumbnails_thumbnail_icon_color,var(--yarl__color_button,hsla(0,0%,100%,.8)));filter:var(--yarl__thumbnails_thumbnail_icon_filter,drop-shadow(2px 2px 2px rgba(0,0,0,.8)));position:absolute;top:50%;left:50%;transform:translateX(-50%) translateY(-50%);width:var(--yarl__thumbnails_thumbnail_icon_size,32px);height:var(--yarl__thumbnails_thumbnail_icon_size,32px)}@keyframes yarl__thumbnails_thumbnail_fadein{0%{opacity:0}to{opacity:1}}@keyframes yarl__thumbnails_thumbnail_fadeout{0%{opacity:1}to{opacity:0}}
|
package/dist/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.yarl__fullsize{
|
|
1
|
+
.yarl__fullsize{width:100%;height:100%}.yarl__relative{position:relative}.yarl__portal{position:fixed;top:0;right:0;bottom:0;left:0;opacity:0;overflow:hidden;z-index:var(--yarl__portal_zindex,9999);transition:opacity var(--yarl__fade_animation_duration,.25s) var(--yarl__fade_animation_timing_function,ease);pointer-events:auto}.yarl__portal_open{opacity:1}.yarl__container{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;background-color:var(--yarl__container_background_color,var(--yarl__color_backdrop,#000));outline:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;touch-action:var(--yarl__controller_touch_action,none);overscroll-behavior:var(--yarl__controller_overscroll_behavior,contain)}.yarl__carousel{display:flex;flex:0 0 auto;height:100%;align-content:center;justify-content:center;align-items:stretch;width:calc(100% + (var(--yarl__carousel_slides_count) - 1)*(100% + var(--yarl__carousel_spacing_px, 0)*1px + var(--yarl__carousel_spacing_percent, 0)*1%));transform:translate(var(--yarl__swipe_offset,0),var(--yarl__pull_offset,0));opacity:var(--yarl__pull_opacity,1)}.yarl__carousel_with_slides{-moz-column-gap:calc(var(--yarl__carousel_spacing_px, 0)*1px + 100/(var(--yarl__carousel_slides_count)*100 + (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/(var(--yarl__carousel_slides_count)*100 + (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;align-content:center;align-items:center}.yarl__slide{flex:1;position:relative;overflow:hidden;padding:calc(var(--yarl__carousel_padding_px, 0)*1px + 100/(var(--yarl__carousel_slides_count)*100 + (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}.yarl__slide_image{max-width:100%;max-height:100%;-o-object-fit:contain;object-fit:contain;touch-action:var(--yarl__controller_touch_action,none);-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-touch-callout:none}.yarl__slide_image_cover{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.yarl__slide_image_loading{opacity:0}@media screen and (min-width:800px){.yarl__slide_wrapper:not(.yarl__slide_wrapper_interactive) .yarl__slide_image{-webkit-transform:translateZ(0);-webkit-backface-visibility:hidden;-webkit-transform-style:preserve-3d}}.yarl__slide_placeholder{position:absolute;top:50%;left:50%;transform:translateX(-50%) translateY(-50%);line-height:0}.yarl__slide_loading{color:var(--yarl__slide_icon_loading_color,var(--yarl__color_button,hsla(0,0%,100%,.8)));animation:yarl__delayed_fadein 1s linear}.yarl__slide_loading line{animation:yarl__stroke_opacity 1s linear infinite}.yarl__slide_loading line:first-of-type{animation-delay:-1.875s}.yarl__slide_loading line:nth-of-type(2){animation-delay:-1.75s}.yarl__slide_loading line:nth-of-type(3){animation-delay:-1.625s}.yarl__slide_loading line:nth-of-type(4){animation-delay:-1.5s}.yarl__slide_loading line:nth-of-type(5){animation-delay:-1.375s}.yarl__slide_loading line:nth-of-type(6){animation-delay:-1.25s}.yarl__slide_loading line:nth-of-type(7){animation-delay:-1.125s}.yarl__slide_loading line:nth-of-type(8){animation-delay:-1s}.yarl__slide_error{width:var(--yarl__slide_icon_error_size,48px);height:var(--yarl__slide_icon_error_size,48px);color:var(--yarl__slide_icon_error_color,red)}@media (prefers-reduced-motion){.yarl__portal,.yarl__slide{transition:unset}.yarl__slide_loading,.yarl__slide_loading line{animation:unset}}.yarl__toolbar{position:absolute;top:0;right:0;bottom:auto;left:auto;display:flex;justify-content:flex-end;padding:var(--yarl__toolbar_padding,8px)}[dir=rtl] .yarl__toolbar{top:0;right:auto;bottom:auto;left:0}.yarl__icon{width:var(--yarl__icon_size,32px);height:var(--yarl__icon_size,32px)}.yarl__button{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--yarl__button_background_color,transparent);border:var(--yarl__button_border,0);margin:var(--yarl__button_margin,0);outline:none;line-height:0;padding:var(--yarl__button_padding,8px);color:var(--yarl__color_button,hsla(0,0%,100%,.8));filter:var(--yarl__button_filter,drop-shadow(2px 2px 2px rgba(0,0,0,.8)));-webkit-tap-highlight-color:transparent}.yarl__button:focus{color:var(--yarl__color_button_active,#fff)}.yarl__button:focus:not(:focus-visible){color:var(--yarl__color_button,hsla(0,0%,100%,.8))}.yarl__button:focus-visible{color:var(--yarl__color_button_active,#fff)}@media (hover:hover){.yarl__button:focus-visible:hover,.yarl__button:focus:hover,.yarl__button:hover{color:var(--yarl__color_button_active,#fff)}}.yarl__button:disabled{color:var(--yarl__color_button_disabled,hsla(0,0%,100%,.4));cursor:default}.yarl__navigation_next,.yarl__navigation_prev{position:absolute;top:50%;transform:translateY(-50%);padding:var(--yarl__navigation_button_padding,24px 16px)}.yarl__navigation_prev{left:0}[dir=rtl] .yarl__navigation_prev{left:unset;right:0;transform:translateY(-50%) rotate(180deg)}.yarl__navigation_next{right:0}[dir=rtl] .yarl__navigation_next{left:0;right:unset;transform:translateY(-50%) rotate(180deg)}.yarl__no_scroll{height:100%;overflow:hidden;overscroll-behavior:none}@keyframes yarl__delayed_fadein{0%{opacity:0}80%{opacity:0}to{opacity:1}}@keyframes yarl__stroke_opacity{0%{stroke-opacity:1}to{stroke-opacity:.125}}
|
package/package.json
CHANGED
|
@@ -1,7 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "yet-another-react-lightbox",
|
|
3
|
-
"version": "3.32.
|
|
3
|
+
"version": "3.32.2",
|
|
4
4
|
"description": "Modern React lightbox component",
|
|
5
|
+
"repository": "github:igordanchenko/yet-another-react-lightbox",
|
|
6
|
+
"homepage": "https://yet-another-react-lightbox.com",
|
|
7
|
+
"bugs": "https://github.com/igordanchenko/yet-another-react-lightbox/issues",
|
|
8
|
+
"funding": "https://github.com/sponsors/igordanchenko",
|
|
5
9
|
"author": "Igor Danchenko",
|
|
6
10
|
"license": "MIT",
|
|
7
11
|
"type": "module",
|
|
@@ -114,13 +118,6 @@
|
|
|
114
118
|
"sideEffects": [
|
|
115
119
|
"*.css"
|
|
116
120
|
],
|
|
117
|
-
"homepage": "https://yet-another-react-lightbox.com",
|
|
118
|
-
"funding": "https://github.com/sponsors/igordanchenko",
|
|
119
|
-
"bugs": "https://github.com/igordanchenko/yet-another-react-lightbox/issues",
|
|
120
|
-
"repository": {
|
|
121
|
-
"type": "git",
|
|
122
|
-
"url": "git+https://github.com/igordanchenko/yet-another-react-lightbox.git"
|
|
123
|
-
},
|
|
124
121
|
"engines": {
|
|
125
122
|
"node": ">=14"
|
|
126
123
|
},
|
|
@@ -146,5 +143,6 @@
|
|
|
146
143
|
"react lightbox",
|
|
147
144
|
"react image lightbox",
|
|
148
145
|
"react photo lightbox"
|
|
149
|
-
]
|
|
146
|
+
],
|
|
147
|
+
"bundleSize": "10.6 kB"
|
|
150
148
|
}
|