@backstage/core-components 0.10.0 → 0.11.0-next.2

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @backstage/core-components
 
+## 0.11.0-next.2
+
+### Minor Changes
+
+- d0eefc499a: Made the `to` prop of `Button` and `Link` more strict, only supporting plain strings. It used to be the case that this prop was unexpectedly too liberal, making it look like we supported the complex `react-router-dom` object form of the parameter as well, which led to unexpected results at runtime.
+
+## 0.10.1-next.1
+
+### Patch Changes
+
+- a22af3edc8: Adding a `className` prop to the `MarkdownContent` component
+
+## 0.10.1-next.0
+
+### Patch Changes
+
+- Updated dependencies
+  - @backstage/core-plugin-api@1.0.5-next.0
+
 ## 0.10.0
 
 ### Minor Changes

package/dist/esm/{RealLogViewer-5b0c3451.esm.js → RealLogViewer-22a2ee94.esm.js}

@@ -20,33 +20,37 @@ import useCopyToClipboard from 'react-use/lib/useCopyToClipboard';
 
 const ansiRegex = ansiRegexMaker();
 const newlineRegex = /\n\r?/g;
-const codeModifiers = Object.fromEntries(Object.entries({
-  1: (m) => ({ ...m, bold: true }),
-  3: (m) => ({ ...m, italic: true }),
-  4: (m) => ({ ...m, underline: true }),
-  22: ({ bold: _, ...m }) => m,
-  23: ({ italic: _, ...m }) => m,
-  24: ({ underline: _, ...m }) => m,
-  30: (m) => ({ ...m, foreground: "black" }),
-  31: (m) => ({ ...m, foreground: "red" }),
-  32: (m) => ({ ...m, foreground: "green" }),
-  33: (m) => ({ ...m, foreground: "yellow" }),
-  34: (m) => ({ ...m, foreground: "blue" }),
-  35: (m) => ({ ...m, foreground: "magenta" }),
-  36: (m) => ({ ...m, foreground: "cyan" }),
-  37: (m) => ({ ...m, foreground: "white" }),
-  39: ({ foreground: _, ...m }) => m,
-  90: (m) => ({ ...m, foreground: "grey" }),
-  40: (m) => ({ ...m, background: "black" }),
-  41: (m) => ({ ...m, background: "red" }),
-  42: (m) => ({ ...m, background: "green" }),
-  43: (m) => ({ ...m, background: "yellow" }),
-  44: (m) => ({ ...m, background: "blue" }),
-  45: (m) => ({ ...m, background: "magenta" }),
-  46: (m) => ({ ...m, background: "cyan" }),
-  47: (m) => ({ ...m, background: "white" }),
-  49: ({ background: _, ...m }) => m
-}).map(([code, modifier]) => [`\x1B[${code}m`, modifier]));
+const codeModifiers = Object.fromEntries(
+  Object.entries({
+    1: (m) => ({ ...m, bold: true }),
+    3: (m) => ({ ...m, italic: true }),
+    4: (m) => ({ ...m, underline: true }),
+    22: ({ bold: _, ...m }) => m,
+    23: ({ italic: _, ...m }) => m,
+    24: ({ underline: _, ...m }) => m,
+    30: (m) => ({ ...m, foreground: "black" }),
+    31: (m) => ({ ...m, foreground: "red" }),
+    32: (m) => ({ ...m, foreground: "green" }),
+    33: (m) => ({ ...m, foreground: "yellow" }),
+    34: (m) => ({ ...m, foreground: "blue" }),
+    35: (m) => ({ ...m, foreground: "magenta" }),
+    36: (m) => ({ ...m, foreground: "cyan" }),
+    37: (m) => ({ ...m, foreground: "white" }),
+    39: ({ foreground: _, ...m }) => m,
+    90: (m) => ({ ...m, foreground: "grey" }),
+    40: (m) => ({ ...m, background: "black" }),
+    41: (m) => ({ ...m, background: "red" }),
+    42: (m) => ({ ...m, background: "green" }),
+    43: (m) => ({ ...m, background: "yellow" }),
+    44: (m) => ({ ...m, background: "blue" }),
+    45: (m) => ({ ...m, background: "magenta" }),
+    46: (m) => ({ ...m, background: "cyan" }),
+    47: (m) => ({ ...m, background: "white" }),
+    49: ({ background: _, ...m }) => m
+  }).map(
+    ([code, modifier]) => [`\x1B[${code}m`, modifier]
+  )
+);
 class AnsiLine {
   constructor(lineNumber = 1, chunks = []) {
     this.lineNumber = lineNumber;
@@ -77,7 +81,10 @@ class AnsiProcessor {
       for (; ; ) {
         const match = newlineRegex.exec(text);
         if (!match) {
-          const chunks2 = this.processText(text.slice(prevIndex), currentModifiers);
+          const chunks2 = this.processText(
+            text.slice(prevIndex),
+            currentModifiers
+          );
           lines.push(new AnsiLine(currentLineNumber, chunks2));
           return lines;
         }
@@ -123,7 +130,11 @@ class AnsiProcessor {
       const lastLineIndex = this.lines.length > 0 ? this.lines.length - 1 : 0;
       const lastLine = (_a = this.lines[lastLineIndex]) != null ? _a : new AnsiLine();
       const lastChunk = lastLine.lastChunk();
-      const newLines = this.processLines(((_b = lastChunk == null ? void 0 : lastChunk.text) != null ? _b : "") + text.slice(this.text.length), lastChunk == null ? void 0 : lastChunk.modifiers, lastLine == null ? void 0 : lastLine.lineNumber);
+      const newLines = this.processLines(
+        ((_b = lastChunk == null ? void 0 : lastChunk.text) != null ? _b : "") + text.slice(this.text.length),
+        lastChunk == null ? void 0 : lastChunk.modifiers,
+        lastLine == null ? void 0 : lastLine.lineNumber
+      );
       lastLine.replaceLastChunk((_c = newLines[0]) == null ? void 0 : _c.chunks);
       this.lines[lastLineIndex] = lastLine;
       this.lines.push(...newLines.slice(1));
@@ -136,115 +147,118 @@ class AnsiProcessor {
 }
 
 const HEADER_SIZE = 40;
-const useStyles = makeStyles((theme) => ({
-  root: {
-    background: theme.palette.background.paper
-  },
-  header: {
-    height: HEADER_SIZE,
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "flex-end"
-  },
-  log: {
-    fontFamily: '"Monaco", monospace',
-    fontSize: theme.typography.pxToRem(12)
-  },
-  line: {
-    position: "relative",
-    whiteSpace: "pre",
-    "&:hover": {
-      background: theme.palette.action.hover
-    }
-  },
-  lineSelected: {
-    background: theme.palette.action.selected,
-    "&:hover": {
-      background: theme.palette.action.selected
+const useStyles = makeStyles(
+  (theme) => ({
+    root: {
+      background: theme.palette.background.paper
+    },
+    header: {
+      height: HEADER_SIZE,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "flex-end"
+    },
+    log: {
+      fontFamily: '"Monaco", monospace',
+      fontSize: theme.typography.pxToRem(12)
+    },
+    line: {
+      position: "relative",
+      whiteSpace: "pre",
+      "&:hover": {
+        background: theme.palette.action.hover
+      }
+    },
+    lineSelected: {
+      background: theme.palette.action.selected,
+      "&:hover": {
+        background: theme.palette.action.selected
+      }
+    },
+    lineCopyButton: {
+      position: "absolute",
+      paddingTop: 0,
+      paddingBottom: 0
+    },
+    lineNumber: {
+      display: "inline-block",
+      textAlign: "end",
+      width: 60,
+      marginRight: theme.spacing(1),
+      cursor: "pointer"
+    },
+    textHighlight: {
+      background: alpha(theme.palette.info.main, 0.15)
+    },
+    textSelectedHighlight: {
+      background: alpha(theme.palette.info.main, 0.4)
+    },
+    modifierBold: {
+      fontWeight: theme.typography.fontWeightBold
+    },
+    modifierItalic: {
+      fontStyle: "italic"
+    },
+    modifierUnderline: {
+      textDecoration: "underline"
+    },
+    modifierForegroundBlack: {
+      color: colors.common.black
+    },
+    modifierForegroundRed: {
+      color: colors.red[500]
+    },
+    modifierForegroundGreen: {
+      color: colors.green[500]
+    },
+    modifierForegroundYellow: {
+      color: colors.yellow[500]
+    },
+    modifierForegroundBlue: {
+      color: colors.blue[500]
+    },
+    modifierForegroundMagenta: {
+      color: colors.purple[500]
+    },
+    modifierForegroundCyan: {
+      color: colors.cyan[500]
+    },
+    modifierForegroundWhite: {
+      color: colors.common.white
+    },
+    modifierForegroundGrey: {
+      color: colors.grey[500]
+    },
+    modifierBackgroundBlack: {
+      background: colors.common.black
+    },
+    modifierBackgroundRed: {
+      background: colors.red[500]
+    },
+    modifierBackgroundGreen: {
+      background: colors.green[500]
+    },
+    modifierBackgroundYellow: {
+      background: colors.yellow[500]
+    },
+    modifierBackgroundBlue: {
+      background: colors.blue[500]
+    },
+    modifierBackgroundMagenta: {
+      background: colors.purple[500]
+    },
+    modifierBackgroundCyan: {
+      background: colors.cyan[500]
+    },
+    modifierBackgroundWhite: {
+      background: colors.common.white
+    },
+    modifierBackgroundGrey: {
+      background: colors.grey[500]
     }
-  },
-  lineCopyButton: {
-    position: "absolute",
-    paddingTop: 0,
-    paddingBottom: 0
-  },
-  lineNumber: {
-    display: "inline-block",
-    textAlign: "end",
-    width: 60,
-    marginRight: theme.spacing(1),
-    cursor: "pointer"
-  },
-  textHighlight: {
-    background: alpha(theme.palette.info.main, 0.15)
-  },
-  textSelectedHighlight: {
-    background: alpha(theme.palette.info.main, 0.4)
-  },
-  modifierBold: {
-    fontWeight: theme.typography.fontWeightBold
-  },
-  modifierItalic: {
-    fontStyle: "italic"
-  },
-  modifierUnderline: {
-    textDecoration: "underline"
-  },
-  modifierForegroundBlack: {
-    color: colors.common.black
-  },
-  modifierForegroundRed: {
-    color: colors.red[500]
-  },
-  modifierForegroundGreen: {
-    color: colors.green[500]
-  },
-  modifierForegroundYellow: {
-    color: colors.yellow[500]
-  },
-  modifierForegroundBlue: {
-    color: colors.blue[500]
-  },
-  modifierForegroundMagenta: {
-    color: colors.purple[500]
-  },
-  modifierForegroundCyan: {
-    color: colors.cyan[500]
-  },
-  modifierForegroundWhite: {
-    color: colors.common.white
-  },
-  modifierForegroundGrey: {
-    color: colors.grey[500]
-  },
-  modifierBackgroundBlack: {
-    background: colors.common.black
-  },
-  modifierBackgroundRed: {
-    background: colors.red[500]
-  },
-  modifierBackgroundGreen: {
-    background: colors.green[500]
-  },
-  modifierBackgroundYellow: {
-    background: colors.yellow[500]
-  },
-  modifierBackgroundBlue: {
-    background: colors.blue[500]
-  },
-  modifierBackgroundMagenta: {
-    background: colors.purple[500]
-  },
-  modifierBackgroundCyan: {
-    background: colors.cyan[500]
-  },
-  modifierBackgroundWhite: {
-    background: colors.common.white
-  },
-  modifierBackgroundGrey: {
-    background: colors.grey[500]
-  }
-}), { name: "BackstageLogViewer" });
+  }),
+  { name: "BackstageLogViewer" }
+);
 
 function getModifierClasses(classes, modifiers) {
   const classNames = new Array();
@@ -258,11 +272,15 @@ function getModifierClasses(classes, modifiers) {
     classNames.push(classes.modifierUnderline);
   }
   if (modifiers.foreground) {
-    const key = `modifierForeground${startCase(modifiers.foreground)}`;
+    const key = `modifierForeground${startCase(
+      modifiers.foreground
+    )}`;
     classNames.push(classes[key]);
   }
   if (modifiers.background) {
-    const key = `modifierBackground${startCase(modifiers.background)}`;
+    const key = `modifierBackground${startCase(
+      modifiers.background
+    )}`;
     classNames.push(classes[key]);
   }
   return classNames.length > 0 ? classNames.join(" ") : void 0;
@@ -342,11 +360,20 @@ function LogLine({
   searchText,
   highlightResultIndex
 }) {
-  const chunks = useMemo(() => calculateHighlightedChunks(line, searchText), [line, searchText]);
-  const elements = useMemo(() => chunks.map(({ text, modifiers, highlight }, index) => /* @__PURE__ */ React.createElement("span", {
-    key: index,
-    className: classNames(getModifierClasses(classes, modifiers), highlight !== void 0 && (highlight === highlightResultIndex ? classes.textSelectedHighlight : classes.textHighlight))
-  }, text)), [chunks, highlightResultIndex, classes]);
+  const chunks = useMemo(
+    () => calculateHighlightedChunks(line, searchText),
+    [line, searchText]
+  );
+  const elements = useMemo(
+    () => chunks.map(({ text, modifiers, highlight }, index) => /* @__PURE__ */ React.createElement("span", {
+      key: index,
+      className: classNames(
+        getModifierClasses(classes, modifiers),
+        highlight !== void 0 && (highlight === highlightResultIndex ? classes.textSelectedHighlight : classes.textHighlight)
+      )
+    }, text)),
+    [chunks, highlightResultIndex, classes]
+  );
   return /* @__PURE__ */ React.createElement(React.Fragment, null, elements);
 }
 
@@ -421,7 +448,10 @@ function useLogViewerSearch(lines) {
   const searchText = searchInput.toLocaleLowerCase("en-US");
   const [resultIndex, setResultIndex] = useState(0);
   const [shouldFilter, toggleShouldFilter] = useToggle(false);
-  const filter = useMemo(() => applySearchFilter(lines, searchText), [lines, searchText]);
+  const filter = useMemo(
+    () => applySearchFilter(lines, searchText),
+    [lines, searchText]
+  );
   const searchResult = filter.results ? filter.results[Math.min(resultIndex, filter.results.length - 1)] : void 0;
   const resultCount = (_a = filter.results) == null ? void 0 : _a.length;
   const resultIndexStep = (decrement) => {
@@ -475,9 +505,13 @@ function useLogViewerSelection(lines) {
     },
     setSelection(line, add) {
       if (add) {
-        setSelection((s) => s ? { start: s.start, end: line } : { start: line, end: line });
+        setSelection(
+          (s) => s ? { start: s.start, end: line } : { start: line, end: line }
+        );
       } else {
-        setSelection((s) => (s == null ? void 0 : s.start) === line && (s == null ? void 0 : s.end) === line ? void 0 : { start: line, end: line });
+        setSelection(
+          (s) => (s == null ? void 0 : s.start) === line && (s == null ? void 0 : s.end) === line ? void 0 : { start: line, end: line }
+        );
       }
     },
     copySelection() {
@@ -559,4 +593,4 @@ function RealLogViewer(props) {
 }
 
 export { RealLogViewer };
-//# sourceMappingURL=RealLogViewer-5b0c3451.esm.js.map
+//# sourceMappingURL=RealLogViewer-22a2ee94.esm.js.map