@lumx/react 3.12.0 → 3.12.1-alpha.0

package/index.d.ts

@@ -1865,6 +1865,8 @@ declare const InputHelper: Comp<InputHelperProps, HTMLParagraphElement>;
  * Defines the props of the component.
  */
 interface InputLabelProps extends GenericProps, HasTheme {
+    /** Typography variant. */
+    typography?: Typography;
     /** Label content. */
     children: string | ReactNode;
     /** Native htmlFor property. */
@@ -1924,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 Just 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 Just 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';
@@ -25,6 +25,23 @@ import take from 'lodash/take';
 import isObject from 'lodash/isObject';
 import set from 'lodash/set';
 
+function _defineProperty(e, r, t) {
+  return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+    value: t,
+    enumerable: !0,
+    configurable: !0,
+    writable: !0
+  }) : e[r] = t, e;
+}
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends.apply(null, arguments);
+}
 function ownKeys(e, r) {
   var t = Object.keys(e);
   if (Object.getOwnPropertySymbols) {
@@ -46,6 +63,26 @@ function _objectSpread2(e) {
   }
   return e;
 }
+function _objectWithoutProperties(e, t) {
+  if (null == e) return {};
+  var o,
+    r,
+    i = _objectWithoutPropertiesLoose(e, t);
+  if (Object.getOwnPropertySymbols) {
+    var n = Object.getOwnPropertySymbols(e);
+    for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
+  }
+  return i;
+}
+function _objectWithoutPropertiesLoose(r, e) {
+  if (null == r) return {};
+  var t = {};
+  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
+    if (-1 !== e.indexOf(n)) continue;
+    t[n] = r[n];
+  }
+  return t;
+}
 function _toPrimitive(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
@@ -58,62 +95,7 @@ function _toPrimitive(t, r) {
 }
 function _toPropertyKey(t) {
   var i = _toPrimitive(t, "string");
-  return "symbol" == typeof i ? i : String(i);
-}
-function _defineProperty(obj, key, value) {
-  key = _toPropertyKey(key);
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-  return obj;
-}
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-  return target;
-}
-function _objectWithoutProperties(source, excluded) {
-  if (source == null) return {};
-  var target = _objectWithoutPropertiesLoose(source, excluded);
-  var key, i;
-  if (Object.getOwnPropertySymbols) {
-    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-    for (i = 0; i < sourceSymbolKeys.length; i++) {
-      key = sourceSymbolKeys[i];
-      if (excluded.indexOf(key) >= 0) continue;
-      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-      target[key] = source[key];
-    }
-  }
-  return target;
+  return "symbol" == typeof i ? i : i + "";
 }
 
 /**
@@ -1465,7 +1447,7 @@ const ListItem = forwardRef((props, ref) => {
   }), isClickable({
     linkProps,
     onItemSelected
-  }) ? ( /* Clickable list item */
+  }) ? (/* Clickable list item */
   renderLink(_objectSpread2(_objectSpread2({
     linkAs,
     tabIndex: !isDisabled && role === 'button' ? 0 : undefined,
@@ -1780,8 +1762,8 @@ function flattenChildren(children) {
       const nodeKeys = keys.concat((_get = get(node, 'key')) !== null && _get !== void 0 ? _get : index);
       if (reactIs.exports.isFragment(node)) {
         acc.push(...recur(node.props.children, nodeKeys));
-      } else if ( /*#__PURE__*/isValidElement(node)) {
-        acc.push( /*#__PURE__*/cloneElement(node, {
+      } else if (/*#__PURE__*/isValidElement(node)) {
+        acc.push(/*#__PURE__*/cloneElement(node, {
           key: nodeKeys.join('.')
         }));
       } else if (typeof node === 'string' || typeof node === 'number') {
@@ -4725,7 +4707,7 @@ const _InnerPopover = forwardRef((props, ref) => {
   useFocusTrap(withFocusTrap && isOpen && focusZoneElement, 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__default.createElement(Component, _extends({}, forwardedProps, {
+  return isOpen ? renderPopover(/*#__PURE__*/React__default.createElement(Component, _extends({}, forwardedProps, {
     ref: mergedRefs,
     className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME$1d,
@@ -5348,11 +5330,21 @@ const Button = forwardRef((props, ref) => {
   }, forwardedProps), {
     className: buttonClassName,
     variant: "button"
-  }), leftIcon && !isEmpty(leftIcon) && /*#__PURE__*/React__default.createElement(Icon, {
+  }), leftIcon && !isEmpty(leftIcon) &&
+  /*#__PURE__*/
+  // Theme is handled in the button scss
+  React__default.createElement(ThemeProvider, {
+    value: undefined
+  }, /*#__PURE__*/React__default.createElement(Icon, {
     icon: leftIcon
-  }), children && (isComponent(Text)(children) ? children : /*#__PURE__*/React__default.createElement("span", null, children)), rightIcon && !isEmpty(rightIcon) && /*#__PURE__*/React__default.createElement(Icon, {
+  })), children && (isComponent(Text)(children) ? children : /*#__PURE__*/React__default.createElement("span", null, children)), rightIcon && !isEmpty(rightIcon) &&
+  /*#__PURE__*/
+  // Theme is handled in the button scss
+  React__default.createElement(ThemeProvider, {
+    value: undefined
+  }, /*#__PURE__*/React__default.createElement(Icon, {
     icon: rightIcon
-  }));
+  })));
 });
 Button.displayName = COMPONENT_NAME$1a;
 Button.className = CLASSNAME$18;
@@ -6943,7 +6935,7 @@ const Dialog = forwardRef((props, ref) => {
   // eslint-disable-next-line react-hooks/rules-of-hooks
   const isVisible = useTransitionVisibility(rootRef, Boolean(isOpen), DIALOG_TRANSITION_DURATION, onVisibilityChange);
   const shouldPreventCloseOnClickAway = preventAutoClose || preventCloseOnClick;
-  return isOpen || isVisible ? /*#__PURE__*/createPortal( /*#__PURE__*/React__default.createElement("div", _extends({
+  return isOpen || isVisible ? /*#__PURE__*/createPortal(/*#__PURE__*/React__default.createElement("div", _extends({
     ref: mergeRefs(rootRef, ref)
   }, forwardedProps, {
     className: classNames(className, handleBasicClasses({
@@ -7465,6 +7457,23 @@ 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 (! /*#__PURE__*/React__default.isValidElement(child)) {
+      return child;
+    }
+    if (child.type === React__default.Fragment) {
+      return wrapChildrenIconWithSpaces(child.props.children);
+    }
+    if (isComponentType(Icon)(child)) {
+      return [' ', child, ' '];
+    }
+    return child;
+  });
+}
+
 const _excluded$_ = ["as", "children", "className", "color", "colorVariant", "noWrap", "typography", "truncate", "whiteSpace", "style"];
 
 /**
@@ -7538,15 +7547,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;
@@ -8885,7 +8886,7 @@ InlineList.displayName = COMPONENT_NAME$N;
 InlineList.className = CLASSNAME$N;
 InlineList.defaultProps = DEFAULT_PROPS$D;
 
-const _excluded$Q = ["children", "className", "htmlFor", "isRequired", "theme"];
+const _excluded$Q = ["children", "className", "htmlFor", "isRequired", "theme", "typography"];
 
 /**
  * Defines the props of the component.
@@ -8920,9 +8921,11 @@ const InputLabel = forwardRef((props, ref) => {
       className,
       htmlFor,
       isRequired,
-      theme = defaultTheme
+      theme = defaultTheme,
+      typography
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$Q);
+  const typographyClass = typography && getTypographyClassName(typography);
   return /*#__PURE__*/React__default.createElement("label", _extends({
     ref: ref
   }, forwardedProps, {
@@ -8930,8 +8933,9 @@ const InputLabel = forwardRef((props, ref) => {
     className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME$M,
       isRequired,
-      theme
-    }))
+      theme,
+      hasCustomTypography: Boolean(typography)
+    }), typographyClass)
   }), children);
 });
 InputLabel.displayName = COMPONENT_NAME$M;
@@ -9088,31 +9092,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.
@@ -9137,49 +9116,31 @@ 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);
+    }), 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, rightIcon && /*#__PURE__*/React__default.createElement(Icon, {
+    icon: rightIcon,
+    className: `${CLASSNAME$K}__right-icon`
+  }))));
 });
 Link.displayName = COMPONENT_NAME$K;
 Link.className = CLASSNAME$K;
@@ -13937,7 +13898,7 @@ const useInjectTooltipRef = options => {
     if (!label) return children;
 
     // Non-disabled element
-    if ( /*#__PURE__*/React__default.isValidElement(children) && children.props.disabled !== true && children.props.isDisabled !== true) {
+    if (/*#__PURE__*/React__default.isValidElement(children) && children.props.disabled !== true && children.props.isDisabled !== true) {
       const ref = mergeRefs(children.ref, setAnchorElement);
       const props = _objectSpread2(_objectSpread2({}, children.props), {}, {
         ref
@@ -14009,7 +13970,7 @@ function useTooltipOpen(delay, anchorElement) {
       if (!IS_BROWSER) update();else timer = setTimeout(update, duration);
     };
     const hoverNotSupported = isHoverNotSupported();
-    const hasTouch = ('ontouchstart' in window);
+    const hasTouch = 'ontouchstart' in window;
 
     // Adapt open/close delay
     const openDelay = delay || (hoverNotSupported ? TOOLTIP_LONG_PRESS_DELAY.open : TOOLTIP_HOVER_DELAY.open);
@@ -14197,7 +14158,7 @@ const Tooltip = forwardRef((props, ref) => {
   }, [isOpen, update, popperElement]);
   const labelLines = label ? label.split('\n') : [];
   const tooltipRef = useMergeRefs(ref, setPopperElement, onPopperMount);
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TooltipContextProvider, null, wrappedChildren), isMounted && /*#__PURE__*/createPortal( /*#__PURE__*/React__default.createElement("div", _extends({
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TooltipContextProvider, null, wrappedChildren), isMounted && /*#__PURE__*/createPortal(/*#__PURE__*/React__default.createElement("div", _extends({
     ref: tooltipRef
   }, forwardedProps, {
     id: id,