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

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @backstage/plugin-search-react
 
+## 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-next.2",
   "main": "../dist/alpha.esm.js",
   "module": "../dist/alpha.esm.js",
   "types": "../dist/alpha.d.ts"

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":";;;;;;;;;;AA0CA,SAAS,YAAe,SAA6B,EAAA;AACnD,EAAA,OAAO,UAA8B,CAAA,CAAC,KAAO,EAAA,GAAA,yCAC1C,qBAAsB,EAAA,EAAA,+BAAA,EAA+B,IACpD,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,SAAW,EAAA,EAAA,GAAG,KAAO,EAAA,GAAA,EAAU,CAClC,CACD,CAAA,CAAA;AACH,CAAA;AAuBO,MAAM,aAAgB,GAAA,WAAA;AAAA,EAC3B,UAAA,CAA+C,CAAC,KAAA,EAAO,GAAQ,KAAA;AAC7D,IAAM,MAAA;AAAA,MACJ,QAAA;AAAA,MACA,YAAY,MAAM;AAAA,OAAC;AAAA,MACnB,UAAU,MAAM;AAAA,OAAC;AAAA,MACjB,WAAW,MAAM;AAAA,OAAC;AAAA,MAClB,YAAe,GAAA,GAAA;AAAA,MACf,WAAc,GAAA,IAAA;AAAA,MACd,SAAY,GAAA,IAAA;AAAA,MACZ,KAAO,EAAA,YAAA;AAAA,MACP,KAAA;AAAA,MACA,WAAA;AAAA,MACA,aAAa,EAAC;AAAA,MACd,aAAa,EAAC;AAAA,MACd,YAAA;AAAA,MACA,GAAG,IAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAM,MAAA,SAAA,GAAY,OAAO,YAAY,CAAA,CAAA;AACrC,IAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAI,SAAiB,EAAE,CAAA,CAAA;AAC7C,IAAM,MAAA,iBAAA,GAAoB,OAAe,EAAE,CAAA,CAAA;AAE3C,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,QAAA,CAAS,CAAa,SAAA,KAAA;AAIpB,QAAI,IAAA,SAAA,KAAc,kBAAkB,OAAS,EAAA;AAC3C,UAAA,OAAO,OAAO,YAAY,CAAA,CAAA;AAAA,SAC5B;AACA,QAAO,OAAA,SAAA,CAAA;AAAA,OACR,CAAA,CAAA;AAAA,KACA,EAAA,CAAC,YAAc,EAAA,iBAAiB,CAAC,CAAA,CAAA;AAEpC,IAAA,WAAA;AAAA,MACE,MAAM;AACJ,QAAA,iBAAA,CAAkB,OAAU,GAAA,KAAA,CAAA;AAC5B,QAAA,QAAA,CAAS,KAAK,CAAA,CAAA;AAAA,OAChB;AAAA,MACA,YAAA;AAAA,MACA,CAAC,KAAK,CAAA;AAAA,KACR,CAAA;AAEA,IAAA,MAAM,YAAe,GAAA,WAAA;AAAA,MACnB,CAAC,CAAqC,KAAA;AACpC,QAAS,QAAA,CAAA,CAAA,CAAE,OAAO,KAAK,CAAA,CAAA;AAAA,OACzB;AAAA,MACA,CAAC,QAAQ,CAAA;AAAA,KACX,CAAA;AAEA,IAAA,MAAM,aAAgB,GAAA,WAAA;AAAA,MACpB,CAAC,CAAqC,KAAA;AACpC,QAAI,IAAA,SAAA,YAAqB,CAAC,CAAA,CAAA;AAC1B,QAAI,IAAA,QAAA,IAAY,CAAE,CAAA,GAAA,KAAQ,OAAS,EAAA;AACjC,UAAS,QAAA,EAAA,CAAA;AAAA,SACX;AAAA,OACF;AAAA,MACA,CAAC,WAAW,QAAQ,CAAA;AAAA,KACtB,CAAA;AAEA,IAAM,MAAA,WAAA,GAAc,YAAY,MAAM;AACpC,MAAA,iBAAA,CAAkB,OAAU,GAAA,EAAA,CAAA;AAC5B,MAAA,QAAA,CAAS,EAAE,CAAA,CAAA;AACX,MAAA,QAAA,CAAS,EAAE,CAAA,CAAA;AACX,MAAA,IAAI,OAAS,EAAA;AACX,QAAQ,OAAA,EAAA,CAAA;AAAA,OACV;AAAA,KACC,EAAA,CAAC,QAAU,EAAA,OAAO,CAAC,CAAA,CAAA;AAEtB,IAAM,MAAA,SAAA,GAAgC,QAAQ,KAAY,CAAA,GAAA,QAAA,CAAA;AAE1D,IAAA,MAAM,mBACJ,WACA,IAAA,CAAA,UAAA,EAAa,UAAU,iBAAkB,CAAA,WAAW,KAAK,WAAW,CAAA,CAAA,CAAA;AAEtE,IAAA,MAAM,UAAa,GAAA,MAAA,EAAS,CAAA,aAAA,CAAc,QAAQ,CAAK,IAAA,iBAAA,CAAA;AAEvD,IAAA,MAAM,iCACH,KAAA,CAAA,aAAA,CAAA,cAAA,EAAA,EAAe,QAAS,EAAA,OAAA,EAAA,sCACtB,UAAW,EAAA,EAAA,YAAA,EAAW,OAAQ,EAAA,IAAA,EAAK,SAAQ,QAAQ,EAAA,IAAA,EAAA,kBACjD,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,IAAW,CACd,CACF,CAAA,CAAA;AAGF,IAAA,MAAM,uBACJ,mBAAA,KAAA,CAAA,aAAA,CAAC,cAAe,EAAA,EAAA,QAAA,EAAS,KACvB,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,YAAW,EAAA,OAAA;AAAA,QACX,IAAK,EAAA,OAAA;AAAA,QACL,OAAS,EAAA,WAAA;AAAA,QACT,WAAW,CAAS,KAAA,KAAA;AAClB,UAAI,IAAA,KAAA,CAAM,QAAQ,OAAS,EAAA;AAEzB,YAAA,KAAA,CAAM,eAAgB,EAAA,CAAA;AAAA,WACxB;AAAA,SACF;AAAA,OAAA;AAAA,MACD,OAAA;AAAA,KAGH,CAAA,CAAA;AAGF,IACE,uBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACC,EAAG,EAAA,uBAAA;AAAA,QACH,aAAY,EAAA,iBAAA;AAAA,QACZ,OAAQ,EAAA,UAAA;AAAA,QACR,MAAO,EAAA,QAAA;AAAA,QACP,QAAU,EAAA,GAAA;AAAA,QACV,KAAA;AAAA,QACA,KAAA;AAAA,QACA,WAAa,EAAA,gBAAA;AAAA,QACb,UAAY,EAAA;AAAA,UACV,cAAA;AAAA,UACA,YAAA,EAAc,cAAc,uBAA0B,GAAA,YAAA;AAAA,UACtD,GAAG,UAAA;AAAA,SACL;AAAA,QACA,UAAY,EAAA;AAAA,UACV,YAAc,EAAA,SAAA;AAAA,UACd,GAAG,UAAA;AAAA,SACL;AAAA,QACA,SAAA;AAAA,QACA,QAAU,EAAA,YAAA;AAAA,QACV,SAAW,EAAA,aAAA;AAAA,QACV,GAAG,IAAA;AAAA,OAAA;AAAA,KACN,CAAA;AAAA,GAEH,CAAA;AACH,EAAA;AAcO,MAAM,SAAY,GAAA,WAAA;AAAA,EACvB,UAAA,CAA2C,CAAC,KAAA,EAAO,GAAQ,KAAA;AACzD,IAAA,MAAM,EAAE,KAAO,EAAA,YAAA,GAAe,IAAI,QAAU,EAAA,GAAG,MAAS,GAAA,KAAA,CAAA;AAExD,IAAA,MAAM,EAAE,IAAA,EAAM,OAAQ,EAAA,GAAI,SAAU,EAAA,CAAA;AAEpC,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,IAAI,YAAc,EAAA;AAChB,QAAQ,OAAA,CAAA,MAAA,CAAO,YAAY,CAAC,CAAA,CAAA;AAAA,OAC9B;AAAA,KACC,EAAA,CAAC,YAAc,EAAA,OAAO,CAAC,CAAA,CAAA;AAE1B,IAAA,MAAM,YAAe,GAAA,WAAA;AAAA,MACnB,CAAC,QAAqB,KAAA;AACpB,QAAA,IAAI,QAAU,EAAA;AACZ,UAAA,QAAA,CAAS,QAAQ,CAAA,CAAA;AAAA,SACZ,MAAA;AACL,UAAA,OAAA,CAAQ,QAAQ,CAAA,CAAA;AAAA,SAClB;AAAA,OACF;AAAA,MACA,CAAC,UAAU,OAAO,CAAA;AAAA,KACpB,CAAA;AAEA,IACE,uBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,gBAAA;AAAA,MAAA;AAAA,QACC,UAAY,EAAA,EAAE,QAAU,EAAA,QAAA,EAAU,WAAW,WAAY,EAAA;AAAA,OAAA;AAAA,sBAEzD,KAAA,CAAA,aAAA;AAAA,QAAC,aAAA;AAAA,QAAA;AAAA,UACE,GAAG,IAAA;AAAA,UACJ,GAAA;AAAA,UACA,KAAO,EAAA,IAAA;AAAA,UACP,QAAU,EAAA,YAAA;AAAA,SAAA;AAAA,OACZ;AAAA,KACF,CAAA;AAAA,GAEH,CAAA;AACH;;;;"}
+{"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

@@ -125,7 +125,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 +137,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}.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/plugin-search-react",
-  "version": "1.8.0-next.1",
+  "version": "1.8.0-next.2",
   "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.14.11-next.1",
+    "@backstage/core-plugin-api": "^1.9.4-next.0",
+    "@backstage/frontend-plugin-api": "^0.8.0-next.2",
     "@backstage/plugin-search-common": "^1.2.14",
-    "@backstage/theme": "^0.5.6",
+    "@backstage/theme": "^0.5.7-next.0",
     "@backstage/types": "^1.1.1",
-    "@backstage/version-bridge": "^1.0.8",
+    "@backstage/version-bridge": "^1.0.9-next.0",
     "@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-next.2",
+    "@backstage/core-app-api": "^1.14.3-next.0",
+    "@backstage/frontend-app-api": "^0.9.0-next.2",
+    "@backstage/frontend-test-utils": "^0.2.0-next.2",
+    "@backstage/test-utils": "^1.6.0-next.1",
     "@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": {