yet-another-react-lightbox 3.29.2 → 3.30.0

package/dist/index.d.ts

@@ -87,7 +87,7 @@ declare function useEventCallback<Args extends unknown[], Return>(fn: (...args:
 declare function setRef<T>(ref: React.MutableRefObject<T | null> | ((instance: T | null) => void) | null | undefined, value: T | null): void;
 declare function useForkRef<InstanceA, InstanceB>(refA: React.Ref<InstanceA> | null | undefined, refB: React.Ref<InstanceB> | null | undefined): React.Ref<InstanceA & InstanceB> | null;
 
-declare const useLayoutEffect: typeof React.useEffect;
+declare const useLayoutEffect: typeof React.useLayoutEffect;
 
 declare function useLoseFocus(focus: () => void, disabled?: boolean): {
     onFocus: () => void;
@@ -173,6 +173,16 @@ declare const useLightboxDispatch: () => LightboxDispatchContextType;
 type LightboxStateProviderProps = React.PropsWithChildren<Pick<LightboxProps, "slides" | "index">>;
 declare function LightboxStateProvider({ slides, index, children }: LightboxStateProviderProps): React.JSX.Element;
 
+type RTLContextType = {
+    isRTL: boolean;
+};
+declare const RTLContext: React.Context<RTLContextType | null>;
+declare const useRTLContext: () => RTLContextType;
+type RTLContextProviderProps = React.PropsWithChildren & {
+    isRTL: boolean;
+};
+declare function RTLContextProvider({ isRTL, children }: RTLContextProviderProps): React.JSX.Element;
+
 type TimeoutsContextType = {
     setTimeout: (fn: () => void, delay?: number) => number;
     clearTimeout: (id?: number) => void;
@@ -291,7 +301,7 @@ declare function useNavigationState(): {
 declare function NoScroll({ noScroll: { disabled }, children }: ComponentProps): React.JSX.Element;
 declare const NoScrollModule: Module;
 
-declare function Portal({ children, animation, styles, className, on, portal, close, labels }: ComponentProps): React.ReactPortal | null;
+declare function Portal({ portal: { root, container: { className: containerClassName, style: containerStyle, ...containerRest } }, animation, styles, className, on, close, labels, children, }: ComponentProps): React.ReactPortal | null;
 declare const PortalModule: Module;
 
 declare function Root({ children }: ComponentProps): React.JSX.Element;
@@ -300,5 +310,5 @@ declare const RootModule: Module;
 declare function Toolbar({ toolbar: { buttons }, render: { buttonClose, iconClose }, styles }: ComponentProps): React.JSX.Element;
 declare const ToolbarModule: Module;
 
-export { A11yContext, A11yContextProvider, Augmentation, Callback, Carousel, CarouselModule, CarouselSettings, CloseIcon, Component, ComponentProps, ContainerRect, Controller, ControllerContext, ControllerModule, ControllerRef, ControllerSettings, DocumentContext, DocumentContextProvider, ErrorIcon, EventTypes, EventsContext, EventsProvider, IconButton, ImageSlide, Label, Labels, LengthOrPercentage, Lightbox, LightboxDefaultProps, LightboxDispatchContext, LightboxExternalProps, LightboxProps, LightboxPropsContext, LightboxPropsProvider, LightboxRoot, LightboxState, LightboxStateContext, LightboxStateProvider, LightboxStateSwipeAction, LightboxStateUpdateAction, LoadingIcon, Module, Navigation, NavigationButton, NavigationModule, NextIcon, NoScroll, NoScrollModule, Node$1 as Node, Plugin, Portal, PortalModule, PreviousIcon, Render, RenderFunction, Root, RootModule, Slide, SlideImage, SwipeState, TimeoutsContext, TimeoutsProvider, Toolbar, ToolbarModule, ToolbarSettings, addToolbarButton, calculatePreload, cleanup, clsx, composePrefix, computeSlideRect, createIcon, createIconDisabled, createModule, createNode, cssClass, cssVar, Lightbox as default, devicePixelRatio, getSlide, getSlideIfPresent, getSlideIndex, getSlideKey, hasSlides, hasWindow, isImageFitCover, isImageSlide, label, makeComposePrefix, makeInertWhen, makeUseContext, parseInt, parseLengthPercentage, reflow, round, setRef, stopNavigationEventsPropagation, translateLabel, translateSlideCounter, useA11yContext, useAnimation, useContainerRect, useController, useDelay, useDocumentContext, useEventCallback, useEvents, useForkRef, useKeyboardNavigation, useLayoutEffect, useLightboxDispatch, useLightboxProps, useLightboxState, useLoseFocus, useMotionPreference, useNavigationState, usePointerSwipe, usePreventWheelDefaults, useRTL, useSensors, useThrottle, useTimeouts, useWheelSwipe, withPlugins };
-export type { A11yContextType, ComputeAnimation, ControllerContextType, DocumentContextProviderProps, DocumentContextType, Event, EventCallback, EventsContextType, IconButtonProps, ImageSlideProps, KeyboardEventType, LightboxDispatchContextType, LightboxPropsContextType, LightboxStateAction, LightboxStateContextType, LightboxStateProviderProps, NavigationButtonProps, PointerEventType, Publish, ReactEventType, RegisterSensors, SensorCallback, Subscribe, SubscribeSensors, SupportedEventType, TimeoutsContextType, Topic, Unsubscribe, UseSensors, WheelEventType };
+export { A11yContext, A11yContextProvider, Augmentation, Callback, Carousel, CarouselModule, CarouselSettings, CloseIcon, Component, ComponentProps, ContainerRect, Controller, ControllerContext, ControllerModule, ControllerRef, ControllerSettings, DocumentContext, DocumentContextProvider, ErrorIcon, EventTypes, EventsContext, EventsProvider, IconButton, ImageSlide, Label, Labels, LengthOrPercentage, Lightbox, LightboxDefaultProps, LightboxDispatchContext, LightboxExternalProps, LightboxProps, LightboxPropsContext, LightboxPropsProvider, LightboxRoot, LightboxState, LightboxStateContext, LightboxStateProvider, LightboxStateSwipeAction, LightboxStateUpdateAction, LoadingIcon, Module, Navigation, NavigationButton, NavigationModule, NextIcon, NoScroll, NoScrollModule, Node$1 as Node, Plugin, Portal, PortalModule, PreviousIcon, RTLContext, RTLContextProvider, Render, RenderFunction, Root, RootModule, Slide, SlideImage, SwipeState, TimeoutsContext, TimeoutsProvider, Toolbar, ToolbarModule, ToolbarSettings, addToolbarButton, calculatePreload, cleanup, clsx, composePrefix, computeSlideRect, createIcon, createIconDisabled, createModule, createNode, cssClass, cssVar, Lightbox as default, devicePixelRatio, getSlide, getSlideIfPresent, getSlideIndex, getSlideKey, hasSlides, hasWindow, isImageFitCover, isImageSlide, label, makeComposePrefix, makeInertWhen, makeUseContext, parseInt, parseLengthPercentage, reflow, round, setRef, stopNavigationEventsPropagation, translateLabel, translateSlideCounter, useA11yContext, useAnimation, useContainerRect, useController, useDelay, useDocumentContext, useEventCallback, useEvents, useForkRef, useKeyboardNavigation, useLayoutEffect, useLightboxDispatch, useLightboxProps, useLightboxState, useLoseFocus, useMotionPreference, useNavigationState, usePointerSwipe, usePreventWheelDefaults, useRTL, useRTLContext, useSensors, useThrottle, useTimeouts, useWheelSwipe, withPlugins };
+export type { A11yContextType, ComputeAnimation, ControllerContextType, DocumentContextProviderProps, DocumentContextType, Event, EventCallback, EventsContextType, IconButtonProps, ImageSlideProps, KeyboardEventType, LightboxDispatchContextType, LightboxPropsContextType, LightboxStateAction, LightboxStateContextType, LightboxStateProviderProps, NavigationButtonProps, PointerEventType, Publish, RTLContextProviderProps, RTLContextType, ReactEventType, RegisterSensors, SensorCallback, Subscribe, SubscribeSensors, SupportedEventType, TimeoutsContextType, Topic, Unsubscribe, UseSensors, WheelEventType };

package/dist/index.js

@@ -394,6 +394,13 @@ function LightboxStateProvider({ slides, index, children }) {
         React.createElement(LightboxStateContext.Provider, { value: context }, children)));
 }
 
+const RTLContext = React.createContext(null);
+const useRTLContext = makeUseContext("useRTLContext", "RTLContext", RTLContext);
+function RTLContextProvider({ isRTL, children }) {
+    const context = React.useMemo(() => ({ isRTL }), [isRTL]);
+    return React.createElement(RTLContext.Provider, { value: context }, children);
+}
+
 const TimeoutsContext = React.createContext(null);
 const useTimeouts = makeUseContext("useTimeouts", "TimeoutsContext", TimeoutsContext);
 function TimeoutsProvider({ children }) {
@@ -612,11 +619,7 @@ function useLoseFocus(focus, disabled = false) {
 }
 
 function useRTL() {
-    const [isRTL, setIsRTL] = React.useState(false);
-    useLayoutEffect(() => {
-        setIsRTL(window.getComputedStyle(window.document.documentElement).direction === "rtl");
-    }, []);
-    return isRTL;
+    return useRTLContext().isRTL;
 }
 
 function useSensors() {
@@ -734,9 +737,16 @@ function ImageSlide({ slide: image, offset, render, rect, imageFit, imageProps,
 
 const LightboxRoot = React.forwardRef(function LightboxRoot({ className, children, onFocus, onBlur, ...rest }, ref) {
     const nodeRef = React.useRef(null);
+    const [isRTL, setIsRTL] = React.useState(false);
     const { trackFocusWithin } = useA11yContext();
+    const detectRTL = React.useCallback((node) => {
+        if (node) {
+            setIsRTL(window.getComputedStyle(node).direction === "rtl");
+        }
+    }, []);
     return (React.createElement(DocumentContextProvider, { nodeRef: nodeRef },
-        React.createElement("div", { ref: useForkRef(ref, nodeRef), className: clsx(cssClass("root"), className), ...trackFocusWithin(onFocus, onBlur), ...rest }, children)));
+        React.createElement(RTLContextProvider, { isRTL: isRTL },
+            React.createElement("div", { ref: useForkRef(useForkRef(ref, nodeRef), detectRTL), className: clsx(cssClass("root"), className), ...trackFocusWithin(onFocus, onBlur), ...rest }, children))));
 });
 
 var SwipeState;
@@ -1451,7 +1461,7 @@ function setAttribute(element, attribute, value) {
         }
     };
 }
-function Portal({ children, animation, styles, className, on, portal, close, labels }) {
+function Portal({ portal: { root, container: { className: containerClassName, style: containerStyle, ...containerRest } = {} }, animation, styles, className, on, close, labels, children, }) {
     const [mounted, setMounted] = React.useState(false);
     const [visible, setVisible] = React.useState(false);
     const cleanup = React.useRef([]);
@@ -1514,7 +1524,7 @@ function Portal({ children, animation, styles, className, on, portal, close, lab
         }
     }, [handleEnter, handleCleanup]);
     return mounted
-        ? createPortal(React.createElement(LightboxRoot, { ref: handleRef, className: clsx(className, cssClass(cssPrefix$1()), cssClass(CLASS_NO_SCROLL_PADDING), visible && cssClass(cssPrefix$1("open"))), "aria-modal": true, role: "dialog", "aria-label": translateLabel(labels, "Lightbox"), style: {
+        ? createPortal(React.createElement(LightboxRoot, { ref: handleRef, className: clsx(className, containerClassName, cssClass(cssPrefix$1()), cssClass(CLASS_NO_SCROLL_PADDING), visible && cssClass(cssPrefix$1("open"))), "aria-modal": true, role: "dialog", "aria-label": translateLabel(labels, "Lightbox"), style: {
                 ...(animation.fade !== LightboxDefaultProps.animation.fade
                     ? { [cssVar("fade_animation_duration")]: `${animationDuration}ms` }
                     : null),
@@ -1522,11 +1532,12 @@ function Portal({ children, animation, styles, className, on, portal, close, lab
                     ? { [cssVar("fade_animation_timing_function")]: animation.easing.fade }
                     : null),
                 ...styles.root,
+                ...containerStyle,
             }, onFocus: (event) => {
                 if (!restoreFocus.current) {
                     restoreFocus.current = event.relatedTarget;
                 }
-            } }, children), portal.root || document.body)
+            }, ...containerRest }, children), root || document.body)
         : null;
 }
 const PortalModule = createModule(MODULE_PORTAL, Portal);
@@ -1600,4 +1611,4 @@ function Lightbox({ carousel, animation, render, toolbar, controller, noScroll,
                     React.createElement(A11yContextProvider, null, renderNode(createNode(RootModule, config), props)))))));
 }
 
-export { A11yContext, A11yContextProvider, ACTION_CLOSE, ACTION_NEXT, ACTION_PREV, ACTION_SWIPE, CLASS_FLEX_CENTER, CLASS_NO_SCROLL, CLASS_NO_SCROLL_PADDING, CLASS_SLIDE, CLASS_SLIDE_WRAPPER, Carousel, CarouselModule, CloseIcon, Controller, ControllerContext, ControllerModule, DocumentContext, DocumentContextProvider, ELEMENT_BUTTON, ELEMENT_ICON, EVENT_ON_KEY_DOWN, EVENT_ON_KEY_UP, EVENT_ON_POINTER_CANCEL, EVENT_ON_POINTER_DOWN, EVENT_ON_POINTER_LEAVE, EVENT_ON_POINTER_MOVE, EVENT_ON_POINTER_UP, EVENT_ON_WHEEL, ErrorIcon, EventsContext, EventsProvider, IMAGE_FIT_CONTAIN, IMAGE_FIT_COVER, IconButton, ImageSlide, Lightbox, LightboxDefaultProps, LightboxDispatchContext, LightboxPropsContext, LightboxPropsProvider, LightboxRoot, LightboxStateContext, LightboxStateProvider, LoadingIcon, MODULE_CAROUSEL, MODULE_CONTROLLER, MODULE_NAVIGATION, MODULE_NO_SCROLL, MODULE_PORTAL, MODULE_ROOT, MODULE_TOOLBAR, Navigation, NavigationButton, NavigationModule, NextIcon, NoScroll, NoScrollModule, Portal, PortalModule, PreviousIcon, Root, RootModule, SLIDE_STATUS_COMPLETE, SLIDE_STATUS_ERROR, SLIDE_STATUS_LOADING, SLIDE_STATUS_PLACEHOLDER, SwipeState, TimeoutsContext, TimeoutsProvider, Toolbar, ToolbarModule, UNKNOWN_ACTION_TYPE, VK_ARROW_LEFT, VK_ARROW_RIGHT, VK_ESCAPE, activeSlideStatus, addToolbarButton, calculatePreload, cleanup, clsx, composePrefix, computeSlideRect, createIcon, createIconDisabled, createModule, createNode, cssClass, cssVar, Lightbox as default, devicePixelRatio, getSlide, getSlideIfPresent, getSlideIndex, getSlideKey, hasSlides, hasWindow, isImageFitCover, isImageSlide, label, makeComposePrefix, makeInertWhen, makeUseContext, parseInt, parseLengthPercentage, reflow, round, setRef, stopNavigationEventsPropagation, translateLabel, translateSlideCounter, useA11yContext, useAnimation, useContainerRect, useController, useDelay, useDocumentContext, useEventCallback, useEvents, useForkRef, useKeyboardNavigation, useLayoutEffect, useLightboxDispatch, useLightboxProps, useLightboxState, useLoseFocus, useMotionPreference, useNavigationState, usePointerEvents, usePointerSwipe, usePreventWheelDefaults, useRTL, useSensors, useThrottle, useTimeouts, useWheelSwipe, withPlugins };
+export { A11yContext, A11yContextProvider, ACTION_CLOSE, ACTION_NEXT, ACTION_PREV, ACTION_SWIPE, CLASS_FLEX_CENTER, CLASS_NO_SCROLL, CLASS_NO_SCROLL_PADDING, CLASS_SLIDE, CLASS_SLIDE_WRAPPER, Carousel, CarouselModule, CloseIcon, Controller, ControllerContext, ControllerModule, DocumentContext, DocumentContextProvider, ELEMENT_BUTTON, ELEMENT_ICON, EVENT_ON_KEY_DOWN, EVENT_ON_KEY_UP, EVENT_ON_POINTER_CANCEL, EVENT_ON_POINTER_DOWN, EVENT_ON_POINTER_LEAVE, EVENT_ON_POINTER_MOVE, EVENT_ON_POINTER_UP, EVENT_ON_WHEEL, ErrorIcon, EventsContext, EventsProvider, IMAGE_FIT_CONTAIN, IMAGE_FIT_COVER, IconButton, ImageSlide, Lightbox, LightboxDefaultProps, LightboxDispatchContext, LightboxPropsContext, LightboxPropsProvider, LightboxRoot, LightboxStateContext, LightboxStateProvider, LoadingIcon, MODULE_CAROUSEL, MODULE_CONTROLLER, MODULE_NAVIGATION, MODULE_NO_SCROLL, MODULE_PORTAL, MODULE_ROOT, MODULE_TOOLBAR, Navigation, NavigationButton, NavigationModule, NextIcon, NoScroll, NoScrollModule, Portal, PortalModule, PreviousIcon, RTLContext, RTLContextProvider, Root, RootModule, SLIDE_STATUS_COMPLETE, SLIDE_STATUS_ERROR, SLIDE_STATUS_LOADING, SLIDE_STATUS_PLACEHOLDER, SwipeState, TimeoutsContext, TimeoutsProvider, Toolbar, ToolbarModule, UNKNOWN_ACTION_TYPE, VK_ARROW_LEFT, VK_ARROW_RIGHT, VK_ESCAPE, activeSlideStatus, addToolbarButton, calculatePreload, cleanup, clsx, composePrefix, computeSlideRect, createIcon, createIconDisabled, createModule, createNode, cssClass, cssVar, Lightbox as default, devicePixelRatio, getSlide, getSlideIfPresent, getSlideIndex, getSlideKey, hasSlides, hasWindow, isImageFitCover, isImageSlide, label, makeComposePrefix, makeInertWhen, makeUseContext, parseInt, parseLengthPercentage, reflow, round, setRef, stopNavigationEventsPropagation, translateLabel, translateSlideCounter, useA11yContext, useAnimation, useContainerRect, useController, useDelay, useDocumentContext, useEventCallback, useEvents, useForkRef, useKeyboardNavigation, useLayoutEffect, useLightboxDispatch, useLightboxProps, useLightboxState, useLoseFocus, useMotionPreference, useNavigationState, usePointerEvents, usePointerSwipe, usePreventWheelDefaults, useRTL, useRTLContext, useSensors, useThrottle, useTimeouts, useWheelSwipe, withPlugins };

package/dist/types.d.ts

@@ -264,6 +264,8 @@ interface ControllerRef {
 interface PortalSettings {
     /** portal mount point */
     root?: DocumentFragment | Element | null;
+    /** HTML attributes for the portal container */
+    container?: React.HTMLAttributes<HTMLDivElement>;
 }
 /** NoScroll module settings */
 interface NoScrollSettings {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yet-another-react-lightbox",
-  "version": "3.29.2",
+  "version": "3.30.0",
   "description": "Modern React lightbox component",
   "author": "Igor Danchenko",
   "license": "MIT",