yet-another-react-lightbox-lite 1.1.0 → 1.2.0

package/README.md

@@ -110,7 +110,6 @@ with `next/image` with the following `render.slide` render function.
 
 ```tsx
 <Lightbox
-  // ...
   render={{
     slide: ({ slide, rect }) => {
       const width =
@@ -147,6 +146,7 @@ with `next/image` with the following `render.slide` render function.
       );
     },
   }}
+  // ...
 />
 ```
 
@@ -203,6 +203,37 @@ Custom UI labels / translations.
 />
 ```
 
+### toolbar
+
+Type: `object`
+
+Toolbar settings.
+
+- `buttons` - custom toolbar buttons (type: `ReactNode[]`)
+- `fixed` - if `true`, the toolbar is positioned statically above the carousel
+
+Usage example:
+
+```tsx
+<Lightbox
+  toolbar={{
+    fixed: true,
+    buttons: [
+      <button
+        type="button"
+        className="yarll__button"
+        onClick={() => {
+          // ...
+        }}
+      >
+        <ButtonIcon />
+      </button>,
+    ],
+  }}
+  // ...
+/>
+```
+
 ### controller
 
 Type: `object`
@@ -220,12 +251,12 @@ Usage example:
 
 ```tsx
 <Lightbox
-  // ...
   controller={{
     closeOnPullUp: false,
     closeOnPullDown: false,
     closeOnBackdropClick: false,
   }}
+  // ...
 />
 ```
 
@@ -294,7 +325,6 @@ slides counter.
 
 ```tsx
 <Lightbox
-  // ...
   render={{
     controls: () =>
       index !== undefined && (
@@ -303,29 +333,7 @@ slides counter.
         </div>
       ),
   }}
-/>
-```
-
-You can also use the `render.controls` render function to add custom buttons to
-the toolbar.
-
-```tsx
-<Lightbox
   // ...
-  render={{
-    controls: () => (
-      <button
-        type="button"
-        className="yarll__button"
-        style={{ position: "absolute", top: 8, right: 64 }}
-        onClick={() => {
-          // ...
-        }}
-      >
-        <ButtonIcon />
-      </button>
-    ),
-  }}
 />
 ```
 
@@ -355,6 +363,7 @@ Supported customization slots:
 - `carousel` - lightbox carousel
 - `slide` - lightbox slide
 - `image` - lightbox slide image
+- `toolbar` - lightbox toolbar
 - `button` - lightbox button
 - `icon` - lightbox icon
 
@@ -362,10 +371,10 @@ Usage example:
 
 ```tsx
 <Lightbox
-  // ...
   styles={{
     portal: { "--yarll__backdrop_color": "rgba(0, 0, 0, 0.6)" },
   }}
+  // ...
 />
 ```
 
@@ -493,8 +502,8 @@ to use this feature, you can turn it off by assigning the
 
 ```tsx
 <Lightbox
-  // ..
   className="yarll__no_scroll_lock"
+  // ...
 />
 ```
 

package/dist/index.d.ts

@@ -13,8 +13,10 @@ interface LightboxProps {
     labels?: Labels;
     /** custom render functions */
     render?: Render;
+    /** toolbar settings */
+    toolbar?: ToolbarSettings;
     /** controller settings */
-    controller?: Controller;
+    controller?: ControllerSettings;
     /** customization slots styles */
     styles?: SlotStyles;
     /** CSS class of the lightbox root element */
@@ -94,15 +96,22 @@ interface RenderSlideProps {
     /** if `true`, the slide is the current slide in the viewport */
     current: boolean;
 }
+/** Toolbar settings */
+interface ToolbarSettings {
+    /** custom toolbar buttons */
+    buttons?: React.ReactNode[];
+    /** if `true`, the toolbar is positioned statically above the carousel */
+    fixed?: boolean;
+}
 /** Controller settings */
-type Controller = {
+interface ControllerSettings {
     /** if `true`, close the lightbox on pull-up gesture (default: `true`) */
     closeOnPullUp?: boolean;
     /** if `true`, close the lightbox on pull-down gesture (default: `true`) */
     closeOnPullDown?: boolean;
     /** if `true`, close the lightbox when the backdrop is clicked (default: `true`) */
     closeOnBackdropClick?: boolean;
-};
+}
 /** Customization slots */
 interface SlotType {
     /** lightbox portal (root) customization slot */
@@ -113,6 +122,8 @@ interface SlotType {
     slide: "slide";
     /** lightbox slide image customization slot */
     image: "image";
+    /** lightbox toolbar customization slot */
+    toolbar: "toolbar";
     /** lightbox button customization slot */
     button: "button";
     /** lightbox icon customization slot */
@@ -140,4 +151,4 @@ type RenderFunction<T = void> = [T] extends [void] ? () => React.ReactNode : (pr
 
 declare function Lightbox({ slides, index, setIndex, ...rest }: LightboxProps): react_jsx_runtime.JSX.Element | null;
 
-export { type Callback, type Controller, type GenericSlide, type ImageSource, type Label, type Labels, type LightboxProps, type Rect, type Render, type RenderFunction, type RenderSlideProps, type Slide, type SlideImage, type SlideTypeKey, type SlideTypes, type Slot, type SlotStyles, type SlotType, Lightbox as default };
+export { type Callback, type ControllerSettings, type GenericSlide, type ImageSource, type Label, type Labels, type LightboxProps, type Rect, type Render, type RenderFunction, type RenderSlideProps, type Slide, type SlideImage, type SlideTypeKey, type SlideTypes, type Slot, type SlotStyles, type SlotType, type ToolbarSettings, Lightbox as default };

package/dist/index.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useContext, createContext, useState, useRef, useCallback, useMemo, useEffect } from 'react';
+import { useContext, createContext, useState, useRef, useCallback, useMemo, useEffect, isValidElement, cloneElement } from 'react';
 import { flushSync, createPortal } from 'react-dom';
 
 const cssPrefix = "yarll__";
@@ -137,9 +137,9 @@ const Next = createIcon("Next", jsx("path", { d: "M10 6L8.59 7.41 13.17 12l-4.58
 const Previous = createIcon("Previous", jsx("path", { d: "M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" }));
 
 function Navigation() {
-    const { slides, index, render: { iconPrev, iconNext, iconClose, controls } = {} } = useLightboxContext();
-    const { prev, next, close } = useController();
-    return (jsxs(Fragment, { children: [slides.length > 1 && (jsxs(Fragment, { children: [jsx(Button, { label: "Previous", icon: Previous, renderIcon: iconPrev, onClick: prev, className: cssClass("button_prev"), disabled: index <= 0 }), jsx(Button, { label: "Next", icon: Next, renderIcon: iconNext, onClick: next, className: cssClass("button_next"), disabled: index >= slides.length - 1 })] })), jsx(Button, { label: "Close", icon: Close, renderIcon: iconClose, onClick: close, className: cssClass("button_close") }), controls?.()] }));
+    const { slides, index, render: { iconPrev, iconNext, controls } = {} } = useLightboxContext();
+    const { prev, next } = useController();
+    return (jsxs(Fragment, { children: [slides.length > 1 && (jsxs(Fragment, { children: [jsx(Button, { label: "Previous", icon: Previous, renderIcon: iconPrev, onClick: prev, className: cssClass("button_prev"), disabled: index <= 0 }), jsx(Button, { label: "Next", icon: Next, renderIcon: iconNext, onClick: next, className: cssClass("button_next"), disabled: index >= slides.length - 1 })] })), controls?.()] }));
 }
 
 function useSensors() {
@@ -193,8 +193,8 @@ function useSensors() {
                 }
                 else if ((deltaY > 50 && deltaY > 1.2 * deltaX && ((closeOnPullUp && dy < 0) || (closeOnPullDown && dy > 0))) ||
                     (closeOnBackdropClick &&
-                        activePointer.current.target instanceof HTMLElement &&
-                        activePointer.current.target.className.split(" ").includes(cssClass("slide")))) {
+                        activePointer.current.target instanceof Element &&
+                        Array.from(activePointer.current.target.classList).some((className) => [cssClass("slide"), cssClass("portal")].includes(className)))) {
                     close();
                 }
                 activePointer.current = null;
@@ -325,10 +325,16 @@ function Portal({ children }) {
         : null;
 }
 
+function Toolbar() {
+    const { render: { iconClose } = {}, toolbar: { buttons, fixed } = {}, styles } = useLightboxContext();
+    const { close } = useController();
+    return (jsxs("div", { style: styles?.toolbar, className: clsx(cssClass("toolbar"), fixed && cssClass("toolbar_fixed")), children: [buttons?.map((button, key) => (isValidElement(button) && !button.key ? cloneElement(button, { key }) : button)), jsx(Button, { label: "Close", icon: Close, renderIcon: iconClose, onClick: close })] }));
+}
+
 function Lightbox({ slides, index, setIndex, ...rest }) {
     if (!Array.isArray(slides) || index === undefined || index < 0 || index >= slides.length)
         return null;
-    return (jsx(LightboxContextProvider, { slides, index, ...rest, children: jsx(Controller, { setIndex, children: jsxs(Portal, { children: [jsx(Carousel, {}), jsx(Navigation, {})] }) }) }));
+    return (jsx(LightboxContextProvider, { slides, index, ...rest, children: jsx(Controller, { setIndex, children: jsxs(Portal, { children: [jsx(Toolbar, {}), jsx(Carousel, {}), jsx(Navigation, {})] }) }) }));
 }
 
 export { Lightbox as default };

package/dist/styles.css

@@ -1 +1 @@
-body:has(>.yarll__portal){overscroll-behavior:none}body:has(>.yarll__portal:not(.yarll__no_scroll_lock)){height:100%;overflow:hidden;padding-right:var(--yarll__scrollbar-width,0)}body:has(>.yarll__portal:not(.yarll__no_scroll_lock)) .yarll_fixed{padding-right:var(--yarll__scrollbar-width,0)}.yarll__portal{align-items:center;display:flex;flex-direction:column;inset:0;justify-content:center;outline:none;overflow:hidden;overscroll-behavior:none;position:fixed;touch-action:none;-moz-user-select:none;user-select:none;-webkit-user-select:none;z-index:var(--yarll__portal_zindex,9999);-webkit-touch-callout:none;background-color:var(--yarll__backdrop_color,#000);color:var(--yarll__color,#fff);opacity:1;transition:var(--yarll__fade_transition,opacity .3s ease)}.yarll__portal_closed{opacity:0}.yarll__portal *{box-sizing:border-box}.yarll__carousel{align-self:stretch;flex:1;margin:var(--yarll__carousel_margin,16px);position:relative}.yarll__slide{align-items:center;display:flex;flex-direction:column;inset:0;justify-content:center;position:absolute}.yarll__slide[hidden]{display:none}.yarll__slide_image{display:block;flex:1;max-height:100%;max-width:100%;min-height:0;min-width:0;-o-object-fit:contain;object-fit:contain}.yarll__button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--yarll__button_background_color,transparent);border:0;color:var(--yarll__button_color,var(--yarll__button_color,hsla(0,0%,100%,.8)));cursor:pointer;filter:var(--yarll__button_filter,drop-shadow(2px 2px 2px rgba(0,0,0,.8)));margin:0;padding:var(--yarll__button_padding,8px)}.yarll__button:focus-visible{box-shadow:var(--yarll__button_focus_box_shadow,0 0 0 4px #fff);color:var(--yarll__button_color_active,#fff);outline:var(--yarll__button_focus_outline,6px double #000)}@supports not selector(:focus-visible){.yarll__button:focus{box-shadow:var(--yarll__button_focus_box_shadow,0 0 0 4px #fff);color:var(--yarll__button_color_active,#fff);outline:var(--yarll__button_focus_outline,6px double #000)}}@media (hover:hover){.yarll__button:focus-visible:hover,.yarll__button:focus:hover,.yarll__button:hover{color:var(--yarll__button_color_active,#fff)}}.yarll__button_close{position:absolute;right:8px;top:8px}.yarll__button_prev{left:8px}.yarll__button_next{right:8px}.yarll__button_next,.yarll__button_prev{padding:var(--yarll__navigation_button_padding,24px 8px);position:absolute}.yarll__button:disabled{color:var(--yarll__button_color_disabled,var(--yarll__button_color_disabled,hsla(0,0%,100%,.4)));cursor:default}.yarll__icon{display:block;height:var(--yarll__icon_size,32px);width:var(--yarll__icon_size,32px)}
+body:has(>.yarll__portal){overscroll-behavior:none}body:has(>.yarll__portal:not(.yarll__no_scroll_lock)){height:100%;overflow:hidden;padding-right:var(--yarll__scrollbar-width,0)}body:has(>.yarll__portal:not(.yarll__no_scroll_lock)) .yarll_fixed{padding-right:var(--yarll__scrollbar-width,0)}.yarll__portal{align-items:center;display:flex;flex-direction:column;inset:0;justify-content:center;outline:none;overflow:hidden;overscroll-behavior:none;position:fixed;touch-action:none;-moz-user-select:none;user-select:none;-webkit-user-select:none;z-index:var(--yarll__portal_zindex,9999);-webkit-touch-callout:none;background-color:var(--yarll__backdrop_color,#000);color:var(--yarll__color,#fff);opacity:1;transition:var(--yarll__fade_transition,opacity .3s ease)}.yarll__portal_closed{opacity:0}.yarll__portal *{box-sizing:border-box}.yarll__carousel{align-self:stretch;flex:1;margin:var(--yarll__carousel_margin,16px);position:relative}.yarll__slide{align-items:center;display:flex;flex-direction:column;inset:0;justify-content:center;position:absolute}.yarll__slide[hidden]{display:none}.yarll__slide_image{display:block;flex:1;max-height:100%;max-width:100%;min-height:0;min-width:0;-o-object-fit:contain;object-fit:contain}.yarll__toolbar{align-items:center;display:flex;position:absolute;right:var(--yarll__toolbar_margin,8px);top:var(--yarll__toolbar_margin,8px);z-index:1}.yarll__toolbar_fixed{align-self:flex-end;margin-inline-end:var(--yarll__toolbar_margin,8px);position:static;z-index:unset}.yarll__toolbar_fixed,.yarll__toolbar_fixed+.yarll__carousel{margin-block-start:var(--yarll__toolbar_margin,8px)}.yarll__button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--yarll__button_background_color,transparent);border:0;color:var(--yarll__button_color,var(--yarll__button_color,hsla(0,0%,100%,.8)));cursor:pointer;filter:var(--yarll__button_filter,drop-shadow(2px 2px 2px rgba(0,0,0,.8)));margin:0;padding:var(--yarll__button_padding,8px)}.yarll__button:focus-visible{box-shadow:var(--yarll__button_focus_box_shadow,0 0 0 4px #fff);color:var(--yarll__button_color_active,#fff);outline:var(--yarll__button_focus_outline,6px double #000)}@supports not selector(:focus-visible){.yarll__button:focus{box-shadow:var(--yarll__button_focus_box_shadow,0 0 0 4px #fff);color:var(--yarll__button_color_active,#fff);outline:var(--yarll__button_focus_outline,6px double #000)}}@media (hover:hover){.yarll__button:focus-visible:hover,.yarll__button:focus:hover,.yarll__button:hover{color:var(--yarll__button_color_active,#fff)}}.yarll__button_next,.yarll__button_prev{padding:var(--yarll__navigation_button_padding,24px 8px);position:absolute}.yarll__button_prev{left:8px}.yarll__button_next{right:8px}.yarll__button:disabled{color:var(--yarll__button_color_disabled,var(--yarll__button_color_disabled,hsla(0,0%,100%,.4)));cursor:default}.yarll__icon{display:block;height:var(--yarll__icon_size,32px);width:var(--yarll__icon_size,32px)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yet-another-react-lightbox-lite",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Lightweight React lightbox component",
   "author": "Igor Danchenko",
   "license": "MIT",