@carbon/ibm-products 1.59.1 → 1.61.0

package/es/components/FilterSummary/FilterSummary.js

@@ -1,3 +1,8 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["key", "value"];
+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) { _defineProperty(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; }
 /**
  * Copyright IBM Corp. 2022, 2022
  *
@@ -21,15 +26,18 @@ var FilterSummary = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _ref$filters = _ref.filters,
     filters = _ref$filters === void 0 ? [] : _ref$filters,
     _ref$renderLabel = _ref.renderLabel,
-    renderLabel = _ref$renderLabel === void 0 ? null : _ref$renderLabel;
+    renderLabel = _ref$renderLabel === void 0 ? null : _ref$renderLabel,
+    _ref$overflowType = _ref.overflowType,
+    overflowType = _ref$overflowType === void 0 ? 'default' : _ref$overflowType;
   var tagFilters = filters.map(function (_ref2) {
     var _renderLabel;
     var key = _ref2.key,
-      value = _ref2.value;
-    return {
+      value = _ref2.value,
+      rest = _objectWithoutProperties(_ref2, _excluded);
+    return _objectSpread(_objectSpread({}, rest), {}, {
       type: 'gray',
       label: (_renderLabel = renderLabel === null || renderLabel === void 0 ? void 0 : renderLabel(key, value)) !== null && _renderLabel !== void 0 ? _renderLabel : "".concat(key, ": ").concat(value)
-    };
+    });
   });
   return /*#__PURE__*/React.createElement("div", {
     ref: ref,
@@ -39,7 +47,8 @@ var FilterSummary = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     allTagsModalSearchPlaceholderText: "Search all tags",
     allTagsModalTitle: "All tags",
     showAllTagsLabel: "View all tags",
-    tags: tagFilters
+    tags: tagFilters,
+    overflowType: overflowType
   }), /*#__PURE__*/React.createElement(Button, {
     kind: "ghost",
     size: "sm",
@@ -53,6 +62,7 @@ FilterSummary.propTypes = {
   clearFilters: PropTypes.func.isRequired,
   clearFiltersText: PropTypes.string,
   filters: PropTypes.arrayOf(PropTypes.object).isRequired,
+  overflowType: PropTypes.oneOf(['default', 'tag']),
   renderLabel: PropTypes.func
 };
 export default FilterSummary;

package/es/components/TagSet/TagSet.js

@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["align", "allTagsModalTarget", "className", "maxVisible", "multiline", "overflowAlign", "overflowClassName", "overflowDirection", "allTagsModalTitle", "allTagsModalSearchLabel", "allTagsModalSearchPlaceholderText", "showAllTagsLabel", "tags"],
+var _excluded = ["align", "allTagsModalTarget", "className", "maxVisible", "multiline", "overflowAlign", "overflowClassName", "overflowType", "overflowDirection", "allTagsModalTitle", "allTagsModalSearchLabel", "allTagsModalSearchPlaceholderText", "showAllTagsLabel", "tags"],
   _excluded2 = ["label", "id"],
   _excluded3 = ["label"];
 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; }
@@ -23,7 +23,7 @@ import { TagSetModal } from './TagSetModal';
 import { Tag } from 'carbon-components-react';
 import { useResizeObserver } from '../../global/js/hooks/useResizeObserver';
 import { getDevtoolsProps } from '../../global/js/utils/devtools';
-import { prepareProps, isRequiredIf } from '../../global/js/utils/props-helper';
+import { isRequiredIf } from '../../global/js/utils/props-helper';
 import { pkg } from '../../settings';
 var componentName = 'TagSet';
 var blockClass = "".concat(pkg.prefix, "--tag-set");
@@ -34,7 +34,8 @@ var defaults = {
   align: 'start',
   // allTagsModalTarget: document.body,
   overflowAlign: 'center',
-  overflowDirection: 'bottom'
+  overflowDirection: 'bottom',
+  overflowType: 'default'
 };
 export var TagSet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$align = _ref.align,
@@ -46,6 +47,8 @@ export var TagSet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _ref$overflowAlign = _ref.overflowAlign,
     overflowAlign = _ref$overflowAlign === void 0 ? defaults.overflowAlign : _ref$overflowAlign,
     overflowClassName = _ref.overflowClassName,
+    _ref$overflowType = _ref.overflowType,
+    overflowType = _ref$overflowType === void 0 ? defaults.overflowType : _ref$overflowType,
     _ref$overflowDirectio = _ref.overflowDirection,
     overflowDirection = _ref$overflowDirectio === void 0 ? defaults.overflowDirection : _ref$overflowDirectio,
     allTagsModalTitle = _ref.allTagsModalTitle,
@@ -110,8 +113,7 @@ export var TagSet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         }
       }, /*#__PURE__*/React.createElement(Tag, _extends({}, other, {
         // ensure id is not duplicated
-        "data-original-id": id,
-        filter: false
+        "data-original-id": id
       }), label));
     }) : []);
     setSizingTags(newSizingTags);
@@ -122,7 +124,6 @@ export var TagSet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       var label = _ref3.label,
         other = _objectWithoutProperties(_ref3, _excluded3);
       return /*#__PURE__*/React.createElement(Tag, _extends({}, other, {
-        filter: false,
         key: "displayed-tag-".concat(index)
       }), label);
     }) : [];
@@ -143,13 +144,14 @@ export var TagSet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       onShowAllClick: handleShowAllClick,
       overflowTags: newOverflowTags,
       overflowAlign: overflowAlign,
+      overflowType: overflowType,
       overflowDirection: overflowDirection,
       showAllTagsLabel: showAllTagsLabel,
       key: "displayed-tag-overflow",
       ref: overflowTag
     }));
     setDisplayedTags(newDisplayedTags);
-  }, [displayCount, overflowAlign, overflowClassName, overflowDirection, showAllTagsLabel, tags]);
+  }, [displayCount, overflowAlign, overflowType, overflowClassName, overflowDirection, showAllTagsLabel, tags]);
   var checkFullyVisibleTags = useCallback(function () {
     if (multiline) {
       return setDisplayCount(maxVisible);
@@ -302,6 +304,10 @@ TagSet.propTypes = {
    * overflowDirection from the standard tooltip
    */
   overflowDirection: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
+  /**
+   * Type of rendering displayed inside of the tag overflow component
+   */
+  overflowType: PropTypes.oneOf(['default', 'tag']),
   /**
    * label for the overflow show all tags link.
    *
@@ -313,12 +319,10 @@ TagSet.propTypes = {
    * with properties: **label**\* (required) to supply the tag content, and
    * other properties will be passed to the Carbon Tag component, such as
    * **type**, **disabled**, **ref**, **className** , and any other Tag props.
-   * NOTE: **filter** is not supported. Any other fields in the object will be passed through to the HTML element
-   * as HTML attributes.
    *
    * See https://react.carbondesignsystem.com/?path=/docs/components-tag--default
    */
-  tags: PropTypes.arrayOf(PropTypes.shape(_objectSpread(_objectSpread({}, prepareProps(Tag.propTypes, 'filter')), {}, {
+  tags: PropTypes.arrayOf(PropTypes.shape(_objectSpread(_objectSpread({}, Tag.propTypes), {}, {
     label: PropTypes.string.isRequired,
     // we duplicate this prop to improve the DocGen
     type: PropTypes.oneOf(tagTypes)

package/es/components/TagSet/TagSetOverflow.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["allTagsModalSearchThreshold", "className", "onShowAllClick", "overflowAlign", "overflowDirection", "overflowTags", "showAllTagsLabel"];
+var _excluded = ["allTagsModalSearchThreshold", "className", "onShowAllClick", "overflowAlign", "overflowDirection", "overflowTags", "overflowType", "showAllTagsLabel"];
 //
 // Copyright IBM Corp. 2021, 2021
 //
@@ -35,6 +35,7 @@ export var TagSetOverflow = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _ref$overflowDirectio = _ref.overflowDirection,
     overflowDirection = _ref$overflowDirectio === void 0 ? defaults.overflowDirection : _ref$overflowDirectio,
     overflowTags = _ref.overflowTags,
+    overflowType = _ref.overflowType,
     showAllTagsLabel = _ref.showAllTagsLabel,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useState = useState(false),
@@ -78,12 +79,18 @@ export var TagSetOverflow = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, overflowTags.filter(function (_, index) {
     return overflowTags.length > allTagsModalSearchThreshold ? index < allTagsModalSearchThreshold : index <= allTagsModalSearchThreshold;
   }).map(function (tag, index) {
+    var _cx2;
+    var tagProps = {};
+    if (overflowType === 'tag') {
+      tagProps.type = 'high-contrast';
+    }
+    if (overflowType === 'default') {
+      tagProps.filter = false;
+    }
     return /*#__PURE__*/React.createElement("li", {
-      className: "".concat(blockClass, "__tag-item"),
+      className: cx("".concat(blockClass, "__tag-item"), (_cx2 = {}, _defineProperty(_cx2, "".concat(blockClass, "__tag-item--default"), overflowType === 'default'), _defineProperty(_cx2, "".concat(blockClass, "__tag-item--tag"), overflowType === 'tag'), _cx2)),
       key: index
-    }, /*#__PURE__*/React.cloneElement(tag, {
-      filter: false
-    }));
+    }, /*#__PURE__*/React.cloneElement(tag, tagProps));
   })), overflowTags.length > allTagsModalSearchThreshold && /*#__PURE__*/React.createElement(Link, {
     className: "".concat(blockClass, "__show-all-tags-link"),
     href: "",
@@ -117,6 +124,10 @@ TagSetOverflow.propTypes = {
    * tags shown in overflow
    */
   overflowTags: PropTypes.arrayOf(PropTypes.object).isRequired,
+  /**
+   * Type of rendering displayed inside of the tag overflow component
+   */
+  overflowType: PropTypes.oneOf(['default', 'tag']),
   /**
    * label for the overflow show all tags link
    */

package/es/global/js/hooks/useWindowScroll.js

@@ -68,4 +68,9 @@ export function useNearestScroll(ref, effect, deps) {
     scrollableTarget = window;
   }
   return useTargetScroll(scrollableTarget, effect, deps, throttle);
+}
+export function useScroll(ref, effect, deps) {
+  var _ref$current;
+  var throttle = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
+  return useTargetScroll((_ref$current = ref === null || ref === void 0 ? void 0 : ref.current) !== null && _ref$current !== void 0 ? _ref$current : null, effect, deps, throttle);
 }

package/es/global/js/utils/getNodeTextContent.js

@@ -0,0 +1,51 @@
+import _typeof from "@babel/runtime/helpers/typeof";
+/**
+ * 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.
+ */
+
+/**
+ * Returns a compiled string of all the text content of a React node and any of its child nodes.
+ * This is meant to be used in a limited fashion to convert a "styled" sentence into a single string:
+ *   e.g. <p>Title <b>Page</b>.</p> --> "Title Page."
+ * This will likely not work for arrays of nodes due to the lack of word spacing:
+ *   e.g. <ul>
+ *          <li>Item 1</li>
+ *          <li>Item 2</li>
+ *          <li>Item 3</li>
+ *        </ul>
+ *        --> "Item 1Item 2Item 3"
+ * @param {Node} node A React node
+ * @returns {string}
+ */
+export var getNodeTextContent = function getNodeTextContent(node) {
+  if (node == null) {
+    return '';
+  }
+  switch (_typeof(node)) {
+    case 'string':
+    case 'number':
+      return node.toString();
+    case 'object':
+      {
+        if (node instanceof Array) {
+          return node.map(getNodeTextContent).join('');
+        }
+        if ('props' in node) {
+          return getNodeTextContent(node.props.children);
+        }
+
+        // Ignore any other JavaScript 'object' types.
+        return '';
+      }
+    case 'function':
+      {
+        return getNodeTextContent(node());
+      }
+    default:
+      // Ignore all other JavaScript types.
+      return '';
+  }
+};

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

@@ -40,7 +40,8 @@ var Datagrid = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     datagridState: datagridState
   };
   return /*#__PURE__*/_react.default.createElement(_FilterProvider.FilterProvider, {
-    filters: filters
+    filters: filters,
+    filterProps: filterProps
   }, /*#__PURE__*/_react.default.createElement(_InlineEditContext.InlineEditProvider, null, /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, {
     id: tableId,
     ref: ref,

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

@@ -26,6 +26,8 @@ var _FilterPanel = _interopRequireDefault(require("./addons/Filtering/FilterPane
 var _FilterSummary = require("../../FilterSummary");
 var _Filtering = require("./addons/Filtering");
 var _constants = require("./addons/Filtering/constants");
+var _hooks3 = require("./addons/Filtering/hooks");
+var _FilterProvider = require("./addons/Filtering/FilterProvider");
 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; }
 /**
@@ -72,6 +74,7 @@ var DatagridContent = function DatagridContent(_ref) {
     DatagridActions = datagridState.DatagridActions,
     totalColumnsWidth = datagridState.totalColumnsWidth,
     gridRef = datagridState.gridRef,
+    setAllFilters = datagridState.setAllFilters,
     state = datagridState.state,
     page = datagridState.page,
     rows = datagridState.rows;
@@ -137,13 +140,18 @@ var DatagridContent = function DatagridContent(_ref) {
       gridElement.style.setProperty("--".concat(blockClass, "--grid-header-height"), (0, _layout.px)((tableHeader === null || tableHeader === void 0 ? void 0 : tableHeader.clientHeight) || 0));
     }
   }, [withInlineEdit, tableId, totalColumnsWidth, datagridState, gridActive]);
+  (0, _hooks3.useSubscribeToEventEmitter)(_constants.CLEAR_SINGLE_FILTER, function (id) {
+    return (0, _FilterProvider.clearSingleFilter)(id, setAllFilters, state);
+  });
   var renderFilterSummary = function renderFilterSummary() {
     return state.filters.length > 0 && /*#__PURE__*/_react.default.createElement(_FilterSummary.FilterSummary, {
       className: "".concat(blockClass, "__filter-summary"),
       filters: filterTags,
       clearFilters: function clearFilters() {
         return EventEmitter.dispatch(_constants.CLEAR_FILTERS);
-      }
+      },
+      renderLabel: filterProps.renderLabel,
+      overflowType: "tag"
     });
   };
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(TableContainer, {

package/lib/components/Datagrid/Datagrid/DatagridEmptyBody.js

@@ -40,14 +40,14 @@ var DatagridEmptyBody = function DatagridEmptyBody(datagridState) {
     action: emptyStateAction,
     link: emptyStateLink
   };
+  var validEmptyStates = ['error', 'noData', 'notFound'];
   return /*#__PURE__*/_react.default.createElement(TableBody, (0, _extends2.default)({}, getTableBodyProps({
     role: false
   }), {
     className: "".concat(blockClass, "__empty-state-body")
   }), /*#__PURE__*/_react.default.createElement(TableRow, null, /*#__PURE__*/_react.default.createElement(TableCell, {
-    colSpan: headers.length,
-    className: "".concat(blockClass, "__empty-state-cell")
-  }, emptyStateType === 'error' && /*#__PURE__*/_react.default.createElement(_EmptyStates.ErrorEmptyState, emptyStateProps), emptyStateType === 'noData' && /*#__PURE__*/_react.default.createElement(_EmptyStates.NoDataEmptyState, emptyStateProps), emptyStateType === 'notFound' && /*#__PURE__*/_react.default.createElement(_EmptyStates.NotFoundEmptyState, emptyStateProps))));
+    colSpan: headers.length
+  }, validEmptyStates.includes(emptyStateType) ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, emptyStateType === 'error' && /*#__PURE__*/_react.default.createElement(_EmptyStates.ErrorEmptyState, emptyStateProps), emptyStateType === 'noData' && /*#__PURE__*/_react.default.createElement(_EmptyStates.NoDataEmptyState, emptyStateProps), emptyStateType === 'notFound' && /*#__PURE__*/_react.default.createElement(_EmptyStates.NotFoundEmptyState, emptyStateProps)) : /*#__PURE__*/_react.default.createElement(_EmptyStates.EmptyState, emptyStateProps))));
 };
 var _default = DatagridEmptyBody;
 exports.default = _default;

package/lib/components/Datagrid/Datagrid/DatagridHeaderRow.js

@@ -16,7 +16,7 @@ var _layout = require("@carbon/layout");
 var _commonColumnIds = require("../common-column-ids");
 var _settings = require("../../../settings");
 var _stateReducer = require("./addons/stateReducer");
-var _getColTitle = _interopRequireDefault(require("../utils/getColTitle"));
+var _getNodeTextContent = require("../../../global/js/utils/getNodeTextContent");
 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; }
 /**
@@ -31,7 +31,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
 var getAccessibilityProps = function getAccessibilityProps(header) {
   var props = {};
-  var title = (0, _getColTitle.default)(header);
+  var title = (0, _getNodeTextContent.getNodeTextContent)(header.Header);
   if (title) {
     props.title = title;
   } else {

package/lib/components/Datagrid/Datagrid/DatagridSelectAll.js

@@ -52,11 +52,23 @@ var SelectAll = function SelectAll(datagridState) {
   var _getProps = getProps(),
     onChange = _getProps.onChange,
     selectProps = (0, _objectWithoutProperties2.default)(_getProps, _excluded);
+  var _ref = selectProps || {},
+    indeterminate = _ref.indeterminate;
+  var handleSelectAllChange = function handleSelectAllChange(event) {
+    if (indeterminate) {
+      return onChange === null || onChange === void 0 ? void 0 : onChange({
+        target: {
+          checked: false
+        }
+      });
+    }
+    return onChange === null || onChange === void 0 ? void 0 : onChange(event);
+  };
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)("".concat(blockClass, "__head-select-all"), "".concat(blockClass, "__checkbox-cell"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__checkbox-cell-sticky-left"), isFirstColumnStickyLeft && windowSize > 671))
   }, /*#__PURE__*/_react.default.createElement(TableSelectAll, (0, _extends2.default)({}, selectProps, {
     name: "".concat(tableId, "-select-all-checkbox-name"),
-    onSelect: onChange,
+    onSelect: handleSelectAllChange,
     disabled: isFetching || selectProps.disabled,
     id: "".concat(tableId, "-select-all-checkbox-id")
   })));

package/lib/components/Datagrid/Datagrid/DatagridToolbar.js

@@ -18,7 +18,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 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
+ * Copyright IBM Corp. 2022, 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.
@@ -80,20 +80,8 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
       menuOptionsClass: "".concat(blockClass, "__button-menu-options"),
       flipped: true
     }, toolbarBatchActions && toolbarBatchActions.map(function (batchAction, index) {
-      if (index < 2) {
-        if (displayAllInMenu) {
-          return /*#__PURE__*/_react.default.createElement(_ButtonMenu.ButtonMenuItem, {
-            key: "".concat(batchAction.label, "-").concat(index),
-            itemText: batchAction.label,
-            onClick: function onClick() {
-              batchAction.onClick();
-              if (batchAction.type === 'select_all') {
-                toggleAllRowsSelected(true);
-              }
-            }
-          });
-        }
-        return null;
+      if (index < 2 && !displayAllInMenu) {
+        return;
       }
       return /*#__PURE__*/_react.default.createElement(_ButtonMenu.ButtonMenuItem, {
         key: "".concat(batchAction.label, "-").concat(index),

package/lib/components/Datagrid/Datagrid/DraggableElement.js

@@ -1,21 +1,19 @@
 "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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var React = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _iconsReact = require("@carbon/icons-react");
-var _reactDnd = require("react-dnd");
 var _classnames = _interopRequireDefault(require("classnames"));
 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; }
+var _utilities = require("@dnd-kit/utilities");
+var _sortable = require("@dnd-kit/sortable");
 // @flow
 /*
  * Licensed Materials - Property of IBM
@@ -25,161 +23,57 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * restricted by GSA ADP Schedule Contract with IBM Corp.
  */
 
-var useEffect = React.useEffect,
-  useRef = React.useRef,
-  useState = React.useState;
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
-var DRAG_TYPE = "".concat(blockClass, "__shared-ui-draggable-element");
 var DraggableElement = function DraggableElement(_ref) {
   var _cx;
   var id = _ref.id,
-    index = _ref.index,
-    listData = _ref.listData,
     children = _ref.children,
-    type = _ref.type,
+    classList = _ref.classList,
     disabled = _ref.disabled,
     ariaLabel = _ref.ariaLabel,
-    onGrab = _ref.onGrab,
-    onArrowKeyDown = _ref.onArrowKeyDown,
-    isFocused = _ref.isFocused,
     isSticky = _ref.isSticky,
-    moveElement = _ref.moveElement,
-    selected = _ref.selected,
-    _ref$positionLabel = _ref.positionLabel,
-    positionLabel = _ref$positionLabel === void 0 ? 'Current position {index} of {total}' : _ref$positionLabel,
-    _ref$grabbedLabel = _ref.grabbedLabel,
-    grabbedLabel = _ref$grabbedLabel === void 0 ? '{itemName} grabbed.' : _ref$grabbedLabel,
-    _ref$droppedLabel = _ref.droppedLabel,
-    droppedLabel = _ref$droppedLabel === void 0 ? '{itemName} dropped.' : _ref$droppedLabel;
-  var ref = useRef();
-  var _useDrop = (0, _reactDnd.useDrop)({
-      accept: DRAG_TYPE + type,
-      collect: function collect(monitor) {
-        return {
-          isOver: !!monitor.isOver()
-        };
-      },
-      drop: function drop(item) {
-        moveElement(item.index, index);
-      },
-      canDrop: function canDrop() {
-        return !disabled;
-      },
-      hover: function hover(item) {
-        var dragIndex = item.index;
-        var hoverIndex = index;
-        // Don't replace items with themselves
-        if (dragIndex === hoverIndex || disabled) {
-          return;
-        }
-        moveElement(dragIndex, hoverIndex);
-        // Time to actually perform the action
-        // Note: we're mutating the monitor item here!
-        // Generally it's better to avoid mutations,
-        // but it's good here for the sake of performance
-        // to avoid expensive index searches.
-        // eslint-disable-next-line no-param-reassign
-        item.index = hoverIndex;
-      }
+    selected = _ref.selected;
+  var _useSortable = (0, _sortable.useSortable)({
+      id: id
     }),
-    _useDrop2 = (0, _slicedToArray2.default)(_useDrop, 2),
-    isOver = _useDrop2[0].isOver,
-    drop = _useDrop2[1];
-  var _useDrag = (0, _reactDnd.useDrag)({
-      type: DRAG_TYPE + type,
-      item: {
-        id: id,
-        index: index
-      },
-      canDrag: function canDrag() {
-        return !disabled;
-      },
-      collect: function collect(monitor) {
-        return {
-          isDragging: monitor.isDragging()
-        };
-      }
-    }),
-    _useDrag2 = (0, _slicedToArray2.default)(_useDrag, 3),
-    isDragging = _useDrag2[0].isDragging,
-    drag = _useDrag2[1],
-    preview = _useDrag2[2];
-  useEffect(function () {
-    if (isFocused && ref && ref.current) {
-      ref.current.focus();
-    }
-  }, [isFocused]);
-  var _useState = useState(false),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    isGrabbed = _useState2[0],
-    setIsGrabbed = _useState2[1];
-  var _useState3 = useState(isFocused),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    isFocusedOnItem = _useState4[0],
-    setIsFocusedOnItem = _useState4[1];
-  drop(ref);
-  var content = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    attributes = _useSortable.attributes,
+    isDragging = _useSortable.isDragging,
+    listeners = _useSortable.listeners,
+    setNodeRef = _useSortable.setNodeRef,
+    transform = _useSortable.transform,
+    transition = _useSortable.transition;
+  var content = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)({
       disabled: disabled
     }, "".concat(blockClass, "__draggable-handleStyle"))
-  }, isSticky ? /*#__PURE__*/React.createElement(_iconsReact.Locked16, null) : /*#__PURE__*/React.createElement(_iconsReact.Draggable16, null)), children);
-  return /*#__PURE__*/React.createElement("li", {
-    className: (0, _classnames.default)((_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__draggable-handleHolder-isOver"), isOver && !disabled), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__draggable-handleHolder-grabbed"), isGrabbed), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__draggable-handleHolder-selected"), selected), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__draggable-handleHolder--sticky"), isSticky), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__draggable-handleHolder"), !selected), _cx)),
-    ref: ref,
-    "aria-selected": isFocused,
-    role: "option",
-    tabIndex: isFocused ? 0 : -1,
-    onKeyPress: function onKeyPress(e) {
-      if (e.key === ' ' && e.target === e.currentTarget && !disabled) {
-        var positionText = positionLabel.replace('{index}', index + 1).replace('{total}', listData.length);
-        var grabAriaText = (isGrabbed ? droppedLabel : grabbedLabel).replace('{itemName}', ariaLabel);
-        onGrab(grabAriaText + positionText);
-        setIsGrabbed(!isGrabbed);
-        e.preventDefault();
-      }
-    },
-    onKeyDown: function onKeyDown(e) {
-      if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
-        onArrowKeyDown(e, isGrabbed, index);
-      }
-    },
-    onBlur: function onBlur(e) {
-      // handle when focus move to inner elements
-      setIsFocusedOnItem(e.currentTarget === e.target);
-    },
-    onFocus: function onFocus(e) {
-      // handle when focus move to li element
-      setIsFocusedOnItem(e.currentTarget === e.target);
-    }
-  }, /*#__PURE__*/React.createElement("span", {
+  }, isSticky ? /*#__PURE__*/_react.default.createElement(_iconsReact.Locked16, null) : /*#__PURE__*/_react.default.createElement(_iconsReact.Draggable16, null)), children);
+  var style = {
+    transform: _utilities.CSS.Transform.toString(transform),
+    transition: transition
+  };
+  return /*#__PURE__*/_react.default.createElement("li", (0, _extends2.default)({
+    className: (0, _classnames.default)(classList, "".concat(blockClass, "__draggable-handleHolder"), (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__draggable-handleHolder--selected"), selected), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__draggable-handleHolder--sticky"), isSticky), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__draggable-handleHolder--dragging"), isDragging), _cx)),
+    id: id,
+    ref: setNodeRef,
+    style: style
+  }, attributes, listeners, {
+    disabled: disabled,
+    "aria-selected": selected,
+    role: "option"
+  }), /*#__PURE__*/_react.default.createElement("span", {
     className: "".concat(blockClass, "__shared-ui--assistive-text")
-  }, ariaLabel), isDragging && !isOver ? /*#__PURE__*/React.createElement("div", {
-    ref: preview,
-    className: "".concat(blockClass, "__draggable-handleHolder-droppable ").concat(blockClass, "__draggable-handleHolder-droppable--origin")
-  }, content) : /*#__PURE__*/React.createElement("div", {
-    ref: drag,
-    "aria-hidden": isFocused && isFocusedOnItem // if focus on li, hide the children from aria
-    ,
+  }, ariaLabel), /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)((0, _defineProperty2.default)({}, "".concat(blockClass, "__draggable-handleStyle"), !disabled), ["".concat(blockClass, "__draggable-handleHolder-droppable")])
-  }, (!isOver || disabled) && content));
+  }, content));
 };
 DraggableElement.propTypes = {
   ariaLabel: _propTypes.default.string.isRequired,
   children: _propTypes.default.element.isRequired,
+  classList: _propTypes.default.string,
   disabled: _propTypes.default.bool,
-  droppedLabel: _propTypes.default.string,
-  grabbedLabel: _propTypes.default.string,
   id: _propTypes.default.string.isRequired,
-  index: _propTypes.default.number.isRequired,
-  isFocused: _propTypes.default.bool.isRequired,
   isSticky: _propTypes.default.bool,
-  listData: _propTypes.default.array.isRequired,
-  moveElement: _propTypes.default.func.isRequired,
-  onArrowKeyDown: _propTypes.default.func.isRequired,
-  onGrab: _propTypes.default.func.isRequired,
-  positionLabel: _propTypes.default.string,
-  selected: _propTypes.default.bool,
-  type: _propTypes.default.string.isRequired
+  selected: _propTypes.default.bool
 };
 var _default = DraggableElement;
 exports.default = _default;