@lumx/react 4.22.1-next.3 → 4.23.0-next.0

package/index.js

@@ -2760,20 +2760,47 @@ 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) {
+/** Whether the node is a text that already ends with a space (a normal space or a non breaking space). */
+const endsWithSpace = node => typeof node === 'string' && /\s$/.test(node);
+
+/** Whether the node is a text that already starts with a space (a normal space or a non breaking space). */
+const startsWithSpace = node => typeof node === 'string' && /^\s/.test(node);
+
+/**
+ * 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.
+      // No space either when the adjacent text already provides one.
+      const spaceBefore = !childIsFirst && !endsWithSpace(childArray[index - 1]);
+      const spaceAfter = !childIsLast && !startsWithSpace(childArray[index + 1]);
+      return [...(spaceBefore ? [' '] : []), child, ...(spaceAfter ? [' '] : [])];
     }
     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.
+ * No space is added on a side where the adjacent text already provides one.
+ */
+function wrapChildrenIconWithSpaces(children) {
+  return wrap(children, true, true);
+}
+
 /**
  * Defines the props of the component.
  */