@mantine/lightbox 9.5.2 → 9.6.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.
- package/cjs/Lightbox.cjs +4 -25
- package/cjs/Lightbox.cjs.map +1 -1
- package/cjs/LightboxBase.cjs +36 -0
- package/cjs/LightboxBase.cjs.map +1 -0
- package/cjs/LightboxProvider/LightboxProvider.cjs +2 -2
- package/cjs/LightboxProvider/LightboxProvider.cjs.map +1 -1
- package/cjs/LightboxThumbnails/LightboxThumbnails.cjs +5 -5
- package/cjs/LightboxThumbnails/LightboxThumbnails.cjs.map +1 -1
- package/cjs/index.cjs +2 -2
- package/esm/Lightbox.mjs +5 -26
- package/esm/Lightbox.mjs.map +1 -1
- package/esm/LightboxBase.mjs +36 -0
- package/esm/LightboxBase.mjs.map +1 -0
- package/esm/LightboxProvider/LightboxProvider.mjs +2 -2
- package/esm/LightboxProvider/LightboxProvider.mjs.map +1 -1
- package/esm/LightboxThumbnails/LightboxThumbnails.mjs +5 -5
- package/esm/LightboxThumbnails/LightboxThumbnails.mjs.map +1 -1
- package/esm/index.mjs +2 -2
- package/lib/Lightbox.d.ts +4 -35
- package/lib/LightboxBase.d.ts +63 -0
- package/lib/LightboxProvider/LightboxProvider.d.ts +1 -1
- package/lib/index.d.mts +1 -1
- package/lib/index.d.ts +1 -1
- package/lib/lightbox.types.d.ts +10 -2
- package/package.json +4 -4
package/cjs/Lightbox.cjs
CHANGED
|
@@ -2,38 +2,17 @@
|
|
|
2
2
|
const require_lightbox_store = require("./lightbox.store.cjs");
|
|
3
3
|
const require_Lightbox_module = require("./Lightbox.module.cjs");
|
|
4
4
|
const require_LightboxCaption = require("./LightboxCaption/LightboxCaption.cjs");
|
|
5
|
-
const require_LightboxCloseButton = require("./LightboxCloseButton/LightboxCloseButton.cjs");
|
|
6
5
|
const require_LightboxNavigation = require("./LightboxNavigation/LightboxNavigation.cjs");
|
|
7
|
-
const require_LightboxProvider = require("./LightboxProvider/LightboxProvider.cjs");
|
|
8
6
|
const require_LightboxRoot = require("./LightboxRoot/LightboxRoot.cjs");
|
|
9
7
|
const require_LightboxSlide = require("./LightboxSlide/LightboxSlide.cjs");
|
|
10
8
|
const require_LightboxSlides = require("./LightboxSlides/LightboxSlides.cjs");
|
|
11
9
|
const require_LightboxThumbnails = require("./LightboxThumbnails/LightboxThumbnails.cjs");
|
|
12
10
|
const require_LightboxToolbar = require("./LightboxToolbar/LightboxToolbar.cjs");
|
|
13
|
-
|
|
14
|
-
|
|
11
|
+
const require_LightboxBase = require("./LightboxBase.cjs");
|
|
12
|
+
const require_LightboxCloseButton = require("./LightboxCloseButton/LightboxCloseButton.cjs");
|
|
13
|
+
const require_LightboxProvider = require("./LightboxProvider/LightboxProvider.cjs");
|
|
15
14
|
//#region packages/@mantine/lightbox/src/Lightbox.tsx
|
|
16
|
-
const
|
|
17
|
-
...require_LightboxRoot.lightboxRootDefaultProps,
|
|
18
|
-
withNavigation: true
|
|
19
|
-
};
|
|
20
|
-
const Lightbox = (0, _mantine_core.factory)((_props) => {
|
|
21
|
-
const { slides, toolbarItems, withNavigation, children, ...others } = (0, _mantine_core.useProps)("Lightbox", defaultProps, _props);
|
|
22
|
-
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_LightboxRoot.LightboxRoot, {
|
|
23
|
-
...others,
|
|
24
|
-
slides,
|
|
25
|
-
children: children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
|
|
26
|
-
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_LightboxToolbar.LightboxToolbar, { toolbarItems }),
|
|
27
|
-
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_LightboxSlides.LightboxSlides, { children: slides.map((slide, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_LightboxSlide.LightboxSlide, {
|
|
28
|
-
slide,
|
|
29
|
-
index
|
|
30
|
-
}, index)) }),
|
|
31
|
-
withNavigation && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_LightboxNavigation.LightboxNavigation, {}),
|
|
32
|
-
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_LightboxCaption.LightboxCaption, {}),
|
|
33
|
-
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_LightboxThumbnails.LightboxThumbnails, {})
|
|
34
|
-
] })
|
|
35
|
-
});
|
|
36
|
-
});
|
|
15
|
+
const Lightbox = require_LightboxBase.LightboxBase;
|
|
37
16
|
Lightbox.classes = require_Lightbox_module.default;
|
|
38
17
|
Lightbox.displayName = "@mantine/lightbox/Lightbox";
|
|
39
18
|
Lightbox.Root = require_LightboxRoot.LightboxRoot;
|
package/cjs/Lightbox.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Lightbox.cjs","names":["
|
|
1
|
+
{"version":3,"file":"Lightbox.cjs","names":["LightboxBase","classes","LightboxRoot","LightboxToolbar","LightboxSlides","LightboxSlide","LightboxThumbnails","LightboxNavigation","LightboxCaption","LightboxCloseButton","LightboxProviderComponent","lightbox"],"sources":["../src/Lightbox.tsx"],"sourcesContent":["import { lightbox } from './lightbox.store';\nimport { LightboxBase } from './LightboxBase';\nimport { LightboxCaption } from './LightboxCaption/LightboxCaption';\nimport { LightboxCloseButton } from './LightboxCloseButton/LightboxCloseButton';\nimport { LightboxNavigation } from './LightboxNavigation/LightboxNavigation';\nimport { LightboxProviderComponent } from './LightboxProvider/LightboxProvider';\nimport { LightboxRoot } from './LightboxRoot/LightboxRoot';\nimport { LightboxSlide } from './LightboxSlide/LightboxSlide';\nimport { LightboxSlides } from './LightboxSlides/LightboxSlides';\nimport { LightboxThumbnails } from './LightboxThumbnails/LightboxThumbnails';\nimport { LightboxToolbar } from './LightboxToolbar/LightboxToolbar';\nimport classes from './Lightbox.module.css';\n\nexport type { LightboxFactory, LightboxProps, LightboxStylesNames } from './LightboxBase';\n\nexport const Lightbox = LightboxBase;\n\nLightbox.classes = classes;\nLightbox.displayName = '@mantine/lightbox/Lightbox';\nLightbox.Root = LightboxRoot;\nLightbox.Toolbar = LightboxToolbar;\nLightbox.Slides = LightboxSlides;\nLightbox.Slide = LightboxSlide;\nLightbox.Thumbnails = LightboxThumbnails;\nLightbox.Navigation = LightboxNavigation;\nLightbox.Caption = LightboxCaption;\nLightbox.CloseButton = LightboxCloseButton;\nLightbox.Provider = LightboxProviderComponent;\nLightbox.open = lightbox.open;\nLightbox.close = lightbox.close;\nLightbox.next = lightbox.next;\nLightbox.prev = lightbox.prev;\nLightbox.setIndex = lightbox.setIndex;\n"],"mappings":";;;;;;;;;;;;;;AAeA,MAAa,WAAWA,qBAAAA;AAExB,SAAS,UAAUC,wBAAAA;AACnB,SAAS,cAAc;AACvB,SAAS,OAAOC,qBAAAA;AAChB,SAAS,UAAUC,wBAAAA;AACnB,SAAS,SAASC,uBAAAA;AAClB,SAAS,QAAQC,sBAAAA;AACjB,SAAS,aAAaC,2BAAAA;AACtB,SAAS,aAAaC,2BAAAA;AACtB,SAAS,UAAUC,wBAAAA;AACnB,SAAS,cAAcC,4BAAAA;AACvB,SAAS,WAAWC,yBAAAA;AACpB,SAAS,OAAOC,uBAAAA,SAAS;AACzB,SAAS,QAAQA,uBAAAA,SAAS;AAC1B,SAAS,OAAOA,uBAAAA,SAAS;AACzB,SAAS,OAAOA,uBAAAA,SAAS;AACzB,SAAS,WAAWA,uBAAAA,SAAS"}
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
const require_LightboxCaption = require("./LightboxCaption/LightboxCaption.cjs");
|
|
3
|
+
const require_LightboxNavigation = require("./LightboxNavigation/LightboxNavigation.cjs");
|
|
4
|
+
const require_LightboxRoot = require("./LightboxRoot/LightboxRoot.cjs");
|
|
5
|
+
const require_LightboxSlide = require("./LightboxSlide/LightboxSlide.cjs");
|
|
6
|
+
const require_LightboxSlides = require("./LightboxSlides/LightboxSlides.cjs");
|
|
7
|
+
const require_LightboxThumbnails = require("./LightboxThumbnails/LightboxThumbnails.cjs");
|
|
8
|
+
const require_LightboxToolbar = require("./LightboxToolbar/LightboxToolbar.cjs");
|
|
9
|
+
let _mantine_core = require("@mantine/core");
|
|
10
|
+
let react_jsx_runtime = require("react/jsx-runtime");
|
|
11
|
+
//#region packages/@mantine/lightbox/src/LightboxBase.tsx
|
|
12
|
+
const defaultProps = {
|
|
13
|
+
...require_LightboxRoot.lightboxRootDefaultProps,
|
|
14
|
+
withNavigation: true
|
|
15
|
+
};
|
|
16
|
+
const LightboxBase = (0, _mantine_core.factory)((_props) => {
|
|
17
|
+
const { slides, toolbarItems, withNavigation, children, ...others } = (0, _mantine_core.useProps)("Lightbox", defaultProps, _props);
|
|
18
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_LightboxRoot.LightboxRoot, {
|
|
19
|
+
...others,
|
|
20
|
+
slides,
|
|
21
|
+
children: children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
|
|
22
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_LightboxToolbar.LightboxToolbar, { toolbarItems }),
|
|
23
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_LightboxSlides.LightboxSlides, { children: slides.map((slide, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_LightboxSlide.LightboxSlide, {
|
|
24
|
+
slide,
|
|
25
|
+
index
|
|
26
|
+
}, index)) }),
|
|
27
|
+
withNavigation && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_LightboxNavigation.LightboxNavigation, {}),
|
|
28
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_LightboxCaption.LightboxCaption, {}),
|
|
29
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_LightboxThumbnails.LightboxThumbnails, {})
|
|
30
|
+
] })
|
|
31
|
+
});
|
|
32
|
+
});
|
|
33
|
+
//#endregion
|
|
34
|
+
exports.LightboxBase = LightboxBase;
|
|
35
|
+
|
|
36
|
+
//# sourceMappingURL=LightboxBase.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"LightboxBase.cjs","names":["lightboxRootDefaultProps","factory","useProps","LightboxRoot","LightboxToolbar","LightboxSlides","LightboxSlide","LightboxNavigation","LightboxCaption","LightboxThumbnails"],"sources":["../src/LightboxBase.tsx"],"sourcesContent":["import { factory, Factory, useProps } from '@mantine/core';\nimport { lightbox } from './lightbox.store';\nimport type { ToolbarItems } from './lightbox.types';\nimport { LightboxCaption } from './LightboxCaption/LightboxCaption';\nimport { LightboxCloseButton } from './LightboxCloseButton/LightboxCloseButton';\nimport { LightboxNavigation } from './LightboxNavigation/LightboxNavigation';\nimport type { LightboxProviderComponent } from './LightboxProvider/LightboxProvider';\nimport {\n LightboxRoot,\n lightboxRootDefaultProps,\n LightboxRootProps,\n LightboxRootStylesNames,\n} from './LightboxRoot/LightboxRoot';\nimport { LightboxSlide } from './LightboxSlide/LightboxSlide';\nimport { LightboxSlides } from './LightboxSlides/LightboxSlides';\nimport { LightboxThumbnails } from './LightboxThumbnails/LightboxThumbnails';\nimport { LightboxToolbar } from './LightboxToolbar/LightboxToolbar';\n\nexport type LightboxStylesNames = LightboxRootStylesNames;\n\nexport interface LightboxProps extends Omit<LightboxRootProps, 'children'> {\n /** Custom toolbar items, overrides default toolbar. Can be a function that receives the current lightbox state and handlers. */\n toolbarItems?: ToolbarItems;\n\n /** Shows previous/next navigation arrows @default true */\n withNavigation?: boolean;\n\n /** Custom lightbox layout, overrides the default layout built from compound components */\n children?: React.ReactNode;\n}\n\nexport type LightboxFactory = Factory<{\n props: LightboxProps;\n ref: HTMLDivElement;\n stylesNames: LightboxStylesNames;\n staticComponents: {\n Root: typeof LightboxRoot;\n Toolbar: typeof LightboxToolbar;\n Slides: typeof LightboxSlides;\n Slide: typeof LightboxSlide;\n Thumbnails: typeof LightboxThumbnails;\n Navigation: typeof LightboxNavigation;\n Caption: typeof LightboxCaption;\n CloseButton: typeof LightboxCloseButton;\n Provider: typeof LightboxProviderComponent;\n open: typeof lightbox.open;\n close: typeof lightbox.close;\n next: typeof lightbox.next;\n prev: typeof lightbox.prev;\n setIndex: typeof lightbox.setIndex;\n };\n}>;\n\nconst defaultProps = {\n ...lightboxRootDefaultProps,\n withNavigation: true,\n} satisfies Partial<LightboxProps>;\n\nexport const LightboxBase = factory<LightboxFactory>((_props) => {\n const props = useProps('Lightbox', defaultProps, _props);\n const { slides, toolbarItems, withNavigation, children, ...others } = props;\n\n return (\n <LightboxRoot {...others} slides={slides}>\n {children ?? (\n <>\n <LightboxToolbar toolbarItems={toolbarItems} />\n\n <LightboxSlides>\n {slides.map((slide, index) => (\n <LightboxSlide key={index} slide={slide} index={index} />\n ))}\n </LightboxSlides>\n\n {withNavigation && <LightboxNavigation />}\n <LightboxCaption />\n <LightboxThumbnails />\n </>\n )}\n </LightboxRoot>\n );\n});\n"],"mappings":";;;;;;;;;;;AAqDA,MAAM,eAAe;CACnB,GAAGA,qBAAAA;CACH,gBAAgB;AAClB;AAEA,MAAa,gBAAA,GAAeC,cAAAA,QAAAA,EAA0B,WAAW;CAE/D,MAAM,EAAE,QAAQ,cAAc,gBAAgB,UAAU,GAAG,YAAA,GAD7CC,cAAAA,SAAAA,CAAS,YAAY,cAAc,MACyB;CAE1E,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,qBAAAA,cAAD;EAAc,GAAI;EAAgB;EAC/B,UAAA,YACC,iBAAA,GAAA,kBAAA,KAAA,CAAA,kBAAA,UAAA,EAAA,UAAA;GACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,wBAAAA,iBAAD,EAA+B,aAAe,CAAA;GAE9C,iBAAA,GAAA,kBAAA,IAAA,CAACC,uBAAAA,gBAAD,EAAA,UACG,OAAO,KAAK,OAAO,UAClB,iBAAA,GAAA,kBAAA,IAAA,CAACC,sBAAAA,eAAD;IAAkC;IAAc;GAAQ,GAApC,KAAoC,CACzD,EACa,CAAA;GAEf,kBAAkB,iBAAA,GAAA,kBAAA,IAAA,CAACC,2BAAAA,oBAAD,CAAqB,CAAA;GACxC,iBAAA,GAAA,kBAAA,IAAA,CAACC,wBAAAA,iBAAD,CAAkB,CAAA;GAClB,iBAAA,GAAA,kBAAA,IAAA,CAACC,2BAAAA,oBAAD,CAAqB,CAAA;EACrB,EAAA,CAAA;CAEQ,CAAA;AAElB,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
const require_lightbox_store = require("../lightbox.store.cjs");
|
|
3
|
-
const
|
|
3
|
+
const require_LightboxBase = require("../LightboxBase.cjs");
|
|
4
4
|
let _mantine_core = require("@mantine/core");
|
|
5
5
|
let react_jsx_runtime = require("react/jsx-runtime");
|
|
6
6
|
let react = require("react");
|
|
@@ -12,7 +12,7 @@ const LightboxProviderComponent = (0, _mantine_core.factory)((_props) => {
|
|
|
12
12
|
(0, react.useEffect)(() => {
|
|
13
13
|
if (store.getState().loop !== !!loop) require_lightbox_store.lightboxActions.updateState(() => ({ loop: !!loop }), store);
|
|
14
14
|
}, [loop, store]);
|
|
15
|
-
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(
|
|
15
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_LightboxBase.LightboxBase, {
|
|
16
16
|
...others,
|
|
17
17
|
loop,
|
|
18
18
|
opened: state.opened,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LightboxProvider.cjs","names":["lightboxStore","factory","useProps","useLightboxStore","
|
|
1
|
+
{"version":3,"file":"LightboxProvider.cjs","names":["lightboxStore","factory","useProps","useLightboxStore","LightboxBase","lightboxActions"],"sources":["../../src/LightboxProvider/LightboxProvider.tsx"],"sourcesContent":["import { useEffect } from 'react';\nimport { factory, Factory, useProps } from '@mantine/core';\nimport { lightboxActions, LightboxStore, lightboxStore, useLightboxStore } from '../lightbox.store';\nimport { LightboxBase, LightboxProps } from '../LightboxBase';\n\nexport interface LightboxProviderProps extends Omit<\n LightboxProps,\n 'opened' | 'onClose' | 'slides' | 'currentIndex' | 'onIndexChange'\n> {\n /** Lightbox store, can be used to create multiple instances @default lightboxStore */\n store?: LightboxStore;\n}\n\nexport type LightboxProviderFactory = Factory<{\n props: LightboxProviderProps;\n ref: HTMLDivElement;\n stylesNames: never;\n compound: true;\n}>;\n\nconst defaultProps = {\n store: lightboxStore,\n} satisfies Partial<LightboxProviderProps>;\n\nexport const LightboxProviderComponent = factory<LightboxProviderFactory>((_props) => {\n const props = useProps('LightboxProvider', defaultProps, _props);\n const { store, loop, ...others } = props;\n\n const state = useLightboxStore(store!);\n\n useEffect(() => {\n if (store!.getState().loop !== !!loop) {\n lightboxActions.updateState(() => ({ loop: !!loop }), store!);\n }\n }, [loop, store]);\n\n return (\n <LightboxBase\n {...others}\n loop={loop}\n opened={state.opened}\n onClose={() => lightboxActions.close(store!)}\n slides={state.slides}\n currentIndex={state.currentIndex}\n onIndexChange={(index) => lightboxActions.setIndex(index, store!)}\n />\n );\n});\n\nLightboxProviderComponent.displayName = '@mantine/lightbox/LightboxProvider';\n"],"mappings":";;;;;;;AAoBA,MAAM,eAAe,EACnB,OAAOA,uBAAAA,cACT;AAEA,MAAa,6BAAA,GAA4BC,cAAAA,QAAAA,EAAkC,WAAW;CAEpF,MAAM,EAAE,OAAO,MAAM,GAAG,YAAA,GADVC,cAAAA,SAAAA,CAAS,oBAAoB,cAAc,MAClB;CAEvC,MAAM,QAAQC,uBAAAA,iBAAiB,KAAM;CAErC,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,IAAI,MAAO,SAAS,CAAC,CAAC,SAAS,CAAC,CAAC,MAC/B,uBAAA,gBAAgB,mBAAmB,EAAE,MAAM,CAAC,CAAC,KAAK,IAAI,KAAM;CAEhE,GAAG,CAAC,MAAM,KAAK,CAAC;CAEhB,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,qBAAAA,cAAD;EACE,GAAI;EACE;EACN,QAAQ,MAAM;EACd,eAAeC,uBAAAA,gBAAgB,MAAM,KAAM;EAC3C,QAAQ,MAAM;EACd,cAAc,MAAM;EACpB,gBAAgB,UAAUA,uBAAAA,gBAAgB,SAAS,OAAO,KAAM;CACjE,CAAA;AAEL,CAAC;AAED,0BAA0B,cAAc"}
|
|
@@ -27,16 +27,16 @@ const LightboxThumbnails = (0, _mantine_core.factory)((props) => {
|
|
|
27
27
|
}, [ctx.currentIndex, thumbsEmbla]);
|
|
28
28
|
if (!ctx.withThumbnails) return null;
|
|
29
29
|
const thumbnails = ctx.slides.map((slide, index) => {
|
|
30
|
-
const
|
|
31
|
-
const thumbSrc = slide.thumbSrc ?? (slide.type === "video" ? slide.poster : void 0) ?? (slide.type
|
|
30
|
+
const active = index === ctx.currentIndex;
|
|
31
|
+
const thumbSrc = slide.thumbSrc ?? (slide.type === "video" ? slide.poster : void 0) ?? (slide.type === "image" || slide.type === void 0 ? slide.src : void 0);
|
|
32
32
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.UnstyledButton, {
|
|
33
33
|
...ctx.getStyles("thumbnail", stylesApiProps),
|
|
34
34
|
mod: "reduce-motion",
|
|
35
|
-
"data-active":
|
|
35
|
+
"data-active": active || void 0,
|
|
36
36
|
"aria-label": ctx.labels.thumbnailLabel(index + 1, ctx.slides.length),
|
|
37
|
-
"aria-current":
|
|
37
|
+
"aria-current": active || void 0,
|
|
38
38
|
onClick: () => ctx.setIndex(index),
|
|
39
|
-
children:
|
|
39
|
+
children: slide.renderThumb ? slide.renderThumb({ active }) : thumbSrc ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
|
|
40
40
|
...ctx.getStyles("thumbnailImage", stylesApiProps),
|
|
41
41
|
src: thumbSrc,
|
|
42
42
|
alt: "",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LightboxThumbnails.cjs","names":["factory","useProps","useLightboxContext","useDirection","useEmblaCarousel","UnstyledButton","Collapse","classes"],"sources":["../../src/LightboxThumbnails/LightboxThumbnails.tsx"],"sourcesContent":["import { useEffect } from 'react';\nimport useEmblaCarousel from 'embla-carousel-react';\nimport {\n BoxProps,\n Collapse,\n CompoundStylesApiProps,\n ElementProps,\n factory,\n Factory,\n UnstyledButton,\n useDirection,\n useProps,\n} from '@mantine/core';\nimport { useLightboxContext } from '../lightbox.context';\nimport classes from '../Lightbox.module.css';\n\nexport type LightboxThumbnailsStylesNames =\n | 'thumbnails'\n | 'thumbnailsViewport'\n | 'thumbnailsContainer'\n | 'thumbnail'\n | 'thumbnailImage';\n\nexport interface LightboxThumbnailsProps\n extends\n BoxProps,\n CompoundStylesApiProps<LightboxThumbnailsFactory>,\n ElementProps<'div', 'onTransitionEnd' | 'onTransitionStart'> {}\n\nexport type LightboxThumbnailsFactory = Factory<{\n props: LightboxThumbnailsProps;\n ref: HTMLDivElement;\n stylesNames: LightboxThumbnailsStylesNames;\n compound: true;\n}>;\n\nexport const LightboxThumbnails = factory<LightboxThumbnailsFactory>((props) => {\n const { classNames, className, style, styles, vars, ...others } = useProps(\n 'LightboxThumbnails',\n null,\n props\n );\n\n const ctx = useLightboxContext();\n const stylesApiProps = { classNames, styles };\n\n const { dir } = useDirection();\n\n // The second carousel is only built when the strip can actually be shown – `active: false`\n // makes Embla skip its listeners and measurements entirely, so a lightbox without\n // thumbnails does not pay for an instance it never renders.\n const [thumbsRef, thumbsEmbla] = useEmblaCarousel({\n containScroll: 'keepSnaps',\n dragFree: true,\n direction: dir,\n active: ctx.withThumbnails,\n });\n\n useEffect(() => {\n if (thumbsEmbla) {\n thumbsEmbla.scrollTo(ctx.currentIndex);\n }\n }, [ctx.currentIndex, thumbsEmbla]);\n\n if (!ctx.withThumbnails) {\n return null;\n }\n\n const thumbnails = ctx.slides.map((slide, index) => {\n const
|
|
1
|
+
{"version":3,"file":"LightboxThumbnails.cjs","names":["factory","useProps","useLightboxContext","useDirection","useEmblaCarousel","UnstyledButton","Collapse","classes"],"sources":["../../src/LightboxThumbnails/LightboxThumbnails.tsx"],"sourcesContent":["import { useEffect } from 'react';\nimport useEmblaCarousel from 'embla-carousel-react';\nimport {\n BoxProps,\n Collapse,\n CompoundStylesApiProps,\n ElementProps,\n factory,\n Factory,\n UnstyledButton,\n useDirection,\n useProps,\n} from '@mantine/core';\nimport { useLightboxContext } from '../lightbox.context';\nimport classes from '../Lightbox.module.css';\n\nexport type LightboxThumbnailsStylesNames =\n | 'thumbnails'\n | 'thumbnailsViewport'\n | 'thumbnailsContainer'\n | 'thumbnail'\n | 'thumbnailImage';\n\nexport interface LightboxThumbnailsProps\n extends\n BoxProps,\n CompoundStylesApiProps<LightboxThumbnailsFactory>,\n ElementProps<'div', 'onTransitionEnd' | 'onTransitionStart'> {}\n\nexport type LightboxThumbnailsFactory = Factory<{\n props: LightboxThumbnailsProps;\n ref: HTMLDivElement;\n stylesNames: LightboxThumbnailsStylesNames;\n compound: true;\n}>;\n\nexport const LightboxThumbnails = factory<LightboxThumbnailsFactory>((props) => {\n const { classNames, className, style, styles, vars, ...others } = useProps(\n 'LightboxThumbnails',\n null,\n props\n );\n\n const ctx = useLightboxContext();\n const stylesApiProps = { classNames, styles };\n\n const { dir } = useDirection();\n\n // The second carousel is only built when the strip can actually be shown – `active: false`\n // makes Embla skip its listeners and measurements entirely, so a lightbox without\n // thumbnails does not pay for an instance it never renders.\n const [thumbsRef, thumbsEmbla] = useEmblaCarousel({\n containScroll: 'keepSnaps',\n dragFree: true,\n direction: dir,\n active: ctx.withThumbnails,\n });\n\n useEffect(() => {\n if (thumbsEmbla) {\n thumbsEmbla.scrollTo(ctx.currentIndex);\n }\n }, [ctx.currentIndex, thumbsEmbla]);\n\n if (!ctx.withThumbnails) {\n return null;\n }\n\n const thumbnails = ctx.slides.map((slide, index) => {\n const active = index === ctx.currentIndex;\n const thumbSrc =\n slide.thumbSrc ??\n (slide.type === 'video' ? slide.poster : undefined) ??\n (slide.type === 'image' || slide.type === undefined ? slide.src : undefined);\n\n return (\n <UnstyledButton\n key={index}\n {...ctx.getStyles('thumbnail', stylesApiProps)}\n mod=\"reduce-motion\"\n data-active={active || undefined}\n aria-label={ctx.labels.thumbnailLabel(index + 1, ctx.slides.length)}\n aria-current={active || undefined}\n onClick={() => ctx.setIndex(index)}\n >\n {slide.renderThumb ? (\n slide.renderThumb({ active })\n ) : thumbSrc ? (\n <img\n {...ctx.getStyles('thumbnailImage', stylesApiProps)}\n src={thumbSrc}\n alt=\"\"\n loading=\"lazy\"\n draggable={false}\n />\n ) : null}\n </UnstyledButton>\n );\n });\n\n return (\n <Collapse\n expanded={ctx.thumbnailsVisible}\n transitionDuration={ctx.transitionDuration}\n keepMounted={false}\n {...ctx.getStyles('thumbnails', { className, style, classNames, styles })}\n {...others}\n >\n <div {...ctx.getStyles('thumbnailsViewport', stylesApiProps)} ref={thumbsRef}>\n <div {...ctx.getStyles('thumbnailsContainer', stylesApiProps)}>{thumbnails}</div>\n </div>\n </Collapse>\n );\n});\n\nLightboxThumbnails.classes = classes;\nLightboxThumbnails.displayName = '@mantine/lightbox/LightboxThumbnails';\n"],"mappings":";;;;;;;;;;AAoCA,MAAa,sBAAA,GAAqBA,cAAAA,QAAAA,EAAoC,UAAU;CAC9E,MAAM,EAAE,YAAY,WAAW,OAAO,QAAQ,MAAM,GAAG,YAAA,GAAWC,cAAAA,SAAAA,CAChE,sBACA,MACA,KACF;CAEA,MAAM,MAAMC,yBAAAA,mBAAmB;CAC/B,MAAM,iBAAiB;EAAE;EAAY;CAAO;CAE5C,MAAM,EAAE,SAAA,GAAQC,cAAAA,aAAAA,CAAa;CAK7B,MAAM,CAAC,WAAW,gBAAA,GAAeC,qBAAAA,QAAAA,CAAiB;EAChD,eAAe;EACf,UAAU;EACV,WAAW;EACX,QAAQ,IAAI;CACd,CAAC;CAED,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,IAAI,aACF,YAAY,SAAS,IAAI,YAAY;CAEzC,GAAG,CAAC,IAAI,cAAc,WAAW,CAAC;CAElC,IAAI,CAAC,IAAI,gBACP,OAAO;CAGT,MAAM,aAAa,IAAI,OAAO,KAAK,OAAO,UAAU;EAClD,MAAM,SAAS,UAAU,IAAI;EAC7B,MAAM,WACJ,MAAM,aACL,MAAM,SAAS,UAAU,MAAM,SAAS,KAAA,OACxC,MAAM,SAAS,WAAW,MAAM,SAAS,KAAA,IAAY,MAAM,MAAM,KAAA;EAEpE,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,cAAAA,gBAAD;GAEE,GAAI,IAAI,UAAU,aAAa,cAAc;GAC7C,KAAI;GACJ,eAAa,UAAU,KAAA;GACvB,cAAY,IAAI,OAAO,eAAe,QAAQ,GAAG,IAAI,OAAO,MAAM;GAClE,gBAAc,UAAU,KAAA;GACxB,eAAe,IAAI,SAAS,KAAK;GAEhC,UAAA,MAAM,cACL,MAAM,YAAY,EAAE,OAAO,CAAC,IAC1B,WACF,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;IACE,GAAI,IAAI,UAAU,kBAAkB,cAAc;IAClD,KAAK;IACL,KAAI;IACJ,SAAQ;IACR,WAAW;GACZ,CAAA,IACC;EACU,GAnBT,KAmBS;CAEpB,CAAC;CAED,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,cAAAA,UAAD;EACE,UAAU,IAAI;EACd,oBAAoB,IAAI;EACxB,aAAa;EACb,GAAI,IAAI,UAAU,cAAc;GAAE;GAAW;GAAO;GAAY;EAAO,CAAC;EACxE,GAAI;EAEJ,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GAAK,GAAI,IAAI,UAAU,sBAAsB,cAAc;GAAG,KAAK;GACjE,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;IAAK,GAAI,IAAI,UAAU,uBAAuB,cAAc;IAAI,UAAA;GAAgB,CAAA;EAC7E,CAAA;CACG,CAAA;AAEd,CAAC;AAED,mBAAmB,UAAUC,wBAAAA;AAC7B,mBAAmB,cAAc"}
|
package/cjs/index.cjs
CHANGED
|
@@ -2,15 +2,15 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
|
2
2
|
const require_lightbox_store = require("./lightbox.store.cjs");
|
|
3
3
|
const require_default_labels = require("./default-labels.cjs");
|
|
4
4
|
const require_LightboxCaption = require("./LightboxCaption/LightboxCaption.cjs");
|
|
5
|
-
const require_LightboxCloseButton = require("./LightboxCloseButton/LightboxCloseButton.cjs");
|
|
6
5
|
const require_LightboxNavigation = require("./LightboxNavigation/LightboxNavigation.cjs");
|
|
7
|
-
const require_LightboxProvider = require("./LightboxProvider/LightboxProvider.cjs");
|
|
8
6
|
const require_LightboxRoot = require("./LightboxRoot/LightboxRoot.cjs");
|
|
9
7
|
const require_LightboxSlide = require("./LightboxSlide/LightboxSlide.cjs");
|
|
10
8
|
const require_LightboxSlides = require("./LightboxSlides/LightboxSlides.cjs");
|
|
11
9
|
const require_LightboxThumbnails = require("./LightboxThumbnails/LightboxThumbnails.cjs");
|
|
12
10
|
const require_toolbar_items = require("./LightboxToolbar/toolbar-items.cjs");
|
|
13
11
|
const require_LightboxToolbar = require("./LightboxToolbar/LightboxToolbar.cjs");
|
|
12
|
+
const require_LightboxCloseButton = require("./LightboxCloseButton/LightboxCloseButton.cjs");
|
|
13
|
+
const require_LightboxProvider = require("./LightboxProvider/LightboxProvider.cjs");
|
|
14
14
|
const require_Lightbox = require("./Lightbox.cjs");
|
|
15
15
|
exports.DEFAULT_LABELS = require_default_labels.DEFAULT_LABELS;
|
|
16
16
|
exports.Lightbox = require_Lightbox.Lightbox;
|
package/esm/Lightbox.mjs
CHANGED
|
@@ -2,38 +2,17 @@
|
|
|
2
2
|
import { lightbox } from "./lightbox.store.mjs";
|
|
3
3
|
import Lightbox_module_default from "./Lightbox.module.mjs";
|
|
4
4
|
import { LightboxCaption } from "./LightboxCaption/LightboxCaption.mjs";
|
|
5
|
-
import { LightboxCloseButton } from "./LightboxCloseButton/LightboxCloseButton.mjs";
|
|
6
5
|
import { LightboxNavigation } from "./LightboxNavigation/LightboxNavigation.mjs";
|
|
7
|
-
import {
|
|
8
|
-
import { LightboxRoot, lightboxRootDefaultProps } from "./LightboxRoot/LightboxRoot.mjs";
|
|
6
|
+
import { LightboxRoot } from "./LightboxRoot/LightboxRoot.mjs";
|
|
9
7
|
import { LightboxSlide } from "./LightboxSlide/LightboxSlide.mjs";
|
|
10
8
|
import { LightboxSlides } from "./LightboxSlides/LightboxSlides.mjs";
|
|
11
9
|
import { LightboxThumbnails } from "./LightboxThumbnails/LightboxThumbnails.mjs";
|
|
12
10
|
import { LightboxToolbar } from "./LightboxToolbar/LightboxToolbar.mjs";
|
|
13
|
-
import {
|
|
14
|
-
import {
|
|
11
|
+
import { LightboxBase } from "./LightboxBase.mjs";
|
|
12
|
+
import { LightboxCloseButton } from "./LightboxCloseButton/LightboxCloseButton.mjs";
|
|
13
|
+
import { LightboxProviderComponent } from "./LightboxProvider/LightboxProvider.mjs";
|
|
15
14
|
//#region packages/@mantine/lightbox/src/Lightbox.tsx
|
|
16
|
-
const
|
|
17
|
-
...lightboxRootDefaultProps,
|
|
18
|
-
withNavigation: true
|
|
19
|
-
};
|
|
20
|
-
const Lightbox = factory((_props) => {
|
|
21
|
-
const { slides, toolbarItems, withNavigation, children, ...others } = useProps("Lightbox", defaultProps, _props);
|
|
22
|
-
return /* @__PURE__ */ jsx(LightboxRoot, {
|
|
23
|
-
...others,
|
|
24
|
-
slides,
|
|
25
|
-
children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
26
|
-
/* @__PURE__ */ jsx(LightboxToolbar, { toolbarItems }),
|
|
27
|
-
/* @__PURE__ */ jsx(LightboxSlides, { children: slides.map((slide, index) => /* @__PURE__ */ jsx(LightboxSlide, {
|
|
28
|
-
slide,
|
|
29
|
-
index
|
|
30
|
-
}, index)) }),
|
|
31
|
-
withNavigation && /* @__PURE__ */ jsx(LightboxNavigation, {}),
|
|
32
|
-
/* @__PURE__ */ jsx(LightboxCaption, {}),
|
|
33
|
-
/* @__PURE__ */ jsx(LightboxThumbnails, {})
|
|
34
|
-
] })
|
|
35
|
-
});
|
|
36
|
-
});
|
|
15
|
+
const Lightbox = LightboxBase;
|
|
37
16
|
Lightbox.classes = Lightbox_module_default;
|
|
38
17
|
Lightbox.displayName = "@mantine/lightbox/Lightbox";
|
|
39
18
|
Lightbox.Root = LightboxRoot;
|
package/esm/Lightbox.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Lightbox.mjs","names":["classes"],"sources":["../src/Lightbox.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"Lightbox.mjs","names":["classes"],"sources":["../src/Lightbox.tsx"],"sourcesContent":["import { lightbox } from './lightbox.store';\nimport { LightboxBase } from './LightboxBase';\nimport { LightboxCaption } from './LightboxCaption/LightboxCaption';\nimport { LightboxCloseButton } from './LightboxCloseButton/LightboxCloseButton';\nimport { LightboxNavigation } from './LightboxNavigation/LightboxNavigation';\nimport { LightboxProviderComponent } from './LightboxProvider/LightboxProvider';\nimport { LightboxRoot } from './LightboxRoot/LightboxRoot';\nimport { LightboxSlide } from './LightboxSlide/LightboxSlide';\nimport { LightboxSlides } from './LightboxSlides/LightboxSlides';\nimport { LightboxThumbnails } from './LightboxThumbnails/LightboxThumbnails';\nimport { LightboxToolbar } from './LightboxToolbar/LightboxToolbar';\nimport classes from './Lightbox.module.css';\n\nexport type { LightboxFactory, LightboxProps, LightboxStylesNames } from './LightboxBase';\n\nexport const Lightbox = LightboxBase;\n\nLightbox.classes = classes;\nLightbox.displayName = '@mantine/lightbox/Lightbox';\nLightbox.Root = LightboxRoot;\nLightbox.Toolbar = LightboxToolbar;\nLightbox.Slides = LightboxSlides;\nLightbox.Slide = LightboxSlide;\nLightbox.Thumbnails = LightboxThumbnails;\nLightbox.Navigation = LightboxNavigation;\nLightbox.Caption = LightboxCaption;\nLightbox.CloseButton = LightboxCloseButton;\nLightbox.Provider = LightboxProviderComponent;\nLightbox.open = lightbox.open;\nLightbox.close = lightbox.close;\nLightbox.next = lightbox.next;\nLightbox.prev = lightbox.prev;\nLightbox.setIndex = lightbox.setIndex;\n"],"mappings":";;;;;;;;;;;;;;AAeA,MAAa,WAAW;AAExB,SAAS,UAAUA;AACnB,SAAS,cAAc;AACvB,SAAS,OAAO;AAChB,SAAS,UAAU;AACnB,SAAS,SAAS;AAClB,SAAS,QAAQ;AACjB,SAAS,aAAa;AACtB,SAAS,aAAa;AACtB,SAAS,UAAU;AACnB,SAAS,cAAc;AACvB,SAAS,WAAW;AACpB,SAAS,OAAO,SAAS;AACzB,SAAS,QAAQ,SAAS;AAC1B,SAAS,OAAO,SAAS;AACzB,SAAS,OAAO,SAAS;AACzB,SAAS,WAAW,SAAS"}
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { LightboxCaption } from "./LightboxCaption/LightboxCaption.mjs";
|
|
3
|
+
import { LightboxNavigation } from "./LightboxNavigation/LightboxNavigation.mjs";
|
|
4
|
+
import { LightboxRoot, lightboxRootDefaultProps } from "./LightboxRoot/LightboxRoot.mjs";
|
|
5
|
+
import { LightboxSlide } from "./LightboxSlide/LightboxSlide.mjs";
|
|
6
|
+
import { LightboxSlides } from "./LightboxSlides/LightboxSlides.mjs";
|
|
7
|
+
import { LightboxThumbnails } from "./LightboxThumbnails/LightboxThumbnails.mjs";
|
|
8
|
+
import { LightboxToolbar } from "./LightboxToolbar/LightboxToolbar.mjs";
|
|
9
|
+
import { factory, useProps } from "@mantine/core";
|
|
10
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
11
|
+
//#region packages/@mantine/lightbox/src/LightboxBase.tsx
|
|
12
|
+
const defaultProps = {
|
|
13
|
+
...lightboxRootDefaultProps,
|
|
14
|
+
withNavigation: true
|
|
15
|
+
};
|
|
16
|
+
const LightboxBase = factory((_props) => {
|
|
17
|
+
const { slides, toolbarItems, withNavigation, children, ...others } = useProps("Lightbox", defaultProps, _props);
|
|
18
|
+
return /* @__PURE__ */ jsx(LightboxRoot, {
|
|
19
|
+
...others,
|
|
20
|
+
slides,
|
|
21
|
+
children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
22
|
+
/* @__PURE__ */ jsx(LightboxToolbar, { toolbarItems }),
|
|
23
|
+
/* @__PURE__ */ jsx(LightboxSlides, { children: slides.map((slide, index) => /* @__PURE__ */ jsx(LightboxSlide, {
|
|
24
|
+
slide,
|
|
25
|
+
index
|
|
26
|
+
}, index)) }),
|
|
27
|
+
withNavigation && /* @__PURE__ */ jsx(LightboxNavigation, {}),
|
|
28
|
+
/* @__PURE__ */ jsx(LightboxCaption, {}),
|
|
29
|
+
/* @__PURE__ */ jsx(LightboxThumbnails, {})
|
|
30
|
+
] })
|
|
31
|
+
});
|
|
32
|
+
});
|
|
33
|
+
//#endregion
|
|
34
|
+
export { LightboxBase };
|
|
35
|
+
|
|
36
|
+
//# sourceMappingURL=LightboxBase.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"LightboxBase.mjs","names":[],"sources":["../src/LightboxBase.tsx"],"sourcesContent":["import { factory, Factory, useProps } from '@mantine/core';\nimport { lightbox } from './lightbox.store';\nimport type { ToolbarItems } from './lightbox.types';\nimport { LightboxCaption } from './LightboxCaption/LightboxCaption';\nimport { LightboxCloseButton } from './LightboxCloseButton/LightboxCloseButton';\nimport { LightboxNavigation } from './LightboxNavigation/LightboxNavigation';\nimport type { LightboxProviderComponent } from './LightboxProvider/LightboxProvider';\nimport {\n LightboxRoot,\n lightboxRootDefaultProps,\n LightboxRootProps,\n LightboxRootStylesNames,\n} from './LightboxRoot/LightboxRoot';\nimport { LightboxSlide } from './LightboxSlide/LightboxSlide';\nimport { LightboxSlides } from './LightboxSlides/LightboxSlides';\nimport { LightboxThumbnails } from './LightboxThumbnails/LightboxThumbnails';\nimport { LightboxToolbar } from './LightboxToolbar/LightboxToolbar';\n\nexport type LightboxStylesNames = LightboxRootStylesNames;\n\nexport interface LightboxProps extends Omit<LightboxRootProps, 'children'> {\n /** Custom toolbar items, overrides default toolbar. Can be a function that receives the current lightbox state and handlers. */\n toolbarItems?: ToolbarItems;\n\n /** Shows previous/next navigation arrows @default true */\n withNavigation?: boolean;\n\n /** Custom lightbox layout, overrides the default layout built from compound components */\n children?: React.ReactNode;\n}\n\nexport type LightboxFactory = Factory<{\n props: LightboxProps;\n ref: HTMLDivElement;\n stylesNames: LightboxStylesNames;\n staticComponents: {\n Root: typeof LightboxRoot;\n Toolbar: typeof LightboxToolbar;\n Slides: typeof LightboxSlides;\n Slide: typeof LightboxSlide;\n Thumbnails: typeof LightboxThumbnails;\n Navigation: typeof LightboxNavigation;\n Caption: typeof LightboxCaption;\n CloseButton: typeof LightboxCloseButton;\n Provider: typeof LightboxProviderComponent;\n open: typeof lightbox.open;\n close: typeof lightbox.close;\n next: typeof lightbox.next;\n prev: typeof lightbox.prev;\n setIndex: typeof lightbox.setIndex;\n };\n}>;\n\nconst defaultProps = {\n ...lightboxRootDefaultProps,\n withNavigation: true,\n} satisfies Partial<LightboxProps>;\n\nexport const LightboxBase = factory<LightboxFactory>((_props) => {\n const props = useProps('Lightbox', defaultProps, _props);\n const { slides, toolbarItems, withNavigation, children, ...others } = props;\n\n return (\n <LightboxRoot {...others} slides={slides}>\n {children ?? (\n <>\n <LightboxToolbar toolbarItems={toolbarItems} />\n\n <LightboxSlides>\n {slides.map((slide, index) => (\n <LightboxSlide key={index} slide={slide} index={index} />\n ))}\n </LightboxSlides>\n\n {withNavigation && <LightboxNavigation />}\n <LightboxCaption />\n <LightboxThumbnails />\n </>\n )}\n </LightboxRoot>\n );\n});\n"],"mappings":";;;;;;;;;;;AAqDA,MAAM,eAAe;CACnB,GAAG;CACH,gBAAgB;AAClB;AAEA,MAAa,eAAe,SAA0B,WAAW;CAE/D,MAAM,EAAE,QAAQ,cAAc,gBAAgB,UAAU,GAAG,WAD7C,SAAS,YAAY,cAAc,MACyB;CAE1E,OACE,oBAAC,cAAD;EAAc,GAAI;EAAgB;EAC/B,UAAA,YACC,qBAAA,UAAA,EAAA,UAAA;GACE,oBAAC,iBAAD,EAA+B,aAAe,CAAA;GAE9C,oBAAC,gBAAD,EAAA,UACG,OAAO,KAAK,OAAO,UAClB,oBAAC,eAAD;IAAkC;IAAc;GAAQ,GAApC,KAAoC,CACzD,EACa,CAAA;GAEf,kBAAkB,oBAAC,oBAAD,CAAqB,CAAA;GACxC,oBAAC,iBAAD,CAAkB,CAAA;GAClB,oBAAC,oBAAD,CAAqB,CAAA;EACrB,EAAA,CAAA;CAEQ,CAAA;AAElB,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { lightboxActions, lightboxStore, useLightboxStore } from "../lightbox.store.mjs";
|
|
3
|
-
import {
|
|
3
|
+
import { LightboxBase } from "../LightboxBase.mjs";
|
|
4
4
|
import { factory, useProps } from "@mantine/core";
|
|
5
5
|
import { jsx } from "react/jsx-runtime";
|
|
6
6
|
import { useEffect } from "react";
|
|
@@ -12,7 +12,7 @@ const LightboxProviderComponent = factory((_props) => {
|
|
|
12
12
|
useEffect(() => {
|
|
13
13
|
if (store.getState().loop !== !!loop) lightboxActions.updateState(() => ({ loop: !!loop }), store);
|
|
14
14
|
}, [loop, store]);
|
|
15
|
-
return /* @__PURE__ */ jsx(
|
|
15
|
+
return /* @__PURE__ */ jsx(LightboxBase, {
|
|
16
16
|
...others,
|
|
17
17
|
loop,
|
|
18
18
|
opened: state.opened,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LightboxProvider.mjs","names":[],"sources":["../../src/LightboxProvider/LightboxProvider.tsx"],"sourcesContent":["import { useEffect } from 'react';\nimport { factory, Factory, useProps } from '@mantine/core';\nimport {
|
|
1
|
+
{"version":3,"file":"LightboxProvider.mjs","names":[],"sources":["../../src/LightboxProvider/LightboxProvider.tsx"],"sourcesContent":["import { useEffect } from 'react';\nimport { factory, Factory, useProps } from '@mantine/core';\nimport { lightboxActions, LightboxStore, lightboxStore, useLightboxStore } from '../lightbox.store';\nimport { LightboxBase, LightboxProps } from '../LightboxBase';\n\nexport interface LightboxProviderProps extends Omit<\n LightboxProps,\n 'opened' | 'onClose' | 'slides' | 'currentIndex' | 'onIndexChange'\n> {\n /** Lightbox store, can be used to create multiple instances @default lightboxStore */\n store?: LightboxStore;\n}\n\nexport type LightboxProviderFactory = Factory<{\n props: LightboxProviderProps;\n ref: HTMLDivElement;\n stylesNames: never;\n compound: true;\n}>;\n\nconst defaultProps = {\n store: lightboxStore,\n} satisfies Partial<LightboxProviderProps>;\n\nexport const LightboxProviderComponent = factory<LightboxProviderFactory>((_props) => {\n const props = useProps('LightboxProvider', defaultProps, _props);\n const { store, loop, ...others } = props;\n\n const state = useLightboxStore(store!);\n\n useEffect(() => {\n if (store!.getState().loop !== !!loop) {\n lightboxActions.updateState(() => ({ loop: !!loop }), store!);\n }\n }, [loop, store]);\n\n return (\n <LightboxBase\n {...others}\n loop={loop}\n opened={state.opened}\n onClose={() => lightboxActions.close(store!)}\n slides={state.slides}\n currentIndex={state.currentIndex}\n onIndexChange={(index) => lightboxActions.setIndex(index, store!)}\n />\n );\n});\n\nLightboxProviderComponent.displayName = '@mantine/lightbox/LightboxProvider';\n"],"mappings":";;;;;;;AAoBA,MAAM,eAAe,EACnB,OAAO,cACT;AAEA,MAAa,4BAA4B,SAAkC,WAAW;CAEpF,MAAM,EAAE,OAAO,MAAM,GAAG,WADV,SAAS,oBAAoB,cAAc,MAClB;CAEvC,MAAM,QAAQ,iBAAiB,KAAM;CAErC,gBAAgB;EACd,IAAI,MAAO,SAAS,CAAC,CAAC,SAAS,CAAC,CAAC,MAC/B,gBAAgB,mBAAmB,EAAE,MAAM,CAAC,CAAC,KAAK,IAAI,KAAM;CAEhE,GAAG,CAAC,MAAM,KAAK,CAAC;CAEhB,OACE,oBAAC,cAAD;EACE,GAAI;EACE;EACN,QAAQ,MAAM;EACd,eAAe,gBAAgB,MAAM,KAAM;EAC3C,QAAQ,MAAM;EACd,cAAc,MAAM;EACpB,gBAAgB,UAAU,gBAAgB,SAAS,OAAO,KAAM;CACjE,CAAA;AAEL,CAAC;AAED,0BAA0B,cAAc"}
|
|
@@ -25,16 +25,16 @@ const LightboxThumbnails = factory((props) => {
|
|
|
25
25
|
}, [ctx.currentIndex, thumbsEmbla]);
|
|
26
26
|
if (!ctx.withThumbnails) return null;
|
|
27
27
|
const thumbnails = ctx.slides.map((slide, index) => {
|
|
28
|
-
const
|
|
29
|
-
const thumbSrc = slide.thumbSrc ?? (slide.type === "video" ? slide.poster : void 0) ?? (slide.type
|
|
28
|
+
const active = index === ctx.currentIndex;
|
|
29
|
+
const thumbSrc = slide.thumbSrc ?? (slide.type === "video" ? slide.poster : void 0) ?? (slide.type === "image" || slide.type === void 0 ? slide.src : void 0);
|
|
30
30
|
return /* @__PURE__ */ jsx(UnstyledButton, {
|
|
31
31
|
...ctx.getStyles("thumbnail", stylesApiProps),
|
|
32
32
|
mod: "reduce-motion",
|
|
33
|
-
"data-active":
|
|
33
|
+
"data-active": active || void 0,
|
|
34
34
|
"aria-label": ctx.labels.thumbnailLabel(index + 1, ctx.slides.length),
|
|
35
|
-
"aria-current":
|
|
35
|
+
"aria-current": active || void 0,
|
|
36
36
|
onClick: () => ctx.setIndex(index),
|
|
37
|
-
children:
|
|
37
|
+
children: slide.renderThumb ? slide.renderThumb({ active }) : thumbSrc ? /* @__PURE__ */ jsx("img", {
|
|
38
38
|
...ctx.getStyles("thumbnailImage", stylesApiProps),
|
|
39
39
|
src: thumbSrc,
|
|
40
40
|
alt: "",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LightboxThumbnails.mjs","names":["classes"],"sources":["../../src/LightboxThumbnails/LightboxThumbnails.tsx"],"sourcesContent":["import { useEffect } from 'react';\nimport useEmblaCarousel from 'embla-carousel-react';\nimport {\n BoxProps,\n Collapse,\n CompoundStylesApiProps,\n ElementProps,\n factory,\n Factory,\n UnstyledButton,\n useDirection,\n useProps,\n} from '@mantine/core';\nimport { useLightboxContext } from '../lightbox.context';\nimport classes from '../Lightbox.module.css';\n\nexport type LightboxThumbnailsStylesNames =\n | 'thumbnails'\n | 'thumbnailsViewport'\n | 'thumbnailsContainer'\n | 'thumbnail'\n | 'thumbnailImage';\n\nexport interface LightboxThumbnailsProps\n extends\n BoxProps,\n CompoundStylesApiProps<LightboxThumbnailsFactory>,\n ElementProps<'div', 'onTransitionEnd' | 'onTransitionStart'> {}\n\nexport type LightboxThumbnailsFactory = Factory<{\n props: LightboxThumbnailsProps;\n ref: HTMLDivElement;\n stylesNames: LightboxThumbnailsStylesNames;\n compound: true;\n}>;\n\nexport const LightboxThumbnails = factory<LightboxThumbnailsFactory>((props) => {\n const { classNames, className, style, styles, vars, ...others } = useProps(\n 'LightboxThumbnails',\n null,\n props\n );\n\n const ctx = useLightboxContext();\n const stylesApiProps = { classNames, styles };\n\n const { dir } = useDirection();\n\n // The second carousel is only built when the strip can actually be shown – `active: false`\n // makes Embla skip its listeners and measurements entirely, so a lightbox without\n // thumbnails does not pay for an instance it never renders.\n const [thumbsRef, thumbsEmbla] = useEmblaCarousel({\n containScroll: 'keepSnaps',\n dragFree: true,\n direction: dir,\n active: ctx.withThumbnails,\n });\n\n useEffect(() => {\n if (thumbsEmbla) {\n thumbsEmbla.scrollTo(ctx.currentIndex);\n }\n }, [ctx.currentIndex, thumbsEmbla]);\n\n if (!ctx.withThumbnails) {\n return null;\n }\n\n const thumbnails = ctx.slides.map((slide, index) => {\n const
|
|
1
|
+
{"version":3,"file":"LightboxThumbnails.mjs","names":["classes"],"sources":["../../src/LightboxThumbnails/LightboxThumbnails.tsx"],"sourcesContent":["import { useEffect } from 'react';\nimport useEmblaCarousel from 'embla-carousel-react';\nimport {\n BoxProps,\n Collapse,\n CompoundStylesApiProps,\n ElementProps,\n factory,\n Factory,\n UnstyledButton,\n useDirection,\n useProps,\n} from '@mantine/core';\nimport { useLightboxContext } from '../lightbox.context';\nimport classes from '../Lightbox.module.css';\n\nexport type LightboxThumbnailsStylesNames =\n | 'thumbnails'\n | 'thumbnailsViewport'\n | 'thumbnailsContainer'\n | 'thumbnail'\n | 'thumbnailImage';\n\nexport interface LightboxThumbnailsProps\n extends\n BoxProps,\n CompoundStylesApiProps<LightboxThumbnailsFactory>,\n ElementProps<'div', 'onTransitionEnd' | 'onTransitionStart'> {}\n\nexport type LightboxThumbnailsFactory = Factory<{\n props: LightboxThumbnailsProps;\n ref: HTMLDivElement;\n stylesNames: LightboxThumbnailsStylesNames;\n compound: true;\n}>;\n\nexport const LightboxThumbnails = factory<LightboxThumbnailsFactory>((props) => {\n const { classNames, className, style, styles, vars, ...others } = useProps(\n 'LightboxThumbnails',\n null,\n props\n );\n\n const ctx = useLightboxContext();\n const stylesApiProps = { classNames, styles };\n\n const { dir } = useDirection();\n\n // The second carousel is only built when the strip can actually be shown – `active: false`\n // makes Embla skip its listeners and measurements entirely, so a lightbox without\n // thumbnails does not pay for an instance it never renders.\n const [thumbsRef, thumbsEmbla] = useEmblaCarousel({\n containScroll: 'keepSnaps',\n dragFree: true,\n direction: dir,\n active: ctx.withThumbnails,\n });\n\n useEffect(() => {\n if (thumbsEmbla) {\n thumbsEmbla.scrollTo(ctx.currentIndex);\n }\n }, [ctx.currentIndex, thumbsEmbla]);\n\n if (!ctx.withThumbnails) {\n return null;\n }\n\n const thumbnails = ctx.slides.map((slide, index) => {\n const active = index === ctx.currentIndex;\n const thumbSrc =\n slide.thumbSrc ??\n (slide.type === 'video' ? slide.poster : undefined) ??\n (slide.type === 'image' || slide.type === undefined ? slide.src : undefined);\n\n return (\n <UnstyledButton\n key={index}\n {...ctx.getStyles('thumbnail', stylesApiProps)}\n mod=\"reduce-motion\"\n data-active={active || undefined}\n aria-label={ctx.labels.thumbnailLabel(index + 1, ctx.slides.length)}\n aria-current={active || undefined}\n onClick={() => ctx.setIndex(index)}\n >\n {slide.renderThumb ? (\n slide.renderThumb({ active })\n ) : thumbSrc ? (\n <img\n {...ctx.getStyles('thumbnailImage', stylesApiProps)}\n src={thumbSrc}\n alt=\"\"\n loading=\"lazy\"\n draggable={false}\n />\n ) : null}\n </UnstyledButton>\n );\n });\n\n return (\n <Collapse\n expanded={ctx.thumbnailsVisible}\n transitionDuration={ctx.transitionDuration}\n keepMounted={false}\n {...ctx.getStyles('thumbnails', { className, style, classNames, styles })}\n {...others}\n >\n <div {...ctx.getStyles('thumbnailsViewport', stylesApiProps)} ref={thumbsRef}>\n <div {...ctx.getStyles('thumbnailsContainer', stylesApiProps)}>{thumbnails}</div>\n </div>\n </Collapse>\n );\n});\n\nLightboxThumbnails.classes = classes;\nLightboxThumbnails.displayName = '@mantine/lightbox/LightboxThumbnails';\n"],"mappings":";;;;;;;;AAoCA,MAAa,qBAAqB,SAAoC,UAAU;CAC9E,MAAM,EAAE,YAAY,WAAW,OAAO,QAAQ,MAAM,GAAG,WAAW,SAChE,sBACA,MACA,KACF;CAEA,MAAM,MAAM,mBAAmB;CAC/B,MAAM,iBAAiB;EAAE;EAAY;CAAO;CAE5C,MAAM,EAAE,QAAQ,aAAa;CAK7B,MAAM,CAAC,WAAW,eAAe,iBAAiB;EAChD,eAAe;EACf,UAAU;EACV,WAAW;EACX,QAAQ,IAAI;CACd,CAAC;CAED,gBAAgB;EACd,IAAI,aACF,YAAY,SAAS,IAAI,YAAY;CAEzC,GAAG,CAAC,IAAI,cAAc,WAAW,CAAC;CAElC,IAAI,CAAC,IAAI,gBACP,OAAO;CAGT,MAAM,aAAa,IAAI,OAAO,KAAK,OAAO,UAAU;EAClD,MAAM,SAAS,UAAU,IAAI;EAC7B,MAAM,WACJ,MAAM,aACL,MAAM,SAAS,UAAU,MAAM,SAAS,KAAA,OACxC,MAAM,SAAS,WAAW,MAAM,SAAS,KAAA,IAAY,MAAM,MAAM,KAAA;EAEpE,OACE,oBAAC,gBAAD;GAEE,GAAI,IAAI,UAAU,aAAa,cAAc;GAC7C,KAAI;GACJ,eAAa,UAAU,KAAA;GACvB,cAAY,IAAI,OAAO,eAAe,QAAQ,GAAG,IAAI,OAAO,MAAM;GAClE,gBAAc,UAAU,KAAA;GACxB,eAAe,IAAI,SAAS,KAAK;GAEhC,UAAA,MAAM,cACL,MAAM,YAAY,EAAE,OAAO,CAAC,IAC1B,WACF,oBAAC,OAAD;IACE,GAAI,IAAI,UAAU,kBAAkB,cAAc;IAClD,KAAK;IACL,KAAI;IACJ,SAAQ;IACR,WAAW;GACZ,CAAA,IACC;EACU,GAnBT,KAmBS;CAEpB,CAAC;CAED,OACE,oBAAC,UAAD;EACE,UAAU,IAAI;EACd,oBAAoB,IAAI;EACxB,aAAa;EACb,GAAI,IAAI,UAAU,cAAc;GAAE;GAAW;GAAO;GAAY;EAAO,CAAC;EACxE,GAAI;EAEJ,UAAA,oBAAC,OAAD;GAAK,GAAI,IAAI,UAAU,sBAAsB,cAAc;GAAG,KAAK;GACjE,UAAA,oBAAC,OAAD;IAAK,GAAI,IAAI,UAAU,uBAAuB,cAAc;IAAI,UAAA;GAAgB,CAAA;EAC7E,CAAA;CACG,CAAA;AAEd,CAAC;AAED,mBAAmB,UAAUA;AAC7B,mBAAmB,cAAc"}
|
package/esm/index.mjs
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
import { createLightbox, createLightboxStore, lightbox, lightboxStore, useLightboxStore } from "./lightbox.store.mjs";
|
|
2
2
|
import { DEFAULT_LABELS } from "./default-labels.mjs";
|
|
3
3
|
import { LightboxCaption } from "./LightboxCaption/LightboxCaption.mjs";
|
|
4
|
-
import { LightboxCloseButton } from "./LightboxCloseButton/LightboxCloseButton.mjs";
|
|
5
4
|
import { LightboxNavigation } from "./LightboxNavigation/LightboxNavigation.mjs";
|
|
6
|
-
import { LightboxProviderComponent } from "./LightboxProvider/LightboxProvider.mjs";
|
|
7
5
|
import { LightboxRoot } from "./LightboxRoot/LightboxRoot.mjs";
|
|
8
6
|
import { LightboxSlide } from "./LightboxSlide/LightboxSlide.mjs";
|
|
9
7
|
import { LightboxSlides } from "./LightboxSlides/LightboxSlides.mjs";
|
|
10
8
|
import { LightboxThumbnails } from "./LightboxThumbnails/LightboxThumbnails.mjs";
|
|
11
9
|
import { createCloseToolbarItem, createDownloadToolbarItem, createFullscreenToolbarItem, createThumbnailsToolbarItem } from "./LightboxToolbar/toolbar-items.mjs";
|
|
12
10
|
import { LightboxToolbar } from "./LightboxToolbar/LightboxToolbar.mjs";
|
|
11
|
+
import { LightboxCloseButton } from "./LightboxCloseButton/LightboxCloseButton.mjs";
|
|
12
|
+
import { LightboxProviderComponent } from "./LightboxProvider/LightboxProvider.mjs";
|
|
13
13
|
import { Lightbox } from "./Lightbox.mjs";
|
|
14
14
|
export { DEFAULT_LABELS, Lightbox, LightboxCaption, LightboxCloseButton, LightboxNavigation, LightboxProviderComponent, LightboxRoot, LightboxSlide, LightboxSlides, LightboxThumbnails, LightboxToolbar, createCloseToolbarItem, createDownloadToolbarItem, createFullscreenToolbarItem, createLightbox, createLightboxStore, createThumbnailsToolbarItem, lightbox, lightboxStore, useLightboxStore };
|
package/lib/Lightbox.d.ts
CHANGED
|
@@ -1,49 +1,18 @@
|
|
|
1
|
-
import { Factory } from '@mantine/core';
|
|
2
1
|
import { lightbox } from './lightbox.store';
|
|
3
|
-
import type { ToolbarItems } from './lightbox.types';
|
|
4
2
|
import { LightboxCaption } from './LightboxCaption/LightboxCaption';
|
|
5
3
|
import { LightboxCloseButton } from './LightboxCloseButton/LightboxCloseButton';
|
|
6
4
|
import { LightboxNavigation } from './LightboxNavigation/LightboxNavigation';
|
|
7
5
|
import { LightboxProviderComponent } from './LightboxProvider/LightboxProvider';
|
|
8
|
-
import { LightboxRoot
|
|
6
|
+
import { LightboxRoot } from './LightboxRoot/LightboxRoot';
|
|
9
7
|
import { LightboxSlide } from './LightboxSlide/LightboxSlide';
|
|
10
8
|
import { LightboxSlides } from './LightboxSlides/LightboxSlides';
|
|
11
9
|
import { LightboxThumbnails } from './LightboxThumbnails/LightboxThumbnails';
|
|
12
10
|
import { LightboxToolbar } from './LightboxToolbar/LightboxToolbar';
|
|
13
|
-
export type LightboxStylesNames
|
|
14
|
-
export interface LightboxProps extends Omit<LightboxRootProps, 'children'> {
|
|
15
|
-
/** Custom toolbar items, overrides default toolbar. Can be a function that receives the current lightbox state and handlers. */
|
|
16
|
-
toolbarItems?: ToolbarItems;
|
|
17
|
-
/** Shows previous/next navigation arrows @default true */
|
|
18
|
-
withNavigation?: boolean;
|
|
19
|
-
/** Custom lightbox layout, overrides the default layout built from compound components */
|
|
20
|
-
children?: React.ReactNode;
|
|
21
|
-
}
|
|
22
|
-
export type LightboxFactory = Factory<{
|
|
23
|
-
props: LightboxProps;
|
|
24
|
-
ref: HTMLDivElement;
|
|
25
|
-
stylesNames: LightboxStylesNames;
|
|
26
|
-
staticComponents: {
|
|
27
|
-
Root: typeof LightboxRoot;
|
|
28
|
-
Toolbar: typeof LightboxToolbar;
|
|
29
|
-
Slides: typeof LightboxSlides;
|
|
30
|
-
Slide: typeof LightboxSlide;
|
|
31
|
-
Thumbnails: typeof LightboxThumbnails;
|
|
32
|
-
Navigation: typeof LightboxNavigation;
|
|
33
|
-
Caption: typeof LightboxCaption;
|
|
34
|
-
CloseButton: typeof LightboxCloseButton;
|
|
35
|
-
Provider: typeof LightboxProviderComponent;
|
|
36
|
-
open: typeof lightbox.open;
|
|
37
|
-
close: typeof lightbox.close;
|
|
38
|
-
next: typeof lightbox.next;
|
|
39
|
-
prev: typeof lightbox.prev;
|
|
40
|
-
setIndex: typeof lightbox.setIndex;
|
|
41
|
-
};
|
|
42
|
-
}>;
|
|
11
|
+
export type { LightboxFactory, LightboxProps, LightboxStylesNames } from './LightboxBase';
|
|
43
12
|
export declare const Lightbox: import("@mantine/core").MantineComponent<{
|
|
44
|
-
props: LightboxProps;
|
|
13
|
+
props: import("./LightboxBase").LightboxProps;
|
|
45
14
|
ref: HTMLDivElement;
|
|
46
|
-
stylesNames: LightboxStylesNames;
|
|
15
|
+
stylesNames: import("./LightboxBase").LightboxStylesNames;
|
|
47
16
|
staticComponents: {
|
|
48
17
|
Root: typeof LightboxRoot;
|
|
49
18
|
Toolbar: typeof LightboxToolbar;
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
import { Factory } from '@mantine/core';
|
|
2
|
+
import { lightbox } from './lightbox.store';
|
|
3
|
+
import type { ToolbarItems } from './lightbox.types';
|
|
4
|
+
import { LightboxCaption } from './LightboxCaption/LightboxCaption';
|
|
5
|
+
import { LightboxCloseButton } from './LightboxCloseButton/LightboxCloseButton';
|
|
6
|
+
import { LightboxNavigation } from './LightboxNavigation/LightboxNavigation';
|
|
7
|
+
import type { LightboxProviderComponent } from './LightboxProvider/LightboxProvider';
|
|
8
|
+
import { LightboxRoot, LightboxRootProps, LightboxRootStylesNames } from './LightboxRoot/LightboxRoot';
|
|
9
|
+
import { LightboxSlide } from './LightboxSlide/LightboxSlide';
|
|
10
|
+
import { LightboxSlides } from './LightboxSlides/LightboxSlides';
|
|
11
|
+
import { LightboxThumbnails } from './LightboxThumbnails/LightboxThumbnails';
|
|
12
|
+
import { LightboxToolbar } from './LightboxToolbar/LightboxToolbar';
|
|
13
|
+
export type LightboxStylesNames = LightboxRootStylesNames;
|
|
14
|
+
export interface LightboxProps extends Omit<LightboxRootProps, 'children'> {
|
|
15
|
+
/** Custom toolbar items, overrides default toolbar. Can be a function that receives the current lightbox state and handlers. */
|
|
16
|
+
toolbarItems?: ToolbarItems;
|
|
17
|
+
/** Shows previous/next navigation arrows @default true */
|
|
18
|
+
withNavigation?: boolean;
|
|
19
|
+
/** Custom lightbox layout, overrides the default layout built from compound components */
|
|
20
|
+
children?: React.ReactNode;
|
|
21
|
+
}
|
|
22
|
+
export type LightboxFactory = Factory<{
|
|
23
|
+
props: LightboxProps;
|
|
24
|
+
ref: HTMLDivElement;
|
|
25
|
+
stylesNames: LightboxStylesNames;
|
|
26
|
+
staticComponents: {
|
|
27
|
+
Root: typeof LightboxRoot;
|
|
28
|
+
Toolbar: typeof LightboxToolbar;
|
|
29
|
+
Slides: typeof LightboxSlides;
|
|
30
|
+
Slide: typeof LightboxSlide;
|
|
31
|
+
Thumbnails: typeof LightboxThumbnails;
|
|
32
|
+
Navigation: typeof LightboxNavigation;
|
|
33
|
+
Caption: typeof LightboxCaption;
|
|
34
|
+
CloseButton: typeof LightboxCloseButton;
|
|
35
|
+
Provider: typeof LightboxProviderComponent;
|
|
36
|
+
open: typeof lightbox.open;
|
|
37
|
+
close: typeof lightbox.close;
|
|
38
|
+
next: typeof lightbox.next;
|
|
39
|
+
prev: typeof lightbox.prev;
|
|
40
|
+
setIndex: typeof lightbox.setIndex;
|
|
41
|
+
};
|
|
42
|
+
}>;
|
|
43
|
+
export declare const LightboxBase: import("@mantine/core").MantineComponent<{
|
|
44
|
+
props: LightboxProps;
|
|
45
|
+
ref: HTMLDivElement;
|
|
46
|
+
stylesNames: LightboxStylesNames;
|
|
47
|
+
staticComponents: {
|
|
48
|
+
Root: typeof LightboxRoot;
|
|
49
|
+
Toolbar: typeof LightboxToolbar;
|
|
50
|
+
Slides: typeof LightboxSlides;
|
|
51
|
+
Slide: typeof LightboxSlide;
|
|
52
|
+
Thumbnails: typeof LightboxThumbnails;
|
|
53
|
+
Navigation: typeof LightboxNavigation;
|
|
54
|
+
Caption: typeof LightboxCaption;
|
|
55
|
+
CloseButton: typeof LightboxCloseButton;
|
|
56
|
+
Provider: typeof LightboxProviderComponent;
|
|
57
|
+
open: typeof lightbox.open;
|
|
58
|
+
close: typeof lightbox.close;
|
|
59
|
+
next: typeof lightbox.next;
|
|
60
|
+
prev: typeof lightbox.prev;
|
|
61
|
+
setIndex: typeof lightbox.setIndex;
|
|
62
|
+
};
|
|
63
|
+
}>;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { Factory } from '@mantine/core';
|
|
2
|
-
import { LightboxProps } from '../Lightbox';
|
|
3
2
|
import { LightboxStore } from '../lightbox.store';
|
|
3
|
+
import { LightboxProps } from '../LightboxBase';
|
|
4
4
|
export interface LightboxProviderProps extends Omit<LightboxProps, 'opened' | 'onClose' | 'slides' | 'currentIndex' | 'onIndexChange'> {
|
|
5
5
|
/** Lightbox store, can be used to create multiple instances @default lightboxStore */
|
|
6
6
|
store?: LightboxStore;
|
package/lib/index.d.mts
CHANGED
|
@@ -10,7 +10,7 @@ import type { LightboxThumbnailsProps, LightboxThumbnailsStylesNames } from './L
|
|
|
10
10
|
import type { LightboxToolbarProps, LightboxToolbarStylesNames } from './LightboxToolbar/LightboxToolbar';
|
|
11
11
|
export { lightbox, createLightbox, createLightboxStore, useLightboxStore, lightboxStore, } from './lightbox.store.js';
|
|
12
12
|
export type { LightboxState, LightboxStore } from './lightbox.store.js';
|
|
13
|
-
export type { LightboxSlideData, LightboxImageSlide, LightboxVideoSlide, LightboxVideoSlideTrack, LightboxCustomSlide, LightboxLabels, ToolbarItem, ToolbarItems, ToolbarItemsPayload, } from './lightbox.types.js';
|
|
13
|
+
export type { LightboxSlideData, LightboxImageSlide, LightboxVideoSlide, LightboxRenderThumbPayload, LightboxVideoSlideTrack, LightboxCustomSlide, LightboxLabels, ToolbarItem, ToolbarItems, ToolbarItemsPayload, } from './lightbox.types.js';
|
|
14
14
|
export { DEFAULT_LABELS } from './default-labels.js';
|
|
15
15
|
export { Lightbox } from './Lightbox.js';
|
|
16
16
|
export { LightboxRoot } from './LightboxRoot/LightboxRoot.js';
|
package/lib/index.d.ts
CHANGED
|
@@ -10,7 +10,7 @@ import type { LightboxThumbnailsProps, LightboxThumbnailsStylesNames } from './L
|
|
|
10
10
|
import type { LightboxToolbarProps, LightboxToolbarStylesNames } from './LightboxToolbar/LightboxToolbar';
|
|
11
11
|
export { lightbox, createLightbox, createLightboxStore, useLightboxStore, lightboxStore, } from './lightbox.store.js';
|
|
12
12
|
export type { LightboxState, LightboxStore } from './lightbox.store.js';
|
|
13
|
-
export type { LightboxSlideData, LightboxImageSlide, LightboxVideoSlide, LightboxVideoSlideTrack, LightboxCustomSlide, LightboxLabels, ToolbarItem, ToolbarItems, ToolbarItemsPayload, } from './lightbox.types.js';
|
|
13
|
+
export type { LightboxSlideData, LightboxImageSlide, LightboxVideoSlide, LightboxRenderThumbPayload, LightboxVideoSlideTrack, LightboxCustomSlide, LightboxLabels, ToolbarItem, ToolbarItems, ToolbarItemsPayload, } from './lightbox.types.js';
|
|
14
14
|
export { DEFAULT_LABELS } from './default-labels.js';
|
|
15
15
|
export { Lightbox } from './Lightbox.js';
|
|
16
16
|
export { LightboxRoot } from './LightboxRoot/LightboxRoot.js';
|
package/lib/lightbox.types.d.ts
CHANGED
|
@@ -1,4 +1,8 @@
|
|
|
1
1
|
import type { ReactNode } from 'react';
|
|
2
|
+
export interface LightboxRenderThumbPayload {
|
|
3
|
+
/** Whether the thumbnail belongs to the current slide */
|
|
4
|
+
active: boolean;
|
|
5
|
+
}
|
|
2
6
|
export interface LightboxImageSlide {
|
|
3
7
|
/** Slide type, `'image'` by default */
|
|
4
8
|
type?: 'image';
|
|
@@ -6,6 +10,8 @@ export interface LightboxImageSlide {
|
|
|
6
10
|
src: string;
|
|
7
11
|
/** Image alt text for accessibility */
|
|
8
12
|
alt?: string;
|
|
13
|
+
/** Render function for custom thumbnail content, takes priority over `thumbSrc` */
|
|
14
|
+
renderThumb?: (payload: LightboxRenderThumbPayload) => ReactNode;
|
|
9
15
|
/** Custom thumbnail URL, if not set `src` is used */
|
|
10
16
|
thumbSrc?: string;
|
|
11
17
|
/** Caption displayed below the slide */
|
|
@@ -36,7 +42,9 @@ export interface LightboxVideoSlide {
|
|
|
36
42
|
src: string;
|
|
37
43
|
/** Video accessible label, announced by screen readers */
|
|
38
44
|
label?: string;
|
|
39
|
-
/**
|
|
45
|
+
/** Render function for custom thumbnail content, takes priority over `thumbSrc` and `poster` */
|
|
46
|
+
renderThumb?: (payload: LightboxRenderThumbPayload) => ReactNode;
|
|
47
|
+
/** Custom thumbnail URL, if not set `poster` is used */
|
|
40
48
|
thumbSrc?: string;
|
|
41
49
|
/** Caption displayed below the slide */
|
|
42
50
|
caption?: ReactNode;
|
|
@@ -55,7 +63,7 @@ export interface LightboxCustomSlide {
|
|
|
55
63
|
active: boolean;
|
|
56
64
|
}) => ReactNode;
|
|
57
65
|
/** Render function for custom thumbnail content */
|
|
58
|
-
renderThumb?: () => ReactNode;
|
|
66
|
+
renderThumb?: (payload: LightboxRenderThumbPayload) => ReactNode;
|
|
59
67
|
/** Custom thumbnail URL, used if `renderThumb` is not set */
|
|
60
68
|
thumbSrc?: string;
|
|
61
69
|
/** Caption displayed below the slide */
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mantine/lightbox",
|
|
3
|
-
"version": "9.
|
|
3
|
+
"version": "9.6.1",
|
|
4
4
|
"description": "Full-screen media lightbox with carousel navigation",
|
|
5
5
|
"homepage": "https://mantine.dev/",
|
|
6
6
|
"license": "MIT",
|
|
@@ -43,15 +43,15 @@
|
|
|
43
43
|
"directory": "packages/@mantine/lightbox"
|
|
44
44
|
},
|
|
45
45
|
"peerDependencies": {
|
|
46
|
-
"@mantine/core": "9.
|
|
47
|
-
"@mantine/hooks": "9.
|
|
46
|
+
"@mantine/core": "9.6.1",
|
|
47
|
+
"@mantine/hooks": "9.6.1",
|
|
48
48
|
"embla-carousel": ">=8.0.0",
|
|
49
49
|
"embla-carousel-react": ">=8.0.0",
|
|
50
50
|
"react": "^19.2.0",
|
|
51
51
|
"react-dom": "^19.2.0"
|
|
52
52
|
},
|
|
53
53
|
"dependencies": {
|
|
54
|
-
"@mantine/store": "9.
|
|
54
|
+
"@mantine/store": "9.6.1"
|
|
55
55
|
},
|
|
56
56
|
"devDependencies": {
|
|
57
57
|
"@mantine-tests/core": "workspace:*",
|