@backstage/core-components 0.8.5 → 0.8.6

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @backstage/core-components
 
+## 0.8.6
+
+### Patch Changes
+
+- b97a2460d5: Remove the `ignoreChildEvent` utility from the sidebar component to avoid conflicts with popovers
+- bdc53553eb: chore(deps): bump `react-text-truncate` from 0.16.0 to 0.17.0
+- 05f0f44180: chore(deps): bump `remark-gfm` from 2.0.0 to 3.0.1
+- 15bac1d738: chore(deps): bump `react-markdown` from 7.1.2 to 8.0.0
+- 7346b5fb96: chore(deps): bump `rc-progress` from 3.1.4 to 3.2.4
+- 9abb28bb22: Fix issue where component types are not recognized causing the `MobileSidebar` to not render as intended.
+- 1787694435: Updates styling of Header component by removing flex wrap and add max width of characters for subtitle
+
 ## 0.8.5
 
 ### Patch Changes

package/dist/index.esm.js

@@ -3118,6 +3118,7 @@ const useStyles$m = makeStyles((theme) => ({
   }
 }));
 const sortSidebarGroupsForPriority = (children) => orderBy(children, ({ props: { priority } }) => Number.isInteger(priority) ? priority : -1, "desc");
+const sidebarGroupType = React.createElement(SidebarGroup).type;
 const OverlayMenu = ({
   children,
   label = "Menu",
@@ -3152,7 +3153,7 @@ const MobileSidebar = (props) => {
   useEffect(() => {
     setSelectedMenuItemIndex(-1);
   }, [location.pathname]);
-  let sidebarGroups = useElementFilter(children, (elements) => elements.getElements().filter((child) => child.type === SidebarGroup));
+  let sidebarGroups = useElementFilter(children, (elements) => elements.getElements().filter((child) => child.type === sidebarGroupType));
   if (!children) {
     return null;
   } else if (!sidebarGroups.length) {
@@ -3290,11 +3291,11 @@ const DesktopSidebar = (props) => {
     onMouseEnter: disableExpandOnHover ? () => {
     } : handleOpen,
     onFocus: disableExpandOnHover ? () => {
-    } : ignoreChildEvent(handleOpen),
+    } : handleOpen,
     onMouseLeave: disableExpandOnHover ? () => {
     } : handleClose,
     onBlur: disableExpandOnHover ? () => {
-    } : ignoreChildEvent(handleClose)
+    } : handleClose
   }, /* @__PURE__ */ React.createElement("div", {
     className: classNames(classes.drawer, {
       [classes.drawerOpen]: isOpen
@@ -3322,14 +3323,6 @@ function A11ySkipSidebar() {
     className: classNames(classes.visuallyHidden)
   }, "Skip to content");
 }
-function ignoreChildEvent(handlerFn) {
-  return (event) => {
-    const currentTarget = event == null ? void 0 : event.currentTarget;
-    if (!(currentTarget == null ? void 0 : currentTarget.contains(event.relatedTarget))) {
-      handlerFn(event);
-    }
-  };
-}
 
 function isLocationMatch(currentLocation, toLocation) {
   const toDecodedSearch = new URLSearchParams(toLocation.search).toString();
@@ -3722,6 +3715,7 @@ const useLocationMatch = (submenu, location) => useElementFilter(submenu.props.c
 function isButtonItem(props) {
   return props.to === void 0;
 }
+const sidebarSubmenuType = React.createElement(SidebarSubmenu).type;
 const WorkaroundNavLink = React.forwardRef(function WorkaroundNavLinkWithRef({
   to,
   end,
@@ -3855,7 +3849,7 @@ const SidebarItemWithSubmenu = ({
   }, arrowIcon()), isHoveredOn && children));
 };
 const SidebarItem = forwardRef((props, ref) => {
-  const [submenu] = useElementFilter(props.children, (elements) => elements.getElements().filter((child) => child.type === SidebarSubmenu));
+  const [submenu] = useElementFilter(props.children, (elements) => elements.getElements().filter((child) => child.type === sidebarSubmenuType));
   if (submenu) {
     return /* @__PURE__ */ React.createElement(SidebarItemWithSubmenu, {
       ...props
@@ -5117,11 +5111,13 @@ const useStyles$5 = makeStyles((theme) => ({
     zIndex: 100,
     display: "flex",
     flexDirection: "row",
-    flexWrap: "wrap",
     alignItems: "center",
     backgroundImage: theme.page.backgroundImage,
     backgroundPosition: "center",
-    backgroundSize: "cover"
+    backgroundSize: "cover",
+    [theme.breakpoints.down("sm")]: {
+      flexWrap: "wrap"
+    }
   },
   leftItemsBox: {
     maxWidth: "100%",
@@ -5140,7 +5136,8 @@ const useStyles$5 = makeStyles((theme) => ({
     color: theme.palette.common.white,
     opacity: 0.8,
     display: "inline-block",
-    marginTop: theme.spacing(1)
+    marginTop: theme.spacing(1),
+    maxWidth: "75ch"
   },
   type: {
     textTransform: "uppercase",