@carbon/ibm-products 1.27.0 → 1.31.0

package/lib/components/Datagrid/utils/getInlineEditColumns.js

@@ -0,0 +1,133 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.inlineEditSelectItems = exports.getInlineEditColumns = void 0;
+
+var _iconsReact = require("@carbon/icons-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 inlineEditSelectItems = [{
+  id: 'option-0',
+  icon: _iconsReact.ChartColumnFloating16,
+  text: 'Column Chart'
+}, {
+  id: 'option-1',
+  icon: _iconsReact.ChartBubble16,
+  text: 'Bubble Chart'
+}, {
+  id: 'option-2',
+  icon: _iconsReact.ChartVennDiagram16,
+  text: 'Venn Diagram'
+}];
+exports.inlineEditSelectItems = inlineEditSelectItems;
+
+var getInlineEditColumns = function getInlineEditColumns() {
+  return [{
+    Header: 'Row Index',
+    accessor: function accessor(row, i) {
+      return i;
+    },
+    id: 'rowIndex' // id is required when accessor is a function.
+
+  }, {
+    Header: 'First Name',
+    accessor: 'firstName',
+    inlineEdit: {
+      type: 'text',
+      inputProps: {} // These props are passed to the Carbon component used for inline editing
+
+    }
+  }, {
+    Header: 'Last Name',
+    accessor: 'lastName',
+    inlineEdit: {
+      type: 'text',
+      inputProps: {} // These props are passed to the Carbon component used for inline editing
+
+    }
+  }, {
+    Header: 'Age',
+    accessor: 'age',
+    width: 120,
+    inlineEdit: {
+      type: 'number',
+      inputProps: {} // These props are passed to the Carbon component used for inline editing
+
+    }
+  }, {
+    Header: 'Visits',
+    accessor: 'visits',
+    width: 120,
+    inlineEdit: {
+      type: 'number',
+      inputProps: {} // These props are passed to the Carbon component used for inline editing
+
+    }
+  }, {
+    Header: 'Active since',
+    accessor: 'activeSince',
+    inlineEdit: {
+      type: 'date',
+      inputProps: {
+        // optionally pass props here to be passed through to Carbon's DatePicker component
+        onChange: function onChange(newDateObj, cell) {
+          console.log(newDateObj, cell);
+        },
+        labelText: 'Change active since date',
+        // optionally pass props here to be passed through to Carbon's DatePickerInput component
+        datePickerInputProps: {
+          labelText: 'Change active since date'
+        }
+      }
+    }
+  }, {
+    Header: 'Chart type',
+    accessor: 'chartType',
+    inlineEdit: {
+      type: 'selection',
+      inputProps: {
+        // These props are passed to the Carbon component used for inline editing
+        items: inlineEditSelectItems,
+        onChange: function onChange(item) {
+          return console.log(item);
+        }
+      }
+    }
+  }, {
+    Header: 'Someone 2',
+    accessor: 'someone2'
+  }, {
+    Header: 'Someone 3',
+    accessor: 'someone3'
+  }, {
+    Header: 'Someone 4',
+    accessor: 'someone4'
+  }, {
+    Header: 'Someone 5',
+    accessor: 'someone5'
+  }, {
+    Header: 'Someone 6',
+    accessor: 'someone6'
+  }, {
+    Header: 'Someone 7',
+    accessor: 'someone7'
+  }, {
+    Header: 'Someone 8',
+    accessor: 'someone8'
+  }, {
+    Header: 'Someone 9',
+    accessor: 'someone9'
+  }, {
+    Header: 'Someone 10',
+    accessor: 'someone10'
+  }];
+};
+
+exports.getInlineEditColumns = getInlineEditColumns;

package/lib/components/Datagrid/utils/makeData.js

@@ -13,10 +13,18 @@ var _react = _interopRequireDefault(require("react"));
 
 var _namor = _interopRequireDefault(require("namor"));
 
+var _getInlineEditColumns = require("./getInlineEditColumns");
+
 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 getRandomInteger = function getRandomInteger(min, max) {
+  min = Math.ceil(min);
+  max = Math.floor(max);
+  return Math.floor(Math.random() * (max - min + 1)) + min;
+};
+
 var makeData = function makeData() {
   for (var _len = arguments.length, lens = new Array(_len), _key = 0; _key < _len; _key++) {
     lens[_key] = arguments[_key];
@@ -51,6 +59,12 @@ exports.range = range;
 
 var newPerson = function newPerson() {
   var statusChance = Math.random();
+  var initialChartTypeIndex = getRandomInteger(0, 2);
+  var activeSinceDate = new Date();
+  var yesterdayDate = new Date();
+  yesterdayDate.setDate(yesterdayDate.getDate() - 1);
+  var twoDaysAgoDate = new Date();
+  twoDaysAgoDate.setDate(twoDaysAgoDate.getDate() - 2);
   return {
     firstName: _namor.default.generate({
       words: 1,
@@ -143,7 +157,9 @@ var newPerson = function newPerson() {
       words: 1,
       numbers: 0
     }),
-    status: statusChance > 0.66 ? 'relationship' : statusChance > 0.33 ? 'complicated' : 'single'
+    status: statusChance > 0.66 ? 'relationship' : statusChance > 0.33 ? 'complicated' : 'single',
+    chartType: initialChartTypeIndex === 0 ? _getInlineEditColumns.inlineEditSelectItems[0] : initialChartTypeIndex === 1 ? _getInlineEditColumns.inlineEditSelectItems[1] : _getInlineEditColumns.inlineEditSelectItems[2],
+    activeSince: statusChance > 0.66 ? activeSinceDate : statusChance > 0.33 ? yesterdayDate : twoDaysAgoDate
   };
 };
 

package/lib/components/ImportModal/ImportModal.js

@@ -99,9 +99,9 @@ var ImportModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     var acceptSet = new Set(accept);
     var name = file.name;
     var mimeType = file.type;
-    var extension = name.split('.').pop();
+    var extension = ".".concat(name.split('.').pop());
 
-    if (acceptSet.has(mimeType) || acceptSet.has(extension)) {
+    if (acceptSet.has(mimeType) || acceptSet.has(extension) || accept.length === 0) {
       return false;
     }
 

package/lib/components/InlineEdit/InlineEdit.js

@@ -80,7 +80,9 @@ var InlineEdit = /*#__PURE__*/_react.default.forwardRef(function (_ref, refIn) {
       size = _ref$size === void 0 ? defaults.size : _ref$size,
       value = _ref.value,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var refInput = (0, _react.useRef)(null);
+  var refInput = (0, _react.useRef)({
+    innerText: value
+  });
   var localRef = (0, _react.useRef)(null);
   var ref = refIn || localRef;
 
@@ -283,7 +285,7 @@ var InlineEdit = /*#__PURE__*/_react.default.forwardRef(function (_ref, refIn) {
       onPaste: handlePaste,
       suppressContentEditableWarning: true,
       ref: refInput,
-      "data-placeholder": placeholder !== null && placeholder !== void 0 ? placeholder : labelText
+      "data-placeholder": placeholder
     }), value), /*#__PURE__*/_react.default.createElement("div", {
       className: (0, _classnames.default)("".concat(blockClass, "__after-input-elements")) // tabindex -1 fixes blur target test when clicking on after-input-elements background
       ,

package/lib/components/ProductiveCard/ProductiveCard.js

@@ -130,6 +130,11 @@ ProductiveCard.propTypes = {
    */
   primaryButtonIcon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
 
+  /**
+   * Determines if the primary button is on the top or bottom of the card
+   */
+  primaryButtonPlacement: _propTypes.default.oneOf(['top', 'bottom']),
+
   /**
    * The text that's displayed in the primary button
    */

package/lib/components/index.js

@@ -333,6 +333,12 @@ Object.defineProperty(exports, "useActionsColumn", {
     return _Datagrid.useActionsColumn;
   }
 });
+Object.defineProperty(exports, "useColumnOrder", {
+  enumerable: true,
+  get: function get() {
+    return _Datagrid.useColumnOrder;
+  }
+});
 Object.defineProperty(exports, "useColumnRightAlign", {
   enumerable: true,
   get: function get() {
@@ -369,6 +375,12 @@ Object.defineProperty(exports, "useInfiniteScroll", {
     return _Datagrid.useInfiniteScroll;
   }
 });
+Object.defineProperty(exports, "useInlineEdit", {
+  enumerable: true,
+  get: function get() {
+    return _Datagrid.useInlineEdit;
+  }
+});
 Object.defineProperty(exports, "useNestedRows", {
   enumerable: true,
   get: function get() {

package/lib/global/js/hooks/useClickOutside.js

@@ -16,7 +16,7 @@ var _react = require("react");
 var useClickOutside = function useClickOutside(ref, callback) {
   var handleClick = function handleClick(event) {
     if (ref.current && !ref.current.contains(event.target)) {
-      callback();
+      callback(event.target);
     }
   };
 

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

@@ -57,6 +57,9 @@ var defaults = {
     TearsheetNarrow: true,
     UnauthorizedEmptyState: true,
     UserProfileImage: true,
+    WebTerminal: true,
+    WebTerminalContentWrapper: true,
+    WebTerminalProvider: true,
     // other public components not yet reviewed and released:
     MultiAddSelect: false,
     SingleAddSelect: false,
@@ -64,9 +67,6 @@ var defaults = {
     Toolbar: false,
     ToolbarButton: false,
     ToolbarGroup: false,
-    WebTerminal: false,
-    WebTerminalContentWrapper: false,
-    WebTerminalProvider: false,
     EditSidePanel: false,
     CancelableTextEdit: false,
     DataSpreadsheet: false,

package/lib/global/js/utils/rangeWithCallback.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.rangeWithCallback = 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.
+ */
+// Iterates through a numeric range and calls callback
+// function for each iteration
+var rangeWithCallback = function rangeWithCallback(start, end, fn) {
+  for (var i = start; i <= end; i++) {
+    fn(i);
+  }
+};
+
+exports.rangeWithCallback = rangeWithCallback;

package/lib/global/js/utils/uuidv4.spec.js

@@ -9,11 +9,15 @@ describe('uuidv4', function () {
     jest.resetAllMocks();
   });
   it('Uses Math.random when window is not defined', function () {
+    var _window = window,
+        crypto = _window.crypto;
+    delete window.crypto;
     var mockMath = Object.create(global.Math);
     var mockMathRandom = jest.fn().mockReturnValue(0.5);
     mockMath.random = mockMathRandom;
     global.Math = mockMath;
     expect((0, _uuidv.default)()).toEqual('98888888-9888-4888-a888-988888888888');
+    window.crypto = crypto;
   });
   it('Uses crypto from window when window is defined', function () {
     var mGetRandomValues = jest.fn().mockReturnValue(new Uint32Array(10));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "1.27.0",
+  "version": "1.31.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -51,22 +51,22 @@
   },
   "devDependencies": {
     "@babel/cli": "^7.18.10",
-    "@babel/core": "^7.18.10",
-    "babel-preset-ibm-cloud-cognitive": "^0.14.18",
+    "@babel/core": "^7.18.13",
+    "babel-preset-ibm-cloud-cognitive": "^0.14.19",
     "chalk": "^4.1.2",
     "change-case": "^4.1.2",
     "copyfiles": "^2.4.1",
     "cross-env": "^7.0.3",
     "fs-extra": "^10.1.0",
     "glob": "^8.0.3",
-    "jest": "^28.1.3",
-    "jest-config-ibm-cloud-cognitive": "^0.24.4",
-    "jest-environment-jsdom": "^28.1.3",
+    "jest": "^29.0.1",
+    "jest-config-ibm-cloud-cognitive": "^0.24.5",
+    "jest-environment-jsdom": "^29.0.1",
     "namor": "^1.1.2",
-    "npm-check-updates": "^16.0.5",
+    "npm-check-updates": "^16.0.6",
     "npm-run-all": "^4.1.5",
     "rimraf": "^3.0.2",
-    "sass": "^1.54.4",
+    "sass": "^1.54.8",
     "yargs": "^17.5.1"
   },
   "dependencies": {
@@ -85,13 +85,13 @@
     "@carbon/import-once": "^10.7.0",
     "@carbon/layout": "^10.37.1",
     "@carbon/motion": "^10.29.0",
-    "@carbon/themes": "^10.54.0",
-    "@carbon/type": "^10.44.0",
-    "carbon-components": "^10.57.2",
-    "carbon-components-react": "^7.57.4",
+    "@carbon/themes": "^10.55.0",
+    "@carbon/type": "^10.45.0",
+    "carbon-components": "^10.58.0",
+    "carbon-components-react": "^7.59.0",
     "carbon-icons": "^7.0.7",
     "react": "^16.8.6 || ^17.0.1",
     "react-dom": "^16.8.6 || ^17.0.1"
   },
-  "gitHead": "83988f0190d38209fe2fe64539e9aab021a46f8d"
+  "gitHead": "4694f431eeac26bb0787857b39aaa347edddc212"
 }

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

@@ -26,7 +26,6 @@
 
   .#{$block-class}__selections {
     &.#{$carbon-prefix}--structured-list {
-      border-top: 1px solid $ui-03;
       margin-bottom: 0;
     }
 
@@ -36,8 +35,11 @@
 
     &-cell-wrapper {
       display: flex;
+      height: 3rem;
       align-items: center;
       justify-content: space-between;
+      padding: 0 $spacing-05;
+      border-bottom: 1px solid $ui-03;
     }
 
     &-cell-title {
@@ -52,6 +54,12 @@
       color: $text-02;
     }
 
+    &-cell {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+    }
+
     &-cell:hover .#{$block-class}__selections-hidden-hover {
       visibility: visible;
     }
@@ -60,12 +68,9 @@
       visibility: hidden;
     }
 
-    &-row-selected {
-      background: #e5e5e5;
-    }
-
-    &-row-selected .#{$block-class}__selections-hidden-hover {
-      visibility: visible;
+    &-row-selected#{$carbon-prefix}--structured-list-row {
+      border-bottom: 1px solid $selected-ui;
+      background-color: $selected-ui;
     }
 
     &-checkbox {
@@ -75,7 +80,7 @@
 
     &-checkbox-label-wrapper {
       display: flex;
-      margin-left: $spacing-03;
+      margin-left: $spacing-05;
     }
 
     &-checkbox-label-text {
@@ -98,6 +103,15 @@
     &-cell-icon {
       margin-right: $spacing-03;
     }
+
+    &-row {
+      border-left: 0.125rem solid transparent;
+    }
+
+    &-row-meta-selected {
+      border-left: 0.125rem solid $interactive-04;
+      background-color: $hover-row;
+    }
   }
 
   .#{$block-class} .#{$block-class}__selections-row:hover {
@@ -116,17 +130,38 @@
     }
   }
 
+  .#{$block-class}
+    #{$carbon-prefix}--structured-list--selection
+    .#{$block-class}__selections-row-selected#{$carbon-prefix}--structured-list-row:hover:not(#{$carbon-prefix}--structured-list-row--header-row):not(#{$carbon-prefix}--structured-list-row--selected) {
+    border-bottom: 1px solid $hover-selected-ui;
+    background-color: $hover-selected-ui;
+  }
+
   .#{$block-class}__sub-header {
     display: flex;
     align-items: flex-end;
     justify-content: space-between;
+
+    &-multi {
+      padding: 0 $spacing-05;
+    }
+  }
+
+  .#{$block-class} #{$carbon-prefix}--structured-list-row {
+    border-bottom: 0;
+  }
+
+  .#{$block-class}
+    #{$carbon-prefix}--structured-list--selection
+    #{$carbon-prefix}--structured-list-row:hover:not(#{$carbon-prefix}--structured-list-row--header-row):not(#{$carbon-prefix}--structured-list-row--selected) {
+    border-bottom: 0;
   }
 
   // sidebar
 
   .#{$block-class}__sidebar-header {
     display: flex;
-    padding: $spacing-06 $spacing-05 $spacing-03 $spacing-05;
+    padding: $spacing-07 $spacing-05 $spacing-03 $spacing-05;
     border-bottom: 1px solid $ui-03;
 
     .#{$block-class}__sidebar-title {
@@ -151,7 +186,7 @@
   }
 
   .#{$block-class}__sidebar-body {
-    padding: $spacing-05;
+    padding: 0 $spacing-05;
   }
 
   .#{$block-class} .#{$block-class}__sidebar-item-header {
@@ -182,22 +217,52 @@
   .#{$block-class}__columns {
     display: flex;
     flex-direction: row;
+    flex-grow: 1;
     overflow-x: auto;
+
+    .#{$block-class}__selections-checkbox-label-wrapper {
+      margin-left: $spacing-03;
+    }
+
+    .#{$block-class}__selections-row#{$carbon-prefix}--structured-list-row {
+      border-left: 0;
+    }
+
+    .#{$block-class}__selections .#{$block-class}__selections-cell {
+      padding: 0;
+    }
+
+    .#{$block-class}__selections-cell-wrapper {
+      height: auto;
+      padding: 0 $spacing-03;
+    }
+
+    .#{$block-class}__tag-container {
+      padding: 0 $spacing-03;
+      margin-bottom: 0;
+    }
+
+    .#{$block-class}__selections-wrapper-multi {
+      padding: 0;
+    }
+
+    .#{$block-class}__selections#{$carbon-prefix}--structured-list {
+      border-top: 0;
+    }
   }
 
-  // table override
-  .#{$block-class}
-    .#{$block-class}__columns
-    .#{$carbon-prefix}--structured-list-td {
-    height: 0;
-    // stylelint-disable-next-line
-    padding: 0 !important;
+  .#{$block-class}__selections-wrapper-multi .#{$block-class}__selections-cell {
+    padding: 0 $spacing-05;
+  }
+
+  .#{$block-class}__selections-row:first-child
+    .#{$block-class}__selections-cell-wrapper {
+    border-top: 1px solid $ui-03;
   }
 
   .#{$block-class}__column {
     overflow: auto;
-    max-width: 15rem;
-    flex: 1 0 15rem;
+    flex: 0 0 20rem;
     padding: $spacing-05;
     border-top: 1px solid $ui-03;
     border-right: 1px solid $ui-03;
@@ -316,8 +381,7 @@
 
   // the influencer sidebar needs to be even with the buttons
   .#{$block-class} .#{$tearsheet-class}__influencer {
-    max-width: 29rem;
-    flex: 0 0 50%;
+    flex-basis: 22.5rem;
   }
 
   .#{$block-class} .#{$tearsheet-class}__header-description {
@@ -329,6 +393,12 @@
     flex-direction: column;
   }
 
+  .#{$block-class}.#{$block-class}__multi
+    .#{$pkg-prefix}--action-set.#{$carbon-prefix}--btn-set.#{$pkg-prefix}--action-set--max
+    .#{$pkg-prefix}--action-set__action-button {
+    max-width: 11.25rem;
+  }
+
   .#{$block-class} .#{$block-class}__items-label {
     @include carbon--type-style('productive-heading-01');
   }
@@ -340,13 +410,6 @@
     padding-right: 0;
   }
 
-  .#{$block-class} .#{$carbon-prefix}--structured-list-td {
-    height: $layout-04;
-    padding-top: 0;
-    padding-bottom: 0;
-    vertical-align: middle;
-  }
-
   .#{$block-class} .#{$carbon-prefix}--radio-button__appearance {
     margin: 0 $spacing-05 0 0;
   }
@@ -374,6 +437,41 @@
   .#{$block-class} .#{$carbon-prefix}--checkbox-label-text {
     padding-left: $spacing-03;
   }
+
+  .#{$block-class}__multi .#{$pkg-prefix}--empty-state {
+    max-width: 16rem;
+    margin-top: $layout-04;
+  }
+
+  .#{$block-class} .#{$carbon-prefix}--accordion__arrow {
+    transform: rotate(0deg);
+  }
+
+  .#{$block-class}
+    .#{$carbon-prefix}--accordion__item--active
+    .#{$carbon-prefix}--accordion__arrow {
+    transform: rotate(90deg);
+  }
+
+  .#{$block-class}
+    #{$carbon-prefix}--accordion--start
+    #{$carbon-prefix}--accordion__arrow {
+    margin: 0 0 0 $spacing-05;
+  }
+
+  .#{$block-class}
+    #{$carbon-prefix}--accordion--start
+    #{$carbon-prefix}--accordion__title {
+    margin: 0 $spacing-05 0 $spacing-03;
+  }
+
+  .#{$block-class}
+    #{$carbon-prefix}--accordion__item--active
+    #{$carbon-prefix}--accordion__content {
+    padding-top: 0;
+    padding-bottom: 0;
+    margin-top: $spacing-03;
+  }
 }
 
 @include exports('add-select') {

package/scss/components/Card/_card.scss

@@ -23,6 +23,7 @@
 
   .#{$block-class}__clickable {
     cursor: pointer;
+    // stylelint-disable-next-line carbon/motion-easing-use
     transition: background $duration--fast-02;
   }
 

package/scss/components/Cascade/_cascade.scss

@@ -30,7 +30,7 @@
   .#{$block-class}__element,
   .#{$block-class}__col {
     @media (prefers-reduced-motion: no-preference) {
-      // stylelint-disable-next-line carbon/motion-duration-use
+      // stylelint-disable-next-line carbon/motion-duration-use, carbon/motion-easing-use
       animation: $animationProps fade; // stylelint note animation duration declared in $animationProps
       animation-fill-mode: forwards;
       opacity: 0;

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

@@ -51,6 +51,7 @@
   }
 
   .#{$block-class} .#{$step-block-class}__step--visible-step {
+    // stylelint-disable-next-line carbon/motion-easing-use
     animation: step-content-entrance $duration--slow-01;
     animation-fill-mode: forwards;
     animation-timing-function: $carbon--standard-easing;