@backstage/plugin-catalog-react 1.15.1-next.1 → 1.15.1

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @backstage/plugin-catalog-react
 
+## 1.15.1
+
+### Patch Changes
+
+- aaf6508: Creates new CatalogAutocomplete component in catalog-react that aligns with Select component UI for consistent a dropdown UI for all catalog filters.
+- cbfc0a4: Fixed an issue where the `<EntityListProvider />` in `offset` mode would unnecessarily re-fetch data when the filter didn't change, causing a flicker effect.
+- Updated dependencies
+  - @backstage/frontend-plugin-api@0.9.4
+  - @backstage/core-plugin-api@1.10.3
+  - @backstage/types@1.2.1
+  - @backstage/core-components@0.16.3
+  - @backstage/catalog-client@1.9.1
+  - @backstage/catalog-model@1.7.3
+  - @backstage/core-compat-api@0.3.5
+  - @backstage/errors@1.2.7
+  - @backstage/frontend-test-utils@0.2.5
+  - @backstage/integration-react@1.2.3
+  - @backstage/version-bridge@1.0.10
+  - @backstage/plugin-catalog-common@1.1.3
+  - @backstage/plugin-permission-common@0.8.4
+  - @backstage/plugin-permission-react@0.4.30
+
 ## 1.15.1-next.1
 
 ### Patch Changes

package/dist/components/CatalogAutocomplete/CatalogAutocomplete.esm.js

@@ -0,0 +1,119 @@
+import Box from '@material-ui/core/Box';
+import Typography from '@material-ui/core/Typography';
+import Paper from '@material-ui/core/Paper';
+import Popper from '@material-ui/core/Popper';
+import TextField from '@material-ui/core/TextField';
+import Grow from '@material-ui/core/Grow';
+import { makeStyles, withStyles, createStyles } from '@material-ui/core/styles';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import Autocomplete from '@material-ui/lab/Autocomplete';
+import React, { useCallback } from 'react';
+import { merge } from 'lodash';
+import classNames from 'classnames';
+
+const useStyles = makeStyles(
+  (theme) => ({
+    root: {
+      margin: theme.spacing(1, 0)
+    },
+    label: {
+      position: "relative",
+      fontWeight: "bold",
+      fontSize: theme.typography.body2.fontSize,
+      fontFamily: theme.typography.fontFamily,
+      color: theme.palette.text.primary,
+      "& > span": {
+        top: 0,
+        left: 0,
+        position: "absolute"
+      }
+    }
+  }),
+  { name: "BackstageAutocomplete" }
+);
+const BootstrapAutocomplete = withStyles(
+  (theme) => createStyles({
+    root: {},
+    paper: {
+      margin: 0
+    },
+    hasClearIcon: {},
+    hasPopupIcon: {},
+    focused: {},
+    inputRoot: {
+      marginTop: 24,
+      backgroundColor: theme.palette.background.paper,
+      "$root$hasClearIcon$hasPopupIcon &": {
+        paddingBlock: theme.spacing(0.75),
+        paddingInlineStart: theme.spacing(0.75)
+      },
+      "$root$focused &": {
+        outline: "none"
+      },
+      "$root &:hover > fieldset": {
+        borderColor: "#ced4da"
+      },
+      "$root$focused & > fieldset": {
+        borderWidth: 1,
+        borderColor: theme.palette.primary.main
+      }
+    },
+    popupIndicator: {
+      padding: 0,
+      margin: 0,
+      color: "#616161",
+      "&:hover": {
+        backgroundColor: "unset"
+      },
+      '& [class*="MuiTouchRipple-root"]': {
+        display: "none"
+      }
+    },
+    endAdornment: {
+      "$root$hasClearIcon$hasPopupIcon &": {
+        right: 4
+      }
+    },
+    input: {
+      "$root$hasClearIcon$hasPopupIcon &": {
+        fontSize: theme.typography.body1.fontSize,
+        paddingBlock: theme.spacing(0.8125)
+      }
+    }
+  }),
+  { name: "BackstageAutocompleteBase" }
+)(Autocomplete);
+const PopperComponent = (props) => /* @__PURE__ */ React.createElement(Popper, { ...props, transition: true, placement: "bottom-start" }, ({ TransitionProps }) => /* @__PURE__ */ React.createElement(Grow, { ...TransitionProps, style: { transformOrigin: "0 0 0" } }, /* @__PURE__ */ React.createElement(Box, null, props.children)));
+const PaperComponent = (props) => /* @__PURE__ */ React.createElement(Paper, { ...props, elevation: 8 });
+function CatalogAutocomplete(props) {
+  const { label, name, LabelProps, TextFieldProps, ...rest } = props;
+  const classes = useStyles();
+  const renderInput = useCallback(
+    (params) => /* @__PURE__ */ React.createElement(TextField, { ...merge(params, TextFieldProps), variant: "outlined" }),
+    [TextFieldProps]
+  );
+  const autocomplete = /* @__PURE__ */ React.createElement(
+    BootstrapAutocomplete,
+    {
+      size: "small",
+      ...rest,
+      renderInput: rest.renderInput ?? renderInput,
+      popupIcon: /* @__PURE__ */ React.createElement(ExpandMoreIcon, { "data-testid": `${name}-expand` }),
+      PaperComponent,
+      PopperComponent
+    }
+  );
+  return /* @__PURE__ */ React.createElement(Box, { className: classes.root }, label ? /* @__PURE__ */ React.createElement(
+    Typography,
+    {
+      ...LabelProps,
+      className: classNames(classes.label, LabelProps?.className),
+      component: "label"
+    },
+    /* @__PURE__ */ React.createElement(Box, { component: "span" }, label),
+    autocomplete
+  ) : autocomplete);
+}
+
+export { CatalogAutocomplete };
+//# sourceMappingURL=CatalogAutocomplete.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CatalogAutocomplete.esm.js","sources":["../../../src/components/CatalogAutocomplete/CatalogAutocomplete.tsx"],"sourcesContent":["/*\n * Copyright 2024 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 Box from '@material-ui/core/Box';\nimport Typography, { TypographyProps } from '@material-ui/core/Typography';\nimport Paper, { PaperProps } from '@material-ui/core/Paper';\nimport Popper, { PopperProps } from '@material-ui/core/Popper';\nimport TextField, { OutlinedTextFieldProps } from '@material-ui/core/TextField';\nimport Grow from '@material-ui/core/Grow';\nimport {\n  createStyles,\n  makeStyles,\n  Theme,\n  withStyles,\n} from '@material-ui/core/styles';\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore';\nimport Autocomplete, {\n  AutocompleteProps,\n  AutocompleteRenderInputParams,\n} from '@material-ui/lab/Autocomplete';\nimport React, { ReactNode, useCallback } from 'react';\nimport { merge } from 'lodash';\nimport classNames from 'classnames';\n\nconst useStyles = makeStyles(\n  theme => ({\n    root: {\n      margin: theme.spacing(1, 0),\n    },\n    label: {\n      position: 'relative',\n      fontWeight: 'bold',\n      fontSize: theme.typography.body2.fontSize,\n      fontFamily: theme.typography.fontFamily,\n      color: theme.palette.text.primary,\n      '& > span': {\n        top: 0,\n        left: 0,\n        position: 'absolute',\n      },\n    },\n  }),\n  { name: 'BackstageAutocomplete' },\n);\n\nconst BootstrapAutocomplete = withStyles(\n  (theme: Theme) =>\n    createStyles({\n      root: {},\n      paper: {\n        margin: 0,\n      },\n      hasClearIcon: {},\n      hasPopupIcon: {},\n      focused: {},\n      inputRoot: {\n        marginTop: 24,\n        backgroundColor: theme.palette.background.paper,\n        '$root$hasClearIcon$hasPopupIcon &': {\n          paddingBlock: theme.spacing(0.75),\n          paddingInlineStart: theme.spacing(0.75),\n        },\n        '$root$focused &': {\n          outline: 'none',\n        },\n        '$root &:hover > fieldset': {\n          borderColor: '#ced4da',\n        },\n        '$root$focused & > fieldset': {\n          borderWidth: 1,\n          borderColor: theme.palette.primary.main,\n        },\n      },\n      popupIndicator: {\n        padding: 0,\n        margin: 0,\n        color: '#616161',\n        '&:hover': {\n          backgroundColor: 'unset',\n        },\n        '& [class*=\"MuiTouchRipple-root\"]': {\n          display: 'none',\n        },\n      },\n      endAdornment: {\n        '$root$hasClearIcon$hasPopupIcon &': {\n          right: 4,\n        },\n      },\n      input: {\n        '$root$hasClearIcon$hasPopupIcon &': {\n          fontSize: theme.typography.body1.fontSize,\n          paddingBlock: theme.spacing(0.8125),\n        },\n      },\n    }),\n  { name: 'BackstageAutocompleteBase' },\n)(Autocomplete) as typeof Autocomplete;\n\nconst PopperComponent = (props: PopperProps) => (\n  <Popper {...props} transition placement=\"bottom-start\">\n    {({ TransitionProps }) => (\n      <Grow {...TransitionProps} style={{ transformOrigin: '0 0 0' }}>\n        <Box>{props.children as ReactNode}</Box>\n      </Grow>\n    )}\n  </Popper>\n);\n\nconst PaperComponent = (props: PaperProps) => (\n  <Paper {...props} elevation={8} />\n);\n\nexport type CatalogAutocompleteProps<\n  T,\n  Multiple extends boolean | undefined = undefined,\n  DisableClearable extends boolean | undefined = undefined,\n  FreeSolo extends boolean | undefined = undefined,\n> = Omit<\n  AutocompleteProps<T, Multiple, DisableClearable, FreeSolo>,\n  'PopperComponent' | 'PaperComponent' | 'popupIcon' | 'renderInput'\n> & {\n  name: string;\n  label?: string;\n  LabelProps?: TypographyProps<'label'>;\n  TextFieldProps?: Omit<OutlinedTextFieldProps, 'variant'>;\n  renderInput?: AutocompleteProps<\n    T,\n    Multiple,\n    DisableClearable,\n    FreeSolo\n  >['renderInput'];\n};\n\nexport function CatalogAutocomplete<\n  T,\n  Multiple extends boolean | undefined = undefined,\n  DisableClearable extends boolean | undefined = undefined,\n  FreeSolo extends boolean | undefined = undefined,\n>(props: CatalogAutocompleteProps<T, Multiple, DisableClearable, FreeSolo>) {\n  const { label, name, LabelProps, TextFieldProps, ...rest } = props;\n  const classes = useStyles();\n  const renderInput = useCallback(\n    (params: AutocompleteRenderInputParams) => (\n      <TextField {...merge(params, TextFieldProps)} variant=\"outlined\" />\n    ),\n    [TextFieldProps],\n  );\n  const autocomplete = (\n    <BootstrapAutocomplete\n      size=\"small\"\n      {...rest}\n      renderInput={rest.renderInput ?? renderInput}\n      popupIcon={<ExpandMoreIcon data-testid={`${name}-expand`} />}\n      PaperComponent={PaperComponent}\n      PopperComponent={PopperComponent}\n    />\n  );\n\n  return (\n    <Box className={classes.root}>\n      {label ? (\n        <Typography\n          {...LabelProps}\n          className={classNames(classes.label, LabelProps?.className)}\n          component=\"label\"\n        >\n          <Box component=\"span\">{label}</Box>\n          {autocomplete}\n        </Typography>\n      ) : (\n        autocomplete\n      )}\n    </Box>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;AAqCA,MAAM,SAAY,GAAA,UAAA;AAAA,EAChB,CAAU,KAAA,MAAA;AAAA,IACR,IAAM,EAAA;AAAA,MACJ,MAAQ,EAAA,KAAA,CAAM,OAAQ,CAAA,CAAA,EAAG,CAAC;AAAA,KAC5B;AAAA,IACA,KAAO,EAAA;AAAA,MACL,QAAU,EAAA,UAAA;AAAA,MACV,UAAY,EAAA,MAAA;AAAA,MACZ,QAAA,EAAU,KAAM,CAAA,UAAA,CAAW,KAAM,CAAA,QAAA;AAAA,MACjC,UAAA,EAAY,MAAM,UAAW,CAAA,UAAA;AAAA,MAC7B,KAAA,EAAO,KAAM,CAAA,OAAA,CAAQ,IAAK,CAAA,OAAA;AAAA,MAC1B,UAAY,EAAA;AAAA,QACV,GAAK,EAAA,CAAA;AAAA,QACL,IAAM,EAAA,CAAA;AAAA,QACN,QAAU,EAAA;AAAA;AACZ;AACF,GACF,CAAA;AAAA,EACA,EAAE,MAAM,uBAAwB;AAClC,CAAA;AAEA,MAAM,qBAAwB,GAAA,UAAA;AAAA,EAC5B,CAAC,UACC,YAAa,CAAA;AAAA,IACX,MAAM,EAAC;AAAA,IACP,KAAO,EAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACV;AAAA,IACA,cAAc,EAAC;AAAA,IACf,cAAc,EAAC;AAAA,IACf,SAAS,EAAC;AAAA,IACV,SAAW,EAAA;AAAA,MACT,SAAW,EAAA,EAAA;AAAA,MACX,eAAA,EAAiB,KAAM,CAAA,OAAA,CAAQ,UAAW,CAAA,KAAA;AAAA,MAC1C,mCAAqC,EAAA;AAAA,QACnC,YAAA,EAAc,KAAM,CAAA,OAAA,CAAQ,IAAI,CAAA;AAAA,QAChC,kBAAA,EAAoB,KAAM,CAAA,OAAA,CAAQ,IAAI;AAAA,OACxC;AAAA,MACA,iBAAmB,EAAA;AAAA,QACjB,OAAS,EAAA;AAAA,OACX;AAAA,MACA,0BAA4B,EAAA;AAAA,QAC1B,WAAa,EAAA;AAAA,OACf;AAAA,MACA,4BAA8B,EAAA;AAAA,QAC5B,WAAa,EAAA,CAAA;AAAA,QACb,WAAA,EAAa,KAAM,CAAA,OAAA,CAAQ,OAAQ,CAAA;AAAA;AACrC,KACF;AAAA,IACA,cAAgB,EAAA;AAAA,MACd,OAAS,EAAA,CAAA;AAAA,MACT,MAAQ,EAAA,CAAA;AAAA,MACR,KAAO,EAAA,SAAA;AAAA,MACP,SAAW,EAAA;AAAA,QACT,eAAiB,EAAA;AAAA,OACnB;AAAA,MACA,kCAAoC,EAAA;AAAA,QAClC,OAAS,EAAA;AAAA;AACX,KACF;AAAA,IACA,YAAc,EAAA;AAAA,MACZ,mCAAqC,EAAA;AAAA,QACnC,KAAO,EAAA;AAAA;AACT,KACF;AAAA,IACA,KAAO,EAAA;AAAA,MACL,mCAAqC,EAAA;AAAA,QACnC,QAAA,EAAU,KAAM,CAAA,UAAA,CAAW,KAAM,CAAA,QAAA;AAAA,QACjC,YAAA,EAAc,KAAM,CAAA,OAAA,CAAQ,MAAM;AAAA;AACpC;AACF,GACD,CAAA;AAAA,EACH,EAAE,MAAM,2BAA4B;AACtC,CAAA,CAAE,YAAY,CAAA;AAEd,MAAM,eAAkB,GAAA,CAAC,KACvB,qBAAA,KAAA,CAAA,aAAA,CAAC,MAAQ,EAAA,EAAA,GAAG,KAAO,EAAA,UAAA,EAAU,IAAC,EAAA,SAAA,EAAU,cACrC,EAAA,EAAA,CAAC,EAAE,eAAA,EACF,qBAAA,KAAA,CAAA,aAAA,CAAC,IAAM,EAAA,EAAA,GAAG,eAAiB,EAAA,KAAA,EAAO,EAAE,eAAA,EAAiB,OAAQ,EAAA,EAAA,kBAC1D,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,IAAA,EAAK,KAAM,CAAA,QAAsB,CACpC,CAEJ,CAAA;AAGF,MAAM,cAAA,GAAiB,CAAC,KACtB,qBAAA,KAAA,CAAA,aAAA,CAAC,SAAO,GAAG,KAAA,EAAO,WAAW,CAAG,EAAA,CAAA;AAwB3B,SAAS,oBAKd,KAA0E,EAAA;AAC1E,EAAA,MAAM,EAAE,KAAO,EAAA,IAAA,EAAM,YAAY,cAAgB,EAAA,GAAG,MAAS,GAAA,KAAA;AAC7D,EAAA,MAAM,UAAU,SAAU,EAAA;AAC1B,EAAA,MAAM,WAAc,GAAA,WAAA;AAAA,IAClB,CAAC,MACC,qBAAA,KAAA,CAAA,aAAA,CAAC,SAAW,EAAA,EAAA,GAAG,MAAM,MAAQ,EAAA,cAAc,CAAG,EAAA,OAAA,EAAQ,UAAW,EAAA,CAAA;AAAA,IAEnE,CAAC,cAAc;AAAA,GACjB;AACA,EAAA,MAAM,YACJ,mBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,qBAAA;AAAA,IAAA;AAAA,MACC,IAAK,EAAA,OAAA;AAAA,MACJ,GAAG,IAAA;AAAA,MACJ,WAAA,EAAa,KAAK,WAAe,IAAA,WAAA;AAAA,MACjC,2BAAY,KAAA,CAAA,aAAA,CAAA,cAAA,EAAA,EAAe,aAAa,EAAA,CAAA,EAAG,IAAI,CAAW,OAAA,CAAA,EAAA,CAAA;AAAA,MAC1D,cAAA;AAAA,MACA;AAAA;AAAA,GACF;AAGF,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAI,SAAW,EAAA,OAAA,CAAQ,QACrB,KACC,mBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACE,GAAG,UAAA;AAAA,MACJ,SAAW,EAAA,UAAA,CAAW,OAAQ,CAAA,KAAA,EAAO,YAAY,SAAS,CAAA;AAAA,MAC1D,SAAU,EAAA;AAAA,KAAA;AAAA,oBAET,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAI,SAAU,EAAA,MAAA,EAAA,EAAQ,KAAM,CAAA;AAAA,IAC5B;AAAA,MAGH,YAEJ,CAAA;AAEJ;;;;"}

package/dist/components/EntityAutocompletePicker/EntityAutocompletePicker.esm.js

@@ -1,16 +1,13 @@
 import Box from '@material-ui/core/Box';
-import Typography from '@material-ui/core/Typography';
 import { makeStyles } from '@material-ui/core/styles';
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
-import Autocomplete from '@material-ui/lab/Autocomplete';
 import React, { useMemo, useState, useEffect } from 'react';
 import { useApi } from '@backstage/core-plugin-api';
 import useAsync from 'react-use/esm/useAsync';
 import { catalogApiRef } from '../../api.esm.js';
 import { EntityAutocompletePickerOption } from './EntityAutocompletePickerOption.esm.js';
-import { EntityAutocompletePickerInput } from './EntityAutocompletePickerInput.esm.js';
 import { useEntityList } from '../../hooks/useEntityListProvider.esm.js';
 import { reduceBackendCatalogFilters } from '../../utils/filters.esm.js';
+import { CatalogAutocomplete } from '../CatalogAutocomplete/CatalogAutocomplete.esm.js';
 
 const useStyles = makeStyles(
   {
@@ -78,14 +75,16 @@ function EntityAutocompletePicker(props) {
   if (filter && typeof filter === "object" && !("values" in filter) || !availableOptions.length) {
     return null;
   }
-  return /* @__PURE__ */ React.createElement(Box, { className: classes.root, pb: 1, pt: 1 }, /* @__PURE__ */ React.createElement(Typography, { className: classes.label, variant: "button", component: "label" }, label, /* @__PURE__ */ React.createElement(
-    Autocomplete,
+  return /* @__PURE__ */ React.createElement(Box, { className: classes.root, pb: 1, pt: 1 }, /* @__PURE__ */ React.createElement(
+    CatalogAutocomplete,
     {
-      PopperComponent: (popperProps) => /* @__PURE__ */ React.createElement("div", { ...popperProps }, popperProps.children),
       multiple: true,
       disableCloseOnSelect: true,
+      label,
+      name: `${String(name)}-picker`,
       options: availableOptions,
       value: selectedOptions,
+      TextFieldProps: InputProps,
       onChange: (_event, options) => setSelectedOptions(options),
       renderOption: (option, { selected }) => /* @__PURE__ */ React.createElement(
         EntityAutocompletePickerOption,
@@ -95,12 +94,9 @@ function EntityAutocompletePicker(props) {
           availableOptions: availableValues,
           showCounts: !!showCounts
         }
-      ),
-      size: "small",
-      popupIcon: /* @__PURE__ */ React.createElement(ExpandMoreIcon, { "data-testid": `${String(name)}-picker-expand` }),
-      renderInput: (params) => /* @__PURE__ */ React.createElement(EntityAutocompletePickerInput, { ...params, ...InputProps })
+      )
     }
-  )));
+  ));
 }
 
 export { EntityAutocompletePicker };

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

@@ -1 +1 @@
-{"version":3,"file":"EntityAutocompletePicker.esm.js","sources":["../../../src/components/EntityAutocompletePicker/EntityAutocompletePicker.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 */\n\nimport Box from '@material-ui/core/Box';\nimport { TextFieldProps } from '@material-ui/core/TextField';\nimport Typography from '@material-ui/core/Typography';\nimport { makeStyles } from '@material-ui/core/styles';\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore';\nimport Autocomplete from '@material-ui/lab/Autocomplete';\nimport React, { useEffect, useMemo, useState, ReactNode } from 'react';\nimport { useApi } from '@backstage/core-plugin-api';\nimport useAsync from 'react-use/esm/useAsync';\nimport { catalogApiRef } from '../../api';\nimport { EntityAutocompletePickerOption } from './EntityAutocompletePickerOption';\nimport { EntityAutocompletePickerInput } from './EntityAutocompletePickerInput';\nimport {\n  DefaultEntityFilters,\n  useEntityList,\n} from '../../hooks/useEntityListProvider';\nimport { EntityFilter } from '../../types';\nimport { reduceBackendCatalogFilters } from '../../utils/filters';\n\n/** @public */\nexport type AllowedEntityFilters<T extends DefaultEntityFilters> = {\n  [K in keyof T]-?: NonNullable<T[K]> extends EntityFilter & {\n    values: string[];\n  }\n    ? K\n    : never;\n}[keyof T];\n\n/** @public */\nexport type EntityAutocompletePickerProps<\n  T extends DefaultEntityFilters = DefaultEntityFilters,\n  Name extends AllowedEntityFilters<T> = AllowedEntityFilters<T>,\n> = {\n  label: string;\n  name: Name;\n  path: string;\n  showCounts?: boolean;\n  Filter: { new (values: string[]): NonNullable<T[Name]> };\n  InputProps?: TextFieldProps;\n  initialSelectedOptions?: string[];\n  filtersForAvailableValues?: Array<keyof T>;\n};\n\n/** @public */\nexport type CatalogReactEntityAutocompletePickerClassKey = 'root' | 'label';\n\nconst useStyles = makeStyles(\n  {\n    root: {},\n    label: {\n      textTransform: 'none',\n      fontWeight: 'bold',\n    },\n  },\n  { name: 'CatalogReactEntityAutocompletePicker' },\n);\n\n/** @public */\nexport function EntityAutocompletePicker<\n  T extends DefaultEntityFilters = DefaultEntityFilters,\n  Name extends AllowedEntityFilters<T> = AllowedEntityFilters<T>,\n>(props: EntityAutocompletePickerProps<T, Name>) {\n  const {\n    label,\n    name,\n    path,\n    showCounts,\n    Filter,\n    InputProps,\n    initialSelectedOptions = [],\n    filtersForAvailableValues = ['kind'],\n  } = props;\n\n  const classes = useStyles();\n\n  const {\n    updateFilters,\n    filters,\n    queryParameters: { [name]: queryParameter },\n  } = useEntityList<T>();\n\n  const catalogApi = useApi(catalogApiRef);\n  const availableValuesFilters = filtersForAvailableValues.map(\n    f => filters[f] as EntityFilter | undefined,\n  );\n  const { value: availableValues } = useAsync(async () => {\n    const facet = path;\n    const { facets } = await catalogApi.getEntityFacets({\n      facets: [facet],\n      filter: reduceBackendCatalogFilters(\n        availableValuesFilters.filter(Boolean) as EntityFilter[],\n      ),\n    });\n\n    return Object.fromEntries(\n      facets[facet].map(({ value, count }) => [value, count]),\n    );\n  }, [...availableValuesFilters]);\n\n  const queryParameters = useMemo(\n    () => [queryParameter].flat().filter(Boolean) as string[],\n    [queryParameter],\n  );\n\n  const [selectedOptions, setSelectedOptions] = useState(\n    queryParameters.length\n      ? queryParameters\n      : (filters[name] as unknown as { values: string[] })?.values ??\n          initialSelectedOptions,\n  );\n\n  // Set selected options on query parameter updates; this happens at initial page load and from\n  // external updates to the page location\n  useEffect(() => {\n    if (queryParameters.length) {\n      setSelectedOptions(queryParameters);\n    }\n  }, [queryParameters]);\n\n  const availableOptions = Object.keys(availableValues ?? {});\n  const shouldAddFilter = selectedOptions.length && availableOptions.length;\n\n  useEffect(() => {\n    updateFilters({\n      [name]: shouldAddFilter ? new Filter(selectedOptions) : undefined,\n    } as Partial<T>);\n  }, [name, shouldAddFilter, selectedOptions, Filter, updateFilters]);\n\n  const filter = filters[name];\n  if (\n    (filter && typeof filter === 'object' && !('values' in filter)) ||\n    !availableOptions.length\n  ) {\n    return null;\n  }\n\n  return (\n    <Box className={classes.root} pb={1} pt={1}>\n      <Typography className={classes.label} variant=\"button\" component=\"label\">\n        {label}\n        <Autocomplete<string, true>\n          PopperComponent={popperProps => (\n            <div {...popperProps}>{popperProps.children as ReactNode}</div>\n          )}\n          multiple\n          disableCloseOnSelect\n          options={availableOptions}\n          value={selectedOptions}\n          onChange={(_event: object, options: string[]) =>\n            setSelectedOptions(options)\n          }\n          renderOption={(option, { selected }) => (\n            <EntityAutocompletePickerOption\n              selected={selected}\n              value={option}\n              availableOptions={availableValues}\n              showCounts={!!showCounts}\n            />\n          )}\n          size=\"small\"\n          popupIcon={\n            <ExpandMoreIcon data-testid={`${String(name)}-picker-expand`} />\n          }\n          renderInput={params => (\n            <EntityAutocompletePickerInput {...params} {...InputProps} />\n          )}\n        />\n      </Typography>\n    </Box>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"EntityAutocompletePicker.esm.js","sources":["../../../src/components/EntityAutocompletePicker/EntityAutocompletePicker.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 */\n\nimport Box from '@material-ui/core/Box';\nimport { TextFieldProps } from '@material-ui/core/TextField';\nimport { makeStyles } from '@material-ui/core/styles';\nimport React, { useEffect, useMemo, useState } from 'react';\nimport { useApi } from '@backstage/core-plugin-api';\nimport useAsync from 'react-use/esm/useAsync';\nimport { catalogApiRef } from '../../api';\nimport { EntityAutocompletePickerOption } from './EntityAutocompletePickerOption';\nimport {\n  DefaultEntityFilters,\n  useEntityList,\n} from '../../hooks/useEntityListProvider';\nimport { EntityFilter } from '../../types';\nimport { reduceBackendCatalogFilters } from '../../utils/filters';\nimport { CatalogAutocomplete } from '../CatalogAutocomplete';\n\n/** @public */\nexport type AllowedEntityFilters<T extends DefaultEntityFilters> = {\n  [K in keyof T]-?: NonNullable<T[K]> extends EntityFilter & {\n    values: string[];\n  }\n    ? K\n    : never;\n}[keyof T];\n\n/** @public */\nexport type EntityAutocompletePickerProps<\n  T extends DefaultEntityFilters = DefaultEntityFilters,\n  Name extends AllowedEntityFilters<T> = AllowedEntityFilters<T>,\n> = {\n  label: string;\n  name: Name;\n  path: string;\n  showCounts?: boolean;\n  Filter: { new (values: string[]): NonNullable<T[Name]> };\n  InputProps?: TextFieldProps;\n  initialSelectedOptions?: string[];\n  filtersForAvailableValues?: Array<keyof T>;\n};\n\n/** @public */\nexport type CatalogReactEntityAutocompletePickerClassKey = 'root' | 'label';\n\nconst useStyles = makeStyles(\n  {\n    root: {},\n    label: {\n      textTransform: 'none',\n      fontWeight: 'bold',\n    },\n  },\n  { name: 'CatalogReactEntityAutocompletePicker' },\n);\n\n/** @public */\nexport function EntityAutocompletePicker<\n  T extends DefaultEntityFilters = DefaultEntityFilters,\n  Name extends AllowedEntityFilters<T> = AllowedEntityFilters<T>,\n>(props: EntityAutocompletePickerProps<T, Name>) {\n  const {\n    label,\n    name,\n    path,\n    showCounts,\n    Filter,\n    InputProps,\n    initialSelectedOptions = [],\n    filtersForAvailableValues = ['kind'],\n  } = props;\n  const classes = useStyles();\n\n  const {\n    updateFilters,\n    filters,\n    queryParameters: { [name]: queryParameter },\n  } = useEntityList<T>();\n\n  const catalogApi = useApi(catalogApiRef);\n  const availableValuesFilters = filtersForAvailableValues.map(\n    f => filters[f] as EntityFilter | undefined,\n  );\n  const { value: availableValues } = useAsync(async () => {\n    const facet = path;\n    const { facets } = await catalogApi.getEntityFacets({\n      facets: [facet],\n      filter: reduceBackendCatalogFilters(\n        availableValuesFilters.filter(Boolean) as EntityFilter[],\n      ),\n    });\n\n    return Object.fromEntries(\n      facets[facet].map(({ value, count }) => [value, count]),\n    );\n  }, [...availableValuesFilters]);\n\n  const queryParameters = useMemo(\n    () => [queryParameter].flat().filter(Boolean) as string[],\n    [queryParameter],\n  );\n\n  const [selectedOptions, setSelectedOptions] = useState(\n    queryParameters.length\n      ? queryParameters\n      : (filters[name] as unknown as { values: string[] })?.values ??\n          initialSelectedOptions,\n  );\n\n  // Set selected options on query parameter updates; this happens at initial page load and from\n  // external updates to the page location\n  useEffect(() => {\n    if (queryParameters.length) {\n      setSelectedOptions(queryParameters);\n    }\n  }, [queryParameters]);\n\n  const availableOptions = Object.keys(availableValues ?? {});\n  const shouldAddFilter = selectedOptions.length && availableOptions.length;\n\n  useEffect(() => {\n    updateFilters({\n      [name]: shouldAddFilter ? new Filter(selectedOptions) : undefined,\n    } as Partial<T>);\n  }, [name, shouldAddFilter, selectedOptions, Filter, updateFilters]);\n\n  const filter = filters[name];\n  if (\n    (filter && typeof filter === 'object' && !('values' in filter)) ||\n    !availableOptions.length\n  ) {\n    return null;\n  }\n\n  return (\n    <Box className={classes.root} pb={1} pt={1}>\n      <CatalogAutocomplete<string, true>\n        multiple\n        disableCloseOnSelect\n        label={label}\n        name={`${String(name)}-picker`}\n        options={availableOptions}\n        value={selectedOptions}\n        TextFieldProps={InputProps}\n        onChange={(_event: object, options: string[]) =>\n          setSelectedOptions(options)\n        }\n        renderOption={(option, { selected }) => (\n          <EntityAutocompletePickerOption\n            selected={selected}\n            value={option}\n            availableOptions={availableValues}\n            showCounts={!!showCounts}\n          />\n        )}\n      />\n    </Box>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/components/EntityOwnerPicker/EntityOwnerPicker.esm.js

@@ -2,14 +2,11 @@ import { stringifyEntityRef, parseEntityRef } from '@backstage/catalog-model';
 import Box from '@material-ui/core/Box';
 import Checkbox from '@material-ui/core/Checkbox';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
-import TextField from '@material-ui/core/TextField';
 import Typography from '@material-ui/core/Typography';
 import Tooltip from '@material-ui/core/Tooltip';
-import { makeStyles, createStyles, withStyles } from '@material-ui/core/styles';
+import { makeStyles, withStyles } from '@material-ui/core/styles';
 import CheckBoxIcon from '@material-ui/icons/CheckBox';
 import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
-import Autocomplete from '@material-ui/lab/Autocomplete';
 import React, { useState, useMemo, useEffect } from 'react';
 import { useEntityList } from '../../hooks/useEntityListProvider.esm.js';
 import { EntityOwnerFilter } from '../../filters.esm.js';
@@ -25,24 +22,20 @@ import '../../apis/StarredEntitiesApi/StarredEntitiesApi.esm.js';
 import 'zen-observable';
 import { catalogReactTranslationRef } from '../../translation.esm.js';
 import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { CatalogAutocomplete } from '../CatalogAutocomplete/CatalogAutocomplete.esm.js';
 
 const useStyles = makeStyles(
-  (theme) => createStyles({
+  {
     root: {},
-    label: {
-      textTransform: "none",
-      fontWeight: "bold"
-    },
-    input: {
-      backgroundColor: theme.palette.background.paper
-    },
+    label: {},
+    input: {},
     fullWidth: { width: "100%" },
     boxLabel: {
       width: "100%",
       textOverflow: "ellipsis",
       overflow: "hidden"
     }
-  }),
+  },
   { name: "CatalogReactEntityOwnerPicker" }
 );
 const FixedWidthFormControlLabel = withStyles(
@@ -118,10 +111,10 @@ const EntityOwnerPicker = (props) => {
   )) {
     return null;
   }
-  return /* @__PURE__ */ React.createElement(Box, { className: classes.root, pb: 1, pt: 1 }, /* @__PURE__ */ React.createElement(Typography, { className: classes.label, variant: "button", component: "label" }, t("entityOwnerPicker.title"), /* @__PURE__ */ React.createElement(
-    Autocomplete,
+  return /* @__PURE__ */ React.createElement(Box, { className: classes.root, pb: 1, pt: 1 }, /* @__PURE__ */ React.createElement(
+    CatalogAutocomplete,
     {
-      PopperComponent: Popper,
+      label: t("entityOwnerPicker.title"),
       multiple: true,
       disableCloseOnSelect: true,
       loading,
@@ -156,19 +149,10 @@ const EntityOwnerPicker = (props) => {
       renderOption: (entity, { selected }) => {
         return /* @__PURE__ */ React.createElement(RenderOptionLabel, { entity, isSelected: selected });
       },
-      size: "small",
-      popupIcon: /* @__PURE__ */ React.createElement(ExpandMoreIcon, { "data-testid": "owner-picker-expand" }),
-      renderInput: (params) => /* @__PURE__ */ React.createElement(
-        TextField,
-        {
-          ...params,
-          className: classes.input,
-          onChange: (e) => {
-            setText(e.currentTarget.value);
-          },
-          variant: "outlined"
-        }
-      ),
+      name: "owner-picker",
+      onInputChange: (_e, inputValue) => {
+        setText(inputValue);
+      },
       ListboxProps: {
         onScroll: (e) => {
           const element = e.currentTarget;
@@ -180,13 +164,12 @@ const EntityOwnerPicker = (props) => {
           }
         },
         "data-testid": "owner-picker-listbox"
-      }
+      },
+      LabelProps: { className: classes.label },
+      TextFieldProps: { className: classes.input }
     }
-  )));
+  ));
 };
-function Popper({ children }) {
-  return /* @__PURE__ */ React.createElement("div", null, children);
-}
 
 export { EntityOwnerPicker };
 //# sourceMappingURL=EntityOwnerPicker.esm.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"EntityOwnerPicker.esm.js","sources":["../../../src/components/EntityOwnerPicker/EntityOwnerPicker.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 */\n\nimport {\n  Entity,\n  parseEntityRef,\n  stringifyEntityRef,\n} from '@backstage/catalog-model';\nimport Box from '@material-ui/core/Box';\nimport Checkbox from '@material-ui/core/Checkbox';\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\nimport TextField from '@material-ui/core/TextField';\nimport Typography from '@material-ui/core/Typography';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport { createStyles, makeStyles, Theme } from '@material-ui/core/styles';\nimport CheckBoxIcon from '@material-ui/icons/CheckBox';\nimport CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore';\nimport Autocomplete from '@material-ui/lab/Autocomplete';\nimport React, { useEffect, useMemo, useState, ReactNode } from 'react';\nimport { useEntityList } from '../../hooks/useEntityListProvider';\nimport { EntityOwnerFilter } from '../../filters';\nimport { useDebouncedEffect } from '@react-hookz/web';\nimport PersonIcon from '@material-ui/icons/Person';\nimport GroupIcon from '@material-ui/icons/Group';\nimport { humanizeEntity, humanizeEntityRef } from '../EntityRefLink/humanize';\nimport { useFetchEntities } from './useFetchEntities';\nimport { withStyles } from '@material-ui/core/styles';\nimport { useEntityPresentation } from '../../apis';\nimport { catalogReactTranslationRef } from '../../translation';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { PopperProps } from '@material-ui/core/Popper';\n\n/** @public */\nexport type CatalogReactEntityOwnerPickerClassKey = 'input';\n\nconst useStyles = makeStyles(\n  (theme: Theme) =>\n    createStyles({\n      root: {},\n      label: {\n        textTransform: 'none',\n        fontWeight: 'bold',\n      },\n      input: {\n        backgroundColor: theme.palette.background.paper,\n      },\n      fullWidth: { width: '100%' },\n      boxLabel: {\n        width: '100%',\n        textOverflow: 'ellipsis',\n        overflow: 'hidden',\n      },\n    }),\n  { name: 'CatalogReactEntityOwnerPicker' },\n);\n\n/** @public */\nexport type FixedWidthFormControlLabelClassKey = 'label' | 'root';\n\nconst FixedWidthFormControlLabel = withStyles(\n  _theme => ({\n    label: {\n      width: '100%',\n    },\n    root: {\n      width: '90%',\n    },\n  }),\n  { name: 'FixedWidthFormControlLabel' },\n)(FormControlLabel);\n\nconst icon = <CheckBoxOutlineBlankIcon fontSize=\"small\" />;\nconst checkedIcon = <CheckBoxIcon fontSize=\"small\" />;\n\n/**\n * @public\n */\nexport type EntityOwnerPickerProps = {\n  mode?: 'owners-only' | 'all';\n};\n\nfunction RenderOptionLabel(props: { entity: Entity; isSelected: boolean }) {\n  const classes = useStyles();\n  const isGroup = props.entity.kind.toLocaleLowerCase('en-US') === 'group';\n  const { primaryTitle: title } = useEntityPresentation(props.entity);\n  return (\n    <Box className={classes.fullWidth}>\n      <FixedWidthFormControlLabel\n        className={classes.fullWidth}\n        control={\n          <Checkbox\n            icon={icon}\n            checkedIcon={checkedIcon}\n            checked={props.isSelected}\n          />\n        }\n        onClick={event => event.preventDefault()}\n        label={\n          <Tooltip title={title}>\n            <Box display=\"flex\" alignItems=\"center\">\n              {isGroup ? (\n                <GroupIcon fontSize=\"small\" />\n              ) : (\n                <PersonIcon fontSize=\"small\" />\n              )}\n              &nbsp;\n              <Box className={classes.boxLabel}>\n                <Typography noWrap>{title}</Typography>\n              </Box>\n            </Box>\n          </Tooltip>\n        }\n      />\n    </Box>\n  );\n}\n\n/** @public */\nexport const EntityOwnerPicker = (props?: EntityOwnerPickerProps) => {\n  const classes = useStyles();\n  const { mode = 'owners-only' } = props || {};\n  const {\n    updateFilters,\n    filters,\n    queryParameters: { owners: ownersParameter },\n  } = useEntityList();\n\n  const [text, setText] = useState('');\n  const { t } = useTranslationRef(catalogReactTranslationRef);\n\n  const queryParamOwners = useMemo(\n    () => [ownersParameter].flat().filter(Boolean) as string[],\n    [ownersParameter],\n  );\n\n  const [selectedOwners, setSelectedOwners] = useState(\n    queryParamOwners.length ? queryParamOwners : filters.owners?.values ?? [],\n  );\n\n  const [{ value, loading }, handleFetch, cache] = useFetchEntities({\n    mode,\n    initialSelectedOwnersRefs: selectedOwners,\n  });\n  useDebouncedEffect(() => handleFetch({ text }), [text, handleFetch], 250);\n\n  const availableOwners = value?.items || [];\n\n  // Set selected owners on query parameter updates; this happens at initial page load and from\n  // external updates to the page location.\n  useEffect(() => {\n    if (queryParamOwners.length) {\n      const filter = new EntityOwnerFilter(queryParamOwners);\n      setSelectedOwners(filter.values);\n    }\n  }, [queryParamOwners]);\n\n  useEffect(() => {\n    updateFilters({\n      owners: selectedOwners.length\n        ? new EntityOwnerFilter(selectedOwners)\n        : undefined,\n    });\n  }, [selectedOwners, updateFilters]);\n\n  if (\n    ['user', 'group'].includes(\n      filters.kind?.value.toLocaleLowerCase('en-US') || '',\n    )\n  ) {\n    return null;\n  }\n\n  return (\n    <Box className={classes.root} pb={1} pt={1}>\n      <Typography className={classes.label} variant=\"button\" component=\"label\">\n        {t('entityOwnerPicker.title')}\n        <Autocomplete\n          PopperComponent={Popper}\n          multiple\n          disableCloseOnSelect\n          loading={loading}\n          options={availableOwners}\n          value={selectedOwners as unknown as Entity[]}\n          getOptionSelected={(o, v) => {\n            if (typeof v === 'string') {\n              return stringifyEntityRef(o) === v;\n            }\n            return o === v;\n          }}\n          getOptionLabel={o => {\n            const entity =\n              typeof o === 'string'\n                ? cache.getEntity(o) ||\n                  parseEntityRef(o, {\n                    defaultKind: 'group',\n                    defaultNamespace: 'default',\n                  })\n                : o;\n            return humanizeEntity(entity, humanizeEntityRef(entity));\n          }}\n          onChange={(_: object, owners) => {\n            setText('');\n            setSelectedOwners(\n              owners.map(e => {\n                const entityRef =\n                  typeof e === 'string' ? e : stringifyEntityRef(e);\n\n                if (typeof e !== 'string') {\n                  cache.setEntity(e);\n                }\n                return entityRef;\n              }),\n            );\n          }}\n          filterOptions={x => x}\n          renderOption={(entity, { selected }) => {\n            return <RenderOptionLabel entity={entity} isSelected={selected} />;\n          }}\n          size=\"small\"\n          popupIcon={<ExpandMoreIcon data-testid=\"owner-picker-expand\" />}\n          renderInput={params => (\n            <TextField\n              {...params}\n              className={classes.input}\n              onChange={e => {\n                setText(e.currentTarget.value);\n              }}\n              variant=\"outlined\"\n            />\n          )}\n          ListboxProps={{\n            onScroll: (e: React.MouseEvent) => {\n              const element = e.currentTarget;\n              const hasReachedEnd =\n                Math.abs(\n                  element.scrollHeight -\n                    element.clientHeight -\n                    element.scrollTop,\n                ) < 1;\n\n              if (hasReachedEnd && value?.cursor) {\n                handleFetch({ items: value.items, cursor: value.cursor });\n              }\n            },\n            'data-testid': 'owner-picker-listbox',\n          }}\n        />\n      </Typography>\n    </Box>\n  );\n};\n\nfunction Popper({ children }: PopperProps) {\n  return <div>{children as ReactNode}</div>;\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"EntityOwnerPicker.esm.js","sources":["../../../src/components/EntityOwnerPicker/EntityOwnerPicker.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 */\n\nimport {\n  Entity,\n  parseEntityRef,\n  stringifyEntityRef,\n} from '@backstage/catalog-model';\nimport Box from '@material-ui/core/Box';\nimport Checkbox from '@material-ui/core/Checkbox';\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\nimport Typography from '@material-ui/core/Typography';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport { makeStyles } from '@material-ui/core/styles';\nimport CheckBoxIcon from '@material-ui/icons/CheckBox';\nimport CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';\nimport React, { useEffect, useMemo, useState } from 'react';\nimport { useEntityList } from '../../hooks/useEntityListProvider';\nimport { EntityOwnerFilter } from '../../filters';\nimport { useDebouncedEffect } from '@react-hookz/web';\nimport PersonIcon from '@material-ui/icons/Person';\nimport GroupIcon from '@material-ui/icons/Group';\nimport { humanizeEntity, humanizeEntityRef } from '../EntityRefLink/humanize';\nimport { useFetchEntities } from './useFetchEntities';\nimport { withStyles } from '@material-ui/core/styles';\nimport { useEntityPresentation } from '../../apis';\nimport { catalogReactTranslationRef } from '../../translation';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { CatalogAutocomplete } from '../CatalogAutocomplete';\n\n/** @public */\nexport type CatalogReactEntityOwnerPickerClassKey = 'input';\n\nconst useStyles = makeStyles(\n  {\n    root: {},\n    label: {},\n    input: {},\n    fullWidth: { width: '100%' },\n    boxLabel: {\n      width: '100%',\n      textOverflow: 'ellipsis',\n      overflow: 'hidden',\n    },\n  },\n  { name: 'CatalogReactEntityOwnerPicker' },\n);\n\n/** @public */\nexport type FixedWidthFormControlLabelClassKey = 'label' | 'root';\n\nconst FixedWidthFormControlLabel = withStyles(\n  _theme => ({\n    label: {\n      width: '100%',\n    },\n    root: {\n      width: '90%',\n    },\n  }),\n  { name: 'FixedWidthFormControlLabel' },\n)(FormControlLabel);\n\nconst icon = <CheckBoxOutlineBlankIcon fontSize=\"small\" />;\nconst checkedIcon = <CheckBoxIcon fontSize=\"small\" />;\n\n/**\n * @public\n */\nexport type EntityOwnerPickerProps = {\n  mode?: 'owners-only' | 'all';\n};\n\nfunction RenderOptionLabel(props: { entity: Entity; isSelected: boolean }) {\n  const classes = useStyles();\n  const isGroup = props.entity.kind.toLocaleLowerCase('en-US') === 'group';\n  const { primaryTitle: title } = useEntityPresentation(props.entity);\n  return (\n    <Box className={classes.fullWidth}>\n      <FixedWidthFormControlLabel\n        className={classes.fullWidth}\n        control={\n          <Checkbox\n            icon={icon}\n            checkedIcon={checkedIcon}\n            checked={props.isSelected}\n          />\n        }\n        onClick={event => event.preventDefault()}\n        label={\n          <Tooltip title={title}>\n            <Box display=\"flex\" alignItems=\"center\">\n              {isGroup ? (\n                <GroupIcon fontSize=\"small\" />\n              ) : (\n                <PersonIcon fontSize=\"small\" />\n              )}\n              &nbsp;\n              <Box className={classes.boxLabel}>\n                <Typography noWrap>{title}</Typography>\n              </Box>\n            </Box>\n          </Tooltip>\n        }\n      />\n    </Box>\n  );\n}\n\n/** @public */\nexport const EntityOwnerPicker = (props?: EntityOwnerPickerProps) => {\n  const classes = useStyles();\n  const { mode = 'owners-only' } = props || {};\n  const {\n    updateFilters,\n    filters,\n    queryParameters: { owners: ownersParameter },\n  } = useEntityList();\n\n  const [text, setText] = useState('');\n  const { t } = useTranslationRef(catalogReactTranslationRef);\n\n  const queryParamOwners = useMemo(\n    () => [ownersParameter].flat().filter(Boolean) as string[],\n    [ownersParameter],\n  );\n\n  const [selectedOwners, setSelectedOwners] = useState<string[]>(\n    queryParamOwners.length ? queryParamOwners : filters.owners?.values ?? [],\n  );\n\n  const [{ value, loading }, handleFetch, cache] = useFetchEntities({\n    mode,\n    initialSelectedOwnersRefs: selectedOwners,\n  });\n  useDebouncedEffect(() => handleFetch({ text }), [text, handleFetch], 250);\n\n  const availableOwners = value?.items || [];\n\n  // Set selected owners on query parameter updates; this happens at initial page load and from\n  // external updates to the page location.\n  useEffect(() => {\n    if (queryParamOwners.length) {\n      const filter = new EntityOwnerFilter(queryParamOwners);\n      setSelectedOwners(filter.values);\n    }\n  }, [queryParamOwners]);\n\n  useEffect(() => {\n    updateFilters({\n      owners: selectedOwners.length\n        ? new EntityOwnerFilter(selectedOwners)\n        : undefined,\n    });\n  }, [selectedOwners, updateFilters]);\n\n  if (\n    ['user', 'group'].includes(\n      filters.kind?.value.toLocaleLowerCase('en-US') || '',\n    )\n  ) {\n    return null;\n  }\n\n  return (\n    <Box className={classes.root} pb={1} pt={1}>\n      <CatalogAutocomplete<Entity, true>\n        label={t('entityOwnerPicker.title')}\n        multiple\n        disableCloseOnSelect\n        loading={loading}\n        options={availableOwners}\n        value={selectedOwners as unknown as Entity[]}\n        getOptionSelected={(o, v) => {\n          if (typeof v === 'string') {\n            return stringifyEntityRef(o) === v;\n          }\n          return o === v;\n        }}\n        getOptionLabel={o => {\n          const entity =\n            typeof o === 'string'\n              ? cache.getEntity(o) ||\n                parseEntityRef(o, {\n                  defaultKind: 'group',\n                  defaultNamespace: 'default',\n                })\n              : o;\n          return humanizeEntity(entity, humanizeEntityRef(entity));\n        }}\n        onChange={(_: object, owners) => {\n          setText('');\n          setSelectedOwners(\n            owners.map(e => {\n              const entityRef =\n                typeof e === 'string' ? e : stringifyEntityRef(e);\n\n              if (typeof e !== 'string') {\n                cache.setEntity(e);\n              }\n              return entityRef;\n            }),\n          );\n        }}\n        filterOptions={x => x}\n        renderOption={(entity, { selected }) => {\n          return <RenderOptionLabel entity={entity} isSelected={selected} />;\n        }}\n        name=\"owner-picker\"\n        onInputChange={(_e, inputValue) => {\n          setText(inputValue);\n        }}\n        ListboxProps={{\n          onScroll: (e: React.MouseEvent) => {\n            const element = e.currentTarget;\n            const hasReachedEnd =\n              Math.abs(\n                element.scrollHeight - element.clientHeight - element.scrollTop,\n              ) < 1;\n\n            if (hasReachedEnd && value?.cursor) {\n              handleFetch({ items: value.items, cursor: value.cursor });\n            }\n          },\n          'data-testid': 'owner-picker-listbox',\n        }}\n        LabelProps={{ className: classes.label }}\n        TextFieldProps={{ className: classes.input }}\n      />\n    </Box>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/EntityProcessingStatusPicker/EntityProcessingStatusPicker.esm.js

@@ -2,12 +2,9 @@ import { EntityOrphanFilter, EntityErrorFilter } from '../../filters.esm.js';
 import Box from '@material-ui/core/Box';
 import Checkbox from '@material-ui/core/Checkbox';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
-import TextField from '@material-ui/core/TextField';
-import Typography from '@material-ui/core/Typography';
-import { makeStyles, createStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import CheckBoxIcon from '@material-ui/icons/CheckBox';
 import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import React, { useState } from 'react';
 import '../../hooks/useEntity.esm.js';
 import { useEntityList } from '../../hooks/useEntityListProvider.esm.js';
@@ -22,21 +19,16 @@ import '../../apis/EntityPresentationApi/EntityPresentationApi.esm.js';
 import 'lodash/get';
 import '../../apis/StarredEntitiesApi/StarredEntitiesApi.esm.js';
 import 'zen-observable';
-import Autocomplete from '@material-ui/lab/Autocomplete';
 import { catalogReactTranslationRef } from '../../translation.esm.js';
 import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { CatalogAutocomplete } from '../CatalogAutocomplete/CatalogAutocomplete.esm.js';
 
 const useStyles = makeStyles(
-  (theme) => createStyles({
+  {
     root: {},
-    input: {
-      backgroundColor: theme.palette.background.paper
-    },
-    label: {
-      textTransform: "none",
-      fontWeight: "bold"
-    }
-  }),
+    input: {},
+    label: {}
+  },
   { name: "CatalogReactEntityProcessingStatusPickerPicker" }
 );
 const icon = /* @__PURE__ */ React.createElement(CheckBoxOutlineBlankIcon, { fontSize: "small" });
@@ -59,10 +51,10 @@ const EntityProcessingStatusPicker = () => {
     });
   }
   const availableAdvancedItems = ["Is Orphan", "Has Error"];
-  return /* @__PURE__ */ React.createElement(Box, { className: classes.root, pb: 1, pt: 1 }, /* @__PURE__ */ React.createElement(Typography, { className: classes.label, variant: "button", component: "label" }, t("entityProcessingStatusPicker.title"), /* @__PURE__ */ React.createElement(
-    Autocomplete,
+  return /* @__PURE__ */ React.createElement(Box, { className: classes.root, pb: 1, pt: 1 }, /* @__PURE__ */ React.createElement(
+    CatalogAutocomplete,
     {
-      PopperComponent: (popperProps) => /* @__PURE__ */ React.createElement("div", { ...popperProps }, popperProps.children),
+      label: t("entityProcessingStatusPicker.title"),
       multiple: true,
       disableCloseOnSelect: true,
       options: availableAdvancedItems,
@@ -87,18 +79,11 @@ const EntityProcessingStatusPicker = () => {
           label: option
         }
       ),
-      size: "small",
-      popupIcon: /* @__PURE__ */ React.createElement(ExpandMoreIcon, { "data-testid": "processing-status-picker-expand" }),
-      renderInput: (params) => /* @__PURE__ */ React.createElement(
-        TextField,
-        {
-          ...params,
-          className: classes.input,
-          variant: "outlined"
-        }
-      )
+      name: "processing-status-picker",
+      LabelProps: { className: classes.label },
+      TextFieldProps: { className: classes.input }
     }
-  )));
+  ));
 };
 
 export { EntityProcessingStatusPicker };

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

@@ -1 +1 @@
-{"version":3,"file":"EntityProcessingStatusPicker.esm.js","sources":["../../../src/components/EntityProcessingStatusPicker/EntityProcessingStatusPicker.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 { EntityErrorFilter, EntityOrphanFilter } from '../../filters';\nimport Box from '@material-ui/core/Box';\nimport Checkbox from '@material-ui/core/Checkbox';\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\nimport TextField from '@material-ui/core/TextField';\nimport Typography from '@material-ui/core/Typography';\nimport { createStyles, makeStyles, Theme } from '@material-ui/core/styles';\nimport CheckBoxIcon from '@material-ui/icons/CheckBox';\nimport CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore';\nimport React, { useState, ReactNode } from 'react';\nimport { useEntityList } from '../../hooks';\nimport Autocomplete from '@material-ui/lab/Autocomplete';\nimport { catalogReactTranslationRef } from '../../translation';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\n\n/** @public */\nexport type CatalogReactEntityProcessingStatusPickerClassKey = 'input';\n\nconst useStyles = makeStyles(\n  (theme: Theme) =>\n    createStyles({\n      root: {},\n      input: {\n        backgroundColor: theme.palette.background.paper,\n      },\n      label: {\n        textTransform: 'none',\n        fontWeight: 'bold',\n      },\n    }),\n  { name: 'CatalogReactEntityProcessingStatusPickerPicker' },\n);\n\nconst icon = <CheckBoxOutlineBlankIcon fontSize=\"small\" />;\nconst checkedIcon = <CheckBoxIcon fontSize=\"small\" />;\n\n/** @public */\nexport const EntityProcessingStatusPicker = () => {\n  const classes = useStyles();\n  const { updateFilters } = useEntityList();\n  const { t } = useTranslationRef(catalogReactTranslationRef);\n\n  const [selectedAdvancedItems, setSelectedAdvancedItems] = useState<string[]>(\n    [],\n  );\n\n  function orphanChange(value: boolean) {\n    updateFilters({\n      orphan: value ? new EntityOrphanFilter(value) : undefined,\n    });\n  }\n\n  function errorChange(value: boolean) {\n    updateFilters({\n      error: value ? new EntityErrorFilter(value) : undefined,\n    });\n  }\n\n  const availableAdvancedItems = ['Is Orphan', 'Has Error'];\n\n  return (\n    <Box className={classes.root} pb={1} pt={1}>\n      <Typography className={classes.label} variant=\"button\" component=\"label\">\n        {t('entityProcessingStatusPicker.title')}\n        <Autocomplete<string, true>\n          PopperComponent={popperProps => (\n            <div {...popperProps}>{popperProps.children as ReactNode}</div>\n          )}\n          multiple\n          disableCloseOnSelect\n          options={availableAdvancedItems}\n          value={selectedAdvancedItems}\n          onChange={(_: object, value: string[]) => {\n            setSelectedAdvancedItems(value);\n            orphanChange(value.includes('Is Orphan'));\n            errorChange(value.includes('Has Error'));\n          }}\n          renderOption={(option, { selected }) => (\n            <FormControlLabel\n              control={\n                <Checkbox\n                  icon={icon}\n                  checkedIcon={checkedIcon}\n                  checked={selected}\n                />\n              }\n              onClick={event => event.preventDefault()}\n              label={option}\n            />\n          )}\n          size=\"small\"\n          popupIcon={\n            <ExpandMoreIcon data-testid=\"processing-status-picker-expand\" />\n          }\n          renderInput={params => (\n            <TextField\n              {...params}\n              className={classes.input}\n              variant=\"outlined\"\n            />\n          )}\n        />\n      </Typography>\n    </Box>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"EntityProcessingStatusPicker.esm.js","sources":["../../../src/components/EntityProcessingStatusPicker/EntityProcessingStatusPicker.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 { EntityErrorFilter, EntityOrphanFilter } from '../../filters';\nimport Box from '@material-ui/core/Box';\nimport Checkbox from '@material-ui/core/Checkbox';\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\nimport { makeStyles } from '@material-ui/core/styles';\nimport CheckBoxIcon from '@material-ui/icons/CheckBox';\nimport CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';\nimport React, { useState } from 'react';\nimport { useEntityList } from '../../hooks';\nimport { catalogReactTranslationRef } from '../../translation';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { CatalogAutocomplete } from '../CatalogAutocomplete';\n\n/** @public */\nexport type CatalogReactEntityProcessingStatusPickerClassKey = 'input';\n\nconst useStyles = makeStyles(\n  {\n    root: {},\n    input: {},\n    label: {},\n  },\n  { name: 'CatalogReactEntityProcessingStatusPickerPicker' },\n);\n\nconst icon = <CheckBoxOutlineBlankIcon fontSize=\"small\" />;\nconst checkedIcon = <CheckBoxIcon fontSize=\"small\" />;\n\n/** @public */\nexport const EntityProcessingStatusPicker = () => {\n  const classes = useStyles();\n  const { updateFilters } = useEntityList();\n  const { t } = useTranslationRef(catalogReactTranslationRef);\n\n  const [selectedAdvancedItems, setSelectedAdvancedItems] = useState<string[]>(\n    [],\n  );\n\n  function orphanChange(value: boolean) {\n    updateFilters({\n      orphan: value ? new EntityOrphanFilter(value) : undefined,\n    });\n  }\n\n  function errorChange(value: boolean) {\n    updateFilters({\n      error: value ? new EntityErrorFilter(value) : undefined,\n    });\n  }\n\n  const availableAdvancedItems = ['Is Orphan', 'Has Error'];\n\n  return (\n    <Box className={classes.root} pb={1} pt={1}>\n      <CatalogAutocomplete<string, true>\n        label={t('entityProcessingStatusPicker.title')}\n        multiple\n        disableCloseOnSelect\n        options={availableAdvancedItems}\n        value={selectedAdvancedItems}\n        onChange={(_: object, value: string[]) => {\n          setSelectedAdvancedItems(value);\n          orphanChange(value.includes('Is Orphan'));\n          errorChange(value.includes('Has Error'));\n        }}\n        renderOption={(option, { selected }) => (\n          <FormControlLabel\n            control={\n              <Checkbox\n                icon={icon}\n                checkedIcon={checkedIcon}\n                checked={selected}\n              />\n            }\n            onClick={event => event.preventDefault()}\n            label={option}\n          />\n        )}\n        name=\"processing-status-picker\"\n        LabelProps={{ className: classes.label }}\n        TextFieldProps={{ className: classes.input }}\n      />\n    </Box>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAgCA,MAAM,SAAY,GAAA,UAAA;AAAA,EAChB;AAAA,IACE,MAAM,EAAC;AAAA,IACP,OAAO,EAAC;AAAA,IACR,OAAO;AAAC,GACV;AAAA,EACA,EAAE,MAAM,gDAAiD;AAC3D,CAAA;AAEA,MAAM,IAAO,mBAAA,KAAA,CAAA,aAAA,CAAC,wBAAyB,EAAA,EAAA,QAAA,EAAS,OAAQ,EAAA,CAAA;AACxD,MAAM,WAAc,mBAAA,KAAA,CAAA,aAAA,CAAC,YAAa,EAAA,EAAA,QAAA,EAAS,OAAQ,EAAA,CAAA;AAG5C,MAAM,+BAA+B,MAAM;AAChD,EAAA,MAAM,UAAU,SAAU,EAAA;AAC1B,EAAM,MAAA,EAAE,aAAc,EAAA,GAAI,aAAc,EAAA;AACxC,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,0BAA0B,CAAA;AAE1D,EAAM,MAAA,CAAC,qBAAuB,EAAA,wBAAwB,CAAI,GAAA,QAAA;AAAA,IACxD;AAAC,GACH;AAEA,EAAA,SAAS,aAAa,KAAgB,EAAA;AACpC,IAAc,aAAA,CAAA;AAAA,MACZ,MAAQ,EAAA,KAAA,GAAQ,IAAI,kBAAA,CAAmB,KAAK,CAAI,GAAA,KAAA;AAAA,KACjD,CAAA;AAAA;AAGH,EAAA,SAAS,YAAY,KAAgB,EAAA;AACnC,IAAc,aAAA,CAAA;AAAA,MACZ,KAAO,EAAA,KAAA,GAAQ,IAAI,iBAAA,CAAkB,KAAK,CAAI,GAAA,KAAA;AAAA,KAC/C,CAAA;AAAA;AAGH,EAAM,MAAA,sBAAA,GAAyB,CAAC,WAAA,EAAa,WAAW,CAAA;AAExD,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,OAAI,SAAW,EAAA,OAAA,CAAQ,MAAM,EAAI,EAAA,CAAA,EAAG,IAAI,CACvC,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,mBAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,EAAE,oCAAoC,CAAA;AAAA,MAC7C,QAAQ,EAAA,IAAA;AAAA,MACR,oBAAoB,EAAA,IAAA;AAAA,MACpB,OAAS,EAAA,sBAAA;AAAA,MACT,KAAO,EAAA,qBAAA;AAAA,MACP,QAAA,EAAU,CAAC,CAAA,EAAW,KAAoB,KAAA;AACxC,QAAA,wBAAA,CAAyB,KAAK,CAAA;AAC9B,QAAa,YAAA,CAAA,KAAA,CAAM,QAAS,CAAA,WAAW,CAAC,CAAA;AACxC,QAAY,WAAA,CAAA,KAAA,CAAM,QAAS,CAAA,WAAW,CAAC,CAAA;AAAA,OACzC;AAAA,MACA,YAAc,EAAA,CAAC,MAAQ,EAAA,EAAE,UACvB,qBAAA,KAAA,CAAA,aAAA;AAAA,QAAC,gBAAA;AAAA,QAAA;AAAA,UACC,OACE,kBAAA,KAAA,CAAA,aAAA;AAAA,YAAC,QAAA;AAAA,YAAA;AAAA,cACC,IAAA;AAAA,cACA,WAAA;AAAA,cACA,OAAS,EAAA;AAAA;AAAA,WACX;AAAA,UAEF,OAAA,EAAS,CAAS,KAAA,KAAA,KAAA,CAAM,cAAe,EAAA;AAAA,UACvC,KAAO,EAAA;AAAA;AAAA,OACT;AAAA,MAEF,IAAK,EAAA,0BAAA;AAAA,MACL,UAAY,EAAA,EAAE,SAAW,EAAA,OAAA,CAAQ,KAAM,EAAA;AAAA,MACvC,cAAgB,EAAA,EAAE,SAAW,EAAA,OAAA,CAAQ,KAAM;AAAA;AAAA,GAE/C,CAAA;AAEJ;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/plugin-catalog-react",
-  "version": "1.15.1-next.1",
+  "version": "1.15.1",
   "description": "A frontend library that helps other Backstage plugins interact with the catalog",
   "backstage": {
     "role": "web-library",
@@ -73,20 +73,20 @@
     "test": "backstage-cli package test"
   },
   "dependencies": {
-    "@backstage/catalog-client": "1.9.1-next.0",
-    "@backstage/catalog-model": "1.7.3-next.0",
-    "@backstage/core-compat-api": "0.3.5-next.0",
-    "@backstage/core-components": "0.16.3-next.0",
-    "@backstage/core-plugin-api": "1.10.3-next.0",
-    "@backstage/errors": "1.2.7-next.0",
-    "@backstage/frontend-plugin-api": "0.9.4-next.0",
-    "@backstage/frontend-test-utils": "0.2.5-next.0",
-    "@backstage/integration-react": "1.2.3-next.0",
-    "@backstage/plugin-catalog-common": "1.1.3-next.0",
-    "@backstage/plugin-permission-common": "0.8.4-next.0",
-    "@backstage/plugin-permission-react": "0.4.30-next.0",
-    "@backstage/types": "1.2.1-next.0",
-    "@backstage/version-bridge": "1.0.10",
+    "@backstage/catalog-client": "^1.9.1",
+    "@backstage/catalog-model": "^1.7.3",
+    "@backstage/core-compat-api": "^0.3.5",
+    "@backstage/core-components": "^0.16.3",
+    "@backstage/core-plugin-api": "^1.10.3",
+    "@backstage/errors": "^1.2.7",
+    "@backstage/frontend-plugin-api": "^0.9.4",
+    "@backstage/frontend-test-utils": "^0.2.5",
+    "@backstage/integration-react": "^1.2.3",
+    "@backstage/plugin-catalog-common": "^1.1.3",
+    "@backstage/plugin-permission-common": "^0.8.4",
+    "@backstage/plugin-permission-react": "^0.4.30",
+    "@backstage/types": "^1.2.1",
+    "@backstage/version-bridge": "^1.0.10",
     "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "4.0.0-alpha.61",
@@ -100,11 +100,11 @@
     "zen-observable": "^0.10.0"
   },
   "devDependencies": {
-    "@backstage/cli": "0.29.5-next.1",
-    "@backstage/core-app-api": "1.15.4-next.0",
-    "@backstage/plugin-catalog-common": "1.1.3-next.0",
-    "@backstage/plugin-scaffolder-common": "1.5.9-next.0",
-    "@backstage/test-utils": "1.7.4-next.0",
+    "@backstage/cli": "^0.29.5",
+    "@backstage/core-app-api": "^1.15.4",
+    "@backstage/plugin-catalog-common": "^1.1.3",
+    "@backstage/plugin-scaffolder-common": "^1.5.9",
+    "@backstage/test-utils": "^1.7.4",
     "@testing-library/dom": "^10.0.0",
     "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "^16.0.0",

package/dist/components/EntityAutocompletePicker/EntityAutocompletePickerInput.esm.js

@@ -1,29 +0,0 @@
-import TextField from '@material-ui/core/TextField';
-import { makeStyles, createStyles } from '@material-ui/core/styles';
-import React from 'react';
-import classNames from 'classnames';
-
-const useStyles = makeStyles(
-  (theme) => createStyles({
-    input: {
-      backgroundColor: theme.palette.background.paper
-    }
-  }),
-  {
-    name: "CatalogReactEntityAutocompletePickerInput"
-  }
-);
-function EntityAutocompletePickerInput(params) {
-  const classes = useStyles();
-  return /* @__PURE__ */ React.createElement(
-    TextField,
-    {
-      variant: "outlined",
-      ...params,
-      className: classNames(classes.input, params.className)
-    }
-  );
-}
-
-export { EntityAutocompletePickerInput };
-//# sourceMappingURL=EntityAutocompletePickerInput.esm.js.map

package/dist/components/EntityAutocompletePicker/EntityAutocompletePickerInput.esm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"EntityAutocompletePickerInput.esm.js","sources":["../../../src/components/EntityAutocompletePicker/EntityAutocompletePickerInput.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 */\nimport TextField, { TextFieldProps } from '@material-ui/core/TextField';\nimport { createStyles, makeStyles, Theme } from '@material-ui/core/styles';\nimport React from 'react';\nimport classnames from 'classnames';\n\nconst useStyles = makeStyles(\n  (theme: Theme) =>\n    createStyles({\n      input: {\n        backgroundColor: theme.palette.background.paper,\n      },\n    }),\n  {\n    name: 'CatalogReactEntityAutocompletePickerInput',\n  },\n);\n\nexport function EntityAutocompletePickerInput(params: TextFieldProps) {\n  const classes = useStyles();\n\n  return (\n    <TextField\n      variant=\"outlined\"\n      {...params}\n      className={classnames(classes.input, params.className)}\n    />\n  );\n}\n"],"names":["classnames"],"mappings":";;;;;AAoBA,MAAM,SAAY,GAAA,UAAA;AAAA,EAChB,CAAC,UACC,YAAa,CAAA;AAAA,IACX,KAAO,EAAA;AAAA,MACL,eAAA,EAAiB,KAAM,CAAA,OAAA,CAAQ,UAAW,CAAA;AAAA;AAC5C,GACD,CAAA;AAAA,EACH;AAAA,IACE,IAAM,EAAA;AAAA;AAEV,CAAA;AAEO,SAAS,8BAA8B,MAAwB,EAAA;AACpE,EAAA,MAAM,UAAU,SAAU,EAAA;AAE1B,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,OAAQ,EAAA,UAAA;AAAA,MACP,GAAG,MAAA;AAAA,MACJ,SAAW,EAAAA,UAAA,CAAW,OAAQ,CAAA,KAAA,EAAO,OAAO,SAAS;AAAA;AAAA,GACvD;AAEJ;;;;"}