@lumx/react 3.6.3 → 3.6.5-alpha.0

package/index.d.ts

@@ -1403,7 +1403,7 @@ interface InputHelperProps extends GenericProps, HasTheme {
  * @param  ref   Component ref.
  * @return React element.
  */
-declare const InputHelper: Comp<InputHelperProps, HTMLSpanElement>;
+declare const InputHelper: Comp<InputHelperProps, HTMLParagraphElement>;
 
 /**
  * Defines the props of the component.

package/index.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, useState, useEffect, useRef, useMemo, useCallback, Children, isValidElement, cloneElement, useLayoutEffect, Fragment as Fragment$1, createContext, useContext, useReducer } from 'react';
+import React, { forwardRef, useState, useEffect, useMemo, useRef, useCallback, Children, isValidElement, cloneElement, useLayoutEffect, Fragment as Fragment$1, createContext, useContext, useReducer } from 'react';
 import kebabCase from 'lodash/kebabCase';
 import isBoolean from 'lodash/isBoolean';
 import isEmpty from 'lodash/isEmpty';
@@ -22,7 +22,6 @@ import take from 'lodash/take';
 import uniqueId from 'lodash/uniqueId';
 import range from 'lodash/range';
 import chunk from 'lodash/chunk';
-import isUndefined from 'lodash/isUndefined';
 import set from 'lodash/set';
 
 function ownKeys(e, r) {
@@ -828,6 +827,18 @@ function mergeRefs() {
   });
 }
 
+/**
+ * Same as `mergeRefs` but memoized
+ */
+const useMergeRefs = function () {
+  for (var _len2 = arguments.length, refs = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+    refs[_key2] = arguments[_key2];
+  }
+  return useMemo(() => mergeRefs(...refs),
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  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"];
 
 /**
@@ -1538,9 +1549,6 @@ const IconButton = /*#__PURE__*/forwardRef((props, ref) => {
   }, forwardedProps), {
     "aria-label": label,
     variant: "icon"
-    // Remove the aria-describedby added by the tooltip when it is the same text as the aria-label
-    ,
-    "aria-describedby": (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.label) && (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.label) === label && undefined
   }), image ? /*#__PURE__*/React.createElement("img", {
     // no need to set alt as an aria-label is already set on the button
     alt: "",
@@ -4033,31 +4041,6 @@ const List = Object.assign(InternalList, {
   useKeyboardListNavigation
 });
 
-/**
- * Hook that allows to control when there is a focus event within a given element, meaning
- * that any element within the given target will trigger the focus in and focus out events.
- * @param options - UseFocusWithinOptions
- */
-const useFocusWithin = _ref => {
-  let {
-    element,
-    onFocusIn,
-    onFocusOut
-  } = _ref;
-  useEffect(() => {
-    if (element) {
-      element.addEventListener('focusin', onFocusIn);
-      element.addEventListener('focusout', onFocusOut);
-    }
-    return () => {
-      if (element) {
-        element.removeEventListener('focusin', onFocusIn);
-        element.removeEventListener('focusout', onFocusOut);
-      }
-    };
-  }, [onFocusIn, element, onFocusOut]);
-};
-
 /**
  * HOC component wrapping a component to skip render if predicate return falsy
  */
@@ -4075,6 +4058,54 @@ const skipRender = (predicate, Component) => {
   return Wrapper;
 };
 
+/** Small helper component using useLayoutEffect to trigger a callback on before unmount. */
+const OnUnmount = _ref => {
+  let {
+    onBeforeUnmount
+  } = _ref;
+  useLayoutEffect(() => onBeforeUnmount, [onBeforeUnmount]);
+  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;
+      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
+      });
+    };
+  }, [popoverElement, props.anchorRef, props.focusAnchorOnClose, props.parentElement]);
+  return useBeforeUnmountSentinel(onBeforeUnmount);
+}
+
 /**
  * Simple ponyfill for Object.fromEntries
  */
@@ -6409,6 +6440,7 @@ const CLASSNAME$i = getRootClassName(COMPONENT_NAME$l);
 const DEFAULT_PROPS$g = {
   elevation: 3,
   placement: Placement.AUTO,
+  focusAnchorOnClose: true,
   usePortal: true,
   zIndex: 9999
 };
@@ -6434,7 +6466,7 @@ const _InnerPopover = /*#__PURE__*/forwardRef((props, ref) => {
       onClose,
       parentElement,
       usePortal,
-      focusAnchorOnClose = true,
+      focusAnchorOnClose,
       withFocusTrap,
       boundaryRef,
       fitToAnchorWidth,
@@ -6446,8 +6478,7 @@ const _InnerPopover = /*#__PURE__*/forwardRef((props, ref) => {
       zIndex
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$m);
-  const clickAwayRef = useRef(null);
-  const contentRef = useRef(null);
+  const popoverRef = useRef(null);
   const {
     styles,
     attributes,
@@ -6468,58 +6499,20 @@ const _InnerPopover = /*#__PURE__*/forwardRef((props, ref) => {
     style,
     zIndex
   });
-
-  /**
-   * Track whether the focus is currently set in the
-   * popover.
-   * */
-  const isFocusedWithin = useRef(false);
-  useFocusWithin({
-    element: popperElement || null,
-    onFocusIn: () => {
-      isFocusedWithin.current = true;
-    },
-    onFocusOut: () => {
-      isFocusedWithin.current = false;
-    }
-  });
-
-  /** Action on close */
-  const handleClose = useCallback(() => {
-    if (!onClose) {
-      return;
-    }
-
-    /**
-     * If the focus is currently within the popover
-     * when the popover closes, reset the focus back to the anchor element
-     * unless specifically requested not to.
-     */
-    if (isFocusedWithin.current && focusAnchorOnClose) {
-      var _elementToFocus;
-      let elementToFocus = parentElement === null || parentElement === void 0 ? void 0 : parentElement.current;
-      if (!elementToFocus && anchorRef !== null && anchorRef !== void 0 && anchorRef.current) {
-        // Focus the first focusable element in anchor.
-        elementToFocus = getFirstAndLastFocusable(anchorRef.current).first;
-      }
-      if (!elementToFocus) {
-        // Fallback on the anchor element.
-        elementToFocus = anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current;
-      }
-      (_elementToFocus = elementToFocus) === null || _elementToFocus === void 0 ? void 0 : _elementToFocus.focus({
-        preventScroll: true
-      });
-    }
-    onClose();
-  }, [anchorRef, focusAnchorOnClose, onClose, parentElement]);
-  useCallbackOnEscape(handleClose, isOpen && closeOnEscape);
+  const unmountSentinel = useRestoreFocusOnClose({
+    focusAnchorOnClose,
+    anchorRef,
+    parentElement
+  }, popperElement);
+  useCallbackOnEscape(onClose, isOpen && closeOnEscape);
 
   /** Only set focus within if the focus trap is disabled as they interfere with one another. */
   useFocus(focusElement === null || focusElement === void 0 ? void 0 : focusElement.current, !withFocusTrap && isOpen && isPositioned);
-  useFocusTrap(withFocusTrap && isOpen && (contentRef === null || contentRef === void 0 ? void 0 : contentRef.current), focusElement === null || focusElement === void 0 ? void 0 : focusElement.current);
-  const clickAwayRefs = useRef([clickAwayRef, anchorRef]);
+  useFocusTrap(withFocusTrap && isOpen && (popoverRef === null || popoverRef === void 0 ? void 0 : popoverRef.current), focusElement === null || focusElement === void 0 ? void 0 : focusElement.current);
+  const clickAwayRefs = useRef([popoverRef, anchorRef]);
+  const mergedRefs = useMergeRefs(setPopperElement, ref, popoverRef);
   return isOpen ? renderPopover( /*#__PURE__*/React.createElement(Component, _extends({}, forwardedProps, {
-    ref: mergeRefs(setPopperElement, ref, clickAwayRef, contentRef),
+    ref: mergedRefs,
     className: classnames(className, handleBasicClasses({
       prefix: CLASSNAME$i,
       theme,
@@ -6527,8 +6520,8 @@ const _InnerPopover = /*#__PURE__*/forwardRef((props, ref) => {
       position
     })),
     style: styles.popover
-  }, attributes.popper), /*#__PURE__*/React.createElement(ClickAwayProvider, {
-    callback: closeOnClickAway && handleClose,
+  }, attributes.popper), unmountSentinel, /*#__PURE__*/React.createElement(ClickAwayProvider, {
+    callback: closeOnClickAway && onClose,
     childrenRefs: clickAwayRefs
   }, hasArrow && /*#__PURE__*/React.createElement("div", {
     ref: setArrowElement,
@@ -7699,7 +7692,7 @@ const InputHelper = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     color
   } = INPUT_HELPER_CONFIGURATION[kind] || {};
-  return /*#__PURE__*/React.createElement("span", _extends({
+  return /*#__PURE__*/React.createElement("p", _extends({
     ref: ref
   }, forwardedProps, {
     className: classnames(className, handleBasicClasses({
@@ -10879,6 +10872,31 @@ const useSlideshowControls = _ref => {
   };
 };
 
+/**
+ * Hook that allows to control when there is a focus event within a given element, meaning
+ * that any element within the given target will trigger the focus in and focus out events.
+ * @param options - UseFocusWithinOptions
+ */
+const useFocusWithin = _ref => {
+  let {
+    element,
+    onFocusIn,
+    onFocusOut
+  } = _ref;
+  useEffect(() => {
+    if (element) {
+      element.addEventListener('focusin', onFocusIn);
+      element.addEventListener('focusout', onFocusOut);
+    }
+    return () => {
+      if (element) {
+        element.removeEventListener('focusin', onFocusIn);
+        element.removeEventListener('focusout', onFocusOut);
+      }
+    };
+  }, [onFocusIn, element, onFocusOut]);
+};
+
 /**
  * Classname set on elements whose focus was blocked.
  * This is to easily find elements that have been tempered with,
@@ -12839,26 +12857,34 @@ Toolbar.defaultProps = DEFAULT_PROPS$10;
  * @param  setAnchorElement Set tooltip anchor element.
  * @param  isOpen           Whether the tooltip is open or not.
  * @param  id               Tooltip id.
+ * @param  label            Tooltip label.
  * @return tooltip anchor.
  */
-const useInjectTooltipRef = (children, setAnchorElement, isOpen, id) => {
+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);
   return useMemo(() => {
-    // Let the children remove the aria-describedby attribute by setting it to undefined
-    const childrenHasAriaProp = get(children, 'props') ? 'aria-describedby' in get(children, 'props') && isUndefined(get(children, 'props.aria-describedby')) : false;
-    const ariaProps = {
-      'aria-describedby': isOpen && !childrenHasAriaProp ? id : undefined
-    };
-    if (children && get(children, '$$typeof') && get(children, 'props.disabled') !== true && get(children, 'props.isDisabled') !== true) {
-      const element = children;
-      return /*#__PURE__*/cloneElement(element, _objectSpread2(_objectSpread2(_objectSpread2({}, element.props), ariaProps), {}, {
-        ref: mergeRefs(element.ref, setAnchorElement)
-      }));
+    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), {}, {
+        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(' ');
+      }
+      return /*#__PURE__*/cloneElement(element, props);
     }
-    return /*#__PURE__*/React.createElement("div", _extends({
+
+    // Else add a wrapper around the children
+    return /*#__PURE__*/React.createElement("div", {
       className: "lumx-tooltip-anchor-wrapper",
-      ref: setAnchorElement
-    }, ariaProps), children);
-  }, [isOpen, id, children, setAnchorElement]);
+      ref: ref,
+      "aria-describedby": isOpen ? id : undefined
+    }, children);
+  }, [element, children, setAnchorElement, isOpen, id, ref, label]);
 };
 
 /** Return true if the browser does not support pointer hover */
@@ -12867,6 +12893,12 @@ const browserDoesNotSupportHover = () => {
   return !!((_window$matchMedia = (_window = window).matchMedia) !== null && _window$matchMedia !== void 0 && _window$matchMedia.call(_window, '(hover: none)').matches);
 };
 
+/** Check if the focus is visible on the given element */
+const isFocusVisible = element => {
+  var _element$matches;
+  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]');
+};
+
 /**
  * Hook controlling tooltip visibility using mouse hover the anchor and delay.
  *
@@ -12959,8 +12991,12 @@ function useTooltipOpen(delay, anchorElement) {
 
     // Events always applied no matter the browser:.
     events.push(
-    // Open on focus.
-    [anchorElement, 'focusin', open],
+    // Open on focus (only if focus is visible).
+    [anchorElement, 'focusin', e => {
+      // Skip if focus is not visible
+      if (!isFocusVisible(e.target)) return;
+      open();
+    }],
     // Close on lost focus.
     [anchorElement, 'focusout', closeImmediately]);
 
@@ -13057,7 +13093,7 @@ const Tooltip = /*#__PURE__*/forwardRef((props, ref) => {
     onPopperMount
   } = useTooltipOpen(delay, anchorElement);
   const isOpen = isActivated || forceOpen;
-  const wrappedChildren = useInjectTooltipRef(children, setAnchorElement, isOpen, id);
+  const wrappedChildren = useInjectTooltipRef(children, setAnchorElement, isOpen, id, label);
   return /*#__PURE__*/React.createElement(React.Fragment, null, wrappedChildren, isOpen && /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement("div", _extends({
     ref: mergeRefs(ref, setPopperElement, onPopperMount)
   }, forwardedProps, {