@ndla/ui 13.2.1 → 15.0.0

package/lib/TreeStructure/helperFunctions.js

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

package/lib/TreeStructure/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * 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 type { FolderStructureProps, TreeStructureProps } from './TreeStructure.types';
+export { TreeStructure };

package/lib/TreeStructure/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "TreeStructure", {
+  enumerable: true,
+  get: function get() {
+    return _TreeStructure["default"];
+  }
+});
+
+var _TreeStructure = _interopRequireDefault(require("./TreeStructure"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/lib/TreeStructure/keyboardNavigation/keyboardNavigation.d.ts

@@ -0,0 +1,11 @@
+/**
+ * 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 { KeyboardNavigationProps } from './keyboardNavigation.types';
+export declare const KEYBOARD_KEYS_OF_INTEREST: string[];
+declare const keyboardNavigation: ({ e, data, onToggleOpen, setFocusedFolderId, focusedFolderId: id, openFolders, }: KeyboardNavigationProps) => string | undefined;
+export default keyboardNavigation;

package/lib/TreeStructure/keyboardNavigation/keyboardNavigation.js

@@ -0,0 +1,186 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.KEYBOARD_KEYS_OF_INTEREST = void 0;
+
+var _TreeStructure = require("../TreeStructure");
+
+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; }
+
+var KEYBOARD_KEYS_OF_INTEREST = ['ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft', ' ']; // Traverse upwards, incase parent is last element of its parent..
+
+exports.KEYBOARD_KEYS_OF_INTEREST = KEYBOARD_KEYS_OF_INTEREST;
+
+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 < _TreeStructure.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;
+};
+
+var _default = keyboardNavigation;
+exports["default"] = _default;

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

@@ -0,0 +1,26 @@
+/**
+ * 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 { FolderStructureProps, SetFocusedFolderId } from '../TreeStructure.types';
+export interface KeyboardNavigationProps {
+    e: React.KeyboardEvent<HTMLElement>;
+    data: FolderStructureProps[];
+    setFocusedFolderId: SetFocusedFolderId;
+    openFolders: Set<string>;
+    onToggleOpen: (id: string) => void;
+    focusedFolderId: string | undefined;
+}
+export interface ElementWithKeyFocusProps {
+    paths: number[];
+    index: number;
+    data?: FolderStructureProps[];
+    parent?: FolderStructureProps[];
+    parentId?: string;
+    isOpen?: boolean;
+    url?: string;
+}

package/lib/TreeStructure/keyboardNavigation/keyboardNavigation.types.js

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

package/lib/User/AuthModal.d.ts

@@ -6,11 +6,11 @@
  *
  */
 import { ReactElement, ReactNode } from 'react';
+import { FeideUserApiType } from './apiTypes';
 export declare type AuthModalProps = {
     isAuthenticated?: boolean;
+    user?: FeideUserApiType;
     showGeneralMessage?: boolean;
-    authorizedRole?: string;
-    authorizedCollectedInfo?: string[];
     onAuthenticateClick: () => void;
     position?: 'top' | 'bottom';
     activateButton?: ReactElement;
@@ -18,5 +18,5 @@ export declare type AuthModalProps = {
     isOpen?: boolean;
     onClose?: () => void;
 };
-declare const AuthModal: ({ isAuthenticated, showGeneralMessage, authorizedRole, authorizedCollectedInfo, onAuthenticateClick, position, activateButton, children, isOpen, onClose, }: AuthModalProps) => JSX.Element;
+declare const AuthModal: ({ isAuthenticated, user, showGeneralMessage, onAuthenticateClick, position, activateButton, children, isOpen, onClose, }: AuthModalProps) => JSX.Element;
 export default AuthModal;