@ndla/ui 30.9.0 → 31.0.0

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);
 

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/index.ts

@@ -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';

package/es/TreeStructure/NavigationLink.js

@@ -1,91 +0,0 @@
-import _styled from "@emotion/styled/base";
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-/**
- * 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 { colors, fonts, spacing } from '@ndla/core';
-import React, { useEffect, useRef } from 'react';
-import SafeLink from '@ndla/safelink';
-import { arrowNavigation } from './arrowNavigation';
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-var StyledSafeLink = /*#__PURE__*/_styled(SafeLink, {
-  target: "et3arba1",
-  label: "StyledSafeLink"
-})("display:grid;grid-template-columns:", spacing.medium, " 1fr;align-items:center;padding:", spacing.xxsmall, ";margin:", spacing.xsmall, " 0;gap:", spacing.xxsmall, ";box-shadow:none;color:", function (_ref) {
-  var selected = _ref.selected;
-  return selected ? colors.brand.primary : colors.text.primary;
-}, ";font-weight:", function (_ref2) {
-  var selected = _ref2.selected;
-  return selected ? fonts.weight.semibold : fonts.weight.normal;
-}, ";", fonts.sizes('16px'), ";:hover,:focus{color:", colors.brand.primary, ";}svg{height:26px;width:26px;}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIk5hdmlnYXRpb25MaW5rLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFtQm9EIiwiZmlsZSI6Ik5hdmlnYXRpb25MaW5rLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSAyMDIyLXByZXNlbnQsIE5ETEEuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgR1BMdjMgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKi9cblxuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgY29sb3JzLCBmb250cywgc3BhY2luZyB9IGZyb20gJ0BuZGxhL2NvcmUnO1xuaW1wb3J0IFJlYWN0LCB7IEtleWJvYXJkRXZlbnQsIHVzZUVmZmVjdCwgdXNlUmVmIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IFNhZmVMaW5rIGZyb20gJ0BuZGxhL3NhZmVsaW5rJztcbmltcG9ydCB7IGFycm93TmF2aWdhdGlvbiB9IGZyb20gJy4vYXJyb3dOYXZpZ2F0aW9uJztcbmltcG9ydCB7IENvbW1vbkZvbGRlckl0ZW1zUHJvcHMsIEZvbGRlclR5cGUgfSBmcm9tICcuL3R5cGVzJztcblxuaW50ZXJmYWNlIFN0eWxlZFByb3BzIHtcbiAgc2VsZWN0ZWQ/OiBib29sZWFuO1xufVxuXG5jb25zdCBTdHlsZWRTYWZlTGluayA9IHN0eWxlZChTYWZlTGluayk8U3R5bGVkUHJvcHM+YFxuICBkaXNwbGF5OiBncmlkO1xuICBncmlkLXRlbXBsYXRlLWNvbHVtbnM6ICR7c3BhY2luZy5tZWRpdW19IDFmcjtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgcGFkZGluZzogJHtzcGFjaW5nLnh4c21hbGx9O1xuICBtYXJnaW46ICR7c3BhY2luZy54c21hbGx9IDA7XG4gIGdhcDogJHtzcGFjaW5nLnh4c21hbGx9O1xuICBib3gtc2hhZG93OiBub25lO1xuXG4gIGNvbG9yOiAkeyh7IHNlbGVjdGVkIH0pID0+IChzZWxlY3RlZCA/IGNvbG9ycy5icmFuZC5wcmltYXJ5IDogY29sb3JzLnRleHQucHJpbWFyeSl9O1xuICBmb250LXdlaWdodDogJHsoeyBzZWxlY3RlZCB9KSA9PiAoc2VsZWN0ZWQgPyBmb250cy53ZWlnaHQuc2VtaWJvbGQgOiBmb250cy53ZWlnaHQubm9ybWFsKX07XG4gICR7Zm9udHMuc2l6ZXMoJzE2cHgnKX07XG5cbiAgOmhvdmVyLFxuICA6Zm9jdXMge1xuICAgIGNvbG9yOiAke2NvbG9ycy5icmFuZC5wcmltYXJ5fTtcbiAgfVxuICBzdmcge1xuICAgIGhlaWdodDogMjZweDtcbiAgICB3aWR0aDogMjZweDtcbiAgfVxuYDtcblxuY29uc3QgSWNvbldyYXBwZXIgPSBzdHlsZWQuc3BhbmBcbiAgZGlzcGxheTogZmxleDtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG5gO1xuXG5pbnRlcmZhY2UgUHJvcHMgZXh0ZW5kcyBDb21tb25Gb2xkZXJJdGVtc1Byb3BzIHtcbiAgaXNPcGVuOiBib29sZWFuO1xuICBmb2xkZXI6IEZvbGRlclR5cGU7XG59XG5cbmNvbnN0IE5hdmlnYXRpb25MaW5rID0gKHtcbiAgbG9hZGluZyxcbiAgZm9sZGVyLFxuICBzZWxlY3RlZEZvbGRlcixcbiAgZm9jdXNlZEZvbGRlcixcbiAgc2V0U2VsZWN0ZWRGb2xkZXIsXG4gIHNldEZvY3VzZWRGb2xkZXIsXG4gIHZpc2libGVGb2xkZXJzLFxuICBvbk9wZW5Gb2xkZXIsXG4gIG9uQ2xvc2VGb2xkZXIsXG59OiBQcm9wcykgPT4ge1xuICBjb25zdCB7IGlkLCBpY29uLCBuYW1lIH0gPSBmb2xkZXI7XG4gIGNvbnN0IHNlbGVjdGVkID0gc2VsZWN0ZWRGb2xkZXIgJiYgc2VsZWN0ZWRGb2xkZXIuaWQgPT09IGlkO1xuICBjb25zdCByZWYgPSB1c2VSZWY8SFRNTEJ1dHRvbkVsZW1lbnQgJiBIVE1MQW5jaG9yRWxlbWVudD4obnVsbCk7XG4gIGNvbnN0IGZvY3VzZWQgPSBmb2N1c2VkRm9sZGVyPy5pZCA9PT0gaWQ7XG5cbiAgY29uc3QgaGFuZGxlQ2xpY2sgPSAoKSA9PiB7XG4gICAgaWYgKCFzZWxlY3RlZCkge1xuICAgICAgc2V0U2VsZWN0ZWRGb2xkZXIoZm9sZGVyKTtcbiAgICAgIHNldEZvY3VzZWRGb2xkZXIoZm9sZGVyKTtcbiAgICB9XG4gIH07XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBpZiAoZm9jdXNlZEZvbGRlcj8uaWQgPT09IGlkKSB7XG4gICAgICByZWYuY3VycmVudD8uZm9jdXMoKTtcbiAgICB9XG4gIH0sIFtmb2N1c2VkRm9sZGVyLCByZWYsIGlkXSk7XG5cbiAgcmV0dXJuIChcbiAgICA8U3R5bGVkU2FmZUxpbmtcbiAgICAgIHJvbGU9XCJ0cmVlaXRlbVwiXG4gICAgICByZWY9e3JlZn1cbiAgICAgIG9uS2V5RG93bj17KGU6IEtleWJvYXJkRXZlbnQ8SFRNTEVsZW1lbnQ+KSA9PiB7XG4gICAgICAgIGlmIChlLmtleSA9PT0gJ0VudGVyJykge1xuICAgICAgICAgIHNldFNlbGVjdGVkRm9sZGVyKGZvbGRlcik7XG4gICAgICAgICAgc2V0Rm9jdXNlZEZvbGRlcihmb2xkZXIpO1xuICAgICAgICAgIHJldHVybjtcbiAgICAgICAgfVxuICAgICAgICBhcnJvd05hdmlnYXRpb24oZSwgaWQsIHZpc2libGVGb2xkZXJzLCBzZXRGb2N1c2VkRm9sZGVyLCBvbk9wZW5Gb2xkZXIsIG9uQ2xvc2VGb2xkZXIpO1xuICAgICAgfX1cbiAgICAgIGFyaWEtY3VycmVudD17c2VsZWN0ZWQgPyAncGFnZScgOiB1bmRlZmluZWR9XG4gICAgICB0YWJJbmRleD17c2VsZWN0ZWQgfHwgZm9jdXNlZCA/IDAgOiAtMX1cbiAgICAgIHNlbGVjdGVkPXtzZWxlY3RlZH1cbiAgICAgIG9uRm9jdXM9eygpID0+IHNldEZvY3VzZWRGb2xkZXIoZm9sZGVyKX1cbiAgICAgIG9uQ2xpY2s9e2hhbmRsZUNsaWNrfVxuICAgICAgdG89e2xvYWRpbmcgPyAnJyA6IGAvbWlubmRsYS8ke2lkfWB9PlxuICAgICAgPEljb25XcmFwcGVyPntpY29ufTwvSWNvbldyYXBwZXI+XG4gICAgICB7bmFtZX1cbiAgICA8L1N0eWxlZFNhZmVMaW5rPlxuICApO1xufTtcblxuZXhwb3J0IGRlZmF1bHQgTmF2aWdhdGlvbkxpbms7XG4iXX0= */"));
-var IconWrapper = /*#__PURE__*/_styled("span", {
-  target: "et3arba0",
-  label: "IconWrapper"
-})(process.env.NODE_ENV === "production" ? {
-  name: "1wnowod",
-  styles: "display:flex;align-items:center;justify-content:center"
-} : {
-  name: "1wnowod",
-  styles: "display:flex;align-items:center;justify-content:center",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIk5hdmlnYXRpb25MaW5rLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUEwQytCIiwiZmlsZSI6Ik5hdmlnYXRpb25MaW5rLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSAyMDIyLXByZXNlbnQsIE5ETEEuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgR1BMdjMgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKi9cblxuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgY29sb3JzLCBmb250cywgc3BhY2luZyB9IGZyb20gJ0BuZGxhL2NvcmUnO1xuaW1wb3J0IFJlYWN0LCB7IEtleWJvYXJkRXZlbnQsIHVzZUVmZmVjdCwgdXNlUmVmIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IFNhZmVMaW5rIGZyb20gJ0BuZGxhL3NhZmVsaW5rJztcbmltcG9ydCB7IGFycm93TmF2aWdhdGlvbiB9IGZyb20gJy4vYXJyb3dOYXZpZ2F0aW9uJztcbmltcG9ydCB7IENvbW1vbkZvbGRlckl0ZW1zUHJvcHMsIEZvbGRlclR5cGUgfSBmcm9tICcuL3R5cGVzJztcblxuaW50ZXJmYWNlIFN0eWxlZFByb3BzIHtcbiAgc2VsZWN0ZWQ/OiBib29sZWFuO1xufVxuXG5jb25zdCBTdHlsZWRTYWZlTGluayA9IHN0eWxlZChTYWZlTGluayk8U3R5bGVkUHJvcHM+YFxuICBkaXNwbGF5OiBncmlkO1xuICBncmlkLXRlbXBsYXRlLWNvbHVtbnM6ICR7c3BhY2luZy5tZWRpdW19IDFmcjtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgcGFkZGluZzogJHtzcGFjaW5nLnh4c21hbGx9O1xuICBtYXJnaW46ICR7c3BhY2luZy54c21hbGx9IDA7XG4gIGdhcDogJHtzcGFjaW5nLnh4c21hbGx9O1xuICBib3gtc2hhZG93OiBub25lO1xuXG4gIGNvbG9yOiAkeyh7IHNlbGVjdGVkIH0pID0+IChzZWxlY3RlZCA/IGNvbG9ycy5icmFuZC5wcmltYXJ5IDogY29sb3JzLnRleHQucHJpbWFyeSl9O1xuICBmb250LXdlaWdodDogJHsoeyBzZWxlY3RlZCB9KSA9PiAoc2VsZWN0ZWQgPyBmb250cy53ZWlnaHQuc2VtaWJvbGQgOiBmb250cy53ZWlnaHQubm9ybWFsKX07XG4gICR7Zm9udHMuc2l6ZXMoJzE2cHgnKX07XG5cbiAgOmhvdmVyLFxuICA6Zm9jdXMge1xuICAgIGNvbG9yOiAke2NvbG9ycy5icmFuZC5wcmltYXJ5fTtcbiAgfVxuICBzdmcge1xuICAgIGhlaWdodDogMjZweDtcbiAgICB3aWR0aDogMjZweDtcbiAgfVxuYDtcblxuY29uc3QgSWNvbldyYXBwZXIgPSBzdHlsZWQuc3BhbmBcbiAgZGlzcGxheTogZmxleDtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG5gO1xuXG5pbnRlcmZhY2UgUHJvcHMgZXh0ZW5kcyBDb21tb25Gb2xkZXJJdGVtc1Byb3BzIHtcbiAgaXNPcGVuOiBib29sZWFuO1xuICBmb2xkZXI6IEZvbGRlclR5cGU7XG59XG5cbmNvbnN0IE5hdmlnYXRpb25MaW5rID0gKHtcbiAgbG9hZGluZyxcbiAgZm9sZGVyLFxuICBzZWxlY3RlZEZvbGRlcixcbiAgZm9jdXNlZEZvbGRlcixcbiAgc2V0U2VsZWN0ZWRGb2xkZXIsXG4gIHNldEZvY3VzZWRGb2xkZXIsXG4gIHZpc2libGVGb2xkZXJzLFxuICBvbk9wZW5Gb2xkZXIsXG4gIG9uQ2xvc2VGb2xkZXIsXG59OiBQcm9wcykgPT4ge1xuICBjb25zdCB7IGlkLCBpY29uLCBuYW1lIH0gPSBmb2xkZXI7XG4gIGNvbnN0IHNlbGVjdGVkID0gc2VsZWN0ZWRGb2xkZXIgJiYgc2VsZWN0ZWRGb2xkZXIuaWQgPT09IGlkO1xuICBjb25zdCByZWYgPSB1c2VSZWY8SFRNTEJ1dHRvbkVsZW1lbnQgJiBIVE1MQW5jaG9yRWxlbWVudD4obnVsbCk7XG4gIGNvbnN0IGZvY3VzZWQgPSBmb2N1c2VkRm9sZGVyPy5pZCA9PT0gaWQ7XG5cbiAgY29uc3QgaGFuZGxlQ2xpY2sgPSAoKSA9PiB7XG4gICAgaWYgKCFzZWxlY3RlZCkge1xuICAgICAgc2V0U2VsZWN0ZWRGb2xkZXIoZm9sZGVyKTtcbiAgICAgIHNldEZvY3VzZWRGb2xkZXIoZm9sZGVyKTtcbiAgICB9XG4gIH07XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBpZiAoZm9jdXNlZEZvbGRlcj8uaWQgPT09IGlkKSB7XG4gICAgICByZWYuY3VycmVudD8uZm9jdXMoKTtcbiAgICB9XG4gIH0sIFtmb2N1c2VkRm9sZGVyLCByZWYsIGlkXSk7XG5cbiAgcmV0dXJuIChcbiAgICA8U3R5bGVkU2FmZUxpbmtcbiAgICAgIHJvbGU9XCJ0cmVlaXRlbVwiXG4gICAgICByZWY9e3JlZn1cbiAgICAgIG9uS2V5RG93bj17KGU6IEtleWJvYXJkRXZlbnQ8SFRNTEVsZW1lbnQ+KSA9PiB7XG4gICAgICAgIGlmIChlLmtleSA9PT0gJ0VudGVyJykge1xuICAgICAgICAgIHNldFNlbGVjdGVkRm9sZGVyKGZvbGRlcik7XG4gICAgICAgICAgc2V0Rm9jdXNlZEZvbGRlcihmb2xkZXIpO1xuICAgICAgICAgIHJldHVybjtcbiAgICAgICAgfVxuICAgICAgICBhcnJvd05hdmlnYXRpb24oZSwgaWQsIHZpc2libGVGb2xkZXJzLCBzZXRGb2N1c2VkRm9sZGVyLCBvbk9wZW5Gb2xkZXIsIG9uQ2xvc2VGb2xkZXIpO1xuICAgICAgfX1cbiAgICAgIGFyaWEtY3VycmVudD17c2VsZWN0ZWQgPyAncGFnZScgOiB1bmRlZmluZWR9XG4gICAgICB0YWJJbmRleD17c2VsZWN0ZWQgfHwgZm9jdXNlZCA/IDAgOiAtMX1cbiAgICAgIHNlbGVjdGVkPXtzZWxlY3RlZH1cbiAgICAgIG9uRm9jdXM9eygpID0+IHNldEZvY3VzZWRGb2xkZXIoZm9sZGVyKX1cbiAgICAgIG9uQ2xpY2s9e2hhbmRsZUNsaWNrfVxuICAgICAgdG89e2xvYWRpbmcgPyAnJyA6IGAvbWlubmRsYS8ke2lkfWB9PlxuICAgICAgPEljb25XcmFwcGVyPntpY29ufTwvSWNvbldyYXBwZXI+XG4gICAgICB7bmFtZX1cbiAgICA8L1N0eWxlZFNhZmVMaW5rPlxuICApO1xufTtcblxuZXhwb3J0IGRlZmF1bHQgTmF2aWdhdGlvbkxpbms7XG4iXX0= */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-var NavigationLink = function NavigationLink(_ref3) {
-  var loading = _ref3.loading,
-    folder = _ref3.folder,
-    selectedFolder = _ref3.selectedFolder,
-    focusedFolder = _ref3.focusedFolder,
-    setSelectedFolder = _ref3.setSelectedFolder,
-    setFocusedFolder = _ref3.setFocusedFolder,
-    visibleFolders = _ref3.visibleFolders,
-    onOpenFolder = _ref3.onOpenFolder,
-    onCloseFolder = _ref3.onCloseFolder;
-  var id = folder.id,
-    icon = folder.icon,
-    name = folder.name;
-  var selected = selectedFolder && selectedFolder.id === id;
-  var ref = useRef(null);
-  var focused = (focusedFolder === null || focusedFolder === void 0 ? void 0 : focusedFolder.id) === id;
-  var handleClick = function handleClick() {
-    if (!selected) {
-      setSelectedFolder(folder);
-      setFocusedFolder(folder);
-    }
-  };
-  useEffect(function () {
-    if ((focusedFolder === null || focusedFolder === void 0 ? void 0 : focusedFolder.id) === id) {
-      var _ref$current;
-      (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus();
-    }
-  }, [focusedFolder, ref, id]);
-  return _jsxs(StyledSafeLink, {
-    role: "treeitem",
-    ref: ref,
-    onKeyDown: function onKeyDown(e) {
-      if (e.key === 'Enter') {
-        setSelectedFolder(folder);
-        setFocusedFolder(folder);
-        return;
-      }
-      arrowNavigation(e, id, visibleFolders, setFocusedFolder, onOpenFolder, onCloseFolder);
-    },
-    "aria-current": selected ? 'page' : undefined,
-    tabIndex: selected || focused ? 0 : -1,
-    selected: selected,
-    onFocus: function onFocus() {
-      return setFocusedFolder(folder);
-    },
-    onClick: handleClick,
-    to: loading ? '' : "/minndla/".concat(id),
-    children: [_jsx(IconWrapper, {
-      children: icon
-    }), name]
-  });
-};
-export default NavigationLink;

package/lib/TreeStructure/NavigationLink.d.ts

@@ -1,14 +0,0 @@
-/**
- * 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 { CommonFolderItemsProps, FolderType } from './types';
-interface Props extends CommonFolderItemsProps {
-    isOpen: boolean;
-    folder: FolderType;
-}
-declare const NavigationLink: ({ loading, folder, selectedFolder, focusedFolder, setSelectedFolder, setFocusedFolder, visibleFolders, onOpenFolder, onCloseFolder, }: Props) => import("@emotion/react/jsx-runtime").JSX.Element;
-export default NavigationLink;

package/lib/TreeStructure/NavigationLink.js

@@ -1,93 +0,0 @@
-"use strict";
-
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-var _base = _interopRequireDefault(require("@emotion/styled/base"));
-var _core = require("@ndla/core");
-var _react = _interopRequireWildcard(require("react"));
-var _safelink = _interopRequireDefault(require("@ndla/safelink"));
-var _arrowNavigation = require("./arrowNavigation");
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-var StyledSafeLink = /*#__PURE__*/(0, _base["default"])(_safelink["default"], {
-  target: "et3arba1",
-  label: "StyledSafeLink"
-})("display:grid;grid-template-columns:", _core.spacing.medium, " 1fr;align-items:center;padding:", _core.spacing.xxsmall, ";margin:", _core.spacing.xsmall, " 0;gap:", _core.spacing.xxsmall, ";box-shadow:none;color:", function (_ref) {
-  var selected = _ref.selected;
-  return selected ? _core.colors.brand.primary : _core.colors.text.primary;
-}, ";font-weight:", function (_ref2) {
-  var selected = _ref2.selected;
-  return selected ? _core.fonts.weight.semibold : _core.fonts.weight.normal;
-}, ";", _core.fonts.sizes('16px'), ";:hover,:focus{color:", _core.colors.brand.primary, ";}svg{height:26px;width:26px;}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIk5hdmlnYXRpb25MaW5rLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFtQm9EIiwiZmlsZSI6Ik5hdmlnYXRpb25MaW5rLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSAyMDIyLXByZXNlbnQsIE5ETEEuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgR1BMdjMgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKi9cblxuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgY29sb3JzLCBmb250cywgc3BhY2luZyB9IGZyb20gJ0BuZGxhL2NvcmUnO1xuaW1wb3J0IFJlYWN0LCB7IEtleWJvYXJkRXZlbnQsIHVzZUVmZmVjdCwgdXNlUmVmIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IFNhZmVMaW5rIGZyb20gJ0BuZGxhL3NhZmVsaW5rJztcbmltcG9ydCB7IGFycm93TmF2aWdhdGlvbiB9IGZyb20gJy4vYXJyb3dOYXZpZ2F0aW9uJztcbmltcG9ydCB7IENvbW1vbkZvbGRlckl0ZW1zUHJvcHMsIEZvbGRlclR5cGUgfSBmcm9tICcuL3R5cGVzJztcblxuaW50ZXJmYWNlIFN0eWxlZFByb3BzIHtcbiAgc2VsZWN0ZWQ/OiBib29sZWFuO1xufVxuXG5jb25zdCBTdHlsZWRTYWZlTGluayA9IHN0eWxlZChTYWZlTGluayk8U3R5bGVkUHJvcHM+YFxuICBkaXNwbGF5OiBncmlkO1xuICBncmlkLXRlbXBsYXRlLWNvbHVtbnM6ICR7c3BhY2luZy5tZWRpdW19IDFmcjtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgcGFkZGluZzogJHtzcGFjaW5nLnh4c21hbGx9O1xuICBtYXJnaW46ICR7c3BhY2luZy54c21hbGx9IDA7XG4gIGdhcDogJHtzcGFjaW5nLnh4c21hbGx9O1xuICBib3gtc2hhZG93OiBub25lO1xuXG4gIGNvbG9yOiAkeyh7IHNlbGVjdGVkIH0pID0+IChzZWxlY3RlZCA/IGNvbG9ycy5icmFuZC5wcmltYXJ5IDogY29sb3JzLnRleHQucHJpbWFyeSl9O1xuICBmb250LXdlaWdodDogJHsoeyBzZWxlY3RlZCB9KSA9PiAoc2VsZWN0ZWQgPyBmb250cy53ZWlnaHQuc2VtaWJvbGQgOiBmb250cy53ZWlnaHQubm9ybWFsKX07XG4gICR7Zm9udHMuc2l6ZXMoJzE2cHgnKX07XG5cbiAgOmhvdmVyLFxuICA6Zm9jdXMge1xuICAgIGNvbG9yOiAke2NvbG9ycy5icmFuZC5wcmltYXJ5fTtcbiAgfVxuICBzdmcge1xuICAgIGhlaWdodDogMjZweDtcbiAgICB3aWR0aDogMjZweDtcbiAgfVxuYDtcblxuY29uc3QgSWNvbldyYXBwZXIgPSBzdHlsZWQuc3BhbmBcbiAgZGlzcGxheTogZmxleDtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG5gO1xuXG5pbnRlcmZhY2UgUHJvcHMgZXh0ZW5kcyBDb21tb25Gb2xkZXJJdGVtc1Byb3BzIHtcbiAgaXNPcGVuOiBib29sZWFuO1xuICBmb2xkZXI6IEZvbGRlclR5cGU7XG59XG5cbmNvbnN0IE5hdmlnYXRpb25MaW5rID0gKHtcbiAgbG9hZGluZyxcbiAgZm9sZGVyLFxuICBzZWxlY3RlZEZvbGRlcixcbiAgZm9jdXNlZEZvbGRlcixcbiAgc2V0U2VsZWN0ZWRGb2xkZXIsXG4gIHNldEZvY3VzZWRGb2xkZXIsXG4gIHZpc2libGVGb2xkZXJzLFxuICBvbk9wZW5Gb2xkZXIsXG4gIG9uQ2xvc2VGb2xkZXIsXG59OiBQcm9wcykgPT4ge1xuICBjb25zdCB7IGlkLCBpY29uLCBuYW1lIH0gPSBmb2xkZXI7XG4gIGNvbnN0IHNlbGVjdGVkID0gc2VsZWN0ZWRGb2xkZXIgJiYgc2VsZWN0ZWRGb2xkZXIuaWQgPT09IGlkO1xuICBjb25zdCByZWYgPSB1c2VSZWY8SFRNTEJ1dHRvbkVsZW1lbnQgJiBIVE1MQW5jaG9yRWxlbWVudD4obnVsbCk7XG4gIGNvbnN0IGZvY3VzZWQgPSBmb2N1c2VkRm9sZGVyPy5pZCA9PT0gaWQ7XG5cbiAgY29uc3QgaGFuZGxlQ2xpY2sgPSAoKSA9PiB7XG4gICAgaWYgKCFzZWxlY3RlZCkge1xuICAgICAgc2V0U2VsZWN0ZWRGb2xkZXIoZm9sZGVyKTtcbiAgICAgIHNldEZvY3VzZWRGb2xkZXIoZm9sZGVyKTtcbiAgICB9XG4gIH07XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBpZiAoZm9jdXNlZEZvbGRlcj8uaWQgPT09IGlkKSB7XG4gICAgICByZWYuY3VycmVudD8uZm9jdXMoKTtcbiAgICB9XG4gIH0sIFtmb2N1c2VkRm9sZGVyLCByZWYsIGlkXSk7XG5cbiAgcmV0dXJuIChcbiAgICA8U3R5bGVkU2FmZUxpbmtcbiAgICAgIHJvbGU9XCJ0cmVlaXRlbVwiXG4gICAgICByZWY9e3JlZn1cbiAgICAgIG9uS2V5RG93bj17KGU6IEtleWJvYXJkRXZlbnQ8SFRNTEVsZW1lbnQ+KSA9PiB7XG4gICAgICAgIGlmIChlLmtleSA9PT0gJ0VudGVyJykge1xuICAgICAgICAgIHNldFNlbGVjdGVkRm9sZGVyKGZvbGRlcik7XG4gICAgICAgICAgc2V0Rm9jdXNlZEZvbGRlcihmb2xkZXIpO1xuICAgICAgICAgIHJldHVybjtcbiAgICAgICAgfVxuICAgICAgICBhcnJvd05hdmlnYXRpb24oZSwgaWQsIHZpc2libGVGb2xkZXJzLCBzZXRGb2N1c2VkRm9sZGVyLCBvbk9wZW5Gb2xkZXIsIG9uQ2xvc2VGb2xkZXIpO1xuICAgICAgfX1cbiAgICAgIGFyaWEtY3VycmVudD17c2VsZWN0ZWQgPyAncGFnZScgOiB1bmRlZmluZWR9XG4gICAgICB0YWJJbmRleD17c2VsZWN0ZWQgfHwgZm9jdXNlZCA/IDAgOiAtMX1cbiAgICAgIHNlbGVjdGVkPXtzZWxlY3RlZH1cbiAgICAgIG9uRm9jdXM9eygpID0+IHNldEZvY3VzZWRGb2xkZXIoZm9sZGVyKX1cbiAgICAgIG9uQ2xpY2s9e2hhbmRsZUNsaWNrfVxuICAgICAgdG89e2xvYWRpbmcgPyAnJyA6IGAvbWlubmRsYS8ke2lkfWB9PlxuICAgICAgPEljb25XcmFwcGVyPntpY29ufTwvSWNvbldyYXBwZXI+XG4gICAgICB7bmFtZX1cbiAgICA8L1N0eWxlZFNhZmVMaW5rPlxuICApO1xufTtcblxuZXhwb3J0IGRlZmF1bHQgTmF2aWdhdGlvbkxpbms7XG4iXX0= */"));
-var IconWrapper = /*#__PURE__*/(0, _base["default"])("span", {
-  target: "et3arba0",
-  label: "IconWrapper"
-})(process.env.NODE_ENV === "production" ? {
-  name: "1wnowod",
-  styles: "display:flex;align-items:center;justify-content:center"
-} : {
-  name: "1wnowod",
-  styles: "display:flex;align-items:center;justify-content:center",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIk5hdmlnYXRpb25MaW5rLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUEwQytCIiwiZmlsZSI6Ik5hdmlnYXRpb25MaW5rLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSAyMDIyLXByZXNlbnQsIE5ETEEuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgR1BMdjMgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKi9cblxuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgY29sb3JzLCBmb250cywgc3BhY2luZyB9IGZyb20gJ0BuZGxhL2NvcmUnO1xuaW1wb3J0IFJlYWN0LCB7IEtleWJvYXJkRXZlbnQsIHVzZUVmZmVjdCwgdXNlUmVmIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IFNhZmVMaW5rIGZyb20gJ0BuZGxhL3NhZmVsaW5rJztcbmltcG9ydCB7IGFycm93TmF2aWdhdGlvbiB9IGZyb20gJy4vYXJyb3dOYXZpZ2F0aW9uJztcbmltcG9ydCB7IENvbW1vbkZvbGRlckl0ZW1zUHJvcHMsIEZvbGRlclR5cGUgfSBmcm9tICcuL3R5cGVzJztcblxuaW50ZXJmYWNlIFN0eWxlZFByb3BzIHtcbiAgc2VsZWN0ZWQ/OiBib29sZWFuO1xufVxuXG5jb25zdCBTdHlsZWRTYWZlTGluayA9IHN0eWxlZChTYWZlTGluayk8U3R5bGVkUHJvcHM+YFxuICBkaXNwbGF5OiBncmlkO1xuICBncmlkLXRlbXBsYXRlLWNvbHVtbnM6ICR7c3BhY2luZy5tZWRpdW19IDFmcjtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgcGFkZGluZzogJHtzcGFjaW5nLnh4c21hbGx9O1xuICBtYXJnaW46ICR7c3BhY2luZy54c21hbGx9IDA7XG4gIGdhcDogJHtzcGFjaW5nLnh4c21hbGx9O1xuICBib3gtc2hhZG93OiBub25lO1xuXG4gIGNvbG9yOiAkeyh7IHNlbGVjdGVkIH0pID0+IChzZWxlY3RlZCA/IGNvbG9ycy5icmFuZC5wcmltYXJ5IDogY29sb3JzLnRleHQucHJpbWFyeSl9O1xuICBmb250LXdlaWdodDogJHsoeyBzZWxlY3RlZCB9KSA9PiAoc2VsZWN0ZWQgPyBmb250cy53ZWlnaHQuc2VtaWJvbGQgOiBmb250cy53ZWlnaHQubm9ybWFsKX07XG4gICR7Zm9udHMuc2l6ZXMoJzE2cHgnKX07XG5cbiAgOmhvdmVyLFxuICA6Zm9jdXMge1xuICAgIGNvbG9yOiAke2NvbG9ycy5icmFuZC5wcmltYXJ5fTtcbiAgfVxuICBzdmcge1xuICAgIGhlaWdodDogMjZweDtcbiAgICB3aWR0aDogMjZweDtcbiAgfVxuYDtcblxuY29uc3QgSWNvbldyYXBwZXIgPSBzdHlsZWQuc3BhbmBcbiAgZGlzcGxheTogZmxleDtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG5gO1xuXG5pbnRlcmZhY2UgUHJvcHMgZXh0ZW5kcyBDb21tb25Gb2xkZXJJdGVtc1Byb3BzIHtcbiAgaXNPcGVuOiBib29sZWFuO1xuICBmb2xkZXI6IEZvbGRlclR5cGU7XG59XG5cbmNvbnN0IE5hdmlnYXRpb25MaW5rID0gKHtcbiAgbG9hZGluZyxcbiAgZm9sZGVyLFxuICBzZWxlY3RlZEZvbGRlcixcbiAgZm9jdXNlZEZvbGRlcixcbiAgc2V0U2VsZWN0ZWRGb2xkZXIsXG4gIHNldEZvY3VzZWRGb2xkZXIsXG4gIHZpc2libGVGb2xkZXJzLFxuICBvbk9wZW5Gb2xkZXIsXG4gIG9uQ2xvc2VGb2xkZXIsXG59OiBQcm9wcykgPT4ge1xuICBjb25zdCB7IGlkLCBpY29uLCBuYW1lIH0gPSBmb2xkZXI7XG4gIGNvbnN0IHNlbGVjdGVkID0gc2VsZWN0ZWRGb2xkZXIgJiYgc2VsZWN0ZWRGb2xkZXIuaWQgPT09IGlkO1xuICBjb25zdCByZWYgPSB1c2VSZWY8SFRNTEJ1dHRvbkVsZW1lbnQgJiBIVE1MQW5jaG9yRWxlbWVudD4obnVsbCk7XG4gIGNvbnN0IGZvY3VzZWQgPSBmb2N1c2VkRm9sZGVyPy5pZCA9PT0gaWQ7XG5cbiAgY29uc3QgaGFuZGxlQ2xpY2sgPSAoKSA9PiB7XG4gICAgaWYgKCFzZWxlY3RlZCkge1xuICAgICAgc2V0U2VsZWN0ZWRGb2xkZXIoZm9sZGVyKTtcbiAgICAgIHNldEZvY3VzZWRGb2xkZXIoZm9sZGVyKTtcbiAgICB9XG4gIH07XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBpZiAoZm9jdXNlZEZvbGRlcj8uaWQgPT09IGlkKSB7XG4gICAgICByZWYuY3VycmVudD8uZm9jdXMoKTtcbiAgICB9XG4gIH0sIFtmb2N1c2VkRm9sZGVyLCByZWYsIGlkXSk7XG5cbiAgcmV0dXJuIChcbiAgICA8U3R5bGVkU2FmZUxpbmtcbiAgICAgIHJvbGU9XCJ0cmVlaXRlbVwiXG4gICAgICByZWY9e3JlZn1cbiAgICAgIG9uS2V5RG93bj17KGU6IEtleWJvYXJkRXZlbnQ8SFRNTEVsZW1lbnQ+KSA9PiB7XG4gICAgICAgIGlmIChlLmtleSA9PT0gJ0VudGVyJykge1xuICAgICAgICAgIHNldFNlbGVjdGVkRm9sZGVyKGZvbGRlcik7XG4gICAgICAgICAgc2V0Rm9jdXNlZEZvbGRlcihmb2xkZXIpO1xuICAgICAgICAgIHJldHVybjtcbiAgICAgICAgfVxuICAgICAgICBhcnJvd05hdmlnYXRpb24oZSwgaWQsIHZpc2libGVGb2xkZXJzLCBzZXRGb2N1c2VkRm9sZGVyLCBvbk9wZW5Gb2xkZXIsIG9uQ2xvc2VGb2xkZXIpO1xuICAgICAgfX1cbiAgICAgIGFyaWEtY3VycmVudD17c2VsZWN0ZWQgPyAncGFnZScgOiB1bmRlZmluZWR9XG4gICAgICB0YWJJbmRleD17c2VsZWN0ZWQgfHwgZm9jdXNlZCA/IDAgOiAtMX1cbiAgICAgIHNlbGVjdGVkPXtzZWxlY3RlZH1cbiAgICAgIG9uRm9jdXM9eygpID0+IHNldEZvY3VzZWRGb2xkZXIoZm9sZGVyKX1cbiAgICAgIG9uQ2xpY2s9e2hhbmRsZUNsaWNrfVxuICAgICAgdG89e2xvYWRpbmcgPyAnJyA6IGAvbWlubmRsYS8ke2lkfWB9PlxuICAgICAgPEljb25XcmFwcGVyPntpY29ufTwvSWNvbldyYXBwZXI+XG4gICAgICB7bmFtZX1cbiAgICA8L1N0eWxlZFNhZmVMaW5rPlxuICApO1xufTtcblxuZXhwb3J0IGRlZmF1bHQgTmF2aWdhdGlvbkxpbms7XG4iXX0= */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-var NavigationLink = function NavigationLink(_ref3) {
-  var loading = _ref3.loading,
-    folder = _ref3.folder,
-    selectedFolder = _ref3.selectedFolder,
-    focusedFolder = _ref3.focusedFolder,
-    setSelectedFolder = _ref3.setSelectedFolder,
-    setFocusedFolder = _ref3.setFocusedFolder,
-    visibleFolders = _ref3.visibleFolders,
-    onOpenFolder = _ref3.onOpenFolder,
-    onCloseFolder = _ref3.onCloseFolder;
-  var id = folder.id,
-    icon = folder.icon,
-    name = folder.name;
-  var selected = selectedFolder && selectedFolder.id === id;
-  var ref = (0, _react.useRef)(null);
-  var focused = (focusedFolder === null || focusedFolder === void 0 ? void 0 : focusedFolder.id) === id;
-  var handleClick = function handleClick() {
-    if (!selected) {
-      setSelectedFolder(folder);
-      setFocusedFolder(folder);
-    }
-  };
-  (0, _react.useEffect)(function () {
-    if ((focusedFolder === null || focusedFolder === void 0 ? void 0 : focusedFolder.id) === id) {
-      var _ref$current;
-      (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus();
-    }
-  }, [focusedFolder, ref, id]);
-  return (0, _jsxRuntime.jsxs)(StyledSafeLink, {
-    role: "treeitem",
-    ref: ref,
-    onKeyDown: function onKeyDown(e) {
-      if (e.key === 'Enter') {
-        setSelectedFolder(folder);
-        setFocusedFolder(folder);
-        return;
-      }
-      (0, _arrowNavigation.arrowNavigation)(e, id, visibleFolders, setFocusedFolder, onOpenFolder, onCloseFolder);
-    },
-    "aria-current": selected ? 'page' : undefined,
-    tabIndex: selected || focused ? 0 : -1,
-    selected: selected,
-    onFocus: function onFocus() {
-      return setFocusedFolder(folder);
-    },
-    onClick: handleClick,
-    to: loading ? '' : "/minndla/".concat(id),
-    children: [(0, _jsxRuntime.jsx)(IconWrapper, {
-      children: icon
-    }), name]
-  });
-};
-var _default = NavigationLink;
-exports["default"] = _default;

package/src/TreeStructure/NavigationLink.tsx

@@ -1,107 +0,0 @@
-/**
- * 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 styled from '@emotion/styled';
-import { colors, fonts, spacing } from '@ndla/core';
-import React, { KeyboardEvent, useEffect, useRef } from 'react';
-import SafeLink from '@ndla/safelink';
-import { arrowNavigation } from './arrowNavigation';
-import { CommonFolderItemsProps, FolderType } from './types';
-
-interface StyledProps {
-  selected?: boolean;
-}
-
-const StyledSafeLink = styled(SafeLink)<StyledProps>`
-  display: grid;
-  grid-template-columns: ${spacing.medium} 1fr;
-  align-items: center;
-  padding: ${spacing.xxsmall};
-  margin: ${spacing.xsmall} 0;
-  gap: ${spacing.xxsmall};
-  box-shadow: none;
-
-  color: ${({ selected }) => (selected ? colors.brand.primary : colors.text.primary)};
-  font-weight: ${({ selected }) => (selected ? fonts.weight.semibold : fonts.weight.normal)};
-  ${fonts.sizes('16px')};
-
-  :hover,
-  :focus {
-    color: ${colors.brand.primary};
-  }
-  svg {
-    height: 26px;
-    width: 26px;
-  }
-`;
-
-const IconWrapper = styled.span`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`;
-
-interface Props extends CommonFolderItemsProps {
-  isOpen: boolean;
-  folder: FolderType;
-}
-
-const NavigationLink = ({
-  loading,
-  folder,
-  selectedFolder,
-  focusedFolder,
-  setSelectedFolder,
-  setFocusedFolder,
-  visibleFolders,
-  onOpenFolder,
-  onCloseFolder,
-}: Props) => {
-  const { id, icon, name } = folder;
-  const selected = selectedFolder && selectedFolder.id === id;
-  const ref = useRef<HTMLButtonElement & HTMLAnchorElement>(null);
-  const focused = focusedFolder?.id === id;
-
-  const handleClick = () => {
-    if (!selected) {
-      setSelectedFolder(folder);
-      setFocusedFolder(folder);
-    }
-  };
-
-  useEffect(() => {
-    if (focusedFolder?.id === id) {
-      ref.current?.focus();
-    }
-  }, [focusedFolder, ref, id]);
-
-  return (
-    <StyledSafeLink
-      role="treeitem"
-      ref={ref}
-      onKeyDown={(e: KeyboardEvent<HTMLElement>) => {
-        if (e.key === 'Enter') {
-          setSelectedFolder(folder);
-          setFocusedFolder(folder);
-          return;
-        }
-        arrowNavigation(e, id, visibleFolders, setFocusedFolder, onOpenFolder, onCloseFolder);
-      }}
-      aria-current={selected ? 'page' : undefined}
-      tabIndex={selected || focused ? 0 : -1}
-      selected={selected}
-      onFocus={() => setFocusedFolder(folder)}
-      onClick={handleClick}
-      to={loading ? '' : `/minndla/${id}`}>
-      <IconWrapper>{icon}</IconWrapper>
-      {name}
-    </StyledSafeLink>
-  );
-};
-
-export default NavigationLink;