diff --git a/src/components/common/Autocomplete/Autocomplete.tsx b/src/components/common/Autocomplete/Autocomplete.tsx
index 8d257be4b73c5984c9982368eb11169f9b1a0de8..dfd33049d4f96df89a1a913f233fa19bd19d588b 100644
--- a/src/components/common/Autocomplete/Autocomplete.tsx
+++ b/src/components/common/Autocomplete/Autocomplete.tsx
@@ -6,7 +6,7 @@ import {
   AutocompleteProps as MuiAutocompleteProps
 } from "@mui/material";
 
-interface AutocompleteProps<Value> {
+export interface AutocompleteProps<Value> {
   loading: boolean;
   autocompleteProps: MuiAutocompleteProps<Value, false, true, false>;
   textFieldProps: TextFieldProps;
diff --git a/src/components/common/Autocomplete/index.ts b/src/components/common/Autocomplete/index.ts
index 6a44e8c4bde1f532c39ab82e3a7ca0b4be8586d2..81c4513aa7b0e0ea683d3ac0bc485684e80675ad 100644
--- a/src/components/common/Autocomplete/index.ts
+++ b/src/components/common/Autocomplete/index.ts
@@ -1,3 +1,3 @@
-import { Autocomplete } from "./Autocomplete";
+import { Autocomplete, type AutocompleteProps } from "./Autocomplete";
 
-export { Autocomplete };
+export { Autocomplete, type AutocompleteProps };
diff --git a/src/components/common/EllipsisText/EllipsisText.tsx b/src/components/common/EllipsisText/EllipsisText.tsx
index 66d90e17f65904712d39be6bdb8ef3aa66490199..fdcc56841de59275768d2d1e37bac1513441debc 100644
--- a/src/components/common/EllipsisText/EllipsisText.tsx
+++ b/src/components/common/EllipsisText/EllipsisText.tsx
@@ -1,21 +1,25 @@
-import { Tooltip, Typography } from "@mui/material";
-import { string, object, bool, node } from "prop-types";
+import {
+  Tooltip,
+  Typography,
+  TypographyProps,
+  TooltipProps
+} from "@mui/material";
+
+export interface EllipsisTextProps {
+  title?: string;
+  disableTooltip?: boolean;
+  TypographyProps?: TypographyProps;
+  TooltipProps?: TooltipProps;
+  children: string;
+}
 
-/**
- * Displays cutoff text with an ellipsis and a tooltip with the rest of the text.
- * @param {string} title text to display in the tooltip. The child element is used
- * by default so title is only necessary if the child is a React component.
- * @param {boolean} disableTooltip disables the tooltip feature.
- * @param {object} TypographyProps Additional props for the Typography component
- * @param {object} TooltipProps Additional props for the Tooltip component
- */
 export const EllipsisText = ({
   title,
   disableTooltip = false,
   TypographyProps,
   TooltipProps,
   children
-}) => {
+}: EllipsisTextProps) => {
   const renderedText = (
     <Typography
       noWrap
@@ -39,10 +43,3 @@ export const EllipsisText = ({
     </Tooltip>
   );
 };
-EllipsisText.propTypes = {
-  title: string,
-  disableTooltip: bool,
-  TypographyProps: object,
-  TooltipProps: object,
-  children: node
-};
diff --git a/src/components/common/EllipsisText/index.ts b/src/components/common/EllipsisText/index.ts
index 1b4eecea12b0971ce5f25c950044cc3ad9361967..e49d0561e8d9a0cc60e2178648a04aa8d3ea73a4 100644
--- a/src/components/common/EllipsisText/index.ts
+++ b/src/components/common/EllipsisText/index.ts
@@ -1,3 +1,3 @@
-import { EllipsisText } from "./EllipsisText";
+import { EllipsisText, type EllipsisTextProps } from "./EllipsisText";
 
-export { EllipsisText };
+export { EllipsisText, type EllipsisTextProps };
diff --git a/src/stories/common/EllipsisText/EllipsisText.stories.tsx b/src/stories/common/EllipsisText/EllipsisText.stories.tsx
index b8cde6973dbdee1a5cf4bb63ea9738d7fe7575c5..189ed9a037fb15f7bf2587ce7a33bd1238a75e2f 100644
--- a/src/stories/common/EllipsisText/EllipsisText.stories.tsx
+++ b/src/stories/common/EllipsisText/EllipsisText.stories.tsx
@@ -1,14 +1,23 @@
+import { ReactNode } from "react";
 import { Paper, Typography } from "@mui/material";
 import { MemoryRouter } from "react-router-dom";
-import { EllipsisText } from "../../../components/common/EllipsisText";
+import { Meta } from "@storybook/react";
+import {
+  EllipsisText,
+  EllipsisTextProps
+} from "../../../components/common/EllipsisText";
 import { ExternalLink, InternalLink } from "../../../components/common/Link";
 
 export default {
   title: "Common/EllipsisText",
   component: EllipsisText
-};
+} as Meta<typeof EllipsisText>;
+
+interface ContainerProps {
+  children: ReactNode;
+}
 
-const Container = ({ children }) => {
+const Container = ({ children }: ContainerProps) => {
   return (
     <Paper sx={{ height: "100vh", padding: 2 }}>
       <Typography>The following text is too long:</Typography>
@@ -28,17 +37,18 @@ const Container = ({ children }) => {
   );
 };
 
-const TextTemplate = ({ text, ...props }) => {
+const TextTemplate = ({ children, ...props }: EllipsisTextProps) => {
   return (
     <Container>
-      <EllipsisText {...props}>{text}</EllipsisText>
+      <EllipsisText {...props}>{children}</EllipsisText>
     </Container>
   );
 };
 
-export const Default = (args) => <TextTemplate {...args} />;
+export const Default = (args: EllipsisTextProps) => <TextTemplate {...args} />;
 Default.args = {
-  text: "There's some really important information here but it is obscured!",
+  children:
+    "There's some really important information here but it is obscured!",
   TypographyProps: {
     variant: "body2"
   },
@@ -48,44 +58,42 @@ Default.args = {
   }
 };
 
-const ExternalLinkTemplate = ({ text, ...props }) => {
+const ExternalLinkTemplate = ({ children, ...props }: EllipsisTextProps) => {
   return (
-    <MemoryRouter>
-      <Container>
-        <ExternalLink
-          to="https://europeanspallationsource.se/"
-          label={text}
-        >
-          <EllipsisText {...props}>{text}</EllipsisText>
-        </ExternalLink>
-      </Container>
-    </MemoryRouter>
+    <Container>
+      <ExternalLink
+        to="https://europeanspallationsource.se/"
+        label={children}
+      >
+        <EllipsisText {...props}>{children}</EllipsisText>
+      </ExternalLink>
+    </Container>
   );
 };
 
-export const ExternalLinkEllipsisText = (args) => (
+export const ExternalLinkEllipsisText = (args: EllipsisTextProps) => (
   <ExternalLinkTemplate {...args} />
 );
 ExternalLinkEllipsisText.args = {
   ...Default.args
 };
 
-const InternalLinkTemplate = ({ text, ...props }) => {
+const InternalLinkTemplate = ({ children, ...props }: EllipsisTextProps) => {
   return (
     <MemoryRouter>
       <Container>
         <InternalLink
           to="/"
-          label={text}
+          label={children}
         >
-          <EllipsisText {...props}>{text}</EllipsisText>
+          <EllipsisText {...props}>{children}</EllipsisText>
         </InternalLink>
       </Container>
     </MemoryRouter>
   );
 };
 
-export const InternalLinkEllipsisText = (args) => (
+export const InternalLinkEllipsisText = (args: EllipsisTextProps) => (
   <InternalLinkTemplate {...args} />
 );
 InternalLinkEllipsisText.args = {
diff --git a/src/stories/fields/Autocomplete.stories.tsx b/src/stories/fields/Autocomplete.stories.tsx
index c72ccca3d48ff708b948d20750c42b8045c83480..015a650726707c446c196b1d3d9eacd44c6c043c 100644
--- a/src/stories/fields/Autocomplete.stories.tsx
+++ b/src/stories/fields/Autocomplete.stories.tsx
@@ -25,13 +25,13 @@ const data = [
 ];
 
 interface AutocompleteProps {
-  loading?: boolean;
+  loading: boolean;
 }
 
 const Template = ({ loading, ...args }: AutocompleteProps) => {
   return (
     <Autocomplete
-      loading={loading || false}
+      loading={loading}
       autocompleteProps={{
         options: data,
         getOptionLabel: (option) => {
@@ -57,7 +57,12 @@ const Template = ({ loading, ...args }: AutocompleteProps) => {
   );
 };
 
-export const Default = (args: typeof Autocomplete) => <Template {...args} />;
+export const Default = (args: typeof Autocomplete) => (
+  <Template
+    loading={false}
+    {...args}
+  />
+);
 
 export const Loading = (args: typeof Autocomplete) => (
   <Template