@carbon/ibm-products 1.47.0 → 1.49.0

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

@@ -43,7 +43,8 @@ var CustomizeColumnsTearsheet = function CustomizeColumnsTearsheet(_ref) {
     _ref$assistiveTextDis = _ref.assistiveTextDisabledInstructionsLabel,
     assistiveTextDisabledInstructionsLabel = _ref$assistiveTextDis === void 0 ? 'Reordering columns are disabled because they are filtered currently.' : _ref$assistiveTextDis,
     _ref$selectAllLabel = _ref.selectAllLabel,
-    selectAllLabel = _ref$selectAllLabel === void 0 ? 'Column name' : _ref$selectAllLabel;
+    selectAllLabel = _ref$selectAllLabel === void 0 ? 'Column name' : _ref$selectAllLabel,
+    isTableSortable = _ref.isTableSortable;
   var _useState = (0, _react.useState)(''),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     visibleColumnsCount = _useState2[0],
@@ -57,12 +58,6 @@ var CustomizeColumnsTearsheet = function CustomizeColumnsTearsheet(_ref) {
     searchText = _useState6[0],
     setSearchText = _useState6[1];
   var _useState7 = (0, _react.useState)(columnDefinitions
-    // hide the columns without Header, e.g the sticky actions, spacer
-    .filter(function (colDef) {
-      return !!colDef.Header.props && !!colDef.Header.props.title;
-    }).filter(function (colDef) {
-      return !colDef.isAction;
-    })
     // only sort the hidden column to the end when modal reopen
     .sort(function (defA, defB) {
       var isVisibleA = (0, _common.isColumnVisible)(defA);
@@ -159,7 +154,8 @@ var CustomizeColumnsTearsheet = function CustomizeColumnsTearsheet(_ref) {
       setColumnObjects(cols);
       setDirty();
     },
-    selectAllLabel: selectAllLabel
+    selectAllLabel: selectAllLabel,
+    isTableSortable: isTableSortable
   }));
 };
 CustomizeColumnsTearsheet.propTypes = {
@@ -170,6 +166,7 @@ CustomizeColumnsTearsheet.propTypes = {
   findColumnPlaceholderLabel: _propTypes.default.string,
   instructionsLabel: _propTypes.default.string,
   isOpen: _propTypes.default.bool.isRequired,
+  isTableSortable: _propTypes.default.bool.isRequired,
   onSaveColumnPrefs: _propTypes.default.func.isRequired,
   originalColumnDefinitions: _propTypes.default.array.isRequired,
   primaryButtonTextLabel: _propTypes.default.string,

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

@@ -0,0 +1,113 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DraggableItemsList = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = require("prop-types");
+var _carbonComponentsReact = require("carbon-components-react");
+var _common = require("./common");
+var _DraggableElement = _interopRequireDefault(require("../../DraggableElement"));
+var _settings = require("../../../../../settings");
+/**
+ * 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.
+ */
+
+var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
+var DraggableItemsList = function DraggableItemsList(_ref) {
+  var columns = _ref.columns,
+    filterString = _ref.filterString,
+    focusIndex = _ref.focusIndex,
+    getNextIndex = _ref.getNextIndex,
+    isTableSortable = _ref.isTableSortable,
+    moveElement = _ref.moveElement,
+    onSelectColumn = _ref.onSelectColumn,
+    setAriaRegionText = _ref.setAriaRegionText,
+    setColumnsObject = _ref.setColumnsObject,
+    setFocusIndex = _ref.setFocusIndex;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, columns
+  // hide the columns without Header, e.g the sticky actions, spacer
+  .filter(function (colDef) {
+    var _colDef$Header$props$, _colDef$Header$props;
+    var sortableTitle = isTableSortable && ((_colDef$Header$props$ = colDef.Header().props.children.props) === null || _colDef$Header$props$ === void 0 ? void 0 : _colDef$Header$props$.title);
+    return !!colDef.Header.props && !!((_colDef$Header$props = colDef.Header.props) !== null && _colDef$Header$props !== void 0 && _colDef$Header$props.title) || isTableSortable && !!sortableTitle;
+  }).filter(function (colDef) {
+    return !colDef.isAction;
+  }).filter(function (colDef) {
+    var _colDef$Header$props$2, _colDef$Header$props2, _colDef$Header$props3;
+    var sortableTitle = isTableSortable && ((_colDef$Header$props$2 = colDef.Header().props.children.props) === null || _colDef$Header$props$2 === void 0 ? void 0 : _colDef$Header$props$2.title);
+    return filterString.length === 0 || (isTableSortable ? sortableTitle === null || sortableTitle === void 0 ? void 0 : sortableTitle.toLowerCase().includes(filterString) : (_colDef$Header$props2 = colDef.Header.props) === null || _colDef$Header$props2 === void 0 ? void 0 : (_colDef$Header$props3 = _colDef$Header$props2.title) === null || _colDef$Header$props3 === void 0 ? void 0 : _colDef$Header$props3.toLowerCase().includes(filterString)) && colDef.id !== 'spacer';
+  }).map(function (colDef, i) {
+    var _colDef$Header$props$3, _colDef$Header$props4, _colDef$Header$props5, _colDef$Header$props6, _colDef$Header$props7;
+    var isSortableColumn = !!colDef.canSort && !!isTableSortable;
+    var sortableTitle = isTableSortable && ((_colDef$Header$props$3 = colDef.Header().props.children.props) === null || _colDef$Header$props$3 === void 0 ? void 0 : _colDef$Header$props$3.title);
+    var searchString = new RegExp('(' + filterString + ')');
+    var res = filterString.length ? isSortableColumn ? sortableTitle.toLowerCase().split(searchString) : 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] : isSortableColumn ? sortableTitle : (_colDef$Header$props4 = colDef.Header.props) === null || _colDef$Header$props4 === void 0 ? void 0 : _colDef$Header$props4.title;
+    var isFrozenColumn = !!colDef.sticky;
+    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),
+      disabled: isFrozenColumn,
+      onChange: onSelectColumn.bind(null, colDef),
+      id: "".concat(blockClass, "__customization-column-").concat(colDef.id),
+      labelText: isSortableColumn ? sortableTitle : (_colDef$Header$props5 = colDef.Header.props) === null || _colDef$Header$props5 === void 0 ? void 0 : _colDef$Header$props5.title,
+      title: isSortableColumn ? sortableTitle : (_colDef$Header$props6 = colDef.Header.props) === null || _colDef$Header$props6 === void 0 ? void 0 : _colDef$Header$props6.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,
+      listData: columns,
+      setListData: setColumnsObject,
+      id: "dnd-datagrid-columns-".concat(colDef.id),
+      type: "column-customization",
+      disabled: filterString.length > 0 || isFrozenColumn,
+      ariaLabel: isSortableColumn ? sortableTitle : (_colDef$Header$props7 = colDef.Header.props) === null || _colDef$Header$props7 === void 0 ? void 0 : _colDef$Header$props7.title,
+      onGrab: setAriaRegionText,
+      isFocused: focusIndex === i,
+      moveElement: moveElement,
+      onArrowKeyDown: function onArrowKeyDown(e, isGrabbed, currentIndex) {
+        if (isGrabbed) {
+          var _columns$nextIndex;
+          var nextIndex = getNextIndex(columns, currentIndex, e.key);
+          e.preventDefault();
+          e.stopPropagation();
+          if (nextIndex >= 0 && !((_columns$nextIndex = columns[nextIndex]) !== null && _columns$nextIndex !== void 0 && _columns$nextIndex.sticky)) {
+            setFocusIndex(nextIndex);
+            moveElement(currentIndex, nextIndex);
+            e.target.scrollIntoView({
+              block: 'center'
+            });
+          }
+        }
+      },
+      isSticky: isFrozenColumn,
+      selected: (0, _common.isColumnVisible)(colDef)
+    }, listContents);
+  }));
+};
+exports.DraggableItemsList = DraggableItemsList;
+DraggableItemsList.propTypes = {
+  columns: _propTypes.PropTypes.array.isRequired,
+  filterString: _propTypes.PropTypes.string.isRequired,
+  focusIndex: _propTypes.PropTypes.number.isRequired,
+  getNextIndex: _propTypes.PropTypes.func.isRequired,
+  isTableSortable: _propTypes.PropTypes.bool,
+  moveElement: _propTypes.PropTypes.func.isRequired,
+  onSelectColumn: _propTypes.PropTypes.func.isRequired,
+  setAriaRegionText: _propTypes.PropTypes.func.isRequired,
+  setColumnsObject: _propTypes.PropTypes.func.isRequired,
+  setFocusIndex: _propTypes.PropTypes.func.isRequired
+};

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

@@ -24,6 +24,7 @@ var TearsheetWrapper = function TearsheetWrapper(_ref) {
     rest = (0, _objectWithoutProperties2.default)(_instance$customizeCo, _excluded);
   return /*#__PURE__*/React.createElement(_CustomizeColumnsTearsheet.default, (0, _extends2.default)({}, rest, labels, {
     isOpen: isTearsheetOpen,
+    isTableSortable: instance === null || instance === void 0 ? void 0 : instance.isTableSortable,
     setIsTearsheetOpen: setIsTearsheetOpen,
     columnDefinitions: instance.allColumns,
     originalColumnDefinitions: instance.columns,

package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js

@@ -55,7 +55,15 @@ var FilterPanel = function FilterPanel(_ref) {
     _ref$showFilterSearch = _ref.showFilterSearch,
     showFilterSearch = _ref$showFilterSearch === void 0 ? false : _ref$showFilterSearch,
     _ref$filterPanelMinHe = _ref.filterPanelMinHeight,
-    filterPanelMinHeight = _ref$filterPanelMinHe === void 0 ? 600 : _ref$filterPanelMinHe;
+    filterPanelMinHeight = _ref$filterPanelMinHe === void 0 ? 600 : _ref$filterPanelMinHe,
+    _ref$primaryActionLab = _ref.primaryActionLabel,
+    primaryActionLabel = _ref$primaryActionLab === void 0 ? 'Apply' : _ref$primaryActionLab,
+    _ref$secondaryActionL = _ref.secondaryActionLabel,
+    secondaryActionLabel = _ref$secondaryActionL === void 0 ? 'Cancel' : _ref$secondaryActionL,
+    _ref$searchLabelText = _ref.searchLabelText,
+    searchLabelText = _ref$searchLabelText === void 0 ? 'Filter search' : _ref$searchLabelText,
+    _ref$searchPlaceholde = _ref.searchPlaceholder,
+    searchPlaceholder = _ref$searchPlaceholde === void 0 ? 'Find filters' : _ref$searchPlaceholde;
   /** State */
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -130,13 +138,13 @@ var FilterPanel = function FilterPanel(_ref) {
       actions: [{
         key: 1,
         kind: 'primary',
-        label: 'Apply',
+        label: primaryActionLabel,
         onClick: apply,
         disabled: shouldDisableButtons
       }, {
         key: 2,
         kind: 'secondary',
-        label: 'Cancel',
+        label: secondaryActionLabel,
         onClick: cancel,
         disabled: shouldDisableButtons
       }],
@@ -199,8 +207,8 @@ var FilterPanel = function FilterPanel(_ref) {
     ref: filterSearchRef,
     className: "".concat(componentClass, "__search")
   }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Search, {
-    labelText: "Filter search",
-    placeHolderText: "Find filters",
+    labelText: searchLabelText,
+    placeHolderText: searchPlaceholder,
     light: true,
     size: "sm"
   }))), /*#__PURE__*/_react.default.createElement("div", {
@@ -241,6 +249,10 @@ FilterPanel.propTypes = {
   onPanelClose: _propTypes.default.func,
   onPanelOpen: _propTypes.default.func,
   open: _propTypes.default.bool,
+  primaryActionLabel: _propTypes.default.string,
+  searchLabelText: _propTypes.default.string,
+  searchPlaceholder: _propTypes.default.string,
+  secondaryActionLabel: _propTypes.default.string,
   setAllFilters: _propTypes.default.func.isRequired,
   showFilterSearch: _propTypes.default.bool,
   title: _propTypes.default.string,

package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js

@@ -128,6 +128,17 @@ var useFilters = function useFilters(_ref) {
         // Remove it from the filters array
         filtersObjectArrayCopy.splice(_index2, 1);
       }
+    } else if (type === _constants.NUMBER) {
+      // If the value is empty remove it from the filtersObjectArray
+      if (value === '') {
+        // Find the column that uses number and displays an empty string
+        var _index3 = filtersObjectArrayCopy.findIndex(function (filter) {
+          return filter.id === column;
+        });
+
+        // Remove it from the filters array
+        filtersObjectArrayCopy.splice(_index3, 1);
+      }
     }
     setFiltersObjectArray(filtersObjectArrayCopy);
 

package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js

@@ -37,7 +37,9 @@ var RowSizeDropdown = function RowSizeDropdown(_ref) {
     tooltipPosition: "bottom",
     renderIcon: _iconsReact.Settings16,
     onClick: function onClick() {
-      return setIsOpen(!isOpen);
+      return setIsOpen(function (prevOpen) {
+        return !prevOpen;
+      });
     },
     iconDescription: legendText,
     className: (0, _classnames.default)("".concat(blockClass, "__row-size-button"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__row-size-button--open"), isOpen))

package/lib/components/Datagrid/index.js

@@ -10,6 +10,12 @@ Object.defineProperty(exports, "Datagrid", {
     return _Datagrid.Datagrid;
   }
 });
+Object.defineProperty(exports, "getAutoSizedColumnWidth", {
+  enumerable: true,
+  get: function get() {
+    return _getAutoSizedColumnWidth.getAutoSizedColumnWidth;
+  }
+});
 Object.defineProperty(exports, "useActionsColumn", {
   enumerable: true,
   get: function get() {
@@ -136,4 +142,5 @@ var _useSelectAllToggle = _interopRequireDefault(require("./useSelectAllToggle")
 var _useColumnCenterAlign = _interopRequireDefault(require("./useColumnCenterAlign"));
 var _useColumnOrder = _interopRequireDefault(require("./useColumnOrder"));
 var _useInlineEdit = _interopRequireDefault(require("./useInlineEdit"));
-var _useFiltering = _interopRequireDefault(require("./useFiltering"));
+var _useFiltering = _interopRequireDefault(require("./useFiltering"));
+var _getAutoSizedColumnWidth = require("./utils/getAutoSizedColumnWidth");

package/lib/components/Datagrid/useOnRowClick.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 /*
  * Licensed Materials - Property of IBM
  * 5724-Q36
- * (c) Copyright IBM Corp. 2020
+ * (c) Copyright IBM Corp. 2020, 2023
  * US Government Users Restricted Rights - Use, duplication or disclosure
  * restricted by GSA ADP Schedule Contract with IBM Corp.
  */
@@ -21,9 +21,9 @@ var useOnRowClick = function useOnRowClick(hooks) {
         instance = datagridState.instance;
       var id = row.id,
         toggleRowSelected = row.toggleRowSelected;
-      var onClick = function onClick() {
+      var onClick = function onClick(event) {
         if (!isFetching && onRowClick) {
-          onRowClick(row);
+          onRowClick(row, event);
           instance.selectedFlatRows && instance.selectedFlatRows.map(function (toggleRow) {
             return toggleRow.toggleRowSelected(false);
           });

package/lib/components/Datagrid/useSortableColumns.js

@@ -22,6 +22,7 @@ var ordering = {
 };
 var useSortableColumns = function useSortableColumns(hooks) {
   var sortableVisibleColumns = function sortableVisibleColumns(visibleColumns, _ref) {
+    var _instance$customizeCo;
     var instance = _ref.instance;
     var onSort = instance.onSort;
     var onSortClick = function onSortClick(column) {
@@ -37,27 +38,43 @@ var useSortableColumns = function useSortableColumns(hooks) {
     };
     var sortableColumns = visibleColumns.map(function (column) {
       var icon = function icon(col) {
-        if (col.isSorted) {
+        if (col !== null && col !== void 0 && col.isSorted) {
           switch (col.isSortedDesc) {
             case false:
-              return _iconsReact.ArrowUp16;
+              return function () {
+                return /*#__PURE__*/_react.default.createElement(_iconsReact.ArrowUp16, {
+                  className: "".concat(blockClass, "__sortable-icon ").concat(_settings.carbon.prefix, "--btn__icon")
+                });
+              };
             case true:
-              return _iconsReact.ArrowUp16;
+              return function () {
+                return /*#__PURE__*/_react.default.createElement(_iconsReact.ArrowUp16, {
+                  className: "".concat(blockClass, "__sortable-icon ").concat(_settings.carbon.prefix, "--btn__icon")
+                });
+              };
             default:
-              return _iconsReact.Arrows16;
+              return function () {
+                return /*#__PURE__*/_react.default.createElement(_iconsReact.Arrows16, {
+                  className: "".concat(blockClass, "__sortable-icon ").concat(_settings.carbon.prefix, "--btn__icon")
+                });
+              };
           }
         }
-        return _iconsReact.Arrows16;
+        return function () {
+          return /*#__PURE__*/_react.default.createElement(_iconsReact.Arrows16, {
+            className: "".concat(blockClass, "__sortable-icon ").concat(_settings.carbon.prefix, "--btn__icon")
+          });
+        };
       };
       var Header = function Header(headerProp) {
         var _cx;
         return column.disableSortBy === true ? column.Header : /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
           onClick: function onClick() {
-            return onSortClick(headerProp.column);
+            return onSortClick(headerProp === null || headerProp === void 0 ? void 0 : headerProp.column);
           },
           kind: "ghost",
-          renderIcon: icon(headerProp.column),
-          className: (0, _classnames.default)("".concat(_settings.carbon.prefix, "--table-sort ").concat(blockClass, "--table-sort"), (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "--table-sort--desc"), headerProp.column.isSortedDesc), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "--table-sort--asc"), headerProp.column.isSortedDesc === false), _cx))
+          renderIcon: icon(headerProp === null || headerProp === void 0 ? void 0 : headerProp.column),
+          className: (0, _classnames.default)("".concat(_settings.carbon.prefix, "--table-sort ").concat(blockClass, "--table-sort"), (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "--table-sort--desc"), headerProp === null || headerProp === void 0 ? void 0 : headerProp.column.isSortedDesc), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "--table-sort--asc"), (headerProp === null || headerProp === void 0 ? void 0 : headerProp.column.isSortedDesc) === false), _cx))
         }, column.Header);
       };
       return _objectSpread(_objectSpread({}, column), {}, {
@@ -65,7 +82,7 @@ var useSortableColumns = function useSortableColumns(hooks) {
         minWidth: column.disableSortBy === true ? 0 : 90
       });
     });
-    return (0, _toConsumableArray2.default)(sortableColumns);
+    return (_instance$customizeCo = instance.customizeColumnsProps) !== null && _instance$customizeCo !== void 0 && _instance$customizeCo.isTearsheetOpen ? visibleColumns : (0, _toConsumableArray2.default)(sortableColumns);
   };
   var sortInstanceProps = function sortInstanceProps(instance) {
     var onSort = instance.onSort;

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

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getAutoSizedColumnWidth = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+/**
+ * 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.
+ */
+
+/**
+ * Calculates the auto sized width of a column
+ * @param {Array<object>} rows - The datagrid rows
+ * @param {string} accessor - The accessor for the column
+ * @param {string} headerText - The header text for the column
+ */
+
+var getAutoSizedColumnWidth = function getAutoSizedColumnWidth(rows, accessor, headerText) {
+  var maxWidth = 400;
+  var minWidth = 58;
+  var letterSpacing = 10;
+  var cellLength = Math.max.apply(Math, (0, _toConsumableArray2.default)(rows.map(function (row) {
+    return ("".concat(row[accessor]) || '').length;
+  })).concat([headerText.length]));
+  if (cellLength <= 3) {
+    return minWidth;
+  }
+  return Math.min(maxWidth, cellLength * letterSpacing + 16);
+};
+exports.getAutoSizedColumnWidth = getAutoSizedColumnWidth;

package/lib/components/InlineEditV2/InlineEditV2.js

@@ -23,6 +23,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var componentName = 'InlineEditV2';
 var blockClass = "".concat(_settings.pkg.prefix, "--inline-edit-v2");
 var InlineEditV2 = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var _cx;
   var cancelLabel = _ref.cancelLabel,
     editLabel = _ref.editLabel,
     id = _ref.id,
@@ -129,7 +130,7 @@ var InlineEditV2 = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, {
     ref: ref
   }, (0, _devtools.getDevtoolsProps)(componentName)), /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)(blockClass, (0, _defineProperty2.default)({}, "".concat(blockClass, "-focused"), focused)),
+    className: (0, _classnames.default)(blockClass, (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "--focused"), focused), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "--invalid"), invalid), _cx)),
     onFocus: onFocusHandler,
     onBlur: onBlurHandler
   }, /*#__PURE__*/_react.default.createElement("label", {
@@ -145,7 +146,9 @@ var InlineEditV2 = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     // readOnly={readOnly}
     ,
     onKeyDown: onKeyHandler
-  }), focused ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, invalid && /*#__PURE__*/_react.default.createElement(_iconsReact.WarningFilled16, {
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(blockClass, "__toolbar")
+  }, focused ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, invalid && /*#__PURE__*/_react.default.createElement(_iconsReact.WarningFilled16, {
     className: "".concat(blockClass, "__warning-icon")
   }), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
     hasIconOnly: true,
@@ -182,7 +185,7 @@ var InlineEditV2 = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     kind: "ghost",
     tabIndex: 0,
     key: "edit"
-  })), focused && invalid && /*#__PURE__*/_react.default.createElement("p", {
+  }))), focused && invalid && /*#__PURE__*/_react.default.createElement("p", {
     className: "".concat(blockClass, "__warning-text")
   }, invalidLabel));
 });

package/lib/components/NonLinearReading/NonLinearReading.js

@@ -0,0 +1,90 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NonLinearReading = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _iconsReact = require("@carbon/icons-react");
+var _devtools = require("../../global/js/utils/devtools");
+var _settings = require("../../settings");
+var _excluded = ["children", "className", "definition", "theme"];
+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; }
+// The block part of our conventional BEM class names (blockClass__E--M).
+var blockClass = "".concat(_settings.pkg.prefix, "--non-linear-reading");
+var componentName = 'NonLinearReading';
+
+// Default values for props
+var defaults = {
+  theme: 'light'
+};
+
+/**
+ * Use non-linear reading when space is limited to share a
+ * brief, at-a-glance, summary of a concept that may require
+ * more explanation for some users.
+ */
+var NonLinearReading = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    definition = _ref.definition,
+    _ref$theme = _ref.theme,
+    theme = _ref$theme === void 0 ? defaults.theme : _ref$theme,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isOpen = _useState2[0],
+    setOpen = _useState2[1];
+  var handleToggle = function handleToggle() {
+    setOpen(function (prevState) {
+      return !prevState;
+    });
+  };
+  return /*#__PURE__*/_react.default.createElement("span", (0, _extends2.default)({}, rest, {
+    className: (0, _classnames.default)(blockClass, className),
+    ref: ref,
+    role: "main"
+  }, (0, _devtools.getDevtoolsProps)(componentName)), ' ', /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    "aria-expanded": isOpen,
+    className: (0, _classnames.default)("".concat(blockClass, "__term-").concat(theme), [isOpen ? ["".concat(blockClass, "__term-").concat(theme, "--open")] : ["".concat(blockClass, "__term-").concat(theme, "--closed")]]),
+    onClick: handleToggle
+  }, children, isOpen && /*#__PURE__*/_react.default.createElement(_iconsReact.ChevronUp16, null)), ' ', isOpen && /*#__PURE__*/_react.default.createElement("span", {
+    className: "".concat(blockClass, "--body-").concat(theme)
+  }, definition), ' ');
+});
+
+// Return a placeholder if not released and not enabled by feature flag
+exports.NonLinearReading = NonLinearReading;
+exports.NonLinearReading = NonLinearReading = _settings.pkg.checkComponentEnabled(NonLinearReading, componentName);
+NonLinearReading.displayName = componentName;
+
+// The types and DocGen commentary for the component props,
+// in alphabetical order (for consistency).
+// See https://www.npmjs.com/package/prop-types#usage.
+NonLinearReading.propTypes = {
+  /**
+   * The term of the component appears as a pill.
+   */
+  children: _propTypes.default.node.isRequired,
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: _propTypes.default.string,
+  /**
+   * The content that appears when the term is toggled open.
+   */
+  definition: _propTypes.default.node.isRequired,
+  /**
+   * Determines the theme of the component.
+   */
+  theme: _propTypes.default.oneOf(['light', 'dark'])
+};

package/lib/components/NonLinearReading/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "NonLinearReading", {
+  enumerable: true,
+  get: function get() {
+    return _NonLinearReading.NonLinearReading;
+  }
+});
+var _NonLinearReading = require("./NonLinearReading");

package/lib/components/SidePanel/SidePanel.js

@@ -396,7 +396,6 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     }, subtitle), actionToolbarButtons && actionToolbarButtons.length && /*#__PURE__*/_react.default.createElement("div", {
       className: (0, _classnames.default)("".concat(blockClass, "__action-toolbar"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__action-toolbar-no-animation"), !animateTitle))
     }, actionToolbarButtons.map(function (_ref5) {
-      var _ref6;
       var label = _ref5.label,
         kind = _ref5.kind,
         icon = _ref5.icon,
@@ -414,10 +413,10 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
         renderIcon: icon,
         iconDescription: label,
         tooltipPosition: tooltipPosition || 'bottom',
-        tooltipAlignment: tooltipAlignment || 'center',
+        tooltipAlignment: tooltipAlignment || 'start',
         hasIconOnly: !leading,
         disabled: disabled,
-        className: (0, _classnames.default)(["".concat(blockClass, "__action-toolbar-button"), className, (_ref6 = {}, (0, _defineProperty2.default)(_ref6, "".concat(blockClass, "__action-toolbar-icon-only-button"), icon && !leading), (0, _defineProperty2.default)(_ref6, "".concat(blockClass, "__action-toolbar-leading-button"), leading), _ref6)]),
+        className: (0, _classnames.default)(["".concat(blockClass, "__action-toolbar-button"), className, (0, _defineProperty2.default)({}, "".concat(blockClass, "__action-toolbar-leading-button"), leading)]),
         onClick: onClick
       }), leading && label);
     })));

package/lib/components/index.js

@@ -201,6 +201,12 @@ Object.defineProperty(exports, "NoTagsEmptyState", {
     return _EmptyStates.NoTagsEmptyState;
   }
 });
+Object.defineProperty(exports, "NonLinearReading", {
+  enumerable: true,
+  get: function get() {
+    return _NonLinearReading.NonLinearReading;
+  }
+});
 Object.defineProperty(exports, "NotFoundEmptyState", {
   enumerable: true,
   get: function get() {
@@ -333,6 +339,12 @@ Object.defineProperty(exports, "WebTerminalProvider", {
     return _WebTerminal.WebTerminalProvider;
   }
 });
+Object.defineProperty(exports, "getAutoSizedColumnWidth", {
+  enumerable: true,
+  get: function get() {
+    return _Datagrid.getAutoSizedColumnWidth;
+  }
+});
 Object.defineProperty(exports, "useActionsColumn", {
   enumerable: true,
   get: function get() {
@@ -484,4 +496,5 @@ var _EditTearsheet = require("./EditTearsheet");
 var _EditTearsheetNarrow = require("./EditTearsheetNarrow");
 var _EditFullPage = require("./EditFullPage");
 var _EditUpdateCards = require("./EditUpdateCards");
-var _InlineEdit = require("./InlineEdit");
+var _InlineEdit = require("./InlineEdit");
+var _NonLinearReading = require("./NonLinearReading");

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

@@ -69,7 +69,9 @@ var defaults = {
     EditTearsheetNarrow: false,
     EditFullPage: false,
     EditUpdateCards: false,
-    ButtonMenu: false
+    ButtonMenu: false,
+    // Novice to pro components not yet reviewed and released:
+    NonLinearReading: false
     /* new component flags here - comment used by generate CLI */
   },
 

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.prepareStory = exports.getStoryTitle = exports.getStoryId = exports.CodesandboxLink = void 0;
+exports.prepareStory = exports.getStoryTitle = exports.getStoryId = exports.getSelectedCarbonTheme = exports.CodesandboxLink = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _csf = require("@storybook/csf");
@@ -87,4 +87,14 @@ CodesandboxLink.propTypes = {
    * directory withing examples codesandbox will be found
    */
   exampleDirectory: _propTypes.default.string
-};
+};
+
+/**
+ * A helper function that finds the designated theme on the Storybook canvas.
+ * @returns "dark" or "light"
+ */
+var getSelectedCarbonTheme = function getSelectedCarbonTheme() {
+  var themeId = document.querySelector('html').getAttribute('storybook-carbon-theme');
+  return themeId === 'g90' || themeId === 'g100' ? 'dark' : 'light';
+};
+exports.getSelectedCarbonTheme = getSelectedCarbonTheme;

package/package.json

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