@ndla/ui 19.1.1 → 20.0.2

package/lib/TreeStructure/keyboardNavigation/keyboardNavigation.js

@@ -1,198 +0,0 @@
-"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$5;
-
-  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.includes(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)) {
-    var _data$;
-
-    // Couldn't find its location in the tree.
-    // This should not happen, reset its value to root.
-    setFocusedFolderId(e.key === 'ArrowDown' ? (_data$ = data[0]) === null || _data$ === void 0 ? void 0 : _data$.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') {
-    var _data$2;
-
-    setFocusedFolderId((_data$2 = data[0]) === null || _data$2 === void 0 ? void 0 : _data$2.id);
-    return;
-  }
-
-  if (!id) {
-    return;
-  } // Move up
-
-
-  if (e.key === 'ArrowUp') {
-    if (elementWithKeyFocus.index > 0) {
-      var _elementWithKeyFocus$2;
-
-      // Move upwards to the parent folder
-      setFocusedFolderId(elementWithKeyFocus.parent ? (_elementWithKeyFocus$2 = elementWithKeyFocus.parent[elementWithKeyFocus.index - 1]) === null || _elementWithKeyFocus$2 === void 0 ? void 0 : _elementWithKeyFocus$2.id : undefined);
-    } else if (elementWithKeyFocus.paths.length > 0) {
-      var _findParent$parentsCu;
-
-      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$parentsCu = findParent[parentsCurrentIndex]) === null || _findParent$parentsCu === void 0 ? void 0 : _findParent$parentsCu.id);
-    }
-
-    return;
-  }
-
-  if (elementWithKeyFocus.isOpen) {
-    var _elementWithKeyFocus$3;
-
-    if ((_elementWithKeyFocus$3 = elementWithKeyFocus.data) === null || _elementWithKeyFocus$3 === void 0 ? void 0 : _elementWithKeyFocus$3.length) {
-      var _elementWithKeyFocus$4;
-
-      setFocusedFolderId((_elementWithKeyFocus$4 = elementWithKeyFocus.data[0]) === null || _elementWithKeyFocus$4 === void 0 ? void 0 : _elementWithKeyFocus$4.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$5 = elementWithKeyFocus.parent) === null || _elementWithKeyFocus$5 === void 0 ? void 0 : _elementWithKeyFocus$5.length) - 1) {
-    var _elementWithKeyFocus$6;
-
-    // Move downwards to the next child
-    setFocusedFolderId((_elementWithKeyFocus$6 = elementWithKeyFocus.parent[elementWithKeyFocus.index + 1]) === null || _elementWithKeyFocus$6 === void 0 ? void 0 : _elementWithKeyFocus$6.id);
-    return;
-  }
-
-  traverseUpwards(data, setFocusedFolderId, elementWithKeyFocus.paths, elementWithKeyFocus.index);
-  return;
-};
-
-var _default = keyboardNavigation;
-exports["default"] = _default;

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

@@ -1,26 +0,0 @@
-/**
- * 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: 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

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

package/src/Spinner/Spinner.tsx

@@ -1,46 +0,0 @@
-/**
- * Copyright (c) 2018-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';
-import styled from '@emotion/styled';
-import { colors, spacing, SpacingNames } from '@ndla/core';
-
-interface Props {
-  size?: SpacingNames;
-  margin?: string;
-  inverted?: boolean;
-}
-
-interface StyledProps extends Props {
-  size: SpacingNames;
-}
-
-const SpinnerDiv = styled('div')<StyledProps>`
-  border: calc(${(props) => spacing[props.size]} / 6.5) solid rgba(0, 0, 0, 0.1);
-  border-bottom-color: ${(props) => (props.inverted ? '#fff' : colors.brand.primary)};
-  border-radius: 50%;
-  animation: spinnerAnimation 0.7s linear infinite;
-  height: ${(props) => spacing[props.size]};
-  width: ${(props) => spacing[props.size]};
-  margin: ${(props) => props.margin};
-  display: block;
-  @keyframes spinnerAnimation {
-    0% {
-      transform: rotate(0deg);
-    }
-    100% {
-      transform: rotate(360deg);
-    }
-  }
-`;
-
-const Spinner = ({ size = 'large', margin = `${spacing.normal} auto`, inverted }: Partial<Props>) => (
-  <SpinnerDiv size={size} margin={margin} inverted={!!inverted} />
-);
-
-export default Spinner;

package/src/Spinner/index.ts

@@ -1,3 +0,0 @@
-import Spinner from './Spinner';
-
-export default Spinner;

package/src/TreeStructure/keyboardNavigation/keyboardNavigation.ts

@@ -1,161 +0,0 @@
-/**
- * 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 { FolderStructureProps, SetFocusedFolderId } from '../TreeStructure.types';
-import { KeyboardNavigationProps, ElementWithKeyFocusProps } from './keyboardNavigation.types';
-import { MAX_LEVEL_FOR_FOLDERS } from '../TreeStructure';
-
-export const KEYBOARD_KEYS_OF_INTEREST = ['ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft', ' '];
-
-// Traverse upwards, incase parent is last element of its parent..
-const traverseUpwards = (
-  inital: FolderStructureProps[],
-  setFocusedFolderId: SetFocusedFolderId,
-  paths: number[],
-  index: number,
-) => {
-  let findParent: FolderStructureProps[] = inital;
-  const parentNextIds: (string | false)[] = [];
-  paths.forEach((pathIndex) => {
-    const nextParent = findParent ? findParent[pathIndex + 1] : undefined;
-    parentNextIds.push(nextParent?.id || false);
-    findParent = findParent[pathIndex].data || [];
-  });
-  if (!parentNextIds.length) {
-    parentNextIds.push(findParent[index + 1]?.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.
-  const newId = parentNextIds.reverse().filter((id) => id)[0];
-  if (newId) {
-    setFocusedFolderId(newId);
-  }
-};
-
-const keyboardNavigation = ({
-  e,
-  data,
-  onToggleOpen,
-  setFocusedFolderId,
-  focusedFolderId: id,
-  openFolders,
-}: KeyboardNavigationProps): string | undefined => {
-  if (e.key === ' ' && document.activeElement?.nodeName === 'INPUT') {
-    return;
-  }
-
-  // We are navigating in the tree.
-  // We need to find the next folder in the tree
-  const elementWithKeyFocus: ElementWithKeyFocusProps = {
-    paths: [],
-    index: 0,
-  };
-
-  const updatePathToElementWithKeyFocus = (
-    data: FolderStructureProps[],
-    paths: number[],
-    parent: FolderStructureProps[],
-    parentId?: string,
-  ): boolean =>
-    data.some(({ data: childData, id: dataId, url }, _index) => {
-      if (dataId === id) {
-        elementWithKeyFocus.paths = paths;
-        elementWithKeyFocus.index = _index;
-        elementWithKeyFocus.isOpen = openFolders.includes(dataId) && childData && childData.length > 0;
-        elementWithKeyFocus.data = childData;
-        elementWithKeyFocus.parent = parent;
-        elementWithKeyFocus.parentId = parentId;
-        elementWithKeyFocus.url = url;
-        return true;
-      }
-      return childData ? updatePathToElementWithKeyFocus(childData, [...paths, _index], [...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 === ' ') {
-    const simulatedEvent = new MouseEvent('click', {
-      bubbles: true,
-      cancelable: true,
-      view: window,
-    });
-    document.activeElement && document.activeElement.dispatchEvent(simulatedEvent);
-    return;
-  }
-
-  if (e.key === 'ArrowRight') {
-    if (
-      !elementWithKeyFocus.isOpen &&
-      elementWithKeyFocus.data?.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();
-      let findParent = data;
-      elementWithKeyFocus.paths.forEach((index) => {
-        findParent = findParent[index].data as FolderStructureProps[];
-      });
-      const parentsCurrentIndex = findParent.findIndex(({ id }) => id === elementWithKeyFocus.parentId);
-      setFocusedFolderId(findParent[parentsCurrentIndex]?.id);
-    }
-    return;
-  }
-
-  if (elementWithKeyFocus.isOpen) {
-    if (elementWithKeyFocus.data?.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.parent?.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/src/TreeStructure/keyboardNavigation/keyboardNavigation.types.ts

@@ -1,28 +0,0 @@
-/**
- * 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 { FolderStructureProps, SetFocusedFolderId } from '../TreeStructure.types';
-
-export interface KeyboardNavigationProps {
-  e: React.KeyboardEvent<HTMLElement>;
-  data: FolderStructureProps[];
-  setFocusedFolderId: SetFocusedFolderId;
-  openFolders: 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;
-}