@carbon/ibm-products 1.5.0 → 1.8.0

package/lib/components/WebTerminal/WebTerminal.js

@@ -29,7 +29,7 @@ var _iconsReact = require("@carbon/icons-react");
 
 var _carbonComponentsReact = require("carbon-components-react");
 
-var _excluded = ["children", "className", "closeTerminal", "documentationLinks", "documentationLinksIconDescription", "open", "actions", "closeIconDescription"];
+var _excluded = ["actions", "children", "className", "closeIconDescription", "closeTerminal", "documentationLinks", "documentationLinksIconDescription", "open"];
 
 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); }
 
@@ -41,19 +41,28 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 var componentName = 'WebTerminal';
-var blockClass = "".concat(_settings.pkg.prefix, "--web-terminal");
+var blockClass = "".concat(_settings.pkg.prefix, "--web-terminal"); // Default values for props
+
+var defaults = {
+  actions: Object.freeze([]),
+  documentationLinks: Object.freeze([]),
+  documentationLinksIconDescription: 'Show documentation links'
+};
 
 var WebTerminal = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var _ref2;
 
-  var children = _ref.children,
+  var _ref$actions = _ref.actions,
+      actions = _ref$actions === void 0 ? defaults.actions : _ref$actions,
+      children = _ref.children,
       className = _ref.className,
+      closeIconDescription = _ref.closeIconDescription,
       closeTerminal = _ref.closeTerminal,
-      documentationLinks = _ref.documentationLinks,
-      documentationLinksIconDescription = _ref.documentationLinksIconDescription,
+      _ref$documentationLin = _ref.documentationLinks,
+      documentationLinks = _ref$documentationLin === void 0 ? defaults.documentationLinks : _ref$documentationLin,
+      _ref$documentationLin2 = _ref.documentationLinksIconDescription,
+      documentationLinksIconDescription = _ref$documentationLin2 === void 0 ? defaults.documentationLinksIconDescription : _ref$documentationLin2,
       open = _ref.open,
-      actions = _ref.actions,
-      closeIconDescription = _ref.closeIconDescription,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
 
   var _useState = (0, _react.useState)(open),
@@ -78,9 +87,9 @@ var WebTerminal = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
 
   return shouldRender ? /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, {
     ref: ref,
-    className: (0, _classnames.default)([blockClass, (_ref2 = {}, (0, _defineProperty2.default)(_ref2, "".concat(blockClass, "--open"), open), (0, _defineProperty2.default)(_ref2, "".concat(blockClass, "--closed"), !open), (0, _defineProperty2.default)(_ref2, className, className), _ref2)]),
+    className: (0, _classnames.default)([className, blockClass, (_ref2 = {}, (0, _defineProperty2.default)(_ref2, "".concat(blockClass, "--open"), open), (0, _defineProperty2.default)(_ref2, "".concat(blockClass, "--closed"), !open), _ref2)]),
     style: {
-      animation: "".concat(open ? 'webTerminalEntrance 250ms' : 'webTerminalExit 250ms')
+      animation: "".concat(open ? 'web-terminal-entrance 250ms' : 'web-terminal-exit 250ms')
     },
     onAnimationEnd: onAnimationEnd
   }), /*#__PURE__*/_react.default.createElement("header", {
@@ -173,14 +182,4 @@ WebTerminal.propTypes = {
    * Boolean that determines if the web terminal is opened or closed
    */
   open: _propTypes.default.bool.isRequired
-}; // Default values for component props. Default values are not required for
-// props that are required, nor for props where the component can apply
-// 'undefined' values reasonably. Default values should be provided when the
-// component needs to make a choice or assumption when a prop is not supplied.
-
-WebTerminal.defaultProps = {
-  actions: [],
-  documentationLinks: [],
-  documentationLinksIconDescription: 'Show documentation links',
-  className: ''
 };

package/lib/components/index.js

@@ -15,12 +15,6 @@ Object.defineProperty(exports, "AboutModal", {
     return _AboutModal.AboutModal;
   }
 });
-Object.defineProperty(exports, "CancelableTextEdit", {
-  enumerable: true,
-  get: function get() {
-    return _CancelableTextEdit.CancelableTextEdit;
-  }
-});
 Object.defineProperty(exports, "Cascade", {
   enumerable: true,
   get: function get() {
@@ -87,6 +81,12 @@ Object.defineProperty(exports, "CreateTearsheetStep", {
     return _CreateTearsheet.CreateTearsheetStep;
   }
 });
+Object.defineProperty(exports, "DataSpreadsheet", {
+  enumerable: true,
+  get: function get() {
+    return _DataSpreadsheet.DataSpreadsheet;
+  }
+});
 Object.defineProperty(exports, "EditSidePanel", {
   enumerable: true,
   get: function get() {
@@ -362,6 +362,6 @@ var _EditSidePanel = require("./EditSidePanel");
 
 var _OptionsTile = require("./OptionsTile");
 
-var _CancelableTextEdit = require("./CancelableTextEdit");
+var _InlineEdit = require("./InlineEdit");
 
-var _InlineEdit = require("./InlineEdit");
+var _DataSpreadsheet = require("./DataSpreadsheet");

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

@@ -3,6 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "useActiveElement", {
+  enumerable: true,
+  get: function get() {
+    return _useActiveElement.useActiveElement;
+  }
+});
 Object.defineProperty(exports, "useClickOutside", {
   enumerable: true,
   get: function get() {
@@ -64,6 +70,8 @@ Object.defineProperty(exports, "useWindowScroll", {
   }
 });
 
+var _useActiveElement = require("./useActiveElement");
+
 var _useWindowScroll = require("./useWindowScroll");
 
 var _useWindowResize = require("./useWindowResize");

package/lib/global/js/hooks/useActiveElement.js

@@ -0,0 +1,39 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useActiveElement = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = require("react");
+
+/**
+ * Copyright IBM Corp. 2022, 2022
+ *
+ * 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 useActiveElement = function useActiveElement() {
+  var _useState = (0, _react.useState)(document.activeElement),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      active = _useState2[0],
+      setActive = _useState2[1];
+
+  var handleFocusIn = function handleFocusIn() {
+    setActive(document.activeElement);
+  };
+
+  (0, _react.useEffect)(function () {
+    document.addEventListener('focusin', handleFocusIn);
+    return function () {
+      document.removeEventListener('focusin', handleFocusIn);
+    };
+  }, []);
+  return active;
+};
+
+exports.useActiveElement = useActiveElement;

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

@@ -67,7 +67,8 @@ var defaults = {
     EditSidePanel: false,
     OptionsTile: false,
     CancelableTextEdit: false,
-    InlineEdit: false
+    InlineEdit: false,
+    DataSpreadsheet: false
     /* new component flags here - comment used by generate CLI */
 
   },

package/lib/global/js/utils/Wrap.js

@@ -32,6 +32,11 @@ var isEmpty = function isEmpty(children) {
   });
 
   return result;
+}; // Default values for props
+
+
+var defaults = {
+  element: 'div'
 };
 /**
  * A simple conditional wrapper that encloses its children in a <div> (or other
@@ -44,11 +49,11 @@ var isEmpty = function isEmpty(children) {
  * remain undefined if it does not render.
  */
 
-
 var Wrap = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var alwaysRender = _ref.alwaysRender,
       children = _ref.children,
-      Wrapper = _ref.element,
+      _ref$element = _ref.element,
+      Wrapper = _ref$element === void 0 ? defaults.element : _ref$element,
       neverRender = _ref.neverRender,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return (neverRender || isEmpty(children)) && !alwaysRender ? null : /*#__PURE__*/_react.default.createElement(Wrapper, (0, _extends2.default)({}, rest, {
@@ -87,7 +92,4 @@ Wrap.propTypes = {
    * content will be rendered.
    */
   neverRender: _propTypes.default.bool
-};
-Wrap.defaultProps = {
-  element: 'div'
 };

package/lib/global/js/utils/getScrollbarWidth.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getScrollbarWidth = void 0;
+
+/**
+ * Copyright IBM Corp. 2022, 2022
+ *
+ * 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 getScrollbarWidth = function getScrollbarWidth() {
+  var scrollDiv = document.createElement('div');
+  scrollDiv.setAttribute('style', 'width: 100px; height: 100px; overflow: scroll; position:absolute; top:-9999px;');
+  document.body.appendChild(scrollDiv);
+  var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
+  document.body.removeChild(scrollDiv);
+  return scrollbarWidth;
+};
+
+exports.getScrollbarWidth = getScrollbarWidth;

package/lib/settings.js

@@ -9,8 +9,6 @@ exports.pkg = exports.carbon = void 0;
 
 var _Canary = require("./components/_Canary");
 
-var _featureFlags = _interopRequireDefault(require("./generated/feature-flags/feature-flags"));
-
 var _packageSettings = _interopRequireDefault(require("./global/js/package-settings"));
 
 var _carbonComponents = require("carbon-components");
@@ -28,10 +26,6 @@ var carbon = {
     _carbonComponents.settings.prefix = val;
   },
 
-  get flags() {
-    return _featureFlags.default;
-  },
-
   get themes() {
     return _themes.themes;
   }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "1.5.0",
+  "version": "1.8.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -33,58 +33,60 @@
     "access": "public"
   },
   "scripts": {
-    "build": "run-s clean build-all",
+    "build": "run-s clean build-first build-all",
     "build-all": "run-p build:*",
-    "build:css-dev": "sass --style=expanded --load-path node_modules --load-path ../../node_modules src:css",
-    "build:css-min": "sass --style=compressed --no-source-map --load-path node_modules --load-path ../../node_modules src/index.scss:css/index.min.css src/index-full-carbon.scss:css/index-full-carbon.min.css src/index-without-carbon.scss:css/index-without-carbon.min.css src/index-without-carbon-released-only.scss:css/index-without-carbon-released-only.min.css",
+    "build-first": "copyfiles 'src/**/*.scss' scss -u 1",
+    "build:css-dev": "sass --style=expanded --load-path node_modules --load-path ../../node_modules scss:css",
+    "build:css-min": "sass --style=compressed --load-path node_modules --load-path ../../node_modules scss/index.scss:css/index.min.css scss/index-full-carbon.scss:css/index-full-carbon.min.css scss/index-without-carbon.scss:css/index-without-carbon.min.css scss/index-without-carbon-released-only.scss:css/index-without-carbon-released-only.min.css",
     "build:js-esm": "cross-env BABEL_ENV=esm yarn build:js:modules -d es",
     "build:js-cjs": "cross-env BABEL_ENV=cjs yarn build:js:modules -d lib",
     "build:js:modules": "babel src --ignore '**/__tests__','**/*.test.js','**/*.stories.js','src/utils/**/*'",
-    "build:scss": "copyfiles 'src/**/*.scss' scss -u 1",
     "ci-check": "node scripts/import",
     "clean": "rimraf es lib css scss",
     "generate": "cross-env FORCE_COLOR=1 node scripts/generate",
     "postinstall": "carbon-telemetry collect --install",
     "test": "jest --colors",
-    "//upgrade-dependencies": "# don't upgrade carbon (done globally), react/react-dom (explicit range peer dependency) or chalk (until we can load it as ESM)",
+    "//upgrade-dependencies": "# don't upgrade carbon (done globally), react/react-dom (explicit range peer dependency), chalk (issue #1596)",
     "upgrade-dependencies": "npm-check-updates -u --dep dev,peer,prod --color --reject '/(carbon|^react$|^react-dom$|^chalk$)/'"
   },
   "devDependencies": {
-    "@babel/cli": "^7.16.8",
-    "@babel/core": "^7.16.12",
-    "babel-preset-ibm-cloud-cognitive": "^0.14.5",
+    "@babel/cli": "^7.17.3",
+    "@babel/core": "^7.17.5",
+    "babel-preset-ibm-cloud-cognitive": "^0.14.8",
     "chalk": "^4.1.2",
     "change-case": "^4.1.2",
     "copyfiles": "^2.4.1",
     "cross-env": "^7.0.3",
     "fs-extra": "^10.0.0",
     "glob": "^7.2.0",
-    "jest": "^27.4.7",
-    "jest-config-ibm-cloud-cognitive": "^0.23.6",
-    "npm-check-updates": "^12.2.1",
+    "jest": "^27.5.1",
+    "jest-config-ibm-cloud-cognitive": "^0.23.9",
+    "npm-check-updates": "^12.3.1",
     "npm-run-all": "^4.1.5",
     "rimraf": "^3.0.2",
-    "sass": "^1.49.0",
+    "sass": "^1.49.8",
     "yargs": "^17.3.1"
   },
   "dependencies": {
-    "@babel/runtime": "^7.16.7",
+    "@babel/runtime": "^7.17.2",
     "@carbon/telemetry": "^0.0.0-alpha.6",
-    "react-resize-detector": "^7.0.0"
+    "react-resize-detector": "^7.0.0",
+    "react-table": "^7.7.0",
+    "react-window": "^1.8.6"
   },
   "peerDependencies": {
-    "@carbon/colors": "^10.35.0",
-    "@carbon/icons-react": "^10.45.0",
+    "@carbon/colors": "^10.36.0",
+    "@carbon/icons-react": "^10.46.0",
     "@carbon/import-once": "^10.5.0",
-    "@carbon/layout": "^10.35.0",
-    "@carbon/motion": "^10.27.0",
-    "@carbon/themes": "^10.49.0",
+    "@carbon/layout": "^10.36.0",
+    "@carbon/motion": "^10.28.0",
+    "@carbon/themes": "^10.50.0",
     "@carbon/type": "^10.40.0",
-    "carbon-components": "^10.51.0",
-    "carbon-components-react": "^7.51.0",
+    "carbon-components": "^10.53.0",
+    "carbon-components-react": "^7.53.0",
     "carbon-icons": "^7.0.7",
     "react": "^16.8.6 || ^17.0.1",
     "react-dom": "^16.8.6 || ^17.0.1"
   },
-  "gitHead": "c87d8a538026632249a4f6e907b008efb1d50250"
+  "gitHead": "b2c8e5a32233fac65bb3eeb18df919efc0dcd3af"
 }

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

@@ -37,28 +37,58 @@
 
   .#{$block-class}__selections {
     border-top: 1px solid $ui-03;
+
+    &-wrapper {
+      display: block;
+    }
+
+    &-cell-wrapper {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
   }
 
-  // multi select specific
+  // sidebar
 
-  .#{$block-class}__influencer-header {
+  .#{$block-class}__sidebar-header {
     display: flex;
     padding: $spacing-06 $spacing-05 $spacing-03 $spacing-05;
     border-bottom: 1px solid $ui-03;
 
-    .#{$block-class}__influencer-title {
+    .#{$block-class}__sidebar-title {
       @include carbon--type-style('productive-heading-02');
     }
   }
 
-  .#{$block-class}__influencer-title {
+  .#{$block-class}__sidebar-title {
     margin-right: $spacing-03;
   }
 
-  .#{$block-class}__influencer-body {
+  .#{$block-class}__sidebar-body {
     padding: $spacing-05;
   }
 
+  .#{$block-class} .#{$block-class}__sidebar-item-header {
+    @include carbon--type-style('label-01');
+  }
+
+  .#{$block-class} .#{$block-class}__sidebar-item-body {
+    @include carbon--type-style('body-long-01');
+
+    margin-bottom: $spacing-03;
+  }
+
+  .#{$block-class} .#{$block-class}__sidebar-item-remove-button:hover {
+    background: $disabled-02;
+  }
+
+  .#{$block-class} .#{$block-class}__sidebar-accordion-title {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
   // overrides
 
   // the influencer sidebar needs to be even with the buttons
@@ -77,6 +107,30 @@
     p {
     padding-right: 0;
   }
+
+  .#{$block-class} .#{$carbon-prefix}--structured-list-td {
+    padding-bottom: $spacing-05;
+  }
+
+  .#{$block-class}
+    .#{$carbon-prefix}--radio-button-wrapper
+    .#{$carbon-prefix}--radio-button__label {
+    justify-content: left;
+  }
+
+  .#{$block-class} .#{$carbon-prefix}--breadcrumb .#{$carbon-prefix}--link {
+    cursor: pointer;
+  }
+
+  .#{$carbon-prefix}--accordion__item {
+    &:hover .#{$block-class}__sidebar-accordion-title button {
+      opacity: 1;
+    }
+
+    .#{$block-class}__sidebar-accordion-title button {
+      opacity: 0;
+    }
+  }
 }
 
 @include exports('add-select') {

package/scss/components/BreadcrumbWithOverflow/_index.scss

@@ -5,4 +5,4 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import './breadcrumb-with-overflow.scss';
+@import './breadcrumb-with-overflow';

package/scss/components/CreateInfluencer/_create-influencer.scss

@@ -13,7 +13,7 @@
   $block-class: #{$pkg-prefix}--create-influencer;
   $create-tearsheet-block-class: #{$pkg-prefix}--tearsheet-create;
   $influencerAnimationStart: calc(-1 * #{$spacing-05});
-  @keyframes influencerMenuEntrance {
+  @keyframes influencer-menu-entrance {
     0% {
       opacity: 0;
       // stylelint-disable-next-line carbon/layout-token-use
@@ -24,7 +24,7 @@
       transform: translateX(0);
     }
   }
-  @keyframes influencerMenuExit {
+  @keyframes influencer-menu-exit {
     0% {
       opacity: 1;
       transform: translateX(0);
@@ -60,7 +60,7 @@
   .#{$block-class}__side-nav-opening,
   .#{$block-class}__progress-indicator-opening {
     // stylelint-disable-next-line carbon/motion-token-use
-    animation: influencerMenuEntrance $duration--moderate-02 1;
+    animation: influencer-menu-entrance $duration--moderate-02 1;
     animation-fill-mode: forwards;
     @include carbon--motion(entrance, productive);
   }
@@ -68,7 +68,7 @@
   .#{$block-class}__side-nav-closing,
   .#{$block-class}__progress-indicator-closing {
     // stylelint-disable-next-line carbon/motion-token-use
-    animation: influencerMenuExit $duration--moderate-02 1;
+    animation: influencer-menu-exit $duration--moderate-02 1;
     animation-fill-mode: forwards;
     @include carbon--motion(exit, productive);
   }

package/scss/components/CreateTearsheet/_create-tearsheet.scss

@@ -23,7 +23,7 @@
 @import '../CreateInfluencer/index';
 
 @mixin create-tearsheet {
-  @keyframes stepContentEntrance {
+  @keyframes step-content-entrance {
     0% {
       opacity: 0;
       // stylelint-disable-next-line carbon/layout-token-use
@@ -50,7 +50,7 @@
   }
 
   .#{$block-class} .#{$step-block-class}__step--visible-step {
-    animation: $duration--slow-01 stepContentEntrance;
+    animation: $duration--slow-01 step-content-entrance;
     animation-fill-mode: forwards;
     animation-timing-function: $carbon--standard-easing;
     opacity: 0;

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

@@ -5,14 +5,8 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import './index';
 @import '../../global/styles/project-settings';
 
-// Uncomment next line (which must appear last) to test in storybook
-// that the SCSS styles for this component are sufficiently specific
-// to override Carbon whichever order the styles get loaded in.
-//@import 'carbon-components/css/carbon-components.min';
-
 $story-class: #{$pkg-prefix}--create-tearsheet-narrow--story;
 
 .#{$story-class}__flex-container {

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

@@ -0,0 +1,102 @@
+//
+// Copyright IBM Corp. 2022, 2022
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+// Standard imports.
+@import '../../global/styles/project-settings';
+@import '../../global/styles/mixins';
+
+// Define all component styles in a mixin which is then exported using
+// the Carbon import-once mechanism.
+@mixin set-header-borders {
+  border-right: 1px solid $text-03;
+  border-bottom: 1px solid $text-03;
+}
+@mixin set-body-borders {
+  border-right: 1px solid $ui-03;
+  border-bottom: 1px solid $ui-03;
+}
+@mixin data-spreadsheet {
+  // The block part of our conventional BEM class names (blockClass__E--M).
+  $block-class: #{$pkg-prefix}--data-spreadsheet;
+
+  .#{$block-class} {
+    display: inline-block;
+    border-spacing: 0;
+
+    &.#{$block-class}__container-has-focus {
+      outline: 2px solid $inverse-link;
+    }
+
+    .#{$block-class}__header--container {
+      position: relative;
+    }
+
+    button.#{$block-class}__td {
+      margin: 0;
+      background-color: transparent;
+    }
+    .#{$block-class}__tr {
+      :last-child {
+        .#{$block-class}__td {
+          border-bottom: 0;
+        }
+      }
+    }
+
+    .#{$block-class}__th,
+    .#{$block-class}__td {
+      // height: 2.25rem; // update to be controlled by cellSize prop later
+      padding: 0 $spacing-03;
+      border: 0;
+      margin: 0;
+      color: $text-01;
+    }
+    .#{$block-class}__th:last-child,
+    .#{$block-class}__td:last-child {
+      border-right: 1px solid $text-03;
+    }
+    .#{$block-class}__th,
+    button.#{$block-class}__td-th {
+      @include set-header-borders();
+
+      background-color: $ui-01;
+      cursor: pointer;
+    }
+    .#{$block-class}__td-th {
+      @include carbon--font-weight('semibold');
+
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+    }
+    .#{$block-class}__td {
+      @include set-body-borders();
+
+      cursor: cell;
+      text-align: left;
+    }
+    .#{$block-class}__th {
+      @include carbon--type-style('productive-heading-01');
+
+      color: $text-01;
+      text-align: left;
+    }
+    .#{$block-class}__active-cell--highlight {
+      position: absolute;
+      border: $spacing-01 solid $interactive-01;
+      background-color: transparent;
+      &:focus {
+        border: $spacing-01 solid $interactive-01;
+        outline: 0;
+      }
+    }
+  }
+}
+
+@include exports('data-spreadsheet') {
+  @include data-spreadsheet;
+}

package/scss/components/{CancelableTextEdit → DataSpreadsheet}/_index.scss

@@ -1,8 +1,8 @@
 //
-// Copyright IBM Corp. 2021, 2021
+// Copyright IBM Corp. 2022, 2022
 //
 // 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 './cancelable-text-edit';
+@import './data-spreadsheet';

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

@@ -0,0 +1,6 @@
+//
+// Copyright IBM Corp. 2022, 2022
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//

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

@@ -5,9 +5,6 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import './index';
-
-// TODO: add any additional styles used by EditSidePanel.stories.js
 @import '../../global/styles/project-settings';
 
 $block-class: #{$pkg-prefix}--edit-side-panel;
@@ -28,8 +25,3 @@ $story-prefix: edit-side-panel-stories__;
 .#{$block-class} .#{$carbon-prefix}--number__control-btn::after {
   background-color: $field-02;
 }
-
-// Uncomment next line (which must appear last) to test in storybook
-// that the SCSS styles for this component are sufficiently specific
-// to override Carbon whichever order the styles get loaded in.
-//@import 'carbon-components/css/carbon-components.min';