@lumx/react 4.22.0 → 4.22.1-alpha.0

package/index.d.ts

@@ -802,7 +802,7 @@ interface ButtonProps extends GenericProps$1, ReactToJSX<ButtonProps$1> {
  * @param  ref   Component ref.
  * @return React element.
  */
-declare const Button: Comp<ButtonProps, HTMLAnchorElement | HTMLButtonElement>;
+declare const Button: Comp<ButtonProps, HTMLButtonElement | HTMLAnchorElement>;
 
 interface IconButtonProps$1 extends BaseButtonProps {
     /**
@@ -2262,7 +2262,7 @@ declare const Combobox: {
     /** Provides shared combobox context (handle, listbox ID, anchor ref) to all sub-components. */
     Provider: typeof ComboboxProvider;
     /** Button trigger for select-only combobox mode with keyboard navigation and typeahead. */
-    Button: (<E extends React$1.ElementType = Comp<ButtonProps, HTMLAnchorElement | HTMLButtonElement>>(props: Omit<HasPolymorphicAs$1<E>, "children" | "role" | "aria-activedescendant" | "aria-controls" | "aria-expanded" | "aria-haspopup"> & _lumx_core_js_types.HasRequiredLinkHref<E> & ReactToJSX<ComboboxButtonProps$1> & React$1.ComponentProps<E> & {
+    Button: (<E extends React$1.ElementType = Comp<ButtonProps, HTMLButtonElement | HTMLAnchorElement>>(props: Omit<HasPolymorphicAs$1<E>, "children" | "aria-expanded" | "aria-haspopup" | "role" | "aria-controls" | "aria-activedescendant"> & _lumx_core_js_types.HasRequiredLinkHref<E> & ReactToJSX<ComboboxButtonProps$1> & React$1.ComponentProps<E> & {
         ref?: ComponentRef<E> | undefined;
     }) => React.JSX.Element) & {
         displayName: string;
@@ -2838,7 +2838,7 @@ declare const GenericBlockGapSize: Pick<{
     readonly medium: "medium";
     readonly big: "big";
     readonly huge: "huge";
-}, "big" | "tiny" | "medium" | "regular" | "huge">;
+}, "big" | "medium" | "tiny" | "regular" | "huge">;
 type GenericBlockGapSize = ValueOf<typeof GenericBlockGapSize>;
 
 interface GenericBlockProps$1 extends FlexBoxProps$1 {
@@ -3033,7 +3033,7 @@ interface GridColumnProps extends GenericProps$1, ReactToJSX<GridColumnProps$1>
  */
 declare const GridColumn: Comp<GridColumnProps, HTMLElement>;
 
-declare const ICON_SIZES: ("s" | "m" | "xxs" | "xs" | "l" | "xl" | "xxl")[];
+declare const ICON_SIZES: ("m" | "s" | "xxs" | "xs" | "l" | "xl" | "xxl")[];
 
 type IconSizes = (typeof ICON_SIZES)[number];
 /**
@@ -3537,7 +3537,7 @@ interface LinkProps extends GenericProps$1, ReactToJSX<LinkProps$1> {
  * @param  ref   Component ref.
  * @return React element.
  */
-declare const Link: Comp<LinkProps, HTMLAnchorElement | HTMLButtonElement>;
+declare const Link: Comp<LinkProps, HTMLButtonElement | HTMLAnchorElement>;
 
 /**
  * Defines the props of the component.

package/index.js

@@ -2760,20 +2760,37 @@ const useOverflowTooltipLabel = content => {
  */
 const isComponentType = type => node => /*#__PURE__*/React__default.isValidElement(node) && node.type === type;
 
-/** Force wrap spaces around icons to make sure they are never stuck against text. */
-function wrapChildrenIconWithSpaces(children) {
+/**
+ * Recursively wrap icons with spaces.
+ *
+ * `isFirst`/`isLast` tell whether the given children are at the very start/end of the whole
+ * children tree, so that an icon on an edge is detected even when nested in a fragment or element.
+ */
+function wrap(children, isFirst, isLast) {
   if (children === null || children === undefined) return undefined;
-  return Children.toArray(children).flatMap(child => {
+  const childArray = Children.toArray(children);
+  return childArray.flatMap((child, index) => {
+    const childIsFirst = isFirst && index === 0;
+    const childIsLast = isLast && index === childArray.length - 1;
     if (isComponentType(Icon)(child)) {
-      return [' ', child, ' '];
+      // No space on the edges of the text: the icon is not stuck against anything there.
+      return [...(childIsFirst ? [] : [' ']), child, ...(childIsLast ? [] : [' '])];
     }
     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 /*#__PURE__*/React__default.cloneElement(child, undefined, wrap(child.props.children, childIsFirst, childIsLast));
     }
     return child;
   });
 }
 
+/**
+ * Force wrap spaces around icons to make sure they are never stuck against text.
+ * Icons at the very start or end of the text are not padded on that side.
+ */
+function wrapChildrenIconWithSpaces(children) {
+  return wrap(children, true, true);
+}
+
 /**
  * Defines the props of the component.
  */