@elice/material-exercise 1.230325.0 → 1.230418.0

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

@@ -1,5 +1,7 @@
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 var tslib = require('tslib');
 var React = require('react');
 var icons = require('@elice/icons');
@@ -10,27 +12,26 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-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"]);
-
-  const tabElRef = React__default["default"].useRef(null); //
+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,
+    eventListeners = tslib.__rest(_a, ["fullname", "chunks", "filename", "isFilenameDuplicated", "active", "hovered", "onClose"]);
+  var tabElRef = React__default["default"].useRef(null);
+  //
   // Scroll into view.
   //
-
-  React__default["default"].useEffect(() => {
+  React__default["default"].useEffect(function () {
     var _a;
-
     if (active) {
       (_a = tabElRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
         behavior: 'smooth'
@@ -40,9 +41,8 @@ const FileTab = _a => {
   /**
    * File icon
    */
-
-  const renderTabFileIcon = () => {
-    return React__default["default"].createElement(FileIcon, {
+  var renderTabFileIcon = function renderTabFileIcon() {
+    return React__default["default"].createElement(FileIcon["default"], {
       filename: filename,
       width: "1rem",
       height: "1rem"
@@ -51,9 +51,7 @@ const FileTab = _a => {
   /**
    * File name
    */
-
-
-  const renderTabFileName = () => {
+  var renderTabFileName = function renderTabFileName() {
     return React__default["default"].createElement(FileTab_styled.StyledTabLabelFilename, {
       size: "tiny",
       noWrap: true
@@ -62,53 +60,44 @@ const FileTab = _a => {
   /**
    * File directory name
    */
-
-
-  const renderTabFileDirName = () => {
+  var renderTabFileDirName = function renderTabFileDirName() {
     if (!isFilenameDuplicated) {
       return null;
     }
-
-    const parentDir = chunks.slice().pop();
+    var parentDir = chunks.slice().pop();
     return React__default["default"].createElement(FileTab_styled.StyledTabLabelDirname, {
       role: "gray5",
       size: "tiny",
       noWrap: true
-    }, parentDir ? `.../${parentDir}` : '/');
+    }, parentDir ? ".../".concat(parentDir) : '/');
   };
   /**
    * File
    */
-
-
-  const renderTabFile = () => {
+  var renderTabFile = function renderTabFile() {
     return React__default["default"].createElement(FileTab_styled.StyledTabLabel, null, renderTabFileIcon(), renderTabFileName(), renderTabFileDirName());
   };
   /**
    * Tab close icon
    */
-
-
-  const renderTabCloseButton = () => {
+  var renderTabCloseButton = function renderTabCloseButton() {
     return React__default["default"].createElement(FileTab_styled.StyledTabCloseButton, {
       icon: icons.eilMathsignMultiplyBasic,
       role: "gray5",
       size: "nano",
       transparent: true,
       border: false,
-      onClick: e => {
+      onClick: function onClick(e) {
         e.stopPropagation();
-
         if (typeof onClose === 'function') {
           onClose();
         }
       }
     });
-  }; //
+  };
+  //
   //
   //
-
-
   return React__default["default"].createElement(FileTab_styled.StyledTab, Object.assign({}, eventListeners, {
     active: active,
     hovered: hovered,
@@ -116,10 +105,10 @@ const FileTab = _a => {
     role: "tab",
     "aria-label": filename,
     "aria-selected": active,
-    title: `~/${fullname}`,
+    title: "~/".concat(fullname),
     tabIndex: -1,
     ref: tabElRef
   }), React__default["default"].createElement(FileTab_styled.StyledTabContent, null, renderTabFile(), renderTabCloseButton()), React__default["default"].createElement(FileTab_styled.StyledTabActiveBorder, null));
 };
 
-module.exports = FileTab;
+exports["default"] = FileTab;

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

@@ -10,38 +10,42 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-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 ==========
-
-const StyledTabLabel = styled__default["default"].div.withConfig({
+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;
+// ========== Tab label ==========
+var StyledTabLabel = styled__default["default"].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;}"]);
-const StyledTabLabelFilename = styled__default["default"](blocks.Text).withConfig({
+var StyledTabLabelFilename = styled__default["default"](blocks.Text).withConfig({
   componentId: "sc-1pe3776-1"
 })(["color:", ";font-weight:500;"], designTokens.base.color.gray4);
-const StyledTabLabelDirname = styled__default["default"](blocks.Text).withConfig({
+var StyledTabLabelDirname = styled__default["default"](blocks.Text).withConfig({
   componentId: "sc-1pe3776-2"
 })(["font-weight:500;"]);
-const StyledTabCloseButton = styled__default["default"](blocks.IconButton).withConfig({
+var StyledTabCloseButton = styled__default["default"](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 ==========
-
-const StyledTabContent = styled__default["default"].div.withConfig({
+})(["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({
   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 ==========
-
-const StyledTabActiveBorder = styled__default["default"].div.withConfig({
+})(["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({
   componentId: "sc-1pe3776-5"
-})(["height:", ";background-color:", ";opacity:0;"], TAB_VERTICAL_BORDER_WIDTH, designTokens.base.color.primary5); // ========== Tab ==========
-
-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__default["default"].div.withConfig({
+})(["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({
   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, props => props.active && cssTabActive, props => 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, function (props) {
+  return props.active && cssTabActive;
+}, function (props) {
+  return props.hovered && cssTabHovered;
+});
 
 exports.StyledTab = StyledTab;
 exports.StyledTabActiveBorder = StyledTabActiveBorder;

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

@@ -1,5 +1,8 @@
 'use strict';
 
+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');
@@ -11,103 +14,106 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var throttle__default = /*#__PURE__*/_interopDefaultLegacy(throttle);
 
-const FileTabs = ({
-  openedTabs,
-  activeTab,
-  onSelectTab,
-  onCloseTab,
-  onTabOrderChange
-}) => {
-  const [curDraggingTabIndex, setCurDraggingTabIndex] = React__default["default"].useState(null);
-  const [curHoveredTabIndex, setCurHoveredTabIndex] = React__default["default"].useState(null);
+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];
   /**
    * Tab props.
    */
-
-  const tabs = React__default["default"].useMemo(() => util.getTabProps(openedTabs), [openedTabs]);
+  var tabs = React__default["default"].useMemo(function () {
+    return util.getTabProps(openedTabs);
+  }, [openedTabs]);
   /**
    * Reset state.
    */
-
-  const reset = () => {
+  var reset = function reset() {
     setCurDraggingTabIndex(null);
     setCurHoveredTabIndex(null);
   };
   /**
    * Throttled `setCurHoveredTabIndex`.
    */
-
-
-  const setThrottledCurHoveredTabIndex = React__default["default"].useCallback(throttle__default["default"](setCurHoveredTabIndex, 100, {
+  var setThrottledCurHoveredTabIndex = React__default["default"].useCallback(throttle__default["default"](setCurHoveredTabIndex, 100, {
     leading: true,
     trailing: false
   }), []);
   /**
    * Handle tab drag start.
    */
-
-  const getTabDragStartHandler = React__default["default"].useCallback(index => _ => {
-    setCurDraggingTabIndex(index);
+  var getTabDragStartHandler = React__default["default"].useCallback(function (index) {
+    return function (_) {
+      setCurDraggingTabIndex(index);
+    };
   }, []);
   /**
    * Handle tab drag over.
    */
-
-  const getTabDragOverHandler = React__default["default"].useCallback(index => e => {
-    e.preventDefault();
-    e.stopPropagation();
-    setThrottledCurHoveredTabIndex(index);
+  var getTabDragOverHandler = React__default["default"].useCallback(function (index) {
+    return function (e) {
+      e.preventDefault();
+      e.stopPropagation();
+      setThrottledCurHoveredTabIndex(index);
+    };
   }, [setThrottledCurHoveredTabIndex]);
   /**
    * Handle tab drop.
    */
-
-  const handleTabDrop = e => {
+  var handleTabDrop = function handleTabDrop(e) {
     e.preventDefault();
     e.stopPropagation();
-
     if (curDraggingTabIndex !== null && curHoveredTabIndex !== null && typeof onTabOrderChange === 'function') {
       onTabOrderChange(curDraggingTabIndex, curHoveredTabIndex);
     }
-
     reset();
   };
   /**
    * Tabs.
    */
-
-
-  const renderTabs = () => {
-    return tabs.map((tab, index) => React__default["default"].createElement(FileTab, 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
-    })));
+  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
+      }));
+    });
   };
   /**
    * Tab drop zone.
    */
-
-
-  const renderTabsDropZone = () => {
+  var renderTabsDropZone = function renderTabsDropZone() {
     return React__default["default"].createElement(FileTabs_styled.StyledTabsDropZone, {
       onDragOver: getTabDragOverHandler(tabs.length - 1),
       onDrop: handleTabDrop
     });
-  }; //
+  };
+  //
   //
   //
-
-
   return React__default["default"].createElement(FileTabs_styled.StyledTabs, {
     role: "tablist"
   }, renderTabs(), renderTabsDropZone());
 };
 
-module.exports = FileTabs;
+exports["default"] = FileTabs;

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

@@ -10,14 +10,14 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-const StyledTabs = styled__default["default"].div.withConfig({
+var StyledTabs = styled__default["default"].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
 }));
-const StyledTabsDropZone = styled__default["default"].div.withConfig({
+var StyledTabsDropZone = styled__default["default"].div.withConfig({
   componentId: "sc-ifwvzh-1"
 })(["flex:1;height:100%;background-color:transparent;"]);
 

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

@@ -2,29 +2,40 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+
 /**
  * Get file tab props.
  */
 function getTabProps(paths) {
-  const tabs = []; // parse file paths
-
-  for (const path of paths) {
-    const chunks = path.split('/');
-    const filename = chunks.pop();
-
-    if (filename) {
-      tabs.push({
-        fullname: path,
-        chunks,
-        filename,
-        isFilenameDuplicated: false
-      });
+  var 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
+        });
+      }
     }
-  } // check filename duplication
-
-
-  tabs.forEach(thisTab => {
-    thisTab.isFilenameDuplicated = tabs.filter(thatTab => thisTab.filename === thatTab.filename).length > 1;
+    // 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;
   });
   return tabs;
 }

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

@@ -1,5 +1,7 @@
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 var React = require('react');
 var blocks = require('@elice/blocks');
 var designTokens = require('@elice/design-tokens');
@@ -17,29 +19,27 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-const StyledFileTreeWrapper = styled__default["default"].div.withConfig({
+var StyledFileTreeWrapper = styled__default["default"].div.withConfig({
   componentId: "sc-6ext2i-0"
 })(["display:flex;flex-direction:column;user-select:none;overflow:hidden;"]);
-const StyledLoading = styled__default["default"].div.withConfig({
+var StyledLoading = styled__default["default"].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);
-
-const FileTree = props => {
+var FileTree = function FileTree(props) {
   return React__default["default"].createElement(materialSharedUtils.MaterialIntlProvider, {
     locale: props.locale,
     phrases: {
-      en: en,
-      ko: ko
+      en: en["default"],
+      ko: ko["default"]
     }
   }, React__default["default"].createElement(FileTreeContext.FileTreeProvider, Object.assign({}, props), React__default["default"].createElement(StyledFileTreeWrapper, {
     style: props.style
   }, props.loading ? React__default["default"].createElement(StyledLoading, null, React__default["default"].createElement(blocks.Spinner, null)) : null, props.children)));
 };
-
 var FileTree$1 = Object.assign(FileTree, {
-  Toolbar: FileTreeToolbar,
-  List: FileTreeList,
-  Config: FileTreeConfig
+  Toolbar: FileTreeToolbar["default"],
+  List: FileTreeList["default"],
+  Config: FileTreeConfig["default"]
 });
 
-module.exports = FileTree$1;
+exports["default"] = FileTree$1;

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

@@ -1,5 +1,7 @@
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 var React = require('react');
 var blocks = require('@elice/blocks');
 var designTokens = require('@elice/design-tokens');
@@ -13,26 +15,23 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-const StyledFileTreeConfig = styled__default["default"].div.withConfig({
+var StyledFileTreeConfig = styled__default["default"].div.withConfig({
   componentId: "sc-1dxe3z0-0"
 })(["background-color:", ";padding:1rem;"], designTokens.base.color.navy8);
-const FileTreeConfig = React.forwardRef(({
-  className,
-  style,
-  onInitialOpenFileListChange,
-  initialOpenFilelist
-}, ref) => {
-  const {
-    mode,
-    initialOpenFileListTemp
-  } = FileTreeContext.useFileTreeState();
-  const {
-    dispatch
-  } = FileTreeContext.useFileTreeDispatch();
-  React__default["default"].useEffect(() => {
+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 () {
     dispatch({
       type: 'INITIAL_OPEN_FILELIST_UPDATE',
-      initialOpenFilelist
+      initialOpenFilelist: initialOpenFilelist
     });
   }, [dispatch, initialOpenFilelist]);
   return React__default["default"].createElement(StyledFileTreeConfig, {
@@ -44,21 +43,23 @@ const FileTreeConfig = React.forwardRef(({
     size: "small",
     role: "white",
     transparent: true,
-    onClick: () => {
-      if ([// when mode changes from 'checkbox' to 'default'
-      mode === 'checkbox', // when some value of initial open filelist changes'
-      JSON.stringify(initialOpenFilelist.sort()) !== JSON.stringify(initialOpenFileListTemp.sort()), // when onInitialOpenFileListChange is function'
+    onClick: function onClick() {
+      if ([
+      // when mode changes from 'checkbox' to 'default'
+      mode === 'checkbox',
+      // when some value of initial open filelist changes'
+      JSON.stringify(initialOpenFilelist.sort()) !== JSON.stringify(initialOpenFileListTemp.sort()),
+      // when onInitialOpenFileListChange is function'
       typeof onInitialOpenFileListChange === 'function'].every(Boolean)) {
         onInitialOpenFileListChange(initialOpenFileListTemp);
       }
-
       dispatch({
         type: 'UPDATE_MODE',
         mode: mode === 'checkbox' ? 'default' : 'checkbox'
       });
     }
-  }, mode === 'default' ? `Initial Open Files(${initialOpenFileListTemp.length})` : `Settings (${initialOpenFileListTemp.length})`));
+  }, mode === 'default' ? "Initial Open Files(".concat(initialOpenFileListTemp.length, ")") : "Settings (".concat(initialOpenFileListTemp.length, ")")));
 });
 var FileTreeConfig$1 = FileTreeConfig;
 
-module.exports = FileTreeConfig$1;
+exports["default"] = FileTreeConfig$1;