@scm-manager/ui-components 2.33.1-20220411-113741 → 2.34.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scm-manager/ui-components",
-  "version": "2.33.1-20220411-113741",
+  "version": "2.34.0",
   "description": "UI Components for SCM-Manager and its plugins",
   "main": "src/index.ts",
   "files": [
@@ -25,7 +25,7 @@
     "@scm-manager/jest-preset": "^2.13.0",
     "@scm-manager/prettier-config": "^2.10.1",
     "@scm-manager/tsconfig": "^2.13.0",
-    "@scm-manager/ui-tests": "^2.33.1-20220411-113741",
+    "@scm-manager/ui-tests": "^2.34.0",
     "@storybook/addon-actions": "^6.4.20",
     "@storybook/addon-essentials": "^6.4.20",
     "@storybook/addon-interactions": "^6.4.20",
@@ -64,9 +64,9 @@
   },
   "dependencies": {
     "@headlessui/react": "^1.4.3",
-    "@scm-manager/ui-api": "^2.33.1-20220411-113741",
-    "@scm-manager/ui-extensions": "^2.33.1-20220411-113741",
-    "@scm-manager/ui-types": "^2.33.1-20220411-113741",
+    "@scm-manager/ui-api": "^2.34.0",
+    "@scm-manager/ui-extensions": "^2.34.0",
+    "@scm-manager/ui-types": "^2.34.0",
     "classnames": "^2.2.6",
     "date-fns": "^2.4.1",
     "deepmerge": "^4.2.2",

package/src/Autocomplete.tsx

@@ -26,7 +26,7 @@ import classNames from "classnames";
 import { Async, AsyncCreatable } from "react-select";
 import { SelectValue } from "@scm-manager/ui-types";
 import LabelWithHelpIcon from "./forms/LabelWithHelpIcon";
-import { ValueType } from "react-select/lib/types";
+import { ActionMeta, ValueType } from "react-select/lib/types";
 
 type Props = {
   loadSuggestions: (p: string) => Promise<SelectValue[]>;
@@ -44,16 +44,16 @@ type Props = {
   disabled?: boolean;
 };
 
-type State = unknown;
+type State = {};
 
 class Autocomplete extends React.Component<Props, State> {
   static defaultProps = {
     placeholder: "Type here",
     loadingMessage: "Loading...",
-    noOptionsMessage: "No suggestion available",
+    noOptionsMessage: "No suggestion available"
   };
 
-  handleInputChange = (newValue: ValueType<SelectValue>) => {
+  handleInputChange = (newValue: ValueType<SelectValue>, action: ActionMeta) => {
     this.selectValue(newValue as SelectValue);
   };
 
@@ -64,10 +64,10 @@ class Autocomplete extends React.Component<Props, State> {
   // We overwrite this to avoid running into a bug (https://github.com/JedWatson/react-select/issues/2944)
   isValidNewOption = (
     inputValue: string,
-    _selectValue: ValueType<SelectValue>,
+    selectValue: ValueType<SelectValue>,
     selectOptions: readonly SelectValue[]
   ): boolean => {
-    const isNotDuplicated = !selectOptions.map((option) => option.label).includes(inputValue);
+    const isNotDuplicated = !selectOptions.map(option => option.label).includes(inputValue);
     const isNotEmpty = inputValue !== "";
     return isNotEmpty && isNotDuplicated;
   };
@@ -85,7 +85,7 @@ class Autocomplete extends React.Component<Props, State> {
       informationMessage,
       creatable,
       className,
-      disabled,
+      disabled
     } = this.props;
 
     const asyncProps = {
@@ -99,7 +99,7 @@ class Autocomplete extends React.Component<Props, State> {
       loadingMessage: () => loadingMessage,
       noOptionsMessage: () => noOptionsMessage,
       isDisabled: disabled,
-      "aria-label": helpText || label,
+      "aria-label": helpText || label
     };
 
     return (
@@ -110,13 +110,13 @@ class Autocomplete extends React.Component<Props, State> {
             <AsyncCreatable
               {...asyncProps}
               isValidNewOption={this.isValidNewOption}
-              onCreateOption={(newValue) => {
+              onCreateOption={newValue => {
                 this.selectValue({
                   label: newValue,
                   value: {
                     id: newValue,
-                    displayName: newValue,
-                  },
+                    displayName: newValue
+                  }
                 });
               }}
             />

package/src/BranchSelector.tsx

@@ -61,8 +61,8 @@ const BranchSelector: FC<Props> = ({ branches, onSelectBranch, selectedBranch, l
             <MinWidthControl className="control">
               <Select
                 className="is-fullwidth"
-                options={branches.map((b) => ({ label: b.name, value: b.name }))}
-                onChange={(branch) => onSelectBranch(branches.filter((b) => b.name === branch)[0])}
+                options={branches.map(b => ({ label: b.name, value: b.name }))}
+                onChange={branch => onSelectBranch(branches.filter(b => b.name === branch)[0])}
                 disabled={!!disabled}
                 value={selectedBranch}
                 addValueToOptions={true}

package/src/Breadcrumb.stories.tsx

@@ -49,8 +49,8 @@ const prefix = (
 );
 
 storiesOf("BreadCrumb", module)
-  .addDecorator((story) => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>)
-  .addDecorator((storyFn) => <Wrapper>{storyFn()}</Wrapper>)
+  .addDecorator(story => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>)
+  .addDecorator(storyFn => <Wrapper>{storyFn()}</Wrapper>)
   .add("Default", () => (
     <Breadcrumb
       repository={repository}

package/src/Breadcrumb.tsx

@@ -117,7 +117,7 @@ const BreadcrumbNode: FC<{ clickable: boolean; text: string; url: string; curren
   clickable,
   text,
   url,
-  current,
+  current
 }) => {
   if (clickable) {
     return (
@@ -144,7 +144,7 @@ const Breadcrumb: FC<Props> = ({
   sources,
   permalink,
   preButtons,
-  clickable = true,
+  clickable = true
 }) => {
   const location = useLocation();
   const history = useHistory();
@@ -231,7 +231,7 @@ const Breadcrumb: FC<Props> = ({
           </li>
           {pathSection()}
         </ul>
-        <PermaLinkWrapper tabIndex={0} onKeyDown={(e) => e.key === "Enter" && copySource()}>
+        <PermaLinkWrapper tabIndex={0} onKeyDown={e => e.key === "Enter" && copySource()}>
           {copying ? (
             <Icon name="spinner fa-spin" alt={t("breadcrumb.loading")} />
           ) : (
@@ -250,7 +250,7 @@ const Breadcrumb: FC<Props> = ({
     branch: branch ? branch : defaultBranch,
     path,
     sources,
-    repository,
+    repository
   };
 
   const renderExtensionPoints = () => {

package/src/CardColumnGroup.tsx

@@ -41,13 +41,13 @@ class CardColumnGroup extends React.Component<Props, State> {
   constructor(props: Props) {
     super(props);
     this.state = {
-      collapsed: false,
+      collapsed: false
     };
   }
 
   toggleCollapse = () => {
-    this.setState((prevState) => ({
-      collapsed: !prevState.collapsed,
+    this.setState(prevState => ({
+      collapsed: !prevState.collapsed
     }));
   };
 

package/src/ErrorBoundary.tsx

@@ -113,7 +113,7 @@ const ErrorDisplay: FC<ErrorDisplayProps> = ({ error, errorInfo, fallback: Fallb
 
   const fallbackProps = {
     error,
-    errorInfo,
+    errorInfo
   };
 
   return <FallbackComponent {...fallbackProps} />;
@@ -135,7 +135,7 @@ class ErrorBoundary extends React.Component<Props, State> {
   componentDidCatch(error: Error, errorInfo: ErrorInfo) {
     this.setState({
       error,
-      errorInfo,
+      errorInfo
     });
   }
 

package/src/Help.tsx

@@ -34,13 +34,18 @@ type Props = {
 };
 
 const Help: FC<Props> = ({ message, multiline, className, id }) => (
-  <Tooltip className={classNames("is-inline-block", "pl-1", className)} message={message} id={id} multiline={multiline}>
+  <Tooltip
+    className={classNames("is-inline-block", "pl-1", className)}
+    message={message}
+    id={id}
+    multiline={multiline}
+  >
     <HelpIcon />
   </Tooltip>
 );
 
 Help.defaultProps = {
-  multiline: true,
+  multiline: true
 };
 
 export default Help;

package/src/Icon.tsx

@@ -48,12 +48,12 @@ const Icon: FC<Props> = ({
   testId,
   tabIndex,
   onEnter,
-  alt = title,
+  alt = title
 }) => {
   return (
     <i
       onClick={onClick}
-      onKeyPress={(event) => event.key === "Enter" && onEnter && onEnter(event)}
+      onKeyPress={event => event.key === "Enter" && onEnter && onEnter(event)}
       title={title}
       className={classNames(iconStyle, "fa-fw", "fa-" + name, `has-text-${color}`, className)}
       tabIndex={tabIndex}

package/src/OverviewPageActions.tsx

@@ -54,7 +54,7 @@ const OverviewPageActions: FC<Props> = ({
   label,
   testId,
   searchPlaceholder,
-  groupAriaLabelledby,
+  groupAriaLabelledby
 }) => {
   const history = useHistory();
   const location = useLocation();
@@ -66,7 +66,7 @@ const OverviewPageActions: FC<Props> = ({
       <Select
         ariaLabelledby={groupAriaLabelledby}
         className="is-fullwidth"
-        options={groups.map((g) => ({ value: g, label: g }))}
+        options={groups.map(g => ({ value: g, label: g }))}
         value={currentGroup}
         onChange={groupSelected}
       />

package/src/Paginator.test.tsx

@@ -21,8 +21,9 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import { mount, shallow } from "@scm-manager/ui-tests";
 import React from "react";
+import { mount, shallow } from "@scm-manager/ui-tests/enzyme-router";
+import "@scm-manager/ui-tests/i18n";
 import Paginator from "./Paginator";
 
 xdescribe("paginator rendering tests", () => {

package/src/ProtectedRoute.tsx

@@ -37,12 +37,12 @@ class ProtectedRoute extends Component<Props> {
     };
   }
 
-  renderRoute = (MyComponent: any) => {
+  renderRoute = (Component: any) => {
     const { authenticated } = this.props;
 
-    return (routeProps: RouteProps) => {
-      if (authenticated && MyComponent) {
-        return <MyComponent {...routeProps} />;
+    return (routeProps: any) => {
+      if (authenticated) {
+        return <Component {...routeProps} />;
       } else {
         return (
           <Redirect

package/src/Tag.tsx

@@ -52,7 +52,7 @@ const Tag: FC<Props> = ({
   title,
   onClick,
   onRemove,
-  children,
+  children
 }) => {
   const [t] = useTranslation("commons");
 
@@ -81,7 +81,7 @@ const Tag: FC<Props> = ({
           {
             "is-outlined": outlined,
             "is-rounded": rounded,
-            "is-clickable": onClick,
+            "is-clickable": onClick
           },
           size === "small" && smallClassNames
         )}

package/src/Tooltip.tsx

@@ -92,7 +92,7 @@ const Arrow = {
   bottom: ArrowBottom,
   left: ArrowLeft,
   right: ArrowRight,
-  top: ArrowTop,
+  top: ArrowTop
 };
 
 const TooltipContainerBase = styled.div<{ multiline?: boolean }>`
@@ -136,7 +136,7 @@ const Container = {
   bottom: TooltipContainerBottom,
   left: TooltipContainerLeft,
   right: TooltipContainerRight,
-  top: TooltipContainerTop,
+  top: TooltipContainerTop
 };
 
 type Props = {

package/src/__resources__/SearchHit.ts

@@ -78,7 +78,6 @@ export const filenameXmlHit: Hit = {
     content: {
       highlighted: false,
       value:
-        // eslint-disable-next-line no-template-curly-in-string
         '<?xml version="1.0"?>\n<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">\n\n  <modelVersion>4.0.0</modelVersion>\n\n  <parent>\n    <artifactId>scm-clients</artifactId>\n    <groupId>sonia.scm.clients</groupId>\n    <version>2.0.0-SNAPSHOT</version>\n  </parent>\n\n  <artifactId>scm-cli-client</artifactId>\n  <version>2.0.0-SNAPSHOT</version>\n  <name>scm-cli-client</name>\n\n  <dependencies>\n\n    <!-- fix javadoc -->\n\n    <dependency>\n      <groupId>javax.servlet</groupId>\n      <artifactId>javax.servlet-api</artifactId>\n      <version>${servlet.version}</version>\n    </dependency>\n\n    <dependency>\n      <groupId>javax.transaction</groupId>\n      <artifactId>jta</artifactId>\n      <version>1.1</version>\n      <scope>provided</scope>\n    </dependency>\n\n    <dependency>\n      <groupId>sonia.scm.clients</groupId>\n      <artifactId>scm-client-impl</artifactId>\n      <version>2.0.0-SNAPSHOT</version>\n    </dependency>\n\n    <dependency>\n      <groupId>args4j</groupId>\n      <artifactId>args4j</artifactId>\n      <version>2.0.29</version>\n    </dependency>\n\n    <dependency>\n      <groupId>ch.qos.logback</groupId>\n      <artifactId>logback-classic</artifactId>\n      <version>${logback.version}</version>\n    </dependency>\n\n    <dependency>\n      <groupId>org.freemarker</groupId>\n      <artifactId>freemarker</artifactId>\n      <version>2.3.21</version>\n    </dependency>\n\n  </dependencies>\n\n  <build>\n    <plugins>\n\n      <plugin>\n        <groupId>com.mycila.maven-license-plugin</groupId>\n        <artifactId>maven-license-plugin</artifactId>\n        <version>1.9.0</version>\n        <configuration>\n          <header>http://download.scm-manager.org/licenses/mvn-license.txt</header>\n          <includes>\n            <include>src/**</include>\n            <include>**/test/**</include>\n          </includes>\n          <excludes>\n            <exclude>target/**</exclude>\n            <exclude>.hg/**</exclude>\n            <exclude>**/*.ftl</exclude>\n          </excludes>\n          <strictCheck>true</strictCheck>\n        </configuration>\n      </plugin>\n\n      <plugin>\n        <groupId>org.apache.maven.plugins</groupId>\n        <artifactId>maven-assembly-plugin</artifactId>\n        <version>2.3</version>\n        <configuration>\n          <archive>\n            <manifest>\n              <mainClass>sonia.scm.cli.App</mainClass>\n            </manifest>\n          </archive>\n          <descriptorRefs>\n            <descriptorRef>jar-with-dependencies</descriptorRef>\n          </descriptorRefs>\n        </configuration>\n        <executions>\n          <execution>\n            <phase>package</phase>\n            <goals>\n              <goal>single</goal>\n            </goals>\n          </execution>\n        </executions>\n      </plugin>\n\n    </plugins>\n  </build>\n\n  </project>\n',
     },
   },

package/src/__resources__/changesets.tsx

@@ -22,7 +22,7 @@
  * SOFTWARE.
  */
 
-import { Changeset, ChangesetCollection } from "@scm-manager/ui-types";
+import { Changeset, ChangesetCollection, PagedCollection } from "@scm-manager/ui-types";
 
 const one: Changeset = {
   id: "a88567ef1e9528a700555cad8c4576b72fc7c6dd",

package/src/buttons/Button.tsx

@@ -67,7 +67,7 @@ const Button: FC<InnerProps> = ({
   disabled,
   action,
   color = "default",
-  innerRef,
+  innerRef
 }) => {
   const renderIcon = () => {
     return (
@@ -119,7 +119,7 @@ const Button: FC<InnerProps> = ({
       type={type}
       title={title}
       disabled={disabled}
-      onClick={(event) => action && action(event)}
+      onClick={event => action && action(event)}
       className={classes}
       ref={innerRef}
       {...createAttributesForTesting(testId)}

package/src/buttons/DownloadButton.tsx

@@ -33,11 +33,11 @@ type Props = {
 class DownloadButton extends React.Component<Props> {
   render() {
     const { displayName, url, disabled, onClick } = this.props;
-    const onClickOrDefault = !!onClick ? onClick : () => null;
+    const onClickOrDefault = !!onClick ? onClick : () => {};
     return (
       <>
         {/*
-        we have to ignore the next line,
+        we have to ignore the next line, 
         because jsx a does not the custom disabled attribute
         but bulma does.
         // @ts-ignore */}

package/src/buttons/RemoveEntryOfTableButton.tsx

@@ -32,7 +32,7 @@ type Props = {
   label: string;
 };
 
-type State = unknown;
+type State = {};
 
 class RemoveEntryOfTableButton extends React.Component<Props, State> {
   render() {

package/src/comparators.test.ts

@@ -56,7 +56,7 @@ describe("key comparator tests", () => {
   });
 
   it("should not fail if item is undefined", () => {
-    const array: unknown[] = createObjects("key", ["a"]);
+    const array: any[] = createObjects("key", ["a"]);
     array.push(undefined);
     array.push(createObject("key", "z"));
     array.sort(byKey("key"));
@@ -86,7 +86,7 @@ describe("length comparator tests", () => {
   });
 
   it("should not fail if item is undefined", () => {
-    const array: unknown[] = createObjects("key", ["."]);
+    const array: any[] = createObjects("key", ["."]);
     array.push(undefined);
     array.push(createObject("key", ".."));
     array.sort(byValueLength("key"));
@@ -141,7 +141,7 @@ describe("nested key comparator tests", () => {
   });
 
   it("should not fail if item is undefined", () => {
-    const array: unknown[] = createObjects("key", "nested", ["a"]);
+    const array: any[] = createObjects("key", "nested", ["a"]);
     array.push(undefined);
     array.push(createObject("key", "nested", "z"));
     array.sort(byNestedKeys("key", "nested"));

package/src/config/Configuration.tsx

@@ -34,7 +34,7 @@ type RenderProps = {
 
 type Props = {
   link: string;
-  render: (props: RenderProps) => JSX.Element;
+  render: (props: RenderProps) => any; // ???
 };
 
 const Configuration: FC<Props> = ({ link, render }) => {

package/src/devBuild.ts

@@ -22,6 +22,7 @@
  * SOFTWARE.
  */
 
+// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
 // @ts-ignore scmStage is set on the index page
 export const isDevBuild = () => (window.scmStage || "").toUpperCase() === "DEVELOPMENT";
 

package/src/forms/AddKeyValueEntryToTableField.tsx

@@ -63,7 +63,7 @@ const AddKeyValueEntryToTableField: FC<Props> = ({
   valueHelpText,
   validateEntry,
   errorMessage,
-  addEntry,
+  addEntry
 }) => {
   const [key, setKey] = useState("");
   const [value, setValue] = useState("");

package/src/forms/FileInput.tsx

@@ -59,7 +59,7 @@ const FileInput: FC<Props> = ({
   const [file, setFile] = useState<File | null>(null);
 
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
-    const uploadedFile = event?.target.files?.[0];
+    const uploadedFile = event?.target?.files![0];
     // @ts-ignore the uploaded file doesn't match our types
     setFile(uploadedFile);
 

package/src/forms/FileUpload.tsx

@@ -44,7 +44,7 @@ const FileUpload: FC<Props> = ({ handleFile, filenamePlaceholder = "", disabled
           name="resume"
           disabled={disabled}
           onChange={(event: ChangeEvent<HTMLInputElement>) => {
-            const uploadedFile = event?.target?.files?.[0];
+            const uploadedFile = event?.target?.files![0];
             // @ts-ignore the uploaded file doesn't match our types
             setFile(uploadedFile);
             // @ts-ignore the uploaded file doesn't match our types

package/src/forms/FilterInput.tsx

@@ -74,7 +74,7 @@ const FilterInput: FC<Props> = ({ filter, value, testId, placeholder, autoFocus,
           type="search"
           placeholder={placeholder || t("filterEntries")}
           value={stateValue}
-          onChange={(event) => setStateValue(event.target.value)}
+          onChange={event => setStateValue(event.target.value)}
           autoFocus={autoFocus || false}
           aria-describedby={id}
           aria-label={t("filterEntries")}

package/src/forms/PasswordConfirmation.tsx

@@ -76,7 +76,7 @@ const PasswordConfirmation: FC<InnerProps> = ({ passwordChanged, passwordValidat
         <InputField
           label={t("password.newPassword")}
           type="password"
-          onChange={(event) => handlePasswordChange(event)}
+          onChange={event => handlePasswordChange(event)}
           value={password}
           validationError={!passwordValid}
           errorMessage={t("password.passwordInvalid")}

package/src/forms/Select.tsx

@@ -69,7 +69,7 @@ const InnerSelect: FC<FieldProps<BaseProps, HTMLSelectElement, string>> = ({
   const field = useInnerRef(props.innerRef);
 
   let opts = options;
-  if (value && addValueToOptions && !options.some((o) => o.value === value)) {
+  if (value && addValueToOptions && !options.some(o => o.value === value)) {
     opts = [{ label: value, value }, ...options];
   }
 
@@ -128,7 +128,7 @@ const InnerSelect: FC<FieldProps<BaseProps, HTMLSelectElement, string>> = ({
           aria-describedby={helpText ? helpId : undefined}
           {...createAttributesForTesting(testId)}
         >
-          {opts.map((opt) => {
+          {opts.map(opt => {
             return (
               <option value={opt.value} key={"KEY_" + opt.value}>
                 {opt.label}

package/src/forms/Textarea.stories.tsx

@@ -29,6 +29,7 @@ import Button from "../buttons/Button";
 import { useForm } from "react-hook-form";
 import { SubmitButton } from "../buttons";
 import { MemoryRouter } from "react-router-dom";
+import InputField from "./InputField";
 
 const Spacing = styled.div`
   padding: 2em;

package/src/languages.test.ts

@@ -44,4 +44,5 @@ describe("syntax highlighter", () => {
     const lang = determineLanguage("");
     expect(lang).toBe("text");
   });
+
 });

package/src/layout/Page.tsx

@@ -85,7 +85,7 @@ export default class Page extends React.Component<Props> {
 
     let pageActions = null;
     let pageActionsExists = false;
-    React.Children.forEach(children, (child) => {
+    React.Children.forEach(children, child => {
       if (child && !error) {
         if (this.isPageAction(child)) {
           pageActions = (
@@ -141,7 +141,7 @@ export default class Page extends React.Component<Props> {
     }
 
     const content: ReactNode[] = [];
-    React.Children.forEach(children, (child) => {
+    React.Children.forEach(children, child => {
       if (child) {
         if (!this.isPageAction(child)) {
           content.push(child);

package/src/markdown/LazyMarkdownView.tsx

@@ -100,13 +100,13 @@ class LazyMarkdownView extends React.Component<Props, State> {
 
   static defaultProps: Partial<Props> = {
     enableAnchorHeadings: false,
-    skipHtml: false,
+    skipHtml: false
   };
 
   constructor(props: Props) {
     super(props);
     this.state = {
-      contentRef: null,
+      contentRef: null
     };
   }
 
@@ -150,7 +150,7 @@ class LazyMarkdownView extends React.Component<Props, State> {
       basePath,
       permalink,
       t,
-      mdastPlugins = [],
+      mdastPlugins = []
     } = this.props;
 
     const rendererFactory = this.context.getExtension("markdown-renderer-factory");
@@ -207,25 +207,25 @@ class LazyMarkdownView extends React.Component<Props, State> {
         sanitize,
         merge(gh, {
           attributes: {
-            code: ["className"], // Allow className for code elements, this is necessary to extract the code language
+            code: ["className"] // Allow className for code elements, this is necessary to extract the code language
           },
           clobberPrefix: "", // Do not prefix user-provided ids and class names,
           protocols: {
-            href: Object.keys(protocolLinkRendererExtensions),
-          },
+            href: Object.keys(protocolLinkRendererExtensions)
+          }
         })
       )
       .use(rehype2react, {
         createElement: React.createElement,
         passNode: true,
-        components: createComponentList(remarkRendererList, { permalink }),
+        components: createComponentList(remarkRendererList, { permalink })
       });
 
     const renderedMarkdown: any = processor.processSync(content).result;
 
     return (
       <ErrorBoundary fallback={MarkdownErrorNotification}>
-        <div ref={(el) => this.setState({ contentRef: el })} className="content is-word-break">
+        <div ref={el => this.setState({ contentRef: el })} className="content is-word-break">
           {renderedMarkdown}
         </div>
       </ErrorBoundary>

package/src/markdown/MarkdownCodeRenderer.tsx

@@ -32,7 +32,7 @@ type Props = {
   value: string;
 };
 
-const MarkdownCodeRenderer: FC<Props> = (props) => {
+const MarkdownCodeRenderer: FC<Props> = props => {
   const binder = useBinder();
   const indexLinks = useIndexLinks();
   const { language } = props;

package/src/markdown/MarkdownHeadingRenderer.test.ts

@@ -22,6 +22,7 @@
  * SOFTWARE.
  */
 
+import React from "react";
 import { headingToAnchorId } from "./MarkdownHeadingRenderer";
 
 describe("headingToAnchorId tests", () => {