@lumx/react 3.6.5-alpha.3 → 3.6.5-alpha.4

package/index.d.ts

@@ -155,6 +155,11 @@ interface AutocompleteProps extends GenericProps, HasTheme {
      * @see {@link DropdownProps#closeOnEscape}
      */
     closeOnEscape?: boolean;
+    /**
+     * Whether the focus should go back on the anchor when dropdown closes and focus is within.
+     * @see {@link DropdownProps#focusAnchorOnClose}
+     */
+    focusAnchorOnClose?: DropdownProps['focusAnchorOnClose'];
     /**
      * The function called on blur.
      * @see {@link TextFieldProps#onBlur}

package/index.js

@@ -839,7 +839,7 @@ const useMergeRefs = function () {
   refs);
 };
 
-const _excluded$2 = ["anchorToInput", "children", "chips", "className", "closeOnClick", "closeOnClickAway", "closeOnEscape", "disabled", "error", "fitToAnchorWidth", "hasError", "helper", "icon", "inputRef", "clearButtonProps", "isDisabled", "isRequired", "isOpen", "isValid", "label", "name", "offset", "onBlur", "onChange", "onClose", "onFocus", "onInfiniteScroll", "placeholder", "placement", "shouldFocusOnClose", "theme", "value", "textFieldProps"];
+const _excluded$2 = ["anchorToInput", "children", "chips", "className", "closeOnClick", "closeOnClickAway", "closeOnEscape", "disabled", "error", "fitToAnchorWidth", "hasError", "helper", "icon", "inputRef", "clearButtonProps", "isDisabled", "isRequired", "isOpen", "isValid", "label", "name", "offset", "onBlur", "onChange", "onClose", "onFocus", "onInfiniteScroll", "placeholder", "placement", "shouldFocusOnClose", "theme", "value", "textFieldProps", "focusAnchorOnClose"];
 
 /**
  * Defines the props of the component.
@@ -907,7 +907,8 @@ const Autocomplete = /*#__PURE__*/forwardRef((props, ref) => {
       shouldFocusOnClose,
       theme,
       value,
-      textFieldProps = {}
+      textFieldProps = {},
+      focusAnchorOnClose
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$2);
   const inputAnchorRef = useRef(null);
@@ -944,6 +945,7 @@ const Autocomplete = /*#__PURE__*/forwardRef((props, ref) => {
     closeOnClick: closeOnClick,
     closeOnClickAway: closeOnClickAway,
     closeOnEscape: closeOnEscape,
+    focusAnchorOnClose: focusAnchorOnClose,
     fitToAnchorWidth: fitToAnchorWidth,
     isOpen: isOpen,
     offset: offset,
@@ -4058,52 +4060,65 @@ const skipRender = (predicate, Component) => {
   return Wrapper;
 };
 
-/** Small helper component using useLayoutEffect to trigger a callback on before unmount. */
-const OnUnmount = _ref => {
+/**
+ * Helper component using useLayoutEffect to trigger a callback on before unmount.
+ *
+ * The callback must be wrapped in a React ref to avoid updating the `useLayoutEffect` before the un-mount
+ */
+const OnBeforeUnmount = _ref => {
   let {
-    onBeforeUnmount
+    callback
   } = _ref;
-  useLayoutEffect(() => onBeforeUnmount, [onBeforeUnmount]);
+  useLayoutEffect(() => {
+    return () => {
+      var _callback$current;
+      // On unmount
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      (_callback$current = callback.current) === null || _callback$current === void 0 ? void 0 : _callback$current.call(callback);
+    };
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  []);
   return null;
 };
 
-/**
- * Provides a sentinel to inject the React tree that triggers the callback on before unmount.
- */
-function useBeforeUnmountSentinel(onBeforeUnmount) {
-  return React.useMemo(() => {
-    if (!onBeforeUnmount) return undefined;
-    return /*#__PURE__*/React.createElement(OnUnmount, {
-      onBeforeUnmount: onBeforeUnmount
-    });
-  }, [onBeforeUnmount]);
-}
-
 /**
  * Provides an unmount sentinel to inject in the popover to detect when it closes and restore the focus to the
  * anchor if needed.
  */
-function useRestoreFocusOnClose(props, popoverElement) {
-  const onBeforeUnmount = React.useMemo(() => {
-    if (!popoverElement || !props.focusAnchorOnClose) return undefined;
-    return () => {
-      var _props$parentElement;
+function useRestoreFocusOnClose(_ref, popoverElement) {
+  let {
+    focusAnchorOnClose,
+    anchorRef,
+    parentElement
+  } = _ref;
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  const onBeforeUnmountRef = React.useRef(() => {});
+  const anchor = anchorRef.current;
+  const elementToFocus =
+  // Provided parent element
+  (parentElement === null || parentElement === void 0 ? void 0 : parentElement.current) || (
+  // Or first focusable element in anchor
+  anchor ? getFirstAndLastFocusable(anchor).first : undefined) ||
+  // Fallback to anchor
+  anchor;
+  React.useEffect(() => {
+    if (!popoverElement || !focusAnchorOnClose || !elementToFocus) return;
+    onBeforeUnmountRef.current = () => {
       const isFocusWithin = popoverElement === null || popoverElement === void 0 ? void 0 : popoverElement.contains(document.activeElement);
       if (!isFocusWithin) return;
-      const anchor = props.anchorRef.current;
-      const elementToFocus =
-      // Provided parent element
-      ((_props$parentElement = props.parentElement) === null || _props$parentElement === void 0 ? void 0 : _props$parentElement.current) || (
-      // Or first focusable element in anchor
-      anchor ? getFirstAndLastFocusable(anchor).first : undefined) ||
-      // Fallback to anchor
-      anchor;
-      elementToFocus === null || elementToFocus === void 0 ? void 0 : elementToFocus.focus({
-        preventScroll: true
-      });
+
+      // Focus on next render
+      setTimeout(() => {
+        elementToFocus.focus({
+          preventScroll: true
+        });
+      }, 0);
     };
-  }, [popoverElement, props.anchorRef, props.focusAnchorOnClose, props.parentElement]);
-  return useBeforeUnmountSentinel(onBeforeUnmount);
+  }, [anchor, elementToFocus, focusAnchorOnClose, popoverElement]);
+  return /*#__PURE__*/React.createElement(OnBeforeUnmount, {
+    callback: onBeforeUnmountRef
+  });
 }
 
 /**
@@ -12851,7 +12866,7 @@ Toolbar.defaultProps = DEFAULT_PROPS$10;
 /**
  * Add ref and ARIA attribute(s) in tooltip children or wrapped children.
  * Button, IconButton, Icon and React HTML elements don't need to be wrapped but any other kind of children (array, fragment, custom components)
- * will be wrapped.
+ * will be wrapped in a <span>.
  *
  * @param  children         Original tooltip anchor.
  * @param  setAnchorElement Set tooltip anchor element.
@@ -12861,30 +12876,28 @@ Toolbar.defaultProps = DEFAULT_PROPS$10;
  * @return tooltip anchor.
  */
 const useInjectTooltipRef = (children, setAnchorElement, isOpen, id, label) => {
-  const element = /*#__PURE__*/React.isValidElement(children) ? children : null;
-  const ref = useMergeRefs(element === null || element === void 0 ? void 0 : element.ref, setAnchorElement);
+  // Only add description when open
+  const describedBy = isOpen ? id : undefined;
   return useMemo(() => {
-    var _element$props, _element$props2;
     // Non-disabled element
-    if (element && ((_element$props = element.props) === null || _element$props === void 0 ? void 0 : _element$props.disabled) !== true && ((_element$props2 = element.props) === null || _element$props2 === void 0 ? void 0 : _element$props2.isDisabled) !== true) {
-      const props = _objectSpread2(_objectSpread2({}, element.props), {}, {
+    if ( /*#__PURE__*/React.isValidElement(children) && children.props.disabled !== true && children.props.isDisabled !== true) {
+      const ref = mergeRefs(children.ref, setAnchorElement);
+      const props = _objectSpread2(_objectSpread2({}, children.props), {}, {
         ref
       });
 
       // Add current tooltip to the aria-describedby if the label is not already present
-      if (label !== props['aria-label']) {
-        props['aria-describedby'] = [props['aria-describedby'], id].filter(Boolean).join(' ');
+      if (label !== props['aria-label'] && describedBy) {
+        props['aria-describedby'] = [props['aria-describedby'], describedBy].filter(Boolean).join(' ');
       }
-      return /*#__PURE__*/cloneElement(element, props);
+      return /*#__PURE__*/cloneElement(children, props);
     }
-
-    // Else add a wrapper around the children
     return /*#__PURE__*/React.createElement("div", {
       className: "lumx-tooltip-anchor-wrapper",
-      ref: ref,
-      "aria-describedby": isOpen ? id : undefined
+      ref: setAnchorElement,
+      "aria-describedby": describedBy
     }, children);
-  }, [element, children, isOpen, id, ref, label]);
+  }, [children, setAnchorElement, describedBy, label]);
 };
 
 /** Return true if the browser does not support pointer hover */
@@ -12900,7 +12913,7 @@ const isFocusVisible = element => {
     return element === null || element === void 0 ? void 0 : (_element$matches = element.matches) === null || _element$matches === void 0 ? void 0 : _element$matches.call(element, ':focus-visible, [data-focus-visible-added]');
   } catch (_ignored) {
     // Can fail on non browser env
-    return false;
+    return true;
   }
 };