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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -376,14 +376,6 @@
376
376
  "width]___[value:surface.3xsmall",
377
377
  "textStyle]___[value:heading.large",
378
378
  "textStyle]___[value:title.medium",
379
- "position]___[value:relative!",
380
- "width]___[value:83.333%",
381
- "right]___[value:auto !important",
382
- "left]___[value:8.333%",
383
- "position]___[value:relative!]___[cond:tablet",
384
- "width]___[value:83.333%]___[cond:tablet",
385
- "right]___[value:auto!]___[cond:tablet",
386
- "left]___[value:8.333%]___[cond:tablet",
387
379
  "marginLeft]___[value:auto",
388
380
  "marginRight]___[value:auto",
389
381
  "paddingLeft]___[value:18px",
@@ -438,12 +430,7 @@
438
430
  "padding]___[value:xsmall]___[cond:tabletDown",
439
431
  "aspectRatio]___[value:1/1",
440
432
  "width]___[value:100%]___[cond:tabletDown",
441
- "borderRadius]___[value:0]___[cond:tabletDown",
442
- "overflow]___[value:hidden]___[cond:& span",
443
- "textOverflow]___[value:ellipsis]___[cond:& span",
444
- "maxHeight]___[value:inherit",
445
- "overflow]___[value:auto",
446
- "gap]___[value:10px"
433
+ "borderRadius]___[value:0]___[cond:tabletDown"
447
434
  ],
448
435
  "recipes": {}
449
436
  }
package/dist/styles.css CHANGED
@@ -590,14 +590,6 @@
590
590
  width: var(--sizes-surface-3xsmall);
591
591
  }
592
592
 
593
- .pos_relative\! {
594
- position: relative !important;
595
- }
596
-
597
- .w_83\.333\% {
598
- width: 83.333%;
599
- }
600
-
601
593
  .max-w_1150px {
602
594
  max-width: 1150px;
603
595
  }
@@ -646,18 +638,6 @@
646
638
  aspect-ratio: 1/1;
647
639
  }
648
640
 
649
- .max-h_inherit {
650
- max-height: inherit;
651
- }
652
-
653
- .ov_auto {
654
- overflow: auto;
655
- }
656
-
657
- .gap_10px {
658
- gap: 10px;
659
- }
660
-
661
641
  .flex-d_column {
662
642
  flex-direction: column;
663
643
  }
@@ -887,14 +867,6 @@
887
867
  border-color: var(--colors-surface-brand-2);
888
868
  }
889
869
 
890
- .right_auto\! {
891
- right: auto !important;
892
- }
893
-
894
- .left_8\.333\% {
895
- left: 8.333%;
896
- }
897
-
898
870
  .ml_auto {
899
871
  margin-left: auto;
900
872
  }
@@ -1211,14 +1183,6 @@
1211
1183
  text-decoration: underline;
1212
1184
  }
1213
1185
 
1214
- .\[\&_span\]\:ov_hidden span {
1215
- overflow: hidden;
1216
- }
1217
-
1218
- .\[\&_span\]\:tov_ellipsis span {
1219
- text-overflow: ellipsis;
1220
- }
1221
-
1222
1186
  .after\:content_0::after {
1223
1187
  content: 0;
1224
1188
  }
@@ -1551,12 +1515,6 @@
1551
1515
  }
1552
1516
  .tablet\:w_26px {
1553
1517
  width: 26px;
1554
- }
1555
- .tablet\:pos_relative\! {
1556
- position: relative !important;
1557
- }
1558
- .tablet\:w_83\.333\% {
1559
- width: 83.333%;
1560
1518
  }
1561
1519
  .tablet\:ai_unset {
1562
1520
  align-items: unset;
@@ -1569,12 +1527,6 @@
1569
1527
  }
1570
1528
  .tablet\:mb_xxlarge {
1571
1529
  margin-bottom: var(--spacing-xxlarge);
1572
- }
1573
- .tablet\:right_auto\! {
1574
- right: auto !important;
1575
- }
1576
- .tablet\:left_8\.333\% {
1577
- left: 8.333%;
1578
1530
  }
1579
1531
  .tablet\:bg-c_\#f8f8f8 {
1580
1532
  background-color: #f8f8f8;
@@ -6,7 +6,5 @@
6
6
  *
7
7
  */
8
8
 
9
- import LayoutItem from "./LayoutItem";
10
9
  export { default as OneColumn } from "./OneColumn";
11
- export { default as PageContainer } from "./PageContainer";
12
- export default LayoutItem;
10
+ export { default as PageContainer } from "./PageContainer";
package/es/index.js CHANGED
@@ -30,12 +30,11 @@ export { default as messagesSE } from "./locale/messages-se";
30
30
  export { default as messagesSMA } from "./locale/messages-sma";
31
31
  export { default as Breadcrumb, HomeBreadcrumb } from "./Breadcrumb";
32
32
  export { i18nInstance, formatNestedMessages, useTagsInputTranslations, useTagSelectorTranslations, useComboboxTranslations, usePaginationTranslations, useAudioSearchTranslations, useImageSearchTranslations, useVideoSearchTranslations } from "./i18n";
33
- export { default as LayoutItem, OneColumn, PageContainer } from "./Layout";
33
+ export { OneColumn, PageContainer } from "./Layout";
34
34
  export { default as ContentTypeBadge, SubjectMaterialBadge, TasksAndActivitiesBadge, AssessmentResourcesBadge, LearningPathBadge, SubjectBadge, SourceMaterialBadge, ConceptBadge } from "./ContentTypeBadge";
35
35
  export { ContentTypeBadge as ContentTypeBadgeNew, contentTypeToBadgeVariantMap } from "./ContentTypeBadge/ContentTypeBadgeNew";
36
36
  export { default as CopyParagraphButton } from "./CopyParagraphButton";
37
37
  export { TagSelectorRoot, TagSelectorLabel, TagSelectorItemInput, TagSelectorTrigger, TagSelectorControl, TagSelectorClearTrigger, TagSelectorInputBase, TagSelectorInput } from "./TagSelector/TagSelector";
38
- export { TreeStructure } from "./TreeStructure";
39
38
  export { BlogPostV2 } from "./BlogPost";
40
39
  export { KeyFigure } from "./KeyFigure";
41
40
  export { ContactBlock, contactBlockBackgrounds } from "./ContactBlock";
@@ -5,7 +5,5 @@
5
5
  * LICENSE file in the root directory of this source tree.
6
6
  *
7
7
  */
8
- import LayoutItem from "./LayoutItem";
9
8
  export { default as OneColumn } from "./OneColumn";
10
9
  export { default as PageContainer } from "./PageContainer";
11
- export default LayoutItem;
@@ -15,16 +15,6 @@ Object.defineProperty(exports, "PageContainer", {
15
15
  return _PageContainer.default;
16
16
  }
17
17
  });
18
- exports.default = void 0;
19
- var _LayoutItem = _interopRequireDefault(require("./LayoutItem"));
20
18
  var _OneColumn = _interopRequireDefault(require("./OneColumn"));
21
19
  var _PageContainer = _interopRequireDefault(require("./PageContainer"));
22
- function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
23
- /**
24
- * Copyright (c) 2016-present, NDLA.
25
- *
26
- * This source code is licensed under the GPLv3 license found in the
27
- * LICENSE file in the root directory of this source tree.
28
- *
29
- */
30
- var _default = exports.default = _LayoutItem.default;
20
+ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
package/lib/index.d.ts CHANGED
@@ -28,14 +28,12 @@ export { default as messagesSMA } from "./locale/messages-sma";
28
28
  export { default as Breadcrumb, HomeBreadcrumb } from "./Breadcrumb";
29
29
  export type { SimpleBreadcrumbItem, IndexedBreadcrumbItem } from "./Breadcrumb";
30
30
  export { i18nInstance, formatNestedMessages, useTagsInputTranslations, useTagSelectorTranslations, useComboboxTranslations, usePaginationTranslations, useAudioSearchTranslations, useImageSearchTranslations, useVideoSearchTranslations, } from "./i18n";
31
- export { default as LayoutItem, OneColumn, PageContainer } from "./Layout";
31
+ export { OneColumn, PageContainer } from "./Layout";
32
32
  export { default as ContentTypeBadge, SubjectMaterialBadge, TasksAndActivitiesBadge, AssessmentResourcesBadge, LearningPathBadge, SubjectBadge, SourceMaterialBadge, ConceptBadge, } from "./ContentTypeBadge";
33
33
  export type { ContentTypeBadgeProps, ContentType } from "./ContentTypeBadge/ContentTypeBadgeNew";
34
34
  export { ContentTypeBadge as ContentTypeBadgeNew, contentTypeToBadgeVariantMap, } from "./ContentTypeBadge/ContentTypeBadgeNew";
35
35
  export { default as CopyParagraphButton } from "./CopyParagraphButton";
36
36
  export { TagSelectorRoot, TagSelectorLabel, TagSelectorItemInput, TagSelectorTrigger, TagSelectorControl, TagSelectorClearTrigger, TagSelectorInputBase, TagSelectorInput, } from "./TagSelector/TagSelector";
37
- export { TreeStructure } from "./TreeStructure";
38
- export type { TreeStructureProps } from "./TreeStructure";
39
37
  export { BlogPostV2 } from "./BlogPost";
40
38
  export { KeyFigure } from "./KeyFigure";
41
39
  export { ContactBlock, contactBlockBackgrounds } from "./ContactBlock";
package/lib/index.js CHANGED
@@ -321,12 +321,6 @@ Object.defineProperty(exports, "KeyFigure", {
321
321
  return _KeyFigure.KeyFigure;
322
322
  }
323
323
  });
324
- Object.defineProperty(exports, "LayoutItem", {
325
- enumerable: true,
326
- get: function () {
327
- return _Layout.default;
328
- }
329
- });
330
324
  Object.defineProperty(exports, "LearningPathBadge", {
331
325
  enumerable: true,
332
326
  get: function () {
@@ -465,12 +459,6 @@ Object.defineProperty(exports, "TasksAndActivitiesBadge", {
465
459
  return _ContentTypeBadge.TasksAndActivitiesBadge;
466
460
  }
467
461
  });
468
- Object.defineProperty(exports, "TreeStructure", {
469
- enumerable: true,
470
- get: function () {
471
- return _TreeStructure.TreeStructure;
472
- }
473
- });
474
462
  Object.defineProperty(exports, "UnknownEmbed", {
475
463
  enumerable: true,
476
464
  get: function () {
@@ -642,12 +630,11 @@ var _messagesSe = _interopRequireDefault(require("./locale/messages-se"));
642
630
  var _messagesSma = _interopRequireDefault(require("./locale/messages-sma"));
643
631
  var _Breadcrumb = _interopRequireWildcard(require("./Breadcrumb"));
644
632
  var _i18n = require("./i18n");
645
- var _Layout = _interopRequireWildcard(require("./Layout"));
633
+ var _Layout = require("./Layout");
646
634
  var _ContentTypeBadge = _interopRequireWildcard(require("./ContentTypeBadge"));
647
635
  var _ContentTypeBadgeNew = require("./ContentTypeBadge/ContentTypeBadgeNew");
648
636
  var _CopyParagraphButton = _interopRequireDefault(require("./CopyParagraphButton"));
649
637
  var _TagSelector = require("./TagSelector/TagSelector");
650
- var _TreeStructure = require("./TreeStructure");
651
638
  var _BlogPost = require("./BlogPost");
652
639
  var _KeyFigure = require("./KeyFigure");
653
640
  var _ContactBlock = require("./ContactBlock");
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ndla/ui",
3
- "version": "56.0.34-alpha.0",
3
+ "version": "56.0.35-alpha.0",
4
4
  "description": "UI component library for NDLA",
5
5
  "license": "GPL-3.0",
6
6
  "main": "lib/index.js",
@@ -33,10 +33,10 @@
33
33
  ],
34
34
  "dependencies": {
35
35
  "@ndla/core": "^5.0.2",
36
- "@ndla/icons": "^8.0.23-alpha.0",
36
+ "@ndla/icons": "^8.0.24-alpha.0",
37
37
  "@ndla/licenses": "^8.0.3-alpha.0",
38
- "@ndla/primitives": "^1.0.31-alpha.0",
39
- "@ndla/safelink": "^7.0.31-alpha.0",
38
+ "@ndla/primitives": "^1.0.32-alpha.0",
39
+ "@ndla/safelink": "^7.0.32-alpha.0",
40
40
  "@ndla/styled-system": "^0.0.22",
41
41
  "@ndla/util": "^5.0.0-alpha.0",
42
42
  "html-react-parser": "^5.1.8",
@@ -58,5 +58,5 @@
58
58
  "publishConfig": {
59
59
  "access": "public"
60
60
  },
61
- "gitHead": "bedff84c8034cb9016d300a3d270d14a49accfff"
61
+ "gitHead": "07ec7465840ff67d4bf2958dab58ead11fac1dee"
62
62
  }
@@ -6,9 +6,5 @@
6
6
  *
7
7
  */
8
8
 
9
- import LayoutItem from "./LayoutItem";
10
-
11
9
  export { default as OneColumn } from "./OneColumn";
12
10
  export { default as PageContainer } from "./PageContainer";
13
-
14
- export default LayoutItem;
package/src/index.ts CHANGED
@@ -90,7 +90,7 @@ export {
90
90
  useVideoSearchTranslations,
91
91
  } from "./i18n";
92
92
 
93
- export { default as LayoutItem, OneColumn, PageContainer } from "./Layout";
93
+ export { OneColumn, PageContainer } from "./Layout";
94
94
 
95
95
  export {
96
96
  default as ContentTypeBadge,
@@ -122,9 +122,6 @@ export {
122
122
  TagSelectorInput,
123
123
  } from "./TagSelector/TagSelector";
124
124
 
125
- export { TreeStructure } from "./TreeStructure";
126
- export type { TreeStructureProps } from "./TreeStructure";
127
-
128
125
  export { BlogPostV2 } from "./BlogPost";
129
126
  export { KeyFigure } from "./KeyFigure";
130
127
  export { ContactBlock, contactBlockBackgrounds } from "./ContactBlock";
@@ -1,35 +0,0 @@
1
- /**
2
- * Copyright (c) 2016-present, NDLA.
3
- *
4
- * This source code is licensed under the GPLv3 license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- *
7
- */
8
-
9
- import { styled } from "@ndla/styled-system/jsx";
10
-
11
- // TODO: Refactor this. This is a copy of our old layout.
12
- export const LayoutItem = styled("section", {
13
- defaultVariants: {
14
- layout: "center"
15
- },
16
- variants: {
17
- layout: {
18
- center: {
19
- position: "relative!",
20
- width: "83.333%",
21
- right: "auto !important",
22
- left: "8.333%"
23
- },
24
- extend: {
25
- tablet: {
26
- position: "relative!",
27
- width: "83.333%",
28
- right: "auto!",
29
- left: "8.333%"
30
- }
31
- }
32
- }
33
- }
34
- });
35
- export default LayoutItem;
@@ -1,318 +0,0 @@
1
- /**
2
- * Copyright (c) 2024-present, NDLA.
3
- *
4
- * This source code is licensed under the GPLv3 license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- *
7
- */
8
-
9
- import { useCallback, useMemo, useRef, useState } from "react";
10
- import { flushSync } from "react-dom";
11
- import { useTranslation } from "react-i18next";
12
- import { useTreeView, usePopoverContext } from "@ark-ui/react";
13
- import { AddLine, HeartFill } from "@ndla/icons/action";
14
- import { ArrowDownShortLine, ArrowRightShortLine } from "@ndla/icons/common";
15
- import { FolderUserLine } from "@ndla/icons/contentType";
16
- import { FolderLine } from "@ndla/icons/editor";
17
- import { Button, IconButton, PopoverContent, PopoverRoot, PopoverTrigger, Tree, TreeBranch, TreeBranchContent, TreeBranchControl, TreeBranchIndicator, TreeBranchText, TreeBranchTrigger, TreeItem, TreeItemText, TreeLabel, TreeRootProvider } from "@ndla/primitives";
18
- import { HStack, Stack, styled } from "@ndla/styled-system/jsx";
19
- import { flattenFolders } from "./helperFunctions";
20
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
21
- export const MAX_LEVEL_FOR_FOLDERS = 5;
22
- const StyledButton = styled(Button, {
23
- base: {
24
- width: "100%",
25
- justifyContent: "space-between",
26
- "& span": {
27
- overflow: "hidden",
28
- textOverflow: "ellipsis"
29
- }
30
- }
31
- });
32
- const StyledHStack = styled(HStack, {
33
- base: {
34
- overflow: "hidden"
35
- }
36
- });
37
- const StyledHeartFill = styled(HeartFill, {
38
- base: {
39
- color: "icon.strong"
40
- }
41
- });
42
- const StyledFolderLine = styled(FolderLine, {
43
- base: {
44
- color: "icon.strong"
45
- }
46
- });
47
- const StyledFolderUserLine = styled(FolderUserLine, {
48
- base: {
49
- color: "icon.strong"
50
- }
51
- });
52
- const StyledTreeRootProvider = styled(TreeRootProvider, {
53
- base: {
54
- width: "100%",
55
- maxHeight: "inherit"
56
- }
57
- });
58
- const StyledPopoverContent = styled(PopoverContent, {
59
- base: {
60
- display: "flex",
61
- flexDirection: "column",
62
- gap: "xsmall",
63
- overflow: "auto",
64
- maxHeight: "inherit",
65
- paddingInline: "xsmall",
66
- paddingBlock: "xsmall"
67
- }
68
- });
69
- const LabelHStack = styled(HStack, {
70
- base: {
71
- width: "100%"
72
- }
73
- });
74
- export const TreeStructure = _ref => {
75
- let {
76
- folders,
77
- defaultOpenFolders,
78
- newFolderInput,
79
- label,
80
- targetResource,
81
- loading,
82
- maxLevel = MAX_LEVEL_FOR_FOLDERS,
83
- onSelectFolder,
84
- ariaDescribedby
85
- } = _ref;
86
- const [open, setOpen] = useState(false);
87
- const [selectedValue, setSelectedValue] = useState(defaultOpenFolders?.[defaultOpenFolders?.length - 1] ?? "");
88
- const [expandedValue, setExpandedValue] = useState(defaultOpenFolders ?? []);
89
- const [focusedValue, setFocusedValue] = useState(selectedValue);
90
- const [newFolderParentId, setNewFolderParentId] = useState(null);
91
- const newFolderButtonRef = useRef(null);
92
- const {
93
- t
94
- } = useTranslation();
95
- const rootFolderIds = useMemo(() => folders.map(folder => folder.id), [folders]);
96
- const contentRef = useRef(null);
97
- const selectedFolder = useMemo(() => {
98
- return flattenFolders(folders).find(folder => folder.id === selectedValue);
99
- }, [folders, selectedValue]);
100
- const disableCreateFolder = useMemo(() => {
101
- return (selectedFolder?.breadcrumbs.length ?? 0) > maxLevel - 1;
102
- }, [maxLevel, selectedFolder?.breadcrumbs.length]);
103
- const onOpenChange = useCallback(details => {
104
- setOpen(details.open);
105
- if (!details.open) {
106
- setNewFolderParentId(null);
107
- }
108
- }, []);
109
- const onKeyDown = useCallback(e => {
110
- if (e.key === "ArrowUp" || e.key === "ArrowDown") {
111
- e.stopPropagation();
112
- setOpen(true);
113
- }
114
- }, []);
115
- const onShowInput = useCallback(() => {
116
- if (disableCreateFolder) return;
117
- const flattenedFolders = flattenFolders(folders);
118
- const folder = flattenedFolders.find(folder => folder.id === selectedValue);
119
- const newExpandedIds = rootFolderIds.concat(folder?.breadcrumbs.map(bc => bc.id) ?? []);
120
- setOpen(true);
121
- setExpandedValue(prev => Array.from(new Set([...prev, ...newExpandedIds])));
122
- setNewFolderParentId(selectedValue);
123
- }, [disableCreateFolder, folders, rootFolderIds, selectedValue]);
124
- const treeView = useTreeView({
125
- focusedValue,
126
- onFocusChange: details => !!details.focusedValue && setFocusedValue(details.focusedValue),
127
- expandedValue,
128
- onExpandedChange: details => setExpandedValue(details.expandedValue),
129
- selectedValue: [selectedValue],
130
- onSelectionChange: details => {
131
- // 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.
132
- const val = details.selectedValue[details.selectedValue.length - 1];
133
- if (!val) return;
134
- if (val === selectedValue && details.focusedValue === selectedValue) {
135
- setOpen(false);
136
- return;
137
- }
138
- setSelectedValue(val);
139
- onSelectFolder?.(val);
140
- },
141
- expandOnClick: false
142
- });
143
- const onCreateFolder = useCallback(folder => {
144
- if (!folder) return;
145
- const focus = treeView.focusItem;
146
- const expand = treeView.expand;
147
- const select = treeView.select;
148
- flushSync(() => {
149
- setOpen(true);
150
- });
151
- flushSync(() => {
152
- expand(folder.breadcrumbs.map(bc => bc.id));
153
- });
154
- flushSync(() => {
155
- select([folder.id]);
156
- });
157
- flushSync(() => {
158
- focus(folder.id);
159
- });
160
- setNewFolderParentId(null);
161
- }, [treeView.expand, treeView.focusItem, treeView.select]);
162
- const onAnimationEnd = useCallback(() => {
163
- if (open && focusedValue) {
164
- document.getElementById(focusedValue)?.scrollIntoView({
165
- behavior: "smooth",
166
- block: "nearest"
167
- });
168
- }
169
- }, [focusedValue, open]);
170
- const onCancelFolder = useCallback(() => {
171
- if (!selectedFolder) return;
172
- const focusFunc = selectedFolder.subfolders.length ? treeView.focusBranch : treeView.focusItem;
173
- focusFunc(selectedFolder.id);
174
- setNewFolderParentId(null);
175
- }, [selectedFolder, treeView.focusBranch, treeView.focusItem]);
176
- const addTooltip = loading ? t("loading") : disableCreateFolder ? t("treeStructure.maxFoldersAlreadyAdded") : t("myNdla.newFolderUnder", {
177
- folderName: selectedFolder?.name
178
- });
179
- return /*#__PURE__*/_jsx(StyledTreeRootProvider, {
180
- value: treeView,
181
- asChild: true,
182
- ...treeView.getRootProps(),
183
- children: /*#__PURE__*/_jsxs(Stack, {
184
- align: "flex-end",
185
- children: [/*#__PURE__*/_jsxs(LabelHStack, {
186
- gap: "xsmall",
187
- justify: "space-between",
188
- children: [/*#__PURE__*/_jsx(TreeLabel, {
189
- children: label
190
- }), /*#__PURE__*/_jsxs(Button, {
191
- size: "small",
192
- variant: "tertiary",
193
- ref: newFolderButtonRef,
194
- "aria-disabled": disableCreateFolder,
195
- title: addTooltip,
196
- "aria-label": addTooltip,
197
- loading: loading,
198
- onClick: onShowInput,
199
- children: [/*#__PURE__*/_jsx(AddLine, {}), t("myNdla.newFolder")]
200
- })]
201
- }), /*#__PURE__*/_jsxs(PopoverRoot, {
202
- open: open,
203
- positioning: {
204
- sameWidth: true
205
- },
206
- onOpenChange: onOpenChange,
207
- persistentElements: [() => newFolderButtonRef.current],
208
- initialFocusEl: () => contentRef.current?.querySelector("input") ?? null,
209
- children: [/*#__PURE__*/_jsx(PopoverTrigger, {
210
- asChild: true,
211
- children: /*#__PURE__*/_jsxs(StyledButton, {
212
- variant: "secondary",
213
- onKeyDown: onKeyDown,
214
- "aria-haspopup": "tree",
215
- role: "combobox",
216
- "aria-describedby": ariaDescribedby,
217
- "aria-activedescendant": focusedValue ?? undefined,
218
- children: [/*#__PURE__*/_jsx("span", {
219
- children: selectedFolder?.name
220
- }), /*#__PURE__*/_jsx(ArrowDownShortLine, {})]
221
- })
222
- }), /*#__PURE__*/_jsxs(StyledPopoverContent, {
223
- onAnimationEnd: onAnimationEnd,
224
- ref: contentRef,
225
- children: [!!newFolderParentId && newFolderInput?.({
226
- parentId: newFolderParentId,
227
- onCreate: onCreateFolder,
228
- onCancel: onCancelFolder
229
- }), /*#__PURE__*/_jsx(Tree, {
230
- children: folders.map(folder => /*#__PURE__*/_jsx(TreeStructureItem, {
231
- folder: folder,
232
- targetResource: targetResource
233
- }, folder.id))
234
- })]
235
- })]
236
- })]
237
- })
238
- });
239
- };
240
- const TreeStructureItem = _ref2 => {
241
- let {
242
- folder,
243
- targetResource
244
- } = _ref2;
245
- const {
246
- t
247
- } = useTranslation();
248
- const {
249
- setOpen
250
- } = usePopoverContext();
251
- const containsResource = targetResource && folder.resources.some(resource => resource.resourceId === targetResource.resourceId);
252
- const FolderIcon = folder.status === "shared" ? StyledFolderUserLine : StyledFolderLine;
253
- const onKeyDown = useCallback(e => {
254
- if (e.key === "Enter") {
255
- setOpen(false);
256
- }
257
- }, [setOpen]);
258
- if (!folder.subfolders.length) {
259
- return /*#__PURE__*/_jsx(TreeItem, {
260
- value: folder.id,
261
- onKeyDown: onKeyDown,
262
- id: folder.id,
263
- children: /*#__PURE__*/_jsxs(StyledHStack, {
264
- gap: "xsmall",
265
- justify: "space-between",
266
- children: [/*#__PURE__*/_jsxs(StyledHStack, {
267
- gap: "xxsmall",
268
- justify: "center",
269
- children: [/*#__PURE__*/_jsx(FolderIcon, {}), /*#__PURE__*/_jsx(TreeItemText, {
270
- children: folder.name
271
- })]
272
- }), containsResource && /*#__PURE__*/_jsx(StyledHeartFill, {
273
- title: t("myNdla.alreadyInFolder")
274
- })]
275
- })
276
- }, folder.id);
277
- }
278
- const ariaLabel = folder.status === "shared" ? `${folder.name}. ${t("myNdla.folder.sharing.shared")}` : folder.name;
279
- return /*#__PURE__*/_jsxs(TreeBranch, {
280
- value: folder.id,
281
- id: folder.id,
282
- children: [/*#__PURE__*/_jsx(TreeBranchControl, {
283
- onKeyDown: onKeyDown,
284
- asChild: true,
285
- children: /*#__PURE__*/_jsxs(StyledHStack, {
286
- gap: "xsmall",
287
- justify: "space-between",
288
- children: [/*#__PURE__*/_jsxs(StyledHStack, {
289
- gap: "xxsmall",
290
- justify: "center",
291
- children: [/*#__PURE__*/_jsx(IconButton, {
292
- variant: "clear",
293
- asChild: true,
294
- children: /*#__PURE__*/_jsx(TreeBranchTrigger, {
295
- children: /*#__PURE__*/_jsx(TreeBranchIndicator, {
296
- asChild: true,
297
- children: /*#__PURE__*/_jsx(ArrowRightShortLine, {})
298
- })
299
- })
300
- }), /*#__PURE__*/_jsx(FolderIcon, {}), /*#__PURE__*/_jsx(TreeBranchText, {
301
- "aria-label": ariaLabel,
302
- title: ariaLabel,
303
- children: folder.name
304
- })]
305
- }), containsResource && /*#__PURE__*/_jsx(StyledHeartFill, {
306
- title: t("myNdla.alreadyInFolder"),
307
- "aria-label": t("myNdla.alreadyInFolder"),
308
- "aria-hidden": false
309
- })]
310
- })
311
- }), /*#__PURE__*/_jsx(TreeBranchContent, {
312
- children: folder.subfolders.map(subfolder => /*#__PURE__*/_jsx(TreeStructureItem, {
313
- folder: subfolder,
314
- targetResource: targetResource
315
- }, subfolder.id))
316
- })]
317
- }, folder.id);
318
- };
@@ -1,29 +0,0 @@
1
- /**
2
- * Copyright (c) 2022-present, NDLA.
3
- *
4
- * This source code is licensed under the GPLv3 license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- *
7
- */
8
-
9
- export const flattenFolders = (folders, openFolders) => {
10
- return folders.reduce((acc, _ref) => {
11
- let {
12
- subfolders,
13
- id,
14
- ...rest
15
- } = _ref;
16
- if (!subfolders || openFolders && !openFolders.includes(id)) {
17
- return acc.concat({
18
- subfolders,
19
- id,
20
- ...rest
21
- });
22
- }
23
- return acc.concat({
24
- subfolders,
25
- id,
26
- ...rest
27
- }, flattenFolders(subfolders, openFolders));
28
- }, []);
29
- };
@@ -1,9 +0,0 @@
1
- /**
2
- * Copyright (c) 2022-present, NDLA.
3
- *
4
- * This source code is licensed under the GPLv3 license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- *
7
- */
8
-
9
- export { TreeStructure } from "./TreeStructure";
@@ -1 +0,0 @@
1
- export {};