@ndla/ui 56.0.34-alpha.0 → 56.0.36-alpha.0

package/es/TreeStructure/TreeStructure.js

@@ -1,318 +0,0 @@
-/**
- * Copyright (c) 2024-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 { useCallback, useMemo, useRef, useState } from "react";
-import { flushSync } from "react-dom";
-import { useTranslation } from "react-i18next";
-import { useTreeView, usePopoverContext } from "@ark-ui/react";
-import { AddLine, HeartFill } from "@ndla/icons/action";
-import { ArrowDownShortLine, ArrowRightShortLine } from "@ndla/icons/common";
-import { FolderUserLine } from "@ndla/icons/contentType";
-import { FolderLine } from "@ndla/icons/editor";
-import { Button, IconButton, PopoverContent, PopoverRoot, PopoverTrigger, Tree, TreeBranch, TreeBranchContent, TreeBranchControl, TreeBranchIndicator, TreeBranchText, TreeBranchTrigger, TreeItem, TreeItemText, TreeLabel, TreeRootProvider } from "@ndla/primitives";
-import { HStack, Stack, styled } from "@ndla/styled-system/jsx";
-import { flattenFolders } from "./helperFunctions";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const MAX_LEVEL_FOR_FOLDERS = 5;
-const StyledButton = styled(Button, {
-  base: {
-    width: "100%",
-    justifyContent: "space-between",
-    "& span": {
-      overflow: "hidden",
-      textOverflow: "ellipsis"
-    }
-  }
-});
-const StyledHStack = styled(HStack, {
-  base: {
-    overflow: "hidden"
-  }
-});
-const StyledHeartFill = styled(HeartFill, {
-  base: {
-    color: "icon.strong"
-  }
-});
-const StyledFolderLine = styled(FolderLine, {
-  base: {
-    color: "icon.strong"
-  }
-});
-const StyledFolderUserLine = styled(FolderUserLine, {
-  base: {
-    color: "icon.strong"
-  }
-});
-const StyledTreeRootProvider = styled(TreeRootProvider, {
-  base: {
-    width: "100%",
-    maxHeight: "inherit"
-  }
-});
-const StyledPopoverContent = styled(PopoverContent, {
-  base: {
-    display: "flex",
-    flexDirection: "column",
-    gap: "xsmall",
-    overflow: "auto",
-    maxHeight: "inherit",
-    paddingInline: "xsmall",
-    paddingBlock: "xsmall"
-  }
-});
-const LabelHStack = styled(HStack, {
-  base: {
-    width: "100%"
-  }
-});
-export const TreeStructure = _ref => {
-  let {
-    folders,
-    defaultOpenFolders,
-    newFolderInput,
-    label,
-    targetResource,
-    loading,
-    maxLevel = MAX_LEVEL_FOR_FOLDERS,
-    onSelectFolder,
-    ariaDescribedby
-  } = _ref;
-  const [open, setOpen] = useState(false);
-  const [selectedValue, setSelectedValue] = useState(defaultOpenFolders?.[defaultOpenFolders?.length - 1] ?? "");
-  const [expandedValue, setExpandedValue] = useState(defaultOpenFolders ?? []);
-  const [focusedValue, setFocusedValue] = useState(selectedValue);
-  const [newFolderParentId, setNewFolderParentId] = useState(null);
-  const newFolderButtonRef = useRef(null);
-  const {
-    t
-  } = useTranslation();
-  const rootFolderIds = useMemo(() => folders.map(folder => folder.id), [folders]);
-  const contentRef = useRef(null);
-  const selectedFolder = useMemo(() => {
-    return flattenFolders(folders).find(folder => folder.id === selectedValue);
-  }, [folders, selectedValue]);
-  const disableCreateFolder = useMemo(() => {
-    return (selectedFolder?.breadcrumbs.length ?? 0) > maxLevel - 1;
-  }, [maxLevel, selectedFolder?.breadcrumbs.length]);
-  const onOpenChange = useCallback(details => {
-    setOpen(details.open);
-    if (!details.open) {
-      setNewFolderParentId(null);
-    }
-  }, []);
-  const onKeyDown = useCallback(e => {
-    if (e.key === "ArrowUp" || e.key === "ArrowDown") {
-      e.stopPropagation();
-      setOpen(true);
-    }
-  }, []);
-  const onShowInput = useCallback(() => {
-    if (disableCreateFolder) return;
-    const flattenedFolders = flattenFolders(folders);
-    const folder = flattenedFolders.find(folder => folder.id === selectedValue);
-    const newExpandedIds = rootFolderIds.concat(folder?.breadcrumbs.map(bc => bc.id) ?? []);
-    setOpen(true);
-    setExpandedValue(prev => Array.from(new Set([...prev, ...newExpandedIds])));
-    setNewFolderParentId(selectedValue);
-  }, [disableCreateFolder, folders, rootFolderIds, selectedValue]);
-  const treeView = useTreeView({
-    focusedValue,
-    onFocusChange: details => !!details.focusedValue && setFocusedValue(details.focusedValue),
-    expandedValue,
-    onExpandedChange: details => setExpandedValue(details.expandedValue),
-    selectedValue: [selectedValue],
-    onSelectionChange: details => {
-      // TODO: This is currently a bug in zag. The TreeView component simply expects the already selected value to remain selected. As such, always choose the "last" selected value.
-      const val = details.selectedValue[details.selectedValue.length - 1];
-      if (!val) return;
-      if (val === selectedValue && details.focusedValue === selectedValue) {
-        setOpen(false);
-        return;
-      }
-      setSelectedValue(val);
-      onSelectFolder?.(val);
-    },
-    expandOnClick: false
-  });
-  const onCreateFolder = useCallback(folder => {
-    if (!folder) return;
-    const focus = treeView.focusItem;
-    const expand = treeView.expand;
-    const select = treeView.select;
-    flushSync(() => {
-      setOpen(true);
-    });
-    flushSync(() => {
-      expand(folder.breadcrumbs.map(bc => bc.id));
-    });
-    flushSync(() => {
-      select([folder.id]);
-    });
-    flushSync(() => {
-      focus(folder.id);
-    });
-    setNewFolderParentId(null);
-  }, [treeView.expand, treeView.focusItem, treeView.select]);
-  const onAnimationEnd = useCallback(() => {
-    if (open && focusedValue) {
-      document.getElementById(focusedValue)?.scrollIntoView({
-        behavior: "smooth",
-        block: "nearest"
-      });
-    }
-  }, [focusedValue, open]);
-  const onCancelFolder = useCallback(() => {
-    if (!selectedFolder) return;
-    const focusFunc = selectedFolder.subfolders.length ? treeView.focusBranch : treeView.focusItem;
-    focusFunc(selectedFolder.id);
-    setNewFolderParentId(null);
-  }, [selectedFolder, treeView.focusBranch, treeView.focusItem]);
-  const addTooltip = loading ? t("loading") : disableCreateFolder ? t("treeStructure.maxFoldersAlreadyAdded") : t("myNdla.newFolderUnder", {
-    folderName: selectedFolder?.name
-  });
-  return /*#__PURE__*/_jsx(StyledTreeRootProvider, {
-    value: treeView,
-    asChild: true,
-    ...treeView.getRootProps(),
-    children: /*#__PURE__*/_jsxs(Stack, {
-      align: "flex-end",
-      children: [/*#__PURE__*/_jsxs(LabelHStack, {
-        gap: "xsmall",
-        justify: "space-between",
-        children: [/*#__PURE__*/_jsx(TreeLabel, {
-          children: label
-        }), /*#__PURE__*/_jsxs(Button, {
-          size: "small",
-          variant: "tertiary",
-          ref: newFolderButtonRef,
-          "aria-disabled": disableCreateFolder,
-          title: addTooltip,
-          "aria-label": addTooltip,
-          loading: loading,
-          onClick: onShowInput,
-          children: [/*#__PURE__*/_jsx(AddLine, {}), t("myNdla.newFolder")]
-        })]
-      }), /*#__PURE__*/_jsxs(PopoverRoot, {
-        open: open,
-        positioning: {
-          sameWidth: true
-        },
-        onOpenChange: onOpenChange,
-        persistentElements: [() => newFolderButtonRef.current],
-        initialFocusEl: () => contentRef.current?.querySelector("input") ?? null,
-        children: [/*#__PURE__*/_jsx(PopoverTrigger, {
-          asChild: true,
-          children: /*#__PURE__*/_jsxs(StyledButton, {
-            variant: "secondary",
-            onKeyDown: onKeyDown,
-            "aria-haspopup": "tree",
-            role: "combobox",
-            "aria-describedby": ariaDescribedby,
-            "aria-activedescendant": focusedValue ?? undefined,
-            children: [/*#__PURE__*/_jsx("span", {
-              children: selectedFolder?.name
-            }), /*#__PURE__*/_jsx(ArrowDownShortLine, {})]
-          })
-        }), /*#__PURE__*/_jsxs(StyledPopoverContent, {
-          onAnimationEnd: onAnimationEnd,
-          ref: contentRef,
-          children: [!!newFolderParentId && newFolderInput?.({
-            parentId: newFolderParentId,
-            onCreate: onCreateFolder,
-            onCancel: onCancelFolder
-          }), /*#__PURE__*/_jsx(Tree, {
-            children: folders.map(folder => /*#__PURE__*/_jsx(TreeStructureItem, {
-              folder: folder,
-              targetResource: targetResource
-            }, folder.id))
-          })]
-        })]
-      })]
-    })
-  });
-};
-const TreeStructureItem = _ref2 => {
-  let {
-    folder,
-    targetResource
-  } = _ref2;
-  const {
-    t
-  } = useTranslation();
-  const {
-    setOpen
-  } = usePopoverContext();
-  const containsResource = targetResource && folder.resources.some(resource => resource.resourceId === targetResource.resourceId);
-  const FolderIcon = folder.status === "shared" ? StyledFolderUserLine : StyledFolderLine;
-  const onKeyDown = useCallback(e => {
-    if (e.key === "Enter") {
-      setOpen(false);
-    }
-  }, [setOpen]);
-  if (!folder.subfolders.length) {
-    return /*#__PURE__*/_jsx(TreeItem, {
-      value: folder.id,
-      onKeyDown: onKeyDown,
-      id: folder.id,
-      children: /*#__PURE__*/_jsxs(StyledHStack, {
-        gap: "xsmall",
-        justify: "space-between",
-        children: [/*#__PURE__*/_jsxs(StyledHStack, {
-          gap: "xxsmall",
-          justify: "center",
-          children: [/*#__PURE__*/_jsx(FolderIcon, {}), /*#__PURE__*/_jsx(TreeItemText, {
-            children: folder.name
-          })]
-        }), containsResource && /*#__PURE__*/_jsx(StyledHeartFill, {
-          title: t("myNdla.alreadyInFolder")
-        })]
-      })
-    }, folder.id);
-  }
-  const ariaLabel = folder.status === "shared" ? `${folder.name}. ${t("myNdla.folder.sharing.shared")}` : folder.name;
-  return /*#__PURE__*/_jsxs(TreeBranch, {
-    value: folder.id,
-    id: folder.id,
-    children: [/*#__PURE__*/_jsx(TreeBranchControl, {
-      onKeyDown: onKeyDown,
-      asChild: true,
-      children: /*#__PURE__*/_jsxs(StyledHStack, {
-        gap: "xsmall",
-        justify: "space-between",
-        children: [/*#__PURE__*/_jsxs(StyledHStack, {
-          gap: "xxsmall",
-          justify: "center",
-          children: [/*#__PURE__*/_jsx(IconButton, {
-            variant: "clear",
-            asChild: true,
-            children: /*#__PURE__*/_jsx(TreeBranchTrigger, {
-              children: /*#__PURE__*/_jsx(TreeBranchIndicator, {
-                asChild: true,
-                children: /*#__PURE__*/_jsx(ArrowRightShortLine, {})
-              })
-            })
-          }), /*#__PURE__*/_jsx(FolderIcon, {}), /*#__PURE__*/_jsx(TreeBranchText, {
-            "aria-label": ariaLabel,
-            title: ariaLabel,
-            children: folder.name
-          })]
-        }), containsResource && /*#__PURE__*/_jsx(StyledHeartFill, {
-          title: t("myNdla.alreadyInFolder"),
-          "aria-label": t("myNdla.alreadyInFolder"),
-          "aria-hidden": false
-        })]
-      })
-    }), /*#__PURE__*/_jsx(TreeBranchContent, {
-      children: folder.subfolders.map(subfolder => /*#__PURE__*/_jsx(TreeStructureItem, {
-        folder: subfolder,
-        targetResource: targetResource
-      }, subfolder.id))
-    })]
-  }, folder.id);
-};

package/es/TreeStructure/helperFunctions.js

@@ -1,29 +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.
- *
- */
-
-export const flattenFolders = (folders, openFolders) => {
-  return folders.reduce((acc, _ref) => {
-    let {
-      subfolders,
-      id,
-      ...rest
-    } = _ref;
-    if (!subfolders || openFolders && !openFolders.includes(id)) {
-      return acc.concat({
-        subfolders,
-        id,
-        ...rest
-      });
-    }
-    return acc.concat({
-      subfolders,
-      id,
-      ...rest
-    }, flattenFolders(subfolders, openFolders));
-  }, []);
-};

package/es/TreeStructure/index.js

@@ -1,9 +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.
- *
- */
-
-export { TreeStructure } from "./TreeStructure";

package/es/TreeStructure/types.js

@@ -1 +0,0 @@
-export {};

package/lib/Layout/LayoutItem.d.ts

@@ -1,11 +0,0 @@
-/**
- * Copyright (c) 2016-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-export declare const LayoutItem: import("@ndla/styled-system/types").StyledComponent<"section", {
-    layout?: "center" | "extend" | undefined;
-}>;
-export default LayoutItem;

package/lib/Layout/LayoutItem.js

@@ -1,40 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.LayoutItem = void 0;
-var _jsx = require("@ndla/styled-system/jsx");
-/**
- * Copyright (c) 2016-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-// TODO: Refactor this. This is a copy of our old layout.
-const LayoutItem = exports.LayoutItem = (0, _jsx.styled)("section", {
-  defaultVariants: {
-    layout: "center"
-  },
-  variants: {
-    layout: {
-      center: {
-        position: "relative!",
-        width: "83.333%",
-        right: "auto !important",
-        left: "8.333%"
-      },
-      extend: {
-        tablet: {
-          position: "relative!",
-          width: "83.333%",
-          right: "auto!",
-          left: "8.333%"
-        }
-      }
-    }
-  }
-});
-var _default = exports.default = LayoutItem;

package/lib/TreeStructure/TreeStructure.d.ts

@@ -1,22 +0,0 @@
-/**
- * Copyright (c) 2024-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 { IFolder, IResource } from "@ndla/types-backend/myndla-api";
-import { NewFolderInputFunc } from "./types";
-export declare const MAX_LEVEL_FOR_FOLDERS = 5;
-export interface TreeStructureProps {
-    loading?: boolean;
-    targetResource?: IResource;
-    defaultOpenFolders?: string[];
-    folders: IFolder[];
-    label?: string;
-    maxLevel?: number;
-    newFolderInput?: NewFolderInputFunc;
-    onSelectFolder?: (id: string) => void;
-    ariaDescribedby?: string;
-}
-export declare const TreeStructure: ({ folders, defaultOpenFolders, newFolderInput, label, targetResource, loading, maxLevel, onSelectFolder, ariaDescribedby, }: TreeStructureProps) => import("react/jsx-runtime").JSX.Element;