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

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

@@ -0,0 +1,66 @@
+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 { Error } from '@procore/core-icons/dist';
+import React from 'react';
+import { OverflowObserver } from '../../../effects/OverflowObserver';
+import { Icon } from '../../Icon';
+import { Spinner } from '../../Spinner';
+import { Tooltip } from '../../Tooltip';
+import { StyledSourceItem, StyledIcon, StyledLabel } from './SourceItem.styles';
+function formatCount(count, truncationThreshold) {
+    if (count === 0) {
+        return '';
+    }
+    else if (count > truncationThreshold) {
+        return "(".concat(truncationThreshold, "+)");
+    }
+    else {
+        return "(".concat(count, ")");
+    }
+}
+export var SourceItem = React.forwardRef(function SourceItem(_a, ref) {
+    var _b = _a.icon, icon = _b === void 0 ? '' : _b, _c = _a.count, count = _c === void 0 ? 0 : _c, _d = _a.countTruncationThreshold, countTruncationThreshold = _d === void 0 ? 99 : _d, _e = _a.loading, loading = _e === void 0 ? false : _e, _f = _a.error, error = _f === void 0 ? false : _f, _g = _a.selected, selected = _g === void 0 ? false : _g, _h = _a.disabled, disabled = _h === void 0 ? false : _h, _j = _a.focused, focused = _j === void 0 ? false : _j, children = _a.children, _k = _a.tabIndex, tabIndex = _k === void 0 ? 0 : _k, props = __rest(_a, ["icon", "count", "countTruncationThreshold", "loading", "error", "selected", "disabled", "focused", "children", "tabIndex"]);
+    var tabIndexAttribute = !disabled ? { tabIndex: tabIndex } : {};
+    var iconElement = (React.createElement(StyledIcon, null, (function () {
+        if (error) {
+            return React.createElement(Error, null);
+        }
+        if (loading) {
+            return React.createElement(Spinner, { size: "xs" });
+        }
+        return typeof icon === 'string' ? React.createElement(Icon, { icon: icon }) : icon;
+    })()));
+    var labelElement = (React.createElement(OverflowObserver, null, function (_a) {
+        var isOverflowing = _a.isOverflowing, ref = _a.ref;
+        var item = React.createElement(StyledLabel, { ref: ref }, children);
+        return isOverflowing ? (React.createElement(Tooltip, { showDelay: 500, trigger: "hover", overlay: React.createElement(Tooltip.Content, null, children) }, item)) : (item);
+    }));
+    var countElement = (React.createElement("div", null,
+        "\u00A0",
+        formatCount(count, countTruncationThreshold)));
+    return (React.createElement(StyledSourceItem, __assign({ ref: ref }, tabIndexAttribute, props, { error: error, selected: selected, disabled: disabled, focused: focused }),
+        iconElement,
+        labelElement,
+        countElement));
+});
+//# sourceMappingURL=SourceItem.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SourceItem.js","sourceRoot":"","sources":["../../../../../src/components/FileSelect/SourceItem/SourceItem.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAA;AAEpE,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAA;AACjC,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AAsC/E,SAAS,WAAW,CAAC,KAAa,EAAE,mBAA2B;IAC7D,IAAI,KAAK,KAAK,CAAC,EAAE;QACf,OAAO,EAAE,CAAA;KACV;SAAM,IAAI,KAAK,GAAG,mBAAmB,EAAE;QACtC,OAAO,WAAI,mBAAmB,OAAI,CAAA;KACnC;SAAM;QACL,OAAO,WAAI,KAAK,MAAG,CAAA;KACpB;AACH,CAAC;AAED,MAAM,CAAC,IAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAGxC,SAAS,UAAU,CACnB,EAYC,EACD,GAAG;IAZD,IAAA,YAAS,EAAT,IAAI,mBAAG,EAAE,KAAA,EACT,aAAS,EAAT,KAAK,mBAAG,CAAC,KAAA,EACT,gCAA6B,EAA7B,wBAAwB,mBAAG,EAAE,KAAA,EAC7B,eAAe,EAAf,OAAO,mBAAG,KAAK,KAAA,EACf,aAAa,EAAb,KAAK,mBAAG,KAAK,KAAA,EACb,gBAAgB,EAAhB,QAAQ,mBAAG,KAAK,KAAA,EAChB,gBAAgB,EAAhB,QAAQ,mBAAG,KAAK,KAAA,EAChB,eAAe,EAAf,OAAO,mBAAG,KAAK,KAAA,EACf,QAAQ,cAAA,EACR,gBAAY,EAAZ,QAAQ,mBAAG,CAAC,KAAA,EACT,KAAK,cAXV,4HAYC,CADS;IAIV,IAAM,iBAAiB,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,QAAQ,UAAA,EAAE,CAAC,CAAC,CAAC,EAAE,CAAA;IAEvD,IAAM,WAAW,GAAG,CAClB,oBAAC,UAAU,QACR,CAAC;QACA,IAAI,KAAK,EAAE;YACT,OAAO,oBAAC,KAAK,OAAG,CAAA;SACjB;QAED,IAAI,OAAO,EAAE;YACX,OAAO,oBAAC,OAAO,IAAC,IAAI,EAAC,IAAI,GAAG,CAAA;SAC7B;QAED,OAAO,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,oBAAC,IAAI,IAAC,IAAI,EAAE,IAAI,GAAI,CAAC,CAAC,CAAC,IAAI,CAAA;IAC/D,CAAC,CAAC,EAAE,CACO,CACd,CAAA;IAED,IAAM,YAAY,GAAG,CACnB,oBAAC,gBAAgB,QACd,UAAC,EAA2B;YAAzB,aAAa,mBAAA,EAAE,GAAG,SAAA;QACpB,IAAM,IAAI,GAAG,oBAAC,WAAW,IAAC,GAAG,EAAE,GAAG,IAAG,QAAQ,CAAe,CAAA;QAE5D,OAAO,aAAa,CAAC,CAAC,CAAC,CACrB,oBAAC,OAAO,IACN,SAAS,EAAE,GAAG,EACd,OAAO,EAAC,OAAO,EACf,OAAO,EAAE,oBAAC,OAAO,CAAC,OAAO,QAAE,QAAQ,CAAmB,IAErD,IAAI,CACG,CACX,CAAC,CAAC,CAAC,CACF,IAAI,CACL,CAAA;IACH,CAAC,CACgB,CACpB,CAAA;IAED,IAAM,YAAY,GAAG,CACnB;;QAAY,WAAW,CAAC,KAAK,EAAE,wBAAwB,CAAC,CAAO,CAChE,CAAA;IAED,OAAO,CACL,oBAAC,gBAAgB,aACf,GAAG,EAAE,GAAG,IACJ,iBAAiB,EACjB,KAAK,IACT,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO;QAEf,WAAW;QACX,YAAY;QACZ,YAAY,CACI,CACpB,CAAA;AACH,CAAC,CAAC,CAAA"}

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

@@ -0,0 +1,8 @@
+export declare const StyledSourceItem: import("styled-components").StyledComponent<"div", any, {
+    selected: boolean;
+    error: boolean;
+    disabled: boolean;
+    focused: boolean;
+}, never>;
+export declare const StyledIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledLabel: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,31 @@
+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, { css } from 'styled-components';
+import { colors } from '../../../styles/colors';
+import { getEllipsis, getFocus } from '../../../styles/mixins';
+import { spacing } from '../../../styles/spacing';
+import { getTypographyIntent } from '../../Typography/Typography.styles';
+var sourceItemHeight = 48;
+var focused = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  // compensate for border shift\n  padding: 0 ", "px 0 ", "px;\n"], ["\n  ", "\n  // compensate for border shift\n  padding: 0 ", "px 0 ", "px;\n"])), getFocus(), spacing.xl - 1, spacing.xxl - 1);
+export var StyledSourceItem = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  padding: 0 ", "px 0 ", "px;\n  color: ", ";\n  ", "\n  cursor: pointer;\n  height: ", "px;\n\n  &:before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    display: block;\n    width: 4px;\n    height: 100%;\n    background-color: ", ";\n    transform: scaleX(0);\n    transform-origin: center left;\n    transition: transform 200ms ease-out;\n    // prevent a one-pixel gap between focused and selected source items due to the box-shadow\n    z-index: 1;\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n  \n\n  ", "\n\n  &:focus {\n    ", "\n  }\n"], ["\n  position: relative;\n  display: flex;\n  align-items: center;\n  padding: 0 ", "px 0 ", "px;\n  color: ", ";\n  ", "\n  cursor: pointer;\n  height: ", "px;\n\n  &:before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    display: block;\n    width: 4px;\n    height: 100%;\n    background-color: ", ";\n    transform: scaleX(0);\n    transform-origin: center left;\n    transition: transform 200ms ease-out;\n    // prevent a one-pixel gap between focused and selected source items due to the box-shadow\n    z-index: 1;\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n  \n\n  ", "\n\n  &:focus {\n    ", "\n  }\n"])), spacing.xl, spacing.xxl, colors.gray45, getTypographyIntent('body'), sourceItemHeight, colors.blue45, function (_a) {
+    var selected = _a.selected;
+    return selected &&
+        "\n    font-weight: 700;\n    background-color: ".concat(colors.blue96, ";\n    color: ").concat(colors.blue45, ";\n\n    ").concat(StyledIcon, " {\n      color: ").concat(colors.blue50, ";\n    }\n\n    &:before {\n      transform: scaleX(1);\n    }\n  ");
+}, function (_a) {
+    var error = _a.error;
+    return error && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      color: ", ";\n\n      ", " {\n        color: ", ";\n      }\n    "], ["\n      color: ", ";\n\n      ", " {\n        color: ", ";\n      }\n    "])), colors.red50, StyledIcon, colors.red50);
+}, function (_a) {
+    var disabled = _a.disabled;
+    return disabled &&
+        "\n    cursor: not-allowed;\n    color: ".concat(colors.gray70, ";\n    ").concat(StyledIcon, " {\n      color: ").concat(colors.gray85, ";\n    }\n  ");
+}, function (_a) {
+    var selected = _a.selected, disabled = _a.disabled, error = _a.error;
+    return !selected && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      &:hover {\n        transition: background-color 150ms ease-out 150ms, color 150ms ease-out;\n\n        ", "\n\n        ", "\n      }\n    "], ["\n      &:hover {\n        transition: background-color 150ms ease-out 150ms, color 150ms ease-out;\n\n        ", "\n\n        ", "\n      }\n    "])), !disabled && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n          background-color: ", ";\n        "], ["\n          background-color: ", ";\n        "])), colors.gray96), !disabled &&
+        !error && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n          color: ", ";\n        "], ["\n          color: ", ";\n        "])), colors.gray15));
+}, function (props) { return props.focused && focused; }, focused);
+export var StyledIcon = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: 48px;\n  height: 48px;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: 48px;\n  height: 48px;\n"])));
+export var StyledLabel = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), getEllipsis());
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
+//# sourceMappingURL=SourceItem.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SourceItem.styles.js","sourceRoot":"","sources":["../../../../../src/components/FileSelect/SourceItem/SourceItem.styles.ts"],"names":[],"mappings":";;;;AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAA;AAC/C,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAA;AAC9D,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAA;AACjD,OAAO,EAAE,mBAAmB,EAAE,MAAM,oCAAoC,CAAA;AAExE,IAAM,gBAAgB,GAAG,EAAE,CAAA;AAE3B,IAAM,OAAO,GAAG,GAAG,gJAAA,MACf,EAAU,mDAEC,EAAc,OAAQ,EAAe,OACnD,KAHG,QAAQ,EAAE,EAEC,OAAO,CAAC,EAAE,GAAG,CAAC,EAAQ,OAAO,CAAC,GAAG,GAAG,CAAC,CACnD,CAAA;AAED,MAAM,CAAC,IAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,ssBAKxC,kFAIa,EAAU,OAAQ,EAAW,gBACjC,EAAa,OACpB,EAA2B,kCAEnB,EAAgB,4KAUJ,EAAa,yOAQjC,EAcD,QAEC,EAQC,QAED,EAQD,QAEC,EAiBC,YAGD,EAAmC,uBAGjC,EAAO,SAEZ,KAnFc,OAAO,CAAC,EAAE,EAAQ,OAAO,CAAC,GAAG,EACjC,MAAM,CAAC,MAAM,EACpB,mBAAmB,CAAC,MAAM,CAAC,EAEnB,gBAAgB,EAUJ,MAAM,CAAC,MAAM,EAQjC,UAAC,EAAY;QAAV,QAAQ,cAAA;IACX,OAAA,QAAQ;QACR,yDAEoB,MAAM,CAAC,MAAM,2BACxB,MAAM,CAAC,MAAM,sBAEpB,UAAU,8BACD,MAAM,CAAC,MAAM,uEAMzB;AAbC,CAaD,EAEC,UAAC,EAAS;QAAP,KAAK,WAAA;IACR,OAAA,KAAK,IACL,GAAG,8IAAA,iBACQ,EAAY,aAEnB,EAAU,qBACD,EAAY,kBAExB,KALU,MAAM,CAAC,KAAK,EAEnB,UAAU,EACD,MAAM,CAAC,KAAK,CAExB;AAPD,CAOC,EAED,UAAC,EAAY;QAAV,QAAQ,cAAA;IACX,OAAA,QAAQ;QACR,iDAES,MAAM,CAAC,MAAM,oBACpB,UAAU,8BACD,MAAM,CAAC,MAAM,iBAEzB;AAPC,CAOD,EAEC,UAAC,EAA6B;QAA3B,QAAQ,cAAA,EAAE,QAAQ,cAAA,EAAE,KAAK,WAAA;IAC5B,OAAA,CAAC,QAAQ,IACT,GAAG,uNAAA,iHAIG,EAGD,cAEC,EAID,iBAEJ,KAXK,CAAC,QAAQ,IACX,GAAG,kHAAA,gCACmB,EAAa,aAClC,KADqB,MAAM,CAAC,MAAM,CAClC,EAEC,CAAC,QAAQ;QACX,CAAC,KAAK,IACN,GAAG,uGAAA,qBACQ,EAAa,aACvB,KADU,MAAM,CAAC,MAAM,CACvB,CAEJ;AAhBD,CAgBC,EAGD,UAAC,KAAK,IAAK,OAAA,KAAK,CAAC,OAAO,IAAI,OAAO,EAAxB,CAAwB,EAGjC,OAAO,CAEZ,CAAA;AAED,MAAM,CAAC,IAAM,UAAU,GAAG,MAAM,CAAC,GAAG,iMAAA,8HAOnC,IAAA,CAAA;AAED,MAAM,CAAC,IAAM,WAAW,GAAG,MAAM,CAAC,GAAG,+EAAA,MACjC,EAAa,IAChB,KADG,WAAW,EAAE,CAChB,CAAA"}

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

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ThumbnailListProps } from './ThumbnailList.types';
+export declare const defaultListHeight = 305;
+export declare const defaultRowHeight = 56;
+export declare const ThumbnailList: React.ForwardRefExoticComponent<ThumbnailListProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,113 @@
+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 { clamp, isNil } from 'ramda';
+import React from 'react';
+import { ProgressBar } from '../../ProgressBar';
+import { StyledDeleteIcon, StyledProgress, StyledThumbnail, StyledThumbnailList, StyledThumbnailListContainer, StyledThumbnailListItem, } from './ThumbnailList.styles';
+export var defaultListHeight = 305;
+export var defaultRowHeight = 56;
+var Row = function (_a) {
+    var _b = _a.data, items = _b.items, onCancel = _b.onCancel, isFocused = _b.isFocused, setNavigationPosition = _b.setNavigationPosition, style = _a.style, index = _a.index;
+    var item = items[index];
+    var src = item.src, name = item.name, progress = item.progress, error = item.error;
+    var focused = isFocused(index);
+    return (React.createElement("div", { style: style, onMouseEnter: function () { return setNavigationPosition(index); } },
+        React.createElement(StyledThumbnailListItem, { error: error, focused: focused },
+            React.createElement(StyledThumbnail, { src: src, size: "sm", clickable: false, caption: name, error: error }),
+            React.createElement(StyledProgress, null, error ||
+                (!isNil(progress) && React.createElement(ProgressBar, { value: progress, animated: true }))),
+            onCancel && (React.createElement(StyledDeleteIcon, { icon: "x", variant: "hover-circle", clickable: true, onClick: function () { return onCancel(item); } })))));
+};
+// See https://github.com/bvaughn/react-window/issues/130
+var outerElementType = React.forwardRef(function (props, ref) { return React.createElement("div", __assign({ ref: ref, tabIndex: -1 }, props)); });
+var getNewNavigationPosition = function (next, max) {
+    return clamp(0, Math.max(0, max - 1), next);
+};
+export var ThumbnailList = React.forwardRef(function (_a, ref) {
+    var items = _a.items, onCancel = _a.onCancel, _b = _a.listHeight, listHeight = _b === void 0 ? defaultListHeight : _b, _c = _a.rowHeight, rowHeight = _c === void 0 ? defaultRowHeight : _c, onKeyDown = _a.onKeyDown, onFocus = _a.onFocus, onBlur = _a.onBlur, props = __rest(_a, ["items", "onCancel", "listHeight", "rowHeight", "onKeyDown", "onFocus", "onBlur"]);
+    var rowCount = items.length;
+    var height = Math.min(rowCount * defaultRowHeight, listHeight);
+    var listRef = React.useRef(null);
+    var listInstance = listRef.current;
+    var _d = React.useState(false), isListFocused = _d[0], setIsListFocused = _d[1];
+    var _e = React.useState(0), navigationPosition = _e[0], setNavigationPosition = _e[1];
+    var isFocused = React.useCallback(function (index) { return isListFocused && navigationPosition === index; }, [isListFocused, navigationPosition]);
+    var updateNavigationPosition = React.useCallback(function (newPosition) {
+        setNavigationPosition(newPosition);
+        listInstance === null || listInstance === void 0 ? void 0 : listInstance.scrollToItem(newPosition);
+    }, [listInstance]);
+    React.useEffect(function () {
+        if (isListFocused) {
+            listInstance === null || listInstance === void 0 ? void 0 : listInstance.scrollToItem(navigationPosition);
+        }
+    }, [isListFocused]);
+    React.useEffect(function () {
+        if (rowCount > 0 && rowCount <= navigationPosition) {
+            setNavigationPosition(rowCount - 1);
+        }
+        if (rowCount <= 0) {
+            setIsListFocused(false);
+        }
+    }, [rowCount]);
+    var handleNavigation = function (e) {
+        if (!isListFocused)
+            return;
+        switch (e.key) {
+            case 'Enter':
+                e.preventDefault();
+                var highlightedItem = items[navigationPosition];
+                onCancel === null || onCancel === void 0 ? void 0 : onCancel(highlightedItem);
+                // Ensure scrolling only after the item was deleted
+                setTimeout(function () {
+                    updateNavigationPosition(getNewNavigationPosition(navigationPosition, rowCount - 1));
+                }, 0);
+                if (rowCount - 1 === 0) {
+                    setIsListFocused(false);
+                }
+                break;
+            case 'ArrowDown':
+            case 'Down':
+                e.preventDefault();
+                updateNavigationPosition(getNewNavigationPosition(navigationPosition + 1, rowCount));
+                break;
+            case 'ArrowUp':
+            case 'Up':
+                e.preventDefault();
+                updateNavigationPosition(getNewNavigationPosition(navigationPosition - 1, rowCount));
+                break;
+        }
+        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
+    };
+    if (!rowCount)
+        return null;
+    return (React.createElement(StyledThumbnailListContainer, __assign({ tabIndex: rowCount !== 0 ? 0 : -1, onFocus: function (e) {
+            setIsListFocused(true);
+            onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
+        }, onBlur: function (e) {
+            setIsListFocused(false);
+            onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
+        }, onKeyDown: handleNavigation }, props, { ref: ref }),
+        React.createElement(StyledThumbnailList, { ref: listRef, width: "100%", height: height, itemCount: rowCount, itemSize: rowHeight, itemData: { items: items, onCancel: onCancel, isFocused: isFocused, setNavigationPosition: setNavigationPosition }, style: { minHeight: height }, outerElementType: outerElementType }, Row)));
+});
+ThumbnailList.displayName = 'ThumbnailList';
+//# sourceMappingURL=ThumbnailList.js.map

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

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

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

@@ -0,0 +1,15 @@
+import { FixedSizeList as List } from 'react-window';
+export declare const StyledThumbnailListContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledThumbnailList: import("styled-components").StyledComponent<typeof List, any, {}, never>;
+export declare const StyledThumbnail: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../Thumbnail").ThumbnailProps & import("../../../utils/types").DivAttributes & import("react").RefAttributes<HTMLDivElement>> & {
+    Placeholder: import("react").ForwardRefExoticComponent<Omit<import("../../Thumbnail").ThumbnailProps, "src"> & {
+        filename?: string | undefined;
+        variant?: import("../../Thumbnail/DocumentIcon").DocumentIconVariant | undefined;
+    } & import("../../../utils/types").DivAttributes & import("react").RefAttributes<HTMLDivElement>>;
+}, any, {}, never>;
+export declare const StyledProgress: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledThumbnailListItem: import("styled-components").StyledComponent<"div", any, {
+    focused: boolean;
+    error: boolean;
+}, never>;
+export declare const StyledDeleteIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../../utils/types").SpanAttributes & import("../../Icon").IconProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;

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

@@ -0,0 +1,36 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { FixedSizeList as List } from 'react-window';
+import styled from 'styled-components';
+import { colors } from '../../../styles/colors';
+import { spacing } from '../../../styles/spacing';
+import { Icon } from '../../Icon';
+import { Thumbnail } from '../../Thumbnail';
+import { getTypographyIntent } from '../../Typography/Typography.styles';
+export var StyledThumbnailListContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  outline: none;\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  outline: none;\n"])));
+export var StyledThumbnailList = styled(List)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  outline: none;\n"], ["\n  outline: none;\n"])));
+export var StyledThumbnail = styled(Thumbnail)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  flex-grow: 1;\n  justify-content: flex-start;\n"], ["\n  flex-grow: 1;\n  justify-content: flex-start;\n"])));
+export var StyledProgress = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width: 146px;\n  padding: 0 ", "px 0 ", "px;\n  margin-left: auto;\n"], ["\n  width: 146px;\n  padding: 0 ", "px 0 ", "px;\n  margin-left: auto;\n"])), spacing.lg, spacing.xl);
+export var StyledThumbnailListItem = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  flex-grow: 1;\n  align-items: center;\n  padding: ", "px ", "px ", "px ", "px;\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n"], ["\n  display: flex;\n  flex-grow: 1;\n  align-items: center;\n  padding: ", "px ", "px ", "px ", "px;\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n"])), spacing.sm, spacing.lg, spacing.sm, spacing.sm, getTypographyIntent('body'), function (_a) {
+    var focused = _a.focused;
+    return focused &&
+        "\n      ".concat(StyledDeleteIcon, " {\n        color: ").concat(colors.white, ";\n\n        background-color: ").concat(colors.gray50, ";\n        border-radius: 50%;\n\n        path {\n          fill: ").concat(colors.white, ";\n        }\n      }\n    ");
+}, function (_a) {
+    var error = _a.error;
+    return !error &&
+        "\n      &:hover {\n        background-color: ".concat(colors.gray96, ";\n      }\n    ");
+}, function (_a) {
+    var focused = _a.focused, error = _a.error;
+    return focused &&
+        !error &&
+        "\n      background-color: ".concat(colors.gray96, ";\n    ");
+}, function (_a) {
+    var error = _a.error;
+    return error &&
+        "\n      background-color: ".concat(colors.red98, ";\n\n      ").concat(StyledProgress, " {\n        color: ").concat(colors.red50, ";\n      }\n    ");
+});
+export var StyledDeleteIcon = styled(Icon)(templateObject_6 || (templateObject_6 = __makeTemplateObject([""], [""])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+//# sourceMappingURL=ThumbnailList.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ThumbnailList.styles.js","sourceRoot":"","sources":["../../../../../src/components/FileSelect/ThumbnailList/ThumbnailList.styles.ts"],"names":[],"mappings":";;;;AAAA,OAAO,EAAE,aAAa,IAAI,IAAI,EAAE,MAAM,cAAc,CAAA;AACpD,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAA;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAA;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAA;AACjC,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAC3C,OAAO,EAAE,mBAAmB,EAAE,MAAM,oCAAoC,CAAA;AAExE,MAAM,CAAC,IAAM,4BAA4B,GAAG,MAAM,CAAC,GAAG,+JAAA,4FAKrD,IAAA,CAAA;AAED,MAAM,CAAC,IAAM,mBAAmB,GAAG,MAAM,CAAC,IAAI,CAAC,yFAAA,sBAE9C,IAAA,CAAA;AAED,MAAM,CAAC,IAAM,eAAe,GAAG,MAAM,CAAC,SAAS,CAAC,wHAAA,qDAG/C,IAAA,CAAA;AAED,MAAM,CAAC,IAAM,cAAc,GAAG,MAAM,CAAC,GAAG,6IAAA,kCAEzB,EAAU,OAAQ,EAAU,6BAE1C,KAFc,OAAO,CAAC,EAAE,EAAQ,OAAO,CAAC,EAAE,CAE1C,CAAA;AAED,MAAM,CAAC,IAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,2NAG/C,0EAIW,EAAU,KAAM,EAAU,KAAM,EAAU,KAAM,EAAU,SACnE,EAA2B,QAE3B,EAaC,QAED,EAMC,QAED,EAKC,QAED,EAQC,IACJ,KA1CY,OAAO,CAAC,EAAE,EAAM,OAAO,CAAC,EAAE,EAAM,OAAO,CAAC,EAAE,EAAM,OAAO,CAAC,EAAE,EACnE,mBAAmB,CAAC,MAAM,CAAC,EAE3B,UAAC,EAAW;QAAT,OAAO,aAAA;IACV,OAAA,OAAO;QACP,kBACI,gBAAgB,gCACP,MAAM,CAAC,KAAK,4CAED,MAAM,CAAC,MAAM,+EAIvB,MAAM,CAAC,KAAK,gCAGzB;AAZD,CAYC,EAED,UAAC,EAAS;QAAP,KAAK,WAAA;IACR,OAAA,CAAC,KAAK;QACN,uDAEwB,MAAM,CAAC,MAAM,qBAEpC;AALD,CAKC,EAED,UAAC,EAAkB;QAAhB,OAAO,aAAA,EAAE,KAAK,WAAA;IACjB,OAAA,OAAO;QACP,CAAC,KAAK;QACN,oCACsB,MAAM,CAAC,MAAM,YAClC;AAJD,CAIC,EAED,UAAC,EAAS;QAAP,KAAK,WAAA;IACR,OAAA,KAAK;QACL,oCACsB,MAAM,CAAC,KAAK,wBAE9B,cAAc,gCACL,MAAM,CAAC,KAAK,qBAExB;AAPD,CAOC,CACJ,CAAA;AAED,MAAM,CAAC,IAAM,gBAAgB,GAAG,MAAM,CAAC,IAAI,CAAC,qEAAA,EAAE,IAAA,CAAA"}

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

@@ -0,0 +1,43 @@
+import { DivAttributes } from '../../../utils/types';
+declare type ThumbnailId = string | number;
+export interface ThumbnailListItem {
+    /**
+     * @since 10.19.0
+     */
+    id: ThumbnailId;
+    /**
+     * @since 10.19.0
+     */
+    name: string;
+    /**
+     * @since 10.19.0
+     */
+    src?: File | string;
+    /**
+     * @since 10.19.0
+     */
+    error?: string;
+    /**
+     * @since 10.19.0
+     */
+    response?: unknown;
+}
+export interface ThumbnailListProps extends Omit<DivAttributes, 'children'> {
+    /**
+     * @since 10.19.0
+     */
+    items: ThumbnailListItem[];
+    /**
+     * @since 10.19.0
+     */
+    onCancel?: (item: ThumbnailListItem) => void;
+    /**
+     * @since 10.19.0
+     */
+    listHeight?: number;
+    /**
+     * @since 10.19.0
+     */
+    rowHeight?: number;
+}
+export {};

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

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

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

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

package/dist/esm/components/FileSelect/ThumbnailList/index.d.ts

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

package/dist/esm/components/FileSelect/ThumbnailList/index.js

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

package/dist/esm/components/FileSelect/ThumbnailList/index.js.map

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

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { DivAttributes } from '../../../utils/types';
+import { FileTreeProps, TreeSourceRef } from './TreeSource.types';
+export declare const TreeSource: React.ForwardRefExoticComponent<FileTreeProps & Omit<DivAttributes, "onChange"> & React.RefAttributes<TreeSourceRef>>;

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

@@ -0,0 +1,157 @@
+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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+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;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import React from 'react';
+import { areEqual } from 'react-window';
+import { useResizeObserver } from '../../../effects/ResizeObserver';
+import { useFileSelectContext } from '../FileSelect';
+import { Spinner } from '../../Spinner';
+import { Tree } from '../../Tree';
+import { StyledFileTreeSpinner } from './TreeSource.styles';
+var topPadding = 24;
+function noop() { }
+/**
+ * `innerElementType` and `outerElementType` elements are needed to create top padding.
+ * Be aware that because of virtualization, it is not a trivial task.
+ * 1. First of all, we pass height to the `Tree` component without padding, it is needed for correct work of keyboard navigation.
+ * 2. Then we counterbalance height in outerElementType component (by adding padding to the height).
+ * 3. The last step - make padding using the shift of a relatively positioned element.
+ */
+var innerElementType = React.memo(React.forwardRef(function (_a, ref) {
+    var style = _a.style, children = _a.children, props = __rest(_a, ["style", "children"]);
+    return (React.createElement("div", __assign({ ref: ref, style: __assign(__assign({}, style), { position: 'relative', top: "".concat(topPadding, "px"), height: "".concat(parseFloat(style.height) - topPadding, "px") }) }, props), children));
+}), areEqual);
+var outerElementType = React.memo(React.forwardRef(function (_a, ref) {
+    var style = _a.style, children = _a.children, props = __rest(_a, ["style", "children"]);
+    return (React.createElement("div", __assign({ ref: ref, style: __assign(__assign({}, style), { height: "".concat(parseFloat(style.height) + topPadding, "px") }) }, props), children));
+}), areEqual);
+export var TreeSource = React.forwardRef(function (_a, ref) {
+    var sourceId = _a.sourceId, title = _a.title, icon = _a.icon, options = _a.options, _b = _a.isLoading, isLoading = _b === void 0 ? false : _b, _c = _a.onChange, onChange = _c === void 0 ? noop : _c, _d = _a.onExpand, onExpand = _d === void 0 ? function () { return Promise.resolve(); } : _d, props = __rest(_a, ["sourceId", "title", "icon", "options", "isLoading", "onChange", "onExpand"]);
+    var _e = useFileSelectContext(), maxFileNumber = _e.maxFileNumber, register = _e.register, currentSource = _e.currentSource, onSourceChange = _e.onChange, onResetValue = _e.onResetValue;
+    var _f = React.useState([]), value = _f[0], setValue = _f[1];
+    var _g = React.useState([]), expandedItems = _g[0], setExpandedNodes = _g[1];
+    React.useEffect(function () {
+        onSourceChange(sourceId, value);
+    }, [value]);
+    React.useEffect(function () {
+        var unregister = register(sourceId, {
+            title: title,
+            icon: icon,
+        });
+        var unsubscribe = onResetValue(function () {
+            setValue([]);
+        });
+        return function () {
+            unsubscribe();
+            unregister();
+        };
+    }, []);
+    var selectedFiles = React.useMemo(function () { return value.map(function (item) { return item.id; }); }, [value]);
+    var _onChange = function (files) {
+        setValue(files);
+        onChange(files);
+    };
+    var _onExpand = function (node) { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, onExpand(node)];
+                case 1:
+                    _a.sent();
+                    setExpandedNodes(function (prev) { return __spreadArray(__spreadArray([], prev, true), [node.id], false); });
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    var _onCollapse = function (node) {
+        setExpandedNodes(function (prev) { return prev.filter(function (nodeId) { return nodeId !== node.id; }); });
+    };
+    var _h = React.useState({
+        width: 0,
+        height: 0,
+    }), containerSize = _h[0], setContainerSize = _h[1];
+    var handleContainerResize = React.useCallback(function (entries) {
+        if (entries[0]) {
+            var _a = entries[0].target, height = _a.clientHeight, width = _a.clientWidth;
+            setContainerSize({ width: width, height: height });
+        }
+    }, [setContainerSize]);
+    var setResizeObserverTarget = useResizeObserver(handleContainerResize);
+    React.useImperativeHandle(ref, function () { return ({
+        setExpandedNodes: setExpandedNodes,
+        setValue: setValue,
+    }); });
+    if (currentSource !== sourceId) {
+        return null;
+    }
+    return !isLoading ? (React.createElement(Tree, __assign({}, props, { ref: function (instance) {
+            if (instance === null || instance === void 0 ? void 0 : instance.rootEl) {
+                setResizeObserverTarget(instance.rootEl);
+            }
+        }, options: options, onSelect: _onChange, onExpand: _onExpand, onCollapse: _onCollapse, expanded: expandedItems, selected: selectedFiles, selectionLimit: maxFileNumber + value.length, visibleHeight: containerSize.height - topPadding, innerElementType: innerElementType, outerElementType: outerElementType, autoExpandParent: false }))) : (React.createElement(StyledFileTreeSpinner, null,
+        React.createElement(Spinner, null)));
+});
+//# sourceMappingURL=TreeSource.js.map

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

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

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

@@ -0,0 +1 @@
+export declare const StyledFileTreeSpinner: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,9 @@
+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 { modalBodyHeight } from '../FileExplorer/FileExplorer.styles';
+export var StyledFileTreeSpinner = styled.div(templateObject_1 || (templateObject_1 = __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;
+//# sourceMappingURL=TreeSource.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TreeSource.styles.js","sourceRoot":"","sources":["../../../../../src/components/FileSelect/TreeSource/TreeSource.styles.ts"],"names":[],"mappings":";;;;AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,OAAO,EAAE,eAAe,EAAE,MAAM,qCAAqC,CAAA;AAErE,MAAM,CAAC,IAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,gKAAA,oFAInC,EAAe,OAC1B,KADW,eAAe,CAC1B,CAAA"}

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

@@ -0,0 +1,38 @@
+import { Node as TreeNode, NodeId, TreeProps } from '../../Tree/Tree.types';
+export interface TreeSourceRef {
+    /**
+     * @since 10.19.0
+     */
+    setExpandedNodes: (expanded: NodeId[]) => void;
+    /**
+     * @since 10.19.0
+     */
+    setValue: <Node extends TreeNode = TreeNode>(nodes: Node[]) => void;
+}
+export interface FileTreeProps extends Pick<TreeProps<TreeNode>, 'options' | 'getRoot' | 'getChildren' | 'getLabel' | 'getParentId' | 'getType' | 'isSelectable' | 'isExpandable' | 'onExpand' | 'expanded'> {
+    /**
+     * Callback function fired with currently selected array of nodes.
+     * <CodeBlock>(nodes: DefaultNode[]) => void</CodeBlock>
+     * @since 10.19.0
+     */
+    onChange?: (nodes: TreeNode[]) => void;
+    /**
+     * @since 10.19.0
+     */
+    sourceId: string;
+    /**
+     * @since 10.19.0
+     */
+    title: string;
+    /**
+     * @deprecated String icon variant is deprecated, use the React components
+     * directly from the `@procore/core-icons/dist` package
+     * @since 10.19.0
+     */
+    icon: string | React.ReactNode;
+    /**
+     * Show/Hide loading indicator of the content
+     * @since 10.19.0
+     */
+    isLoading?: boolean;
+}

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

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

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

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