@ndla/ui 26.1.0 → 27.0.0

package/src/TreeStructure/TreeStructure.tsx

@@ -7,19 +7,15 @@
  */
 
 import React, { useEffect, useState, useMemo, useRef } from 'react';
-import { ButtonV2 as Button, IconButtonDualStates } from '@ndla/button';
-import { Plus } from '@ndla/icons/action';
-import { ChevronDown, ChevronUp } from '@ndla/icons/common';
-import Tooltip from '@ndla/tooltip';
-import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
 import { colors, fonts, misc, spacing } from '@ndla/core';
 import { css } from '@emotion/core';
 import { uniq } from 'lodash';
 import { IFolder } from '@ndla/types-learningpath-api';
 import FolderItems from './FolderItems';
-import { flattenFolders } from './helperFunctions';
+import { flattenFolders, treestructureId } from './helperFunctions';
 import { CommonTreeStructureProps, FolderType, TreeStructureType } from './types';
+import ComboboxButton from './ComboboxButton';
 
 export const MAX_LEVEL_FOR_FOLDERS = 4;
 
@@ -27,17 +23,6 @@ const StyledLabel = styled.label`
   font-weight: ${fonts.weight.semibold};
 `;
 
-interface StyledRowProps {
-  isOpen: boolean;
-}
-
-const StyledRow = styled.div<StyledRowProps>`
-  display: flex;
-  justify-content: space-between;
-  padding: ${spacing.xxsmall};
-  border-bottom: ${({ isOpen }) => isOpen && `1px solid ${colors.brand.tertiary}`};
-`;
-
 const StyledTreeStructure = styled.div`
   flex: 1;
   display: flex;
@@ -48,7 +33,7 @@ const TreeStructureWrapper = styled.div<{ type: TreeStructureType }>`
   display: flex;
   flex-direction: column;
   ${({ type }) =>
-    (type === 'normal' || type === 'picker') &&
+    type === 'picker' &&
     css`
       overflow: hidden;
       border: 1px solid ${colors.brand.neutral7};
@@ -60,12 +45,14 @@ const TreeStructureWrapper = styled.div<{ type: TreeStructureType }>`
     border-color: ${colors.brand.tertiary};
   }
 `;
+
 interface ScrollableDivProps {
   type: TreeStructureType;
 }
+
 const ScrollableDiv = styled.div<ScrollableDivProps>`
   ${({ type }) =>
-    (type === 'picker' || type === 'normal') &&
+    type === 'picker' &&
     css`
       overflow: overlay;
       ::-webkit-scrollbar {
@@ -81,34 +68,11 @@ const ScrollableDiv = styled.div<ScrollableDivProps>`
     `}
 `;
 
-const StyledSelectedFolder = styled(Button)`
-  flex: 1;
-  justify-content: flex-start;
-  :hover,
-  :focus {
-    background: none;
-    box-shadow: none;
-    border-color: transparent;
-  }
-`;
-
-const StyledAddFolderButton = styled(Button)`
-  &,
-  &:disabled {
-    border-color: transparent;
-  }
-`;
-
-const StyledPlus = styled(Plus)`
-  height: 24px;
-  width: 24px;
-`;
-
 export interface TreeStructureProps extends CommonTreeStructureProps {
   defaultOpenFolders?: string[];
   folders: FolderType[];
   label?: string;
-  maximumLevelsOfFoldersAllowed?: number;
+  maxLevel?: number;
   onNewFolder?: (name: string, parentId: string) => Promise<IFolder>;
 }
 
@@ -117,42 +81,24 @@ const TreeStructure = ({
   folders,
   label,
   loading,
-  maximumLevelsOfFoldersAllowed = MAX_LEVEL_FOR_FOLDERS,
+  maxLevel = MAX_LEVEL_FOR_FOLDERS,
   onNewFolder,
   onSelectFolder,
-  openOnFolderClick,
   targetResource,
-  type = 'normal',
+  type,
 }: TreeStructureProps) => {
-  const { t } = useTranslation();
-
-  const ref = useRef<HTMLDivElement>(null);
+  const ref = useRef<HTMLButtonElement>(null);
 
   const defaultSelectedFolderId = defaultOpenFolders && defaultOpenFolders[defaultOpenFolders.length - 1];
 
   const [openFolders, setOpenFolders] = useState<string[]>(defaultOpenFolders || []);
 
   const [newFolderParentId, setNewFolderParentId] = useState<string | undefined>();
-  const [focusedId, setFocusedId] = useState<string | undefined>();
+  const [focusedFolder, setFocusedFolder] = useState<FolderType | undefined>();
   const [selectedFolder, setSelectedFolder] = useState<FolderType | undefined>();
-  const [showTree, setShowTree] = useState(type !== 'picker');
+  const [showTree, setShowTree] = useState(type === 'navigation');
 
   const flattenedFolders = useMemo(() => flattenFolders(folders, openFolders), [folders, openFolders]);
-  const visibleFolderIds = flattenedFolders.map((folder) => folder.id);
-
-  useEffect(() => {
-    const handleClickOutside = (e: MouseEvent) => {
-      if (e.target instanceof Element && ref.current && !ref.current.contains(e.target)) {
-        setShowTree(false);
-      }
-    };
-    if (type === 'picker') {
-      document.addEventListener('mousedown', handleClickOutside);
-      return () => {
-        document.removeEventListener('mousedown', handleClickOutside);
-      };
-    }
-  }, [ref, type]);
 
   useEffect(() => {
     if (defaultOpenFolders) {
@@ -165,25 +111,25 @@ const TreeStructure = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [defaultOpenFolders]);
 
-  useEffect(() => {
-    setNewFolderParentId(undefined);
-  }, [selectedFolder]);
-
   useEffect(() => {
     if (defaultSelectedFolderId !== undefined) {
       const selected = flattenFolders(folders).find((folder) => folder.id === defaultSelectedFolderId);
       if (selected) {
         setSelectedFolder(selected);
+        if (type === 'picker') {
+          setFocusedFolder(selected);
+        }
       }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [defaultSelectedFolderId]);
 
-  useEffect(() => {
-    if (!loading) {
+  const onToggleTree = (open: boolean) => {
+    setShowTree(open);
+    if (!open) {
       setNewFolderParentId(undefined);
     }
-  }, [loading]);
+  };
 
   const onCloseFolder = (id: string) => {
     const closedFolder = flattenedFolders.find((folder) => folder.id === id);
@@ -191,11 +137,7 @@ const TreeStructure = ({
     if (closedFolder) {
       const subFolders = closedFolder.subfolders && flattenFolders(closedFolder.subfolders);
       if (subFolders.some((folder) => folder.id === selectedFolder?.id)) {
-        if (onSelectFolder) {
-          setSelectedFolder(closedFolder);
-          onSelectFolder(closedFolder.id);
-        }
-        setFocusedId(closedFolder.id);
+        setFocusedFolder(closedFolder);
       }
     }
     setOpenFolders(openFolders.filter((folderId) => folderId !== id));
@@ -208,86 +150,68 @@ const TreeStructure = ({
   const onSaveNewFolder = (name: string, parentId: string) => {
     onNewFolder?.(name, parentId).then((newFolder) => {
       if (newFolder) {
-        setNewFolderParentId?.(undefined);
         setSelectedFolder(newFolder);
         onSelectFolder?.(newFolder.id);
-        setFocusedId(newFolder.id);
+        setFocusedFolder(newFolder);
         setOpenFolders(uniq(openFolders.concat(parentId)));
+        setNewFolderParentId?.(undefined);
+        ref.current?.focus();
       }
     });
   };
 
   const onCancelNewFolder = () => {
     setNewFolderParentId?.(undefined);
+    ref.current?.focus();
   };
 
-  const canAddFolder = selectedFolder && selectedFolder?.breadcrumbs.length < (maximumLevelsOfFoldersAllowed || 1);
+  const setFolderFocus = (folder: FolderType, focus?: boolean) => {
+    setFocusedFolder(folder);
+
+    if (focus) {
+      ref.current?.focus();
+    }
+  };
 
   return (
-    <StyledTreeStructure ref={ref}>
-      {label && <StyledLabel>{label}</StyledLabel>}
-      <TreeStructureWrapper aria-label={label} type={type}>
+    <StyledTreeStructure>
+      {label && <StyledLabel id={treestructureId(type, 'label')}>{label}</StyledLabel>}
+      <TreeStructureWrapper
+        aria-label={label}
+        type={type}
+        onBlur={(e) => {
+          if (type === 'picker' && !e.currentTarget.contains(e.relatedTarget)) {
+            onToggleTree(false);
+          }
+        }}>
         {type === 'picker' && (
-          <StyledRow isOpen={showTree}>
-            <StyledSelectedFolder
-              variant="ghost"
-              colorTheme="light"
-              fontWeight="normal"
-              shape="sharp"
-              onClick={() => {
-                setShowTree(!showTree);
-              }}>
-              {selectedFolder?.name}
-            </StyledSelectedFolder>
-            {onNewFolder && showTree && (
-              <Tooltip
-                tooltip={
-                  canAddFolder
-                    ? t('myNdla.newFolderUnder', {
-                        folderName: selectedFolder?.name,
-                      })
-                    : t('treeStructure.maxFoldersAlreadyAdded')
-                }>
-                <StyledAddFolderButton
-                  variant="outline"
-                  shape="pill"
-                  disabled={!canAddFolder}
-                  aria-label={
-                    canAddFolder
-                      ? t('myNdla.newFolderUnder', {
-                          folderName: selectedFolder?.name,
-                        })
-                      : t('treeStructure.maxFoldersAlreadyAdded')
-                  }
-                  onClick={() => setNewFolderParentId(selectedFolder?.id)}>
-                  <StyledPlus /> {t('myNdla.newFolder')}
-                </StyledAddFolderButton>
-              </Tooltip>
-            )}
-            <IconButtonDualStates
-              ariaLabelActive={t('treeStructure.hideFolders')}
-              ariaLabelInActive={t('treeStructure.showFolders')}
-              active={showTree}
-              variant="ghost"
-              colorTheme="greyLighter"
-              inactiveIcon={<ChevronDown />}
-              activeIcon={<ChevronUp />}
-              size="small"
-              onClick={() => {
-                setShowTree(!showTree);
-              }}
-            />
-          </StyledRow>
+          <ComboboxButton
+            ref={ref}
+            showTree={showTree}
+            type={type}
+            label={label}
+            focusedFolder={focusedFolder}
+            selectedFolder={selectedFolder}
+            setSelectedFolder={setSelectedFolder}
+            setFocusedFolder={setFocusedFolder}
+            onToggleTree={onToggleTree}
+            flattenedFolders={flattenedFolders}
+            onCloseFolder={onCloseFolder}
+            onOpenFolder={onOpenFolder}
+            onNewFolder={onNewFolder}
+            maxLevel={maxLevel}
+            setNewFolderParentId={setNewFolderParentId}
+          />
         )}
         {showTree && (
           <ScrollableDiv type={type}>
             <FolderItems
-              focusedFolderId={focusedId}
+              focusedFolder={focusedFolder}
               folders={folders}
               level={0}
               loading={loading}
               selectedFolder={selectedFolder}
-              maxLevel={maximumLevelsOfFoldersAllowed}
+              maxLevel={maxLevel}
               newFolderParentId={newFolderParentId}
               onCancelNewFolder={onCancelNewFolder}
               onCloseFolder={onCloseFolder}
@@ -295,12 +219,12 @@ const TreeStructure = ({
               onSaveNewFolder={onSaveNewFolder}
               onSelectFolder={onSelectFolder}
               openFolders={openFolders}
-              openOnFolderClick={openOnFolderClick}
-              setFocusedId={setFocusedId}
+              setFocusedFolder={setFolderFocus}
               setSelectedFolder={setSelectedFolder}
               targetResource={targetResource}
-              visibleFolders={visibleFolderIds}
+              visibleFolders={flattenedFolders}
               type={type}
+              closeTree={() => onToggleTree(false)}
             />
           </ScrollableDiv>
         )}

package/src/TreeStructure/arrowNavigation.ts

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

package/src/TreeStructure/helperFunctions.ts

@@ -1,4 +1,4 @@
-import { FolderType } from './types';
+import { FolderType, TreeStructureType } from './types';
 
 export const flattenFolders = (folders: FolderType[], openFolders?: string[]): FolderType[] => {
   return folders.reduce((acc, { subfolders, id, ...rest }) => {
@@ -8,3 +8,7 @@ export const flattenFolders = (folders: FolderType[], openFolders?: string[]): F
     return acc.concat({ subfolders, id, ...rest }, flattenFolders(subfolders, openFolders));
   }, [] as FolderType[]);
 };
+
+export const treestructureId = (type: TreeStructureType, modifier: string) => {
+  return `${type}-treestructure-${modifier}`;
+};

package/src/TreeStructure/types.ts

@@ -15,7 +15,7 @@ export interface FolderType extends IFolder {
   isNavigation?: boolean;
 }
 
-export type TreeStructureType = 'normal' | 'navigation' | 'picker';
+export type TreeStructureType = 'navigation' | 'picker';
 
 export interface TreeStructureMenuProps extends Omit<MenuItemProps, 'onClick'> {
   onClick: (e: MouseEvent<HTMLDivElement> | undefined, folder: FolderType) => void;
@@ -24,20 +24,19 @@ export interface TreeStructureMenuProps extends Omit<MenuItemProps, 'onClick'> {
 export interface CommonTreeStructureProps {
   loading?: boolean;
   onSelectFolder?: (id: string) => void;
-  openOnFolderClick?: boolean;
   targetResource?: IResource;
-  framed?: boolean;
   type: TreeStructureType;
 }
 
 export interface CommonFolderItemsProps extends CommonTreeStructureProps {
-  focusedFolderId?: string;
+  focusedFolder?: FolderType;
   level: number;
   maxLevel: number;
   selectedFolder?: FolderType;
   onCloseFolder: (id: string) => void;
   onOpenFolder: (id: string) => void;
-  setFocusedId: (id: string) => void;
-  setSelectedFolder: (id: FolderType) => void;
-  visibleFolders: string[];
+  setFocusedFolder: (folder: FolderType, focus?: boolean) => void;
+  setSelectedFolder: (folder: FolderType) => void;
+  visibleFolders: FolderType[];
+  closeTree: () => void;
 }

package/src/locale/messages-en.ts

@@ -26,6 +26,7 @@ const messages = {
     newFolder: {
       placeholder: 'Add foldername',
       defaultName: 'New folder',
+      folderName: 'Folder name',
     },
   },
   tagSelector: {
@@ -857,6 +858,7 @@ const messages = {
   },
   cancel: 'Cancel',
   close: 'Close',
+  loading: 'Loading',
   title: 'Title',
   save: 'Save',
   image: {
@@ -996,10 +998,14 @@ const messages = {
       folderDeleted: '"{{folderName}}" deleted',
       folderCreated: '"{{folderName}} created',
     },
+    tagList: 'Tags',
     tags: '{{count}} tag',
     tags_plural: '{{count}} tags',
+    moreTags: 'Show one more tag',
+    moreTags_plural: 'Show {{count}} more tags',
     confirmDeleteFolder:
       'Are you sure you want to delete this folder? Subfolders of this folder will also be deleted. This action cannot be undone.',
+
     confirmDeleteTag: 'Are you sure you want to delete this tag? This process cannot be undone.',
     myFolders: 'My folders',
     myTags: 'My tags',

package/src/locale/messages-nb.ts

@@ -26,6 +26,7 @@ const messages = {
     newFolder: {
       placeholder: 'Skriv navn på mappe',
       defaultName: 'Ny mappe',
+      folderName: 'Mappenavn',
     },
   },
   tagSelector: {
@@ -854,6 +855,7 @@ const messages = {
     close: 'Lukk meny',
   },
   close: 'Lukk',
+  loading: 'Laster',
   title: 'Tittel',
   cancel: 'Avbryt',
   save: 'Lagre',
@@ -994,8 +996,11 @@ const messages = {
       folderDeleted: '"{{folderName}}" er slettet',
       folderCreated: '"{{folderName}}" er opprettet',
     },
+    tagList: 'Emneknagger',
     tags: '{{count}} emneknagg',
     tags_plural: '{{count}} emneknagger',
+    moreTags: 'Vis en emneknagg til',
+    moreTags_plural: 'Vis {{count}} emneknagger til',
     confirmDeleteFolder:
       'Er du sikker på at du vil slette mappen? Dersom mappen har undermapper vil disse også slettes. Handlingen kan ikke endres.',
     confirmDeleteTag: 'Er du sikker på at du vil slette emneknagg? Denne handlingen kan ikke endres.',

package/src/locale/messages-nn.ts

@@ -26,6 +26,7 @@ const messages = {
     newFolder: {
       placeholder: 'Skriv namn på mappe',
       defaultName: 'Ny mappe',
+      folderName: 'Mappenavn',
     },
   },
   tagSelector: {
@@ -856,6 +857,7 @@ const messages = {
   },
   cancel: 'Avbryt',
   close: 'Lukk',
+  loading: 'Laster',
   title: 'Tittel',
   save: 'Lagre',
   image: {
@@ -995,8 +997,11 @@ const messages = {
       folderDeleted: '"{{folderName}}" er sletta',
       folderCreated: '"{{folderName}}" er oppretta',
     },
+    tagList: 'Emneknaggar',
     tags: '{{count}} emneknagg',
     tags_plural: '{{count}} emneknaggar',
+    moreTags: 'Vis ein emneknagg til',
+    moreTags_plural: 'Vis {{count}} emneknaggar til',
     confirmDeleteFolder:
       'Er du sikker på at du vil slette mappa? Dersom mappa har undermapper vil desse også slettast. Denne handlinga kan ikkje endrast.',
     confirmDeleteTag: 'Er du sikker på at du vil slette tag? Denne handlinga kan ikkje endrast.',

package/src/locale/messages-se.ts

@@ -26,6 +26,7 @@ const messages = {
     newFolder: {
       placeholder: 'Čále nama máhppii',
       defaultName: 'Ođđa máhppa',
+      folderName: 'Mappenavn',
     },
   },
   tagSelector: {
@@ -855,6 +856,7 @@ const messages = {
     close: 'Govčča fálu',
   },
   close: 'Govčča',
+  loading: 'Laster',
   title: 'Tihttel',
   cancel: 'Botkke',
   save: 'Vurke',
@@ -995,8 +997,11 @@ const messages = {
       folderDeleted: '"{{folderName}}" lea sihkkojuvvon',
       folderCreated: '"{{folderName}}" er oppretta',
     },
+    tagList: 'Emneknagger',
     tags: '{{count}} fáddágilkor',
     tags_plural: '{{count}} fáddágilkorat',
+    moreTags: 'Vis ein emneknagg til',
+    moreTags_plural: 'Vis {{count}} emneknaggar til',
     confirmDeleteFolder: 'Leat go áibbas sihkar ahte dáhtut sihkkut máhpa? Dan ii sáhte gáhtat.',
     confirmDeleteTag: 'Leat go áibbas sihkar ahte dáhtut sihkkut fáddágilkora? Dan ii sáhte gáhtat.',
     myFolders: 'Mu máhpat',
@@ -1013,6 +1018,7 @@ const messages = {
     listView: 'Oppalašlistu',
     detailView: 'Bienalaš oppalašlistu',
     shortView: 'Oanehis listu',
+
     myPage: {
       confirmDeleteAccount: 'Leat go áibbas sihkar ahte dáhtut sihkkut kontu?',
       confirmDeleteAccountButton: 'Sihko kontu',

package/src/locale/messages-sma.ts

@@ -26,6 +26,7 @@ const messages = {
     newFolder: {
       placeholder: 'Skriv navn på mappe',
       defaultName: 'Ny mappe',
+      folderName: 'Mappenavn',
     },
   },
   tagSelector: {
@@ -855,6 +856,7 @@ const messages = {
     close: 'Lukk meny',
   },
   close: 'Lukk',
+  loading: 'Laster',
   title: 'Tittel',
   cancel: 'Avbryt',
   save: 'Lagre',
@@ -995,10 +997,14 @@ const messages = {
       folderDeleted: '"{{folderName}}" er slettet',
       folderCreated: '"{{folderName}}" er oppretta',
     },
+    tagList: 'Emneknagg',
     tags: '{{count}} emneknagg',
     tags_plural: '{{count}} emneknagger',
+    moreTags: 'Vis ein emneknagg til',
+    moreTags_plural: 'Vis {{count}} emneknaggar til',
     confirmDeleteFolder:
       'Er du sikker på at du vil slette mappa? Dersom mappa har undermappar vil disse også slettes. Denne handlinga kan ikkje endrast.',
+
     confirmDeleteTag: 'Er du sikker på at du vil slette emneknagg? Denne handlingen kan ikke endres.',
     myFolders: 'Mine mapper',
     myTags: 'Mine emneknagger',