@ndla/ui 3.3.13 → 3.3.14

package/lib/index-javascript.js

@@ -95,54 +95,6 @@ Object.defineProperty(exports, "ToggleSearchButton", {
     return _Search.ToggleSearchButton;
   }
 });
-Object.defineProperty(exports, "ContentTypeBadge", {
-  enumerable: true,
-  get: function get() {
-    return _ContentTypeBadge["default"];
-  }
-});
-Object.defineProperty(exports, "SubjectMaterialBadge", {
-  enumerable: true,
-  get: function get() {
-    return _ContentTypeBadge.SubjectMaterialBadge;
-  }
-});
-Object.defineProperty(exports, "TasksAndActivitiesBadge", {
-  enumerable: true,
-  get: function get() {
-    return _ContentTypeBadge.TasksAndActivitiesBadge;
-  }
-});
-Object.defineProperty(exports, "AssessmentResourcesBadge", {
-  enumerable: true,
-  get: function get() {
-    return _ContentTypeBadge.AssessmentResourcesBadge;
-  }
-});
-Object.defineProperty(exports, "LearningPathBadge", {
-  enumerable: true,
-  get: function get() {
-    return _ContentTypeBadge.LearningPathBadge;
-  }
-});
-Object.defineProperty(exports, "SubjectBadge", {
-  enumerable: true,
-  get: function get() {
-    return _ContentTypeBadge.SubjectBadge;
-  }
-});
-Object.defineProperty(exports, "ExternalLearningResourcesBadge", {
-  enumerable: true,
-  get: function get() {
-    return _ContentTypeBadge.ExternalLearningResourcesBadge;
-  }
-});
-Object.defineProperty(exports, "SourceMaterialBadge", {
-  enumerable: true,
-  get: function get() {
-    return _ContentTypeBadge.SourceMaterialBadge;
-  }
-});
 Object.defineProperty(exports, "TopicIntroductionList", {
   enumerable: true,
   get: function get() {
@@ -191,42 +143,6 @@ Object.defineProperty(exports, "CompetenceGoalsDialog", {
     return _CompetenceGoals.CompetenceGoalsDialog;
   }
 });
-Object.defineProperty(exports, "MediaList", {
-  enumerable: true,
-  get: function get() {
-    return _MediaList.MediaList;
-  }
-});
-Object.defineProperty(exports, "MediaListItem", {
-  enumerable: true,
-  get: function get() {
-    return _MediaList.MediaListItem;
-  }
-});
-Object.defineProperty(exports, "MediaListItemBody", {
-  enumerable: true,
-  get: function get() {
-    return _MediaList.MediaListItemBody;
-  }
-});
-Object.defineProperty(exports, "MediaListItemActions", {
-  enumerable: true,
-  get: function get() {
-    return _MediaList.MediaListItemActions;
-  }
-});
-Object.defineProperty(exports, "MediaListItemImage", {
-  enumerable: true,
-  get: function get() {
-    return _MediaList.MediaListItemImage;
-  }
-});
-Object.defineProperty(exports, "MediaListItemMeta", {
-  enumerable: true,
-  get: function get() {
-    return _MediaList.MediaListItemMeta;
-  }
-});
 Object.defineProperty(exports, "EmbeddedTwitter", {
   enumerable: true,
   get: function get() {
@@ -245,71 +161,21 @@ Object.defineProperty(exports, "EmbeddedFacebookPage", {
     return _Embedded.EmbeddedFacebookPage;
   }
 });
-Object.defineProperty(exports, "DisplayOnPageYOffset", {
-  enumerable: true,
-  get: function get() {
-    return _Animation.DisplayOnPageYOffset;
-  }
-});
-Object.defineProperty(exports, "FilmSlideshow", {
-  enumerable: true,
-  get: function get() {
-    return _NDLAFilm.FilmSlideshow;
-  }
-});
-Object.defineProperty(exports, "MovieGrid", {
-  enumerable: true,
-  get: function get() {
-    return _NDLAFilm.MovieGrid;
-  }
-});
-Object.defineProperty(exports, "AboutNdlaFilm", {
-  enumerable: true,
-  get: function get() {
-    return _NDLAFilm.AboutNdlaFilm;
-  }
-});
-Object.defineProperty(exports, "FilmMovieSearch", {
-  enumerable: true,
-  get: function get() {
-    return _NDLAFilm.FilmMovieSearch;
-  }
-});
-Object.defineProperty(exports, "FilmMovieList", {
-  enumerable: true,
-  get: function get() {
-    return _NDLAFilm.FilmMovieList;
-  }
-});
-Object.defineProperty(exports, "AllMoviesAlphabetically", {
-  enumerable: true,
-  get: function get() {
-    return _NDLAFilm.AllMoviesAlphabetically;
-  }
-});
 
 var _Filter = require("./Filter");
 
 var _Search = require("./Search");
 
-var _ContentTypeBadge = _interopRequireWildcard(require("./ContentTypeBadge"));
-
 var _TopicIntroductionList = _interopRequireDefault(require("./TopicIntroductionList"));
 
 var _TopicMenu = _interopRequireWildcard(require("./TopicMenu"));
 
 var _CompetenceGoals = _interopRequireWildcard(require("./CompetenceGoals"));
 
-var _MediaList = require("./MediaList");
-
 var _Embedded = require("./Embedded");
 
-var _Animation = require("./Animation");
-
-var _NDLAFilm = require("./NDLAFilm");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/lib/index.d.ts

@@ -64,6 +64,10 @@ export type { BreadcrumbItemProps } from './Breadcrumblist/Breadcrumblist';
 export { i18nInstance, formatNestedMessages, formatMessage } from './i18n';
 export { default as ResourceGroup } from './ResourceGroup';
 export { default as LayoutItem, OneColumn, PageContainer, Content } from './Layout';
+export { FilmSlideshow, MovieGrid, AboutNdlaFilm, FilmMovieSearch, FilmMovieList, AllMoviesAlphabetically, } from './NDLAFilm';
+export { DisplayOnPageYOffset } from './Animation';
+export { MediaList, MediaListItem, MediaListItemBody, MediaListItemActions, MediaListItemImage, MediaListItemMeta, } from './MediaList';
+export { default as ContentTypeBadge, SubjectMaterialBadge, TasksAndActivitiesBadge, AssessmentResourcesBadge, LearningPathBadge, SubjectBadge, ExternalLearningResourcesBadge, SourceMaterialBadge, } from './ContentTypeBadge';
 export { SubjectAbout, SubjectArchive, SubjectCarousel, SubjectChildContent, SubjectContent, SubjectFilter, SubjectFlexChild, SubjectFlexWrapper, SubjectHeader, SubjectLinks, SubjectNewContent, SubjectSecondaryContent, SubjectSectionTitle, SubjectShortcuts, SubjectSidebarWrapper, SubjectSocialContent, SubjectSocialSection, SubjectTopics, SubjectBanner, } from './Subject';
 export { default as ContentCard } from './ContentCard';
 export { default as CopyParagraphButton } from './CopyParagraphButton';

package/lib/index.js

@@ -124,6 +124,27 @@ var _exportNames = {
   OneColumn: true,
   PageContainer: true,
   Content: true,
+  FilmSlideshow: true,
+  MovieGrid: true,
+  AboutNdlaFilm: true,
+  FilmMovieSearch: true,
+  FilmMovieList: true,
+  AllMoviesAlphabetically: true,
+  DisplayOnPageYOffset: true,
+  MediaList: true,
+  MediaListItem: true,
+  MediaListItemBody: true,
+  MediaListItemActions: true,
+  MediaListItemImage: true,
+  MediaListItemMeta: true,
+  ContentTypeBadge: true,
+  SubjectMaterialBadge: true,
+  TasksAndActivitiesBadge: true,
+  AssessmentResourcesBadge: true,
+  LearningPathBadge: true,
+  SubjectBadge: true,
+  ExternalLearningResourcesBadge: true,
+  SourceMaterialBadge: true,
   SubjectAbout: true,
   SubjectArchive: true,
   SubjectCarousel: true,
@@ -854,6 +875,132 @@ Object.defineProperty(exports, "Content", {
     return _Layout.Content;
   }
 });
+Object.defineProperty(exports, "FilmSlideshow", {
+  enumerable: true,
+  get: function get() {
+    return _NDLAFilm.FilmSlideshow;
+  }
+});
+Object.defineProperty(exports, "MovieGrid", {
+  enumerable: true,
+  get: function get() {
+    return _NDLAFilm.MovieGrid;
+  }
+});
+Object.defineProperty(exports, "AboutNdlaFilm", {
+  enumerable: true,
+  get: function get() {
+    return _NDLAFilm.AboutNdlaFilm;
+  }
+});
+Object.defineProperty(exports, "FilmMovieSearch", {
+  enumerable: true,
+  get: function get() {
+    return _NDLAFilm.FilmMovieSearch;
+  }
+});
+Object.defineProperty(exports, "FilmMovieList", {
+  enumerable: true,
+  get: function get() {
+    return _NDLAFilm.FilmMovieList;
+  }
+});
+Object.defineProperty(exports, "AllMoviesAlphabetically", {
+  enumerable: true,
+  get: function get() {
+    return _NDLAFilm.AllMoviesAlphabetically;
+  }
+});
+Object.defineProperty(exports, "DisplayOnPageYOffset", {
+  enumerable: true,
+  get: function get() {
+    return _Animation.DisplayOnPageYOffset;
+  }
+});
+Object.defineProperty(exports, "MediaList", {
+  enumerable: true,
+  get: function get() {
+    return _MediaList.MediaList;
+  }
+});
+Object.defineProperty(exports, "MediaListItem", {
+  enumerable: true,
+  get: function get() {
+    return _MediaList.MediaListItem;
+  }
+});
+Object.defineProperty(exports, "MediaListItemBody", {
+  enumerable: true,
+  get: function get() {
+    return _MediaList.MediaListItemBody;
+  }
+});
+Object.defineProperty(exports, "MediaListItemActions", {
+  enumerable: true,
+  get: function get() {
+    return _MediaList.MediaListItemActions;
+  }
+});
+Object.defineProperty(exports, "MediaListItemImage", {
+  enumerable: true,
+  get: function get() {
+    return _MediaList.MediaListItemImage;
+  }
+});
+Object.defineProperty(exports, "MediaListItemMeta", {
+  enumerable: true,
+  get: function get() {
+    return _MediaList.MediaListItemMeta;
+  }
+});
+Object.defineProperty(exports, "ContentTypeBadge", {
+  enumerable: true,
+  get: function get() {
+    return _ContentTypeBadge["default"];
+  }
+});
+Object.defineProperty(exports, "SubjectMaterialBadge", {
+  enumerable: true,
+  get: function get() {
+    return _ContentTypeBadge.SubjectMaterialBadge;
+  }
+});
+Object.defineProperty(exports, "TasksAndActivitiesBadge", {
+  enumerable: true,
+  get: function get() {
+    return _ContentTypeBadge.TasksAndActivitiesBadge;
+  }
+});
+Object.defineProperty(exports, "AssessmentResourcesBadge", {
+  enumerable: true,
+  get: function get() {
+    return _ContentTypeBadge.AssessmentResourcesBadge;
+  }
+});
+Object.defineProperty(exports, "LearningPathBadge", {
+  enumerable: true,
+  get: function get() {
+    return _ContentTypeBadge.LearningPathBadge;
+  }
+});
+Object.defineProperty(exports, "SubjectBadge", {
+  enumerable: true,
+  get: function get() {
+    return _ContentTypeBadge.SubjectBadge;
+  }
+});
+Object.defineProperty(exports, "ExternalLearningResourcesBadge", {
+  enumerable: true,
+  get: function get() {
+    return _ContentTypeBadge.ExternalLearningResourcesBadge;
+  }
+});
+Object.defineProperty(exports, "SourceMaterialBadge", {
+  enumerable: true,
+  get: function get() {
+    return _ContentTypeBadge.SourceMaterialBadge;
+  }
+});
 Object.defineProperty(exports, "SubjectAbout", {
   enumerable: true,
   get: function get() {
@@ -1102,6 +1249,14 @@ var _ResourceGroup = _interopRequireDefault(require("./ResourceGroup"));
 
 var _Layout = _interopRequireWildcard(require("./Layout"));
 
+var _NDLAFilm = require("./NDLAFilm");
+
+var _Animation = require("./Animation");
+
+var _MediaList = require("./MediaList");
+
+var _ContentTypeBadge = _interopRequireWildcard(require("./ContentTypeBadge"));
+
 var _Subject = require("./Subject");
 
 var _ContentCard = _interopRequireDefault(require("./ContentCard"));

package/lib/shapes.js

@@ -5,7 +5,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.CompetenceGoalShape = exports.ContentTypeResultShape = exports.ContentTypeShape = exports.ShortcutShape = exports.ResourceShape = exports.ArticleShape = exports.ContributorShape = exports.FootNoteShape = exports.TopicShape = exports.SubjectShape = exports.LicenseShape = exports.LicenseRightShape = void 0;
+exports.CompetenceGoalShape = exports.ContentTypeResultShape = exports.ContentTypeShape = exports.ResourceShape = exports.ArticleShape = exports.ContributorShape = exports.FootNoteShape = exports.TopicShape = exports.SubjectShape = exports.LicenseShape = exports.LicenseRightShape = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -100,15 +100,6 @@ var ResourceShape = _propTypes["default"].shape({
 
 exports.ResourceShape = ResourceShape;
 
-var ShortcutShape = _propTypes["default"].shape({
-  tooltip: _propTypes["default"].string.isRequired,
-  contentType: _propTypes["default"].string.isRequired,
-  url: _propTypes["default"].string.isRequired,
-  count: _propTypes["default"].number.isRequired
-});
-
-exports.ShortcutShape = ShortcutShape;
-
 var ContentTypeShape = _propTypes["default"].oneOf([contentTypes.SUBJECT_MATERIAL, contentTypes.TASKS_AND_ACTIVITIES, contentTypes.ASSESSMENT_RESOURCES, contentTypes.SUBJECT, contentTypes.EXTERNAL_LEARNING_RESOURCES, contentTypes.SOURCE_MATERIAL, contentTypes.LEARNING_PATH, contentTypes.TOPIC, 'beta', 'ndla-film', 'ndla-film has-image']);
 
 exports.ContentTypeShape = ContentTypeShape;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "3.3.13",
+  "version": "3.3.14",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -31,17 +31,17 @@
     "types"
   ],
   "dependencies": {
-    "@ndla/button": "^1.1.4",
-    "@ndla/carousel": "^1.1.2",
-    "@ndla/core": "^0.7.2",
+    "@ndla/button": "^1.1.5",
+    "@ndla/carousel": "^1.1.3",
+    "@ndla/core": "^0.7.3",
     "@ndla/hooks": "^1.0.7",
     "@ndla/icons": "^1.4.1",
-    "@ndla/licenses": "^1.1.6",
-    "@ndla/modal": "^1.1.18",
+    "@ndla/licenses": "^1.1.7",
+    "@ndla/modal": "^1.1.19",
     "@ndla/safelink": "^1.0.9",
-    "@ndla/switch": "^0.0.32",
-    "@ndla/tabs": "^1.0.15",
-    "@ndla/tooltip": "^0.2.49",
+    "@ndla/switch": "^0.0.33",
+    "@ndla/tabs": "^1.0.16",
+    "@ndla/tooltip": "^0.2.50",
     "@ndla/util": "^2.0.1",
     "@reach/menu-button": "^0.12.1",
     "@reach/slider": "^0.12.1",
@@ -92,5 +92,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "15388cbdbe3dae57fef57a86f58380437b8264fc"
+  "gitHead": "fbf8c794dcdc3e753ae4c19f4805f1387f3bcfc3"
 }

package/src/Figure/Figure.tsx

@@ -121,8 +121,9 @@ interface FigureCaptionProps {
 
 const Figure = ({ children, type = 'full', resizeIframe, ...rest }: Props) => {
   const typeClass = type === 'full-column' ? 'c-figure--full-column' : `u-float-${type}`;
+  const right = ['small-right', 'xsmall-right'].includes(type);
   return (
-    <figure data-sizetype={type} {...classes('', { resize: !!resizeIframe }, typeClass)} {...rest}>
+    <figure data-sizetype={type} {...classes('', { resize: !!resizeIframe, right }, typeClass)} {...rest}>
       {isFunction(children) ? children({ typeClass }) : children}
     </figure>
   );

package/src/Figure/component.figure.scss

@@ -17,6 +17,25 @@
 **/
 
 /* 1. */
+
+@keyframes rightFloatTransition {
+  0% {
+    left: 75%;
+  }
+  100% {
+    left: -16.6%;
+  }
+}
+
+@keyframes smallRightFloatTransition {
+  0% {
+    left: 78.5%;
+  }
+  100% {
+    left: -16.6%;
+  }
+}
+
 .c-figure {
   img {
     width: 100%;
@@ -51,6 +70,21 @@
     padding-bottom: $spacing--large;
     margin-bottom: 0;
   }
+  &--right {
+    &.expanded {
+      @include mq($from: desktop) {
+        animation-name: rightFloatTransition;
+        animation-duration: 0.4s;
+      }
+
+      &[data-sizetype='xsmall-right'] {
+        @include mq($from: desktop) {
+          animation-name: smallRightFloatTransition;
+          animation-duration: 0.4s;
+        }
+      }
+    }
+  }
   &.expanded {
     .c-figure__caption--hidden-caption {
       display: block;
@@ -74,7 +108,7 @@
   background-color: $white;
   padding: $spacing--small 0;
   display: block;
-  border-bottom: 1px solid #D1D6DB;
+  border-bottom: 1px solid #d1d6db;
 }
 
 .c-figure__caption--hidden-caption {
@@ -119,7 +153,7 @@
     margin-bottom: $spacing--small;
   }
   p {
-    margin:0;
+    margin: 0;
   }
 }
 
@@ -179,7 +213,7 @@
   padding: $spacing--small;
   transition: all 0.3s ease-out;
   background: rgba($white, 0.2);
-  border:0;
+  border: 0;
 
   .expanded-icon {
     display: none;

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

@@ -15,7 +15,7 @@ import { breakpoints, mq, spacing, spacingUnit, colors, fonts, animations } from
 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 +158,7 @@ const StyledSafeLink = styled(SafeLink)<isIEProps>`
 `;
 
 interface Props {
-  movies: movieType[];
+  movies: MovieType[];
   locale: string;
 }
 
@@ -231,7 +231,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);