@lumx/react 3.20.1-alpha.3 → 3.20.1-alpha.31

package/_internal/useFocusTrap-2dbae79e.js

@@ -0,0 +1,112 @@
+import { useEffect } from 'react';
+import { D as DOCUMENT } from './constants-d0e3f49e.js';
+import { g as getFocusableElements } from './getFocusableElements-230173a8.js';
+import { m as makeListenerTowerContext } from './useCallbackOnEscape-b956a85d.js';
+
+/**
+ * Get first and last elements focusable in an element.
+ *
+ * @param parentElement The element in which to search focusable elements.
+ * @return first and last focusable elements
+ */
+function getFirstAndLastFocusable(parentElement) {
+  const focusableElements = getFocusableElements(parentElement);
+
+  // First non disabled element.
+  const first = focusableElements[0];
+  // Last non disabled element.
+  const last = focusableElements[focusableElements.length - 1];
+  if (last && first) {
+    return {
+      first,
+      last
+    };
+  }
+  return {};
+}
+
+const FOCUS_TRAPS = makeListenerTowerContext();
+
+/**
+ * Trap 'Tab' focus switch inside the `focusZoneElement`.
+ *
+ * If multiple focus trap are activated, only the last one is maintained and when a focus trap closes, the previous one
+ * gets activated again.
+ *
+ * @param focusZoneElement The element in which to trap the focus.
+ * @param focusElement     The element to focus when the focus trap is activated (otherwise the first focusable element
+ *                         will be focused).
+ */
+function useFocusTrap(focusZoneElement, focusElement) {
+  useEffect(() => {
+    // Body element can be undefined in SSR context.
+    const rootElement = DOCUMENT?.body;
+    if (!rootElement || !focusZoneElement) {
+      return undefined;
+    }
+
+    // Use the shadow root as focusZoneElement when available
+    const focusZoneElementOrShadowRoot = focusZoneElement.shadowRoot || focusZoneElement;
+
+    // Trap 'Tab' key down focus switch into the focus zone.
+    const trapTabFocusInFocusZone = evt => {
+      const {
+        key
+      } = evt;
+      if (key !== 'Tab') {
+        return;
+      }
+      const focusable = getFirstAndLastFocusable(focusZoneElementOrShadowRoot);
+
+      // Prevent focus switch if no focusable available.
+      if (!focusable.first) {
+        evt.preventDefault();
+        return;
+      }
+      const activeElement = focusZoneElement.shadowRoot ? focusZoneElement.shadowRoot.activeElement : document.activeElement;
+      if (
+      // No previous focus
+      !activeElement ||
+      // Previous focus is at the end of the focus zone.
+      !evt.shiftKey && activeElement === focusable.last ||
+      // Previous focus is outside the focus zone
+      !focusZoneElementOrShadowRoot.contains(activeElement)) {
+        focusable.first.focus();
+        evt.preventDefault();
+        return;
+      }
+      if (
+      // Focus order reversed
+      evt.shiftKey &&
+      // Previous focus is at the start of the focus zone.
+      activeElement === focusable.first) {
+        focusable.last.focus();
+        evt.preventDefault();
+      }
+    };
+    const focusTrap = {
+      enable: () => rootElement.addEventListener('keydown', trapTabFocusInFocusZone),
+      disable: () => rootElement.removeEventListener('keydown', trapTabFocusInFocusZone)
+    };
+
+    // SETUP:
+    if (focusElement && focusZoneElementOrShadowRoot.contains(focusElement)) {
+      // Focus the given element.
+      focusElement.focus({
+        preventScroll: true
+      });
+    } else {
+      // Focus the first focusable element in the zone.
+      getFirstAndLastFocusable(focusZoneElementOrShadowRoot).first?.focus({
+        preventScroll: true
+      });
+    }
+    FOCUS_TRAPS.register(focusTrap);
+
+    // TEARDOWN:
+    return () => FOCUS_TRAPS.unregister(focusTrap);
+  }, [focusElement, focusZoneElement]);
+}
+
+export { getFirstAndLastFocusable as g, useFocusTrap as u };
+//# sourceMappingURL=useFocusTrap-2dbae79e.js.map

package/_internal/useFocusTrap-2dbae79e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFocusTrap-2dbae79e.js","sources":["../../src/utils/browser/focus/getFirstAndLastFocusable.ts","../../src/hooks/useFocusTrap.ts"],"sourcesContent":["import { getFocusableElements } from './getFocusableElements';\n\n/**\n * Get first and last elements focusable in an element.\n *\n * @param parentElement The element in which to search focusable elements.\n * @return first and last focusable elements\n */\nexport function getFirstAndLastFocusable(parentElement: HTMLElement | ShadowRoot) {\n    const focusableElements = getFocusableElements(parentElement);\n\n    // First non disabled element.\n    const first = focusableElements[0];\n    // Last non disabled element.\n    const last = focusableElements[focusableElements.length - 1];\n\n    if (last && first) {\n        return { first, last };\n    }\n    return {};\n}\n","import { useEffect } from 'react';\n\nimport { DOCUMENT } from '@lumx/react/constants';\nimport { getFirstAndLastFocusable } from '@lumx/react/utils/browser/focus/getFirstAndLastFocusable';\nimport { Falsy } from '@lumx/react/utils/type';\nimport { Listener, makeListenerTowerContext } from '@lumx/react/utils/function/makeListenerTowerContext';\n\nconst FOCUS_TRAPS = makeListenerTowerContext();\n\n/**\n * Trap 'Tab' focus switch inside the `focusZoneElement`.\n *\n * If multiple focus trap are activated, only the last one is maintained and when a focus trap closes, the previous one\n * gets activated again.\n *\n * @param focusZoneElement The element in which to trap the focus.\n * @param focusElement     The element to focus when the focus trap is activated (otherwise the first focusable element\n *                         will be focused).\n */\nexport function useFocusTrap(focusZoneElement: HTMLElement | Falsy, focusElement?: HTMLElement | null): void {\n    useEffect(() => {\n        // Body element can be undefined in SSR context.\n        const rootElement = DOCUMENT?.body;\n\n        if (!rootElement || !focusZoneElement) {\n            return undefined;\n        }\n\n        // Use the shadow root as focusZoneElement when available\n        const focusZoneElementOrShadowRoot = focusZoneElement.shadowRoot || focusZoneElement;\n\n        // Trap 'Tab' key down focus switch into the focus zone.\n        const trapTabFocusInFocusZone = (evt: KeyboardEvent) => {\n            const { key } = evt;\n            if (key !== 'Tab') {\n                return;\n            }\n\n            const focusable = getFirstAndLastFocusable(focusZoneElementOrShadowRoot);\n\n            // Prevent focus switch if no focusable available.\n            if (!focusable.first) {\n                evt.preventDefault();\n                return;\n            }\n\n            const activeElement = focusZoneElement.shadowRoot\n                ? focusZoneElement.shadowRoot.activeElement\n                : document.activeElement;\n\n            if (\n                // No previous focus\n                !activeElement ||\n                // Previous focus is at the end of the focus zone.\n                (!evt.shiftKey && activeElement === focusable.last) ||\n                // Previous focus is outside the focus zone\n                !focusZoneElementOrShadowRoot.contains(activeElement)\n            ) {\n                focusable.first.focus();\n                evt.preventDefault();\n                return;\n            }\n\n            if (\n                // Focus order reversed\n                evt.shiftKey &&\n                // Previous focus is at the start of the focus zone.\n                activeElement === focusable.first\n            ) {\n                focusable.last.focus();\n                evt.preventDefault();\n            }\n        };\n\n        const focusTrap: Listener = {\n            enable: () => rootElement.addEventListener('keydown', trapTabFocusInFocusZone),\n            disable: () => rootElement.removeEventListener('keydown', trapTabFocusInFocusZone),\n        };\n\n        // SETUP:\n        if (focusElement && focusZoneElementOrShadowRoot.contains(focusElement)) {\n            // Focus the given element.\n            focusElement.focus({ preventScroll: true });\n        } else {\n            // Focus the first focusable element in the zone.\n            getFirstAndLastFocusable(focusZoneElementOrShadowRoot).first?.focus({ preventScroll: true });\n        }\n        FOCUS_TRAPS.register(focusTrap);\n\n        // TEARDOWN:\n        return () => FOCUS_TRAPS.unregister(focusTrap);\n    }, [focusElement, focusZoneElement]);\n}\n"],"names":["getFirstAndLastFocusable","parentElement","focusableElements","getFocusableElements","first","last","length","FOCUS_TRAPS","makeListenerTowerContext","useFocusTrap","focusZoneElement","focusElement","useEffect","rootElement","DOCUMENT","body","undefined","focusZoneElementOrShadowRoot","shadowRoot","trapTabFocusInFocusZone","evt","key","focusable","preventDefault","activeElement","document","shiftKey","contains","focus","focusTrap","enable","addEventListener","disable","removeEventListener","preventScroll","register","unregister"],"mappings":"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"}

package/_internal/useId-3a1facc0.js

@@ -0,0 +1,18 @@
+import React__default from 'react';
+
+let i = 0;
+
+/**
+ * Generate a unique id (for use in a11y or other id based DOM linking).
+ *
+ * (Tries to emulate React 18 useId hook, to remove once we upgrade React)
+ */
+function useId() {
+  return React__default.useMemo(() => {
+    i += 1;
+    return `:lumx${i}:`;
+  }, []);
+}
+
+export { useId as u };
+//# sourceMappingURL=useId-3a1facc0.js.map

package/_internal/useId-3a1facc0.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useId-3a1facc0.js","sources":["../../src/hooks/useId.ts"],"sourcesContent":["import React from 'react';\n\nlet i = 0;\n\n/**\n * Generate a unique id (for use in a11y or other id based DOM linking).\n *\n * (Tries to emulate React 18 useId hook, to remove once we upgrade React)\n */\nexport function useId() {\n    return React.useMemo(() => {\n        i += 1;\n        return `:lumx${i}:`;\n    }, []);\n}\n"],"names":["i","useId","React","useMemo"],"mappings":";;AAEA,IAAIA,CAAC,GAAG,CAAC,CAAA;;AAET;AACA;AACA;AACA;AACA;AACO,SAASC,KAAKA,GAAG;AACpB,EAAA,OAAOC,cAAK,CAACC,OAAO,CAAC,MAAM;AACvBH,IAAAA,CAAC,IAAI,CAAC,CAAA;IACN,OAAO,CAAA,KAAA,EAAQA,CAAC,CAAG,CAAA,CAAA,CAAA;GACtB,EAAE,EAAE,CAAC,CAAA;AACV;;;;"}

package/_internal/useRovingTabIndex-7daf0f24.js

@@ -0,0 +1,77 @@
+import { useEffect } from 'react';
+
+const useRovingTabIndex = ({
+  parentRef,
+  elementSelector,
+  keepTabIndex,
+  onElementFocus,
+  extraDependencies = []
+}) => {
+  useEffect(() => {
+    const parent = parentRef?.current;
+    if (!parent) {
+      return undefined;
+    }
+    const elements = parent.querySelectorAll(elementSelector);
+    const initialFocusableElement = parent?.querySelector(`${elementSelector}[tabindex="0"]`);
+    const handleKeyDown = index => evt => {
+      let newTabFocus = index;
+      if (!(evt.key === 'ArrowRight' || evt.key === 'ArrowLeft')) {
+        return;
+      }
+      if (evt.key === 'ArrowRight') {
+        // Move right
+        newTabFocus += 1;
+        // If we're at the end, go to the start
+        if (newTabFocus >= elements.length) {
+          newTabFocus = 0;
+        }
+      } else if (evt.key === 'ArrowLeft') {
+        // Move left
+        newTabFocus -= 1;
+        if (newTabFocus < 0) {
+          // If we're at the start, move to the end
+          newTabFocus = elements.length - 1;
+        }
+      }
+      const newElement = elements[newTabFocus];
+      newElement?.focus();
+
+      // When an element is focused using roving tab index, trigger the onElementFocus callback
+      if (newElement && onElementFocus) {
+        onElementFocus(newElement);
+      }
+      if (keepTabIndex) {
+        evt.currentTarget.setAttribute('tabindex', '-1');
+        newElement?.setAttribute('tabindex', '0');
+      }
+    };
+    if (elements?.length > 0) {
+      elements.forEach((el, key) => {
+        // if no element has tabindex set to 0, set the first element as focusable
+        if (!initialFocusableElement && key === 0) {
+          el.setAttribute('tabindex', '0');
+          // set all other to -1
+        } else if (initialFocusableElement !== el) {
+          el.setAttribute('tabindex', '-1');
+        }
+        // add event listener
+        el.addEventListener('keydown', handleKeyDown(key));
+      });
+    }
+
+    // Cleanup listeners
+    return () => {
+      if (elements?.length > 0) {
+        elements.forEach((el, key) => {
+          el.removeEventListener('keydown', handleKeyDown(key));
+        });
+      }
+    };
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [parentRef, ...extraDependencies]);
+};
+
+export { useRovingTabIndex as u };
+//# sourceMappingURL=useRovingTabIndex-7daf0f24.js.map

package/_internal/useRovingTabIndex-7daf0f24.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRovingTabIndex-7daf0f24.js","sources":["../../src/hooks/useRovingTabIndex.tsx"],"sourcesContent":["import { RefObject, useEffect } from 'react';\n\ninterface UseRovingTabIndexOptions {\n    parentRef: RefObject<HTMLElement>;\n    elementSelector: string;\n    keepTabIndex?: boolean;\n    /** Action to trigger when an element is focused using roving tab index */\n    onElementFocus?: (element: HTMLElement) => void;\n    /** List of values to be used as extra dependencies of the useEffect */\n    extraDependencies?: any[];\n}\n\nexport const useRovingTabIndex = ({\n    parentRef,\n    elementSelector,\n    keepTabIndex,\n    onElementFocus,\n    extraDependencies = [],\n}: UseRovingTabIndexOptions): void => {\n    useEffect(\n        () => {\n            const parent = parentRef?.current;\n            if (!parent) {\n                return undefined;\n            }\n\n            const elements = parent.querySelectorAll(elementSelector) as NodeListOf<HTMLElement>;\n            const initialFocusableElement = parent?.querySelector(`${elementSelector}[tabindex=\"0\"]`);\n\n            const handleKeyDown = (index: number) => (evt: KeyboardEvent) => {\n                let newTabFocus = index;\n                if (!(evt.key === 'ArrowRight' || evt.key === 'ArrowLeft')) {\n                    return;\n                }\n\n                if (evt.key === 'ArrowRight') {\n                    // Move right\n                    newTabFocus += 1;\n                    // If we're at the end, go to the start\n                    if (newTabFocus >= elements.length) {\n                        newTabFocus = 0;\n                    }\n                } else if (evt.key === 'ArrowLeft') {\n                    // Move left\n                    newTabFocus -= 1;\n                    if (newTabFocus < 0) {\n                        // If we're at the start, move to the end\n                        newTabFocus = elements.length - 1;\n                    }\n                }\n                const newElement = elements[newTabFocus];\n                newElement?.focus();\n\n                // When an element is focused using roving tab index, trigger the onElementFocus callback\n                if (newElement && onElementFocus) {\n                    onElementFocus(newElement);\n                }\n\n                if (keepTabIndex) {\n                    (evt.currentTarget as HTMLElement).setAttribute('tabindex', '-1');\n                    newElement?.setAttribute('tabindex', '0');\n                }\n            };\n\n            if (elements?.length > 0) {\n                elements.forEach((el, key) => {\n                    // if no element has tabindex set to 0, set the first element as focusable\n                    if (!initialFocusableElement && key === 0) {\n                        el.setAttribute('tabindex', '0');\n                        // set all other to -1\n                    } else if (initialFocusableElement !== el) {\n                        el.setAttribute('tabindex', '-1');\n                    }\n                    // add event listener\n                    el.addEventListener('keydown', handleKeyDown(key) as EventListener);\n                });\n            }\n\n            // Cleanup listeners\n            return () => {\n                if (elements?.length > 0) {\n                    elements.forEach((el, key) => {\n                        el.removeEventListener('keydown', handleKeyDown(key) as EventListener);\n                    });\n                }\n            };\n        }, // eslint-disable-next-line react-hooks/exhaustive-deps\n        [parentRef, ...extraDependencies],\n    );\n};\n"],"names":["useRovingTabIndex","parentRef","elementSelector","keepTabIndex","onElementFocus","extraDependencies","useEffect","parent","current","undefined","elements","querySelectorAll","initialFocusableElement","querySelector","handleKeyDown","index","evt","newTabFocus","key","length","newElement","focus","currentTarget","setAttribute","forEach","el","addEventListener","removeEventListener"],"mappings":"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"}

package/_internal/useTransitionVisibility-321fdbfa.js

@@ -0,0 +1,50 @@
+import { useState, useRef, useEffect } from 'react';
+import { W as WINDOW } from './constants-d0e3f49e.js';
+
+/** Check if user prefers reduced motion */
+function isReducedMotion() {
+  return WINDOW?.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
+}
+
+/**
+ * Returns true if the component is visible tracking the opacity transition.
+ *
+ * @param ref Element on which to listen the transition event.
+ * @param isComponentVisible Whether the component intends to be visible or not.
+ * @param onVisibilityChange Callback called when the visibility changes.
+ * @return true if the component should be rendered
+ */
+const useTransitionVisibility = (ref, isComponentVisible, timeout, onVisibilityChange) => {
+  const [isVisible, setVisible] = useState(isComponentVisible);
+  const previousVisibility = useRef(isVisible);
+
+  // On component visibility change.
+  useEffect(() => {
+    if (isComponentVisible) {
+      setVisible(true);
+      return undefined;
+    }
+    const {
+      current: element
+    } = ref;
+
+    // Transition event is not supported or the user prefers reduced motion.
+    // => Skip and set visibility to false directly.
+    if (!element || !window.TransitionEvent || isReducedMotion()) {
+      setVisible(false);
+      return undefined;
+    }
+    const timer = setTimeout(() => setVisible(false), timeout);
+    return () => clearTimeout(timer);
+  }, [isComponentVisible, ref, timeout]);
+  useEffect(() => {
+    if (onVisibilityChange && previousVisibility.current !== isVisible) {
+      onVisibilityChange(isVisible);
+      previousVisibility.current = isVisible;
+    }
+  }, [isVisible, onVisibilityChange]);
+  return isVisible || isComponentVisible;
+};
+
+export { isReducedMotion as i, useTransitionVisibility as u };
+//# sourceMappingURL=useTransitionVisibility-321fdbfa.js.map

package/_internal/useTransitionVisibility-321fdbfa.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTransitionVisibility-321fdbfa.js","sources":["../../src/utils/browser/isReducedMotion.ts","../../src/hooks/useTransitionVisibility.ts"],"sourcesContent":["import { WINDOW } from '@lumx/react/constants';\n\n/** Check if user prefers reduced motion */\nexport function isReducedMotion() {\n    return WINDOW?.matchMedia?.('(prefers-reduced-motion: reduce)').matches;\n}\n","import { RefObject, useEffect, useRef, useState } from 'react';\nimport { isReducedMotion } from '@lumx/react/utils/browser/isReducedMotion';\n\n/**\n * Returns true if the component is visible tracking the opacity transition.\n *\n * @param ref Element on which to listen the transition event.\n * @param isComponentVisible Whether the component intends to be visible or not.\n * @param onVisibilityChange Callback called when the visibility changes.\n * @return true if the component should be rendered\n */\nexport const useTransitionVisibility = (\n    ref: RefObject<HTMLElement>,\n    isComponentVisible: boolean,\n    timeout: number,\n    onVisibilityChange?: (isVisible: boolean) => void,\n) => {\n    const [isVisible, setVisible] = useState(isComponentVisible);\n    const previousVisibility = useRef(isVisible);\n\n    // On component visibility change.\n    useEffect(() => {\n        if (isComponentVisible) {\n            setVisible(true);\n            return undefined;\n        }\n        const { current: element } = ref;\n\n        // Transition event is not supported or the user prefers reduced motion.\n        // => Skip and set visibility to false directly.\n        if (!element || !window.TransitionEvent || isReducedMotion()) {\n            setVisible(false);\n            return undefined;\n        }\n\n        const timer = setTimeout(() => setVisible(false), timeout);\n        return () => clearTimeout(timer);\n    }, [isComponentVisible, ref, timeout]);\n\n    useEffect(() => {\n        if (onVisibilityChange && previousVisibility.current !== isVisible) {\n            onVisibilityChange(isVisible);\n            previousVisibility.current = isVisible;\n        }\n    }, [isVisible, onVisibilityChange]);\n\n    return isVisible || isComponentVisible;\n};\n"],"names":["isReducedMotion","WINDOW","matchMedia","matches","useTransitionVisibility","ref","isComponentVisible","timeout","onVisibilityChange","isVisible","setVisible","useState","previousVisibility","useRef","useEffect","undefined","current","element","window","TransitionEvent","timer","setTimeout","clearTimeout"],"mappings":";;;AAEA;AACO,SAASA,eAAeA,GAAG;AAC9B,EAAA,OAAOC,MAAM,EAAEC,UAAU,GAAG,kCAAkC,CAAC,CAACC,OAAO,CAAA;AAC3E;;ACFA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,uBAAuB,GAAGA,CACnCC,GAA2B,EAC3BC,kBAA2B,EAC3BC,OAAe,EACfC,kBAAiD,KAChD;EACD,MAAM,CAACC,SAAS,EAAEC,UAAU,CAAC,GAAGC,QAAQ,CAACL,kBAAkB,CAAC,CAAA;AAC5D,EAAA,MAAMM,kBAAkB,GAAGC,MAAM,CAACJ,SAAS,CAAC,CAAA;;AAE5C;AACAK,EAAAA,SAAS,CAAC,MAAM;AACZ,IAAA,IAAIR,kBAAkB,EAAE;MACpBI,UAAU,CAAC,IAAI,CAAC,CAAA;AAChB,MAAA,OAAOK,SAAS,CAAA;AACpB,KAAA;IACA,MAAM;AAAEC,MAAAA,OAAO,EAAEC,OAAAA;AAAQ,KAAC,GAAGZ,GAAG,CAAA;;AAEhC;AACA;IACA,IAAI,CAACY,OAAO,IAAI,CAACC,MAAM,CAACC,eAAe,IAAInB,eAAe,EAAE,EAAE;MAC1DU,UAAU,CAAC,KAAK,CAAC,CAAA;AACjB,MAAA,OAAOK,SAAS,CAAA;AACpB,KAAA;IAEA,MAAMK,KAAK,GAAGC,UAAU,CAAC,MAAMX,UAAU,CAAC,KAAK,CAAC,EAAEH,OAAO,CAAC,CAAA;AAC1D,IAAA,OAAO,MAAMe,YAAY,CAACF,KAAK,CAAC,CAAA;GACnC,EAAE,CAACd,kBAAkB,EAAED,GAAG,EAAEE,OAAO,CAAC,CAAC,CAAA;AAEtCO,EAAAA,SAAS,CAAC,MAAM;AACZ,IAAA,IAAIN,kBAAkB,IAAII,kBAAkB,CAACI,OAAO,KAAKP,SAAS,EAAE;MAChED,kBAAkB,CAACC,SAAS,CAAC,CAAA;MAC7BG,kBAAkB,CAACI,OAAO,GAAGP,SAAS,CAAA;AAC1C,KAAA;AACJ,GAAC,EAAE,CAACA,SAAS,EAAED,kBAAkB,CAAC,CAAC,CAAA;EAEnC,OAAOC,SAAS,IAAIH,kBAAkB,CAAA;AAC1C;;;;"}

package/_internal/wrapChildrenIconWithSpaces-ef2a6772.js

@@ -0,0 +1,20 @@
+import React__default, { Children } from 'react';
+import { i as isComponentType } from './isComponentType-e806b848.js';
+import { Icon } from './components/icon-a00d698b.js';
+
+/** 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;
+  });
+}
+
+export { wrapChildrenIconWithSpaces as w };
+//# sourceMappingURL=wrapChildrenIconWithSpaces-ef2a6772.js.map

package/_internal/wrapChildrenIconWithSpaces-ef2a6772.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wrapChildrenIconWithSpaces-ef2a6772.js","sources":["../../src/utils/react/wrapChildrenIconWithSpaces.tsx"],"sourcesContent":["import React, { Children } from 'react';\nimport { isComponentType } from '@lumx/react/utils/type';\nimport { Icon } from '@lumx/react';\n\n/** Force wrap spaces around icons to make sure they are never stuck against text. */\nexport function wrapChildrenIconWithSpaces(children: React.ReactNode): React.ReactNode {\n    if (children === null || children === undefined) return undefined;\n    return Children.toArray(children).flatMap((child) => {\n        if (isComponentType(Icon)(child)) {\n            return [' ', child, ' '];\n        }\n        if (\n            React.isValidElement(child) &&\n            child.props &&\n            typeof child.props === 'object' &&\n            'children' in child.props\n        ) {\n            return React.cloneElement(child, undefined, wrapChildrenIconWithSpaces(child.props.children));\n        }\n        return child;\n    });\n}\n"],"names":["wrapChildrenIconWithSpaces","children","undefined","Children","toArray","flatMap","child","isComponentType","Icon","React","isValidElement","props","cloneElement"],"mappings":";;;;AAIA;AACO,SAASA,0BAA0BA,CAACC,QAAyB,EAAmB;EACnF,IAAIA,QAAQ,KAAK,IAAI,IAAIA,QAAQ,KAAKC,SAAS,EAAE,OAAOA,SAAS,CAAA;EACjE,OAAOC,QAAQ,CAACC,OAAO,CAACH,QAAQ,CAAC,CAACI,OAAO,CAAEC,KAAK,IAAK;AACjD,IAAA,IAAIC,eAAe,CAACC,IAAI,CAAC,CAACF,KAAK,CAAC,EAAE;AAC9B,MAAA,OAAO,CAAC,GAAG,EAAEA,KAAK,EAAE,GAAG,CAAC,CAAA;AAC5B,KAAA;IACA,iBACIG,cAAK,CAACC,cAAc,CAACJ,KAAK,CAAC,IAC3BA,KAAK,CAACK,KAAK,IACX,OAAOL,KAAK,CAACK,KAAK,KAAK,QAAQ,IAC/B,UAAU,IAAIL,KAAK,CAACK,KAAK,EAC3B;AACE,MAAA,oBAAOF,cAAK,CAACG,YAAY,CAACN,KAAK,EAAEJ,SAAS,EAAEF,0BAA0B,CAACM,KAAK,CAACK,KAAK,CAACV,QAAQ,CAAC,CAAC,CAAA;AACjG,KAAA;AACA,IAAA,OAAOK,KAAK,CAAA;AAChB,GAAC,CAAC,CAAA;AACN;;;;"}