@backstage/plugin-search 0.5.6 → 0.6.2-next.0

package/CHANGELOG.md

@@ -1,5 +1,63 @@
 # @backstage/plugin-search
 
+## 0.6.2-next.0
+
+### Patch Changes
+
+- faf49ba82f: Modify modal search to clamp result length to 5 rows.
+- Updated dependencies
+  - @backstage/core-components@0.8.8-next.0
+  - @backstage/plugin-catalog-react@0.6.14-next.0
+
+## 0.6.1
+
+### Patch Changes
+
+- Updated dependencies
+  - @backstage/core-components@0.8.7
+  - @backstage/plugin-catalog-react@0.6.13
+
+## 0.6.1-next.0
+
+### Patch Changes
+
+- Updated dependencies
+  - @backstage/core-components@0.8.7-next.0
+  - @backstage/plugin-catalog-react@0.6.13-next.0
+
+## 0.6.0
+
+### Minor Changes
+
+- 2f0d3d3278: Forwarding classes to HomePageSearchBar instead of using className prop. For custom styles of the HomePageSearchBar, use classes prop instead:
+
+  ```diff
+  <HomePageSearchBar
+  -  className={searchBar}
+  +  classes={{ root: classes.searchBar }}
+    placeholder="Search"
+  />
+  ```
+
+- 1dbe63ec39: The way labels are controlled on both the `<SearchFilter.Checkbox />` and
+  `<SearchFilter.Select />` components has changed. Previously, the string passed
+  on the `name` prop (which controls the field being filtered on) was also
+  rendered as the field label. Now, if you want a label rendered, it must be
+  passed on the new `label` prop. If no `label` is provided, no label will be
+  rendered.
+
+### Patch Changes
+
+- 4aca2a5307: Introduces a `<SearchFilter.Autocomplete />` variant, which can be used as either a single- or multi-select autocomplete filter.
+
+  This variant, as well as `<SearchFilter.Select />`, now also supports loading allowed values asynchronously by passing a function that resolves the list of values to the `values` prop. (An optional `valuesDebounceMs` prop may also be provided to control the debounce time).
+
+  Check the [search plugin storybook](https://backstage.io/storybook/?path=/story/plugins-search-searchfilter) to see how to leverage these new additions.
+
+- Updated dependencies
+  - @backstage/core-components@0.8.6
+  - @backstage/search-common@0.2.2
+
 ## 0.5.6
 
 ### Patch Changes

package/dist/esm/{index-207ebc98.esm.js → index-00471071.esm.js}

@@ -1,6 +1,6 @@
 import React, { useCallback, useState } from 'react';
 import { makeStyles } from '@material-ui/core/styles';
-import { r as rootRouteRef, b as SearchBarBase } from './index-1333c262.esm.js';
+import { r as rootRouteRef, b as SearchBarBase } from './index-43516303.esm.js';
 import qs from 'qs';
 import { useNavigate } from 'react-router-dom';
 import { useRouteRef } from '@backstage/core-plugin-api';
@@ -12,14 +12,16 @@ import '@material-ui/icons/Search';
 import '@material-ui/icons/Clear';
 import 'react-use/lib/useAsync';
 import 'react-use/lib/usePrevious';
+import '@material-ui/lab';
+import 'react-use/lib/useAsyncFn';
 import '@material-ui/icons/Launch';
 import '@backstage/core-components';
+import 'react-text-truncate';
 import '@material-ui/icons/ArrowBackIos';
 import '@material-ui/icons/ArrowForwardIos';
 import 'react-router';
 import '@material-ui/core/InputBase';
 import '@material-ui/core/IconButton';
-import '@material-ui/lab';
 import '@backstage/plugin-catalog-react';
 import '@backstage/catalog-model';
 import 'react-use/lib/useEffectOnce';
@@ -36,20 +38,16 @@ const useNavigateToQuery = () => {
 };
 
 const useStyles = makeStyles({
-  searchBar: {
+  root: {
     border: "1px solid #555",
     borderRadius: "6px",
     fontSize: "1.5em"
   }
 });
-const HomePageSearchBar = ({
-  className: defaultClassName,
-  ...props
-}) => {
-  const classes = useStyles();
+const HomePageSearchBar = ({ ...props }) => {
+  const classes = useStyles(props);
   const [query, setQuery] = useState("");
   const handleSearch = useNavigateToQuery();
-  const className = defaultClassName ? `${classes.searchBar} ${defaultClassName}` : classes.searchBar;
   const handleSubmit = () => {
     handleSearch({ query });
   };
@@ -57,7 +55,7 @@ const HomePageSearchBar = ({
     setQuery(value);
   }, [setQuery]);
   return /* @__PURE__ */ React.createElement(SearchBarBase, {
-    className,
+    classes: { root: classes.root },
     value: query,
     onSubmit: handleSubmit,
     onChange: handleChange,
@@ -66,4 +64,4 @@ const HomePageSearchBar = ({
 };
 
 export { HomePageSearchBar };
-//# sourceMappingURL=index-207ebc98.esm.js.map
+//# sourceMappingURL=index-00471071.esm.js.map

package/dist/esm/{index-207ebc98.esm.js.map → index-00471071.esm.js.map}

@@ -1 +1 @@
-{"version":3,"file":"index-207ebc98.esm.js","sources":["../../src/components/util.ts","../../src/components/HomePageComponent/HomePageSearchBar.tsx"],"sourcesContent":["/*\n * Copyright 2021 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 */\nimport qs from 'qs';\nimport { useCallback } from 'react';\nimport { useNavigate } from 'react-router-dom';\nimport { rootRouteRef } from '../plugin';\n\nimport { useRouteRef } from '@backstage/core-plugin-api';\n\nexport const useNavigateToQuery = () => {\n  const searchRoute = useRouteRef(rootRouteRef);\n  const navigate = useNavigate();\n  return useCallback(\n    ({ query }: { query: string }): void => {\n      const queryString = qs.stringify({ query }, { addQueryPrefix: true });\n\n      navigate(`${searchRoute()}${queryString}`);\n    },\n    [navigate, searchRoute],\n  );\n};\n","/*\n * Copyright 2021 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, { useCallback, useState } from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\n\nimport { SearchBarBase, SearchBarBaseProps } from '../SearchBar';\nimport { useNavigateToQuery } from '../util';\n\nconst useStyles = makeStyles({\n  searchBar: {\n    border: '1px solid #555',\n    borderRadius: '6px',\n    fontSize: '1.5em',\n  },\n});\n\n/**\n * Props for {@link HomePageSearchBar}.\n *\n * @public\n */\nexport type HomePageSearchBarProps = Partial<\n  Omit<SearchBarBaseProps, 'onChange' | 'onSubmit'>\n>;\n\n/**\n * The search bar created specifically for the composable home page\n *\n * @public\n */\nexport const HomePageSearchBar = ({\n  className: defaultClassName,\n  ...props\n}: HomePageSearchBarProps) => {\n  const classes = useStyles();\n  const [query, setQuery] = useState('');\n  const handleSearch = useNavigateToQuery();\n\n  const className = defaultClassName\n    ? `${classes.searchBar} ${defaultClassName}`\n    : classes.searchBar;\n\n  const handleSubmit = () => {\n    handleSearch({ query });\n  };\n\n  const handleChange = useCallback(\n    value => {\n      setQuery(value);\n    },\n    [setQuery],\n  );\n\n  return (\n    <SearchBarBase\n      className={className}\n      value={query}\n      onSubmit={handleSubmit}\n      onChange={handleChange}\n      {...props}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;MAsBa,qBAAqB,MAAM;AACtC,QAAM,cAAc,YAAY;AAChC,QAAM,WAAW;AACjB,SAAO,YACL,CAAC,EAAE,YAAqC;AACtC,UAAM,cAAc,GAAG,UAAU,EAAE,SAAS,EAAE,gBAAgB;AAE9D,aAAS,GAAG,gBAAgB;AAAA,KAE9B,CAAC,UAAU;AAAA;;ACTf,MAAM,YAAY,WAAW;AAAA,EAC3B,WAAW;AAAA,IACT,QAAQ;AAAA,IACR,cAAc;AAAA,IACd,UAAU;AAAA;AAAA;MAkBD,oBAAoB,CAAC;AAAA,EAChC,WAAW;AAAA,KACR;AAAA,MACyB;AAC5B,QAAM,UAAU;AAChB,QAAM,CAAC,OAAO,YAAY,SAAS;AACnC,QAAM,eAAe;AAErB,QAAM,YAAY,mBACd,GAAG,QAAQ,aAAa,qBACxB,QAAQ;AAEZ,QAAM,eAAe,MAAM;AACzB,iBAAa,EAAE;AAAA;AAGjB,QAAM,eAAe,YACnB,WAAS;AACP,aAAS;AAAA,KAEX,CAAC;AAGH,6CACG,eAAD;AAAA,IACE;AAAA,IACA,OAAO;AAAA,IACP,UAAU;AAAA,IACV,UAAU;AAAA,OACN;AAAA;AAAA;;;;"}
+{"version":3,"file":"index-00471071.esm.js","sources":["../../src/components/util.ts","../../src/components/HomePageComponent/HomePageSearchBar.tsx"],"sourcesContent":["/*\n * Copyright 2021 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 */\nimport qs from 'qs';\nimport { useCallback } from 'react';\nimport { useNavigate } from 'react-router-dom';\nimport { rootRouteRef } from '../plugin';\n\nimport { useRouteRef } from '@backstage/core-plugin-api';\n\nexport const useNavigateToQuery = () => {\n  const searchRoute = useRouteRef(rootRouteRef);\n  const navigate = useNavigate();\n  return useCallback(\n    ({ query }: { query: string }): void => {\n      const queryString = qs.stringify({ query }, { addQueryPrefix: true });\n\n      navigate(`${searchRoute()}${queryString}`);\n    },\n    [navigate, searchRoute],\n  );\n};\n","/*\n * Copyright 2021 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, { useCallback, useState } from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\n\nimport { SearchBarBase, SearchBarBaseProps } from '../SearchBar';\nimport { useNavigateToQuery } from '../util';\n\nconst useStyles = makeStyles({\n  root: {\n    border: '1px solid #555',\n    borderRadius: '6px',\n    fontSize: '1.5em',\n  },\n});\n\n/**\n * Props for {@link HomePageSearchBar}.\n *\n * @public\n */\nexport type HomePageSearchBarProps = Partial<\n  Omit<SearchBarBaseProps, 'onChange' | 'onSubmit'>\n>;\n\n/**\n * The search bar created specifically for the composable home page\n *\n * @public\n */\nexport const HomePageSearchBar = ({ ...props }: HomePageSearchBarProps) => {\n  const classes = useStyles(props);\n  const [query, setQuery] = useState('');\n  const handleSearch = useNavigateToQuery();\n\n  const handleSubmit = () => {\n    handleSearch({ query });\n  };\n\n  const handleChange = useCallback(\n    value => {\n      setQuery(value);\n    },\n    [setQuery],\n  );\n\n  return (\n    <SearchBarBase\n      classes={{ root: classes.root }}\n      value={query}\n      onSubmit={handleSubmit}\n      onChange={handleChange}\n      {...props}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAsBa,qBAAqB,MAAM;AACtC,QAAM,cAAc,YAAY;AAChC,QAAM,WAAW;AACjB,SAAO,YACL,CAAC,EAAE,YAAqC;AACtC,UAAM,cAAc,GAAG,UAAU,EAAE,SAAS,EAAE,gBAAgB;AAE9D,aAAS,GAAG,gBAAgB;AAAA,KAE9B,CAAC,UAAU;AAAA;;ACTf,MAAM,YAAY,WAAW;AAAA,EAC3B,MAAM;AAAA,IACJ,QAAQ;AAAA,IACR,cAAc;AAAA,IACd,UAAU;AAAA;AAAA;MAkBD,oBAAoB,CAAC,KAAK,YAAoC;AACzE,QAAM,UAAU,UAAU;AAC1B,QAAM,CAAC,OAAO,YAAY,SAAS;AACnC,QAAM,eAAe;AAErB,QAAM,eAAe,MAAM;AACzB,iBAAa,EAAE;AAAA;AAGjB,QAAM,eAAe,YACnB,WAAS;AACP,aAAS;AAAA,KAEX,CAAC;AAGH,6CACG,eAAD;AAAA,IACE,SAAS,EAAE,MAAM,QAAQ;AAAA,IACzB,OAAO;AAAA,IACP,UAAU;AAAA,IACV,UAAU;AAAA,OACN;AAAA;AAAA;;;;"}

package/dist/esm/{index-cdb6d423.esm.js → index-1096ac2f.esm.js}

@@ -1,4 +1,4 @@
-export { S as SearchPage } from './index-1333c262.esm.js';
+export { a as SearchBar, b as SearchBarBase } from './index-43516303.esm.js';
 import '@backstage/core-plugin-api';
 import '@backstage/errors';
 import 'qs';
@@ -10,19 +10,21 @@ import '@material-ui/icons/Search';
 import '@material-ui/icons/Clear';
 import 'react-use/lib/useAsync';
 import 'react-use/lib/usePrevious';
+import '@material-ui/lab';
+import 'react-use/lib/useAsyncFn';
 import '@material-ui/icons/Launch';
 import '@material-ui/core/styles';
 import '@backstage/core-components';
+import 'react-text-truncate';
 import '@material-ui/icons/ArrowBackIos';
 import '@material-ui/icons/ArrowForwardIos';
 import 'react-router';
 import '@material-ui/core/InputBase';
 import '@material-ui/core/IconButton';
-import '@material-ui/lab';
 import '@backstage/plugin-catalog-react';
 import '@backstage/catalog-model';
 import 'react-use/lib/useEffectOnce';
 import '@material-ui/icons/ExpandMore';
 import '@material-ui/icons/FontDownload';
 import 'react-router-dom';
-//# sourceMappingURL=index-cdb6d423.esm.js.map
+//# sourceMappingURL=index-1096ac2f.esm.js.map

package/dist/esm/index-1096ac2f.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index-1096ac2f.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/{index-1333c262.esm.js → index-43516303.esm.js}

@@ -1,23 +1,25 @@
 import { createApiRef, useApi, AnalyticsContext, useAnalytics, configApiRef, createRouteRef, createPlugin, createApiFactory, discoveryApiRef, identityApiRef, createRoutableExtension, createComponentExtension, useRouteRef } from '@backstage/core-plugin-api';
 import { ResponseError } from '@backstage/errors';
 import qs from 'qs';
-import React, { createContext, useState, useCallback, useEffect, useContext, Fragment, cloneElement } from 'react';
+import React, { createContext, useState, useCallback, useEffect, useContext, useRef, Fragment, cloneElement } from 'react';
 import FilterListIcon from '@material-ui/icons/FilterList';
-import { makeStyles, IconButton, Typography, Card, CardHeader, Button, Divider, CardContent, Select, MenuItem, List, ListItem, Checkbox, ListItemText, InputBase, InputAdornment, FormControl, FormLabel, FormControlLabel, InputLabel, ListItemIcon, Box, useTheme, Dialog, DialogTitle, Paper, DialogContent, Grid, DialogActions, Accordion, AccordionSummary, AccordionDetails, Tabs, Tab, Chip } from '@material-ui/core';
+import { makeStyles, IconButton, Typography, Card, CardHeader, Button, Divider, CardContent, Select, MenuItem, List, ListItem, Checkbox, ListItemText, InputBase, InputAdornment, TextField, Chip, FormControl, FormLabel, FormControlLabel, InputLabel, ListItemIcon, Box, useTheme, Dialog, DialogTitle, Paper, DialogContent, Grid, DialogActions, Accordion, AccordionSummary, AccordionDetails, Tabs, Tab } from '@material-ui/core';
 import useDebounce from 'react-use/lib/useDebounce';
 import SearchIcon from '@material-ui/icons/Search';
 import ClearButton from '@material-ui/icons/Clear';
 import useAsync from 'react-use/lib/useAsync';
 import usePrevious from 'react-use/lib/usePrevious';
+import { Autocomplete, Alert } from '@material-ui/lab';
+import useAsyncFn from 'react-use/lib/useAsyncFn';
 import LaunchIcon from '@material-ui/icons/Launch';
 import { makeStyles as makeStyles$1 } from '@material-ui/core/styles';
 import { Link, Progress, ResponseErrorPanel, EmptyState, useContent, Table, useQueryParamState, Page, Header, Content, SidebarSearchField } from '@backstage/core-components';
+import TextTruncate from 'react-text-truncate';
 import ArrowBackIosIcon from '@material-ui/icons/ArrowBackIos';
 import ArrowForwardIosIcon from '@material-ui/icons/ArrowForwardIos';
 import { useOutlet, useLocation } from 'react-router';
 import InputBase$1 from '@material-ui/core/InputBase';
 import IconButton$1 from '@material-ui/core/IconButton';
-import { Alert } from '@material-ui/lab';
 import { catalogApiRef } from '@backstage/plugin-catalog-react';
 import { ENTITY_DEFAULT_NAMESPACE } from '@backstage/catalog-model';
 import useEffectOnce from 'react-use/lib/useEffectOnce';
@@ -305,27 +307,123 @@ const SearchBar$1 = ({ onChange, ...props }) => {
   });
 };
 
-const useStyles$9 = makeStyles({
-  label: {
-    textTransform: "capitalize"
+const useAsyncFilterValues = (fn, inputValue, defaultValues = [], debounce = 250) => {
+  const valuesMemo = useRef({});
+  const definiteFn = fn || (() => Promise.resolve([]));
+  const [state, callback] = useAsyncFn(definiteFn, [inputValue], {
+    loading: true
+  });
+  useDebounce(() => {
+    if (valuesMemo.current[inputValue] === void 0) {
+      valuesMemo.current[inputValue] = callback(inputValue).then((values) => {
+        valuesMemo.current[inputValue] = values;
+        return values;
+      });
+    }
+  }, debounce, [callback, inputValue]);
+  if (defaultValues.length) {
+    return {
+      loading: false,
+      value: defaultValues
+    };
   }
-});
-const CheckboxFilter = ({
-  className,
-  name,
-  defaultValue,
-  values = []
-}) => {
-  const classes = useStyles$9();
-  const { filters, setFilters } = useSearch();
+  const possibleValue = valuesMemo.current[inputValue];
+  if (Array.isArray(possibleValue)) {
+    return {
+      loading: false,
+      value: possibleValue
+    };
+  }
+  return state;
+};
+const useDefaultFilterValue = (name, defaultValue) => {
+  const { setFilters } = useSearch();
   useEffect(() => {
-    if (Array.isArray(defaultValue)) {
+    if (defaultValue && [defaultValue].flat().length > 0) {
       setFilters((prevFilters) => ({
         ...prevFilters,
         [name]: defaultValue
       }));
     }
   }, []);
+};
+
+const AutocompleteFilter = (props) => {
+  const {
+    className,
+    defaultValue,
+    name,
+    values: givenValues,
+    valuesDebounceMs,
+    label,
+    filterSelectedOptions,
+    limitTags,
+    multiple
+  } = props;
+  const [inputValue, setInputValue] = useState("");
+  useDefaultFilterValue(name, defaultValue);
+  const asyncValues = typeof givenValues === "function" ? givenValues : void 0;
+  const defaultValues = typeof givenValues === "function" ? void 0 : givenValues;
+  const { value: values, loading } = useAsyncFilterValues(asyncValues, inputValue, defaultValues, valuesDebounceMs);
+  const { filters, setFilters } = useSearch();
+  const filterValue = filters[name] || (multiple ? [] : null);
+  const handleChange = (_, newValue) => {
+    setFilters((prevState) => {
+      const { [name]: filter, ...others } = prevState;
+      if (newValue) {
+        return { ...others, [name]: newValue };
+      }
+      return { ...others };
+    });
+  };
+  const renderInput = (params) => /* @__PURE__ */ React.createElement(TextField, {
+    ...params,
+    name: "search",
+    variant: "outlined",
+    label,
+    fullWidth: true
+  });
+  const renderTags = (tagValue, getTagProps) => tagValue.map((option, index) => /* @__PURE__ */ React.createElement(Chip, {
+    label: option,
+    color: "primary",
+    ...getTagProps({ index })
+  }));
+  return /* @__PURE__ */ React.createElement(Autocomplete, {
+    filterSelectedOptions,
+    limitTags,
+    multiple,
+    className,
+    id: `${multiple ? "multi-" : ""}select-filter-${name}--select`,
+    options: values || [],
+    loading,
+    value: filterValue,
+    onChange: handleChange,
+    onInputChange: (_, newValue) => setInputValue(newValue),
+    renderInput,
+    renderTags
+  });
+};
+
+const useStyles$9 = makeStyles({
+  label: {
+    textTransform: "capitalize"
+  }
+});
+const CheckboxFilter = (props) => {
+  const {
+    className,
+    defaultValue,
+    label,
+    name,
+    values: givenValues = [],
+    valuesDebounceMs
+  } = props;
+  const classes = useStyles$9();
+  const { filters, setFilters } = useSearch();
+  useDefaultFilterValue(name, defaultValue);
+  const asyncValues = typeof givenValues === "function" ? givenValues : void 0;
+  const defaultValues = typeof givenValues === "function" ? void 0 : givenValues;
+  const { value: values = [], loading } = useAsyncFilterValues(asyncValues, "", defaultValues, valuesDebounceMs);
   const handleChange = (e) => {
     const {
       target: { value, checked }
@@ -339,11 +437,12 @@ const CheckboxFilter = ({
   };
   return /* @__PURE__ */ React.createElement(FormControl, {
     className,
+    disabled: loading,
     fullWidth: true,
     "data-testid": "search-checkboxfilter-next"
-  }, /* @__PURE__ */ React.createElement(FormLabel, {
+  }, label ? /* @__PURE__ */ React.createElement(FormLabel, {
     className: classes.label
-  }, name), values.map((value) => {
+  }, label) : null, values.map((value) => {
     var _a;
     return /* @__PURE__ */ React.createElement(FormControlLabel, {
       key: value,
@@ -360,22 +459,21 @@ const CheckboxFilter = ({
     });
   }));
 };
-const SelectFilter = ({
-  className,
-  name,
-  defaultValue,
-  values = []
-}) => {
+const SelectFilter = (props) => {
+  const {
+    className,
+    defaultValue,
+    label,
+    name,
+    values: givenValues,
+    valuesDebounceMs
+  } = props;
   const classes = useStyles$9();
+  useDefaultFilterValue(name, defaultValue);
+  const asyncValues = typeof givenValues === "function" ? givenValues : void 0;
+  const defaultValues = typeof givenValues === "function" ? void 0 : givenValues;
+  const { value: values = [], loading } = useAsyncFilterValues(asyncValues, "", defaultValues, valuesDebounceMs);
   const { filters, setFilters } = useSearch();
-  useEffect(() => {
-    if (typeof defaultValue === "string") {
-      setFilters((prevFilters) => ({
-        ...prevFilters,
-        [name]: defaultValue
-      }));
-    }
-  }, []);
   const handleChange = (e) => {
     const {
       target: { value }
@@ -386,14 +484,15 @@ const SelectFilter = ({
     });
   };
   return /* @__PURE__ */ React.createElement(FormControl, {
+    disabled: loading,
     className,
     variant: "filled",
     fullWidth: true,
     "data-testid": "search-selectfilter-next"
-  }, /* @__PURE__ */ React.createElement(InputLabel, {
+  }, label ? /* @__PURE__ */ React.createElement(InputLabel, {
     className: classes.label,
     margin: "dense"
-  }, name), /* @__PURE__ */ React.createElement(Select, {
+  }, label) : null, /* @__PURE__ */ React.createElement(Select, {
     variant: "outlined",
     value: filters[name] || "",
     onChange: handleChange
@@ -404,7 +503,10 @@ const SelectFilter = ({
     value
   }, value))));
 };
-const SearchFilter = ({ component: Element, ...props }) => /* @__PURE__ */ React.createElement(Element, {
+const SearchFilter = ({
+  component: Element,
+  ...props
+}) => /* @__PURE__ */ React.createElement(Element, {
   ...props
 });
 SearchFilter.Checkbox = (props) => /* @__PURE__ */ React.createElement(SearchFilter, {
@@ -415,12 +517,17 @@ SearchFilter.Select = (props) => /* @__PURE__ */ React.createElement(SearchFilte
   ...props,
   component: SelectFilter
 });
+SearchFilter.Autocomplete = (props) => /* @__PURE__ */ React.createElement(SearchFilter, {
+  ...props,
+  component: AutocompleteFilter
+});
 const SearchFilterNext = SearchFilter;
 
 const DefaultResultListItem$1 = ({
   result,
   icon,
-  secondaryAction
+  secondaryAction,
+  lineClamp = 5
 }) => {
   return /* @__PURE__ */ React.createElement(Link, {
     to: result.location
@@ -429,7 +536,12 @@ const DefaultResultListItem$1 = ({
   }, icon && /* @__PURE__ */ React.createElement(ListItemIcon, null, icon), /* @__PURE__ */ React.createElement(ListItemText, {
     primaryTypographyProps: { variant: "h6" },
     primary: result.title,
-    secondary: result.text
+    secondary: /* @__PURE__ */ React.createElement(TextTruncate, {
+      line: lineClamp,
+      truncateText: "\u2026",
+      text: result.text,
+      element: "span"
+    })
   }), secondaryAction && /* @__PURE__ */ React.createElement(Box, {
     alignItems: "flex-end"
   }, secondaryAction)), /* @__PURE__ */ React.createElement(Divider, null));
@@ -511,54 +623,54 @@ const searchPlugin = createPlugin({
 });
 const SearchPage$1 = searchPlugin.provide(createRoutableExtension({
   name: "SearchPage",
-  component: () => import('./index-cdb6d423.esm.js').then((m) => m.SearchPage),
+  component: () => import('./index-cc49076c.esm.js').then((m) => m.SearchPage),
   mountPoint: rootRouteRef
 }));
 const SearchPageNext = searchPlugin.provide(createRoutableExtension({
   name: "SearchPageNext",
-  component: () => import('./index-cdb6d423.esm.js').then((m) => m.SearchPage),
+  component: () => import('./index-cc49076c.esm.js').then((m) => m.SearchPage),
   mountPoint: rootNextRouteRef
 }));
 searchPlugin.provide(createComponentExtension({
   name: "SearchBar",
   component: {
-    lazy: () => import('./index-573ac81a.esm.js').then((m) => m.SearchBar)
+    lazy: () => import('./index-1096ac2f.esm.js').then((m) => m.SearchBar)
   }
 }));
 const SearchBarNext = searchPlugin.provide(createComponentExtension({
   name: "SearchBarNext",
   component: {
-    lazy: () => import('./index-573ac81a.esm.js').then((m) => m.SearchBar)
+    lazy: () => import('./index-1096ac2f.esm.js').then((m) => m.SearchBar)
   }
 }));
 const SearchResult$1 = searchPlugin.provide(createComponentExtension({
   name: "SearchResult",
   component: {
-    lazy: () => import('./index-4d972deb.esm.js').then((m) => m.SearchResult)
+    lazy: () => import('./index-4a4bbd0b.esm.js').then((m) => m.SearchResult)
   }
 }));
 searchPlugin.provide(createComponentExtension({
   name: "SearchResultNext",
   component: {
-    lazy: () => import('./index-4d972deb.esm.js').then((m) => m.SearchResult)
+    lazy: () => import('./index-4a4bbd0b.esm.js').then((m) => m.SearchResult)
   }
 }));
 const SidebarSearchModal = searchPlugin.provide(createComponentExtension({
   name: "SidebarSearchModal",
   component: {
-    lazy: () => import('./index-b4c3fd6c.esm.js').then((m) => m.SidebarSearchModal)
+    lazy: () => import('./index-ef4eb7dd.esm.js').then((m) => m.SidebarSearchModal)
   }
 }));
 const DefaultResultListItem = searchPlugin.provide(createComponentExtension({
   name: "DefaultResultListItem",
   component: {
-    lazy: () => import('./index-a64e73f4.esm.js').then((m) => m.DefaultResultListItem)
+    lazy: () => import('./index-e3d9d53e.esm.js').then((m) => m.DefaultResultListItem)
   }
 }));
 const HomePageSearchBar = searchPlugin.provide(createComponentExtension({
   name: "HomePageSearchBar",
   component: {
-    lazy: () => import('./index-207ebc98.esm.js').then((m) => m.HomePageSearchBar)
+    lazy: () => import('./index-00471071.esm.js').then((m) => m.HomePageSearchBar)
   }
 }));
 
@@ -1290,4 +1402,4 @@ const SidebarSearch = (props) => {
 };
 
 export { DefaultResultListItem$1 as D, Filters$1 as F, HomePageSearchBar as H, SearchPage as S, SearchBar$1 as a, SearchBarBase as b, SearchResultComponent as c, SearchModal as d, FiltersButton$1 as e, SearchContextProvider as f, SearchFilter as g, SearchFilterNext as h, SearchResultPager as i, SearchType as j, SidebarSearch as k, DefaultResultListItem as l, SearchBarNext as m, SearchPage$1 as n, SearchPageNext as o, searchPlugin as p, SearchResult$1 as q, rootRouteRef as r, searchApiRef as s, SidebarSearchModal as t, useSearch as u };
-//# sourceMappingURL=index-1333c262.esm.js.map
+//# sourceMappingURL=index-43516303.esm.js.map