perf: replace mark package with simple regex and replace #226

apiExamples/matchWord.html

@@ -13,4 +13,4 @@
     <auro-menuoption value="peaches">Peaches</auro-menuoption>
   </auro-menu>
   <auro-menuoption value="arrival">Arrival</auro-menuoption>
-</auro-menu>
+</auro-menu>

demo/api.html

@@ -42,6 +42,7 @@
     </script>
     <!-- If additional elements are needed for the demo, add them here. -->
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-input@latest/dist/auro-input__bundled.js" type="module"></script>
     <script type="module" data-demo-script="true">
       import { initExamples } from "./api.min.js"
       initExamples();

demo/api.min.js

@@ -4,7 +4,6 @@ import { html } from 'lit/static-html.js';
 import { AuroDependencyVersioning } from '@aurodesignsystem/auro-library/scripts/runtime/dependencyTagVersioning.mjs';
 import { AuroIcon } from '@aurodesignsystem/auro-icon/src/auro-icon.js';
 import checkmarkIcon from '@alaskaairux/icons/dist/icons/interface/checkmark-sm.mjs';
-import 'mark.js/dist/mark.es6.min.js';
 
 function auroMenuResetExample() {
   const resetExampleBtnElem = document.querySelector('#resetExampleBtn');
@@ -46,7 +45,7 @@ var colorCss$1 = css`:host ::slotted(hr){border-top-color:var(--ds-auro-menu-div
 
 var tokensCss = css`:host{--ds-auro-menu-divider-color: var(--ds-color-border-divider-default, $ds-color-border-divider-default);--ds-auro-menuoption-container-color: transparent;--ds-auro-menuoption-icon-color: transparent;--ds-auro-menuoption-text-color: var(--ds-color-text-primary-default, $ds-color-text-primary-default)}`;
 
-var styleCss = css`:host{display:flex;align-items:center;padding:var(--ds-size-50, 0.25rem) var(--ds-size-200, 1rem) var(--ds-size-50, 0.25rem) 0;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent}:host slot{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, $ds-size-300);margin-right:var(--ds-size-150, 0.75rem);margin-left:var(--ds-size-100, 0.5rem)}:host ::slotted(.nestingSpacer){display:inline-block;width:var(--ds-size-300, 1.5rem)}:host ::slotted(strong){font-weight:700}:host([hidden]){display:none}:host([static]){pointer-events:none}:host([disabled]:hover){cursor:auto}:host([disabled]){user-select:none;pointer-events:none}`;
+var styleCss = css`:host{display:flex;align-items:center;padding:var(--ds-size-50, 0.25rem) var(--ds-size-200, 1rem) var(--ds-size-50, 0.25rem) 0;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent}:host slot{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-150, 0.75rem);margin-left:var(--ds-size-100, 0.5rem)}:host ::slotted(.nestingSpacer){display:inline-block;width:var(--ds-size-300, 1.5rem)}:host ::slotted(strong){font-weight:700}:host([hidden]){display:none}:host([static]){pointer-events:none}:host([disabled]:hover){cursor:auto}:host([disabled]){user-select:none;pointer-events:none}`;
 
 var colorCss = css`:host{background-color:var(--ds-auro-menuoption-container-color);color:var(--ds-auro-menuoption-text-color)}:host svg{fill:var(--ds-auro-menuoption-icon-color) !important}:host([disabled]){--ds-auro-menuoption-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}:host(:hover),:host(.active){--ds-auro-menuoption-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03))}:host([selected]){--ds-auro-menuoption-container-color: var(--ds-color-container-ui-primary-default-default, #2c67b5);--ds-auro-menuoption-text-color: var(--ds-color-text-primary-inverse, #ffffff);--ds-auro-menuoption-icon-color: var(--ds-color-icon-emphasis-inverse, #ffffff)}`;
 
@@ -224,6 +223,11 @@ class AuroMenu extends LitElement {
      * @private
      */
     this.runtimeUtils = new AuroLibraryRuntimeUtils();
+
+    /**
+     * @private
+     */
+    this.nestingSpacer = '<span class="nestingSpacer"></span>';
   }
 
   static get properties() {
@@ -324,26 +328,22 @@ class AuroMenu extends LitElement {
    * @returns {void} When called will update the DOM with visible suggest text matches.
    */
   markOptions() {
-    if (this.items && this.items.length > 0) {
-      let itemsToMark = []; // eslint-disable-line prefer-const
+    if (this.items && this.items.length > 0 && (this.matchWord && this.matchWord.length > 0)) {
+
+      // Escape special regex characters
+      const escapedWord = this.matchWord.replace(/[.*+?^${}()|[\]\\]/gu, '\\$&');
+
+      // Global, case-insensitive, unicode matching regex pattern
+      const regexWord = new RegExp(escapedWord, 'giu');
 
       this.items.forEach((item) => {
         if (this.optionInteractive(item) && !item.hasAttribute('persistent')) {
-          itemsToMark.push(item);
+          const nested = item.querySelectorAll('.nestingSpacer');
+          const nestingSpacerBundle = [...nested].map(() => this.nestingSpacer).join('');
+
+          item.innerHTML = nestingSpacerBundle + item.textContent.replace(regexWord, (match) => `<strong>${match}</strong>`);
         }
       });
-
-      const markInstance = new Mark(itemsToMark); // eslint-disable-line
-
-      markInstance.unmark();
-
-      if (this.matchWord && this.matchWord.length > 0) {
-        markInstance.mark(this.matchWord, {
-          'element': 'strong',
-          'separateWordSearch': false,
-          'acrossElements': true
-        });
-      }
     }
   }
 
@@ -555,7 +555,7 @@ class AuroMenu extends LitElement {
       const options = nestedMenu.querySelectorAll(':scope > auro-menuoption, :scope > [auro-menuoption');
 
       options.forEach((option) => {
-        option.innerHTML = `<span class="nestingSpacer"></span> ${option.innerHTML}`;
+        option.innerHTML = this.nestingSpacer + option.innerHTML;
       });
 
       this.handleNestedMenus(nestedMenu);

package.json

@@ -20,11 +20,10 @@
     "node": "^18.x || ^20.x"
   },
   "dependencies": {
-    "@alaskaairux/icons": "^4.43.0",
+    "@alaskaairux/icons": "^4.44.1",
     "@aurodesignsystem/auro-icon": "^6.0.2",
     "@aurodesignsystem/auro-library": "2.8.0",
-    "lit": "^3.2.1",
-    "mark.js": "8.11.0"
+    "lit": "^3.2.1"
   },
   "peerDependencies": {
     "@aurodesignsystem/design-tokens": "^4.9.2",

src/auro-menu.js

@@ -12,7 +12,6 @@ import tokensCss from "./tokens-css.js";
 import AuroLibraryRuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
 
 import './auro-menuoption.js';
-import "mark.js/dist/mark.es6.min.js";
 
 // See https://git.io/JJ6SJ for "How to document your components using JSDoc"
 /**
@@ -57,6 +56,11 @@ export class AuroMenu extends LitElement {
      * @private
      */
     this.runtimeUtils = new AuroLibraryRuntimeUtils();
+
+    /**
+     * @private
+     */
+    this.nestingSpacer = '<span class="nestingSpacer"></span>';
   }
 
   static get properties() {
@@ -157,26 +161,22 @@ export class AuroMenu extends LitElement {
    * @returns {void} When called will update the DOM with visible suggest text matches.
    */
   markOptions() {
-    if (this.items && this.items.length > 0) {
-      let itemsToMark = []; // eslint-disable-line prefer-const
+    if (this.items && this.items.length > 0 && (this.matchWord && this.matchWord.length > 0)) {
+
+      // Escape special regex characters
+      const escapedWord = this.matchWord.replace(/[.*+?^${}()|[\]\\]/gu, '\\$&');
+
+      // Global, case-insensitive, unicode matching regex pattern
+      const regexWord = new RegExp(escapedWord, 'giu');
 
       this.items.forEach((item) => {
         if (this.optionInteractive(item) && !item.hasAttribute('persistent')) {
-          itemsToMark.push(item);
+          const nested = item.querySelectorAll('.nestingSpacer');
+          const nestingSpacerBundle = [...nested].map(() => this.nestingSpacer).join('');
+
+          item.innerHTML = nestingSpacerBundle + item.textContent.replace(regexWord, (match) => `<strong>${match}</strong>`);
         }
       });
-
-      const markInstance = new Mark(itemsToMark); // eslint-disable-line
-
-      markInstance.unmark();
-
-      if (this.matchWord && this.matchWord.length > 0) {
-        markInstance.mark(this.matchWord, {
-          'element': 'strong',
-          'separateWordSearch': false,
-          'acrossElements': true
-        });
-      }
     }
   }
 
@@ -390,7 +390,7 @@ export class AuroMenu extends LitElement {
       const options = nestedMenu.querySelectorAll(':scope > auro-menuoption, :scope > [auro-menuoption');
 
       options.forEach((option) => {
-        option.innerHTML = `<span class="nestingSpacer"></span> ${option.innerHTML}`;
+        option.innerHTML = this.nestingSpacer + option.innerHTML;
       });
 
       this.handleNestedMenus(nestedMenu);

src/style-menuoption.scss

@@ -33,7 +33,7 @@
   }
 
   [auro-icon] {
-    --ds-auro-icon-size: var(--ds-size-300, $ds-size-300);
+    --ds-auro-icon-size: var(--ds-size-300, #{$ds-size-300});
     margin-right: var(--ds-size-150, $ds-size-150);
     margin-left: var(--ds-size-100, $ds-size-100);
   }