@ndla/ui 14.0.0 → 15.0.0

package/es/TreeStructure/TreeStructure.js

@@ -0,0 +1,254 @@
+import _styled from "@emotion/styled-base";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+/**
+ * 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 React, { useEffect, useState, useRef, useMemo } from 'react';
+import { uuid } from '@ndla/util';
+import Button from '@ndla/button';
+import Tooltip from '@ndla/tooltip';
+import { useTranslation } from 'react-i18next';
+import { spacing, fonts } from '@ndla/core';
+import TreeStructureStyledWrapper from './TreeStructureWrapper';
+import FolderItems from './FolderItems';
+import { getIdPathsOfFolder, getPathOfFolder, getFolderName } from './helperFunctions';
+import keyboardNavigation, { KEYBOARD_KEYS_OF_INTEREST } from './keyboardNavigation/keyboardNavigation';
+import { jsx as ___EmotionJSX } from "@emotion/core";
+export var MAX_LEVEL_FOR_FOLDERS = 4;
+
+var StyledLabel = _styled("label", {
+  target: "e1dg1gdn0",
+  label: "StyledLabel"
+})("font-weight:", fonts.weight.semibold, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRyZWVTdHJ1Y3R1cmUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXVCZ0MiLCJmaWxlIjoiVHJlZVN0cnVjdHVyZS50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgMjAyMi1wcmVzZW50LCBORExBLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIEdQTHYzIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICovXG5cbmltcG9ydCBSZWFjdCwgeyB1c2VFZmZlY3QsIHVzZVN0YXRlLCB1c2VSZWYsIHVzZU1lbW8gfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgeyB1dWlkIH0gZnJvbSAnQG5kbGEvdXRpbCc7XG5pbXBvcnQgQnV0dG9uIGZyb20gJ0BuZGxhL2J1dHRvbic7XG5pbXBvcnQgVG9vbHRpcCBmcm9tICdAbmRsYS90b29sdGlwJztcbmltcG9ydCB7IHVzZVRyYW5zbGF0aW9uIH0gZnJvbSAncmVhY3QtaTE4bmV4dCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBzcGFjaW5nLCBmb250cyB9IGZyb20gJ0BuZGxhL2NvcmUnO1xuaW1wb3J0IFRyZWVTdHJ1Y3R1cmVTdHlsZWRXcmFwcGVyIGZyb20gJy4vVHJlZVN0cnVjdHVyZVdyYXBwZXInO1xuaW1wb3J0IEZvbGRlckl0ZW1zIGZyb20gJy4vRm9sZGVySXRlbXMnO1xuaW1wb3J0IHsgZ2V0SWRQYXRoc09mRm9sZGVyLCBnZXRQYXRoT2ZGb2xkZXIsIGdldEZvbGRlck5hbWUgfSBmcm9tICcuL2hlbHBlckZ1bmN0aW9ucyc7XG5pbXBvcnQga2V5Ym9hcmROYXZpZ2F0aW9uLCB7IEtFWUJPQVJEX0tFWVNfT0ZfSU5URVJFU1QgfSBmcm9tICcuL2tleWJvYXJkTmF2aWdhdGlvbi9rZXlib2FyZE5hdmlnYXRpb24nO1xuaW1wb3J0IHsgTmV3Rm9sZGVyUHJvcHMsIFRyZWVTdHJ1Y3R1cmVQcm9wcyB9IGZyb20gJy4vVHJlZVN0cnVjdHVyZS50eXBlcyc7XG5cbmV4cG9ydCBjb25zdCBNQVhfTEVWRUxfRk9SX0ZPTERFUlMgPSA0O1xuXG5jb25zdCBTdHlsZWRMYWJlbCA9IHN0eWxlZC5sYWJlbGBcbiAgZm9udC13ZWlnaHQ6ICR7Zm9udHMud2VpZ2h0LnNlbWlib2xkfTtcbmA7XG5cbmNvbnN0IEFkZEZvbGRlcldyYXBwZXIgPSBzdHlsZWQuZGl2YFxuICBkaXNwbGF5OiBmbGV4O1xuICBtYXJnaW4tdG9wOiAke3NwYWNpbmcueHNtYWxsfTtcbmA7XG5cbmNvbnN0IFRyZWVTdHJ1Y3R1cmUgPSAoe1xuICBkYXRhLFxuICBsYWJlbCxcbiAgZWRpdGFibGUsXG4gIGxvYWRpbmcsXG4gIG9uTmV3Rm9sZGVyLFxuICBvcGVuT25Gb2xkZXJDbGljayxcbiAgZnJhbWVkLFxuICBmb2xkZXJJZE1hcmtlZEJ5RGVmYXVsdCxcbiAgZGVmYXVsdE9wZW5Gb2xkZXJzLFxufTogVHJlZVN0cnVjdHVyZVByb3BzKSA9PiB7XG4gIGNvbnN0IHsgdCB9ID0gdXNlVHJhbnNsYXRpb24oKTtcbiAgY29uc3QgW25ld0ZvbGRlciwgc2V0TmV3Rm9sZGVyXSA9IHVzZVN0YXRlPE5ld0ZvbGRlclByb3BzIHwgdW5kZWZpbmVkPigpO1xuICBjb25zdCBbb3BlbkZvbGRlcnMsIHNldE9wZW5Gb2xkZXJzXSA9IHVzZVN0YXRlPFNldDxzdHJpbmc+PihuZXcgU2V0KGRlZmF1bHRPcGVuRm9sZGVycyB8fCBbXSkpO1xuICBjb25zdCBbZm9jdXNlZEZvbGRlcklkLCBzZXRGb2N1c2VkRm9sZGVySWRdID0gdXNlU3RhdGU8c3RyaW5nIHwgdW5kZWZpbmVkPigpO1xuICBjb25zdCBbbWFya2VkRm9sZGVySWQsIHNldE1hcmtlZEZvbGRlcklkXSA9IHVzZVN0YXRlPHN0cmluZyB8IHVuZGVmaW5lZD4oZm9sZGVySWRNYXJrZWRCeURlZmF1bHQgfHwgZGF0YVswXS5pZCk7XG4gIGNvbnN0IHRyZWVzdHJ1Y3R1cmVSZWYgPSB1c2VSZWY8SFRNTERpdkVsZW1lbnQ+KG51bGwpO1xuICBjb25zdCB3cmFwcGVyUmVmID0gdXNlUmVmPEhUTUxEaXZFbGVtZW50PihudWxsKTtcbiAgY29uc3Qgcm9vdExldmVsSWQgPSB1c2VNZW1vKCgpID0+IHV1aWQoKSwgW10pOyAvLyBUT0RPOiB1c2UgdXNlSWQgaG9vayB3aGVuIHdlIHVwZGF0ZSB0byBSZWFjdCAxOFxuXG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgc2V0T3BlbkZvbGRlcnMoKHByZXYpID0+IHtcbiAgICAgIGRlZmF1bHRPcGVuRm9sZGVycz8uZm9yRWFjaCgoaWQpID0+IHByZXYuYWRkKGlkKSk7XG4gICAgICByZXR1cm4gbmV3IFNldChwcmV2KTtcbiAgICB9KTtcbiAgfSwgW2RlZmF1bHRPcGVuRm9sZGVyc10pO1xuXG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgaWYgKCFsb2FkaW5nKSB7XG4gICAgICBzZXROZXdGb2xkZXIodW5kZWZpbmVkKTtcbiAgICB9XG4gIH0sIFtsb2FkaW5nXSk7XG5cbiAgY29uc3Qgb25Ub2dnbGVPcGVuID0gKGlkOiBzdHJpbmcpID0+IHtcbiAgICBzZXRPcGVuRm9sZGVycygocHJldikgPT4ge1xuICAgICAgaWYgKHByZXYuaGFzKGlkKSkge1xuICAgICAgICBwcmV2LmRlbGV0ZShpZCk7XG4gICAgICAgIC8vIERpZCB3ZSBqdXN0IGNsb3NlZCBhIGZvbGRlciB3aXRoIGEgbWFya2VkIGZvbGRlciBpbnNpZGUgaXQ/XG4gICAgICAgIC8vIElmIHNvLCB3ZSBuZWVkIHRvIG1hcmsgdGhlIGZvbGRlciB3ZSBqdXN0IGNsb3NlZC5cbiAgICAgICAgaWYgKG1hcmtlZEZvbGRlcklkKSB7XG4gICAgICAgICAgY29uc3QgY2xvc2luZ0ZvbGRlclBhdGggPSBnZXRQYXRoT2ZGb2xkZXIoZGF0YSwgaWQpO1xuICAgICAgICAgIGNvbnN0IG1hcmtlZEZvbGRlclBhdGggPSBnZXRQYXRoT2ZGb2xkZXIoZGF0YSwgbWFya2VkRm9sZGVySWQpO1xuICAgICAgICAgIGNvbnN0IG1hcmtlZEZvbGRlcklzU3ViUGF0aCA9IGNsb3NpbmdGb2xkZXJQYXRoLmV2ZXJ5KFxuICAgICAgICAgICAgKGZvbGRlcklkLCBfaW5kZXgpID0+IG1hcmtlZEZvbGRlclBhdGhbX2luZGV4XSA9PT0gZm9sZGVySWQsXG4gICAgICAgICAgKTtcbiAgICAgICAgICBpZiAobWFya2VkRm9sZGVySXNTdWJQYXRoKSB7XG4gICAgICAgICAgICBzZXRNYXJrZWRGb2xkZXJJZChjbG9zaW5nRm9sZGVyUGF0aFtjbG9zaW5nRm9sZGVyUGF0aC5sZW5ndGggLSAxXSk7XG4gICAgICAgICAgfVxuICAgICAgICB9XG4gICAgICB9IGVsc2Uge1xuICAgICAgICBwcmV2LmFkZChpZCk7XG4gICAgICB9XG4gICAgICByZXR1cm4gbmV3IFNldChwcmV2KTtcbiAgICB9KTtcbiAgfTtcblxuICBjb25zdCBvbkNyZWF0ZU5ld0ZvbGRlciA9IChwcm9wczogeyBpZFBhdGhzOiBudW1iZXJbXTsgcGFyZW50SWQ/OiBzdHJpbmcgfSkgPT4ge1xuICAgIHNldE5ld0ZvbGRlcihwcm9wcyk7XG4gIH07XG5cbiAgY29uc3Qgb25TYXZlTmV3Rm9sZGVyID0gYXN5bmMgKHZhbHVlOiBzdHJpbmcpID0+IHtcbiAgICBpZiAobmV3Rm9sZGVyKSB7XG4gICAgICAvLyBXZSB3b3VsZCBsaWtlIHRvIGNyZWF0ZSBhIG5ldyBmb2xkZXIgd2l0aCB0aGUgbmFtZSBvZiB2YWx1ZS5cbiAgICAgIC8vIEl0cyBsb2NhdGlvbiBpbiBzdHJ1Y3R1cmUgaXMgYmFzZWQgb24gbmV3Rm9sZGVyIG9iamVjdFxuICAgICAgY29uc3QgbmV3Rm9sZGVySWQgPSBhd2FpdCBvbk5ld0ZvbGRlcih7IC4uLm5ld0ZvbGRlciwgdmFsdWUgfSk7XG4gICAgICBpZiAobmV3Rm9sZGVySWQpIHtcbiAgICAgICAgc2V0TWFya2VkRm9sZGVySWQobmV3Rm9sZGVySWQpO1xuICAgICAgICBzZXRGb2N1c2VkRm9sZGVySWQobmV3Rm9sZGVySWQpO1xuICAgICAgICAvLyBPcGVuIGN1cnJlbnQgZm9sZGVyIGluIGNhc2UgaXQgd2FzIGNsb3NlZC4uXG4gICAgICAgIHNldE9wZW5Gb2xkZXJzKChwcmV2KSA9PiB7XG4gICAgICAgICAgaWYgKG5ld0ZvbGRlci5wYXJlbnRJZCkge1xuICAgICAgICAgICAgcHJldi5hZGQobmV3Rm9sZGVyLnBhcmVudElkKTtcbiAgICAgICAgICB9XG4gICAgICAgICAgcmV0dXJuIG5ldyBTZXQocHJldik7XG4gICAgICAgIH0pO1xuICAgICAgfVxuICAgIH1cbiAgfTtcblxuICBjb25zdCBvbkNhbmNlbE5ld0ZvbGRlciA9ICgpID0+IHtcbiAgICBzZXROZXdGb2xkZXIodW5kZWZpbmVkKTtcbiAgfTtcblxuICBjb25zdCBvbk1hcmtGb2xkZXIgPSAoaWQ6IHN0cmluZykgPT4ge1xuICAgIHNldE1hcmtlZEZvbGRlcklkKGlkKTtcbiAgICBzZXRGb2N1c2VkRm9sZGVySWQoaWQpO1xuICB9O1xuXG4gIGNvbnN0IGRpc2FibGVBZGRGb2xkZXJCdXR0b24gPVxuICAgIG1hcmtlZEZvbGRlcklkID09PSB1bmRlZmluZWQgfHwgZ2V0UGF0aE9mRm9sZGVyKGRhdGEsIG1hcmtlZEZvbGRlcklkKS5sZW5ndGggPj0gTUFYX0xFVkVMX0ZPUl9GT0xERVJTO1xuXG4gIHJldHVybiAoXG4gICAgPGRpdlxuICAgICAgcmVmPXt0cmVlc3RydWN0dXJlUmVmfVxuICAgICAgb25LZXlEb3duPXsoZSkgPT4ge1xuICAgICAgICBpZiAod3JhcHBlclJlZi5jdXJyZW50Py5jb250YWlucyhkb2N1bWVudC5hY3RpdmVFbGVtZW50KSAmJiBLRVlCT0FSRF9LRVlTX09GX0lOVEVSRVNULmluY2x1ZGVzKGUua2V5KSkge1xuICAgICAgICAgIGtleWJvYXJkTmF2aWdhdGlvbih7XG4gICAgICAgICAgICBlLFxuICAgICAgICAgICAgZGF0YSxcbiAgICAgICAgICAgIHNldEZvY3VzZWRGb2xkZXJJZCxcbiAgICAgICAgICAgIGZvY3VzZWRGb2xkZXJJZCxcbiAgICAgICAgICAgIG9uVG9nZ2xlT3BlbixcbiAgICAgICAgICAgIG9wZW5Gb2xkZXJzLFxuICAgICAgICAgIH0pO1xuICAgICAgICB9XG4gICAgICB9fT5cbiAgICAgIDxTdHlsZWRMYWJlbCBodG1sRm9yPXtyb290TGV2ZWxJZH0+e2xhYmVsfTwvU3R5bGVkTGFiZWw+XG4gICAgICA8VHJlZVN0cnVjdHVyZVN0eWxlZFdyYXBwZXIgcmVmPXt3cmFwcGVyUmVmfSBpZD17cm9vdExldmVsSWR9IGFyaWEtbGFiZWw9XCJNZW51IHRyZWVcIiByb2xlPVwidHJlZVwiIGZyYW1lZD17ZnJhbWVkfT5cbiAgICAgICAgPEZvbGRlckl0ZW1zXG4gICAgICAgICAgaWRQYXRocz17W119XG4gICAgICAgICAgZGF0YT17ZGF0YX1cbiAgICAgICAgICBlZGl0YWJsZT17ZWRpdGFibGV9XG4gICAgICAgICAgb25Ub2dnbGVPcGVuPXtvblRvZ2dsZU9wZW59XG4gICAgICAgICAgbmV3Rm9sZGVyPXtuZXdGb2xkZXJ9XG4gICAgICAgICAgb25DcmVhdGVOZXdGb2xkZXI9e29uQ3JlYXRlTmV3Rm9sZGVyfVxuICAgICAgICAgIG9uQ2FuY2VsTmV3Rm9sZGVyPXtvbkNhbmNlbE5ld0ZvbGRlcn1cbiAgICAgICAgICBvblNhdmVOZXdGb2xkZXI9e29uU2F2ZU5ld0ZvbGRlcn1cbiAgICAgICAgICBvcGVuRm9sZGVycz17b3BlbkZvbGRlcnN9XG4gICAgICAgICAgbWFya2VkRm9sZGVySWQ9e21hcmtlZEZvbGRlcklkfVxuICAgICAgICAgIG9uTWFya0ZvbGRlcj17b25NYXJrRm9sZGVyfVxuICAgICAgICAgIG9wZW5PbkZvbGRlckNsaWNrPXtvcGVuT25Gb2xkZXJDbGlja31cbiAgICAgICAgICBsb2FkaW5nPXtsb2FkaW5nfVxuICAgICAgICAgIGZvY3VzZWRGb2xkZXJJZD17Zm9jdXNlZEZvbGRlcklkfVxuICAgICAgICAgIHNldEZvY3VzZWRGb2xkZXJJZD17c2V0Rm9jdXNlZEZvbGRlcklkfVxuICAgICAgICAgIGZpcnN0TGV2ZWxcbiAgICAgICAgLz5cbiAgICAgIDwvVHJlZVN0cnVjdHVyZVN0eWxlZFdyYXBwZXI+XG4gICAgICB7ZWRpdGFibGUgJiYgKFxuICAgICAgICA8QWRkRm9sZGVyV3JhcHBlcj5cbiAgICAgICAgICA8VG9vbHRpcFxuICAgICAgICAgICAgdG9vbHRpcD17dCgnbXlOZGxhLm5ld0ZvbGRlclVuZGVyJywge1xuICAgICAgICAgICAgICBmb2xkZXJOYW1lOiBnZXRGb2xkZXJOYW1lKGRhdGEsIG1hcmtlZEZvbGRlcklkKSxcbiAgICAgICAgICAgIH0pfT5cbiAgICAgICAgICAgIDxCdXR0b25cbiAgICAgICAgICAgICAgc2l6ZT1cInNtYWxsXCJcbiAgICAgICAgICAgICAgbGlnaHRcbiAgICAgICAgICAgICAgZGlzYWJsZWQ9e2Rpc2FibGVBZGRGb2xkZXJCdXR0b259XG4gICAgICAgICAgICAgIG9uQ2xpY2s9eygpID0+IHtcbiAgICAgICAgICAgICAgICBjb25zdCBwYXRocyA9IGdldFBhdGhPZkZvbGRlcihkYXRhLCBtYXJrZWRGb2xkZXJJZCB8fCAnJyk7XG4gICAgICAgICAgICAgICAgY29uc3QgaWRQYXRocyA9IGdldElkUGF0aHNPZkZvbGRlcihkYXRhLCBtYXJrZWRGb2xkZXJJZCB8fCAnJyk7XG4gICAgICAgICAgICAgICAgc2V0TmV3Rm9sZGVyKHsgaWRQYXRocywgcGFyZW50SWQ6IHBhdGhzW3BhdGhzLmxlbmd0aCAtIDFdIH0pO1xuICAgICAgICAgICAgICB9fT5cbiAgICAgICAgICAgICAge3QoJ215TmRsYS5uZXdGb2xkZXInKX1cbiAgICAgICAgICAgIDwvQnV0dG9uPlxuICAgICAgICAgIDwvVG9vbHRpcD5cbiAgICAgICAgPC9BZGRGb2xkZXJXcmFwcGVyPlxuICAgICAgKX1cbiAgICA8L2Rpdj5cbiAgKTtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IFRyZWVTdHJ1Y3R1cmU7XG4iXX0= */"));
+
+var AddFolderWrapper = _styled("div", {
+  target: "e1dg1gdn1",
+  label: "AddFolderWrapper"
+})("display:flex;margin-top:", spacing.xsmall, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRyZWVTdHJ1Y3R1cmUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTJCbUMiLCJmaWxlIjoiVHJlZVN0cnVjdHVyZS50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgMjAyMi1wcmVzZW50LCBORExBLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIEdQTHYzIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICovXG5cbmltcG9ydCBSZWFjdCwgeyB1c2VFZmZlY3QsIHVzZVN0YXRlLCB1c2VSZWYsIHVzZU1lbW8gfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgeyB1dWlkIH0gZnJvbSAnQG5kbGEvdXRpbCc7XG5pbXBvcnQgQnV0dG9uIGZyb20gJ0BuZGxhL2J1dHRvbic7XG5pbXBvcnQgVG9vbHRpcCBmcm9tICdAbmRsYS90b29sdGlwJztcbmltcG9ydCB7IHVzZVRyYW5zbGF0aW9uIH0gZnJvbSAncmVhY3QtaTE4bmV4dCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBzcGFjaW5nLCBmb250cyB9IGZyb20gJ0BuZGxhL2NvcmUnO1xuaW1wb3J0IFRyZWVTdHJ1Y3R1cmVTdHlsZWRXcmFwcGVyIGZyb20gJy4vVHJlZVN0cnVjdHVyZVdyYXBwZXInO1xuaW1wb3J0IEZvbGRlckl0ZW1zIGZyb20gJy4vRm9sZGVySXRlbXMnO1xuaW1wb3J0IHsgZ2V0SWRQYXRoc09mRm9sZGVyLCBnZXRQYXRoT2ZGb2xkZXIsIGdldEZvbGRlck5hbWUgfSBmcm9tICcuL2hlbHBlckZ1bmN0aW9ucyc7XG5pbXBvcnQga2V5Ym9hcmROYXZpZ2F0aW9uLCB7IEtFWUJPQVJEX0tFWVNfT0ZfSU5URVJFU1QgfSBmcm9tICcuL2tleWJvYXJkTmF2aWdhdGlvbi9rZXlib2FyZE5hdmlnYXRpb24nO1xuaW1wb3J0IHsgTmV3Rm9sZGVyUHJvcHMsIFRyZWVTdHJ1Y3R1cmVQcm9wcyB9IGZyb20gJy4vVHJlZVN0cnVjdHVyZS50eXBlcyc7XG5cbmV4cG9ydCBjb25zdCBNQVhfTEVWRUxfRk9SX0ZPTERFUlMgPSA0O1xuXG5jb25zdCBTdHlsZWRMYWJlbCA9IHN0eWxlZC5sYWJlbGBcbiAgZm9udC13ZWlnaHQ6ICR7Zm9udHMud2VpZ2h0LnNlbWlib2xkfTtcbmA7XG5cbmNvbnN0IEFkZEZvbGRlcldyYXBwZXIgPSBzdHlsZWQuZGl2YFxuICBkaXNwbGF5OiBmbGV4O1xuICBtYXJnaW4tdG9wOiAke3NwYWNpbmcueHNtYWxsfTtcbmA7XG5cbmNvbnN0IFRyZWVTdHJ1Y3R1cmUgPSAoe1xuICBkYXRhLFxuICBsYWJlbCxcbiAgZWRpdGFibGUsXG4gIGxvYWRpbmcsXG4gIG9uTmV3Rm9sZGVyLFxuICBvcGVuT25Gb2xkZXJDbGljayxcbiAgZnJhbWVkLFxuICBmb2xkZXJJZE1hcmtlZEJ5RGVmYXVsdCxcbiAgZGVmYXVsdE9wZW5Gb2xkZXJzLFxufTogVHJlZVN0cnVjdHVyZVByb3BzKSA9PiB7XG4gIGNvbnN0IHsgdCB9ID0gdXNlVHJhbnNsYXRpb24oKTtcbiAgY29uc3QgW25ld0ZvbGRlciwgc2V0TmV3Rm9sZGVyXSA9IHVzZVN0YXRlPE5ld0ZvbGRlclByb3BzIHwgdW5kZWZpbmVkPigpO1xuICBjb25zdCBbb3BlbkZvbGRlcnMsIHNldE9wZW5Gb2xkZXJzXSA9IHVzZVN0YXRlPFNldDxzdHJpbmc+PihuZXcgU2V0KGRlZmF1bHRPcGVuRm9sZGVycyB8fCBbXSkpO1xuICBjb25zdCBbZm9jdXNlZEZvbGRlcklkLCBzZXRGb2N1c2VkRm9sZGVySWRdID0gdXNlU3RhdGU8c3RyaW5nIHwgdW5kZWZpbmVkPigpO1xuICBjb25zdCBbbWFya2VkRm9sZGVySWQsIHNldE1hcmtlZEZvbGRlcklkXSA9IHVzZVN0YXRlPHN0cmluZyB8IHVuZGVmaW5lZD4oZm9sZGVySWRNYXJrZWRCeURlZmF1bHQgfHwgZGF0YVswXS5pZCk7XG4gIGNvbnN0IHRyZWVzdHJ1Y3R1cmVSZWYgPSB1c2VSZWY8SFRNTERpdkVsZW1lbnQ+KG51bGwpO1xuICBjb25zdCB3cmFwcGVyUmVmID0gdXNlUmVmPEhUTUxEaXZFbGVtZW50PihudWxsKTtcbiAgY29uc3Qgcm9vdExldmVsSWQgPSB1c2VNZW1vKCgpID0+IHV1aWQoKSwgW10pOyAvLyBUT0RPOiB1c2UgdXNlSWQgaG9vayB3aGVuIHdlIHVwZGF0ZSB0byBSZWFjdCAxOFxuXG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgc2V0T3BlbkZvbGRlcnMoKHByZXYpID0+IHtcbiAgICAgIGRlZmF1bHRPcGVuRm9sZGVycz8uZm9yRWFjaCgoaWQpID0+IHByZXYuYWRkKGlkKSk7XG4gICAgICByZXR1cm4gbmV3IFNldChwcmV2KTtcbiAgICB9KTtcbiAgfSwgW2RlZmF1bHRPcGVuRm9sZGVyc10pO1xuXG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgaWYgKCFsb2FkaW5nKSB7XG4gICAgICBzZXROZXdGb2xkZXIodW5kZWZpbmVkKTtcbiAgICB9XG4gIH0sIFtsb2FkaW5nXSk7XG5cbiAgY29uc3Qgb25Ub2dnbGVPcGVuID0gKGlkOiBzdHJpbmcpID0+IHtcbiAgICBzZXRPcGVuRm9sZGVycygocHJldikgPT4ge1xuICAgICAgaWYgKHByZXYuaGFzKGlkKSkge1xuICAgICAgICBwcmV2LmRlbGV0ZShpZCk7XG4gICAgICAgIC8vIERpZCB3ZSBqdXN0IGNsb3NlZCBhIGZvbGRlciB3aXRoIGEgbWFya2VkIGZvbGRlciBpbnNpZGUgaXQ/XG4gICAgICAgIC8vIElmIHNvLCB3ZSBuZWVkIHRvIG1hcmsgdGhlIGZvbGRlciB3ZSBqdXN0IGNsb3NlZC5cbiAgICAgICAgaWYgKG1hcmtlZEZvbGRlcklkKSB7XG4gICAgICAgICAgY29uc3QgY2xvc2luZ0ZvbGRlclBhdGggPSBnZXRQYXRoT2ZGb2xkZXIoZGF0YSwgaWQpO1xuICAgICAgICAgIGNvbnN0IG1hcmtlZEZvbGRlclBhdGggPSBnZXRQYXRoT2ZGb2xkZXIoZGF0YSwgbWFya2VkRm9sZGVySWQpO1xuICAgICAgICAgIGNvbnN0IG1hcmtlZEZvbGRlcklzU3ViUGF0aCA9IGNsb3NpbmdGb2xkZXJQYXRoLmV2ZXJ5KFxuICAgICAgICAgICAgKGZvbGRlcklkLCBfaW5kZXgpID0+IG1hcmtlZEZvbGRlclBhdGhbX2luZGV4XSA9PT0gZm9sZGVySWQsXG4gICAgICAgICAgKTtcbiAgICAgICAgICBpZiAobWFya2VkRm9sZGVySXNTdWJQYXRoKSB7XG4gICAgICAgICAgICBzZXRNYXJrZWRGb2xkZXJJZChjbG9zaW5nRm9sZGVyUGF0aFtjbG9zaW5nRm9sZGVyUGF0aC5sZW5ndGggLSAxXSk7XG4gICAgICAgICAgfVxuICAgICAgICB9XG4gICAgICB9IGVsc2Uge1xuICAgICAgICBwcmV2LmFkZChpZCk7XG4gICAgICB9XG4gICAgICByZXR1cm4gbmV3IFNldChwcmV2KTtcbiAgICB9KTtcbiAgfTtcblxuICBjb25zdCBvbkNyZWF0ZU5ld0ZvbGRlciA9IChwcm9wczogeyBpZFBhdGhzOiBudW1iZXJbXTsgcGFyZW50SWQ/OiBzdHJpbmcgfSkgPT4ge1xuICAgIHNldE5ld0ZvbGRlcihwcm9wcyk7XG4gIH07XG5cbiAgY29uc3Qgb25TYXZlTmV3Rm9sZGVyID0gYXN5bmMgKHZhbHVlOiBzdHJpbmcpID0+IHtcbiAgICBpZiAobmV3Rm9sZGVyKSB7XG4gICAgICAvLyBXZSB3b3VsZCBsaWtlIHRvIGNyZWF0ZSBhIG5ldyBmb2xkZXIgd2l0aCB0aGUgbmFtZSBvZiB2YWx1ZS5cbiAgICAgIC8vIEl0cyBsb2NhdGlvbiBpbiBzdHJ1Y3R1cmUgaXMgYmFzZWQgb24gbmV3Rm9sZGVyIG9iamVjdFxuICAgICAgY29uc3QgbmV3Rm9sZGVySWQgPSBhd2FpdCBvbk5ld0ZvbGRlcih7IC4uLm5ld0ZvbGRlciwgdmFsdWUgfSk7XG4gICAgICBpZiAobmV3Rm9sZGVySWQpIHtcbiAgICAgICAgc2V0TWFya2VkRm9sZGVySWQobmV3Rm9sZGVySWQpO1xuICAgICAgICBzZXRGb2N1c2VkRm9sZGVySWQobmV3Rm9sZGVySWQpO1xuICAgICAgICAvLyBPcGVuIGN1cnJlbnQgZm9sZGVyIGluIGNhc2UgaXQgd2FzIGNsb3NlZC4uXG4gICAgICAgIHNldE9wZW5Gb2xkZXJzKChwcmV2KSA9PiB7XG4gICAgICAgICAgaWYgKG5ld0ZvbGRlci5wYXJlbnRJZCkge1xuICAgICAgICAgICAgcHJldi5hZGQobmV3Rm9sZGVyLnBhcmVudElkKTtcbiAgICAgICAgICB9XG4gICAgICAgICAgcmV0dXJuIG5ldyBTZXQocHJldik7XG4gICAgICAgIH0pO1xuICAgICAgfVxuICAgIH1cbiAgfTtcblxuICBjb25zdCBvbkNhbmNlbE5ld0ZvbGRlciA9ICgpID0+IHtcbiAgICBzZXROZXdGb2xkZXIodW5kZWZpbmVkKTtcbiAgfTtcblxuICBjb25zdCBvbk1hcmtGb2xkZXIgPSAoaWQ6IHN0cmluZykgPT4ge1xuICAgIHNldE1hcmtlZEZvbGRlcklkKGlkKTtcbiAgICBzZXRGb2N1c2VkRm9sZGVySWQoaWQpO1xuICB9O1xuXG4gIGNvbnN0IGRpc2FibGVBZGRGb2xkZXJCdXR0b24gPVxuICAgIG1hcmtlZEZvbGRlcklkID09PSB1bmRlZmluZWQgfHwgZ2V0UGF0aE9mRm9sZGVyKGRhdGEsIG1hcmtlZEZvbGRlcklkKS5sZW5ndGggPj0gTUFYX0xFVkVMX0ZPUl9GT0xERVJTO1xuXG4gIHJldHVybiAoXG4gICAgPGRpdlxuICAgICAgcmVmPXt0cmVlc3RydWN0dXJlUmVmfVxuICAgICAgb25LZXlEb3duPXsoZSkgPT4ge1xuICAgICAgICBpZiAod3JhcHBlclJlZi5jdXJyZW50Py5jb250YWlucyhkb2N1bWVudC5hY3RpdmVFbGVtZW50KSAmJiBLRVlCT0FSRF9LRVlTX09GX0lOVEVSRVNULmluY2x1ZGVzKGUua2V5KSkge1xuICAgICAgICAgIGtleWJvYXJkTmF2aWdhdGlvbih7XG4gICAgICAgICAgICBlLFxuICAgICAgICAgICAgZGF0YSxcbiAgICAgICAgICAgIHNldEZvY3VzZWRGb2xkZXJJZCxcbiAgICAgICAgICAgIGZvY3VzZWRGb2xkZXJJZCxcbiAgICAgICAgICAgIG9uVG9nZ2xlT3BlbixcbiAgICAgICAgICAgIG9wZW5Gb2xkZXJzLFxuICAgICAgICAgIH0pO1xuICAgICAgICB9XG4gICAgICB9fT5cbiAgICAgIDxTdHlsZWRMYWJlbCBodG1sRm9yPXtyb290TGV2ZWxJZH0+e2xhYmVsfTwvU3R5bGVkTGFiZWw+XG4gICAgICA8VHJlZVN0cnVjdHVyZVN0eWxlZFdyYXBwZXIgcmVmPXt3cmFwcGVyUmVmfSBpZD17cm9vdExldmVsSWR9IGFyaWEtbGFiZWw9XCJNZW51IHRyZWVcIiByb2xlPVwidHJlZVwiIGZyYW1lZD17ZnJhbWVkfT5cbiAgICAgICAgPEZvbGRlckl0ZW1zXG4gICAgICAgICAgaWRQYXRocz17W119XG4gICAgICAgICAgZGF0YT17ZGF0YX1cbiAgICAgICAgICBlZGl0YWJsZT17ZWRpdGFibGV9XG4gICAgICAgICAgb25Ub2dnbGVPcGVuPXtvblRvZ2dsZU9wZW59XG4gICAgICAgICAgbmV3Rm9sZGVyPXtuZXdGb2xkZXJ9XG4gICAgICAgICAgb25DcmVhdGVOZXdGb2xkZXI9e29uQ3JlYXRlTmV3Rm9sZGVyfVxuICAgICAgICAgIG9uQ2FuY2VsTmV3Rm9sZGVyPXtvbkNhbmNlbE5ld0ZvbGRlcn1cbiAgICAgICAgICBvblNhdmVOZXdGb2xkZXI9e29uU2F2ZU5ld0ZvbGRlcn1cbiAgICAgICAgICBvcGVuRm9sZGVycz17b3BlbkZvbGRlcnN9XG4gICAgICAgICAgbWFya2VkRm9sZGVySWQ9e21hcmtlZEZvbGRlcklkfVxuICAgICAgICAgIG9uTWFya0ZvbGRlcj17b25NYXJrRm9sZGVyfVxuICAgICAgICAgIG9wZW5PbkZvbGRlckNsaWNrPXtvcGVuT25Gb2xkZXJDbGlja31cbiAgICAgICAgICBsb2FkaW5nPXtsb2FkaW5nfVxuICAgICAgICAgIGZvY3VzZWRGb2xkZXJJZD17Zm9jdXNlZEZvbGRlcklkfVxuICAgICAgICAgIHNldEZvY3VzZWRGb2xkZXJJZD17c2V0Rm9jdXNlZEZvbGRlcklkfVxuICAgICAgICAgIGZpcnN0TGV2ZWxcbiAgICAgICAgLz5cbiAgICAgIDwvVHJlZVN0cnVjdHVyZVN0eWxlZFdyYXBwZXI+XG4gICAgICB7ZWRpdGFibGUgJiYgKFxuICAgICAgICA8QWRkRm9sZGVyV3JhcHBlcj5cbiAgICAgICAgICA8VG9vbHRpcFxuICAgICAgICAgICAgdG9vbHRpcD17dCgnbXlOZGxhLm5ld0ZvbGRlclVuZGVyJywge1xuICAgICAgICAgICAgICBmb2xkZXJOYW1lOiBnZXRGb2xkZXJOYW1lKGRhdGEsIG1hcmtlZEZvbGRlcklkKSxcbiAgICAgICAgICAgIH0pfT5cbiAgICAgICAgICAgIDxCdXR0b25cbiAgICAgICAgICAgICAgc2l6ZT1cInNtYWxsXCJcbiAgICAgICAgICAgICAgbGlnaHRcbiAgICAgICAgICAgICAgZGlzYWJsZWQ9e2Rpc2FibGVBZGRGb2xkZXJCdXR0b259XG4gICAgICAgICAgICAgIG9uQ2xpY2s9eygpID0+IHtcbiAgICAgICAgICAgICAgICBjb25zdCBwYXRocyA9IGdldFBhdGhPZkZvbGRlcihkYXRhLCBtYXJrZWRGb2xkZXJJZCB8fCAnJyk7XG4gICAgICAgICAgICAgICAgY29uc3QgaWRQYXRocyA9IGdldElkUGF0aHNPZkZvbGRlcihkYXRhLCBtYXJrZWRGb2xkZXJJZCB8fCAnJyk7XG4gICAgICAgICAgICAgICAgc2V0TmV3Rm9sZGVyKHsgaWRQYXRocywgcGFyZW50SWQ6IHBhdGhzW3BhdGhzLmxlbmd0aCAtIDFdIH0pO1xuICAgICAgICAgICAgICB9fT5cbiAgICAgICAgICAgICAge3QoJ215TmRsYS5uZXdGb2xkZXInKX1cbiAgICAgICAgICAgIDwvQnV0dG9uPlxuICAgICAgICAgIDwvVG9vbHRpcD5cbiAgICAgICAgPC9BZGRGb2xkZXJXcmFwcGVyPlxuICAgICAgKX1cbiAgICA8L2Rpdj5cbiAgKTtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IFRyZWVTdHJ1Y3R1cmU7XG4iXX0= */"));
+
+var TreeStructure = function TreeStructure(_ref) {
+  var data = _ref.data,
+      label = _ref.label,
+      editable = _ref.editable,
+      loading = _ref.loading,
+      onNewFolder = _ref.onNewFolder,
+      openOnFolderClick = _ref.openOnFolderClick,
+      framed = _ref.framed,
+      folderIdMarkedByDefault = _ref.folderIdMarkedByDefault,
+      defaultOpenFolders = _ref.defaultOpenFolders;
+
+  var _useTranslation = useTranslation(),
+      t = _useTranslation.t;
+
+  var _useState = useState(),
+      _useState2 = _slicedToArray(_useState, 2),
+      newFolder = _useState2[0],
+      setNewFolder = _useState2[1];
+
+  var _useState3 = useState(new Set(defaultOpenFolders || [])),
+      _useState4 = _slicedToArray(_useState3, 2),
+      openFolders = _useState4[0],
+      setOpenFolders = _useState4[1];
+
+  var _useState5 = useState(),
+      _useState6 = _slicedToArray(_useState5, 2),
+      focusedFolderId = _useState6[0],
+      setFocusedFolderId = _useState6[1];
+
+  var _useState7 = useState(folderIdMarkedByDefault || data[0].id),
+      _useState8 = _slicedToArray(_useState7, 2),
+      markedFolderId = _useState8[0],
+      setMarkedFolderId = _useState8[1];
+
+  var treestructureRef = useRef(null);
+  var wrapperRef = useRef(null);
+  var rootLevelId = useMemo(function () {
+    return uuid();
+  }, []); // TODO: use useId hook when we update to React 18
+
+  useEffect(function () {
+    setOpenFolders(function (prev) {
+      defaultOpenFolders === null || defaultOpenFolders === void 0 ? void 0 : defaultOpenFolders.forEach(function (id) {
+        return prev.add(id);
+      });
+      return new Set(prev);
+    });
+  }, [defaultOpenFolders]);
+  useEffect(function () {
+    if (!loading) {
+      setNewFolder(undefined);
+    }
+  }, [loading]);
+
+  var onToggleOpen = function onToggleOpen(id) {
+    setOpenFolders(function (prev) {
+      if (prev.has(id)) {
+        prev["delete"](id); // Did we just closed a folder with a marked folder inside it?
+        // If so, we need to mark the folder we just closed.
+
+        if (markedFolderId) {
+          var closingFolderPath = getPathOfFolder(data, id);
+          var markedFolderPath = getPathOfFolder(data, markedFolderId);
+          var markedFolderIsSubPath = closingFolderPath.every(function (folderId, _index) {
+            return markedFolderPath[_index] === folderId;
+          });
+
+          if (markedFolderIsSubPath) {
+            setMarkedFolderId(closingFolderPath[closingFolderPath.length - 1]);
+          }
+        }
+      } else {
+        prev.add(id);
+      }
+
+      return new Set(prev);
+    });
+  };
+
+  var onCreateNewFolder = function onCreateNewFolder(props) {
+    setNewFolder(props);
+  };
+
+  var onSaveNewFolder = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(value) {
+      var newFolderId;
+      return regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              if (!newFolder) {
+                _context.next = 5;
+                break;
+              }
+
+              _context.next = 3;
+              return onNewFolder(_objectSpread(_objectSpread({}, newFolder), {}, {
+                value: value
+              }));
+
+            case 3:
+              newFolderId = _context.sent;
+
+              if (newFolderId) {
+                setMarkedFolderId(newFolderId);
+                setFocusedFolderId(newFolderId); // Open current folder in case it was closed..
+
+                setOpenFolders(function (prev) {
+                  if (newFolder.parentId) {
+                    prev.add(newFolder.parentId);
+                  }
+
+                  return new Set(prev);
+                });
+              }
+
+            case 5:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function onSaveNewFolder(_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  var onCancelNewFolder = function onCancelNewFolder() {
+    setNewFolder(undefined);
+  };
+
+  var onMarkFolder = function onMarkFolder(id) {
+    setMarkedFolderId(id);
+    setFocusedFolderId(id);
+  };
+
+  var disableAddFolderButton = markedFolderId === undefined || getPathOfFolder(data, markedFolderId).length >= MAX_LEVEL_FOR_FOLDERS;
+  return ___EmotionJSX("div", {
+    ref: treestructureRef,
+    onKeyDown: function onKeyDown(e) {
+      var _wrapperRef$current;
+
+      if (((_wrapperRef$current = wrapperRef.current) === null || _wrapperRef$current === void 0 ? void 0 : _wrapperRef$current.contains(document.activeElement)) && KEYBOARD_KEYS_OF_INTEREST.includes(e.key)) {
+        keyboardNavigation({
+          e: e,
+          data: data,
+          setFocusedFolderId: setFocusedFolderId,
+          focusedFolderId: focusedFolderId,
+          onToggleOpen: onToggleOpen,
+          openFolders: openFolders
+        });
+      }
+    }
+  }, ___EmotionJSX(StyledLabel, {
+    htmlFor: rootLevelId
+  }, label), ___EmotionJSX(TreeStructureStyledWrapper, {
+    ref: wrapperRef,
+    id: rootLevelId,
+    "aria-label": "Menu tree",
+    role: "tree",
+    framed: framed
+  }, ___EmotionJSX(FolderItems, {
+    idPaths: [],
+    data: data,
+    editable: editable,
+    onToggleOpen: onToggleOpen,
+    newFolder: newFolder,
+    onCreateNewFolder: onCreateNewFolder,
+    onCancelNewFolder: onCancelNewFolder,
+    onSaveNewFolder: onSaveNewFolder,
+    openFolders: openFolders,
+    markedFolderId: markedFolderId,
+    onMarkFolder: onMarkFolder,
+    openOnFolderClick: openOnFolderClick,
+    loading: loading,
+    focusedFolderId: focusedFolderId,
+    setFocusedFolderId: setFocusedFolderId,
+    firstLevel: true
+  })), editable && ___EmotionJSX(AddFolderWrapper, null, ___EmotionJSX(Tooltip, {
+    tooltip: t('myNdla.newFolderUnder', {
+      folderName: getFolderName(data, markedFolderId)
+    })
+  }, ___EmotionJSX(Button, {
+    size: "small",
+    light: true,
+    disabled: disableAddFolderButton,
+    onClick: function onClick() {
+      var paths = getPathOfFolder(data, markedFolderId || '');
+      var idPaths = getIdPathsOfFolder(data, markedFolderId || '');
+      setNewFolder({
+        idPaths: idPaths,
+        parentId: paths[paths.length - 1]
+      });
+    }
+  }, t('myNdla.newFolder')))));
+};
+
+export default TreeStructure;

package/es/TreeStructure/TreeStructureWrapper.js

@@ -0,0 +1,13 @@
+import _styled from "@emotion/styled-base";
+import { css } from '@emotion/core';
+import { colors, misc, spacing } from '@ndla/core';
+
+var TreeStructureWrapper = _styled("div", {
+  target: "ez53f4u0",
+  label: "TreeStructureWrapper"
+})("padding:", spacing.xsmall, ";", function (_ref) {
+  var framed = _ref.framed;
+  return framed ? /*#__PURE__*/css("border:1px solid ", colors.brand.greyLighter, ";border-radius:", misc.borderRadius, ";max-height:400px;overflow-y:scroll;scroll-behavior:smooth;padding:", spacing.small, ";;label:TreeStructureWrapper;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRyZWVTdHJ1Y3R1cmVXcmFwcGVyLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFnQlciLCJmaWxlIjoiVHJlZVN0cnVjdHVyZVdyYXBwZXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIDIwMjItcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqL1xuXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9jb3JlJztcbmltcG9ydCB7IGNvbG9ycywgbWlzYywgc3BhY2luZyB9IGZyb20gJ0BuZGxhL2NvcmUnO1xuXG5jb25zdCBUcmVlU3RydWN0dXJlV3JhcHBlciA9IHN0eWxlZC5kaXY8eyBmcmFtZWQ/OiBib29sZWFuIH0+YFxuICBwYWRkaW5nOiAke3NwYWNpbmcueHNtYWxsfTtcbiAgJHsoeyBmcmFtZWQgfSkgPT5cbiAgICBmcmFtZWRcbiAgICAgID8gY3NzYFxuICAgICAgICAgIGJvcmRlcjogMXB4IHNvbGlkICR7Y29sb3JzLmJyYW5kLmdyZXlMaWdodGVyfTtcbiAgICAgICAgICBib3JkZXItcmFkaXVzOiAke21pc2MuYm9yZGVyUmFkaXVzfTtcbiAgICAgICAgICBtYXgtaGVpZ2h0OiA0MDBweDtcbiAgICAgICAgICBvdmVyZmxvdy15OiBzY3JvbGw7XG4gICAgICAgICAgc2Nyb2xsLWJlaGF2aW9yOiBzbW9vdGg7XG4gICAgICAgICAgcGFkZGluZzogJHtzcGFjaW5nLnNtYWxsfTtcbiAgICAgICAgYFxuICAgICAgOiBjc3NgXG4gICAgICAgICAgbWFyZ2luLWxlZnQ6IC0ke3NwYWNpbmcubWVkaXVtfTtcbiAgICAgICAgYH1cbiAgdHJhbnNpdGlvbjogJHttaXNjLnRyYW5zaXRpb24uZGVmYXVsdH07XG4gICY6Zm9jdXMtd2l0aGluIHtcbiAgICBib3JkZXItY29sb3I6ICR7Y29sb3JzLmJyYW5kLnByaW1hcnl9O1xuICB9XG5gO1xuXG5leHBvcnQgZGVmYXVsdCBUcmVlU3RydWN0dXJlV3JhcHBlcjtcbiJdfQ== */")) : /*#__PURE__*/css("margin-left:-", spacing.medium, ";;label:TreeStructureWrapper;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRyZWVTdHJ1Y3R1cmVXcmFwcGVyLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF3QlciLCJmaWxlIjoiVHJlZVN0cnVjdHVyZVdyYXBwZXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIDIwMjItcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqL1xuXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9jb3JlJztcbmltcG9ydCB7IGNvbG9ycywgbWlzYywgc3BhY2luZyB9IGZyb20gJ0BuZGxhL2NvcmUnO1xuXG5jb25zdCBUcmVlU3RydWN0dXJlV3JhcHBlciA9IHN0eWxlZC5kaXY8eyBmcmFtZWQ/OiBib29sZWFuIH0+YFxuICBwYWRkaW5nOiAke3NwYWNpbmcueHNtYWxsfTtcbiAgJHsoeyBmcmFtZWQgfSkgPT5cbiAgICBmcmFtZWRcbiAgICAgID8gY3NzYFxuICAgICAgICAgIGJvcmRlcjogMXB4IHNvbGlkICR7Y29sb3JzLmJyYW5kLmdyZXlMaWdodGVyfTtcbiAgICAgICAgICBib3JkZXItcmFkaXVzOiAke21pc2MuYm9yZGVyUmFkaXVzfTtcbiAgICAgICAgICBtYXgtaGVpZ2h0OiA0MDBweDtcbiAgICAgICAgICBvdmVyZmxvdy15OiBzY3JvbGw7XG4gICAgICAgICAgc2Nyb2xsLWJlaGF2aW9yOiBzbW9vdGg7XG4gICAgICAgICAgcGFkZGluZzogJHtzcGFjaW5nLnNtYWxsfTtcbiAgICAgICAgYFxuICAgICAgOiBjc3NgXG4gICAgICAgICAgbWFyZ2luLWxlZnQ6IC0ke3NwYWNpbmcubWVkaXVtfTtcbiAgICAgICAgYH1cbiAgdHJhbnNpdGlvbjogJHttaXNjLnRyYW5zaXRpb24uZGVmYXVsdH07XG4gICY6Zm9jdXMtd2l0aGluIHtcbiAgICBib3JkZXItY29sb3I6ICR7Y29sb3JzLmJyYW5kLnByaW1hcnl9O1xuICB9XG5gO1xuXG5leHBvcnQgZGVmYXVsdCBUcmVlU3RydWN0dXJlV3JhcHBlcjtcbiJdfQ== */"));
+}, " transition:", misc.transition["default"], ";&:focus-within{border-color:", colors.brand.primary, ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRyZWVTdHJ1Y3R1cmVXcmFwcGVyLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFZNkQiLCJmaWxlIjoiVHJlZVN0cnVjdHVyZVdyYXBwZXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIDIwMjItcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqL1xuXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9jb3JlJztcbmltcG9ydCB7IGNvbG9ycywgbWlzYywgc3BhY2luZyB9IGZyb20gJ0BuZGxhL2NvcmUnO1xuXG5jb25zdCBUcmVlU3RydWN0dXJlV3JhcHBlciA9IHN0eWxlZC5kaXY8eyBmcmFtZWQ/OiBib29sZWFuIH0+YFxuICBwYWRkaW5nOiAke3NwYWNpbmcueHNtYWxsfTtcbiAgJHsoeyBmcmFtZWQgfSkgPT5cbiAgICBmcmFtZWRcbiAgICAgID8gY3NzYFxuICAgICAgICAgIGJvcmRlcjogMXB4IHNvbGlkICR7Y29sb3JzLmJyYW5kLmdyZXlMaWdodGVyfTtcbiAgICAgICAgICBib3JkZXItcmFkaXVzOiAke21pc2MuYm9yZGVyUmFkaXVzfTtcbiAgICAgICAgICBtYXgtaGVpZ2h0OiA0MDBweDtcbiAgICAgICAgICBvdmVyZmxvdy15OiBzY3JvbGw7XG4gICAgICAgICAgc2Nyb2xsLWJlaGF2aW9yOiBzbW9vdGg7XG4gICAgICAgICAgcGFkZGluZzogJHtzcGFjaW5nLnNtYWxsfTtcbiAgICAgICAgYFxuICAgICAgOiBjc3NgXG4gICAgICAgICAgbWFyZ2luLWxlZnQ6IC0ke3NwYWNpbmcubWVkaXVtfTtcbiAgICAgICAgYH1cbiAgdHJhbnNpdGlvbjogJHttaXNjLnRyYW5zaXRpb24uZGVmYXVsdH07XG4gICY6Zm9jdXMtd2l0aGluIHtcbiAgICBib3JkZXItY29sb3I6ICR7Y29sb3JzLmJyYW5kLnByaW1hcnl9O1xuICB9XG5gO1xuXG5leHBvcnQgZGVmYXVsdCBUcmVlU3RydWN0dXJlV3JhcHBlcjtcbiJdfQ== */"));
+
+export default TreeStructureWrapper;

package/es/TreeStructure/helperFunctions.js

@@ -0,0 +1,92 @@
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+function _createForOfIteratorHelper(o, allowArrayLike) { var it; if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = o[Symbol.iterator](); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+var getPathOfFolder = function getPathOfFolder(data, findId) {
+  var paths = function paths(dataChildren, path) {
+    var _iterator = _createForOfIteratorHelper(dataChildren),
+        _step;
+
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var _step$value = _step.value,
+            id = _step$value.id,
+            dataChildrenSub = _step$value.data;
+
+        if (id === findId) {
+          return [].concat(_toConsumableArray(path), [id]);
+        } else if (dataChildrenSub === null || dataChildrenSub === void 0 ? void 0 : dataChildrenSub.length) {
+          return paths(dataChildrenSub, [].concat(_toConsumableArray(path), [id]));
+        }
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+
+    return [];
+  };
+
+  return paths(data, []);
+};
+
+var getIdPathsOfFolder = function getIdPathsOfFolder(data, findId) {
+  var currentPath = [];
+
+  var paths = function paths(dataChildren, path) {
+    dataChildren.forEach(function (_ref, _index) {
+      var id = _ref.id,
+          dataChildrenSub = _ref.data;
+
+      if (id === findId) {
+        currentPath = [].concat(_toConsumableArray(path), [_index]);
+      } else if (dataChildrenSub === null || dataChildrenSub === void 0 ? void 0 : dataChildrenSub.length) {
+        paths(dataChildrenSub, [].concat(_toConsumableArray(path), [_index]));
+      }
+    });
+  };
+
+  paths(data, []);
+  return currentPath;
+};
+
+var getFolderName = function getFolderName(data, findId) {
+  if (!findId) {
+    return undefined;
+  }
+
+  var folderName;
+
+  var paths = function paths(dataChildren) {
+    dataChildren.some(function (_ref2, _index) {
+      var id = _ref2.id,
+          name = _ref2.name,
+          dataChildrenSub = _ref2.data;
+
+      if (id === findId) {
+        folderName = name;
+        return true;
+      } else if (dataChildrenSub === null || dataChildrenSub === void 0 ? void 0 : dataChildrenSub.length) {
+        return paths(dataChildrenSub);
+      }
+
+      return false;
+    });
+  };
+
+  paths(data);
+  return folderName;
+};
+
+export { getPathOfFolder, getIdPathsOfFolder, getFolderName };

package/es/TreeStructure/index.js

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

package/es/TreeStructure/keyboardNavigation/keyboardNavigation.js

@@ -0,0 +1,182 @@
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+/**
+ * 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 { MAX_LEVEL_FOR_FOLDERS } from '../TreeStructure';
+export var KEYBOARD_KEYS_OF_INTEREST = ['ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft', ' ']; // Traverse upwards, incase parent is last element of its parent..
+
+var traverseUpwards = function traverseUpwards(inital, setFocusedFolderId, paths, index) {
+  var findParent = inital;
+  var parentNextIds = [];
+  paths.forEach(function (pathIndex) {
+    var nextParent = findParent ? findParent[pathIndex + 1] : undefined;
+    parentNextIds.push((nextParent === null || nextParent === void 0 ? void 0 : nextParent.id) || false);
+    findParent = findParent[pathIndex].data || [];
+  });
+
+  if (!parentNextIds.length) {
+    var _findParent;
+
+    parentNextIds.push(((_findParent = findParent[index + 1]) === null || _findParent === void 0 ? void 0 : _findParent.id) || false);
+  } // We use a reversed version of parentNextIds, filtered out falses, to find the next element
+  // No newId? We are at the end of the tree so we wont update.
+
+
+  var newId = parentNextIds.reverse().filter(function (id) {
+    return id;
+  })[0];
+
+  if (newId) {
+    setFocusedFolderId(newId);
+  }
+};
+
+var keyboardNavigation = function keyboardNavigation(_ref) {
+  var _document$activeEleme, _elementWithKeyFocus$3;
+
+  var e = _ref.e,
+      data = _ref.data,
+      onToggleOpen = _ref.onToggleOpen,
+      setFocusedFolderId = _ref.setFocusedFolderId,
+      id = _ref.focusedFolderId,
+      openFolders = _ref.openFolders;
+
+  if (e.key === ' ' && ((_document$activeEleme = document.activeElement) === null || _document$activeEleme === void 0 ? void 0 : _document$activeEleme.nodeName) === 'INPUT') {
+    return;
+  } // We are navigating in the tree.
+  // We need to find the next folder in the tree
+
+
+  var elementWithKeyFocus = {
+    paths: [],
+    index: 0
+  };
+
+  var updatePathToElementWithKeyFocus = function updatePathToElementWithKeyFocus(data, paths, parent, parentId) {
+    return data.some(function (_ref2, _index) {
+      var childData = _ref2.data,
+          dataId = _ref2.id,
+          url = _ref2.url;
+
+      if (dataId === id) {
+        elementWithKeyFocus.paths = paths;
+        elementWithKeyFocus.index = _index;
+        elementWithKeyFocus.isOpen = openFolders.has(dataId) && childData && childData.length > 0;
+        elementWithKeyFocus.data = childData;
+        elementWithKeyFocus.parent = parent;
+        elementWithKeyFocus.parentId = parentId;
+        elementWithKeyFocus.url = url;
+        return true;
+      }
+
+      return childData ? updatePathToElementWithKeyFocus(childData, [].concat(_toConsumableArray(paths), [_index]), _toConsumableArray(childData), dataId) : false;
+    });
+  };
+
+  if (!updatePathToElementWithKeyFocus(data, [], data)) {
+    // Couldn't find its location in the tree.
+    // This should not happen, reset its value to root.
+    setFocusedFolderId(e.key === 'ArrowDown' ? data[0].id : undefined);
+    return;
+  }
+
+  e.preventDefault();
+  e.stopPropagation();
+
+  if (e.key === ' ') {
+    var simulatedEvent = new MouseEvent('click', {
+      bubbles: true,
+      cancelable: true,
+      view: window
+    });
+    document.activeElement && document.activeElement.dispatchEvent(simulatedEvent);
+    return;
+  }
+
+  if (e.key === 'ArrowRight') {
+    var _elementWithKeyFocus$;
+
+    if (!elementWithKeyFocus.isOpen && ((_elementWithKeyFocus$ = elementWithKeyFocus.data) === null || _elementWithKeyFocus$ === void 0 ? void 0 : _elementWithKeyFocus$.length) && id && elementWithKeyFocus.paths.length < MAX_LEVEL_FOR_FOLDERS - 1) {
+      onToggleOpen(id);
+    }
+
+    return;
+  }
+
+  if (e.key === 'ArrowLeft') {
+    if (id && elementWithKeyFocus.isOpen) {
+      onToggleOpen(id);
+    }
+
+    return;
+  }
+
+  if (!id && e.key === 'ArrowDown') {
+    setFocusedFolderId(data[0].id);
+    return;
+  }
+
+  if (!id) {
+    return;
+  } // Move up
+
+
+  if (e.key === 'ArrowUp') {
+    if (elementWithKeyFocus.index > 0) {
+      // Move upwards to the parent folder
+      setFocusedFolderId(elementWithKeyFocus.parent ? elementWithKeyFocus.parent[elementWithKeyFocus.index - 1].id : undefined);
+    } else if (elementWithKeyFocus.paths.length > 0) {
+      elementWithKeyFocus.paths.pop();
+      var findParent = data;
+      elementWithKeyFocus.paths.forEach(function (index) {
+        findParent = findParent[index].data;
+      });
+      var parentsCurrentIndex = findParent.findIndex(function (_ref3) {
+        var id = _ref3.id;
+        return id === elementWithKeyFocus.parentId;
+      });
+      setFocusedFolderId(findParent[parentsCurrentIndex].id);
+    }
+
+    return;
+  }
+
+  if (elementWithKeyFocus.isOpen) {
+    var _elementWithKeyFocus$2;
+
+    if ((_elementWithKeyFocus$2 = elementWithKeyFocus.data) === null || _elementWithKeyFocus$2 === void 0 ? void 0 : _elementWithKeyFocus$2.length) {
+      setFocusedFolderId(elementWithKeyFocus.data[0].id);
+    } else {
+      // move to next child of parent if any... need new traverse :-/
+      traverseUpwards(data, setFocusedFolderId, elementWithKeyFocus.paths, elementWithKeyFocus.index);
+    }
+
+    return;
+  }
+
+  if (elementWithKeyFocus.parent && elementWithKeyFocus.index < ((_elementWithKeyFocus$3 = elementWithKeyFocus.parent) === null || _elementWithKeyFocus$3 === void 0 ? void 0 : _elementWithKeyFocus$3.length) - 1) {
+    // Move downwards to the next child
+    setFocusedFolderId(elementWithKeyFocus.parent[elementWithKeyFocus.index + 1].id);
+    return;
+  }
+
+  traverseUpwards(data, setFocusedFolderId, elementWithKeyFocus.paths, elementWithKeyFocus.index);
+  return;
+};
+
+export default keyboardNavigation;

package/es/all.css

@@ -1,3 +1,75 @@
+/* Used to detect in JavaScript if apps have loaded styles or not. */
+:root {
+  --reach-menu-button: 1;
+}
+
+[data-reach-menu] {
+  position: relative;
+}
+
+[data-reach-menu-popover] {
+  display: block;
+  position: absolute;
+}
+
+[data-reach-menu-popover][hidden] {
+  display: none;
+}
+
+[data-reach-menu-list],
+[data-reach-menu-items] {
+  display: block;
+  white-space: nowrap;
+  border: solid 1px hsla(0, 0%, 0%, 0.25);
+  background: hsla(0, 100%, 100%, 0.99);
+  outline: none;
+  padding: 1rem 0;
+  font-size: 85%;
+}
+
+[data-reach-menu-item] {
+  display: block;
+  user-select: none;
+}
+
+/*
+ The dom structure of a MenuLink is reach-menu-item > a,
+ so to target all items we can use `data-reach-menu-item`
+*/
+[data-reach-menu-item] {
+  /*
+    These are styled in one rule instead of something like a[data-reach-menu-item]
+    and li[data-reach-menu-item] so that apps don't have to fight specificity and
+    can style both li and a menu items with one rule,
+    ie: `[data-selected] { background: red; }`.
+    Otherwise they'd have to define two styles, one for a and one for li.
+  */
+
+  /* reach-menu-item */
+  cursor: pointer;
+
+  /* a */
+  display: block;
+  color: inherit;
+  font: inherit;
+  text-decoration: initial;
+
+  /* both */
+  padding: 5px 20px;
+}
+
+/* pseudo pseudo selector */
+[data-reach-menu-item][data-selected] {
+  background: hsl(211, 81%, 36%);
+  color: white;
+  outline: none;
+}
+
+[data-reach-menu-item][aria-disabled] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
 :root {
   --reach-tooltip: 1;
 }