@carbon/ibm-products 1.11.0 → 1.12.0

package/lib/components/DataSpreadsheet/utils/handleHeaderCellSelection.js

@@ -27,7 +27,9 @@ var handleHeaderCellSelection = function handleHeaderCellSelection(_ref) {
       setSelectionAreas = _ref.setSelectionAreas,
       spreadsheetRef = _ref.spreadsheetRef,
       index = _ref.index,
-      isKeyboard = _ref.isKeyboard;
+      isKeyboard = _ref.isKeyboard,
+      setSelectionAreaData = _ref.setSelectionAreaData;
+  setSelectionAreaData([]);
   var rowValue = isKeyboard ? activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row : index;
   var columnValue = isKeyboard ? activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column : index;
   var point1 = {

package/lib/components/ImportModal/ImportModal.js

@@ -275,7 +275,7 @@ var ImportModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     size: "sm",
     disabled: importButtonDisabled
   }, inputButtonText)), /*#__PURE__*/_react.default.createElement("div", {
-    className: "bx--file-container ".concat(blockClass, "__file-container")
+    className: "".concat(_settings.carbon.prefix, "--file-container ").concat(blockClass, "__file-container")
   }, hasFiles && /*#__PURE__*/_react.default.createElement("p", {
     className: "".concat(blockClass, "__helper-text")
   }, fileStatusString), files.map(function (file) {

package/lib/components/UserProfileImage/UserProfileImage.js

@@ -117,7 +117,7 @@ UserProfileImage.propTypes = {
    */
   imageDescription: _propTypes.default.string.isRequired.if(function (_ref2) {
     var image = _ref2.image;
-    return image;
+    return !!image;
   }),
 
   /**

package/lib/components/index.js

@@ -147,12 +147,6 @@ Object.defineProperty(exports, "InlineEdit", {
     return _InlineEdit.InlineEdit;
   }
 });
-Object.defineProperty(exports, "LoadingBar", {
-  enumerable: true,
-  get: function get() {
-    return _LoadingBar.LoadingBar;
-  }
-});
 Object.defineProperty(exports, "ModifiedTabs", {
   enumerable: true,
   get: function get() {
@@ -326,8 +320,6 @@ var _HTTPErrors = require("./HTTPErrors");
 
 var _ImportModal = require("./ImportModal");
 
-var _LoadingBar = require("./LoadingBar");
-
 var _ModifiedTabs = require("./ModifiedTabs");
 
 var _MultiAddSelect = require("./MultiAddSelect");

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

@@ -44,6 +44,7 @@ var defaults = {
     NoTagsEmptyState: true,
     NotFoundEmptyState: true,
     NotificationsEmptyState: true,
+    OptionsTile: true,
     PageHeader: true,
     ProductiveCard: true,
     RemoveModal: true,
@@ -58,14 +59,12 @@ var defaults = {
     // other public components not yet reviewed and released:
     MultiAddSelect: false,
     SingleAddSelect: false,
-    LoadingBar: false,
     ModifiedTabs: false,
     Toolbar: false,
     ToolbarButton: false,
     ToolbarGroup: false,
     WebTerminal: false,
     EditSidePanel: false,
-    OptionsTile: false,
     CancelableTextEdit: false,
     InlineEdit: false,
     DataSpreadsheet: false

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "1.11.0",
+  "version": "1.12.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -51,8 +51,8 @@
   },
   "devDependencies": {
     "@babel/cli": "^7.17.6",
-    "@babel/core": "^7.17.5",
-    "babel-preset-ibm-cloud-cognitive": "^0.14.10",
+    "@babel/core": "^7.17.8",
+    "babel-preset-ibm-cloud-cognitive": "^0.14.12",
     "chalk": "^4.1.2",
     "change-case": "^4.1.2",
     "copyfiles": "^2.4.1",
@@ -60,33 +60,33 @@
     "fs-extra": "^10.0.1",
     "glob": "^7.2.0",
     "jest": "^27.5.1",
-    "jest-config-ibm-cloud-cognitive": "^0.23.11",
-    "npm-check-updates": "^12.5.2",
+    "jest-config-ibm-cloud-cognitive": "^0.23.13",
+    "npm-check-updates": "^12.5.4",
     "npm-run-all": "^4.1.5",
     "rimraf": "^3.0.2",
     "sass": "^1.49.9",
-    "yargs": "^17.3.1"
+    "yargs": "^17.4.0"
   },
   "dependencies": {
-    "@babel/runtime": "^7.17.2",
-    "@carbon/telemetry": "^0.0.0-alpha.6",
+    "@babel/runtime": "^7.17.8",
+    "@carbon/telemetry": "^0.1.0",
     "react-resize-detector": "^7.0.0",
     "react-table": "^7.7.0",
     "react-window": "^1.8.6"
   },
   "peerDependencies": {
-    "@carbon/colors": "^10.37.0",
-    "@carbon/icons-react": "^10.47.0",
+    "@carbon/colors": "^10.37.1",
+    "@carbon/icons-react": "^10.48.0",
     "@carbon/import-once": "^10.7.0",
-    "@carbon/layout": "^10.37.0",
+    "@carbon/layout": "^10.37.1",
     "@carbon/motion": "^10.29.0",
-    "@carbon/themes": "^10.52.0",
-    "@carbon/type": "^10.42.0",
-    "carbon-components": "^10.54.0",
-    "carbon-components-react": "^7.54.2",
+    "@carbon/themes": "^10.53.2",
+    "@carbon/type": "^10.43.2",
+    "carbon-components": "^10.55.2",
+    "carbon-components-react": "^7.55.2",
     "carbon-icons": "^7.0.7",
     "react": "^16.8.6 || ^17.0.1",
     "react-dom": "^16.8.6 || ^17.0.1"
   },
-  "gitHead": "684e0bceb27d3f1376651a624db23bcedeab5c59"
+  "gitHead": "85ac9b35afdba4e7e2d63c29cf4150347028e00d"
 }

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

@@ -19,7 +19,7 @@
   // The block part of our conventional BEM class names (blockClass__E--M).
   $block-class: #{$pkg-prefix}--about-modal;
 
-  .#{$block-class} .bx--modal-container {
+  .#{$block-class} .#{$carbon-prefix}--modal-container {
     grid-template-rows: auto auto 1fr auto;
   }
 
@@ -56,7 +56,7 @@
   }
 
   .#{$block-class}.#{$block-class}--with-tabs
-    .bx--modal-content--overflow-indicator {
+    .#{$carbon-prefix}--modal-content--overflow-indicator {
     // stylelint-disable-next-line carbon/layout-token-use
     bottom: calc(#{$spacing-09} + #{$spacing-08});
   }

package/scss/components/ActionSet/_action-set.scss

@@ -101,7 +101,9 @@
     flex: 1 1 25%;
   }
 
-  .#{$block-class} .#{$block-class}__action-button .bx--inline-loading {
+  .#{$block-class}
+    .#{$block-class}__action-button
+    .#{$carbon-prefix}--inline-loading {
     position: absolute;
     top: 0;
     right: 0;

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

@@ -51,6 +51,41 @@
       display: block;
       color: $text-02;
     }
+
+    &-cell:hover .#{$block-class}__selections-dropdown {
+      visibility: visible;
+    }
+
+    &-dropdown {
+      visibility: hidden;
+    }
+
+    &-row-selected {
+      background: #e5e5e5;
+    }
+
+    &-row-selected .#{$block-class}__selections-dropdown {
+      visibility: visible;
+    }
+
+    &-checkbox {
+      display: flex;
+      align-items: center;
+    }
+
+    &-checkbox-label-text {
+      display: flex;
+      flex-direction: column;
+      padding-left: $spacing-05;
+    }
+
+    &-checkbox-wrapper.#{$carbon-prefix}--form-item {
+      flex: 0;
+    }
+
+    &-checkbox-wrapper .#{$carbon-prefix}--checkbox-label-text {
+      display: none;
+    }
   }
 
   // sidebar
@@ -141,7 +176,7 @@
       display: flex;
     }
 
-    .bx--overflow-menu {
+    .#{$carbon-prefix}--overflow-menu {
       border-bottom: 1px solid $ui-04;
     }
   }
@@ -159,6 +194,10 @@
 
   // overrides
 
+  .#{$block-class}__tag-container .#{$carbon-prefix}--tag {
+    margin: 0;
+  }
+
   // the influencer sidebar needs to be even with the buttons
   .#{$block-class} .#{$tearsheet-class} .#{$tearsheet-class}__influencer {
     max-width: 29rem;
@@ -180,7 +219,7 @@
 
   .#{$block-class}
     .#{$carbon-prefix}--modal-container--sm
-    .bx--modal-content
+    .#{$carbon-prefix}--modal-content
     p {
     padding-right: 0;
   }

package/scss/components/CreateModal/_create-modal.scss

@@ -19,11 +19,11 @@
     background-color: $ui-background;
   }
 
-  .#{$pkg-prefix}--create-modal .bx--modal-close {
+  .#{$pkg-prefix}--create-modal .#{$carbon-prefix}--modal-close {
     display: none;
   }
 
-  .#{$pkg-prefix}--create-modal .bx--modal-container {
+  .#{$pkg-prefix}--create-modal .#{$carbon-prefix}--modal-container {
     @include carbon--breakpoint(md) {
       max-height: 95%;
     }
@@ -32,14 +32,16 @@
     }
   }
 
-  .#{$pkg-prefix}--create-modal .bx--modal-header {
+  .#{$pkg-prefix}--create-modal .#{$carbon-prefix}--modal-header {
     padding-right: 20%;
     padding-bottom: $spacing-03;
     border-bottom: 1px solid $ui-03;
     margin-bottom: 0;
   }
 
-  .#{$pkg-prefix}--create-modal .bx--modal-footer .bx--btn {
+  .#{$pkg-prefix}--create-modal
+    .#{$carbon-prefix}--modal-footer
+    .#{$carbon-prefix}--btn {
     max-width: none;
   }
 
@@ -63,7 +65,7 @@
     margin: $spacing-03 0 $spacing-05 0;
   }
 
-  .#{$pkg-prefix}--create-modal__form .bx--fieldset {
+  .#{$pkg-prefix}--create-modal__form .#{$carbon-prefix}--fieldset {
     min-width: 100%;
     margin-bottom: 0;
   }

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

@@ -15,31 +15,32 @@
 @import 'carbon-components/scss/components/tooltip/tooltip';
 @import 'carbon-components/scss/components/modal/modal';
 
-.bx--number {
+.#{$carbon-prefix}--number {
   min-width: 100%;
 }
 
-.bx--number__control-btn::before {
+.#{$carbon-prefix}--number__control-btn::before {
   background-color: transparent;
 }
 
-.bx--number__control-btn::after {
+.#{$carbon-prefix}--number__control-btn::after {
   background-color: transparent;
 }
 
-.bx--date-picker {
+.#{$carbon-prefix}--date-picker {
   min-width: 100%;
 }
 
-.bx--date-picker-container {
+.#{$carbon-prefix}--date-picker-container {
   min-width: 100%;
 }
 
-.bx--date-picker.bx--date-picker--single .bx--date-picker__input {
+.#{$carbon-prefix}--date-picker.#{$carbon-prefix}--date-picker--single
+  .#{$carbon-prefix}--date-picker__input {
   min-width: 100%;
 }
 
-.bx--list-box__menu-icon {
+.#{$carbon-prefix}--list-box__menu-icon {
   top: $spacing-03;
 }
 

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

@@ -45,7 +45,8 @@
 
     .#{$block-class}__th,
     .#{$block-class}__td {
-      // height: 2.25rem; // update to be controlled by cellSize prop later
+      @include carbon--type-style('body-short-01');
+
       padding: 0 $spacing-03;
       border: 0;
       margin: 0;
@@ -85,10 +86,13 @@
       text-align: left;
     }
     .#{$block-class}__cell-editor {
+      @include carbon--type-style('body-short-01');
+
       position: absolute;
       z-index: 4;
       display: none;
-      padding: 0 $spacing-03;
+      /* stylelint-disable-next-line carbon/layout-token-use */
+      padding: 0 calc(#{$spacing-03} + 1px) 0 $spacing-03;
       background-color: $ui-background;
       resize: none;
       &.#{$carbon-prefix}--text-area {
@@ -97,11 +101,25 @@
       }
     }
     .#{$block-class}__active-cell--highlight {
+      @include carbon--type-style('body-short-01');
+      @include set-body-borders();
+
       position: absolute;
       z-index: 3;
       display: none;
+      // Could be fixed by using border-right but the fact that
+      // this element is positioned absolute prevents that from working
+      /* stylelint-disable-next-line carbon/layout-token-use */
+      padding-right: calc(#{$spacing-03} - 1px);
+      padding-bottom: $spacing-01;
       border: $spacing-01 solid $interactive-01;
-      background-color: transparent;
+      background-color: $ui-background;
+      text-align: left;
+
+      &[data-active-row-index='header'],
+      &[data-active-column-index='header'] {
+        background-color: transparent;
+      }
 
       &:focus {
         border: $spacing-01 solid $interactive-01;

package/scss/components/ExportModal/_export-modal.scss

@@ -21,15 +21,15 @@
 @mixin export-modal {
   $block-class: #{$pkg-prefix}--export-modal;
 
-  .#{$block-class} .bx--modal-footer .bx--btn {
+  .#{$block-class} .#{$carbon-prefix}--modal-footer .#{$carbon-prefix}--btn {
     max-width: none;
   }
 
-  .#{$block-class}.#{$carbon-prefix}--modal .bx--modal-content {
+  .#{$block-class}.#{$carbon-prefix}--modal .#{$carbon-prefix}--modal-content {
     padding-right: $spacing-05;
   }
 
-  .#{$block-class} .bx--modal-close {
+  .#{$block-class} .#{$carbon-prefix}--modal-close {
     display: none;
   }
 

package/scss/components/InlineEdit/_inline-edit.scss

@@ -264,6 +264,9 @@
 
       svg {
         transition: width $duration--moderate-02 motion(standard, productive);
+        @media (prefers-reduced-motion: reduce) {
+          transition: none;
+        }
       }
     }
 

package/scss/components/ModifiedTabs/_modified-tabs.scss

@@ -13,15 +13,6 @@
   justify-content: space-between;
 }
 
-.modified-tabs .modified-tabs__tab .bx--btn {
-  // transform: translateY(8px);
-}
-
-.modified-tabs .bx--tabs__nav {
-  /* overflow cannot be tweaked to fix tooltip */
-  // overflow: visible;
-}
-
 .modified-tabs__tab-new,
 .modified-tabs__tab {
   position: relative;
@@ -45,6 +36,10 @@
   border-radius: 0;
   cursor: pointer;
   transition: background-color $duration--fast-02 motion(standard, productive);
+  // stylelint-disable-next-line max-nesting-depth
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
 }
 
 .modified-tabs__tab-new-icon {

package/scss/components/NotificationsPanel/_notifications-panel.scss

@@ -75,7 +75,8 @@
         align-items: center;
         justify-content: space-between;
       }
-      .#{$block-class}__do-not-disturb-toggle .bx--toggle__switch {
+      .#{$block-class}__do-not-disturb-toggle
+        .#{$carbon-prefix}--toggle__switch {
         margin-top: $spacing-02;
       }
       .#{$block-class}__dismiss-button {
@@ -183,16 +184,19 @@
           min-width: 5.5rem;
           padding: 0;
 
-          .bx--btn__icon {
+          .#{$carbon-prefix}--btn__icon {
             transition: transform $duration--moderate-02 ease;
+            @media (prefers-reduced-motion: reduce) {
+              transition: none;
+            }
           }
           &.#{$block-class}__notification-read-more-button {
-            .bx--btn__icon {
+            .#{$carbon-prefix}--btn__icon {
               transform: rotate(0deg);
             }
           }
           &.#{$block-class}__notification-read-less-button {
-            .bx--btn__icon {
+            .#{$carbon-prefix}--btn__icon {
               transform: rotate(180deg);
             }
           }
@@ -276,7 +280,7 @@
         padding: 0;
         color: $text-01;
       }
-      .#{$block-class}__settings-button .bx--btn__icon {
+      .#{$block-class}__settings-button .#{$carbon-prefix}--btn__icon {
         margin: 0;
       }
     }

package/scss/components/OptionsTile/_options-tile.scss

@@ -210,7 +210,6 @@
   @media (prefers-reduced-motion: reduce) {
     .#{$block-class}__summary,
     .#{$block-class}__chevron {
-      // stylelint-disable-next-line carbon/motion-token-use
       transition: none;
     }
   }

package/scss/components/RemoveModal/_remove-modal.scss

@@ -17,15 +17,15 @@
 @mixin remove-modal {
   $block-class: #{$pkg-prefix}--remove-modal;
 
-  .#{$block-class} .bx--modal-footer .bx--btn {
+  .#{$block-class} .#{$carbon-prefix}--modal-footer .#{$carbon-prefix}--btn {
     max-width: none;
   }
 
-  .#{$block-class} .bx--modal-content {
+  .#{$block-class} .#{$carbon-prefix}--modal-content {
     padding-right: $spacing-05;
   }
 
-  .#{$block-class} .bx--modal-close {
+  .#{$block-class} .#{$carbon-prefix}--modal-close {
     display: none;
   }
 

package/scss/components/TagSet/_tag-set.scss

@@ -114,6 +114,7 @@ $block-class-modal: #{$block-class}-modal;
     &.#{$block-class-overflow}__tooltip {
       // removes the min width in Carbon
       min-width: initial;
+      text-align: left;
     }
 
     .#{$block-class-overflow}__show-all-tags-link {
@@ -138,7 +139,7 @@ $block-class-modal: #{$block-class}-modal;
     }
 
     .#{$block-class-overflow}__tag .#{$carbon-prefix}--tag__close-icon {
-      // undo override by .bx--tooltip button
+      // undo override by .#{$carbon-prefix}--tooltip button
       padding: 0;
     }
 

package/scss/components/Tearsheet/_tearsheet.scss

@@ -47,6 +47,9 @@
       transition: visibility 0s linear,
         background-color $motion-duration motion(entrance, expressive),
         opacity $motion-duration motion(entrance, expressive);
+      @media (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
     }
 
     &.#{$block-class}--stacked-1-of-2 {
@@ -263,7 +266,7 @@
     &.#{$block-class}--wide .#{$block-class}__content {
       background: $ui-background;
 
-      // revert the background colour overridden by bx--modal styles
+      // revert the background color overridden by #{$carbon-prefix}--modal styles
       .#{$prefix}--pagination,
       .#{$prefix}--pagination__control-buttons,
       .#{$prefix}--text-input,

package/scss/components/_index.scss

@@ -25,7 +25,6 @@
 @import './ExpressiveCard/index';
 @import './HTTPErrors/index';
 @import './ImportModal/index';
-@import './LoadingBar/index';
 @import './ModifiedTabs/index';
 @import './MultiAddSelect/index';
 @import './NotificationsPanel/index';