@backstage/core-components 0.11.2-next.1 → 0.11.2

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @backstage/core-components
 
+## 0.11.2
+
+### Patch Changes
+
+- bde1e8c8e2: Added `curve` prop to the `DependencyGraph` component to select the type of layout
+- 882101cd9b: Deep-import LightAsync component to improve module-import speed
+- 0d0f30d87e: Fixed layout for core-components docs where table was broken by splitting with code sample
+- Updated dependencies
+  - @backstage/core-plugin-api@1.0.7
+  - @backstage/config@1.0.3
+  - @backstage/errors@1.1.2
+  - @backstage/theme@0.2.16
+  - @backstage/version-bridge@1.0.1
+
+## 0.11.2-next.2
+
+### Patch Changes
+
+- Updated dependencies
+  - @backstage/config@1.0.3-next.2
+  - @backstage/core-plugin-api@1.0.7-next.2
+  - @backstage/errors@1.1.2-next.2
+  - @backstage/theme@0.2.16
+  - @backstage/version-bridge@1.0.1
+
 ## 0.11.2-next.1
 
 ### Patch Changes

package/dist/index.d.ts

@@ -510,6 +510,14 @@ interface DependencyGraphProps<NodeData, EdgeData> extends React__default.SVGPro
      * Default: `enabled`
      */
     zoom?: 'enabled' | 'disabled' | 'enable-on-click';
+    /**
+     * A factory for curve generators addressing both lines and areas.
+     *
+     * @remarks
+     *
+     * Default: 'curveMonotoneX'
+     */
+    curve?: 'curveStepBefore' | 'curveMonotoneX';
 }
 /**
  * Graph component used to visualize relations between entities
@@ -593,6 +601,7 @@ declare type ResponseErrorPanelClassKey = 'text' | 'divider';
 /**
  * Renders a warning panel as the effect of a failed server request.
  *
+ * @remarks
  * Has special treatment for ResponseError errors, to display rich
  * server-provided information about what happened.
  */
@@ -682,6 +691,7 @@ interface LogViewerProps {
 /**
  * A component that displays logs in a scrollable text area.
  *
+ * @remarks
  * The LogViewer has support for search and filtering, as well as displaying
  * text content with ANSI color escape codes.
  *
@@ -707,10 +717,10 @@ declare type Props$b = {
     className?: string;
 };
 /**
- * MarkdownContent
- * --
- * Renders markdown with the default dialect [gfm - GitHub flavored Markdown](https://github.github.com/gfm/) to backstage theme styled HTML.
- * If you just want to render to plain [CommonMark](https://commonmark.org/), set the dialect to `'common-mark'`
+ * Renders markdown with the default dialect {@link https://github.github.com/gfm/ | gfm - GitHub flavored Markdown} to backstage theme styled HTML.
+ *
+ * @remarks
+ * If you just want to render to plain {@link https://commonmark.org/ | CommonMark}, set the dialect to `'common-mark'`
  */
 declare function MarkdownContent(props: Props$b): JSX.Element;
 
@@ -984,6 +994,7 @@ declare type SubRoute$1 = {
  * TabbedLayout is a compound component, which allows you to define a layout for
  * pages using a sub-navigation mechanism.
  *
+ * @remarks
  * Consists of two parts: TabbedLayout and TabbedLayout.Route
  *
  * @example
@@ -1090,7 +1101,7 @@ declare type WarningProps = {
     children?: React__default.ReactNode;
 };
 /**
- * WarningPanel. Show a user friendly error message to a user similar to
+ * Show a user friendly error message to a user similar to
  * ErrorPanel except that the warning panel only shows the warning message to
  * the user.
  *
@@ -1312,6 +1323,7 @@ declare type ItemCardProps = {
  * This card type has been deprecated. Instead use plain MUI Card and helpers
  * where appropriate.
  *
+ *  @example
  * ```
  *   <Card>
  *     <CardMedia>
@@ -1347,6 +1359,7 @@ declare type ItemCardGridProps = Partial<WithStyles<typeof styles$1>> & {
  * A default grid to use when arranging "item cards" - cards that let users
  * select among several options.
  *
+ * @remarks
  * The immediate children are expected to be MUI Card components.
  *
  * Styles for the grid can be overridden using the `classes` prop, e.g.:
@@ -1391,6 +1404,7 @@ declare type ItemCardHeaderProps = Partial<WithStyles<typeof styles>> & {
  * A simple card header, rendering a default look for "item cards" - cards that
  * are arranged in a grid for users to select among several options.
  *
+ * @remarks
  * This component expects to be placed within a MUI `<CardMedia>`.
  *
  * Styles for the header can be overridden using the `classes` prop, e.g.:
@@ -1442,12 +1456,12 @@ declare type ProxiedSignInPageProps = SignInPageProps & {
  */
 declare const ProxiedSignInPage: (props: ProxiedSignInPageProps) => JSX.Element | null;
 
-/** @public **/
+/** @public */
 declare type SidebarOptions = {
     drawerWidthClosed?: number;
     drawerWidthOpen?: number;
 };
-/** @public **/
+/** @public */
 declare type SubmenuOptions = {
     drawerWidthClosed?: number;
     drawerWidthOpen?: number;
@@ -1498,6 +1512,7 @@ declare type MobileSidebarProps = {
 /**
  * A navigation component for mobile screens, which sticks to the bottom.
  *
+ * @remarks
  * It alternates the normal sidebar by grouping the `SidebarItems` based on provided `SidebarGroup`s
  * either rendering them as a link or an overlay menu.
  * If no `SidebarGroup`s are provided the sidebar content is wrapped in an default overlay menu.
@@ -1529,6 +1544,7 @@ interface SidebarGroupProps extends BottomNavigationActionProps {
 /**
  * Groups items of the `Sidebar` together.
  *
+ * @remarks
  * On bigger screens, this won't have any effect at the moment.
  * On small screens, it will add an action to the bottom navigation - either triggering an overlay menu or acting as a link
  *
@@ -1550,6 +1566,7 @@ declare type SidebarSubmenuItemDropdownItem = {
 /**
  * Holds submenu item content.
  *
+ * @remarks
  * title: Text content of submenu item
  * subtitle: A subtitle displayed under the main title
  * to: Path to navigate to when item is clicked
@@ -1660,6 +1677,7 @@ declare type SidebarItemProps = SidebarItemLinkProps | SidebarItemButtonProps |
 /**
  * Creates a `SidebarItem`
  *
+ * @remarks
  * If children contain a `SidebarSubmenu` component the `SidebarItem` will have a expandable submenu
  */
 declare const SidebarItem: (props: SidebarItemProps) => JSX.Element;
@@ -1678,6 +1696,8 @@ declare const SidebarDivider: React__default.ComponentType<React__default.ClassA
 declare const SidebarScrollWrapper: React__default.ComponentType<React__default.ClassAttributes<HTMLDivElement> & React__default.HTMLAttributes<HTMLDivElement> & StyledComponentProps<"root">>;
 /**
  * A button which allows you to expand the sidebar when clicked.
+ *
+ * @remarks
  * Use optionally to replace sidebar's expand-on-hover feature with expand-on-click.
  *
  * If you are using this you might want to set the `disableExpandOnHover` of the `Sidebar` to `true`.
@@ -1815,7 +1835,7 @@ declare type SignInProviderConfig = {
     message: string;
     apiRef: ApiRef<ProfileInfoApi & BackstageIdentityApi & SessionApi>;
 };
-/** @public **/
+/** @public */
 declare type IdentityProviders = ('guest' | 'custom' | SignInProviderConfig)[];
 
 declare type MultiSignInPageProps = SignInPageProps & {

package/dist/index.esm.js

@@ -551,7 +551,7 @@ function DefaultLabel({ edge: { label } }) {
 const useStyles$N = makeStyles$1(
   (theme) => ({
     path: {
-      strokeWidth: 2,
+      strokeWidth: 1,
       stroke: theme.palette.textSubtle,
       fill: "none",
       transition: `${theme.transitions.duration.shortest}ms`
@@ -565,12 +565,12 @@ const useStyles$N = makeStyles$1(
 const renderDefault = (props) => /* @__PURE__ */ React.createElement(DefaultLabel, {
   ...props
 });
-const createPath = d3Shape.line().x((d) => d.x).y((d) => d.y).curve(d3Shape.curveMonotoneX);
 function Edge({
   render = renderDefault,
   setEdge,
   id,
-  edge
+  edge,
+  curve
 }) {
   const { x = 0, y = 0, width, height, points } = edge;
   const labelProps = edge;
@@ -591,6 +591,10 @@ function Edge({
     }
   }, [edge, height, width, setEdge, id]);
   let path = "";
+  const createPath = React.useMemo(
+    () => d3Shape.line().x((d) => d.x).y((d) => d.y).curve(d3Shape[curve]),
+    [curve]
+  );
   if (points) {
     const finitePoints = points.filter(
       (point) => isFinite(point.x) && isFinite(point.y)
@@ -600,7 +604,6 @@ function Edge({
   return /* @__PURE__ */ React.createElement(React.Fragment, null, path && /* @__PURE__ */ React.createElement("path", {
     "data-testid": EDGE_TEST_ID,
     className: classes.path,
-    markerEnd: `url(#${ARROW_MARKER_ID})`,
     d: path
   }), labelProps.label ? /* @__PURE__ */ React.createElement("g", {
     ref: labelRef,
@@ -633,6 +636,7 @@ function DependencyGraph(props) {
     renderLabel,
     defs,
     zoom = "enabled",
+    curve = "curveMonotoneX",
     ...svgProps
   } = props;
   const theme = useTheme$1();
@@ -823,7 +827,8 @@ function DependencyGraph(props) {
       id: e,
       setEdge,
       render: renderLabel,
-      edge
+      edge,
+      curve
     });
   }), graphNodes.map((id) => {
     const node = graph.current.node(id);