@ndla/ui 14.0.0 → 15.0.0

package/lib/TreeStructure/FolderNameInput.js

@@ -0,0 +1,125 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _styledBase = _interopRequireDefault(require("@emotion/styled-base"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _contentType = require("@ndla/icons/contentType");
+
+var _common = require("@ndla/icons/common");
+
+var _editor = require("@ndla/editor");
+
+var _core = require("@ndla/core");
+
+var _reactI18next = require("react-i18next");
+
+var _reactDeviceDetect = require("react-device-detect");
+
+var _core2 = require("@emotion/core");
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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; }
+
+var ArrowRight = ( /*#__PURE__*/0, _styledBase["default"])(_common.ArrowDropDown, {
+  target: "ea8uq7w0",
+  label: "ArrowRight"
+})("color:", _core.colors.text.primary, ";transform:rotate(-90deg);" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkZvbGRlck5hbWVJbnB1dC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBaUIyQyIsImZpbGUiOiJGb2xkZXJOYW1lSW5wdXQudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIDIwMjItcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqL1xuXG5pbXBvcnQgUmVhY3QsIHsgdXNlRWZmZWN0LCB1c2VTdGF0ZSwgdXNlUmVmIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgRm9sZGVyT3V0bGluZWQgfSBmcm9tICdAbmRsYS9pY29ucy9jb250ZW50VHlwZSc7XG5pbXBvcnQgeyBBcnJvd0Ryb3BEb3duIGFzIEFycm93RHJvcERvd25SYXcgfSBmcm9tICdAbmRsYS9pY29ucy9jb21tb24nO1xuaW1wb3J0IHsgU3Bpbm5lciB9IGZyb20gJ0BuZGxhL2VkaXRvcic7XG5pbXBvcnQgeyBzcGFjaW5nLCBjb2xvcnMsIG1pc2MsIGFuaW1hdGlvbnMgfSBmcm9tICdAbmRsYS9jb3JlJztcbmltcG9ydCB7IHVzZVRyYW5zbGF0aW9uIH0gZnJvbSAncmVhY3QtaTE4bmV4dCc7XG5pbXBvcnQgeyBpc01vYmlsZSB9IGZyb20gJ3JlYWN0LWRldmljZS1kZXRlY3QnO1xuXG5jb25zdCBBcnJvd1JpZ2h0ID0gc3R5bGVkKEFycm93RHJvcERvd25SYXcpYFxuICBjb2xvcjogJHtjb2xvcnMudGV4dC5wcmltYXJ5fTtcbiAgdHJhbnNmb3JtOiByb3RhdGUoLTkwZGVnKTtcbmA7XG5cbmNvbnN0IE5ld0ZvbGRlcldyYXBwZXIgPSBzdHlsZWQuZGl2YFxuICBwYWRkaW5nLWxlZnQ6ICR7c3BhY2luZy5ub3JtYWx9O1xuICAke2FuaW1hdGlvbnMuZmFkZUluTGVmdChhbmltYXRpb25zLmR1cmF0aW9ucy5mYXN0KX07XG4gIGFuaW1hdGlvbi1maWxsLW1vZGU6IGZvcndhcmRzO1xuICBAbWVkaWEgKHByZWZlcnMtcmVkdWNlZC1tb3Rpb246IHJlZHVjZSkge1xuICAgIGFuaW1hdGlvbjogbm9uZTtcbiAgfVxuYDtcblxuY29uc3QgSW5wdXRXcmFwcGVyID0gc3R5bGVkLmRpdjx7IGxvYWRpbmc/OiBib29sZWFuIH0+YFxuICBtYXJnaW46ICR7c3BhY2luZy54eHNtYWxsfSAke3NwYWNpbmcuc21hbGx9ICR7c3BhY2luZy54eHNtYWxsfSAwO1xuICBkaXNwbGF5OiBmbGV4O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBib3JkZXI6IDFweCBzb2xpZCAkeyh7IGxvYWRpbmcgfSkgPT4gKGxvYWRpbmcgPyBjb2xvcnMuYnJhbmQubGlnaHRlciA6IGNvbG9ycy5icmFuZC5wcmltYXJ5KX07XG4gIGJvcmRlci1zdHlsZTogZGFzaGVkO1xuICBib3JkZXItcmFkaXVzOiAke21pc2MuYm9yZGVyUmFkaXVzfTtcbiAgcGFkZGluZy1yaWdodDogJHtzcGFjaW5nLm5vcm1hbH07XG4gIHBhZGRpbmctbGVmdDogJHtzcGFjaW5nLnhzbWFsbH07XG4gIGNvbG9yOiAke2NvbG9ycy5icmFuZC5wcmltYXJ5fTtcbmA7XG5cbmNvbnN0IFN0eWxlZElucHV0ID0gc3R5bGVkLmlucHV0YFxuICBmbGV4LWdyb3c6IDE7XG4gIGJvcmRlcjogMDtcbiAgb3V0bGluZTogbm9uZTtcbiAgcGFkZGluZzogJHtzcGFjaW5nLnNtYWxsfTtcbiAgcGFkZGluZy1sZWZ0OiAke3NwYWNpbmcueHNtYWxsfTtcbiAgYmFja2dyb3VuZDogdHJhbnNwYXJlbnQ7XG4gIGNvbG9yOiAke2NvbG9ycy50ZXh0LnByaW1hcnl9O1xuICBzY3JvbGwtbWFyZ2luLXRvcDogMTAwcHg7XG5gO1xuXG5pbnRlcmZhY2UgRm9sZGVyTmFtZUlucHV0UHJvcHMge1xuICBvblNhdmVOZXdGb2xkZXI6ICh2YWx1ZTogc3RyaW5nKSA9PiB2b2lkO1xuICBvbkNhbmNlbE5ld0ZvbGRlcjogKCkgPT4gdm9pZDtcbiAgbG9hZGluZz86IGJvb2xlYW47XG59XG5cbmNvbnN0IEZvbGRlck5hbWVJbnB1dCA9ICh7IG9uU2F2ZU5ld0ZvbGRlciwgb25DYW5jZWxOZXdGb2xkZXIsIGxvYWRpbmcgfTogRm9sZGVyTmFtZUlucHV0UHJvcHMpID0+IHtcbiAgY29uc3QgeyB0IH0gPSB1c2VUcmFuc2xhdGlvbigpO1xuICBjb25zdCBbdmFsdWUsIHNldFZhbHVlXSA9IHVzZVN0YXRlPHN0cmluZz4odCgndHJlZVN0cnVjdHVyZS5uZXdGb2xkZXIuZGVmYXVsdE5hbWUnKSk7XG4gIGNvbnN0IGlucHV0UmVmID0gdXNlUmVmPEhUTUxJbnB1dEVsZW1lbnQ+KG51bGwpO1xuXG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgaWYgKGlucHV0UmVmLmN1cnJlbnQpIHtcbiAgICAgIGlucHV0UmVmLmN1cnJlbnQuc2VsZWN0KCk7XG4gICAgICBpZiAoaXNNb2JpbGUpIHtcbiAgICAgICAgaW5wdXRSZWYuY3VycmVudC5zY3JvbGxJbnRvVmlldyh7IGJlaGF2aW9yOiAnc21vb3RoJyB9KTtcbiAgICAgIH1cbiAgICB9XG4gIH0sIFtdKTtcblxuICByZXR1cm4gKFxuICAgIDxOZXdGb2xkZXJXcmFwcGVyPlxuICAgICAgPElucHV0V3JhcHBlciBsb2FkaW5nPXtsb2FkaW5nfT5cbiAgICAgICAgPEFycm93UmlnaHQgLz5cbiAgICAgICAgPEZvbGRlck91dGxpbmVkIC8+XG4gICAgICAgIDxTdHlsZWRJbnB1dFxuICAgICAgICAgIHJlZj17aW5wdXRSZWZ9XG4gICAgICAgICAgYXV0b0ZvY3VzXG4gICAgICAgICAgcGxhY2Vob2xkZXI9e3QoJ3RyZWVTdHJ1Y3R1cmUubmV3Rm9sZGVyLnBsYWNlaG9sZGVyJyl9XG4gICAgICAgICAgZGlzYWJsZWQ9e2xvYWRpbmd9XG4gICAgICAgICAgdmFsdWU9e3ZhbHVlfVxuICAgICAgICAgIG9uQmx1cj17KCkgPT4gb25DYW5jZWxOZXdGb2xkZXIoKX1cbiAgICAgICAgICBvbktleURvd249eyhlOiBSZWFjdC5LZXlib2FyZEV2ZW50PEhUTUxJbnB1dEVsZW1lbnQ+KSA9PiB7XG4gICAgICAgICAgICBpZiAoZS5rZXkgPT09ICdFc2NhcGUnKSB7XG4gICAgICAgICAgICAgIG9uQ2FuY2VsTmV3Rm9sZGVyKCk7XG4gICAgICAgICAgICAgIHJldHVybjtcbiAgICAgICAgICAgIH1cbiAgICAgICAgICAgIGlmIChlLmtleSA9PT0gJ0VudGVyJyB8fCBlLmtleSA9PT0gJ1RhYicpIHtcbiAgICAgICAgICAgICAgb25TYXZlTmV3Rm9sZGVyKHZhbHVlKTtcbiAgICAgICAgICAgICAgZS5wcmV2ZW50RGVmYXVsdCgpO1xuICAgICAgICAgICAgfVxuICAgICAgICAgICAgcmV0dXJuO1xuICAgICAgICAgIH19XG4gICAgICAgICAgb25DaGFuZ2U9eyhlOiBSZWFjdC5DaGFuZ2VFdmVudDxIVE1MSW5wdXRFbGVtZW50PikgPT4ge1xuICAgICAgICAgICAgY29uc3QgdGFyZ2V0ID0gZS50YXJnZXQgYXMgSFRNTElucHV0RWxlbWVudDtcbiAgICAgICAgICAgIHNldFZhbHVlKHRhcmdldC52YWx1ZSk7XG4gICAgICAgICAgfX1cbiAgICAgICAgLz5cbiAgICAgICAge2xvYWRpbmcgJiYgPFNwaW5uZXIgc2l6ZT1cInNtYWxsXCIgLz59XG4gICAgICA8L0lucHV0V3JhcHBlcj5cbiAgICA8L05ld0ZvbGRlcldyYXBwZXI+XG4gICk7XG59O1xuXG5leHBvcnQgZGVmYXVsdCBGb2xkZXJOYW1lSW5wdXQ7XG4iXX0= */"));
+var NewFolderWrapper = (0, _styledBase["default"])("div", {
+  target: "ea8uq7w1",
+  label: "NewFolderWrapper"
+})("padding-left:", _core.spacing.normal, ";", _core.animations.fadeInLeft(_core.animations.durations.fast), ";animation-fill-mode:forwards;@media (prefers-reduced-motion:reduce){animation:none;}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkZvbGRlck5hbWVJbnB1dC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBc0JtQyIsImZpbGUiOiJGb2xkZXJOYW1lSW5wdXQudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIDIwMjItcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqL1xuXG5pbXBvcnQgUmVhY3QsIHsgdXNlRWZmZWN0LCB1c2VTdGF0ZSwgdXNlUmVmIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgRm9sZGVyT3V0bGluZWQgfSBmcm9tICdAbmRsYS9pY29ucy9jb250ZW50VHlwZSc7XG5pbXBvcnQgeyBBcnJvd0Ryb3BEb3duIGFzIEFycm93RHJvcERvd25SYXcgfSBmcm9tICdAbmRsYS9pY29ucy9jb21tb24nO1xuaW1wb3J0IHsgU3Bpbm5lciB9IGZyb20gJ0BuZGxhL2VkaXRvcic7XG5pbXBvcnQgeyBzcGFjaW5nLCBjb2xvcnMsIG1pc2MsIGFuaW1hdGlvbnMgfSBmcm9tICdAbmRsYS9jb3JlJztcbmltcG9ydCB7IHVzZVRyYW5zbGF0aW9uIH0gZnJvbSAncmVhY3QtaTE4bmV4dCc7XG5pbXBvcnQgeyBpc01vYmlsZSB9IGZyb20gJ3JlYWN0LWRldmljZS1kZXRlY3QnO1xuXG5jb25zdCBBcnJvd1JpZ2h0ID0gc3R5bGVkKEFycm93RHJvcERvd25SYXcpYFxuICBjb2xvcjogJHtjb2xvcnMudGV4dC5wcmltYXJ5fTtcbiAgdHJhbnNmb3JtOiByb3RhdGUoLTkwZGVnKTtcbmA7XG5cbmNvbnN0IE5ld0ZvbGRlcldyYXBwZXIgPSBzdHlsZWQuZGl2YFxuICBwYWRkaW5nLWxlZnQ6ICR7c3BhY2luZy5ub3JtYWx9O1xuICAke2FuaW1hdGlvbnMuZmFkZUluTGVmdChhbmltYXRpb25zLmR1cmF0aW9ucy5mYXN0KX07XG4gIGFuaW1hdGlvbi1maWxsLW1vZGU6IGZvcndhcmRzO1xuICBAbWVkaWEgKHByZWZlcnMtcmVkdWNlZC1tb3Rpb246IHJlZHVjZSkge1xuICAgIGFuaW1hdGlvbjogbm9uZTtcbiAgfVxuYDtcblxuY29uc3QgSW5wdXRXcmFwcGVyID0gc3R5bGVkLmRpdjx7IGxvYWRpbmc/OiBib29sZWFuIH0+YFxuICBtYXJnaW46ICR7c3BhY2luZy54eHNtYWxsfSAke3NwYWNpbmcuc21hbGx9ICR7c3BhY2luZy54eHNtYWxsfSAwO1xuICBkaXNwbGF5OiBmbGV4O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBib3JkZXI6IDFweCBzb2xpZCAkeyh7IGxvYWRpbmcgfSkgPT4gKGxvYWRpbmcgPyBjb2xvcnMuYnJhbmQubGlnaHRlciA6IGNvbG9ycy5icmFuZC5wcmltYXJ5KX07XG4gIGJvcmRlci1zdHlsZTogZGFzaGVkO1xuICBib3JkZXItcmFkaXVzOiAke21pc2MuYm9yZGVyUmFkaXVzfTtcbiAgcGFkZGluZy1yaWdodDogJHtzcGFjaW5nLm5vcm1hbH07XG4gIHBhZGRpbmctbGVmdDogJHtzcGFjaW5nLnhzbWFsbH07XG4gIGNvbG9yOiAke2NvbG9ycy5icmFuZC5wcmltYXJ5fTtcbmA7XG5cbmNvbnN0IFN0eWxlZElucHV0ID0gc3R5bGVkLmlucHV0YFxuICBmbGV4LWdyb3c6IDE7XG4gIGJvcmRlcjogMDtcbiAgb3V0bGluZTogbm9uZTtcbiAgcGFkZGluZzogJHtzcGFjaW5nLnNtYWxsfTtcbiAgcGFkZGluZy1sZWZ0OiAke3NwYWNpbmcueHNtYWxsfTtcbiAgYmFja2dyb3VuZDogdHJhbnNwYXJlbnQ7XG4gIGNvbG9yOiAke2NvbG9ycy50ZXh0LnByaW1hcnl9O1xuICBzY3JvbGwtbWFyZ2luLXRvcDogMTAwcHg7XG5gO1xuXG5pbnRlcmZhY2UgRm9sZGVyTmFtZUlucHV0UHJvcHMge1xuICBvblNhdmVOZXdGb2xkZXI6ICh2YWx1ZTogc3RyaW5nKSA9PiB2b2lkO1xuICBvbkNhbmNlbE5ld0ZvbGRlcjogKCkgPT4gdm9pZDtcbiAgbG9hZGluZz86IGJvb2xlYW47XG59XG5cbmNvbnN0IEZvbGRlck5hbWVJbnB1dCA9ICh7IG9uU2F2ZU5ld0ZvbGRlciwgb25DYW5jZWxOZXdGb2xkZXIsIGxvYWRpbmcgfTogRm9sZGVyTmFtZUlucHV0UHJvcHMpID0+IHtcbiAgY29uc3QgeyB0IH0gPSB1c2VUcmFuc2xhdGlvbigpO1xuICBjb25zdCBbdmFsdWUsIHNldFZhbHVlXSA9IHVzZVN0YXRlPHN0cmluZz4odCgndHJlZVN0cnVjdHVyZS5uZXdGb2xkZXIuZGVmYXVsdE5hbWUnKSk7XG4gIGNvbnN0IGlucHV0UmVmID0gdXNlUmVmPEhUTUxJbnB1dEVsZW1lbnQ+KG51bGwpO1xuXG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgaWYgKGlucHV0UmVmLmN1cnJlbnQpIHtcbiAgICAgIGlucHV0UmVmLmN1cnJlbnQuc2VsZWN0KCk7XG4gICAgICBpZiAoaXNNb2JpbGUpIHtcbiAgICAgICAgaW5wdXRSZWYuY3VycmVudC5zY3JvbGxJbnRvVmlldyh7IGJlaGF2aW9yOiAnc21vb3RoJyB9KTtcbiAgICAgIH1cbiAgICB9XG4gIH0sIFtdKTtcblxuICByZXR1cm4gKFxuICAgIDxOZXdGb2xkZXJXcmFwcGVyPlxuICAgICAgPElucHV0V3JhcHBlciBsb2FkaW5nPXtsb2FkaW5nfT5cbiAgICAgICAgPEFycm93UmlnaHQgLz5cbiAgICAgICAgPEZvbGRlck91dGxpbmVkIC8+XG4gICAgICAgIDxTdHlsZWRJbnB1dFxuICAgICAgICAgIHJlZj17aW5wdXRSZWZ9XG4gICAgICAgICAgYXV0b0ZvY3VzXG4gICAgICAgICAgcGxhY2Vob2xkZXI9e3QoJ3RyZWVTdHJ1Y3R1cmUubmV3Rm9sZGVyLnBsYWNlaG9sZGVyJyl9XG4gICAgICAgICAgZGlzYWJsZWQ9e2xvYWRpbmd9XG4gICAgICAgICAgdmFsdWU9e3ZhbHVlfVxuICAgICAgICAgIG9uQmx1cj17KCkgPT4gb25DYW5jZWxOZXdGb2xkZXIoKX1cbiAgICAgICAgICBvbktleURvd249eyhlOiBSZWFjdC5LZXlib2FyZEV2ZW50PEhUTUxJbnB1dEVsZW1lbnQ+KSA9PiB7XG4gICAgICAgICAgICBpZiAoZS5rZXkgPT09ICdFc2NhcGUnKSB7XG4gICAgICAgICAgICAgIG9uQ2FuY2VsTmV3Rm9sZGVyKCk7XG4gICAgICAgICAgICAgIHJldHVybjtcbiAgICAgICAgICAgIH1cbiAgICAgICAgICAgIGlmIChlLmtleSA9PT0gJ0VudGVyJyB8fCBlLmtleSA9PT0gJ1RhYicpIHtcbiAgICAgICAgICAgICAgb25TYXZlTmV3Rm9sZGVyKHZhbHVlKTtcbiAgICAgICAgICAgICAgZS5wcmV2ZW50RGVmYXVsdCgpO1xuICAgICAgICAgICAgfVxuICAgICAgICAgICAgcmV0dXJuO1xuICAgICAgICAgIH19XG4gICAgICAgICAgb25DaGFuZ2U9eyhlOiBSZWFjdC5DaGFuZ2VFdmVudDxIVE1MSW5wdXRFbGVtZW50PikgPT4ge1xuICAgICAgICAgICAgY29uc3QgdGFyZ2V0ID0gZS50YXJnZXQgYXMgSFRNTElucHV0RWxlbWVudDtcbiAgICAgICAgICAgIHNldFZhbHVlKHRhcmdldC52YWx1ZSk7XG4gICAgICAgICAgfX1cbiAgICAgICAgLz5cbiAgICAgICAge2xvYWRpbmcgJiYgPFNwaW5uZXIgc2l6ZT1cInNtYWxsXCIgLz59XG4gICAgICA8L0lucHV0V3JhcHBlcj5cbiAgICA8L05ld0ZvbGRlcldyYXBwZXI+XG4gICk7XG59O1xuXG5leHBvcnQgZGVmYXVsdCBGb2xkZXJOYW1lSW5wdXQ7XG4iXX0= */"));
+var InputWrapper = (0, _styledBase["default"])("div", {
+  target: "ea8uq7w2",
+  label: "InputWrapper"
+})("margin:", _core.spacing.xxsmall, " ", _core.spacing.small, " ", _core.spacing.xxsmall, " 0;display:flex;align-items:center;border:1px solid ", function (_ref) {
+  var loading = _ref.loading;
+  return loading ? _core.colors.brand.lighter : _core.colors.brand.primary;
+}, ";border-style:dashed;border-radius:", _core.misc.borderRadius, ";padding-right:", _core.spacing.normal, ";padding-left:", _core.spacing.xsmall, ";color:", _core.colors.brand.primary, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkZvbGRlck5hbWVJbnB1dC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBK0JzRCIsImZpbGUiOiJGb2xkZXJOYW1lSW5wdXQudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIDIwMjItcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqL1xuXG5pbXBvcnQgUmVhY3QsIHsgdXNlRWZmZWN0LCB1c2VTdGF0ZSwgdXNlUmVmIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgRm9sZGVyT3V0bGluZWQgfSBmcm9tICdAbmRsYS9pY29ucy9jb250ZW50VHlwZSc7XG5pbXBvcnQgeyBBcnJvd0Ryb3BEb3duIGFzIEFycm93RHJvcERvd25SYXcgfSBmcm9tICdAbmRsYS9pY29ucy9jb21tb24nO1xuaW1wb3J0IHsgU3Bpbm5lciB9IGZyb20gJ0BuZGxhL2VkaXRvcic7XG5pbXBvcnQgeyBzcGFjaW5nLCBjb2xvcnMsIG1pc2MsIGFuaW1hdGlvbnMgfSBmcm9tICdAbmRsYS9jb3JlJztcbmltcG9ydCB7IHVzZVRyYW5zbGF0aW9uIH0gZnJvbSAncmVhY3QtaTE4bmV4dCc7XG5pbXBvcnQgeyBpc01vYmlsZSB9IGZyb20gJ3JlYWN0LWRldmljZS1kZXRlY3QnO1xuXG5jb25zdCBBcnJvd1JpZ2h0ID0gc3R5bGVkKEFycm93RHJvcERvd25SYXcpYFxuICBjb2xvcjogJHtjb2xvcnMudGV4dC5wcmltYXJ5fTtcbiAgdHJhbnNmb3JtOiByb3RhdGUoLTkwZGVnKTtcbmA7XG5cbmNvbnN0IE5ld0ZvbGRlcldyYXBwZXIgPSBzdHlsZWQuZGl2YFxuICBwYWRkaW5nLWxlZnQ6ICR7c3BhY2luZy5ub3JtYWx9O1xuICAke2FuaW1hdGlvbnMuZmFkZUluTGVmdChhbmltYXRpb25zLmR1cmF0aW9ucy5mYXN0KX07XG4gIGFuaW1hdGlvbi1maWxsLW1vZGU6IGZvcndhcmRzO1xuICBAbWVkaWEgKHByZWZlcnMtcmVkdWNlZC1tb3Rpb246IHJlZHVjZSkge1xuICAgIGFuaW1hdGlvbjogbm9uZTtcbiAgfVxuYDtcblxuY29uc3QgSW5wdXRXcmFwcGVyID0gc3R5bGVkLmRpdjx7IGxvYWRpbmc/OiBib29sZWFuIH0+YFxuICBtYXJnaW46ICR7c3BhY2luZy54eHNtYWxsfSAke3NwYWNpbmcuc21hbGx9ICR7c3BhY2luZy54eHNtYWxsfSAwO1xuICBkaXNwbGF5OiBmbGV4O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBib3JkZXI6IDFweCBzb2xpZCAkeyh7IGxvYWRpbmcgfSkgPT4gKGxvYWRpbmcgPyBjb2xvcnMuYnJhbmQubGlnaHRlciA6IGNvbG9ycy5icmFuZC5wcmltYXJ5KX07XG4gIGJvcmRlci1zdHlsZTogZGFzaGVkO1xuICBib3JkZXItcmFkaXVzOiAke21pc2MuYm9yZGVyUmFkaXVzfTtcbiAgcGFkZGluZy1yaWdodDogJHtzcGFjaW5nLm5vcm1hbH07XG4gIHBhZGRpbmctbGVmdDogJHtzcGFjaW5nLnhzbWFsbH07XG4gIGNvbG9yOiAke2NvbG9ycy5icmFuZC5wcmltYXJ5fTtcbmA7XG5cbmNvbnN0IFN0eWxlZElucHV0ID0gc3R5bGVkLmlucHV0YFxuICBmbGV4LWdyb3c6IDE7XG4gIGJvcmRlcjogMDtcbiAgb3V0bGluZTogbm9uZTtcbiAgcGFkZGluZzogJHtzcGFjaW5nLnNtYWxsfTtcbiAgcGFkZGluZy1sZWZ0OiAke3NwYWNpbmcueHNtYWxsfTtcbiAgYmFja2dyb3VuZDogdHJhbnNwYXJlbnQ7XG4gIGNvbG9yOiAke2NvbG9ycy50ZXh0LnByaW1hcnl9O1xuICBzY3JvbGwtbWFyZ2luLXRvcDogMTAwcHg7XG5gO1xuXG5pbnRlcmZhY2UgRm9sZGVyTmFtZUlucHV0UHJvcHMge1xuICBvblNhdmVOZXdGb2xkZXI6ICh2YWx1ZTogc3RyaW5nKSA9PiB2b2lkO1xuICBvbkNhbmNlbE5ld0ZvbGRlcjogKCkgPT4gdm9pZDtcbiAgbG9hZGluZz86IGJvb2xlYW47XG59XG5cbmNvbnN0IEZvbGRlck5hbWVJbnB1dCA9ICh7IG9uU2F2ZU5ld0ZvbGRlciwgb25DYW5jZWxOZXdGb2xkZXIsIGxvYWRpbmcgfTogRm9sZGVyTmFtZUlucHV0UHJvcHMpID0+IHtcbiAgY29uc3QgeyB0IH0gPSB1c2VUcmFuc2xhdGlvbigpO1xuICBjb25zdCBbdmFsdWUsIHNldFZhbHVlXSA9IHVzZVN0YXRlPHN0cmluZz4odCgndHJlZVN0cnVjdHVyZS5uZXdGb2xkZXIuZGVmYXVsdE5hbWUnKSk7XG4gIGNvbnN0IGlucHV0UmVmID0gdXNlUmVmPEhUTUxJbnB1dEVsZW1lbnQ+KG51bGwpO1xuXG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgaWYgKGlucHV0UmVmLmN1cnJlbnQpIHtcbiAgICAgIGlucHV0UmVmLmN1cnJlbnQuc2VsZWN0KCk7XG4gICAgICBpZiAoaXNNb2JpbGUpIHtcbiAgICAgICAgaW5wdXRSZWYuY3VycmVudC5zY3JvbGxJbnRvVmlldyh7IGJlaGF2aW9yOiAnc21vb3RoJyB9KTtcbiAgICAgIH1cbiAgICB9XG4gIH0sIFtdKTtcblxuICByZXR1cm4gKFxuICAgIDxOZXdGb2xkZXJXcmFwcGVyPlxuICAgICAgPElucHV0V3JhcHBlciBsb2FkaW5nPXtsb2FkaW5nfT5cbiAgICAgICAgPEFycm93UmlnaHQgLz5cbiAgICAgICAgPEZvbGRlck91dGxpbmVkIC8+XG4gICAgICAgIDxTdHlsZWRJbnB1dFxuICAgICAgICAgIHJlZj17aW5wdXRSZWZ9XG4gICAgICAgICAgYXV0b0ZvY3VzXG4gICAgICAgICAgcGxhY2Vob2xkZXI9e3QoJ3RyZWVTdHJ1Y3R1cmUubmV3Rm9sZGVyLnBsYWNlaG9sZGVyJyl9XG4gICAgICAgICAgZGlzYWJsZWQ9e2xvYWRpbmd9XG4gICAgICAgICAgdmFsdWU9e3ZhbHVlfVxuICAgICAgICAgIG9uQmx1cj17KCkgPT4gb25DYW5jZWxOZXdGb2xkZXIoKX1cbiAgICAgICAgICBvbktleURvd249eyhlOiBSZWFjdC5LZXlib2FyZEV2ZW50PEhUTUxJbnB1dEVsZW1lbnQ+KSA9PiB7XG4gICAgICAgICAgICBpZiAoZS5rZXkgPT09ICdFc2NhcGUnKSB7XG4gICAgICAgICAgICAgIG9uQ2FuY2VsTmV3Rm9sZGVyKCk7XG4gICAgICAgICAgICAgIHJldHVybjtcbiAgICAgICAgICAgIH1cbiAgICAgICAgICAgIGlmIChlLmtleSA9PT0gJ0VudGVyJyB8fCBlLmtleSA9PT0gJ1RhYicpIHtcbiAgICAgICAgICAgICAgb25TYXZlTmV3Rm9sZGVyKHZhbHVlKTtcbiAgICAgICAgICAgICAgZS5wcmV2ZW50RGVmYXVsdCgpO1xuICAgICAgICAgICAgfVxuICAgICAgICAgICAgcmV0dXJuO1xuICAgICAgICAgIH19XG4gICAgICAgICAgb25DaGFuZ2U9eyhlOiBSZWFjdC5DaGFuZ2VFdmVudDxIVE1MSW5wdXRFbGVtZW50PikgPT4ge1xuICAgICAgICAgICAgY29uc3QgdGFyZ2V0ID0gZS50YXJnZXQgYXMgSFRNTElucHV0RWxlbWVudDtcbiAgICAgICAgICAgIHNldFZhbHVlKHRhcmdldC52YWx1ZSk7XG4gICAgICAgICAgfX1cbiAgICAgICAgLz5cbiAgICAgICAge2xvYWRpbmcgJiYgPFNwaW5uZXIgc2l6ZT1cInNtYWxsXCIgLz59XG4gICAgICA8L0lucHV0V3JhcHBlcj5cbiAgICA8L05ld0ZvbGRlcldyYXBwZXI+XG4gICk7XG59O1xuXG5leHBvcnQgZGVmYXVsdCBGb2xkZXJOYW1lSW5wdXQ7XG4iXX0= */"));
+var StyledInput = (0, _styledBase["default"])("input", {
+  target: "ea8uq7w3",
+  label: "StyledInput"
+})("flex-grow:1;border:0;outline:none;padding:", _core.spacing.small, ";padding-left:", _core.spacing.xsmall, ";background:transparent;color:", _core.colors.text.primary, ";scroll-margin-top:100px;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkZvbGRlck5hbWVJbnB1dC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBMkNnQyIsImZpbGUiOiJGb2xkZXJOYW1lSW5wdXQudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIDIwMjItcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqL1xuXG5pbXBvcnQgUmVhY3QsIHsgdXNlRWZmZWN0LCB1c2VTdGF0ZSwgdXNlUmVmIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgRm9sZGVyT3V0bGluZWQgfSBmcm9tICdAbmRsYS9pY29ucy9jb250ZW50VHlwZSc7XG5pbXBvcnQgeyBBcnJvd0Ryb3BEb3duIGFzIEFycm93RHJvcERvd25SYXcgfSBmcm9tICdAbmRsYS9pY29ucy9jb21tb24nO1xuaW1wb3J0IHsgU3Bpbm5lciB9IGZyb20gJ0BuZGxhL2VkaXRvcic7XG5pbXBvcnQgeyBzcGFjaW5nLCBjb2xvcnMsIG1pc2MsIGFuaW1hdGlvbnMgfSBmcm9tICdAbmRsYS9jb3JlJztcbmltcG9ydCB7IHVzZVRyYW5zbGF0aW9uIH0gZnJvbSAncmVhY3QtaTE4bmV4dCc7XG5pbXBvcnQgeyBpc01vYmlsZSB9IGZyb20gJ3JlYWN0LWRldmljZS1kZXRlY3QnO1xuXG5jb25zdCBBcnJvd1JpZ2h0ID0gc3R5bGVkKEFycm93RHJvcERvd25SYXcpYFxuICBjb2xvcjogJHtjb2xvcnMudGV4dC5wcmltYXJ5fTtcbiAgdHJhbnNmb3JtOiByb3RhdGUoLTkwZGVnKTtcbmA7XG5cbmNvbnN0IE5ld0ZvbGRlcldyYXBwZXIgPSBzdHlsZWQuZGl2YFxuICBwYWRkaW5nLWxlZnQ6ICR7c3BhY2luZy5ub3JtYWx9O1xuICAke2FuaW1hdGlvbnMuZmFkZUluTGVmdChhbmltYXRpb25zLmR1cmF0aW9ucy5mYXN0KX07XG4gIGFuaW1hdGlvbi1maWxsLW1vZGU6IGZvcndhcmRzO1xuICBAbWVkaWEgKHByZWZlcnMtcmVkdWNlZC1tb3Rpb246IHJlZHVjZSkge1xuICAgIGFuaW1hdGlvbjogbm9uZTtcbiAgfVxuYDtcblxuY29uc3QgSW5wdXRXcmFwcGVyID0gc3R5bGVkLmRpdjx7IGxvYWRpbmc/OiBib29sZWFuIH0+YFxuICBtYXJnaW46ICR7c3BhY2luZy54eHNtYWxsfSAke3NwYWNpbmcuc21hbGx9ICR7c3BhY2luZy54eHNtYWxsfSAwO1xuICBkaXNwbGF5OiBmbGV4O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBib3JkZXI6IDFweCBzb2xpZCAkeyh7IGxvYWRpbmcgfSkgPT4gKGxvYWRpbmcgPyBjb2xvcnMuYnJhbmQubGlnaHRlciA6IGNvbG9ycy5icmFuZC5wcmltYXJ5KX07XG4gIGJvcmRlci1zdHlsZTogZGFzaGVkO1xuICBib3JkZXItcmFkaXVzOiAke21pc2MuYm9yZGVyUmFkaXVzfTtcbiAgcGFkZGluZy1yaWdodDogJHtzcGFjaW5nLm5vcm1hbH07XG4gIHBhZGRpbmctbGVmdDogJHtzcGFjaW5nLnhzbWFsbH07XG4gIGNvbG9yOiAke2NvbG9ycy5icmFuZC5wcmltYXJ5fTtcbmA7XG5cbmNvbnN0IFN0eWxlZElucHV0ID0gc3R5bGVkLmlucHV0YFxuICBmbGV4LWdyb3c6IDE7XG4gIGJvcmRlcjogMDtcbiAgb3V0bGluZTogbm9uZTtcbiAgcGFkZGluZzogJHtzcGFjaW5nLnNtYWxsfTtcbiAgcGFkZGluZy1sZWZ0OiAke3NwYWNpbmcueHNtYWxsfTtcbiAgYmFja2dyb3VuZDogdHJhbnNwYXJlbnQ7XG4gIGNvbG9yOiAke2NvbG9ycy50ZXh0LnByaW1hcnl9O1xuICBzY3JvbGwtbWFyZ2luLXRvcDogMTAwcHg7XG5gO1xuXG5pbnRlcmZhY2UgRm9sZGVyTmFtZUlucHV0UHJvcHMge1xuICBvblNhdmVOZXdGb2xkZXI6ICh2YWx1ZTogc3RyaW5nKSA9PiB2b2lkO1xuICBvbkNhbmNlbE5ld0ZvbGRlcjogKCkgPT4gdm9pZDtcbiAgbG9hZGluZz86IGJvb2xlYW47XG59XG5cbmNvbnN0IEZvbGRlck5hbWVJbnB1dCA9ICh7IG9uU2F2ZU5ld0ZvbGRlciwgb25DYW5jZWxOZXdGb2xkZXIsIGxvYWRpbmcgfTogRm9sZGVyTmFtZUlucHV0UHJvcHMpID0+IHtcbiAgY29uc3QgeyB0IH0gPSB1c2VUcmFuc2xhdGlvbigpO1xuICBjb25zdCBbdmFsdWUsIHNldFZhbHVlXSA9IHVzZVN0YXRlPHN0cmluZz4odCgndHJlZVN0cnVjdHVyZS5uZXdGb2xkZXIuZGVmYXVsdE5hbWUnKSk7XG4gIGNvbnN0IGlucHV0UmVmID0gdXNlUmVmPEhUTUxJbnB1dEVsZW1lbnQ+KG51bGwpO1xuXG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgaWYgKGlucHV0UmVmLmN1cnJlbnQpIHtcbiAgICAgIGlucHV0UmVmLmN1cnJlbnQuc2VsZWN0KCk7XG4gICAgICBpZiAoaXNNb2JpbGUpIHtcbiAgICAgICAgaW5wdXRSZWYuY3VycmVudC5zY3JvbGxJbnRvVmlldyh7IGJlaGF2aW9yOiAnc21vb3RoJyB9KTtcbiAgICAgIH1cbiAgICB9XG4gIH0sIFtdKTtcblxuICByZXR1cm4gKFxuICAgIDxOZXdGb2xkZXJXcmFwcGVyPlxuICAgICAgPElucHV0V3JhcHBlciBsb2FkaW5nPXtsb2FkaW5nfT5cbiAgICAgICAgPEFycm93UmlnaHQgLz5cbiAgICAgICAgPEZvbGRlck91dGxpbmVkIC8+XG4gICAgICAgIDxTdHlsZWRJbnB1dFxuICAgICAgICAgIHJlZj17aW5wdXRSZWZ9XG4gICAgICAgICAgYXV0b0ZvY3VzXG4gICAgICAgICAgcGxhY2Vob2xkZXI9e3QoJ3RyZWVTdHJ1Y3R1cmUubmV3Rm9sZGVyLnBsYWNlaG9sZGVyJyl9XG4gICAgICAgICAgZGlzYWJsZWQ9e2xvYWRpbmd9XG4gICAgICAgICAgdmFsdWU9e3ZhbHVlfVxuICAgICAgICAgIG9uQmx1cj17KCkgPT4gb25DYW5jZWxOZXdGb2xkZXIoKX1cbiAgICAgICAgICBvbktleURvd249eyhlOiBSZWFjdC5LZXlib2FyZEV2ZW50PEhUTUxJbnB1dEVsZW1lbnQ+KSA9PiB7XG4gICAgICAgICAgICBpZiAoZS5rZXkgPT09ICdFc2NhcGUnKSB7XG4gICAgICAgICAgICAgIG9uQ2FuY2VsTmV3Rm9sZGVyKCk7XG4gICAgICAgICAgICAgIHJldHVybjtcbiAgICAgICAgICAgIH1cbiAgICAgICAgICAgIGlmIChlLmtleSA9PT0gJ0VudGVyJyB8fCBlLmtleSA9PT0gJ1RhYicpIHtcbiAgICAgICAgICAgICAgb25TYXZlTmV3Rm9sZGVyKHZhbHVlKTtcbiAgICAgICAgICAgICAgZS5wcmV2ZW50RGVmYXVsdCgpO1xuICAgICAgICAgICAgfVxuICAgICAgICAgICAgcmV0dXJuO1xuICAgICAgICAgIH19XG4gICAgICAgICAgb25DaGFuZ2U9eyhlOiBSZWFjdC5DaGFuZ2VFdmVudDxIVE1MSW5wdXRFbGVtZW50PikgPT4ge1xuICAgICAgICAgICAgY29uc3QgdGFyZ2V0ID0gZS50YXJnZXQgYXMgSFRNTElucHV0RWxlbWVudDtcbiAgICAgICAgICAgIHNldFZhbHVlKHRhcmdldC52YWx1ZSk7XG4gICAgICAgICAgfX1cbiAgICAgICAgLz5cbiAgICAgICAge2xvYWRpbmcgJiYgPFNwaW5uZXIgc2l6ZT1cInNtYWxsXCIgLz59XG4gICAgICA8L0lucHV0V3JhcHBlcj5cbiAgICA8L05ld0ZvbGRlcldyYXBwZXI+XG4gICk7XG59O1xuXG5leHBvcnQgZGVmYXVsdCBGb2xkZXJOYW1lSW5wdXQ7XG4iXX0= */"));
+
+var FolderNameInput = function FolderNameInput(_ref2) {
+  var onSaveNewFolder = _ref2.onSaveNewFolder,
+      onCancelNewFolder = _ref2.onCancelNewFolder,
+      loading = _ref2.loading;
+
+  var _useTranslation = (0, _reactI18next.useTranslation)(),
+      t = _useTranslation.t;
+
+  var _useState = (0, _react.useState)(t('treeStructure.newFolder.defaultName')),
+      _useState2 = _slicedToArray(_useState, 2),
+      value = _useState2[0],
+      setValue = _useState2[1];
+
+  var inputRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    if (inputRef.current) {
+      inputRef.current.select();
+
+      if (_reactDeviceDetect.isMobile) {
+        inputRef.current.scrollIntoView({
+          behavior: 'smooth'
+        });
+      }
+    }
+  }, []);
+  return (0, _core2.jsx)(NewFolderWrapper, null, (0, _core2.jsx)(InputWrapper, {
+    loading: loading
+  }, (0, _core2.jsx)(ArrowRight, null), (0, _core2.jsx)(_contentType.FolderOutlined, null), (0, _core2.jsx)(StyledInput, {
+    ref: inputRef,
+    autoFocus: true,
+    placeholder: t('treeStructure.newFolder.placeholder'),
+    disabled: loading,
+    value: value,
+    onBlur: function onBlur() {
+      return onCancelNewFolder();
+    },
+    onKeyDown: function onKeyDown(e) {
+      if (e.key === 'Escape') {
+        onCancelNewFolder();
+        return;
+      }
+
+      if (e.key === 'Enter' || e.key === 'Tab') {
+        onSaveNewFolder(value);
+        e.preventDefault();
+      }
+
+      return;
+    },
+    onChange: function onChange(e) {
+      var target = e.target;
+      setValue(target.value);
+    }
+  }), loading && (0, _core2.jsx)(_editor.Spinner, {
+    size: "small"
+  })));
+};
+
+var _default = FolderNameInput;
+exports["default"] = _default;

package/lib/TreeStructure/TreeStructure.d.ts

@@ -0,0 +1,12 @@
+/**
+ * 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.
+ *
+ */
+/// <reference types="react" />
+import { TreeStructureProps } from './TreeStructure.types';
+export declare const MAX_LEVEL_FOR_FOLDERS = 4;
+declare const TreeStructure: ({ data, label, editable, loading, onNewFolder, openOnFolderClick, framed, folderIdMarkedByDefault, defaultOpenFolders, }: TreeStructureProps) => JSX.Element;
+export default TreeStructure;

package/lib/TreeStructure/TreeStructure.js

@@ -0,0 +1,273 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.MAX_LEVEL_FOR_FOLDERS = void 0;
+
+var _styledBase = _interopRequireDefault(require("@emotion/styled-base"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _util = require("@ndla/util");
+
+var _button = _interopRequireDefault(require("@ndla/button"));
+
+var _tooltip = _interopRequireDefault(require("@ndla/tooltip"));
+
+var _reactI18next = require("react-i18next");
+
+var _core = require("@ndla/core");
+
+var _TreeStructureWrapper = _interopRequireDefault(require("./TreeStructureWrapper"));
+
+var _FolderItems = _interopRequireDefault(require("./FolderItems"));
+
+var _helperFunctions = require("./helperFunctions");
+
+var _keyboardNavigation = _interopRequireWildcard(require("./keyboardNavigation/keyboardNavigation"));
+
+var _core2 = require("@emotion/core");
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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; }
+
+var MAX_LEVEL_FOR_FOLDERS = 4;
+exports.MAX_LEVEL_FOR_FOLDERS = MAX_LEVEL_FOR_FOLDERS;
+var StyledLabel = (0, _styledBase["default"])("label", {
+  target: "e1dg1gdn0",
+  label: "StyledLabel"
+})("font-weight:", _core.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 = (0, _styledBase["default"])("div", {
+  target: "e1dg1gdn1",
+  label: "AddFolderWrapper"
+})("display:flex;margin-top:", _core.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 = (0, _reactI18next.useTranslation)(),
+      t = _useTranslation.t;
+
+  var _useState = (0, _react.useState)(),
+      _useState2 = _slicedToArray(_useState, 2),
+      newFolder = _useState2[0],
+      setNewFolder = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(new Set(defaultOpenFolders || [])),
+      _useState4 = _slicedToArray(_useState3, 2),
+      openFolders = _useState4[0],
+      setOpenFolders = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(),
+      _useState6 = _slicedToArray(_useState5, 2),
+      focusedFolderId = _useState6[0],
+      setFocusedFolderId = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(folderIdMarkedByDefault || data[0].id),
+      _useState8 = _slicedToArray(_useState7, 2),
+      markedFolderId = _useState8[0],
+      setMarkedFolderId = _useState8[1];
+
+  var treestructureRef = (0, _react.useRef)(null);
+  var wrapperRef = (0, _react.useRef)(null);
+  var rootLevelId = (0, _react.useMemo)(function () {
+    return (0, _util.uuid)();
+  }, []); // TODO: use useId hook when we update to React 18
+
+  (0, _react.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]);
+  (0, _react.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 = (0, _helperFunctions.getPathOfFolder)(data, id);
+          var markedFolderPath = (0, _helperFunctions.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 || (0, _helperFunctions.getPathOfFolder)(data, markedFolderId).length >= MAX_LEVEL_FOR_FOLDERS;
+  return (0, _core2.jsx)("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)) && _keyboardNavigation.KEYBOARD_KEYS_OF_INTEREST.includes(e.key)) {
+        (0, _keyboardNavigation["default"])({
+          e: e,
+          data: data,
+          setFocusedFolderId: setFocusedFolderId,
+          focusedFolderId: focusedFolderId,
+          onToggleOpen: onToggleOpen,
+          openFolders: openFolders
+        });
+      }
+    }
+  }, (0, _core2.jsx)(StyledLabel, {
+    htmlFor: rootLevelId
+  }, label), (0, _core2.jsx)(_TreeStructureWrapper["default"], {
+    ref: wrapperRef,
+    id: rootLevelId,
+    "aria-label": "Menu tree",
+    role: "tree",
+    framed: framed
+  }, (0, _core2.jsx)(_FolderItems["default"], {
+    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 && (0, _core2.jsx)(AddFolderWrapper, null, (0, _core2.jsx)(_tooltip["default"], {
+    tooltip: t('myNdla.newFolderUnder', {
+      folderName: (0, _helperFunctions.getFolderName)(data, markedFolderId)
+    })
+  }, (0, _core2.jsx)(_button["default"], {
+    size: "small",
+    light: true,
+    disabled: disableAddFolderButton,
+    onClick: function onClick() {
+      var paths = (0, _helperFunctions.getPathOfFolder)(data, markedFolderId || '');
+      var idPaths = (0, _helperFunctions.getIdPathsOfFolder)(data, markedFolderId || '');
+      setNewFolder({
+        idPaths: idPaths,
+        parentId: paths[paths.length - 1]
+      });
+    }
+  }, t('myNdla.newFolder')))));
+};
+
+var _default = TreeStructure;
+exports["default"] = _default;

package/lib/TreeStructure/TreeStructure.types.d.ts

@@ -0,0 +1,63 @@
+/**
+ * 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 from 'react';
+export interface FolderStructureProps {
+    id: string;
+    name: string;
+    isOpen?: boolean;
+    data?: FolderStructureProps[];
+    isFavorite?: boolean;
+    status?: string;
+    openAsDefault?: boolean;
+    url?: string;
+    icon?: React.ReactNode;
+}
+export interface NewFolderProps {
+    parentId?: string;
+    idPaths: number[];
+}
+interface CommonFolderProps {
+    data: FolderStructureProps[];
+    editable?: boolean;
+    loading?: boolean;
+    openOnFolderClick?: boolean;
+}
+export interface TreeStructureProps extends CommonFolderProps {
+    framed?: boolean;
+    label: string;
+    folderIdMarkedByDefault?: string;
+    onNewFolder: (props: {
+        value: string;
+        parentId?: string;
+        idPaths: number[];
+    }) => Promise<string>;
+    defaultOpenFolders?: string[];
+}
+export declare type onCreateNewFolderProp = ({ idPaths, parentId, }: {
+    idPaths: number[];
+    parentId: string | undefined;
+}) => void;
+export declare type SetOpenFolderProp = React.Dispatch<React.SetStateAction<Set<string>>>;
+export declare type SetFocusedFolderId = React.Dispatch<React.SetStateAction<string | undefined>>;
+export interface FolderItemsProps extends CommonFolderProps {
+    onToggleOpen: (id: string) => void;
+    onSaveNewFolder: (value: string) => void;
+    onCancelNewFolder: () => void;
+    onCreateNewFolder: onCreateNewFolderProp;
+    newFolder: NewFolderProps | undefined;
+    openFolders: Set<string>;
+    markedFolderId?: string;
+    onMarkFolder: (id: string) => void;
+    idPaths: number[];
+    focusedFolderId: string | undefined;
+    setFocusedFolderId: SetFocusedFolderId;
+    firstLevel: boolean;
+    keyNavigationFocusIsCreateFolderButton?: boolean;
+    icon?: React.ReactElement;
+}
+export {};

package/lib/TreeStructure/TreeStructure.types.js

@@ -0,0 +1 @@
+"use strict";

package/lib/TreeStructure/TreeStructureWrapper.d.ts

@@ -0,0 +1,12 @@
+/**
+ * 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.
+ *
+ */
+/// <reference types="react" />
+declare const TreeStructureWrapper: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    framed?: boolean | undefined;
+}, object>;
+export default TreeStructureWrapper;

package/lib/TreeStructure/TreeStructureWrapper.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _styledBase = _interopRequireDefault(require("@emotion/styled-base"));
+
+var _core = require("@emotion/core");
+
+var _core2 = require("@ndla/core");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var TreeStructureWrapper = (0, _styledBase["default"])("div", {
+  target: "ez53f4u0",
+  label: "TreeStructureWrapper"
+})("padding:", _core2.spacing.xsmall, ";", function (_ref) {
+  var framed = _ref.framed;
+  return framed ? /*#__PURE__*/(0, _core.css)("border:1px solid ", _core2.colors.brand.greyLighter, ";border-radius:", _core2.misc.borderRadius, ";max-height:400px;overflow-y:scroll;scroll-behavior:smooth;padding:", _core2.spacing.small, ";;label:TreeStructureWrapper;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRyZWVTdHJ1Y3R1cmVXcmFwcGVyLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFnQlciLCJmaWxlIjoiVHJlZVN0cnVjdHVyZVdyYXBwZXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIDIwMjItcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqL1xuXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9jb3JlJztcbmltcG9ydCB7IGNvbG9ycywgbWlzYywgc3BhY2luZyB9IGZyb20gJ0BuZGxhL2NvcmUnO1xuXG5jb25zdCBUcmVlU3RydWN0dXJlV3JhcHBlciA9IHN0eWxlZC5kaXY8eyBmcmFtZWQ/OiBib29sZWFuIH0+YFxuICBwYWRkaW5nOiAke3NwYWNpbmcueHNtYWxsfTtcbiAgJHsoeyBmcmFtZWQgfSkgPT5cbiAgICBmcmFtZWRcbiAgICAgID8gY3NzYFxuICAgICAgICAgIGJvcmRlcjogMXB4IHNvbGlkICR7Y29sb3JzLmJyYW5kLmdyZXlMaWdodGVyfTtcbiAgICAgICAgICBib3JkZXItcmFkaXVzOiAke21pc2MuYm9yZGVyUmFkaXVzfTtcbiAgICAgICAgICBtYXgtaGVpZ2h0OiA0MDBweDtcbiAgICAgICAgICBvdmVyZmxvdy15OiBzY3JvbGw7XG4gICAgICAgICAgc2Nyb2xsLWJlaGF2aW9yOiBzbW9vdGg7XG4gICAgICAgICAgcGFkZGluZzogJHtzcGFjaW5nLnNtYWxsfTtcbiAgICAgICAgYFxuICAgICAgOiBjc3NgXG4gICAgICAgICAgbWFyZ2luLWxlZnQ6IC0ke3NwYWNpbmcubWVkaXVtfTtcbiAgICAgICAgYH1cbiAgdHJhbnNpdGlvbjogJHttaXNjLnRyYW5zaXRpb24uZGVmYXVsdH07XG4gICY6Zm9jdXMtd2l0aGluIHtcbiAgICBib3JkZXItY29sb3I6ICR7Y29sb3JzLmJyYW5kLnByaW1hcnl9O1xuICB9XG5gO1xuXG5leHBvcnQgZGVmYXVsdCBUcmVlU3RydWN0dXJlV3JhcHBlcjtcbiJdfQ== */")) : /*#__PURE__*/(0, _core.css)("margin-left:-", _core2.spacing.medium, ";;label:TreeStructureWrapper;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRyZWVTdHJ1Y3R1cmVXcmFwcGVyLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF3QlciLCJmaWxlIjoiVHJlZVN0cnVjdHVyZVdyYXBwZXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIDIwMjItcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqL1xuXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9jb3JlJztcbmltcG9ydCB7IGNvbG9ycywgbWlzYywgc3BhY2luZyB9IGZyb20gJ0BuZGxhL2NvcmUnO1xuXG5jb25zdCBUcmVlU3RydWN0dXJlV3JhcHBlciA9IHN0eWxlZC5kaXY8eyBmcmFtZWQ/OiBib29sZWFuIH0+YFxuICBwYWRkaW5nOiAke3NwYWNpbmcueHNtYWxsfTtcbiAgJHsoeyBmcmFtZWQgfSkgPT5cbiAgICBmcmFtZWRcbiAgICAgID8gY3NzYFxuICAgICAgICAgIGJvcmRlcjogMXB4IHNvbGlkICR7Y29sb3JzLmJyYW5kLmdyZXlMaWdodGVyfTtcbiAgICAgICAgICBib3JkZXItcmFkaXVzOiAke21pc2MuYm9yZGVyUmFkaXVzfTtcbiAgICAgICAgICBtYXgtaGVpZ2h0OiA0MDBweDtcbiAgICAgICAgICBvdmVyZmxvdy15OiBzY3JvbGw7XG4gICAgICAgICAgc2Nyb2xsLWJlaGF2aW9yOiBzbW9vdGg7XG4gICAgICAgICAgcGFkZGluZzogJHtzcGFjaW5nLnNtYWxsfTtcbiAgICAgICAgYFxuICAgICAgOiBjc3NgXG4gICAgICAgICAgbWFyZ2luLWxlZnQ6IC0ke3NwYWNpbmcubWVkaXVtfTtcbiAgICAgICAgYH1cbiAgdHJhbnNpdGlvbjogJHttaXNjLnRyYW5zaXRpb24uZGVmYXVsdH07XG4gICY6Zm9jdXMtd2l0aGluIHtcbiAgICBib3JkZXItY29sb3I6ICR7Y29sb3JzLmJyYW5kLnByaW1hcnl9O1xuICB9XG5gO1xuXG5leHBvcnQgZGVmYXVsdCBUcmVlU3RydWN0dXJlV3JhcHBlcjtcbiJdfQ== */"));
+}, " transition:", _core2.misc.transition["default"], ";&:focus-within{border-color:", _core2.colors.brand.primary, ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRyZWVTdHJ1Y3R1cmVXcmFwcGVyLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFZNkQiLCJmaWxlIjoiVHJlZVN0cnVjdHVyZVdyYXBwZXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIDIwMjItcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqL1xuXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9jb3JlJztcbmltcG9ydCB7IGNvbG9ycywgbWlzYywgc3BhY2luZyB9IGZyb20gJ0BuZGxhL2NvcmUnO1xuXG5jb25zdCBUcmVlU3RydWN0dXJlV3JhcHBlciA9IHN0eWxlZC5kaXY8eyBmcmFtZWQ/OiBib29sZWFuIH0+YFxuICBwYWRkaW5nOiAke3NwYWNpbmcueHNtYWxsfTtcbiAgJHsoeyBmcmFtZWQgfSkgPT5cbiAgICBmcmFtZWRcbiAgICAgID8gY3NzYFxuICAgICAgICAgIGJvcmRlcjogMXB4IHNvbGlkICR7Y29sb3JzLmJyYW5kLmdyZXlMaWdodGVyfTtcbiAgICAgICAgICBib3JkZXItcmFkaXVzOiAke21pc2MuYm9yZGVyUmFkaXVzfTtcbiAgICAgICAgICBtYXgtaGVpZ2h0OiA0MDBweDtcbiAgICAgICAgICBvdmVyZmxvdy15OiBzY3JvbGw7XG4gICAgICAgICAgc2Nyb2xsLWJlaGF2aW9yOiBzbW9vdGg7XG4gICAgICAgICAgcGFkZGluZzogJHtzcGFjaW5nLnNtYWxsfTtcbiAgICAgICAgYFxuICAgICAgOiBjc3NgXG4gICAgICAgICAgbWFyZ2luLWxlZnQ6IC0ke3NwYWNpbmcubWVkaXVtfTtcbiAgICAgICAgYH1cbiAgdHJhbnNpdGlvbjogJHttaXNjLnRyYW5zaXRpb24uZGVmYXVsdH07XG4gICY6Zm9jdXMtd2l0aGluIHtcbiAgICBib3JkZXItY29sb3I6ICR7Y29sb3JzLmJyYW5kLnByaW1hcnl9O1xuICB9XG5gO1xuXG5leHBvcnQgZGVmYXVsdCBUcmVlU3RydWN0dXJlV3JhcHBlcjtcbiJdfQ== */"));
+var _default = TreeStructureWrapper;
+exports["default"] = _default;

package/lib/TreeStructure/helperFunctions.d.ts

@@ -0,0 +1,5 @@
+import { FolderStructureProps } from './TreeStructure.types';
+declare const getPathOfFolder: (data: FolderStructureProps[], findId: string) => string[];
+declare const getIdPathsOfFolder: (data: FolderStructureProps[], findId: string) => number[];
+declare const getFolderName: (data: FolderStructureProps[], findId: string | undefined) => string | undefined;
+export { getPathOfFolder, getIdPathsOfFolder, getFolderName };