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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @backstage/core-components
2
2
 
3
+ ## 0.14.9-next.0
4
+
5
+ ### Patch Changes
6
+
7
+ - d4ffdbb: Fixed bug where `<Select>` component with empty string as placeholder gave an error
8
+ - Updated dependencies
9
+ - @backstage/core-plugin-api@1.9.3
10
+ - @backstage/config@1.2.0
11
+ - @backstage/errors@1.2.4
12
+ - @backstage/theme@0.5.6
13
+ - @backstage/version-bridge@1.0.8
14
+
3
15
  ## 0.14.8
4
16
 
5
17
  ### Patch Changes
@@ -1,6 +1,6 @@
1
1
  {
2
- "name": "@backstage/core-components",
3
- "version": "0.14.8",
2
+ "name": "@backstage/core-components__alpha",
3
+ "version": "0.14.9-next.0",
4
4
  "main": "../dist/alpha.esm.js",
5
5
  "module": "../dist/alpha.esm.js",
6
6
  "types": "../dist/alpha.d.ts"
@@ -229,8 +229,7 @@ function DependencyGraph(props) {
229
229
  },
230
230
  graphEdges.map((e) => {
231
231
  const edge = graph.current.edge(e);
232
- if (!edge)
233
- return null;
232
+ if (!edge) return null;
234
233
  return /* @__PURE__ */ React__default.createElement(
235
234
  Edge,
236
235
  {
@@ -246,8 +245,7 @@ function DependencyGraph(props) {
246
245
  }),
247
246
  graphNodes.map((id) => {
248
247
  const node = graph.current.node(id);
249
- if (!node)
250
- return null;
248
+ if (!node) return null;
251
249
  return /* @__PURE__ */ React__default.createElement(
252
250
  Node,
253
251
  {
@@ -1 +1 @@
1
- {"version":3,"file":"DependencyGraph.esm.js","sources":["../../../src/components/DependencyGraph/DependencyGraph.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 from 'react';\nimport * as d3Zoom from 'd3-zoom';\nimport * as d3Selection from 'd3-selection';\nimport useTheme from '@material-ui/core/styles/useTheme';\nimport dagre from 'dagre';\nimport debounce from 'lodash/debounce';\nimport { DependencyGraphTypes as Types } from './types';\nimport { Node } from './Node';\nimport { Edge, GraphEdge } from './Edge';\nimport { ARROW_MARKER_ID } from './constants';\n\n/**\n * Properties of {@link DependencyGraph}\n *\n * @public\n * @remarks\n * `<NodeData>` and `<EdgeData>` are useful when rendering custom or edge labels\n */\nexport interface DependencyGraphProps<NodeData, EdgeData>\n extends React.SVGProps<SVGSVGElement> {\n /**\n * Edges of graph\n */\n edges: Types.DependencyEdge<EdgeData>[];\n /**\n * Nodes of Graph\n */\n nodes: Types.DependencyNode<NodeData>[];\n /**\n * Graph {@link DependencyGraphTypes.Direction | direction}\n *\n * @remarks\n *\n * Default: `DependencyGraphTypes.Direction.TOP_BOTTOM`\n */\n direction?: Types.Direction;\n /**\n * Node {@link DependencyGraphTypes.Alignment | alignment}\n */\n align?: Types.Alignment;\n /**\n * Margin between nodes on each rank\n *\n * @remarks\n *\n * Default: 50\n */\n nodeMargin?: number;\n /**\n * Margin between edges\n *\n * @remarks\n *\n * Default: 10\n */\n edgeMargin?: number;\n /**\n * Margin between each rank\n *\n * @remarks\n *\n * Default: 50\n */\n rankMargin?: number;\n /**\n * Margin on left and right of whole graph\n *\n * @remarks\n *\n * Default: 0\n */\n paddingX?: number;\n /**\n * Margin on top and bottom of whole graph\n *\n * @remarks\n *\n * Default: 0\n */\n paddingY?: number;\n /**\n * Heuristic used to find set of edges that will make graph acyclic\n */\n acyclicer?: 'greedy';\n /**\n * {@link DependencyGraphTypes.Ranker | Algorithm} used to rank nodes\n *\n * @remarks\n *\n * Default: `DependencyGraphTypes.Ranker.NETWORK_SIMPLEX`\n */\n ranker?: Types.Ranker;\n /**\n * {@link DependencyGraphTypes.LabelPosition | Position} of label in relation to edge\n *\n * @remarks\n *\n * Default: `DependencyGraphTypes.LabelPosition.RIGHT`\n */\n labelPosition?: Types.LabelPosition;\n /**\n * How much to move label away from edge\n *\n * @remarks\n *\n * Applies only when {@link DependencyGraphProps.labelPosition} is `DependencyGraphTypes.LabelPosition.LEFT` or\n * `DependencyGraphTypes.LabelPosition.RIGHT`\n */\n labelOffset?: number;\n /**\n * Minimum number of ranks to keep between connected nodes\n */\n edgeRanks?: number;\n /**\n * Weight applied to edges in graph\n */\n edgeWeight?: number;\n /**\n * Custom node rendering component\n */\n renderNode?: Types.RenderNodeFunction<NodeData>;\n /**\n * Custom label rendering component\n */\n renderLabel?: Types.RenderLabelFunction<EdgeData>;\n /**\n * {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Element/defs | Defs} shared by rendered SVG to be used by\n * {@link DependencyGraphProps.renderNode} and/or {@link DependencyGraphProps.renderLabel}\n */\n defs?: JSX.Element | JSX.Element[];\n /**\n * Controls zoom behavior of graph\n *\n * @remarks\n *\n * Default: `enabled`\n */\n zoom?: 'enabled' | 'disabled' | 'enable-on-click';\n /**\n * A factory for curve generators addressing both lines and areas.\n *\n * @remarks\n *\n * Default: 'curveMonotoneX'\n */\n curve?: 'curveStepBefore' | 'curveMonotoneX';\n /**\n * Controls if the arrow heads should be rendered or not.\n *\n * Default: false\n */\n showArrowHeads?: boolean;\n /**\n * Controls if the graph should be contained or grow\n *\n * @remarks\n *\n * Default: 'grow'\n */\n fit?: 'grow' | 'contain';\n}\n\nconst WORKSPACE_ID = 'workspace';\n\n/**\n * Graph component used to visualize relations between entities\n *\n * @public\n */\nexport function DependencyGraph<NodeData, EdgeData>(\n props: DependencyGraphProps<NodeData, EdgeData>,\n) {\n const {\n edges,\n nodes,\n renderNode,\n direction = Types.Direction.TOP_BOTTOM,\n align,\n nodeMargin = 50,\n edgeMargin = 10,\n rankMargin = 50,\n paddingX = 0,\n paddingY = 0,\n acyclicer,\n ranker = Types.Ranker.NETWORK_SIMPLEX,\n labelPosition = Types.LabelPosition.RIGHT,\n labelOffset = 10,\n edgeRanks = 1,\n edgeWeight = 1,\n renderLabel,\n defs,\n zoom = 'enabled',\n curve = 'curveMonotoneX',\n showArrowHeads = false,\n fit = 'grow',\n ...svgProps\n } = props;\n const theme = useTheme();\n const [containerWidth, setContainerWidth] = React.useState<number>(100);\n const [containerHeight, setContainerHeight] = React.useState<number>(100);\n\n const graph = React.useRef<\n dagre.graphlib.Graph<Types.DependencyNode<NodeData>>\n >(new dagre.graphlib.Graph());\n const [graphWidth, setGraphWidth] = React.useState<number>(\n graph.current.graph()?.width || 0,\n );\n const [graphHeight, setGraphHeight] = React.useState<number>(\n graph.current.graph()?.height || 0,\n );\n const [graphNodes, setGraphNodes] = React.useState<string[]>([]);\n const [graphEdges, setGraphEdges] = React.useState<dagre.Edge[]>([]);\n\n const maxWidth = Math.max(graphWidth, containerWidth);\n const maxHeight = Math.max(graphHeight, containerHeight);\n const minHeight = Math.min(graphHeight, containerHeight);\n\n const scalableHeight = fit === 'grow' ? maxHeight : minHeight;\n\n const containerRef = React.useMemo(\n () =>\n debounce((node: SVGSVGElement) => {\n if (!node) {\n return;\n }\n // Set up zooming + panning\n const container = d3Selection.select<SVGSVGElement, null>(node);\n const workspace = d3Selection.select(node.getElementById(WORKSPACE_ID));\n\n function enableZoom() {\n container.call(\n d3Zoom\n .zoom<SVGSVGElement, null>()\n .scaleExtent([1, Infinity])\n .on('zoom', event => {\n event.transform.x = Math.min(\n 0,\n Math.max(\n event.transform.x,\n maxWidth - maxWidth * event.transform.k,\n ),\n );\n event.transform.y = Math.min(\n 0,\n Math.max(\n event.transform.y,\n maxHeight - maxHeight * event.transform.k,\n ),\n );\n workspace.attr('transform', event.transform);\n }),\n );\n }\n\n if (zoom === 'enabled') {\n enableZoom();\n } else if (zoom === 'enable-on-click') {\n container.on('click', () => enableZoom());\n }\n\n const { width: newContainerWidth, height: newContainerHeight } =\n node.getBoundingClientRect();\n if (containerWidth !== newContainerWidth) {\n setContainerWidth(newContainerWidth);\n }\n if (containerHeight !== newContainerHeight) {\n setContainerHeight(newContainerHeight);\n }\n }, 100),\n [containerHeight, containerWidth, maxWidth, maxHeight, zoom],\n );\n\n const setNodesAndEdges = React.useCallback(() => {\n // Cleaning up lingering nodes and edges\n const currentGraphNodes = graph.current.nodes();\n const currentGraphEdges = graph.current.edges();\n\n currentGraphNodes.forEach(nodeId => {\n const remainingNode = nodes.some(node => node.id === nodeId);\n if (!remainingNode) {\n graph.current.removeNode(nodeId);\n }\n });\n\n currentGraphEdges.forEach(e => {\n const remainingEdge = edges.some(\n edge => edge.from === e.v && edge.to === e.w,\n );\n if (!remainingEdge) {\n graph.current.removeEdge(e.v, e.w);\n }\n });\n\n // Adding/updating nodes and edges\n nodes.forEach(node => {\n const existingNode = graph.current\n .nodes()\n .find(nodeId => node.id === nodeId);\n\n if (existingNode && graph.current.node(existingNode)) {\n const { width, height, x, y } = graph.current.node(existingNode);\n graph.current.setNode(existingNode, { ...node, width, height, x, y });\n } else {\n graph.current.setNode(node.id, { ...node, width: 0, height: 0 });\n }\n });\n\n edges.forEach(e => {\n graph.current.setEdge(e.from, e.to, {\n ...e,\n label: e.label,\n width: 0,\n height: 0,\n labelpos: labelPosition,\n labeloffset: labelOffset,\n weight: edgeWeight,\n minlen: edgeRanks,\n });\n });\n }, [edges, nodes, labelPosition, labelOffset, edgeWeight, edgeRanks]);\n\n const updateGraph = React.useMemo(\n () =>\n debounce(\n () => {\n dagre.layout(graph.current);\n const { height, width } = graph.current.graph();\n const newHeight = Math.max(0, height || 0);\n const newWidth = Math.max(0, width || 0);\n setGraphWidth(newWidth);\n setGraphHeight(newHeight);\n\n setGraphNodes(graph.current.nodes());\n setGraphEdges(graph.current.edges());\n },\n 250,\n { leading: true },\n ),\n [],\n );\n\n React.useEffect(() => {\n graph.current.setGraph({\n rankdir: direction,\n align,\n nodesep: nodeMargin,\n edgesep: edgeMargin,\n ranksep: rankMargin,\n marginx: paddingX,\n marginy: paddingY,\n acyclicer,\n ranker,\n });\n\n setNodesAndEdges();\n updateGraph();\n\n return updateGraph.cancel;\n }, [\n acyclicer,\n align,\n direction,\n edgeMargin,\n paddingX,\n paddingY,\n nodeMargin,\n rankMargin,\n ranker,\n setNodesAndEdges,\n updateGraph,\n ]);\n\n function setNode(id: string, node: Types.DependencyNode<NodeData>) {\n graph.current.setNode(id, node);\n updateGraph();\n return graph.current;\n }\n\n function setEdge(id: dagre.Edge, edge: Types.DependencyEdge<EdgeData>) {\n graph.current.setEdge(id, edge);\n updateGraph();\n return graph.current;\n }\n\n return (\n <svg\n ref={containerRef}\n {...svgProps}\n width=\"100%\"\n height={scalableHeight}\n viewBox={`0 0 ${maxWidth} ${maxHeight}`}\n >\n <defs>\n <marker\n id={ARROW_MARKER_ID}\n viewBox=\"0 0 24 24\"\n markerWidth=\"14\"\n markerHeight=\"14\"\n refX=\"16\"\n refY=\"12\"\n orient=\"auto\"\n markerUnits=\"strokeWidth\"\n >\n <path\n fill={theme.palette.textSubtle}\n d=\"M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z\"\n />\n </marker>\n {defs}\n </defs>\n <g id={WORKSPACE_ID}>\n <svg\n width={graphWidth}\n height={graphHeight}\n y={maxHeight / 2 - graphHeight / 2}\n x={maxWidth / 2 - graphWidth / 2}\n viewBox={`0 0 ${graphWidth} ${graphHeight}`}\n >\n {graphEdges.map(e => {\n const edge = graph.current.edge(e) as GraphEdge<EdgeData>;\n if (!edge) return null;\n return (\n <Edge\n key={`${e.v}-${e.w}`}\n id={e}\n setEdge={setEdge}\n render={renderLabel}\n edge={edge}\n curve={curve}\n showArrowHeads={showArrowHeads}\n />\n );\n })}\n {graphNodes.map((id: string) => {\n const node = graph.current.node(id);\n if (!node) return null;\n return (\n <Node\n key={id}\n setNode={setNode}\n render={renderNode}\n node={node}\n />\n );\n })}\n </svg>\n </g>\n </svg>\n );\n}\n"],"names":["Types","React"],"mappings":"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"}
1
+ {"version":3,"file":"DependencyGraph.esm.js","sources":["../../../src/components/DependencyGraph/DependencyGraph.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 from 'react';\nimport * as d3Zoom from 'd3-zoom';\nimport * as d3Selection from 'd3-selection';\nimport useTheme from '@material-ui/core/styles/useTheme';\nimport dagre from 'dagre';\nimport debounce from 'lodash/debounce';\nimport { DependencyGraphTypes as Types } from './types';\nimport { Node } from './Node';\nimport { Edge, GraphEdge } from './Edge';\nimport { ARROW_MARKER_ID } from './constants';\n\n/**\n * Properties of {@link DependencyGraph}\n *\n * @public\n * @remarks\n * `<NodeData>` and `<EdgeData>` are useful when rendering custom or edge labels\n */\nexport interface DependencyGraphProps<NodeData, EdgeData>\n extends React.SVGProps<SVGSVGElement> {\n /**\n * Edges of graph\n */\n edges: Types.DependencyEdge<EdgeData>[];\n /**\n * Nodes of Graph\n */\n nodes: Types.DependencyNode<NodeData>[];\n /**\n * Graph {@link DependencyGraphTypes.Direction | direction}\n *\n * @remarks\n *\n * Default: `DependencyGraphTypes.Direction.TOP_BOTTOM`\n */\n direction?: Types.Direction;\n /**\n * Node {@link DependencyGraphTypes.Alignment | alignment}\n */\n align?: Types.Alignment;\n /**\n * Margin between nodes on each rank\n *\n * @remarks\n *\n * Default: 50\n */\n nodeMargin?: number;\n /**\n * Margin between edges\n *\n * @remarks\n *\n * Default: 10\n */\n edgeMargin?: number;\n /**\n * Margin between each rank\n *\n * @remarks\n *\n * Default: 50\n */\n rankMargin?: number;\n /**\n * Margin on left and right of whole graph\n *\n * @remarks\n *\n * Default: 0\n */\n paddingX?: number;\n /**\n * Margin on top and bottom of whole graph\n *\n * @remarks\n *\n * Default: 0\n */\n paddingY?: number;\n /**\n * Heuristic used to find set of edges that will make graph acyclic\n */\n acyclicer?: 'greedy';\n /**\n * {@link DependencyGraphTypes.Ranker | Algorithm} used to rank nodes\n *\n * @remarks\n *\n * Default: `DependencyGraphTypes.Ranker.NETWORK_SIMPLEX`\n */\n ranker?: Types.Ranker;\n /**\n * {@link DependencyGraphTypes.LabelPosition | Position} of label in relation to edge\n *\n * @remarks\n *\n * Default: `DependencyGraphTypes.LabelPosition.RIGHT`\n */\n labelPosition?: Types.LabelPosition;\n /**\n * How much to move label away from edge\n *\n * @remarks\n *\n * Applies only when {@link DependencyGraphProps.labelPosition} is `DependencyGraphTypes.LabelPosition.LEFT` or\n * `DependencyGraphTypes.LabelPosition.RIGHT`\n */\n labelOffset?: number;\n /**\n * Minimum number of ranks to keep between connected nodes\n */\n edgeRanks?: number;\n /**\n * Weight applied to edges in graph\n */\n edgeWeight?: number;\n /**\n * Custom node rendering component\n */\n renderNode?: Types.RenderNodeFunction<NodeData>;\n /**\n * Custom label rendering component\n */\n renderLabel?: Types.RenderLabelFunction<EdgeData>;\n /**\n * {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Element/defs | Defs} shared by rendered SVG to be used by\n * {@link DependencyGraphProps.renderNode} and/or {@link DependencyGraphProps.renderLabel}\n */\n defs?: JSX.Element | JSX.Element[];\n /**\n * Controls zoom behavior of graph\n *\n * @remarks\n *\n * Default: `enabled`\n */\n zoom?: 'enabled' | 'disabled' | 'enable-on-click';\n /**\n * A factory for curve generators addressing both lines and areas.\n *\n * @remarks\n *\n * Default: 'curveMonotoneX'\n */\n curve?: 'curveStepBefore' | 'curveMonotoneX';\n /**\n * Controls if the arrow heads should be rendered or not.\n *\n * Default: false\n */\n showArrowHeads?: boolean;\n /**\n * Controls if the graph should be contained or grow\n *\n * @remarks\n *\n * Default: 'grow'\n */\n fit?: 'grow' | 'contain';\n}\n\nconst WORKSPACE_ID = 'workspace';\n\n/**\n * Graph component used to visualize relations between entities\n *\n * @public\n */\nexport function DependencyGraph<NodeData, EdgeData>(\n props: DependencyGraphProps<NodeData, EdgeData>,\n) {\n const {\n edges,\n nodes,\n renderNode,\n direction = Types.Direction.TOP_BOTTOM,\n align,\n nodeMargin = 50,\n edgeMargin = 10,\n rankMargin = 50,\n paddingX = 0,\n paddingY = 0,\n acyclicer,\n ranker = Types.Ranker.NETWORK_SIMPLEX,\n labelPosition = Types.LabelPosition.RIGHT,\n labelOffset = 10,\n edgeRanks = 1,\n edgeWeight = 1,\n renderLabel,\n defs,\n zoom = 'enabled',\n curve = 'curveMonotoneX',\n showArrowHeads = false,\n fit = 'grow',\n ...svgProps\n } = props;\n const theme = useTheme();\n const [containerWidth, setContainerWidth] = React.useState<number>(100);\n const [containerHeight, setContainerHeight] = React.useState<number>(100);\n\n const graph = React.useRef<\n dagre.graphlib.Graph<Types.DependencyNode<NodeData>>\n >(new dagre.graphlib.Graph());\n const [graphWidth, setGraphWidth] = React.useState<number>(\n graph.current.graph()?.width || 0,\n );\n const [graphHeight, setGraphHeight] = React.useState<number>(\n graph.current.graph()?.height || 0,\n );\n const [graphNodes, setGraphNodes] = React.useState<string[]>([]);\n const [graphEdges, setGraphEdges] = React.useState<dagre.Edge[]>([]);\n\n const maxWidth = Math.max(graphWidth, containerWidth);\n const maxHeight = Math.max(graphHeight, containerHeight);\n const minHeight = Math.min(graphHeight, containerHeight);\n\n const scalableHeight = fit === 'grow' ? maxHeight : minHeight;\n\n const containerRef = React.useMemo(\n () =>\n debounce((node: SVGSVGElement) => {\n if (!node) {\n return;\n }\n // Set up zooming + panning\n const container = d3Selection.select<SVGSVGElement, null>(node);\n const workspace = d3Selection.select(node.getElementById(WORKSPACE_ID));\n\n function enableZoom() {\n container.call(\n d3Zoom\n .zoom<SVGSVGElement, null>()\n .scaleExtent([1, Infinity])\n .on('zoom', event => {\n event.transform.x = Math.min(\n 0,\n Math.max(\n event.transform.x,\n maxWidth - maxWidth * event.transform.k,\n ),\n );\n event.transform.y = Math.min(\n 0,\n Math.max(\n event.transform.y,\n maxHeight - maxHeight * event.transform.k,\n ),\n );\n workspace.attr('transform', event.transform);\n }),\n );\n }\n\n if (zoom === 'enabled') {\n enableZoom();\n } else if (zoom === 'enable-on-click') {\n container.on('click', () => enableZoom());\n }\n\n const { width: newContainerWidth, height: newContainerHeight } =\n node.getBoundingClientRect();\n if (containerWidth !== newContainerWidth) {\n setContainerWidth(newContainerWidth);\n }\n if (containerHeight !== newContainerHeight) {\n setContainerHeight(newContainerHeight);\n }\n }, 100),\n [containerHeight, containerWidth, maxWidth, maxHeight, zoom],\n );\n\n const setNodesAndEdges = React.useCallback(() => {\n // Cleaning up lingering nodes and edges\n const currentGraphNodes = graph.current.nodes();\n const currentGraphEdges = graph.current.edges();\n\n currentGraphNodes.forEach(nodeId => {\n const remainingNode = nodes.some(node => node.id === nodeId);\n if (!remainingNode) {\n graph.current.removeNode(nodeId);\n }\n });\n\n currentGraphEdges.forEach(e => {\n const remainingEdge = edges.some(\n edge => edge.from === e.v && edge.to === e.w,\n );\n if (!remainingEdge) {\n graph.current.removeEdge(e.v, e.w);\n }\n });\n\n // Adding/updating nodes and edges\n nodes.forEach(node => {\n const existingNode = graph.current\n .nodes()\n .find(nodeId => node.id === nodeId);\n\n if (existingNode && graph.current.node(existingNode)) {\n const { width, height, x, y } = graph.current.node(existingNode);\n graph.current.setNode(existingNode, { ...node, width, height, x, y });\n } else {\n graph.current.setNode(node.id, { ...node, width: 0, height: 0 });\n }\n });\n\n edges.forEach(e => {\n graph.current.setEdge(e.from, e.to, {\n ...e,\n label: e.label,\n width: 0,\n height: 0,\n labelpos: labelPosition,\n labeloffset: labelOffset,\n weight: edgeWeight,\n minlen: edgeRanks,\n });\n });\n }, [edges, nodes, labelPosition, labelOffset, edgeWeight, edgeRanks]);\n\n const updateGraph = React.useMemo(\n () =>\n debounce(\n () => {\n dagre.layout(graph.current);\n const { height, width } = graph.current.graph();\n const newHeight = Math.max(0, height || 0);\n const newWidth = Math.max(0, width || 0);\n setGraphWidth(newWidth);\n setGraphHeight(newHeight);\n\n setGraphNodes(graph.current.nodes());\n setGraphEdges(graph.current.edges());\n },\n 250,\n { leading: true },\n ),\n [],\n );\n\n React.useEffect(() => {\n graph.current.setGraph({\n rankdir: direction,\n align,\n nodesep: nodeMargin,\n edgesep: edgeMargin,\n ranksep: rankMargin,\n marginx: paddingX,\n marginy: paddingY,\n acyclicer,\n ranker,\n });\n\n setNodesAndEdges();\n updateGraph();\n\n return updateGraph.cancel;\n }, [\n acyclicer,\n align,\n direction,\n edgeMargin,\n paddingX,\n paddingY,\n nodeMargin,\n rankMargin,\n ranker,\n setNodesAndEdges,\n updateGraph,\n ]);\n\n function setNode(id: string, node: Types.DependencyNode<NodeData>) {\n graph.current.setNode(id, node);\n updateGraph();\n return graph.current;\n }\n\n function setEdge(id: dagre.Edge, edge: Types.DependencyEdge<EdgeData>) {\n graph.current.setEdge(id, edge);\n updateGraph();\n return graph.current;\n }\n\n return (\n <svg\n ref={containerRef}\n {...svgProps}\n width=\"100%\"\n height={scalableHeight}\n viewBox={`0 0 ${maxWidth} ${maxHeight}`}\n >\n <defs>\n <marker\n id={ARROW_MARKER_ID}\n viewBox=\"0 0 24 24\"\n markerWidth=\"14\"\n markerHeight=\"14\"\n refX=\"16\"\n refY=\"12\"\n orient=\"auto\"\n markerUnits=\"strokeWidth\"\n >\n <path\n fill={theme.palette.textSubtle}\n d=\"M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z\"\n />\n </marker>\n {defs}\n </defs>\n <g id={WORKSPACE_ID}>\n <svg\n width={graphWidth}\n height={graphHeight}\n y={maxHeight / 2 - graphHeight / 2}\n x={maxWidth / 2 - graphWidth / 2}\n viewBox={`0 0 ${graphWidth} ${graphHeight}`}\n >\n {graphEdges.map(e => {\n const edge = graph.current.edge(e) as GraphEdge<EdgeData>;\n if (!edge) return null;\n return (\n <Edge\n key={`${e.v}-${e.w}`}\n id={e}\n setEdge={setEdge}\n render={renderLabel}\n edge={edge}\n curve={curve}\n showArrowHeads={showArrowHeads}\n />\n );\n })}\n {graphNodes.map((id: string) => {\n const node = graph.current.node(id);\n if (!node) return null;\n return (\n <Node\n key={id}\n setNode={setNode}\n render={renderNode}\n node={node}\n />\n );\n })}\n </svg>\n </g>\n </svg>\n );\n}\n"],"names":["Types","React"],"mappings":"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"}
@@ -44,8 +44,7 @@ const useStyles = makeStyles(
44
44
  { name: "BackstageMarkdownContent" }
45
45
  );
46
46
  const flatten = (text, child) => {
47
- if (!child)
48
- return text;
47
+ if (!child) return text;
49
48
  return typeof child === "string" ? text + child : React__default.Children.toArray(child.props.children).reduce(flatten, text);
50
49
  };
51
50
  const headingRenderer = ({ level, children }) => {
@@ -1 +1 @@
1
- {"version":3,"file":"MarkdownContent.esm.js","sources":["../../../src/components/MarkdownContent/MarkdownContent.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 { makeStyles } from '@material-ui/core/styles';\nimport ReactMarkdown, { Options } from 'react-markdown';\nimport gfm from 'remark-gfm';\nimport React from 'react';\nimport { CodeSnippet } from '../CodeSnippet';\nimport { HeadingProps } from 'react-markdown/lib/ast-to-react';\n\nexport type MarkdownContentClassKey = 'markdown';\n\nconst useStyles = makeStyles(\n theme => ({\n markdown: {\n '& table': {\n borderCollapse: 'collapse',\n border: `1px solid ${theme.palette.border}`,\n },\n '& th, & td': {\n border: `1px solid ${theme.palette.border}`,\n padding: theme.spacing(1),\n },\n '& td': {\n wordBreak: 'break-word',\n overflow: 'hidden',\n verticalAlign: 'middle',\n lineHeight: '1',\n margin: 0,\n padding: theme.spacing(3, 2, 3, 2.5),\n borderBottom: 0,\n },\n '& th': {\n backgroundColor: theme.palette.background.paper,\n },\n '& tr': {\n backgroundColor: theme.palette.background.paper,\n },\n '& tr:nth-child(odd)': {\n backgroundColor: theme.palette.background.default,\n },\n\n '& a': {\n color: theme.palette.link,\n },\n '& img': {\n maxWidth: '100%',\n },\n },\n }),\n { name: 'BackstageMarkdownContent' },\n);\n\ntype Props = {\n content: string;\n dialect?: 'gfm' | 'common-mark';\n linkTarget?: Options['linkTarget'];\n transformLinkUri?: (href: string) => string;\n transformImageUri?: (href: string) => string;\n className?: string;\n};\n\nconst flatten = (text: string, child: any): string => {\n if (!child) return text;\n\n return typeof child === 'string'\n ? text + child\n : React.Children.toArray(child.props.children).reduce(flatten, text);\n};\n\nconst headingRenderer = ({ level, children }: HeadingProps) => {\n const childrenArray = React.Children.toArray(children);\n const text = childrenArray.reduce(flatten, '');\n const slug = text.toLocaleLowerCase('en-US').replace(/\\W/g, '-');\n return React.createElement(`h${level}`, { id: slug }, children);\n};\n\nconst components: Options['components'] = {\n code: ({ inline, className, children, ...props }) => {\n const text = String(children).replace(/\\n+$/, '');\n const match = /language-(\\w+)/.exec(className || '');\n return !inline && match ? (\n <CodeSnippet language={match[1]} text={text} />\n ) : (\n <code className={className} {...props}>\n {children}\n </code>\n );\n },\n h1: headingRenderer,\n h2: headingRenderer,\n h3: headingRenderer,\n h4: headingRenderer,\n h5: headingRenderer,\n h6: headingRenderer,\n};\n\n/**\n * Renders markdown with the default dialect {@link https://github.github.com/gfm/ | gfm - GitHub flavored Markdown} to backstage theme styled HTML.\n *\n * @remarks\n * If you just want to render to plain {@link https://commonmark.org/ | CommonMark}, set the dialect to `'common-mark'`\n */\nexport function MarkdownContent(props: Props) {\n const {\n content,\n dialect = 'gfm',\n linkTarget,\n transformLinkUri,\n transformImageUri,\n className,\n } = props;\n const classes = useStyles();\n return (\n <ReactMarkdown\n remarkPlugins={dialect === 'gfm' ? [gfm] : []}\n className={`${classes.markdown} ${className ?? ''}`.trim()}\n children={content}\n components={components}\n linkTarget={linkTarget}\n transformLinkUri={transformLinkUri}\n transformImageUri={transformImageUri}\n />\n );\n}\n"],"names":["React"],"mappings":"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"}
1
+ {"version":3,"file":"MarkdownContent.esm.js","sources":["../../../src/components/MarkdownContent/MarkdownContent.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 { makeStyles } from '@material-ui/core/styles';\nimport ReactMarkdown, { Options } from 'react-markdown';\nimport gfm from 'remark-gfm';\nimport React from 'react';\nimport { CodeSnippet } from '../CodeSnippet';\nimport { HeadingProps } from 'react-markdown/lib/ast-to-react';\n\nexport type MarkdownContentClassKey = 'markdown';\n\nconst useStyles = makeStyles(\n theme => ({\n markdown: {\n '& table': {\n borderCollapse: 'collapse',\n border: `1px solid ${theme.palette.border}`,\n },\n '& th, & td': {\n border: `1px solid ${theme.palette.border}`,\n padding: theme.spacing(1),\n },\n '& td': {\n wordBreak: 'break-word',\n overflow: 'hidden',\n verticalAlign: 'middle',\n lineHeight: '1',\n margin: 0,\n padding: theme.spacing(3, 2, 3, 2.5),\n borderBottom: 0,\n },\n '& th': {\n backgroundColor: theme.palette.background.paper,\n },\n '& tr': {\n backgroundColor: theme.palette.background.paper,\n },\n '& tr:nth-child(odd)': {\n backgroundColor: theme.palette.background.default,\n },\n\n '& a': {\n color: theme.palette.link,\n },\n '& img': {\n maxWidth: '100%',\n },\n },\n }),\n { name: 'BackstageMarkdownContent' },\n);\n\ntype Props = {\n content: string;\n dialect?: 'gfm' | 'common-mark';\n linkTarget?: Options['linkTarget'];\n transformLinkUri?: (href: string) => string;\n transformImageUri?: (href: string) => string;\n className?: string;\n};\n\nconst flatten = (text: string, child: any): string => {\n if (!child) return text;\n\n return typeof child === 'string'\n ? text + child\n : React.Children.toArray(child.props.children).reduce(flatten, text);\n};\n\nconst headingRenderer = ({ level, children }: HeadingProps) => {\n const childrenArray = React.Children.toArray(children);\n const text = childrenArray.reduce(flatten, '');\n const slug = text.toLocaleLowerCase('en-US').replace(/\\W/g, '-');\n return React.createElement(`h${level}`, { id: slug }, children);\n};\n\nconst components: Options['components'] = {\n code: ({ inline, className, children, ...props }) => {\n const text = String(children).replace(/\\n+$/, '');\n const match = /language-(\\w+)/.exec(className || '');\n return !inline && match ? (\n <CodeSnippet language={match[1]} text={text} />\n ) : (\n <code className={className} {...props}>\n {children}\n </code>\n );\n },\n h1: headingRenderer,\n h2: headingRenderer,\n h3: headingRenderer,\n h4: headingRenderer,\n h5: headingRenderer,\n h6: headingRenderer,\n};\n\n/**\n * Renders markdown with the default dialect {@link https://github.github.com/gfm/ | gfm - GitHub flavored Markdown} to backstage theme styled HTML.\n *\n * @remarks\n * If you just want to render to plain {@link https://commonmark.org/ | CommonMark}, set the dialect to `'common-mark'`\n */\nexport function MarkdownContent(props: Props) {\n const {\n content,\n dialect = 'gfm',\n linkTarget,\n transformLinkUri,\n transformImageUri,\n className,\n } = props;\n const classes = useStyles();\n return (\n <ReactMarkdown\n remarkPlugins={dialect === 'gfm' ? [gfm] : []}\n className={`${classes.markdown} ${className ?? ''}`.trim()}\n children={content}\n components={components}\n linkTarget={linkTarget}\n transformLinkUri={transformLinkUri}\n transformImageUri={transformImageUri}\n />\n );\n}\n"],"names":["React"],"mappings":"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"}
@@ -169,7 +169,7 @@ function SelectComponent(props) {
169
169
  getContentAnchorEl: null
170
170
  }
171
171
  },
172
- placeholder && !multiple && /* @__PURE__ */ React__default.createElement(MenuItem, { value: [] }, placeholder),
172
+ !!placeholder && !multiple && /* @__PURE__ */ React__default.createElement(MenuItem, { value: [] }, placeholder),
173
173
  native ? items && items.map((item) => /* @__PURE__ */ React__default.createElement("option", { value: item.value, key: item.value }, item.label)) : items && items.map((item) => /* @__PURE__ */ React__default.createElement(MenuItem, { key: item.value, value: item.value }, multiple && /* @__PURE__ */ React__default.createElement(
174
174
  Checkbox,
175
175
  {
@@ -1 +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":"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"}
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":"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"}
@@ -4,18 +4,14 @@ import { useTheme } from '@material-ui/core/styles';
4
4
 
5
5
  function color(data, theme) {
6
6
  const lastNum = data[data.length - 1];
7
- if (!lastNum)
8
- return void 0;
9
- if (lastNum >= 0.9)
10
- return theme.palette.status.ok;
11
- if (lastNum >= 0.5)
12
- return theme.palette.status.warning;
7
+ if (!lastNum) return void 0;
8
+ if (lastNum >= 0.9) return theme.palette.status.ok;
9
+ if (lastNum >= 0.5) return theme.palette.status.warning;
13
10
  return theme.palette.status.error;
14
11
  }
15
12
  function TrendLine(props) {
16
13
  const theme = useTheme();
17
- if (!props.data)
18
- return null;
14
+ if (!props.data) return null;
19
15
  return /* @__PURE__ */ React__default.createElement(Sparklines, { width: 120, height: 30, min: 0, max: 1, ...props }, props.title && /* @__PURE__ */ React__default.createElement("title", null, props.title), /* @__PURE__ */ React__default.createElement(SparklinesLine, { color: props.color ?? color(props.data, theme) }));
20
16
  }
21
17
 
@@ -1 +1 @@
1
- {"version":3,"file":"TrendLine.esm.js","sources":["../../../src/components/TrendLine/TrendLine.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 from 'react';\nimport {\n Sparklines,\n SparklinesLine,\n SparklinesLineProps,\n SparklinesProps,\n} from 'react-sparklines';\nimport { Theme, useTheme } from '@material-ui/core/styles';\n\nfunction color(data: number[], theme: Theme): string | undefined {\n const lastNum = data[data.length - 1];\n if (!lastNum) return undefined;\n if (lastNum >= 0.9) return theme.palette.status.ok;\n if (lastNum >= 0.5) return theme.palette.status.warning;\n return theme.palette.status.error;\n}\n\nexport function TrendLine(\n props: SparklinesProps &\n Pick<SparklinesLineProps, 'color'> & { title?: string },\n) {\n const theme = useTheme();\n\n if (!props.data) return null;\n return (\n <Sparklines width={120} height={30} min={0} max={1} {...props}>\n {props.title && <title>{props.title}</title>}\n <SparklinesLine color={props.color ?? color(props.data, theme)} />\n </Sparklines>\n );\n}\n"],"names":["React"],"mappings":";;;;AAyBA,SAAS,KAAA,CAAM,MAAgB,KAAkC,EAAA;AAC/D,EAAA,MAAM,OAAU,GAAA,IAAA,CAAK,IAAK,CAAA,MAAA,GAAS,CAAC,CAAA,CAAA;AACpC,EAAA,IAAI,CAAC,OAAA;AAAS,IAAO,OAAA,KAAA,CAAA,CAAA;AACrB,EAAA,IAAI,OAAW,IAAA,GAAA;AAAK,IAAO,OAAA,KAAA,CAAM,QAAQ,MAAO,CAAA,EAAA,CAAA;AAChD,EAAA,IAAI,OAAW,IAAA,GAAA;AAAK,IAAO,OAAA,KAAA,CAAM,QAAQ,MAAO,CAAA,OAAA,CAAA;AAChD,EAAO,OAAA,KAAA,CAAM,QAAQ,MAAO,CAAA,KAAA,CAAA;AAC9B,CAAA;AAEO,SAAS,UACd,KAEA,EAAA;AACA,EAAA,MAAM,QAAQ,QAAS,EAAA,CAAA;AAEvB,EAAA,IAAI,CAAC,KAAM,CAAA,IAAA;AAAM,IAAO,OAAA,IAAA,CAAA;AACxB,EAAA,uBACGA,cAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,KAAO,EAAA,GAAA,EAAK,MAAQ,EAAA,EAAA,EAAI,GAAK,EAAA,CAAA,EAAG,GAAK,EAAA,CAAA,EAAI,GAAG,KAAA,EAAA,EACrD,KAAM,CAAA,KAAA,oBAAUA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,IAAA,EAAO,KAAM,CAAA,KAAM,CACpC,kBAAAA,cAAA,CAAA,aAAA,CAAC,cAAe,EAAA,EAAA,KAAA,EAAO,KAAM,CAAA,KAAA,IAAS,KAAM,CAAA,KAAA,CAAM,IAAM,EAAA,KAAK,GAAG,CAClE,CAAA,CAAA;AAEJ;;;;"}
1
+ {"version":3,"file":"TrendLine.esm.js","sources":["../../../src/components/TrendLine/TrendLine.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 from 'react';\nimport {\n Sparklines,\n SparklinesLine,\n SparklinesLineProps,\n SparklinesProps,\n} from 'react-sparklines';\nimport { Theme, useTheme } from '@material-ui/core/styles';\n\nfunction color(data: number[], theme: Theme): string | undefined {\n const lastNum = data[data.length - 1];\n if (!lastNum) return undefined;\n if (lastNum >= 0.9) return theme.palette.status.ok;\n if (lastNum >= 0.5) return theme.palette.status.warning;\n return theme.palette.status.error;\n}\n\nexport function TrendLine(\n props: SparklinesProps &\n Pick<SparklinesLineProps, 'color'> & { title?: string },\n) {\n const theme = useTheme();\n\n if (!props.data) return null;\n return (\n <Sparklines width={120} height={30} min={0} max={1} {...props}>\n {props.title && <title>{props.title}</title>}\n <SparklinesLine color={props.color ?? color(props.data, theme)} />\n </Sparklines>\n );\n}\n"],"names":["React"],"mappings":";;;;AAyBA,SAAS,KAAA,CAAM,MAAgB,KAAkC,EAAA;AAC/D,EAAA,MAAM,OAAU,GAAA,IAAA,CAAK,IAAK,CAAA,MAAA,GAAS,CAAC,CAAA,CAAA;AACpC,EAAI,IAAA,CAAC,SAAgB,OAAA,KAAA,CAAA,CAAA;AACrB,EAAA,IAAI,OAAW,IAAA,GAAA,EAAY,OAAA,KAAA,CAAM,QAAQ,MAAO,CAAA,EAAA,CAAA;AAChD,EAAA,IAAI,OAAW,IAAA,GAAA,EAAY,OAAA,KAAA,CAAM,QAAQ,MAAO,CAAA,OAAA,CAAA;AAChD,EAAO,OAAA,KAAA,CAAM,QAAQ,MAAO,CAAA,KAAA,CAAA;AAC9B,CAAA;AAEO,SAAS,UACd,KAEA,EAAA;AACA,EAAA,MAAM,QAAQ,QAAS,EAAA,CAAA;AAEvB,EAAI,IAAA,CAAC,KAAM,CAAA,IAAA,EAAa,OAAA,IAAA,CAAA;AACxB,EAAA,uBACGA,cAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,KAAO,EAAA,GAAA,EAAK,MAAQ,EAAA,EAAA,EAAI,GAAK,EAAA,CAAA,EAAG,GAAK,EAAA,CAAA,EAAI,GAAG,KAAA,EAAA,EACrD,KAAM,CAAA,KAAA,oBAAUA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,IAAA,EAAO,KAAM,CAAA,KAAM,CACpC,kBAAAA,cAAA,CAAA,aAAA,CAAC,cAAe,EAAA,EAAA,KAAA,EAAO,KAAM,CAAA,KAAA,IAAS,KAAM,CAAA,KAAA,CAAM,IAAM,EAAA,KAAK,GAAG,CAClE,CAAA,CAAA;AAEJ;;;;"}
@@ -41,8 +41,7 @@ function HeaderTabs(props) {
41
41
  if (selectedIndex === void 0) {
42
42
  setSelectedTab(index);
43
43
  }
44
- if (onChange)
45
- onChange(index);
44
+ if (onChange) onChange(index);
46
45
  },
47
46
  [selectedIndex, onChange]
48
47
  );
@@ -1 +1 @@
1
- {"version":3,"file":"HeaderTabs.esm.js","sources":["../../../src/layout/HeaderTabs/HeaderTabs.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 { makeStyles } from '@material-ui/core/styles';\nimport TabUI, { TabProps } from '@material-ui/core/Tab';\nimport Tabs from '@material-ui/core/Tabs';\nimport React, { useCallback, useEffect, useState } from 'react';\nimport { Link } from '../../components/Link';\n\n// TODO(blam): Remove this implementation when the Tabs are ready\n// This is just a temporary solution to implementing tabs for now\n\n/** @public */\nexport type HeaderTabsClassKey =\n | 'tabsWrapper'\n | 'defaultTab'\n | 'selected'\n | 'tabRoot';\n\nconst useStyles = makeStyles(\n theme => ({\n tabsWrapper: {\n gridArea: 'pageSubheader',\n backgroundColor: theme.palette.background.paper,\n paddingLeft: theme.spacing(3),\n minWidth: 0,\n },\n defaultTab: {\n ...theme.typography.caption,\n padding: theme.spacing(3, 3),\n textTransform: 'uppercase',\n fontWeight: theme.typography.fontWeightBold,\n color: theme.palette.text.secondary,\n },\n selected: {\n color: theme.palette.text.primary,\n },\n tabRoot: {\n '&:hover': {\n backgroundColor: theme.palette.background.default,\n color: theme.palette.text.primary,\n },\n },\n }),\n { name: 'BackstageHeaderTabs' },\n);\n\nexport type Tab = {\n id: string;\n label: string;\n tabProps?: TabProps<React.ElementType, { component?: React.ElementType }>;\n};\n\ntype HeaderTabsProps = {\n tabs: Tab[];\n onChange?: (index: number) => void;\n selectedIndex?: number;\n};\n\n/**\n * Horizontal Tabs component\n *\n * @public\n *\n */\nexport function HeaderTabs(props: HeaderTabsProps) {\n const { tabs, onChange, selectedIndex } = props;\n const [selectedTab, setSelectedTab] = useState<number>(selectedIndex ?? 0);\n const styles = useStyles();\n\n const handleChange = useCallback(\n (_: React.ChangeEvent<{}>, index: number) => {\n if (selectedIndex === undefined) {\n setSelectedTab(index);\n }\n if (onChange) onChange(index);\n },\n [selectedIndex, onChange],\n );\n\n useEffect(() => {\n if (selectedIndex !== undefined) {\n setSelectedTab(selectedIndex);\n }\n }, [selectedIndex]);\n function removeLeadingSlash(path: string) {\n return path.replace(/^\\//, '');\n }\n return (\n <Box className={styles.tabsWrapper}>\n <Tabs\n indicatorColor=\"primary\"\n textColor=\"inherit\"\n variant=\"scrollable\"\n scrollButtons=\"auto\"\n aria-label=\"tabs\"\n onChange={handleChange}\n value={selectedTab}\n >\n {tabs.map((tab, index) => (\n <TabUI\n data-testid={`header-tab-${index}`}\n label={tab.label}\n key={tab.id}\n component={Link}\n to={removeLeadingSlash(tab.id)}\n value={index}\n className={styles.defaultTab}\n classes={{ selected: styles.selected, root: styles.tabRoot }}\n {...tab.tabProps}\n />\n ))}\n </Tabs>\n </Box>\n );\n}\n"],"names":["React"],"mappings":"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"}
1
+ {"version":3,"file":"HeaderTabs.esm.js","sources":["../../../src/layout/HeaderTabs/HeaderTabs.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 { makeStyles } from '@material-ui/core/styles';\nimport TabUI, { TabProps } from '@material-ui/core/Tab';\nimport Tabs from '@material-ui/core/Tabs';\nimport React, { useCallback, useEffect, useState } from 'react';\nimport { Link } from '../../components/Link';\n\n// TODO(blam): Remove this implementation when the Tabs are ready\n// This is just a temporary solution to implementing tabs for now\n\n/** @public */\nexport type HeaderTabsClassKey =\n | 'tabsWrapper'\n | 'defaultTab'\n | 'selected'\n | 'tabRoot';\n\nconst useStyles = makeStyles(\n theme => ({\n tabsWrapper: {\n gridArea: 'pageSubheader',\n backgroundColor: theme.palette.background.paper,\n paddingLeft: theme.spacing(3),\n minWidth: 0,\n },\n defaultTab: {\n ...theme.typography.caption,\n padding: theme.spacing(3, 3),\n textTransform: 'uppercase',\n fontWeight: theme.typography.fontWeightBold,\n color: theme.palette.text.secondary,\n },\n selected: {\n color: theme.palette.text.primary,\n },\n tabRoot: {\n '&:hover': {\n backgroundColor: theme.palette.background.default,\n color: theme.palette.text.primary,\n },\n },\n }),\n { name: 'BackstageHeaderTabs' },\n);\n\nexport type Tab = {\n id: string;\n label: string;\n tabProps?: TabProps<React.ElementType, { component?: React.ElementType }>;\n};\n\ntype HeaderTabsProps = {\n tabs: Tab[];\n onChange?: (index: number) => void;\n selectedIndex?: number;\n};\n\n/**\n * Horizontal Tabs component\n *\n * @public\n *\n */\nexport function HeaderTabs(props: HeaderTabsProps) {\n const { tabs, onChange, selectedIndex } = props;\n const [selectedTab, setSelectedTab] = useState<number>(selectedIndex ?? 0);\n const styles = useStyles();\n\n const handleChange = useCallback(\n (_: React.ChangeEvent<{}>, index: number) => {\n if (selectedIndex === undefined) {\n setSelectedTab(index);\n }\n if (onChange) onChange(index);\n },\n [selectedIndex, onChange],\n );\n\n useEffect(() => {\n if (selectedIndex !== undefined) {\n setSelectedTab(selectedIndex);\n }\n }, [selectedIndex]);\n function removeLeadingSlash(path: string) {\n return path.replace(/^\\//, '');\n }\n return (\n <Box className={styles.tabsWrapper}>\n <Tabs\n indicatorColor=\"primary\"\n textColor=\"inherit\"\n variant=\"scrollable\"\n scrollButtons=\"auto\"\n aria-label=\"tabs\"\n onChange={handleChange}\n value={selectedTab}\n >\n {tabs.map((tab, index) => (\n <TabUI\n data-testid={`header-tab-${index}`}\n label={tab.label}\n key={tab.id}\n component={Link}\n to={removeLeadingSlash(tab.id)}\n value={index}\n className={styles.defaultTab}\n classes={{ selected: styles.selected, root: styles.tabRoot }}\n {...tab.tabProps}\n />\n ))}\n </Tabs>\n </Box>\n );\n}\n"],"names":["React"],"mappings":"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"}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@backstage/core-components",
3
3
  "description": "Core components used by Backstage plugins and apps",
4
- "version": "0.14.8",
4
+ "version": "0.14.9-next.0",
5
5
  "publishConfig": {
6
6
  "access": "public"
7
7
  },
@@ -94,10 +94,10 @@
94
94
  "zod": "^3.22.4"
95
95
  },
96
96
  "devDependencies": {
97
- "@backstage/app-defaults": "^1.5.6",
98
- "@backstage/cli": "^0.26.7",
99
- "@backstage/core-app-api": "^1.12.6",
100
- "@backstage/test-utils": "^1.5.6",
97
+ "@backstage/app-defaults": "^1.5.7-next.0",
98
+ "@backstage/cli": "^0.26.10-next.0",
99
+ "@backstage/core-app-api": "^1.13.0-next.0",
100
+ "@backstage/test-utils": "^1.5.7-next.0",
101
101
  "@testing-library/dom": "^10.0.0",
102
102
  "@testing-library/jest-dom": "^6.0.0",
103
103
  "@testing-library/react": "^15.0.0",
@@ -1,6 +1,6 @@
1
1
  {
2
- "name": "@backstage/core-components",
3
- "version": "0.14.8",
2
+ "name": "@backstage/core-components__testutils",
3
+ "version": "0.14.9-next.0",
4
4
  "main": "../dist/testUtils.esm.js",
5
5
  "module": "../dist/testUtils.esm.js",
6
6
  "types": "../dist/testUtils.d.ts"