@ndla/ui 56.0.33-alpha.0 → 56.0.35-alpha.0

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;

package/lib/TreeStructure/TreeStructure.js

@@ -1,325 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.TreeStructure = exports.MAX_LEVEL_FOR_FOLDERS = void 0;
-var _react = require("react");
-var _reactDom = require("react-dom");
-var _reactI18next = require("react-i18next");
-var _react2 = require("@ark-ui/react");
-var _action = require("@ndla/icons/action");
-var _common = require("@ndla/icons/common");
-var _contentType = require("@ndla/icons/contentType");
-var _editor = require("@ndla/icons/editor");
-var _primitives = require("@ndla/primitives");
-var _jsx2 = require("@ndla/styled-system/jsx");
-var _helperFunctions = require("./helperFunctions");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * 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.
- *
- */
-
-const MAX_LEVEL_FOR_FOLDERS = exports.MAX_LEVEL_FOR_FOLDERS = 5;
-const StyledButton = (0, _jsx2.styled)(_primitives.Button, {
-  base: {
-    width: "100%",
-    justifyContent: "space-between",
-    "& span": {
-      overflow: "hidden",
-      textOverflow: "ellipsis"
-    }
-  }
-});
-const StyledHStack = (0, _jsx2.styled)(_jsx2.HStack, {
-  base: {
-    overflow: "hidden"
-  }
-});
-const StyledHeartFill = (0, _jsx2.styled)(_action.HeartFill, {
-  base: {
-    color: "icon.strong"
-  }
-});
-const StyledFolderLine = (0, _jsx2.styled)(_editor.FolderLine, {
-  base: {
-    color: "icon.strong"
-  }
-});
-const StyledFolderUserLine = (0, _jsx2.styled)(_contentType.FolderUserLine, {
-  base: {
-    color: "icon.strong"
-  }
-});
-const StyledTreeRootProvider = (0, _jsx2.styled)(_primitives.TreeRootProvider, {
-  base: {
-    width: "100%",
-    maxHeight: "inherit"
-  }
-});
-const StyledPopoverContent = (0, _jsx2.styled)(_primitives.PopoverContent, {
-  base: {
-    display: "flex",
-    flexDirection: "column",
-    gap: "xsmall",
-    overflow: "auto",
-    maxHeight: "inherit",
-    paddingInline: "xsmall",
-    paddingBlock: "xsmall"
-  }
-});
-const LabelHStack = (0, _jsx2.styled)(_jsx2.HStack, {
-  base: {
-    width: "100%"
-  }
-});
-const TreeStructure = _ref => {
-  let {
-    folders,
-    defaultOpenFolders,
-    newFolderInput,
-    label,
-    targetResource,
-    loading,
-    maxLevel = MAX_LEVEL_FOR_FOLDERS,
-    onSelectFolder,
-    ariaDescribedby
-  } = _ref;
-  const [open, setOpen] = (0, _react.useState)(false);
-  const [selectedValue, setSelectedValue] = (0, _react.useState)(defaultOpenFolders?.[defaultOpenFolders?.length - 1] ?? "");
-  const [expandedValue, setExpandedValue] = (0, _react.useState)(defaultOpenFolders ?? []);
-  const [focusedValue, setFocusedValue] = (0, _react.useState)(selectedValue);
-  const [newFolderParentId, setNewFolderParentId] = (0, _react.useState)(null);
-  const newFolderButtonRef = (0, _react.useRef)(null);
-  const {
-    t
-  } = (0, _reactI18next.useTranslation)();
-  const rootFolderIds = (0, _react.useMemo)(() => folders.map(folder => folder.id), [folders]);
-  const contentRef = (0, _react.useRef)(null);
-  const selectedFolder = (0, _react.useMemo)(() => {
-    return (0, _helperFunctions.flattenFolders)(folders).find(folder => folder.id === selectedValue);
-  }, [folders, selectedValue]);
-  const disableCreateFolder = (0, _react.useMemo)(() => {
-    return (selectedFolder?.breadcrumbs.length ?? 0) > maxLevel - 1;
-  }, [maxLevel, selectedFolder?.breadcrumbs.length]);
-  const onOpenChange = (0, _react.useCallback)(details => {
-    setOpen(details.open);
-    if (!details.open) {
-      setNewFolderParentId(null);
-    }
-  }, []);
-  const onKeyDown = (0, _react.useCallback)(e => {
-    if (e.key === "ArrowUp" || e.key === "ArrowDown") {
-      e.stopPropagation();
-      setOpen(true);
-    }
-  }, []);
-  const onShowInput = (0, _react.useCallback)(() => {
-    if (disableCreateFolder) return;
-    const flattenedFolders = (0, _helperFunctions.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 = (0, _react2.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 = (0, _react.useCallback)(folder => {
-    if (!folder) return;
-    const focus = treeView.focusItem;
-    const expand = treeView.expand;
-    const select = treeView.select;
-    (0, _reactDom.flushSync)(() => {
-      setOpen(true);
-    });
-    (0, _reactDom.flushSync)(() => {
-      expand(folder.breadcrumbs.map(bc => bc.id));
-    });
-    (0, _reactDom.flushSync)(() => {
-      select([folder.id]);
-    });
-    (0, _reactDom.flushSync)(() => {
-      focus(folder.id);
-    });
-    setNewFolderParentId(null);
-  }, [treeView.expand, treeView.focusItem, treeView.select]);
-  const onAnimationEnd = (0, _react.useCallback)(() => {
-    if (open && focusedValue) {
-      document.getElementById(focusedValue)?.scrollIntoView({
-        behavior: "smooth",
-        block: "nearest"
-      });
-    }
-  }, [focusedValue, open]);
-  const onCancelFolder = (0, _react.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__*/(0, _jsxRuntime.jsx)(StyledTreeRootProvider, {
-    value: treeView,
-    asChild: true,
-    ...treeView.getRootProps(),
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsx2.Stack, {
-      align: "flex-end",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(LabelHStack, {
-        gap: "xsmall",
-        justify: "space-between",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.TreeLabel, {
-          children: label
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_primitives.Button, {
-          size: "small",
-          variant: "tertiary",
-          ref: newFolderButtonRef,
-          "aria-disabled": disableCreateFolder,
-          title: addTooltip,
-          "aria-label": addTooltip,
-          loading: loading,
-          onClick: onShowInput,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_action.AddLine, {}), t("myNdla.newFolder")]
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_primitives.PopoverRoot, {
-        open: open,
-        positioning: {
-          sameWidth: true
-        },
-        onOpenChange: onOpenChange,
-        persistentElements: [() => newFolderButtonRef.current],
-        initialFocusEl: () => contentRef.current?.querySelector("input") ?? null,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.PopoverTrigger, {
-          asChild: true,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledButton, {
-            variant: "secondary",
-            onKeyDown: onKeyDown,
-            "aria-haspopup": "tree",
-            role: "combobox",
-            "aria-describedby": ariaDescribedby,
-            "aria-activedescendant": focusedValue ?? undefined,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-              children: selectedFolder?.name
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_common.ArrowDownShortLine, {})]
-          })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledPopoverContent, {
-          onAnimationEnd: onAnimationEnd,
-          ref: contentRef,
-          children: [!!newFolderParentId && newFolderInput?.({
-            parentId: newFolderParentId,
-            onCreate: onCreateFolder,
-            onCancel: onCancelFolder
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Tree, {
-            children: folders.map(folder => /*#__PURE__*/(0, _jsxRuntime.jsx)(TreeStructureItem, {
-              folder: folder,
-              targetResource: targetResource
-            }, folder.id))
-          })]
-        })]
-      })]
-    })
-  });
-};
-exports.TreeStructure = TreeStructure;
-const TreeStructureItem = _ref2 => {
-  let {
-    folder,
-    targetResource
-  } = _ref2;
-  const {
-    t
-  } = (0, _reactI18next.useTranslation)();
-  const {
-    setOpen
-  } = (0, _react2.usePopoverContext)();
-  const containsResource = targetResource && folder.resources.some(resource => resource.resourceId === targetResource.resourceId);
-  const FolderIcon = folder.status === "shared" ? StyledFolderUserLine : StyledFolderLine;
-  const onKeyDown = (0, _react.useCallback)(e => {
-    if (e.key === "Enter") {
-      setOpen(false);
-    }
-  }, [setOpen]);
-  if (!folder.subfolders.length) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.TreeItem, {
-      value: folder.id,
-      onKeyDown: onKeyDown,
-      id: folder.id,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledHStack, {
-        gap: "xsmall",
-        justify: "space-between",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledHStack, {
-          gap: "xxsmall",
-          justify: "center",
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(FolderIcon, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.TreeItemText, {
-            children: folder.name
-          })]
-        }), containsResource && /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledHeartFill, {
-          title: t("myNdla.alreadyInFolder")
-        })]
-      })
-    }, folder.id);
-  }
-  const ariaLabel = folder.status === "shared" ? `${folder.name}. ${t("myNdla.folder.sharing.shared")}` : folder.name;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_primitives.TreeBranch, {
-    value: folder.id,
-    id: folder.id,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.TreeBranchControl, {
-      onKeyDown: onKeyDown,
-      asChild: true,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledHStack, {
-        gap: "xsmall",
-        justify: "space-between",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledHStack, {
-          gap: "xxsmall",
-          justify: "center",
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.IconButton, {
-            variant: "clear",
-            asChild: true,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.TreeBranchTrigger, {
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.TreeBranchIndicator, {
-                asChild: true,
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_common.ArrowRightShortLine, {})
-              })
-            })
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(FolderIcon, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.TreeBranchText, {
-            "aria-label": ariaLabel,
-            title: ariaLabel,
-            children: folder.name
-          })]
-        }), containsResource && /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledHeartFill, {
-          title: t("myNdla.alreadyInFolder"),
-          "aria-label": t("myNdla.alreadyInFolder"),
-          "aria-hidden": false
-        })]
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.TreeBranchContent, {
-      children: folder.subfolders.map(subfolder => /*#__PURE__*/(0, _jsxRuntime.jsx)(TreeStructureItem, {
-        folder: subfolder,
-        targetResource: targetResource
-      }, subfolder.id))
-    })]
-  }, folder.id);
-};

package/lib/TreeStructure/helperFunctions.d.ts

@@ -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.
- *
- */
-import { IFolder } from "@ndla/types-backend/myndla-api";
-export declare const flattenFolders: (folders: IFolder[], openFolders?: string[]) => IFolder[];

package/lib/TreeStructure/helperFunctions.js

@@ -1,36 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.flattenFolders = void 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.
- *
- */
-
-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));
-  }, []);
-};
-exports.flattenFolders = flattenFolders;

package/lib/TreeStructure/index.d.ts

@@ -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 type { TreeStructureProps } from "./TreeStructure";
-export { TreeStructure } from "./TreeStructure";

package/lib/TreeStructure/index.js

@@ -1,12 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "TreeStructure", {
-  enumerable: true,
-  get: function () {
-    return _TreeStructure.TreeStructure;
-  }
-});
-var _TreeStructure = require("./TreeStructure");

package/lib/TreeStructure/types.d.ts

@@ -1,15 +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 { IFolder } from "@ndla/types-backend/myndla-api";
-export type OnCreatedFunc = (folder: IFolder | undefined) => void;
-export type NewFolderInputFunc = ({ onCancel, parentId, onCreate, }: {
-    onCancel: () => void;
-    parentId: string;
-    onCreate: OnCreatedFunc;
-}) => ReactNode;

package/lib/TreeStructure/types.js

@@ -1,5 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});

package/src/Layout/LayoutItem.tsx

@@ -1,36 +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.
- *
- */
-
-import { styled } from "@ndla/styled-system/jsx";
-
-// TODO: Refactor this. This is a copy of our old layout.
-export const LayoutItem = 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%",
-        },
-      },
-    },
-  },
-});
-
-export default LayoutItem;