@vertigis/react-ui 11.25.0 → 11.26.1

package/Autocomplete/HighlightOption.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+export declare const highlightOptionClasses: {
+    highlight: string;
+};
+interface HighlightOptionProps extends React.HTMLAttributes<HTMLLIElement> {
+    /**
+     * The text that has been typed by the user.
+     */
+    inputText: string;
+    /**
+     * The label of the option being rendered.
+     */
+    optionText: string;
+}
+declare const HighlightOption: (props: HighlightOptionProps) => JSX.Element;
+export default HighlightOption;

package/Autocomplete/HighlightOption.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import match from "autosuggest-highlight/match";
+import parse from "autosuggest-highlight/parse";
+import { styled } from "../styles/index.js";
+const PREFIX = "GcxHighlightOption";
+export const highlightOptionClasses = {
+    highlight: `${PREFIX}-highlight`,
+};
+const Part = styled("span")(({ theme }) => ({
+    whiteSpace: "pre-wrap",
+    [`&.${highlightOptionClasses.highlight}`]: {
+        fontWeight: theme.typography.fontWeightBold,
+    },
+}));
+const HighlightOption = (props) => {
+    const { inputText, optionText, ...other } = props;
+    const matches = match(optionText, inputText, { insideWords: true });
+    const parts = parse(optionText, matches);
+    return (_jsx("li", { ...other, children: parts.map((part, index) => (_jsx(Part, { className: part.highlight ? highlightOptionClasses.highlight : undefined, children: part.text }, index))) }));
+};
+export default HighlightOption;

package/Autocomplete/index.d.ts

@@ -1,2 +1,3 @@
 export { default } from "@mui/material/Autocomplete";
 export * from "@mui/material/Autocomplete";
+export { default as HighlightOption } from "./HighlightOption.js";

package/Autocomplete/index.js

@@ -1,2 +1,3 @@
 export { default } from "@mui/material/Autocomplete";
 export * from "@mui/material/Autocomplete";
+export { default as HighlightOption } from "./HighlightOption.js";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@vertigis/react-ui",
-    "version": "11.25.0",
+    "version": "11.26.1",
     "description": "Utilities and React components used in VertiGIS applications.",
     "keywords": [
         "vertigis",
@@ -22,6 +22,7 @@
         "@mui/material": "5.11.12",
         "@mui/x-data-grid-pro": "5.17.22",
         "@mui/x-date-pickers-pro": "5.0.17",
+        "autosuggest-highlight": "^3.3.4",
         "clsx": "^1.2.1",
         "color": "^4.2.3",
         "lodash.escape": "^4.0.1",
@@ -33,6 +34,7 @@
     },
     "devDependencies": {
         "@esri/arcgis-html-sanitizer": "^3.0.1",
+        "@types/autosuggest-highlight": "^3.2.0",
         "@types/color": "^3.0.1",
         "@types/lodash.escape": "^4.0.1",
         "@types/lodash.merge": "^4.6.7",