@lumx/react 3.12.1-alpha.7 → 3.13.1-alpha.0

package/index.d.ts

@@ -1926,11 +1926,17 @@ interface LinkProps extends GenericProps {
     href?: HTMLAnchorProps['href'];
     /** Whether the component is disabled or not. */
     isDisabled?: boolean;
-    /** Left icon (SVG path). */
+    /**
+     * Left icon (SVG path).
+     * @deprecated Instead, simply nest `<Icon />` in the children
+     */
     leftIcon?: string;
     /** Custom react component for the link (can be used to inject react router Link). */
     linkAs?: 'a' | any;
-    /** Right icon (SVG path). */
+    /**
+     * Right icon (SVG path).
+     * @deprecated Instead, simply nest `<Icon />` in the children
+     */
     rightIcon?: string;
     /** Link target. */
     target?: HTMLAnchorProps['target'];

package/index.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import React__default, { useState, useEffect, useMemo, useRef, Children, isValidElement, cloneElement, useLayoutEffect, useCallback, Fragment, createContext, useContext, useReducer } from 'react';
+import React__default, { useState, useEffect, useMemo, useRef, Children, isValidElement, cloneElement, useLayoutEffect, useCallback, createContext, useContext, useReducer } from 'react';
 import isBoolean from 'lodash/isBoolean';
 import isEmpty from 'lodash/isEmpty';
 import kebabCase from 'lodash/kebabCase';
@@ -7457,6 +7457,20 @@ const useOverflowTooltipLabel = () => {
   };
 };
 
+/** Force wrap spaces around icons to make sure they are never stuck against text. */
+function wrapChildrenIconWithSpaces(children) {
+  if (children === null || children === undefined) return undefined;
+  return Children.toArray(children).flatMap(child => {
+    if (isComponentType(Icon)(child)) {
+      return [' ', child, ' '];
+    }
+    if (/*#__PURE__*/React__default.isValidElement(child) && child.props && typeof child.props === 'object' && 'children' in child.props) {
+      return /*#__PURE__*/React__default.cloneElement(child, undefined, wrapChildrenIconWithSpaces(child.props.children));
+    }
+    return child;
+  });
+}
+
 const _excluded$_ = ["as", "children", "className", "color", "colorVariant", "noWrap", "typography", "truncate", "whiteSpace", "style"];
 
 /**
@@ -7530,15 +7544,7 @@ const Text = forwardRef((props, ref) => {
     }), typographyClass, colorClass, noWrap && `${CLASSNAME$V}--no-wrap`),
     title: tooltipLabel,
     style: _objectSpread2(_objectSpread2(_objectSpread2({}, truncateLinesStyle), whiteSpaceStyle), style)
-  }, forwardedProps), children && Children.toArray(children).map((child, index) => {
-    // Force wrap spaces around icons to make sure they are never stuck against text.
-    if (isComponent(Icon)(child)) {
-      return /*#__PURE__*/React__default.createElement(Fragment, {
-        key: child.key || index
-      }, " ", child, " ");
-    }
-    return child;
-  }));
+  }, forwardedProps), wrapChildrenIconWithSpaces(children));
 });
 Text.displayName = COMPONENT_NAME$V;
 Text.className = CLASSNAME$V;
@@ -9083,31 +9089,6 @@ const COMPONENT_NAME$K = 'Link';
  * Component default class name and class prefix.
  */
 const CLASSNAME$K = getRootClassName(COMPONENT_NAME$K);
-const getIconSize = typography => {
-  switch (typography) {
-    case Typography.display1:
-      return Size.m;
-    case Typography.headline:
-    case Typography.title:
-    case Typography.custom.title1:
-    case Typography.custom.title2:
-    case Typography.custom.title3:
-    case Typography.custom.title4:
-    case Typography.custom.title5:
-    case Typography.custom.title6:
-    case Typography.body2:
-    case Typography.subtitle2:
-      return Size.s;
-    case Typography.body1:
-    case Typography.subtitle1:
-      return Size.xs;
-    case Typography.caption:
-    case Typography.overline:
-      return Size.xxs;
-    default:
-      return Size.s;
-  }
-};
 
 /**
  * Link component.
@@ -9132,49 +9113,34 @@ const Link = forwardRef((props, ref) => {
       typography
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$O);
-  const renderedChildren = useMemo(() => /*#__PURE__*/React__default.createElement(React__default.Fragment, null, leftIcon && !isEmpty(leftIcon) && /*#__PURE__*/React__default.createElement(Icon, {
-    icon: leftIcon,
-    className: `${CLASSNAME$K}__left-icon`,
-    size: getIconSize(typography)
-  }), children && /*#__PURE__*/React__default.createElement("span", {
-    className: classNames(`${CLASSNAME$K}__content`, {
-      [`lumx-typography-${typography}`]: typography
-    })
-  }, children), rightIcon && !isEmpty(rightIcon) && /*#__PURE__*/React__default.createElement(Icon, {
-    icon: rightIcon,
-    className: `${CLASSNAME$K}__right-icon`,
-    size: getIconSize(typography)
-  })), [leftIcon, typography, children, rightIcon]);
-
-  /**
-   * If there is no linkAs prop and no href, we returned a <button> instead of a <a>.
-   * If the component is disabled, we also returned a <button> since disabled is not compatible with <a>.
-   */
-  if (!linkAs && isEmpty(href) || isDisabled) {
-    return /*#__PURE__*/React__default.createElement("button", _extends({
-      type: "button"
-    }, forwardedProps, {
-      ref: ref,
-      disabled: isDisabled,
-      className: classNames(className, handleBasicClasses({
-        prefix: CLASSNAME$K,
-        color,
-        colorVariant
-      }))
-    }), renderedChildren);
+  const isLink = linkAs || href;
+  const Component = isLink && !isDisabled ? linkAs || 'a' : 'button';
+  const baseProps = {};
+  if (Component === 'button') {
+    baseProps.type = 'button';
+    baseProps.disabled = isDisabled;
+  } else if (isLink) {
+    baseProps.href = href;
+    baseProps.target = target;
   }
-  return renderLink(_objectSpread2(_objectSpread2({
-    linkAs
-  }, forwardedProps), {}, {
-    href,
-    target,
+  return /*#__PURE__*/React__default.createElement(Component, _extends({
+    ref: ref
+  }, forwardedProps, baseProps, {
     className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME$K,
       color,
-      colorVariant
-    })),
-    ref: ref
-  }), renderedChildren);
+      colorVariant,
+      hasTypography: !!typography
+    }), typography && getTypographyClassName(typography))
+  }), wrapChildrenIconWithSpaces(/*#__PURE__*/React__default.createElement(React__default.Fragment, null, leftIcon && /*#__PURE__*/React__default.createElement(Icon, {
+    icon: leftIcon,
+    className: `${CLASSNAME$K}__left-icon`
+  }), children && /*#__PURE__*/React__default.createElement("span", {
+    className: `${CLASSNAME$K}__content`
+  }, children), rightIcon && /*#__PURE__*/React__default.createElement(Icon, {
+    icon: rightIcon,
+    className: `${CLASSNAME$K}__right-icon`
+  }))));
 });
 Link.displayName = COMPONENT_NAME$K;
 Link.className = CLASSNAME$K;
@@ -12954,7 +12920,14 @@ const TabProvider = props => {
     if (state === INIT_STATE || !onChange || propState.activeTabIndex === state.activeTabIndex) {
       return;
     }
-    onChange(state.activeTabIndex);
+
+    // Escape rendering/useEffect context
+    queueMicrotask(() => {
+      // Wait for React to commit last state changes (avoid looping state update)
+      ReactDOM.flushSync(() => {
+        onChange(state.activeTabIndex);
+      });
+    });
   },
   // eslint-disable-next-line react-hooks/exhaustive-deps
   [onChange, state.activeTabIndex]);