@carbon/ibm-products 2.11.3 → 2.12.1

package/es/components/CreateFullPage/CreateFullPage.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["backButtonText", "cancelButtonText", "children", "className", "initialStep", "modalDangerButtonText", "modalDescription", "modalSecondaryButtonText", "modalTitle", "nextButtonText", "onClose", "onRequestSubmit", "firstFocusElement", "submitButtonText", "title"];
+var _excluded = ["breadcrumbsOverflowAriaLabel", "breadcrumbs", "backButtonText", "cancelButtonText", "children", "className", "initialStep", "maxVisibleBreadcrumbs", "modalDangerButtonText", "modalDescription", "modalSecondaryButtonText", "modalTitle", "nextButtonText", "onClose", "onRequestSubmit", "firstFocusElement", "submitButtonText", "noTrailingSlash", "title", "secondaryTitle"];
 /**
  * Copyright IBM Corp. 2021, 2023
  *
@@ -10,7 +10,7 @@ var _excluded = ["backButtonText", "cancelButtonText", "children", "className",
  */
 
 // Import portions of React that are needed.
-import React, { useEffect, useState, createContext } from 'react';
+import React, { useEffect, useState, createContext, useRef } from 'react';
 
 // Other standard imports.
 import PropTypes from 'prop-types';
@@ -25,6 +25,7 @@ import { ActionSet } from '../ActionSet';
 import { usePreviousValue, useValidCreateStepCount, useResetCreateComponent, useCreateComponentFocus, useCreateComponentStepChange } from '../../global/js/hooks';
 import { lastIndexInArray } from '../../global/js/utils/lastIndexInArray';
 import { getNumberOfHiddenSteps } from '../../global/js/utils/getNumberOfHiddenSteps';
+import { SimpleHeader, overflowAriaLabel_required_if_breadcrumbs_exist } from '../SimpleHeader/SimpleHeader';
 var blockClass = "".concat(pkg.prefix, "--create-full-page");
 var componentName = 'CreateFullPage';
 
@@ -50,11 +51,14 @@ include `<Row>` and `<Column>` components inside of each `CreateFullPageStep`
 component to get the desired affect.
  */
 export var CreateFullPage = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var backButtonText = _ref.backButtonText,
+  var breadcrumbsOverflowAriaLabel = _ref.breadcrumbsOverflowAriaLabel,
+    breadcrumbs = _ref.breadcrumbs,
+    backButtonText = _ref.backButtonText,
     cancelButtonText = _ref.cancelButtonText,
     children = _ref.children,
     className = _ref.className,
     initialStep = _ref.initialStep,
+    maxVisibleBreadcrumbs = _ref.maxVisibleBreadcrumbs,
     modalDangerButtonText = _ref.modalDangerButtonText,
     modalDescription = _ref.modalDescription,
     modalSecondaryButtonText = _ref.modalSecondaryButtonText,
@@ -64,7 +68,9 @@ export var CreateFullPage = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onRequestSubmit = _ref.onRequestSubmit,
     firstFocusElement = _ref.firstFocusElement,
     submitButtonText = _ref.submitButtonText,
+    noTrailingSlash = _ref.noTrailingSlash,
     title = _ref.title,
+    secondaryTitle = _ref.secondaryTitle,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useState = useState([]),
     _useState2 = _slicedToArray(_useState, 2),
@@ -114,6 +120,11 @@ export var CreateFullPage = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _useState22 = _slicedToArray(_useState21, 2),
     lastIncludedStep = _useState22[0],
     setLastIncludedStep = _useState22[1];
+  var _useState23 = useState(0),
+    _useState24 = _slicedToArray(_useState23, 2),
+    headerHeight = _useState24[0],
+    setHeaderHeight = _useState24[1];
+  var headerRef = useRef(null);
   useEffect(function () {
     var firstItem = stepData.findIndex(function (item) {
       return item === null || item === void 0 ? void 0 : item.shouldIncludeStep;
@@ -130,6 +141,13 @@ export var CreateFullPage = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       setCurrentStep(Number(initialStep + numberOfHiddenSteps));
     }
   }, [stepData, firstIncludedStep, lastIncludedStep, initialStep]);
+  useEffect(function () {
+    var headerHeight = 0;
+    if (title || (breadcrumbs === null || breadcrumbs === void 0 ? void 0 : breadcrumbs.length) > 0) {
+      headerHeight = headerRef.current.getBoundingClientRect().height;
+    }
+    setHeaderHeight(headerHeight);
+  }, [title, breadcrumbs]);
   useCreateComponentFocus({
     previousState: previousState,
     currentStep: currentStep,
@@ -171,18 +189,31 @@ export var CreateFullPage = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     setCreateComponentActions: setCreateFullPageActions,
     setModalIsOpen: setModalIsOpen
   });
-
   // currently, we are not supporting the use of 'view all' toggle state
   /* istanbul ignore next */
   return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
     ref: ref,
     className: cx(blockClass, className)
-  }, getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement("div", {
+  }, getDevtoolsProps(componentName)), (title || (breadcrumbs === null || breadcrumbs === void 0 ? void 0 : breadcrumbs.length) > 0) && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(blockClass, "__header"),
+    ref: headerRef
+  }, /*#__PURE__*/React.createElement(SimpleHeader, {
+    title: title,
+    breadcrumbs: breadcrumbs,
+    noTrailingSlash: noTrailingSlash,
+    overflowAriaLabel: breadcrumbsOverflowAriaLabel,
+    maxVisible: maxVisibleBreadcrumbs
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(blockClass, "__influencer-and-body-container"),
+    style: {
+      height: "calc(100vh - ".concat(headerHeight, "px)")
+    }
+  }, /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__influencer")
   }, /*#__PURE__*/React.createElement(CreateInfluencer, {
     stepData: stepData,
     currentStep: currentStep,
-    title: title
+    title: secondaryTitle
   })), /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__body")
   }, /*#__PURE__*/React.createElement("div", {
@@ -239,7 +270,7 @@ export var CreateFullPage = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     type: "button",
     kind: "danger",
     onClick: onClose
-  }, modalDangerButtonText))));
+  }, modalDangerButtonText)))));
 });
 
 // Return a placeholder if not released and not enabled by feature flag.
@@ -257,6 +288,23 @@ CreateFullPage.propTypes = {
    * The back button text
    */
   backButtonText: PropTypes.string.isRequired,
+  /** The header breadcrumbs */
+  breadcrumbs: PropTypes.arrayOf(PropTypes.shape({
+    /** breadcrumb item key */
+    key: PropTypes.string.isRequired,
+    /** breadcrumb item label */
+    label: PropTypes.string.isRequired,
+    /** breadcrumb item link */
+    href: PropTypes.string,
+    /** breadcrumb item title tooltip */
+    title: PropTypes.string,
+    /** Provide if this breadcrumb item represents the current page */
+    isCurrentPage: PropTypes.bool
+  })),
+  /**
+   * Label for open/close overflow button used for breadcrumb items that do not fit
+   */
+  breadcrumbsOverflowAriaLabel: overflowAriaLabel_required_if_breadcrumbs_exist,
   /**
    * The cancel button text
    */
@@ -279,6 +327,8 @@ CreateFullPage.propTypes = {
    * is now being completed.
    */
   initialStep: PropTypes.number,
+  /**	Maximum visible breadcrumb-items before overflow is used (values less than 1 are treated as 1) */
+  maxVisibleBreadcrumbs: PropTypes.number,
   /**
    * The primary 'danger' button text in the modal
    */
@@ -299,6 +349,10 @@ CreateFullPage.propTypes = {
    * The next button text
    */
   nextButtonText: PropTypes.string.isRequired,
+  /**
+   * A prop to omit the trailing slash for the breadcrumbs
+   */
+  noTrailingSlash: PropTypes.bool,
   /**
    * An optional handler that is called when the user closes the full page (by
    * clicking the secondary button, located in the modal, which triggers after
@@ -310,6 +364,10 @@ CreateFullPage.propTypes = {
    * This function can _optionally_ return a promise that is either resolved or rejected and the CreateFullPage will handle the submitting state of the create button.
    */
   onRequestSubmit: PropTypes.func.isRequired,
+  /**
+   * A secondary title of the full page, displayed in the influencer area
+   */
+  secondaryTitle: PropTypes.string,
   /**
    * @ignore
    * The aria label to be used for the UI Shell SideNav Carbon component
@@ -320,7 +378,7 @@ CreateFullPage.propTypes = {
    */
   submitButtonText: PropTypes.string.isRequired,
   /**
-   * The main title of the full page, displayed in the influencer area.
+   * The main title of the full page, displayed in the header area
    */
   title: PropTypes.string
 };

package/es/components/Datagrid/Datagrid/Datagrid.js

@@ -44,7 +44,8 @@ export var Datagrid = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     datagridState: datagridState
   };
   return /*#__PURE__*/React.createElement(FilterProvider, {
-    filters: filters
+    filters: filters,
+    filterProps: filterProps
   }, /*#__PURE__*/React.createElement(InlineEditProvider, null, /*#__PURE__*/React.createElement("div", _extends({}, rest, {
     id: tableId,
     ref: ref,

package/es/components/Datagrid/Datagrid/DatagridContent.js

@@ -11,7 +11,7 @@ import { FilterContext, FilterPanel } from './addons/Filtering';
 import React, { useContext, useEffect, useRef } from 'react';
 import { Table, TableContainer } from '@carbon/react';
 import { carbon, pkg } from '../../../settings';
-import { CLEAR_FILTERS } from './addons/Filtering/constants';
+import { CLEAR_FILTERS, CLEAR_SINGLE_FILTER } from './addons/Filtering/constants';
 import DatagridBody from './DatagridBody';
 import DatagridHead from './DatagridHead';
 import DatagridToolbar from './DatagridToolbar';
@@ -24,6 +24,8 @@ import { handleGridKeyPress } from './addons/InlineEdit/handleGridKeyPress';
 import { px } from '@carbon/layout';
 import { useClickOutside } from '../../../global/js/hooks';
 import { useMultipleKeyTracking } from '../../DataSpreadsheet/hooks';
+import { useSubscribeToEventEmitter } from './addons/Filtering/hooks';
+import { clearSingleFilter } from './addons/Filtering/FilterProvider';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 export var DatagridContent = function DatagridContent(_ref) {
   var _cx4;
@@ -59,6 +61,7 @@ export 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;
@@ -124,6 +127,9 @@ export var DatagridContent = function DatagridContent(_ref) {
       gridElement.style.setProperty("--".concat(blockClass, "--grid-header-height"), px((tableHeader === null || tableHeader === void 0 ? void 0 : tableHeader.clientHeight) || 0));
     }
   }, [withInlineEdit, tableId, totalColumnsWidth, datagridState, gridActive]);
+  useSubscribeToEventEmitter(CLEAR_SINGLE_FILTER, function (id) {
+    return clearSingleFilter(id, setAllFilters, state);
+  });
   var renderFilterSummary = function renderFilterSummary() {
     return state.filters.length > 0 && /*#__PURE__*/React.createElement(FilterSummary, {
       className: "".concat(blockClass, "__filter-summary"),

package/es/components/Datagrid/Datagrid/DatagridEmptyBody.js

@@ -31,9 +31,7 @@ var DatagridEmptyBody = function DatagridEmptyBody(datagridState) {
     link: emptyStateLink
   };
   var validEmptyStates = ['error', 'noData', 'notFound'];
-  return /*#__PURE__*/React.createElement(TableBody, _extends({}, getTableBodyProps({
-    role: false
-  }), {
+  return /*#__PURE__*/React.createElement(TableBody, _extends({}, getTableBodyProps(), {
     className: "".concat(blockClass, "__empty-state-body")
   }), /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableCell, {
     colSpan: headers.length,

package/es/components/Datagrid/Datagrid/DatagridHeaderRow.js

@@ -15,12 +15,12 @@ import { TableHeader, TableRow } from '@carbon/react';
 import { px } from '@carbon/layout';
 import { selectionColumnId } from '../common-column-ids';
 import { pkg } from '../../../settings';
-import getColTitle from '../utils/getColTitle';
 import { handleColumnResizeEndEvent, handleColumnResizeStartEvent, handleColumnResizingEvent } from './addons/stateReducer';
+import { getNodeTextContent } from '../../../global/js/utils/getNodeTextContent';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 var getAccessibilityProps = function getAccessibilityProps(header) {
   var props = {};
-  var title = getColTitle(header);
+  var title = getNodeTextContent(header.Header);
   if (title) {
     props.title = title;
   } else {
@@ -90,9 +90,7 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [datagridState.state.isResizing]);
-  return /*#__PURE__*/React.createElement(TableRow, _extends({}, headerGroup.getHeaderGroupProps({
-    role: false
-  }), {
+  return /*#__PURE__*/React.createElement(TableRow, _extends({}, headerGroup.getHeaderGroupProps(), {
     className: cx("".concat(blockClass, "__head"), headerGroup.getHeaderGroupProps().className),
     ref: headRef
   }), datagridState.headers.filter(function (_ref2) {

package/es/components/Datagrid/Datagrid/DatagridRefBody.js

@@ -22,9 +22,7 @@ var DatagridRefBody = function DatagridRefBody(datagridState) {
   var getTableBodyProps = datagridState.getTableBodyProps,
     rows = datagridState.rows,
     prepareRow = datagridState.prepareRow;
-  return /*#__PURE__*/React.createElement("tbody", _extends({}, getTableBodyProps({
-    role: false
-  }), {
+  return /*#__PURE__*/React.createElement("tbody", _extends({}, getTableBodyProps(), {
     className: cx("".concat(blockClass, "__simple-body"), getTableBodyProps().className)
   }), rows.map(function (row) {
     prepareRow(row);

package/es/components/Datagrid/Datagrid/DatagridRow.js

@@ -92,9 +92,7 @@ var DatagridRow = function DatagridRow(datagridState) {
   var rowClassNames = cx("".concat(blockClass, "__carbon-row"), (_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__carbon-row-expanded"), row.isExpanded), _defineProperty(_cx, "".concat(blockClass, "__carbon-row-expandable"), row.canExpand), _defineProperty(_cx, "".concat(carbon.prefix, "--data-table--selected"), row.isSelected), _cx));
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TableRow, _extends({
     className: rowClassNames
-  }, row.getRowProps({
-    role: false
-  }), {
+  }, row.getRowProps(), {
     key: row.id,
     onMouseEnter: hoverHandler,
     onMouseLeave: handleMouseLeave,
@@ -103,9 +101,7 @@ var DatagridRow = function DatagridRow(datagridState) {
     onKeyUp: handleOnKeyUp
   }), row.cells.map(function (cell, index) {
     var _cell$column;
-    var cellProps = cell.getCellProps({
-      role: false
-    });
+    var cellProps = cell.getCellProps();
     var children = cellProps.children,
       restProps = _objectWithoutProperties(cellProps, _excluded);
     var content = children || /*#__PURE__*/React.createElement(React.Fragment, null, !row.isSkeleton && cell.render('Cell'), row.isSkeleton && /*#__PURE__*/React.createElement(SkeletonText, null));

package/es/components/Datagrid/Datagrid/DatagridSelectAll.js

@@ -50,11 +50,23 @@ var SelectAll = function SelectAll(datagridState) {
   var _getProps = getProps(),
     onChange = _getProps.onChange,
     selectProps = _objectWithoutProperties(_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.createElement("div", {
     className: cx("".concat(blockClass, "__head-select-all"), "".concat(blockClass, "__checkbox-cell"), _defineProperty({}, "".concat(blockClass, "__checkbox-cell-sticky-left"), isFirstColumnStickyLeft && windowSize > 671))
   }, /*#__PURE__*/React.createElement(TableSelectAll, _extends({}, selectProps, {
     name: "".concat(tableId, "-select-all-checkbox-name"),
-    onSelect: onChange,
+    onSelect: handleSelectAllChange,
     disabled: isFetching || selectProps.disabled,
     id: "".concat(tableId, "-select-all-checkbox-id")
   })));

package/es/components/Datagrid/Datagrid/DatagridSimpleBody.js

@@ -18,9 +18,7 @@ var DatagridSimpleBody = function DatagridSimpleBody(datagridState) {
   var getTableBodyProps = datagridState.getTableBodyProps,
     rows = datagridState.rows,
     prepareRow = datagridState.prepareRow;
-  return /*#__PURE__*/React.createElement(TableBody, _extends({}, getTableBodyProps({
-    role: false
-  }), {
+  return /*#__PURE__*/React.createElement(TableBody, _extends({}, getTableBodyProps(), {
     className: cx("".concat(blockClass, "__simple-body"), getTableBodyProps().className)
   }), rows.map(function (row) {
     prepareRow(row);

package/es/components/Datagrid/Datagrid/DatagridVirtualBody.js

@@ -72,9 +72,7 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
       width: (_gridRef$current = gridRef.current) === null || _gridRef$current === void 0 ? void 0 : _gridRef$current.clientWidth,
       overflow: 'hidden'
     }
-  }, /*#__PURE__*/React.createElement(DatagridHead, datagridState)), /*#__PURE__*/React.createElement(TableBody, _extends({}, getTableBodyProps({
-    role: false
-  }), {
+  }, /*#__PURE__*/React.createElement(DatagridHead, datagridState)), /*#__PURE__*/React.createElement(TableBody, _extends({}, getTableBodyProps(), {
     onScroll: function onScroll(e) {
       return syncScroll(e);
     }

package/es/components/Datagrid/Datagrid/DraggableElement.js

@@ -26,6 +26,7 @@ var DraggableElement = function DraggableElement(_ref) {
     isSticky = _ref.isSticky,
     selected = _ref.selected;
   var _useSortable = useSortable({
+      disabled: disabled,
       id: id
     }),
     attributes = _useSortable.attributes,

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

@@ -1,4 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
@@ -14,9 +15,9 @@ import { Checkbox } from '@carbon/react';
 import { isColumnVisible } from './common';
 import DraggableElement from '../../DraggableElement';
 import { pkg } from '../../../../../settings';
-import getColTitle from '../../../utils/getColTitle';
 import { DndContext, KeyboardSensor, PointerSensor, closestCenter, useSensor, useSensors } from '@dnd-kit/core';
 import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
+import { getNodeTextContent } from '../../../../../global/js/utils/getNodeTextContent';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 var matchedColsById = function matchedColsById(col1, col2) {
   return col1 && col2 && col1.id === col2.id;
@@ -32,26 +33,47 @@ export var DraggableItemsList = function DraggableItemsList(_ref) {
   var visibleCols = columns
   // hide the columns without Header, e.g the sticky actions, spacer
   .filter(function (colDef) {
-    return !!getColTitle(colDef);
+    return getNodeTextContent(colDef.Header).trim().length !== 0;
   }).filter(Boolean).filter(function (colDef) {
     return !colDef.isAction;
   }).filter(function (colDef) {
-    var _getColTitle;
-    return filterString.length === 0 || ((_getColTitle = getColTitle(colDef)) === null || _getColTitle === void 0 ? void 0 : _getColTitle.toLowerCase().includes(filterString)) && colDef.id !== 'spacer';
+    return colDef.id !== 'spacer';
+  }).filter(function (colDef) {
+    return filterString.length === 0 || getNodeTextContent(colDef.Header).toLowerCase().includes(filterString);
   });
+  var getUpdatedDragCols = function getUpdatedDragCols() {
+    var tempCols = _toConsumableArray(visibleCols);
+    tempCols.forEach(function (col) {
+      if (col.sticky) {
+        col.disabled = true;
+      }
+    });
+    return tempCols;
+  };
+  var updatedDragCols = getUpdatedDragCols();
 
   // let localRefCopy;
   var handleDragEnd = function handleDragEnd(event) {
+    var _destOverCol$;
     var active = event.active,
       over = event.over;
+
+    // Stop any re-ordering updates if the destination column is disabled
+    // ie: it is a frozen column.
+    var destOverCol = updatedDragCols.filter(function (item) {
+      return item.id === over.id;
+    });
+    if (destOverCol !== null && destOverCol !== void 0 && destOverCol.length && (_destOverCol$ = destOverCol[0]) !== null && _destOverCol$ !== void 0 && _destOverCol$.disabled) {
+      return;
+    }
     var fromVisibleIndex = columns.findIndex(function (col) {
       return matchedColsById(col, active);
     });
     var toVisibleIndex = columns.findIndex(function (col) {
       return matchedColsById(col, over);
     });
-    var colTitle = getColTitle(visibleCols[fromVisibleIndex]);
-    setAriaRegionText("".concat(colTitle, " dropped. New position ").concat(toVisibleIndex + 1, " of ").concat(visibleCols.length, "."));
+    var colTitle = getNodeTextContent(updatedDragCols[fromVisibleIndex].Header);
+    setAriaRegionText("".concat(colTitle, " dropped. New position ").concat(toVisibleIndex + 1, " of ").concat(updatedDragCols.length, "."));
     var fromIndex = columns.findIndex(function (col) {
       return matchedColsById(col, active);
     });
@@ -62,23 +84,23 @@ export var DraggableItemsList = function DraggableItemsList(_ref) {
   };
   var handleDragStart = function handleDragStart(event) {
     var active = event.active;
-    var fromIndex = visibleCols.findIndex(function (col) {
+    var fromIndex = updatedDragCols.findIndex(function (col) {
       return matchedColsById(col, active);
     });
-    var colTitle = getColTitle(visibleCols[fromIndex]);
-    setAriaRegionText("".concat(colTitle, " grabbed. Current position ").concat(fromIndex + 1, " of ").concat(visibleCols.length, "."));
+    var colTitle = getNodeTextContent(updatedDragCols[fromIndex].Header);
+    setAriaRegionText("".concat(colTitle, " grabbed. Current position ").concat(fromIndex + 1, " of ").concat(updatedDragCols.length, "."));
   };
   var handleDragUpdate = function handleDragUpdate(event) {
     var active = event.active,
       over = event.over;
-    var fromIndex = visibleCols.findIndex(function (col) {
+    var fromIndex = updatedDragCols.findIndex(function (col) {
       return matchedColsById(col, active);
     });
-    var toIndex = visibleCols.findIndex(function (col) {
+    var toIndex = updatedDragCols.findIndex(function (col) {
       return matchedColsById(col, over);
     });
-    var colTitle = getColTitle(visibleCols[fromIndex]);
-    setAriaRegionText("".concat(colTitle, " grabbed. Original position ").concat(fromIndex + 1, ", new position ").concat(toIndex + 1, " of ").concat(visibleCols.length, "."));
+    var colTitle = getNodeTextContent(updatedDragCols[fromIndex].Header);
+    setAriaRegionText("".concat(colTitle, " grabbed. Original position ").concat(fromIndex + 1, ", new position ").concat(toIndex + 1, " of ").concat(updatedDragCols.length, "."));
   };
   var pointerSensor = useSensor(PointerSensor, {
     // Require the mouse to move by 10 pixels before activating
@@ -137,10 +159,10 @@ export var DraggableItemsList = function DraggableItemsList(_ref) {
       key: colDef.id
     });
   })), /*#__PURE__*/React.createElement(SortableContext, {
-    items: visibleCols,
+    items: updatedDragCols,
     strategy: verticalListSortingStrategy
   }, visibleCols.map(function (colDef) {
-    var colHeaderTitle = getColTitle(colDef);
+    var colHeaderTitle = getNodeTextContent(colDef.Header);
     var searchString = new RegExp('(' + filterString + ')');
     var res = filterString.length ? colHeaderTitle.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;

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

@@ -10,21 +10,21 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 
 /* eslint-disable react/jsx-key */
 
-import React, { useRef, useMemo, useContext, useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import { Accordion, AccordionItem, Button, Search, Layer } from '@carbon/react';
-import { rem } from '@carbon/layout';
-import { pkg } from '../../../../../settings';
+import { Accordion, AccordionItem, Button, Layer, Search } from '@carbon/react';
 import { BATCH, CLEAR_FILTERS, INSTANT, PANEL } from './constants';
-import cx from 'classnames';
-import { motion } from 'framer-motion';
-import { panelVariants, innerContainerVariants, actionSetVariants } from './motion/variants';
-import { Close } from '@carbon/react/icons';
+import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { actionSetVariants, innerContainerVariants, panelVariants } from './motion/variants';
+import { useFilters, useShouldDisableButtons, useSubscribeToEventEmitter } from './hooks';
 import { ActionSet } from '../../../../ActionSet';
+import { Close } from '@carbon/react/icons';
 import { FilterContext } from '.';
-import { useFilters, useSubscribeToEventEmitter, useShouldDisableButtons } from './hooks';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { motion } from 'framer-motion';
+import { pkg } from '../../../../../settings';
+import { rem } from '@carbon/layout';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
-var componentClass = "".concat(blockClass, "-filter-panel");
+export var componentClass = "".concat(blockClass, "-filter-panel");
 var MotionActionSet = motion(ActionSet);
 var FilterPanel = function FilterPanel(_ref) {
   var _cx;
@@ -63,13 +63,19 @@ var FilterPanel = function FilterPanel(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     showDividerLine = _useState2[0],
     setShowDividerLine = _useState2[1];
+
+  /** Context */
+  var _useContext = useContext(FilterContext),
+    panelOpen = _useContext.panelOpen,
+    setPanelOpen = _useContext.setPanelOpen;
   var _useFilters = useFilters({
       updateMethod: updateMethod,
       filters: filterSections,
       setAllFilters: setAllFilters,
       variation: PANEL,
       reactTableFiltersState: reactTableFiltersState,
-      onCancel: onCancel
+      onCancel: onCancel,
+      panelOpen: panelOpen
     }),
     filtersState = _useFilters.filtersState,
     prevFiltersObjectArrayRef = _useFilters.prevFiltersObjectArrayRef,
@@ -101,11 +107,6 @@ var FilterPanel = function FilterPanel(_ref) {
     return updateMethod === BATCH;
   }, [updateMethod]);
 
-  /** Context */
-  var _useContext = useContext(FilterContext),
-    panelOpen = _useContext.panelOpen,
-    setPanelOpen = _useContext.setPanelOpen;
-
   /** Methods */
   var closePanel = function closePanel() {
     cancel();