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

package/dist/panda.buildinfo.json

@@ -376,14 +376,6 @@
       "width]___[value:surface.3xsmall",
       "textStyle]___[value:heading.large",
       "textStyle]___[value:title.medium",
-      "position]___[value:relative!",
-      "width]___[value:83.333%",
-      "right]___[value:auto !important",
-      "left]___[value:8.333%",
-      "position]___[value:relative!]___[cond:tablet",
-      "width]___[value:83.333%]___[cond:tablet",
-      "right]___[value:auto!]___[cond:tablet",
-      "left]___[value:8.333%]___[cond:tablet",
       "marginLeft]___[value:auto",
       "marginRight]___[value:auto",
       "paddingLeft]___[value:18px",
@@ -438,12 +430,7 @@
       "padding]___[value:xsmall]___[cond:tabletDown",
       "aspectRatio]___[value:1/1",
       "width]___[value:100%]___[cond:tabletDown",
-      "borderRadius]___[value:0]___[cond:tabletDown",
-      "overflow]___[value:hidden]___[cond:& span",
-      "textOverflow]___[value:ellipsis]___[cond:& span",
-      "maxHeight]___[value:inherit",
-      "overflow]___[value:auto",
-      "gap]___[value:10px"
+      "borderRadius]___[value:0]___[cond:tabletDown"
     ],
     "recipes": {}
   }

package/dist/styles.css

@@ -590,14 +590,6 @@
     width: var(--sizes-surface-3xsmall);
 }
 
-  .pos_relative\! {
-    position: relative !important;
-}
-
-  .w_83\.333\% {
-    width: 83.333%;
-}
-
   .max-w_1150px {
     max-width: 1150px;
 }
@@ -646,18 +638,6 @@
     aspect-ratio: 1/1;
 }
 
-  .max-h_inherit {
-    max-height: inherit;
-}
-
-  .ov_auto {
-    overflow: auto;
-}
-
-  .gap_10px {
-    gap: 10px;
-}
-
   .flex-d_column {
     flex-direction: column;
 }
@@ -887,14 +867,6 @@
     border-color: var(--colors-surface-brand-2);
 }
 
-  .right_auto\! {
-    right: auto !important;
-}
-
-  .left_8\.333\% {
-    left: 8.333%;
-}
-
   .ml_auto {
     margin-left: auto;
 }
@@ -1211,14 +1183,6 @@
     text-decoration: underline;
 }
 
-  .\[\&_span\]\:ov_hidden span {
-    overflow: hidden;
-}
-
-  .\[\&_span\]\:tov_ellipsis span {
-    text-overflow: ellipsis;
-}
-
   .after\:content_0::after {
     content: 0;
 }
@@ -1551,12 +1515,6 @@
 }
     .tablet\:w_26px {
       width: 26px;
-}
-    .tablet\:pos_relative\! {
-      position: relative !important;
-}
-    .tablet\:w_83\.333\% {
-      width: 83.333%;
 }
     .tablet\:ai_unset {
       align-items: unset;
@@ -1569,12 +1527,6 @@
 }
     .tablet\:mb_xxlarge {
       margin-bottom: var(--spacing-xxlarge);
-}
-    .tablet\:right_auto\! {
-      right: auto !important;
-}
-    .tablet\:left_8\.333\% {
-      left: 8.333%;
 }
     .tablet\:bg-c_\#f8f8f8 {
       background-color: #f8f8f8;

package/es/AudioPlayer/AudioPlayer.js

@@ -196,7 +196,7 @@ const AudioPlayer = _ref => {
         asChild: true,
         textStyle: "title.medium",
         consumeCss: true,
-        children: /*#__PURE__*/_jsx("h3", {
+        children: /*#__PURE__*/_jsx("h4", {
           children: t("audio.textVersion.heading")
         })
       }), /*#__PURE__*/_jsx(TextVersionText, {

package/es/Layout/index.js

@@ -6,7 +6,5 @@
  *
  */
 
-import LayoutItem from "./LayoutItem";
 export { default as OneColumn } from "./OneColumn";
-export { default as PageContainer } from "./PageContainer";
-export default LayoutItem;
+export { default as PageContainer } from "./PageContainer";

package/es/index.js

@@ -30,12 +30,11 @@ export { default as messagesSE } from "./locale/messages-se";
 export { default as messagesSMA } from "./locale/messages-sma";
 export { default as Breadcrumb, HomeBreadcrumb } from "./Breadcrumb";
 export { i18nInstance, formatNestedMessages, useTagsInputTranslations, useTagSelectorTranslations, useComboboxTranslations, usePaginationTranslations, useAudioSearchTranslations, useImageSearchTranslations, useVideoSearchTranslations } from "./i18n";
-export { default as LayoutItem, OneColumn, PageContainer } from "./Layout";
+export { OneColumn, PageContainer } from "./Layout";
 export { default as ContentTypeBadge, SubjectMaterialBadge, TasksAndActivitiesBadge, AssessmentResourcesBadge, LearningPathBadge, SubjectBadge, SourceMaterialBadge, ConceptBadge } from "./ContentTypeBadge";
 export { ContentTypeBadge as ContentTypeBadgeNew, contentTypeToBadgeVariantMap } from "./ContentTypeBadge/ContentTypeBadgeNew";
 export { default as CopyParagraphButton } from "./CopyParagraphButton";
 export { TagSelectorRoot, TagSelectorLabel, TagSelectorItemInput, TagSelectorTrigger, TagSelectorControl, TagSelectorClearTrigger, TagSelectorInputBase, TagSelectorInput } from "./TagSelector/TagSelector";
-export { TreeStructure } from "./TreeStructure";
 export { BlogPostV2 } from "./BlogPost";
 export { KeyFigure } from "./KeyFigure";
 export { ContactBlock, contactBlockBackgrounds } from "./ContactBlock";

package/lib/AudioPlayer/AudioPlayer.js

@@ -202,7 +202,7 @@ const AudioPlayer = _ref => {
         asChild: true,
         textStyle: "title.medium",
         consumeCss: true,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("h3", {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("h4", {
           children: t("audio.textVersion.heading")
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(TextVersionText, {

package/lib/Layout/index.d.ts

@@ -5,7 +5,5 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import LayoutItem from "./LayoutItem";
 export { default as OneColumn } from "./OneColumn";
 export { default as PageContainer } from "./PageContainer";
-export default LayoutItem;

package/lib/Layout/index.js

@@ -15,16 +15,6 @@ Object.defineProperty(exports, "PageContainer", {
     return _PageContainer.default;
   }
 });
-exports.default = void 0;
-var _LayoutItem = _interopRequireDefault(require("./LayoutItem"));
 var _OneColumn = _interopRequireDefault(require("./OneColumn"));
 var _PageContainer = _interopRequireDefault(require("./PageContainer"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-/**
- * 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.
- *
- */
-var _default = exports.default = _LayoutItem.default;
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/lib/index.d.ts

@@ -28,14 +28,12 @@ export { default as messagesSMA } from "./locale/messages-sma";
 export { default as Breadcrumb, HomeBreadcrumb } from "./Breadcrumb";
 export type { SimpleBreadcrumbItem, IndexedBreadcrumbItem } from "./Breadcrumb";
 export { i18nInstance, formatNestedMessages, useTagsInputTranslations, useTagSelectorTranslations, useComboboxTranslations, usePaginationTranslations, useAudioSearchTranslations, useImageSearchTranslations, useVideoSearchTranslations, } from "./i18n";
-export { default as LayoutItem, OneColumn, PageContainer } from "./Layout";
+export { OneColumn, PageContainer } from "./Layout";
 export { default as ContentTypeBadge, SubjectMaterialBadge, TasksAndActivitiesBadge, AssessmentResourcesBadge, LearningPathBadge, SubjectBadge, SourceMaterialBadge, ConceptBadge, } from "./ContentTypeBadge";
 export type { ContentTypeBadgeProps, ContentType } from "./ContentTypeBadge/ContentTypeBadgeNew";
 export { ContentTypeBadge as ContentTypeBadgeNew, contentTypeToBadgeVariantMap, } from "./ContentTypeBadge/ContentTypeBadgeNew";
 export { default as CopyParagraphButton } from "./CopyParagraphButton";
 export { TagSelectorRoot, TagSelectorLabel, TagSelectorItemInput, TagSelectorTrigger, TagSelectorControl, TagSelectorClearTrigger, TagSelectorInputBase, TagSelectorInput, } from "./TagSelector/TagSelector";
-export { TreeStructure } from "./TreeStructure";
-export type { TreeStructureProps } from "./TreeStructure";
 export { BlogPostV2 } from "./BlogPost";
 export { KeyFigure } from "./KeyFigure";
 export { ContactBlock, contactBlockBackgrounds } from "./ContactBlock";

package/lib/index.js

@@ -321,12 +321,6 @@ Object.defineProperty(exports, "KeyFigure", {
     return _KeyFigure.KeyFigure;
   }
 });
-Object.defineProperty(exports, "LayoutItem", {
-  enumerable: true,
-  get: function () {
-    return _Layout.default;
-  }
-});
 Object.defineProperty(exports, "LearningPathBadge", {
   enumerable: true,
   get: function () {
@@ -465,12 +459,6 @@ Object.defineProperty(exports, "TasksAndActivitiesBadge", {
     return _ContentTypeBadge.TasksAndActivitiesBadge;
   }
 });
-Object.defineProperty(exports, "TreeStructure", {
-  enumerable: true,
-  get: function () {
-    return _TreeStructure.TreeStructure;
-  }
-});
 Object.defineProperty(exports, "UnknownEmbed", {
   enumerable: true,
   get: function () {
@@ -642,12 +630,11 @@ var _messagesSe = _interopRequireDefault(require("./locale/messages-se"));
 var _messagesSma = _interopRequireDefault(require("./locale/messages-sma"));
 var _Breadcrumb = _interopRequireWildcard(require("./Breadcrumb"));
 var _i18n = require("./i18n");
-var _Layout = _interopRequireWildcard(require("./Layout"));
+var _Layout = require("./Layout");
 var _ContentTypeBadge = _interopRequireWildcard(require("./ContentTypeBadge"));
 var _ContentTypeBadgeNew = require("./ContentTypeBadge/ContentTypeBadgeNew");
 var _CopyParagraphButton = _interopRequireDefault(require("./CopyParagraphButton"));
 var _TagSelector = require("./TagSelector/TagSelector");
-var _TreeStructure = require("./TreeStructure");
 var _BlogPost = require("./BlogPost");
 var _KeyFigure = require("./KeyFigure");
 var _ContactBlock = require("./ContactBlock");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "56.0.33-alpha.0",
+  "version": "56.0.35-alpha.0",
   "description": "UI component library for NDLA",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -33,10 +33,10 @@
   ],
   "dependencies": {
     "@ndla/core": "^5.0.2",
-    "@ndla/icons": "^8.0.23-alpha.0",
+    "@ndla/icons": "^8.0.24-alpha.0",
     "@ndla/licenses": "^8.0.3-alpha.0",
-    "@ndla/primitives": "^1.0.30-alpha.0",
-    "@ndla/safelink": "^7.0.30-alpha.0",
+    "@ndla/primitives": "^1.0.32-alpha.0",
+    "@ndla/safelink": "^7.0.32-alpha.0",
     "@ndla/styled-system": "^0.0.22",
     "@ndla/util": "^5.0.0-alpha.0",
     "html-react-parser": "^5.1.8",
@@ -58,5 +58,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ce553947c81fac1140a0f197084cea944eae44ec"
+  "gitHead": "07ec7465840ff67d4bf2958dab58ead11fac1dee"
 }

package/src/AudioPlayer/AudioPlayer.tsx

@@ -210,7 +210,7 @@ const AudioPlayer = ({ src, title, subtitle, speech, description, img, textVersi
       {!!textVersion && (
         <TextVersionWrapper id={textDescriptionId} hidden={!showTextVersion}>
           <Heading asChild textStyle="title.medium" consumeCss>
-            <h3>{t("audio.textVersion.heading")}</h3>
+            <h4>{t("audio.textVersion.heading")}</h4>
           </Heading>
           <TextVersionText>{textVersion}</TextVersionText>
         </TextVersionWrapper>

package/src/Layout/index.ts

@@ -6,9 +6,5 @@
  *
  */
 
-import LayoutItem from "./LayoutItem";
-
 export { default as OneColumn } from "./OneColumn";
 export { default as PageContainer } from "./PageContainer";
-
-export default LayoutItem;

package/src/index.ts

@@ -90,7 +90,7 @@ export {
   useVideoSearchTranslations,
 } from "./i18n";
 
-export { default as LayoutItem, OneColumn, PageContainer } from "./Layout";
+export { OneColumn, PageContainer } from "./Layout";
 
 export {
   default as ContentTypeBadge,
@@ -122,9 +122,6 @@ export {
   TagSelectorInput,
 } from "./TagSelector/TagSelector";
 
-export { TreeStructure } from "./TreeStructure";
-export type { TreeStructureProps } from "./TreeStructure";
-
 export { BlogPostV2 } from "./BlogPost";
 export { KeyFigure } from "./KeyFigure";
 export { ContactBlock, contactBlockBackgrounds } from "./ContactBlock";

package/es/Layout/LayoutItem.js

@@ -1,35 +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;

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