@procore/core-react 10.26.0 → 10.26.1-rc.2

package/dist/esm/components/FileList/FileList.js

@@ -0,0 +1,75 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import { useI18nContext } from '../../state/I18n';
+import { Tooltip } from '../Tooltip';
+import { Archive, Download } from '@procore/core-icons/dist';
+import { Link } from '../Link';
+import { Typography } from '../Typography';
+import Box from '../../layouts/Box/Box';
+import { StyledFileListItem, StyledFileListItemDownloadIcon, StyledFileListDownloadAll, StyledFileListItemTextInactive, } from './FileList.styles';
+/**
+
+ @since 10.19.0
+
+ @see [Storybook](https://procore.github.io/core/latest/?path=/story/demos-filelist--demo)
+
+ */
+export var defaultGetViewUrl = function (item) {
+    return item.viewUrl;
+};
+export var defaultGetDownloadUrl = function (item) {
+    return item.downloadUrl;
+};
+export var defaultGetName = function (item) {
+    return item.name;
+};
+export var FileList = React.forwardRef(function FileList(_a, ref) {
+    var items = _a.items, downloadAllUrl = _a.downloadAllUrl, _b = _a.getDownloadUrl, getDownloadUrl = _b === void 0 ? defaultGetDownloadUrl : _b, _c = _a.getViewUrl, getViewUrl = _c === void 0 ? defaultGetViewUrl : _c, _d = _a.getName, getName = _d === void 0 ? defaultGetName : _d, qa = _a.qa, props = __rest(_a, ["items", "downloadAllUrl", "getDownloadUrl", "getViewUrl", "getName", "qa"]);
+    var I18n = useI18nContext();
+    var length = items.length;
+    var isDownloadAllVisible = length > 1 && downloadAllUrl;
+    if (length === 0) {
+        return null;
+    }
+    return (React.createElement(Box, __assign({ ref: ref }, props),
+        isDownloadAllVisible && (React.createElement(StyledFileListDownloadAll, { variant: "tertiary", size: "sm", icon: React.createElement(Archive, null), href: downloadAllUrl, tabIndex: 0 }, I18n.t('core.fileList.downloadAll'))),
+        React.createElement(Box, { as: "ul" }, items.map(function (item, i) {
+            var _a;
+            var name = getName(item);
+            var downloadUrl = getDownloadUrl(item);
+            return (React.createElement(Item, { name: name, downloadUrl: getDownloadUrl(item), viewUrl: getViewUrl(item), "data-qa": (_a = qa === null || qa === void 0 ? void 0 : qa.item) === null || _a === void 0 ? void 0 : _a.call(qa, item), key: "".concat(name, "-").concat(downloadUrl) }));
+        }))));
+});
+export function Item(_a) {
+    var name = _a.name, viewUrl = _a.viewUrl, downloadUrl = _a.downloadUrl, props = __rest(_a, ["name", "viewUrl", "downloadUrl"]);
+    var I18n = useI18nContext();
+    return (React.createElement(StyledFileListItem, __assign({}, props),
+        viewUrl ? (React.createElement(Typography, { intent: "body", weight: "semibold" },
+            React.createElement(Link, { href: viewUrl, target: "_blank", tabIndex: 0 }, name))) : (React.createElement(Tooltip, { overlay: I18n.t('core.fileList.noPreview') },
+            React.createElement(Typography, { intent: "body", color: "gray15" },
+                React.createElement(StyledFileListItemTextInactive, { tabIndex: 0 }, name)))),
+        downloadUrl && (React.createElement(Tooltip, { overlay: I18n.t('core.fileList.download') },
+            React.createElement(StyledFileListItemDownloadIcon, { "aria-label": I18n.t('core.fileList.download'), href: downloadUrl, icon: React.createElement(Download, { size: "sm" }), size: "sm", variant: "tertiary" })))));
+}
+//# sourceMappingURL=FileList.js.map

package/dist/esm/components/FileList/FileList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileList.js","sourceRoot":"","sources":["../../../../src/components/FileList/FileList.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/FileList/FileList.styles.d.ts

@@ -0,0 +1,4 @@
+export declare const StyledFileListDownloadAll: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../Button").LinkButtonProps & import("react").RefAttributes<HTMLAnchorElement>>, any, {}, never>;
+export declare const StyledFileListItem: import("styled-components").StyledComponent<"li", any, {}, never>;
+export declare const StyledFileListItemTextInactive: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const StyledFileListItemDownloadIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../Button").LinkButtonProps & import("react").RefAttributes<HTMLAnchorElement>>, any, {}, never>;

package/dist/esm/components/FileList/FileList.styles.js

@@ -0,0 +1,13 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled from 'styled-components';
+import { spacing } from '../../styles/spacing';
+import { LinkButton } from '../Button';
+export var StyledFileListDownloadAll = styled(LinkButton)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-bottom: ", "px;\n"], ["\n  margin-bottom: ", "px;\n"])), spacing.xs);
+export var StyledFileListItem = styled.li(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  margin-bottom: ", "px;\n  word-break: break-word;\n\n  &:last-child {\n    margin-bottom: 0;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  margin-bottom: ", "px;\n  word-break: break-word;\n\n  &:last-child {\n    margin-bottom: 0;\n  }\n"])), spacing.xs);
+export var StyledFileListItemTextInactive = styled.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  cursor: pointer;\n"], ["\n  cursor: pointer;\n"])));
+export var StyledFileListItemDownloadIcon = styled(LinkButton)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin-left: ", "px;\n  align-self: flex-start;\n"], ["\n  margin-left: ", "px;\n  align-self: flex-start;\n"])), spacing.sm);
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+//# sourceMappingURL=FileList.styles.js.map

package/dist/esm/components/FileList/FileList.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileList.styles.js","sourceRoot":"","sources":["../../../../src/components/FileList/FileList.styles.ts"],"names":[],"mappings":";;;;AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAA;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAA;AAEtC,MAAM,CAAC,IAAM,yBAAyB,GAAG,MAAM,CAAC,UAAU,CAAC,iGAAA,qBACxC,EAAU,OAC5B,KADkB,OAAO,CAAC,EAAE,CAC5B,CAAA;AAED,MAAM,CAAC,IAAM,kBAAkB,GAAG,MAAM,CAAC,EAAE,sNAAA,+DAGxB,EAAU,kFAM5B,KANkB,OAAO,CAAC,EAAE,CAM5B,CAAA;AAED,MAAM,CAAC,IAAM,8BAA8B,GAAG,MAAM,CAAC,IAAI,2FAAA,wBAExD,IAAA,CAAA;AAED,MAAM,CAAC,IAAM,8BAA8B,GAAG,MAAM,CAAC,UAAU,CAAC,0HAAA,mBAC/C,EAAU,kCAE1B,KAFgB,OAAO,CAAC,EAAE,CAE1B,CAAA"}

package/dist/esm/components/FileList/FileList.types.d.ts

@@ -0,0 +1,51 @@
+interface QaTags {
+    /**
+     * @since 10.19.0
+     */
+    item?: (item: FileListItemProps) => string;
+}
+export interface FileListItemProps {
+    /**
+     * @since 10.19.0
+     */
+    name: string;
+    /**
+     * @since 10.19.0
+     */
+    downloadUrl?: string;
+    /**
+     * @since 10.22.0
+     */
+    viewUrl?: string;
+}
+export interface FileListProps {
+    /**
+     * "Download All" link URL
+     * @since 10.19.0
+     */
+    downloadAllUrl?: string;
+    /**
+     * @since 10.19.0
+     */
+    items: FileListItemProps[];
+    /**
+     * @since 10.19.0
+     */
+    qa?: QaTags;
+    /**
+     * A function returning file list item's view URL
+     * @since 10.22.0
+     */
+    getViewUrl?: (item: FileListItemProps) => string;
+    /**
+     * A function returning file list item's download URL
+     * @since 10.22.0
+     */
+    getDownloadUrl?: (item: FileListItemProps) => string;
+    /**
+     * A function returning file list item's name
+     * @since 10.22.0
+     */
+    getName?: (item: FileListItemProps) => string;
+}
+export {};

package/dist/esm/components/FileList/FileList.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=FileList.types.js.map

package/dist/esm/components/FileList/FileList.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileList.types.js","sourceRoot":"","sources":["../../../../src/components/FileList/FileList.types.tsx"],"names":[],"mappings":""}

package/dist/esm/components/FileList/index.d.ts

@@ -0,0 +1,2 @@
+export { FileList as default, FileList } from './FileList';
+export { FileListProps } from './FileList.types';

package/dist/esm/components/FileList/index.js

@@ -0,0 +1,2 @@
+export { FileList as default, FileList } from './FileList';
+//# sourceMappingURL=index.js.map

package/dist/esm/components/FileList/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/FileList/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,IAAI,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA"}

package/dist/esm/components/FileList/storybook/fileListMockData.d.ts

@@ -0,0 +1,5 @@
+export declare const items: {
+    name: string;
+    downloadUrl: string;
+    viewUrl: string;
+}[];

package/dist/esm/components/FileList/storybook/fileListMockData.js

@@ -0,0 +1,39 @@
+export var items = [
+    {
+        name: 'IMG-0124.png',
+        downloadUrl: '/download_a',
+        viewUrl: '/preview_a',
+    },
+    {
+        name: 'jobsite-visit.pdf',
+        downloadUrl: '/download_b',
+        viewUrl: '/preview_b',
+    },
+    {
+        name: 'non-previewable-file.exe',
+        downloadUrl: '/download_c',
+        viewUrl: '',
+    },
+    {
+        name: 'file-with-very-long-name-that-will-wrap-onto-infinite-lines forever-depending-on-viewport-width.png',
+        downloadUrl: '/download_d',
+        viewUrl: '/preview_d',
+    },
+    {
+        name: 'IMG-2202.heif',
+        downloadUrl: '/download_e',
+        viewUrl: '/preview_e',
+    },
+    {
+        name: 'AC01-DRAWING-COVER-SHEET.pdf',
+        downloadUrl: '/download_f',
+        viewUrl: '/preview_f',
+    },
+    {
+        name: 'IMG-01.png',
+        downloadUrl: '/download_g',
+        viewUrl: '/preview_g',
+    },
+    { name: 'permit.docx', downloadUrl: '/download_h', viewUrl: '' },
+];
+//# sourceMappingURL=fileListMockData.js.map

package/dist/esm/components/FileList/storybook/fileListMockData.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fileListMockData.js","sourceRoot":"","sources":["../../../../../src/components/FileList/storybook/fileListMockData.tsx"],"names":[],"mappings":"AAAA,MAAM,CAAC,IAAM,KAAK,GAAG;IACnB;QACE,IAAI,EAAE,cAAc;QACpB,WAAW,EAAE,aAAa;QAC1B,OAAO,EAAE,YAAY;KACtB;IACD;QACE,IAAI,EAAE,mBAAmB;QACzB,WAAW,EAAE,aAAa;QAC1B,OAAO,EAAE,YAAY;KACtB;IACD;QACE,IAAI,EAAE,0BAA0B;QAChC,WAAW,EAAE,aAAa;QAC1B,OAAO,EAAE,EAAE;KACZ;IACD;QACE,IAAI,EAAE,qGAAqG;QAC3G,WAAW,EAAE,aAAa;QAC1B,OAAO,EAAE,YAAY;KACtB;IACD;QACE,IAAI,EAAE,eAAe;QACrB,WAAW,EAAE,aAAa;QAC1B,OAAO,EAAE,YAAY;KACtB;IACD;QACE,IAAI,EAAE,8BAA8B;QACpC,WAAW,EAAE,aAAa;QAC1B,OAAO,EAAE,YAAY;KACtB;IACD;QACE,IAAI,EAAE,YAAY;QAClB,WAAW,EAAE,aAAa;QAC1B,OAAO,EAAE,YAAY;KACtB;IACD,EAAE,IAAI,EAAE,aAAa,EAAE,WAAW,EAAE,aAAa,EAAE,OAAO,EAAE,EAAE,EAAE;CACjE,CAAA"}

package/dist/esm/components/FileSelect/FileExplorer/FileExplorer.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { FileExplorerProps } from './FileExplorer.types';
+export declare const FileExplorer: React.ForwardRefExoticComponent<FileExplorerProps & React.RefAttributes<HTMLDivElement>>;

package/dist/esm/components/FileSelect/FileExplorer/FileExplorer.js

@@ -0,0 +1,75 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import { useI18nContext } from '../../../state/I18n';
+import { Button } from '../../Button';
+import { FileExplorerSidebar } from '../FileExplorer/FileExplorerSidebar';
+import { Modal } from '../../Modal';
+import { Tooltip } from '../../Tooltip';
+import { Typography } from '../../Typography/Typography';
+import { FileExplorerModal } from './FileExplorerModal';
+import { StyledModalHeader, StyledModalBody, StyledModalInnerBody, StyledModalContent, StyledSource, StyledAttachButton, } from './FileExplorer.styles';
+export var FileExplorer = React.forwardRef(function FileExplorer(_a, ref) {
+    var _b = _a.maxFileNumber, maxFileNumber = _b === void 0 ? Infinity : _b, children = _a.children, onSubmit = _a.onSubmit, sources = _a.sources, isOpen = _a.isOpen, currentSource = _a.currentSource, onCurrentSourceChange = _a.onCurrentSourceChange, onModalVisibilityChange = _a.onModalVisibilityChange, unsubmittedValueCount = _a.unsubmittedValueCount, qa = _a.qa, props = __rest(_a, ["maxFileNumber", "children", "onSubmit", "sources", "isOpen", "currentSource", "onCurrentSourceChange", "onModalVisibilityChange", "unsubmittedValueCount", "qa"]);
+    var I18n = useI18nContext();
+    var hasPendingUploadSources = sources.some(function (_a) {
+        var isUploading = _a.isUploading;
+        return isUploading;
+    });
+    var isAttachButtonDisabled = hasPendingUploadSources || unsubmittedValueCount === 0;
+    return (React.createElement(FileExplorerModal, __assign({}, props, { ref: ref, open: isOpen, onKeyDown: function (e) {
+            if (e.key === 'Esc' || e.key === 'Escape') {
+                onModalVisibilityChange(false);
+            }
+        } }),
+        React.createElement(StyledModalHeader, { onClose: function () {
+                onModalVisibilityChange(false);
+            } }, I18n.t('core.fileExplorer.modalTitle')),
+        React.createElement(StyledModalBody, null,
+            React.createElement(StyledModalInnerBody, null,
+                React.createElement(FileExplorerSidebar, { value: currentSource, onChange: onCurrentSourceChange, sources: sources, isOpen: isOpen }),
+                React.createElement(StyledModalContent, { tabIndex: -1 },
+                    React.createElement(StyledSource, null, children)))),
+        React.createElement(Modal.Footer, null,
+            React.createElement(Modal.FooterNotation, null,
+                React.createElement(Typography, { color: "gray45", italic: true }, maxFileNumber === Infinity
+                    ? I18n.t('core.fileExplorer.filesSelected', {
+                        count: unsubmittedValueCount,
+                    })
+                    : I18n.t('core.fileExplorer.filesSelectedWithLimit', {
+                        count: unsubmittedValueCount,
+                        maxFileNumber: maxFileNumber,
+                    }))),
+            React.createElement(Modal.FooterButtons, null,
+                React.createElement(Button, { "data-qa": qa === null || qa === void 0 ? void 0 : qa.cancelButton, tabIndex: -1, variant: "tertiary", onClick: function () {
+                        onModalVisibilityChange(false);
+                    } }, I18n.t('core.fileExplorer.cancelAction')),
+                React.createElement(Tooltip, { showKeys: [], trigger: isAttachButtonDisabled ? 'hover' : 'none', overlay: hasPendingUploadSources
+                        ? I18n.t('core.fileExplorer.filesPendingUpload')
+                        : I18n.t('core.fileExplorer.noSelectedItems') },
+                    React.createElement(StyledAttachButton, null,
+                        React.createElement(Button, { "data-qa": qa === null || qa === void 0 ? void 0 : qa.attachButton, variant: "primary", disabled: isAttachButtonDisabled, onClick: function () {
+                                onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit();
+                            } }, I18n.t('core.fileExplorer.attachAction'))))))));
+});
+//# sourceMappingURL=FileExplorer.js.map

package/dist/esm/components/FileSelect/FileExplorer/FileExplorer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileExplorer.js","sourceRoot":"","sources":["../../../../../src/components/FileSelect/FileExplorer/FileExplorer.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/FileSelect/FileExplorer/FileExplorer.styles.d.ts

@@ -0,0 +1,15 @@
+export declare const modalBodyHeight = 460;
+export declare const modalWidth: number;
+export declare const StyledModalOverlay: import("styled-components").StyledComponent<"div", any, {
+    $open: boolean;
+}, never>;
+export declare const StyledModalContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../Modal/Modal.types").ModalContainerProps & import("react").RefAttributes<HTMLDivElement>>, any, Partial<import("../../Modal/Modal.types").ModalContainerProps & import("react").RefAttributes<HTMLDivElement>> & {
+    [others: string]: any;
+}, string | number>;
+export declare const StyledModalBody: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../Modal/Modal.types").ModalBodyProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
+export declare const StyledModalInnerBody: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledModalHeader: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../Modal/Modal.types").ModalCloseableHeaderProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
+export declare const StyledModalContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledSource: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledAttachButton: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledFileTreeSpinner: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/esm/components/FileSelect/FileExplorer/FileExplorer.styles.js

@@ -0,0 +1,33 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled from 'styled-components';
+import { colors } from '../../../styles/colors';
+import { spacing } from '../../../styles/spacing';
+import { Modal } from '../../Modal';
+export var modalBodyHeight = 460;
+var contentWidth = 632;
+var sidebarWidth = 248;
+export var modalWidth = contentWidth + sidebarWidth;
+export var StyledModalOverlay = styled(Modal.Overlay)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.3s linear;\n  visibility: hidden;\n\n  ", "\n"], ["\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.3s linear;\n  visibility: hidden;\n\n  ", "\n"
+    // fix IE11 modal width
+])), function (props) {
+    return props.$open &&
+        "\n  opacity: 1;\n  pointer-events: all;\n  visibility: visible;\n  ";
+});
+// fix IE11 modal width
+export var StyledModalContainer = styled(Modal.Container).attrs(function (props) {
+    return ({
+        style: { width: "".concat(modalWidth, "px") },
+    });
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject([""], [""])));
+export var StyledModalBody = styled(Modal.Body)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: ", "px;\n  margin: 0;\n  max-width: none;\n  padding: 0;\n  border-bottom: 1px solid ", ";\n"], ["\n  height: ", "px;\n  margin: 0;\n  max-width: none;\n  padding: 0;\n  border-bottom: 1px solid ", ";\n"])), modalBodyHeight, colors.gray85);
+export var StyledModalInnerBody = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  height: 100%;\n  overflow: hidden;\n"], ["\n  display: flex;\n  flex-direction: row;\n  height: 100%;\n  overflow: hidden;\n"])));
+export var StyledModalHeader = styled(Modal.Header)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  border-bottom: 1px solid ", ";\n"], ["\n  border-bottom: 1px solid ", ";\n"])), colors.gray85);
+export var StyledModalContent = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  width: ", "px;\n  height: 100%;\n  overflow-y: auto;\n  outline: none;\n"], ["\n  display: flex;\n  width: ", "px;\n  height: 100%;\n  overflow-y: auto;\n  outline: none;\n"])), contentWidth);
+export var StyledSource = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  width: ", "px;\n  height: 100%;\n"], ["\n  width: ", "px;\n  height: 100%;\n"])), contentWidth);
+export var StyledAttachButton = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  margin-left: ", "px;\n"], ["\n  margin-left: ", "px;\n"])), spacing.md);
+export var StyledFileTreeSpinner = styled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: ", "px;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: ", "px;\n"])), modalBodyHeight);
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
+//# sourceMappingURL=FileExplorer.styles.js.map

package/dist/esm/components/FileSelect/FileExplorer/FileExplorer.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileExplorer.styles.js","sourceRoot":"","sources":["../../../../../src/components/FileSelect/FileExplorer/FileExplorer.styles.ts"],"names":[],"mappings":";;;;AAAA,OAAO,MAAyB,MAAM,mBAAmB,CAAA;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAA;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAA;AACjD,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAA;AAEnC,MAAM,CAAC,IAAM,eAAe,GAAG,GAAG,CAAA;AAClC,IAAM,YAAY,GAAG,GAAG,CAAA;AACxB,IAAM,YAAY,GAAG,GAAG,CAAA;AACxB,MAAM,CAAC,IAAM,UAAU,GAAG,YAAY,GAAG,YAAY,CAAA;AAErD,MAAM,CAAC,IAAM,kBAAkB,GAAG,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,oLAAoB,2GAMvE,EAMD,IACF;IAED,uBAAuB;KATnB,UAAC,KAAK;IACN,OAAA,KAAK,CAAC,KAAK;QACX,qEAID;AALC,CAKD,CACF,CAAA;AAED,uBAAuB;AACvB,MAAM,CAAC,IAAM,oBAAoB,GAAG,MAAM,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,KAAK,CAC/D,UAAC,KAAK;IACJ,OAAA,CAAC;QACC,KAAK,EAAE,EAAE,KAAK,EAAE,UAAG,UAAU,OAAI,EAAE;KAClB,CAAA;AAFnB,CAEmB,CACtB,qEAAA,EAAE,IAAA,CAAA;AAEH,MAAM,CAAC,IAAM,eAAe,GAAG,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,6KAAA,cACrC,EAAe,mFAIE,EAAa,KACzC,KALW,eAAe,EAIE,MAAM,CAAC,MAAM,CACzC,CAAA;AAED,MAAM,CAAC,IAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,uJAAA,oFAK7C,IAAA,CAAA;AAED,MAAM,CAAC,IAAM,iBAAiB,GAAG,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,yGAAA,+BACxB,EAAa,KACzC,KAD4B,MAAM,CAAC,MAAM,CACzC,CAAA;AAED,MAAM,CAAC,IAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,mKAAA,+BAEjC,EAAY,+DAItB,KAJU,YAAY,CAItB,CAAA;AAED,MAAM,CAAC,IAAM,YAAY,GAAG,MAAM,CAAC,GAAG,0GAAA,aAC3B,EAAY,wBAEtB,KAFU,YAAY,CAEtB,CAAA;AAED,MAAM,CAAC,IAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,+FAAA,mBAC3B,EAAU,OAC1B,KADgB,OAAO,CAAC,EAAE,CAC1B,CAAA;AAED,MAAM,CAAC,IAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,gKAAA,oFAInC,EAAe,OAC1B,KADW,eAAe,CAC1B,CAAA"}

package/dist/esm/components/FileSelect/FileExplorer/FileExplorer.types.d.ts

@@ -0,0 +1,81 @@
+import { FileSelectSource, SourceId } from '../FileSelect.types';
+import { ListNavigationApi, ListNavigationConfig } from '../../../state/ListNavigation';
+export interface FileExplorerProps {
+    /**
+     * @since 10.19.0
+     */
+    sources: FileSelectSource[];
+    /**
+     * @since 10.19.0
+     */
+    currentSource: SourceId;
+    /**
+     * @since 10.19.0
+     */
+    isOpen: boolean;
+    /**
+     * @since 10.19.0
+     */
+    onCurrentSourceChange: (sourceId: SourceId) => void;
+    /**
+     * @since 10.19.0
+     */
+    unsubmittedValueCount: number;
+    /**
+     * @since 10.19.0
+     */
+    onSubmit?: () => void;
+    /**
+     * @since 10.19.0
+     */
+    children: React.ReactNode;
+    /**
+     * @since 10.19.0
+     */
+    onModalVisibilityChange: (isOpen: boolean) => void;
+    /**
+     * @since 10.19.0
+     */
+    maxFileNumber?: number;
+    /**
+     * @since 10.19.0
+     */
+    qa?: {
+        attachButton?: string;
+        cancelButton?: string;
+    };
+}
+export interface FileExplorerSidebarProps {
+    /**
+     * @since 10.19.0
+     */
+    value: SourceId;
+    /**
+     * @since 10.19.0
+     */
+    onChange: (selectedSource: SourceId) => void;
+    /**
+     * @since 10.19.0
+     */
+    sources: FileSelectSource[];
+    /**
+     * @since 10.19.0
+     */
+    isOpen: boolean;
+}
+export interface SidebarNavigationConfig extends ListNavigationConfig {
+    /**
+     * @since 10.19.0
+     */
+    selectedIndex: number;
+}
+export interface SidebarNavigationApi extends ListNavigationApi {
+    /**
+     * @since 10.19.0
+     */
+    up: () => void;
+    /**
+     * @since 10.19.0
+     */
+    down: () => void;
+}

package/dist/esm/components/FileSelect/FileExplorer/FileExplorer.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=FileExplorer.types.js.map

package/dist/esm/components/FileSelect/FileExplorer/FileExplorer.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileExplorer.types.js","sourceRoot":"","sources":["../../../../../src/components/FileSelect/FileExplorer/FileExplorer.types.ts"],"names":[],"mappings":""}

package/dist/esm/components/FileSelect/FileExplorer/FileExplorerModal.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { DivAttributes } from '../../../utils/types';
+import { ModalProps } from '../../Modal/Modal.types';
+export declare const FileExplorerModal: React.ForwardRefExoticComponent<ModalProps & DivAttributes & React.RefAttributes<HTMLDivElement>>;

package/dist/esm/components/FileSelect/FileExplorer/FileExplorerModal.js

@@ -0,0 +1,38 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import { useScrollLock } from '../../../effects/ScrollLock';
+import { Modal } from '../../Modal';
+import { Portal } from '../../Portal';
+import { StyledModalOverlay, StyledModalContainer } from './FileExplorer.styles';
+function noop() { }
+export var FileExplorerModal = React.forwardRef(function FileExplorerModal(_a, ref) {
+    var children = _a.children, _b = _a.onClickOverlay, onClickOverlay = _b === void 0 ? noop : _b, _c = _a.open, open = _c === void 0 ? false : _c, _d = _a.placement, placement = _d === void 0 ? 'center' : _d, props = __rest(_a, ["children", "onClickOverlay", "open", "placement"]);
+    useScrollLock(open);
+    return (React.createElement(Portal, null,
+        React.createElement(StyledModalOverlay, { "$open": open, ref: ref },
+            React.createElement(Modal.Scrim, { onClick: onClickOverlay }),
+            React.createElement(StyledModalContainer, __assign({}, props, { placement: placement }),
+                React.createElement(Modal.Content, null, children)))));
+});
+//# sourceMappingURL=FileExplorerModal.js.map

package/dist/esm/components/FileSelect/FileExplorer/FileExplorerModal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileExplorerModal.js","sourceRoot":"","sources":["../../../../../src/components/FileSelect/FileExplorer/FileExplorerModal.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAA;AAE3D,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAA;AAEnC,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAA;AACrC,OAAO,EAAE,kBAAkB,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAA;AAEhF,SAAS,IAAI,KAAI,CAAC;AAElB,MAAM,CAAC,IAAM,iBAAiB,GAAG,KAAK,CAAC,UAAU,CAG/C,SAAS,iBAAiB,CAC1B,EAMC,EACD,GAAG;IAND,IAAA,QAAQ,cAAA,EACR,sBAAqB,EAArB,cAAc,mBAAG,IAAI,KAAA,EACrB,YAAY,EAAZ,IAAI,mBAAG,KAAK,KAAA,EACZ,iBAAoB,EAApB,SAAS,mBAAG,QAAQ,KAAA,EACjB,KAAK,cALV,mDAMC,CADS;IAIV,aAAa,CAAC,IAAI,CAAC,CAAA;IAEnB,OAAO,CACL,oBAAC,MAAM;QACL,oBAAC,kBAAkB,aAAQ,IAAI,EAAE,GAAG,EAAE,GAAG;YACvC,oBAAC,KAAK,CAAC,KAAK,IAAC,OAAO,EAAE,cAAc,GAAI;YAExC,oBAAC,oBAAoB,eAAK,KAAK,IAAE,SAAS,EAAE,SAAS;gBACnD,oBAAC,KAAK,CAAC,OAAO,QAAE,QAAQ,CAAiB,CACpB,CACJ,CACd,CACV,CAAA;AACH,CAAC,CAAC,CAAA"}

package/dist/esm/components/FileSelect/FileExplorer/FileExplorerSidebar.d.ts

@@ -0,0 +1,2 @@
+import { FileExplorerSidebarProps } from './FileExplorer.types';
+export declare function FileExplorerSidebar({ value: selectedSource, onChange, sources, isOpen, }: FileExplorerSidebarProps): JSX.Element;

package/dist/esm/components/FileSelect/FileExplorer/FileExplorerSidebar.js

@@ -0,0 +1,67 @@
+import React from 'react';
+import { StyledSidebar, StyledNavigation, StyledSourceItem, } from './FileExplorerSidebar.styles';
+import { useSidebarNavigation } from './useSidebarNavigation';
+export function FileExplorerSidebar(_a) {
+    var selectedSource = _a.value, onChange = _a.onChange, sources = _a.sources, isOpen = _a.isOpen;
+    var _b = React.useState(false), isNavFocused = _b[0], setIsNavFocused = _b[1];
+    var _c = React.useState(true), isFocusVisible = _c[0], setIsFocusVisible = _c[1];
+    var focusedSourceRef = React.useRef(null);
+    var selectedSourceIndex = sources.findIndex(function (_a) {
+        var sourceId = _a.sourceId;
+        return sourceId === selectedSource;
+    });
+    var sidebarNavigation = useSidebarNavigation({
+        initialIndex: selectedSourceIndex,
+        size: sources.length,
+        selectedIndex: selectedSourceIndex,
+    });
+    React.useEffect(function () {
+        sidebarNavigation.set(selectedSourceIndex);
+    }, [selectedSourceIndex]);
+    React.useEffect(function () {
+        if (focusedSourceRef.current && isOpen) {
+            focusedSourceRef.current.focus();
+        }
+    }, [sidebarNavigation.index, isOpen]);
+    React.useEffect(function () {
+        sidebarNavigation.setSize(sources.length);
+    }, [sources.length]);
+    var onKeyDown = function (e) {
+        if (!isNavFocused)
+            return;
+        switch (e.nativeEvent.key) {
+            case 'Enter':
+                e.preventDefault();
+                onChange(sources[sidebarNavigation.index].sourceId);
+                break;
+            case 'ArrowUp':
+            case 'Up':
+                e.preventDefault();
+                sidebarNavigation.up();
+                break;
+            case 'ArrowDown':
+            case 'Down':
+                e.preventDefault();
+                sidebarNavigation.down();
+                break;
+        }
+    };
+    return (React.createElement(StyledSidebar, null,
+        React.createElement(StyledNavigation, null, sources.map(function (source, idx) {
+            var isFocused = idx === sidebarNavigation.index;
+            return (React.createElement(StyledSourceItem, { key: source.sourceId, loading: source.isUploading, error: source.hasError, icon: source.icon, selected: selectedSource === source.sourceId, focused: isNavFocused && isFocusVisible && isFocused, tabIndex: isFocused ? 0 : -1, ref: isFocused ? focusedSourceRef : null, onMouseDown: function () {
+                    // prevent focus blink on the latest focused item
+                    setIsFocusVisible(false);
+                }, onMouseUp: function () {
+                    setIsFocusVisible(true);
+                }, count: source.value.length, onFocus: function () {
+                    setIsNavFocused(true);
+                }, onBlur: function () {
+                    setIsNavFocused(false);
+                }, onKeyDown: onKeyDown, onClick: function () {
+                    sidebarNavigation.set(idx);
+                    onChange(source.sourceId);
+                } }, source.title));
+        }))));
+}
+//# sourceMappingURL=FileExplorerSidebar.js.map

package/dist/esm/components/FileSelect/FileExplorer/FileExplorerSidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileExplorerSidebar.js","sourceRoot":"","sources":["../../../../../src/components/FileSelect/FileExplorer/FileExplorerSidebar.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/FileSelect/FileExplorer/FileExplorerSidebar.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const StyledSidebar: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledNavigation: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledSourceItem: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../../utils/types").DivAttributes & import("../SourceItem/SourceItem").SourceItemProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;

package/dist/esm/components/FileSelect/FileExplorer/FileExplorerSidebar.styles.js

@@ -0,0 +1,13 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled from 'styled-components';
+import { colors } from '../../../styles/colors';
+import { SourceItem } from '../SourceItem/SourceItem';
+var sidebarWidth = 248;
+export var StyledSidebar = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-shrink: 0;\n  width: ", "px;\n  border-right: 1px solid ", ";\n"], ["\n  display: flex;\n  flex-shrink: 0;\n  width: ", "px;\n  border-right: 1px solid ", ";\n"])), sidebarWidth, colors.gray85);
+export var StyledNavigation = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n\n  &:focus {\n    outline: none;\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n\n  &:focus {\n    outline: none;\n  }\n"])));
+export var StyledSourceItem = styled(SourceItem)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 100%;\n"], ["\n  width: 100%;\n"])));
+var templateObject_1, templateObject_2, templateObject_3;
+//# sourceMappingURL=FileExplorerSidebar.styles.js.map

package/dist/esm/components/FileSelect/FileExplorer/FileExplorerSidebar.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileExplorerSidebar.styles.js","sourceRoot":"","sources":["../../../../../src/components/FileSelect/FileExplorer/FileExplorerSidebar.styles.ts"],"names":[],"mappings":";;;;AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAA;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAErD,IAAM,YAAY,GAAG,GAAG,CAAA;AAExB,MAAM,CAAC,IAAM,aAAa,GAAG,MAAM,CAAC,GAAG,+JAAA,kDAG5B,EAAY,iCACK,EAAa,KACxC,KAFU,YAAY,EACK,MAAM,CAAC,MAAM,CACxC,CAAA;AAED,MAAM,CAAC,IAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,4KAAA,yGAQzC,IAAA,CAAA;AAED,MAAM,CAAC,IAAM,gBAAgB,GAAG,MAAM,CAAC,UAAU,CAAC,uFAAA,oBAEjD,IAAA,CAAA"}