@carbon/ibm-products 2.11.3 → 2.12.1

package/lib/components/CreateFullPage/CreateFullPage.js

@@ -20,7 +20,8 @@ var _ActionSet = require("../ActionSet");
 var _hooks = require("../../global/js/hooks");
 var _lastIndexInArray = require("../../global/js/utils/lastIndexInArray");
 var _getNumberOfHiddenSteps = require("../../global/js/utils/getNumberOfHiddenSteps");
-var _excluded = ["backButtonText", "cancelButtonText", "children", "className", "initialStep", "modalDangerButtonText", "modalDescription", "modalSecondaryButtonText", "modalTitle", "nextButtonText", "onClose", "onRequestSubmit", "firstFocusElement", "submitButtonText", "title"];
+var _SimpleHeader = require("../SimpleHeader/SimpleHeader");
+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
  *
@@ -59,11 +60,14 @@ component to get the desired affect.
  */
 exports.StepNumberContext = StepNumberContext;
 var CreateFullPage = /*#__PURE__*/_react.default.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,
@@ -73,7 +77,9 @@ var CreateFullPage = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
     onRequestSubmit = _ref.onRequestSubmit,
     firstFocusElement = _ref.firstFocusElement,
     submitButtonText = _ref.submitButtonText,
+    noTrailingSlash = _ref.noTrailingSlash,
     title = _ref.title,
+    secondaryTitle = _ref.secondaryTitle,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var _useState = (0, _react.useState)([]),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -123,6 +129,11 @@ var CreateFullPage = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
     _useState22 = (0, _slicedToArray2.default)(_useState21, 2),
     lastIncludedStep = _useState22[0],
     setLastIncludedStep = _useState22[1];
+  var _useState23 = (0, _react.useState)(0),
+    _useState24 = (0, _slicedToArray2.default)(_useState23, 2),
+    headerHeight = _useState24[0],
+    setHeaderHeight = _useState24[1];
+  var headerRef = (0, _react.useRef)(null);
   (0, _react.useEffect)(function () {
     var firstItem = stepData.findIndex(function (item) {
       return item === null || item === void 0 ? void 0 : item.shouldIncludeStep;
@@ -139,6 +150,13 @@ var CreateFullPage = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
       setCurrentStep(Number(initialStep + numberOfHiddenSteps));
     }
   }, [stepData, firstIncludedStep, lastIncludedStep, initialStep]);
+  (0, _react.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]);
   (0, _hooks.useCreateComponentFocus)({
     previousState: previousState,
     currentStep: currentStep,
@@ -180,18 +198,31 @@ var CreateFullPage = /*#__PURE__*/_react.default.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.default.createElement("div", (0, _extends2.default)({}, rest, {
     ref: ref,
     className: (0, _classnames.default)(blockClass, className)
-  }, (0, _devtools.getDevtoolsProps)(componentName)), /*#__PURE__*/_react.default.createElement("div", {
+  }, (0, _devtools.getDevtoolsProps)(componentName)), (title || (breadcrumbs === null || breadcrumbs === void 0 ? void 0 : breadcrumbs.length) > 0) && /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(blockClass, "__header"),
+    ref: headerRef
+  }, /*#__PURE__*/_react.default.createElement(_SimpleHeader.SimpleHeader, {
+    title: title,
+    breadcrumbs: breadcrumbs,
+    noTrailingSlash: noTrailingSlash,
+    overflowAriaLabel: breadcrumbsOverflowAriaLabel,
+    maxVisible: maxVisibleBreadcrumbs
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(blockClass, "__influencer-and-body-container"),
+    style: {
+      height: "calc(100vh - ".concat(headerHeight, "px)")
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__influencer")
   }, /*#__PURE__*/_react.default.createElement(_CreateInfluencer.CreateInfluencer, {
     stepData: stepData,
     currentStep: currentStep,
-    title: title
+    title: secondaryTitle
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__body")
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -248,7 +279,7 @@ var CreateFullPage = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
     type: "button",
     kind: "danger",
     onClick: onClose
-  }, modalDangerButtonText))));
+  }, modalDangerButtonText)))));
 });
 
 // Return a placeholder if not released and not enabled by feature flag.
@@ -267,6 +298,23 @@ CreateFullPage.propTypes = {
    * The back button text
    */
   backButtonText: _propTypes.default.string.isRequired,
+  /** The header breadcrumbs */
+  breadcrumbs: _propTypes.default.arrayOf(_propTypes.default.shape({
+    /** breadcrumb item key */
+    key: _propTypes.default.string.isRequired,
+    /** breadcrumb item label */
+    label: _propTypes.default.string.isRequired,
+    /** breadcrumb item link */
+    href: _propTypes.default.string,
+    /** breadcrumb item title tooltip */
+    title: _propTypes.default.string,
+    /** Provide if this breadcrumb item represents the current page */
+    isCurrentPage: _propTypes.default.bool
+  })),
+  /**
+   * Label for open/close overflow button used for breadcrumb items that do not fit
+   */
+  breadcrumbsOverflowAriaLabel: _SimpleHeader.overflowAriaLabel_required_if_breadcrumbs_exist,
   /**
    * The cancel button text
    */
@@ -289,6 +337,8 @@ CreateFullPage.propTypes = {
    * is now being completed.
    */
   initialStep: _propTypes.default.number,
+  /**	Maximum visible breadcrumb-items before overflow is used (values less than 1 are treated as 1) */
+  maxVisibleBreadcrumbs: _propTypes.default.number,
   /**
    * The primary 'danger' button text in the modal
    */
@@ -309,6 +359,10 @@ CreateFullPage.propTypes = {
    * The next button text
    */
   nextButtonText: _propTypes.default.string.isRequired,
+  /**
+   * A prop to omit the trailing slash for the breadcrumbs
+   */
+  noTrailingSlash: _propTypes.default.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
@@ -320,6 +374,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.default.func.isRequired,
+  /**
+   * A secondary title of the full page, displayed in the influencer area
+   */
+  secondaryTitle: _propTypes.default.string,
   /**
    * @ignore
    * The aria label to be used for the UI Shell SideNav Carbon component
@@ -330,7 +388,7 @@ CreateFullPage.propTypes = {
    */
   submitButtonText: _propTypes.default.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.default.string
 };

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

@@ -50,7 +50,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

@@ -25,6 +25,8 @@ var _handleGridKeyPress = require("./addons/InlineEdit/handleGridKeyPress");
 var _layout = require("@carbon/layout");
 var _hooks = require("../../../global/js/hooks");
 var _hooks2 = require("../../DataSpreadsheet/hooks");
+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; }
 /**
@@ -69,6 +71,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;
@@ -134,6 +137,9 @@ 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"),

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

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

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

@@ -15,8 +15,8 @@ var _react2 = require("@carbon/react");
 var _layout = require("@carbon/layout");
 var _commonColumnIds = require("../common-column-ids");
 var _settings = require("../../../settings");
-var _getColTitle = _interopRequireDefault(require("../utils/getColTitle"));
 var _stateReducer = require("./addons/stateReducer");
+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 {
@@ -101,9 +101,7 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [datagridState.state.isResizing]);
-  return /*#__PURE__*/_react.default.createElement(_react2.TableRow, (0, _extends2.default)({}, headerGroup.getHeaderGroupProps({
-    role: false
-  }), {
+  return /*#__PURE__*/_react.default.createElement(_react2.TableRow, (0, _extends2.default)({}, headerGroup.getHeaderGroupProps(), {
     className: (0, _classnames.default)("".concat(blockClass, "__head"), headerGroup.getHeaderGroupProps().className),
     ref: headRef
   }), datagridState.headers.filter(function (_ref2) {

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

@@ -28,9 +28,7 @@ var DatagridRefBody = function DatagridRefBody(datagridState) {
   var getTableBodyProps = datagridState.getTableBodyProps,
     rows = datagridState.rows,
     prepareRow = datagridState.prepareRow;
-  return /*#__PURE__*/_react.default.createElement("tbody", (0, _extends2.default)({}, getTableBodyProps({
-    role: false
-  }), {
+  return /*#__PURE__*/_react.default.createElement("tbody", (0, _extends2.default)({}, getTableBodyProps(), {
     className: (0, _classnames.default)("".concat(blockClass, "__simple-body"), getTableBodyProps().className)
   }), rows.map(function (row) {
     prepareRow(row);

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

@@ -97,9 +97,7 @@ var DatagridRow = function DatagridRow(datagridState) {
   var rowClassNames = (0, _classnames.default)("".concat(blockClass, "__carbon-row"), (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__carbon-row-expanded"), row.isExpanded), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__carbon-row-expandable"), row.canExpand), (0, _defineProperty2.default)(_cx, "".concat(_settings.carbon.prefix, "--data-table--selected"), row.isSelected), _cx));
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_react2.TableRow, (0, _extends2.default)({
     className: rowClassNames
-  }, row.getRowProps({
-    role: false
-  }), {
+  }, row.getRowProps(), {
     key: row.id,
     onMouseEnter: hoverHandler,
     onMouseLeave: handleMouseLeave,
@@ -108,9 +106,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 = (0, _objectWithoutProperties2.default)(cellProps, _excluded);
     var content = children || /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !row.isSkeleton && cell.render('Cell'), row.isSkeleton && /*#__PURE__*/_react.default.createElement(_react2.SkeletonText, null));

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

@@ -60,11 +60,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(_react2.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/DatagridSimpleBody.js

@@ -24,9 +24,7 @@ var DatagridSimpleBody = function DatagridSimpleBody(datagridState) {
   var getTableBodyProps = datagridState.getTableBodyProps,
     rows = datagridState.rows,
     prepareRow = datagridState.prepareRow;
-  return /*#__PURE__*/_react.default.createElement(_react2.TableBody, (0, _extends2.default)({}, getTableBodyProps({
-    role: false
-  }), {
+  return /*#__PURE__*/_react.default.createElement(_react2.TableBody, (0, _extends2.default)({}, getTableBodyProps(), {
     className: (0, _classnames.default)("".concat(blockClass, "__simple-body"), getTableBodyProps().className)
   }), rows.map(function (row) {
     prepareRow(row);

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

@@ -81,9 +81,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.default.createElement(_DatagridHead.default, datagridState)), /*#__PURE__*/_react.default.createElement(_react2.TableBody, (0, _extends2.default)({}, getTableBodyProps({
-    role: false
-  }), {
+  }, /*#__PURE__*/_react.default.createElement(_DatagridHead.default, datagridState)), /*#__PURE__*/_react.default.createElement(_react2.TableBody, (0, _extends2.default)({}, getTableBodyProps(), {
     onScroll: function onScroll(e) {
       return syncScroll(e);
     }

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

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

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

@@ -6,15 +6,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.DraggableItemsList = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = require("prop-types");
 var _react2 = require("@carbon/react");
 var _common = require("./common");
 var _DraggableElement = _interopRequireDefault(require("../../DraggableElement"));
 var _settings = require("../../../../../settings");
-var _getColTitle2 = _interopRequireDefault(require("../../../utils/getColTitle"));
 var _core = require("@dnd-kit/core");
 var _sortable = require("@dnd-kit/sortable");
+var _getNodeTextContent = require("../../../../../global/js/utils/getNodeTextContent");
 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) { (0, _defineProperty2.default)(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; } /**
                                                                                                                                                                                                                                                                                                                                                                                                                                                                        * Copyright IBM Corp. 2023, 2023
@@ -37,26 +38,47 @@ var DraggableItemsList = function DraggableItemsList(_ref) {
   var visibleCols = columns
   // hide the columns without Header, e.g the sticky actions, spacer
   .filter(function (colDef) {
-    return !!(0, _getColTitle2.default)(colDef);
+    return (0, _getNodeTextContent.getNodeTextContent)(colDef.Header).trim().length !== 0;
   }).filter(Boolean).filter(function (colDef) {
     return !colDef.isAction;
   }).filter(function (colDef) {
-    var _getColTitle;
-    return filterString.length === 0 || ((_getColTitle = (0, _getColTitle2.default)(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 || (0, _getNodeTextContent.getNodeTextContent)(colDef.Header).toLowerCase().includes(filterString);
   });
+  var getUpdatedDragCols = function getUpdatedDragCols() {
+    var tempCols = (0, _toConsumableArray2.default)(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 = (0, _getColTitle2.default)(visibleCols[fromVisibleIndex]);
-    setAriaRegionText("".concat(colTitle, " dropped. New position ").concat(toVisibleIndex + 1, " of ").concat(visibleCols.length, "."));
+    var colTitle = (0, _getNodeTextContent.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);
     });
@@ -67,23 +89,23 @@ 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 = (0, _getColTitle2.default)(visibleCols[fromIndex]);
-    setAriaRegionText("".concat(colTitle, " grabbed. Current position ").concat(fromIndex + 1, " of ").concat(visibleCols.length, "."));
+    var colTitle = (0, _getNodeTextContent.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 = (0, _getColTitle2.default)(visibleCols[fromIndex]);
-    setAriaRegionText("".concat(colTitle, " grabbed. Original position ").concat(fromIndex + 1, ", new position ").concat(toIndex + 1, " of ").concat(visibleCols.length, "."));
+    var colTitle = (0, _getNodeTextContent.getNodeTextContent)(updatedDragCols[fromIndex].Header);
+    setAriaRegionText("".concat(colTitle, " grabbed. Original position ").concat(fromIndex + 1, ", new position ").concat(toIndex + 1, " of ").concat(updatedDragCols.length, "."));
   };
   var pointerSensor = (0, _core.useSensor)(_core.PointerSensor, {
     // Require the mouse to move by 10 pixels before activating
@@ -142,10 +164,10 @@ var DraggableItemsList = function DraggableItemsList(_ref) {
       key: colDef.id
     });
   })), /*#__PURE__*/_react.default.createElement(_sortable.SortableContext, {
-    items: visibleCols,
+    items: updatedDragCols,
     strategy: _sortable.verticalListSortingStrategy
   }, visibleCols.map(function (colDef) {
-    var colHeaderTitle = (0, _getColTitle2.default)(colDef);
+    var colHeaderTitle = (0, _getNodeTextContent.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;