@carbon/ibm-products 1.46.0 → 1.46.2

package/lib/components/Datagrid/useSelectRows.js

@@ -1,21 +1,25 @@
 "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 _carbonComponentsReact = require("carbon-components-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 blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
@@ -71,6 +75,19 @@ var SelectRow = function SelectRow(datagridState) {
     onRadioSelect = datagridState.onRadioSelect,
     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,
@@ -91,7 +108,7 @@ var SelectRow = function SelectRow(datagridState) {
     },
     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

package/lib/components/Datagrid/useStickyColumn.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 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"));
@@ -19,8 +20,21 @@ 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, {
@@ -114,7 +128,7 @@ var addTableBodyProps = function addTableBodyProps(tableBodyRef, 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;
@@ -127,7 +141,7 @@ var changeProps = function changeProps(elementName, headerCellRef, props, data)
   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
     })];

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "1.46.0",
+  "version": "1.46.2",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -95,5 +95,5 @@
     "react": "^16.8.6 || ^17.0.1",
     "react-dom": "^16.8.6 || ^17.0.1"
   },
-  "gitHead": "ff776c9f98e52d84bf0f50a60bb113e3d6f64c10"
+  "gitHead": "3ea7d485b3cc004a95bf621a26727847329391a3"
 }

package/scss/components/Datagrid/styles/_datagrid.scss

@@ -35,6 +35,7 @@
         align-items: center;
         color: $text-01;
       }
+
       .#{$block-class}__head-select-all.#{$block-class}__checkbox-cell.#{$block-class}__checkbox-cell-sticky-left {
         position: sticky;
         z-index: 1;
@@ -46,6 +47,7 @@
       align-items: center;
       padding-top: 0;
       padding-bottom: 0;
+
       &.#{$block-class}__cell--spacer {
         padding: 0;
       }
@@ -61,6 +63,7 @@
         align-items: center;
         padding-top: 0;
       }
+
       &.#{$block-class}__checkbox-cell-sticky-left {
         position: sticky;
         left: 0;
@@ -146,6 +149,7 @@
     }
   }
 }
+
 .#{$block-class}__grid-container::-webkit-scrollbar-thumb {
   background-color: $text-03;
 }
@@ -154,6 +158,7 @@
   width: 6px;
   background-color: $ui-background;
 }
+
 .#{$block-class}__grid-container {
   display: block;
   width: 100%;
@@ -246,7 +251,9 @@
   td.#{$carbon-prefix}--table-column-checkbox,
   th.#{$carbon-prefix}--table-column-checkbox {
     /* stylelint-disable-next-line declaration-no-important */
-    padding-right: $spacing-06 !important;
+    width: $spacing-09 !important;
+    /* stylelint-disable-next-line declaration-no-important */
+    padding-right: $spacing-05 !important;
   }
 }
 
@@ -318,7 +325,8 @@
 }
 
 .#{$block-class}__head-hidden-select-all {
-  padding-right: $spacing-08;
+  padding-right: $spacing-09;
+
   &.#{$block-class}__select-all-sticky-left {
     position: sticky;
     z-index: 1;
@@ -360,6 +368,14 @@
   width: 100% !important;
 }
 
+.#{$block-class}__sticky thead {
+  display: flex;
+
+  tr.#{$block-class}__sticky {
+    width: auto;
+  }
+}
+
 .#{block-class}__displayFlex {
   position: relative;
   display: flex;
@@ -417,6 +433,7 @@
 
 .#{$block-class}__carbon-row-expanded {
   position: relative;
+
   &.#{$block-class}__carbon-row-expanded-hover-active::before {
     position: absolute;
     z-index: 2;
@@ -428,7 +445,7 @@
     );
     width: 1px;
     height: var(--#{$block-class}--indicator-height);
-    border-left: 1px solid $interactive-01;
+    border-left: 1px solid $active-ui;
     content: '';
   }
 }
@@ -447,8 +464,11 @@
   }
 
   .#{$block-class}__table-toolbar {
+    display: flex;
     flex: 1 0 auto;
+    align-items: flex-end;
   }
+
   .#{$carbon-prefix}--table-toolbar {
     background: transparent;
   }
@@ -457,10 +477,6 @@
     flex: 1 1 100%;
   }
 
-  .#{$carbon-prefix}--table-toolbar {
-    padding-top: $spacing-07;
-  }
-
   .#{$block-class}__toolbar-divider {
     position: relative;
   }
@@ -527,6 +543,7 @@
   justify-content: center;
   padding: 0;
   margin: 0;
+
   .#{$carbon-prefix}--btn__icon {
     margin: 0;
   }

package/scss/components/Datagrid/styles/_useNestedRows.scss

@@ -46,3 +46,20 @@
   background-color: $border-subtle;
   content: '';
 }
+
+.#{$block-class} tr.#{$block-class}__carbon-nested-row {
+  td:first-child:empty,
+  .#{$block-class}__expandable-row-cell {
+    border-bottom: none;
+  }
+}
+
+.#{$carbon-prefix}--data-table td.#{$block-class}__expandable-row-cell {
+  padding-left: $spacing-03;
+}
+
+.#{$block-class}__carbon-row-expanded {
+  .#{$block-class}__expandable-row-cell {
+    border-bottom: none;
+  }
+}

package/scss/components/Datagrid/styles/_useSelectAllToggle.scss

@@ -8,15 +8,18 @@
 
 @import './variables';
 
-th.#{$block-class}__select-all-toggle-on,
-td.#{$block-class}__select-all-toggle-on {
-  /* stylelint-disable-next-line declaration-no-important */
-  width: 4.5rem !important;
-  /* stylelint-disable-next-line declaration-no-important */
-  min-width: initial !important;
-  box-sizing: border-box;
-  flex: 0 0 auto;
+.#{$block-class}__grid-container {
+  th.#{$block-class}__select-all-toggle-on,
+  td.#{$block-class}__select-all-toggle-on {
+    /* stylelint-disable-next-line declaration-no-important */
+    width: 4.5rem !important;
+    /* stylelint-disable-next-line declaration-no-important */
+    min-width: initial !important;
+    box-sizing: border-box;
+    flex: 0 0 auto;
+  }
 }
+
 th.#{$block-class}__select-all-toggle-on {
   display: flex;
   align-items: center;

package/scss/components/Datagrid/styles/_useStickyColumn.scss

@@ -14,7 +14,7 @@
   right: 0;
   display: flex;
   align-items: center;
-  border-left: 1px solid $ui-03;
+  border-left: 1px solid $active-light-ui;
 }
 
 .#{$block-class}__right-sticky-column-header {
@@ -29,7 +29,7 @@
   left: 0;
   display: flex;
   align-items: center;
-  border-right: 1px solid $ui-03;
+  border-right: 1px solid $active-light-ui;
 }
 
 .#{$block-class}__left-sticky-column-header {
@@ -41,7 +41,7 @@
 
 .#{$block-class}__left-sticky-column-cell.#{$block-class}__left-sticky-column-cell--with-extra-select-column,
 .#{$block-class}__left-sticky-column-header.#{$block-class}__left-sticky-column-header--with-extra-select-column {
-  left: $spacing-08;
+  left: $spacing-09;
 }
 
 .#{$block-class}__sticky-noShadow {

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

@@ -23,12 +23,19 @@
   $block-class: #{$pkg-prefix}--options-tile;
 
   .#{$block-class} {
+    position: relative;
     border-bottom: 1px solid $ui-03;
     background-color: $ui-01;
   }
 
   .#{$block-class}__toggle-container {
-    position: relative;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: calc(
+      #{$spacing-05} + 2rem + #{$spacing-05}
+    ); // spacing + toggle width + spacing
   }
 
   .#{$block-class}__toggle {