yet-another-react-lightbox 1.2.3 → 1.3.2

package/README.md

@@ -1,6 +1,6 @@
 # Yet Another React Lightbox
 
-Modern lightbox component for React.
+Modern React lightbox component.
 
 ## Overview
 
@@ -8,11 +8,9 @@ Modern lightbox component for React.
 [![Bundle Size](https://img.shields.io/bundlephobia/minzip/yet-another-react-lightbox?color=blue)](https://bundlephobia.com/package/yet-another-react-lightbox)
 [![License MIT](https://img.shields.io/npm/l/yet-another-react-lightbox?color=blue)](LICENSE)
 
-Coming soon...
-
 ## Documentation
 
-Coming soon...
+[https://yet-another-react-lightbox.vercel.app/](https://yet-another-react-lightbox.vercel.app/)
 
 ## Installation
 
@@ -30,10 +28,10 @@ yarn add yet-another-react-lightbox
 
 ```javascript
 import * as React from "react";
-import { Lightbox } from "yet-another-react-lightbox";
+import Lightbox from "yet-another-react-lightbox";
 import "yet-another-react-lightbox/styles.css";
 
-const Page = () => {
+const App = () => {
     const [open, setOpen] = React.useState(false);
 
     return (
@@ -55,7 +53,7 @@ const Page = () => {
     );
 };
 
-export default Page;
+export default App;
 ```
 
 ## License

package/dist/Lightbox.d.ts

@@ -1,9 +1,7 @@
 /// <reference types="react" />
 import { LightboxProps } from "./types.js";
-declare type MakePartial<T> = T extends object ? Partial<T> : T;
-declare type NestedPartial<T extends object> = {
-    [P in keyof T]?: MakePartial<T[P]>;
+declare type DeepPartial<T, K extends keyof T> = Omit<T, K> & {
+    [P in keyof Pick<T, K>]?: Partial<Pick<T, K>[P]>;
 };
-declare type NestedOptional<T, K extends keyof T> = Omit<T, K> & NestedPartial<Pick<T, K>>;
-export declare const Lightbox: (props: NestedOptional<Partial<LightboxProps>, "carousel" | "animation" | "render" | "toolbar" | "on">) => JSX.Element;
+export declare const Lightbox: (props: DeepPartial<Partial<LightboxProps>, "carousel" | "animation" | "render" | "toolbar" | "on">) => JSX.Element;
 export {};

package/dist/Lightbox.js

@@ -25,7 +25,7 @@ const LightboxComponent = (props) => {
 };
 LightboxComponent.propTypes = LightboxPropTypes;
 export const Lightbox = (props) => {
-    const { carousel, animation, render, toolbar, on, ...restProps } = props;
-    const { carousel: defaultCarousel, animation: defaultAnimation, render: defaultRender, toolbar: defaultToolbar, on: defaultOn, ...restDefaultProps } = LightboxDefaultProps;
-    return (React.createElement(LightboxComponent, { carousel: { ...defaultCarousel, ...carousel }, animation: { ...defaultAnimation, ...animation }, render: { ...defaultRender, ...render }, toolbar: { ...defaultToolbar, ...toolbar }, on: { ...defaultOn, ...on }, ...restDefaultProps, ...restProps }));
+    const { carousel, animation, render, toolbar, controller, on, ...restProps } = props;
+    const { carousel: defaultCarousel, animation: defaultAnimation, render: defaultRender, toolbar: defaultToolbar, controller: defaultController, on: defaultOn, ...restDefaultProps } = LightboxDefaultProps;
+    return (React.createElement(LightboxComponent, { carousel: { ...defaultCarousel, ...carousel }, animation: { ...defaultAnimation, ...animation }, render: { ...defaultRender, ...render }, toolbar: { ...defaultToolbar, ...toolbar }, controller: { ...defaultController, ...controller }, on: { ...defaultOn, ...on }, ...restDefaultProps, ...restProps }));
 };

package/dist/core/modules/Controller.js

@@ -42,8 +42,10 @@ export const Controller = ({ children, ...props }) => {
     }, [containerRef]);
     React.useEffect(() => {
         var _a;
-        (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    }, [containerRef]);
+        if (refs.current.props.controller.focus) {
+            (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }, [containerRef, refs]);
     React.useEffect(() => {
         var _a, _b;
         (_b = (_a = refs.current.props.on).view) === null || _b === void 0 ? void 0 : _b.call(_a, state.currentIndex);

package/dist/index.d.ts

@@ -1,2 +1,4 @@
+import { Lightbox } from "./Lightbox.js";
 export * from "./types.js";
 export * from "./Lightbox.js";
+export default Lightbox;

package/dist/index.js

@@ -1,2 +1,4 @@
+import { Lightbox } from "./Lightbox.js";
 export * from "./types.js";
 export * from "./Lightbox.js";
+export default Lightbox;

package/dist/plugins/Fullscreen.d.ts

@@ -31,9 +31,12 @@ declare global {
         msRequestFullscreen?: () => void;
     }
 }
-export declare type FullscreenButtonProps = Pick<LightboxProps, "labels"> & {
+declare type FullscreenButtonProps = Pick<LightboxProps, "labels"> & {
     auto: boolean;
     render: Render;
 };
-export declare const FullscreenButton: ({ auto, labels, render }: FullscreenButtonProps) => JSX.Element | null;
-export declare const Fullscreen: Plugin;
+declare const FullscreenButton: ({ auto, labels, render }: FullscreenButtonProps) => JSX.Element | null;
+declare const Fullscreen: Plugin;
+export type { FullscreenButtonProps };
+export { Fullscreen, FullscreenButton };
+export default Fullscreen;

package/dist/plugins/Fullscreen.js

@@ -2,7 +2,7 @@ import * as React from "react";
 import { createIcon, IconButton, label, useController, useLatest } from "../core/index.js";
 const EnterFullscreenIcon = createIcon("EnterFullscreen", React.createElement("path", { d: "M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" }));
 const ExitFullscreenIcon = createIcon("ExitFullscreen", React.createElement("path", { d: "M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z" }));
-export const FullscreenButton = ({ auto, labels, render }) => {
+const FullscreenButton = ({ auto, labels, render }) => {
     const [fullscreen, setFullscreen] = React.useState(false);
     const latestAuto = useLatest(auto);
     const { containerRef } = useController();
@@ -92,7 +92,7 @@ export const FullscreenButton = ({ auto, labels, render }) => {
         return null;
     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 }));
 };
-export const Fullscreen = ({ augment }) => {
+const Fullscreen = ({ augment }) => {
     augment(({ toolbar: { buttons, ...restToolbar }, ...restProps }) => ({
         toolbar: {
             buttons: [
@@ -104,3 +104,5 @@ export const Fullscreen = ({ augment }) => {
         ...restProps,
     }));
 };
+export { Fullscreen, FullscreenButton };
+export default Fullscreen;

package/dist/plugins/Inline.d.ts

@@ -5,6 +5,8 @@ declare module "../types.js" {
         inline?: React.HTMLAttributes<HTMLDivElement>;
     }
 }
-export declare const InlineContainer: Component;
-export declare const InlineModule: import("../types.js").Module;
-export declare const Inline: Plugin;
+declare const InlineContainer: Component;
+declare const InlineModule: import("../types.js").Module;
+declare const Inline: Plugin;
+export { Inline, InlineModule, InlineContainer };
+export default Inline;

package/dist/plugins/Inline.js

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

package/dist/plugins/Video.d.ts

@@ -15,7 +15,9 @@ declare module "../types.js" {
         SlideVideo: SlideVideo;
     }
 }
-export declare const VideoSlide: ({ slide: { sources, poster, width, height } }: {
+declare const VideoSlide: ({ slide: { sources, poster, width, height } }: {
     slide: SlideVideo;
 }) => JSX.Element;
-export declare const Video: Plugin;
+declare const Video: Plugin;
+export { Video, VideoSlide };
+export default Video;

package/dist/plugins/Video.js

@@ -12,7 +12,7 @@ SlideTypesPropTypes.push(PropTypes.shape({
         type: PropTypes.string.isRequired,
     }).isRequired),
 }));
-export const VideoSlide = ({ slide: { sources, poster, width, height } }) => {
+const VideoSlide = ({ slide: { sources, poster, width, height } }) => {
     const { setContainerRef, containerRect } = useContainerRect();
     const scaleWidthAndHeight = () => {
         if (!width || !height || !containerRect)
@@ -28,7 +28,7 @@ export const VideoSlide = ({ slide: { sources, poster, width, height } }) => {
             height: "100%",
         }, className: clsx(cssClass("video_container"), cssClass("flex_center")) }, containerRect && (React.createElement("video", { controls: true, playsInline: true, poster: poster, ...scaleWidthAndHeight() }, sources.map(({ src, type }, index) => (React.createElement("source", { key: index, src: src, type: type })))))))));
 };
-export const Video = ({ augment }) => {
+const Video = ({ augment }) => {
     augment(({ render: { slide: renderSlide, ...restRender }, ...restProps }) => ({
         render: {
             slide: (slide) => {
@@ -42,3 +42,5 @@ export const Video = ({ augment }) => {
         ...restProps,
     }));
 };
+export { Video, VideoSlide };
+export default Video;

package/dist/types.d.ts

@@ -13,16 +13,19 @@ export interface SlideTypes {
     SlideImage: SlideImage;
 }
 export declare type Slide = SlideTypes[keyof SlideTypes];
-export interface Carousel {
+export interface CarouselSettings {
     finite: boolean;
     preload: number;
     padding: string | number;
     spacing: string | number;
 }
-export interface Animation {
+export interface AnimationSettings {
     fade: number;
     swipe: number;
 }
+export interface ControllerSettings {
+    focus: boolean;
+}
 export interface Render {
     slide?: (slide: Slide) => React.ReactNode;
     iconPrev?: () => React.ReactNode;
@@ -49,9 +52,10 @@ export interface LightboxProps {
     render: Render;
     labels: Labels;
     plugins: Plugin[];
-    toolbar: Toolbar;
-    carousel: Carousel;
-    animation: Animation;
+    toolbar: ToolbarSettings;
+    carousel: CarouselSettings;
+    animation: AnimationSettings;
+    controller: ControllerSettings;
     on: Callbacks;
 }
 export declare const SlideTypesPropTypes: PropTypes.Validator<any>[];
@@ -86,6 +90,9 @@ export declare const LightboxPropTypes: {
         fade: PropTypes.Validator<number>;
         swipe: PropTypes.Validator<number>;
     }>>;
+    controller: PropTypes.Validator<PropTypes.InferProps<{
+        focus: PropTypes.Validator<boolean>;
+    }>>;
     on: PropTypes.Validator<PropTypes.InferProps<{
         view: PropTypes.Requireable<(...args: any[]) => any>;
         entering: PropTypes.Requireable<(...args: any[]) => any>;
@@ -101,16 +108,17 @@ export declare const LightboxDefaultProps: {
     slides: Slide[];
     render: Render;
     plugins: Plugin[];
-    toolbar: Toolbar;
+    toolbar: ToolbarSettings;
     labels: Labels;
-    animation: Animation;
-    carousel: Carousel;
+    animation: AnimationSettings;
+    carousel: CarouselSettings;
+    controller: ControllerSettings;
     on: Callbacks;
 };
 export declare type Labels = {
     [key: string]: string;
 };
-export interface Toolbar {
+export interface ToolbarSettings {
     buttons: ("close" | React.ReactNode)[];
 }
 export declare type ComponentProps = Omit<LightboxProps, "plugins">;

package/dist/types.js

@@ -44,6 +44,9 @@ export const LightboxPropTypes = {
         fade: PropTypes.number.isRequired,
         swipe: PropTypes.number.isRequired,
     }).isRequired,
+    controller: PropTypes.shape({
+        focus: PropTypes.bool.isRequired,
+    }).isRequired,
     on: PropTypes.shape({
         view: PropTypes.func,
         entering: PropTypes.func,
@@ -71,5 +74,8 @@ export const LightboxDefaultProps = {
         padding: "16px",
         spacing: "30%",
     },
+    controller: {
+        focus: true,
+    },
     on: {},
 };

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "yet-another-react-lightbox",
-    "version": "1.2.3",
-    "description": "Modern lightbox component for React",
+    "version": "1.3.2",
+    "description": "Modern React lightbox component",
     "author": "Igor Danchenko",
     "license": "MIT",
     "type": "module",
@@ -82,8 +82,8 @@
         "@types/jest": "^27.5.1",
         "@types/react": "^18.0.9",
         "@types/react-dom": "^18.0.5",
-        "@typescript-eslint/eslint-plugin": "^5.26.0",
-        "@typescript-eslint/parser": "^5.26.0",
+        "@typescript-eslint/eslint-plugin": "^5.27.0",
+        "@typescript-eslint/parser": "^5.27.0",
         "autoprefixer": "^10.4.7",
         "eslint": "^8.16.0",
         "eslint-config-airbnb": "^19.0.4",
@@ -97,7 +97,7 @@
         "husky": "^8.0.1",
         "jest": "^28.1.0",
         "jest-environment-jsdom": "^28.1.0",
-        "lint-staged": "^12.4.2",
+        "lint-staged": "^12.4.3",
         "npm-run-all": "^4.1.5",
         "postcss": "^8.4.14",
         "postcss-cli": "^9.1.0",