@carbon/ibm-products 2.0.0-rc.3 → 2.0.0-rc.32

package/lib/components/Datagrid/useSelectRows.js

@@ -1,44 +1,36 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _react = _interopRequireDefault(require("react"));
-
+var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _react2 = require("@carbon/react");
-
 var _DatagridSelectAll = require("./Datagrid/DatagridSelectAll");
-
 var _commonColumnIds = require("./common-column-ids");
-
 var _settings = require("../../settings");
-
 var _excluded = ["onChange"];
-
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 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) { (0, _defineProperty2.default)(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; }
-
-var TableSelectRow = _react2.DataTable.TableSelectRow;
+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) { (0, _defineProperty2.default)(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; } /*
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          * Licensed Materials - Property of IBM
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          * 5724-Q36
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          * (c) Copyright IBM Corp. 2020
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          * US Government Users Restricted Rights - Use, duplication or disclosure
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          * restricted by GSA ADP Schedule Contract with IBM Corp.
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          */ // @flow
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
-
 var useSelectRows = function useSelectRows(hooks) {
   useHighlightSelection(hooks);
-
   var useInstance = function useInstance(instance) {
     var rows = instance.rows;
     var rowsWithSelect = rows.map(function (row) {
@@ -50,7 +42,6 @@ var useSelectRows = function useSelectRows(hooks) {
       rows: rowsWithSelect
     });
   };
-
   hooks.useInstance.push(useInstance);
   hooks.useInstance.push(function (instance) {
     Object.assign(instance, {
@@ -69,7 +60,6 @@ var useSelectRows = function useSelectRows(hooks) {
     }].concat((0, _toConsumableArray2.default)(columns));
   });
 };
-
 var useHighlightSelection = function useHighlightSelection(hooks) {
   var getRowProps = function getRowProps(props, _ref) {
     var row = _ref.row;
@@ -77,54 +67,60 @@ var useHighlightSelection = function useHighlightSelection(hooks) {
       className: (0, _classnames.default)("".concat(blockClass, "__carbon-row"), row.getToggleRowSelectedProps().checked ? "".concat(_settings.carbon.prefix, "--data-table--selected ").concat(blockClass, "__active-row") : '')
     }];
   };
-
   hooks.getRowProps.push(getRowProps);
 };
-
 var SelectRow = function SelectRow(datagridState) {
   var _columns$;
-
   var _datagridState$isFetc = datagridState.isFetching,
-      isFetching = _datagridState$isFetc === void 0 ? false : _datagridState$isFetc,
-      tableId = datagridState.tableId,
-      row = datagridState.row,
-      cell = datagridState.cell,
-      radio = datagridState.radio,
-      toggleAllRowsSelected = datagridState.toggleAllRowsSelected,
-      onRadioSelect = datagridState.onRadioSelect,
-      columns = datagridState.columns,
-      withStickyColumn = datagridState.withStickyColumn;
+    isFetching = _datagridState$isFetc === void 0 ? false : _datagridState$isFetc,
+    tableId = datagridState.tableId,
+    row = datagridState.row,
+    cell = datagridState.cell,
+    radio = datagridState.radio,
+    toggleAllRowsSelected = datagridState.toggleAllRowsSelected,
+    onRadioSelect = datagridState.onRadioSelect,
+    onRowSelect = datagridState.onRowSelect,
+    columns = datagridState.columns,
+    withStickyColumn = datagridState.withStickyColumn;
+  var _useState = (0, _react.useState)(window.innerWidth),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    windowSize = _useState2[0],
+    setWindowSize = _useState2[1];
+  (0, _react.useLayoutEffect)(function () {
+    function updateSize() {
+      setWindowSize(window.innerWidth);
+    }
+    window.addEventListener('resize', updateSize);
+    return function () {
+      return window.removeEventListener('resize', updateSize);
+    };
+  }, []);
   var selectDisabled = isFetching || row.getRowProps().selectDisabled;
-
   var _row$getToggleRowSele = row.getToggleRowSelectedProps(),
-      onChange = _row$getToggleRowSele.onChange,
-      selectProps = (0, _objectWithoutProperties2.default)(_row$getToggleRowSele, _excluded);
-
+    onChange = _row$getToggleRowSele.onChange,
+    selectProps = (0, _objectWithoutProperties2.default)(_row$getToggleRowSele, _excluded);
   var cellProps = cell.getCellProps();
   var isFirstColumnStickyLeft = ((_columns$ = columns[0]) === null || _columns$ === void 0 ? void 0 : _columns$.sticky) === 'left' && withStickyColumn;
-  return /*#__PURE__*/_react.default.createElement(TableSelectRow, (0, _extends2.default)({}, cellProps, selectProps, {
+  return /*#__PURE__*/_react.default.createElement(_react2.TableSelectRow, (0, _extends2.default)({}, cellProps, selectProps, {
     radio: radio,
     onSelect: function onSelect(e) {
       e.stopPropagation(); // avoid triggering onRowClick
-
       if (radio) {
         toggleAllRowsSelected(false);
-
         if (onRadioSelect) {
           onRadioSelect(row);
         }
       }
-
       onChange(e);
+      onRowSelect === null || onRowSelect === void 0 ? void 0 : onRowSelect(row, e);
     },
     id: "".concat(tableId, "-").concat(row.index),
     name: "".concat(tableId, "-").concat(row.index, "-name"),
-    className: (0, _classnames.default)("".concat(blockClass, "__checkbox-cell"), cellProps.className, (0, _defineProperty2.default)({}, "".concat(blockClass, "__checkbox-cell-sticky-left"), isFirstColumnStickyLeft)),
+    className: (0, _classnames.default)("".concat(blockClass, "__checkbox-cell"), cellProps.className, (0, _defineProperty2.default)({}, "".concat(blockClass, "__checkbox-cell-sticky-left"), isFirstColumnStickyLeft && windowSize > 671)),
     ariaLabel: "".concat(tableId, "-row-").concat(row.index) // TODO: aria label should be i18n'ed
     ,
     disabled: selectDisabled
   }));
 };
-
 var _default = useSelectRows;
 exports.default = _default;

package/lib/components/Datagrid/useSkeletonRows.js

@@ -1,14 +1,11 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
 /*
  * Licensed Materials - Property of IBM
  * 5724-Q36
@@ -19,8 +16,7 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 var useSkeletons = function useSkeletons(hooks) {
   var useInstance = function useInstance(instance) {
     var isFetching = instance.isFetching,
-        rows = instance.rows;
-
+      rows = instance.rows;
     var skeletonRow = function skeletonRow(id) {
       return {
         isSkeleton: true,
@@ -28,15 +24,12 @@ var useSkeletons = function useSkeletons(hooks) {
         id: id
       };
     };
-
     var rowsWithSkeletons = [].concat((0, _toConsumableArray2.default)(rows), [skeletonRow('skeleton-row-1'), skeletonRow('skeleton-row-2'), skeletonRow('skeleton-row-3')]);
     Object.assign(instance, {
       rows: isFetching ? rowsWithSkeletons : rows
     });
   };
-
   hooks.useInstance.push(useInstance);
 };
-
 var _default = useSkeletons;
 exports.default = _default;

package/lib/components/Datagrid/useSortableColumns.js

@@ -1,99 +1,97 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _react = _interopRequireDefault(require("react"));
-
+var _classnames = _interopRequireDefault(require("classnames"));
+var _settings = require("../../settings");
 var _react2 = require("@carbon/react");
-
 var _icons = require("@carbon/react/icons");
-
 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) { (0, _defineProperty2.default)(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 _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) { (0, _defineProperty2.default)(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; } /**
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          * Copyright IBM Corp. 2020, 2023
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          *
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          * This source code is licensed under the Apache-2.0 license found in the
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          * LICENSE file in the root directory of this source tree.
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          */
+var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
 var ordering = {
   ASC: 'ASC',
   DESC: 'DESC',
   NONE: 'NONE'
 };
-
 var useSortableColumns = function useSortableColumns(hooks) {
   var sortableVisibleColumns = function sortableVisibleColumns(visibleColumns, _ref) {
+    var _instance$customizeCo;
     var instance = _ref.instance;
     var onSort = instance.onSort;
-
     var onSortClick = function onSortClick(column) {
       var key = column.id;
       var sortDesc = column.isSortedDesc;
-
       var _getNewSortOrder = getNewSortOrder(sortDesc),
-          newSortDesc = _getNewSortOrder.newSortDesc,
-          newOrder = _getNewSortOrder.newOrder;
-
+        newSortDesc = _getNewSortOrder.newSortDesc,
+        newOrder = _getNewSortOrder.newOrder;
       if (onSort) {
         onSort(key, newOrder);
       }
-
       instance.toggleSortBy(key, newSortDesc, false);
     };
-
     var sortableColumns = visibleColumns.map(function (column) {
       var icon = function icon(col, props) {
-        if (col.isSorted) {
+        if (col !== null && col !== void 0 && col.isSorted) {
           switch (col.isSortedDesc) {
             case false:
               return /*#__PURE__*/_react.default.createElement(_icons.ArrowUp, (0, _extends2.default)({
                 size: 16
-              }, props));
-
+              }, props, {
+                className: "".concat(blockClass, "__sortable-icon ").concat(_settings.carbon.prefix, "--btn__icon")
+              }));
             case true:
               return /*#__PURE__*/_react.default.createElement(_icons.ArrowDown, (0, _extends2.default)({
                 size: 16
-              }, props));
-
+              }, props, {
+                className: "".concat(blockClass, "__sortable-icon ").concat(_settings.carbon.prefix, "--btn__icon")
+              }));
             default:
               return /*#__PURE__*/_react.default.createElement(_icons.ArrowsVertical, (0, _extends2.default)({
                 size: 16
-              }, props));
+              }, props, {
+                className: "".concat(blockClass, "__sortable-icon ").concat(_settings.carbon.prefix, "--btn__icon")
+              }));
           }
         }
-
         return /*#__PURE__*/_react.default.createElement(_icons.ArrowsVertical, (0, _extends2.default)({
           size: 16
-        }, props));
+        }, props, {
+          className: "".concat(blockClass, "__sortable-icon ").concat(_settings.carbon.prefix, "--btn__icon")
+        }));
       };
-
       var Header = function Header(headerProp) {
+        var _cx;
         return column.disableSortBy === true ? column.Header : /*#__PURE__*/_react.default.createElement(_react2.Button, {
           onClick: function onClick() {
-            return onSortClick(headerProp.column);
+            return onSortClick(headerProp === null || headerProp === void 0 ? void 0 : headerProp.column);
           },
           kind: "ghost",
           renderIcon: function renderIcon(props) {
-            return icon(headerProp.column, props);
-          }
+            return icon(headerProp === null || headerProp === void 0 ? void 0 : headerProp.column, props);
+          },
+          className: (0, _classnames.default)("".concat(_settings.carbon.prefix, "--table-sort ").concat(blockClass, "--table-sort"), (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "--table-sort--desc"), headerProp === null || headerProp === void 0 ? void 0 : headerProp.column.isSortedDesc), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "--table-sort--asc"), (headerProp === null || headerProp === void 0 ? void 0 : headerProp.column.isSortedDesc) === false), _cx))
         }, column.Header);
       };
-
       return _objectSpread(_objectSpread({}, column), {}, {
-        Header: Header
+        Header: Header,
+        minWidth: column.disableSortBy === true ? 0 : 90
       });
     });
-    return (0, _toConsumableArray2.default)(sortableColumns);
+    return (_instance$customizeCo = instance.customizeColumnsProps) !== null && _instance$customizeCo !== void 0 && _instance$customizeCo.isTearsheetOpen ? visibleColumns : (0, _toConsumableArray2.default)(sortableColumns);
   };
-
   var sortInstanceProps = function sortInstanceProps(instance) {
     var onSort = instance.onSort;
     Object.assign(instance, {
@@ -101,29 +99,23 @@ var useSortableColumns = function useSortableColumns(hooks) {
       isTableSortable: true
     });
   };
-
   var getNewSortOrder = function getNewSortOrder(sortOrder) {
     var order = {
       newSortDesc: undefined,
       newOrder: ordering.NONE
     };
-
     if (sortOrder === false) {
       order.newOrder = ordering.DESC;
       order.newSortDesc = true;
     }
-
     if (sortOrder === undefined) {
       order.newOrder = ordering.ASC;
       order.newSortDesc = false;
     }
-
     return order;
   };
-
   hooks.visibleColumns.push(sortableVisibleColumns);
   hooks.useInstance.push(sortInstanceProps);
 };
-
 var _default = useSortableColumns;
 exports.default = _default;

package/lib/components/Datagrid/useStickyColumn.js

@@ -1,42 +1,51 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
-
 var _debounce = _interopRequireDefault(require("lodash/debounce"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _settings = require("../../settings");
-
 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) { (0, _defineProperty2.default)(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 _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) { (0, _defineProperty2.default)(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; } /*
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          * Licensed Materials - Property of IBM
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          * 5724-Q36
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          * (c) Copyright IBM Corp. 2021
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          * US Government Users Restricted Rights - Use, duplication or disclosure
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          * restricted by GSA ADP Schedule Contract with IBM Corp.
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          */
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
 var styleClassPrefix = "".concat(blockClass, "__right-sticky-column");
 var leftStickyStyleClassPrefix = "".concat(blockClass, "__left-sticky-column");
 var OFFSET_SCROLL_CLASS = "".concat(styleClassPrefix, "-offset-scroll");
-
 var useStickyColumn = function useStickyColumn(hooks) {
   var tableBodyRef = (0, _react.useRef)();
   var stickyHeaderCellRef = (0, _react.useRef)();
-  hooks.getCellProps.push(changeProps.bind(null, 'cell', null));
-  hooks.getHeaderProps.push(changeProps.bind(null, 'header', stickyHeaderCellRef));
+  var _useState = (0, _react.useState)(window.innerWidth),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    windowSize = _useState2[0],
+    setWindowSize = _useState2[1];
+  (0, _react.useLayoutEffect)(function () {
+    function updateSize() {
+      setWindowSize(window.innerWidth);
+    }
+    window.addEventListener('resize', updateSize);
+    return function () {
+      return window.removeEventListener('resize', updateSize);
+    };
+  }, []);
+  hooks.getCellProps.push(changeProps.bind(null, 'cell', null, windowSize));
+  hooks.getHeaderProps.push(changeProps.bind(null, 'header', stickyHeaderCellRef, windowSize));
   hooks.getTableBodyProps.push(addTableBodyProps.bind(null, tableBodyRef));
   hooks.getHeaderGroupProps.push(function (props) {
     return [props, {
       style: _objectSpread(_objectSpread({}, props.style), {}, {
         minWidth: 'unset' // unset the min-width calculated by sum of all column min-width
-
       })
     }];
   });
@@ -45,11 +54,9 @@ var useStickyColumn = function useStickyColumn(hooks) {
     (0, _react.useEffect)(function () {
       var tableBodyElement = tableBodyRef.current;
       var headerCellElement = stickyHeaderCellRef.current;
-
       if (hasVertScroll(tableBodyElement) && headerCellElement) {
         headerCellElement.classList.add(OFFSET_SCROLL_CLASS);
       }
-
       var boundListener = (0, _debounce.default)(onBodyResize.bind(null, tableBodyElement, headerCellElement), 250);
       window.addEventListener('resize', boundListener);
       return function () {
@@ -59,17 +66,13 @@ var useStickyColumn = function useStickyColumn(hooks) {
     (0, _react.useEffect)(function () {
       var tableBodyElement = tableBodyRef.current;
       var headerCellElement = stickyHeaderCellRef.current;
-
       var listener = function listener(evt) {
         toggleStickyShadow(evt.target, headerCellElement);
       };
-
       toggleStickyShadow(tableBodyElement, headerCellElement);
-
       if (tableBodyElement) {
         tableBodyElement.addEventListener('scroll', listener);
       }
-
       return function () {
         if (tableBodyElement) {
           tableBodyElement.removeEventListener('scroll', listener);
@@ -77,7 +80,6 @@ var useStickyColumn = function useStickyColumn(hooks) {
       };
     }, [instance.rows, instance.isFetching]);
   };
-
   var useCheckScroll = function useCheckScroll(instance) {
     var tableBodyElement = tableBodyRef.current;
     var headerCellElement = stickyHeaderCellRef.current;
@@ -85,7 +87,6 @@ var useStickyColumn = function useStickyColumn(hooks) {
       onBodyResize(tableBodyElement, headerCellElement);
     }, [instance.rows, headerCellElement, tableBodyElement]);
   };
-
   hooks.useInstance.push(useEventListener);
   hooks.useInstance.push(useCheckScroll);
   hooks.useInstance.push(function (instance) {
@@ -106,13 +107,11 @@ var useStickyColumn = function useStickyColumn(hooks) {
     var stickyIdx = newColumns.findIndex(function (col) {
       return col.sticky === 'right';
     });
-
     if (spacerIdx >= 0 && stickyIdx >= 0 && stickyIdx < spacerIdx) {
       var temp = newColumns[spacerIdx];
       newColumns[spacerIdx] = newColumns[stickyIdx];
       newColumns[stickyIdx] = temp;
     }
-
     var newHeaders = instance.headers;
     spacerIdx = newHeaders.findIndex(function (col) {
       return col.id === 'spacer';
@@ -120,7 +119,6 @@ var useStickyColumn = function useStickyColumn(hooks) {
     stickyIdx = newHeaders.findIndex(function (col) {
       return col.sticky === 'right';
     });
-
     if (spacerIdx >= 0 && stickyIdx >= 0 && stickyIdx < spacerIdx) {
       var _temp = newHeaders[spacerIdx];
       newHeaders[spacerIdx] = newHeaders[stickyIdx];
@@ -131,39 +129,31 @@ var useStickyColumn = function useStickyColumn(hooks) {
     }
   });
 };
-
 var addTableBodyProps = function addTableBodyProps(tableBodyRef, props) {
   return [props, {
     ref: tableBodyRef
   }];
 };
-
-var changeProps = function changeProps(elementName, headerCellRef, props, data) {
+var changeProps = function changeProps(elementName, headerCellRef, windowSize, props, data) {
   var column = data.column || data.cell.column;
-
   if (column.sticky === 'right') {
     var _cx;
-
     return [props, _objectSpread({
       className: (0, _classnames.default)((_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(styleClassPrefix, "-").concat(elementName), true), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__resizableColumn"), false), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__sortableColumn"), false), _cx))
     }, headerCellRef && {
       ref: headerCellRef
     })];
   }
-
   if (column.sticky === 'left') {
     var _data$instance, _cx2;
-
     return [props, _objectSpread({
-      className: (0, _classnames.default)((_cx2 = {}, (0, _defineProperty2.default)(_cx2, "".concat(leftStickyStyleClassPrefix, "-").concat(elementName), true), (0, _defineProperty2.default)(_cx2, "".concat(leftStickyStyleClassPrefix, "-").concat(elementName, "--with-extra-select-column"), data === null || data === void 0 ? void 0 : (_data$instance = data.instance) === null || _data$instance === void 0 ? void 0 : _data$instance.withSelectRows), _cx2))
+      className: (0, _classnames.default)((_cx2 = {}, (0, _defineProperty2.default)(_cx2, "".concat(leftStickyStyleClassPrefix, "-").concat(elementName), true && windowSize > 671), (0, _defineProperty2.default)(_cx2, "".concat(leftStickyStyleClassPrefix, "-").concat(elementName, "--with-extra-select-column"), (data === null || data === void 0 ? void 0 : (_data$instance = data.instance) === null || _data$instance === void 0 ? void 0 : _data$instance.withSelectRows) && windowSize > 671), _cx2))
     }, headerCellRef && {
       ref: headerCellRef
     })];
   }
-
   return [props];
 };
-
 var onBodyResize = function onBodyResize(tableBodyEle, headerCellEle) {
   if (headerCellEle) {
     if (hasVertScroll(tableBodyEle)) {
@@ -171,15 +161,12 @@ var onBodyResize = function onBodyResize(tableBodyEle, headerCellEle) {
     } else {
       headerCellEle.classList.remove(OFFSET_SCROLL_CLASS);
     }
-
     toggleStickyShadow(tableBodyEle, headerCellEle);
   }
 };
-
 var toggleStickyShadow = function toggleStickyShadow(tableBodyEle, headerCellEle) {
   if (tableBodyEle && headerCellEle) {
     var isScrolledToRight = tableBodyEle.scrollLeft + tableBodyEle.clientWidth === tableBodyEle.scrollWidth;
-
     if (isScrolledToRight) {
       headerCellEle.classList.add("".concat(blockClass, "__sticky-noShadow"));
       tableBodyEle.classList.add("".concat(blockClass, "__sticky-column-noShadow"));
@@ -189,16 +176,13 @@ var toggleStickyShadow = function toggleStickyShadow(tableBodyEle, headerCellEle
     }
   }
 };
-
 var hasVertScroll = function hasVertScroll(element) {
   if (!element) {
     return false;
   }
-
   var scrollHeight = element.scrollHeight,
-      clientHeight = element.clientHeight;
+    clientHeight = element.clientHeight;
   return scrollHeight > clientHeight;
 };
-
 var _default = useStickyColumn;
 exports.default = _default;