@spscommerce/ds-react 6.37.3 → 6.37.4

package/lib/index.es.js

@@ -2448,6 +2448,13 @@ const SpsOptionList = React.forwardRef((props2, ref2) => {
   }, [isOpen]);
   const maxHeight = maxHeightPx ? maxHeightPx / 16 : maxHeightRem;
   const optionsInlineStyles = maxHeight ? { maxHeight: `${maxHeight}rem` } : {};
+  function highlightText(text, pattern2) {
+    return pattern2 ? /* @__PURE__ */ React.createElement(React.Fragment, null, text.split(pattern2).map((part, partIdx) => pattern2.test(part) ? /* @__PURE__ */ React.createElement("u", {
+      key: partIdx
+    }, part) : /* @__PURE__ */ React.createElement(React.Fragment, {
+      key: partIdx
+    }, part))) : /* @__PURE__ */ React.createElement(React.Fragment, null, text);
+  }
   return portal(/* @__PURE__ */ React.createElement("div", __spreadValues({
     className: classes,
     id,
@@ -2486,17 +2493,9 @@ const SpsOptionList = React.forwardRef((props2, ref2) => {
       className: clsx("sps-icon", "sps-option-list__option-icon", `sps-icon-${String(option.value.icon)}`)
     }), (!option.value || !option.value.icon && anyOptionHasIcon) && /* @__PURE__ */ React.createElement("span", {
       className: "sps-option-list__option-icon-spacer"
-    }), /* @__PURE__ */ React.createElement("span", {
-      dangerouslySetInnerHTML: {
-        __html: option.getHtml(searchState.replacementPattern)
-      }
-    }), option.caption && /* @__PURE__ */ React.createElement("div", {
+    }), /* @__PURE__ */ React.createElement("span", null, highlightText(option.text, searchState.replacementPattern)), option.caption && /* @__PURE__ */ React.createElement("div", {
       className: "sps-option-list__option-caption"
-    }, /* @__PURE__ */ React.createElement("span", {
-      dangerouslySetInnerHTML: {
-        __html: option.caption.replace(searchState.replacementPattern, "<u>$&</u>")
-      }
-    })));
+    }, /* @__PURE__ */ React.createElement("span", null, highlightText(option.caption, searchState.replacementPattern))));
   })), specialActionOption && specialAction.label && /* @__PURE__ */ React.createElement("a", {
     className: clsx("sps-option-list__option", "sps-option-list__special-action", highlightedOptionIndex === optionList.length && "sps-option-list__option--highlighted", specialAction.disabled && "sps-option-list__special-action--disabled"),
     href: specialActionOption.href,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@spscommerce/ds-react",
   "description": "SPS Design System React components",
-  "version": "6.37.3",
+  "version": "6.37.4",
   "author": "SPS Commerce",
   "license": "UNLICENSED",
   "repository": "https://github.com/spscommerce/design-system/tree/main/packages/@spscommerce/ds-react",
@@ -65,6 +65,5 @@
     "watch": "vite build --watch",
     "clean": "git clean -fdX",
     "pub": "pnpm pack && node ../../scripts/publish-package.js"
-  },
-  "readme": "[//]: # \"START_AUTOGENERATED\"\n\n## [@spscommerce/ds-react](https://github.com/spscommerce/ui-angular/tree/master/packages/@spscommerce/ds-react#readme)\n\n![release: 1.1.0](https://img.shields.io/badge/release-1.1.0-blue.svg?style=flat-square)\n![build: passing](https://img.shields.io/badge/build-passing-green.svg?style=flat-square)\n![tests: failing](https://img.shields.io/badge/tests-failing-red.svg?style=flat-square)\n\nSPS Design System React components \n \n ### Installation \n \n ```shell\nnpm install --save @spscommerce/ds-react\n```\n\n#### Peer Dependencies\n\n<div class=\"row\">\n    <div class=\"col-5\"> \n    <table class=\"sps-table\">\n        <thead class=\"sps-table__head\">\n            <tr class=\"sps-table__row\">\n                <th class=\"sps-table__header\">\n                    <span class=\"sps-table__header-cell-body\">    \n                        Package\n                    </span>\n                </th>\n                <th class=\"sps-table__header text-right\">\n                    <span class=\"sps-table__header-cell-body\">    \n                        Version\n                    </span>\n                </th>\n            </tr>\n        </thead>\n        <tbody class=\"sps-table__body\">\n            <tr class=\"sps-table__row\"><td class=\"sps-table__cell\"><a href=\"https://github.com/spscommerce/design-system/tree/main/packages/@spscommerce/ds-shared#readme\">@spscommerce/ds-shared</a></td><td class=\"sps-table__cell text-right\">^1.1.0</td></tr>\n<tr class=\"sps-table__row\"><td class=\"sps-table__cell\"><a href=\"https://github.com/spscommerce/design-system/tree/main/packages/@spscommerce/positioning#readme\">@spscommerce/positioning</a></td><td class=\"sps-table__cell text-right\">^1.1.0</td></tr>\n<tr class=\"sps-table__row\"><td class=\"sps-table__cell\"><a href=\"https://github.com/spscommerce/design-system/tree/main/packages/@spscommerce/utils#readme\">@spscommerce/utils</a></td><td class=\"sps-table__cell text-right\">^1.1.0</td></tr>\n<tr class=\"sps-table__row\"><td class=\"sps-table__cell\"><a href=\"lukeed/clsx\">clsx</a></td><td class=\"sps-table__cell text-right\">^1.0.3</td></tr>\n<tr class=\"sps-table__row\"><td class=\"sps-table__cell\"><a href=\"https://momentjs.com\">moment</a></td><td class=\"sps-table__cell text-right\">^2.25.3</td></tr>\n<tr class=\"sps-table__row\"><td class=\"sps-table__cell\"><a href=\"http://momentjs.com/timezone/\">moment-timezone</a></td><td class=\"sps-table__cell text-right\">^0.5.28</td></tr>\n<tr class=\"sps-table__row\"><td class=\"sps-table__cell\"><a href=\"https://facebook.github.io/react/\">prop-types</a></td><td class=\"sps-table__cell text-right\">^15.7.2</td></tr>\n<tr class=\"sps-table__row\"><td class=\"sps-table__cell\"><a href=\"https://reactjs.org/\">react</a></td><td class=\"sps-table__cell text-right\">^16.9.0</td></tr>\n<tr class=\"sps-table__row\"><td class=\"sps-table__cell\"><a href=\"https://reactjs.org/\">react-dom</a></td><td class=\"sps-table__cell text-right\">^16.9.0</td></tr>\n<tr class=\"sps-table__row\"><td class=\"sps-table__cell\"><a href=\"https://scroll-into-view-if-needed.netlify.com\">scroll-into-view-if-needed</a></td><td class=\"sps-table__cell text-right\">^2.2.20</td></tr>\n        </tbody>\n    </table>\n    </div>\n    <div class=\"col-7\">\n        &nbsp;\n    </div>\n</div>\n\n[//]: # \"END_AUTOGENERATED\"\n"
+  }
 }