@elice/material-exercise 1.240718.0-trasncript.2 → 1.240718.1

package/es/components/shared/file-tree/FileTreeListItems.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import React from 'react';
 import { base } from '@elice/design-tokens';
 import { useFileTreeState, useFileTreeDispatch } from './context/FileTreeContext.js';
 import FileTreeListItemContent from './FileTreeListItemContent.js';
@@ -7,35 +7,38 @@ import { getTargetDirectoryPath } from './utils/fileTreeInput.js';
 import { isMovingTheSamePath } from './utils/fileTreePath.js';
 import { StyledTreeItems, StyledTreeItem } from './FileTreeListItems.styled.js';
 
-var FileTreeListItems = function FileTreeListItems(_ref) {
-  var node = _ref.node,
-    _ref$indent = _ref.indent,
-    indent = _ref$indent === void 0 ? 1 : _ref$indent;
-  var uniqCompId = 'treeitem';
-  var _useFileTreeState = useFileTreeState(),
-    activePath = _useFileTreeState.activePath,
-    newInput = _useFileTreeState.newInput,
-    dropzonePath = _useFileTreeState.dropzonePath,
-    renameInputPath = _useFileTreeState.renameInputPath,
-    fileTree = _useFileTreeState.fileTree,
-    maxFileUploadSize = _useFileTreeState.maxFileUploadSize,
-    isHiddenFilelistVisible = _useFileTreeState.isHiddenFilelistVisible;
-  var _useFileTreeDispatch = useFileTreeDispatch(),
-    dispatch = _useFileTreeDispatch.dispatch,
-    onFileMove = _useFileTreeDispatch.onFileMove,
-    onDirectoryMove = _useFileTreeDispatch.onDirectoryMove,
-    onFilesUpload = _useFileTreeDispatch.onFilesUpload;
+const FileTreeListItems = ({
+  node,
+  indent = 1
+}) => {
+  const uniqCompId = 'treeitem';
+  const {
+    activePath,
+    newInput,
+    dropzonePath,
+    renameInputPath,
+    fileTree,
+    maxFileUploadSize,
+    isHiddenFilelistVisible
+  } = useFileTreeState();
+  const {
+    dispatch,
+    onFileMove,
+    onDirectoryMove,
+    onFilesUpload
+  } = useFileTreeDispatch();
   /**
    *
    */
-  var handleFilesUpload = function handleFilesUpload(_ref2) {
-    var files = _ref2.files,
-      path = _ref2.path;
+  const handleFilesUpload = ({
+    files,
+    path
+  }) => {
     if (validateFilesSize(files, maxFileUploadSize)) {
       if (typeof onFilesUpload === 'function') {
         onFilesUpload({
-          files: files,
-          path: path
+          files,
+          path
         });
       }
     }
@@ -43,158 +46,143 @@ var FileTreeListItems = function FileTreeListItems(_ref) {
   /**
    *
    */
-  var getDragStartHandler = function getDragStartHandler(childNode) {
-    return function (e) {
-      var _a, _b;
-      e.stopPropagation();
-      // 🚨 data should be set in order to trigger onDrop event in "React".
-      e.dataTransfer.setData('text/plain', (_b = (_a = e.target) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : 'id');
-      dispatch({
-        type: 'UPDATE_DRAGGED_PATH',
-        path: childNode.path
-      });
-    };
+  const getDragStartHandler = childNode => e => {
+    var _a, _b;
+    e.stopPropagation();
+    // 🚨 data should be set in order to trigger onDrop event in "React".
+    e.dataTransfer.setData('text/plain', (_b = (_a = e.target) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : 'id');
+    dispatch({
+      type: 'UPDATE_DRAGGED_PATH',
+      path: childNode.path
+    });
   };
   /**
    *
    */
-  var getDragEndHandler = function getDragEndHandler(childNode) {
-    return function (e) {
-      e.preventDefault();
-      e.stopPropagation();
-      // clear drag data
-      e.dataTransfer.clearData();
-      // reset dragged path
-      dispatch({
-        type: 'UPDATE_DRAGGED_PATH',
-        path: null
-      });
-      // reset dropzone path
-      dispatch({
-        type: 'UPDATE_DROPZONE_PATH',
-        path: null
-      });
-    };
+  const getDragEndHandler = childNode => e => {
+    e.preventDefault();
+    e.stopPropagation();
+    // clear drag data
+    e.dataTransfer.clearData();
+    // reset dragged path
+    dispatch({
+      type: 'UPDATE_DRAGGED_PATH',
+      path: null
+    });
+    // reset dropzone path
+    dispatch({
+      type: 'UPDATE_DROPZONE_PATH',
+      path: null
+    });
   };
   /**
    *
    */
-  var getDragEnterHandler = function getDragEnterHandler(childNode) {
-    return function (e) {
-      e.preventDefault();
-      e.stopPropagation();
-      if (childNode.isDirectory) {
-        dispatch({
-          type: 'ADD_OPENED_DIRECTORY_LIST',
-          path: childNode.path
-        });
-      }
+  const getDragEnterHandler = childNode => e => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (childNode.isDirectory) {
       dispatch({
-        type: 'UPDATE_DROPZONE_PATH',
-        path: getTargetDirectoryPath(childNode)
+        type: 'ADD_OPENED_DIRECTORY_LIST',
+        path: childNode.path
       });
-    };
+    }
+    dispatch({
+      type: 'UPDATE_DROPZONE_PATH',
+      path: getTargetDirectoryPath(childNode)
+    });
   };
   /**
    * Prevent default behavior (Prevent file from being opened)
    * - ref: https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop#prevent_the_browser's_default_drag_behavior
    */
-  var getDragOverHandler = function getDragOverHandler(_) {
-    return function (e) {
-      e.preventDefault();
-      e.stopPropagation();
-    };
+  const getDragOverHandler = _ => e => {
+    e.preventDefault();
+    e.stopPropagation();
   };
   /**
    *
    */
-  var getDropHandler = function getDropHandler(_) {
-    return function (e) {
-      e.preventDefault();
-      e.stopPropagation();
-      var draggedPath = e.dataTransfer.getData('text').replace("".concat(uniqCompId, "-"), '');
-      // file drop
-      if (e.dataTransfer.files.length > 0 && dropzonePath !== null) {
-        handleFilesUpload({
-          files: e.dataTransfer.files,
-          path: dropzonePath
-        });
-        dispatch({
-          type: 'UPDATE_DRAGGED_PATH',
-          path: null
-        });
-        dispatch({
-          type: 'UPDATE_DROPZONE_PATH',
-          path: null
-        });
-      } else {
-        // file move
-        var dragFileTreeNode = fileTree.findTreeNode(draggedPath);
-        // file does not move. from a to a (the same path).
-        if (isMovingTheSamePath({
-          draggedPath: draggedPath,
-          dropzonePath: dropzonePath,
-          dragFileTreeNode: dragFileTreeNode
-        })) {
-          return;
-        }
-        if (dragFileTreeNode && dropzonePath !== null) {
-          if (dragFileTreeNode.isDirectory) {
-            onDirectoryMove && void onDirectoryMove({
-              currentFilename: dragFileTreeNode.path,
-              newPath: dropzonePath,
-              newName: dragFileTreeNode.title
-            });
-          } else {
-            onFileMove && void onFileMove({
-              currentFilename: dragFileTreeNode.path,
-              newPath: dropzonePath,
-              newName: dragFileTreeNode.title
-            });
-          }
+  const getDropHandler = _ => e => {
+    e.preventDefault();
+    e.stopPropagation();
+    const draggedPath = e.dataTransfer.getData('text').replace(`${uniqCompId}-`, '');
+    // file drop
+    if (e.dataTransfer.files.length > 0 && dropzonePath !== null) {
+      handleFilesUpload({
+        files: e.dataTransfer.files,
+        path: dropzonePath
+      });
+      dispatch({
+        type: 'UPDATE_DRAGGED_PATH',
+        path: null
+      });
+      dispatch({
+        type: 'UPDATE_DROPZONE_PATH',
+        path: null
+      });
+    } else {
+      // file move
+      const dragFileTreeNode = fileTree.findTreeNode(draggedPath);
+      // file does not move. from a to a (the same path).
+      if (isMovingTheSamePath({
+        draggedPath,
+        dropzonePath,
+        dragFileTreeNode
+      })) {
+        return;
+      }
+      if (dragFileTreeNode && dropzonePath !== null) {
+        if (dragFileTreeNode.isDirectory) {
+          onDirectoryMove && void onDirectoryMove({
+            currentFilename: dragFileTreeNode.path,
+            newPath: dropzonePath,
+            newName: dragFileTreeNode.title
+          });
+        } else {
+          onFileMove && void onFileMove({
+            currentFilename: dragFileTreeNode.path,
+            newPath: dropzonePath,
+            newName: dragFileTreeNode.title
+          });
         }
       }
-    };
+    }
   };
   //
   //
   //
-  return jsx(StyledTreeItems, {
+  return React.createElement(StyledTreeItems, {
     style: {
       backgroundColor: dropzonePath === '' ? base.color.primary7 : 'transparent'
-    },
-    children: node.children.filter(function (childNode) {
-      return isHiddenFilelistVisible ? true : !childNode.isHidden;
-    }).map(function (childNode, index) {
-      return jsxs(StyledTreeItem, {
-        id: "".concat(uniqCompId, "-").concat(childNode.path),
-        role: "treeitem",
-        "aria-selected": childNode.path === activePath,
-        "aria-label": childNode.title,
-        "aria-level": indent,
-        "aria-setsize": node.children.length,
-        "aria-posinset": index + 1,
-        "aria-expanded": childNode.isDirectory && childNode.expanded,
-        draggable: !newInput && !renameInputPath && childNode.isRemovable,
-        onDragStart: getDragStartHandler(childNode),
-        onDragEnd: getDragEndHandler(),
-        onDragEnter: getDragEnterHandler(childNode),
-        onDragOver: getDragOverHandler(),
-        onDrop: getDropHandler(),
-        style: {
-          backgroundColor: dropzonePath === childNode.path && !childNode.isEdit ? base.color.primary7 : ''
-        },
-        children: [jsx(FileTreeListItemContent, {
-          node: childNode,
-          parentNode: node,
-          indent: indent
-        }), childNode.children.length > 0 && childNode.expanded ? jsx(FileTreeListItems, {
-          node: childNode,
-          indent: indent
-        }) : null]
-      }, childNode.path);
-    })
-  });
+    }
+  }, node.children.filter(childNode => isHiddenFilelistVisible ? true : !childNode.isHidden).map((childNode, index) => React.createElement(StyledTreeItem, {
+    key: childNode.path,
+    id: `${uniqCompId}-${childNode.path}`,
+    role: "treeitem",
+    "aria-selected": childNode.path === activePath,
+    "aria-label": childNode.title,
+    "aria-level": indent,
+    "aria-setsize": node.children.length,
+    "aria-posinset": index + 1,
+    "aria-expanded": childNode.isDirectory && childNode.expanded,
+    draggable: !newInput && !renameInputPath && childNode.isRemovable,
+    onDragStart: getDragStartHandler(childNode),
+    onDragEnd: getDragEndHandler(),
+    onDragEnter: getDragEnterHandler(childNode),
+    onDragOver: getDragOverHandler(),
+    onDrop: getDropHandler(),
+    style: {
+      backgroundColor: dropzonePath === childNode.path && !childNode.isEdit ? base.color.primary7 : ''
+    }
+  }, React.createElement(FileTreeListItemContent, {
+    node: childNode,
+    parentNode: node,
+    indent: indent
+  }), childNode.children.length > 0 && childNode.expanded ? React.createElement(FileTreeListItems, {
+    node: childNode,
+    indent: indent
+  }) : null)));
 };
 
 export { FileTreeListItems as default };

package/es/components/shared/file-tree/FileTreeListItems.styled.js

@@ -1,9 +1,9 @@
 import styled from 'styled-components';
 
-var StyledTreeItems = styled.ul.withConfig({
+const StyledTreeItems = styled.ul.withConfig({
   componentId: "sc-1bh7pa8-0"
 })(["padding:0;margin:0;overflow:hidden;"]);
-var StyledTreeItem = styled.li.withConfig({
+const StyledTreeItem = styled.li.withConfig({
   componentId: "sc-1bh7pa8-1"
 })(["list-style:none;cursor:pointer;"]);
 

package/es/components/shared/file-tree/FileTreeToolbar.styled.js

@@ -1,7 +1,7 @@
 import { base } from '@elice/design-tokens';
 import styled from 'styled-components';
 
-var StyledFileTreeToolbar = styled.div.withConfig({
+const StyledFileTreeToolbar = styled.div.withConfig({
   componentId: "sc-1lmdwux-0"
 })(["flex:0 0 2.25rem;display:flex;align-items:center;padding:0.25rem 0.5rem;background-color:", ";"], base.color.navy8);
 

package/es/components/shared/file-tree/context/FileTreeContext.d.ts

@@ -121,7 +121,7 @@ interface DispatchContextType {
     onSetInitialOpenFile?: OnInitialOpenFileSet;
     onFilesUpload?: OnFilesUpload;
 }
-declare function FileTreeProvider({ theme, collapsed, activePath, allowToggleReadonly, allowToggleHidden, onCollapse, onActivePathChange, maxFileUploadSize, onFilesUpload, onFileAdd, onDirectoryAdd, onHiddenSet, onReadOnlySet, onFileDelete, onDirectoryDelete, onFileMove, onDirectoryMove, exerciseRoomFilelist, imageFilelist, readOnlyFilelist, hiddenFilelist, isHiddenFilelistVisible, children, }: FileTreeProviderProps): JSX.Element;
+declare function FileTreeProvider({ theme, collapsed, activePath, allowToggleReadonly, allowToggleHidden, onCollapse, onActivePathChange, maxFileUploadSize, onFilesUpload, onFileAdd, onDirectoryAdd, onHiddenSet, onReadOnlySet, onFileDelete, onDirectoryDelete, onFileMove, onDirectoryMove, exerciseRoomFilelist, imageFilelist, readOnlyFilelist, hiddenFilelist, isHiddenFilelistVisible, children, }: FileTreeProviderProps): React.JSX.Element;
 declare function useFileTreeState(): StateContextType;
 declare function useFileTreeDispatch(): DispatchContextType;
 export { FileTreeProvider, useFileTreeState, useFileTreeDispatch };

package/es/components/shared/file-tree/context/FileTreeContext.js

@@ -1,11 +1,9 @@
-import { slicedToArray as _slicedToArray, toConsumableArray as _toConsumableArray } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
-import { jsx } from 'react/jsx-runtime';
 import React from 'react';
 import 'filesize';
 import { create } from '../utils/fileTreeGenerator.js';
 
-var StateContext = React.createContext(undefined);
-var DispatchContext = React.createContext(undefined);
+const StateContext = React.createContext(undefined);
+const DispatchContext = React.createContext(undefined);
 StateContext.displayName = 'FileTreeStateContext';
 DispatchContext.displayName = 'FileTreeDispatchContext';
 function reducer(state, action) {
@@ -16,13 +14,11 @@ function reducer(state, action) {
       });
     case 'TOGGLE_OPENED_DIRECTORY_LIST':
       return Object.assign(Object.assign({}, state), {
-        openedDirectoryList: state.openedDirectoryList.includes(action.path) ? state.openedDirectoryList.filter(function (path) {
-          return path !== action.path;
-        }) : [].concat(_toConsumableArray(state.openedDirectoryList), [action.path])
+        openedDirectoryList: state.openedDirectoryList.includes(action.path) ? state.openedDirectoryList.filter(path => path !== action.path) : [...state.openedDirectoryList, action.path]
       });
     case 'ADD_OPENED_DIRECTORY_LIST':
       return Object.assign(Object.assign({}, state), {
-        openedDirectoryList: _toConsumableArray(new Set([].concat(_toConsumableArray(state.openedDirectoryList), [action.path])))
+        openedDirectoryList: [...new Set([...state.openedDirectoryList, action.path])]
       });
     case 'NEW_INPUT_OPEN':
       return Object.assign(Object.assign({}, state), {
@@ -30,7 +26,7 @@ function reducer(state, action) {
           type: action.newInput.type,
           path: action.newInput.path
         },
-        openedDirectoryList: [].concat(_toConsumableArray(state.openedDirectoryList), [action.newInput.path])
+        openedDirectoryList: [...state.openedDirectoryList, action.newInput.path]
       });
     case 'NEW_INPUT_CLOSE':
       return Object.assign(Object.assign({}, state), {
@@ -58,82 +54,70 @@ function reducer(state, action) {
       });
     case 'INITIAL_OPEN_FILELIST_UPDATE':
       return Object.assign(Object.assign({}, state), {
-        initialOpenFileListTemp: _toConsumableArray(action.initialOpenFilelist)
+        initialOpenFileListTemp: [...action.initialOpenFilelist]
       });
     case 'INITIAL_OPEN_FILELIST_ADD':
       return Object.assign(Object.assign({}, state), {
-        initialOpenFileListTemp: [].concat(_toConsumableArray(state.initialOpenFileListTemp), [action.path])
+        initialOpenFileListTemp: [...state.initialOpenFileListTemp, action.path]
       });
     case 'INITIAL_OPEN_FILELIST_REMOVE':
       return Object.assign(Object.assign({}, state), {
-        initialOpenFileListTemp: state.initialOpenFileListTemp.filter(function (path) {
-          return path !== action.path;
-        })
+        initialOpenFileListTemp: state.initialOpenFileListTemp.filter(path => path !== action.path)
       });
     default:
       return state;
   }
 }
-var init = function init(state) {
-  return Object.assign({}, state);
-};
-function FileTreeProvider(_ref) {
-  var _ref$theme = _ref.theme,
-    theme = _ref$theme === void 0 ? 'dark' : _ref$theme,
-    _ref$collapsed = _ref.collapsed,
-    collapsed = _ref$collapsed === void 0 ? false : _ref$collapsed,
-    activePath = _ref.activePath,
-    _ref$allowToggleReado = _ref.allowToggleReadonly,
-    allowToggleReadonly = _ref$allowToggleReado === void 0 ? false : _ref$allowToggleReado,
-    _ref$allowToggleHidde = _ref.allowToggleHidden,
-    allowToggleHidden = _ref$allowToggleHidde === void 0 ? false : _ref$allowToggleHidde,
-    onCollapse = _ref.onCollapse,
-    onActivePathChange = _ref.onActivePathChange,
-    _ref$maxFileUploadSiz = _ref.maxFileUploadSize,
-    maxFileUploadSize = _ref$maxFileUploadSiz === void 0 ? 50 : _ref$maxFileUploadSiz,
-    onFilesUpload = _ref.onFilesUpload,
-    onFileAdd = _ref.onFileAdd,
-    onDirectoryAdd = _ref.onDirectoryAdd,
-    onHiddenSet = _ref.onHiddenSet,
-    onReadOnlySet = _ref.onReadOnlySet,
-    onFileDelete = _ref.onFileDelete,
-    onDirectoryDelete = _ref.onDirectoryDelete,
-    onFileMove = _ref.onFileMove,
-    onDirectoryMove = _ref.onDirectoryMove,
-    exerciseRoomFilelist = _ref.exerciseRoomFilelist,
-    imageFilelist = _ref.imageFilelist,
-    readOnlyFilelist = _ref.readOnlyFilelist,
-    hiddenFilelist = _ref.hiddenFilelist,
-    _ref$isHiddenFilelist = _ref.isHiddenFilelistVisible,
-    isHiddenFilelistVisible = _ref$isHiddenFilelist === void 0 ? false : _ref$isHiddenFilelist,
-    children = _ref.children;
-  var _React$useReducer = React.useReducer(reducer, {
-      mode: 'default',
-      maxFileUploadSize: maxFileUploadSize,
-      draggedPath: null,
-      dropzonePath: null,
-      openedDirectoryList: [],
-      initialOpenFileListTemp: [],
-      theme: theme,
-      fileTree: create({
-        exerciseRoomFilelist: exerciseRoomFilelist,
-        imageFilelist: imageFilelist,
-        hiddenFilelist: hiddenFilelist,
-        readOnlyFilelist: readOnlyFilelist,
-        openedDirectoryList: []
-      })
-    }, init),
-    _React$useReducer2 = _slicedToArray(_React$useReducer, 2),
-    state = _React$useReducer2[0],
-    dispatch = _React$useReducer2[1];
-  React.useEffect(function () {
+const init = state => Object.assign({}, state);
+function FileTreeProvider({
+  theme = 'dark',
+  collapsed = false,
+  activePath,
+  allowToggleReadonly = false,
+  allowToggleHidden = false,
+  onCollapse,
+  onActivePathChange,
+  maxFileUploadSize = 50,
+  onFilesUpload,
+  onFileAdd,
+  onDirectoryAdd,
+  onHiddenSet,
+  onReadOnlySet,
+  onFileDelete,
+  onDirectoryDelete,
+  onFileMove,
+  onDirectoryMove,
+  exerciseRoomFilelist,
+  imageFilelist,
+  readOnlyFilelist,
+  hiddenFilelist,
+  isHiddenFilelistVisible = false,
+  children
+}) {
+  const [state, dispatch] = React.useReducer(reducer, {
+    mode: 'default',
+    maxFileUploadSize,
+    draggedPath: null,
+    dropzonePath: null,
+    openedDirectoryList: [],
+    initialOpenFileListTemp: [],
+    theme,
+    fileTree: create({
+      exerciseRoomFilelist,
+      imageFilelist,
+      hiddenFilelist,
+      readOnlyFilelist,
+      openedDirectoryList: []
+    })
+  }, init);
+  React.useEffect(() => {
     dispatch({
       type: 'UPDATE_FILE_TREE',
       fileTree: create({
-        exerciseRoomFilelist: exerciseRoomFilelist,
-        imageFilelist: imageFilelist,
-        hiddenFilelist: hiddenFilelist,
-        readOnlyFilelist: readOnlyFilelist,
+        exerciseRoomFilelist,
+        imageFilelist,
+        hiddenFilelist,
+        readOnlyFilelist,
         initialOpenFilelist: state.initialOpenFileListTemp,
         openedDirectoryList: state.openedDirectoryList,
         newInput: state.newInput,
@@ -143,43 +127,41 @@ function FileTreeProvider(_ref) {
   }, [exerciseRoomFilelist, imageFilelist, hiddenFilelist, readOnlyFilelist, state.initialOpenFileListTemp, state.openedDirectoryList, state.newInput, state.renameInputPath]);
   return (
     // StateContext and DispatchContext are seperated on purpose in order to optimize rendering performance.
-    jsx(StateContext.Provider, {
+    React.createElement(StateContext.Provider, {
       value: Object.assign(Object.assign({}, state), {
-        collapsed: collapsed,
-        activePath: activePath,
-        allowToggleReadonly: allowToggleReadonly,
-        allowToggleHidden: allowToggleHidden,
-        isHiddenFilelistVisible: isHiddenFilelistVisible
-      }),
-      children: jsx(DispatchContext.Provider, {
-        value: {
-          dispatch: dispatch,
-          onCollapse: onCollapse,
-          onActivePathChange: onActivePathChange,
-          onFileAdd: onFileAdd,
-          onDirectoryAdd: onDirectoryAdd,
-          onHiddenSet: onHiddenSet,
-          onReadOnlySet: onReadOnlySet,
-          onFileDelete: onFileDelete,
-          onDirectoryDelete: onDirectoryDelete,
-          onFileMove: onFileMove,
-          onDirectoryMove: onDirectoryMove,
-          onFilesUpload: onFilesUpload
-        },
-        children: children
+        collapsed,
+        activePath,
+        allowToggleReadonly,
+        allowToggleHidden,
+        isHiddenFilelistVisible
       })
-    })
+    }, React.createElement(DispatchContext.Provider, {
+      value: {
+        dispatch,
+        onCollapse,
+        onActivePathChange,
+        onFileAdd,
+        onDirectoryAdd,
+        onHiddenSet,
+        onReadOnlySet,
+        onFileDelete,
+        onDirectoryDelete,
+        onFileMove,
+        onDirectoryMove,
+        onFilesUpload
+      }
+    }, children))
   );
 }
 function useFileTreeState() {
-  var context = React.useContext(StateContext);
+  const context = React.useContext(StateContext);
   if (context === undefined) {
     throw new Error('useFileTreeState must be used within a FileTreeProvider');
   }
   return context;
 }
 function useFileTreeDispatch() {
-  var context = React.useContext(DispatchContext);
+  const context = React.useContext(DispatchContext);
   if (context === undefined) {
     throw new Error('useFileTreeDispatch must be used within a FileTreeProvider');
   }