@lumx/react 4.22.0-next.2 → 4.22.1-alpha.0

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.
  */