@carbon/ibm-products 2.0.0-rc.28 → 2.0.0-rc.29

package/lib/components/AddSelect/AddSelectFilter.js

@@ -134,16 +134,17 @@ var AddSelectFilter = function AddSelectFilter(_ref) {
     className: filterBtnClassnames,
     size: "md",
     tooltipPosition: "left"
-  }), open && /*#__PURE__*/_react.default.createElement("div", {
-    className: blockClass
+  }), open && /*#__PURE__*/_react.default.createElement(_react2.Layer, {
+    className: blockClass,
+    level: 1
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "-content")
   }, /*#__PURE__*/_react.default.createElement("p", null, filtersLabel), /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "-opts")
   }, filterOpts.map(function (filterOpts) {
     return /*#__PURE__*/_react.default.createElement(_react2.Dropdown, {
-      id: filterOpts.id,
       key: filterOpts.id,
+      id: filterOpts.id,
       titleText: filterOpts.label,
       items: filterOpts.opts,
       onChange: function onChange(value) {

package/lib/components/AddSelect/AddSelectRow.js

@@ -174,7 +174,7 @@ var AddSelectRow = function AddSelectRow(_ref) {
     item: item,
     selected: selected,
     onClick: handleMultiSelection
-  }), hasModifiers && /*#__PURE__*/_react.default.createElement(_react2.Dropdown, {
+  }), hasModifiers && /*#__PURE__*/_react.default.createElement(_react2.Layer, null, /*#__PURE__*/_react.default.createElement(_react2.Dropdown, {
     id: "add-select-modifier-".concat(item.id),
     type: "inline",
     items: modifiers.options,
@@ -186,7 +186,7 @@ var AddSelectRow = function AddSelectRow(_ref) {
       var selectedItem = _ref3.selectedItem;
       return modifierHandler(item.id, selectedItem);
     }
-  })) : /*#__PURE__*/_react.default.createElement(_AddSelectFormControl.AddSelectFormControl, {
+  }))) : /*#__PURE__*/_react.default.createElement(_AddSelectFormControl.AddSelectFormControl, {
     type: "radio",
     item: item,
     selected: selected,

package/lib/components/AddSelect/AddSelectSort.js

@@ -71,7 +71,8 @@ var AddSelectSort = function AddSelectSort(_ref) {
     },
     className: "".concat(blockClass, "_overflow"),
     flipped: true,
-    ariaLabel: sortByLabel
+    ariaLabel: sortByLabel,
+    iconDescription: sortByLabel
   }, sortByOpts.map(function (opt) {
     return /*#__PURE__*/_react.default.createElement(_react2.OverflowMenuItem, {
       className: "".concat(blockClass, "_overflow-item"),

package/lib/components/Datagrid/index.js

@@ -59,6 +59,12 @@ Object.defineProperty(exports, "useDisableSelectRows", {
     return _useDisableSelectRows.default;
   }
 });
+Object.defineProperty(exports, "useEditableCell", {
+  enumerable: true,
+  get: function get() {
+    return _useEditableCell.default;
+  }
+});
 Object.defineProperty(exports, "useExpandedRow", {
   enumerable: true,
   get: function get() {
@@ -162,6 +168,8 @@ var _useColumnOrder = _interopRequireDefault(require("./useColumnOrder"));
 
 var _useInlineEdit = _interopRequireDefault(require("./useInlineEdit"));
 
+var _useEditableCell = _interopRequireDefault(require("./useEditableCell"));
+
 var _useFiltering = _interopRequireDefault(require("./useFiltering"));
 
 var _getAutoSizedColumnWidth = require("./utils/getAutoSizedColumnWidth");

package/lib/components/Datagrid/useEditableCell.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _useInlineEdit = _interopRequireDefault(require("./useInlineEdit"));
+
+/**
+ * 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 useEditableCell = function useEditableCell(hooks) {
+  (0, _useInlineEdit.default)(hooks, 'usingEditableCell');
+};
+
+var _default = useEditableCell;
+exports.default = _default;

package/lib/components/Datagrid/useInlineEdit.js

@@ -2,6 +2,8 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,7 +11,7 @@ exports.default = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _settings = require("../../settings");
 
@@ -17,16 +19,25 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _InlineEditCell = require("./Datagrid/addons/InlineEdit/InlineEditCell");
 
-/*
- * Licensed Materials - Property of IBM
- * 5724-Q36
- * (c) Copyright IBM Corp. 2022
- * US Government Users Restricted Rights - Use, duplication or disclosure
- * restricted by GSA ADP Schedule Contract with IBM Corp.
+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; }
+
+/**
+ * Copyright IBM Corp. 2022, 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 useInlineEdit = function useInlineEdit(hooks) {
+var useInlineEdit = function useInlineEdit(hooks, usingEditableCell) {
+  (0, _react.useEffect)(function () {
+    if (!usingEditableCell) {
+      _settings.pkg.checkReportFeatureEnabled('Datagrid.useInlineEdit');
+    }
+  }, [usingEditableCell]);
+
   var addInlineEdit = function addInlineEdit(props, _ref) {
     var _cell$column, _cell$column$inlineEd, _instance$columns$fil;
 
@@ -57,9 +68,9 @@ var useInlineEdit = function useInlineEdit(hooks) {
     }
 
     return [props, {
-      className: (0, _classnames.default)("".concat(blockClass, "__cell"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__cell-inline-edit"), true)),
+      className: (0, _classnames.default)("".concat(blockClass, "__cell"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__cell-inline-edit"), !!usingEditableCell || _settings.pkg.isFeatureEnabled('Datagrid.useInlineEdit') ? true : '')),
       role: 'gridcell',
-      children: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, inlineEditType === 'text' && renderInlineEditComponent(inlineEditType), inlineEditType === 'number' && renderInlineEditComponent(inlineEditType), inlineEditType === 'selection' && renderInlineEditComponent(inlineEditType), inlineEditType === 'date' && renderInlineEditComponent(inlineEditType), !inlineEditType && /*#__PURE__*/_react.default.createElement(_InlineEditCell.InlineEditCell, {
+      children: (!!usingEditableCell || _settings.pkg.isFeatureEnabled('Datagrid.useInlineEdit')) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, inlineEditType === 'text' && renderInlineEditComponent(inlineEditType), inlineEditType === 'number' && renderInlineEditComponent(inlineEditType), inlineEditType === 'selection' && renderInlineEditComponent(inlineEditType), inlineEditType === 'date' && renderInlineEditComponent(inlineEditType), !inlineEditType && /*#__PURE__*/_react.default.createElement(_InlineEditCell.InlineEditCell, {
         config: columnInlineEditConfig,
         tabIndex: -1,
         value: cell.value,
@@ -76,7 +87,7 @@ var useInlineEdit = function useInlineEdit(hooks) {
   hooks.getCellProps.push(addInlineEdit);
   hooks.useInstance.push(function (instance) {
     Object.assign(instance, {
-      withInlineEdit: true
+      withInlineEdit: !!usingEditableCell || _settings.pkg.isFeatureEnabled('Datagrid.useInlineEdit') ? true : false
     });
   });
 };

package/lib/components/ExampleComponent/ExampleDeprecatedComponent.js

@@ -0,0 +1,38 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ExampleDeprecatedComponent = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _settings = require("../../settings");
+
+var _ExampleComponent = require("./ExampleComponent");
+
+/**
+ * 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 componentName = 'ExampleDeprecatedComponent'; // This is NOT a full component example. It is only intended to show the deprecation of a component.
+
+var ExampleDeprecatedComponent = function ExampleDeprecatedComponent() {
+  return /*#__PURE__*/_react.default.createElement(_ExampleComponent.ExampleComponent, {
+    primaryButtonLabel: "primary",
+    secondaryButtonLabel: "secondary"
+  });
+}; // example of a deprecation warning
+
+
+exports.ExampleDeprecatedComponent = ExampleDeprecatedComponent;
+ExampleDeprecatedComponent.deprecated = {
+  level: 'warn',
+  details: "This an example component deprecation message used by 'checkComponentEnabled'."
+}; // The component enable should log the deprecation
+
+exports.ExampleDeprecatedComponent = ExampleDeprecatedComponent = _settings.pkg.checkComponentEnabled(ExampleDeprecatedComponent, componentName);

package/lib/components/Tearsheet/Tearsheet.js

@@ -199,6 +199,11 @@ Tearsheet.propTypes = _objectSpread({
    */
   portalTarget: _propTypes.default.node,
 
+  /**
+   * Specify a CSS selector that matches the DOM element that should be focused when the Modal opens
+   */
+  selectorPrimaryFocus: _propTypes.default.string,
+
   /**
    * The main title of the tearsheet, displayed in the header area.
    */

package/lib/components/index.js

@@ -177,12 +177,6 @@ Object.defineProperty(exports, "ImportModal", {
     return _ImportModal.ImportModal;
   }
 });
-Object.defineProperty(exports, "ModifiedTabs", {
-  enumerable: true,
-  get: function get() {
-    return _ModifiedTabs.ModifiedTabs;
-  }
-});
 Object.defineProperty(exports, "MultiAddSelect", {
   enumerable: true,
   get: function get() {
@@ -482,8 +476,6 @@ var _HTTPErrors = require("./HTTPErrors");
 
 var _ImportModal = require("./ImportModal");
 
-var _ModifiedTabs = require("./ModifiedTabs");
-
 var _MultiAddSelect = require("./MultiAddSelect");
 
 var _NotificationsPanel = require("./NotificationsPanel");

package/lib/global/js/package-settings.js

@@ -63,7 +63,6 @@ var defaults = {
     WebTerminalContentWrapper: true,
     WebTerminalProvider: true,
     // other public components not yet reviewed and released:
-    ModifiedTabs: false,
     Toolbar: false,
     ToolbarButton: false,
     ToolbarGroup: false,
@@ -82,7 +81,8 @@ var defaults = {
   feature: {
     'a-new-feature': false,
     'default-portal-target-body': true,
-    'Datagrid.useInfiniteScroll': false
+    'Datagrid.useInfiniteScroll': false,
+    'Datagrid.useInlineEdit': false
   }
 };
 

package/lib/settings.js

@@ -15,34 +15,54 @@ var _react = _interopRequireDefault(require("react"));
 
 var _themes = require("@carbon/themes");
 
+var _pconsole = _interopRequireDefault(require("./global/js/utils/pconsole"));
+
 var carbon = {
   get themes() {
     return _themes.themes;
   },
 
   prefix: 'cds'
+};
+exports.carbon = carbon;
+
+var componentDeprecatedWarning = function componentDeprecatedWarning(name, details) {
+  return "Carbon for IBM Products (WARNING): Component \"".concat(name, "\" is deprecated. ").concat(details);
+};
+
+_packageSettings.default.logDeprecated = function (component, name) {
+  if (component !== null && component !== void 0 && component.deprecated) {
+    var _pconsole$level;
+
+    var _component$deprecated = component.deprecated,
+        level = _component$deprecated.level,
+        details = _component$deprecated.details;
+    var logUsing = (_pconsole$level = _pconsole.default === null || _pconsole.default === void 0 ? void 0 : _pconsole.default[level]) !== null && _pconsole$level !== void 0 ? _pconsole$level : _pconsole.default.error;
+    logUsing(componentDeprecatedWarning(name || component.displayName, details));
+  }
 }; // Check that a component is enabled. This function returns a stub which checks
 // the component status on first use and then renders as the component or as
 // a Canary placeholder initialized with the name of the replaced component.
 // Note that the returned stub carries any other properties which had already
 // been assigned (eg propTypes, displayName, etc).
 
-exports.carbon = carbon;
 
 _packageSettings.default.checkComponentEnabled = function (component, name) {
   if (component.render) {
     // The component is a forward-ref, so make a stub forward-ref.
     var forward = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
-      return (// Replace the stub's render fn so this test only happens once.
-        (forward.render = _packageSettings.default.isComponentEnabled(name) || !_packageSettings.default.isComponentPublic(name) ? // If the component is enabled, or if it's not a public component,
-        // replace the stub's render fn with the component's render fn.
-        component.render : // Note that Canary is a direct render fn (not a forward-ref) and
-        // will ignore the passed props and ref (if any)
-        _Canary.Canary.bind(undefined, {
-          componentName: name
-        }))( // Call it now (after this it will be directly called).
-        props, ref)
-      );
+      _packageSettings.default.logDeprecated(component, name); // may log don't care about result
+      // Replace the stub's render fn so this test only happens once.
+
+
+      return (forward.render = _packageSettings.default.isComponentEnabled(name) || !_packageSettings.default.isComponentPublic(name) ? // If the component is enabled, or if it's not a public component,
+      // replace the stub's render fn with the component's render fn.
+      component.render : // Note that Canary is a direct render fn (not a forward-ref) and
+      // will ignore the passed props and ref (if any)
+      _Canary.Canary.bind(undefined, {
+        componentName: name
+      }))( // Call it now (after this it will be directly called).
+      props, ref);
     }); // Transfer object properties already assigned (eg propTypes, displayName)
     // then merge in the stub forward-ref which checks the component status
     // when first used.
@@ -52,16 +72,18 @@ _packageSettings.default.checkComponentEnabled = function (component, name) {
   } else {
     // The component is a direct render fn, so make a stub render fn.
     var _render = function render(props) {
-      return (// Replace the stub render fn so this test only happens once.
-        (_render = _packageSettings.default.isComponentEnabled(name) || !_packageSettings.default.isComponentPublic(name) ? // If the component is enabled, or if it's not a public component,
-        // replace the stub render fn with the component render fn.
-        component : // Replace the stub render fn with the Canary render fn, which will
-        // ignore the passed props.
-        _Canary.Canary.bind(undefined, {
-          componentName: name
-        }))( // Call it now (after this it will be directly called).
-        props)
-      );
+      _packageSettings.default.logDeprecated(component, name); // may log don't care about result
+      // Replace the stub render fn so this test only happens once.
+
+
+      return (_render = _packageSettings.default.isComponentEnabled(name) || !_packageSettings.default.isComponentPublic(name) ? // If the component is enabled, or if it's not a public component,
+      // replace the stub render fn with the component render fn.
+      component : // Replace the stub render fn with the Canary render fn, which will
+      // ignore the passed props.
+      _Canary.Canary.bind(undefined, {
+        componentName: name
+      }))( // Call it now (after this it will be directly called).
+      props);
     }; // Transfer object properties already assigned (eg propTypes, displayName)
     // to a function which calls the stub render fn which checks the component
     // status when first used.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.0.0-rc.28",
+  "version": "2.0.0-rc.29",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -93,5 +93,5 @@
     "react": "^16.8.6 || ^17.0.1",
     "react-dom": "^16.8.6 || ^17.0.1"
   },
-  "gitHead": "d459d01283f68efa6a4bfbdc79a97bf508f83f6b"
+  "gitHead": "16ba4d09a98be1ea3c64f6ee4323d08529e12a34"
 }

package/scss/components/AboutModal/_about-modal.scss

@@ -21,61 +21,59 @@ $block-class: #{c4p-settings.$pkg-prefix}--about-modal;
 }
 
 .#{$block-class} .#{$block-class}__logo {
-  margin: $spacing-05;
+  margin: $spacing-05 $spacing-05 $spacing-07 $spacing-05;
 }
 
 .#{$block-class} .#{$block-class}__header {
-  padding: 0 20% $spacing-03 $spacing-05;
+  padding: 0 20% 0 $spacing-05;
   margin-bottom: 0;
   grid-row: auto;
 }
 
 .#{$block-class} .#{$block-class}__title {
-  @include type.type-style('productive-heading-04');
+  @include type.type-style('heading-04');
 
   color: $text-primary;
 }
 
 .#{$block-class} .#{$block-class}__body {
-  @include type.type-style('body-short-02');
+  @include type.type-style('body-compact-02');
 
   min-height: $spacing-10;
   padding: 0 20% 0 $spacing-05;
+  margin-bottom: $spacing-06;
   grid-row: auto;
   overflow-x: hidden;
   overflow-y: auto;
 }
 
-.#{$block-class}.#{$block-class}--with-tabs .#{$block-class}__body {
-  min-height: calc(#{$spacing-10} + #{$spacing-08});
-  // stylelint-disable-next-line carbon/layout-token-use
-  margin-bottom: calc(#{$spacing-09} + #{$spacing-08});
-}
-
-.#{$block-class}.#{$block-class}--with-tabs
-  .#{c4p-settings.$carbon-prefix}--modal-content--overflow-indicator {
-  // stylelint-disable-next-line carbon/layout-token-use
-  bottom: calc(#{$spacing-09} + #{$spacing-08});
-}
-
 .#{$block-class}
   .#{c4p-settings.$carbon-prefix}--modal-content--overflow-indicator {
+  bottom: #{$spacing-06};
   background-image: linear-gradient(to bottom, #00000000, $layer-01);
 }
 
 .#{$block-class} .#{$block-class}__links-container {
-  margin-top: $spacing-05;
+  @include type.type-style('body-compact-01');
+
+  margin-top: $spacing-06;
+}
+
+.#{$block-class} .#{$block-class}__version {
+  color: $text-secondary;
 }
 
 .#{$block-class} .#{$block-class}__links-container a + a {
   padding-left: $spacing-03;
-  border-left: 1px solid $text-primary;
+  border-left: 1px solid $border-strong-01;
   margin-left: $spacing-03;
 }
 
-.#{$block-class} .#{$block-class}__legal-text,
+.#{$block-class} .#{$block-class}__content,
 .#{$block-class} .#{$block-class}__copyright-text {
-  margin-top: $spacing-07;
+  @include type.type-style('label-01');
+
+  margin-top: $spacing-06;
   margin-bottom: 0;
   color: $text-secondary;
 }
@@ -84,46 +82,29 @@ $block-class: #{c4p-settings.$pkg-prefix}--about-modal;
   margin-top: $spacing-05;
 }
 
+p.c4p--about-modal__content:first-child,
+p.c4p--about-modal__copyright-text:first-child {
+  margin-top: $spacing-07;
+}
+
 .#{$block-class} .#{$block-class}__footer {
   position: relative;
-  height: $spacing-03 + $spacing-10;
+  height: calc(
+    #{$spacing-05} + #{$spacing-02} + #{$spacing-06} + #{$spacing-07}
+  );
   flex-direction: column;
   justify-content: center;
-  background-color: $background-inverse;
-  color: $text-inverse;
-}
-
-.#{$block-class} .#{$block-class}__tab-container {
-  position: absolute;
-  bottom: 0;
+  background-color: $layer-02;
 }
 
-.#{$block-class} .#{$block-class}__version-label,
-.#{$block-class} .#{$block-class}__version-number {
-  @include type.type-style('body-short-01');
-
-  padding-left: $spacing-05;
-  margin-top: 0;
-  margin-bottom: 0;
-  color: $text-inverse;
-}
+.#{$block-class} .#{$block-class}__footer-label {
+  @include type.type-style('label-01');
 
-.#{$block-class} .#{$block-class}__version-label {
-  @include font-weight('semibold');
-}
-
-.#{$block-class}
-  .#{c4p-settings.$carbon-prefix}--tabs
-  .#{c4p-settings.$carbon-prefix}--tabs__nav-link,
-.#{$block-class} .#{c4p-settings.$carbon-prefix}--tab-content {
-  @include type.type-style('body-short-01');
-}
-
-.#{$block-class} .#{c4p-settings.$carbon-prefix}--tab-content {
-  height: $spacing-03 + $spacing-10;
+  padding: $spacing-05 0 0 $spacing-05;
+  margin-bottom: $spacing-02;
+  color: $text-secondary;
 }
 
-.#{$block-class} .#{c4p-settings.$carbon-prefix}--tab-content:not([hidden]) {
-  display: flex;
-  align-items: center;
+.#{$block-class} .#{$block-class}__footer-content {
+  padding: 0 0 $spacing-05 $spacing-05;
 }

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

@@ -8,9 +8,15 @@
 @use '../../global/styles/project-settings' as *;
 @use '@carbon/styles/scss/spacing' as *;
 
-.about-modal-stories--tech-logo {
-  width: 2.25rem;
-  height: 2.25rem;
-  margin-right: $spacing-05;
+// Standard imports.
+@use '../../global/styles/project-settings' as c4p-settings;
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+$block-class: #{c4p-settings.$pkg-prefix}--about-modal;
+
+.#{$block-class}__stories--tech-logo {
+  width: $spacing-06;
+  height: $spacing-06;
+  margin-right: $spacing-03;
   object-fit: contain;
 }

package/scss/components/AddSelect/_add-select.scss

@@ -265,6 +265,10 @@ $tearsheet-class: #{$pkg-prefix}--tearsheet;
   }
 }
 
+.#{$block-class}-sort_overflow {
+  z-index: 9999;
+}
+
 .#{$block-class}__tags {
   display: flex;
   align-items: center;
@@ -278,7 +282,7 @@ $tearsheet-class: #{$pkg-prefix}--tearsheet;
 
 .#{$block-class}__global-filter {
   position: absolute;
-  z-index: 6000;
+  z-index: 999999;
   right: 0;
   width: 100%;
   max-width: 40rem;
@@ -461,7 +465,7 @@ button.#{$block-class}__global-filter-toggle {
   margin-top: $spacing-03;
 }
 
-.#{$block-class} .#{$carbon-prefix}--tooltip,
-.#{$block-class} .#{$carbon-prefix}--overflow-menu-options {
+.#{$block-class} + div .#{$carbon-prefix}--tooltip,
+.#{$block-class} + div .#{$carbon-prefix}--overflow-menu-options {
   z-index: 9000;
 }

package/scss/components/DataSpreadsheet/_data-spreadsheet.scss

@@ -274,7 +274,7 @@ $header-cell-background: $layer-accent-01;
   .#{$block-class}__th--selected-header,
   .#{$block-class}__td-th--selected-header.#{$block-class}__td {
     background-color: $background-inverse;
-    color: $text-on-color;
+    color: $text-inverse;
 
     /* stylelint-disable-next-line max-nesting-depth */
     &:focus,

package/scss/components/_index-with-carbon.scss

@@ -25,7 +25,6 @@
 @use './ExpressiveCard/index-with-carbon' as *;
 @use './HTTPErrors/index-with-carbon' as *;
 @use './ImportModal/index-with-carbon' as *;
-@use './ModifiedTabs/index-with-carbon' as *;
 @use './MultiAddSelect/index-with-carbon' as *;
 @use './NotificationsPanel/index-with-carbon' as *;
 @use './PageHeader/index-with-carbon' as *;

package/scss/components/_index.scss

@@ -26,7 +26,6 @@
 @use './FilterSummary/index';
 @use './HTTPErrors';
 @use './ImportModal';
-@use './ModifiedTabs';
 @use './MultiAddSelect';
 @use './NotificationsPanel';
 @use './PageHeader';

package/scss/config.scss

@@ -0,0 +1 @@
+@forward './global/styles/project-settings';

package/es/components/ModifiedTabs/ModifiedTabLabelNew.js

@@ -1,34 +0,0 @@
-//
-// Copyright IBM Corp. 2020, 2020
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Add } from '@carbon/react/icons';
-import { pkg } from '../../settings';
-var blockClass = "".concat(pkg.prefix, "--modified-tabs");
-export var ModifiedTabLabelNew = function ModifiedTabLabelNew(_ref) {
-  var label = _ref.label;
-  return /*#__PURE__*/React.createElement("span", {
-    className: "".concat(blockClass, "__tab-new")
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "".concat(blockClass, "__tab-new__label")
-  }, label), /*#__PURE__*/React.createElement("span", {
-    className: "".concat(blockClass, "__tab-new-img")
-  }, /*#__PURE__*/React.createElement(Add, {
-    size: 20
-  })));
-};
-ModifiedTabLabelNew.propTypes = {
-  /**
-   * Label content of the tab
-   */
-  label: PropTypes.string,
-
-  /**
-   * Optional onClick handler
-   */
-  onClick: PropTypes.func
-};