@elice/material-exercise 1.231212.0 → 1.231228.0

package/cjs/components/shared/file-icon/FileIcon.js

@@ -7,41 +7,35 @@ var React = require('react');
 var blocks = require('@elice/blocks');
 var vscodeIconsJs = require('vscode-icons-js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
-var ICON_ASSET_BASE_URL = 'https://static.elice.io/code-editor/icons';
-var createIconUrl = function createIconUrl(svgFilename) {
-  return "".concat(ICON_ASSET_BASE_URL, "/").concat(svgFilename.toLowerCase());
+const ICON_ASSET_BASE_URL = 'https://static.elice.io/code-editor/icons';
+const createIconUrl = svgFilename => {
+  return `${ICON_ASSET_BASE_URL}/${svgFilename.toLowerCase()}`;
 };
-var FileIcon = function FileIcon(_a) {
-  var filename = _a.filename,
-    _a$directory = _a.directory,
-    directory = _a$directory === void 0 ? false : _a$directory,
-    _a$expanded = _a.expanded,
-    expanded = _a$expanded === void 0 ? false : _a$expanded,
-    _a$width = _a.width,
-    width = _a$width === void 0 ? '1rem' : _a$width,
-    _a$height = _a.height,
-    height = _a$height === void 0 ? '1rem' : _a$height,
+const FileIcon = _a => {
+  var {
+      filename,
+      directory = false,
+      expanded = false,
+      width = '1rem',
+      height = '1rem'
+    } = _a,
     props = tslib.__rest(_a, ["filename", "directory", "expanded", "width", "height"]);
-  var src = React__default["default"].useMemo(function () {
+  const src = React.useMemo(() => {
     if (directory) {
-      var suffix = expanded ? '_opened' : '';
-      return createIconUrl("default_folder".concat(suffix, ".svg"));
+      const suffix = expanded ? '_opened' : '';
+      return createIconUrl(`default_folder${suffix}.svg`);
     }
     return createIconUrl(vscodeIconsJs.getIconForFile(filename) || 'default_file.svg');
   }, [filename, directory, expanded]);
   //
   //
   //
-  return React__default["default"].createElement(blocks.Image, Object.assign({}, props, {
+  return React.createElement(blocks.Image, Object.assign({}, props, {
     src: src,
-    alt: "icon for ".concat(filename),
+    alt: `icon for ${filename}`,
     width: width,
     height: height
   }));
 };
 
-exports["default"] = FileIcon;
+exports.default = FileIcon;

package/cjs/components/shared/file-tabs/FileTab.js

@@ -8,29 +8,23 @@ var icons = require('@elice/icons');
 var FileIcon = require('../file-icon/FileIcon.js');
 var FileTab_styled = require('./FileTab.styled.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
-var EMPTY_CHUNKS = [];
-var FileTab = function FileTab(_a) {
-  var fullname = _a.fullname,
-    _a$chunks = _a.chunks,
-    chunks = _a$chunks === void 0 ? EMPTY_CHUNKS : _a$chunks,
-    filename = _a.filename,
-    _a$isFilenameDuplicat = _a.isFilenameDuplicated,
-    isFilenameDuplicated = _a$isFilenameDuplicat === void 0 ? false : _a$isFilenameDuplicat,
-    _a$active = _a.active,
-    active = _a$active === void 0 ? false : _a$active,
-    _a$hovered = _a.hovered,
-    hovered = _a$hovered === void 0 ? false : _a$hovered,
-    onClose = _a.onClose,
+const EMPTY_CHUNKS = [];
+const FileTab = _a => {
+  var {
+      fullname,
+      chunks = EMPTY_CHUNKS,
+      filename,
+      isFilenameDuplicated = false,
+      active = false,
+      hovered = false,
+      onClose
+    } = _a,
     eventListeners = tslib.__rest(_a, ["fullname", "chunks", "filename", "isFilenameDuplicated", "active", "hovered", "onClose"]);
-  var tabElRef = React__default["default"].useRef(null);
+  const tabElRef = React.useRef(null);
   //
   // Scroll into view.
   //
-  React__default["default"].useEffect(function () {
+  React.useEffect(() => {
     var _a;
     if (active) {
       (_a = tabElRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
@@ -41,8 +35,8 @@ var FileTab = function FileTab(_a) {
   /**
    * File icon
    */
-  var renderTabFileIcon = function renderTabFileIcon() {
-    return React__default["default"].createElement(FileIcon["default"], {
+  const renderTabFileIcon = () => {
+    return React.createElement(FileIcon.default, {
       filename: filename,
       width: "1rem",
       height: "1rem"
@@ -51,8 +45,8 @@ var FileTab = function FileTab(_a) {
   /**
    * File name
    */
-  var renderTabFileName = function renderTabFileName() {
-    return React__default["default"].createElement(FileTab_styled.StyledTabLabelFilename, {
+  const renderTabFileName = () => {
+    return React.createElement(FileTab_styled.StyledTabLabelFilename, {
       size: "tiny",
       noWrap: true
     }, filename);
@@ -60,34 +54,34 @@ var FileTab = function FileTab(_a) {
   /**
    * File directory name
    */
-  var renderTabFileDirName = function renderTabFileDirName() {
+  const renderTabFileDirName = () => {
     if (!isFilenameDuplicated) {
       return null;
     }
-    var parentDir = chunks.slice().pop();
-    return React__default["default"].createElement(FileTab_styled.StyledTabLabelDirname, {
+    const parentDir = chunks.slice().pop();
+    return React.createElement(FileTab_styled.StyledTabLabelDirname, {
       role: "gray5",
       size: "tiny",
       noWrap: true
-    }, parentDir ? ".../".concat(parentDir) : '/');
+    }, parentDir ? `.../${parentDir}` : '/');
   };
   /**
    * File
    */
-  var renderTabFile = function renderTabFile() {
-    return React__default["default"].createElement(FileTab_styled.StyledTabLabel, null, renderTabFileIcon(), renderTabFileName(), renderTabFileDirName());
+  const renderTabFile = () => {
+    return React.createElement(FileTab_styled.StyledTabLabel, null, renderTabFileIcon(), renderTabFileName(), renderTabFileDirName());
   };
   /**
    * Tab close icon
    */
-  var renderTabCloseButton = function renderTabCloseButton() {
-    return React__default["default"].createElement(FileTab_styled.StyledTabCloseButton, {
+  const renderTabCloseButton = () => {
+    return React.createElement(FileTab_styled.StyledTabCloseButton, {
       icon: icons.eilMathsignMultiplyBasic,
       role: "gray5",
       size: "nano",
       transparent: true,
       border: false,
-      onClick: function onClick(e) {
+      onClick: e => {
         e.stopPropagation();
         if (typeof onClose === 'function') {
           onClose();
@@ -98,17 +92,17 @@ var FileTab = function FileTab(_a) {
   //
   //
   //
-  return React__default["default"].createElement(FileTab_styled.StyledTab, Object.assign({}, eventListeners, {
+  return React.createElement(FileTab_styled.StyledTab, Object.assign({}, eventListeners, {
     active: active,
     hovered: hovered,
     draggable: true,
     role: "tab",
     "aria-label": filename,
     "aria-selected": active,
-    title: "~/".concat(fullname),
+    title: `~/${fullname}`,
     tabIndex: -1,
     ref: tabElRef
-  }), React__default["default"].createElement(FileTab_styled.StyledTabContent, null, renderTabFile(), renderTabCloseButton()), React__default["default"].createElement(FileTab_styled.StyledTabActiveBorder, null));
+  }), React.createElement(FileTab_styled.StyledTabContent, null, renderTabFile(), renderTabCloseButton()), React.createElement(FileTab_styled.StyledTabActiveBorder, null));
 };
 
-exports["default"] = FileTab;
+exports.default = FileTab;

package/cjs/components/shared/file-tabs/FileTab.styled.js

@@ -1,51 +1,41 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var blocks = require('@elice/blocks');
 var designTokens = require('@elice/design-tokens');
 var styled = require('styled-components');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
-var TAB_MIN_WIDTH = '7rem';
-var TAB_VERTICAL_BORDER_WIDTH = '1.5px';
-var TAB_BACKGROUND_COLOR = designTokens.base.color.navy8;
-var TAB_ACTIVE_BACKGROUND_COLOR = designTokens.base.color.navy9;
-var TAB_HOVERED_BACKGROUND_COLOR = designTokens.base.color.navy7;
+const TAB_MIN_WIDTH = '7rem';
+const TAB_VERTICAL_BORDER_WIDTH = '1.5px';
+const TAB_BACKGROUND_COLOR = designTokens.base.color.navy8;
+const TAB_ACTIVE_BACKGROUND_COLOR = designTokens.base.color.navy9;
+const TAB_HOVERED_BACKGROUND_COLOR = designTokens.base.color.navy7;
 // ========== Tab label ==========
-var StyledTabLabel = styled__default["default"].div.withConfig({
+const StyledTabLabel = styled.div.withConfig({
   componentId: "sc-1pe3776-0"
 })(["flex:1;display:flex;align-items:center;overflow:hidden;pointer-events:none;user-select:none;& > *{margin-right:0.5rem;}"]);
-var StyledTabLabelFilename = styled__default["default"](blocks.Text).withConfig({
+const StyledTabLabelFilename = styled(blocks.Text).withConfig({
   componentId: "sc-1pe3776-1"
 })(["color:", ";font-weight:500;"], designTokens.base.color.gray4);
-var StyledTabLabelDirname = styled__default["default"](blocks.Text).withConfig({
+const StyledTabLabelDirname = styled(blocks.Text).withConfig({
   componentId: "sc-1pe3776-2"
 })(["font-weight:500;"]);
-var StyledTabCloseButton = styled__default["default"](blocks.IconButton).withConfig({
+const StyledTabCloseButton = styled(blocks.IconButton).withConfig({
   componentId: "sc-1pe3776-3"
 })(["flex:0 0 auto;margin-right:0.25rem !important;opacity:0;transition:opacity 150ms ease-in-out;"]);
 // ========== Tab content ==========
-var StyledTabContent = styled__default["default"].div.withConfig({
+const StyledTabContent = styled.div.withConfig({
   componentId: "sc-1pe3776-4"
 })(["display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding-left:0.5rem;height:calc(100% - ", ");&:hover{", "{color:", ";}", "{opacity:1;}}"], TAB_VERTICAL_BORDER_WIDTH, StyledTabLabelFilename, designTokens.base.color.gray3, StyledTabCloseButton);
 // ========== Tab active border ==========
-var StyledTabActiveBorder = styled__default["default"].div.withConfig({
+const StyledTabActiveBorder = styled.div.withConfig({
   componentId: "sc-1pe3776-5"
 })(["height:", ";background-color:", ";opacity:0;"], TAB_VERTICAL_BORDER_WIDTH, designTokens.base.color.primary5);
 // ========== Tab ==========
-var cssTabActive = styled.css(["background-color:", ";", "{color:", ";}", "{opacity:1;}", "{opacity:1;}"], TAB_ACTIVE_BACKGROUND_COLOR, StyledTabLabelFilename, designTokens.base.color.gray3, StyledTabCloseButton, StyledTabActiveBorder);
-var cssTabHovered = styled.css(["background-color:", ";", "{color:", ";}"], TAB_HOVERED_BACKGROUND_COLOR, StyledTabLabelFilename, designTokens.base.color.gray3);
-var StyledTab = styled__default["default"].div.withConfig({
+const cssTabActive = styled.css(["background-color:", ";", "{color:", ";}", "{opacity:1;}", "{opacity:1;}"], TAB_ACTIVE_BACKGROUND_COLOR, StyledTabLabelFilename, designTokens.base.color.gray3, StyledTabCloseButton, StyledTabActiveBorder);
+const cssTabHovered = styled.css(["background-color:", ";", "{color:", ";}"], TAB_HOVERED_BACKGROUND_COLOR, StyledTabLabelFilename, designTokens.base.color.gray3);
+const StyledTab = styled.div.withConfig({
   componentId: "sc-1pe3776-6"
-})(["padding-top:", ";width:", ";min-width:fit-content;height:100%;background-color:", ";border-right:1px solid ", ";cursor:pointer;", " ", ""], TAB_VERTICAL_BORDER_WIDTH, TAB_MIN_WIDTH, TAB_BACKGROUND_COLOR, designTokens.base.color.navy7, function (props) {
-  return props.active && cssTabActive;
-}, function (props) {
-  return props.hovered && cssTabHovered;
-});
+})(["padding-top:", ";width:", ";min-width:fit-content;height:100%;background-color:", ";border-right:1px solid ", ";cursor:pointer;", " ", ""], TAB_VERTICAL_BORDER_WIDTH, TAB_MIN_WIDTH, TAB_BACKGROUND_COLOR, designTokens.base.color.navy7, props => props.active && cssTabActive, props => props.hovered && cssTabHovered);
 
 exports.StyledTab = StyledTab;
 exports.StyledTabActiveBorder = StyledTabActiveBorder;

package/cjs/components/shared/file-tabs/FileTabs.js

@@ -2,76 +2,57 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 var throttle = require('lodash/throttle');
 var FileTab = require('./FileTab.js');
 var util = require('./util.js');
 var FileTabs_styled = require('./FileTabs.styled.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var throttle__default = /*#__PURE__*/_interopDefaultLegacy(throttle);
-
-var FileTabs = function FileTabs(_ref) {
-  var openedTabs = _ref.openedTabs,
-    activeTab = _ref.activeTab,
-    onSelectTab = _ref.onSelectTab,
-    onCloseTab = _ref.onCloseTab,
-    onTabOrderChange = _ref.onTabOrderChange;
-  var _React$useState = React__default["default"].useState(null),
-    _React$useState2 = _rollupPluginBabelHelpers.slicedToArray(_React$useState, 2),
-    curDraggingTabIndex = _React$useState2[0],
-    setCurDraggingTabIndex = _React$useState2[1];
-  var _React$useState3 = React__default["default"].useState(null),
-    _React$useState4 = _rollupPluginBabelHelpers.slicedToArray(_React$useState3, 2),
-    curHoveredTabIndex = _React$useState4[0],
-    setCurHoveredTabIndex = _React$useState4[1];
+const FileTabs = ({
+  openedTabs,
+  activeTab,
+  onSelectTab,
+  onCloseTab,
+  onTabOrderChange
+}) => {
+  const [curDraggingTabIndex, setCurDraggingTabIndex] = React.useState(null);
+  const [curHoveredTabIndex, setCurHoveredTabIndex] = React.useState(null);
   /**
    * Tab props.
    */
-  var tabs = React__default["default"].useMemo(function () {
-    return util.getTabProps(openedTabs);
-  }, [openedTabs]);
+  const tabs = React.useMemo(() => util.getTabProps(openedTabs), [openedTabs]);
   /**
    * Reset state.
    */
-  var reset = function reset() {
+  const reset = () => {
     setCurDraggingTabIndex(null);
     setCurHoveredTabIndex(null);
   };
   /**
    * Throttled `setCurHoveredTabIndex`.
    */
-  var setThrottledCurHoveredTabIndex = React__default["default"].useMemo(function () {
-    return throttle__default["default"](setCurHoveredTabIndex, 100, {
-      leading: true,
-      trailing: false
-    });
-  }, []);
+  const setThrottledCurHoveredTabIndex = React.useMemo(() => throttle(setCurHoveredTabIndex, 100, {
+    leading: true,
+    trailing: false
+  }), []);
   /**
    * Handle tab drag start.
    */
-  var getTabDragStartHandler = React__default["default"].useCallback(function (index) {
-    return function (_) {
-      setCurDraggingTabIndex(index);
-    };
+  const getTabDragStartHandler = React.useCallback(index => _ => {
+    setCurDraggingTabIndex(index);
   }, []);
   /**
    * Handle tab drag over.
    */
-  var getTabDragOverHandler = React__default["default"].useCallback(function (index) {
-    return function (e) {
-      e.preventDefault();
-      e.stopPropagation();
-      setThrottledCurHoveredTabIndex(index);
-    };
+  const getTabDragOverHandler = React.useCallback(index => e => {
+    e.preventDefault();
+    e.stopPropagation();
+    setThrottledCurHoveredTabIndex(index);
   }, [setThrottledCurHoveredTabIndex]);
   /**
    * Handle tab drop.
    */
-  var handleTabDrop = function handleTabDrop(e) {
+  const handleTabDrop = e => {
     e.preventDefault();
     e.stopPropagation();
     if (curDraggingTabIndex !== null && curHoveredTabIndex !== null && typeof onTabOrderChange === 'function') {
@@ -82,30 +63,24 @@ var FileTabs = function FileTabs(_ref) {
   /**
    * Tabs.
    */
-  var renderTabs = function renderTabs() {
-    return tabs.map(function (tab, index) {
-      return React__default["default"].createElement(FileTab["default"], Object.assign({}, tab, {
-        key: tab.fullname,
-        active: activeTab === tab.fullname,
-        hovered: curHoveredTabIndex === index,
-        onClick: function onClick() {
-          return onSelectTab(tab.fullname);
-        },
-        onClose: function onClose() {
-          return onCloseTab(tab.fullname);
-        },
-        onDragStart: getTabDragStartHandler(index),
-        onDragOver: getTabDragOverHandler(index),
-        onDragEnd: reset,
-        onDrop: handleTabDrop
-      }));
-    });
+  const renderTabs = () => {
+    return tabs.map((tab, index) => React.createElement(FileTab.default, Object.assign({}, tab, {
+      key: tab.fullname,
+      active: activeTab === tab.fullname,
+      hovered: curHoveredTabIndex === index,
+      onClick: () => onSelectTab(tab.fullname),
+      onClose: () => onCloseTab(tab.fullname),
+      onDragStart: getTabDragStartHandler(index),
+      onDragOver: getTabDragOverHandler(index),
+      onDragEnd: reset,
+      onDrop: handleTabDrop
+    })));
   };
   /**
    * Tab drop zone.
    */
-  var renderTabsDropZone = function renderTabsDropZone() {
-    return React__default["default"].createElement(FileTabs_styled.StyledTabsDropZone, {
+  const renderTabsDropZone = () => {
+    return React.createElement(FileTabs_styled.StyledTabsDropZone, {
       onDragOver: getTabDragOverHandler(tabs.length - 1),
       onDrop: handleTabDrop
     });
@@ -113,9 +88,9 @@ var FileTabs = function FileTabs(_ref) {
   //
   //
   //
-  return React__default["default"].createElement(FileTabs_styled.StyledTabs, {
+  return React.createElement(FileTabs_styled.StyledTabs, {
     role: "tablist"
   }, renderTabs(), renderTabsDropZone());
 };
 
-exports["default"] = FileTabs;
+exports.default = FileTabs;

package/cjs/components/shared/file-tabs/FileTabs.styled.js

@@ -1,23 +1,17 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var designTokens = require('@elice/design-tokens');
 var styled = require('styled-components');
 var stylesheets = require('../../../constants/stylesheets.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
-var StyledTabs = styled__default["default"].div.withConfig({
+const StyledTabs = styled.div.withConfig({
   componentId: "sc-ifwvzh-0"
 })(["display:flex;align-items:flex-end;box-sizing:border-box;flex-direction:row;height:2.25rem;font-family:inherit;background:", ";overflow-x:overlay;overflow-y:hidden;scrollbar-width:none;", ""], designTokens.base.color.navy8, stylesheets.getMaterialScrollBarCss({
   height: '2px',
   borderRadius: '2px',
   hideable: true
 }));
-var StyledTabsDropZone = styled__default["default"].div.withConfig({
+const StyledTabsDropZone = styled.div.withConfig({
   componentId: "sc-ifwvzh-1"
 })(["flex:1;height:100%;background-color:transparent;"]);
 

package/cjs/components/shared/file-tabs/util.js

@@ -1,41 +1,26 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
-
 /**
  * Get file tab props.
  */
 function getTabProps(paths) {
-  var tabs = [];
+  const tabs = [];
   // parse file paths
-  var _iterator = _rollupPluginBabelHelpers.createForOfIteratorHelper(paths),
-    _step;
-  try {
-    for (_iterator.s(); !(_step = _iterator.n()).done;) {
-      var path = _step.value;
-      var chunks = path.split('/');
-      var filename = chunks.pop();
-      if (filename) {
-        tabs.push({
-          fullname: path,
-          chunks: chunks,
-          filename: filename,
-          isFilenameDuplicated: false
-        });
-      }
+  for (const path of paths) {
+    const chunks = path.split('/');
+    const filename = chunks.pop();
+    if (filename) {
+      tabs.push({
+        fullname: path,
+        chunks,
+        filename,
+        isFilenameDuplicated: false
+      });
     }
-    // check filename duplication
-  } catch (err) {
-    _iterator.e(err);
-  } finally {
-    _iterator.f();
   }
-  tabs.forEach(function (thisTab) {
-    thisTab.isFilenameDuplicated = tabs.filter(function (thatTab) {
-      return thisTab.filename === thatTab.filename;
-    }).length > 1;
+  // check filename duplication
+  tabs.forEach(thisTab => {
+    thisTab.isFilenameDuplicated = tabs.filter(thatTab => thisTab.filename === thatTab.filename).length > 1;
   });
   return tabs;
 }

package/cjs/components/shared/file-tree/FileTree.js

@@ -14,32 +14,27 @@ var FileTreeConfig = require('./FileTreeConfig.js');
 var FileTreeList = require('./FileTreeList.js');
 var FileTreeToolbar = require('./FileTreeToolbar.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
-var StyledFileTreeWrapper = styled__default["default"].div.withConfig({
+const StyledFileTreeWrapper = styled.div.withConfig({
   componentId: "sc-6ext2i-0"
 })(["display:flex;flex-direction:column;user-select:none;overflow:hidden;"]);
-var StyledLoading = styled__default["default"].div.withConfig({
+const StyledLoading = styled.div.withConfig({
   componentId: "sc-6ext2i-1"
 })(["position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:", ";opacity:0.5;width:100%;height:100%;display:flex;align-items:center;justify-content:center;z-index:100;"], designTokens.base.color.navy7);
-var FileTree = function FileTree(props) {
-  return React__default["default"].createElement(materialSharedUtils.MaterialIntlProvider, {
+const FileTree = props => {
+  return React.createElement(materialSharedUtils.MaterialIntlProvider, {
     locale: props.locale,
     phrases: {
-      en: en["default"],
-      ko: ko["default"]
+      en: en.default,
+      ko: ko.default
     }
-  }, React__default["default"].createElement(FileTreeContext.FileTreeProvider, Object.assign({}, props), React__default["default"].createElement(StyledFileTreeWrapper, {
+  }, React.createElement(FileTreeContext.FileTreeProvider, Object.assign({}, props), React.createElement(StyledFileTreeWrapper, {
     style: props.style
-  }, props.loading ? React__default["default"].createElement(StyledLoading, null, React__default["default"].createElement(blocks.Spinner, null)) : null, props.children)));
+  }, props.loading ? React.createElement(StyledLoading, null, React.createElement(blocks.Spinner, null)) : null, props.children)));
 };
 var FileTree$1 = Object.assign(FileTree, {
-  Toolbar: FileTreeToolbar["default"],
-  List: FileTreeList["default"],
-  Config: FileTreeConfig["default"]
+  Toolbar: FileTreeToolbar.default,
+  List: FileTreeList.default,
+  Config: FileTreeConfig.default
 });
 
-exports["default"] = FileTree$1;
+exports.default = FileTree$1;

package/cjs/components/shared/file-tree/FileTreeConfig.js

@@ -9,41 +9,38 @@ var classnames = require('classnames');
 var styled = require('styled-components');
 var FileTreeContext = require('./context/FileTreeContext.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
-var StyledFileTreeConfig = styled__default["default"].div.withConfig({
+const StyledFileTreeConfig = styled.div.withConfig({
   componentId: "sc-1dxe3z0-0"
 })(["background-color:", ";padding:1rem;"], designTokens.base.color.navy8);
-var FileTreeConfig = React.forwardRef(function (_ref, ref) {
-  var className = _ref.className,
-    style = _ref.style,
-    onInitialOpenFileListChange = _ref.onInitialOpenFileListChange,
-    initialOpenFilelist = _ref.initialOpenFilelist;
-  var _useFileTreeState = FileTreeContext.useFileTreeState(),
-    mode = _useFileTreeState.mode,
-    initialOpenFileListTemp = _useFileTreeState.initialOpenFileListTemp;
-  var _useFileTreeDispatch = FileTreeContext.useFileTreeDispatch(),
-    dispatch = _useFileTreeDispatch.dispatch;
-  React__default["default"].useEffect(function () {
+const FileTreeConfig = React.forwardRef(({
+  className,
+  style,
+  onInitialOpenFileListChange,
+  initialOpenFilelist
+}, ref) => {
+  const {
+    mode,
+    initialOpenFileListTemp
+  } = FileTreeContext.useFileTreeState();
+  const {
+    dispatch
+  } = FileTreeContext.useFileTreeDispatch();
+  React.useEffect(() => {
     dispatch({
       type: 'INITIAL_OPEN_FILELIST_UPDATE',
-      initialOpenFilelist: initialOpenFilelist
+      initialOpenFilelist
     });
   }, [dispatch, initialOpenFilelist]);
-  return React__default["default"].createElement(StyledFileTreeConfig, {
-    className: classnames__default["default"]('em-file-tree__config', className),
+  return React.createElement(StyledFileTreeConfig, {
+    className: classnames('em-file-tree__config', className),
     ref: ref,
     style: Object.assign({}, style)
-  }, React__default["default"].createElement(blocks.Button, {
+  }, React.createElement(blocks.Button, {
     block: true,
     size: "small",
     role: "white",
     transparent: true,
-    onClick: function onClick() {
+    onClick: () => {
       if ([
       // when mode changes from 'checkbox' to 'default'
       mode === 'checkbox',
@@ -58,8 +55,8 @@ var FileTreeConfig = React.forwardRef(function (_ref, ref) {
         mode: mode === 'checkbox' ? 'default' : 'checkbox'
       });
     }
-  }, mode === 'default' ? "Initial Open Files(".concat(initialOpenFileListTemp.length, ")") : "Settings (".concat(initialOpenFileListTemp.length, ")")));
+  }, mode === 'default' ? `Initial Open Files(${initialOpenFileListTemp.length})` : `Settings (${initialOpenFileListTemp.length})`));
 });
 var FileTreeConfig$1 = FileTreeConfig;
 
-exports["default"] = FileTreeConfig$1;
+exports.default = FileTreeConfig$1;