@backstage/core-components 0.14.9-next.0 → 0.14.9

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @backstage/core-components
 
+## 0.14.9
+
+### Patch Changes
+
+- d4ffdbb: Fixed bug where `<Select>` component with empty string as placeholder gave an error
+- 99d672d: Modified the `Select` component to take in a `data-testid` parameter ensuring backwards compatibility with default value corresponding to previously hardcoded `data-testid` of "select".
+- Updated dependencies
+  - @backstage/config@1.2.0
+  - @backstage/core-plugin-api@1.9.3
+  - @backstage/errors@1.2.4
+  - @backstage/theme@0.5.6
+  - @backstage/version-bridge@1.0.8
+
+## 0.14.9-next.1
+
+### Patch Changes
+
+- 99d672d: Modified the `Select` component to take in a `data-testid` parameter ensuring backwards compatibility with default value corresponding to previously hardcoded `data-testid` of "select".
+
 ## 0.14.9-next.0
 
 ### Patch Changes

package/alpha/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/core-components__alpha",
-  "version": "0.14.9-next.0",
+  "version": "0.14.9",
   "main": "../dist/alpha.esm.js",
   "module": "../dist/alpha.esm.js",
   "types": "../dist/alpha.d.ts"

package/dist/components/Select/Select.esm.js

@@ -89,7 +89,8 @@ function SelectComponent(props) {
     triggerReset,
     native = false,
     disabled = false,
-    margin
+    margin,
+    "data-testid": dataTestId = "select"
   } = props;
   const classes = useStyles();
   const [value, setValue] = useState(
@@ -133,7 +134,7 @@ function SelectComponent(props) {
       value,
       native,
       disabled,
-      "data-testid": "select",
+      "data-testid": dataTestId,
       displayEmpty: true,
       multiple,
       margin,

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

@@ -1 +1 @@
-{"version":3,"file":"Select.esm.js","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["/*\n * Copyright 2020 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 Box from '@material-ui/core/Box';\nimport Checkbox from '@material-ui/core/Checkbox';\nimport Chip from '@material-ui/core/Chip';\nimport FormControl from '@material-ui/core/FormControl';\nimport InputBase from '@material-ui/core/InputBase';\nimport InputLabel from '@material-ui/core/InputLabel';\nimport MenuItem from '@material-ui/core/MenuItem';\nimport Select from '@material-ui/core/Select';\nimport {\n  createStyles,\n  makeStyles,\n  Theme,\n  withStyles,\n} from '@material-ui/core/styles';\nimport Typography from '@material-ui/core/Typography';\nimport React, { useEffect, useState } from 'react';\n\nimport ClosedDropdown from './static/ClosedDropdown';\nimport OpenedDropdown from './static/OpenedDropdown';\n\n/** @public */\nexport type SelectInputBaseClassKey = 'root' | 'input';\n\nconst BootstrapInput = withStyles(\n  (theme: Theme) =>\n    createStyles({\n      root: {\n        'label + &': {\n          marginTop: theme.spacing(3),\n        },\n        '&.Mui-focused > div[role=button]': {\n          borderColor: theme.palette.primary.main,\n        },\n      },\n      input: {\n        borderRadius: theme.shape.borderRadius,\n        position: 'relative',\n        backgroundColor: theme.palette.background.paper,\n        border: '1px solid #ced4da',\n        fontSize: theme.typography.body1.fontSize,\n        padding: theme.spacing(1.25, 3.25, 1.25, 1.5),\n        transition: theme.transitions.create(['border-color', 'box-shadow']),\n        '&:focus': {\n          background: theme.palette.background.paper,\n          borderRadius: theme.shape.borderRadius,\n        },\n      },\n    }),\n  { name: 'BackstageSelectInputBase' },\n)(InputBase);\n\n/** @public */\nexport type SelectClassKey =\n  | 'formControl'\n  | 'label'\n  | 'chips'\n  | 'chip'\n  | 'checkbox'\n  | 'root';\n\nconst useStyles = makeStyles(\n  (theme: Theme) =>\n    createStyles({\n      formControl: {\n        margin: theme.spacing(1, 0),\n      },\n      label: {\n        transform: 'initial',\n        fontWeight: 'bold',\n        fontSize: theme.typography.body2.fontSize,\n        fontFamily: theme.typography.fontFamily,\n        color: theme.palette.text.primary,\n        '&.Mui-focused': {\n          color: theme.palette.text.primary,\n        },\n      },\n      formLabel: {\n        transform: 'initial',\n        fontWeight: 'bold',\n        fontSize: theme.typography.body2.fontSize,\n        fontFamily: theme.typography.fontFamily,\n        color: theme.palette.text.primary,\n        '&.Mui-focused': {\n          color: theme.palette.text.primary,\n        },\n      },\n      chips: {\n        display: 'flex',\n        flexWrap: 'wrap',\n      },\n      chip: {\n        margin: 2,\n      },\n      checkbox: {},\n\n      root: {\n        display: 'flex',\n        flexDirection: 'column',\n      },\n    }),\n  { name: 'BackstageSelect' },\n);\n\n/** @public */\nexport type SelectItem = {\n  label: string;\n  value: string | number;\n};\n\n/** @public */\nexport type SelectedItems = string | string[] | number | number[];\n\nexport type SelectProps = {\n  multiple?: boolean;\n  items: SelectItem[];\n  label: string;\n  placeholder?: string;\n  selected?: SelectedItems;\n  onChange: (arg: SelectedItems) => void;\n  triggerReset?: boolean;\n  native?: boolean;\n  disabled?: boolean;\n  margin?: 'dense' | 'none';\n};\n\n/** @public */\nexport function SelectComponent(props: SelectProps) {\n  const {\n    multiple,\n    items,\n    label,\n    placeholder,\n    selected,\n    onChange,\n    triggerReset,\n    native = false,\n    disabled = false,\n    margin,\n  } = props;\n  const classes = useStyles();\n  const [value, setValue] = useState<SelectedItems>(\n    selected || (multiple ? [] : ''),\n  );\n  const [isOpen, setOpen] = useState(false);\n\n  useEffect(() => {\n    setValue(multiple ? [] : '');\n  }, [triggerReset, multiple]);\n\n  useEffect(() => {\n    setValue(selected || (multiple ? [] : ''));\n  }, [selected, multiple]);\n\n  const handleChange = (event: React.ChangeEvent<{ value: unknown }>) => {\n    setValue(event.target.value as SelectedItems);\n    onChange(event.target.value as SelectedItems);\n  };\n\n  const handleOpen = (event: React.ChangeEvent<any>) => {\n    if (disabled) {\n      event.preventDefault();\n      return;\n    }\n    setOpen(previous => {\n      if (multiple && !(event.target instanceof HTMLElement)) {\n        return true;\n      }\n      return !previous;\n    });\n  };\n\n  const handleClose = () => {\n    setOpen(false);\n  };\n\n  const handleDelete = (selectedValue: string | number) => () => {\n    const newValue = (value as any[]).filter(chip => chip !== selectedValue);\n    setValue(newValue);\n    onChange(newValue);\n  };\n\n  return (\n    <Box className={classes.root}>\n      <FormControl className={classes.formControl}>\n        <InputLabel className={classes.formLabel}>{label}</InputLabel>\n        <Select\n          aria-label={label}\n          value={value}\n          native={native}\n          disabled={disabled}\n          data-testid=\"select\"\n          displayEmpty\n          multiple={multiple}\n          margin={margin}\n          onChange={handleChange}\n          open={isOpen}\n          onOpen={handleOpen}\n          onClose={handleClose}\n          input={<BootstrapInput />}\n          label={label}\n          renderValue={s =>\n            multiple && (value as any[]).length !== 0 ? (\n              <Box className={classes.chips}>\n                {(s as string[]).map(selectedValue => {\n                  const item = items.find(el => el.value === selectedValue);\n                  return item ? (\n                    <Chip\n                      key={item?.value}\n                      label={item?.label}\n                      clickable\n                      onDelete={handleDelete(selectedValue)}\n                      className={classes.chip}\n                    />\n                  ) : (\n                    false\n                  );\n                })}\n              </Box>\n            ) : (\n              <Typography>\n                {(value as any[]).length === 0\n                  ? placeholder || ''\n                  : items.find(el => el.value === s)?.label}\n              </Typography>\n            )\n          }\n          IconComponent={() =>\n            !isOpen ? <ClosedDropdown /> : <OpenedDropdown />\n          }\n          MenuProps={{\n            anchorOrigin: {\n              vertical: 'bottom',\n              horizontal: 'left',\n            },\n            transformOrigin: {\n              vertical: 'top',\n              horizontal: 'left',\n            },\n            getContentAnchorEl: null,\n          }}\n        >\n          {!!placeholder && !multiple && (\n            <MenuItem value={[]}>{placeholder}</MenuItem>\n          )}\n          {native\n            ? items &&\n              items.map(item => (\n                <option value={item.value} key={item.value}>\n                  {item.label}\n                </option>\n              ))\n            : items &&\n              items.map(item => (\n                <MenuItem key={item.value} value={item.value}>\n                  {multiple && (\n                    <Checkbox\n                      color=\"primary\"\n                      checked={(value as any[]).includes(item.value) || false}\n                      className={classes.checkbox}\n                    />\n                  )}\n                  {item.label}\n                </MenuItem>\n              ))}\n        </Select>\n      </FormControl>\n    </Box>\n  );\n}\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;AAsCA,MAAM,cAAiB,GAAA,UAAA;AAAA,EACrB,CAAC,UACC,YAAa,CAAA;AAAA,IACX,IAAM,EAAA;AAAA,MACJ,WAAa,EAAA;AAAA,QACX,SAAA,EAAW,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,OAC5B;AAAA,MACA,kCAAoC,EAAA;AAAA,QAClC,WAAA,EAAa,KAAM,CAAA,OAAA,CAAQ,OAAQ,CAAA,IAAA;AAAA,OACrC;AAAA,KACF;AAAA,IACA,KAAO,EAAA;AAAA,MACL,YAAA,EAAc,MAAM,KAAM,CAAA,YAAA;AAAA,MAC1B,QAAU,EAAA,UAAA;AAAA,MACV,eAAA,EAAiB,KAAM,CAAA,OAAA,CAAQ,UAAW,CAAA,KAAA;AAAA,MAC1C,MAAQ,EAAA,mBAAA;AAAA,MACR,QAAA,EAAU,KAAM,CAAA,UAAA,CAAW,KAAM,CAAA,QAAA;AAAA,MACjC,SAAS,KAAM,CAAA,OAAA,CAAQ,IAAM,EAAA,IAAA,EAAM,MAAM,GAAG,CAAA;AAAA,MAC5C,YAAY,KAAM,CAAA,WAAA,CAAY,OAAO,CAAC,cAAA,EAAgB,YAAY,CAAC,CAAA;AAAA,MACnE,SAAW,EAAA;AAAA,QACT,UAAA,EAAY,KAAM,CAAA,OAAA,CAAQ,UAAW,CAAA,KAAA;AAAA,QACrC,YAAA,EAAc,MAAM,KAAM,CAAA,YAAA;AAAA,OAC5B;AAAA,KACF;AAAA,GACD,CAAA;AAAA,EACH,EAAE,MAAM,0BAA2B,EAAA;AACrC,CAAA,CAAE,SAAS,CAAA,CAAA;AAWX,MAAM,SAAY,GAAA,UAAA;AAAA,EAChB,CAAC,UACC,YAAa,CAAA;AAAA,IACX,WAAa,EAAA;AAAA,MACX,MAAQ,EAAA,KAAA,CAAM,OAAQ,CAAA,CAAA,EAAG,CAAC,CAAA;AAAA,KAC5B;AAAA,IACA,KAAO,EAAA;AAAA,MACL,SAAW,EAAA,SAAA;AAAA,MACX,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,eAAiB,EAAA;AAAA,QACf,KAAA,EAAO,KAAM,CAAA,OAAA,CAAQ,IAAK,CAAA,OAAA;AAAA,OAC5B;AAAA,KACF;AAAA,IACA,SAAW,EAAA;AAAA,MACT,SAAW,EAAA,SAAA;AAAA,MACX,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,eAAiB,EAAA;AAAA,QACf,KAAA,EAAO,KAAM,CAAA,OAAA,CAAQ,IAAK,CAAA,OAAA;AAAA,OAC5B;AAAA,KACF;AAAA,IACA,KAAO,EAAA;AAAA,MACL,OAAS,EAAA,MAAA;AAAA,MACT,QAAU,EAAA,MAAA;AAAA,KACZ;AAAA,IACA,IAAM,EAAA;AAAA,MACJ,MAAQ,EAAA,CAAA;AAAA,KACV;AAAA,IACA,UAAU,EAAC;AAAA,IAEX,IAAM,EAAA;AAAA,MACJ,OAAS,EAAA,MAAA;AAAA,MACT,aAAe,EAAA,QAAA;AAAA,KACjB;AAAA,GACD,CAAA;AAAA,EACH,EAAE,MAAM,iBAAkB,EAAA;AAC5B,CAAA,CAAA;AAyBO,SAAS,gBAAgB,KAAoB,EAAA;AAClD,EAAM,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,KAAA;AAAA,IACA,KAAA;AAAA,IACA,WAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,YAAA;AAAA,IACA,MAAS,GAAA,KAAA;AAAA,IACT,QAAW,GAAA,KAAA;AAAA,IACX,MAAA;AAAA,GACE,GAAA,KAAA,CAAA;AACJ,EAAA,MAAM,UAAU,SAAU,EAAA,CAAA;AAC1B,EAAM,MAAA,CAAC,KAAO,EAAA,QAAQ,CAAI,GAAA,QAAA;AAAA,IACxB,QAAA,KAAa,QAAW,GAAA,EAAK,GAAA,EAAA,CAAA;AAAA,GAC/B,CAAA;AACA,EAAA,MAAM,CAAC,MAAA,EAAQ,OAAO,CAAA,GAAI,SAAS,KAAK,CAAA,CAAA;AAExC,EAAA,SAAA,CAAU,MAAM;AACd,IAAS,QAAA,CAAA,QAAA,GAAW,EAAC,GAAI,EAAE,CAAA,CAAA;AAAA,GAC1B,EAAA,CAAC,YAAc,EAAA,QAAQ,CAAC,CAAA,CAAA;AAE3B,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,QAAA,CAAS,QAAa,KAAA,QAAA,GAAW,EAAC,GAAI,EAAG,CAAA,CAAA,CAAA;AAAA,GACxC,EAAA,CAAC,QAAU,EAAA,QAAQ,CAAC,CAAA,CAAA;AAEvB,EAAM,MAAA,YAAA,GAAe,CAAC,KAAiD,KAAA;AACrE,IAAS,QAAA,CAAA,KAAA,CAAM,OAAO,KAAsB,CAAA,CAAA;AAC5C,IAAS,QAAA,CAAA,KAAA,CAAM,OAAO,KAAsB,CAAA,CAAA;AAAA,GAC9C,CAAA;AAEA,EAAM,MAAA,UAAA,GAAa,CAAC,KAAkC,KAAA;AACpD,IAAA,IAAI,QAAU,EAAA;AACZ,MAAA,KAAA,CAAM,cAAe,EAAA,CAAA;AACrB,MAAA,OAAA;AAAA,KACF;AACA,IAAA,OAAA,CAAQ,CAAY,QAAA,KAAA;AAClB,MAAA,IAAI,QAAY,IAAA,EAAE,KAAM,CAAA,MAAA,YAAkB,WAAc,CAAA,EAAA;AACtD,QAAO,OAAA,IAAA,CAAA;AAAA,OACT;AACA,MAAA,OAAO,CAAC,QAAA,CAAA;AAAA,KACT,CAAA,CAAA;AAAA,GACH,CAAA;AAEA,EAAA,MAAM,cAAc,MAAM;AACxB,IAAA,OAAA,CAAQ,KAAK,CAAA,CAAA;AAAA,GACf,CAAA;AAEA,EAAM,MAAA,YAAA,GAAe,CAAC,aAAA,KAAmC,MAAM;AAC7D,IAAA,MAAM,QAAY,GAAA,KAAA,CAAgB,MAAO,CAAA,CAAA,IAAA,KAAQ,SAAS,aAAa,CAAA,CAAA;AACvE,IAAA,QAAA,CAAS,QAAQ,CAAA,CAAA;AACjB,IAAA,QAAA,CAAS,QAAQ,CAAA,CAAA;AAAA,GACnB,CAAA;AAEA,EAAA,oDACG,GAAI,EAAA,EAAA,SAAA,EAAW,OAAQ,CAAA,IAAA,EAAA,+CACrB,WAAY,EAAA,EAAA,SAAA,EAAW,OAAQ,CAAA,WAAA,EAAA,+CAC7B,UAAW,EAAA,EAAA,SAAA,EAAW,OAAQ,CAAA,SAAA,EAAA,EAAY,KAAM,CACjD,kBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,YAAY,EAAA,KAAA;AAAA,MACZ,KAAA;AAAA,MACA,MAAA;AAAA,MACA,QAAA;AAAA,MACA,aAAY,EAAA,QAAA;AAAA,MACZ,YAAY,EAAA,IAAA;AAAA,MACZ,QAAA;AAAA,MACA,MAAA;AAAA,MACA,QAAU,EAAA,YAAA;AAAA,MACV,IAAM,EAAA,MAAA;AAAA,MACN,MAAQ,EAAA,UAAA;AAAA,MACR,OAAS,EAAA,WAAA;AAAA,MACT,KAAA,+CAAQ,cAAe,EAAA,IAAA,CAAA;AAAA,MACvB,KAAA;AAAA,MACA,WAAa,EAAA,CAAA,CAAA,KACX,QAAa,IAAA,KAAA,CAAgB,MAAW,KAAA,CAAA,mBACrCA,cAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAI,SAAW,EAAA,OAAA,CAAQ,KACpB,EAAA,EAAA,CAAA,CAAe,IAAI,CAAiB,aAAA,KAAA;AACpC,QAAA,MAAM,OAAO,KAAM,CAAA,IAAA,CAAK,CAAM,EAAA,KAAA,EAAA,CAAG,UAAU,aAAa,CAAA,CAAA;AACxD,QAAA,OAAO,IACL,mBAAAA,cAAA,CAAA,aAAA;AAAA,UAAC,IAAA;AAAA,UAAA;AAAA,YACC,KAAK,IAAM,EAAA,KAAA;AAAA,YACX,OAAO,IAAM,EAAA,KAAA;AAAA,YACb,SAAS,EAAA,IAAA;AAAA,YACT,QAAA,EAAU,aAAa,aAAa,CAAA;AAAA,YACpC,WAAW,OAAQ,CAAA,IAAA;AAAA,WAAA;AAAA,SAGrB,GAAA,KAAA,CAAA;AAAA,OAEH,CACH,CAAA,mBAECA,cAAA,CAAA,aAAA,CAAA,UAAA,EAAA,IAAA,EACG,MAAgB,MAAW,KAAA,CAAA,GACzB,WAAe,IAAA,EAAA,GACf,MAAM,IAAK,CAAA,CAAA,EAAA,KAAM,GAAG,KAAU,KAAA,CAAC,GAAG,KACxC,CAAA;AAAA,MAGJ,aAAA,EAAe,MACb,CAAC,MAAA,gDAAU,cAAe,EAAA,IAAA,CAAA,gDAAM,cAAe,EAAA,IAAA,CAAA;AAAA,MAEjD,SAAW,EAAA;AAAA,QACT,YAAc,EAAA;AAAA,UACZ,QAAU,EAAA,QAAA;AAAA,UACV,UAAY,EAAA,MAAA;AAAA,SACd;AAAA,QACA,eAAiB,EAAA;AAAA,UACf,QAAU,EAAA,KAAA;AAAA,UACV,UAAY,EAAA,MAAA;AAAA,SACd;AAAA,QACA,kBAAoB,EAAA,IAAA;AAAA,OACtB;AAAA,KAAA;AAAA,IAEC,CAAC,CAAC,WAAA,IAAe,CAAC,QAAA,iDAChB,QAAS,EAAA,EAAA,KAAA,EAAO,EAAC,EAAA,EAAI,WAAY,CAAA;AAAA,IAEnC,MACG,GAAA,KAAA,IACA,KAAM,CAAA,GAAA,CAAI,CACR,IAAA,qBAAAA,cAAA,CAAA,aAAA,CAAC,QAAO,EAAA,EAAA,KAAA,EAAO,IAAK,CAAA,KAAA,EAAO,GAAK,EAAA,IAAA,CAAK,KAClC,EAAA,EAAA,IAAA,CAAK,KACR,CACD,CACD,GAAA,KAAA,IACA,KAAM,CAAA,GAAA,CAAI,CACR,IAAA,qBAAAA,cAAA,CAAA,aAAA,CAAC,QAAS,EAAA,EAAA,GAAA,EAAK,IAAK,CAAA,KAAA,EAAO,KAAO,EAAA,IAAA,CAAK,SACpC,QACC,oBAAAA,cAAA,CAAA,aAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,KAAM,EAAA,SAAA;AAAA,QACN,OAAU,EAAA,KAAA,CAAgB,QAAS,CAAA,IAAA,CAAK,KAAK,CAAK,IAAA,KAAA;AAAA,QAClD,WAAW,OAAQ,CAAA,QAAA;AAAA,OAAA;AAAA,KACrB,EAED,IAAK,CAAA,KACR,CACD,CAAA;AAAA,GAET,CACF,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"Select.esm.js","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["/*\n * Copyright 2020 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 Box from '@material-ui/core/Box';\nimport Checkbox from '@material-ui/core/Checkbox';\nimport Chip from '@material-ui/core/Chip';\nimport FormControl from '@material-ui/core/FormControl';\nimport InputBase from '@material-ui/core/InputBase';\nimport InputLabel from '@material-ui/core/InputLabel';\nimport MenuItem from '@material-ui/core/MenuItem';\nimport Select from '@material-ui/core/Select';\nimport {\n  createStyles,\n  makeStyles,\n  Theme,\n  withStyles,\n} from '@material-ui/core/styles';\nimport Typography from '@material-ui/core/Typography';\nimport React, { useEffect, useState } from 'react';\n\nimport ClosedDropdown from './static/ClosedDropdown';\nimport OpenedDropdown from './static/OpenedDropdown';\n\n/** @public */\nexport type SelectInputBaseClassKey = 'root' | 'input';\n\nconst BootstrapInput = withStyles(\n  (theme: Theme) =>\n    createStyles({\n      root: {\n        'label + &': {\n          marginTop: theme.spacing(3),\n        },\n        '&.Mui-focused > div[role=button]': {\n          borderColor: theme.palette.primary.main,\n        },\n      },\n      input: {\n        borderRadius: theme.shape.borderRadius,\n        position: 'relative',\n        backgroundColor: theme.palette.background.paper,\n        border: '1px solid #ced4da',\n        fontSize: theme.typography.body1.fontSize,\n        padding: theme.spacing(1.25, 3.25, 1.25, 1.5),\n        transition: theme.transitions.create(['border-color', 'box-shadow']),\n        '&:focus': {\n          background: theme.palette.background.paper,\n          borderRadius: theme.shape.borderRadius,\n        },\n      },\n    }),\n  { name: 'BackstageSelectInputBase' },\n)(InputBase);\n\n/** @public */\nexport type SelectClassKey =\n  | 'formControl'\n  | 'label'\n  | 'chips'\n  | 'chip'\n  | 'checkbox'\n  | 'root';\n\nconst useStyles = makeStyles(\n  (theme: Theme) =>\n    createStyles({\n      formControl: {\n        margin: theme.spacing(1, 0),\n      },\n      label: {\n        transform: 'initial',\n        fontWeight: 'bold',\n        fontSize: theme.typography.body2.fontSize,\n        fontFamily: theme.typography.fontFamily,\n        color: theme.palette.text.primary,\n        '&.Mui-focused': {\n          color: theme.palette.text.primary,\n        },\n      },\n      formLabel: {\n        transform: 'initial',\n        fontWeight: 'bold',\n        fontSize: theme.typography.body2.fontSize,\n        fontFamily: theme.typography.fontFamily,\n        color: theme.palette.text.primary,\n        '&.Mui-focused': {\n          color: theme.palette.text.primary,\n        },\n      },\n      chips: {\n        display: 'flex',\n        flexWrap: 'wrap',\n      },\n      chip: {\n        margin: 2,\n      },\n      checkbox: {},\n\n      root: {\n        display: 'flex',\n        flexDirection: 'column',\n      },\n    }),\n  { name: 'BackstageSelect' },\n);\n\n/** @public */\nexport type SelectItem = {\n  label: string;\n  value: string | number;\n};\n\n/** @public */\nexport type SelectedItems = string | string[] | number | number[];\n\nexport type SelectProps = {\n  multiple?: boolean;\n  items: SelectItem[];\n  label: string;\n  placeholder?: string;\n  selected?: SelectedItems;\n  onChange: (arg: SelectedItems) => void;\n  triggerReset?: boolean;\n  native?: boolean;\n  disabled?: boolean;\n  margin?: 'dense' | 'none';\n  'data-testid'?: string;\n};\n\n/** @public */\nexport function SelectComponent(props: SelectProps) {\n  const {\n    multiple,\n    items,\n    label,\n    placeholder,\n    selected,\n    onChange,\n    triggerReset,\n    native = false,\n    disabled = false,\n    margin,\n    'data-testid': dataTestId = 'select',\n  } = props;\n  const classes = useStyles();\n  const [value, setValue] = useState<SelectedItems>(\n    selected || (multiple ? [] : ''),\n  );\n  const [isOpen, setOpen] = useState(false);\n\n  useEffect(() => {\n    setValue(multiple ? [] : '');\n  }, [triggerReset, multiple]);\n\n  useEffect(() => {\n    setValue(selected || (multiple ? [] : ''));\n  }, [selected, multiple]);\n\n  const handleChange = (event: React.ChangeEvent<{ value: unknown }>) => {\n    setValue(event.target.value as SelectedItems);\n    onChange(event.target.value as SelectedItems);\n  };\n\n  const handleOpen = (event: React.ChangeEvent<any>) => {\n    if (disabled) {\n      event.preventDefault();\n      return;\n    }\n    setOpen(previous => {\n      if (multiple && !(event.target instanceof HTMLElement)) {\n        return true;\n      }\n      return !previous;\n    });\n  };\n\n  const handleClose = () => {\n    setOpen(false);\n  };\n\n  const handleDelete = (selectedValue: string | number) => () => {\n    const newValue = (value as any[]).filter(chip => chip !== selectedValue);\n    setValue(newValue);\n    onChange(newValue);\n  };\n\n  return (\n    <Box className={classes.root}>\n      <FormControl className={classes.formControl}>\n        <InputLabel className={classes.formLabel}>{label}</InputLabel>\n        <Select\n          aria-label={label}\n          value={value}\n          native={native}\n          disabled={disabled}\n          data-testid={dataTestId}\n          displayEmpty\n          multiple={multiple}\n          margin={margin}\n          onChange={handleChange}\n          open={isOpen}\n          onOpen={handleOpen}\n          onClose={handleClose}\n          input={<BootstrapInput />}\n          label={label}\n          renderValue={s =>\n            multiple && (value as any[]).length !== 0 ? (\n              <Box className={classes.chips}>\n                {(s as string[]).map(selectedValue => {\n                  const item = items.find(el => el.value === selectedValue);\n                  return item ? (\n                    <Chip\n                      key={item?.value}\n                      label={item?.label}\n                      clickable\n                      onDelete={handleDelete(selectedValue)}\n                      className={classes.chip}\n                    />\n                  ) : (\n                    false\n                  );\n                })}\n              </Box>\n            ) : (\n              <Typography>\n                {(value as any[]).length === 0\n                  ? placeholder || ''\n                  : items.find(el => el.value === s)?.label}\n              </Typography>\n            )\n          }\n          IconComponent={() =>\n            !isOpen ? <ClosedDropdown /> : <OpenedDropdown />\n          }\n          MenuProps={{\n            anchorOrigin: {\n              vertical: 'bottom',\n              horizontal: 'left',\n            },\n            transformOrigin: {\n              vertical: 'top',\n              horizontal: 'left',\n            },\n            getContentAnchorEl: null,\n          }}\n        >\n          {!!placeholder && !multiple && (\n            <MenuItem value={[]}>{placeholder}</MenuItem>\n          )}\n          {native\n            ? items &&\n              items.map(item => (\n                <option value={item.value} key={item.value}>\n                  {item.label}\n                </option>\n              ))\n            : items &&\n              items.map(item => (\n                <MenuItem key={item.value} value={item.value}>\n                  {multiple && (\n                    <Checkbox\n                      color=\"primary\"\n                      checked={(value as any[]).includes(item.value) || false}\n                      className={classes.checkbox}\n                    />\n                  )}\n                  {item.label}\n                </MenuItem>\n              ))}\n        </Select>\n      </FormControl>\n    </Box>\n  );\n}\n"],"names":["React"],"mappings":"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"}

package/dist/index.d.ts

@@ -1009,6 +1009,7 @@ type SelectProps = {
     native?: boolean;
     disabled?: boolean;
     margin?: 'dense' | 'none';
+    'data-testid'?: string;
 };
 /** @public */
 declare function SelectComponent(props: SelectProps): React__default.JSX.Element;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@backstage/core-components",
   "description": "Core components used by Backstage plugins and apps",
-  "version": "0.14.9-next.0",
+  "version": "0.14.9",
   "publishConfig": {
     "access": "public"
   },
@@ -94,10 +94,10 @@
     "zod": "^3.22.4"
   },
   "devDependencies": {
-    "@backstage/app-defaults": "^1.5.7-next.0",
-    "@backstage/cli": "^0.26.10-next.0",
-    "@backstage/core-app-api": "^1.13.0-next.0",
-    "@backstage/test-utils": "^1.5.7-next.0",
+    "@backstage/app-defaults": "^1.5.8",
+    "@backstage/cli": "^0.26.11",
+    "@backstage/core-app-api": "^1.14.0",
+    "@backstage/test-utils": "^1.5.8",
     "@testing-library/dom": "^10.0.0",
     "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "^15.0.0",

package/testUtils/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/core-components__testutils",
-  "version": "0.14.9-next.0",
+  "version": "0.14.9",
   "main": "../dist/testUtils.esm.js",
   "module": "../dist/testUtils.esm.js",
   "types": "../dist/testUtils.d.ts"