@carbon/ibm-products 2.11.3 → 2.12.0

package/lib/components/Card/CardFooter.js

@@ -32,6 +32,7 @@ var CardFooter = function CardFooter(_ref) {
     hasButton = _ref.hasButton,
     onPrimaryButtonClick = _ref.onPrimaryButtonClick,
     onSecondaryButtonClick = _ref.onSecondaryButtonClick,
+    primaryButtonDisabled = _ref.primaryButtonDisabled,
     primaryButtonHref = _ref.primaryButtonHref,
     primaryButtonIcon = _ref.primaryButtonIcon,
     _ref$primaryButtonKin = _ref.primaryButtonKind,
@@ -40,6 +41,7 @@ var CardFooter = function CardFooter(_ref) {
     primaryButtonText = _ref.primaryButtonText,
     _ref$productive = _ref.productive,
     productive = _ref$productive === void 0 ? defaults.productive : _ref$productive,
+    secondaryButtonDisabled = _ref.secondaryButtonDisabled,
     secondaryButtonHref = _ref.secondaryButtonHref,
     secondaryButtonIcon = _ref.secondaryButtonIcon,
     _ref$secondaryButtonK = _ref.secondaryButtonKind,
@@ -56,13 +58,15 @@ var CardFooter = function CardFooter(_ref) {
     onClick: onSecondaryButtonClick,
     size: "md",
     renderIcon: secondaryButtonIcon,
-    href: secondaryButtonHref
+    href: secondaryButtonHref,
+    disabled: secondaryButtonDisabled
   }, secondaryButtonText), primaryButtonText && primaryButtonPlacement === 'bottom' && /*#__PURE__*/_react.default.createElement(_react2.Button, {
     kind: productive ? 'ghost' : primaryButtonKind,
     onClick: onPrimaryButtonClick,
     size: "md",
     renderIcon: primaryButtonIcon,
-    href: primaryButtonHref
+    href: primaryButtonHref,
+    disabled: primaryButtonDisabled
   }, primaryButtonText), hasActions && /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__actions")
   }, actions));
@@ -74,12 +78,14 @@ CardFooter.propTypes = {
   hasButton: _propTypes.default.bool,
   onPrimaryButtonClick: _propTypes.default.func,
   onSecondaryButtonClick: _propTypes.default.func,
+  primaryButtonDisabled: _propTypes.default.bool,
   primaryButtonHref: _propTypes.default.string,
   primaryButtonIcon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
   primaryButtonKind: _propTypes.default.oneOf(['primary', 'ghost']),
   primaryButtonPlacement: _propTypes.default.oneOf(['top', 'bottom']),
   primaryButtonText: _propTypes.default.string,
   productive: _propTypes.default.bool,
+  secondaryButtonDisabled: _propTypes.default.bool,
   secondaryButtonHref: _propTypes.default.string,
   secondaryButtonIcon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
   secondaryButtonKind: _propTypes.default.oneOf(['secondary', 'ghost']),

package/lib/components/Card/CardHeader.js

@@ -32,10 +32,12 @@ var CardHeader = function CardHeader(_ref) {
     primaryButtonIcon = _ref.primaryButtonIcon,
     primaryButtonPlacement = _ref.primaryButtonPlacement,
     primaryButtonText = _ref.primaryButtonText,
+    primaryButtonDisabled = _ref.primaryButtonDisabled,
     description = _ref.description,
     _ref$hasActions = _ref.hasActions,
     hasActions = _ref$hasActions === void 0 ? defaults.hasActions : _ref$hasActions,
     label = _ref.label,
+    secondaryButtonDisabled = _ref.secondaryButtonDisabled,
     secondaryButtonHref = _ref.secondaryButtonHref,
     secondaryButtonIcon = _ref.secondaryButtonIcon,
     secondaryButtonPlacement = _ref.secondaryButtonPlacement,
@@ -68,13 +70,15 @@ var CardHeader = function CardHeader(_ref) {
     size: "sm",
     renderIcon: secondaryButtonIcon,
     href: secondaryButtonHref,
-    className: actionGhostButtonClass
+    className: actionGhostButtonClass,
+    disabled: secondaryButtonDisabled
   }, secondaryButtonText), primaryButtonText && primaryButtonPlacement === 'top' && /*#__PURE__*/_react.default.createElement(_react2.Button, {
     kind: "ghost",
     size: "sm",
     renderIcon: primaryButtonIcon,
     onClick: onPrimaryButtonClick,
-    className: actionGhostButtonClass
+    className: actionGhostButtonClass,
+    disabled: primaryButtonDisabled
   }, primaryButtonText))));
 };
 exports.CardHeader = CardHeader;
@@ -86,9 +90,11 @@ CardHeader.propTypes = {
   noActionIcons: _propTypes.default.bool,
   onPrimaryButtonClick: _propTypes.default.func,
   onSecondaryButtonClick: _propTypes.default.func,
+  primaryButtonDisabled: _propTypes.default.bool,
   primaryButtonIcon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
   primaryButtonPlacement: _propTypes.default.oneOf(['top', 'bottom']),
   primaryButtonText: _propTypes.default.string,
+  secondaryButtonDisabled: _propTypes.default.bool,
   secondaryButtonHref: _propTypes.default.string,
   secondaryButtonIcon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
   secondaryButtonKind: _propTypes.default.oneOf(['secondary', 'ghost']),

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

@@ -28,6 +28,12 @@ var DocsPage = function DocsPage() {
       source: {
         code: "<CreateFullPageStep\n    title=\"Required title\"\n    subtitle=\"Optional subtitle\"\n    description=\"Optional description\"\n    onNext={() => {'Optional function'}}\n    >\n    <Row>\n      <Column xlg={5} lg={5} md={4} sm={4}>\n        <fieldset className={`#{$pkg-prefix}--create-full-page__step-fieldset`}>\n          <TextInput\n            id=\"test-1\"\n            invalidText=\"A valid value is required\"\n            labelText=\"Topic name\"\n            placeholder=\"Enter topic name\"\n          />\n        </fieldset>\n      </Column>\n    </Row>\n    <span className={`#{$pkg-prefix}--create-full-page__section-divider`} />\n    <h5 className={`#{$pkg-prefix}--create-full-page__step-title`}>Required title</h5>\n    <h6 className={`#{$pkg-prefix}--create-full-page__step-subtitle`}>\n      Optional subtitle\n    </h6>\n    <p className={`#{$pkg-prefix}--create-full-page__step-description`}>\n      Optional description\n    </p>\n    <Row>\n      <Column xlg={5} lg={5} md={4} sm={4}>\n        <fieldset className={`#{$pkg-prefix}--create-full-page__step-fieldset`}>\n          <TextInput\n            id=\"test-2\"\n            invalidText=\"A valid value is required\"\n            labelText=\"Topic name\"\n            placeholder=\"Enter topic name\"\n          />\n        </fieldset>\n      </Column>\n    </Row>\n</CreateFullPageStep>"
       }
+    }, {
+      story: stories.createFullPageWithHeader,
+      description: "This is used when you want to show a header title and breadcrumbs. This can be created by\npassing in a title or breadcrumbs to the `<CreateFullPage />` component  as shown below:",
+      source: {
+        code: "<CreateFullPage\n  title='Page title'\n  breadcrumbsOverflowAriaLabel='Open and close additional breadcrumb item list.'\n  breadcrumbs={[\n    { key: '0', label: 'Breadcrumb 1', href: '/', title: 'home page' },\n    { key: '1', label: 'Breadcrumb 2', href: '/', },\n    { key: '2', label: 'Breadcrumb 3', href:'/' },\n    { key: '3', label: 'Breadcrumb 4', isCurrentPage: true }\n  ]}\n  maxVisibleBreadcrumbs={3}\n  {...props}\n>\n    <CreateFullPageStep {...createFullPageStepProps}>...</CreateFullPageStep>\n</CreateFullPage>"
+      }
     }, {
       title: 'Using custom components',
       description: "It is possible to use custom components that return `CreateFullPageStep`s in\norder to help reduce the amount of logic in the component that contains the main\n`CreateFullPage`. _It is required that each child of the `CreateFullPage` either\nbe a custom step or a `CreateFullPageStep`_. An example of this could look like\nthe following:",

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/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/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,6 +6,7 @@ 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");
@@ -44,19 +45,39 @@ var DraggableItemsList = function DraggableItemsList(_ref) {
     var _getColTitle;
     return filterString.length === 0 || ((_getColTitle = (0, _getColTitle2.default)(colDef)) === null || _getColTitle === void 0 ? void 0 : _getColTitle.toLowerCase().includes(filterString)) && colDef.id !== 'spacer';
   });
+  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, _getColTitle2.default)(updatedDragCols[fromVisibleIndex]);
+    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 +88,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, _getColTitle2.default)(updatedDragCols[fromIndex]);
+    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, _getColTitle2.default)(updatedDragCols[fromIndex]);
+    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,7 +163,7 @@ 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);

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

@@ -5,23 +5,23 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.componentClass = 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 _propTypes = _interopRequireDefault(require("prop-types"));
-var _react2 = require("@carbon/react");
-var _layout = require("@carbon/layout");
-var _settings = require("../../../../../settings");
+var _react = require("@carbon/react");
 var _constants = require("./constants");
-var _classnames = _interopRequireDefault(require("classnames"));
-var _framerMotion = require("framer-motion");
+var _react2 = _interopRequireWildcard(require("react"));
 var _variants = require("./motion/variants");
-var _icons = require("@carbon/react/icons");
+var _hooks = require("./hooks");
 var _ActionSet = require("../../../../ActionSet");
+var _icons = require("@carbon/react/icons");
 var _ = require(".");
-var _hooks = require("./hooks");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _framerMotion = require("framer-motion");
+var _settings = require("../../../../../settings");
+var _layout = require("@carbon/layout");
 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; }
 /**
@@ -35,6 +35,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
 var componentClass = "".concat(blockClass, "-filter-panel");
+exports.componentClass = componentClass;
 var MotionActionSet = (0, _framerMotion.motion)(_ActionSet.ActionSet);
 var FilterPanel = function FilterPanel(_ref) {
   var _cx;
@@ -69,17 +70,23 @@ var FilterPanel = function FilterPanel(_ref) {
     _ref$reactTableFilter = _ref.reactTableFiltersState,
     reactTableFiltersState = _ref$reactTableFilter === void 0 ? [] : _ref$reactTableFilter;
   /** State */
-  var _useState = (0, _react.useState)(false),
+  var _useState = (0, _react2.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     showDividerLine = _useState2[0],
     setShowDividerLine = _useState2[1];
+
+  /** Context */
+  var _useContext = (0, _react2.useContext)(_.FilterContext),
+    panelOpen = _useContext.panelOpen,
+    setPanelOpen = _useContext.setPanelOpen;
   var _useFilters = (0, _hooks.useFilters)({
       updateMethod: updateMethod,
       filters: filterSections,
       setAllFilters: setAllFilters,
       variation: _constants.PANEL,
       reactTableFiltersState: reactTableFiltersState,
-      onCancel: onCancel
+      onCancel: onCancel,
+      panelOpen: panelOpen
     }),
     filtersState = _useFilters.filtersState,
     prevFiltersObjectArrayRef = _useFilters.prevFiltersObjectArrayRef,
@@ -91,10 +98,10 @@ var FilterPanel = function FilterPanel(_ref) {
     lastAppliedFilters = _useFilters.lastAppliedFilters;
 
   /** Refs */
-  var filterPanelRef = (0, _react.useRef)();
-  var filterHeadingRef = (0, _react.useRef)();
-  var filterSearchRef = (0, _react.useRef)();
-  var actionSetRef = (0, _react.useRef)();
+  var filterPanelRef = (0, _react2.useRef)();
+  var filterHeadingRef = (0, _react2.useRef)();
+  var filterSearchRef = (0, _react2.useRef)();
+  var actionSetRef = (0, _react2.useRef)();
 
   /** State from hooks */
   var _useShouldDisableButt = (0, _hooks.useShouldDisableButtons)({
@@ -107,15 +114,10 @@ var FilterPanel = function FilterPanel(_ref) {
     setShouldDisableButtons = _useShouldDisableButt2[1];
 
   /** Memos */
-  var showActionSet = (0, _react.useMemo)(function () {
+  var showActionSet = (0, _react2.useMemo)(function () {
     return updateMethod === _constants.BATCH;
   }, [updateMethod]);
 
-  /** Context */
-  var _useContext = (0, _react.useContext)(_.FilterContext),
-    panelOpen = _useContext.panelOpen,
-    setPanelOpen = _useContext.setPanelOpen;
-
   /** Methods */
   var closePanel = function closePanel() {
     cancel();
@@ -136,7 +138,7 @@ var FilterPanel = function FilterPanel(_ref) {
     lastAppliedFilters.current = JSON.stringify(filtersObjectArray);
   };
   var renderActionSet = function renderActionSet() {
-    return showActionSet && /*#__PURE__*/_react.default.createElement(MotionActionSet, {
+    return showActionSet && /*#__PURE__*/_react2.default.createElement(MotionActionSet, {
       actions: [{
         key: 1,
         kind: 'primary',
@@ -164,14 +166,14 @@ var FilterPanel = function FilterPanel(_ref) {
   };
 
   /** Effects */
-  (0, _react.useEffect)(function liftOpenStateToParent() {
+  (0, _react2.useEffect)(function liftOpenStateToParent() {
     if (panelOpen) {
       onPanelOpen(panelOpen);
     } else {
       onPanelClose(panelOpen);
     }
   }, [panelOpen, onPanelClose, onPanelOpen]);
-  (0, _react.useEffect)(function setPanelMinimumHeight() {
+  (0, _react2.useEffect)(function setPanelMinimumHeight() {
     var _filterPanelRef$curre;
     (_filterPanelRef$curre = filterPanelRef.current) === null || _filterPanelRef$curre === void 0 || _filterPanelRef$curre.style.setProperty('--filter-panel-min-height', (0, _layout.rem)(filterPanelMinHeight));
   }, [filterPanelMinHeight]);
@@ -184,23 +186,23 @@ var FilterPanel = function FilterPanel(_ref) {
     var height = "calc(100vh - ".concat(filterHeadingHeight, "px - ").concat(showFilterSearch ? filterSearchHeight : 0, "px - ").concat(updateMethod === _constants.BATCH ? actionSetHeight : 0, "px)");
     return height;
   };
-  return /*#__PURE__*/_react.default.createElement(_framerMotion.motion.div, {
+  return /*#__PURE__*/_react2.default.createElement(_framerMotion.motion.div, {
     ref: filterPanelRef,
     className: (0, _classnames.default)(componentClass, "".concat(componentClass, "__container"), (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(componentClass, "--open"), panelOpen), (0, _defineProperty2.default)(_cx, "".concat(componentClass, "--batch"), showActionSet), (0, _defineProperty2.default)(_cx, "".concat(componentClass, "--instant"), !showActionSet), _cx)),
     initial: false,
     animate: panelOpen ? 'visible' : 'hidden',
     variants: _variants.panelVariants
-  }, /*#__PURE__*/_react.default.createElement(_framerMotion.motion.div, {
+  }, /*#__PURE__*/_react2.default.createElement(_framerMotion.motion.div, {
     variants: _variants.innerContainerVariants
-  }, /*#__PURE__*/_react.default.createElement("header", {
+  }, /*#__PURE__*/_react2.default.createElement("header", {
     ref: filterHeadingRef,
     className: (0, _classnames.default)("".concat(componentClass, "__heading"), (0, _defineProperty2.default)({}, "".concat(componentClass, "__heading--with-divider"), showDividerLine))
-  }, /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/_react2.default.createElement("div", {
     className: "".concat(componentClass, "__title")
-  }, title), /*#__PURE__*/_react.default.createElement(_react2.Button, {
+  }, title), /*#__PURE__*/_react2.default.createElement(_react.Button, {
     hasIconOnly: true,
     renderIcon: function renderIcon(props) {
-      return /*#__PURE__*/_react.default.createElement(_icons.Close, (0, _extends2.default)({
+      return /*#__PURE__*/_react2.default.createElement(_icons.Close, (0, _extends2.default)({
         size: 16
       }, props));
     },
@@ -209,14 +211,14 @@ var FilterPanel = function FilterPanel(_ref) {
     tooltipPosition: "bottom",
     tooltipAlignment: "end",
     onClick: closePanel
-  }), showFilterSearch && /*#__PURE__*/_react.default.createElement("div", {
+  }), showFilterSearch && /*#__PURE__*/_react2.default.createElement("div", {
     ref: filterSearchRef,
     className: "".concat(componentClass, "__search")
-  }, /*#__PURE__*/_react.default.createElement(_react2.Layer, null, /*#__PURE__*/_react.default.createElement(_react2.Search, {
+  }, /*#__PURE__*/_react2.default.createElement(_react.Layer, null, /*#__PURE__*/_react2.default.createElement(_react.Search, {
     labelText: searchLabelText,
     placeholder: searchPlaceholder,
     size: "sm"
-  })))), /*#__PURE__*/_react.default.createElement("div", {
+  })))), /*#__PURE__*/_react2.default.createElement("div", {
     className: "".concat(componentClass, "__inner-container"),
     style: {
       height: getScrollableContainerHeight()
@@ -228,15 +230,15 @@ var FilterPanel = function FilterPanel(_ref) {
       _ref2$filters = _ref2.filters,
       filters = _ref2$filters === void 0 ? [] : _ref2$filters,
       hasAccordion = _ref2.hasAccordion;
-    return /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/_react2.default.createElement("div", {
       key: index,
       className: "".concat(componentClass, "__category")
-    }, categoryTitle && /*#__PURE__*/_react.default.createElement("div", {
+    }, categoryTitle && /*#__PURE__*/_react2.default.createElement("div", {
       className: "".concat(componentClass, "__category-title")
-    }, categoryTitle), hasAccordion ? /*#__PURE__*/_react.default.createElement(_react2.Accordion, null, filters.map(function (_ref3) {
+    }, categoryTitle), hasAccordion ? /*#__PURE__*/_react2.default.createElement(_react.Accordion, null, filters.map(function (_ref3) {
       var filterLabel = _ref3.filterLabel,
         filter = _ref3.filter;
-      return /*#__PURE__*/_react.default.createElement(_react2.AccordionItem, {
+      return /*#__PURE__*/_react2.default.createElement(_react.AccordionItem, {
         title: filterLabel,
         key: filterLabel
       }, renderFilter(filter));