@ndla/ui 3.3.13 → 3.3.17

package/src/Frontpage/FrontpageToolbox.tsx

@@ -3,7 +3,6 @@ import styled from '@emotion/styled';
 import { WithTranslation, withTranslation } from 'react-i18next';
 import { spacing, breakpoints, mq } from '@ndla/core';
 import { SafeLinkButton } from '@ndla/safelink';
-// @ts-ignore
 import SectionHeading from '../SectionHeading';
 import ComponentCursor from '../ComponentCursor';
 import { ToolboxIllustration as Illustration } from './illustrations/FrontpageIllustrations';
@@ -47,7 +46,7 @@ type Props = {
   urlTeachers: string;
 };
 
-const FrontpageToolbox: React.FunctionComponent<Props & WithTranslation> = ({ urlStudents, urlTeachers, t }) => (
+const FrontpageToolbox = ({ urlStudents, urlTeachers, t }: Props & WithTranslation) => (
   <StyledSection>
     <ComponentCursor variant="left" text={t('frontPageToolbox.cursorText')} />
     <SectionHeading large>{t('frontPageToolbox.heading')}</SectionHeading>

package/src/Frontpage/illustrations/Fellesfag.tsx

@@ -8,7 +8,7 @@
 
 import React from 'react';
 
-const Illustration: React.FunctionComponent = () => (
+const Illustration = () => (
   <svg width="90px" height="90px" viewBox="0 0 90 90" version="1.1" xmlns="http://www.w3.org/2000/svg">
     <g id="Artboard" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
       <path

package/src/Frontpage/illustrations/FrontpageHeaderIllustration.tsx

@@ -8,7 +8,7 @@
 
 import React from 'react';
 
-const FrontpageHeaderIllustration: React.FunctionComponent = () => (
+const FrontpageHeaderIllustration = () => (
   <svg width="482" height="68" viewBox="68 48 779 100" xmlns="http://www.w3.org/2000/svg">
     <style>
       {

package/src/Frontpage/illustrations/FrontpageSubjectIllustration.tsx

@@ -14,7 +14,7 @@ const cssStyle = css`
   z-index: 1;
 `;
 
-const FrontpageSubjectIllustration: React.FunctionComponent = () => (
+const FrontpageSubjectIllustration = () => (
   <svg css={cssStyle} viewBox="0 0 837 194" version="1.1" xmlns="http://www.w3.org/2000/svg">
     <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
       <g transform="translate(12.000000, 22.000000)" stroke="#000000">

package/src/Frontpage/illustrations/MenuFellesfag.tsx

@@ -8,7 +8,7 @@
 
 import React from 'react';
 
-const Illustration: React.FunctionComponent = () => (
+const Illustration = () => (
   <svg width="940px" height="175px" viewBox="0 0 940 175" version="1.1" xmlns="http://www.w3.org/2000/svg">
     <g id="MenuOpen3" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
       <g id="Group" transform="translate(-0.655172, 9.000000)" stroke="#000000">

package/src/Frontpage/illustrations/MenuStudiespesialiserende.tsx

@@ -8,7 +8,7 @@
 
 import React from 'react';
 
-const Illustration: React.FunctionComponent = () => (
+const Illustration = () => (
   <svg width="940px" height="175px" viewBox="0 0 940 175" version="1.1" xmlns="http://www.w3.org/2000/svg">
     <g id="MenuOpen1" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
       <path

package/src/Frontpage/illustrations/MenuYrkesfag.tsx

@@ -8,7 +8,7 @@
 
 import React from 'react';
 
-const Illustration: React.FunctionComponent = () => (
+const Illustration = () => (
   <svg width="940px" height="175px" viewBox="0 0 940 175" version="1.1" xmlns="http://www.w3.org/2000/svg">
     <g id="MenuOpen2" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
       <path

package/src/Frontpage/illustrations/Studiespesialiserende.tsx

@@ -8,7 +8,7 @@
 
 import React from 'react';
 
-const Illustration: React.FunctionComponent = () => (
+const Illustration = () => (
   <svg width="90px" height="90px" viewBox="0 0 90 90" version="1.1" xmlns="http://www.w3.org/2000/svg">
     <g id="Artboard" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
       <path

package/src/Frontpage/illustrations/Yrkesfag.tsx

@@ -8,7 +8,7 @@
 
 import React from 'react';
 
-const Illustration: React.FunctionComponent = () => (
+const Illustration = () => (
   <svg width="90px" height="90px" viewBox="0 0 90 90" version="1.1" xmlns="http://www.w3.org/2000/svg">
     <g id="Artboard" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
       <path

package/src/LanguageSelector/LanguageSelector.tsx

@@ -13,7 +13,6 @@ import FocusTrapReact from 'focus-trap-react';
 // @ts-ignore
 import Button, { appearances } from '@ndla/button';
 import { spacing, misc, colors, mq, breakpoints, animations, fonts, spacingUnit } from '@ndla/core';
-// @ts-ignore
 import { ChevronDown } from '@ndla/icons/common';
 import { useTranslation } from 'react-i18next';
 import LanguageSelectorContent from './LanguageSelectorContent';

package/src/LearningPaths/LearningPathContent.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React from 'react';
+import React, { ReactNode } from 'react';
 import styled from '@emotion/styled';
 import { mq, breakpoints, colors, spacing, spacingUnit } from '@ndla/core';
 
@@ -27,9 +27,7 @@ const StyledContent = styled.div`
 `;
 
 interface Props {
-  children: React.ReactNode;
+  children: ReactNode;
 }
 
-export const LearningPathContent: React.FunctionComponent<Props> = ({ children }) => (
-  <StyledContent>{children}</StyledContent>
-);
+export const LearningPathContent = ({ children }: Props) => <StyledContent>{children}</StyledContent>;

package/src/LearningPaths/LearningPathInformation.tsx

@@ -61,12 +61,7 @@ interface Props {
   };
 }
 
-export const LearningPathInformation: React.FunctionComponent<Props> = ({
-  description,
-  title,
-  license,
-  invertedStyle,
-}) => (
+export const LearningPathInformation = ({ description, title, license, invertedStyle }: Props) => (
   <section className="o-wrapper">
     <StyledWrapper invertedStyle={invertedStyle} className="c-article">
       <div>

package/src/LearningPaths/LearningPathLastStepNavigation.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React from 'react';
+import React, { ReactNode } from 'react';
 import styled from '@emotion/styled';
 import { css } from '@emotion/core';
 import SafeLink from '@ndla/safelink';
@@ -39,7 +39,7 @@ const OneColumnCss = css`
 `;
 
 interface Props {
-  children: React.ReactNode;
+  children: ReactNode;
   subject?: {
     name: string;
     url: string;
@@ -51,13 +51,7 @@ interface Props {
   learningPathName: string;
 }
 
-const LearningPathLastStepNavigation: React.FunctionComponent<Props & WithTranslation> = ({
-  subject,
-  topic,
-  learningPathName,
-  children,
-  t,
-}) => (
+const LearningPathLastStepNavigation = ({ subject, topic, learningPathName, children, t }: Props & WithTranslation) => (
   <OneColumn css={OneColumnCss}>
     <LayoutItem layout="center">
       <StyledHeader className="c-article__title">

package/src/LearningPaths/LearningPathMenu.tsx

@@ -10,11 +10,9 @@ import React, { useState } from 'react';
 import styled from '@emotion/styled';
 import { css } from '@emotion/core';
 import { useTranslation } from 'react-i18next';
-// @ts-ignore
 import Tooltip from '@ndla/tooltip';
 import { useWindowSize } from '@ndla/hooks';
 import { colors, spacing, misc, mq, breakpoints } from '@ndla/core';
-// @ts-ignore
 import { ArrowExpandRight, ArrowExpandLeft } from '@ndla/icons/action';
 import LearningPathMenuModalWrapper from './LearningPathMenuModalWrapper';
 import LearningPathMenuAside from './LearningPathMenuAside';
@@ -106,7 +104,7 @@ interface Props {
   showLearningPathButton: Object;
 }
 
-const LearningPathMenu: React.FunctionComponent<Props> = ({
+const LearningPathMenu = ({
   learningsteps,
   currentIndex,
   name,
@@ -117,7 +115,7 @@ const LearningPathMenu: React.FunctionComponent<Props> = ({
   learningPathURL,
   invertedStyle,
   cookies,
-}) => {
+}: Props) => {
   const { t } = useTranslation();
   const [isOpen, toggleOpenState] = useState(false);
   const { innerWidth } = useWindowSize(100);

package/src/LearningPaths/LearningPathMenuAside.tsx

@@ -9,7 +9,6 @@
 import React from 'react';
 import styled from '@emotion/styled';
 import { css } from '@emotion/core';
-// @ts-ignore
 import { Time } from '@ndla/icons/common';
 import { SafeLinkButton } from '@ndla/safelink';
 import { WithTranslation, withTranslation } from 'react-i18next';
@@ -110,14 +109,14 @@ type Props = {
   };
 };
 
-const LearningPathMenuAside: React.FunctionComponent<Props & WithTranslation> = ({
+const LearningPathMenuAside = ({
   lastUpdated,
   learningPathURL,
   copyright,
   isOpen,
   invertedStyle,
   t,
-}) => (
+}: Props & WithTranslation) => (
   <StyledAside isOpen={isOpen} invertedStyle={invertedStyle}>
     <div css={learningPathDetailsCSS}>
       <Time />

package/src/LearningPaths/LearningPathMenuAsideCopyright.tsx

@@ -8,7 +8,6 @@
 
 import React from 'react';
 import styled from '@emotion/styled';
-// @ts-ignore
 import { User } from '@ndla/icons/common';
 import { spacing, fonts } from '@ndla/core';
 
@@ -43,7 +42,7 @@ type Props = {
   };
 };
 
-const LearningPathMenuAsideCopyright: React.FunctionComponent<Props> = ({ copyright }) => (
+const LearningPathMenuAsideCopyright = ({ copyright }: Props) => (
   <StyledLearningPathDetails>
     <User />
     <p>

package/src/LearningPaths/LearningPathMenuContent.tsx

@@ -11,10 +11,8 @@ import styled from '@emotion/styled';
 import { css } from '@emotion/core';
 import { colors, spacing, spacingUnit, fonts, mq, breakpoints, animations } from '@ndla/core';
 import SafeLink from '@ndla/safelink';
-// @ts-ignore
 import { LearningPathRead } from '@ndla/icons/contentType';
 import { StepProps } from './LearningPathMenu';
-// @ts-ignore
 import ContentTypeBadge from '../ContentTypeBadge';
 import constants from '../model';
 
@@ -227,7 +225,7 @@ const hasRead = (
   },
 ) => !!cookies[id];
 
-const LearningPathMenuContent: React.FunctionComponent<Props> = ({
+const LearningPathMenuContent = ({
   isOpen,
   currentIndex,
   cookies,
@@ -236,7 +234,7 @@ const LearningPathMenuContent: React.FunctionComponent<Props> = ({
   toLearningPathUrl,
   invertedStyle,
   onStepNavigate,
-}) => {
+}: Props) => {
   const getContentTypeBadge = (type?: string) => {
     if (!type) {
       return <ContentTypeBadge type={constants.contentTypes.LEARNING_PATH} background size="small" />;

package/src/LearningPaths/LearningPathMenuIntro.tsx

@@ -9,7 +9,6 @@
 import React from 'react';
 import styled from '@emotion/styled';
 import { css } from '@emotion/core';
-// @ts-ignore
 import { useTranslation } from 'react-i18next';
 import { colors, spacing, spacingUnit, fonts, typography, mq, breakpoints, animations } from '@ndla/core';
 
@@ -101,7 +100,7 @@ interface Props {
   name: string;
 }
 
-const LearningPathMenuIntro: React.FunctionComponent<Props> = ({ isOpen, name, invertedStyle }) => {
+const LearningPathMenuIntro = ({ isOpen, name, invertedStyle }: Props) => {
   const { t } = useTranslation();
   return (
     <StyledMenuIntro isOpen={isOpen} invertedStyle={invertedStyle}>

package/src/LearningPaths/LearningPathMenuModalWrapper.tsx

@@ -6,14 +6,12 @@
  *
  */
 
-import React, { ReactChild, ReactChildren } from 'react';
+import React, { ReactChild, ReactChildren, ReactNode } from 'react';
 import { spacing, mq, breakpoints } from '@ndla/core';
-// @ts-ignore
 import Modal, { ModalHeader, ModalBody, ModalCloseButton } from '@ndla/modal';
 import { css } from '@emotion/core';
 // @ts-ignore
 import Button from '@ndla/button';
-// @ts-ignore
 import { LearningPath } from '@ndla/icons/contentType';
 import { useTranslation } from 'react-i18next';
 
@@ -34,10 +32,10 @@ const buttonToggleCss = css`
 
 type ModalWrapperProps = {
   innerWidth: number;
-  children: (arg: VoidFunction) => ReactChild | ReactChildren | React.ReactNode;
+  children: (arg: VoidFunction) => ReactChild | ReactChildren | ReactNode;
 };
 
-const ModalWrapperComponent: React.FC<ModalWrapperProps> = ({ innerWidth, children }) => {
+const ModalWrapperComponent = ({ innerWidth, children }: ModalWrapperProps) => {
   const { t } = useTranslation();
   if (innerWidth < 601) {
     return (

package/src/LearningPaths/LearningPathMobileHeader.tsx

@@ -10,8 +10,7 @@ import styled from '@emotion/styled';
 import { colors, fonts, spacing } from '@ndla/core';
 import React from 'react';
 import { WithTranslation, withTranslation } from 'react-i18next';
-// @ts-ignore
-import { LearningPathBadge } from '../index-javascript';
+import { LearningPathBadge } from '../';
 
 const StyledWrapper = styled.div`
   display: flex;
@@ -26,7 +25,7 @@ const StyledMiniHeader = styled.span`
   ${fonts.sizes(16, 1.1)};
 `;
 
-const LearningPathMobileHeader: React.FunctionComponent<WithTranslation> = ({ t }) => (
+const LearningPathMobileHeader = ({ t }: WithTranslation) => (
   <StyledWrapper>
     <LearningPathBadge size="xx-small" background />
     <StyledMiniHeader>{t('learningPath.youAreInALearningPath')}</StyledMiniHeader>

package/src/LearningPaths/LearningPathMobileStepInfo.tsx

@@ -24,7 +24,7 @@ type Props = {
   current: number;
 };
 
-const LearningPathMobileStepInfo: React.FunctionComponent<Props & WithTranslation> = ({ total, current, t }) => (
+const LearningPathMobileStepInfo = ({ total, current, t }: Props & WithTranslation) => (
   <StyledInfo>
     {t('learningPath.mobileStepInfo', {
       totalPages: total,

package/src/LearningPaths/LearningPathSticky.tsx

@@ -6,12 +6,11 @@
  *
  */
 
-import React from 'react';
+import React, { ReactNode } from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import { css } from '@emotion/core';
 import { colors, spacing, animations, mq, breakpoints } from '@ndla/core';
-// @ts-ignore
 import { Back, Forward } from '@ndla/icons/common';
 import SafeLink from '@ndla/safelink';
 
@@ -42,12 +41,10 @@ const StyledFooter = styled.nav`
 `;
 
 interface Props {
-  children: React.ReactNode;
+  children: ReactNode;
 }
 
-export const LearningPathSticky: React.FunctionComponent<Props> = ({ children }) => (
-  <StyledFooter>{children}</StyledFooter>
-);
+export const LearningPathSticky = ({ children }: Props) => <StyledFooter>{children}</StyledFooter>;
 
 LearningPathSticky.propTypes = {
   children: PropTypes.node,
@@ -122,13 +119,7 @@ type PropsSiblings = {
   stepId: number;
 };
 
-export const LearningPathStickySibling: React.FunctionComponent<PropsSiblings> = ({
-  title,
-  toLearningPathUrl,
-  pathId,
-  stepId,
-  arrow,
-}) => (
+export const LearningPathStickySibling = ({ title, toLearningPathUrl, pathId, stepId, arrow }: PropsSiblings) => (
   <SafeLink to={toLearningPathUrl(pathId, stepId)} css={SafeLinkCSS}>
     {arrow === 'left' && <Back className="c-icon--medium" />}
     <div>
@@ -138,4 +129,4 @@ export const LearningPathStickySibling: React.FunctionComponent<PropsSiblings> =
   </SafeLink>
 );
 
-export const LearningPathStickyPlaceholder: React.FunctionComponent = () => <div css={SafeLinkCSS} />;
+export const LearningPathStickyPlaceholder = () => <div css={SafeLinkCSS} />;

package/src/LearningPaths/LearningPathWrapper.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React from 'react';
+import React, { ReactNode } from 'react';
 import styled from '@emotion/styled';
 import { css } from '@emotion/core';
 import { spacing, spacingUnit, breakpoints, mq } from '@ndla/core';
@@ -41,10 +41,10 @@ const StyledWrapper = styled.section<PropStyledWrapper>`
 `;
 
 interface Props {
-  children: React.ReactNode;
+  children: ReactNode;
   invertedStyle?: boolean;
 }
 
-export const LearningPathWrapper: React.FunctionComponent<Props> = ({ children, invertedStyle }) => (
+export const LearningPathWrapper = ({ children, invertedStyle }: Props) => (
   <StyledWrapper invertedStyle={invertedStyle}>{children}</StyledWrapper>
 );

package/src/Masthead/MastheadSearchModal.tsx

@@ -1,9 +1,7 @@
-import React, { ReactChild, ReactChildren } from 'react';
-// @ts-ignore
+import React, { ReactChild, ReactChildren, ReactNode } from 'react';
 import Modal from '@ndla/modal';
 // @ts-ignore
 import Button from '@ndla/button';
-// @ts-ignore
 import { Cross } from '@ndla/icons/action';
 import { isFunction } from '@ndla/util';
 import styled from '@emotion/styled';
@@ -15,7 +13,7 @@ import ToggleSearchButton from '../Search/ToggleSearchButton';
 
 interface Props {
   onClose: VoidFunction;
-  children: (arg: Function) => ReactChild | ReactChildren | React.ReactNode;
+  children: (arg: Function) => ReactChild | ReactChildren | ReactNode;
   hideOnNarrowScreen?: boolean;
   ndlaFilm?: boolean;
 }
@@ -112,13 +110,13 @@ const extraBackdrop = css`
   box-shadow: ${shadows.searchHeader};
 `;
 
-const MastheadSearchModal: React.FC<Props & WithTranslation> = ({
+const MastheadSearchModal = ({
   onClose: onSearchClose,
   children,
   hideOnNarrowScreen,
   ndlaFilm,
   t,
-}) => (
+}: Props & WithTranslation) => (
   <Modal
     backgroundColor="grey"
     animation="slide-down"

package/src/NDLAFilm/{AboutNdlaFilm.jsx → AboutNdlaFilm.tsx}

@@ -1,11 +1,11 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { OneColumn } from '@ndla/ui';
+import React, { ReactNode } from 'react';
+import { useTranslation } from 'react-i18next';
+import styled from '@emotion/styled';
 import Modal, { ModalHeader, ModalBody, ModalCloseButton } from '@ndla/modal';
 import { colors, spacing, fonts, mq, breakpoints } from '@ndla/core';
+//@ts-ignore
 import Button from '@ndla/button';
-import styled from '@emotion/styled';
-import { useTranslation } from 'react-i18next';
+import { OneColumn } from '..';
 import VisualElement from './VisualElement';
 
 const StyledAside = styled.aside`
@@ -44,7 +44,20 @@ const StyledAside = styled.aside`
   }
 `;
 
-const AboutNdlaFilm = ({ aboutNDLAVideo, moreAboutNdlaFilm }) => {
+interface Props {
+  aboutNDLAVideo: {
+    title: string;
+    description: string;
+    visualElement: {
+      alt?: string;
+      url: string;
+      type: string;
+    };
+  };
+  moreAboutNdlaFilm: ReactNode;
+}
+
+const AboutNdlaFilm = ({ aboutNDLAVideo, moreAboutNdlaFilm }: Props) => {
   const { t } = useTranslation();
   return (
     <div className="o-wrapper">
@@ -71,16 +84,4 @@ const AboutNdlaFilm = ({ aboutNDLAVideo, moreAboutNdlaFilm }) => {
   );
 };
 
-AboutNdlaFilm.propTypes = {
-  aboutNDLAVideo: PropTypes.shape({
-    title: PropTypes.string,
-    description: PropTypes.string,
-    visualElement: PropTypes.shape({
-      url: PropTypes.string,
-      alt: PropTypes.string,
-      type: PropTypes.string,
-    }),
-  }),
-};
-
 export default AboutNdlaFilm;

package/src/NDLAFilm/AllMoviesAlphabetically.tsx

@@ -6,16 +6,15 @@
  *
  */
 
-import React, { Fragment, useEffect, useState } from 'react';
+import React, { Fragment, RefObject, useEffect, useRef, useState } from 'react';
 import { isIE, browserVersion } from 'react-device-detect';
 import styled from '@emotion/styled';
 import { css } from '@emotion/core';
 import throttle from 'lodash/throttle';
 import { breakpoints, mq, spacing, spacingUnit, colors, fonts, animations } from '@ndla/core';
 import SafeLink from '@ndla/safelink';
-// @ts-ignore
 import { makeSrcQueryString } from '../Image';
-import { movieType } from './types';
+import { MovieType } from './types';
 import { isLetter } from './isLetter';
 const IMAGE_WIDTH = 143;
 
@@ -158,7 +157,7 @@ const StyledSafeLink = styled(SafeLink)<isIEProps>`
 `;
 
 interface Props {
-  movies: movieType[];
+  movies: MovieType[];
   locale: string;
 }
 
@@ -178,11 +177,11 @@ const hasForEachPolyfill = () => {
   }
 };
 
-const AllMoviesAlphabetically: React.FunctionComponent<Props> = ({ movies, locale }) => {
+const AllMoviesAlphabetically = ({ movies, locale }: Props) => {
   const isIE11 = isIE && parseInt(browserVersion) < 12;
   // Split into Letters.
   let previousLetter = '';
-  const wrapperRef: React.RefObject<HTMLElement> = React.useRef(null);
+  const wrapperRef: RefObject<HTMLElement> = useRef(null);
   const [visibleImages, setVisibleImages] = useState<visibleImagesProps>({});
 
   const scrollEvent = () => {
@@ -231,7 +230,7 @@ const AllMoviesAlphabetically: React.FunctionComponent<Props> = ({ movies, local
 
   return (
     <StyledWrapper ref={wrapperRef}>
-      {movies.map((movie: movieType, index: number) => {
+      {movies.map((movie: MovieType, index: number) => {
         const currentLetter = movie.title.substr(0, 1);
         const isNewLetter = currentLetter.localeCompare(previousLetter, locale) === 1 && isLetter(movie.title);
         previousLetter = currentLetter;

package/src/NDLAFilm/{CategorySelect.jsx → CategorySelect.tsx}

@@ -1,28 +1,40 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import BEMHelper from 'react-bem-helper';
 import FocusTrapReact from 'focus-trap-react';
 import { ChevronDown } from '@ndla/icons/common';
-import { withTranslation } from 'react-i18next';
+import { WithTranslation, withTranslation } from 'react-i18next';
+import { MovieResourceType } from './types';
 
 const classes = new BEMHelper({
   name: 'film-moviesearch',
   prefix: 'c-',
 });
 
-class CategorySelect extends React.Component {
-  constructor(props) {
+interface Props extends WithTranslation {
+  resourceTypes: MovieResourceType[];
+  resourceTypeSelected?: MovieResourceType;
+  ariaControlId?: string;
+  onChangeResourceType: (resourceId?: string) => void;
+}
+
+interface State {
+  resourceTypesIsOpen: boolean;
+}
+class CategorySelect extends Component<Props, State> {
+  references: Record<string, HTMLButtonElement | null>;
+  constructor(props: Props) {
     super(props);
     this.state = {
       resourceTypesIsOpen: false,
     };
+    this.references = {};
     this.createRef = this.createRef.bind(this);
     this.openSelect = this.openSelect.bind(this);
     this.onSelect = this.onSelect.bind(this);
   }
 
-  createRef(el, name) {
-    this[name] = el;
+  createRef(el: HTMLButtonElement | null, name: string) {
+    this.references[name] = el;
   }
 
   openSelect() {
@@ -32,14 +44,14 @@ class CategorySelect extends React.Component {
         resourceTypesIsOpen: true,
       },
       () => {
-        if (resourceTypeSelected && this[resourceTypeSelected.id]) {
-          this[resourceTypeSelected.id].focus();
+        if (resourceTypeSelected && this.references[resourceTypeSelected.id]) {
+          this.references[resourceTypeSelected.id]?.focus();
         }
       },
     );
   }
 
-  onSelect(val) {
+  onSelect(val?: string) {
     this.props.onChangeResourceType(val);
     this.setState({
       resourceTypesIsOpen: false,
@@ -97,7 +109,7 @@ class CategorySelect extends React.Component {
                   ref={(el) => this.createRef(el, resourceType.id)}
                   onClick={() => this.onSelect(resourceType.id)}
                   {...classes('dropdown-button', {
-                    selected: resourceTypeSelected && resourceTypeSelected.id === resourceType.id,
+                    selected: !!resourceTypeSelected && resourceTypeSelected.id === resourceType.id,
                   })}
                   data-id={resourceType.id}
                   key={resourceType.id}>
@@ -112,13 +124,4 @@ class CategorySelect extends React.Component {
   }
 }
 
-CategorySelect.propTypes = {
-  resourceTypes: PropTypes.arrayOf(PropTypes.object),
-  resourceTypeSelected: PropTypes.shape({
-    id: PropTypes.string,
-    name: PropTypes.string,
-  }),
-  ariaControlId: PropTypes.string,
-};
-
 export default withTranslation()(CategorySelect);