@leafygreen-ui/combobox 1.0.2 → 1.2.0

package/src/utils/index.ts

@@ -0,0 +1,8 @@
+export { wrapJSX } from './wrapJSX';
+export { getNameAndValue } from './getNameAndValue';
+export {
+  getOptionObjectFromValue,
+  getDisplayNameForValue,
+  getValueForDisplayName,
+} from './OptionObjectUtils';
+export { flattenChildren } from './flattenChildren';

package/src/utils/wrapJSX.tsx

@@ -0,0 +1,54 @@
+import React, { ReactChild } from 'react';
+
+/**
+ *
+ * Wraps every instance of `wrap` found in `str` in the provided `element`.
+ *
+ * E.g. `wrapJSX('Apple', 'ap', 'em') => <em>Ap</em>ple`
+ *
+ * @param str
+ * @param wrap
+ * @param element
+ * @returns `JSX.Element`
+ */
+export const wrapJSX = (
+  str: string,
+  wrap?: string,
+  element?: keyof HTMLElementTagNameMap,
+): JSX.Element => {
+  if (wrap && element) {
+    const regex = new RegExp(wrap, 'gi');
+    const matches = str.matchAll(regex);
+
+    if (matches) {
+      const outArray = str.split('') as Array<ReactChild>;
+
+      /**
+       * For every match, splice it into the "string",
+       * wrapped in the React element
+       */
+      // Consider adding --downlevelIteration TS flag so we don't need Array.from
+      for (const match of Array.from(matches)) {
+        const matchIndex = match.index ?? -1;
+        const matchContent = match[0];
+        const matchLength = matchContent.length;
+        const key = matchIndex + matchContent + matchLength;
+
+        // We create a replacement array that's
+        // the same length as the match we're deleting,
+        // in order to keep the matchIndexes aligned
+        // with the indexes of the output array
+        const replacement = new Array<ReactChild>(matchLength).fill('');
+        replacement[0] = React.createElement(element, { key }, matchContent);
+
+        outArray.splice(matchIndex, matchLength, ...replacement);
+      }
+
+      return <>{outArray}</>;
+    }
+
+    return <>{str}</>;
+  }
+
+  return <>{str}</>;
+};

package/tsconfig.json

@@ -40,6 +40,9 @@
     {
       "path": "../tooltip"
     },
+    {
+      "path": "../tokens"
+    },
     {
       "path": "../typography"
     }