@carbon/ibm-products 2.12.1 → 2.13.0

package/lib/global/js/utils/test-helper.js

@@ -8,7 +8,6 @@ exports.scssCompile = exports.scssCheck = exports.required = exports.mockHTMLEle
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-var _ref, _ref2, _ref4, _ref5;
 //
 // Copyright IBM Corp. 2021, 2021
 //
@@ -32,7 +31,7 @@ var loadPath2 = r('../../../../../../node_modules');
  * containing details of the compilation failure.
  * @param {string} file fully qualified file name of the SCSS file to check.
  */
-var scssCheck = function scssCheck(file) {
+var scssCheck = exports.scssCheck = function scssCheck(file) {
   // We use the sass cli because this is currently much faster than using
   // the API owing to the overhead of @import resolution through the API.
   // When the sass API is revised it may be feasible to switch back to
@@ -48,8 +47,7 @@ var scssCheck = function scssCheck(file) {
  * of the compilation failure.
  * @param {string} file fully qualified file name of the SCSS file to compile.
  */
-exports.scssCheck = scssCheck;
-var scssCompile = function scssCompile(file) {
+var scssCompile = exports.scssCompile = function scssCompile(file) {
   var compressed = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
   return (
     // We use the sass cli because this is currently much faster than using
@@ -77,9 +75,8 @@ var scssCompile = function scssCompile(file) {
  * This function should be called after tests in order not to pollute other
  * tests with the installed mocks.
  */
-exports.scssCompile = scssCompile;
 var hep = HTMLElement.prototype;
-var mockHTMLElement = function mockHTMLElement(options) {
+var mockHTMLElement = exports.mockHTMLElement = function mockHTMLElement(options) {
   var originals = {};
   for (var option in options) {
     originals[option] = Object.getOwnPropertyDescriptor(hep, option);
@@ -104,7 +101,6 @@ var mockHTMLElement = function mockHTMLElement(options) {
 
 // a utility function used by expectWarn/Error to convert an argument
 // match element to an expect matcher
-exports.mockHTMLElement = mockHTMLElement;
 var makeMatcher = function makeMatcher(arg) {
   return typeof arg === 'string' ? expect.stringContaining(arg) : arg instanceof RegExp ? expect.stringMatching(arg) : arg;
 };
@@ -130,7 +126,7 @@ var makeMatcherArray = function makeMatcherArray(args) {
  * @param {Function} test the test function to call, during which the call to
  * console.warn will be expected.
  */
-var expectWarn = function expectWarn(message, test) {
+var expectWarn = exports.expectWarn = function expectWarn(message, test) {
   var warn = jest.spyOn(console, 'warn').mockImplementation(jest.fn());
   var result = test();
   expect(warn).toBeCalledTimes(1);
@@ -143,9 +139,8 @@ var expectWarn = function expectWarn(message, test) {
  * An async version of expectWarn which awaits the test function and expects the call
  * to console.warn to have been made.
  */
-exports.expectWarn = expectWarn;
-var expectWarnAsync = function expectWarnAsync(_x, _x2) {
-  return (_ref = _ref || (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(message, test) {
+var expectWarnAsync = exports.expectWarnAsync = /*#__PURE__*/function () {
+  var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(message, test) {
     var _expect;
     var warn;
     return _regenerator.default.wrap(function _callee$(_context) {
@@ -163,8 +158,11 @@ var expectWarnAsync = function expectWarnAsync(_x, _x2) {
           return _context.stop();
       }
     }, _callee);
-  }))).apply(this, arguments);
-};
+  }));
+  return function expectWarnAsync(_x, _x2) {
+    return _ref.apply(this, arguments);
+  };
+}();
 
 /**
  * A helper function to enable a test to expect multiple calls to
@@ -180,9 +178,8 @@ var expectWarnAsync = function expectWarnAsync(_x, _x2) {
  * @param {Function} test the test function to call, during which the calls to
  * console.warn will be expected.
  */
-exports.expectWarnAsync = expectWarnAsync;
-var expectMultipleWarn = function expectMultipleWarn(_x3, _x4) {
-  return (_ref2 = _ref2 || (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(messages, test) {
+var expectMultipleWarn = exports.expectMultipleWarn = /*#__PURE__*/function () {
+  var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(messages, test) {
     var warn, result;
     return _regenerator.default.wrap(function _callee2$(_context2) {
       while (1) switch (_context2.prev = _context2.next) {
@@ -204,10 +201,12 @@ var expectMultipleWarn = function expectMultipleWarn(_x3, _x4) {
           return _context2.stop();
       }
     }, _callee2);
-  }))).apply(this, arguments);
-};
-exports.expectMultipleWarn = expectMultipleWarn;
-var checkLogging = function checkLogging(mockedThing, message) {
+  }));
+  return function expectMultipleWarn(_x3, _x4) {
+    return _ref2.apply(this, arguments);
+  };
+}();
+var checkLogging = exports.checkLogging = function checkLogging(mockedThing, message) {
   if (message) {
     expect(mockedThing).toBeCalled();
     // TODO: React 18 update - console messages appear to be failing with calls that look like printf props
@@ -228,9 +227,8 @@ var checkLogging = function checkLogging(mockedThing, message) {
  * @param {Function} test the test function to call, during which the call to
  * console.error will be expected.
  */
-exports.checkLogging = checkLogging;
-var expectLogging = function expectLogging(_x5, _x6) {
-  return (_ref4 = _ref4 || (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3(_ref3, test) {
+var expectLogging = exports.expectLogging = /*#__PURE__*/function () {
+  var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3(_ref3, test) {
     var errors, warnings, error, warn, result;
     return _regenerator.default.wrap(function _callee3$(_context3) {
       while (1) switch (_context3.prev = _context3.next) {
@@ -252,8 +250,11 @@ var expectLogging = function expectLogging(_x5, _x6) {
           return _context3.stop();
       }
     }, _callee3);
-  }))).apply(this, arguments);
-};
+  }));
+  return function expectLogging(_x5, _x6) {
+    return _ref4.apply(this, arguments);
+  };
+}();
 
 /**
  * A helper function to enable a test to expect a single call to
@@ -268,8 +269,7 @@ var expectLogging = function expectLogging(_x5, _x6) {
  * @param {Function} test the test function to call, during which the call to
  * console.error will be expected.
  */
-exports.expectLogging = expectLogging;
-var expectError = function expectError(message, test) {
+var expectError = exports.expectError = function expectError(message, test) {
   var error = jest.spyOn(console, 'error').mockImplementation(jest.fn());
   var result = test();
   checkLogging(error, message);
@@ -291,9 +291,8 @@ var expectError = function expectError(message, test) {
  * @param {Function} test the test function to call, during which the calls to
  * console.error will be expected.
  */
-exports.expectError = expectError;
-var expectMultipleError = function expectMultipleError(_x7, _x8) {
-  return (_ref5 = _ref5 || (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee4(messages, test) {
+var expectMultipleError = exports.expectMultipleError = /*#__PURE__*/function () {
+  var _ref5 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee4(messages, test) {
     var error, result;
     return _regenerator.default.wrap(function _callee4$(_context4) {
       while (1) switch (_context4.prev = _context4.next) {
@@ -320,8 +319,11 @@ var expectMultipleError = function expectMultipleError(_x7, _x8) {
           return _context4.stop();
       }
     }, _callee4);
-  }))).apply(this, arguments);
-};
+  }));
+  return function expectMultipleError(_x7, _x8) {
+    return _ref5.apply(this, arguments);
+  };
+}();
 
 /**
  * Return an expect matcher for a prop deprecation, suitable to pass to expectWarn
@@ -329,8 +331,7 @@ var expectMultipleError = function expectMultipleError(_x7, _x8) {
  * @param {string} propName the prop name that is deprecated, or a matching regex
  * @param {string} componentName the component name on which the prop is defined, or a matching regex
  */
-exports.expectMultipleError = expectMultipleError;
-var deprecated = function deprecated(propName, componentName) {
+var deprecated = exports.deprecated = function deprecated(propName, componentName) {
   var additionalInfo = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
   return expect.stringMatching(new RegExp("^The prop `".concat(propName, "` of `").concat(componentName, "` has been deprecated and will soon be removed. ").concat(additionalInfo)));
 };
@@ -341,8 +342,7 @@ var deprecated = function deprecated(propName, componentName) {
  * @param {string} propName the prop name whose usage has changed
  * @param {string} componentName the component name on which the prop is defined
  */
-exports.deprecated = deprecated;
-var deprecatedUsage = function deprecatedUsage(propName, componentName) {
+var deprecatedUsage = exports.deprecatedUsage = function deprecatedUsage(propName, componentName) {
   var additionalInfo = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
   return expect.stringMatching(new RegExp("^The usage of the prop `".concat(propName, "` of `").concat(componentName, "` has been changed and support for the old usage will soon be removed. ").concat(additionalInfo)));
 };
@@ -353,8 +353,7 @@ var deprecatedUsage = function deprecatedUsage(propName, componentName) {
  * @param {string} propName the prop name that is required, or a matching regex
  * @param {string} componentName the component name on which the prop is defined, or a matching regex
  */
-exports.deprecatedUsage = deprecatedUsage;
-var required = function required(propName, componentName) {
+var required = exports.required = function required(propName, componentName) {
   return expect.stringMatching(new RegExp("^Warning: Failed prop type: The prop `".concat(propName, "` is marked as required in `").concat(componentName, "`, but its value is `(.*)`.")));
 };
 
@@ -366,8 +365,6 @@ var required = function required(propName, componentName) {
  * @param {string} suppliedType the type that is being supplied, or a matching regex
  * @param {string} expectedType the type that is expected, or a matching regex
  */
-exports.required = required;
-var invalid = function invalid(propName, componentName, suppliedType, expectedType) {
+var invalid = exports.invalid = function invalid(propName, componentName, suppliedType, expectedType) {
   return expect.stringMatching(new RegExp("^Warning: Failed prop type: Invalid prop `".concat(propName, "` of type `").concat(suppliedType, "` supplied to `").concat(componentName, "`, expected `").concat(expectedType, "`.")));
-};
-exports.invalid = invalid;
+};

package/lib/global/js/utils/unwrap-if-fragment.js

@@ -66,5 +66,4 @@ var unwrapIfFragment = function unwrapIfFragment(children) {
   });
   return keyedChildren;
 };
-var _default = unwrapIfFragment;
-exports.default = _default;
+var _default = exports.default = unwrapIfFragment;

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

@@ -14,5 +14,4 @@ function uuidv4() {
     return (c ^ randomValues(c)).toString(16);
   });
 }
-var _default = uuidv4;
-exports.default = _default;
+var _default = exports.default = uuidv4;

package/lib/global/js/utils/wait.js

@@ -11,5 +11,4 @@ function wait(ms) {
     return setTimeout(resolve, ms);
   });
 }
-var _default = wait;
-exports.default = _default;
+var _default = exports.default = wait;

package/lib/global/js/utils/wrapFocus.js

@@ -70,5 +70,4 @@ function wrapFocus(_ref) {
     }
   }
 }
-var _default = wrapFocus;
-exports.default = _default;
+var _default = exports.default = wrapFocus;

package/lib/settings.js

@@ -10,13 +10,12 @@ var _packageSettings = _interopRequireDefault(require("./global/js/package-setti
 var _react = _interopRequireDefault(require("react"));
 var _themes = require("@carbon/themes");
 var _pconsole = _interopRequireDefault(require("./global/js/utils/pconsole"));
-var carbon = {
+var carbon = exports.carbon = {
   get themes() {
     return _themes.themes;
   },
   prefix: 'cds'
 };
-exports.carbon = carbon;
 var componentDeprecatedWarning = function componentDeprecatedWarning(name, details) {
   return "Carbon for IBM Products (WARNING): Component \"".concat(name, "\" is deprecated. ").concat(details);
 };
@@ -90,5 +89,4 @@ _packageSettings.default.checkComponentEnabled = function (component, name) {
     });
   }
 };
-var pkg = _packageSettings.default;
-exports.pkg = pkg;
+var pkg = exports.pkg = _packageSettings.default;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.12.1",
+  "version": "2.13.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -87,14 +87,14 @@
     "react-window": "^1.8.9"
   },
   "peerDependencies": {
-    "@carbon/grid": "^11.19.0",
+    "@carbon/grid": "^11.20.0",
     "@carbon/layout": "^11.19.0",
     "@carbon/motion": "^11.15.0",
-    "@carbon/react": "^1.37.0",
-    "@carbon/themes": "^11.24.0",
-    "@carbon/type": "^11.23.0",
+    "@carbon/react": "^1.40.0",
+    "@carbon/themes": "^11.25.0",
+    "@carbon/type": "^11.24.0",
     "react": "^16.8.6 || ^17.0.1 || ^18.2.0",
     "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
   },
-  "gitHead": "c27ea01ddb03bae10002fd7fc853159cacc14204"
+  "gitHead": "0f226a6af5fd9c21aa5d39f26266f561895385b9"
 }

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

@@ -39,12 +39,11 @@ $block-class: #{c4p-settings.$pkg-prefix}--about-modal;
 .#{$block-class} .#{$block-class}__body {
   @include type.type-style('body-compact-02');
 
+  overflow: hidden auto;
   min-height: $spacing-10;
   padding: 0 20% 0 $spacing-05;
   margin-bottom: $spacing-06;
   grid-row: auto;
-  overflow-x: hidden;
-  overflow-y: auto;
 }
 
 .#{$block-class}

package/scss/components/Checklist/_checklist.scss

@@ -0,0 +1,217 @@
+//
+// Copyright IBM Corp. 2023, 2023
+//
+// 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.
+@use '@carbon/layout/scss/convert' as *;
+
+@use '@carbon/styles/scss/motion' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '../../global/styles/project-settings' as c4p-settings;
+
+@mixin ellipsis-2-lines {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  text-overflow: ellipsis;
+}
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+$block-class: #{c4p-settings.$pkg-prefix}--checklist;
+
+// .#{$block-class} {
+.#{$block-class}__header {
+  display: flex;
+  padding: $spacing-05;
+  background-color: $layer-01;
+  gap: $spacing-03;
+}
+
+.#{$block-class}__chart {
+  // outer donut
+  position: relative;
+  width: $spacing-08;
+  min-width: $spacing-08;
+  height: $spacing-08;
+  align-self: center;
+}
+
+.#{$block-class}__chart::after {
+  // inner donut
+  position: absolute;
+  top: $spacing-02;
+  left: $spacing-02;
+  width: $spacing-07;
+  height: $spacing-07;
+  border-radius: 50%;
+  background-color: $layer-01;
+  content: '';
+}
+
+// Align __title and __chart-label vertically centered in the header.
+.#{$block-class}__titles {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.#{$block-class}__title {
+  @include type-style('productive-heading-02');
+  @include ellipsis-2-lines();
+}
+
+.#{$block-class}__chart-label {
+  @include type-style('label-01');
+  @include ellipsis-2-lines();
+
+  color: $text-secondary;
+}
+
+.#{$block-class}__title + .#{$block-class}__chart-label {
+  margin-top: $spacing-01;
+}
+
+// TOGGLE
+// The <iconbutton> itself (class="...__toggle") is embedded inside two more tags,
+// which do not accept any classnames passed via the <iconbutton>.
+// So, we have to refer to it via it's "tooltip" wrapper element. :/
+.#{$block-class}__header .#{c4p-settings.$carbon-prefix}--tooltip {
+  height: 2rem;
+  margin-top: calc(-1 * $spacing-03);
+  margin-right: calc(-1 * $spacing-03);
+  margin-left: auto;
+}
+
+.#{$block-class}__chevron {
+  color: $text-primary;
+  transform: rotate(0deg);
+  transition: all $duration-fast-02 motion(standard, productive);
+
+  /* stylelint-disable-next-line max-nesting-depth */
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+}
+
+.#{$block-class}__closed .#{$block-class}__chevron {
+  transform: rotate(-180deg);
+}
+
+// Button to appear more like a link so it aligns better with the list text.
+// Override Primary button styling to appear more like a link.
+// "Unset" some settings to allow an inner div to enable multiple lines and an ellipsis if req'd.
+.#{$block-class}__button.#{c4p-settings.$carbon-prefix}--btn--primary {
+  max-width: none;
+  min-height: auto;
+  // override bx--btn to allow two-line ellipsis
+  /* stylelint-disable-next-line declaration-property-value-disallowed-list */
+  flex-shrink: unset;
+  padding: 0;
+  border: none;
+  background-color: transparent;
+  color: $link-primary;
+}
+// The CSS for the Carbon button's label
+// is incompatible with two-line ellipsis,
+// but a div inside a Carbon button works.
+.#{$block-class}__button.#{c4p-settings.$carbon-prefix}--btn--primary div {
+  @include ellipsis-2-lines();
+}
+
+.#{$block-class}__button.#{c4p-settings.$carbon-prefix}--btn--primary:hover {
+  background: transparent;
+  color: $link-primary-hover;
+  text-decoration: underline;
+}
+
+.#{$block-class}__button.#{c4p-settings.$carbon-prefix}--btn--primary:active {
+  background: transparent;
+  color: $text-primary;
+  text-decoration: underline;
+}
+
+.#{$block-class}__button--error {
+  /* stylelint-disable-next-line declaration-no-important */
+  color: $text-error !important;
+}
+
+// container for animated content
+.#{$block-class}__content-outer {
+  overflow: hidden;
+}
+
+.#{$block-class}__content-inner {
+  height: 100%;
+  background-color: $layer-01;
+  transform: translate(0, 0);
+  transition: all $duration-fast-02 motion(standard, productive);
+
+  /* stylelint-disable-next-line max-nesting-depth */
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+}
+
+.#{$block-class}__closed .#{$block-class}__content-inner {
+  height: 0;
+  transform: translate(0, -100%);
+}
+
+.#{$block-class}__list-group {
+  padding: $spacing-05;
+  border-top: 1px solid $border-subtle-01;
+}
+
+.#{$block-class}__list-title {
+  @include type-style('body-short-01');
+  @include ellipsis-2-lines();
+
+  margin-bottom: $spacing-03;
+}
+
+.#{$block-class}__list-item {
+  display: flex;
+  margin-bottom: $spacing-03;
+}
+
+.#{$block-class}__list-item:last-child {
+  margin-bottom: 0;
+}
+
+.#{$block-class}__icon {
+  /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
+  margin: to-rem(1px) $spacing-03 0 0;
+  color: $link-primary;
+}
+
+.#{$block-class}__icon--error {
+  color: $support-error;
+}
+
+.#{$block-class}__icon--disabled {
+  color: $icon-disabled;
+}
+
+.#{$block-class}__label {
+  @include type-style('body-short-01');
+  @include ellipsis-2-lines();
+}
+
+.#{$block-class}__label--checked,
+.#{$block-class}__label--disabled,
+.#{$block-class}__label--error {
+  color: $text-disabled;
+}
+
+.#{$block-class}__footer {
+  @include ellipsis-2-lines();
+
+  padding: $spacing-03 $spacing-05;
+  border-top: 1px solid $border-subtle;
+}

package/scss/components/Checklist/_index.scss

@@ -0,0 +1,8 @@
+//
+// Copyright IBM Corp. 2023, 2023
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@use './checklist';

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

@@ -0,0 +1,13 @@
+//
+// Copyright IBM Corp. 2023, 2023
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@use '@carbon/styles/scss/spacing' as *;
+
+.checklist-stories__viewport {
+  min-width: calc(2 * $spacing-13); // 320px
+  max-width: calc(2 * $spacing-13);
+}

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

@@ -58,7 +58,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--create-full-page;
 .#{$story-class}__error--text {
   @include type.type-style('label-01');
 
-  padding-bottom: $spacing-05;
+  margin-bottom: $spacing-05;
 }
 
 .#{$block-class}

package/scss/components/Datagrid/_datagrid.scss

@@ -24,6 +24,7 @@
 // Datagrid uses the following Carbon for IBM Products components:
 // TODO: @use(s) of IBM Products component styles used by Datagrid
 @use '../ButtonMenu';
+@use '../FilterSummary';
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 $block-class: #{c4p-settings.$pkg-prefix}--datagrid;

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

@@ -360,8 +360,7 @@
 .#{$block-class}__simple-body {
   position: relative;
   display: table;
-  overflow-x: hidden;
-  overflow-y: auto;
+  overflow: hidden auto;
   //makes thin scrollbar in chrome and firefox
   scrollbar-width: thin;
 }

package/scss/components/Datagrid/styles/addons/_RowSizeDropdown.scss

@@ -43,3 +43,8 @@
   height: $spacing-09;
   justify-content: center;
 }
+
+.#{variables.$block-class}
+  .#{variables.$block-class}__row-size__row-settings-trigger--open.#{c4p-settings.$carbon-prefix}--btn--ghost {
+  background-color: $layer-02;
+}

package/scss/components/_index.scss

@@ -23,7 +23,7 @@
 @use './EmptyStates';
 @use './ExportModal';
 @use './ExpressiveCard';
-@use './FilterSummary/index';
+@use './FilterSummary';
 @use './HTTPErrors';
 @use './ImportModal';
 @use './MultiAddSelect';
@@ -50,3 +50,4 @@
 @use './EditTearsheetNarrow';
 @use './EditFullPage';
 @use './EditUpdateCards';
+@use './Checklist';