@elice/material-exercise 1.220803.0

package/cjs/components/shared/exercise-menu-button/ExerciseMenuButton.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { IconButtonProps, TooltipProps } from '@elice/blocks';
+declare type PickedIconButtonProps = Pick<IconButtonProps, 'icon' | 'disabled' | 'loading' | 'onClick' | 'style'>;
+declare type PickedTooltipProps = Pick<TooltipProps, 'title' | 'placement'>;
+export interface ExerciseMenuButtonProps extends PickedIconButtonProps, PickedTooltipProps {
+    children?: React.ReactChild;
+    active?: boolean;
+}
+declare const ExerciseMenuButton: React.ForwardRefExoticComponent<ExerciseMenuButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export default ExerciseMenuButton;

package/cjs/components/shared/exercise-menu-button/ExerciseMenuButton.js

@@ -0,0 +1,52 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+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 React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+//
+//
+
+const StyledMenuButtonWrap = styled__default["default"].span.withConfig({
+  componentId: "sc-48m0vh-0"
+})(["position:relative;margin-right:0.5rem;&:last-of-type{margin-right:0;}"]);
+const StyledMenuButton = styled__default["default"](blocks.IconButton).withConfig({
+  componentId: "sc-48m0vh-1"
+})(["", ""], ({
+  active
+}) => active && `background: ${designTokens.base.color.navy6} !important;`); //
+//
+//
+
+const ExerciseMenuButton = React.forwardRef((_a, ref) => {
+  var {
+    children,
+    active = false,
+    title,
+    placement = 'bottom-end'
+  } = _a,
+      props = tslib.__rest(_a, ["children", "active", "title", "placement"]);
+
+  return React__default["default"].createElement(blocks.Tooltip, {
+    title: title,
+    placement: placement,
+    dark: true
+  }, React__default["default"].createElement(StyledMenuButtonWrap, null, React__default["default"].createElement(StyledMenuButton, Object.assign({
+    transparent: true,
+    border: false,
+    size: "micro",
+    role: "gray3",
+    active: active
+  }, props, {
+    ref: ref
+  })), children));
+});
+
+module.exports = ExerciseMenuButton;

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

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

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

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

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

@@ -0,0 +1,55 @@
+'use strict';
+
+var React = require('react');
+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 React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const StyledFileShimmerWrap = styled__default["default"].div.withConfig({
+  componentId: "sc-mf825x-0"
+})(["padding:1rem;width:100%;height:100%;background:", ";overflow:hidden;"], designTokens.base.color.navy9);
+
+const ExerciseFileShimmer = () => {
+  return React__default["default"].createElement(StyledFileShimmerWrap, null, React__default["default"].createElement(blocks.Shimmer, {
+    width: "150px",
+    height: "1rem",
+    dark: true
+  }), React__default["default"].createElement(blocks.Vspace, {
+    height: 1
+  }), React__default["default"].createElement(blocks.Shimmer, {
+    width: "100px",
+    height: "1rem",
+    dark: true
+  }), React__default["default"].createElement(blocks.Vspace, {
+    height: 1
+  }), React__default["default"].createElement(blocks.Shimmer, {
+    width: "300px",
+    height: "1rem",
+    dark: true
+  }), React__default["default"].createElement(blocks.Vspace, {
+    height: 1
+  }), React__default["default"].createElement(blocks.Shimmer, {
+    width: "200px",
+    height: "1rem",
+    dark: true
+  }), React__default["default"].createElement(blocks.Vspace, {
+    height: 1
+  }), React__default["default"].createElement(blocks.Shimmer, {
+    width: "250px",
+    height: "1rem",
+    dark: true
+  }), React__default["default"].createElement(blocks.Vspace, {
+    height: 1
+  }), React__default["default"].createElement(blocks.Shimmer, {
+    width: "150px",
+    height: "1rem",
+    dark: true
+  }));
+};
+
+module.exports = ExerciseFileShimmer;

package/cjs/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/cjs/components/shared/exercise-shimmer/ExerciseFileTabShimmer.js

@@ -0,0 +1,37 @@
+'use strict';
+
+var React = require('react');
+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 React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+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__default["default"].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, designTokens.base.color.navy9, designTokens.base.color.navy8);
+
+const ExerciseFileTabShimmer = ({
+  width = 150
+}) => {
+  return React__default["default"].createElement(StyledDummyFileTab, null, React__default["default"].createElement(blocks.Shimmer, {
+    width: `${width}px`,
+    height: `${TAB_CONTENT_FILENAME_HEIGHT}px`,
+    dark: true
+  }), React__default["default"].createElement(blocks.Hspace, {
+    width: TAB_CONTENT_GAP / 16
+  }), React__default["default"].createElement(blocks.Shimmer, {
+    width: `${TAB_CONTENT_CLOSE_BUTTON_SIZE}px`,
+    height: `${TAB_CONTENT_CLOSE_BUTTON_SIZE}px`,
+    dark: true
+  }));
+};
+
+module.exports = ExerciseFileTabShimmer;

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

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

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

@@ -0,0 +1,25 @@
+'use strict';
+
+var React = require('react');
+var designTokens = require('@elice/design-tokens');
+var styled = require('styled-components');
+var ExerciseFileTabShimmer = require('./ExerciseFileTabShimmer.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);
+
+const StyledShimmerWrapper = styled__default["default"].div.withConfig({
+  componentId: "sc-107bpmt-0"
+})(["display:flex;width:100%;height:100%;background-color:", ";overflow:hidden;"], designTokens.base.color.navy9);
+
+const ExerciseFileTabsShimmer = () => {
+  return React__default["default"].createElement(StyledShimmerWrapper, null, React__default["default"].createElement(ExerciseFileTabShimmer, {
+    width: 120
+  }), React__default["default"].createElement(ExerciseFileTabShimmer, {
+    width: 80
+  }));
+};
+
+module.exports = ExerciseFileTabsShimmer;

package/cjs/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/cjs/components/shared/exercise-shimmer/ExerciseFileTreeListItemShimmer.js

@@ -0,0 +1,40 @@
+'use strict';
+
+var React = require('react');
+var blocks = require('@elice/blocks');
+var styled = require('styled-components');
+
+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);
+
+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__default["default"](blocks.Shimmer).withConfig({
+  componentId: "sc-x7bcnn-0"
+})(["flex:0 0 ", "px;"], FILE_TREE_LIST_ITEM_ICON_SIZE);
+const StyledDummyListItem = styled__default["default"].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__default["default"].createElement(StyledDummyListItem, null, React__default["default"].createElement(StyledDummyListItemIconShimmer, {
+    width: `${FILE_TREE_LIST_ITEM_ICON_SIZE}px`,
+    height: `${FILE_TREE_LIST_ITEM_ICON_SIZE}px`,
+    dark: true
+  }), React__default["default"].createElement(blocks.Hspace, {
+    width: FILE_TREE_LIST_ITEM_GAP / 16
+  }), React__default["default"].createElement(blocks.Shimmer, {
+    width: `${width}px`,
+    height: `${FILE_TREE_LIST_ITEM_FILENAME_HEIGHT}px`,
+    dark: true
+  }));
+};
+
+module.exports = ExerciseFileTreeListItemShimmer;

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

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

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

@@ -0,0 +1,31 @@
+'use strict';
+
+var React = require('react');
+var designTokens = require('@elice/design-tokens');
+var styled = require('styled-components');
+var ExerciseFileTreeListItemShimmer = require('./ExerciseFileTreeListItemShimmer.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);
+
+const StyledShimmerWrapper = styled__default["default"].div.withConfig({
+  componentId: "sc-ol0qbo-0"
+})(["display:flex;flex-direction:column;width:100%;height:100%;background:", ";overflow:hidden;"], designTokens.base.color.navy9);
+const StyledDummyToolbar = styled__default["default"].div.withConfig({
+  componentId: "sc-ol0qbo-1"
+})(["flex:0 0 2.25rem;background-color:", ";"], designTokens.base.color.navy8);
+const StyledDummyList = styled__default["default"].div.withConfig({
+  componentId: "sc-ol0qbo-2"
+})(["flex:1;display:flex;flex-direction:column;width:100%;overflow:hidden;"]);
+
+const ExerciseFileTreeListShimmer = () => {
+  const widths = React__default["default"].useMemo(() => new Array(Math.round(Math.random() * 5) + 5).fill(0).map(() => Math.round(Math.random() * 200) + 50), []);
+  return React__default["default"].createElement(StyledShimmerWrapper, null, React__default["default"].createElement(StyledDummyToolbar, null), React__default["default"].createElement(StyledDummyList, null, widths.map((width, index) => React__default["default"].createElement(ExerciseFileTreeListItemShimmer, {
+    key: index,
+    width: width
+  }))));
+};
+
+module.exports = ExerciseFileTreeListShimmer;

package/cjs/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/cjs/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/cjs/components/shared/exercise-version-list/ExerciseVersionList.js

@@ -0,0 +1,16 @@
+'use strict';
+
+var React = require('react');
+var ExerciseVersionList_styled = require('./ExerciseVersionList.styled.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const ExerciseVersionList = ({
+  children
+}) => {
+  return React__default["default"].createElement(ExerciseVersionList_styled.StyledVersionList, null, children);
+};
+
+module.exports = ExerciseVersionList;

package/cjs/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/cjs/components/shared/exercise-version-list/ExerciseVersionList.styled.js

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var blocks = require('@elice/blocks');
+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);
+
+const StyledVersionList = styled__default["default"](blocks.List).withConfig({
+  componentId: "sc-wqxvzc-0"
+})(["height:100%;padding:0;overflow:scroll;background-color:transparent;& > last-of-type{border:none;}"]);
+
+exports.StyledVersionList = StyledVersionList;

package/cjs/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/cjs/components/shared/exercise-version-list/ExerciseVersionListItem.js

@@ -0,0 +1,23 @@
+'use strict';
+
+var React = require('react');
+var ExerciseVersionListItem_styled = require('./ExerciseVersionListItem.styled.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const ExerciseVersionListItem = ({
+  children,
+  selected,
+  style,
+  onClick
+}) => {
+  return React__default["default"].createElement(ExerciseVersionListItem_styled.StyledExerciseVersionItem, {
+    selected: selected,
+    style: style,
+    onClick: onClick
+  }, children);
+};
+
+module.exports = ExerciseVersionListItem;

package/cjs/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/cjs/components/shared/exercise-version-list/ExerciseVersionListItem.styled.js

@@ -0,0 +1,29 @@
+'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);
+
+const StyledExerciseVersionItem = styled__default["default"](blocks.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:", ";"], designTokens.base.color.navy9, designTokens.base.color.gray6, props => props.selected ? designTokens.base.color.primary6 : 'transparent', props => props.selected ? designTokens.base.color.gray6 : 'initial');
+const StyledExerciseVersionRunType = styled__default["default"](blocks.Text).withConfig({
+  componentId: "sc-8jsi1o-1"
+})(["flex:0 1 auto;min-width:fit-content;"]);
+const StyledExerciseVersionDatetime = styled__default["default"](blocks.Text).withConfig({
+  componentId: "sc-8jsi1o-2"
+})(["flex:none;"]);
+const StyledExerciseVersionScore = styled__default["default"](blocks.Text).withConfig({
+  componentId: "sc-8jsi1o-3"
+})(["flex:auto;text-align:right;"]);
+
+exports.StyledExerciseVersionDatetime = StyledExerciseVersionDatetime;
+exports.StyledExerciseVersionItem = StyledExerciseVersionItem;
+exports.StyledExerciseVersionRunType = StyledExerciseVersionRunType;
+exports.StyledExerciseVersionScore = StyledExerciseVersionScore;

package/cjs/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/cjs/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/cjs/components/shared/file-icon/FileIcon.js

@@ -0,0 +1,47 @@
+'use strict';
+
+var tslib = require('tslib');
+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);
+
+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 = tslib.__rest(_a, ["filename", "directory", "expanded", "width", "height"]);
+
+  const src = React__default["default"].useMemo(() => {
+    if (directory) {
+      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, {
+    src: src,
+    alt: `icon for ${filename}`,
+    width: width,
+    height: height
+  }));
+};
+
+module.exports = FileIcon;

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

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

package/cjs/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/cjs/components/shared/file-tabs/FileTab.js

@@ -0,0 +1,125 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+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);
+
+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); //
+  // Scroll into view.
+  //
+
+  React__default["default"].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__default["default"].createElement(FileIcon, {
+      filename: filename,
+      width: "1rem",
+      height: "1rem"
+    });
+  };
+  /**
+   * File name
+   */
+
+
+  const renderTabFileName = () => {
+    return React__default["default"].createElement(FileTab_styled.StyledTabLabelFilename, {
+      size: "tiny",
+      noWrap: true
+    }, filename);
+  };
+  /**
+   * File directory name
+   */
+
+
+  const renderTabFileDirName = () => {
+    if (!isFilenameDuplicated) {
+      return null;
+    }
+
+    const parentDir = chunks.slice().pop();
+    return React__default["default"].createElement(FileTab_styled.StyledTabLabelDirname, {
+      role: "gray5",
+      size: "tiny",
+      noWrap: true
+    }, parentDir ? `.../${parentDir}` : '/');
+  };
+  /**
+   * File
+   */
+
+
+  const renderTabFile = () => {
+    return React__default["default"].createElement(FileTab_styled.StyledTabLabel, null, renderTabFileIcon(), renderTabFileName(), renderTabFileDirName());
+  };
+  /**
+   * Tab close icon
+   */
+
+
+  const renderTabCloseButton = () => {
+    return React__default["default"].createElement(FileTab_styled.StyledTabCloseButton, {
+      icon: icons.eilMathsignMultiplyBasic,
+      role: "gray5",
+      size: "nano",
+      transparent: true,
+      border: false,
+      onClick: e => {
+        e.stopPropagation();
+
+        if (typeof onClose === 'function') {
+          onClose();
+        }
+      }
+    });
+  }; //
+  //
+  //
+
+
+  return React__default["default"].createElement(FileTab_styled.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__default["default"].createElement(FileTab_styled.StyledTabContent, null, renderTabFile(), renderTabCloseButton()), React__default["default"].createElement(FileTab_styled.StyledTabActiveBorder, null));
+};
+
+module.exports = FileTab;

package/cjs/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 {};