@carbon/ibm-products 2.0.0-rc.4 → 2.0.0-rc.6

package/lib/components/CreateTearsheet/CreateTearsheet.js

@@ -37,6 +37,8 @@ var _devtools = require("../../global/js/utils/devtools");
 
 var _lastIndexInArray = require("../../global/js/utils/lastIndexInArray");
 
+var _getNumberOfHiddenSteps = require("../../global/js/utils/getNumberOfHiddenSteps");
+
 var _excluded = ["backButtonText", "cancelButtonText", "children", "className", "description", "influencerWidth", "initialStep", "label", "nextButtonText", "onClose", "onRequestSubmit", "open", "submitButtonText", "title", "verticalPosition"];
 
 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); }
@@ -147,7 +149,12 @@ var CreateTearsheet = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     if (lastItem !== lastIncludedStep) {
       setLastIncludedStep(lastItem);
     }
-  }, [stepData, firstIncludedStep, lastIncludedStep]);
+
+    if (open && initialStep) {
+      var numberOfHiddenSteps = (0, _getNumberOfHiddenSteps.getNumberOfHiddenSteps)(stepData, initialStep);
+      setCurrentStep(Number(initialStep + numberOfHiddenSteps));
+    }
+  }, [stepData, firstIncludedStep, lastIncludedStep, initialStep, open]);
   (0, _hooks.useCreateComponentFocus)({
     previousState: previousState,
     currentStep: currentStep,
@@ -160,6 +167,7 @@ var CreateTearsheet = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     previousState: previousState,
     open: open,
     setCurrentStep: setCurrentStep,
+    stepData: stepData,
     initialStep: initialStep,
     totalSteps: stepData === null || stepData === void 0 ? void 0 : stepData.length,
     componentName: componentName

package/lib/components/Datagrid/Datagrid/DatagridContent.js

@@ -140,7 +140,7 @@ var DatagridContent = function DatagridContent(_ref) {
     }
 
     var gridElement = document.querySelector("#".concat(tableId));
-    var tableHeader = document.querySelector(".".concat(_settings.carbon.prefix, "--data-table-header"));
+    var tableHeader = gridElement === null || gridElement === void 0 ? void 0 : gridElement.querySelector(".".concat(_settings.carbon.prefix, "--data-table-header"));
     gridElement.style.setProperty("--".concat(blockClass, "--grid-width"), (0, _layout.px)(totalColumnsWidth + 32));
 
     if (gridActive) {
@@ -158,7 +158,7 @@ var DatagridContent = function DatagridContent(_ref) {
     className: "".concat(blockClass, "__datagridLeftPanel")
   }, leftPanel.panelContent), withInlineEdit ? /*#__PURE__*/_react.default.createElement("div", {
     ref: multiKeyTrackingRef
-  }, renderTable()) : renderTable())), (rows === null || rows === void 0 ? void 0 : rows.length) > 0 && !isFetching && DatagridPagination && DatagridPagination(datagridState), CustomizeColumnsModal && /*#__PURE__*/_react.default.createElement(CustomizeColumnsModal, {
+  }, renderTable()) : renderTable())), (rows === null || rows === void 0 ? void 0 : rows.length) > 0 && !isFetching && DatagridPagination && /*#__PURE__*/_react.default.createElement(DatagridPagination, datagridState), CustomizeColumnsModal && /*#__PURE__*/_react.default.createElement(CustomizeColumnsModal, {
     instance: datagridState
   }));
 };

package/lib/components/Datagrid/Datagrid/DatagridRow.js

@@ -50,7 +50,7 @@ var DatagridRow = function DatagridRow(datagridState) {
   var activeCellId = state.activeCellId;
   var activeCellObject = activeCellId && (0, _getCellIdAsObject.getCellIdAsObject)(activeCellId);
   return /*#__PURE__*/_react.default.createElement(TableRow, (0, _extends2.default)({
-    className: (0, _classnames.default)("".concat(blockClass, "__carbon-row"), (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__carbon-row-expanded"), row.isExpanded), (0, _defineProperty2.default)(_cx, "".concat(_settings.carbon.prefix, "--data-table--selected"), row.isSelected), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__carbon-row-hover-active"), activeCellObject && row.index === activeCellObject.row), _cx))
+    className: (0, _classnames.default)("".concat(blockClass, "__carbon-row"), (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__carbon-row-expanded"), row.isExpanded), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__carbon-row-expandable"), row.canExpand), (0, _defineProperty2.default)(_cx, "".concat(_settings.carbon.prefix, "--data-table--selected"), row.isSelected), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__carbon-row-hover-active"), activeCellObject && row.index === activeCellObject.row), _cx))
   }, row.getRowProps(), {
     key: row.id,
     onMouseEnter: function onMouseEnter(event) {
@@ -61,7 +61,7 @@ var DatagridRow = function DatagridRow(datagridState) {
       var hoverRow = event.target.closest(".".concat(blockClass, "__carbon-row-expanded"));
       hoverRow === null || hoverRow === void 0 ? void 0 : hoverRow.classList.remove("".concat(blockClass, "__carbon-row-expanded-hover-active"));
     }
-  }), row.cells.map(function (cell) {
+  }), row.cells.map(function (cell, index) {
     var cellProps = cell.getCellProps();
     var children = cellProps.children,
         restProps = (0, _objectWithoutProperties2.default)(cellProps, _excluded);
@@ -76,7 +76,7 @@ var DatagridRow = function DatagridRow(datagridState) {
     }
 
     return /*#__PURE__*/_react.default.createElement(TableCell, (0, _extends2.default)({
-      className: "".concat(blockClass, "__cell")
+      className: (0, _classnames.default)("".concat(blockClass, "__cell"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__expandable-row-cell"), row.canExpand && index === 0))
     }, restProps, {
       key: cell.column.id
     }), content);

package/lib/components/Datagrid/Datagrid/DatagridToolbar.js

@@ -58,7 +58,8 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
 
   var selectedFlatRows = datagridState.selectedFlatRows,
       toggleAllRowsSelected = datagridState.toggleAllRowsSelected,
-      toolbarBatchActions = datagridState.toolbarBatchActions;
+      toolbarBatchActions = datagridState.toolbarBatchActions,
+      setGlobalFilter = datagridState.setGlobalFilter;
   var totalSelected = selectedFlatRows && selectedFlatRows.length; // Get initial width of batch actions container,
   // used to measure when all items are put inside
   // the ButtonMenu
@@ -135,7 +136,8 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
     shouldShowBatchActions: totalSelected > 0,
     totalSelected: totalSelected,
     onCancel: function onCancel() {
-      return toggleAllRowsSelected(false);
+      toggleAllRowsSelected(false);
+      setGlobalFilter(null);
     }
   }, !displayAllInMenu && toolbarBatchActions && (toolbarBatchActions === null || toolbarBatchActions === void 0 ? void 0 : toolbarBatchActions.map(function (batchAction, index) {
     if (index < 2 && toolbarBatchActions.length > 3 || index < 3 && toolbarBatchActions.length === 3) {

package/lib/components/Datagrid/useRowExpander.js

@@ -9,10 +9,16 @@ exports.default = void 0;
 
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var _icons = require("@carbon/react/icons");
 
+var _settings = require("../../settings");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
 /* eslint-disable react/prop-types */
 
 /*
@@ -22,16 +28,22 @@ var _icons = require("@carbon/react/icons");
  * US Government Users Restricted Rights - Use, duplication or disclosure
  * restricted by GSA ADP Schedule Contract with IBM Corp.
  */
+var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
+
 var useRowExpander = function useRowExpander(hooks) {
   var visibleColumns = function visibleColumns(columns) {
     var expanderColumn = {
       id: 'expander',
       Cell: function Cell(_ref) {
         var row = _ref.row;
-        return row.canExpand && /*#__PURE__*/_react.default.createElement("span", row.getToggleRowExpandedProps(), row.isExpanded ? /*#__PURE__*/_react.default.createElement(_icons.ChevronUp, {
-          size: 16
+        return row.canExpand && /*#__PURE__*/_react.default.createElement("button", (0, _extends2.default)({
+          type: "button",
+          "aria-label": "Expand current row",
+          className: (0, _classnames.default)("".concat(blockClass, "__row-expander"), "".concat(_settings.carbon.prefix, "--btn"), "".concat(_settings.carbon.prefix, "--btn--ghost"))
+        }, row.getToggleRowExpandedProps()), row.isExpanded ? /*#__PURE__*/_react.default.createElement(_icons.ChevronUp, {
+          className: "".concat(blockClass, "__row-expander--icon")
         }) : /*#__PURE__*/_react.default.createElement(_icons.ChevronDown, {
-          size: 16
+          className: "".concat(blockClass, "__row-expander--icon")
         }));
       },
       width: 48,

package/lib/components/PageHeader/PageHeader.js

@@ -330,7 +330,7 @@ var PageHeader = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     var current = _ref5.current;
     // on window resize and other updates some values may have changed
     checkUpdateVerticalSpace();
-    setWidthIsNarrow(current.innerWidth < _layout.breakpoints.md.width); // small (below medium) media query
+    setWidthIsNarrow(current.innerWidth / 16 < parseInt(_layout.breakpoints.md.width)); // small (below medium) media query
   }, [actionBarItems, children, breadcrumbs, enableBreadcrumbScroll, navigation, pageActions, subtitle, tags, title]);
   (0, _react.useEffect)(function () {
     checkUpdateVerticalSpace(); // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -373,7 +373,7 @@ var PageHeader = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   };
 
   (0, _react.useEffect)(function () {
-    if (typeof collapseHeader === 'boolean') {
+    if (collapseHeader === true) {
       (0, _PageHeaderUtils.utilSetCollapsed)(collapseHeader, metrics.headerOffset, metrics.headerTopValue);
     }
   }, [collapseHeader, metrics.headerOffset, metrics.headerTopValue]);
@@ -513,7 +513,7 @@ var PageHeader = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
         onWidthChange: handleWidthChange,
         buttons: pageActions,
         buttonSetOverflowLabel: pageActionsOverflowLabel,
-        rightAlign: true
+        rightAlign: !widthIsNarrow
       })));
     }
   }

package/lib/global/js/hooks/useResetCreateComponent.js

@@ -7,6 +7,8 @@ exports.useResetCreateComponent = void 0;
 
 var _react = require("react");
 
+var _getNumberOfHiddenSteps = require("../utils/getNumberOfHiddenSteps");
+
 /**
  * Copyright IBM Corp. 2021, 2022
  *
@@ -21,6 +23,7 @@ var _react = require("react");
  * @param {object} useResetCreateComponent.previousState
  * @param {boolean} useResetCreateComponent.open
  * @param {Function} useResetCreateComponent.setCurrentStep
+ * @param {object} useResetCreateComponent.stepData
  * @param {number} useResetCreateComponent.initialStep
  * @param {number} useResetCreateComponent.totalSteps
  * @param {string} useResetCreateComponent.componentName
@@ -30,13 +33,15 @@ var useResetCreateComponent = function useResetCreateComponent(_ref) {
       previousState = _ref.previousState,
       open = _ref.open,
       setCurrentStep = _ref.setCurrentStep,
+      stepData = _ref.stepData,
       initialStep = _ref.initialStep,
       totalSteps = _ref.totalSteps,
       componentName = _ref.componentName;
   (0, _react.useEffect)(function () {
     if (!(previousState !== null && previousState !== void 0 && previousState.open) && open) {
       if (initialStep && totalSteps && Number(initialStep) <= Number(totalSteps) && Number(initialStep) > 0) {
-        setCurrentStep(Number(initialStep));
+        var numberOfHiddenSteps = (0, _getNumberOfHiddenSteps.getNumberOfHiddenSteps)(stepData, initialStep);
+        setCurrentStep(Number(initialStep + numberOfHiddenSteps));
       } else {
         // default should be fist includedStep instead of just 1
         setCurrentStep(firstIncludedStep);
@@ -47,7 +52,7 @@ var useResetCreateComponent = function useResetCreateComponent(_ref) {
         console.warn("".concat(componentName, ": An invalid `initialStep` prop was supplied. The `initialStep` prop should be a number that is greater than 0 or less than or equal to the number of steps your ").concat(componentName, " has."));
       }
     }
-  }, [firstIncludedStep, open, previousState, setCurrentStep, initialStep, totalSteps, componentName]);
+  }, [firstIncludedStep, open, previousState, setCurrentStep, stepData, initialStep, totalSteps, componentName]);
 };
 
 exports.useResetCreateComponent = useResetCreateComponent;

package/lib/global/js/utils/getNumberOfHiddenSteps.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getNumberOfHiddenSteps = 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 getNumberOfHiddenSteps = function getNumberOfHiddenSteps(stepData, initialStep) {
+  var numberOfHiddenSteps = 0;
+  stepData.forEach(function (step, stepIndex) {
+    if (stepIndex + 1 > initialStep) {
+      return;
+    }
+
+    if (step.shouldIncludeStep === false) {
+      numberOfHiddenSteps += 1;
+    }
+  });
+  return numberOfHiddenSteps;
+};
+
+exports.getNumberOfHiddenSteps = getNumberOfHiddenSteps;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.0.0-rc.4",
+  "version": "2.0.0-rc.6",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -94,5 +94,5 @@
     "react": "^16.8.6 || ^17.0.1",
     "react-dom": "^16.8.6 || ^17.0.1"
   },
-  "gitHead": "77ce950cb5a0d555417788ed808509aa4e3c52c8"
+  "gitHead": "86f2f494ebd950387c6dbbe4b84a5bce0f9fc6ba"
 }

package/scss/components/Datagrid/styles/_useExpandedRow.scss

@@ -6,7 +6,7 @@
 * restricted by GSA ADP Schedule Contract with IBM Corp.
 */
 
-@use '../../../global/styles/project-settings';
+@use '../../../global/styles/project-settings' as c4p-settings;
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/spacing' as *;
 @use './variables';
@@ -40,3 +40,21 @@
   width: 100%;
   @include shared-pseudo-styles();
 }
+
+.#{variables.$block-class}__carbon-row.#{variables.$block-class}__carbon-row-expandable
+  .#{variables.$block-class}__cell.#{variables.$block-class}__expandable-row-cell {
+  padding: $spacing-03;
+  padding-right: 0;
+}
+
+.#{variables.$block-class}__row-expander.#{c4p-settings.$carbon-prefix}--btn {
+  display: flex;
+  width: $spacing-07;
+  height: $spacing-07;
+  min-height: $spacing-07;
+  justify-content: center;
+  padding: 0;
+  .#{variables.$block-class}__row-expander--icon {
+    fill: $layer-selected-inverse;
+  }
+}