@backstage/plugin-search-react 1.8.8 → 1.9.0-next.1

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @backstage/plugin-search-react
 
+## 1.9.0-next.1
+
+### Patch Changes
+
+- Updated dependencies
+  - @backstage/core-plugin-api@1.10.7-next.0
+  - @backstage/core-components@0.17.2-next.1
+  - @backstage/frontend-plugin-api@0.10.2-next.1
+  - @backstage/theme@0.6.6-next.0
+  - @backstage/types@1.2.1
+  - @backstage/version-bridge@1.0.11
+  - @backstage/plugin-search-common@1.2.18-next.0
+
+## 1.9.0-next.0
+
+### Minor Changes
+
+- 611c941: Allow search filters to provide labels and values separately, and not only values
+
+### Patch Changes
+
+- Updated dependencies
+  - @backstage/theme@0.6.6-next.0
+  - @backstage/core-components@0.17.2-next.0
+  - @backstage/frontend-plugin-api@0.10.2-next.0
+  - @backstage/core-plugin-api@1.10.6
+  - @backstage/types@1.2.1
+  - @backstage/version-bridge@1.0.11
+  - @backstage/plugin-search-common@1.2.18-next.0
+
 ## 1.8.8
 
 ### Patch Changes

package/dist/components/SearchFilter/SearchFilter.Autocomplete.esm.js

@@ -5,6 +5,7 @@ import TextField from '@material-ui/core/TextField';
 import Autocomplete from '@material-ui/lab/Autocomplete';
 import { useSearch } from '../../context/SearchContext.esm.js';
 import { useDefaultFilterValue, useAsyncFilterValues } from './hooks.esm.js';
+import { ensureFilterValueWithLabel } from './types.esm.js';
 
 const AutocompleteFilter = (props) => {
   const {
@@ -21,7 +22,7 @@ const AutocompleteFilter = (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 defaultValues = typeof givenValues === "function" ? void 0 : givenValues?.map((v) => ensureFilterValueWithLabel(v));
   const { value: values, loading } = useAsyncFilterValues(
     asyncValues,
     inputValue,
@@ -29,12 +30,18 @@ const AutocompleteFilter = (props) => {
     valuesDebounceMs
   );
   const { filters, setFilters } = useSearch();
-  const filterValue = filters[name] || (multiple ? [] : null);
+  const filterValueWithLabel = ensureFilterValueWithLabel(
+    filters[name]
+  );
+  const filterValue = filterValueWithLabel || (multiple ? [] : null);
   const handleChange = (_, newValue) => {
     setFilters((prevState) => {
       const { [name]: filter, ...others } = prevState;
       if (newValue) {
-        return { ...others, [name]: newValue };
+        return {
+          ...others,
+          [name]: Array.isArray(newValue) ? newValue.map((v) => v.value) : newValue.value
+        };
       }
       return { ...others };
     });
@@ -49,7 +56,7 @@ const AutocompleteFilter = (props) => {
       fullWidth: true
     }
   );
-  const renderTags = (tagValue, getTagProps) => tagValue.map((option, index) => /* @__PURE__ */ jsx(Chip, { label: option, color: "primary", ...getTagProps({ index }) }));
+  const renderTags = (tagValue, getTagProps) => tagValue.map((option, index) => /* @__PURE__ */ jsx(Chip, { label: option.label, color: "primary", ...getTagProps({ index }) }));
   return /* @__PURE__ */ jsx(
     Autocomplete,
     {
@@ -63,6 +70,7 @@ const AutocompleteFilter = (props) => {
       value: filterValue,
       onChange: handleChange,
       onInputChange: (_, newValue) => setInputValue(newValue),
+      getOptionLabel: (option) => option.label,
       renderInput,
       renderTags
     }

package/dist/components/SearchFilter/SearchFilter.Autocomplete.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchFilter.Autocomplete.esm.js","sources":["../../../src/components/SearchFilter/SearchFilter.Autocomplete.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 { ChangeEvent, useState } from 'react';\nimport Chip from '@material-ui/core/Chip';\nimport TextField from '@material-ui/core/TextField';\nimport Autocomplete, {\n  AutocompleteGetTagProps,\n  AutocompleteRenderInputParams,\n} from '@material-ui/lab/Autocomplete';\n\nimport { useSearch } from '../../context';\nimport { useAsyncFilterValues, useDefaultFilterValue } from './hooks';\nimport { SearchFilterComponentProps } from './SearchFilter';\n\n/**\n * @public\n */\nexport type SearchAutocompleteFilterProps = SearchFilterComponentProps & {\n  filterSelectedOptions?: boolean;\n  limitTags?: number;\n  multiple?: boolean;\n};\n\n/**\n * @public\n */\nexport const AutocompleteFilter = (props: SearchAutocompleteFilterProps) => {\n  const {\n    className,\n    defaultValue,\n    name,\n    values: givenValues,\n    valuesDebounceMs,\n    label,\n    filterSelectedOptions,\n    limitTags,\n    multiple,\n  } = props;\n  const [inputValue, setInputValue] = useState<string>('');\n  useDefaultFilterValue(name, defaultValue);\n  const asyncValues =\n    typeof givenValues === 'function' ? givenValues : undefined;\n  const defaultValues =\n    typeof givenValues === 'function' ? undefined : givenValues;\n  const { value: values, loading } = useAsyncFilterValues(\n    asyncValues,\n    inputValue,\n    defaultValues,\n    valuesDebounceMs,\n  );\n  const { filters, setFilters } = useSearch();\n  const filterValue =\n    (filters[name] as string | string[] | undefined) || (multiple ? [] : null);\n\n  // Set new filter values on input change.\n  const handleChange = (\n    _: ChangeEvent<{}>,\n    newValue: string | string[] | null,\n  ) => {\n    setFilters(prevState => {\n      const { [name]: filter, ...others } = prevState;\n\n      if (newValue) {\n        return { ...others, [name]: newValue };\n      }\n      return { ...others };\n    });\n  };\n\n  // Provide the input field.\n  const renderInput = (params: AutocompleteRenderInputParams) => (\n    <TextField\n      {...params}\n      name=\"search\"\n      variant=\"outlined\"\n      label={label}\n      fullWidth\n    />\n  );\n\n  // Render tags as primary-colored chips.\n  const renderTags = (\n    tagValue: string[],\n    getTagProps: AutocompleteGetTagProps,\n  ) =>\n    tagValue.map((option: string, index: number) => (\n      <Chip label={option} color=\"primary\" {...getTagProps({ index })} />\n    ));\n\n  return (\n    <Autocomplete\n      filterSelectedOptions={filterSelectedOptions}\n      limitTags={limitTags}\n      multiple={multiple}\n      className={className}\n      id={`${multiple ? 'multi-' : ''}select-filter-${name}--select`}\n      options={values || []}\n      loading={loading}\n      value={filterValue}\n      onChange={handleChange}\n      onInputChange={(_, newValue) => setInputValue(newValue)}\n      renderInput={renderInput}\n      renderTags={renderTags}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAwCa,MAAA,kBAAA,GAAqB,CAAC,KAAyC,KAAA;AAC1E,EAAM,MAAA;AAAA,IACJ,SAAA;AAAA,IACA,YAAA;AAAA,IACA,IAAA;AAAA,IACA,MAAQ,EAAA,WAAA;AAAA,IACR,gBAAA;AAAA,IACA,KAAA;AAAA,IACA,qBAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,GACE,GAAA,KAAA;AACJ,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAI,SAAiB,EAAE,CAAA;AACvD,EAAA,qBAAA,CAAsB,MAAM,YAAY,CAAA;AACxC,EAAA,MAAM,WACJ,GAAA,OAAO,WAAgB,KAAA,UAAA,GAAa,WAAc,GAAA,KAAA,CAAA;AACpD,EAAA,MAAM,aACJ,GAAA,OAAO,WAAgB,KAAA,UAAA,GAAa,KAAY,CAAA,GAAA,WAAA;AAClD,EAAA,MAAM,EAAE,KAAA,EAAO,MAAQ,EAAA,OAAA,EAAY,GAAA,oBAAA;AAAA,IACjC,WAAA;AAAA,IACA,UAAA;AAAA,IACA,aAAA;AAAA,IACA;AAAA,GACF;AACA,EAAA,MAAM,EAAE,OAAA,EAAS,UAAW,EAAA,GAAI,SAAU,EAAA;AAC1C,EAAA,MAAM,cACH,OAAQ,CAAA,IAAI,CAAwC,KAAA,QAAA,GAAW,EAAK,GAAA,IAAA,CAAA;AAGvE,EAAM,MAAA,YAAA,GAAe,CACnB,CAAA,EACA,QACG,KAAA;AACH,IAAA,UAAA,CAAW,CAAa,SAAA,KAAA;AACtB,MAAA,MAAM,EAAE,CAAC,IAAI,GAAG,MAAQ,EAAA,GAAG,QAAW,GAAA,SAAA;AAEtC,MAAA,IAAI,QAAU,EAAA;AACZ,QAAA,OAAO,EAAE,GAAG,MAAA,EAAQ,CAAC,IAAI,GAAG,QAAS,EAAA;AAAA;AAEvC,MAAO,OAAA,EAAE,GAAG,MAAO,EAAA;AAAA,KACpB,CAAA;AAAA,GACH;AAGA,EAAM,MAAA,WAAA,GAAc,CAAC,MACnB,qBAAA,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACE,GAAG,MAAA;AAAA,MACJ,IAAK,EAAA,QAAA;AAAA,MACL,OAAQ,EAAA,UAAA;AAAA,MACR,KAAA;AAAA,MACA,SAAS,EAAA;AAAA;AAAA,GACX;AAIF,EAAM,MAAA,UAAA,GAAa,CACjB,QACA,EAAA,WAAA,KAEA,SAAS,GAAI,CAAA,CAAC,QAAgB,KAC5B,qBAAA,GAAA,CAAC,QAAK,KAAO,EAAA,MAAA,EAAQ,OAAM,SAAW,EAAA,GAAG,YAAY,EAAE,KAAA,EAAO,CAAA,EAAG,CAClE,CAAA;AAEH,EACE,uBAAA,GAAA;AAAA,IAAC,YAAA;AAAA,IAAA;AAAA,MACC,qBAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,IAAI,CAAG,EAAA,QAAA,GAAW,QAAW,GAAA,EAAE,iBAAiB,IAAI,CAAA,QAAA,CAAA;AAAA,MACpD,OAAA,EAAS,UAAU,EAAC;AAAA,MACpB,OAAA;AAAA,MACA,KAAO,EAAA,WAAA;AAAA,MACP,QAAU,EAAA,YAAA;AAAA,MACV,aAAe,EAAA,CAAC,CAAG,EAAA,QAAA,KAAa,cAAc,QAAQ,CAAA;AAAA,MACtD,WAAA;AAAA,MACA;AAAA;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"SearchFilter.Autocomplete.esm.js","sources":["../../../src/components/SearchFilter/SearchFilter.Autocomplete.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 { ChangeEvent, useState } from 'react';\nimport Chip from '@material-ui/core/Chip';\nimport TextField from '@material-ui/core/TextField';\nimport Autocomplete, {\n  AutocompleteGetTagProps,\n  AutocompleteRenderInputParams,\n} from '@material-ui/lab/Autocomplete';\n\nimport { useSearch } from '../../context';\nimport { useAsyncFilterValues, useDefaultFilterValue } from './hooks';\nimport { SearchFilterComponentProps } from './SearchFilter';\nimport { ensureFilterValueWithLabel, FilterValueWithLabel } from './types';\n\n/**\n * @public\n */\nexport type SearchAutocompleteFilterProps = SearchFilterComponentProps & {\n  filterSelectedOptions?: boolean;\n  limitTags?: number;\n  multiple?: boolean;\n};\n\n/**\n * @public\n */\nexport const AutocompleteFilter = (props: SearchAutocompleteFilterProps) => {\n  const {\n    className,\n    defaultValue,\n    name,\n    values: givenValues,\n    valuesDebounceMs,\n    label,\n    filterSelectedOptions,\n    limitTags,\n    multiple,\n  } = props;\n  const [inputValue, setInputValue] = useState<string>('');\n  useDefaultFilterValue(name, defaultValue);\n  const asyncValues =\n    typeof givenValues === 'function' ? givenValues : undefined;\n  const defaultValues =\n    typeof givenValues === 'function'\n      ? undefined\n      : givenValues?.map(v => ensureFilterValueWithLabel(v));\n  const { value: values, loading } = useAsyncFilterValues(\n    asyncValues,\n    inputValue,\n    defaultValues,\n    valuesDebounceMs,\n  );\n  const { filters, setFilters } = useSearch();\n  const filterValueWithLabel = ensureFilterValueWithLabel(\n    filters[name] as string | string[] | undefined,\n  );\n  const filterValue = filterValueWithLabel || (multiple ? [] : null);\n\n  // Set new filter values on input change.\n  const handleChange = (\n    _: ChangeEvent<{}>,\n    newValue: FilterValueWithLabel | FilterValueWithLabel[] | null,\n  ) => {\n    setFilters(prevState => {\n      const { [name]: filter, ...others } = prevState;\n\n      if (newValue) {\n        return {\n          ...others,\n          [name]: Array.isArray(newValue)\n            ? newValue.map(v => v.value)\n            : newValue.value,\n        };\n      }\n      return { ...others };\n    });\n  };\n\n  // Provide the input field.\n  const renderInput = (params: AutocompleteRenderInputParams) => (\n    <TextField\n      {...params}\n      name=\"search\"\n      variant=\"outlined\"\n      label={label}\n      fullWidth\n    />\n  );\n\n  // Render tags as primary-colored chips.\n  const renderTags = (\n    tagValue: FilterValueWithLabel[],\n    getTagProps: AutocompleteGetTagProps,\n  ) =>\n    tagValue.map((option, index: number) => (\n      <Chip label={option.label} color=\"primary\" {...getTagProps({ index })} />\n    ));\n\n  return (\n    <Autocomplete\n      filterSelectedOptions={filterSelectedOptions}\n      limitTags={limitTags}\n      multiple={multiple}\n      className={className}\n      id={`${multiple ? 'multi-' : ''}select-filter-${name}--select`}\n      options={values || []}\n      loading={loading}\n      value={filterValue}\n      onChange={handleChange}\n      onInputChange={(_, newValue) => setInputValue(newValue)}\n      getOptionLabel={option => option.label}\n      renderInput={renderInput}\n      renderTags={renderTags}\n    />\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/SearchFilter/SearchFilter.esm.js

@@ -11,6 +11,7 @@ import { Select } from '@backstage/core-components';
 import { useSearch } from '../../context/SearchContext.esm.js';
 import { AutocompleteFilter } from './SearchFilter.Autocomplete.esm.js';
 import { useDefaultFilterValue, useAsyncFilterValues } from './hooks.esm.js';
+import { ensureFilterValueWithLabel } from './types.esm.js';
 
 const useStyles = makeStyles({
   label: {
@@ -31,7 +32,7 @@ const CheckboxFilter = (props) => {
   const {
     className,
     defaultValue,
-    label,
+    label: formLabel,
     name,
     values: givenValues = [],
     valuesDebounceMs
@@ -40,7 +41,7 @@ const CheckboxFilter = (props) => {
   const { filters, setFilters } = useSearch();
   useDefaultFilterValue(name, defaultValue);
   const asyncValues = typeof givenValues === "function" ? givenValues : void 0;
-  const defaultValues = typeof givenValues === "function" ? void 0 : givenValues;
+  const defaultValues = typeof givenValues === "function" ? void 0 : givenValues.map((v) => ensureFilterValueWithLabel(v));
   const { value: values = [], loading } = useAsyncFilterValues(
     asyncValues,
     "",
@@ -66,22 +67,22 @@ const CheckboxFilter = (props) => {
       fullWidth: true,
       "data-testid": "search-checkboxfilter-next",
       children: [
-        label ? /* @__PURE__ */ jsx(FormLabel, { className: classes.label, children: label }) : null,
-        values.map((value) => /* @__PURE__ */ jsx(
+        !!formLabel && /* @__PURE__ */ jsx(FormLabel, { className: classes.label, children: formLabel }),
+        values.map(({ value, label }) => /* @__PURE__ */ jsx(
           FormControlLabel,
           {
             classes: {
               root: classes.checkboxWrapper,
               label: classes.textWrapper
             },
-            label: value,
+            label,
             control: /* @__PURE__ */ jsx(
               Checkbox,
               {
                 color: "primary",
-                inputProps: { "aria-labelledby": value },
+                inputProps: { "aria-labelledby": label },
                 value,
-                name: value,
+                name: label,
                 onChange: handleChange,
                 checked: (filters[name] ?? []).includes(value)
               }
@@ -104,7 +105,7 @@ const SelectFilter = (props) => {
   } = props;
   useDefaultFilterValue(name, defaultValue);
   const asyncValues = typeof givenValues === "function" ? givenValues : void 0;
-  const defaultValues = typeof givenValues === "function" ? void 0 : givenValues;
+  const defaultValues = typeof givenValues === "function" ? void 0 : givenValues?.map((v) => ensureFilterValueWithLabel(v));
   const { value: values = [], loading } = useAsyncFilterValues(
     asyncValues,
     "",
@@ -120,7 +121,7 @@ const SelectFilter = (props) => {
       return value !== allOptionValue.current ? { ...others, [name]: value } : others;
     });
   };
-  const items = [allOption, ...values.map((value) => ({ value, label: value }))];
+  const items = [allOption, ...values];
   return /* @__PURE__ */ jsx(
     FormControl,
     {

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

@@ -1 +1 @@
-{"version":3,"file":"SearchFilter.esm.js","sources":["../../../src/components/SearchFilter/SearchFilter.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 { ReactElement, ChangeEvent, useRef } from 'react';\nimport { capitalize } from 'lodash';\nimport { v4 as uuid } from 'uuid';\nimport FormControl from '@material-ui/core/FormControl';\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\nimport Checkbox from '@material-ui/core/Checkbox';\nimport FormLabel from '@material-ui/core/FormLabel';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { Select, SelectedItems } from '@backstage/core-components';\n\nimport { useSearch } from '../../context';\nimport {\n  AutocompleteFilter,\n  SearchAutocompleteFilterProps,\n} from './SearchFilter.Autocomplete';\nimport { useAsyncFilterValues, useDefaultFilterValue } from './hooks';\n\nconst useStyles = makeStyles({\n  label: {\n    textTransform: 'capitalize',\n  },\n  checkboxWrapper: {\n    display: 'flex',\n    alignItems: 'center',\n    width: '100%',\n  },\n  textWrapper: {\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n  },\n});\n\n/**\n * @public\n */\nexport type SearchFilterComponentProps = {\n  className?: string;\n  name: string;\n  label?: string;\n  /**\n   * Either an array of values directly, or an async function to return a list\n   * of values to be used in the filter. In the autocomplete filter, the last\n   * input value is provided as an input to allow values to be filtered. This\n   * function is debounced and values cached.\n   */\n  values?: string[] | ((partial: string) => Promise<string[]>);\n  defaultValue?: string[] | string | null;\n  /**\n   * Debounce time in milliseconds, used when values is an async callback.\n   * Defaults to 250ms.\n   */\n  valuesDebounceMs?: number;\n};\n\n/**\n * @public\n */\nexport type SearchFilterWrapperProps = SearchFilterComponentProps & {\n  component: (props: SearchFilterComponentProps) => ReactElement;\n  debug?: boolean;\n};\n\n/**\n * @public\n */\nexport const CheckboxFilter = (props: SearchFilterComponentProps) => {\n  const {\n    className,\n    defaultValue,\n    label,\n    name,\n    values: givenValues = [],\n    valuesDebounceMs,\n  } = props;\n  const classes = useStyles();\n  const { filters, setFilters } = useSearch();\n  useDefaultFilterValue(name, defaultValue);\n  const asyncValues =\n    typeof givenValues === 'function' ? givenValues : undefined;\n  const defaultValues =\n    typeof givenValues === 'function' ? undefined : givenValues;\n  const { value: values = [], loading } = useAsyncFilterValues(\n    asyncValues,\n    '',\n    defaultValues,\n    valuesDebounceMs,\n  );\n\n  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n    const {\n      target: { value, checked },\n    } = e;\n\n    setFilters(prevFilters => {\n      const { [name]: filter, ...others } = prevFilters;\n      const rest = ((filter as string[]) || []).filter(i => i !== value);\n      const items = checked ? [...rest, value] : rest;\n      return items.length ? { ...others, [name]: items } : others;\n    });\n  };\n\n  return (\n    <FormControl\n      className={className}\n      disabled={loading}\n      fullWidth\n      data-testid=\"search-checkboxfilter-next\"\n    >\n      {label ? <FormLabel className={classes.label}>{label}</FormLabel> : null}\n      {values.map((value: string) => (\n        <FormControlLabel\n          key={value}\n          classes={{\n            root: classes.checkboxWrapper,\n            label: classes.textWrapper,\n          }}\n          label={value}\n          control={\n            <Checkbox\n              color=\"primary\"\n              inputProps={{ 'aria-labelledby': value }}\n              value={value}\n              name={value}\n              onChange={handleChange}\n              checked={((filters[name] as string[]) ?? []).includes(value)}\n            />\n          }\n        />\n      ))}\n    </FormControl>\n  );\n};\n\n/**\n * @public\n */\nexport const SelectFilter = (props: SearchFilterComponentProps) => {\n  const {\n    className,\n    defaultValue,\n    label,\n    name,\n    values: givenValues,\n    valuesDebounceMs,\n  } = props;\n  useDefaultFilterValue(name, defaultValue);\n  const asyncValues =\n    typeof givenValues === 'function' ? givenValues : undefined;\n  const defaultValues =\n    typeof givenValues === 'function' ? undefined : givenValues;\n  const { value: values = [], loading } = useAsyncFilterValues(\n    asyncValues,\n    '',\n    defaultValues,\n    valuesDebounceMs,\n  );\n  const allOptionValue = useRef(uuid());\n  const allOption = { value: allOptionValue.current, label: 'All' };\n  const { filters, setFilters } = useSearch();\n\n  const handleChange = (value: SelectedItems) => {\n    setFilters(prevFilters => {\n      const { [name]: filter, ...others } = prevFilters;\n      return value !== allOptionValue.current\n        ? { ...others, [name]: value as string }\n        : others;\n    });\n  };\n\n  const items = [allOption, ...values.map(value => ({ value, label: value }))];\n\n  return (\n    <FormControl\n      disabled={loading}\n      className={className}\n      variant=\"filled\"\n      fullWidth\n      data-testid=\"search-selectfilter-next\"\n    >\n      <Select\n        label={label ?? capitalize(name)}\n        selected={(filters[name] || allOptionValue.current) as string}\n        onChange={handleChange}\n        items={items}\n      />\n    </FormControl>\n  );\n};\n\n/**\n * @public\n */\nconst SearchFilter = (props: SearchFilterWrapperProps) => {\n  const { component: Element, ...elementProps } = props;\n  return <Element {...elementProps} />;\n};\n\nSearchFilter.Checkbox = (\n  props: Omit<SearchFilterWrapperProps, 'component'> &\n    SearchFilterComponentProps,\n) => <SearchFilter {...props} component={CheckboxFilter} />;\n\nSearchFilter.Select = (\n  props: Omit<SearchFilterWrapperProps, 'component'> &\n    SearchFilterComponentProps,\n) => <SearchFilter {...props} component={SelectFilter} />;\n\n/**\n * A control surface for a given filter field name, rendered as an autocomplete\n * textfield. A hard-coded list of values may be provided, or an async function\n * which returns values may be provided instead.\n *\n * @public\n */\nSearchFilter.Autocomplete = (props: SearchAutocompleteFilterProps) => (\n  <SearchFilter {...props} component={AutocompleteFilter} />\n);\n\nexport { SearchFilter };\n"],"names":["uuid"],"mappings":";;;;;;;;;;;;;;AAiCA,MAAM,YAAY,UAAW,CAAA;AAAA,EAC3B,KAAO,EAAA;AAAA,IACL,aAAe,EAAA;AAAA,GACjB;AAAA,EACA,eAAiB,EAAA;AAAA,IACf,OAAS,EAAA,MAAA;AAAA,IACT,UAAY,EAAA,QAAA;AAAA,IACZ,KAAO,EAAA;AAAA,GACT;AAAA,EACA,WAAa,EAAA;AAAA,IACX,QAAU,EAAA,QAAA;AAAA,IACV,YAAc,EAAA,UAAA;AAAA,IACd,UAAY,EAAA;AAAA;AAEhB,CAAC,CAAA;AAmCY,MAAA,cAAA,GAAiB,CAAC,KAAsC,KAAA;AACnE,EAAM,MAAA;AAAA,IACJ,SAAA;AAAA,IACA,YAAA;AAAA,IACA,KAAA;AAAA,IACA,IAAA;AAAA,IACA,MAAA,EAAQ,cAAc,EAAC;AAAA,IACvB;AAAA,GACE,GAAA,KAAA;AACJ,EAAA,MAAM,UAAU,SAAU,EAAA;AAC1B,EAAA,MAAM,EAAE,OAAA,EAAS,UAAW,EAAA,GAAI,SAAU,EAAA;AAC1C,EAAA,qBAAA,CAAsB,MAAM,YAAY,CAAA;AACxC,EAAA,MAAM,WACJ,GAAA,OAAO,WAAgB,KAAA,UAAA,GAAa,WAAc,GAAA,KAAA,CAAA;AACpD,EAAA,MAAM,aACJ,GAAA,OAAO,WAAgB,KAAA,UAAA,GAAa,KAAY,CAAA,GAAA,WAAA;AAClD,EAAA,MAAM,EAAE,KAAO,EAAA,MAAA,GAAS,EAAC,EAAG,SAAY,GAAA,oBAAA;AAAA,IACtC,WAAA;AAAA,IACA,EAAA;AAAA,IACA,aAAA;AAAA,IACA;AAAA,GACF;AAEA,EAAM,MAAA,YAAA,GAAe,CAAC,CAAqC,KAAA;AACzD,IAAM,MAAA;AAAA,MACJ,MAAA,EAAQ,EAAE,KAAA,EAAO,OAAQ;AAAA,KACvB,GAAA,CAAA;AAEJ,IAAA,UAAA,CAAW,CAAe,WAAA,KAAA;AACxB,MAAA,MAAM,EAAE,CAAC,IAAI,GAAG,MAAQ,EAAA,GAAG,QAAW,GAAA,WAAA;AACtC,MAAA,MAAM,QAAS,MAAuB,IAAA,IAAI,MAAO,CAAA,CAAA,CAAA,KAAK,MAAM,KAAK,CAAA;AACjE,MAAA,MAAM,QAAQ,OAAU,GAAA,CAAC,GAAG,IAAA,EAAM,KAAK,CAAI,GAAA,IAAA;AAC3C,MAAO,OAAA,KAAA,CAAM,SAAS,EAAE,GAAG,QAAQ,CAAC,IAAI,GAAG,KAAA,EAAU,GAAA,MAAA;AAAA,KACtD,CAAA;AAAA,GACH;AAEA,EACE,uBAAA,IAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,SAAA;AAAA,MACA,QAAU,EAAA,OAAA;AAAA,MACV,SAAS,EAAA,IAAA;AAAA,MACT,aAAY,EAAA,4BAAA;AAAA,MAEX,QAAA,EAAA;AAAA,QAAA,KAAA,uBAAS,SAAU,EAAA,EAAA,SAAA,EAAW,OAAQ,CAAA,KAAA,EAAQ,iBAAM,CAAe,GAAA,IAAA;AAAA,QACnE,MAAA,CAAO,GAAI,CAAA,CAAC,KACX,qBAAA,GAAA;AAAA,UAAC,gBAAA;AAAA,UAAA;AAAA,YAEC,OAAS,EAAA;AAAA,cACP,MAAM,OAAQ,CAAA,eAAA;AAAA,cACd,OAAO,OAAQ,CAAA;AAAA,aACjB;AAAA,YACA,KAAO,EAAA,KAAA;AAAA,YACP,OACE,kBAAA,GAAA;AAAA,cAAC,QAAA;AAAA,cAAA;AAAA,gBACC,KAAM,EAAA,SAAA;AAAA,gBACN,UAAA,EAAY,EAAE,iBAAA,EAAmB,KAAM,EAAA;AAAA,gBACvC,KAAA;AAAA,gBACA,IAAM,EAAA,KAAA;AAAA,gBACN,QAAU,EAAA,YAAA;AAAA,gBACV,UAAW,OAAQ,CAAA,IAAI,KAAkB,EAAC,EAAG,SAAS,KAAK;AAAA;AAAA;AAC7D,WAAA;AAAA,UAdG;AAAA,SAiBR;AAAA;AAAA;AAAA,GACH;AAEJ;AAKa,MAAA,YAAA,GAAe,CAAC,KAAsC,KAAA;AACjE,EAAM,MAAA;AAAA,IACJ,SAAA;AAAA,IACA,YAAA;AAAA,IACA,KAAA;AAAA,IACA,IAAA;AAAA,IACA,MAAQ,EAAA,WAAA;AAAA,IACR;AAAA,GACE,GAAA,KAAA;AACJ,EAAA,qBAAA,CAAsB,MAAM,YAAY,CAAA;AACxC,EAAA,MAAM,WACJ,GAAA,OAAO,WAAgB,KAAA,UAAA,GAAa,WAAc,GAAA,KAAA,CAAA;AACpD,EAAA,MAAM,aACJ,GAAA,OAAO,WAAgB,KAAA,UAAA,GAAa,KAAY,CAAA,GAAA,WAAA;AAClD,EAAA,MAAM,EAAE,KAAO,EAAA,MAAA,GAAS,EAAC,EAAG,SAAY,GAAA,oBAAA;AAAA,IACtC,WAAA;AAAA,IACA,EAAA;AAAA,IACA,aAAA;AAAA,IACA;AAAA,GACF;AACA,EAAM,MAAA,cAAA,GAAiB,MAAO,CAAAA,EAAA,EAAM,CAAA;AACpC,EAAA,MAAM,YAAY,EAAE,KAAA,EAAO,cAAe,CAAA,OAAA,EAAS,OAAO,KAAM,EAAA;AAChE,EAAA,MAAM,EAAE,OAAA,EAAS,UAAW,EAAA,GAAI,SAAU,EAAA;AAE1C,EAAM,MAAA,YAAA,GAAe,CAAC,KAAyB,KAAA;AAC7C,IAAA,UAAA,CAAW,CAAe,WAAA,KAAA;AACxB,MAAA,MAAM,EAAE,CAAC,IAAI,GAAG,MAAQ,EAAA,GAAG,QAAW,GAAA,WAAA;AACtC,MAAO,OAAA,KAAA,KAAU,cAAe,CAAA,OAAA,GAC5B,EAAE,GAAG,QAAQ,CAAC,IAAI,GAAG,KAAA,EACrB,GAAA,MAAA;AAAA,KACL,CAAA;AAAA,GACH;AAEA,EAAA,MAAM,KAAQ,GAAA,CAAC,SAAW,EAAA,GAAG,MAAO,CAAA,GAAA,CAAI,CAAU,KAAA,MAAA,EAAE,KAAO,EAAA,KAAA,EAAO,KAAM,EAAA,CAAE,CAAC,CAAA;AAE3E,EACE,uBAAA,GAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,QAAU,EAAA,OAAA;AAAA,MACV,SAAA;AAAA,MACA,OAAQ,EAAA,QAAA;AAAA,MACR,SAAS,EAAA,IAAA;AAAA,MACT,aAAY,EAAA,0BAAA;AAAA,MAEZ,QAAA,kBAAA,GAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,KAAA,EAAO,KAAS,IAAA,UAAA,CAAW,IAAI,CAAA;AAAA,UAC/B,QAAW,EAAA,OAAA,CAAQ,IAAI,CAAA,IAAK,cAAe,CAAA,OAAA;AAAA,UAC3C,QAAU,EAAA,YAAA;AAAA,UACV;AAAA;AAAA;AACF;AAAA,GACF;AAEJ;AAKM,MAAA,YAAA,GAAe,CAAC,KAAoC,KAAA;AACxD,EAAA,MAAM,EAAE,SAAA,EAAW,OAAS,EAAA,GAAG,cAAiB,GAAA,KAAA;AAChD,EAAO,uBAAA,GAAA,CAAC,OAAS,EAAA,EAAA,GAAG,YAAc,EAAA,CAAA;AACpC;AAEA,YAAa,CAAA,QAAA,GAAW,CACtB,KAEG,qBAAA,GAAA,CAAC,gBAAc,GAAG,KAAA,EAAO,WAAW,cAAgB,EAAA,CAAA;AAEzD,YAAa,CAAA,MAAA,GAAS,CACpB,KAEG,qBAAA,GAAA,CAAC,gBAAc,GAAG,KAAA,EAAO,WAAW,YAAc,EAAA,CAAA;AASvD,YAAa,CAAA,YAAA,GAAe,CAAC,KAC3B,qBAAA,GAAA,CAAC,gBAAc,GAAG,KAAA,EAAO,WAAW,kBAAoB,EAAA,CAAA;;;;"}
+{"version":3,"file":"SearchFilter.esm.js","sources":["../../../src/components/SearchFilter/SearchFilter.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 { ReactElement, ChangeEvent, useRef } from 'react';\nimport { capitalize } from 'lodash';\nimport { v4 as uuid } from 'uuid';\nimport FormControl from '@material-ui/core/FormControl';\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\nimport Checkbox from '@material-ui/core/Checkbox';\nimport FormLabel from '@material-ui/core/FormLabel';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { Select, SelectedItems } from '@backstage/core-components';\n\nimport { useSearch } from '../../context';\nimport {\n  AutocompleteFilter,\n  SearchAutocompleteFilterProps,\n} from './SearchFilter.Autocomplete';\nimport { useAsyncFilterValues, useDefaultFilterValue } from './hooks';\nimport { ensureFilterValueWithLabel, FilterValue } from './types';\n\nconst useStyles = makeStyles({\n  label: {\n    textTransform: 'capitalize',\n  },\n  checkboxWrapper: {\n    display: 'flex',\n    alignItems: 'center',\n    width: '100%',\n  },\n  textWrapper: {\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n  },\n});\n\n/**\n * @public\n */\nexport type SearchFilterComponentProps = {\n  className?: string;\n  name: string;\n  label?: string;\n  /**\n   * Either an array of values directly, or an async function to return a list\n   * of values to be used in the filter. In the autocomplete filter, the last\n   * input value is provided as an input to allow values to be filtered. This\n   * function is debounced and values cached.\n   */\n  values?: FilterValue[] | ((partial: string) => Promise<FilterValue[]>);\n  defaultValue?: string[] | string | null;\n  /**\n   * Debounce time in milliseconds, used when values is an async callback.\n   * Defaults to 250ms.\n   */\n  valuesDebounceMs?: number;\n};\n\n/**\n * @public\n */\nexport type SearchFilterWrapperProps = SearchFilterComponentProps & {\n  component: (props: SearchFilterComponentProps) => ReactElement;\n  debug?: boolean;\n};\n\n/**\n * @public\n */\nexport const CheckboxFilter = (props: SearchFilterComponentProps) => {\n  const {\n    className,\n    defaultValue,\n    label: formLabel,\n    name,\n    values: givenValues = [],\n    valuesDebounceMs,\n  } = props;\n  const classes = useStyles();\n  const { filters, setFilters } = useSearch();\n  useDefaultFilterValue(name, defaultValue);\n  const asyncValues =\n    typeof givenValues === 'function' ? givenValues : undefined;\n  const defaultValues =\n    typeof givenValues === 'function'\n      ? undefined\n      : givenValues.map(v => ensureFilterValueWithLabel(v));\n  const { value: values = [], loading } = useAsyncFilterValues(\n    asyncValues,\n    '',\n    defaultValues,\n    valuesDebounceMs,\n  );\n\n  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n    const {\n      target: { value, checked },\n    } = e;\n\n    setFilters(prevFilters => {\n      const { [name]: filter, ...others } = prevFilters;\n      const rest = ((filter as string[]) || []).filter(i => i !== value);\n      const items = checked ? [...rest, value] : rest;\n      return items.length ? { ...others, [name]: items } : others;\n    });\n  };\n\n  return (\n    <FormControl\n      className={className}\n      disabled={loading}\n      fullWidth\n      data-testid=\"search-checkboxfilter-next\"\n    >\n      {!!formLabel && (\n        <FormLabel className={classes.label}>{formLabel}</FormLabel>\n      )}\n      {values.map(({ value, label }) => (\n        <FormControlLabel\n          key={value}\n          classes={{\n            root: classes.checkboxWrapper,\n            label: classes.textWrapper,\n          }}\n          label={label}\n          control={\n            <Checkbox\n              color=\"primary\"\n              inputProps={{ 'aria-labelledby': label }}\n              value={value}\n              name={label}\n              onChange={handleChange}\n              checked={((filters[name] as string[]) ?? []).includes(value)}\n            />\n          }\n        />\n      ))}\n    </FormControl>\n  );\n};\n\n/**\n * @public\n */\nexport const SelectFilter = (props: SearchFilterComponentProps) => {\n  const {\n    className,\n    defaultValue,\n    label,\n    name,\n    values: givenValues,\n    valuesDebounceMs,\n  } = props;\n  useDefaultFilterValue(name, defaultValue);\n  const asyncValues =\n    typeof givenValues === 'function' ? givenValues : undefined;\n  const defaultValues =\n    typeof givenValues === 'function'\n      ? undefined\n      : givenValues?.map(v => ensureFilterValueWithLabel(v));\n  const { value: values = [], loading } = useAsyncFilterValues(\n    asyncValues,\n    '',\n    defaultValues,\n    valuesDebounceMs,\n  );\n  const allOptionValue = useRef(uuid());\n  const allOption = { value: allOptionValue.current, label: 'All' };\n  const { filters, setFilters } = useSearch();\n\n  const handleChange = (value: SelectedItems) => {\n    setFilters(prevFilters => {\n      const { [name]: filter, ...others } = prevFilters;\n      return value !== allOptionValue.current\n        ? { ...others, [name]: value as string }\n        : others;\n    });\n  };\n\n  const items = [allOption, ...values];\n\n  return (\n    <FormControl\n      disabled={loading}\n      className={className}\n      variant=\"filled\"\n      fullWidth\n      data-testid=\"search-selectfilter-next\"\n    >\n      <Select\n        label={label ?? capitalize(name)}\n        selected={(filters[name] || allOptionValue.current) as string}\n        onChange={handleChange}\n        items={items}\n      />\n    </FormControl>\n  );\n};\n\n/**\n * @public\n */\nconst SearchFilter = (props: SearchFilterWrapperProps) => {\n  const { component: Element, ...elementProps } = props;\n  return <Element {...elementProps} />;\n};\n\nSearchFilter.Checkbox = (\n  props: Omit<SearchFilterWrapperProps, 'component'> &\n    SearchFilterComponentProps,\n) => <SearchFilter {...props} component={CheckboxFilter} />;\n\nSearchFilter.Select = (\n  props: Omit<SearchFilterWrapperProps, 'component'> &\n    SearchFilterComponentProps,\n) => <SearchFilter {...props} component={SelectFilter} />;\n\n/**\n * A control surface for a given filter field name, rendered as an autocomplete\n * textfield. A hard-coded list of values may be provided, or an async function\n * which returns values may be provided instead.\n *\n * @public\n */\nSearchFilter.Autocomplete = (props: SearchAutocompleteFilterProps) => (\n  <SearchFilter {...props} component={AutocompleteFilter} />\n);\n\nexport { SearchFilter };\n"],"names":["uuid"],"mappings":";;;;;;;;;;;;;;;AAkCA,MAAM,YAAY,UAAW,CAAA;AAAA,EAC3B,KAAO,EAAA;AAAA,IACL,aAAe,EAAA;AAAA,GACjB;AAAA,EACA,eAAiB,EAAA;AAAA,IACf,OAAS,EAAA,MAAA;AAAA,IACT,UAAY,EAAA,QAAA;AAAA,IACZ,KAAO,EAAA;AAAA,GACT;AAAA,EACA,WAAa,EAAA;AAAA,IACX,QAAU,EAAA,QAAA;AAAA,IACV,YAAc,EAAA,UAAA;AAAA,IACd,UAAY,EAAA;AAAA;AAEhB,CAAC,CAAA;AAmCY,MAAA,cAAA,GAAiB,CAAC,KAAsC,KAAA;AACnE,EAAM,MAAA;AAAA,IACJ,SAAA;AAAA,IACA,YAAA;AAAA,IACA,KAAO,EAAA,SAAA;AAAA,IACP,IAAA;AAAA,IACA,MAAA,EAAQ,cAAc,EAAC;AAAA,IACvB;AAAA,GACE,GAAA,KAAA;AACJ,EAAA,MAAM,UAAU,SAAU,EAAA;AAC1B,EAAA,MAAM,EAAE,OAAA,EAAS,UAAW,EAAA,GAAI,SAAU,EAAA;AAC1C,EAAA,qBAAA,CAAsB,MAAM,YAAY,CAAA;AACxC,EAAA,MAAM,WACJ,GAAA,OAAO,WAAgB,KAAA,UAAA,GAAa,WAAc,GAAA,KAAA,CAAA;AACpD,EAAM,MAAA,aAAA,GACJ,OAAO,WAAA,KAAgB,UACnB,GAAA,KAAA,CAAA,GACA,YAAY,GAAI,CAAA,CAAA,CAAA,KAAK,0BAA2B,CAAA,CAAC,CAAC,CAAA;AACxD,EAAA,MAAM,EAAE,KAAO,EAAA,MAAA,GAAS,EAAC,EAAG,SAAY,GAAA,oBAAA;AAAA,IACtC,WAAA;AAAA,IACA,EAAA;AAAA,IACA,aAAA;AAAA,IACA;AAAA,GACF;AAEA,EAAM,MAAA,YAAA,GAAe,CAAC,CAAqC,KAAA;AACzD,IAAM,MAAA;AAAA,MACJ,MAAA,EAAQ,EAAE,KAAA,EAAO,OAAQ;AAAA,KACvB,GAAA,CAAA;AAEJ,IAAA,UAAA,CAAW,CAAe,WAAA,KAAA;AACxB,MAAA,MAAM,EAAE,CAAC,IAAI,GAAG,MAAQ,EAAA,GAAG,QAAW,GAAA,WAAA;AACtC,MAAA,MAAM,QAAS,MAAuB,IAAA,IAAI,MAAO,CAAA,CAAA,CAAA,KAAK,MAAM,KAAK,CAAA;AACjE,MAAA,MAAM,QAAQ,OAAU,GAAA,CAAC,GAAG,IAAA,EAAM,KAAK,CAAI,GAAA,IAAA;AAC3C,MAAO,OAAA,KAAA,CAAM,SAAS,EAAE,GAAG,QAAQ,CAAC,IAAI,GAAG,KAAA,EAAU,GAAA,MAAA;AAAA,KACtD,CAAA;AAAA,GACH;AAEA,EACE,uBAAA,IAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,SAAA;AAAA,MACA,QAAU,EAAA,OAAA;AAAA,MACV,SAAS,EAAA,IAAA;AAAA,MACT,aAAY,EAAA,4BAAA;AAAA,MAEX,QAAA,EAAA;AAAA,QAAA,CAAC,CAAC,SACD,oBAAA,GAAA,CAAC,aAAU,SAAW,EAAA,OAAA,CAAQ,OAAQ,QAAU,EAAA,SAAA,EAAA,CAAA;AAAA,QAEjD,OAAO,GAAI,CAAA,CAAC,EAAE,KAAA,EAAO,OACpB,qBAAA,GAAA;AAAA,UAAC,gBAAA;AAAA,UAAA;AAAA,YAEC,OAAS,EAAA;AAAA,cACP,MAAM,OAAQ,CAAA,eAAA;AAAA,cACd,OAAO,OAAQ,CAAA;AAAA,aACjB;AAAA,YACA,KAAA;AAAA,YACA,OACE,kBAAA,GAAA;AAAA,cAAC,QAAA;AAAA,cAAA;AAAA,gBACC,KAAM,EAAA,SAAA;AAAA,gBACN,UAAA,EAAY,EAAE,iBAAA,EAAmB,KAAM,EAAA;AAAA,gBACvC,KAAA;AAAA,gBACA,IAAM,EAAA,KAAA;AAAA,gBACN,QAAU,EAAA,YAAA;AAAA,gBACV,UAAW,OAAQ,CAAA,IAAI,KAAkB,EAAC,EAAG,SAAS,KAAK;AAAA;AAAA;AAC7D,WAAA;AAAA,UAdG;AAAA,SAiBR;AAAA;AAAA;AAAA,GACH;AAEJ;AAKa,MAAA,YAAA,GAAe,CAAC,KAAsC,KAAA;AACjE,EAAM,MAAA;AAAA,IACJ,SAAA;AAAA,IACA,YAAA;AAAA,IACA,KAAA;AAAA,IACA,IAAA;AAAA,IACA,MAAQ,EAAA,WAAA;AAAA,IACR;AAAA,GACE,GAAA,KAAA;AACJ,EAAA,qBAAA,CAAsB,MAAM,YAAY,CAAA;AACxC,EAAA,MAAM,WACJ,GAAA,OAAO,WAAgB,KAAA,UAAA,GAAa,WAAc,GAAA,KAAA,CAAA;AACpD,EAAM,MAAA,aAAA,GACJ,OAAO,WAAA,KAAgB,UACnB,GAAA,KAAA,CAAA,GACA,aAAa,GAAI,CAAA,CAAA,CAAA,KAAK,0BAA2B,CAAA,CAAC,CAAC,CAAA;AACzD,EAAA,MAAM,EAAE,KAAO,EAAA,MAAA,GAAS,EAAC,EAAG,SAAY,GAAA,oBAAA;AAAA,IACtC,WAAA;AAAA,IACA,EAAA;AAAA,IACA,aAAA;AAAA,IACA;AAAA,GACF;AACA,EAAM,MAAA,cAAA,GAAiB,MAAO,CAAAA,EAAA,EAAM,CAAA;AACpC,EAAA,MAAM,YAAY,EAAE,KAAA,EAAO,cAAe,CAAA,OAAA,EAAS,OAAO,KAAM,EAAA;AAChE,EAAA,MAAM,EAAE,OAAA,EAAS,UAAW,EAAA,GAAI,SAAU,EAAA;AAE1C,EAAM,MAAA,YAAA,GAAe,CAAC,KAAyB,KAAA;AAC7C,IAAA,UAAA,CAAW,CAAe,WAAA,KAAA;AACxB,MAAA,MAAM,EAAE,CAAC,IAAI,GAAG,MAAQ,EAAA,GAAG,QAAW,GAAA,WAAA;AACtC,MAAO,OAAA,KAAA,KAAU,cAAe,CAAA,OAAA,GAC5B,EAAE,GAAG,QAAQ,CAAC,IAAI,GAAG,KAAA,EACrB,GAAA,MAAA;AAAA,KACL,CAAA;AAAA,GACH;AAEA,EAAA,MAAM,KAAQ,GAAA,CAAC,SAAW,EAAA,GAAG,MAAM,CAAA;AAEnC,EACE,uBAAA,GAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,QAAU,EAAA,OAAA;AAAA,MACV,SAAA;AAAA,MACA,OAAQ,EAAA,QAAA;AAAA,MACR,SAAS,EAAA,IAAA;AAAA,MACT,aAAY,EAAA,0BAAA;AAAA,MAEZ,QAAA,kBAAA,GAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,KAAA,EAAO,KAAS,IAAA,UAAA,CAAW,IAAI,CAAA;AAAA,UAC/B,QAAW,EAAA,OAAA,CAAQ,IAAI,CAAA,IAAK,cAAe,CAAA,OAAA;AAAA,UAC3C,QAAU,EAAA,YAAA;AAAA,UACV;AAAA;AAAA;AACF;AAAA,GACF;AAEJ;AAKM,MAAA,YAAA,GAAe,CAAC,KAAoC,KAAA;AACxD,EAAA,MAAM,EAAE,SAAA,EAAW,OAAS,EAAA,GAAG,cAAiB,GAAA,KAAA;AAChD,EAAO,uBAAA,GAAA,CAAC,OAAS,EAAA,EAAA,GAAG,YAAc,EAAA,CAAA;AACpC;AAEA,YAAa,CAAA,QAAA,GAAW,CACtB,KAEG,qBAAA,GAAA,CAAC,gBAAc,GAAG,KAAA,EAAO,WAAW,cAAgB,EAAA,CAAA;AAEzD,YAAa,CAAA,MAAA,GAAS,CACpB,KAEG,qBAAA,GAAA,CAAC,gBAAc,GAAG,KAAA,EAAO,WAAW,YAAc,EAAA,CAAA;AASvD,YAAa,CAAA,YAAA,GAAe,CAAC,KAC3B,qBAAA,GAAA,CAAC,gBAAc,GAAG,KAAA,EAAO,WAAW,kBAAoB,EAAA,CAAA;;;;"}

package/dist/components/SearchFilter/hooks.esm.js

@@ -1,11 +1,17 @@
-import { useRef, useEffect } from 'react';
+import { useRef, useCallback, useEffect } from 'react';
 import useAsyncFn from 'react-use/esm/useAsyncFn';
 import useDebounce from 'react-use/esm/useDebounce';
 import { useSearch } from '../../context/SearchContext.esm.js';
+import { ensureFilterValueWithLabel } from './types.esm.js';
 
 const useAsyncFilterValues = (fn, inputValue, defaultValues = [], debounce = 250) => {
   const valuesMemo = useRef({});
-  const definiteFn = fn || (() => Promise.resolve([]));
+  const definiteFn = useCallback(
+    async (partial) => {
+      return (await fn?.(partial))?.map((v) => ensureFilterValueWithLabel(v)) || [];
+    },
+    [fn]
+  );
   const [state, callback] = useAsyncFn(definiteFn, [inputValue], {
     loading: true
   });

package/dist/components/SearchFilter/hooks.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"hooks.esm.js","sources":["../../../src/components/SearchFilter/hooks.ts"],"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 { useEffect, useRef } from 'react';\nimport useAsyncFn from 'react-use/esm/useAsyncFn';\nimport useDebounce from 'react-use/esm/useDebounce';\n\nimport { useSearch } from '../../context';\n\n/**\n * Utility hook for either asynchronously loading filter values from a given\n * function or synchronously providing a given list of default values.\n *\n * @public\n */\nexport const useAsyncFilterValues = (\n  fn: ((partial: string) => Promise<string[]>) | undefined,\n  inputValue: string,\n  defaultValues: string[] = [],\n  debounce: number = 250,\n) => {\n  const valuesMemo = useRef<Record<string, string[] | Promise<string[]>>>({});\n  const definiteFn = fn || (() => Promise.resolve([]));\n\n  const [state, callback] = useAsyncFn(definiteFn, [inputValue], {\n    loading: true,\n  });\n\n  // Do not invoke the given function more than necessary.\n  useDebounce(\n    () => {\n      // Performance optimization: only invoke the callback once per inputValue\n      // for the lifetime of the hook/component.\n      if (valuesMemo.current[inputValue] === undefined) {\n        valuesMemo.current[inputValue] = callback(inputValue).then(values => {\n          // Override the value for future immediate returns.\n          valuesMemo.current[inputValue] = values;\n          return values;\n        });\n      }\n    },\n    debounce,\n    [callback, inputValue],\n  );\n\n  // Immediately return the default values if they are provided.\n  if (defaultValues.length) {\n    return {\n      loading: false,\n      value: defaultValues,\n    };\n  }\n\n  // Immediately return a memoized value if it is set (and not a promise).\n  const possibleValue = valuesMemo.current[inputValue];\n  if (Array.isArray(possibleValue)) {\n    return {\n      loading: false,\n      value: possibleValue,\n    };\n  }\n\n  return state;\n};\n\n/**\n * Utility hook for applying a given default value to the search context.\n *\n * @public\n */\nexport const useDefaultFilterValue = (\n  name: string,\n  defaultValue?: string | string[] | null,\n) => {\n  const { setFilters } = useSearch();\n\n  useEffect(() => {\n    if (defaultValue && [defaultValue].flat().length > 0) {\n      setFilters(prevFilters => ({\n        ...prevFilters,\n        [name]: defaultValue,\n      }));\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n};\n"],"names":[],"mappings":";;;;;AA4Ba,MAAA,oBAAA,GAAuB,CAClC,EACA,EAAA,UAAA,EACA,gBAA0B,EAAC,EAC3B,WAAmB,GAChB,KAAA;AACH,EAAM,MAAA,UAAA,GAAa,MAAqD,CAAA,EAAE,CAAA;AAC1E,EAAA,MAAM,aAAa,EAAO,KAAA,MAAM,OAAQ,CAAA,OAAA,CAAQ,EAAE,CAAA,CAAA;AAElD,EAAM,MAAA,CAAC,OAAO,QAAQ,CAAA,GAAI,WAAW,UAAY,EAAA,CAAC,UAAU,CAAG,EAAA;AAAA,IAC7D,OAAS,EAAA;AAAA,GACV,CAAA;AAGD,EAAA,WAAA;AAAA,IACE,MAAM;AAGJ,MAAA,IAAI,UAAW,CAAA,OAAA,CAAQ,UAAU,CAAA,KAAM,KAAW,CAAA,EAAA;AAChD,QAAA,UAAA,CAAW,QAAQ,UAAU,CAAA,GAAI,SAAS,UAAU,CAAA,CAAE,KAAK,CAAU,MAAA,KAAA;AAEnE,UAAW,UAAA,CAAA,OAAA,CAAQ,UAAU,CAAI,GAAA,MAAA;AACjC,UAAO,OAAA,MAAA;AAAA,SACR,CAAA;AAAA;AACH,KACF;AAAA,IACA,QAAA;AAAA,IACA,CAAC,UAAU,UAAU;AAAA,GACvB;AAGA,EAAA,IAAI,cAAc,MAAQ,EAAA;AACxB,IAAO,OAAA;AAAA,MACL,OAAS,EAAA,KAAA;AAAA,MACT,KAAO,EAAA;AAAA,KACT;AAAA;AAIF,EAAM,MAAA,aAAA,GAAgB,UAAW,CAAA,OAAA,CAAQ,UAAU,CAAA;AACnD,EAAI,IAAA,KAAA,CAAM,OAAQ,CAAA,aAAa,CAAG,EAAA;AAChC,IAAO,OAAA;AAAA,MACL,OAAS,EAAA,KAAA;AAAA,MACT,KAAO,EAAA;AAAA,KACT;AAAA;AAGF,EAAO,OAAA,KAAA;AACT;AAOa,MAAA,qBAAA,GAAwB,CACnC,IAAA,EACA,YACG,KAAA;AACH,EAAM,MAAA,EAAE,UAAW,EAAA,GAAI,SAAU,EAAA;AAEjC,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,gBAAgB,CAAC,YAAY,EAAE,IAAK,EAAA,CAAE,SAAS,CAAG,EAAA;AACpD,MAAA,UAAA,CAAW,CAAgB,WAAA,MAAA;AAAA,QACzB,GAAG,WAAA;AAAA,QACH,CAAC,IAAI,GAAG;AAAA,OACR,CAAA,CAAA;AAAA;AACJ,GAEF,EAAG,EAAE,CAAA;AACP;;;;"}
+{"version":3,"file":"hooks.esm.js","sources":["../../../src/components/SearchFilter/hooks.ts"],"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 { useCallback, useEffect, useRef } from 'react';\nimport useAsyncFn from 'react-use/esm/useAsyncFn';\nimport useDebounce from 'react-use/esm/useDebounce';\n\nimport { useSearch } from '../../context';\nimport {\n  ensureFilterValueWithLabel,\n  FilterValue,\n  FilterValueWithLabel,\n} from './types';\n\n/**\n * Utility hook for either asynchronously loading filter values from a given\n * function or synchronously providing a given list of default values.\n *\n * @public\n */\nexport const useAsyncFilterValues = (\n  fn: ((partial: string) => Promise<FilterValue[]>) | undefined,\n  inputValue: string,\n  defaultValues: FilterValueWithLabel[] = [],\n  debounce: number = 250,\n) => {\n  const valuesMemo = useRef<\n    Record<string, FilterValueWithLabel[] | Promise<FilterValueWithLabel[]>>\n  >({});\n  const definiteFn = useCallback(\n    async (partial: string) => {\n      return (\n        (await fn?.(partial))?.map(v => ensureFilterValueWithLabel(v)) || []\n      );\n    },\n    [fn],\n  );\n\n  const [state, callback] = useAsyncFn(definiteFn, [inputValue], {\n    loading: true,\n  });\n\n  // Do not invoke the given function more than necessary.\n  useDebounce(\n    () => {\n      // Performance optimization: only invoke the callback once per inputValue\n      // for the lifetime of the hook/component.\n      if (valuesMemo.current[inputValue] === undefined) {\n        valuesMemo.current[inputValue] = callback(inputValue).then(values => {\n          // Override the value for future immediate returns.\n          valuesMemo.current[inputValue] = values;\n          return values;\n        });\n      }\n    },\n    debounce,\n    [callback, inputValue],\n  );\n\n  // Immediately return the default values if they are provided.\n  if (defaultValues.length) {\n    return {\n      loading: false,\n      value: defaultValues,\n    };\n  }\n\n  // Immediately return a memoized value if it is set (and not a promise).\n  const possibleValue = valuesMemo.current[inputValue];\n  if (Array.isArray(possibleValue)) {\n    return {\n      loading: false,\n      value: possibleValue,\n    };\n  }\n\n  return state;\n};\n\n/**\n * Utility hook for applying a given default value to the search context.\n *\n * @public\n */\nexport const useDefaultFilterValue = (\n  name: string,\n  defaultValue?: string | string[] | null,\n) => {\n  const { setFilters } = useSearch();\n\n  useEffect(() => {\n    if (defaultValue && [defaultValue].flat().length > 0) {\n      setFilters(prevFilters => ({\n        ...prevFilters,\n        [name]: defaultValue,\n      }));\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n};\n"],"names":[],"mappings":";;;;;;AAiCa,MAAA,oBAAA,GAAuB,CAClC,EACA,EAAA,UAAA,EACA,gBAAwC,EAAC,EACzC,WAAmB,GAChB,KAAA;AACH,EAAM,MAAA,UAAA,GAAa,MAEjB,CAAA,EAAE,CAAA;AACJ,EAAA,MAAM,UAAa,GAAA,WAAA;AAAA,IACjB,OAAO,OAAoB,KAAA;AACzB,MACG,OAAA,CAAA,MAAM,EAAK,GAAA,OAAO,CAAI,GAAA,GAAA,CAAI,OAAK,0BAA2B,CAAA,CAAC,CAAC,CAAA,IAAK,EAAC;AAAA,KAEvE;AAAA,IACA,CAAC,EAAE;AAAA,GACL;AAEA,EAAM,MAAA,CAAC,OAAO,QAAQ,CAAA,GAAI,WAAW,UAAY,EAAA,CAAC,UAAU,CAAG,EAAA;AAAA,IAC7D,OAAS,EAAA;AAAA,GACV,CAAA;AAGD,EAAA,WAAA;AAAA,IACE,MAAM;AAGJ,MAAA,IAAI,UAAW,CAAA,OAAA,CAAQ,UAAU,CAAA,KAAM,KAAW,CAAA,EAAA;AAChD,QAAA,UAAA,CAAW,QAAQ,UAAU,CAAA,GAAI,SAAS,UAAU,CAAA,CAAE,KAAK,CAAU,MAAA,KAAA;AAEnE,UAAW,UAAA,CAAA,OAAA,CAAQ,UAAU,CAAI,GAAA,MAAA;AACjC,UAAO,OAAA,MAAA;AAAA,SACR,CAAA;AAAA;AACH,KACF;AAAA,IACA,QAAA;AAAA,IACA,CAAC,UAAU,UAAU;AAAA,GACvB;AAGA,EAAA,IAAI,cAAc,MAAQ,EAAA;AACxB,IAAO,OAAA;AAAA,MACL,OAAS,EAAA,KAAA;AAAA,MACT,KAAO,EAAA;AAAA,KACT;AAAA;AAIF,EAAM,MAAA,aAAA,GAAgB,UAAW,CAAA,OAAA,CAAQ,UAAU,CAAA;AACnD,EAAI,IAAA,KAAA,CAAM,OAAQ,CAAA,aAAa,CAAG,EAAA;AAChC,IAAO,OAAA;AAAA,MACL,OAAS,EAAA,KAAA;AAAA,MACT,KAAO,EAAA;AAAA,KACT;AAAA;AAGF,EAAO,OAAA,KAAA;AACT;AAOa,MAAA,qBAAA,GAAwB,CACnC,IAAA,EACA,YACG,KAAA;AACH,EAAM,MAAA,EAAE,UAAW,EAAA,GAAI,SAAU,EAAA;AAEjC,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,gBAAgB,CAAC,YAAY,EAAE,IAAK,EAAA,CAAE,SAAS,CAAG,EAAA;AACpD,MAAA,UAAA,CAAW,CAAgB,WAAA,MAAA;AAAA,QACzB,GAAG,WAAA;AAAA,QACH,CAAC,IAAI,GAAG;AAAA,OACR,CAAA,CAAA;AAAA;AACJ,GAEF,EAAG,EAAE,CAAA;AACP;;;;"}

package/dist/components/SearchFilter/types.esm.js

@@ -0,0 +1,17 @@
+function ensureFilterValueWithLabel(value) {
+  if (value === void 0) {
+    return void 0;
+  }
+  if (Array.isArray(value)) {
+    return value.map(
+      (v) => ensureFilterValueWithLabel(v)
+    );
+  }
+  if (typeof value === "string") {
+    return { value, label: value };
+  }
+  return value;
+}
+
+export { ensureFilterValueWithLabel };
+//# sourceMappingURL=types.esm.js.map

package/dist/components/SearchFilter/types.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.esm.js","sources":["../../../src/components/SearchFilter/types.ts"],"sourcesContent":["/*\n * Copyright 2025 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\n/**\n * @public\n */\nexport type FilterValueWithLabel = { value: string; label: string };\n\n/**\n * @public\n */\nexport type FilterValue = string | FilterValueWithLabel;\n\n/**\n * Ensure a value is on object form, with a label.\n * Accepts undefined, a single value, or an array of values and returns the\n * expected result - a filter value/label or an array of such, if any.\n */\nexport function ensureFilterValueWithLabel<T extends FilterValue>(\n  value: T | T[] | undefined,\n): typeof value extends undefined\n  ? undefined\n  : typeof value extends ArrayLike<any>\n  ? FilterValueWithLabel[]\n  : FilterValueWithLabel {\n  if (value === undefined) {\n    return undefined as any;\n  }\n\n  if (Array.isArray(value)) {\n    return value.map(\n      v => ensureFilterValueWithLabel(v) as FilterValueWithLabel,\n    ) as any;\n  }\n\n  if (typeof value === 'string') {\n    return { value, label: value } as FilterValueWithLabel as any;\n  }\n  return value as FilterValueWithLabel as any;\n}\n"],"names":[],"mappings":"AA+BO,SAAS,2BACd,KAKuB,EAAA;AACvB,EAAA,IAAI,UAAU,KAAW,CAAA,EAAA;AACvB,IAAO,OAAA,KAAA,CAAA;AAAA;AAGT,EAAI,IAAA,KAAA,CAAM,OAAQ,CAAA,KAAK,CAAG,EAAA;AACxB,IAAA,OAAO,KAAM,CAAA,GAAA;AAAA,MACX,CAAA,CAAA,KAAK,2BAA2B,CAAC;AAAA,KACnC;AAAA;AAGF,EAAI,IAAA,OAAO,UAAU,QAAU,EAAA;AAC7B,IAAO,OAAA,EAAE,KAAO,EAAA,KAAA,EAAO,KAAM,EAAA;AAAA;AAE/B,EAAO,OAAA,KAAA;AACT;;;;"}

package/dist/index.d.ts

@@ -198,6 +198,18 @@ type SearchAutocompleteFilterProps = SearchFilterComponentProps & {
  */
 declare const AutocompleteFilter: (props: SearchAutocompleteFilterProps) => react_jsx_runtime.JSX.Element;
 
+/**
+ * @public
+ */
+type FilterValueWithLabel = {
+    value: string;
+    label: string;
+};
+/**
+ * @public
+ */
+type FilterValue = string | FilterValueWithLabel;
+
 /**
  * @public
  */
@@ -211,7 +223,7 @@ type SearchFilterComponentProps = {
      * input value is provided as an input to allow values to be filtered. This
      * function is debounced and values cached.
      */
-    values?: string[] | ((partial: string) => Promise<string[]>);
+    values?: FilterValue[] | ((partial: string) => Promise<FilterValue[]>);
     defaultValue?: string[] | string | null;
     /**
      * Debounce time in milliseconds, used when values is an async callback.
@@ -760,4 +772,4 @@ type SearchContextProviderProps = PropsWithChildren<{
  */
 declare const SearchContextProvider: (props: SearchContextProviderProps) => react_jsx_runtime.JSX.Element;
 
-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 };
+export { AutocompleteFilter, CheckboxFilter, HigherOrderDefaultResultListItem as DefaultResultListItem, type DefaultResultListItemProps, type FilterValue, type FilterValueWithLabel, 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.8",
+  "version": "1.9.0-next.1",
   "backstage": {
     "role": "web-library",
     "pluginId": "search",
@@ -64,13 +64,13 @@
     "test": "backstage-cli package test"
   },
   "dependencies": {
-    "@backstage/core-components": "^0.17.1",
-    "@backstage/core-plugin-api": "^1.10.6",
-    "@backstage/frontend-plugin-api": "^0.10.1",
-    "@backstage/plugin-search-common": "^1.2.17",
-    "@backstage/theme": "^0.6.5",
-    "@backstage/types": "^1.2.1",
-    "@backstage/version-bridge": "^1.0.11",
+    "@backstage/core-components": "0.17.2-next.1",
+    "@backstage/core-plugin-api": "1.10.7-next.0",
+    "@backstage/frontend-plugin-api": "0.10.2-next.1",
+    "@backstage/plugin-search-common": "1.2.18-next.0",
+    "@backstage/theme": "0.6.6-next.0",
+    "@backstage/types": "1.2.1",
+    "@backstage/version-bridge": "1.0.11",
     "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "4.0.0-alpha.61",
@@ -80,11 +80,11 @@
     "uuid": "^11.0.2"
   },
   "devDependencies": {
-    "@backstage/cli": "^0.32.0",
-    "@backstage/core-app-api": "^1.16.1",
-    "@backstage/frontend-app-api": "^0.11.1",
-    "@backstage/frontend-test-utils": "^0.3.1",
-    "@backstage/test-utils": "^1.7.7",
+    "@backstage/cli": "0.32.1-next.2",
+    "@backstage/core-app-api": "1.16.2-next.0",
+    "@backstage/frontend-app-api": "0.11.2-next.2",
+    "@backstage/frontend-test-utils": "0.3.2-next.2",
+    "@backstage/test-utils": "1.7.8-next.1",
     "@testing-library/dom": "^10.0.0",
     "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "^16.0.0",