@backstage/core-components 0.16.5-next.1 → 0.17.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @backstage/core-components
 
+## 0.17.0
+
+### Minor Changes
+
+- 25300cb: `SimpleStepper` back button now works with `activeStep` property set higher than 0
+- 9545af2: Declared CancelIcon explicitly on Chip component inside Select.tsx to disable onMouseDown event by default that creates the flaw of re-opening select component when user tries to remove a selected filter.
+
+### Patch Changes
+
+- fffe3c0: Added `classNames` prop to the `Page` component
+- df3b9f0: Fixed a bug in the SidebarSubmenuItem within the core-components package that caused the dropdown button to be misaligned in the sidebar and the button text to appear in uppercase due to the default <Button> behavior. Also added an example dropdown menu to the app for reference.
+- 48aab13: Add i18n support for scaffolder-react plugin
+- 0a0ced6: Avoid Layout Shift for `DismissableBanner` when using a `storageApi` with latency (e.g. `user-settings-backend`)
+
+  Properly handle the `unknown` state of the `storageApi`. There's a trade-off: this may lead to some Layout Shift if the banner has not been dismissed, but once it has been dismissed, you won't have any.
+
+- Updated dependencies
+  - @backstage/core-plugin-api@1.10.5
+  - @backstage/config@1.3.2
+  - @backstage/errors@1.2.7
+  - @backstage/theme@0.6.4
+  - @backstage/version-bridge@1.0.11
+
 ## 0.16.5-next.1
 
 ### Patch Changes

package/dist/components/DismissableBanner/DismissableBanner.esm.js

@@ -1,4 +1,4 @@
-import React__default, { useState, useEffect } from 'react';
+import React__default, { useMemo } from 'react';
 import { useApi, storageApiRef } from '@backstage/core-plugin-api';
 import useObservable from 'react-use/esm/useObservable';
 import classNames from 'classnames';
@@ -60,19 +60,15 @@ const DismissableBanner = (props) => {
   const classes = useStyles();
   const storageApi = useApi(storageApiRef);
   const notificationsStore = storageApi.forBucket("notifications");
-  const rawDismissedBanners = notificationsStore.snapshot("dismissedBanners").value ?? [];
-  const [dismissedBanners, setDismissedBanners] = useState(
-    new Set(rawDismissedBanners)
-  );
   const observedItems = useObservable(
-    notificationsStore.observe$("dismissedBanners")
+    notificationsStore.observe$("dismissedBanners"),
+    notificationsStore.snapshot("dismissedBanners")
   );
-  useEffect(() => {
-    if (observedItems?.value) {
-      const currentValue = observedItems?.value ?? [];
-      setDismissedBanners(new Set(currentValue));
-    }
-  }, [observedItems?.value]);
+  const dismissedBanners = useMemo(
+    () => new Set(observedItems.value ?? []),
+    [observedItems.value]
+  );
+  const loadingSettings = observedItems.presence === "unknown";
   const handleClick = () => {
     notificationsStore.set("dismissedBanners", [...dismissedBanners, id]);
   };
@@ -80,7 +76,7 @@ const DismissableBanner = (props) => {
     Snackbar,
     {
       anchorOrigin: fixed ? { vertical: "bottom", horizontal: "center" } : { vertical: "top", horizontal: "center" },
-      open: !dismissedBanners.has(id),
+      open: !loadingSettings && !dismissedBanners.has(id),
       classes: {
         root: classNames(classes.root, !fixed && classes.topPosition)
       }

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

@@ -1 +1 @@
-{"version":3,"file":"DismissableBanner.esm.js","sources":["../../../src/components/DismissableBanner/DismissableBanner.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 */\n\nimport React, { ReactNode, useState, useEffect } from 'react';\nimport { useApi, storageApiRef } from '@backstage/core-plugin-api';\nimport useObservable from 'react-use/esm/useObservable';\nimport classNames from 'classnames';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Snackbar from '@material-ui/core/Snackbar';\nimport SnackbarContent from '@material-ui/core/SnackbarContent';\nimport IconButton from '@material-ui/core/IconButton';\nimport Close from '@material-ui/icons/Close';\n\n/** @public */\nexport type DismissableBannerClassKey =\n  | 'root'\n  | 'topPosition'\n  | 'icon'\n  | 'content'\n  | 'message'\n  | 'info'\n  | 'error';\n\n/**\n * @public\n * @deprecated This type contained a typo, please use DismissableBannerClassKey instead\n */\nexport type DismissbleBannerClassKey = DismissableBannerClassKey;\n\nconst useStyles = makeStyles(\n  theme => ({\n    root: {\n      padding: theme.spacing(0),\n      marginBottom: theme.spacing(0),\n      marginTop: theme.spacing(0),\n      display: 'flex',\n      flexFlow: 'row nowrap',\n    },\n    // showing on top\n    topPosition: {\n      position: 'relative',\n      marginBottom: theme.spacing(6),\n      marginTop: -theme.spacing(3),\n      zIndex: 'unset',\n    },\n    icon: {\n      fontSize: theme.typography.h6.fontSize,\n    },\n    content: {\n      width: '100%',\n      maxWidth: 'inherit',\n      flexWrap: 'nowrap',\n      color: theme.palette.banner.text,\n    },\n    message: {\n      display: 'flex',\n      alignItems: 'center',\n      '& a': {\n        color: theme.palette.banner.link,\n      },\n    },\n    button: {\n      color: theme.palette.banner.closeButtonColor ?? 'inherit',\n    },\n    info: {\n      backgroundColor: theme.palette.banner.info,\n    },\n    error: {\n      backgroundColor: theme.palette.banner.error,\n    },\n    warning: {\n      backgroundColor:\n        theme.palette.banner.warning ?? theme.palette.banner.error,\n    },\n  }),\n  { name: 'BackstageDismissableBanner' },\n);\n\nexport type Props = {\n  variant: 'info' | 'error' | 'warning';\n  message: ReactNode;\n  id: string;\n  fixed?: boolean;\n};\n\n/** @public */\nexport const DismissableBanner = (props: Props) => {\n  const { variant, message, id, fixed = false } = props;\n  const classes = useStyles();\n  const storageApi = useApi(storageApiRef);\n  const notificationsStore = storageApi.forBucket('notifications');\n  const rawDismissedBanners =\n    notificationsStore.snapshot<string[]>('dismissedBanners').value ?? [];\n\n  const [dismissedBanners, setDismissedBanners] = useState(\n    new Set(rawDismissedBanners),\n  );\n\n  const observedItems = useObservable(\n    notificationsStore.observe$<string[]>('dismissedBanners'),\n  );\n\n  useEffect(() => {\n    if (observedItems?.value) {\n      const currentValue = observedItems?.value ?? [];\n      setDismissedBanners(new Set(currentValue));\n    }\n  }, [observedItems?.value]);\n\n  const handleClick = () => {\n    notificationsStore.set('dismissedBanners', [...dismissedBanners, id]);\n  };\n\n  return (\n    <Snackbar\n      anchorOrigin={\n        fixed\n          ? { vertical: 'bottom', horizontal: 'center' }\n          : { vertical: 'top', horizontal: 'center' }\n      }\n      open={!dismissedBanners.has(id)}\n      classes={{\n        root: classNames(classes.root, !fixed && classes.topPosition),\n      }}\n    >\n      <SnackbarContent\n        classes={{\n          root: classNames(classes.content, classes[variant]),\n          message: classes.message,\n        }}\n        message={message}\n        action={[\n          <IconButton\n            key=\"dismiss\"\n            title=\"Permanently dismiss this message\"\n            className={classes.button}\n            onClick={handleClick}\n          >\n            <Close className={classes.icon} />\n          </IconButton>,\n        ]}\n      />\n    </Snackbar>\n  );\n};\n"],"names":["React","Close"],"mappings":"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"}
+{"version":3,"file":"DismissableBanner.esm.js","sources":["../../../src/components/DismissableBanner/DismissableBanner.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 */\n\nimport React, { ReactNode, useMemo } from 'react';\nimport { useApi, storageApiRef } from '@backstage/core-plugin-api';\nimport useObservable from 'react-use/esm/useObservable';\nimport classNames from 'classnames';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Snackbar from '@material-ui/core/Snackbar';\nimport SnackbarContent from '@material-ui/core/SnackbarContent';\nimport IconButton from '@material-ui/core/IconButton';\nimport Close from '@material-ui/icons/Close';\n\n/** @public */\nexport type DismissableBannerClassKey =\n  | 'root'\n  | 'topPosition'\n  | 'icon'\n  | 'content'\n  | 'message'\n  | 'info'\n  | 'error';\n\n/**\n * @public\n * @deprecated This type contained a typo, please use DismissableBannerClassKey instead\n */\nexport type DismissbleBannerClassKey = DismissableBannerClassKey;\n\nconst useStyles = makeStyles(\n  theme => ({\n    root: {\n      padding: theme.spacing(0),\n      marginBottom: theme.spacing(0),\n      marginTop: theme.spacing(0),\n      display: 'flex',\n      flexFlow: 'row nowrap',\n    },\n    // showing on top\n    topPosition: {\n      position: 'relative',\n      marginBottom: theme.spacing(6),\n      marginTop: -theme.spacing(3),\n      zIndex: 'unset',\n    },\n    icon: {\n      fontSize: theme.typography.h6.fontSize,\n    },\n    content: {\n      width: '100%',\n      maxWidth: 'inherit',\n      flexWrap: 'nowrap',\n      color: theme.palette.banner.text,\n    },\n    message: {\n      display: 'flex',\n      alignItems: 'center',\n      '& a': {\n        color: theme.palette.banner.link,\n      },\n    },\n    button: {\n      color: theme.palette.banner.closeButtonColor ?? 'inherit',\n    },\n    info: {\n      backgroundColor: theme.palette.banner.info,\n    },\n    error: {\n      backgroundColor: theme.palette.banner.error,\n    },\n    warning: {\n      backgroundColor:\n        theme.palette.banner.warning ?? theme.palette.banner.error,\n    },\n  }),\n  { name: 'BackstageDismissableBanner' },\n);\n\nexport type Props = {\n  variant: 'info' | 'error' | 'warning';\n  message: ReactNode;\n  id: string;\n  fixed?: boolean;\n};\n\n/** @public */\nexport const DismissableBanner = (props: Props) => {\n  const { variant, message, id, fixed = false } = props;\n  const classes = useStyles();\n  const storageApi = useApi(storageApiRef);\n  const notificationsStore = storageApi.forBucket('notifications');\n  const observedItems = useObservable(\n    notificationsStore.observe$<string[]>('dismissedBanners'),\n    notificationsStore.snapshot<string[]>('dismissedBanners'),\n  );\n\n  const dismissedBanners = useMemo(\n    () => new Set(observedItems.value ?? []),\n    [observedItems.value],\n  );\n\n  const loadingSettings = observedItems.presence === 'unknown';\n\n  const handleClick = () => {\n    notificationsStore.set('dismissedBanners', [...dismissedBanners, id]);\n  };\n\n  return (\n    <Snackbar\n      anchorOrigin={\n        fixed\n          ? { vertical: 'bottom', horizontal: 'center' }\n          : { vertical: 'top', horizontal: 'center' }\n      }\n      open={!loadingSettings && !dismissedBanners.has(id)}\n      classes={{\n        root: classNames(classes.root, !fixed && classes.topPosition),\n      }}\n    >\n      <SnackbarContent\n        classes={{\n          root: classNames(classes.content, classes[variant]),\n          message: classes.message,\n        }}\n        message={message}\n        action={[\n          <IconButton\n            key=\"dismiss\"\n            title=\"Permanently dismiss this message\"\n            className={classes.button}\n            onClick={handleClick}\n          >\n            <Close className={classes.icon} />\n          </IconButton>,\n        ]}\n      />\n    </Snackbar>\n  );\n};\n"],"names":["React","Close"],"mappings":"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"}

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

@@ -8,6 +8,7 @@ import MenuItem from '@material-ui/core/MenuItem';
 import Select from '@material-ui/core/Select';
 import { withStyles, createStyles, makeStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
+import CancelIcon from '@material-ui/icons/Cancel';
 import React__default, { useState, useEffect } from 'react';
 import ClosedDropdown from './static/ClosedDropdown.esm.js';
 import OpenedDropdown from './static/OpenedDropdown.esm.js';
@@ -149,9 +150,17 @@ function SelectComponent(props) {
         return item ? /* @__PURE__ */ React__default.createElement(
           Chip,
           {
+            "data-testid": "chip",
             key: item?.value,
             label: item?.label,
             clickable: true,
+            deleteIcon: /* @__PURE__ */ React__default.createElement(
+              CancelIcon,
+              {
+                "data-testid": "cancel-icon",
+                onMouseDown: (event) => event.stopPropagation()
+              }
+            ),
             onDelete: handleDelete(selectedValue),
             className: classes.chip
           }

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  '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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"}
+{"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 CancelIcon from '@material-ui/icons/Cancel';\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                      data-testid=\"chip\"\n                      key={item?.value}\n                      label={item?.label}\n                      clickable\n                      deleteIcon={\n                        <CancelIcon\n                          data-testid=\"cancel-icon\"\n                          onMouseDown={event => event.stopPropagation()}\n                        />\n                      }\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/components/SimpleStepper/SimpleStepper.esm.js

@@ -14,7 +14,13 @@ const VerticalStepperContext = React__default.createContext({
 function SimpleStepper(props) {
   const { children, elevated, onStepChange, activeStep = 0 } = props;
   const [stepIndex, setStepIndex] = useState(activeStep);
-  const [stepHistory, setStepHistory] = useState([0]);
+  const inOrderRecreatedStepHistory = Array.from(
+    { length: activeStep + 1 },
+    (_, i) => i
+  );
+  const [stepHistory, setStepHistory] = useState(
+    inOrderRecreatedStepHistory
+  );
   useEffect(() => {
     setStepIndex(activeStep);
   }, [activeStep]);

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

@@ -1 +1 @@
-{"version":3,"file":"SimpleStepper.esm.js","sources":["../../../src/components/SimpleStepper/SimpleStepper.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 React, {\n  Children,\n  isValidElement,\n  useState,\n  useEffect,\n  PropsWithChildren,\n} from 'react';\nimport MuiStepper from '@material-ui/core/Stepper';\n\ntype InternalState = {\n  stepperLength: number;\n  stepIndex: number;\n  setStepIndex: any;\n  stepHistory: number[];\n  setStepHistory: any;\n  onStepChange?: (prevIndex: number, nextIndex: number) => void;\n};\n\nconst noop = () => {};\nexport const VerticalStepperContext = React.createContext<InternalState>({\n  stepperLength: 0,\n  stepIndex: 0,\n  setStepIndex: noop,\n  stepHistory: [],\n  setStepHistory: noop,\n  onStepChange: noop,\n});\n\nexport interface StepperProps {\n  elevated?: boolean;\n  onStepChange?: (prevIndex: number, nextIndex: number) => void;\n  activeStep?: number;\n}\n\nexport function SimpleStepper(props: PropsWithChildren<StepperProps>) {\n  const { children, elevated, onStepChange, activeStep = 0 } = props;\n  const [stepIndex, setStepIndex] = useState<number>(activeStep);\n  const [stepHistory, setStepHistory] = useState<number[]>([0]);\n\n  useEffect(() => {\n    setStepIndex(activeStep);\n  }, [activeStep]);\n\n  const steps: React.ReactNode[] = [];\n  let endStep;\n  Children.forEach(children, child => {\n    if (isValidElement(child)) {\n      if (child.props.end) {\n        endStep = child;\n      } else {\n        steps.push(child);\n      }\n    }\n  });\n\n  return (\n    <>\n      <VerticalStepperContext.Provider\n        value={{\n          stepIndex,\n          setStepIndex,\n          stepHistory,\n          setStepHistory,\n          onStepChange,\n          stepperLength: Children.count(children),\n        }}\n      >\n        <MuiStepper\n          activeStep={stepIndex}\n          orientation=\"vertical\"\n          elevation={elevated ? 2 : 0}\n        >\n          {steps}\n        </MuiStepper>\n      </VerticalStepperContext.Provider>\n      {stepIndex >= Children.count(children) - 1 && endStep}\n    </>\n  );\n}\n"],"names":["React"],"mappings":";;;AAiCA,MAAM,OAAO,MAAM;AAAC,CAAA;AACP,MAAA,sBAAA,GAAyBA,eAAM,aAA6B,CAAA;AAAA,EACvE,aAAe,EAAA,CAAA;AAAA,EACf,SAAW,EAAA,CAAA;AAAA,EACX,YAAc,EAAA,IAAA;AAAA,EACd,aAAa,EAAC;AAAA,EACd,cAAgB,EAAA,IAAA;AAAA,EAChB,YAAc,EAAA;AAChB,CAAC;AAQM,SAAS,cAAc,KAAwC,EAAA;AACpE,EAAA,MAAM,EAAE,QAAU,EAAA,QAAA,EAAU,YAAc,EAAA,UAAA,GAAa,GAAM,GAAA,KAAA;AAC7D,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,SAAiB,UAAU,CAAA;AAC7D,EAAA,MAAM,CAAC,WAAa,EAAA,cAAc,IAAI,QAAmB,CAAA,CAAC,CAAC,CAAC,CAAA;AAE5D,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,YAAA,CAAa,UAAU,CAAA;AAAA,GACzB,EAAG,CAAC,UAAU,CAAC,CAAA;AAEf,EAAA,MAAM,QAA2B,EAAC;AAClC,EAAI,IAAA,OAAA;AACJ,EAAS,QAAA,CAAA,OAAA,CAAQ,UAAU,CAAS,KAAA,KAAA;AAClC,IAAI,IAAA,cAAA,CAAe,KAAK,CAAG,EAAA;AACzB,MAAI,IAAA,KAAA,CAAM,MAAM,GAAK,EAAA;AACnB,QAAU,OAAA,GAAA,KAAA;AAAA,OACL,MAAA;AACL,QAAA,KAAA,CAAM,KAAK,KAAK,CAAA;AAAA;AAClB;AACF,GACD,CAAA;AAED,EAAA,uBAEIA,cAAA,CAAA,aAAA,CAAAA,cAAA,CAAA,QAAA,EAAA,IAAA,kBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,sBAAuB,CAAA,QAAA;AAAA,IAAvB;AAAA,MACC,KAAO,EAAA;AAAA,QACL,SAAA;AAAA,QACA,YAAA;AAAA,QACA,WAAA;AAAA,QACA,cAAA;AAAA,QACA,YAAA;AAAA,QACA,aAAA,EAAe,QAAS,CAAA,KAAA,CAAM,QAAQ;AAAA;AACxC,KAAA;AAAA,oBAEAA,cAAA,CAAA,aAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,UAAY,EAAA,SAAA;AAAA,QACZ,WAAY,EAAA,UAAA;AAAA,QACZ,SAAA,EAAW,WAAW,CAAI,GAAA;AAAA,OAAA;AAAA,MAEzB;AAAA;AACH,KAED,SAAa,IAAA,QAAA,CAAS,MAAM,QAAQ,CAAA,GAAI,KAAK,OAChD,CAAA;AAEJ;;;;"}
+{"version":3,"file":"SimpleStepper.esm.js","sources":["../../../src/components/SimpleStepper/SimpleStepper.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 React, {\n  Children,\n  isValidElement,\n  useState,\n  useEffect,\n  PropsWithChildren,\n} from 'react';\nimport MuiStepper from '@material-ui/core/Stepper';\n\ntype InternalState = {\n  stepperLength: number;\n  stepIndex: number;\n  setStepIndex: any;\n  stepHistory: number[];\n  setStepHistory: any;\n  onStepChange?: (prevIndex: number, nextIndex: number) => void;\n};\n\nconst noop = () => {};\n\nexport const VerticalStepperContext = React.createContext<InternalState>({\n  stepperLength: 0,\n  stepIndex: 0,\n  setStepIndex: noop,\n  stepHistory: [],\n  setStepHistory: noop,\n  onStepChange: noop,\n});\n\nexport interface StepperProps {\n  elevated?: boolean;\n  onStepChange?: (prevIndex: number, nextIndex: number) => void;\n  activeStep?: number;\n}\n\nexport function SimpleStepper(props: PropsWithChildren<StepperProps>) {\n  const { children, elevated, onStepChange, activeStep = 0 } = props;\n  const [stepIndex, setStepIndex] = useState<number>(activeStep);\n  /*\n  Recreates the stepHistory array based on the activeStep\n  to make sure the handleBack function of the Footer works when activeStep is higher than 0\n  */\n  const inOrderRecreatedStepHistory = Array.from(\n    { length: activeStep + 1 },\n    (_, i) => i,\n  );\n  const [stepHistory, setStepHistory] = useState<number[]>(\n    inOrderRecreatedStepHistory,\n  );\n\n  useEffect(() => {\n    setStepIndex(activeStep);\n  }, [activeStep]);\n\n  const steps: React.ReactNode[] = [];\n  let endStep;\n  Children.forEach(children, child => {\n    if (isValidElement(child)) {\n      if (child.props.end) {\n        endStep = child;\n      } else {\n        steps.push(child);\n      }\n    }\n  });\n\n  return (\n    <>\n      <VerticalStepperContext.Provider\n        value={{\n          stepIndex,\n          setStepIndex,\n          stepHistory,\n          setStepHistory,\n          onStepChange,\n          stepperLength: Children.count(children),\n        }}\n      >\n        <MuiStepper\n          activeStep={stepIndex}\n          orientation=\"vertical\"\n          elevation={elevated ? 2 : 0}\n        >\n          {steps}\n        </MuiStepper>\n      </VerticalStepperContext.Provider>\n      {stepIndex >= Children.count(children) - 1 && endStep}\n    </>\n  );\n}\n"],"names":["React"],"mappings":";;;AAiCA,MAAM,OAAO,MAAM;AAAC,CAAA;AAEP,MAAA,sBAAA,GAAyBA,eAAM,aAA6B,CAAA;AAAA,EACvE,aAAe,EAAA,CAAA;AAAA,EACf,SAAW,EAAA,CAAA;AAAA,EACX,YAAc,EAAA,IAAA;AAAA,EACd,aAAa,EAAC;AAAA,EACd,cAAgB,EAAA,IAAA;AAAA,EAChB,YAAc,EAAA;AAChB,CAAC;AAQM,SAAS,cAAc,KAAwC,EAAA;AACpE,EAAA,MAAM,EAAE,QAAU,EAAA,QAAA,EAAU,YAAc,EAAA,UAAA,GAAa,GAAM,GAAA,KAAA;AAC7D,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,SAAiB,UAAU,CAAA;AAK7D,EAAA,MAAM,8BAA8B,KAAM,CAAA,IAAA;AAAA,IACxC,EAAE,MAAQ,EAAA,UAAA,GAAa,CAAE,EAAA;AAAA,IACzB,CAAC,GAAG,CAAM,KAAA;AAAA,GACZ;AACA,EAAM,MAAA,CAAC,WAAa,EAAA,cAAc,CAAI,GAAA,QAAA;AAAA,IACpC;AAAA,GACF;AAEA,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,YAAA,CAAa,UAAU,CAAA;AAAA,GACzB,EAAG,CAAC,UAAU,CAAC,CAAA;AAEf,EAAA,MAAM,QAA2B,EAAC;AAClC,EAAI,IAAA,OAAA;AACJ,EAAS,QAAA,CAAA,OAAA,CAAQ,UAAU,CAAS,KAAA,KAAA;AAClC,IAAI,IAAA,cAAA,CAAe,KAAK,CAAG,EAAA;AACzB,MAAI,IAAA,KAAA,CAAM,MAAM,GAAK,EAAA;AACnB,QAAU,OAAA,GAAA,KAAA;AAAA,OACL,MAAA;AACL,QAAA,KAAA,CAAM,KAAK,KAAK,CAAA;AAAA;AAClB;AACF,GACD,CAAA;AAED,EAAA,uBAEIA,cAAA,CAAA,aAAA,CAAAA,cAAA,CAAA,QAAA,EAAA,IAAA,kBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,sBAAuB,CAAA,QAAA;AAAA,IAAvB;AAAA,MACC,KAAO,EAAA;AAAA,QACL,SAAA;AAAA,QACA,YAAA;AAAA,QACA,WAAA;AAAA,QACA,cAAA;AAAA,QACA,YAAA;AAAA,QACA,aAAA,EAAe,QAAS,CAAA,KAAA,CAAM,QAAQ;AAAA;AACxC,KAAA;AAAA,oBAEAA,cAAA,CAAA,aAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,UAAY,EAAA,SAAA;AAAA,QACZ,WAAY,EAAA,UAAA;AAAA,QACZ,SAAA,EAAW,WAAW,CAAI,GAAA;AAAA,OAAA;AAAA,MAEzB;AAAA;AACH,KAED,SAAa,IAAA,QAAA,CAAS,MAAM,QAAQ,CAAA,GAAI,KAAK,OAChD,CAAA;AAEJ;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/core-components",
-  "version": "0.16.5-next.1",
+  "version": "0.17.0",
   "description": "Core components used by Backstage plugins and apps",
   "backstage": {
     "role": "web-library"
@@ -66,11 +66,11 @@
     "test": "backstage-cli package test"
   },
   "dependencies": {
-    "@backstage/config": "1.3.2",
-    "@backstage/core-plugin-api": "1.10.4",
-    "@backstage/errors": "1.2.7",
-    "@backstage/theme": "0.6.4",
-    "@backstage/version-bridge": "1.0.11",
+    "@backstage/config": "^1.3.2",
+    "@backstage/core-plugin-api": "^1.10.5",
+    "@backstage/errors": "^1.2.7",
+    "@backstage/theme": "^0.6.4",
+    "@backstage/version-bridge": "^1.0.11",
     "@dagrejs/dagre": "^1.1.4",
     "@date-io/core": "^1.3.13",
     "@material-table/core": "^3.1.0",
@@ -106,10 +106,10 @@
     "zod": "^3.22.4"
   },
   "devDependencies": {
-    "@backstage/app-defaults": "1.6.0-next.1",
-    "@backstage/cli": "0.31.0-next.1",
-    "@backstage/core-app-api": "1.16.0-next.0",
-    "@backstage/test-utils": "1.7.6-next.0",
+    "@backstage/app-defaults": "^1.6.0",
+    "@backstage/cli": "^0.31.0",
+    "@backstage/core-app-api": "^1.16.0",
+    "@backstage/test-utils": "^1.7.6",
     "@testing-library/dom": "^10.0.0",
     "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/user-event": "^14.0.0",