@ndla/ui 56.0.13-alpha.0 → 56.0.15-alpha.0

package/src/TreeStructure/FolderItems.tsx

@@ -1,121 +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 { ReactNode } from "react";
-import styled from "@emotion/styled";
-import { animations } from "@ndla/core";
-import { IFolder } from "@ndla/types-backend/myndla-api";
-import FolderItem from "./FolderItem";
-import { treestructureId } from "./helperFunctions";
-import { CommonFolderItemsProps, NewFolderInputFunc, OnCreatedFunc } from "./types";
-
-const StyledUL = styled.ul`
-  ${animations.fadeInLeft(animations.durations.fast)};
-  animation-fill-mode: forwards;
-  @media (prefers-reduced-motion: reduce) {
-    animation: none;
-  }
-  list-style: none;
-  padding: 0;
-`;
-
-const StyledLI = styled.li`
-  display: flex;
-  flex-direction: column;
-  padding: 0;
-  &[data-type="navigation"] {
-    align-items: flex-start;
-  }
-`;
-
-export interface FolderItemsProps extends CommonFolderItemsProps {
-  folders: IFolder[];
-  newFolderParentId: string | undefined;
-  onCancelNewFolder: () => void;
-  openFolders: string[];
-  parentFolder?: IFolder;
-  children?: ReactNode;
-  onCreate: OnCreatedFunc;
-  newFolderInput?: NewFolderInputFunc;
-}
-
-const FolderItems = ({
-  folders,
-  level,
-  loading,
-  newFolderParentId,
-  onCancelNewFolder,
-  openFolders,
-  type,
-  parentFolder,
-  children,
-  onCreate,
-  newFolderInput,
-  ...rest
-}: FolderItemsProps) => (
-  <StyledUL
-    id={
-      level === 0 && type === "picker"
-        ? treestructureId(type, "popup")
-        : parentFolder
-          ? treestructureId(type, `subfolders-${parentFolder.id}`)
-          : undefined
-    }
-    tabIndex={-1}
-    aria-labelledby={level === 0 && type === "picker" ? treestructureId(type, "label") : undefined}
-    role={level === 0 ? "tree" : "group"}
-  >
-    {children}
-    {folders.map((folder, index) => {
-      const { subfolders, id } = folder;
-      const isOpen = openFolders?.includes(id);
-
-      return (
-        <StyledLI key={id} tabIndex={-1} role="none" data-type={type}>
-          <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>
-      );
-    })}
-  </StyledUL>
-);
-
-export default FolderItems;

package/src/TreeStructure/arrowNavigation.ts

@@ -1,54 +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 { KeyboardEvent } from "react";
-import { IFolder } from "@ndla/types-backend/myndla-api";
-
-const navigateVertical = (
-  visibleFolders: IFolder[],
-  folderId: string,
-  setFocusedFolderId: (id: IFolder) => void,
-  direction: 1 | -1,
-) => {
-  const currentIndex = visibleFolders.findIndex((folder) => folder.id === folderId);
-  const target = visibleFolders[currentIndex + direction];
-  if (target !== undefined) {
-    setFocusedFolderId(target);
-  }
-};
-
-const arrowKeys = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Enter"];
-
-export const arrowNavigation = (
-  e: KeyboardEvent<HTMLElement>,
-  id: string,
-  visibleFolders: IFolder[],
-  setFocusedFolderId: (id: IFolder) => 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;
-  }
-};