@carbon/ibm-products 2.14.0 → 2.15.1

package/lib/components/Datagrid/useSelectRows.js

@@ -17,7 +17,7 @@ var _react2 = require("@carbon/react");
 var _DatagridSelectAll = require("./Datagrid/DatagridSelectAll");
 var _commonColumnIds = require("./common-column-ids");
 var _settings = require("../../settings");
-var _excluded = ["onChange"];
+var _excluded = ["onChange", "title"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -29,6 +29,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
                                                                                                                                                                                                                                                                                                                                                                                                                                                                        * restricted by GSA ADP Schedule Contract with IBM Corp.
                                                                                                                                                                                                                                                                                                                                                                                                                                                                        */ // @flow
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
+var checkboxClass = "".concat(_settings.pkg.prefix, "--datagrid__checkbox-cell");
 var useSelectRows = function useSelectRows(hooks) {
   useHighlightSelection(hooks);
   var useInstance = function useInstance(instance) {
@@ -62,9 +63,12 @@ var useSelectRows = function useSelectRows(hooks) {
 };
 var useHighlightSelection = function useHighlightSelection(hooks) {
   var getRowProps = function getRowProps(props, _ref) {
+    var _ref2;
     var row = _ref.row;
+    var _row$getToggleRowSele = row.getToggleRowSelectedProps(),
+      checked = _row$getToggleRowSele.checked;
     return [props, {
-      className: (0, _classnames.default)("".concat(blockClass, "__carbon-row"), row.getToggleRowSelectedProps().checked ? "".concat(_settings.carbon.prefix, "--data-table--selected ").concat(blockClass, "__active-row") : '')
+      className: (0, _classnames.default)(["".concat(blockClass, "__carbon-row"), (_ref2 = {}, (0, _defineProperty2.default)(_ref2, "".concat(_settings.carbon.prefix, "--data-table--selected"), checked), (0, _defineProperty2.default)(_ref2, "".concat(blockClass, "__active-row"), checked), _ref2)])
     }];
   };
   hooks.getRowProps.push(getRowProps);
@@ -95,30 +99,32 @@ var SelectRow = function SelectRow(datagridState) {
       return window.removeEventListener('resize', updateSize);
     };
   }, []);
+  var onSelectHandler = function onSelectHandler(e) {
+    e.stopPropagation(); // avoid triggering onRowClick
+    if (radio) {
+      toggleAllRowsSelected(false);
+      if (onRadioSelect) {
+        onRadioSelect(row);
+      }
+    }
+    onChange(e);
+    onRowSelect === null || onRowSelect === void 0 || onRowSelect(row, e);
+  };
   var selectDisabled = isFetching || row.getRowProps().disabled;
-  var _row$getToggleRowSele = row.getToggleRowSelectedProps(),
-    onChange = _row$getToggleRowSele.onChange,
-    selectProps = (0, _objectWithoutProperties2.default)(_row$getToggleRowSele, _excluded);
+  var _row$getToggleRowSele2 = row.getToggleRowSelectedProps(),
+    onChange = _row$getToggleRowSele2.onChange,
+    title = _row$getToggleRowSele2.title,
+    selectProps = (0, _objectWithoutProperties2.default)(_row$getToggleRowSele2, _excluded);
   var cellProps = cell.getCellProps();
   var isFirstColumnStickyLeft = ((_columns$ = columns[0]) === null || _columns$ === void 0 ? void 0 : _columns$.sticky) === 'left' && withStickyColumn;
+  var rowId = "".concat(tableId, "-").concat(row.index);
   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 || 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 && windowSize > 671)),
-    ariaLabel: "".concat(tableId, "-row-").concat(row.index) // TODO: aria label should be i18n'ed
-    ,
+    onSelect: onSelectHandler,
+    id: rowId,
+    name: "".concat(rowId, "-name"),
+    className: (0, _classnames.default)([checkboxClass, cellProps.className, (0, _defineProperty2.default)({}, "".concat(checkboxClass, "-sticky-left"), isFirstColumnStickyLeft && windowSize > 671)]),
+    ariaLabel: title,
     disabled: selectDisabled
   }));
 };

package/lib/components/Datagrid/useSortableColumns.js

@@ -116,7 +116,7 @@ var useSortableColumns = function useSortableColumns(hooks) {
       };
       return _objectSpread(_objectSpread({}, column), {}, {
         Header: Header,
-        minWidth: column.disableSortBy === true ? 0 : 90
+        minWidth: column.disableSortBy === true ? 0 : column.minWidth ? column.minWidth : 90
       });
     });
     return (_instance$customizeCo = instance.customizeColumnsProps) !== null && _instance$customizeCo !== void 0 && _instance$customizeCo.isTearsheetOpen ? visibleColumns : (0, _toConsumableArray2.default)(sortableColumns);

package/lib/components/EditTearsheet/EditTearsheet.js

@@ -16,7 +16,7 @@ var _react2 = require("@carbon/react");
 var _settings = require("../../settings");
 var _devtools = require("../../global/js/utils/devtools");
 var _TearsheetShell = require("../Tearsheet/TearsheetShell");
-var _excluded = ["cancelButtonText", "children", "className", "description", "influencerWidth", "label", "onClose", "open", "submitButtonText", "title", "verticalPosition", "onHandleModalClick", "onFormChange", "sideNavAriaLabel"];
+var _excluded = ["cancelButtonText", "children", "className", "description", "influencerWidth", "label", "onClose", "open", "submitButtonText", "title", "verticalPosition", "onRequestSubmit", "onFormChange", "sideNavAriaLabel"];
 /**
  * Copyright IBM Corp. 2022, 2023
  *
@@ -61,7 +61,7 @@ var EditTearsheet = exports.EditTearsheet = /*#__PURE__*/(0, _react.forwardRef)(
     title = _ref.title,
     _ref$verticalPosition = _ref.verticalPosition,
     verticalPosition = _ref$verticalPosition === void 0 ? defaults.verticalPosition : _ref$verticalPosition,
-    onHandleModalClick = _ref.onHandleModalClick,
+    onRequestSubmit = _ref.onRequestSubmit,
     onFormChange = _ref.onFormChange,
     _ref$sideNavAriaLabel = _ref.sideNavAriaLabel,
     sideNavAriaLabel = _ref$sideNavAriaLabel === void 0 ? defaults.sideNavAriaLabel : _ref$sideNavAriaLabel,
@@ -101,13 +101,15 @@ var EditTearsheet = exports.EditTearsheet = /*#__PURE__*/(0, _react.forwardRef)(
   }
   return /*#__PURE__*/_react.default.createElement(_TearsheetShell.TearsheetShell, (0, _extends2.default)({}, rest, (0, _devtools.getDevtoolsProps)(componentName), {
     actions: [{
+      key: 'edit-action-button-submit',
       label: submitButtonText,
-      onClick: onHandleModalClick,
+      onClick: onRequestSubmit,
       kind: 'primary'
     }, {
+      key: 'edit-action-button-cancel',
       label: cancelButtonText,
-      onClick: onHandleModalClick,
-      kind: 'secondary'
+      onClick: onClose,
+      kind: 'ghost'
     }],
     className: (0, _classnames.default)(blockClass, className),
     description: description,
@@ -187,9 +189,9 @@ EditTearsheet.propTypes = {
    */
   onFormChange: _propTypes.default.func,
   /**
-   * Specifies whether the tearsheet is currently open.
+   * Specify a handler for submitting the tearsheet.
    */
-  onHandleModalClick: _propTypes.default.func,
+  onRequestSubmit: _propTypes.default.func.isRequired,
   /**
    * Specifies whether the tearsheet is currently open.
    */

package/lib/components/EditTearsheet/preview-components/MultiFormEditTearsheet.js

@@ -80,14 +80,21 @@ var MultiFormEditTearsheet = exports.MultiFormEditTearsheet = function MultiForm
     setIsInvalid(false);
     setOpen(false);
   };
-  var handleModalClick = function handleModalClick() {
-    setOpen(!open);
+  var onClose = function onClose() {
+    clearCreateData();
+    (0, _addonActions.action)('onClose')();
+  };
+  var onSubmit = function onSubmit() {
+    setOpen(false);
+    (0, _addonActions.action)('onSubmit')();
   };
   var handleFormChange = function handleFormChange() {
     (0, _addonActions.action)('handleFormChange')();
   };
   return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("style", null, ".".concat(blockClass, " { opacity: 0 }"), ";"), /*#__PURE__*/_react.default.createElement(_react2.Button, {
-    onClick: handleModalClick
+    onClick: function onClick() {
+      return setOpen(!open);
+    }
   }, open ? 'Close EditTearsheet' : 'Open EditTearsheet'), /*#__PURE__*/_react.default.createElement(_EditTearsheet.EditTearsheet, {
     influencerWidth: influencerWidth,
     label: label,
@@ -97,8 +104,8 @@ var MultiFormEditTearsheet = exports.MultiFormEditTearsheet = function MultiForm
     description: description,
     title: title,
     open: open,
-    onHandleModalClick: handleModalClick,
-    onClose: clearCreateData,
+    onRequestSubmit: onSubmit,
+    onClose: onClose,
     onFormChange: handleFormChange
   }, /*#__PURE__*/_react.default.createElement(_EditTearsheetForm.EditTearsheetForm, {
     title: "Topic name",

package/lib/global/js/hooks/index.js

@@ -39,6 +39,12 @@ Object.defineProperty(exports, "useNearestScroll", {
     return _useWindowScroll.useNearestScroll;
   }
 });
+Object.defineProperty(exports, "usePrefix", {
+  enumerable: true,
+  get: function get() {
+    return _usePrefix.usePrefix;
+  }
+});
 Object.defineProperty(exports, "usePreviousValue", {
   enumerable: true,
   get: function get() {
@@ -85,4 +91,5 @@ var _usePreviousValue = require("./usePreviousValue");
 var _useResetCreateComponent = require("./useResetCreateComponent");
 var _useRetrieveStepData = require("./useRetrieveStepData");
 var _useValidCreateStepCount = require("./useValidCreateStepCount");
-var _useControllableState = require("./useControllableState");
+var _useControllableState = require("./useControllableState");
+var _usePrefix = require("./usePrefix");

package/lib/global/js/hooks/usePrefix.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.usePrefix = void 0;
+var _packageSettings = _interopRequireDefault(require("../package-settings"));
+/**
+ * Copyright IBM Corp. 2023, 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 usePrefix = exports.usePrefix = function usePrefix() {
+  return _packageSettings.default.prefix;
+};

package/lib/global/js/hooks/useRetrieveStepData.js

@@ -16,11 +16,12 @@ var _react = require("react");
 
 /**
  * This useEffect makes sure that every CreateTearsheetStep/CreateFullPageStep reports back it's
- * title, secondaryLabel, introStep, and shouldIncludeStep data so that it can be sent to the CreateInfluencer.
+ * title, secondaryLabel, introStep, invalid and shouldIncludeStep data so that it can be sent to the CreateInfluencer.
  * @param {object} useResetCreateComponent
  * @param {object} useResetCreateComponent.stepsContext
  * @param {number} useResetCreateComponent.stepNumber
  * @param {boolean} useResetCreateComponent.introStep
+ * @param {boolean} useResetCreateComponent.invalid
  * @param {boolean} useResetCreateComponent.shouldIncludeStep
  * @param {string} useResetCreateComponent.secondaryLabel
  * @param {string} useResetCreateComponent.title
@@ -29,6 +30,7 @@ var useRetrieveStepData = exports.useRetrieveStepData = function useRetrieveStep
   var stepsContext = _ref.stepsContext,
     stepNumber = _ref.stepNumber,
     introStep = _ref.introStep,
+    invalid = _ref.invalid,
     shouldIncludeStep = _ref.shouldIncludeStep,
     secondaryLabel = _ref.secondaryLabel,
     title = _ref.title;
@@ -39,10 +41,11 @@ var useRetrieveStepData = exports.useRetrieveStepData = function useRetrieveStep
           title: title,
           secondaryLabel: secondaryLabel,
           introStep: introStep,
+          invalid: invalid,
           shouldIncludeStep: shouldIncludeStep
         };
         var previousItem = prev[stepNumber - 1];
-        if ((previousItem === null || previousItem === void 0 ? void 0 : previousItem.title) !== stepItem.title || (previousItem === null || previousItem === void 0 ? void 0 : previousItem.secondaryLabel) !== stepItem.secondaryLabel || (previousItem === null || previousItem === void 0 ? void 0 : previousItem.introStep) !== stepItem.introStep || (previousItem === null || previousItem === void 0 ? void 0 : previousItem.shouldIncludeStep) !== stepItem.shouldIncludeStep) {
+        if ((previousItem === null || previousItem === void 0 ? void 0 : previousItem.title) !== stepItem.title || (previousItem === null || previousItem === void 0 ? void 0 : previousItem.secondaryLabel) !== stepItem.secondaryLabel || (previousItem === null || previousItem === void 0 ? void 0 : previousItem.introStep) !== stepItem.introStep || (previousItem === null || previousItem === void 0 ? void 0 : previousItem.shouldIncludeStep) !== stepItem.shouldIncludeStep || (previousItem === null || previousItem === void 0 ? void 0 : previousItem.invalid) !== stepItem.invalid) {
           var clone = (0, _toConsumableArray2.default)(prev);
           clone[stepNumber - 1] = stepItem;
           return clone;
@@ -50,5 +53,5 @@ var useRetrieveStepData = exports.useRetrieveStepData = function useRetrieveStep
         return prev;
       });
     }
-  }, [shouldIncludeStep, title, secondaryLabel, introStep, stepsContext, stepNumber]);
+  }, [shouldIncludeStep, title, secondaryLabel, introStep, invalid, stepsContext, stepNumber]);
 };

package/lib/index.js

@@ -4,7 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 var _exportNames = {
-  pkg: true
+  pkg: true,
+  usePrefix: true
 };
 Object.defineProperty(exports, "pkg", {
   enumerable: true,
@@ -12,7 +13,14 @@ Object.defineProperty(exports, "pkg", {
     return _settings.pkg;
   }
 });
+Object.defineProperty(exports, "usePrefix", {
+  enumerable: true,
+  get: function get() {
+    return _hooks.usePrefix;
+  }
+});
 var _settings = require("./settings");
+var _hooks = require("./global/js/hooks");
 var _components = require("./components");
 Object.keys(_components).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.14.0",
+  "version": "2.15.1",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -87,14 +87,14 @@
     "react-window": "^1.8.9"
   },
   "peerDependencies": {
-    "@carbon/grid": "^11.20.0",
-    "@carbon/layout": "^11.19.0",
-    "@carbon/motion": "^11.15.0",
-    "@carbon/react": "^1.40.0",
-    "@carbon/themes": "^11.25.0",
-    "@carbon/type": "^11.24.0",
+    "@carbon/grid": "^11.21.1",
+    "@carbon/layout": "^11.20.1",
+    "@carbon/motion": "^11.16.1",
+    "@carbon/react": "^1.41.1",
+    "@carbon/themes": "^11.26.1",
+    "@carbon/type": "^11.25.1",
     "react": "^16.8.6 || ^17.0.1 || ^18.2.0",
     "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
   },
-  "gitHead": "8d8e1b6bbc737baf63f059b1ed6929958560ba64"
+  "gitHead": "0837acd5a6efa4b8ebe5c86d40f6995b5a1565c5"
 }

package/scss/components/Checklist/_checklist.scss

@@ -25,10 +25,10 @@
 // The block part of our conventional BEM class names (blockClass__E--M).
 $block-class: #{c4p-settings.$pkg-prefix}--checklist;
 
-// .#{$block-class} {
 .#{$block-class}__header {
   display: flex;
   padding: $spacing-05;
+  border-bottom: 1px solid $border-subtle-01;
   background-color: $layer-01;
   gap: $spacing-03;
 }
@@ -78,8 +78,8 @@ $block-class: #{c4p-settings.$pkg-prefix}--checklist;
 }
 
 // TOGGLE
-// The <iconbutton> itself (class="...__toggle") is embedded inside two more tags,
-// which do not accept any classnames passed via the <iconbutton>.
+// The <IconButton> itself (class="...__toggle") is embedded inside two more tags,
+// which do not accept any class names passed via the <IconButton>.
 // So, we have to refer to it via it's "tooltip" wrapper element. :/
 .#{$block-class}__header .#{c4p-settings.$carbon-prefix}--tooltip {
   height: 2rem;
@@ -107,6 +107,8 @@ $block-class: #{c4p-settings.$pkg-prefix}--checklist;
 // Override Primary button styling to appear more like a link.
 // "Unset" some settings to allow an inner div to enable multiple lines and an ellipsis if req'd.
 .#{$block-class}__button.#{c4p-settings.$carbon-prefix}--btn--primary {
+  @include type-style('body-short-01');
+
   max-width: none;
   min-height: auto;
   // override bx--btn to allow two-line ellipsis
@@ -117,8 +119,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--checklist;
   background-color: transparent;
   color: $link-primary;
 }
-// The CSS for the Carbon button's label
-// is incompatible with two-line ellipsis,
+// The CSS for the Carbon button's label is incompatible with two-line ellipsis,
 // but a div inside a Carbon button works.
 .#{$block-class}__button.#{c4p-settings.$carbon-prefix}--btn--primary div {
   @include ellipsis-2-lines();
@@ -136,11 +137,6 @@ $block-class: #{c4p-settings.$pkg-prefix}--checklist;
   text-decoration: underline;
 }
 
-.#{$block-class}__button--error {
-  /* stylelint-disable-next-line declaration-no-important */
-  color: $text-error !important;
-}
-
 // container for animated content
 .#{$block-class}__content-outer {
   overflow: hidden;
@@ -167,6 +163,9 @@ $block-class: #{c4p-settings.$pkg-prefix}--checklist;
   padding: $spacing-05;
   border-top: 1px solid $border-subtle-01;
 }
+.#{$block-class}__list-group:first-of-type {
+  border-top: none;
+}
 
 .#{$block-class}__list-title {
   @include type-style('body-short-01');
@@ -185,9 +184,14 @@ $block-class: #{c4p-settings.$pkg-prefix}--checklist;
 }
 
 .#{$block-class}__icon {
-  /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
+  /* stylelint-disable-next-line */
   margin: to-rem(1px) $spacing-03 0 0;
-  color: $link-primary;
+  color: $icon-primary;
+}
+
+.#{$block-class}__icon--checked,
+.#{$block-class}__icon--indeterminate {
+  color: $interactive;
 }
 
 .#{$block-class}__icon--error {
@@ -203,9 +207,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--checklist;
   @include ellipsis-2-lines();
 }
 
-.#{$block-class}__label--checked,
-.#{$block-class}__label--disabled,
-.#{$block-class}__label--error {
+.#{$block-class}__label--disabled {
   color: $text-disabled;
 }
 
@@ -213,5 +215,5 @@ $block-class: #{c4p-settings.$pkg-prefix}--checklist;
   @include ellipsis-2-lines();
 
   padding: $spacing-03 $spacing-05;
-  border-top: 1px solid $border-subtle;
+  border-top: 1px solid $border-subtle-01;
 }

package/scss/components/Datagrid/_storybook-styles.scss

@@ -8,6 +8,7 @@
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/type';
 @use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/components/tooltip';
 
 @use 'ALIAS_STORY_STYLE_CONFIG' as c4p-settings;
 
@@ -141,3 +142,16 @@ div[data-story-title*='#{$story-anchor}']
   overflow: auto;
   width: 100%;
 }
+
+.sb--tooltip-trigger {
+  display: flex;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: 0;
+  margin: 0;
+  background: none;
+  cursor: pointer;
+  text-align: start;
+}

package/scss/components/Datagrid/styles/_useInlineEdit.scss

@@ -252,7 +252,7 @@ $row-heights: (
 // containers, using default border caused grid area width to be changed and
 // outlines were not present be
 .#{variables.$block-class}
-  .#{variables.$block-class}__grid-container-grid-active::before {
+  .#{variables.$block-class}__grid-container-active::before {
   position: absolute;
   z-index: 2;
   bottom: 0;
@@ -266,7 +266,7 @@ $row-heights: (
 }
 
 .#{variables.$block-class}
-  .#{variables.$block-class}__grid-container-grid-active::after {
+  .#{variables.$block-class}__grid-container-active::after {
   position: absolute;
   z-index: 2;
   right: 0;
@@ -280,7 +280,7 @@ $row-heights: (
 }
 
 .#{variables.$block-class}
-  .#{variables.$block-class}__grid-container-grid-active
+  .#{variables.$block-class}__grid-container-active
   .#{c4p-settings.$carbon-prefix}--data-table-content::before {
   position: absolute;
   z-index: 2;
@@ -293,16 +293,16 @@ $row-heights: (
 }
 
 .#{variables.$block-class}
-  .#{variables.$block-class}__grid-container-grid-active.#{variables.$block-class}__grid-container-grid-active--without-toolbar::before,
+  .#{variables.$block-class}__grid-container-active.#{variables.$block-class}__grid-container-active--without-toolbar::before,
 .#{variables.$block-class}
-  .#{variables.$block-class}__grid-container-grid-active.#{variables.$block-class}__grid-container-grid-active--without-toolbar::after {
+  .#{variables.$block-class}__grid-container-active.#{variables.$block-class}__grid-container-active--without-toolbar::after {
   height: calc(
     100% - 2px - var(--#{variables.$block-class}--grid-header-height)
   );
 }
 
 .#{variables.$block-class}
-  .#{variables.$block-class}__grid-container-grid-active
+  .#{variables.$block-class}__grid-container-active
   .#{variables.$block-class}__table-container {
   outline: 2px solid $link-inverse;
   outline-offset: -2px;