@ndla/ui 19.1.0 → 20.0.0

package/src/TreeStructure/FolderItems.tsx

@@ -32,65 +32,73 @@ const StyledLI = styled.li`
 
 const FolderItems = ({
   loading,
-  data,
-  idPaths,
+  folders,
+  level,
   editable,
-  onToggleOpen,
+  onSelectFolder,
+  onCloseFolder,
+  onOpenFolder,
   onCreateNewFolder,
   onCancelNewFolder,
   onSaveNewFolder,
-  newFolder,
+  newFolderParentId,
+  visibleFolders,
   openFolders,
   markedFolderId,
   onMarkFolder,
   openOnFolderClick,
   focusedFolderId,
   setFocusedFolderId,
-  firstLevel,
   folderChild,
   maximumLevelsOfFoldersAllowed,
 }: FolderItemsProps) => (
-  <StyledUL role="group" firstLevel={firstLevel}>
-    {data.map(({ name, data: dataChildren, id, url, icon }, _index) => {
-      const newIdPaths = [...idPaths, _index];
+  <StyledUL role="group" firstLevel={level === 1}>
+    {folders.map(({ name, subfolders, id, icon }, _index) => {
       const isOpen = openFolders?.includes(id);
       return (
         <StyledLI key={id} role="treeitem">
           <div>
             <FolderItem
+              level={level}
               icon={icon}
-              url={url}
+              onSelectFolder={onSelectFolder}
               openOnFolderClick={openOnFolderClick}
               loading={loading}
               isOpen={isOpen}
               id={id}
+              visibleFolders={visibleFolders}
               name={name}
               markedFolderId={markedFolderId}
               focusedFolderId={focusedFolderId}
-              onToggleOpen={onToggleOpen}
               onMarkFolder={onMarkFolder}
-              hideArrow={dataChildren?.length === 0 || newIdPaths.length >= maximumLevelsOfFoldersAllowed}
-              noPaddingWhenArrowIsHidden={editable && firstLevel && dataChildren?.length === 0}
+              onCloseFolder={onCloseFolder}
+              onOpenFolder={onOpenFolder}
+              hideArrow={subfolders?.length === 0 || level > maximumLevelsOfFoldersAllowed}
+              noPaddingWhenArrowIsHidden={editable && level === 1 && subfolders?.length === 0}
               setFocusedFolderId={setFocusedFolderId}
               folderChild={folderChild}
             />
           </div>
-          {newFolder?.parentId === id && (
+          {newFolderParentId === id && (
             <FolderNameInput
+              parentId={newFolderParentId}
               loading={loading}
               onCancelNewFolder={onCancelNewFolder}
               onSaveNewFolder={onSaveNewFolder}
             />
           )}
-          {dataChildren && isOpen && (
+          {subfolders && isOpen && (
             <FolderItems
+              onSelectFolder={onSelectFolder}
               loading={loading}
-              newFolder={newFolder}
+              newFolderParentId={newFolderParentId}
+              visibleFolders={visibleFolders}
               openFolders={openFolders}
-              idPaths={newIdPaths}
+              level={level + 1}
               editable={editable}
-              data={dataChildren}
-              onToggleOpen={onToggleOpen}
+              folders={subfolders}
+              onCloseFolder={onCloseFolder}
+              onOpenFolder={onOpenFolder}
               onCreateNewFolder={onCreateNewFolder}
               onSaveNewFolder={onSaveNewFolder}
               onCancelNewFolder={onCancelNewFolder}
@@ -99,7 +107,6 @@ const FolderItems = ({
               openOnFolderClick={openOnFolderClick}
               focusedFolderId={focusedFolderId}
               setFocusedFolderId={setFocusedFolderId}
-              firstLevel={false}
               folderChild={folderChild}
               maximumLevelsOfFoldersAllowed={maximumLevelsOfFoldersAllowed}
             />

package/src/TreeStructure/FolderNameInput.tsx

@@ -13,7 +13,7 @@ import { ArrowDropDown as ArrowDropDownRaw } from '@ndla/icons/common';
 import { spacing, colors, misc, animations } from '@ndla/core';
 import { useTranslation } from 'react-i18next';
 import { isMobile } from 'react-device-detect';
-import Spinner from '../Spinner';
+import { Spinner } from '@ndla/icons';
 
 const ArrowRight = styled(ArrowDropDownRaw)`
   color: ${colors.text.primary};
@@ -53,14 +53,15 @@ const StyledInput = styled.input`
 `;
 
 interface FolderNameInputProps {
-  onSaveNewFolder: (value: string) => void;
+  onSaveNewFolder: (name: string, parentId: string) => void;
+  parentId: string;
   onCancelNewFolder: () => void;
   loading?: boolean;
 }
 
-const FolderNameInput = ({ onSaveNewFolder, onCancelNewFolder, loading }: FolderNameInputProps) => {
+const FolderNameInput = ({ onSaveNewFolder, parentId, onCancelNewFolder, loading }: FolderNameInputProps) => {
   const { t } = useTranslation();
-  const [value, setValue] = useState<string>(t('treeStructure.newFolder.defaultName'));
+  const [name, setName] = useState<string>(t('treeStructure.newFolder.defaultName'));
   const inputRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
@@ -82,22 +83,19 @@ const FolderNameInput = ({ onSaveNewFolder, onCancelNewFolder, loading }: Folder
           autoFocus
           placeholder={t('treeStructure.newFolder.placeholder')}
           disabled={loading}
-          value={value}
+          value={name}
           onBlur={() => onCancelNewFolder()}
           onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {
             if (e.key === 'Escape') {
               onCancelNewFolder();
-              return;
-            }
-            if (e.key === 'Enter' || e.key === 'Tab') {
-              onSaveNewFolder(value);
+            } else if (e.key === 'Enter' || e.key === 'Tab') {
               e.preventDefault();
+              onSaveNewFolder(name, parentId);
             }
-            return;
           }}
           onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-            const target = e.target as HTMLInputElement;
-            setValue(target.value);
+            const target = e.target;
+            setName(target.value);
           }}
         />
         {loading && <Spinner size="small" />}

package/src/TreeStructure/TreeStructure.tsx

@@ -7,7 +7,6 @@
  */
 
 import React, { useEffect, useState, useRef, useMemo } from 'react';
-import { uuid } from '@ndla/util';
 import { AddButton } from '@ndla/button';
 import Tooltip from '@ndla/tooltip';
 import { useTranslation } from 'react-i18next';
@@ -16,9 +15,8 @@ import { spacing, fonts } from '@ndla/core';
 import { uniq } from 'lodash';
 import TreeStructureStyledWrapper from './TreeStructureWrapper';
 import FolderItems from './FolderItems';
-import { getIdPathsOfFolder, getPathOfFolder, getFolderName } from './helperFunctions';
-import keyboardNavigation, { KEYBOARD_KEYS_OF_INTEREST } from './keyboardNavigation/keyboardNavigation';
-import { NewFolderProps, TreeStructureProps } from './TreeStructure.types';
+import { getPathOfFolder, getFolderName, flattenFolders } from './helperFunctions';
+import { TreeStructureProps } from './TreeStructure.types';
 
 export const MAX_LEVEL_FOR_FOLDERS = 4;
 
@@ -32,26 +30,32 @@ const AddFolderWrapper = styled.div`
 `;
 
 const TreeStructure = ({
-  data,
+  folders,
   label,
   editable,
   loading,
   onNewFolder,
+  onSelectFolder,
   openOnFolderClick,
   framed,
   folderIdMarkedByDefault,
   defaultOpenFolders,
   folderChild,
-  maximumLevelsOfFoldersAllowed,
+  maximumLevelsOfFoldersAllowed = MAX_LEVEL_FOR_FOLDERS,
 }: TreeStructureProps) => {
   const { t } = useTranslation();
-  const [newFolder, setNewFolder] = useState<NewFolderProps | undefined>();
+  const [newFolderParentId, setNewFolderParentId] = useState<string | undefined>();
   const [openFolders, setOpenFolders] = useState<string[]>(defaultOpenFolders || []);
   const [focusedFolderId, setFocusedFolderId] = useState<string | undefined>();
-  const [markedFolderId, setMarkedFolderId] = useState<string | undefined>(folderIdMarkedByDefault || data[0]?.id);
+  const [markedFolderId, setMarkedFolderId] = useState<string | undefined>(folderIdMarkedByDefault || folders[0]?.id);
   const treestructureRef = useRef<HTMLDivElement>(null);
   const wrapperRef = useRef<HTMLDivElement>(null);
-  const rootLevelId = useMemo(() => uuid(), []); // TODO: use useId hook when we update to React 18
+  const rootLevelId = 'treestructure-root';
+
+  const visibleFolders = useMemo(
+    () => flattenFolders(folders, openFolders).map((folder) => folder.id),
+    [folders, openFolders],
+  );
 
   useEffect(() => {
     if (defaultOpenFolders) {
@@ -63,54 +67,51 @@ const TreeStructure = ({
 
   useEffect(() => {
     if (!loading) {
-      setNewFolder(undefined);
+      setNewFolderParentId(undefined);
     }
   }, [loading]);
 
-  const onToggleOpen = (id: string) => {
-    if (openFolders.includes(id)) {
-      // 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(data, id);
-        const markedFolderPath = getPathOfFolder(data, markedFolderId);
-        const markedFolderIsSubPath = closingFolderPath.every(
-          (folderId, _index) => markedFolderPath[_index] === folderId,
-        );
-        if (markedFolderIsSubPath) {
+  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) {
+        if (onSelectFolder) {
           setMarkedFolderId(closingFolderPath[closingFolderPath.length - 1]);
+          onSelectFolder(closingFolderPath[closingFolderPath.length - 1]);
+        } else {
+          setFocusedFolderId(closingFolderPath[closingFolderPath.length - 1]);
         }
       }
-      setOpenFolders(openFolders.filter((folder) => folder !== id));
-    } else {
-      setOpenFolders(uniq([...openFolders, id]));
     }
+    setOpenFolders(openFolders.filter((folder) => folder !== id));
   };
 
-  const onCreateNewFolder = (props: { idPaths: number[]; parentId?: string }) => {
-    setNewFolder(props);
+  const onOpenFolder = (id: string) => {
+    setOpenFolders(uniq(openFolders.concat(id)));
   };
 
-  const onSaveNewFolder = (value: string) => {
-    if (newFolder) {
-      // We would like to create a new folder with the name of value.
-      // Its location in structure is based on newFolder object
-      onNewFolder({ ...newFolder, value }).then((newFolderId) => {
-        if (newFolderId) {
-          setMarkedFolderId(newFolderId);
-          setFocusedFolderId(newFolderId);
-          // Open current folder in case it was closed..
-
-          if (newFolder.parentId) {
-            setOpenFolders(uniq([...openFolders, newFolder.parentId]));
-          }
-        }
-      });
-    }
+  const onCreateNewFolder = (parentId: string) => {
+    setNewFolderParentId(parentId);
+  };
+
+  const onSaveNewFolder = (name: string, parentId: string) => {
+    onNewFolder(name, parentId).then((newFolderId) => {
+      if (newFolderId) {
+        setMarkedFolderId(newFolderId);
+        setFocusedFolderId(newFolderId);
+        setOpenFolders(uniq(openFolders.concat(parentId)));
+      }
+    });
   };
 
   const onCancelNewFolder = () => {
-    setNewFolder(undefined);
+    setNewFolderParentId(undefined);
   };
 
   const onMarkFolder = (id: string) => {
@@ -118,35 +119,25 @@ const TreeStructure = ({
     setFocusedFolderId(id);
   };
 
-  const paths = getPathOfFolder(data, markedFolderId || '');
+  const paths = getPathOfFolder(folders, markedFolderId || '');
   const canAddFolder = editable && paths.length < (maximumLevelsOfFoldersAllowed || 1);
 
   return (
-    <div
-      ref={treestructureRef}
-      onKeyDown={(e) => {
-        if (wrapperRef.current?.contains(document.activeElement) && KEYBOARD_KEYS_OF_INTEREST.includes(e.key)) {
-          keyboardNavigation({
-            e,
-            data,
-            setFocusedFolderId,
-            focusedFolderId,
-            onToggleOpen,
-            openFolders,
-          });
-        }
-      }}>
+    <div ref={treestructureRef}>
       {label && <StyledLabel htmlFor={rootLevelId}>{label}</StyledLabel>}
       <TreeStructureStyledWrapper ref={wrapperRef} id={rootLevelId} aria-label="Menu tree" role="tree" framed={framed}>
         <FolderItems
-          idPaths={[]}
-          data={data}
+          onSelectFolder={onSelectFolder}
+          level={1}
+          folders={folders}
           editable={editable}
-          onToggleOpen={onToggleOpen}
-          newFolder={newFolder}
+          onOpenFolder={onOpenFolder}
+          onCloseFolder={onCloseFolder}
+          newFolderParentId={newFolderParentId}
           onCreateNewFolder={onCreateNewFolder}
           onCancelNewFolder={onCancelNewFolder}
           onSaveNewFolder={onSaveNewFolder}
+          visibleFolders={visibleFolders}
           openFolders={openFolders}
           markedFolderId={markedFolderId}
           onMarkFolder={onMarkFolder}
@@ -154,7 +145,6 @@ const TreeStructure = ({
           loading={loading}
           focusedFolderId={focusedFolderId}
           setFocusedFolderId={setFocusedFolderId}
-          firstLevel
           folderChild={folderChild}
           maximumLevelsOfFoldersAllowed={maximumLevelsOfFoldersAllowed}
         />
@@ -165,16 +155,15 @@ const TreeStructure = ({
             tooltip={
               canAddFolder
                 ? t('myNdla.newFolderUnder', {
-                    folderName: getFolderName(data, markedFolderId),
+                    folderName: getFolderName(folders, markedFolderId),
                   })
-                : t('myNdla.maxFoldersAlreadyAdded')
+                : t('treeStructure.maxFoldersAlreadyAdded')
             }>
             <AddButton
               disabled={!canAddFolder}
               aria-label={t('myNdla.newFolder')}
               onClick={() => {
-                const idPaths = getIdPathsOfFolder(data, markedFolderId || '');
-                setNewFolder({ idPaths, parentId: paths[paths.length - 1] });
+                setNewFolderParentId(markedFolderId);
               }}>
               {t('myNdla.newFolder')}
             </AddButton>
@@ -185,8 +174,4 @@ const TreeStructure = ({
   );
 };
 
-TreeStructure.defaultProps = {
-  maximumLevelsOfFoldersAllowed: MAX_LEVEL_FOR_FOLDERS,
-};
-
 export default TreeStructure;

package/src/TreeStructure/TreeStructure.types.ts

@@ -11,35 +11,29 @@ import React, { ReactNode } from 'react';
 export interface FolderStructureProps {
   id: string;
   name: string;
-  isOpen?: boolean;
-  data?: FolderStructureProps[];
+  subfolders: FolderStructureProps[];
   isFavorite?: boolean;
   status?: string;
   openAsDefault?: boolean;
-  url?: string;
   icon?: ReactNode;
 }
 
-export interface NewFolderProps {
-  parentId?: string;
-  idPaths: number[];
-}
-
 interface CommonFolderProps {
-  data: FolderStructureProps[];
   editable?: boolean;
   loading?: boolean;
   openOnFolderClick?: boolean;
+  onSelectFolder?: (id: string) => void;
 }
 
 export interface TreeStructureProps extends CommonFolderProps {
+  folders: FolderStructureProps[];
   framed?: boolean;
   label?: string;
   folderIdMarkedByDefault?: string;
-  onNewFolder: (props: { value: string; parentId?: string; idPaths: number[] }) => Promise<string>;
+  onNewFolder: (name: string, parentId: string) => Promise<string>;
   defaultOpenFolders?: string[];
   folderChild?: FolderChildFuncType;
-  maximumLevelsOfFoldersAllowed: number;
+  maximumLevelsOfFoldersAllowed?: number;
 }
 
 export type onCreateNewFolderProp = ({
@@ -56,18 +50,20 @@ export type SetFocusedFolderId = React.Dispatch<React.SetStateAction<string | un
 export type FolderChildFuncType = (id: string, tabIndex: number) => ReactNode;
 
 export interface FolderItemsProps extends CommonFolderProps {
-  onToggleOpen: (id: string) => void;
-  onSaveNewFolder: (value: string) => void;
+  folders: FolderStructureProps[];
+  onCloseFolder: (id: string) => void;
+  onOpenFolder: (id: string) => void;
+  onSaveNewFolder: (name: string, parentId: string) => void;
   onCancelNewFolder: () => void;
-  onCreateNewFolder: onCreateNewFolderProp;
-  newFolder: NewFolderProps | undefined;
+  onCreateNewFolder: (parentId: string) => void;
+  newFolderParentId: string | undefined;
+  visibleFolders: string[];
   openFolders: string[];
   markedFolderId?: string;
   onMarkFolder: (id: string) => void;
-  idPaths: number[];
+  level: number;
   focusedFolderId: string | undefined;
   setFocusedFolderId: SetFocusedFolderId;
-  firstLevel: boolean;
   keyNavigationFocusIsCreateFolderButton?: boolean;
   icon?: ReactNode;
   folderChild?: FolderChildFuncType;

package/src/TreeStructure/arrowNavigation.ts

@@ -0,0 +1,53 @@
+/**
+ * Copyright (c) 2022-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { KeyboardEvent } from 'react';
+
+const navigateVertical = (
+  visibleFolders: string[],
+  folderId: string,
+  setFocusedFolderId: (id: string) => void,
+  direction: 1 | -1,
+) => {
+  const currentIndex = visibleFolders.findIndex((id) => id === folderId);
+  const target = visibleFolders[currentIndex + direction];
+  if (target !== undefined) {
+    setFocusedFolderId(target);
+  }
+};
+
+const arrowKeys = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
+
+export const arrowNavigation = (
+  e: KeyboardEvent<HTMLElement>,
+  id: string,
+  visibleFolders: string[],
+  setFocusedFolderId: (id: string) => void,
+  onOpen: (id: string) => void,
+  onClose: (id: string) => void,
+) => {
+  if (!arrowKeys.includes(e.key)) {
+    return;
+  }
+
+  e.preventDefault();
+  e.stopPropagation();
+
+  switch (e.key) {
+    case 'ArrowUp':
+      return navigateVertical(visibleFolders, id, setFocusedFolderId, -1);
+    case 'ArrowDown':
+      return navigateVertical(visibleFolders, id, setFocusedFolderId, 1);
+    case 'ArrowLeft':
+      return onClose(id);
+    case 'ArrowRight':
+      return onOpen(id);
+    default:
+      return;
+  }
+};

package/src/TreeStructure/helperFunctions.ts

@@ -1,12 +1,12 @@
 import { FolderStructureProps } from './TreeStructure.types';
 
-const getPathOfFolder = (data: FolderStructureProps[], findId: string): string[] => {
-  const paths = (dataChildren: FolderStructureProps[], path: string[]): string[] => {
-    for (const { id, data: dataChildrenSub } of dataChildren) {
+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 (dataChildrenSub?.length) {
-        return paths(dataChildrenSub, [...path, id]);
+      } else if (subfolders?.length) {
+        return paths(subfolders, [...path, id]);
       }
     }
     return [];
@@ -14,33 +14,18 @@ const getPathOfFolder = (data: FolderStructureProps[], findId: string): string[]
   return paths(data, []);
 };
 
-const getIdPathsOfFolder = (data: FolderStructureProps[], findId: string): number[] => {
-  let currentPath: number[] = [];
-  const paths = (dataChildren: FolderStructureProps[], path: number[]) => {
-    dataChildren.forEach(({ id, data: dataChildrenSub }, _index) => {
-      if (id === findId) {
-        currentPath = [...path, _index];
-      } else if (dataChildrenSub?.length) {
-        paths(dataChildrenSub, [...path, _index]);
-      }
-    });
-  };
-  paths(data, []);
-  return currentPath;
-};
-
-const getFolderName = (data: FolderStructureProps[], findId: string | undefined): string | undefined => {
+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, data: dataChildrenSub }, _index) => {
+    dataChildren.some(({ id, name, subfolders }, _index) => {
       if (id === findId) {
         folderName = name;
         return true;
-      } else if (dataChildrenSub?.length) {
-        return paths(dataChildrenSub);
+      } else if (subfolders?.length) {
+        return paths(subfolders);
       }
       return false;
     });
@@ -49,4 +34,11 @@ const getFolderName = (data: FolderStructureProps[], findId: string | undefined)
   return folderName;
 };
 
-export { getPathOfFolder, getIdPathsOfFolder, getFolderName };
+export const flattenFolders = (folders: FolderStructureProps[], openFolders?: string[]): FolderStructureProps[] => {
+  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[]);
+};

package/src/index.ts

@@ -109,8 +109,6 @@ export {
 } from './LearningPaths';
 export { Translation, TranslationLine, TranslationBox } from './Translation';
 
-export { default as Spinner } from './Spinner';
-
 export { default as SearchResultSleeve } from './Search/SearchResultSleeve';
 
 export { default as ContentTypeResult } from './Search/ContentTypeResult';

package/src/locale/messages-en.ts

@@ -861,8 +861,10 @@ const messages = {
     open: 'Open menu',
     close: 'Close menu',
   },
+  cancel: 'Cancel',
   close: 'Close',
   title: 'Title',
+  save: 'Save',
   image: {
     altText: 'Alt-text',
     caption: 'Caption',
@@ -993,6 +995,7 @@ const messages = {
       folder: 'Folder',
       delete: 'Delete',
       edit: 'Edit',
+      missingName: 'Folder name required',
     },
     confirmDeleteFolder: 'Are you sure you want to delete this folder? This process cannot be undone.',
     confirmDeleteTag: 'Are you sure you want to delete this tag? This process cannot be undone.',

package/src/locale/messages-nb.ts

@@ -861,6 +861,8 @@ const messages = {
   },
   close: 'Lukk',
   title: 'Tittel',
+  cancel: 'Avbryt',
+  save: 'Lagre',
   image: {
     altText: 'Alt-tekst',
     caption: 'Bildetekst',
@@ -991,6 +993,7 @@ const messages = {
       folder: 'Mappe',
       delete: 'Slett',
       edit: 'Rediger',
+      missingName: 'Mappenavn er påkrevd',
     },
     confirmDeleteFolder: 'Er du sikker på at du vil slette mappen? Denne handlingen kan ikke angres.',
     confirmDeleteTag: 'Er du sikker på at du vil slette tag? Denne handlingen kan ikke angres.',

package/src/locale/messages-nn.ts

@@ -860,8 +860,10 @@ const messages = {
     open: 'Åpne meny',
     close: 'Lukk meny',
   },
+  cancel: 'Avbryt',
   close: 'Lukk',
   title: 'Tittel',
+  save: 'Lagre',
   image: {
     altText: 'Alt-tekst',
     caption: 'Bilettekst',
@@ -992,6 +994,7 @@ const messages = {
       folder: 'Mappe',
       delete: 'Slett',
       edit: 'Rediger',
+      missingName: 'Mappenavn er påkrevd',
     },
     confirmDeleteFolder: 'Er du sikker på at du vil slette mappa? Denne handlinga kan ikkje angres.',
     confirmDeleteTag: 'Er du sikker på at du vil slette tag? Denne handlinga kan ikkje angres.',

package/src/locale/messages-se.ts

@@ -859,8 +859,10 @@ const messages = {
     open: 'Åpne meny',
     close: 'Lukk meny',
   },
+  cancel: 'Avbryt',
   close: 'Lukk',
   title: 'Tittel',
+  save: 'Lagre',
   image: {
     altText: 'Alt-tekst',
     caption: 'Bilettekst',
@@ -991,6 +993,7 @@ const messages = {
       folder: 'Mappe',
       delete: 'Slett',
       edit: 'Rediger',
+      missingName: 'Mappenavn er påkrevd',
     },
     confirmDeleteFolder: 'Er du sikker på at du vil slette mappen? Denne handlingen kan ikke angres.',
     confirmDeleteTag: 'Er du sikker på at du vil slette tag? Denne handlingen kan ikke angres.',