@lumx/react 3.9.2 → 3.9.3

package/index.js

@@ -389,6 +389,11 @@ const DOCUMENT = typeof document !== 'undefined' ? document : undefined;
  */
 const IS_BROWSER = typeof navigator !== 'undefined' && !navigator.userAgent.includes('jsdom');
 
+/**
+ * Visually hidden a11y utility class name
+ */
+const VISUALLY_HIDDEN = 'visually-hidden';
+
 const _excluded$1s = ["prefix"];
 
 /**
@@ -2422,7 +2427,7 @@ const DatePickerControlled = /*#__PURE__*/forwardRef((props, ref) => {
     })),
     label: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("span", {
       "aria-live": labelAriaLive,
-      className: onMonthChange ? 'visually-hidden' : '',
+      className: onMonthChange ? VISUALLY_HIDDEN : '',
       dir: "auto"
     }, monthYear), onMonthChange && /*#__PURE__*/React__default.createElement(FlexBox, {
       className: `${CLASSNAME$17}__month`,
@@ -2491,7 +2496,7 @@ const DatePickerControlled = /*#__PURE__*/forwardRef((props, ref) => {
       }, /*#__PURE__*/React__default.createElement("span", {
         "aria-hidden": true
       }, formatDayNumber(locale, date)), /*#__PURE__*/React__default.createElement("span", {
-        className: "visually-hidden"
+        className: VISUALLY_HIDDEN
       }, date.toLocaleDateString(locale, {
         day: 'numeric',
         month: 'long',
@@ -8356,9 +8361,21 @@ function unref(maybeElement) {
   return maybeElement === null || maybeElement === void 0 ? void 0 : maybeElement.current;
 }
 
-function setTransitionViewName(elementRef, name) {
-  const element = unref(elementRef);
-  if (element) element.style.viewTransitionName = name;
+function setupViewTransitionName(elementRef, name) {
+  let originalName = null;
+  return {
+    set() {
+      const element = unref(elementRef);
+      if (!element) return;
+      originalName = element.style.viewTransitionName;
+      element.style.viewTransitionName = name;
+    },
+    unset() {
+      const element = unref(elementRef);
+      if (!element || originalName === null) return;
+      element.style.viewTransitionName = originalName;
+    }
+  };
 }
 
 /**
@@ -8385,21 +8402,18 @@ async function startViewTransition(_ref) {
     return;
   }
 
-  // Set transition name on source element
-  setTransitionViewName(viewTransitionName.source, viewTransitionName.name);
+  // Setup set/unset transition name on source & target
+  const sourceTransitionName = setupViewTransitionName(viewTransitionName.source, viewTransitionName.name);
+  const targetTransitionName = setupViewTransitionName(viewTransitionName.target, viewTransitionName.name);
+  sourceTransitionName.set();
 
   // Start view transition, apply changes & flush to DOM
   await start(() => {
-    // Un-set transition name on source element
-    setTransitionViewName(viewTransitionName.source, null);
+    sourceTransitionName.unset();
     flushSync(changes);
-
-    // Set transition name on target element
-    setTransitionViewName(viewTransitionName.target, viewTransitionName.name);
+    targetTransitionName.set();
   }).updateCallbackDone;
-
-  // Un-set transition name on target element
-  setTransitionViewName(viewTransitionName.target, null);
+  targetTransitionName.unset();
 }
 
 /** Find image in element including the element */
@@ -8491,9 +8505,9 @@ function useImageLightbox(props) {
             },
             isOpen: true,
             onClose: () => {
-              var _prevProps$onClose;
+              var _propsRef$current2, _propsRef$current2$on;
               close();
-              prevProps === null || prevProps === void 0 ? void 0 : (_prevProps$onClose = prevProps.onClose) === null || _prevProps$onClose === void 0 ? void 0 : _prevProps$onClose.call(prevProps);
+              (_propsRef$current2 = propsRef.current) === null || _propsRef$current2 === void 0 ? void 0 : (_propsRef$current2$on = _propsRef$current2.onClose) === null || _propsRef$current2$on === void 0 ? void 0 : _propsRef$current2$on.call(_propsRef$current2);
             },
             images,
             activeImageIndex: activeImageIndex || 0
@@ -8564,7 +8578,10 @@ const Inner = /*#__PURE__*/forwardRef((props, ref) => {
     onClose: onClose,
     closeButtonProps: closeButtonProps,
     focusElement: currentPaginationItemRef
-  }, forwardedProps), /*#__PURE__*/React__default.createElement(ClickAwayProvider, {
+  }, forwardedProps, {
+    // Disable the close on click away as we want a custom one here
+    preventAutoClose: true
+  }), /*#__PURE__*/React__default.createElement(ClickAwayProvider, {
     childrenRefs: clickAwayChildrenRefs,
     callback: onClickAway
   }, /*#__PURE__*/React__default.createElement(ImageSlideshow, {
@@ -14195,6 +14212,7 @@ const Tooltip = /*#__PURE__*/forwardRef((props, ref) => {
   } = useTooltipOpen(delay, anchorElement);
   const isOpen = (isActivated || forceOpen) && !!label;
   const isMounted = !!label && (isOpen || closeMode === 'hide');
+  const isHidden = !isOpen && closeMode === 'hide';
   const wrappedChildren = useInjectTooltipRef({
     children,
     setAnchorElement,
@@ -14218,9 +14236,8 @@ const Tooltip = /*#__PURE__*/forwardRef((props, ref) => {
     "aria-label": label || '',
     className: classnames(className, handleBasicClasses({
       prefix: CLASSNAME$2,
-      position,
-      hidden: !isOpen && closeMode === 'hide'
-    })),
+      position
+    }), isHidden && VISUALLY_HIDDEN),
     style: _objectSpread2(_objectSpread2({}, styles.popper), {}, {
       zIndex
     })