@procore/core-react 11.22.0 → 11.23.0

package/dist/ThumbnailGrid/ThumbnailGrid.js

@@ -1,34 +1,26 @@
-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;
-};
-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));
-};
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+var _excluded = ["children", "style", "columnsCount"],
+  _excluded2 = ["children", "className", "style"],
+  _excluded3 = ["style"],
+  _excluded4 = ["items", "selected", "groups", "title", "gridWidth", "gridHeight", "onSelect", "onDeselect", "disableSelection", "isFetching", "loadMoreItems", "qa", "allowSelectAll", "onSelectAll", "onDeselectAll", "onSelectAllGroup", "onDeselectAllGroup"];
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 import { useFocusWithin } from '@react-aria/interactions';
 import React from 'react';
 import InfiniteLoader from 'react-window-infinite-loader';
@@ -37,397 +29,539 @@ import { Tooltip } from '../Tooltip/Tooltip';
 import { useI18nContext } from '../_hooks/I18n';
 import { mergeRefs } from '../_utils/mergeRefs';
 import { useGridNavigation } from './ThumbnailGrid.hooks';
-import { StyledGroupCell, StyledGroupTitle, StyledSpinnerWrapper, StyledThumbnail, StyledThumbnailGrid, StyledVariableSizeGrid, StyledCheckbox, } from './ThumbnailGrid.styles';
-function noop() { }
-var asyncNoop = function () { return Promise.resolve(); };
+import { StyledGroupCell, StyledGroupTitle, StyledSpinnerWrapper, StyledThumbnail, StyledThumbnailGrid, StyledVariableSizeGrid, StyledCheckbox } from './ThumbnailGrid.styles';
+function noop() {}
+var asyncNoop = function asyncNoop() {
+  return Promise.resolve();
+};
 var titleHeight = 20;
 var titleTopPadding = 24;
 var thumbnailHeight = 138;
 var thumbnailWidh = 104;
 var defaultColumnsCount = 5;
 var gutterSize = 12;
-var columnWidth = thumbnailWidh + gutterSize;
+var _columnWidth = thumbnailWidh + gutterSize;
 var gridLeftPadding = 24;
-var defaultGridWidth = gridLeftPadding + columnWidth * defaultColumnsCount;
+var defaultGridWidth = gridLeftPadding + _columnWidth * defaultColumnsCount;
 var defaultGridHeight = (thumbnailHeight + gutterSize) * 3;
-var getId = function (item) { return item.id; };
-var getGridRows = function (_a) {
-    var items = _a.items, groups = _a.groups, title = _a.title, _b = _a.isFetching, isFetching = _b === void 0 ? false : _b, groupTitleFallback = _a.groupTitleFallback, _c = _a.columnsCount, columnsCount = _c === void 0 ? defaultColumnsCount : _c;
-    var splitToRows = function (items) {
-        return items.reduce(function (acc, item, index) {
-            var rowIndex = Math.floor(index / columnsCount);
-            var row = (acc[rowIndex] = acc[rowIndex] || []);
-            row.push(item);
-            return acc;
-        }, []);
-    };
-    var splitToGroupedRows = function (items, groups) {
-        var groupedRows = [];
-        var groupedThumbnails = items.reduce(function (acc, item) {
-            var _a;
-            var groupId = (_a = item.groupId) !== null && _a !== void 0 ? _a : String(item.groupId);
-            var group = acc.get(groupId);
-            if (group) {
-                group.push(item);
-            }
-            else {
-                acc.set(groupId, [item]);
-            }
-            return acc;
-        }, new Map(groups.map(function (_a) {
-            var id = _a.id;
-            return [id, []];
-        })));
-        groupedThumbnails.forEach(function (group, groupId) {
-            var _a;
-            var groupRows = splitToRows(group);
-            if (groupRows.length) {
-                var groupTitleRow = [
-                    {
-                        title: ((_a = groups.find(function (_a) {
-                            var id = _a.id;
-                            return groupId === id;
-                        })) === null || _a === void 0 ? void 0 : _a.title) ||
-                            groupTitleFallback,
-                        groupId: groupId,
-                    },
-                ];
-                groupRows.unshift(groupTitleRow);
-            }
-            groupedRows = __spreadArray(__spreadArray([], groupedRows, true), groupRows, true);
-        });
-        return groupedRows;
-    };
-    var setGridTitle = function (rows) {
-        if (title) {
-            rows.unshift([{ title: title }]);
-        }
-        return rows;
-    };
-    var setLoadingIndicator = function (rows) {
-        if (isFetching) {
-            rows.push([{ isFetching: isFetching }]);
-        }
-        return rows;
-    };
-    var gridRows = groups
-        ? splitToGroupedRows(items, groups)
-        : splitToRows(items);
-    var gridRowsWithOptionalTitle = setGridTitle(gridRows);
-    var gridRowsWithOptionalLoadingIndicator = setLoadingIndicator(gridRowsWithOptionalTitle);
-    return gridRowsWithOptionalLoadingIndicator;
+var getId = function getId(item) {
+  return item.id;
 };
-var filterByGroupId = function (item, groupId) {
-    return String(item.groupId) === groupId;
+var getGridRows = function getGridRows(_ref) {
+  var items = _ref.items,
+    groups = _ref.groups,
+    title = _ref.title,
+    _ref$isFetching = _ref.isFetching,
+    isFetching = _ref$isFetching === void 0 ? false : _ref$isFetching,
+    groupTitleFallback = _ref.groupTitleFallback,
+    _ref$columnsCount = _ref.columnsCount,
+    columnsCount = _ref$columnsCount === void 0 ? defaultColumnsCount : _ref$columnsCount;
+  var splitToRows = function splitToRows(items) {
+    return items.reduce(function (acc, item, index) {
+      var rowIndex = Math.floor(index / columnsCount);
+      var row = acc[rowIndex] = acc[rowIndex] || [];
+      row.push(item);
+      return acc;
+    }, []);
+  };
+  var splitToGroupedRows = function splitToGroupedRows(items, groups) {
+    var groupedRows = [];
+    var groupedThumbnails = items.reduce(function (acc, item) {
+      var _item$groupId;
+      var groupId = (_item$groupId = item.groupId) !== null && _item$groupId !== void 0 ? _item$groupId : String(item.groupId);
+      var group = acc.get(groupId);
+      if (group) {
+        group.push(item);
+      } else {
+        acc.set(groupId, [item]);
+      }
+      return acc;
+    }, new Map(groups.map(function (_ref2) {
+      var id = _ref2.id;
+      return [id, []];
+    })));
+    groupedThumbnails.forEach(function (group, groupId) {
+      var groupRows = splitToRows(group);
+      if (groupRows.length) {
+        var _groups$find;
+        var groupTitleRow = [{
+          title: ((_groups$find = groups.find(function (_ref3) {
+            var id = _ref3.id;
+            return groupId === id;
+          })) === null || _groups$find === void 0 ? void 0 : _groups$find.title) || groupTitleFallback,
+          groupId: groupId
+        }];
+        groupRows.unshift(groupTitleRow);
+      }
+      groupedRows = [].concat(_toConsumableArray(groupedRows), _toConsumableArray(groupRows));
+    });
+    return groupedRows;
+  };
+  var setGridTitle = function setGridTitle(rows) {
+    if (title) {
+      rows.unshift([{
+        title: title
+      }]);
+    }
+    return rows;
+  };
+  var setLoadingIndicator = function setLoadingIndicator(rows) {
+    if (isFetching) {
+      rows.push([{
+        isFetching: isFetching
+      }]);
+    }
+    return rows;
+  };
+  var gridRows = groups ? splitToGroupedRows(items, groups) : splitToRows(items);
+  var gridRowsWithOptionalTitle = setGridTitle(gridRows);
+  var gridRowsWithOptionalLoadingIndicator = setLoadingIndicator(gridRowsWithOptionalTitle);
+  return gridRowsWithOptionalLoadingIndicator;
 };
-var GroupCell = function (_a) {
-    var children = _a.children, style = _a.style, columnsCount = _a.columnsCount, props = __rest(_a, ["children", "style", "columnsCount"]);
-    return (React.createElement(StyledGroupCell, __assign({ style: __assign(__assign({}, style), { left: (style === null || style === void 0 ? void 0 : style.left) + gridLeftPadding, top: (style === null || style === void 0 ? void 0 : style.top) + gutterSize, width: columnWidth * columnsCount }) }, props), children));
+var filterByGroupId = function filterByGroupId(item, groupId) {
+  return String(item.groupId) === groupId;
 };
-var ThumbnailCell = function (_a) {
-    var children = _a.children, className = _a.className, style = _a.style, props = __rest(_a, ["children", "className", "style"]);
-    return (React.createElement("div", __assign({ style: __assign(__assign({}, style), { left: (style === null || style === void 0 ? void 0 : style.left) + gridLeftPadding, top: (style === null || style === void 0 ? void 0 : style.top) + gutterSize }) }, props), children));
+var GroupCell = function GroupCell(_ref4) {
+  var children = _ref4.children,
+    style = _ref4.style,
+    columnsCount = _ref4.columnsCount,
+    props = _objectWithoutProperties(_ref4, _excluded);
+  return /*#__PURE__*/React.createElement(StyledGroupCell, _extends({
+    style: _objectSpread(_objectSpread({}, style), {}, {
+      left: (style === null || style === void 0 ? void 0 : style.left) + gridLeftPadding,
+      top: (style === null || style === void 0 ? void 0 : style.top) + gutterSize,
+      width: _columnWidth * columnsCount
+    })
+  }, props), children);
 };
+var ThumbnailCell = function ThumbnailCell(_ref5) {
+  var children = _ref5.children,
+    className = _ref5.className,
+    style = _ref5.style,
+    props = _objectWithoutProperties(_ref5, _excluded2);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    style: _objectSpread(_objectSpread({}, style), {}, {
+      left: (style === null || style === void 0 ? void 0 : style.left) + gridLeftPadding,
+      top: (style === null || style === void 0 ? void 0 : style.top) + gutterSize
+    })
+  }, props), children);
+};
+
 // See https://github.com/bvaughn/react-window/issues/130
-var GridOuterContainer = React.forwardRef(function (props, ref) { return React.createElement("div", __assign({ ref: ref, tabIndex: -1 }, props)); });
-var GridInnerContainer = React.forwardRef(function (_a, ref) {
-    var style = _a.style, props = __rest(_a, ["style"]);
-    return (React.createElement("div", __assign({ ref: ref, tabIndex: -1, style: __assign(__assign({}, style), { paddingLeft: gridLeftPadding, width: (style === null || style === void 0 ? void 0 : style.width) + gridLeftPadding }) }, props)));
+var GridOuterContainer = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref,
+    tabIndex: -1
+  }, props));
 });
-export var ThumbnailGrid = React.forwardRef(function (_a, forwardRef) {
-    var items = _a.items, _b = _a.selected, selected = _b === void 0 ? [] : _b, groups = _a.groups, _c = _a.title, title = _c === void 0 ? '' : _c, _d = _a.gridWidth, gridWidth = _d === void 0 ? defaultGridWidth : _d, _e = _a.gridHeight, gridHeight = _e === void 0 ? defaultGridHeight : _e, _f = _a.onSelect, onSelect = _f === void 0 ? noop : _f, _g = _a.onDeselect, onDeselect = _g === void 0 ? noop : _g, _h = _a.disableSelection, disableSelection = _h === void 0 ? {
-        value: false,
-        tooltip: '',
-    } : _h, _j = _a.isFetching, isFetching = _j === void 0 ? false : _j, _k = _a.loadMoreItems, loadMoreItems = _k === void 0 ? asyncNoop : _k, qa = _a.qa, _l = _a.allowSelectAll, allowSelectAll = _l === void 0 ? false : _l, _m = _a.onSelectAll, onSelectAll = _m === void 0 ? noop : _m, _o = _a.onDeselectAll, onDeselectAll = _o === void 0 ? noop : _o, _p = _a.onSelectAllGroup, onSelectAllGroup = _p === void 0 ? noop : _p, _q = _a.onDeselectAllGroup, onDeselectAllGroup = _q === void 0 ? noop : _q, props = __rest(_a, ["items", "selected", "groups", "title", "gridWidth", "gridHeight", "onSelect", "onDeselect", "disableSelection", "isFetching", "loadMoreItems", "qa", "allowSelectAll", "onSelectAll", "onDeselectAll", "onSelectAllGroup", "onDeselectAllGroup"]);
-    var gridContainerRef = React.useRef(null);
-    var I18n = useI18nContext();
-    var gridContainer = gridContainerRef.current;
-    var gridRef = React.useRef(null);
-    var _r = React.useState(gridWidth), gridContainerWidth = _r[0], setGridContainerWidth = _r[1];
-    var _s = React.useState(defaultColumnsCount), columnsCount = _s[0], setColumnsCount = _s[1];
-    var gridInstance = gridRef.current;
-    var focusWithinProps = useFocusWithin({
-        onFocusWithin: function (e) { return setIsGridFocused(true); },
-        onBlurWithin: function (e) { return setIsGridFocused(false); },
-    }).focusWithinProps;
-    React.useEffect(function () {
-        var handleResize = function () {
-            if (gridContainer === null || gridContainer === void 0 ? void 0 : gridContainer.offsetWidth) {
-                var containerWidth = gridContainer.offsetWidth - gridLeftPadding;
-                var currentColumnsCount = Math.floor(containerWidth / columnWidth);
-                setGridContainerWidth(containerWidth);
-                setColumnsCount(currentColumnsCount || 1);
-            }
-        };
-        handleResize(); // Initial resize calculation
-        window.addEventListener('resize', handleResize);
-        return function () {
-            window.removeEventListener('resize', handleResize);
-        };
-    }, [gridContainer]);
-    var rows = React.useMemo(function () {
-        return getGridRows({
-            items: items,
-            groups: groups,
-            isFetching: isFetching,
-            title: title,
-            columnsCount: columnsCount,
-            groupTitleFallback: I18n.t('core.fileExplorer.ungroupedThumbnailGridGroup'),
-        });
-    }, [items, groups, title, isFetching, columnsCount]);
-    var isTitleRow = function (rowCells) {
-        return 'title' in rowCells[0];
-    };
-    var isFetchingRow = function (rowCells) {
-        return 'isFetching' in rowCells[0];
+var GridInnerContainer = /*#__PURE__*/React.forwardRef(function (_ref6, ref) {
+  var style = _ref6.style,
+    props = _objectWithoutProperties(_ref6, _excluded3);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref,
+    tabIndex: -1,
+    style: _objectSpread(_objectSpread({}, style), {}, {
+      paddingLeft: gridLeftPadding,
+      width: (style === null || style === void 0 ? void 0 : style.width) + gridLeftPadding
+    })
+  }, props));
+});
+export var ThumbnailGrid = /*#__PURE__*/React.forwardRef(function (_ref7, forwardRef) {
+  var items = _ref7.items,
+    _ref7$selected = _ref7.selected,
+    selected = _ref7$selected === void 0 ? [] : _ref7$selected,
+    groups = _ref7.groups,
+    _ref7$title = _ref7.title,
+    title = _ref7$title === void 0 ? '' : _ref7$title,
+    _ref7$gridWidth = _ref7.gridWidth,
+    gridWidth = _ref7$gridWidth === void 0 ? defaultGridWidth : _ref7$gridWidth,
+    _ref7$gridHeight = _ref7.gridHeight,
+    gridHeight = _ref7$gridHeight === void 0 ? defaultGridHeight : _ref7$gridHeight,
+    _ref7$onSelect = _ref7.onSelect,
+    onSelect = _ref7$onSelect === void 0 ? noop : _ref7$onSelect,
+    _ref7$onDeselect = _ref7.onDeselect,
+    onDeselect = _ref7$onDeselect === void 0 ? noop : _ref7$onDeselect,
+    _ref7$disableSelectio = _ref7.disableSelection,
+    disableSelection = _ref7$disableSelectio === void 0 ? {
+      value: false,
+      tooltip: ''
+    } : _ref7$disableSelectio,
+    _ref7$isFetching = _ref7.isFetching,
+    isFetching = _ref7$isFetching === void 0 ? false : _ref7$isFetching,
+    _ref7$loadMoreItems = _ref7.loadMoreItems,
+    loadMoreItems = _ref7$loadMoreItems === void 0 ? asyncNoop : _ref7$loadMoreItems,
+    qa = _ref7.qa,
+    _ref7$allowSelectAll = _ref7.allowSelectAll,
+    allowSelectAll = _ref7$allowSelectAll === void 0 ? false : _ref7$allowSelectAll,
+    _ref7$onSelectAll = _ref7.onSelectAll,
+    onSelectAll = _ref7$onSelectAll === void 0 ? noop : _ref7$onSelectAll,
+    _ref7$onDeselectAll = _ref7.onDeselectAll,
+    onDeselectAll = _ref7$onDeselectAll === void 0 ? noop : _ref7$onDeselectAll,
+    _ref7$onSelectAllGrou = _ref7.onSelectAllGroup,
+    onSelectAllGroup = _ref7$onSelectAllGrou === void 0 ? noop : _ref7$onSelectAllGrou,
+    _ref7$onDeselectAllGr = _ref7.onDeselectAllGroup,
+    onDeselectAllGroup = _ref7$onDeselectAllGr === void 0 ? noop : _ref7$onDeselectAllGr,
+    props = _objectWithoutProperties(_ref7, _excluded4);
+  var gridContainerRef = React.useRef(null);
+  var I18n = useI18nContext();
+  var gridContainer = gridContainerRef.current;
+  var gridRef = React.useRef(null);
+  var _React$useState = React.useState(gridWidth),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    gridContainerWidth = _React$useState2[0],
+    setGridContainerWidth = _React$useState2[1];
+  var _React$useState3 = React.useState(defaultColumnsCount),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    columnsCount = _React$useState4[0],
+    setColumnsCount = _React$useState4[1];
+  var gridInstance = gridRef.current;
+  var _useFocusWithin = useFocusWithin({
+      onFocusWithin: function onFocusWithin(e) {
+        return setIsGridFocused(true);
+      },
+      onBlurWithin: function onBlurWithin(e) {
+        return setIsGridFocused(false);
+      }
+    }),
+    focusWithinProps = _useFocusWithin.focusWithinProps;
+  React.useEffect(function () {
+    var handleResize = function handleResize() {
+      if (gridContainer !== null && gridContainer !== void 0 && gridContainer.offsetWidth) {
+        var containerWidth = gridContainer.offsetWidth - gridLeftPadding;
+        var currentColumnsCount = Math.floor(containerWidth / _columnWidth);
+        setGridContainerWidth(containerWidth);
+        setColumnsCount(currentColumnsCount || 1);
+      }
     };
-    var isNonNavigableRow = function (rowCells) {
-        return isTitleRow(rowCells) || isFetchingRow(rowCells);
+    handleResize(); // Initial resize calculation
+
+    window.addEventListener('resize', handleResize);
+    return function () {
+      window.removeEventListener('resize', handleResize);
     };
-    var rowHeights = React.useMemo(function () {
-        return rows.map(function (rowCells, index) {
-            var titleRow = isTitleRow(rowCells);
-            var titleRowIsNotFirstGridRow = titleRow && index > 0;
-            var rowPadding = (titleRowIsNotFirstGridRow ? titleTopPadding : 0) + gutterSize;
-            if (titleRow) {
-                return titleHeight + rowPadding;
-            }
-            else {
-                return thumbnailHeight + rowPadding;
-            }
-        });
-    }, [rows]);
-    var nonNavigableRowIndices = React.useMemo(function () {
-        return rows
-            .map(function (rowCells, index) { return ({
-            index: index,
-            isNonNavigableRow: isNonNavigableRow(rowCells),
-        }); })
-            .filter(function (_a) {
-            var isNonNavigableRow = _a.isNonNavigableRow;
-            return isNonNavigableRow;
-        })
-            .map(function (_a) {
-            var index = _a.index;
-            return index;
-        });
-    }, [rows]);
-    var navigationIndicesRows = React.useMemo(function () {
-        return rows
-            .filter(function (rowCells) { return !isNonNavigableRow(rowCells); })
-            .map(function (rowCells) {
-            return rowCells.map(function (cell) {
-                return items.findIndex(function (item) { return item.id === cell.id; });
-            });
-        });
-    }, [rows, items]);
-    var getNumberOfNonNavigableRowsBefore = React.useCallback(function (rowIndex) {
-        return nonNavigableRowIndices.filter(function (index) { return rowIndex > index; }).length;
-    }, [nonNavigableRowIndices]);
-    var getThumbnailNavigationIndex = React.useCallback(function (rowIndex, cellIndex) {
-        return navigationIndicesRows[rowIndex - getNumberOfNonNavigableRowsBefore(rowIndex)][cellIndex];
-    }, [navigationIndicesRows, getNumberOfNonNavigableRowsBefore]);
-    var thumbnailNavigationIndexToRowIndexMap = React.useMemo(function () {
-        return rows.reduce(function (acc, rowCells, rowIndex) {
-            if (isNonNavigableRow(rowCells))
-                return acc;
-            var mappedRowCells = rowCells.reduce(function (acc, _, cellIndex) {
-                var navIndex = String(getThumbnailNavigationIndex(rowIndex, cellIndex));
-                acc[navIndex] = rowIndex;
-                return acc;
-            }, {});
-            return __assign(__assign({}, acc), mappedRowCells);
-        }, {});
-    }, [rows, getThumbnailNavigationIndex]);
-    var _t = React.useState(false), isGridFocused = _t[0], setIsGridFocused = _t[1];
-    var navigation = useGridNavigation({
-        indicesRows: navigationIndicesRows,
+  }, [gridContainer]);
+  var rows = React.useMemo(function () {
+    return getGridRows({
+      items: items,
+      groups: groups,
+      isFetching: isFetching,
+      title: title,
+      columnsCount: columnsCount,
+      groupTitleFallback: I18n.t('core.fileExplorer.ungroupedThumbnailGridGroup')
     });
-    var isThumbnailSelected = function (thumbnail) {
-        return selected.some(function (_a) {
-            var id = _a.id;
-            return thumbnail.id === id;
-        });
-    };
-    var toggle = function (thumbnail) {
-        if (isThumbnailSelected(thumbnail)) {
-            onDeselect(thumbnail);
-        }
-        else if (!disableSelection.value) {
-            onSelect(thumbnail);
-        }
-    };
-    var itemsIds = React.useMemo(function () { return items.map(getId); }, [items]);
-    var selectedIds = React.useMemo(function () { return selected.map(getId); }, [selected]);
-    var isFullySelected = React.useMemo(function () {
-        return (itemsIds.length > 0 && itemsIds.every(function (id) { return selectedIds.includes(id); }));
-    }, [selected, items]);
-    var isPartiallySelected = React.useMemo(function () {
-        return (selectedIds.length > 0 &&
-            !isFullySelected &&
-            itemsIds.some(function (id) { return selectedIds.includes(id); }));
-    }, [selected, isFullySelected]);
-    var isGroupFullySelected = function (groupId) {
-        var currentGroupItems = items.filter(function (item) {
-            return filterByGroupId(item, groupId);
-        });
-        var selectedGroupItems = selected.filter(function (item) {
-            return filterByGroupId(item, groupId);
+  }, [items, groups, title, isFetching, columnsCount]);
+  var isTitleRow = function isTitleRow(rowCells) {
+    return 'title' in rowCells[0];
+  };
+  var isFetchingRow = function isFetchingRow(rowCells) {
+    return 'isFetching' in rowCells[0];
+  };
+  var isNonNavigableRow = function isNonNavigableRow(rowCells) {
+    return isTitleRow(rowCells) || isFetchingRow(rowCells);
+  };
+  var rowHeights = React.useMemo(function () {
+    return rows.map(function (rowCells, index) {
+      var titleRow = isTitleRow(rowCells);
+      var titleRowIsNotFirstGridRow = titleRow && index > 0;
+      var rowPadding = (titleRowIsNotFirstGridRow ? titleTopPadding : 0) + gutterSize;
+      if (titleRow) {
+        return titleHeight + rowPadding;
+      } else {
+        return thumbnailHeight + rowPadding;
+      }
+    });
+  }, [rows]);
+  var nonNavigableRowIndices = React.useMemo(function () {
+    return rows.map(function (rowCells, index) {
+      return {
+        index: index,
+        isNonNavigableRow: isNonNavigableRow(rowCells)
+      };
+    }).filter(function (_ref8) {
+      var isNonNavigableRow = _ref8.isNonNavigableRow;
+      return isNonNavigableRow;
+    }).map(function (_ref9) {
+      var index = _ref9.index;
+      return index;
+    });
+  }, [rows]);
+  var navigationIndicesRows = React.useMemo(function () {
+    return rows.filter(function (rowCells) {
+      return !isNonNavigableRow(rowCells);
+    }).map(function (rowCells) {
+      return rowCells.map(function (cell) {
+        return items.findIndex(function (item) {
+          return item.id === cell.id;
         });
-        return (currentGroupItems.length > 0 &&
-            currentGroupItems
-                .map(getId)
-                .every(function (id) { return selectedGroupItems.map(getId).includes(id); }));
-    };
-    var isGroupPartiallySelected = function (groupId) {
-        var currentGroupItems = items.filter(function (item) {
-            return filterByGroupId(item, groupId);
+      });
+    });
+  }, [rows, items]);
+  var getNumberOfNonNavigableRowsBefore = React.useCallback(function (rowIndex) {
+    return nonNavigableRowIndices.filter(function (index) {
+      return rowIndex > index;
+    }).length;
+  }, [nonNavigableRowIndices]);
+  var getThumbnailNavigationIndex = React.useCallback(function (rowIndex, cellIndex) {
+    return navigationIndicesRows[rowIndex - getNumberOfNonNavigableRowsBefore(rowIndex)][cellIndex];
+  }, [navigationIndicesRows, getNumberOfNonNavigableRowsBefore]);
+  var thumbnailNavigationIndexToRowIndexMap = React.useMemo(function () {
+    return rows.reduce(function (acc, rowCells, rowIndex) {
+      if (isNonNavigableRow(rowCells)) return acc;
+      var mappedRowCells = rowCells.reduce(function (acc, _, cellIndex) {
+        var navIndex = String(getThumbnailNavigationIndex(rowIndex, cellIndex));
+        acc[navIndex] = rowIndex;
+        return acc;
+      }, {});
+      return _objectSpread(_objectSpread({}, acc), mappedRowCells);
+    }, {});
+  }, [rows, getThumbnailNavigationIndex]);
+  var _React$useState5 = React.useState(false),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    isGridFocused = _React$useState6[0],
+    setIsGridFocused = _React$useState6[1];
+  var navigation = useGridNavigation({
+    indicesRows: navigationIndicesRows
+  });
+  var isThumbnailSelected = function isThumbnailSelected(thumbnail) {
+    return selected.some(function (_ref10) {
+      var id = _ref10.id;
+      return thumbnail.id === id;
+    });
+  };
+  var toggle = function toggle(thumbnail) {
+    if (isThumbnailSelected(thumbnail)) {
+      onDeselect(thumbnail);
+    } else if (!disableSelection.value) {
+      onSelect(thumbnail);
+    }
+  };
+  var itemsIds = React.useMemo(function () {
+    return items.map(getId);
+  }, [items]);
+  var selectedIds = React.useMemo(function () {
+    return selected.map(getId);
+  }, [selected]);
+  var isFullySelected = React.useMemo(function () {
+    return itemsIds.length > 0 && itemsIds.every(function (id) {
+      return selectedIds.includes(id);
+    });
+  }, [selected, items]);
+  var isPartiallySelected = React.useMemo(function () {
+    return selectedIds.length > 0 && !isFullySelected && itemsIds.some(function (id) {
+      return selectedIds.includes(id);
+    });
+  }, [selected, isFullySelected]);
+  var isGroupFullySelected = function isGroupFullySelected(groupId) {
+    var currentGroupItems = items.filter(function (item) {
+      return filterByGroupId(item, groupId);
+    });
+    var selectedGroupItems = selected.filter(function (item) {
+      return filterByGroupId(item, groupId);
+    });
+    return currentGroupItems.length > 0 && currentGroupItems.map(getId).every(function (id) {
+      return selectedGroupItems.map(getId).includes(id);
+    });
+  };
+  var isGroupPartiallySelected = function isGroupPartiallySelected(groupId) {
+    var currentGroupItems = items.filter(function (item) {
+      return filterByGroupId(item, groupId);
+    });
+    var selectedGroupItems = selected.filter(function (item) {
+      return filterByGroupId(item, groupId);
+    });
+    return selectedGroupItems.length > 0 && !isGroupFullySelected(groupId) && selectedGroupItems.map(getId).some(function (id) {
+      return currentGroupItems.map(getId).includes(id);
+    });
+  };
+  var onSelectAllChange = function onSelectAllChange(e) {
+    e.stopPropagation();
+    if (!isFullySelected) {
+      onSelectAll === null || onSelectAll === void 0 ? void 0 : onSelectAll();
+    } else {
+      onDeselectAll === null || onDeselectAll === void 0 ? void 0 : onDeselectAll();
+    }
+  };
+  var onSelectAllGroupChange = function onSelectAllGroupChange(e, groupId) {
+    e.stopPropagation();
+    if (!isGroupFullySelected(groupId)) {
+      onSelectAllGroup === null || onSelectAllGroup === void 0 ? void 0 : onSelectAllGroup(groupId);
+    } else {
+      onDeselectAllGroup === null || onDeselectAllGroup === void 0 ? void 0 : onDeselectAllGroup(groupId);
+    }
+  };
+  var onMouseDown = function onMouseDown(e) {
+    e.preventDefault();
+  };
+  var updateNavigationPosition = function updateNavigationPosition(e) {
+    if (e.key === 'Tab' && e.nativeEvent.shiftKey) {
+      e.preventDefault();
+      return navigation.left(e);
+    }
+    switch (e.key) {
+      case 'ArrowDown':
+      case 'Down':
+        e.preventDefault();
+        return navigation.down(e);
+      case 'ArrowUp':
+      case 'Up':
+        e.preventDefault();
+        return navigation.up(e);
+      case 'ArrowLeft':
+      case 'Left':
+        e.preventDefault();
+        return navigation.left(e);
+      case 'Tab':
+      case 'ArrowRight':
+      case 'Right':
+        e.preventDefault();
+        return navigation.right(e);
+      default:
+        return -1;
+    }
+  };
+  var onKeyDown = function onKeyDown(e) {
+    if (!isGridFocused) return;
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      toggle(items[navigation.index]);
+    } else {
+      var newPosition = updateNavigationPosition(e);
+      if (newPosition !== -1) {
+        gridInstance === null || gridInstance === void 0 ? void 0 : gridInstance.scrollToItem({
+          rowIndex: thumbnailNavigationIndexToRowIndexMap[newPosition]
         });
-        var selectedGroupItems = selected.filter(function (item) {
-            return filterByGroupId(item, groupId);
+      }
+    }
+  };
+  React.useEffect(function () {
+    navigation.setIndicesRows(navigationIndicesRows);
+  }, [navigationIndicesRows, navigation]);
+  React.useEffect(function () {
+    // VariableSizeGrid caches offsets and measurements for each row index for performance purposes.
+    // Method below clears cached data and triggers recalucation when a new value of search filter recomposites grid structure.
+    gridInstance === null || gridInstance === void 0 ? void 0 : gridInstance.resetAfterRowIndex(0);
+  }, [items, gridInstance]);
+  return /*#__PURE__*/React.createElement(StyledThumbnailGrid, _extends({}, props, focusWithinProps, {
+    ref: mergeRefs(forwardRef, gridContainerRef),
+    "data-qa": qa === null || qa === void 0 ? void 0 : qa.grid,
+    tabIndex: 0,
+    onMouseDown: onMouseDown
+  }), /*#__PURE__*/React.createElement(InfiniteLoader, {
+    loadMoreItems: isFetching ? asyncNoop : loadMoreItems,
+    itemCount: rows.length,
+    isItemLoaded: function isItemLoaded(index) {
+      return index < rows.length - 1;
+    },
+    threshold: 0
+  }, function (_ref11) {
+    var _onItemsRendered = _ref11.onItemsRendered,
+      infiniteLoaderRef = _ref11.ref;
+    return /*#__PURE__*/React.createElement(StyledVariableSizeGrid, {
+      width: gridContainerWidth,
+      height: gridHeight,
+      rowCount: rows.length,
+      rowHeight: function rowHeight(index) {
+        return rowHeights[index];
+      },
+      columnCount: columnsCount,
+      columnWidth: function columnWidth() {
+        return _columnWidth;
+      },
+      innerElementType: GridInnerContainer,
+      overscanRowCount: 2,
+      onItemsRendered: function onItemsRendered(_ref12) {
+        var visibleRowStartIndex = _ref12.visibleRowStartIndex,
+          visibleRowStopIndex = _ref12.visibleRowStopIndex,
+          overscanRowStopIndex = _ref12.overscanRowStopIndex,
+          overscanRowStartIndex = _ref12.overscanRowStartIndex;
+        _onItemsRendered({
+          overscanStartIndex: overscanRowStartIndex,
+          overscanStopIndex: overscanRowStopIndex,
+          visibleStartIndex: visibleRowStartIndex,
+          visibleStopIndex: visibleRowStopIndex
         });
-        return (selectedGroupItems.length > 0 &&
-            !isGroupFullySelected(groupId) &&
-            selectedGroupItems
-                .map(getId)
-                .some(function (id) { return currentGroupItems.map(getId).includes(id); }));
-    };
-    var onSelectAllChange = function (e) {
-        e.stopPropagation();
-        if (!isFullySelected) {
-            onSelectAll === null || onSelectAll === void 0 ? void 0 : onSelectAll();
-        }
-        else {
-            onDeselectAll === null || onDeselectAll === void 0 ? void 0 : onDeselectAll();
-        }
-    };
-    var onSelectAllGroupChange = function (e, groupId) {
-        e.stopPropagation();
-        if (!isGroupFullySelected(groupId)) {
-            onSelectAllGroup === null || onSelectAllGroup === void 0 ? void 0 : onSelectAllGroup(groupId);
-        }
-        else {
-            onDeselectAllGroup === null || onDeselectAllGroup === void 0 ? void 0 : onDeselectAllGroup(groupId);
-        }
-    };
-    var onMouseDown = function (e) {
-        e.preventDefault();
-    };
-    var updateNavigationPosition = function (e) {
-        if (e.key === 'Tab' && e.nativeEvent.shiftKey) {
-            e.preventDefault();
-            return navigation.left(e);
-        }
-        switch (e.key) {
-            case 'ArrowDown':
-            case 'Down':
-                e.preventDefault();
-                return navigation.down(e);
-            case 'ArrowUp':
-            case 'Up':
-                e.preventDefault();
-                return navigation.up(e);
-            case 'ArrowLeft':
-            case 'Left':
-                e.preventDefault();
-                return navigation.left(e);
-            case 'Tab':
-            case 'ArrowRight':
-            case 'Right':
-                e.preventDefault();
-                return navigation.right(e);
-            default:
-                return -1;
-        }
-    };
-    var onKeyDown = function (e) {
-        if (!isGridFocused)
-            return;
-        if (e.key === 'Enter' || e.key === ' ') {
-            e.preventDefault();
-            toggle(items[navigation.index]);
-        }
-        else {
-            var newPosition = updateNavigationPosition(e);
-            if (newPosition !== -1) {
-                gridInstance === null || gridInstance === void 0 ? void 0 : gridInstance.scrollToItem({
-                    rowIndex: thumbnailNavigationIndexToRowIndexMap[newPosition],
-                });
-            }
+      },
+      ref: mergeRefs(gridRef, infiniteLoaderRef),
+      style: {
+        overflow: 'hidden'
+      }
+    }, function (_ref13) {
+      var _qa$thumbnail;
+      var columnIndex = _ref13.columnIndex,
+        rowIndex = _ref13.rowIndex,
+        style = _ref13.style;
+      var cellData = rows[rowIndex][columnIndex];
+      if (!cellData) return null;
+      if ('title' in cellData) {
+        var isGlobalTitle = rowIndex === 0;
+        var groupId = String(cellData === null || cellData === void 0 ? void 0 : cellData.groupId);
+        var dataQa = isGlobalTitle ? 'global-select-all' : "group-".concat(groupId, "-select-all");
+        var onChangeCallback = isGlobalTitle ? onSelectAllChange : function (e) {
+          return onSelectAllGroupChange(e, groupId);
+        };
+        var isChecked = isGlobalTitle ? isFullySelected || isPartiallySelected : isGroupPartiallySelected(groupId) || isGroupFullySelected(groupId);
+        var isIndeterminate = isGlobalTitle ? isPartiallySelected : isGroupPartiallySelected(groupId);
+        return /*#__PURE__*/React.createElement(GroupCell, {
+          style: style,
+          columnsCount: columnsCount
+        }, allowSelectAll ? /*#__PURE__*/React.createElement(StyledCheckbox, {
+          "data-qa": dataQa,
+          onChange: onChangeCallback,
+          checked: isChecked,
+          indeterminate: isIndeterminate
+        }, /*#__PURE__*/React.createElement(StyledGroupTitle, {
+          weight: "bold",
+          color: "gray15"
+        }, cellData.title)) : /*#__PURE__*/React.createElement(StyledGroupTitle, {
+          weight: "bold",
+          color: "gray15"
+        }, cellData.title));
+      }
+      if ('isFetching' in cellData) {
+        return /*#__PURE__*/React.createElement(GroupCell, {
+          style: style,
+          columnsCount: columnsCount
+        }, /*#__PURE__*/React.createElement(StyledSpinnerWrapper, null, /*#__PURE__*/React.createElement(Spinner, null)));
+      }
+      var thumbnailNavigationIndex = getThumbnailNavigationIndex(rowIndex, columnIndex);
+      var isNavigationTarget = navigation.index === thumbnailNavigationIndex;
+      var isFocused = isGridFocused && isNavigationTarget;
+      var isSelected = isThumbnailSelected(cellData);
+      var isDisabled = disableSelection.value && !isSelected;
+      return /*#__PURE__*/React.createElement(ThumbnailCell, {
+        style: style
+      }, /*#__PURE__*/React.createElement(Tooltip, {
+        key: cellData.id,
+        trigger: isDisabled ? 'hover' : 'none',
+        overlay: disableSelection.tooltip,
+        showKeys: []
+      }, /*#__PURE__*/React.createElement(StyledThumbnail, {
+        "data-thumbnail": true,
+        "data-qa": qa === null || qa === void 0 ? void 0 : (_qa$thumbnail = qa.thumbnail) === null || _qa$thumbnail === void 0 ? void 0 : _qa$thumbnail.call(qa, cellData.id),
+        focused: isFocused,
+        selected: isSelected,
+        disabled: isDisabled,
+        caption: cellData.name,
+        src: cellData.src,
+        label: cellData.label,
+        hasCaptionPlaceholder: true,
+        role: 'checkbox',
+        value: String(thumbnailNavigationIndex),
+        onKeyDown: onKeyDown,
+        onChange: function onChange() {
+          toggle(cellData);
+        },
+        onClick: function onClick(_ref14) {
+          var _dataset;
+          var target = _ref14.target;
+          var isCaptionTooltipClick = (_dataset = target.dataset) === null || _dataset === void 0 ? void 0 : _dataset.captionTooltip;
+          if (isCaptionTooltipClick) return;
+          navigation.setIndex(thumbnailNavigationIndex);
+          toggle(cellData);
+          gridContainer === null || gridContainer === void 0 ? void 0 : gridContainer.focus();
         }
-    };
-    React.useEffect(function () {
-        navigation.setIndicesRows(navigationIndicesRows);
-    }, [navigationIndicesRows, navigation]);
-    React.useEffect(function () {
-        // VariableSizeGrid caches offsets and measurements for each row index for performance purposes.
-        // Method below clears cached data and triggers recalucation when a new value of search filter recomposites grid structure.
-        gridInstance === null || gridInstance === void 0 ? void 0 : gridInstance.resetAfterRowIndex(0);
-    }, [items, gridInstance]);
-    return (React.createElement(StyledThumbnailGrid, __assign({}, props, focusWithinProps, { ref: mergeRefs(forwardRef, gridContainerRef), "data-qa": qa === null || qa === void 0 ? void 0 : qa.grid, tabIndex: 0, onMouseDown: onMouseDown }),
-        React.createElement(InfiniteLoader, { loadMoreItems: isFetching ? asyncNoop : loadMoreItems, itemCount: rows.length, isItemLoaded: function (index) { return index < rows.length - 1; }, threshold: 0 }, function (_a) {
-            var onItemsRendered = _a.onItemsRendered, infiniteLoaderRef = _a.ref;
-            return (React.createElement(StyledVariableSizeGrid, { width: gridContainerWidth, height: gridHeight, rowCount: rows.length, rowHeight: function (index) { return rowHeights[index]; }, columnCount: columnsCount, columnWidth: function () { return columnWidth; }, innerElementType: GridInnerContainer, overscanRowCount: 2, onItemsRendered: function (_a) {
-                    var visibleRowStartIndex = _a.visibleRowStartIndex, visibleRowStopIndex = _a.visibleRowStopIndex, overscanRowStopIndex = _a.overscanRowStopIndex, overscanRowStartIndex = _a.overscanRowStartIndex;
-                    onItemsRendered({
-                        overscanStartIndex: overscanRowStartIndex,
-                        overscanStopIndex: overscanRowStopIndex,
-                        visibleStartIndex: visibleRowStartIndex,
-                        visibleStopIndex: visibleRowStopIndex,
-                    });
-                }, ref: mergeRefs(gridRef, infiniteLoaderRef), style: { overflow: 'hidden' } }, function (_a) {
-                var _b;
-                var columnIndex = _a.columnIndex, rowIndex = _a.rowIndex, style = _a.style;
-                var cellData = rows[rowIndex][columnIndex];
-                if (!cellData)
-                    return null;
-                if ('title' in cellData) {
-                    var isGlobalTitle = rowIndex === 0;
-                    var groupId_1 = String(cellData === null || cellData === void 0 ? void 0 : cellData.groupId);
-                    var dataQa = isGlobalTitle
-                        ? 'global-select-all'
-                        : "group-".concat(groupId_1, "-select-all");
-                    var onChangeCallback = isGlobalTitle
-                        ? onSelectAllChange
-                        : function (e) {
-                            return onSelectAllGroupChange(e, groupId_1);
-                        };
-                    var isChecked = isGlobalTitle
-                        ? isFullySelected || isPartiallySelected
-                        : isGroupPartiallySelected(groupId_1) ||
-                            isGroupFullySelected(groupId_1);
-                    var isIndeterminate = isGlobalTitle
-                        ? isPartiallySelected
-                        : isGroupPartiallySelected(groupId_1);
-                    return (React.createElement(GroupCell, { style: style, columnsCount: columnsCount }, allowSelectAll ? (React.createElement(StyledCheckbox, { "data-qa": dataQa, onChange: onChangeCallback, checked: isChecked, indeterminate: isIndeterminate },
-                        React.createElement(StyledGroupTitle, { weight: "bold", color: "gray15" }, cellData.title))) : (React.createElement(StyledGroupTitle, { weight: "bold", color: "gray15" }, cellData.title))));
-                }
-                if ('isFetching' in cellData) {
-                    return (React.createElement(GroupCell, { style: style, columnsCount: columnsCount },
-                        React.createElement(StyledSpinnerWrapper, null,
-                            React.createElement(Spinner, null))));
-                }
-                var thumbnailNavigationIndex = getThumbnailNavigationIndex(rowIndex, columnIndex);
-                var isNavigationTarget = navigation.index === thumbnailNavigationIndex;
-                var isFocused = isGridFocused && isNavigationTarget;
-                var isSelected = isThumbnailSelected(cellData);
-                var isDisabled = disableSelection.value && !isSelected;
-                return (React.createElement(ThumbnailCell, { style: style },
-                    React.createElement(Tooltip, { key: cellData.id, trigger: isDisabled ? 'hover' : 'none', overlay: disableSelection.tooltip, showKeys: [] },
-                        React.createElement(StyledThumbnail, { "data-thumbnail": true, "data-qa": (_b = qa === null || qa === void 0 ? void 0 : qa.thumbnail) === null || _b === void 0 ? void 0 : _b.call(qa, cellData.id), focused: isFocused, selected: isSelected, disabled: isDisabled, caption: cellData.name, src: cellData.src, label: cellData.label, hasCaptionPlaceholder: true, role: 'checkbox', value: String(thumbnailNavigationIndex), onKeyDown: onKeyDown, onChange: function () {
-                                toggle(cellData);
-                            }, onClick: function (_a) {
-                                var _b;
-                                var target = _a.target;
-                                var isCaptionTooltipClick = (_b = target
-                                    .dataset) === null || _b === void 0 ? void 0 : _b.captionTooltip;
-                                if (isCaptionTooltipClick)
-                                    return;
-                                navigation.setIndex(thumbnailNavigationIndex);
-                                toggle(cellData);
-                                gridContainer === null || gridContainer === void 0 ? void 0 : gridContainer.focus();
-                            } }))));
-            }));
-        })));
+      })));
+    });
+  }));
 });
 //# sourceMappingURL=ThumbnailGrid.js.map