@backstage/plugin-search-react 1.8.0-next.1 → 1.8.0

package/CHANGELOG.md

@@ -1,5 +1,43 @@
 # @backstage/plugin-search-react
 
+## 1.8.0
+
+### Minor Changes
+
+- 9d66d8c: Make use of the `useApp` hook to retrieve the specified search icon in the SearchBar
+
+### Patch Changes
+
+- fec8b57: Updated exports to use the new type parameters for extensions and extension blueprints.
+- f26ff99: Slight type tweak to match newer React versions better
+- dbbd93e: Internal update to match recent React types
+- 836127c: Updated dependency `@testing-library/react` to `^16.0.0`.
+- 5446061: The `/alpha` export no longer export extension creators for the new frontend system, existing usage should be switched to use the equivalent extension blueprint instead. For more information see the [new frontend system 1.30 migration documentation](https://backstage.io/docs/frontend-system/architecture/migrations#130).
+- a159180: Added missing items to `overridableComponents`
+- Updated dependencies
+  - @backstage/core-components@0.15.0
+  - @backstage/frontend-plugin-api@0.8.0
+  - @backstage/core-plugin-api@1.9.4
+  - @backstage/theme@0.5.7
+  - @backstage/version-bridge@1.0.9
+  - @backstage/types@1.1.1
+  - @backstage/plugin-search-common@1.2.14
+
+## 1.8.0-next.2
+
+### Patch Changes
+
+- dbbd93e: Internal update to match recent React types
+- 836127c: Updated dependency `@testing-library/react` to `^16.0.0`.
+- Updated dependencies
+  - @backstage/core-components@0.14.11-next.1
+  - @backstage/core-plugin-api@1.9.4-next.0
+  - @backstage/frontend-plugin-api@0.8.0-next.2
+  - @backstage/theme@0.5.7-next.0
+  - @backstage/version-bridge@1.0.9-next.0
+  - @backstage/types@1.1.1
+  - @backstage/plugin-search-common@1.2.14
+
 ## 1.8.0-next.1
 
 ### Patch Changes

package/alpha/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/plugin-search-react__alpha",
-  "version": "1.8.0-next.1",
+  "version": "1.8.0",
   "main": "../dist/alpha.esm.js",
   "module": "../dist/alpha.esm.js",
   "types": "../dist/alpha.d.ts"

package/dist/components/HighlightedSearchResultText/HighlightedSearchResultText.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"HighlightedSearchResultText.esm.js","sources":["../../../src/components/HighlightedSearchResultText/HighlightedSearchResultText.tsx"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React, { useMemo } from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\n\nconst useStyles = makeStyles(\n  () => ({\n    highlight: {},\n  }),\n  { name: 'BackstageHighlightedSearchResultText' },\n);\n\n/**\n * Props for {@link HighlightedSearchResultText}.\n *\n * @public\n */\nexport type HighlightedSearchResultTextProps = {\n  text: string;\n  preTag: string;\n  postTag: string;\n};\n\n/**\n * @public\n */\nexport const HighlightedSearchResultText = (\n  props: HighlightedSearchResultTextProps,\n) => {\n  const { text, preTag, postTag } = props;\n\n  const classes = useStyles();\n  const terms = useMemo(\n    () => text.split(new RegExp(`(${preTag}.+?${postTag})`)),\n    [postTag, preTag, text],\n  );\n\n  return (\n    <>\n      {terms.map((t, idx) =>\n        t.includes(preTag) ? (\n          <mark className={classes.highlight} key={idx}>\n            {t.replace(new RegExp(`${preTag}|${postTag}`, 'g'), '')}\n          </mark>\n        ) : (\n          t\n        ),\n      )}\n    </>\n  );\n};\n"],"names":[],"mappings":";;;AAmBA,MAAM,SAAY,GAAA,UAAA;AAAA,EAChB,OAAO;AAAA,IACL,WAAW,EAAC;AAAA,GACd,CAAA;AAAA,EACA,EAAE,MAAM,sCAAuC,EAAA;AACjD,CAAA,CAAA;AAgBa,MAAA,2BAAA,GAA8B,CACzC,KACG,KAAA;AACH,EAAA,MAAM,EAAE,IAAA,EAAM,MAAQ,EAAA,OAAA,EAAY,GAAA,KAAA,CAAA;AAElC,EAAA,MAAM,UAAU,SAAU,EAAA,CAAA;AAC1B,EAAA,MAAM,KAAQ,GAAA,OAAA;AAAA,IACZ,MAAM,IAAK,CAAA,KAAA,CAAM,IAAI,MAAA,CAAO,IAAI,MAAM,CAAA,GAAA,EAAM,OAAO,CAAA,CAAA,CAAG,CAAC,CAAA;AAAA,IACvD,CAAC,OAAS,EAAA,MAAA,EAAQ,IAAI,CAAA;AAAA,GACxB,CAAA;AAEA,EAAA,iEAEK,KAAM,CAAA,GAAA;AAAA,IAAI,CAAC,CAAG,EAAA,GAAA,KACb,CAAE,CAAA,QAAA,CAAS,MAAM,CAAA,mBACd,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAK,SAAW,EAAA,OAAA,CAAQ,SAAW,EAAA,GAAA,EAAK,GACtC,EAAA,EAAA,CAAA,CAAE,OAAQ,CAAA,IAAI,MAAO,CAAA,CAAA,EAAG,MAAM,CAAA,CAAA,EAAI,OAAO,CAAA,CAAA,EAAI,GAAG,CAAA,EAAG,EAAE,CACxD,CAEA,GAAA,CAAA;AAAA,GAGN,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"HighlightedSearchResultText.esm.js","sources":["../../../src/components/HighlightedSearchResultText/HighlightedSearchResultText.tsx"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React, { useMemo } from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\n\n/** @public */\nexport type HighlightedSearchResultTextClassKey = 'highlight';\n\nconst useStyles = makeStyles(\n  () => ({\n    highlight: {},\n  }),\n  { name: 'BackstageHighlightedSearchResultText' },\n);\n\n/**\n * Props for {@link HighlightedSearchResultText}.\n *\n * @public\n */\nexport type HighlightedSearchResultTextProps = {\n  text: string;\n  preTag: string;\n  postTag: string;\n};\n\n/**\n * @public\n */\nexport const HighlightedSearchResultText = (\n  props: HighlightedSearchResultTextProps,\n) => {\n  const { text, preTag, postTag } = props;\n\n  const classes = useStyles();\n  const terms = useMemo(\n    () => text.split(new RegExp(`(${preTag}.+?${postTag})`)),\n    [postTag, preTag, text],\n  );\n\n  return (\n    <>\n      {terms.map((t, idx) =>\n        t.includes(preTag) ? (\n          <mark className={classes.highlight} key={idx}>\n            {t.replace(new RegExp(`${preTag}|${postTag}`, 'g'), '')}\n          </mark>\n        ) : (\n          t\n        ),\n      )}\n    </>\n  );\n};\n"],"names":[],"mappings":";;;AAsBA,MAAM,SAAY,GAAA,UAAA;AAAA,EAChB,OAAO;AAAA,IACL,WAAW,EAAC;AAAA,GACd,CAAA;AAAA,EACA,EAAE,MAAM,sCAAuC,EAAA;AACjD,CAAA,CAAA;AAgBa,MAAA,2BAAA,GAA8B,CACzC,KACG,KAAA;AACH,EAAA,MAAM,EAAE,IAAA,EAAM,MAAQ,EAAA,OAAA,EAAY,GAAA,KAAA,CAAA;AAElC,EAAA,MAAM,UAAU,SAAU,EAAA,CAAA;AAC1B,EAAA,MAAM,KAAQ,GAAA,OAAA;AAAA,IACZ,MAAM,IAAK,CAAA,KAAA,CAAM,IAAI,MAAA,CAAO,IAAI,MAAM,CAAA,GAAA,EAAM,OAAO,CAAA,CAAA,CAAG,CAAC,CAAA;AAAA,IACvD,CAAC,OAAS,EAAA,MAAA,EAAQ,IAAI,CAAA;AAAA,GACxB,CAAA;AAEA,EAAA,iEAEK,KAAM,CAAA,GAAA;AAAA,IAAI,CAAC,CAAG,EAAA,GAAA,KACb,CAAE,CAAA,QAAA,CAAS,MAAM,CAAA,mBACd,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAK,SAAW,EAAA,OAAA,CAAQ,SAAW,EAAA,GAAA,EAAK,GACtC,EAAA,EAAA,CAAA,CAAE,OAAQ,CAAA,IAAI,MAAO,CAAA,CAAA,EAAG,MAAM,CAAA,CAAA,EAAI,OAAO,CAAA,CAAA,EAAI,GAAG,CAAA,EAAG,EAAE,CACxD,CAEA,GAAA,CAAA;AAAA,GAGN,CAAA,CAAA;AAEJ;;;;"}

package/dist/components/SearchBar/SearchBar.esm.js

@@ -6,156 +6,149 @@ import Button from '@material-ui/core/Button';
 import DefaultSearchIcon from '@material-ui/icons/Search';
 import React, { forwardRef, useState, useRef, useEffect, useCallback } from 'react';
 import useDebounce from 'react-use/esm/useDebounce';
-import { useSearch, SearchContextProvider } from '../../context/SearchContext.esm.js';
+import { SearchContextProvider, useSearch } from '../../context/SearchContext.esm.js';
 
-function withContext(Component) {
-  return forwardRef((props, ref) => /* @__PURE__ */ React.createElement(SearchContextProvider, { inheritParentContextIfAvailable: true }, /* @__PURE__ */ React.createElement(Component, { ...props, ref })));
-}
-const SearchBarBase = withContext(
-  forwardRef((props, ref) => {
-    const {
-      onChange,
-      onKeyDown = () => {
-      },
-      onClear = () => {
-      },
-      onSubmit = () => {
-      },
-      debounceTime = 200,
-      clearButton = true,
-      fullWidth = true,
-      value: defaultValue,
-      label,
-      placeholder,
-      inputProps = {},
-      InputProps = {},
-      endAdornment,
-      ...rest
-    } = props;
-    const configApi = useApi(configApiRef);
-    const [value, setValue] = useState("");
-    const forwardedValueRef = useRef("");
-    useEffect(() => {
-      setValue((prevValue) => {
-        if (prevValue === forwardedValueRef.current) {
-          return String(defaultValue);
+const SearchBarBase = forwardRef((props, ref) => {
+  const {
+    onChange,
+    onKeyDown = () => {
+    },
+    onClear = () => {
+    },
+    onSubmit = () => {
+    },
+    debounceTime = 200,
+    clearButton = true,
+    fullWidth = true,
+    value: defaultValue,
+    label,
+    placeholder,
+    inputProps = {},
+    InputProps = {},
+    endAdornment,
+    ...rest
+  } = props;
+  const configApi = useApi(configApiRef);
+  const [value, setValue] = useState("");
+  const forwardedValueRef = useRef("");
+  useEffect(() => {
+    setValue((prevValue) => {
+      if (prevValue === forwardedValueRef.current) {
+        return String(defaultValue);
+      }
+      return prevValue;
+    });
+  }, [defaultValue, forwardedValueRef]);
+  useDebounce(
+    () => {
+      forwardedValueRef.current = value;
+      onChange(value);
+    },
+    debounceTime,
+    [value]
+  );
+  const handleChange = useCallback(
+    (e) => {
+      setValue(e.target.value);
+    },
+    [setValue]
+  );
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (onKeyDown) onKeyDown(e);
+      if (onSubmit && e.key === "Enter") {
+        onSubmit();
+      }
+    },
+    [onKeyDown, onSubmit]
+  );
+  const handleClear = useCallback(() => {
+    forwardedValueRef.current = "";
+    onChange("");
+    setValue("");
+    if (onClear) {
+      onClear();
+    }
+  }, [onChange, onClear]);
+  const ariaLabel = label ? void 0 : "Search";
+  const inputPlaceholder = placeholder ?? `Search in ${configApi.getOptionalString("app.title") || "Backstage"}`;
+  const SearchIcon = useApp().getSystemIcon("search") || DefaultSearchIcon;
+  const startAdornment = /* @__PURE__ */ React.createElement(InputAdornment, { position: "start" }, /* @__PURE__ */ React.createElement(IconButton, { "aria-label": "Query", size: "small", disabled: true }, /* @__PURE__ */ React.createElement(SearchIcon, null)));
+  const clearButtonEndAdornment = /* @__PURE__ */ React.createElement(InputAdornment, { position: "end" }, /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      "aria-label": "Clear",
+      size: "small",
+      onClick: handleClear,
+      onKeyDown: (event) => {
+        if (event.key === "Enter") {
+          event.stopPropagation();
         }
-        return prevValue;
-      });
-    }, [defaultValue, forwardedValueRef]);
-    useDebounce(
-      () => {
-        forwardedValueRef.current = value;
-        onChange(value);
-      },
-      debounceTime,
-      [value]
-    );
-    const handleChange = useCallback(
-      (e) => {
-        setValue(e.target.value);
+      }
+    },
+    "Clear"
+  ));
+  return /* @__PURE__ */ React.createElement(SearchContextProvider, { inheritParentContextIfAvailable: true }, /* @__PURE__ */ React.createElement(
+    TextField,
+    {
+      id: "search-bar-text-field",
+      "data-testid": "search-bar-next",
+      variant: "outlined",
+      margin: "normal",
+      inputRef: ref,
+      value,
+      label,
+      placeholder: inputPlaceholder,
+      InputProps: {
+        startAdornment,
+        endAdornment: clearButton ? clearButtonEndAdornment : endAdornment,
+        ...InputProps
       },
-      [setValue]
-    );
-    const handleKeyDown = useCallback(
-      (e) => {
-        if (onKeyDown) onKeyDown(e);
-        if (onSubmit && e.key === "Enter") {
-          onSubmit();
-        }
+      inputProps: {
+        "aria-label": ariaLabel,
+        ...inputProps
       },
-      [onKeyDown, onSubmit]
-    );
-    const handleClear = useCallback(() => {
-      forwardedValueRef.current = "";
-      onChange("");
-      setValue("");
-      if (onClear) {
-        onClear();
+      fullWidth,
+      onChange: handleChange,
+      onKeyDown: handleKeyDown,
+      ...rest
+    }
+  ));
+});
+const SearchBar = forwardRef((props, ref) => {
+  const { value: initialValue = "", onChange, ...rest } = props;
+  const { term, setTerm } = useSearch();
+  useEffect(() => {
+    if (initialValue) {
+      setTerm(String(initialValue));
+    }
+  }, [initialValue, setTerm]);
+  const handleChange = useCallback(
+    (newValue) => {
+      if (onChange) {
+        onChange(newValue);
+      } else {
+        setTerm(newValue);
       }
-    }, [onChange, onClear]);
-    const ariaLabel = label ? void 0 : "Search";
-    const inputPlaceholder = placeholder ?? `Search in ${configApi.getOptionalString("app.title") || "Backstage"}`;
-    const SearchIcon = useApp().getSystemIcon("search") || DefaultSearchIcon;
-    const startAdornment = /* @__PURE__ */ React.createElement(InputAdornment, { position: "start" }, /* @__PURE__ */ React.createElement(IconButton, { "aria-label": "Query", size: "small", disabled: true }, /* @__PURE__ */ React.createElement(SearchIcon, null)));
-    const clearButtonEndAdornment = /* @__PURE__ */ React.createElement(InputAdornment, { position: "end" }, /* @__PURE__ */ React.createElement(
-      Button,
+    },
+    [onChange, setTerm]
+  );
+  return /* @__PURE__ */ React.createElement(SearchContextProvider, { inheritParentContextIfAvailable: true }, /* @__PURE__ */ React.createElement(
+    AnalyticsContext,
+    {
+      attributes: { pluginId: "search", extension: "SearchBar" }
+    },
+    /* @__PURE__ */ React.createElement(
+      SearchBarBase,
       {
-        "aria-label": "Clear",
-        size: "small",
-        onClick: handleClear,
-        onKeyDown: (event) => {
-          if (event.key === "Enter") {
-            event.stopPropagation();
-          }
-        }
-      },
-      "Clear"
-    ));
-    return /* @__PURE__ */ React.createElement(
-      TextField,
-      {
-        id: "search-bar-text-field",
-        "data-testid": "search-bar-next",
-        variant: "outlined",
-        margin: "normal",
-        inputRef: ref,
-        value,
-        label,
-        placeholder: inputPlaceholder,
-        InputProps: {
-          startAdornment,
-          endAdornment: clearButton ? clearButtonEndAdornment : endAdornment,
-          ...InputProps
-        },
-        inputProps: {
-          "aria-label": ariaLabel,
-          ...inputProps
-        },
-        fullWidth,
-        onChange: handleChange,
-        onKeyDown: handleKeyDown,
-        ...rest
-      }
-    );
-  })
-);
-const SearchBar = withContext(
-  forwardRef((props, ref) => {
-    const { value: initialValue = "", onChange, ...rest } = props;
-    const { term, setTerm } = useSearch();
-    useEffect(() => {
-      if (initialValue) {
-        setTerm(String(initialValue));
+        ...rest,
+        ref,
+        value: term,
+        onChange: handleChange
       }
-    }, [initialValue, setTerm]);
-    const handleChange = useCallback(
-      (newValue) => {
-        if (onChange) {
-          onChange(newValue);
-        } else {
-          setTerm(newValue);
-        }
-      },
-      [onChange, setTerm]
-    );
-    return /* @__PURE__ */ React.createElement(
-      AnalyticsContext,
-      {
-        attributes: { pluginId: "search", extension: "SearchBar" }
-      },
-      /* @__PURE__ */ React.createElement(
-        SearchBarBase,
-        {
-          ...rest,
-          ref,
-          value: term,
-          onChange: handleChange
-        }
-      )
-    );
-  })
-);
+    )
+  ));
+});
 
 export { SearchBar, SearchBarBase };
 //# sourceMappingURL=SearchBar.esm.js.map

package/dist/components/SearchBar/SearchBar.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBar.esm.js","sources":["../../../src/components/SearchBar/SearchBar.tsx"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport {\n  AnalyticsContext,\n  configApiRef,\n  useApi,\n  useApp,\n} from '@backstage/core-plugin-api';\nimport IconButton from '@material-ui/core/IconButton';\nimport InputAdornment from '@material-ui/core/InputAdornment';\nimport TextField from '@material-ui/core/TextField';\nimport Button from '@material-ui/core/Button';\nimport { TextFieldProps } from '@material-ui/core/TextField';\nimport DefaultSearchIcon from '@material-ui/icons/Search';\nimport React, {\n  ChangeEvent,\n  ComponentType,\n  forwardRef,\n  KeyboardEvent,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport useDebounce from 'react-use/esm/useDebounce';\n\nimport { SearchContextProvider, useSearch } from '../../context';\n\nfunction withContext<T>(Component: ComponentType<T>) {\n  return forwardRef<HTMLDivElement, T>((props, ref) => (\n    <SearchContextProvider inheritParentContextIfAvailable>\n      <Component {...props} ref={ref} />\n    </SearchContextProvider>\n  ));\n}\n\n/**\n * Props for {@link SearchBarBase}.\n *\n * @public\n */\nexport type SearchBarBaseProps = Omit<TextFieldProps, 'onChange'> & {\n  debounceTime?: number;\n  clearButton?: boolean;\n  onClear?: () => void;\n  onSubmit?: () => void;\n  onChange: (value: string) => void;\n  endAdornment?: React.ReactNode;\n};\n\n/**\n * All search boxes exported by the search plugin are based on the <SearchBarBase />,\n * and this one is based on the <InputBase /> component from Material UI.\n * Recommended if you don't use Search Provider or Search Context.\n *\n * @public\n */\nexport const SearchBarBase = withContext(\n  forwardRef<HTMLDivElement, SearchBarBaseProps>((props, ref) => {\n    const {\n      onChange,\n      onKeyDown = () => {},\n      onClear = () => {},\n      onSubmit = () => {},\n      debounceTime = 200,\n      clearButton = true,\n      fullWidth = true,\n      value: defaultValue,\n      label,\n      placeholder,\n      inputProps = {},\n      InputProps = {},\n      endAdornment,\n      ...rest\n    } = props;\n\n    const configApi = useApi(configApiRef);\n    const [value, setValue] = useState<string>('');\n    const forwardedValueRef = useRef<string>('');\n\n    useEffect(() => {\n      setValue(prevValue => {\n        // We only update the value if our current value is the same as it was\n        // for the most recent onChange call. Otherwise it means that the users\n        // has continued typing and we should not replace their input.\n        if (prevValue === forwardedValueRef.current) {\n          return String(defaultValue);\n        }\n        return prevValue;\n      });\n    }, [defaultValue, forwardedValueRef]);\n\n    useDebounce(\n      () => {\n        forwardedValueRef.current = value;\n        onChange(value);\n      },\n      debounceTime,\n      [value],\n    );\n\n    const handleChange = useCallback(\n      (e: ChangeEvent<HTMLInputElement>) => {\n        setValue(e.target.value);\n      },\n      [setValue],\n    );\n\n    const handleKeyDown = useCallback(\n      (e: KeyboardEvent<HTMLDivElement>) => {\n        if (onKeyDown) onKeyDown(e);\n        if (onSubmit && e.key === 'Enter') {\n          onSubmit();\n        }\n      },\n      [onKeyDown, onSubmit],\n    );\n\n    const handleClear = useCallback(() => {\n      forwardedValueRef.current = '';\n      onChange('');\n      setValue('');\n      if (onClear) {\n        onClear();\n      }\n    }, [onChange, onClear]);\n\n    const ariaLabel: string | undefined = label ? undefined : 'Search';\n\n    const inputPlaceholder =\n      placeholder ??\n      `Search in ${configApi.getOptionalString('app.title') || 'Backstage'}`;\n\n    const SearchIcon = useApp().getSystemIcon('search') || DefaultSearchIcon;\n\n    const startAdornment = (\n      <InputAdornment position=\"start\">\n        <IconButton aria-label=\"Query\" size=\"small\" disabled>\n          <SearchIcon />\n        </IconButton>\n      </InputAdornment>\n    );\n\n    const clearButtonEndAdornment = (\n      <InputAdornment position=\"end\">\n        <Button\n          aria-label=\"Clear\"\n          size=\"small\"\n          onClick={handleClear}\n          onKeyDown={event => {\n            if (event.key === 'Enter') {\n              // write your functionality here\n              event.stopPropagation();\n            }\n          }}\n        >\n          Clear\n        </Button>\n      </InputAdornment>\n    );\n\n    return (\n      <TextField\n        id=\"search-bar-text-field\"\n        data-testid=\"search-bar-next\"\n        variant=\"outlined\"\n        margin=\"normal\"\n        inputRef={ref}\n        value={value}\n        label={label}\n        placeholder={inputPlaceholder}\n        InputProps={{\n          startAdornment,\n          endAdornment: clearButton ? clearButtonEndAdornment : endAdornment,\n          ...InputProps,\n        }}\n        inputProps={{\n          'aria-label': ariaLabel,\n          ...inputProps,\n        }}\n        fullWidth={fullWidth}\n        onChange={handleChange}\n        onKeyDown={handleKeyDown}\n        {...rest}\n      />\n    );\n  }),\n);\n\n/**\n * Props for {@link SearchBar}.\n *\n * @public\n */\nexport type SearchBarProps = Partial<SearchBarBaseProps>;\n\n/**\n * Recommended search bar when you use the Search Provider or Search Context.\n *\n * @public\n */\nexport const SearchBar = withContext(\n  forwardRef<HTMLDivElement, SearchBarProps>((props, ref) => {\n    const { value: initialValue = '', onChange, ...rest } = props;\n\n    const { term, setTerm } = useSearch();\n\n    useEffect(() => {\n      if (initialValue) {\n        setTerm(String(initialValue));\n      }\n    }, [initialValue, setTerm]);\n\n    const handleChange = useCallback(\n      (newValue: string) => {\n        if (onChange) {\n          onChange(newValue);\n        } else {\n          setTerm(newValue);\n        }\n      },\n      [onChange, setTerm],\n    );\n\n    return (\n      <AnalyticsContext\n        attributes={{ pluginId: 'search', extension: 'SearchBar' }}\n      >\n        <SearchBarBase\n          {...rest}\n          ref={ref}\n          value={term}\n          onChange={handleChange}\n        />\n      </AnalyticsContext>\n    );\n  }),\n);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"SearchBar.esm.js","sources":["../../../src/components/SearchBar/SearchBar.tsx"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport {\n  AnalyticsContext,\n  configApiRef,\n  useApi,\n  useApp,\n} from '@backstage/core-plugin-api';\nimport IconButton from '@material-ui/core/IconButton';\nimport InputAdornment from '@material-ui/core/InputAdornment';\nimport TextField from '@material-ui/core/TextField';\nimport Button from '@material-ui/core/Button';\nimport { TextFieldProps } from '@material-ui/core/TextField';\nimport DefaultSearchIcon from '@material-ui/icons/Search';\nimport React, {\n  ChangeEvent,\n  forwardRef,\n  KeyboardEvent,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport useDebounce from 'react-use/esm/useDebounce';\nimport { SearchContextProvider, useSearch } from '../../context';\n\n/**\n * Props for {@link SearchBarBase}.\n *\n * @public\n */\nexport type SearchBarBaseProps = Omit<TextFieldProps, 'onChange'> & {\n  debounceTime?: number;\n  clearButton?: boolean;\n  onClear?: () => void;\n  onSubmit?: () => void;\n  onChange: (value: string) => void;\n  endAdornment?: React.ReactNode;\n};\n\n/**\n * All search boxes exported by the search plugin are based on the <SearchBarBase />,\n * and this one is based on the <InputBase /> component from Material UI.\n * Recommended if you don't use Search Provider or Search Context.\n *\n * @public\n */\nexport const SearchBarBase = forwardRef((props: SearchBarBaseProps, ref) => {\n  const {\n    onChange,\n    onKeyDown = () => {},\n    onClear = () => {},\n    onSubmit = () => {},\n    debounceTime = 200,\n    clearButton = true,\n    fullWidth = true,\n    value: defaultValue,\n    label,\n    placeholder,\n    inputProps = {},\n    InputProps = {},\n    endAdornment,\n    ...rest\n  } = props;\n\n  const configApi = useApi(configApiRef);\n  const [value, setValue] = useState<string>('');\n  const forwardedValueRef = useRef<string>('');\n\n  useEffect(() => {\n    setValue(prevValue => {\n      // We only update the value if our current value is the same as it was\n      // for the most recent onChange call. Otherwise it means that the users\n      // has continued typing and we should not replace their input.\n      if (prevValue === forwardedValueRef.current) {\n        return String(defaultValue);\n      }\n      return prevValue;\n    });\n  }, [defaultValue, forwardedValueRef]);\n\n  useDebounce(\n    () => {\n      forwardedValueRef.current = value;\n      onChange(value);\n    },\n    debounceTime,\n    [value],\n  );\n\n  const handleChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      setValue(e.target.value);\n    },\n    [setValue],\n  );\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLDivElement>) => {\n      if (onKeyDown) onKeyDown(e);\n      if (onSubmit && e.key === 'Enter') {\n        onSubmit();\n      }\n    },\n    [onKeyDown, onSubmit],\n  );\n\n  const handleClear = useCallback(() => {\n    forwardedValueRef.current = '';\n    onChange('');\n    setValue('');\n    if (onClear) {\n      onClear();\n    }\n  }, [onChange, onClear]);\n\n  const ariaLabel: string | undefined = label ? undefined : 'Search';\n\n  const inputPlaceholder =\n    placeholder ??\n    `Search in ${configApi.getOptionalString('app.title') || 'Backstage'}`;\n\n  const SearchIcon = useApp().getSystemIcon('search') || DefaultSearchIcon;\n\n  const startAdornment = (\n    <InputAdornment position=\"start\">\n      <IconButton aria-label=\"Query\" size=\"small\" disabled>\n        <SearchIcon />\n      </IconButton>\n    </InputAdornment>\n  );\n\n  const clearButtonEndAdornment = (\n    <InputAdornment position=\"end\">\n      <Button\n        aria-label=\"Clear\"\n        size=\"small\"\n        onClick={handleClear}\n        onKeyDown={event => {\n          if (event.key === 'Enter') {\n            // write your functionality here\n            event.stopPropagation();\n          }\n        }}\n      >\n        Clear\n      </Button>\n    </InputAdornment>\n  );\n\n  return (\n    <SearchContextProvider inheritParentContextIfAvailable>\n      <TextField\n        id=\"search-bar-text-field\"\n        data-testid=\"search-bar-next\"\n        variant=\"outlined\"\n        margin=\"normal\"\n        inputRef={ref}\n        value={value}\n        label={label}\n        placeholder={inputPlaceholder}\n        InputProps={{\n          startAdornment,\n          endAdornment: clearButton ? clearButtonEndAdornment : endAdornment,\n          ...InputProps,\n        }}\n        inputProps={{\n          'aria-label': ariaLabel,\n          ...inputProps,\n        }}\n        fullWidth={fullWidth}\n        onChange={handleChange}\n        onKeyDown={handleKeyDown}\n        {...rest}\n      />\n    </SearchContextProvider>\n  );\n});\n\n/**\n * Props for {@link SearchBar}.\n *\n * @public\n */\nexport type SearchBarProps = Partial<SearchBarBaseProps>;\n\n/**\n * Recommended search bar when you use the Search Provider or Search Context.\n *\n * @public\n */\nexport const SearchBar = forwardRef((props: SearchBarProps, ref) => {\n  const { value: initialValue = '', onChange, ...rest } = props;\n\n  const { term, setTerm } = useSearch();\n\n  useEffect(() => {\n    if (initialValue) {\n      setTerm(String(initialValue));\n    }\n  }, [initialValue, setTerm]);\n\n  const handleChange = useCallback(\n    (newValue: string) => {\n      if (onChange) {\n        onChange(newValue);\n      } else {\n        setTerm(newValue);\n      }\n    },\n    [onChange, setTerm],\n  );\n\n  return (\n    <SearchContextProvider inheritParentContextIfAvailable>\n      <AnalyticsContext\n        attributes={{ pluginId: 'search', extension: 'SearchBar' }}\n      >\n        <SearchBarBase\n          {...rest}\n          ref={ref}\n          value={term}\n          onChange={handleChange}\n        />\n      </AnalyticsContext>\n    </SearchContextProvider>\n  );\n});\n"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -90,6 +90,8 @@ type SearchResultListItemExtensionsProps = Omit<ListProps, 'results'> & {
  */
 declare const SearchResultListItemExtensions: (props: SearchResultListItemExtensionsProps) => React.JSX.Element;
 
+/** @public */
+type HighlightedSearchResultTextClassKey = 'highlight';
 /**
  * Props for {@link HighlightedSearchResultText}.
  *
@@ -125,7 +127,7 @@ type SearchBarBaseProps = Omit<TextFieldProps, 'onChange'> & {
  *
  * @public
  */
-declare const SearchBarBase: React.ForwardRefExoticComponent<Omit<Omit<SearchBarBaseProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SearchBarBase: React.ForwardRefExoticComponent<Omit<SearchBarBaseProps, "ref"> & React.RefAttributes<unknown>>;
 /**
  * Props for {@link SearchBar}.
  *
@@ -137,7 +139,7 @@ type SearchBarProps = Partial<SearchBarBaseProps>;
  *
  * @public
  */
-declare const SearchBar: React.ForwardRefExoticComponent<Omit<Omit<Partial<SearchBarBaseProps>, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SearchBar: React.ForwardRefExoticComponent<Omit<Partial<SearchBarBaseProps>, "ref"> & React.RefAttributes<unknown>>;
 
 /**
  * Props for {@link SearchAutocomplete}.
@@ -757,4 +759,4 @@ type SearchContextProviderProps = PropsWithChildren<{
  */
 declare const SearchContextProvider: (props: SearchContextProviderProps) => React.JSX.Element;
 
-export { AutocompleteFilter, CheckboxFilter, HigherOrderDefaultResultListItem as DefaultResultListItem, type DefaultResultListItemProps, HighlightedSearchResultText, type HighlightedSearchResultTextProps, MockSearchApi, type SearchApi, SearchAutocomplete, type SearchAutocompleteComponent, SearchAutocompleteDefaultOption, type SearchAutocompleteDefaultOptionProps, type SearchAutocompleteFilterProps, type SearchAutocompleteProps, SearchBar, SearchBarBase, type SearchBarBaseProps, type SearchBarProps, SearchContextProvider, type SearchContextProviderProps, type SearchContextState, type SearchContextValue, SearchFilter, type SearchFilterComponentProps, type SearchFilterWrapperProps, SearchPagination, SearchPaginationBase, type SearchPaginationBaseProps, type SearchPaginationLimitOption, type SearchPaginationLimitText, type SearchPaginationProps, SearchResult, SearchResultApi, type SearchResultApiProps, SearchResultComponent, SearchResultContext, type SearchResultContextProps, SearchResultGroup, SearchResultGroupFilterFieldLayout, type SearchResultGroupFilterFieldLayoutProps, type SearchResultGroupFilterFieldPropsWith, SearchResultGroupLayout, type SearchResultGroupLayoutProps, type SearchResultGroupProps, SearchResultGroupSelectFilterField, type SearchResultGroupSelectFilterFieldProps, SearchResultGroupTextFilterField, type SearchResultGroupTextFilterFieldProps, SearchResultList, type SearchResultListItemExtensionOptions, type SearchResultListItemExtensionProps, SearchResultListItemExtensions, type SearchResultListItemExtensionsProps, SearchResultListLayout, type SearchResultListLayoutProps, type SearchResultListProps, SearchResultPager, type SearchResultProps, SearchResultState, type SearchResultStateProps, SelectFilter, createSearchResultListItemExtension, searchApiRef, useSearch, useSearchContextCheck, useSearchResultListItemExtensions };
+export { AutocompleteFilter, CheckboxFilter, HigherOrderDefaultResultListItem as DefaultResultListItem, type DefaultResultListItemProps, HighlightedSearchResultText, type HighlightedSearchResultTextClassKey, type HighlightedSearchResultTextProps, MockSearchApi, type SearchApi, SearchAutocomplete, type SearchAutocompleteComponent, SearchAutocompleteDefaultOption, type SearchAutocompleteDefaultOptionProps, type SearchAutocompleteFilterProps, type SearchAutocompleteProps, SearchBar, SearchBarBase, type SearchBarBaseProps, type SearchBarProps, SearchContextProvider, type SearchContextProviderProps, type SearchContextState, type SearchContextValue, SearchFilter, type SearchFilterComponentProps, type SearchFilterWrapperProps, SearchPagination, SearchPaginationBase, type SearchPaginationBaseProps, type SearchPaginationLimitOption, type SearchPaginationLimitText, type SearchPaginationProps, SearchResult, SearchResultApi, type SearchResultApiProps, SearchResultComponent, SearchResultContext, type SearchResultContextProps, SearchResultGroup, SearchResultGroupFilterFieldLayout, type SearchResultGroupFilterFieldLayoutProps, type SearchResultGroupFilterFieldPropsWith, SearchResultGroupLayout, type SearchResultGroupLayoutProps, type SearchResultGroupProps, SearchResultGroupSelectFilterField, type SearchResultGroupSelectFilterFieldProps, SearchResultGroupTextFilterField, type SearchResultGroupTextFilterFieldProps, SearchResultList, type SearchResultListItemExtensionOptions, type SearchResultListItemExtensionProps, SearchResultListItemExtensions, type SearchResultListItemExtensionsProps, SearchResultListLayout, type SearchResultListLayoutProps, type SearchResultListProps, SearchResultPager, type SearchResultProps, SearchResultState, type SearchResultStateProps, SelectFilter, createSearchResultListItemExtension, searchApiRef, useSearch, useSearchContextCheck, useSearchResultListItemExtensions };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/plugin-search-react",
-  "version": "1.8.0-next.1",
+  "version": "1.8.0",
   "backstage": {
     "role": "web-library",
     "pluginId": "search",
@@ -55,13 +55,13 @@
     "test": "backstage-cli package test"
   },
   "dependencies": {
-    "@backstage/core-components": "^0.14.11-next.0",
-    "@backstage/core-plugin-api": "^1.9.3",
-    "@backstage/frontend-plugin-api": "^0.8.0-next.1",
+    "@backstage/core-components": "^0.15.0",
+    "@backstage/core-plugin-api": "^1.9.4",
+    "@backstage/frontend-plugin-api": "^0.8.0",
     "@backstage/plugin-search-common": "^1.2.14",
-    "@backstage/theme": "^0.5.6",
+    "@backstage/theme": "^0.5.7",
     "@backstage/types": "^1.1.1",
-    "@backstage/version-bridge": "^1.0.8",
+    "@backstage/version-bridge": "^1.0.9",
     "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "4.0.0-alpha.61",
@@ -71,14 +71,14 @@
     "react-use": "^17.3.2"
   },
   "devDependencies": {
-    "@backstage/cli": "^0.27.1-next.1",
-    "@backstage/core-app-api": "^1.14.2",
-    "@backstage/frontend-app-api": "^0.9.0-next.1",
-    "@backstage/frontend-test-utils": "^0.2.0-next.1",
-    "@backstage/test-utils": "^1.6.0-next.0",
+    "@backstage/cli": "^0.27.1",
+    "@backstage/core-app-api": "^1.15.0",
+    "@backstage/frontend-app-api": "^0.9.0",
+    "@backstage/frontend-test-utils": "^0.2.0",
+    "@backstage/test-utils": "^1.6.0",
     "@testing-library/dom": "^10.0.0",
     "@testing-library/jest-dom": "^6.0.0",
-    "@testing-library/react": "^15.0.0",
+    "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.0.0"
   },
   "peerDependencies": {