@carbon/ibm-products 2.21.0 → 2.22.0

package/es/global/js/hooks/useResizeObserver.js

@@ -1,3 +1,4 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /**
  * Copyright IBM Corp. 2023, 2023
@@ -7,6 +8,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
  */
 import { useRef, useState, useLayoutEffect, useEffect } from 'react';
 export var useResizeObserver = function useResizeObserver(ref, callback) {
+  var deps = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
   var _useState = useState(-1),
     _useState2 = _slicedToArray(_useState, 2),
     width = _useState2[0],
@@ -38,7 +40,8 @@ export var useResizeObserver = function useResizeObserver(ref, callback) {
       return;
     }
     getInitialSize();
-  }, [width, height, ref]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [width, height, ref].concat(_toConsumableArray(deps)));
   useLayoutEffect(function () {
     if (!(ref !== null && ref !== void 0 && ref.current)) {
       return;
@@ -68,7 +71,7 @@ export var useResizeObserver = function useResizeObserver(ref, callback) {
       observer = null;
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [ref.current]);
+  }, [ref].concat(_toConsumableArray(deps)));
   return {
     width: width,
     height: height

package/es/global/js/package-settings.js

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

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

@@ -95,7 +95,7 @@ var DatagridContent = exports.DatagridContent = function DatagridContent(_ref) {
   });
   var renderTable = function renderTable() {
     var _getTableProps;
-    return /*#__PURE__*/_react.default.createElement(_react2.Table, (0, _extends2.default)({}, getTableProps(), {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_react2.Table, (0, _extends2.default)({}, getTableProps(), {
       className: (0, _classnames.default)(withVirtualScroll ? '' : "".concat(blockClass, "__table-simple"), "".concat(blockClass, "__vertical-align-").concat(verticalAlign), (0, _defineProperty2.default)({}, "".concat(blockClass, "__variable-row-height"), variableRowHeight), (0, _defineProperty2.default)({}, "".concat(blockClass, "__table-with-inline-edit"), withInlineEdit), (0, _defineProperty2.default)({}, "".concat(blockClass, "__table-grid-active"), gridActive), (0, _defineProperty2.default)({}, "".concat(blockClass, "__table-is-resizing"), typeof columnResizing.isResizingColumn === 'string'), (_getTableProps = getTableProps()) === null || _getTableProps === void 0 ? void 0 : _getTableProps.className),
       role: withInlineEdit ? 'grid' : undefined,
       tabIndex: withInlineEdit ? 0 : -1,
@@ -116,7 +116,7 @@ var DatagridContent = exports.DatagridContent = function DatagridContent(_ref) {
       title: title
     }), !withVirtualScroll && /*#__PURE__*/_react.default.createElement(_DatagridHead.default, datagridState), /*#__PURE__*/_react.default.createElement(_DatagridBody.default, (0, _extends2.default)({}, datagridState, {
       rows: contentRows
-    })));
+    }))), (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) === 'panel' && renderPagination());
   };
   var _useMultipleKeyTracki = (0, _hooks2.useMultipleKeyTracking)({
       ref: withInlineEdit ? multiKeyTrackingRef : null,
@@ -152,6 +152,11 @@ var DatagridContent = exports.DatagridContent = function DatagridContent(_ref) {
       overflowType: "tag"
     });
   };
+  var renderPagination = function renderPagination() {
+    if ((contentRows === null || contentRows === void 0 ? void 0 : contentRows.length) > 0 && !isFetching && DatagridPagination) {
+      return /*#__PURE__*/_react.default.createElement(DatagridPagination, datagridState);
+    }
+  };
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_react2.TableContainer, {
     className: (0, _classnames.default)("".concat(gcClass), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(gcClass, "-active"), gridActive), "".concat(gcClass, "-active--without-toolbar"), withInlineEdit && !DatagridActions), "".concat(gcClass, "-inline-edit"), withInlineEdit), "".concat(blockClass, "__full-height"), withVirtualScroll || fullHeightDatagrid), "".concat(blockClass, "__with-pagination"), DatagridPagination), "".concat(blockClass, "__dense-header"), useDenseHeader)),
     title: gridTitle,
@@ -171,7 +176,7 @@ var DatagridContent = exports.DatagridContent = function DatagridContent(_ref) {
   }, renderTable()) : withVirtualScroll ? /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__virtualScrollContainer"),
     ref: gridRef
-  }, renderTable()) : renderTable()))), (contentRows === null || contentRows === void 0 ? void 0 : contentRows.length) > 0 && !isFetching && DatagridPagination && /*#__PURE__*/_react.default.createElement(DatagridPagination, datagridState), CustomizeColumnsTearsheet && /*#__PURE__*/_react.default.createElement(CustomizeColumnsTearsheet, {
+  }, renderTable()) : renderTable()))), (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) !== 'panel' && renderPagination(), CustomizeColumnsTearsheet && /*#__PURE__*/_react.default.createElement(CustomizeColumnsTearsheet, {
     instance: datagridState
   }));
 };

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

@@ -40,7 +40,9 @@ var DatagridRow = function DatagridRow(datagridState) {
     prepareRow = datagridState.prepareRow,
     key = datagridState.key,
     tableId = datagridState.tableId,
-    withExpandedRows = datagridState.withExpandedRows;
+    withExpandedRows = datagridState.withExpandedRows,
+    withMouseHover = datagridState.withMouseHover,
+    setMouseOverRowIndex = datagridState.setMouseOverRowIndex;
   var getVisibleNestedRowCount = function getVisibleNestedRowCount(_ref) {
     var isExpanded = _ref.isExpanded,
       subRows = _ref.subRows;
@@ -85,6 +87,9 @@ var DatagridRow = function DatagridRow(datagridState) {
     return null;
   };
   var handleMouseLeave = function handleMouseLeave(event) {
+    if (withMouseHover) {
+      setMouseOverRowIndex(null);
+    }
     var hoverRow = event.target.closest(".".concat(blockClass, "__carbon-row-expanded"));
     hoverRow === null || hoverRow === void 0 || hoverRow.classList.remove("".concat(blockClass, "__carbon-row-expanded-hover-active"));
   };

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

@@ -71,13 +71,17 @@ var FilterFlyout = function FilterFlyout(_ref) {
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     stackedLayout = _useState4[0],
     setStackedLayout = _useState4[1];
+  var handleCancel = function handleCancel() {
+    setOpen(false);
+    onCancel();
+  };
   var _useFilters = (0, _hooks2.useFilters)({
       updateMethod: updateMethod,
       filters: filters,
       setAllFilters: setAllFilters,
       variation: _constants.FLYOUT,
       reactTableFiltersState: reactTableFiltersState,
-      onCancel: onCancel
+      onCancel: handleCancel
     }),
     filtersState = _useFilters.filtersState,
     prevFiltersObjectArrayRef = _useFilters.prevFiltersObjectArrayRef,
@@ -187,8 +191,7 @@ var FilterFlyout = function FilterFlyout(_ref) {
         kind: 'secondary',
         label: secondaryActionLabel,
         onClick: cancel,
-        isExpressive: false,
-        disabled: shouldDisableButtons
+        isExpressive: false
       }],
       size: "md",
       buttonSize: "md"

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

@@ -196,8 +196,8 @@ var FilterPanel = function FilterPanel(_ref) {
     var filterHeadingHeight = (_filterHeadingRef$cur = filterHeadingRef.current) === null || _filterHeadingRef$cur === void 0 ? void 0 : _filterHeadingRef$cur.getBoundingClientRect().height;
     var filterSearchHeight = (_filterSearchRef$curr = filterSearchRef.current) === null || _filterSearchRef$curr === void 0 ? void 0 : _filterSearchRef$curr.getBoundingClientRect().height;
     var actionSetHeight = (_actionSetRef$current = actionSetRef.current) === null || _actionSetRef$current === void 0 ? void 0 : _actionSetRef$current.getBoundingClientRect().height;
-    var height = "calc(100vh - ".concat(filterHeadingHeight, "px - ").concat( /* istanbul ignore next */
-    showFilterSearch ? filterSearchHeight : 0, "px - ").concat(updateMethod === _constants.BATCH ? actionSetHeight : 0, "px)");
+    var height = panelOpen ? "calc(100vh - ".concat(filterHeadingHeight, "px - ").concat( /* istanbul ignore next */
+    showFilterSearch ? filterSearchHeight : 0, "px - ").concat(updateMethod === _constants.BATCH ? actionSetHeight : 0, "px)") : 0;
     return height;
   };
   return /*#__PURE__*/_react2.default.createElement(_framerMotion.motion.div, {

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

@@ -127,9 +127,9 @@ var useFilters = function useFilters(_ref2) {
     if (type === _constants.DATE && value.length > 0 && !value[1]) {
       return;
     }
-    var filtersObjectArrayCopy = (0, _toConsumableArray2.default)(filtersObjectArray);
+    var filterCopy = (0, _toConsumableArray2.default)(filtersObjectArray);
     // // check if the filter already exists in the array
-    var filter = filtersObjectArrayCopy.find(function (item) {
+    var filter = filterCopy.find(function (item) {
       return item.id === column;
     });
 
@@ -137,81 +137,39 @@ var useFilters = function useFilters(_ref2) {
     if (filter) {
       filter.value = value;
     } else {
-      filtersObjectArrayCopy.push({
+      filterCopy.push({
         id: column,
         value: value,
         type: type
       });
     }
-
-    // ATTENTION: this is where you would reset or remove individual filters from the filters array
-    if (type === _constants.CHECKBOX) {
-      /**
-      When all checkboxes of a group are all unselected the value still exists in the filtersObjectArray
-      This checks if all the checkboxes are selected = false and removes it from the array
-      */
-      var index = filtersObjectArrayCopy.findIndex(function (filter) {
-        return filter.id === column;
-      });
-
-      // If all the selected state is false remove from array
-      var shouldRemoveFromArray = filtersObjectArrayCopy[index].value.every(function (val) {
-        return val.selected === false;
-      });
-      if (shouldRemoveFromArray) {
-        filtersObjectArrayCopy.splice(index, 1);
-      }
-    } else if (type === _constants.DATE) {
-      if (value.length === 0) {
-        /**
-        Checks to see if the date value is an empty array, if it is that means the user wants
-        to reset the date filter
-        */
-        var _index = filtersObjectArrayCopy.findIndex(function (filter) {
-          return filter.id === column;
-        });
-
-        // Remove it from the filters array since there is nothing to filter
-        filtersObjectArrayCopy.splice(_index, 1);
-      }
-    } else if (type === _constants.DROPDOWN || type === _constants.RADIO) {
-      if (value === 'Any') {
-        /**
-        Checks to see if the selected value is 'Any', that means the user wants
-        to reset specific filter
-        */
-        var _index2 = filtersObjectArrayCopy.findIndex(function (filter) {
-          return filter.id === column;
-        });
-
-        // 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);
-      }
+    var index = filterCopy.findIndex(function (_ref4) {
+      var id = _ref4.id;
+      return id === column;
+    });
+    var clearCheckbox = type === _constants.CHECKBOX && filterCopy[index].value.every(function (_ref5) {
+      var selected = _ref5.selected;
+      return selected === false;
+    });
+    var clearDate = type === _constants.DATE && value.length === 0;
+    var clearAny = (type === _constants.DROPDOWN || type === _constants.RADIO) && value === 'Any';
+    var clearNum = type === _constants.NUMBER && value === '';
+    var shouldClear = clearCheckbox || clearDate || clearAny || clearNum;
+    if (shouldClear) {
+      filterCopy.splice(index, 1);
     }
-    setFiltersObjectArray(filtersObjectArrayCopy);
-
-    // // Automatically apply the filters if the updateMethod is instant
+    setFiltersObjectArray(filterCopy);
     if (updateMethod === _constants.INSTANT) {
-      setAllFilters(filtersObjectArrayCopy);
+      setAllFilters(filterCopy);
     }
   };
+
   /** Render the individual filter component */
-  var renderFilter = function renderFilter(_ref4) {
+  var renderFilter = function renderFilter(_ref6) {
     var _filtersState$column3, _filtersState$column4;
-    var type = _ref4.type,
-      column = _ref4.column,
-      components = _ref4.props;
+    var type = _ref6.type,
+      column = _ref6.column,
+      components = _ref6.props;
     var filter;
     var isPanel = variation === _constants.PANEL;
     if (!type) {
@@ -232,8 +190,8 @@ var useFilters = function useFilters(_ref2) {
         return /*#__PURE__*/_react2.default.createElement(_react.Checkbox, (0, _extends2.default)({
           key: option.id
         }, option, {
-          onChange: function onChange(_, _ref5) {
-            var checked = _ref5.checked;
+          onChange: function onChange(_, _ref7) {
+            var checked = _ref7.checked;
             handleCheckboxChange({
               checked: checked,
               filtersState: filtersState,
@@ -324,9 +282,9 @@ var useFilters = function useFilters(_ref2) {
             labelText: (_components$DefaultRa5 = components === null || components === void 0 || (_components$DefaultRa6 = components.DefaultRadioButton) === null || _components$DefaultRa6 === void 0 ? void 0 : _components$DefaultRa6.labelText) !== null && _components$DefaultRa5 !== void 0 ? _components$DefaultRa5 : 'Any',
             value: (_components$DefaultRa7 = components === null || components === void 0 || (_components$DefaultRa8 = components.DefaultRadioButton) === null || _components$DefaultRa8 === void 0 ? void 0 : _components$DefaultRa8.value) !== null && _components$DefaultRa7 !== void 0 ? _components$DefaultRa7 : 'Any'
           }, components.DefaultRadioButton)), components.RadioButton.map(function (radio) {
-            var _ref6, _radio$id;
+            var _ref8, _radio$id;
             return /*#__PURE__*/_react2.default.createElement(_react.RadioButton, (0, _extends2.default)({
-              key: (_ref6 = (_radio$id = radio.id) !== null && _radio$id !== void 0 ? _radio$id : radio.labelText) !== null && _ref6 !== void 0 ? _ref6 : radio.value
+              key: (_ref8 = (_radio$id = radio.id) !== null && _radio$id !== void 0 ? _radio$id : radio.labelText) !== null && _ref8 !== void 0 ? _ref8 : radio.value
             }, radio));
           })));
         }
@@ -335,9 +293,9 @@ var useFilters = function useFilters(_ref2) {
         filter = /*#__PURE__*/_react2.default.createElement(_react.Dropdown, (0, _extends2.default)({}, components.Dropdown, {
           selectedItem: ((_filtersState$column3 = filtersState[column]) === null || _filtersState$column3 === void 0 ? void 0 : _filtersState$column3.value) === '' ? 'Any' : (_filtersState$column4 = filtersState[column]) === null || _filtersState$column4 === void 0 ? void 0 : _filtersState$column4.value,
           items: ['Any'].concat((0, _toConsumableArray2.default)(components.Dropdown.items)),
-          onChange: function onChange(_ref7) {
+          onChange: function onChange(_ref9) {
             var _components$Dropdown$, _components$Dropdown;
-            var selectedItem = _ref7.selectedItem;
+            var selectedItem = _ref9.selectedItem;
             setFiltersState(_objectSpread(_objectSpread({}, filtersState), {}, (0, _defineProperty2.default)({}, column, {
               value: selectedItem,
               type: type

package/lib/components/Datagrid/useRowIsMouseOver.js

@@ -42,7 +42,9 @@ var useRowIsMouseOver = function useRowIsMouseOver(hooks) {
       });
     });
     Object.assign(instance, {
-      rows: rowsWithMouseOver
+      rows: rowsWithMouseOver,
+      withMouseHover: true,
+      setMouseOverRowIndex: setMouseOverRowIndex
     });
     hooks.getRowProps.push(getRowProps);
   };

package/lib/components/DelimitedList/DelimitedList.docs-page.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _StoryDocsPage = require("../../global/js/utils/StoryDocsPage");
+var stories = _interopRequireWildcard(require("./DelimitedList.stories"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var DocsPage = function DocsPage() {
+  return /*#__PURE__*/_react.default.createElement(_StoryDocsPage.StoryDocsPage, {
+    blocks: [{
+      story: stories.delimited
+    }, {
+      story: stories.notDelimited
+    }, {
+      story: stories.empty
+    }]
+  });
+};
+var _default = exports.default = DocsPage;

package/lib/components/DelimitedList/DelimitedList.js

@@ -0,0 +1,78 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DelimitedList = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _devtools = require("../../global/js/utils/devtools");
+var _settings = require("../../settings");
+var _excluded = ["className", "delimiter", "items", "truncate"];
+/**
+ * Copyright IBM Corp. 2024, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+// Import portions of React that are needed.
+// Other standard imports.
+var blockClass = "".concat(_settings.pkg.prefix, "--delimited-list");
+var componentName = 'DelimitedList';
+var defaults = {
+  delimiter: ', ',
+  items: [],
+  truncate: true
+};
+
+/**
+ * `DelimitedList` converts an array of items into a single line of
+ * comma-separated values.
+ */
+var DelimitedList = exports.DelimitedList = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    _ref$delimiter = _ref.delimiter,
+    delimiter = _ref$delimiter === void 0 ? defaults.delimiter : _ref$delimiter,
+    _ref$items = _ref.items,
+    items = _ref$items === void 0 ? defaults.items : _ref$items,
+    _ref$truncate = _ref.truncate,
+    truncate = _ref$truncate === void 0 ? defaults.truncate : _ref$truncate,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, {
+    className: (0, _classnames.default)(blockClass, className, [truncate && "".concat(blockClass, "-truncate")]),
+    ref: ref
+  }, (0, _devtools.getDevtoolsProps)(componentName)), items.length > 0 ? items.join(delimiter) : '–');
+});
+
+// Return a placeholder if not released and not enabled by feature flag
+exports.DelimitedList = DelimitedList = _settings.pkg.checkComponentEnabled(DelimitedList, componentName);
+
+// The display name of the component, used by React. Note that displayName
+// is used in preference to relying on function.name.
+DelimitedList.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.
+DelimitedList.propTypes = {
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: _propTypes.default.string,
+  /**
+   * The character(s) used to separate the items.
+   */
+  delimiter: _propTypes.default.string,
+  /**
+   * Array of items to be listed.
+   */
+  items: _propTypes.default.arrayOf(_propTypes.default.any),
+  /**
+   * Toggle the component's ability to truncate or not.
+   */
+  truncate: _propTypes.default.bool
+};

package/lib/components/DelimitedList/index.js

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