@lumx/react 3.6.4 → 3.6.5-alpha.0

package/index.js

@@ -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) {
@@ -1550,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: "",
@@ -12861,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 */
@@ -13089,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, {