@elice/material-exercise 1.220803.0

package/es/components/shared/exercise-menu-button/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ExerciseMenuButton } from './ExerciseMenuButton';
+export type { ExerciseMenuButtonProps } from './ExerciseMenuButton';

package/es/components/shared/exercise-shimmer/ExerciseFileShimmer.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const ExerciseFileShimmer: React.VFC;
+export default ExerciseFileShimmer;

package/es/components/shared/exercise-shimmer/ExerciseFileShimmer.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import { Shimmer, Vspace } from '@elice/blocks';
+import { base } from '@elice/design-tokens';
+import styled from 'styled-components';
+
+const StyledFileShimmerWrap = styled.div.withConfig({
+  componentId: "sc-mf825x-0"
+})(["padding:1rem;width:100%;height:100%;background:", ";overflow:hidden;"], base.color.navy9);
+
+const ExerciseFileShimmer = () => {
+  return React.createElement(StyledFileShimmerWrap, null, React.createElement(Shimmer, {
+    width: "150px",
+    height: "1rem",
+    dark: true
+  }), React.createElement(Vspace, {
+    height: 1
+  }), React.createElement(Shimmer, {
+    width: "100px",
+    height: "1rem",
+    dark: true
+  }), React.createElement(Vspace, {
+    height: 1
+  }), React.createElement(Shimmer, {
+    width: "300px",
+    height: "1rem",
+    dark: true
+  }), React.createElement(Vspace, {
+    height: 1
+  }), React.createElement(Shimmer, {
+    width: "200px",
+    height: "1rem",
+    dark: true
+  }), React.createElement(Vspace, {
+    height: 1
+  }), React.createElement(Shimmer, {
+    width: "250px",
+    height: "1rem",
+    dark: true
+  }), React.createElement(Vspace, {
+    height: 1
+  }), React.createElement(Shimmer, {
+    width: "150px",
+    height: "1rem",
+    dark: true
+  }));
+};
+
+export { ExerciseFileShimmer as default };

package/es/components/shared/exercise-shimmer/ExerciseFileTabShimmer.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface ExerciseFileTabShimmerProps {
+    width?: number;
+}
+declare const ExerciseFileTabShimmer: React.VFC<ExerciseFileTabShimmerProps>;
+export default ExerciseFileTabShimmer;

package/es/components/shared/exercise-shimmer/ExerciseFileTabShimmer.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Shimmer, Hspace } from '@elice/blocks';
+import { base } from '@elice/design-tokens';
+import styled from 'styled-components';
+
+const TAB_HEIGHT = 36;
+const TAB_CONTENT_GAP = 8;
+const TAB_CONTENT_FILENAME_HEIGHT = 16;
+const TAB_CONTENT_CLOSE_BUTTON_SIZE = 14;
+const StyledDummyFileTab = styled.div.withConfig({
+  componentId: "sc-q9m9qo-0"
+})(["display:flex;align-items:center;padding:0 0.5rem;height:", "px;border-right:1px solid ", ";background-color:", ";overflow:hidden;"], TAB_HEIGHT, base.color.navy9, base.color.navy8);
+
+const ExerciseFileTabShimmer = ({
+  width = 150
+}) => {
+  return React.createElement(StyledDummyFileTab, null, React.createElement(Shimmer, {
+    width: `${width}px`,
+    height: `${TAB_CONTENT_FILENAME_HEIGHT}px`,
+    dark: true
+  }), React.createElement(Hspace, {
+    width: TAB_CONTENT_GAP / 16
+  }), React.createElement(Shimmer, {
+    width: `${TAB_CONTENT_CLOSE_BUTTON_SIZE}px`,
+    height: `${TAB_CONTENT_CLOSE_BUTTON_SIZE}px`,
+    dark: true
+  }));
+};
+
+export { ExerciseFileTabShimmer as default };

package/es/components/shared/exercise-shimmer/ExerciseFileTabsShimmer.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const ExerciseFileTabsShimmer: React.VFC;
+export default ExerciseFileTabsShimmer;

package/es/components/shared/exercise-shimmer/ExerciseFileTabsShimmer.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { base } from '@elice/design-tokens';
+import styled from 'styled-components';
+import ExerciseFileTabShimmer from './ExerciseFileTabShimmer.js';
+
+const StyledShimmerWrapper = styled.div.withConfig({
+  componentId: "sc-107bpmt-0"
+})(["display:flex;width:100%;height:100%;background-color:", ";overflow:hidden;"], base.color.navy9);
+
+const ExerciseFileTabsShimmer = () => {
+  return React.createElement(StyledShimmerWrapper, null, React.createElement(ExerciseFileTabShimmer, {
+    width: 120
+  }), React.createElement(ExerciseFileTabShimmer, {
+    width: 80
+  }));
+};
+
+export { ExerciseFileTabsShimmer as default };

package/es/components/shared/exercise-shimmer/ExerciseFileTreeListItemShimmer.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface ExerciseFileTreeListItemShimmerProps {
+    width?: number;
+}
+declare const ExerciseFileTreeListItemShimmer: React.VFC<ExerciseFileTreeListItemShimmerProps>;
+export default ExerciseFileTreeListItemShimmer;

package/es/components/shared/exercise-shimmer/ExerciseFileTreeListItemShimmer.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Shimmer, Hspace } from '@elice/blocks';
+import styled from 'styled-components';
+
+const FILE_TREE_LIST_ITEM_HORIZONTAL_PADDING = 14;
+const FILE_TREE_LIST_ITEM_HEIGHT = 28;
+const FILE_TREE_LIST_ITEM_ICON_SIZE = 16;
+const FILE_TREE_LIST_ITEM_GAP = 8;
+const FILE_TREE_LIST_ITEM_FILENAME_HEIGHT = 14;
+const StyledDummyListItemIconShimmer = styled(Shimmer).withConfig({
+  componentId: "sc-x7bcnn-0"
+})(["flex:0 0 ", "px;"], FILE_TREE_LIST_ITEM_ICON_SIZE);
+const StyledDummyListItem = styled.li.withConfig({
+  componentId: "sc-x7bcnn-1"
+})(["display:flex;align-items:center;margin:0;padding:0 ", "px;width:100%;height:", "px;list-style:none;"], FILE_TREE_LIST_ITEM_HORIZONTAL_PADDING, FILE_TREE_LIST_ITEM_HEIGHT);
+
+const ExerciseFileTreeListItemShimmer = ({
+  width = 100
+}) => {
+  return React.createElement(StyledDummyListItem, null, React.createElement(StyledDummyListItemIconShimmer, {
+    width: `${FILE_TREE_LIST_ITEM_ICON_SIZE}px`,
+    height: `${FILE_TREE_LIST_ITEM_ICON_SIZE}px`,
+    dark: true
+  }), React.createElement(Hspace, {
+    width: FILE_TREE_LIST_ITEM_GAP / 16
+  }), React.createElement(Shimmer, {
+    width: `${width}px`,
+    height: `${FILE_TREE_LIST_ITEM_FILENAME_HEIGHT}px`,
+    dark: true
+  }));
+};
+
+export { ExerciseFileTreeListItemShimmer as default };

package/es/components/shared/exercise-shimmer/ExerciseFileTreeListShimmer.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const ExerciseFileTreeListShimmer: React.VFC;
+export default ExerciseFileTreeListShimmer;

package/es/components/shared/exercise-shimmer/ExerciseFileTreeListShimmer.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { base } from '@elice/design-tokens';
+import styled from 'styled-components';
+import ExerciseFileTreeListItemShimmer from './ExerciseFileTreeListItemShimmer.js';
+
+const StyledShimmerWrapper = styled.div.withConfig({
+  componentId: "sc-ol0qbo-0"
+})(["display:flex;flex-direction:column;width:100%;height:100%;background:", ";overflow:hidden;"], base.color.navy9);
+const StyledDummyToolbar = styled.div.withConfig({
+  componentId: "sc-ol0qbo-1"
+})(["flex:0 0 2.25rem;background-color:", ";"], base.color.navy8);
+const StyledDummyList = styled.div.withConfig({
+  componentId: "sc-ol0qbo-2"
+})(["flex:1;display:flex;flex-direction:column;width:100%;overflow:hidden;"]);
+
+const ExerciseFileTreeListShimmer = () => {
+  const widths = React.useMemo(() => new Array(Math.round(Math.random() * 5) + 5).fill(0).map(() => Math.round(Math.random() * 200) + 50), []);
+  return React.createElement(StyledShimmerWrapper, null, React.createElement(StyledDummyToolbar, null), React.createElement(StyledDummyList, null, widths.map((width, index) => React.createElement(ExerciseFileTreeListItemShimmer, {
+    key: index,
+    width: width
+  }))));
+};
+
+export { ExerciseFileTreeListShimmer as default };

package/es/components/shared/exercise-shimmer/index.d.ts

@@ -0,0 +1,5 @@
+export { default as ExerciseFileShimmer } from './ExerciseFileShimmer';
+export { default as ExerciseFileTabsShimmer } from './ExerciseFileTabsShimmer';
+export { default as ExerciseFileTabShimmer } from './ExerciseFileTabShimmer';
+export { default as ExerciseFileTreeListShimmer } from './ExerciseFileTreeListShimmer';
+export { default as ExerciseFileTreeListItemShimmer } from './ExerciseFileTreeListItemShimmer';

package/es/components/shared/exercise-version-list/ExerciseVersionList.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const ExerciseVersionList: React.FC;
+export default ExerciseVersionList;

package/es/components/shared/exercise-version-list/ExerciseVersionList.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { StyledVersionList } from './ExerciseVersionList.styled.js';
+
+const ExerciseVersionList = ({
+  children
+}) => {
+  return React.createElement(StyledVersionList, null, children);
+};
+
+export { ExerciseVersionList as default };

package/es/components/shared/exercise-version-list/ExerciseVersionList.styled.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare const StyledVersionList: import("styled-components").StyledComponent<import("react").FC<import("@elice/blocks").ListProps> & {
+    Item: import("react").FC<import("@elice/blocks").ListItemProps>;
+    ItemText: import("react").FC<import("@elice/blocks").ListItemTextProps>;
+    ItemIcon: import("react").FC<import("@elice/blocks").ListItemIconProps>;
+    Divider: import("react").FC<import("@elice/blocks").ListDividerProps>;
+    SubHeader: import("react").FC<import("@elice/blocks").ListSubHeaderProps>;
+}, any, {}, never>;

package/es/components/shared/exercise-version-list/ExerciseVersionList.styled.js

@@ -0,0 +1,8 @@
+import { List } from '@elice/blocks';
+import styled from 'styled-components';
+
+const StyledVersionList = styled(List).withConfig({
+  componentId: "sc-wqxvzc-0"
+})(["height:100%;padding:0;overflow:scroll;background-color:transparent;& > last-of-type{border:none;}"]);
+
+export { StyledVersionList };

package/es/components/shared/exercise-version-list/ExerciseVersionListItem.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface ExerciseVersionListItemProps {
+    selected?: boolean;
+    style?: React.CSSProperties;
+    onClick?: () => void;
+}
+declare const ExerciseVersionListItem: React.FC<ExerciseVersionListItemProps>;
+export default ExerciseVersionListItem;

package/es/components/shared/exercise-version-list/ExerciseVersionListItem.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { StyledExerciseVersionItem } from './ExerciseVersionListItem.styled.js';
+
+const ExerciseVersionListItem = ({
+  children,
+  selected,
+  style,
+  onClick
+}) => {
+  return React.createElement(StyledExerciseVersionItem, {
+    selected: selected,
+    style: style,
+    onClick: onClick
+  }, children);
+};
+
+export { ExerciseVersionListItem as default };

package/es/components/shared/exercise-version-list/ExerciseVersionListItem.styled.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { Text } from '@elice/blocks';
+export declare const StyledExerciseVersionItem: import("styled-components").StyledComponent<import("react").FC<import("@elice/blocks").ListItemProps>, any, {}, never>;
+export declare const StyledExerciseVersionRunType: import("styled-components").StyledComponent<typeof Text, any, {}, never>;
+export declare const StyledExerciseVersionDatetime: import("styled-components").StyledComponent<typeof Text, any, {}, never>;
+export declare const StyledExerciseVersionScore: import("styled-components").StyledComponent<typeof Text, any, {}, never>;

package/es/components/shared/exercise-version-list/ExerciseVersionListItem.styled.js

@@ -0,0 +1,18 @@
+import { List, Text } from '@elice/blocks';
+import { base } from '@elice/design-tokens';
+import styled from 'styled-components';
+
+const StyledExerciseVersionItem = styled(List.Item).withConfig({
+  componentId: "sc-8jsi1o-0"
+})(["display:flex;width:100%;height:3.25rem;padding:1rem 1.5rem;border-bottom:1px solid ", ";border-left:0.25rem solid transparent;background-color:transparent;align-items:baseline;& > div:not(:last-child){margin-right:0.5rem;}&:hover{background-color:", ";}border-left:0.25rem solid ", ";background-color:", ";"], base.color.navy9, base.color.gray6, props => props.selected ? base.color.primary6 : 'transparent', props => props.selected ? base.color.gray6 : 'initial');
+const StyledExerciseVersionRunType = styled(Text).withConfig({
+  componentId: "sc-8jsi1o-1"
+})(["flex:0 1 auto;min-width:fit-content;"]);
+const StyledExerciseVersionDatetime = styled(Text).withConfig({
+  componentId: "sc-8jsi1o-2"
+})(["flex:none;"]);
+const StyledExerciseVersionScore = styled(Text).withConfig({
+  componentId: "sc-8jsi1o-3"
+})(["flex:auto;text-align:right;"]);
+
+export { StyledExerciseVersionDatetime, StyledExerciseVersionItem, StyledExerciseVersionRunType, StyledExerciseVersionScore };

package/es/components/shared/exercise-version-list/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ExerciseVersionList } from './ExerciseVersionList';
+export { default as ExerciseVersionListItem } from './ExerciseVersionListItem';

package/es/components/shared/file-icon/FileIcon.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { SafeImageProps } from '@elice/blocks';
+declare type PickedSafeImageProps = Pick<SafeImageProps, 'className' | 'width' | 'height' | 'style'>;
+export interface FileIconProps extends PickedSafeImageProps {
+    filename: string;
+    directory?: boolean;
+    expanded?: boolean;
+}
+declare const FileIcon: React.VFC<FileIconProps>;
+export default FileIcon;

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

@@ -0,0 +1,41 @@
+import { __rest } from 'tslib';
+import React from 'react';
+import { Image } from '@elice/blocks';
+import { getIconForFile } from 'vscode-icons-js';
+
+const ICON_ASSET_BASE_URL = 'https://static.elice.io/code-editor/icons';
+
+const createIconUrl = svgFilename => {
+  return `${ICON_ASSET_BASE_URL}/${svgFilename.toLowerCase()}`;
+};
+
+const FileIcon = _a => {
+  var {
+    filename,
+    directory = false,
+    expanded = false,
+    width = '1rem',
+    height = '1rem'
+  } = _a,
+      props = __rest(_a, ["filename", "directory", "expanded", "width", "height"]);
+
+  const src = React.useMemo(() => {
+    if (directory) {
+      const suffix = expanded ? '_opened' : '';
+      return createIconUrl(`default_folder${suffix}.svg`);
+    }
+
+    return createIconUrl(getIconForFile(filename) || 'default_file.svg');
+  }, [filename, directory, expanded]); //
+  //
+  //
+
+  return React.createElement(Image, Object.assign({}, props, {
+    src: src,
+    alt: `icon for ${filename}`,
+    width: width,
+    height: height
+  }));
+};
+
+export { FileIcon as default };

package/es/components/shared/file-icon/index.d.ts

@@ -0,0 +1,2 @@
+export { default as FileIcon } from './FileIcon';
+export type { FileIconProps } from './FileIcon';

package/es/components/shared/file-tabs/FileTab.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { TabProps } from './util';
+declare type PickedHTMLDivAttributesProps = Pick<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'onDrag' | 'onDragEnter' | 'onDragOver' | 'onDragExit' | 'onDragLeave' | 'onDragStart' | 'onDragEnd' | 'onDrop'>;
+export interface FileTabProps extends TabProps, PickedHTMLDivAttributesProps {
+    active?: boolean;
+    hovered?: boolean;
+    onClose?: () => void;
+}
+declare const FileTab: React.VFC<FileTabProps>;
+export default FileTab;

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

@@ -0,0 +1,119 @@
+import { __rest } from 'tslib';
+import React from 'react';
+import { eilMathsignMultiplyBasic } from '@elice/icons';
+import FileIcon from '../file-icon/FileIcon.js';
+import { StyledTab, StyledTabContent, StyledTabLabel, StyledTabLabelFilename, StyledTabCloseButton, StyledTabActiveBorder, StyledTabLabelDirname } from './FileTab.styled.js';
+
+const EMPTY_CHUNKS = [];
+
+const FileTab = _a => {
+  var {
+    fullname,
+    chunks = EMPTY_CHUNKS,
+    filename,
+    isFilenameDuplicated = false,
+    active = false,
+    hovered = false,
+    onClose
+  } = _a,
+      eventListeners = __rest(_a, ["fullname", "chunks", "filename", "isFilenameDuplicated", "active", "hovered", "onClose"]);
+
+  const tabElRef = React.useRef(null); //
+  // Scroll into view.
+  //
+
+  React.useEffect(() => {
+    var _a;
+
+    if (active) {
+      (_a = tabElRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
+        behavior: 'smooth'
+      });
+    }
+  }, [active]);
+  /**
+   * File icon
+   */
+
+  const renderTabFileIcon = () => {
+    return React.createElement(FileIcon, {
+      filename: filename,
+      width: "1rem",
+      height: "1rem"
+    });
+  };
+  /**
+   * File name
+   */
+
+
+  const renderTabFileName = () => {
+    return React.createElement(StyledTabLabelFilename, {
+      size: "tiny",
+      noWrap: true
+    }, filename);
+  };
+  /**
+   * File directory name
+   */
+
+
+  const renderTabFileDirName = () => {
+    if (!isFilenameDuplicated) {
+      return null;
+    }
+
+    const parentDir = chunks.slice().pop();
+    return React.createElement(StyledTabLabelDirname, {
+      role: "gray5",
+      size: "tiny",
+      noWrap: true
+    }, parentDir ? `.../${parentDir}` : '/');
+  };
+  /**
+   * File
+   */
+
+
+  const renderTabFile = () => {
+    return React.createElement(StyledTabLabel, null, renderTabFileIcon(), renderTabFileName(), renderTabFileDirName());
+  };
+  /**
+   * Tab close icon
+   */
+
+
+  const renderTabCloseButton = () => {
+    return React.createElement(StyledTabCloseButton, {
+      icon: eilMathsignMultiplyBasic,
+      role: "gray5",
+      size: "nano",
+      transparent: true,
+      border: false,
+      onClick: e => {
+        e.stopPropagation();
+
+        if (typeof onClose === 'function') {
+          onClose();
+        }
+      }
+    });
+  }; //
+  //
+  //
+
+
+  return React.createElement(StyledTab, Object.assign({}, eventListeners, {
+    active: active,
+    hovered: hovered,
+    draggable: true,
+    role: "tab",
+    "aria-label": filename,
+    "aria-selected": active,
+    title: `~/${fullname}`,
+    tabIndex: -1,
+    ref: tabElRef
+  }), React.createElement(StyledTabContent, null, renderTabFile(), renderTabCloseButton()), React.createElement(StyledTabActiveBorder, null));
+};
+
+export { FileTab as default };

package/es/components/shared/file-tabs/FileTab.styled.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { Text } from '@elice/blocks';
+import type { FileTabProps } from './FileTab';
+declare type StyledTabContentProps = Pick<FileTabProps, 'active' | 'hovered'>;
+export declare const StyledTabLabel: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledTabLabelFilename: import("styled-components").StyledComponent<typeof Text, any, {}, never>;
+export declare const StyledTabLabelDirname: import("styled-components").StyledComponent<typeof Text, any, {}, never>;
+export declare const StyledTabCloseButton: import("styled-components").StyledComponent<import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<import("@elice/blocks").IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>>, any, {}, never>;
+export declare const StyledTabContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledTabActiveBorder: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledTab: import("styled-components").StyledComponent<"div", any, StyledTabContentProps, never>;
+export {};

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

@@ -0,0 +1,38 @@
+import { Text, IconButton } from '@elice/blocks';
+import { base } from '@elice/design-tokens';
+import styled, { css } from 'styled-components';
+
+const TAB_MIN_WIDTH = '7rem';
+const TAB_VERTICAL_BORDER_WIDTH = '1.5px';
+const TAB_BACKGROUND_COLOR = base.color.navy8;
+const TAB_ACTIVE_BACKGROUND_COLOR = base.color.navy9;
+const TAB_HOVERED_BACKGROUND_COLOR = base.color.navy7; // ========== Tab label ==========
+
+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;}"]);
+const StyledTabLabelFilename = styled(Text).withConfig({
+  componentId: "sc-1pe3776-1"
+})(["color:", ";font-weight:500;"], base.color.gray4);
+const StyledTabLabelDirname = styled(Text).withConfig({
+  componentId: "sc-1pe3776-2"
+})(["font-weight:500;"]);
+const StyledTabCloseButton = styled(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.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, base.color.gray3, StyledTabCloseButton); // ========== Tab active border ==========
+
+const StyledTabActiveBorder = styled.div.withConfig({
+  componentId: "sc-1pe3776-5"
+})(["height:", ";background-color:", ";opacity:0;"], TAB_VERTICAL_BORDER_WIDTH, base.color.primary5); // ========== Tab ==========
+
+const cssTabActive = css(["background-color:", ";", "{color:", ";}", "{opacity:1;}", "{opacity:1;}"], TAB_ACTIVE_BACKGROUND_COLOR, StyledTabLabelFilename, base.color.gray3, StyledTabCloseButton, StyledTabActiveBorder);
+const cssTabHovered = css(["background-color:", ";", "{color:", ";}"], TAB_HOVERED_BACKGROUND_COLOR, StyledTabLabelFilename, 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, base.color.navy7, props => props.active && cssTabActive, props => props.hovered && cssTabHovered);
+
+export { StyledTab, StyledTabActiveBorder, StyledTabCloseButton, StyledTabContent, StyledTabLabel, StyledTabLabelDirname, StyledTabLabelFilename };

package/es/components/shared/file-tabs/FileTabs.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+export interface FileTabsProps {
+    /** Filename(path) of opened files (e.g. foo/bar/baz.js) */
+    openedTabs: string[];
+    /** Filename(path) of active file. */
+    activeTab?: string;
+    /** On tab close. */
+    onCloseTab: (filename: string) => void;
+    /** On tab selected. */
+    onSelectTab: (filename: string) => void;
+    /** On tab order changed. */
+    onTabOrderChange: (currentIndex: number, movedIndex: number) => void;
+}
+declare const FileTabs: React.VFC<FileTabsProps>;
+export default FileTabs;

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

@@ -0,0 +1,106 @@
+import React from 'react';
+import throttle from 'lodash/throttle';
+import FileTab from './FileTab.js';
+import { getTabProps } from './util.js';
+import { StyledTabs, StyledTabsDropZone } from './FileTabs.styled.js';
+
+const FileTabs = ({
+  openedTabs,
+  activeTab,
+  onSelectTab,
+  onCloseTab,
+  onTabOrderChange
+}) => {
+  const [curDraggingTabIndex, setCurDraggingTabIndex] = React.useState(null);
+  const [curHoveredTabIndex, setCurHoveredTabIndex] = React.useState(null);
+  /**
+   * Tab props.
+   */
+
+  const tabs = React.useMemo(() => getTabProps(openedTabs), [openedTabs]);
+  /**
+   * Reset state.
+   */
+
+  const reset = () => {
+    setCurDraggingTabIndex(null);
+    setCurHoveredTabIndex(null);
+  };
+  /**
+   * Throttled `setCurHoveredTabIndex`.
+   */
+
+
+  const setThrottledCurHoveredTabIndex = React.useCallback(throttle(setCurHoveredTabIndex, 100, {
+    leading: true,
+    trailing: false
+  }), []);
+  /**
+   * Handle tab drag start.
+   */
+
+  const getTabDragStartHandler = React.useCallback(index => _ => {
+    setCurDraggingTabIndex(index);
+  }, []);
+  /**
+   * Handle tab drag over.
+   */
+
+  const getTabDragOverHandler = React.useCallback(index => e => {
+    e.preventDefault();
+    e.stopPropagation();
+    setThrottledCurHoveredTabIndex(index);
+  }, [setThrottledCurHoveredTabIndex]);
+  /**
+   * Handle tab drop.
+   */
+
+  const 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.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
+    })));
+  };
+  /**
+   * Tab drop zone.
+   */
+
+
+  const renderTabsDropZone = () => {
+    return React.createElement(StyledTabsDropZone, {
+      onDragOver: getTabDragOverHandler(tabs.length - 1),
+      onDrop: handleTabDrop
+    });
+  }; //
+  //
+  //
+
+
+  return React.createElement(StyledTabs, {
+    role: "tablist"
+  }, renderTabs(), renderTabsDropZone());
+};
+
+export { FileTabs as default };