@carbon/ibm-products 1.41.0 → 1.41.2

package/lib/components/APIKeyModal/APIKeyModal.js

@@ -163,54 +163,52 @@ var APIKeyModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var submitHandler = /*#__PURE__*/function () {
     var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(e) {
       return _regenerator.default.wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              e.preventDefault();
-              if (!hasNextStep) {
-                _context.next = 5;
-                break;
-              }
-              setCurrentStep(currentStep + 1);
-              _context.next = 22;
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            e.preventDefault();
+            if (!hasNextStep) {
+              _context.next = 5;
               break;
-            case 5:
-              if (!apiKeyLoaded) {
-                _context.next = 21;
-                break;
-              }
-              if (!onCopy) {
-                _context.next = 10;
-                break;
-              }
-              onCopy(apiKey);
-              _context.next = 19;
+            }
+            setCurrentStep(currentStep + 1);
+            _context.next = 22;
+            break;
+          case 5:
+            if (!apiKeyLoaded) {
+              _context.next = 21;
               break;
-            case 10:
-              _context.prev = 10;
-              _context.next = 13;
-              return navigator.clipboard.writeText(apiKey);
-            case 13:
-              _context.next = 19;
+            }
+            if (!onCopy) {
+              _context.next = 10;
               break;
-            case 15:
-              _context.prev = 15;
-              _context.t0 = _context["catch"](10);
-              console.error(_context.t0);
-              setCopyError(true);
-            case 19:
-              _context.next = 22;
-              break;
-            case 21:
-              if (editing) {
-                onRequestEdit(name);
-              } else {
-                onRequestGenerate(name);
-              }
-            case 22:
-            case "end":
-              return _context.stop();
-          }
+            }
+            onCopy(apiKey);
+            _context.next = 19;
+            break;
+          case 10:
+            _context.prev = 10;
+            _context.next = 13;
+            return navigator.clipboard.writeText(apiKey);
+          case 13:
+            _context.next = 19;
+            break;
+          case 15:
+            _context.prev = 15;
+            _context.t0 = _context["catch"](10);
+            console.error(_context.t0);
+            setCopyError(true);
+          case 19:
+            _context.next = 22;
+            break;
+          case 21:
+            if (editing) {
+              onRequestEdit(name);
+            } else {
+              onRequestGenerate(name);
+            }
+          case 22:
+          case "end":
+            return _context.stop();
         }
       }, _callee, null, [[10, 15]]);
     }));

package/lib/components/AddSelect/AddSelectBody.js

@@ -155,7 +155,7 @@ var AddSelectBody = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     onCloseHandler();
   };
   var setShowBreadsCrumbs = function setShowBreadsCrumbs() {
-    if (searchTerm || globalFiltersApplied || !path || path.length === 0) {
+    if (useNormalizedItems === false || searchTerm || globalFiltersApplied) {
       return false;
     }
     return true;

package/lib/components/AddSelect/hooks/usePath.js

@@ -20,6 +20,12 @@ var usePath = function usePath() {
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     path = _useState2[0],
     setPath = _useState2[1];
+  (0, _react.useEffect)(function () {
+    setPath([{
+      id: 'base_of_path',
+      title: itemsLabel
+    }]);
+  }, [itemsLabel]);
   var handler = function handler(id, title, parentId) {
     if (path.find(function (entry) {
       return entry.id === id;

package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js

@@ -26,7 +26,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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 _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(_settings.pkg.prefix, "--breadcrumb-with-overflow");
 var componentName = 'BreadcrumbWithOverflow';

package/lib/components/ButtonMenu/ButtonMenu.js

@@ -21,7 +21,7 @@ var componentName = 'ButtonMenu';
 
 // Default values for props
 var defaults = {
-  size: 'default',
+  size: 'lg',
   kind: 'primary'
 };
 
@@ -44,6 +44,7 @@ var ButtonMenu = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? defaults.size : _ref$size,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var buttonSize = size === 'lg' ? 'default' : size;
   return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.OverflowMenu, (0, _extends2.default)({}, rest, {
     className: (0, _classnames.default)(blockClass,
     // Apply the block class to the main HTML element
@@ -51,9 +52,10 @@ var ButtonMenu = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     ),
 
     menuOptionsClass: (0, _classnames.default)("".concat(blockClass, "__options"), menuOptionsClass),
+    size: size,
     renderIcon: function renderIcon() {
       return /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _classnames.default)(["".concat(blockClass, "__trigger"), "".concat(_settings.carbon.prefix, "--btn"), "".concat(_settings.carbon.prefix, "--btn--").concat(kind), "".concat(_settings.carbon.prefix, "--btn--").concat(size)])
+        className: (0, _classnames.default)(["".concat(blockClass, "__trigger"), "".concat(_settings.carbon.prefix, "--btn"), "".concat(_settings.carbon.prefix, "--btn--").concat(kind), "".concat(_settings.carbon.prefix, "--btn--").concat(buttonSize)])
       }, label, Icon && /*#__PURE__*/_react.default.createElement(Icon, {
         "aria-hidden": "true",
         "aria-label": iconDescription,

package/lib/components/ButtonSetWithOverflow/ButtonSetWithOverflow.js

@@ -28,7 +28,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 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; }
 function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 var blockClass = "".concat(_settings.pkg.prefix, "--button-set-with-overflow");
 var componentName = 'ButtonSetWithOverflow';
 var buttonSize = 'md';

package/lib/components/CreateFullPage/CreateFullPage.js

@@ -19,7 +19,7 @@ var _CreateInfluencer = require("../CreateInfluencer");
 var _ActionSet = require("../ActionSet");
 var _hooks = require("../../global/js/hooks");
 var _lastIndexInArray = require("../../global/js/utils/lastIndexInArray");
-var _excluded = ["backButtonText", "cancelButtonText", "children", "className", "modalDangerButtonText", "modalDescription", "modalSecondaryButtonText", "modalTitle", "nextButtonText", "onClose", "onRequestSubmit", "submitButtonText"];
+var _excluded = ["backButtonText", "cancelButtonText", "children", "className", "modalDangerButtonText", "modalDescription", "modalSecondaryButtonText", "modalTitle", "nextButtonText", "onClose", "onRequestSubmit", "firstFocusElement", "submitButtonText"];
 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; }
 var blockClass = "".concat(_settings.pkg.prefix, "--create-full-page");
@@ -47,6 +47,7 @@ var CreateFullPage = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
     nextButtonText = _ref.nextButtonText,
     onClose = _ref.onClose,
     onRequestSubmit = _ref.onRequestSubmit,
+    firstFocusElement = _ref.firstFocusElement,
     submitButtonText = _ref.submitButtonText,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var _useState = (0, _react.useState)([]),
@@ -113,7 +114,8 @@ var CreateFullPage = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
     previousState: previousState,
     currentStep: currentStep,
     blockClass: blockClass,
-    onMount: onMount
+    onMount: onMount,
+    firstFocusElement: firstFocusElement
   });
   (0, _hooks.useValidCreateStepCount)(stepData.length, componentName);
   (0, _hooks.useCreateComponentStepChange)({
@@ -234,6 +236,10 @@ CreateFullPage.propTypes = {
    * Provide an optional class to be applied to the containing node.
    */
   className: _propTypes.default.string,
+  /**
+   * Specifies elements to focus on first on render.
+   */
+  firstFocusElement: _propTypes.default.string,
   /**
    * The primary 'danger' button text in the modal
    */

package/lib/components/CreateTearsheet/CreateTearsheet.js

@@ -21,7 +21,7 @@ var _hooks = require("../../global/js/hooks");
 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"];
+var _excluded = ["backButtonText", "cancelButtonText", "children", "className", "description", "influencerWidth", "initialStep", "label", "nextButtonText", "onClose", "onRequestSubmit", "open", "firstFocusElement", "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); }
 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; }
 var componentName = 'CreateTearsheet';
@@ -57,6 +57,7 @@ var CreateTearsheet = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     onClose = _ref.onClose,
     onRequestSubmit = _ref.onRequestSubmit,
     open = _ref.open,
+    firstFocusElement = _ref.firstFocusElement,
     submitButtonText = _ref.submitButtonText,
     title = _ref.title,
     _ref$verticalPosition = _ref.verticalPosition,
@@ -127,7 +128,8 @@ var CreateTearsheet = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     previousState: previousState,
     currentStep: currentStep,
     blockClass: blockClass,
-    onMount: onMount
+    onMount: onMount,
+    firstFocusElement: firstFocusElement
   });
   (0, _hooks.useValidCreateStepCount)(stepData.length, componentName);
   (0, _hooks.useResetCreateComponent)({
@@ -254,6 +256,10 @@ CreateTearsheet.propTypes = {
    * A description of the flow, displayed in the header area of the tearsheet.
    */
   description: _propTypes.default.node,
+  /**
+   * Specifies elements to focus on first on render.
+   */
+  firstFocusElement: _propTypes.default.string,
   /**
    * Used to set the size of the influencer
    */

package/lib/components/CreateTearsheet/preview-components/MultiStepTearsheet.js

@@ -49,7 +49,8 @@ var MultiStepTearsheet = function MultiStepTearsheet(_ref2) {
     label = _ref2.label,
     nextButtonText = _ref2.nextButtonText,
     submitButtonText = _ref2.submitButtonText,
-    title = _ref2.title;
+    title = _ref2.title,
+    firstFocusElement = _ref2.firstFocusElement;
   var _useState = (0, _react.useState)(750),
     _useState2 = (0, _slicedToArray2.default)(_useState, 1),
     simulatedDelay = _useState2[0];
@@ -132,7 +133,8 @@ var MultiStepTearsheet = function MultiStepTearsheet(_ref2) {
           resolve();
         }, simulatedDelay);
       });
-    }
+    },
+    firstFocusElement: firstFocusElement
   }, /*#__PURE__*/_react.default.createElement(_CreateTearsheetStep.CreateTearsheetStep, {
     onNext: function onNext() {
       return new Promise(function (resolve, reject) {

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

@@ -24,6 +24,13 @@ var _hooks = require("../../../global/js/hooks");
 var _hooks2 = require("../../DataSpreadsheet/hooks");
 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; }
+/**
+ * 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 TableContainer = _carbonComponentsReact.DataTable.TableContainer,
   Table = _carbonComponentsReact.DataTable.Table;
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
@@ -39,7 +46,7 @@ var DatagridContent = function DatagridContent(_ref) {
     withVirtualScroll = datagridState.withVirtualScroll,
     DatagridPagination = datagridState.DatagridPagination,
     isFetching = datagridState.isFetching,
-    CustomizeColumnsModal = datagridState.CustomizeColumnsModal,
+    CustomizeColumnsTearsheet = datagridState.CustomizeColumnsTearsheet,
     leftPanel = datagridState.leftPanel,
     fullHeightDatagrid = datagridState.fullHeightDatagrid,
     _datagridState$vertic = datagridState.verticalAlign,
@@ -130,7 +137,7 @@ var DatagridContent = function DatagridContent(_ref) {
   }, renderTable()) : withVirtualScroll ? /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__virtualScrollContainer"),
     ref: gridRef
-  }, 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, {
+  }, renderTable()) : renderTable())), (rows === null || rows === void 0 ? void 0 : rows.length) > 0 && !isFetching && DatagridPagination && /*#__PURE__*/_react.default.createElement(DatagridPagination, datagridState), CustomizeColumnsTearsheet && /*#__PURE__*/_react.default.createElement(CustomizeColumnsTearsheet, {
     instance: datagridState
   }));
 };
@@ -141,7 +148,7 @@ DatagridContent.propTypes = {
     withVirtualScroll: _propTypes.default.bool,
     DatagridActions: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.func]),
     DatagridPagination: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.func]),
-    CustomizeColumnsModal: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.func]),
+    CustomizeColumnsTearsheet: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.func]),
     isFetching: _propTypes.default.bool,
     leftPanel: _propTypes.default.object,
     fullHeightDatagrid: _propTypes.default.bool,

package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Actions.js

@@ -12,13 +12,11 @@ var React = _interopRequireWildcard(require("react"));
 var _settings = require("../../../../../settings");
 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; }
-// @flow
-/*
- * Licensed Materials - Property of IBM
- * 5724-Q36
- * (c) Copyright IBM Corp. 2021
- * US Government Users Restricted Rights - Use, duplication or disclosure
- * restricted by GSA ADP Schedule Contract with IBM Corp.
+/**
+ * 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 blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
@@ -27,11 +25,11 @@ var Actions = function Actions(_ref) {
     setSearchText = _ref.setSearchText,
     findColumnPlaceholderLabel = _ref.findColumnPlaceholderLabel;
   return /*#__PURE__*/React.createElement("div", {
-    className: "".concat(blockClass, "__customize-columns-modal--actions")
+    className: "".concat(blockClass, "__customize-columns-tearsheet--actions")
   }, /*#__PURE__*/React.createElement(_carbonComponentsReact.Search, {
     placeholder: findColumnPlaceholderLabel,
     value: searchText,
-    size: "sm",
+    size: "xl",
     labelText: findColumnPlaceholderLabel,
     onChange: function onChange(e) {
       // TODO: is it performant?

package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/ButtonWrapper.js

@@ -13,14 +13,14 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _iconsReact = require("@carbon/icons-react");
 var _carbonComponentsReact = require("carbon-components-react");
 var _settings = require("../../../../../settings");
-var _excluded = ["onClick", "setIsModalOpen", "isModalOpen", "iconTooltipLabel"];
+var _excluded = ["onClick", "setIsTearsheetOpen", "isTearsheetOpen", "iconTooltipLabel"];
 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; }
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
 var ButtonWrapper = function ButtonWrapper(_ref) {
   var _onClick = _ref.onClick,
-    setIsModalOpen = _ref.setIsModalOpen,
-    isModalOpen = _ref.isModalOpen,
+    setIsTearsheetOpen = _ref.setIsTearsheetOpen,
+    isTearsheetOpen = _ref.isTearsheetOpen,
     _ref$iconTooltipLabel = _ref.iconTooltipLabel,
     iconTooltipLabel = _ref$iconTooltipLabel === void 0 ? 'Customize columns' : _ref$iconTooltipLabel,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
@@ -32,7 +32,7 @@ var ButtonWrapper = function ButtonWrapper(_ref) {
     hasIconOnly: true,
     "test-id": "".concat(blockClass, "__customize-columns-trigger"),
     onClick: function onClick() {
-      setIsModalOpen(!isModalOpen);
+      setIsTearsheetOpen(!isTearsheetOpen);
       if (typeof _onClick === 'function') {
         _onClick();
       }
@@ -41,9 +41,9 @@ var ButtonWrapper = function ButtonWrapper(_ref) {
 };
 ButtonWrapper.propTypes = {
   iconTooltipLabel: _propTypes.default.string,
-  isModalOpen: _propTypes.default.bool.isRequired,
+  isTearsheetOpen: _propTypes.default.bool.isRequired,
   onClick: _propTypes.default.func.isRequired,
-  setIsModalOpen: _propTypes.default.func.isRequired
+  setIsTearsheetOpen: _propTypes.default.func.isRequired
 };
 var _default = ButtonWrapper;
 exports.default = _default;

package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js

@@ -17,13 +17,11 @@ var _settings = require("../../../../../settings");
 var _DraggableElement = _interopRequireDefault(require("../../DraggableElement"));
 var _common = require("./common");
 var _classnames = _interopRequireDefault(require("classnames"));
-// @flow
-/*
- * Licensed Materials - Property of IBM
- * 5724-Q36
- * (c) Copyright IBM Corp. 2021
- * US Government Users Restricted Rights - Use, duplication or disclosure
- * restricted by GSA ADP Schedule Contract with IBM Corp.
+/**
+ * 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 blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
@@ -38,7 +36,6 @@ var getNextIndex = function getNextIndex(array, currentIndex, key) {
   return newIndex;
 };
 var Columns = function Columns(_ref) {
-  var _classNames;
   var getVisibleColumnsCount = _ref.getVisibleColumnsCount,
     filterString = _ref.filterString,
     columns = _ref.columns,
@@ -77,12 +74,7 @@ var Columns = function Columns(_ref) {
         e.stopPropagation();
       }
     },
-    tabIndex: 0,
-    onFocus: function onFocus(e) {
-      if (e.target === e.currentTarget) {
-        setFocusIndex(0);
-      }
-    }
+    tabIndex: 0
   }, /*#__PURE__*/_react.default.createElement("span", {
     "aria-live": "assertive",
     className: "".concat(blockClass, "__shared-ui--assistive-text")
@@ -91,7 +83,7 @@ var Columns = function Columns(_ref) {
     className: "".concat(blockClass, "__shared-ui--assistive-text")
   }, filterString.length === 0 ? assistiveTextInstructionsLabel : assistiveTextDisabledInstructionsLabel), /*#__PURE__*/_react.default.createElement("div", {
     id: "".concat(blockClass, "__customize-columns-select-all"),
-    className: (0, _classnames.default)((_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(blockClass, "__customize-columns-select-all"), getVisibleColumnsCount() === 0), (0, _defineProperty2.default)(_classNames, "".concat(blockClass, "__customize-columns-select-all-selected"), getVisibleColumnsCount() > 0), _classNames)),
+    className: (0, _classnames.default)("".concat(blockClass, "__customize-columns-select-all"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__customize-columns-select-all--selected"), getVisibleColumnsCount() > 0)),
     selected: getVisibleColumnsCount() > 0
   }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Checkbox, {
     wrapperClassName: "".concat(blockClass, "__customize-columns-checkbox-wrapper"),
@@ -105,6 +97,24 @@ var Columns = function Columns(_ref) {
   })), columns.filter(function (colDef) {
     return filterString.length === 0 || colDef.Header.props.title.toLowerCase().includes(filterString);
   }).map(function (colDef, i) {
+    var searchString = new RegExp('(' + filterString + ')');
+    var res = filterString.length ? colDef.Header.props.title.toLowerCase().split(searchString) : null;
+    var firstWord = res !== null ? res[0] === '' ? res[1].charAt(0).toUpperCase() + res[1].substring(1) : res[0].charAt(0).toUpperCase() + res[0].substring(1) : null;
+    var highlightedText = res !== null ? res[0] === '' ? "<strong>".concat(firstWord, "</strong>") + res[2] : firstWord + "<strong>".concat(res[1], "</strong>") + res[2] : colDef.Header.props.title;
+    var listContents = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Checkbox, {
+      wrapperClassName: "".concat(blockClass, "__customize-columns-checkbox-wrapper"),
+      checked: (0, _common.isColumnVisible)(colDef),
+      onChange: onSelectColumn.bind(null, colDef),
+      id: "".concat(blockClass, "__customization-column-").concat(colDef.id),
+      labelText: colDef.Header.props.title,
+      title: colDef.Header.props.title,
+      className: "".concat(blockClass, "__customize-columns-checkbox"),
+      hideLabel: true
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      dangerouslySetInnerHTML: {
+        __html: highlightedText
+      }
+    }));
     return /*#__PURE__*/_react.default.createElement(_DraggableElement.default, {
       key: colDef.id,
       index: i,
@@ -132,15 +142,7 @@ var Columns = function Columns(_ref) {
         }
       },
       selected: (0, _common.isColumnVisible)(colDef)
-    }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Checkbox, {
-      wrapperClassName: "".concat(blockClass, "__customize-columns-checkbox-wrapper"),
-      checked: (0, _common.isColumnVisible)(colDef),
-      onChange: onSelectColumn.bind(null, colDef),
-      id: "".concat(blockClass, "__customization-column-").concat(colDef.id),
-      labelText: colDef.Header.props.title,
-      title: colDef.Header.props.title,
-      className: "".concat(blockClass, "__customize-columns-checkbox")
-    }));
+    }, listContents);
   }))));
 };
 Columns.propTypes = {

package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/{CustomizeColumnsModal.js → CustomizeColumnsTearsheet.js}

@@ -10,24 +10,24 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _carbonComponentsReact = require("carbon-components-react");
 var _common = require("./common");
 var _Columns = _interopRequireDefault(require("./Columns"));
 var _Actions = _interopRequireDefault(require("./Actions"));
 var _settings = require("../../../../../settings");
+var _Tearsheet = require("../../../../Tearsheet");
 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");
-var CustomizeColumnsModal = function CustomizeColumnsModal(_ref) {
+var CustomizeColumnsTearsheet = function CustomizeColumnsTearsheet(_ref) {
   var isOpen = _ref.isOpen,
-    setIsModalOpen = _ref.setIsModalOpen,
+    setIsTearsheetOpen = _ref.setIsTearsheetOpen,
     onSaveColumnPrefs = _ref.onSaveColumnPrefs,
     columnDefinitions = _ref.columnDefinitions,
     originalColumnDefinitions = _ref.originalColumnDefinitions,
-    _ref$customizeModalHe = _ref.customizeModalHeadingLabel,
-    customizeModalHeadingLabel = _ref$customizeModalHe === void 0 ? 'Customize Columns' : _ref$customizeModalHe,
+    _ref$customizeTearshe = _ref.customizeTearsheetHeadingLabel,
+    customizeTearsheetHeadingLabel = _ref$customizeTearshe === void 0 ? 'Customize columns' : _ref$customizeTearshe,
     _ref$primaryButtonTex = _ref.primaryButtonTextLabel,
     primaryButtonTextLabel = _ref$primaryButtonTex === void 0 ? 'Save' : _ref$primaryButtonTex,
     _ref$secondaryButtonT = _ref.secondaryButtonTextLabel,
@@ -81,10 +81,10 @@ var CustomizeColumnsModal = function CustomizeColumnsModal(_ref) {
     isDirty = _useState10[0],
     setIsDirty = _useState10[1];
   var onRequestClose = function onRequestClose() {
-    setIsModalOpen(false);
+    setIsTearsheetOpen(false);
   };
   var onRequestSubmit = function onRequestSubmit() {
-    setIsModalOpen(false);
+    setIsTearsheetOpen(false);
     var updatedColumns = columnObjects.map(function (colDef) {
       return {
         id: colDef.id,
@@ -120,21 +120,22 @@ var CustomizeColumnsModal = function CustomizeColumnsModal(_ref) {
     setVisibleColumnsCount(getVisibleColumnsCount());
     setTotalColumns(columnObjects.length);
   }, [getVisibleColumnsCount, columnObjects.length]);
-  return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Modal, {
-    className: "".concat(blockClass, "__customize-columns-modal"),
+  return /*#__PURE__*/_react.default.createElement(_Tearsheet.TearsheetNarrow, {
+    className: "".concat(blockClass, "__customize-columns-tearsheet"),
     open: isOpen,
-    modalHeading: "".concat(customizeModalHeadingLabel, " (").concat(visibleColumnsCount, "/").concat(totalColumns, ")"),
-    primaryButtonText: primaryButtonTextLabel,
-    secondaryButtonText: secondaryButtonTextLabel,
-    selectorPrimaryFocus: ".".concat(blockClass, "__customize-columns-column-list--focus"),
-    primaryButtonDisabled: !isDirty,
-    onRequestClose: onRequestClose,
-    onRequestSubmit: onRequestSubmit,
-    size: "sm",
-    hasForm: true
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(blockClass, "__customize-columns-instructions")
-  }, instructionsLabel), /*#__PURE__*/_react.default.createElement(_Actions.default, {
+    title: "".concat(customizeTearsheetHeadingLabel, " (").concat(visibleColumnsCount, "/").concat(totalColumns, ")"),
+    description: instructionsLabel,
+    actions: [{
+      kind: 'secondary',
+      label: secondaryButtonTextLabel,
+      onClick: onRequestClose
+    }, {
+      kind: 'primary',
+      label: primaryButtonTextLabel,
+      onClick: onRequestSubmit,
+      disabled: !isDirty
+    }]
+  }, /*#__PURE__*/_react.default.createElement(_Actions.default, {
     columns: columnObjects,
     originalColumnDefinitions: originalColumnDefinitions,
     searchText: searchText,
@@ -159,11 +160,11 @@ var CustomizeColumnsModal = function CustomizeColumnsModal(_ref) {
     selectAllLabel: selectAllLabel
   }));
 };
-CustomizeColumnsModal.propTypes = {
+CustomizeColumnsTearsheet.propTypes = {
   assistiveTextDisabledInstructionsLabel: _propTypes.default.string,
   assistiveTextInstructionsLabel: _propTypes.default.string,
   columnDefinitions: _propTypes.default.array.isRequired,
-  customizeModalHeadingLabel: _propTypes.default.string,
+  customizeTearsheetHeadingLabel: _propTypes.default.string,
   findColumnPlaceholderLabel: _propTypes.default.string,
   instructionsLabel: _propTypes.default.string,
   isOpen: _propTypes.default.bool.isRequired,
@@ -173,7 +174,7 @@ CustomizeColumnsModal.propTypes = {
   resetToDefaultLabel: _propTypes.default.string,
   secondaryButtonTextLabel: _propTypes.default.string,
   selectAllLabel: _propTypes.default.string,
-  setIsModalOpen: _propTypes.default.func.isRequired
+  setIsTearsheetOpen: _propTypes.default.func.isRequired
 };
-var _default = CustomizeColumnsModal;
+var _default = CustomizeColumnsTearsheet;
 exports.default = _default;