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

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

@@ -0,0 +1,103 @@
+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 { isFunction } from 'formik';
+import { useListNavigation } from '../../../state/ListNavigation';
+import { StyledFileToken, StyledTokenList } from './FileTokenList.styles';
+function noop() { }
+function getProgress(_a) {
+    var progress = _a.progress;
+    return progress !== null && progress !== void 0 ? progress : 100;
+}
+function isUndefined(value) {
+    return typeof value === 'undefined';
+}
+export var FileTokenList = React.forwardRef(function FileTokenList(_a, ref) {
+    var tokens = _a.tokens, onClick = _a.onClick, _b = _a.onClose, onClose = _b === void 0 ? noop : _b, qa = _a.qa, onKeyDown = _a.onKeyDown, props = __rest(_a, ["tokens", "onClick", "onClose", "qa", "onKeyDown"]);
+    var focusedTokenRef = React.useRef(null);
+    var _c = React.useState(false), isListFocused = _c[0], setIsListFocused = _c[1];
+    var navigation = useListNavigation({
+        circular: false,
+        initialIndex: 0,
+        size: tokens.length,
+    });
+    React.useEffect(function () {
+        navigation.setSize(tokens.length);
+        if (tokens.length === 0)
+            setIsListFocused(false);
+    }, [navigation, tokens.length]);
+    React.useEffect(function () {
+        if (focusedTokenRef.current && isListFocused) {
+            focusedTokenRef.current.focus();
+        }
+    }, [isListFocused, navigation]);
+    var onKeyDownHandler = React.useCallback(function (e) {
+        if (!isListFocused)
+            return;
+        var token = tokens[navigation.index];
+        switch (e.key) {
+            case 'Backspace':
+            case 'Delete':
+                e.preventDefault();
+                if (!e.repeat) {
+                    onClose(token);
+                    if (tokens.length >= 1) {
+                        navigation.set(Math.max(0, navigation.index - 1));
+                    }
+                }
+                break;
+            case 'Space Bar':
+            case ' ':
+                e.preventDefault();
+                var error = token.error;
+                if (isUndefined(error) && getProgress(token) === 100) {
+                    onClick === null || onClick === void 0 ? void 0 : onClick(token);
+                }
+                break;
+            case 'ArrowUp':
+            case 'Up':
+            case 'ArrowLeft':
+            case 'Left':
+                e.preventDefault();
+                navigation.decrement();
+                break;
+            case 'ArrowDown':
+            case 'Down':
+            case 'ArrowRight':
+            case 'Right':
+                e.preventDefault();
+                navigation.increment();
+                break;
+            default:
+        }
+        onKeyDown && onKeyDown(e);
+    }, [isListFocused, navigation, onClick, onClose, onKeyDown, tokens]);
+    return (React.createElement(StyledTokenList, __assign({}, props, { ref: ref, onFocus: function () { return setIsListFocused(true); }, onBlur: function () { return setIsListFocused(false); }, onKeyDown: onKeyDownHandler }), tokens.map(function (token, index) {
+        var _a;
+        var isFocused = navigation.index === index;
+        return (React.createElement(StyledFileToken, { "data-qa": (_a = qa === null || qa === void 0 ? void 0 : qa.fileToken) === null || _a === void 0 ? void 0 : _a.call(qa, token.id), qa: qa, key: token.id, ref: isFocused ? focusedTokenRef : null, tabIndex: isFocused ? 0 : -1, progressValue: getProgress(token), errorMessage: token.error, fileName: token.name, onFocus: function () { return navigation.set(index); }, onLabelClick: isFunction(onClick) ? function () { return onClick(token); } : onClick, onClose: function () { return onClose(token); } }));
+    })));
+});
+FileTokenList.displayName = 'FileTokenList';
+export default FileTokenList;
+//# sourceMappingURL=FileTokenList.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FileTokenList.js","sourceRoot":"","sources":["../../../../../src/components/FileSelect/FileTokenList/FileTokenList.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAA;AACnC,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAA;AAEjE,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAA;AAGzE,SAAS,IAAI,KAAI,CAAC;AAElB,SAAS,WAAW,CAAC,EAA4B;QAA1B,QAAQ,cAAA;IAC7B,OAAO,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,GAAG,CAAA;AACxB,CAAC;AAED,SAAS,WAAW,CAAC,KAAU;IAC7B,OAAO,OAAO,KAAK,KAAK,WAAW,CAAA;AACrC,CAAC;AAED,MAAM,CAAC,IAAM,aAAa,GAAG,KAAK,CAAC,UAAU,CAG3C,SAAS,aAAa,CACtB,EAA4D,EAC5D,GAAG;IADD,IAAA,MAAM,YAAA,EAAE,OAAO,aAAA,EAAE,eAAc,EAAd,OAAO,mBAAG,IAAI,KAAA,EAAE,EAAE,QAAA,EAAE,SAAS,eAAA,EAAK,KAAK,cAA1D,mDAA4D,CAAF;IAG1D,IAAM,eAAe,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAA;IACpD,IAAA,KAAoC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAxD,aAAa,QAAA,EAAE,gBAAgB,QAAyB,CAAA;IAE/D,IAAM,UAAU,GAAG,iBAAiB,CAAC;QACnC,QAAQ,EAAE,KAAK;QACf,YAAY,EAAE,CAAC;QACf,IAAI,EAAE,MAAM,CAAC,MAAM;KACpB,CAAC,CAAA;IAEF,KAAK,CAAC,SAAS,CAAC;QACd,UAAU,CAAC,OAAO,CAAC,MAAM,CAAC,MAAM,CAAC,CAAA;QACjC,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC;YAAE,gBAAgB,CAAC,KAAK,CAAC,CAAA;IAClD,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC,CAAA;IAE/B,KAAK,CAAC,SAAS,CAAC;QACd,IAAI,eAAe,CAAC,OAAO,IAAI,aAAa,EAAE;YAC5C,eAAe,CAAC,OAAO,CAAC,KAAK,EAAE,CAAA;SAChC;IACH,CAAC,EAAE,CAAC,aAAa,EAAE,UAAU,CAAC,CAAC,CAAA;IAE/B,IAAM,gBAAgB,GAAG,KAAK,CAAC,WAAW,CACxC,UAAC,CAAC;QACA,IAAI,CAAC,aAAa;YAAE,OAAM;QAE1B,IAAM,KAAK,GAAG,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,CAAA;QAEtC,QAAQ,CAAC,CAAC,GAAG,EAAE;YACb,KAAK,WAAW,CAAC;YACjB,KAAK,QAAQ;gBACX,CAAC,CAAC,cAAc,EAAE,CAAA;gBAClB,IAAI,CAAC,CAAC,CAAC,MAAM,EAAE;oBACb,OAAO,CAAC,KAAK,CAAC,CAAA;oBACd,IAAI,MAAM,CAAC,MAAM,IAAI,CAAC,EAAE;wBACtB,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,UAAU,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAA;qBAClD;iBACF;gBACD,MAAK;YACP,KAAK,WAAW,CAAC;YACjB,KAAK,GAAG;gBACN,CAAC,CAAC,cAAc,EAAE,CAAA;gBACV,IAAA,KAAK,GAAK,KAAK,MAAV,CAAU;gBAEvB,IAAI,WAAW,CAAC,KAAK,CAAC,IAAI,WAAW,CAAC,KAAK,CAAC,KAAK,GAAG,EAAE;oBACpD,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,KAAK,CAAC,CAAA;iBACjB;gBACD,MAAK;YACP,KAAK,SAAS,CAAC;YACf,KAAK,IAAI,CAAC;YACV,KAAK,WAAW,CAAC;YACjB,KAAK,MAAM;gBACT,CAAC,CAAC,cAAc,EAAE,CAAA;gBAClB,UAAU,CAAC,SAAS,EAAE,CAAA;gBACtB,MAAK;YACP,KAAK,WAAW,CAAC;YACjB,KAAK,MAAM,CAAC;YACZ,KAAK,YAAY,CAAC;YAClB,KAAK,OAAO;gBACV,CAAC,CAAC,cAAc,EAAE,CAAA;gBAClB,UAAU,CAAC,SAAS,EAAE,CAAA;gBACtB,MAAK;YACP,QAAQ;SACT;QACD,SAAS,IAAI,SAAS,CAAC,CAAC,CAAC,CAAA;IAC3B,CAAC,EACD,CAAC,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,CAAC,CACjE,CAAA;IAED,OAAO,CACL,oBAAC,eAAe,eACV,KAAK,IACT,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,cAAM,OAAA,gBAAgB,CAAC,IAAI,CAAC,EAAtB,CAAsB,EACrC,MAAM,EAAE,cAAM,OAAA,gBAAgB,CAAC,KAAK,CAAC,EAAvB,CAAuB,EACrC,SAAS,EAAE,gBAAgB,KAE1B,MAAM,CAAC,GAAG,CAAC,UAAC,KAAK,EAAE,KAAK;;QACvB,IAAM,SAAS,GAAG,UAAU,CAAC,KAAK,KAAK,KAAK,CAAA;QAE5C,OAAO,CACL,oBAAC,eAAe,eACL,MAAA,EAAE,aAAF,EAAE,uBAAF,EAAE,CAAE,SAAS,+CAAb,EAAE,EAAc,KAAK,CAAC,EAAE,CAAC,EAClC,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,KAAK,CAAC,EAAE,EACb,GAAG,EAAE,SAAS,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,IAAI,EACvC,QAAQ,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAC5B,aAAa,EAAE,WAAW,CAAC,KAAK,CAAC,EACjC,YAAY,EAAE,KAAK,CAAC,KAAK,EACzB,QAAQ,EAAE,KAAK,CAAC,IAAI,EACpB,OAAO,EAAE,cAAM,OAAA,UAAU,CAAC,GAAG,CAAC,KAAK,CAAC,EAArB,CAAqB,EACpC,YAAY,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,cAAM,OAAA,OAAO,CAAC,KAAK,CAAC,EAAd,CAAc,CAAC,CAAC,CAAC,OAAO,EAClE,OAAO,EAAE,cAAM,OAAA,OAAO,CAAC,KAAK,CAAC,EAAd,CAAc,GAC7B,CACH,CAAA;IACH,CAAC,CAAC,CACc,CACnB,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,aAAa,CAAC,WAAW,GAAG,eAAe,CAAA;AAE3C,eAAe,aAAa,CAAA"}

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

@@ -0,0 +1,2 @@
+export declare const StyledTokenList: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledFileToken: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../FileToken/FileToken.types").FileTokenProps & import("../../../utils/types").DivAttributes & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;

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

@@ -0,0 +1,11 @@
+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 { FileToken } from '../../FileToken';
+export var StyledTokenList = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-wrap: wrap;\n"], ["\n  display: flex;\n  flex-wrap: wrap;\n"])));
+export var StyledFileToken = styled(FileToken)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin-bottom: ", "px;\n  margin-right: ", "px;\n"], ["\n  margin-bottom: ", "px;\n  margin-right: ", "px;\n"])), spacing.sm, spacing.sm);
+var templateObject_1, templateObject_2;
+//# sourceMappingURL=FileTokenList.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FileTokenList.styles.js","sourceRoot":"","sources":["../../../../../src/components/FileSelect/FileTokenList/FileTokenList.styles.ts"],"names":[],"mappings":";;;;AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAA;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAE3C,MAAM,CAAC,IAAM,eAAe,GAAG,MAAM,CAAC,GAAG,6GAAA,0CAGxC,IAAA,CAAA;AAED,MAAM,CAAC,IAAM,eAAe,GAAG,MAAM,CAAC,SAAS,CAAC,0HAAA,qBAC7B,EAAU,uBACX,EAAU,OAC3B,KAFkB,OAAO,CAAC,EAAE,EACX,OAAO,CAAC,EAAE,CAC3B,CAAA"}

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

@@ -0,0 +1 @@
+export { FileTokenList } from './FileTokenList';

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

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

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

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

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

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

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

@@ -0,0 +1,213 @@
+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 { isFunction } from 'formik';
+import { prop } from 'ramda';
+import React from 'react';
+import { useI18nContext } from '../../../state/I18n';
+import { EmptyState } from '../../EmptyState';
+import { useFileSelectContext } from '../../FileSelect';
+import { Search } from '../../Search';
+import { Spinner } from '../../Spinner';
+import { ThumbnailGrid } from '../../ThumbnailGrid';
+import { contentHeight, contentWidth, StyledEmptyState, StyledEmptyStateWrapper, StyledGrid, StyledSearchWrapper, StyledSpinnerWrapper, StyledToolbar, } from './GridSource.styles';
+var defaultGetId = prop('id');
+var defaultGetThumbnailName = prop('name');
+var defaultGetThumbnailSource = prop('src');
+var defaultGetThumbnailLabel = prop('label');
+var defaultGetGroupId = prop('groupId');
+export var GridSource = React.forwardRef(function GridSource(_a, ref) {
+    var _this = this;
+    var _b;
+    var sourceId = _a.sourceId, title = _a.title, icon = _a.icon, items = _a.items, groups = _a.groups, onSearch = _a.onSearch, _c = _a.emptyState, emptyState = _c === void 0 ? {} : _c, controlledSearchQuery = _a.searchQuery, children = _a.children, _d = _a.isLoadingMore, isLoadingMore = _d === void 0 ? false : _d, _e = _a.isLoading, isLoading = _e === void 0 ? false : _e, onScrollBottom = _a.onScrollBottom, _f = _a.getId, getId = _f === void 0 ? defaultGetId : _f, _g = _a.getThumbnailName, getThumbnailName = _g === void 0 ? defaultGetThumbnailName : _g, _h = _a.getThumbnailSource, getThumbnailSource = _h === void 0 ? defaultGetThumbnailSource : _h, _j = _a.getThumbnailLabel, getThumbnailLabel = _j === void 0 ? defaultGetThumbnailLabel : _j, _k = _a.getGroupId, getGroupId = _k === void 0 ? defaultGetGroupId : _k, qa = _a.qa, props = __rest(_a, ["sourceId", "title", "icon", "items", "groups", "onSearch", "emptyState", "searchQuery", "children", "isLoadingMore", "isLoading", "onScrollBottom", "getId", "getThumbnailName", "getThumbnailSource", "getThumbnailLabel", "getGroupId", "qa"]);
+    var I18n = useI18nContext();
+    var _l = React.useState(''), internalSearchQuery = _l[0], setInternalSearchQuery = _l[1];
+    var _m = React.useState([]), value = _m[0], setValue = _m[1];
+    var _o = useFileSelectContext(), maxFileNumber = _o.maxFileNumber, currentSource = _o.currentSource, register = _o.register, onChange = _o.onChange, onResetValue = _o.onResetValue;
+    var isUsingControlledSearch = isFunction(onSearch) && typeof controlledSearchQuery !== 'undefined';
+    React.useEffect(function () {
+        var unregister = register(sourceId, {
+            title: title,
+            icon: icon,
+        });
+        var unsubscribe = onResetValue(function () {
+            setInternalSearchQuery('');
+            setValue([]);
+        });
+        return function () {
+            unsubscribe();
+            unregister();
+        };
+    }, []);
+    var ensureNameAndId = function (item) {
+        var id = getId(item);
+        var name = getThumbnailName(item);
+        return __assign(__assign({}, item), { name: name, id: id });
+    };
+    React.useEffect(function () {
+        onChange(sourceId, value.map(ensureNameAndId));
+    }, [value]);
+    var gridRef = React.useRef(null);
+    var _p = React.useState(false), isGridScrolled = _p[0], setIsGridScrolled = _p[1];
+    var getGridItem = React.useCallback(function (item) { return ({
+        id: getId(item),
+        name: getThumbnailName(item),
+        src: getThumbnailSource(item),
+        label: getThumbnailLabel(item),
+        groupId: getGroupId(item),
+    }); }, [getId, getThumbnailName, getThumbnailLabel, getThumbnailSource, getGroupId]);
+    var gridItems = React.useMemo(function () { return items.map(getGridItem); }, [items, getGridItem]);
+    var selectedGridItems = value.map(getGridItem);
+    var allVisibleItems = React.useMemo(function () {
+        return internalSearchQuery && !isFunction(onSearch)
+            ? gridItems.filter(function (item) {
+                var name = getThumbnailName === null || getThumbnailName === void 0 ? void 0 : getThumbnailName(item);
+                if (!name) {
+                    return true;
+                }
+                var text = name.toLowerCase();
+                var q = internalSearchQuery.toLowerCase();
+                return text.includes(q);
+            })
+            : gridItems;
+    }, [gridItems, internalSearchQuery, onSearch, getThumbnailName]);
+    var fetchData = React.useCallback(function () { return __awaiter(_this, void 0, void 0, function () {
+        var err_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!isFunction(onScrollBottom)) {
+                        return [2 /*return*/];
+                    }
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 3, , 4]);
+                    return [4 /*yield*/, onScrollBottom()];
+                case 2:
+                    _a.sent();
+                    return [3 /*break*/, 4];
+                case 3:
+                    err_1 = _a.sent();
+                    console.warn('Warning!: "onScrollBottom" request was ended with an error');
+                    return [3 /*break*/, 4];
+                case 4: return [2 /*return*/];
+            }
+        });
+    }); }, [onScrollBottom]);
+    if (currentSource !== sourceId) {
+        return null;
+    }
+    var hasChildren = React.Children.toArray(children).length > 0;
+    var onSelect = function (selectedItem) {
+        var origin = items.find(function (item) { return getId(item) === selectedItem.id; });
+        setValue(function (prev) { return __spreadArray(__spreadArray([], prev, true), [origin], false); });
+    };
+    var onDeselect = function (removedItem) {
+        setValue(function (prev) { return prev.filter(function (item) { return getId(item) !== removedItem.id; }); });
+    };
+    var searchQuery = isUsingControlledSearch
+        ? controlledSearchQuery
+        : internalSearchQuery;
+    var toolbar = (React.createElement(StyledToolbar, { alignRight: !hasChildren, hasScrollShadow: isGridScrolled },
+        children,
+        React.createElement(SearchBar, { query: searchQuery, onChange: function (e) {
+                var query = e.target.value;
+                onSearch === null || onSearch === void 0 ? void 0 : onSearch(query);
+                if (!isUsingControlledSearch) {
+                    setInternalSearchQuery(query);
+                }
+            } })));
+    var emptyStateContent = (React.createElement(StyledEmptyStateWrapper, null,
+        React.createElement(StyledEmptyState, { compact: true }, searchQuery ? (React.createElement(React.Fragment, null,
+            React.createElement(EmptyState.NoResults, null),
+            React.createElement(EmptyState.Title, null, I18n.t('core.fileExplorer.emptySearchResults')))) : (React.createElement(React.Fragment, null,
+            emptyState.image ? (React.createElement(EmptyState.Image, { src: emptyState.image })) : (React.createElement(EmptyState.NoItemsWithoutCreatePermissions, null)),
+            React.createElement(EmptyState.Title, null, (_b = emptyState.text) !== null && _b !== void 0 ? _b : I18n.t('core.fileExplorer.noItems')))))));
+    var gridContent = (React.createElement(ThumbnailGrid, { qa: { grid: qa === null || qa === void 0 ? void 0 : qa.grid }, selected: selectedGridItems, items: allVisibleItems, onSelect: onSelect, onDeselect: onDeselect, disableSelection: {
+            value: maxFileNumber < 1,
+            tooltip: I18n.t('core.fileExplorer.maxNumberOfFilesSelected'),
+        }, gridWidth: contentWidth, gridHeight: contentHeight, title: "".concat(title, " (").concat(allVisibleItems.length, ")"), groups: groups, ref: gridRef, onScroll: function (e) {
+            setIsGridScrolled(e.target.scrollTop !== 0);
+        }, isFetching: isLoadingMore, loadMoreItems: fetchData }));
+    var spinner = (React.createElement(StyledSpinnerWrapper, null,
+        React.createElement(Spinner, null)));
+    var content = isLoading
+        ? spinner
+        : allVisibleItems.length
+            ? gridContent
+            : emptyStateContent;
+    return (React.createElement(StyledGrid, __assign({ ref: ref, isEmpty: !allVisibleItems.length }, props),
+        toolbar,
+        content));
+});
+function SearchBar(_a) {
+    var onChange = _a.onChange, query = _a.query, props = __rest(_a, ["onChange", "query"]);
+    var I18n = useI18nContext();
+    return (React.createElement(StyledSearchWrapper, null,
+        React.createElement(Search, __assign({ placeholder: I18n.t('core.fileExplorer.searchPlaceholder'), onChange: onChange, value: query }, props))));
+}
+//# sourceMappingURL=GridSource.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GridSource.js","sourceRoot":"","sources":["../../../../../src/components/FileSelect/GridSource/GridSource.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAA;AACnC,OAAO,EAAE,IAAI,EAAE,MAAM,OAAO,CAAA;AAC5B,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AAEpD,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAC7C,OAAO,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAA;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAA;AACrC,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAA;AAEnD,OAAO,EACL,aAAa,EACb,YAAY,EACZ,gBAAgB,EAChB,uBAAuB,EACvB,UAAU,EACV,mBAAmB,EACnB,oBAAoB,EACpB,aAAa,GACd,MAAM,qBAAqB,CAAA;AAY5B,IAAM,YAAY,GAAG,IAAI,CAAC,IAAI,CAAU,CAAA;AACxC,IAAM,uBAAuB,GAAG,IAAI,CAAC,MAAM,CAAsB,CAAA;AACjE,IAAM,yBAAyB,GAAG,IAAI,CAAC,KAAK,CAAuB,CAAA;AACnE,IAAM,wBAAwB,GAAG,IAAI,CAAC,OAAO,CAAsB,CAAA;AACnE,IAAM,iBAAiB,GAAG,IAAI,CAAC,SAAS,CAAe,CAAA;AAEvD,MAAM,CAAC,IAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAGxC,SAAS,UAAU,CACnB,EAoBC,EACD,GAAG;IAtBH,iBA4ND;;IA1NG,IAAA,QAAQ,cAAA,EACR,KAAK,WAAA,EACL,IAAI,UAAA,EACJ,KAAK,WAAA,EACL,MAAM,YAAA,EACN,QAAQ,cAAA,EACR,kBAAe,EAAf,UAAU,mBAAG,EAAE,KAAA,EACF,qBAAqB,iBAAA,EAClC,QAAQ,cAAA,EACR,qBAAqB,EAArB,aAAa,mBAAG,KAAK,KAAA,EACrB,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA,EACjB,cAAc,oBAAA,EACd,aAAoB,EAApB,KAAK,mBAAG,YAAY,KAAA,EACpB,wBAA0C,EAA1C,gBAAgB,mBAAG,uBAAuB,KAAA,EAC1C,0BAA8C,EAA9C,kBAAkB,mBAAG,yBAAyB,KAAA,EAC9C,yBAA4C,EAA5C,iBAAiB,mBAAG,wBAAwB,KAAA,EAC5C,kBAA8B,EAA9B,UAAU,mBAAG,iBAAiB,KAAA,EAC9B,EAAE,QAAA,EACC,KAAK,cAnBV,iPAoBC,CADS;IAIV,IAAM,IAAI,GAAG,cAAc,EAAE,CAAA;IACvB,IAAA,KAAgD,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAjE,mBAAmB,QAAA,EAAE,sBAAsB,QAAsB,CAAA;IAClE,IAAA,KAAoB,KAAK,CAAC,QAAQ,CAAa,EAAE,CAAC,EAAjD,KAAK,QAAA,EAAE,QAAQ,QAAkC,CAAA;IAClD,IAAA,KACJ,oBAAoB,EAAE,EADhB,aAAa,mBAAA,EAAE,aAAa,mBAAA,EAAE,QAAQ,cAAA,EAAE,QAAQ,cAAA,EAAE,YAAY,kBAC9C,CAAA;IAExB,IAAM,uBAAuB,GAC3B,UAAU,CAAC,QAAQ,CAAC,IAAI,OAAO,qBAAqB,KAAK,WAAW,CAAA;IAEtE,KAAK,CAAC,SAAS,CAAC;QACd,IAAM,UAAU,GAAG,QAAQ,CAAC,QAAQ,EAAE;YACpC,KAAK,OAAA;YACL,IAAI,MAAA;SACL,CAAC,CAAA;QACF,IAAM,WAAW,GAAG,YAAY,CAAC;YAC/B,sBAAsB,CAAC,EAAE,CAAC,CAAA;YAC1B,QAAQ,CAAC,EAAE,CAAC,CAAA;QACd,CAAC,CAAC,CAAA;QACF,OAAO;YACL,WAAW,EAAE,CAAA;YACb,UAAU,EAAE,CAAA;QACd,CAAC,CAAA;IACH,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,IAAM,eAAe,GAAG,UAAC,IAAc;QACrC,IAAM,EAAE,GAAG,KAAK,CAAC,IAAI,CAAC,CAAA;QACtB,IAAM,IAAI,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAA;QAEnC,6BACK,IAAI,KACP,IAAI,MAAA,EACJ,EAAE,IAAA,IACH;IACH,CAAC,CAAA;IAED,KAAK,CAAC,SAAS,CAAC;QACd,QAAQ,CAAC,QAAQ,EAAE,KAAK,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC,CAAA;IAChD,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEX,IAAM,OAAO,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAA;IAC5C,IAAA,KAAsC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,EAA1D,cAAc,QAAA,EAAE,iBAAiB,QAAyB,CAAA;IAEjE,IAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CACnC,UAAC,IAAc,IAAK,OAAA,CAAC;QACnB,EAAE,EAAE,KAAK,CAAC,IAAI,CAAC;QACf,IAAI,EAAE,gBAAgB,CAAC,IAAI,CAAC;QAC5B,GAAG,EAAE,kBAAkB,CAAC,IAAI,CAAC;QAC7B,KAAK,EAAE,iBAAiB,CAAC,IAAI,CAAC;QAC9B,OAAO,EAAE,UAAU,CAAC,IAAI,CAAC;KAC1B,CAAC,EANkB,CAMlB,EACF,CAAC,KAAK,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,UAAU,CAAC,CAC7E,CAAA;IAED,IAAM,SAAS,GAAG,KAAK,CAAC,OAAO,CAC7B,cAAM,OAAA,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,EAAtB,CAAsB,EAC5B,CAAC,KAAK,EAAE,WAAW,CAAC,CACrB,CAAA;IAED,IAAM,iBAAiB,GAAG,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAA;IAEhD,IAAM,eAAe,GAAG,KAAK,CAAC,OAAO,CACnC;QACE,OAAA,mBAAmB,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC;YAC1C,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,UAAC,IAAI;gBACpB,IAAM,IAAI,GAAG,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAG,IAAI,CAAC,CAAA;gBAErC,IAAI,CAAC,IAAI,EAAE;oBACT,OAAO,IAAI,CAAA;iBACZ;gBAED,IAAM,IAAI,GAAG,IAAI,CAAC,WAAW,EAAE,CAAA;gBAC/B,IAAM,CAAC,GAAG,mBAAmB,CAAC,WAAW,EAAE,CAAA;gBAE3C,OAAO,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAA;YACzB,CAAC,CAAC;YACJ,CAAC,CAAC,SAAS;IAbb,CAaa,EACf,CAAC,SAAS,EAAE,mBAAmB,EAAE,QAAQ,EAAE,gBAAgB,CAAC,CAC7D,CAAA;IAED,IAAM,SAAS,GAAG,KAAK,CAAC,WAAW,CAAC;;;;;oBAClC,IAAI,CAAC,UAAU,CAAC,cAAc,CAAC,EAAE;wBAC/B,sBAAM;qBACP;;;;oBAGC,qBAAM,cAAc,EAAE,EAAA;;oBAAtB,SAAsB,CAAA;;;;oBAEtB,OAAO,CAAC,IAAI,CAAC,4DAA4D,CAAC,CAAA;;;;;SAE7E,EAAE,CAAC,cAAc,CAAC,CAAC,CAAA;IAEpB,IAAI,aAAa,KAAK,QAAQ,EAAE;QAC9B,OAAO,IAAI,CAAA;KACZ;IAED,IAAM,WAAW,GAAG,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,MAAM,GAAG,CAAC,CAAA;IAE/D,IAAM,QAAQ,GAAG,UAAC,YAA+B;QAC/C,IAAM,MAAM,GAAG,KAAK,CAAC,IAAI,CACvB,UAAC,IAAI,IAAK,OAAA,KAAK,CAAC,IAAI,CAAC,KAAK,YAAY,CAAC,EAAE,EAA/B,CAA+B,CAC9B,CAAA;QACb,QAAQ,CAAC,UAAC,IAAI,IAAK,uCAAI,IAAI,UAAE,MAAM,WAAhB,CAAiB,CAAC,CAAA;IACvC,CAAC,CAAA;IAED,IAAM,UAAU,GAAG,UAAC,WAA8B;QAChD,QAAQ,CAAC,UAAC,IAAI,IAAK,OAAA,IAAI,CAAC,MAAM,CAAC,UAAC,IAAI,IAAK,OAAA,KAAK,CAAC,IAAI,CAAC,KAAK,WAAW,CAAC,EAAE,EAA9B,CAA8B,CAAC,EAArD,CAAqD,CAAC,CAAA;IAC3E,CAAC,CAAA;IAED,IAAM,WAAW,GAAG,uBAAuB;QACzC,CAAC,CAAE,qBAAgC;QACnC,CAAC,CAAC,mBAAmB,CAAA;IAEvB,IAAM,OAAO,GAAG,CACd,oBAAC,aAAa,IAAC,UAAU,EAAE,CAAC,WAAW,EAAE,eAAe,EAAE,cAAc;QACrE,QAAQ;QACT,oBAAC,SAAS,IACR,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,UAAC,CAAC;gBACV,IAAM,KAAK,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAA;gBAC5B,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,KAAK,CAAC,CAAA;gBACjB,IAAI,CAAC,uBAAuB,EAAE;oBAC5B,sBAAsB,CAAC,KAAK,CAAC,CAAA;iBAC9B;YACH,CAAC,GACD,CACY,CACjB,CAAA;IAED,IAAM,iBAAiB,GAAG,CACxB,oBAAC,uBAAuB;QACtB,oBAAC,gBAAgB,IAAC,OAAO,EAAE,IAAI,IAC5B,WAAW,CAAC,CAAC,CAAC,CACb;YACE,oBAAC,UAAU,CAAC,SAAS,OAAG;YACxB,oBAAC,UAAU,CAAC,KAAK,QACd,IAAI,CAAC,CAAC,CAAC,sCAAsC,CAAC,CAC9B,CAClB,CACJ,CAAC,CAAC,CAAC,CACF;YACG,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,CAClB,oBAAC,UAAU,CAAC,KAAK,IAAC,GAAG,EAAE,UAAU,CAAC,KAAK,GAAI,CAC5C,CAAC,CAAC,CAAC,CACF,oBAAC,UAAU,CAAC,+BAA+B,OAAG,CAC/C;YACD,oBAAC,UAAU,CAAC,KAAK,QACd,MAAA,UAAU,CAAC,IAAI,mCAAI,IAAI,CAAC,CAAC,CAAC,2BAA2B,CAAC,CACtC,CAClB,CACJ,CACgB,CACK,CAC3B,CAAA;IAED,IAAM,WAAW,GAAG,CAClB,oBAAC,aAAa,IACZ,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,aAAF,EAAE,uBAAF,EAAE,CAAE,IAAI,EAAE,EACtB,QAAQ,EAAE,iBAAiB,EAC3B,KAAK,EAAE,eAAe,EACtB,QAAQ,EAAE,QAAQ,EAClB,UAAU,EAAE,UAAU,EACtB,gBAAgB,EAAE;YAChB,KAAK,EAAE,aAAa,GAAG,CAAC;YACxB,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC,4CAA4C,CAAC;SAC9D,EACD,SAAS,EAAE,YAAY,EACvB,UAAU,EAAE,aAAa,EACzB,KAAK,EAAE,UAAG,KAAK,eAAK,eAAe,CAAC,MAAM,MAAG,EAC7C,MAAM,EAAE,MAAM,EACd,GAAG,EAAE,OAAO,EACZ,QAAQ,EAAE,UAAC,CAAC;YACV,iBAAiB,CAAE,CAAC,CAAC,MAAyB,CAAC,SAAS,KAAK,CAAC,CAAC,CAAA;QACjE,CAAC,EACD,UAAU,EAAE,aAAa,EACzB,aAAa,EAAE,SAAS,GACxB,CACH,CAAA;IAED,IAAM,OAAO,GAAG,CACd,oBAAC,oBAAoB;QACnB,oBAAC,OAAO,OAAG,CACU,CACxB,CAAA;IAED,IAAM,OAAO,GAAG,SAAS;QACvB,CAAC,CAAC,OAAO;QACT,CAAC,CAAC,eAAe,CAAC,MAAM;YACxB,CAAC,CAAC,WAAW;YACb,CAAC,CAAC,iBAAiB,CAAA;IAErB,OAAO,CACL,oBAAC,UAAU,aAAC,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,CAAC,eAAe,CAAC,MAAM,IAAM,KAAK;QAC9D,OAAO;QACP,OAAO,CACG,CACd,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,SAAS,SAAS,CAAC,EAA6C;IAA3C,IAAA,QAAQ,cAAA,EAAE,KAAK,WAAA,EAAK,KAAK,cAA3B,qBAA6B,CAAF;IAC5C,IAAM,IAAI,GAAG,cAAc,EAAE,CAAA;IAC7B,OAAO,CACL,oBAAC,mBAAmB;QAClB,oBAAC,MAAM,aACL,WAAW,EAAE,IAAI,CAAC,CAAC,CAAC,qCAAqC,CAAC,EAC1D,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,IACR,KAAK,EACT,CACkB,CACvB,CAAA;AACH,CAAC"}

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

@@ -0,0 +1,22 @@
+export declare const contentWidth = 632;
+export declare const contentHeight: number;
+export declare const StyledToolbar: import("styled-components").StyledComponent<"div", any, {
+    alignRight: boolean;
+    hasScrollShadow: boolean;
+}, never>;
+export declare const StyledSearchWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledEmptyStateWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledEmptyState: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../../utils/types").DivAttributes & import("../../EmptyState").EmptyStateProps & import("react").RefAttributes<HTMLDivElement>> & {
+    Actions: import("react").ForwardRefExoticComponent<import("../../../utils/types").DivAttributes & import("../../../utils/types").Props & import("react").RefAttributes<HTMLDivElement>>;
+    Description: import("react").ForwardRefExoticComponent<import("../../../utils/types").DivAttributes & import("../../../utils/types").Props & import("react").RefAttributes<HTMLDivElement>>;
+    Image: import("react").ForwardRefExoticComponent<import("../../../utils/types").DivAttributes & import("../../EmptyState").EmptyStateImageProps & import("react").RefAttributes<HTMLDivElement>>;
+    NoItems: import("react").ForwardRefExoticComponent<import("../../../utils/types").Props & import("react").RefAttributes<HTMLDivElement>>;
+    NoItemsWithoutCreatePermissions: import("react").ForwardRefExoticComponent<import("../../../utils/types").Props & import("react").RefAttributes<HTMLDivElement>>;
+    NoResults: import("react").ForwardRefExoticComponent<import("../../../utils/types").Props & import("react").RefAttributes<HTMLDivElement>>;
+    RecycleBin: import("react").ForwardRefExoticComponent<import("../../../utils/types").Props & import("react").RefAttributes<HTMLDivElement>>;
+    Title: import("react").ForwardRefExoticComponent<import("../../../utils/types").DivAttributes & import("../../../utils/types").Props & import("react").RefAttributes<HTMLDivElement>>;
+}, any, {}, never>;
+export declare const StyledSpinnerWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledGrid: import("styled-components").StyledComponent<"div", any, {
+    isEmpty: boolean;
+}, never>;

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

@@ -0,0 +1,35 @@
+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 { spacing } from '../../../styles/spacing';
+import { EmptyState } from '../../EmptyState';
+var inputHeight = 32;
+var toolbarPaddingTop = spacing.xl;
+var toolbarPaddingBottom = spacing.md;
+var toolbarHeight = inputHeight + toolbarPaddingTop + toolbarPaddingBottom;
+var modalBodyBorderTopWidth = 1;
+var modalBodyWidth = 460;
+export var contentWidth = 632;
+export var contentHeight = modalBodyWidth - modalBodyBorderTopWidth - toolbarHeight;
+// TODO Update box-shadow to use getShadow instead
+export var StyledToolbar = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  width: ", "px;\n  height: ", "px;\n  padding: ", "px ", "px\n    ", "px ", "px;\n\n  ", "\n\n  ", "\n\n  & > * + * {\n    margin-left: ", "px;\n  }\n"], ["\n  display: flex;\n  flex-direction: row;\n  width: ", "px;\n  height: ", "px;\n  padding: ", "px ", "px\n    ", "px ", "px;\n\n  ", "\n\n  ", "\n\n  & > * + * {\n    margin-left: ", "px;\n  }\n"])), contentWidth, toolbarHeight, toolbarPaddingTop, spacing.xl + spacing.lg, toolbarPaddingBottom, spacing.xl, function (_a) {
+    var alignRight = _a.alignRight;
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      justify-content: ", ";\n    "], ["\n      justify-content: ", ";\n    "])), alignRight ? 'flex-end' : 'space-between');
+}, function (_a) {
+    var hasScrollShadow = _a.hasScrollShadow;
+    return hasScrollShadow &&
+        "\n      box-shadow: 0px ".concat(spacing.xs, "px ").concat(spacing.xs, "px ").concat(colors.gray90, ";\n      z-index: 1;\n    ");
+}, spacing.sm);
+export var StyledSearchWrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 286px;\n  flex-shrink: 1;\n  min-width: 180px;\n"], ["\n  width: 286px;\n  flex-shrink: 1;\n  min-width: 180px;\n"])));
+export var StyledEmptyStateWrapper = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"], ["\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])));
+export var StyledEmptyState = styled(EmptyState)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  margin-top: 0;\n  margin-bottom: 0;\n\n  img {\n    width: 160px;\n  }\n"], ["\n  margin-top: 0;\n  margin-bottom: 0;\n\n  img {\n    width: 160px;\n  }\n"])));
+export var StyledSpinnerWrapper = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  height: ", "px;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"], ["\n  height: ", "px;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), contentHeight);
+export var StyledGrid = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  ", "\n"], ["\n  display: flex;\n  flex-direction: column;\n  ", "\n"])), function (_a) {
+    var isEmpty = _a.isEmpty;
+    return isEmpty && 'height: 100%;';
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
+//# sourceMappingURL=GridSource.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GridSource.styles.js","sourceRoot":"","sources":["../../../../../src/components/FileSelect/GridSource/GridSource.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,OAAO,EAAE,MAAM,yBAAyB,CAAA;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAE7C,IAAM,WAAW,GAAG,EAAE,CAAA;AACtB,IAAM,iBAAiB,GAAG,OAAO,CAAC,EAAE,CAAA;AACpC,IAAM,oBAAoB,GAAG,OAAO,CAAC,EAAE,CAAA;AACvC,IAAM,aAAa,GAAG,WAAW,GAAG,iBAAiB,GAAG,oBAAoB,CAAA;AAC5E,IAAM,uBAAuB,GAAG,CAAC,CAAA;AACjC,IAAM,cAAc,GAAG,GAAG,CAAA;AAC1B,MAAM,CAAC,IAAM,YAAY,GAAG,GAAG,CAAA;AAC/B,MAAM,CAAC,IAAM,aAAa,GACxB,cAAc,GAAG,uBAAuB,GAAG,aAAa,CAAA;AAE1D,kDAAkD;AAClD,MAAM,CAAC,IAAM,aAAa,GAAG,MAAM,CAAC,GAAG,wQAGrC,uDAGS,EAAY,iBACX,EAAa,kBACZ,EAAiB,KAAM,EAAuB,UACrD,EAAoB,KAAM,EAAU,WAEtC,EAGC,QAED,EAKC,sCAGc,EAAU,YAE5B,KApBU,YAAY,EACX,aAAa,EACZ,iBAAiB,EAAM,OAAO,CAAC,EAAE,GAAG,OAAO,CAAC,EAAE,EACrD,oBAAoB,EAAM,OAAO,CAAC,EAAE,EAEtC,UAAC,EAAc;QAAZ,UAAU,gBAAA;IACb,OAAA,GAAG,yGAAA,2BACkB,EAAyC,SAC7D,KADoB,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,eAAe;AAD9D,CAEC,EAED,UAAC,EAAmB;QAAjB,eAAe,qBAAA;IAClB,OAAA,eAAe;QACf,kCACoB,OAAO,CAAC,EAAE,gBAAM,OAAO,CAAC,EAAE,gBAAM,MAAM,CAAC,MAAM,+BAEhE;AAJD,CAIC,EAGc,OAAO,CAAC,EAAE,CAE5B,CAAA;AAED,MAAM,CAAC,IAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,gIAAA,6DAI5C,IAAA,CAAA;AAED,MAAM,CAAC,IAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,8KAAA,2GAMhD,IAAA,CAAA;AAED,MAAM,CAAC,IAAM,gBAAgB,GAAG,MAAM,CAAC,UAAU,CAAC,iJAAA,8EAOjD,IAAA,CAAA;AAED,MAAM,CAAC,IAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,gLAAA,cAClC,EAAa,6FAKxB,KALW,aAAa,CAKxB,CAAA;AAED,MAAM,CAAC,IAAM,UAAU,GAAG,MAAM,CAAC,GAAG,4HAAsB,mDAGtD,EAA2C,IAC9C,KADG,UAAC,EAAW;QAAT,OAAO,aAAA;IAAO,OAAA,OAAO,IAAI,eAAe;AAA1B,CAA0B,CAC9C,CAAA"}

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

@@ -0,0 +1,135 @@
+import React from 'react';
+import { ThumbnailGridGroup } from '../../ThumbnailGrid/ThumbnailGrid.types';
+interface QaTags {
+    grid?: string;
+}
+export declare type GridItem = object;
+export declare type GetId = (item: GridItem) => string | number;
+export declare type GetThumnbnailName = (item: GridItem) => string;
+export declare type GetThumbnailSource = (item: GridItem) => string;
+export declare type GetThumbnailLabel = (item: GridItem) => string;
+export declare type GetGroupId = (item: GridItem) => string | number;
+export interface GridProps {
+    /**
+     * @since 10.19.0
+     */
+    sourceId: 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;
+    /**
+     * @since 10.19.0
+     */
+    title: string;
+    /**
+     * Allows controlling the search input value. Can be used with
+     * <Code>onSearch</Code> to customize the default string-based search
+     * @since 10.19.0
+     */
+    searchQuery?: string;
+    /**
+     * Allows customizing the default string-based search by passing a
+     * different set of <Code>items</Code> every time
+     * <Code>onSearch</Code> is called with query string as a single
+     * parameter
+     * @since 10.19.0
+     */
+    onSearch?: (q: string) => void;
+    /**
+     * React nodes to be displayed next to the search bar
+     * @since 10.19.0
+     */
+    children?: React.ReactNode;
+    /**
+     * An array of arbitrarily-shaped objects representing grid items.{' '}
+     * <Code>getId</Code> <Code>getName</Code> and <Code>getThumbnail</Code>{' '}
+     * should be used to bind the target shape to a view.
+     * @since 10.19.0
+     */
+    items: GridItem[];
+    /**
+     * <Code>{`{ id: string | number, title: string }[]`}</Code> object
+     * representing file groups
+     * @since 10.19.0
+     */
+    groups?: ThumbnailGridGroup[];
+    /**
+     * <Code>{`{ text: string, image: string }`}</Code> props for{' '}
+     * <Code>EmptyState</Code> component shown when there are no items in
+     * grid
+     * @since 10.19.0
+     */
+    emptyState?: {
+        text?: string;
+        image?: string;
+    };
+    /**
+     * Show/Hide loading indicator at the list bottom
+     * @since 10.19.0
+     */
+    isLoadingMore?: boolean;
+    /**
+     * Show/Hide loading indicator of the content
+     * @since 10.19.0
+     */
+    isLoading?: boolean;
+    /**
+     * Optional <Code>function</Code> that automatically executes when
+     * scrolling reaches the last item.
+     * @since 10.19.0
+     */
+    onScrollBottom?: () => Promise<any>;
+    /**
+     * A function called returning ID of a given grid item that is used to
+     * identify the item. Returns <Code>item.id</Code> by default.
+     * @since 10.19.0
+     */
+    getId?: GetId;
+    /**
+     * A function called returning thumbnail URL of a given grid item that is
+     * used to display the item's thumbnail image. Returns{' '}
+     * <Code>item.src</Code>
+     * by default.
+     * @since 10.19.0
+     */
+    getThumbnailSource?: GetThumbnailSource;
+    /**
+     * A function called returning name of a given grid item that is used to
+     * display the item's thumbnail name. Returns <Code>item.name</Code> by
+     * default.
+     * @since 10.19.0
+     */
+    getThumbnailName?: GetThumnbnailName;
+    /**
+     * A function called returning label of a given grid item that is used to
+     * display the item's thumbnail label. Returns <Code>item.label</Code>
+     * by default.
+     * @since 10.19.0
+     */
+    getThumbnailLabel?: GetThumbnailLabel;
+    /**
+     * A function called returning group ID of a given grid item that is used
+     * to sort items by group. Returns <Code>item.groupId</Code>
+     * by default.
+     * @since 10.19.0
+     */
+    getGroupId?: GetGroupId;
+    /**
+     * @since 10.19.0
+     */
+    qa?: QaTags;
+}
+export interface SearchBarProps {
+    /**
+     * @since 10.19.0
+     */
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * @since 10.19.0
+     */
+    query: string;
+}
+export {};

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

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

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

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

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

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

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

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

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

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

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

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