@ndla/ui 20.0.0 → 21.0.0

package/src/TreeStructure/FolderItem.tsx

@@ -6,13 +6,14 @@
  *
  */
 
-import React, { KeyboardEvent, useEffect, useRef } from 'react';
+import React, { KeyboardEvent, MouseEvent, useEffect, useRef } from 'react';
 import styled from '@emotion/styled';
 import { ArrowDropDown } from '@ndla/icons/common';
+import { MenuButton } from '@ndla/button';
 import { FolderOutlined } from '@ndla/icons/contentType';
 import { colors, spacing, misc, animations } from '@ndla/core';
 import SafeLink from '@ndla/safelink';
-import { SetFocusedFolderId, FolderChildFuncType } from './TreeStructure.types';
+import { CommonFolderItemsProps, FolderType } from './types';
 import { arrowNavigation } from './arrowNavigation';
 
 const OpenButton = styled.button<{ isOpen: boolean }>`
@@ -39,10 +40,10 @@ const FolderItemWrapper = styled.div`
   align-items: center;
 `;
 
-const WrapperForFolderChild = styled.div<{ marked: boolean }>`
+const WrapperForFolderChild = styled.div<{ selected?: boolean }>`
   position: absolute;
   right: ${spacing.xsmall};
-  opacity: ${({ marked }) => (marked ? 1 : 0.25)};
+  opacity: ${({ selected }) => (selected ? 1 : 0.25)};
   &:hover,
   &:focus,
   &:focus-within {
@@ -50,16 +51,20 @@ const WrapperForFolderChild = styled.div<{ marked: boolean }>`
   }
 `;
 
-const FolderName = styled('button', { shouldForwardProp: (name) => !['marked', 'noArrow'].includes(name) })<{
-  marked: boolean;
+const shouldForwardProp = (name: string) => !['selected', 'noArrow'].includes(name);
+
+interface FolderNameProps {
+  selected?: boolean;
   noArrow?: boolean;
-}>`
+}
+
+const FolderName = styled('button', { shouldForwardProp })<FolderNameProps>`
   line-height: 1;
-  background: ${({ marked }) => (marked ? colors.brand.lighter : 'transparent')};
+  background: ${({ selected }) => (selected ? colors.brand.lighter : 'transparent')};
   color: ${colors.text.primary};
   &:hover,
   &:focus {
-    background: ${({ marked }) => (marked ? colors.brand.light : colors.brand.lightest)};
+    background: ${({ selected }) => (selected ? colors.brand.light : colors.brand.lightest)};
     color: ${colors.brand.primary};
     + ${WrapperForFolderChild} {
       opacity: 1;
@@ -82,52 +87,40 @@ const FolderName = styled('button', { shouldForwardProp: (name) => !['marked', '
 
 const FolderNameLink = FolderName.withComponent(SafeLink);
 
-interface Props {
-  name: string;
-  id: string;
-  level: number;
-  onCloseFolder: (id: string) => void;
-  onOpenFolder: (id: string) => void;
-  onMarkFolder: (id: string) => void;
-  onSelectFolder?: (id: string) => void;
-  isOpen: boolean;
-  markedFolderId?: string;
-  focusedFolderId?: string;
-  visibleFolders: string[];
-  loading?: boolean;
-  openOnFolderClick?: boolean;
+interface Props extends CommonFolderItemsProps {
   hideArrow?: boolean;
-  setFocusedFolderId: SetFocusedFolderId;
-  icon?: React.ReactNode;
+  isOpen: boolean;
+  folder: FolderType;
   noPaddingWhenArrowIsHidden?: boolean;
-  folderChild?: FolderChildFuncType;
 }
 
 const FolderItem = ({
+  focusedFolderId,
+  menuItems,
   hideArrow,
-  loading,
+  folder,
+  isOpen,
   level,
-  name,
-  id,
-  visibleFolders,
+  loading,
+  selectedFolder,
+  noPaddingWhenArrowIsHidden,
   onCloseFolder,
   onOpenFolder,
-  onMarkFolder,
   onSelectFolder,
-  isOpen,
-  markedFolderId,
-  focusedFolderId,
   openOnFolderClick,
-  setFocusedFolderId,
-  icon,
-  noPaddingWhenArrowIsHidden,
-  folderChild,
+  setFocusedId,
+  setSelectedFolder,
+  visibleFolders,
 }: Props) => {
+  const { id, icon, name } = folder;
   const ref = useRef<HTMLButtonElement & HTMLAnchorElement>(null);
-  const marked = markedFolderId === id;
+  const selected = selectedFolder && selectedFolder.id === id;
+  const focused = focusedFolderId === id;
 
-  const handleMarkFolder = () => {
-    onMarkFolder(id);
+  const handleClickFolder = () => {
+    setSelectedFolder(folder);
+    setFocusedId(id);
+    onSelectFolder?.(id);
     if (openOnFolderClick) {
       if (isOpen) {
         onCloseFolder(id);
@@ -139,12 +132,20 @@ const FolderItem = ({
 
   useEffect(() => {
     if (focusedFolderId === id) {
-      if (ref.current) {
-        ref.current.focus();
-      }
+      ref.current?.focus();
     }
   }, [focusedFolderId, ref, id]);
 
+  const actions = menuItems?.map((item) => {
+    const { onClick } = item;
+    return {
+      ...item,
+      onClick: (e?: MouseEvent<HTMLDivElement>) => onClick(e, folder),
+    };
+  });
+
+  const linkPath = `/minndla${level > 1 ? '/folders' : ''}/${id}`;
+
   return (
     <FolderItemWrapper>
       {!hideArrow && (
@@ -160,24 +161,19 @@ const FolderItem = ({
         <>
           <FolderName
             ref={ref}
-            onKeyDown={(e) => arrowNavigation(e, id, visibleFolders, setFocusedFolderId, onOpenFolder, onCloseFolder)}
+            onKeyDown={(e) => arrowNavigation(e, id, visibleFolders, setFocusedId, onOpenFolder, onCloseFolder)}
             noArrow={hideArrow && !noPaddingWhenArrowIsHidden}
-            tabIndex={marked ? 0 : -1}
-            marked={marked}
+            tabIndex={selected || focused ? 0 : -1}
+            selected={selected}
             disabled={loading}
-            onFocus={() => {
-              setFocusedFolderId(id);
-            }}
-            onClick={() => {
-              handleMarkFolder();
-              onSelectFolder(id);
-            }}>
+            onFocus={() => setFocusedId(id)}
+            onClick={handleClickFolder}>
             {icon || <FolderOutlined />}
             {name}
           </FolderName>
-          {folderChild && (
-            <WrapperForFolderChild marked={marked}>
-              {folderChild(id, marked || id === focusedFolderId ? 0 : -1)}
+          {actions && (
+            <WrapperForFolderChild selected={selected}>
+              <MenuButton size="xsmall" menuItems={actions} tabIndex={selected || id === focusedFolderId ? 0 : -1} />
             </WrapperForFolderChild>
           )}
         </>
@@ -185,18 +181,14 @@ const FolderItem = ({
         <FolderNameLink
           ref={ref}
           onKeyDown={(e: KeyboardEvent<HTMLElement>) =>
-            arrowNavigation(e, id, visibleFolders, setFocusedFolderId, onOpenFolder, onCloseFolder)
+            arrowNavigation(e, id, visibleFolders, setFocusedId, onOpenFolder, onCloseFolder)
           }
           noArrow={hideArrow}
-          to={loading ? '' : `/minndla/${level > 1 ? 'folders/' : ''}${id}`}
-          tabIndex={marked || level === 1 ? 0 : -1}
-          marked={marked}
-          onFocus={() => {
-            setFocusedFolderId(id);
-          }}
-          onClick={() => {
-            handleMarkFolder();
-          }}>
+          to={loading ? '' : linkPath}
+          tabIndex={selected || focused || level === 1 ? 0 : -1}
+          selected={selected}
+          onFocus={() => setFocusedId(id)}
+          onClick={handleClickFolder}>
           {icon || <FolderOutlined />}
           {name}
         </FolderNameLink>

package/src/TreeStructure/FolderItems.tsx

@@ -11,7 +11,7 @@ import styled from '@emotion/styled';
 import { animations, spacing } from '@ndla/core';
 import FolderItem from './FolderItem';
 import FolderNameInput from './FolderNameInput';
-import { FolderItemsProps } from './TreeStructure.types';
+import { CommonFolderItemsProps, FolderType } from './types';
 
 const StyledUL = styled.ul<{ firstLevel?: boolean }>`
   ${animations.fadeInLeft(animations.durations.fast)};
@@ -30,85 +30,65 @@ const StyledLI = styled.li`
   padding: 0;
 `;
 
+export interface FolderItemsProps extends CommonFolderItemsProps {
+  folders: FolderType[];
+  editable?: boolean;
+  maximumLevelsOfFoldersAllowed: number;
+  newFolderParentId: string | undefined;
+  onCancelNewFolder: () => void;
+  onSaveNewFolder: (name: string, parentId: string) => void;
+  openFolders: string[];
+}
+
 const FolderItems = ({
-  loading,
+  editable,
   folders,
   level,
-  editable,
-  onSelectFolder,
-  onCloseFolder,
-  onOpenFolder,
-  onCreateNewFolder,
+  loading,
+  maximumLevelsOfFoldersAllowed,
+  newFolderParentId,
   onCancelNewFolder,
   onSaveNewFolder,
-  newFolderParentId,
-  visibleFolders,
   openFolders,
-  markedFolderId,
-  onMarkFolder,
-  openOnFolderClick,
-  focusedFolderId,
-  setFocusedFolderId,
-  folderChild,
-  maximumLevelsOfFoldersAllowed,
+  ...rest
 }: FolderItemsProps) => (
   <StyledUL role="group" firstLevel={level === 1}>
-    {folders.map(({ name, subfolders, id, icon }, _index) => {
+    {folders.map((folder) => {
+      const { subfolders, id } = folder;
       const isOpen = openFolders?.includes(id);
       return (
         <StyledLI key={id} role="treeitem">
           <div>
             <FolderItem
+              hideArrow={subfolders?.length === 0 || level > maximumLevelsOfFoldersAllowed}
+              folder={folder}
+              isOpen={isOpen}
               level={level}
-              icon={icon}
-              onSelectFolder={onSelectFolder}
-              openOnFolderClick={openOnFolderClick}
               loading={loading}
-              isOpen={isOpen}
-              id={id}
-              visibleFolders={visibleFolders}
-              name={name}
-              markedFolderId={markedFolderId}
-              focusedFolderId={focusedFolderId}
-              onMarkFolder={onMarkFolder}
-              onCloseFolder={onCloseFolder}
-              onOpenFolder={onOpenFolder}
-              hideArrow={subfolders?.length === 0 || level > maximumLevelsOfFoldersAllowed}
               noPaddingWhenArrowIsHidden={editable && level === 1 && subfolders?.length === 0}
-              setFocusedFolderId={setFocusedFolderId}
-              folderChild={folderChild}
+              {...rest}
             />
           </div>
           {newFolderParentId === id && (
             <FolderNameInput
-              parentId={newFolderParentId}
               loading={loading}
               onCancelNewFolder={onCancelNewFolder}
               onSaveNewFolder={onSaveNewFolder}
+              parentId={newFolderParentId}
             />
           )}
           {subfolders && isOpen && (
             <FolderItems
-              onSelectFolder={onSelectFolder}
-              loading={loading}
-              newFolderParentId={newFolderParentId}
-              visibleFolders={visibleFolders}
-              openFolders={openFolders}
-              level={level + 1}
               editable={editable}
               folders={subfolders}
-              onCloseFolder={onCloseFolder}
-              onOpenFolder={onOpenFolder}
-              onCreateNewFolder={onCreateNewFolder}
-              onSaveNewFolder={onSaveNewFolder}
-              onCancelNewFolder={onCancelNewFolder}
-              markedFolderId={markedFolderId}
-              onMarkFolder={onMarkFolder}
-              openOnFolderClick={openOnFolderClick}
-              focusedFolderId={focusedFolderId}
-              setFocusedFolderId={setFocusedFolderId}
-              folderChild={folderChild}
+              level={level + 1}
+              loading={loading}
               maximumLevelsOfFoldersAllowed={maximumLevelsOfFoldersAllowed}
+              newFolderParentId={newFolderParentId}
+              onCancelNewFolder={onCancelNewFolder}
+              onSaveNewFolder={onSaveNewFolder}
+              openFolders={openFolders}
+              {...rest}
             />
           )}
         </StyledLI>

package/src/TreeStructure/FolderNameInput.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React, { useEffect, useState, useRef } from 'react';
+import React, { useEffect, useState, useRef, ChangeEvent, KeyboardEvent } from 'react';
 import styled from '@emotion/styled';
 import { FolderOutlined } from '@ndla/icons/contentType';
 import { ArrowDropDown as ArrowDropDownRaw } from '@ndla/icons/common';
@@ -65,11 +65,9 @@ const FolderNameInput = ({ onSaveNewFolder, parentId, onCancelNewFolder, loading
   const inputRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
-    if (inputRef.current) {
-      inputRef.current.select();
-      if (isMobile) {
-        inputRef.current.scrollIntoView({ behavior: 'smooth' });
-      }
+    inputRef.current?.select();
+    if (isMobile) {
+      inputRef.current?.scrollIntoView({ behavior: 'smooth' });
     }
   }, []);
 
@@ -85,7 +83,7 @@ const FolderNameInput = ({ onSaveNewFolder, parentId, onCancelNewFolder, loading
           disabled={loading}
           value={name}
           onBlur={() => onCancelNewFolder()}
-          onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {
+          onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {
             if (e.key === 'Escape') {
               onCancelNewFolder();
             } else if (e.key === 'Enter' || e.key === 'Tab') {
@@ -93,10 +91,7 @@ const FolderNameInput = ({ onSaveNewFolder, parentId, onCancelNewFolder, loading
               onSaveNewFolder(name, parentId);
             }
           }}
-          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-            const target = e.target;
-            setName(target.value);
-          }}
+          onChange={(e: ChangeEvent<HTMLInputElement>) => setName(e.target.value)}
         />
         {loading && <Spinner size="small" />}
       </InputWrapper>

package/src/TreeStructure/TreeStructure.tsx

@@ -6,17 +6,18 @@
  *
  */
 
-import React, { useEffect, useState, useRef, useMemo } from 'react';
+import React, { useEffect, useState, useMemo } from 'react';
 import { AddButton } from '@ndla/button';
 import Tooltip from '@ndla/tooltip';
 import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
 import { spacing, fonts } from '@ndla/core';
 import { uniq } from 'lodash';
+import { IFolder } from '@ndla/types-learningpath-api';
 import TreeStructureStyledWrapper from './TreeStructureWrapper';
 import FolderItems from './FolderItems';
-import { getPathOfFolder, getFolderName, flattenFolders } from './helperFunctions';
-import { TreeStructureProps } from './TreeStructure.types';
+import { flattenFolders } from './helperFunctions';
+import { CommonTreeStructureProps, FolderType } from './types';
 
 export const MAX_LEVEL_FOR_FOLDERS = 4;
 
@@ -29,42 +30,60 @@ const AddFolderWrapper = styled.div`
   margin-top: ${spacing.xsmall};
 `;
 
+export interface TreeStructureProps extends CommonTreeStructureProps {
+  defaultOpenFolders?: string[];
+  folders: FolderType[];
+  editable?: boolean;
+  framed?: boolean;
+  label?: string;
+  maximumLevelsOfFoldersAllowed?: number;
+  onNewFolder: (name: string, parentId: string) => Promise<IFolder>;
+}
+
 const TreeStructure = ({
+  defaultOpenFolders,
+  editable,
+  menuItems,
   folders,
+  framed,
   label,
-  editable,
   loading,
+  maximumLevelsOfFoldersAllowed = MAX_LEVEL_FOR_FOLDERS,
   onNewFolder,
   onSelectFolder,
   openOnFolderClick,
-  framed,
-  folderIdMarkedByDefault,
-  defaultOpenFolders,
-  folderChild,
-  maximumLevelsOfFoldersAllowed = MAX_LEVEL_FOR_FOLDERS,
 }: TreeStructureProps) => {
   const { t } = useTranslation();
-  const [newFolderParentId, setNewFolderParentId] = useState<string | undefined>();
+
+  const defaultSelectedFolderId = defaultOpenFolders && defaultOpenFolders[defaultOpenFolders.length - 1];
+
   const [openFolders, setOpenFolders] = useState<string[]>(defaultOpenFolders || []);
-  const [focusedFolderId, setFocusedFolderId] = useState<string | undefined>();
-  const [markedFolderId, setMarkedFolderId] = useState<string | undefined>(folderIdMarkedByDefault || folders[0]?.id);
-  const treestructureRef = useRef<HTMLDivElement>(null);
-  const wrapperRef = useRef<HTMLDivElement>(null);
-  const rootLevelId = 'treestructure-root';
-
-  const visibleFolders = useMemo(
-    () => flattenFolders(folders, openFolders).map((folder) => folder.id),
-    [folders, openFolders],
-  );
+
+  const [newFolderParentId, setNewFolderParentId] = useState<string | undefined>();
+  const [focusedId, setFocusedId] = useState<string | undefined>();
+  const [selectedFolder, setSelectedFolder] = useState<FolderType | undefined>();
+
+  const flattenedFolders = useMemo(() => flattenFolders(folders, openFolders), [folders, openFolders]);
+  const visibleFolderIds = flattenedFolders.map((folder) => folder.id);
 
   useEffect(() => {
     if (defaultOpenFolders) {
       setOpenFolders((prev) => {
-        return uniq([...defaultOpenFolders, ...prev]);
+        return uniq(defaultOpenFolders.concat(prev));
       });
     }
   }, [defaultOpenFolders]);
 
+  useEffect(() => {
+    if (defaultSelectedFolderId !== undefined) {
+      const selected = flattenFolders(folders).find((folder) => folder.id === defaultSelectedFolderId);
+      if (selected) {
+        setSelectedFolder(selected);
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [defaultSelectedFolderId]);
+
   useEffect(() => {
     if (!loading) {
       setNewFolderParentId(undefined);
@@ -72,39 +91,30 @@ const TreeStructure = ({
   }, [loading]);
 
   const onCloseFolder = (id: string) => {
-    // Did we just closed a folder with a marked folder inside it?
-    // If so, we need to mark the folder we just closed.
-    if (markedFolderId) {
-      const closingFolderPath = getPathOfFolder(folders, id);
-      const markedFolderPath = getPathOfFolder(folders, markedFolderId);
-      const markedFolderIsSubPath = closingFolderPath.every(
-        (folderId, _index) => markedFolderPath[_index] === folderId,
-      );
-      if (markedFolderIsSubPath) {
+    const closedFolder = flattenedFolders.find((folder) => folder.id === id);
+
+    if (closedFolder) {
+      const subFolders = closedFolder.subfolders && flattenFolders(closedFolder.subfolders);
+      if (subFolders.some((folder) => folder.id === selectedFolder?.id)) {
         if (onSelectFolder) {
-          setMarkedFolderId(closingFolderPath[closingFolderPath.length - 1]);
-          onSelectFolder(closingFolderPath[closingFolderPath.length - 1]);
-        } else {
-          setFocusedFolderId(closingFolderPath[closingFolderPath.length - 1]);
+          setSelectedFolder(closedFolder);
+          onSelectFolder(closedFolder.id);
         }
+        setFocusedId(closedFolder.id);
       }
     }
-    setOpenFolders(openFolders.filter((folder) => folder !== id));
+    setOpenFolders(openFolders.filter((folderId) => folderId !== id));
   };
 
   const onOpenFolder = (id: string) => {
     setOpenFolders(uniq(openFolders.concat(id)));
   };
 
-  const onCreateNewFolder = (parentId: string) => {
-    setNewFolderParentId(parentId);
-  };
-
   const onSaveNewFolder = (name: string, parentId: string) => {
-    onNewFolder(name, parentId).then((newFolderId) => {
-      if (newFolderId) {
-        setMarkedFolderId(newFolderId);
-        setFocusedFolderId(newFolderId);
+    onNewFolder(name, parentId).then((newFolder) => {
+      if (newFolder) {
+        setSelectedFolder(newFolder);
+        setFocusedId(newFolder.id);
         setOpenFolders(uniq(openFolders.concat(parentId)));
       }
     });
@@ -114,39 +124,33 @@ const TreeStructure = ({
     setNewFolderParentId(undefined);
   };
 
-  const onMarkFolder = (id: string) => {
-    setMarkedFolderId(id);
-    setFocusedFolderId(id);
-  };
-
-  const paths = getPathOfFolder(folders, markedFolderId || '');
-  const canAddFolder = editable && paths.length < (maximumLevelsOfFoldersAllowed || 1);
+  const canAddFolder =
+    editable && selectedFolder && selectedFolder?.breadcrumbs.length < (maximumLevelsOfFoldersAllowed || 1);
 
   return (
-    <div ref={treestructureRef}>
-      {label && <StyledLabel htmlFor={rootLevelId}>{label}</StyledLabel>}
-      <TreeStructureStyledWrapper ref={wrapperRef} id={rootLevelId} aria-label="Menu tree" role="tree" framed={framed}>
+    <div>
+      {label && <StyledLabel>{label}</StyledLabel>}
+      <TreeStructureStyledWrapper aria-label="Menu tree" role="tree" framed={framed}>
         <FolderItems
-          onSelectFolder={onSelectFolder}
-          level={1}
-          folders={folders}
           editable={editable}
-          onOpenFolder={onOpenFolder}
-          onCloseFolder={onCloseFolder}
+          focusedFolderId={focusedId}
+          menuItems={menuItems}
+          folders={folders}
+          level={1}
+          loading={loading}
+          selectedFolder={selectedFolder}
+          maximumLevelsOfFoldersAllowed={maximumLevelsOfFoldersAllowed}
           newFolderParentId={newFolderParentId}
-          onCreateNewFolder={onCreateNewFolder}
           onCancelNewFolder={onCancelNewFolder}
+          onCloseFolder={onCloseFolder}
+          onOpenFolder={onOpenFolder}
           onSaveNewFolder={onSaveNewFolder}
-          visibleFolders={visibleFolders}
+          onSelectFolder={onSelectFolder}
           openFolders={openFolders}
-          markedFolderId={markedFolderId}
-          onMarkFolder={onMarkFolder}
           openOnFolderClick={openOnFolderClick}
-          loading={loading}
-          focusedFolderId={focusedFolderId}
-          setFocusedFolderId={setFocusedFolderId}
-          folderChild={folderChild}
-          maximumLevelsOfFoldersAllowed={maximumLevelsOfFoldersAllowed}
+          setFocusedId={setFocusedId}
+          setSelectedFolder={setSelectedFolder}
+          visibleFolders={visibleFolderIds}
         />
       </TreeStructureStyledWrapper>
       {editable && (
@@ -155,16 +159,14 @@ const TreeStructure = ({
             tooltip={
               canAddFolder
                 ? t('myNdla.newFolderUnder', {
-                    folderName: getFolderName(folders, markedFolderId),
+                    folderName: selectedFolder?.name,
                   })
                 : t('treeStructure.maxFoldersAlreadyAdded')
             }>
             <AddButton
               disabled={!canAddFolder}
               aria-label={t('myNdla.newFolder')}
-              onClick={() => {
-                setNewFolderParentId(markedFolderId);
-              }}>
+              onClick={() => setNewFolderParentId(selectedFolder?.id)}>
               {t('myNdla.newFolder')}
             </AddButton>
           </Tooltip>

package/src/TreeStructure/helperFunctions.ts

@@ -1,44 +1,10 @@
-import { FolderStructureProps } from './TreeStructure.types';
+import { FolderType } from './types';
 
-export const getPathOfFolder = (data: FolderStructureProps[], findId: string): string[] => {
-  const paths = (folders: FolderStructureProps[], path: string[]): string[] => {
-    for (const { id, subfolders } of folders) {
-      if (id === findId) {
-        return [...path, id];
-      } else if (subfolders?.length) {
-        return paths(subfolders, [...path, id]);
-      }
-    }
-    return [];
-  };
-  return paths(data, []);
-};
-
-export const getFolderName = (data: FolderStructureProps[], findId: string | undefined): string | undefined => {
-  if (!findId) {
-    return undefined;
-  }
-  let folderName: string | undefined;
-  const paths = (dataChildren: FolderStructureProps[]) => {
-    dataChildren.some(({ id, name, subfolders }, _index) => {
-      if (id === findId) {
-        folderName = name;
-        return true;
-      } else if (subfolders?.length) {
-        return paths(subfolders);
-      }
-      return false;
-    });
-  };
-  paths(data);
-  return folderName;
-};
-
-export const flattenFolders = (folders: FolderStructureProps[], openFolders?: string[]): FolderStructureProps[] => {
+export const flattenFolders = (folders: FolderType[], openFolders?: string[]): FolderType[] => {
   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 FolderStructureProps[]);
+  }, [] as FolderType[]);
 };

package/src/TreeStructure/index.ts

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