@lumx/react 3.8.2-alpha.0 → 3.8.2-alpha.2

package/index.js

@@ -7845,7 +7845,7 @@ const CLASSNAME$v = getRootClassName(COMPONENT_NAME$y);
  * @param elementRef Element to observe
  * @return the size and a manual update callback
  */
-function useElementSizeDependentOfWindowSize(elementRef) {
+function useSizeOnWindowResize(elementRef) {
   const [size, setSize] = React.useState(null);
   const updateSize = React.useMemo(() => throttle(() => {
     var _elementRef$current;
@@ -8109,7 +8109,7 @@ const ImageSlide = /*#__PURE__*/React.memo(props => {
 
   // Get scroll area size
   const scrollAreaRef = React.useRef(null);
-  const [scrollAreaSize, updateSize] = useElementSizeDependentOfWindowSize(scrollAreaRef);
+  const [scrollAreaSize, updateSize] = useSizeOnWindowResize(scrollAreaRef);
   React.useEffect(() => {
     // Update size when active
     if (isActive) updateSize();
@@ -8519,6 +8519,14 @@ const Inner = /*#__PURE__*/forwardRef((props, ref) => {
   const footerRef = React.useRef(null);
   const imageRef = React.useRef(null);
   const clickAwayChildrenRefs = React.useRef([imageRef, footerRef]);
+  const onClickAway = React.useCallback(evt => {
+    const targetElement = evt.target;
+    if (!(targetElement instanceof HTMLElement) || !(evt instanceof MouseEvent)) return;
+
+    // Skip click away if clicking on the scrollbar
+    if (targetElement.clientWidth < evt.clientX || targetElement.clientHeight < evt.clientY) return;
+    onClose === null || onClose === void 0 ? void 0 : onClose();
+  }, [onClose]);
   return /*#__PURE__*/React.createElement(Lightbox, _extends({
     ref: ref,
     className: classnames(className, CLASSNAME$v),
@@ -8529,7 +8537,7 @@ const Inner = /*#__PURE__*/forwardRef((props, ref) => {
     focusElement: currentPaginationItemRef
   }, forwardedProps), /*#__PURE__*/React.createElement(ClickAwayProvider, {
     childrenRefs: clickAwayChildrenRefs,
-    callback: onClose
+    callback: onClickAway
   }, /*#__PURE__*/React.createElement(ImageSlideshow, {
     activeImageIndex: activeImageIndex,
     slideGroupLabel: slideGroupLabel,
@@ -8538,7 +8546,7 @@ const Inner = /*#__PURE__*/forwardRef((props, ref) => {
     zoomInButtonProps: zoomInButtonProps,
     zoomOutButtonProps: zoomOutButtonProps,
     footerRef: footerRef,
-    activeImageRef: mergeRefs(propImageRef, imageRef),
+    activeImageRef: useMergeRefs(propImageRef, imageRef),
     currentPaginationItemRef: currentPaginationItemRef
   })));
 });