@ndla/ui 30.8.3 → 31.0.0

package/src/AudioPlayer/SpeechControl.tsx

@@ -52,6 +52,7 @@ const SpeechControl = ({ src, title }: Props) => {
   };
   return (
     <div>
+      {/* eslint-disable-next-line jsx-a11y/media-has-caption */}
       <audio ref={audioRef} src={src} title={title} preload="metadata" />
       <SpeechPlayButton type="button" onClick={togglePlay}>
         <VolumeUp role="img" aria-label="play" title="play" />

package/src/Frontpage/FrontpageSearch.tsx

@@ -146,13 +146,6 @@ const FrontpageSearch = ({
   }, [inputHasFocus]);
 
   const onBlur = () => {
-    setTimeout(() => {
-      if (searchFieldRef.current) {
-        if (!searchFieldRef.current.contains(document.activeElement)) {
-          onInputBlur();
-        }
-      }
-    }, 0);
     // This is needed when user tabs out of field
     if (!searchFieldValue) {
       onInputBlur();

package/src/MediaList/MediaList.tsx

@@ -147,6 +147,7 @@ export const MediaListItemMeta = ({ items = [] }: MediaListItemMetaProps) => {
 
   return (
     //@ts-ignore
+    // eslint-disable-next-line react/no-unknown-property
     <ul {...cClasses('actions')} property="cc:attributionName" content={attributionMeta}>
       {items.map((item) => (
         <li key={uuid()} className="c-medialist__meta-item">

package/src/Messages/MessageBox.tsx

@@ -138,7 +138,7 @@ export const MessageBox = ({ type, children = '', links, showCloseButton, onClos
           {links && (
             <LinkWrapper>
               {links.map((x) => (
-                <Link href={x.href}>
+                <Link href={x.href} key={x.href}>
                   <span>{x.text}</span>
                   <Forward />
                 </Link>

package/src/NDLAFilm/AllMoviesAlphabetically.tsx

@@ -170,7 +170,7 @@ const hasForEachPolyfill = () => {
   if ('NodeList' in window && !NodeList.prototype.forEach) {
     NodeList.prototype.forEach = function (callback, thisArg) {
       thisArg = thisArg || window;
-      for (var i = 0; i < this.length; i++) {
+      for (let i = 0; i < this.length; i++) {
         callback.call(thisArg, this[i], i, this);
       }
     };

package/src/NDLAFilm/FilmSlideshow.tsx

@@ -217,7 +217,7 @@ const FilmSlideshow = ({ autoSlide = false, slideshow = [], slideInterval = 5000
   const [animationComplete, setAnimationComplete] = useState(true);
   const slideRef = useRef<HTMLDivElement>(null);
   const slideText = useRef<HTMLDivElement>(null);
-  let timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   const gotoSlide = useCallback((indexTarget: number, useAnimation = false) => {
     setSwipeDistance(0);

package/src/NDLAFilm/MovieGrid.tsx

@@ -66,8 +66,9 @@ const MovieGrid = ({
       <MovieListing marginLeft={autoSizedProps.margin}>
         {fetchingMoviesByType && <LoadingPlaceholder height={loadingPlaceholderHeight} />}
         {!fetchingMoviesByType &&
-          moviesByType.map((movie) => (
+          moviesByType.map((movie, index) => (
             <FilmContentCard
+              key={index}
               hideTags
               movie={movie}
               columnWidth={autoSizedProps.columnWidth}

package/src/Programme/Programme.tsx

@@ -3,8 +3,7 @@ import styled from '@emotion/styled';
 import { breakpoints, mq, spacing } from '@ndla/core';
 import { useTranslation } from 'react-i18next';
 import LayoutItem, { OneColumn } from '../Layout';
-import ProgrammeSubjects from './ProgrammeSubjects';
-import { GradesProps } from './ProgrammeSubjects';
+import ProgrammeSubjects, { GradesProps } from './ProgrammeSubjects';
 import MessageBox from '../Messages/MessageBox';
 import { NavigationHeading } from '..';
 const StyledWrapper = styled.div`

package/src/ResourceGroup/ResourceItem.tsx

@@ -9,8 +9,7 @@
 import React, { ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
-import { css } from '@emotion/react';
-import { keyframes } from '@emotion/react';
+import { css, keyframes } from '@emotion/react';
 import SafeLink from '@ndla/safelink';
 import { Additional, Core, HumanMaleBoard } from '@ndla/icons/common';
 import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';

package/src/ResourceGroup/ResourceList.tsx

@@ -8,8 +8,7 @@
 
 import React, { ReactNode } from 'react';
 import styled from '@emotion/styled';
-import { css } from '@emotion/react';
-import { keyframes } from '@emotion/react';
+import { css, keyframes } from '@emotion/react';
 import { useTranslation } from 'react-i18next';
 import NoContentBox from '../NoContentBox';
 import ResourceItem from './ResourceItem';

package/src/Search/SearchField.tsx

@@ -134,8 +134,7 @@ const SearchField = ({
             onChange('');
             onFocus?.();
             inputRef?.current?.focus();
-          }}
-          onBlur={onBlur}>
+          }}>
           {t('welcomePage.resetSearch')}
         </button>
       )}

package/src/Subject/SubjectNewContent.tsx

@@ -91,8 +91,8 @@ const SubjectNewContent = ({ heading, content }: Props) => (
     <StyledSubjectSectionTitle>{heading}</StyledSubjectSectionTitle>
     <nav>
       <StyledUl>
-        {content.map((item) => (
-          <StyledListItem>
+        {content.map((item, index) => (
+          <StyledListItem key={index}>
             <LeftWrapper>
               <ContentTypeBadge type={item.contentType} size="x-small" background border />
               <ContentLinkWrapper>

package/src/TreeStructure/AddFolderButton.tsx

@@ -12,13 +12,14 @@ import Tooltip from '@ndla/tooltip';
 import styled from '@emotion/styled';
 import { ButtonV2 as Button } from '@ndla/button';
 import { Plus } from '@ndla/icons/action';
-import { FolderType } from './types';
+import { IFolder } from '@ndla/types-learningpath-api';
 
 interface AddFolderButtonProps {
   canAddFolder: boolean;
-  focusedFolder?: FolderType;
+  focusedFolder?: IFolder;
   setNewFolderParentId: (id?: string) => void;
   setShowTree: (value: boolean) => void;
+  loading?: boolean;
 }
 
 const StyledAddFolderButton = styled(Button)`
@@ -33,30 +34,28 @@ const StyledPlus = styled(Plus)`
   width: 24px;
 `;
 
-const AddFolderButton = ({ canAddFolder, setNewFolderParentId, focusedFolder, setShowTree }: AddFolderButtonProps) => {
+const AddFolderButton = ({
+  canAddFolder,
+  loading,
+  setNewFolderParentId,
+  focusedFolder,
+  setShowTree,
+}: AddFolderButtonProps) => {
   const { t } = useTranslation();
   const ref = useRef<HTMLButtonElement>(null);
+  const tooltip = loading
+    ? t('loading')
+    : canAddFolder
+    ? t('myNdla.newFolderUnder', { folderName: focusedFolder?.name })
+    : t('treeStructure.maxFoldersAlreadyAdded');
   return (
-    <Tooltip
-      tooltip={
-        canAddFolder
-          ? t('myNdla.newFolderUnder', {
-              folderName: focusedFolder?.name,
-            })
-          : t('treeStructure.maxFoldersAlreadyAdded')
-      }>
+    <Tooltip tooltip={tooltip}>
       <StyledAddFolderButton
         ref={ref}
         variant="outline"
         shape="pill"
-        disabled={!canAddFolder}
-        aria-label={
-          canAddFolder
-            ? t('myNdla.newFolderUnder', {
-                folderName: focusedFolder?.name,
-              })
-            : t('treeStructure.maxFoldersAlreadyAdded')
-        }
+        disabled={loading || !canAddFolder}
+        aria-label={tooltip}
         onMouseDown={(e) => {
           e.preventDefault();
           e.stopPropagation();

package/src/TreeStructure/ComboboxButton.tsx

@@ -6,16 +6,17 @@
  *
  */
 
-import React, { KeyboardEvent } from 'react';
+import React, { KeyboardEvent, forwardRef } from 'react';
 import styled from '@emotion/styled';
 import { useForwardedRef } from '@ndla/util';
 import { breakpoints, colors, mq, spacing } from '@ndla/core';
 import { ChevronUp, ChevronDown } from '@ndla/icons/common';
-import { forwardRef } from 'react';
+import { IFolder } from '@ndla/types-learningpath-api';
 import { ButtonV2 as Button, IconButtonV2 as IconButton } from '@ndla/button';
 import { treestructureId } from './helperFunctions';
-import { FolderType, TreeStructureType } from './types';
+import { TreeStructureType } from './types';
 import { arrowNavigation } from './arrowNavigation';
+import ContentLoader from '../ContentLoader';
 
 interface StyledRowProps {
   isOpen: boolean;
@@ -52,14 +53,15 @@ interface Props {
   showTree: boolean;
   type: TreeStructureType;
   label?: string;
-  focusedFolder?: FolderType;
-  selectedFolder?: FolderType;
-  setSelectedFolder: (folder: FolderType) => void;
+  focusedFolder?: IFolder;
+  selectedFolder?: IFolder;
+  setSelectedFolder: (folder: IFolder) => void;
+  loading?: boolean;
   onToggleTree: (open: boolean) => void;
-  flattenedFolders: FolderType[];
+  flattenedFolders: IFolder[];
   onOpenFolder: (id: string) => void;
   onCloseFolder: (id: string) => void;
-  setFocusedFolder: (folder: FolderType) => void;
+  setFocusedFolder: (folder: IFolder) => void;
   ariaDescribedby?: string;
 }
 
@@ -77,6 +79,7 @@ const ComboboxButton = forwardRef<HTMLButtonElement, Props>(
       setFocusedFolder,
       onOpenFolder,
       onCloseFolder,
+      loading,
       ariaDescribedby,
     },
     ref,
@@ -116,25 +119,48 @@ const ComboboxButton = forwardRef<HTMLButtonElement, Props>(
             innerRef.current?.focus();
           }
         }}>
-        <StyledSelectedFolder
-          ref={innerRef}
-          tabIndex={0}
-          id={treestructureId(type, 'combobox')}
-          role="combobox"
-          aria-controls={treestructureId(type, 'popup')}
-          aria-haspopup="tree"
-          aria-expanded={showTree}
-          aria-labelledby={label ? treestructureId(type, 'label') : undefined}
-          aria-activedescendant={focusedFolder ? treestructureId(type, focusedFolder.id) : undefined}
-          aria-describedby={ariaDescribedby}
+        {loading && (
+          <ContentLoader width={1000} height={40}>
+            <rect x="15" y="0" width="1000" rx="3" ry="3" r="15" height="40" />
+          </ContentLoader>
+        )}
+        {!loading && (
+          <StyledSelectedFolder
+            ref={innerRef}
+            tabIndex={0}
+            id={treestructureId(type, 'combobox')}
+            role="combobox"
+            aria-controls={treestructureId(type, 'popup')}
+            aria-haspopup="tree"
+            aria-expanded={showTree}
+            aria-labelledby={label ? treestructureId(type, 'label') : undefined}
+            aria-activedescendant={focusedFolder ? treestructureId(type, focusedFolder.id) : undefined}
+            aria-describedby={ariaDescribedby}
+            variant="ghost"
+            colorTheme="light"
+            fontWeight="normal"
+            shape="sharp"
+            onKeyDown={onKeyDown}
+            onClick={() => {
+              innerRef.current?.focus();
+              onToggleTree(!showTree);
+            }}>
+            {selectedFolder?.name}
+          </StyledSelectedFolder>
+        )}
+        <IconButton
+          disabled={loading}
+          aria-busy={loading}
+          aria-hidden
+          aria-label=""
+          tabIndex={-1}
           variant="ghost"
-          colorTheme="light"
-          fontWeight="normal"
-          shape="sharp"
-          onKeyDown={onKeyDown}>
-          {selectedFolder?.name}
-        </StyledSelectedFolder>
-        <IconButton aria-hidden aria-label="" tabIndex={-1} variant="ghost" colorTheme="greyLighter" size="small">
+          colorTheme="greyLighter"
+          size="small"
+          onClick={() => {
+            innerRef.current?.focus();
+            onToggleTree(!showTree);
+          }}>
           {showTree ? <ChevronUp /> : <ChevronDown />}
         </IconButton>
       </StyledRow>

package/src/TreeStructure/FolderItem.tsx

@@ -14,7 +14,8 @@ import { Done } from '@ndla/icons/editor';
 import { ButtonV2 as Button } from '@ndla/button';
 import { colors, spacing, animations, spacingUnit, misc, fonts } from '@ndla/core';
 import SafeLink from '@ndla/safelink';
-import { CommonFolderItemsProps, FolderType } from './types';
+import { IFolder } from '@ndla/types-learningpath-api';
+import { CommonFolderItemsProps } from './types';
 import { arrowNavigation } from './arrowNavigation';
 import { treestructureId } from './helperFunctions';
 
@@ -104,8 +105,9 @@ const FolderNameLink = styled(SafeLink, { shouldForwardProp })<FolderNameProps>`
 
 interface Props extends CommonFolderItemsProps {
   isOpen: boolean;
-  folder: FolderType;
+  folder: IFolder;
   isCreatingFolder?: boolean;
+  index: number;
 }
 
 const FolderItem = ({
@@ -125,9 +127,10 @@ const FolderItem = ({
   isCreatingFolder,
   type,
   closeTree,
+  index,
 }: Props) => {
   const { t } = useTranslation();
-  const { id, name, isNavigation } = folder;
+  const { id, name } = folder;
   const ref = useRef<HTMLButtonElement & HTMLAnchorElement>(null);
   const selected = selectedFolder ? selectedFolder.id === id : false;
 
@@ -159,17 +162,17 @@ const FolderItem = ({
     }
   }, [focusedFolder, ref, id, isCreatingFolder, type]);
 
-  const linkPath = `/minndla${!isNavigation ? '/folders' : ''}/${id}`;
+  const linkPath = `/minndla/folders/${id}`;
 
   const containsResource =
     targetResource && folder.resources.some((resource) => resource.resourceId === targetResource.resourceId);
 
   const emptyFolder = folder.subfolders.length === 0;
-
   const isMaxDepth = level > maxLevel;
-
   const hideArrow = isMaxDepth || emptyFolder;
 
+  const tabable = selected || focused || (!focusedFolder && !folder.parentId && index === 0);
+
   return type === 'navigation' ? (
     <FolderNameLink
       role="treeitem"
@@ -187,7 +190,7 @@ const FolderItem = ({
         arrowNavigation(e, id, visibleFolders, setFocusedFolder, onOpenFolder, onCloseFolder);
       }}
       to={loading ? '' : linkPath}
-      tabIndex={selected || focused ? 0 : -1}
+      tabIndex={tabable ? 0 : -1}
       selected={selected}
       onFocus={() => setFocusedFolder(folder)}
       onClick={handleClickFolder}>

package/src/TreeStructure/FolderItems.tsx

@@ -9,9 +9,9 @@
 import React, { ReactNode } from 'react';
 import styled from '@emotion/styled';
 import { animations } from '@ndla/core';
+import { IFolder } from '@ndla/types-learningpath-api';
 import FolderItem from './FolderItem';
-import { CommonFolderItemsProps, FolderType, NewFolderInputFunc, OnCreatedFunc, TreeStructureType } from './types';
-import NavigationLink from './NavigationLink';
+import { CommonFolderItemsProps, NewFolderInputFunc, OnCreatedFunc, TreeStructureType } from './types';
 import { treestructureId } from './helperFunctions';
 
 const StyledUL = styled.ul`
@@ -38,11 +38,11 @@ const StyledLI = styled.li<StyledLiProps>`
 `;
 
 export interface FolderItemsProps extends CommonFolderItemsProps {
-  folders: FolderType[];
+  folders: IFolder[];
   newFolderParentId: string | undefined;
   onCancelNewFolder: () => void;
   openFolders: string[];
-  parentFolder?: FolderType;
+  parentFolder?: IFolder;
   children?: ReactNode;
   onCreate: OnCreatedFunc;
   newFolderInput?: NewFolderInputFunc;
@@ -74,44 +74,39 @@ const FolderItems = ({
     aria-labelledby={level === 0 && type === 'picker' ? treestructureId(type, 'label') : undefined}
     role={level === 0 ? 'tree' : 'group'}>
     {children}
-    {folders.map((folder) => {
+    {folders.map((folder, index) => {
       const { subfolders, id } = folder;
       const isOpen = openFolders?.includes(id);
 
       return (
         <StyledLI key={id} tabIndex={-1} role="none" type={type}>
-          {folder.isNavigation ? (
-            <NavigationLink folder={folder} isOpen={isOpen} level={level} type={type} loading={loading} {...rest} />
-          ) : (
-            <>
-              <FolderItem
-                folder={folder}
-                isOpen={isOpen}
-                level={level}
-                loading={loading}
-                type={type}
-                isCreatingFolder={!!newFolderParentId}
-                {...rest}
-              />
-              {((subfolders && isOpen) || newFolderParentId === id) && (
-                <FolderItems
-                  parentFolder={folder}
-                  folders={subfolders}
-                  level={level + 1}
-                  loading={loading}
-                  type={type}
-                  newFolderParentId={newFolderParentId}
-                  onCancelNewFolder={onCancelNewFolder}
-                  openFolders={openFolders}
-                  newFolderInput={newFolderInput}
-                  onCreate={onCreate}
-                  {...rest}>
-                  {newFolderParentId === id && (
-                    <li role="none">{newFolderInput?.({ parentId: id, onClose: onCancelNewFolder, onCreate })}</li>
-                  )}
-                </FolderItems>
+          <FolderItem
+            index={index}
+            folder={folder}
+            isOpen={isOpen}
+            level={level}
+            loading={loading}
+            type={type}
+            isCreatingFolder={!!newFolderParentId}
+            {...rest}
+          />
+          {((subfolders && isOpen) || newFolderParentId === id) && (
+            <FolderItems
+              parentFolder={folder}
+              folders={subfolders}
+              level={level + 1}
+              loading={loading}
+              type={type}
+              newFolderParentId={newFolderParentId}
+              onCancelNewFolder={onCancelNewFolder}
+              openFolders={openFolders}
+              newFolderInput={newFolderInput}
+              onCreate={onCreate}
+              {...rest}>
+              {newFolderParentId === id && (
+                <li role="none">{newFolderInput?.({ parentId: id, onClose: onCancelNewFolder, onCreate })}</li>
               )}
-            </>
+            </FolderItems>
           )}
         </StyledLI>
       );

package/src/TreeStructure/TreeStructure.tsx

@@ -14,7 +14,7 @@ import { uniq } from 'lodash';
 import { IFolder } from '@ndla/types-learningpath-api';
 import FolderItems from './FolderItems';
 import { flattenFolders, treestructureId } from './helperFunctions';
-import { CommonTreeStructureProps, FolderType, NewFolderInputFunc, TreeStructureType } from './types';
+import { CommonTreeStructureProps, NewFolderInputFunc, TreeStructureType } from './types';
 import ComboboxButton from './ComboboxButton';
 import AddFolderButton from './AddFolderButton';
 
@@ -69,7 +69,7 @@ const ScrollableDiv = styled.div<ScrollableDivProps>`
 
 export interface TreeStructureProps extends CommonTreeStructureProps {
   defaultOpenFolders?: string[];
-  folders: FolderType[];
+  folders: IFolder[];
   label?: string;
   maxLevel?: number;
   newFolderInput?: NewFolderInputFunc;
@@ -96,8 +96,8 @@ const TreeStructure = ({
   const [openFolders, setOpenFolders] = useState<string[]>(defaultOpenFolders || []);
 
   const [newFolderParentId, setNewFolderParentId] = useState<string | undefined>();
-  const [focusedFolder, _setFocusedFolder] = useState<FolderType | undefined>();
-  const [selectedFolder, _setSelectedFolder] = useState<FolderType | undefined>();
+  const [focusedFolder, _setFocusedFolder] = useState<IFolder | undefined>();
+  const [selectedFolder, _setSelectedFolder] = useState<IFolder | undefined>();
   const [showTree, setShowTree] = useState(type === 'navigation');
 
   const flattenedFolders = useMemo(() => flattenFolders(folders, openFolders), [folders, openFolders]);
@@ -133,12 +133,12 @@ const TreeStructure = ({
     }
   };
 
-  const setSelectedFolder = (folder: FolderType) => {
+  const setSelectedFolder = (folder: IFolder) => {
     _setSelectedFolder(folder);
     onSelectFolder?.(folder.id);
   };
 
-  const setFocusedFolder = (folder: FolderType) => {
+  const setFocusedFolder = (folder: IFolder) => {
     _setFocusedFolder(folder);
     setNewFolderParentId(undefined);
 
@@ -189,6 +189,7 @@ const TreeStructure = ({
         {label && <StyledLabel id={treestructureId(type, 'label')}>{label}</StyledLabel>}
         {type === 'picker' && (
           <AddFolderButton
+            loading={loading}
             canAddFolder={!!canAddFolder}
             focusedFolder={focusedFolder}
             setNewFolderParentId={setNewFolderParentId}
@@ -203,6 +204,7 @@ const TreeStructure = ({
             showTree={showTree}
             type={type}
             label={label}
+            loading={loading}
             focusedFolder={focusedFolder}
             selectedFolder={selectedFolder}
             setSelectedFolder={setSelectedFolder}

package/src/TreeStructure/arrowNavigation.ts

@@ -6,13 +6,13 @@
  *
  */
 
+import { IFolder } from '@ndla/types-learningpath-api';
 import { KeyboardEvent } from 'react';
-import { FolderType } from './types';
 
 const navigateVertical = (
-  visibleFolders: FolderType[],
+  visibleFolders: IFolder[],
   folderId: string,
-  setFocusedFolderId: (id: FolderType) => void,
+  setFocusedFolderId: (id: IFolder) => void,
   direction: 1 | -1,
 ) => {
   const currentIndex = visibleFolders.findIndex((folder) => folder.id === folderId);
@@ -27,8 +27,8 @@ const arrowKeys = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Enter'];
 export const arrowNavigation = (
   e: KeyboardEvent<HTMLElement>,
   id: string,
-  visibleFolders: FolderType[],
-  setFocusedFolderId: (id: FolderType) => void,
+  visibleFolders: IFolder[],
+  setFocusedFolderId: (id: IFolder) => void,
   onOpen: (id: string) => void,
   onClose: (id: string) => void,
 ) => {

package/src/TreeStructure/helperFunctions.ts

@@ -1,12 +1,13 @@
-import { FolderType, TreeStructureType } from './types';
+import { IFolder } from '@ndla/types-learningpath-api';
+import { TreeStructureType } from './types';
 
-export const flattenFolders = (folders: FolderType[], openFolders?: string[]): FolderType[] => {
+export const flattenFolders = (folders: IFolder[], openFolders?: string[]): IFolder[] => {
   return folders.reduce((acc, { subfolders, id, ...rest }) => {
     if (!subfolders || (openFolders && !openFolders.includes(id))) {
       return acc.concat({ subfolders, id, ...rest });
     }
     return acc.concat({ subfolders, id, ...rest }, flattenFolders(subfolders, openFolders));
-  }, [] as FolderType[]);
+  }, [] as IFolder[]);
 };
 
 export const treestructureId = (type: TreeStructureType, modifier: string) => {

package/src/TreeStructure/index.ts

@@ -7,6 +7,5 @@
  */
 
 import TreeStructure from './TreeStructure';
-export type { FolderType } from './types';
 export type { TreeStructureProps } from './TreeStructure';
 export { TreeStructure };

package/src/TreeStructure/types.ts

@@ -9,11 +9,6 @@
 import { ReactNode } from 'react';
 import { IFolder, IResource } from '@ndla/types-learningpath-api';
 
-export interface FolderType extends IFolder {
-  icon?: ReactNode;
-  isNavigation?: boolean;
-}
-
 export type TreeStructureType = 'navigation' | 'picker';
 
 export type OnCreatedFunc = (folder: IFolder | undefined, parentId: string) => void;
@@ -35,14 +30,14 @@ export interface CommonTreeStructureProps {
 }
 
 export interface CommonFolderItemsProps extends CommonTreeStructureProps {
-  focusedFolder?: FolderType;
+  focusedFolder?: IFolder;
   level: number;
   maxLevel: number;
-  selectedFolder?: FolderType;
+  selectedFolder?: IFolder;
   onCloseFolder: (id: string) => void;
   onOpenFolder: (id: string) => void;
-  setFocusedFolder: (folder: FolderType) => void;
-  setSelectedFolder: (folder: FolderType) => void;
-  visibleFolders: FolderType[];
+  setFocusedFolder: (folder: IFolder) => void;
+  setSelectedFolder: (folder: IFolder) => void;
+  visibleFolders: IFolder[];
   closeTree: () => void;
 }

package/src/i18n/index.ts

@@ -8,4 +8,3 @@
 
 export { i18nInstance } from './i18n';
 export { formatNestedMessages } from './formatNestedMessages';
-export { formatMessage } from './formatMessage';

package/src/index.ts

@@ -174,7 +174,7 @@ export { default as Breadcrumb, HeaderBreadcrumb, HomeBreadcrumb, ActionBreadcru
 export type { SimpleBreadcrumbItem, IndexedBreadcrumbItem } from './Breadcrumb';
 
 export type { BreadcrumbItemProps } from './Breadcrumblist';
-export { i18nInstance, formatNestedMessages, formatMessage } from './i18n';
+export { i18nInstance, formatNestedMessages } from './i18n';
 export { default as ResourceGroup } from './ResourceGroup';
 
 export { default as LayoutItem, OneColumn, PageContainer, Content } from './Layout';
@@ -251,7 +251,7 @@ export { SnackbarProvider, useSnack, BaseSnack, DefaultSnackbar } from './SnackB
 export type { Snack, SnackContext } from './SnackBar';
 export { InfoBlock } from './InfoBlock';
 export { TreeStructure } from './TreeStructure';
-export type { FolderType, TreeStructureProps } from './TreeStructure';
+export type { TreeStructureProps } from './TreeStructure';
 
 export { SearchField, SearchResultList, SearchResultItem, ActiveFilters, ToggleSearchButton } from './Search';
 export { default as LetterFilter } from './LetterFilter';