@carbon/ibm-products 2.48.0 → 2.49.0

package/es/components/ConditionBuilder/utils/handleKeyboardEvents.js

@@ -6,8 +6,7 @@
  */
 
 import { toConsumableArray as _toConsumableArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
-import { blockClass } from '../ConditionBuilderContext/DataConfigs.js';
-import { focusThisItem, manageTabIndexAndFocus, traverseClockVise, traverseReverse, checkForHoldingKey, focusThisField } from './util.js';
+import { blockClass, HIERARCHICAL_VARIANT, focusThisItem, manageTabIndexAndFocus, traverseClockVise, traverseReverse, checkForHoldingKey, focusThisField } from './util.js';
 
 var handleKeyDown = function handleKeyDown(evt, conditionBuilderRef, variant) {
   var _activeElement$closes;
@@ -78,9 +77,9 @@ var handleKeyPressForPopover = function handleKeyPressForPopover(evt, parentCont
         if (document.activeElement.type !== 'button') {
           var _document$activeEleme2;
           //for button , enter key is click which already handled by framework, for other elements trigger click
+          evt.preventDefault();
           (_document$activeEleme2 = document.activeElement) === null || _document$activeEleme2 === void 0 || _document$activeEleme2.click();
         }
-        evt.preventDefault();
       } else {
         if (document.activeElement.type !== 'button') {
           var _document$activeEleme3;
@@ -101,12 +100,12 @@ var handleKeyPressForMainContent = function handleKeyPressForMainContent(evt, co
   switch (evt.key) {
     case 'ArrowRight':
       evt.preventDefault();
-      if (variant == 'tree') {
+      if (variant == HIERARCHICAL_VARIANT) {
         var _evt$target$closest;
         var allCellsInRow = Array.from((_evt$target$closest = evt.target.closest('[role="row"]')) === null || _evt$target$closest === void 0 ? void 0 : _evt$target$closest.querySelectorAll('[role="gridcell"] button'));
         if (allCellsInRow.length === 1) {
           evt.target = evt.target.closest('[role="row"]');
-          handleRowNavigationTree(evt, conditionBuilderRef, variant);
+          handleRowNavigationHierarchical(evt, conditionBuilderRef, variant);
           //focus next row
         } else if (evt.target.getAttribute('role') == 'row') {
           //when current focus is on a row, then we need to enter inside and focus the first cell of that row
@@ -128,7 +127,7 @@ var handleKeyPressForMainContent = function handleKeyPressForMainContent(evt, co
       break;
     case 'ArrowLeft':
       evt.preventDefault();
-      if (variant == 'tree') {
+      if (variant == HIERARCHICAL_VARIANT) {
         if (evt.target.getAttribute('role') !== 'row') {
           var _evt$target$closest2;
           //when any cell is focussed, arrow left will select the previous cell or current row
@@ -150,8 +149,8 @@ var handleKeyPressForMainContent = function handleKeyPressForMainContent(evt, co
     case 'ArrowUp':
     case 'ArrowDown':
       evt.preventDefault();
-      if (variant == 'tree') {
-        handleRowNavigationTree(evt, conditionBuilderRef, variant);
+      if (variant == HIERARCHICAL_VARIANT) {
+        handleRowNavigationHierarchical(evt, conditionBuilderRef, variant);
       } else {
         handleRowNavigation(evt, conditionBuilderRef, variant);
       }
@@ -179,7 +178,7 @@ var handleRowNavigation = function handleRowNavigation(evt, conditionBuilderRef,
   var currentRowIndex = getRowIndex(evt.target, conditionBuilderRef);
   navigateToNextRowCell(evt, currentRowIndex, rows, variant, conditionBuilderRef);
 };
-var handleRowNavigationTree = function handleRowNavigationTree(evt, conditionBuilderRef, variant) {
+var handleRowNavigationHierarchical = function handleRowNavigationHierarchical(evt, conditionBuilderRef, variant) {
   var rows = getRows(conditionBuilderRef);
   var currentRowIndex = getRowIndex(evt.target, conditionBuilderRef);
   var nextRowIndex = currentRowIndex;
@@ -217,7 +216,7 @@ var navigateToNextRowCell = function navigateToNextRowCell(evt, currentRowIndex,
   var itemName = evt.target.dataset.name;
   if (nextRow !== null && nextRow !== void 0 && nextRow.querySelector("[data-name=\"".concat(itemName, "\"]"))) {
     manageTabIndexAndFocus(nextRow === null || nextRow === void 0 ? void 0 : nextRow.querySelector("[data-name=\"".concat(itemName, "\"]")), conditionBuilderRef);
-  } else if (variant === 'tree') {
+  } else if (variant === HIERARCHICAL_VARIANT) {
     //when the next row is a if statement , then that row is focused. From any cell of last row of an group , arrow down select the next row (if)
     manageTabIndexAndFocus(nextRow, conditionBuilderRef);
   }

package/es/components/ConditionBuilder/utils/useDataConfigs.d.ts

@@ -0,0 +1,18 @@
+export function useDataConfigs(): {
+    statementConfig: {
+        label: string;
+        id: string;
+        connector: string;
+        text1: any;
+        text2: string;
+    }[];
+    connectorConfig: {
+        label: any;
+        id: string;
+    }[];
+    operatorConfig: {
+        label: any;
+        id: string;
+        type: string;
+    }[];
+};

package/es/components/ConditionBuilder/utils/useDataConfigs.js

@@ -0,0 +1,120 @@
+/**
+ * Copyright IBM Corp. 2020, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { useTranslations } from './useTranslations.js';
+
+var useDataConfigs = function useDataConfigs() {
+  var _useTranslations = useTranslations(['ifAll', 'ifAny', 'unlessAll', 'unlessAny', 'and', 'or', 'is', 'greater', 'greaterEqual', 'lower', 'lowerEqual', 'startsWith', 'endsWith', 'contains', 'oneOf', 'before', 'after', 'between']),
+    _useTranslations2 = _slicedToArray(_useTranslations, 18),
+    ifAll = _useTranslations2[0],
+    ifAny = _useTranslations2[1],
+    unlessAll = _useTranslations2[2],
+    unlessAny = _useTranslations2[3],
+    and = _useTranslations2[4],
+    or = _useTranslations2[5],
+    is = _useTranslations2[6],
+    greater = _useTranslations2[7],
+    greaterEqual = _useTranslations2[8],
+    lower = _useTranslations2[9],
+    lowerEqual = _useTranslations2[10],
+    startsWith = _useTranslations2[11],
+    endsWith = _useTranslations2[12],
+    contains = _useTranslations2[13],
+    oneOf = _useTranslations2[14],
+    before = _useTranslations2[15],
+    after = _useTranslations2[16],
+    between = _useTranslations2[17];
+  var statementConfig = [{
+    label: 'ifText',
+    id: 'ifAll',
+    connector: 'and',
+    text1: ifAll,
+    text2: '(a && b)'
+  }, {
+    label: 'ifText',
+    id: 'ifAny',
+    connector: 'or',
+    text1: ifAny,
+    text2: '(a || b)'
+  }, {
+    label: 'unlessText',
+    id: 'unlessAll',
+    connector: 'and',
+    text1: unlessAll,
+    text2: '! (a && b)'
+  }, {
+    label: 'unlessText',
+    id: 'unlessAny',
+    connector: 'or',
+    text1: unlessAny,
+    text2: '! (a || b)'
+  }];
+  var connectorConfig = [{
+    label: and,
+    id: 'and'
+  }, {
+    label: or,
+    id: 'or'
+  }];
+  var operatorConfig = [{
+    label: is,
+    id: 'is',
+    type: 'all'
+  }, {
+    label: greater,
+    id: 'greater',
+    type: 'number'
+  }, {
+    label: greaterEqual,
+    id: 'greaterEqual',
+    type: 'number'
+  }, {
+    label: lower,
+    id: 'lower',
+    type: 'number'
+  }, {
+    label: lowerEqual,
+    id: 'lowerEqual',
+    type: 'number'
+  }, {
+    label: startsWith,
+    id: 'startsWith',
+    type: 'text,textarea'
+  }, {
+    label: endsWith,
+    id: 'endsWith',
+    type: 'text,textarea'
+  }, {
+    label: contains,
+    id: 'contains',
+    type: 'text,textarea'
+  }, {
+    label: oneOf,
+    id: 'oneOf',
+    type: 'option'
+  }, {
+    label: before,
+    id: 'before',
+    type: 'date,time'
+  }, {
+    label: after,
+    id: 'after',
+    type: 'date,time'
+  }, {
+    label: between,
+    id: 'between',
+    type: 'date'
+  }];
+  return {
+    statementConfig: statementConfig,
+    connectorConfig: connectorConfig,
+    operatorConfig: operatorConfig
+  };
+};
+
+export { useDataConfigs };

package/es/components/ConditionBuilder/utils/useTranslations.d.ts

@@ -1 +1 @@
-export function useTranslations(translationKeys: any): any;
+export function useTranslations(translationKeys: any, alterTranslationKeyMap: any): any;

package/es/components/ConditionBuilder/utils/useTranslations.js

@@ -9,10 +9,13 @@ import { useContext } from 'react';
 import { ConditionBuilderContext } from '../ConditionBuilderContext/ConditionBuilderProvider.js';
 import { translationsObject } from '../ConditionBuilderContext/translationObject.js';
 
-var useTranslations = function useTranslations(translationKeys) {
+var useTranslations = function useTranslations(translationKeys, alterTranslationKeyMap) {
   var _useContext = useContext(ConditionBuilderContext),
     translateWithId = _useContext.translateWithId;
   return translationKeys.map(function (translationKey) {
+    if (alterTranslationKeyMap !== null && alterTranslationKeyMap !== void 0 && alterTranslationKeyMap[translationKey]) {
+      translationKey = alterTranslationKeyMap[translationKey];
+    }
     if (translateWithId !== null && translateWithId !== void 0 && translateWithId(translationKey)) {
       return translateWithId(translationKey);
     } else if (translationsObject[translationKey]) {

package/es/components/ConditionBuilder/utils/util.d.ts

@@ -1,3 +1,6 @@
+export const blockClass: string;
+export const NON_HIERARCHICAL_VARIANT: "Non-Hierarchical";
+export const HIERARCHICAL_VARIANT: "Hierarchical";
 export function focusThisField(evt: any, conditionBuilderRef: any): void;
 export function focusThisItem(currentElement: any, conditionBuilderRef: any): void;
 export function traverseClockVise(eachElem: any, index: any, allElements: any, rotate: any, trapFocus: any, conditionBuilderRef: any): void;
@@ -5,3 +8,12 @@ export function traverseReverse(eachElem: any, index: any, allElements: any, rot
 export function checkForHoldingKey(evt: any, key: any): any;
 export function checkIsValid(item: any): any;
 export function manageTabIndexAndFocus(currentElement: any, conditionBuilderRef: any): void;
+export namespace getValue {
+    function text(value: any): any;
+    function textarea(value: any): any;
+    function time(value: any): any;
+    function number(value: any): any;
+    function option(value: any): any;
+    function date(value: any): any;
+    function custom(value: any): any;
+}

package/es/components/ConditionBuilder/utils/util.js

@@ -5,8 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { blockClass } from '../ConditionBuilderContext/DataConfigs.js';
+import { pkg } from '../../../settings.js';
 
+var blockClass = "".concat(pkg.prefix, "--condition-builder");
+var NON_HIERARCHICAL_VARIANT = 'Non-Hierarchical';
+var HIERARCHICAL_VARIANT = 'Hierarchical';
 var focusThisField = function focusThisField(evt, conditionBuilderRef) {
   if (evt) {
     setTimeout(function () {
@@ -66,5 +69,48 @@ var manageTabIndexAndFocus = function manageTabIndexAndFocus(currentElement, con
   (_conditionBuilderRef$ = conditionBuilderRef.current) === null || _conditionBuilderRef$ === void 0 || (_conditionBuilderRef$ = _conditionBuilderRef$.querySelector(".".concat(blockClass, "__statement-button"))) === null || _conditionBuilderRef$ === void 0 || _conditionBuilderRef$.setAttribute('tabindex', '1');
   currentElement === null || currentElement === void 0 || currentElement.focus();
 };
+var formatDate = function formatDate(date) {
+  var day = String(date.getDate()).padStart(2, '0');
+  var month = String(date.getMonth() + 1).padStart(2, '0');
+  var year = date.getFullYear();
+  return "".concat(day, "/").concat(month, "/").concat(year);
+};
+var getValue = {
+  text: function text(value) {
+    return value;
+  },
+  textarea: function textarea(value) {
+    return value;
+  },
+  time: function time(value) {
+    return value;
+  },
+  number: function number(value) {
+    return value;
+  },
+  option: function option(value) {
+    if (value && typeof value !== 'string') {
+      var selectedValues = Array.isArray(value) ? value : [value];
+      return selectedValues.map(function (option) {
+        return option.label;
+      }).join(', ');
+    }
+    return value;
+  },
+  date: function date(value) {
+    if (Array.isArray(value) && value.length > 1) {
+      var start = value !== null && value !== void 0 && value[0] && !isNaN(new Date(value[0])) ? formatDate(new Date(value[0])) : '';
+      var end = value !== null && value !== void 0 && value[1] && !isNaN(new Date(value[1])) ? formatDate(new Date(value[1])) : '';
+      return "".concat(start, " To ").concat(end);
+    } else if (Array.isArray(value) && !isNaN(new Date(value[0]))) {
+      return formatDate(new Date(value[0]));
+    } else {
+      return value;
+    }
+  },
+  custom: function custom(value) {
+    return value;
+  }
+};
 
-export { checkForHoldingKey, checkIsValid, focusThisField, focusThisItem, manageTabIndexAndFocus, traverseClockVise, traverseReverse };
+export { HIERARCHICAL_VARIANT, NON_HIERARCHICAL_VARIANT, blockClass, checkForHoldingKey, checkIsValid, focusThisField, focusThisItem, getValue, manageTabIndexAndFocus, traverseClockVise, traverseReverse };

package/es/components/CreateFullPage/CreateFullPageStep.d.ts

@@ -21,7 +21,7 @@ interface CreateFullPageStepBaseProps extends PropsWithChildren {
     /**
      * This optional prop will render your form content inside of a fieldset html element
      */
-    hasFieldset: boolean;
+    hasFieldset?: boolean;
     /**
      * This prop is used to help track dynamic steps. If this value is `false` then the step is not included in the visible steps or the ProgressIndicator
      * steps. If this value is `true` then the step will be included in the list of visible steps, as well as being included in the ProgressIndicator step list
@@ -66,6 +66,6 @@ type CreateFullPageStepFieldsetProps = {
     hasFieldset?: true;
     fieldsetLegendText: string;
 };
-type CreateFullPageStepProps = CreateFullPageStepBaseProps & CreateFullPageStepFieldsetProps;
+export type CreateFullPageStepProps = CreateFullPageStepBaseProps & CreateFullPageStepFieldsetProps;
 export declare let CreateFullPageStep: React.ForwardRefExoticComponent<CreateFullPageStepProps & React.RefAttributes<HTMLDivElement>>;
 export {};

package/es/components/CreateFullPage/index.d.ts

@@ -7,3 +7,4 @@
 export { CreateFullPage } from './CreateFullPage';
 export { CreateFullPageStep } from './CreateFullPageStep';
 export type { CreateFullPageProps } from './CreateFullPage';
+export type { CreateFullPageStepProps } from './CreateFullPageStep';

package/es/components/CreateTearsheet/CreateTearsheet.js

@@ -111,10 +111,11 @@ var CreateTearsheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var contentRef = useRef(null);
   useEffect(function () {
     var firstItem = stepData.findIndex(function (item) {
-      return item === null || item === void 0 ? void 0 : item.shouldIncludeStep;
+      return item.shouldIncludeStep === true;
     }) + 1;
     var lastItem = lastIndexInArray(stepData, 'shouldIncludeStep', true);
     if (firstItem !== firstIncludedStep) {
+      setCurrentStep(firstItem);
       setFirstIncludedStep(firstItem);
     }
     if (lastItem !== lastIncludedStep) {
@@ -123,10 +124,8 @@ var CreateTearsheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
     if (open && initialStep) {
       var numberOfHiddenSteps = getNumberOfHiddenSteps(stepData, initialStep);
       setCurrentStep(Number(initialStep + numberOfHiddenSteps));
-    } else {
-      setCurrentStep(firstIncludedStep);
     }
-  }, [stepData, firstIncludedStep, lastIncludedStep, initialStep, open]);
+  }, [firstIncludedStep, initialStep, lastIncludedStep, open, stepData]);
   useCreateComponentFocus({
     previousState: previousState,
     currentStep: currentStep,

package/es/components/DataSpreadsheet/DataSpreadsheet.js

@@ -19,6 +19,7 @@ import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { getScrollbarWidth } from '../../global/js/utils/getScrollbarWidth.js';
 import { handleEditSubmit } from './utils/handleEditSubmit.js';
 import { handleHeaderCellSelection } from './utils/handleHeaderCellSelection.js';
+import { getNodeTextContent } from '../../global/js/utils/getNodeTextContent.js';
 import { handleKeyPress } from './utils/commonEventHandlers.js';
 import { pkg } from '../../settings.js';
 import { removeCellSelections } from './utils/removeCellSelections.js';
@@ -205,7 +206,13 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
     var currentHeaders = [];
     if (Object.keys(currentColumns).length > 0) {
       Object.keys(currentColumns).forEach(function (itemIndex) {
-        if (currentColumns[itemIndex].Header) {
+        if (_typeof(currentColumns[itemIndex].Header) === 'object') {
+          if (currentColumns[itemIndex].column_name) {
+            currentHeaders.push(currentColumns[itemIndex].column_name);
+          } else {
+            currentHeaders.push(getNodeTextContent(currentColumns[itemIndex].Header));
+          }
+        } else if (currentColumns[itemIndex].Header) {
           currentHeaders.push(currentColumns[itemIndex].Header);
         }
       });

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

@@ -33,6 +33,7 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
     selectedRowIds = datagridState.state.selectedRowIds,
     toggleAllRowsSelected = datagridState.toggleAllRowsSelected,
     toolbarBatchActions = datagridState.toolbarBatchActions,
+    toolbarBatchActionsDisplayMin = datagridState.toolbarBatchActionsDisplayMin,
     setGlobalFilter = datagridState.setGlobalFilter,
     rows = datagridState.rows,
     dispatch = datagridState.dispatch,
@@ -80,7 +81,7 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
     var minWidthBeforeOverflowIcon = 380;
     // Do not render ButtonMenu when there are 3 or less items
     // and if there is enough available space to render all the items
-    if (toolbarBatchActions && (toolbarBatchActions === null || toolbarBatchActions === void 0 ? void 0 : toolbarBatchActions.length) <= 3 && !displayAllInMenu) {
+    if (toolbarBatchActions && !displayAllInMenu && (!toolbarBatchActionsDisplayMin && (toolbarBatchActions === null || toolbarBatchActions === void 0 ? void 0 : toolbarBatchActions.length) <= 3 || toolbarBatchActionsDisplayMin !== undefined && (toolbarBatchActions === null || toolbarBatchActions === void 0 ? void 0 : toolbarBatchActions.length) <= toolbarBatchActionsDisplayMin)) {
       return;
     }
     var renderItem = function renderItem(batchAction, index) {
@@ -98,7 +99,10 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
       tabIndex: totalSelected > 0 ? 0 : -1,
       menuAlignment: "bottom"
     }, toolbarBatchActions === null || toolbarBatchActions === void 0 ? void 0 : toolbarBatchActions.map(function (batchAction, index) {
-      var hidden = index < 2 && !displayAllInMenu;
+      var hidden = toolbarBatchActionsDisplayMin === undefined && index < 2 && !displayAllInMenu;
+      if (toolbarBatchActionsDisplayMin !== undefined && index < toolbarBatchActionsDisplayMin && !displayAllInMenu) {
+        hidden = true;
+      }
       if (!hidden) {
         return renderItem(batchAction, index);
       }
@@ -144,13 +148,14 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
     totalCount: rows && rows.length,
     translateWithId: translateWithIdBatchActions
   }, !displayAllInMenu && toolbarBatchActions && (toolbarBatchActions === null || toolbarBatchActions === void 0 ? void 0 : toolbarBatchActions.map(function (batchAction, index) {
-    if (index < 2 && toolbarBatchActions.length > 3 || index < 3 && toolbarBatchActions.length <= 3) {
+    if (!toolbarBatchActionsDisplayMin && index < 2 && toolbarBatchActions.length > 3 || index < 3 && toolbarBatchActions.length <= 3 || toolbarBatchActionsDisplayMin !== undefined && index < toolbarBatchActionsDisplayMin) {
       return /*#__PURE__*/React__default.createElement(TableBatchAction, {
         key: "".concat(batchAction.label, "-").concat(index),
         renderIcon: batchAction.renderIcon,
         onClick: function onClick(event) {
           return onClickHandler(event, batchAction);
         },
+        className: cx(_defineProperty({}, "".concat(carbon.prefix, "--noLabel"), !batchAction.label || batchAction.label === '')),
         iconDescription: batchAction.label,
         tabIndex: totalSelected > 0 ? 0 : -1
       }, batchAction.label);

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

@@ -6,12 +6,13 @@
  */
 
 import { extends as _extends, objectSpread2 as _objectSpread2 } from '../../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { useEffect, useRef } from 'react';
+import React__default, { useRef, useEffect } from 'react';
 import { VariableSizeList } from 'react-window';
 import { TableBody } from '@carbon/react';
 import { pkg } from '../../../settings.js';
 import DatagridHead from './DatagridHead.js';
 import { useResizeObserver } from '../../../global/js/hooks/useResizeObserver.js';
+import { useIsomorphicEffect } from '../../../global/js/hooks/useIsomorphicEffect.js';
 
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 var rowSizeMap = {
@@ -23,7 +24,6 @@ var rowSizeMap = {
 };
 var defaultRowHeight = rowSizeMap.lg;
 var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
-  var _gridRef$current, _gridRef$current2;
   var getTableBodyProps = datagridState.getTableBodyProps,
     rows = datagridState.rows,
     prepareRow = datagridState.prepareRow,
@@ -40,6 +40,8 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
     gridRef = datagridState.gridRef,
     tableId = datagridState.tableId,
     onVirtualScroll = datagridState.onVirtualScroll;
+  var headWrapRef = useRef(null);
+  var innerRef = useRef(null);
 
   /* istanbul ignore next */
   var handleVirtualGridResize = function handleVirtualGridResize() {
@@ -60,7 +62,7 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
     if (listRef && listRef.current) {
       listRef.current.resetAfterIndex(0);
     }
-  }, [listRef]);
+  }, [listRef, rowHeight]);
   var visibleRows = DatagridPagination && page || rows;
   var testRef = useRef(null);
 
@@ -80,12 +82,21 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
       testRefValue === null || testRefValue === void 0 || testRefValue.removeEventListener('scroll', handleScroll);
     };
   });
+  useIsomorphicEffect(function () {
+    if (headWrapRef.current && headWrapRef.current.style) {
+      var _gridRef$current;
+      headWrapRef.current.style.width = "".concat(gridRef === null || gridRef === void 0 || (_gridRef$current = gridRef.current) === null || _gridRef$current === void 0 ? void 0 : _gridRef$current.clientWidth, "px");
+    }
+  }, [headWrapRef, gridRef]);
+  useIsomorphicEffect(function () {
+    if (testRef !== null && testRef !== void 0 && testRef.current && testRef.current.style) {
+      var _gridRef$current2;
+      testRef.current.style.width = "".concat(gridRef === null || gridRef === void 0 || (_gridRef$current2 = gridRef.current) === null || _gridRef$current2 === void 0 ? void 0 : _gridRef$current2.clientWidth, "px");
+    }
+  }, [testRef, gridRef]);
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(blockClass, "__head-wrap"),
-    style: {
-      width: gridRef === null || gridRef === void 0 || (_gridRef$current = gridRef.current) === null || _gridRef$current === void 0 ? void 0 : _gridRef$current.clientWidth,
-      overflow: 'hidden'
-    }
+    ref: headWrapRef
   }, /*#__PURE__*/React__default.createElement(DatagridHead, datagridState)), /*#__PURE__*/React__default.createElement(TableBody, _extends({}, getTableBodyProps({
     role: undefined
   }), {
@@ -105,10 +116,7 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
     innerRef: innerListRef,
     outerRef: testRef,
     ref: listRef,
-    className: "".concat(blockClass, "__virtual-scrollbar"),
-    style: {
-      width: gridRef === null || gridRef === void 0 || (_gridRef$current2 = gridRef.current) === null || _gridRef$current2 === void 0 ? void 0 : _gridRef$current2.clientWidth
-    }
+    className: "".concat(blockClass, "__virtual-scrollbar")
   }, function (_ref) {
     var _row$RowRenderer;
     var index = _ref.index,
@@ -118,6 +126,7 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
     var _row$getRowProps = row.getRowProps(),
       key = _row$getRowProps.key;
     return /*#__PURE__*/React__default.createElement("div", {
+      ref: innerRef,
       style: _objectSpread2({}, style)
     }, row === null || row === void 0 || (_row$RowRenderer = row.RowRenderer) === null || _row$RowRenderer === void 0 ? void 0 : _row$RowRenderer.call(row, _objectSpread2(_objectSpread2({}, datagridState), {}, {
       row: row,

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

@@ -6,7 +6,7 @@
  */
 
 import { slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { useState, useCallback, useEffect } from 'react';
+import React__default, { useState, useRef, useCallback, useEffect } from 'react';
 import PropTypes from '../../../../../node_modules/prop-types/index.js';
 import '../../../../Tearsheet/Tearsheet.js';
 import { TearsheetNarrow } from '../../../../Tearsheet/TearsheetNarrow.js';
@@ -59,6 +59,7 @@ var CustomizeColumnsTearsheet = function CustomizeColumnsTearsheet(_ref) {
     _useState10 = _slicedToArray(_useState9, 2),
     isDirty = _useState10[0],
     setIsDirty = _useState10[1];
+  var prevColumnDefinitions = useRef();
   var onRequestClose = function onRequestClose() {
     setColumnObjects(columnDefinitions);
     setIsTearsheetOpen(false);
@@ -121,6 +122,9 @@ var CustomizeColumnsTearsheet = function CustomizeColumnsTearsheet(_ref) {
   }, [columnObjects]);
   var string = searchText.trim().toLowerCase();
   useEffect(function () {
+    if (prevColumnDefinitions.current !== columnDefinitions) {
+      setColumnObjects(columnDefinitions);
+    }
     var actionCount = columnObjects.filter(function (col) {
       return col.id === 'actions';
     }).length;
@@ -129,7 +133,8 @@ var CustomizeColumnsTearsheet = function CustomizeColumnsTearsheet(_ref) {
     }).length;
     setVisibleColumnsCount(getVisibleColumnsCount() - actionCount - datagridSelectionCount < 0 ? 0 : getVisibleColumnsCount() - actionCount - datagridSelectionCount);
     setTotalColumns(columnObjects.length - actionCount - datagridSelectionCount);
-  }, [getVisibleColumnsCount, columnObjects]);
+    prevColumnDefinitions.current = columnDefinitions;
+  }, [getVisibleColumnsCount, columnObjects, columnDefinitions]);
   return /*#__PURE__*/React__default.createElement(TearsheetNarrow, {
     className: "".concat(blockClass, "__customize-columns-tearsheet"),
     open: isOpen,

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

@@ -8,7 +8,7 @@
 import { slicedToArray as _slicedToArray, defineProperty as _defineProperty, extends as _extends } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { Button, Layer, Search, Accordion, AccordionItem } from '@carbon/react';
 import { PANEL, BATCH, CLEAR_FILTERS, INSTANT } from './constants.js';
-import React__default, { useState, useContext, useRef, useMemo, useEffect } from 'react';
+import React__default, { useState, useContext, useRef, useMemo, useEffect, useCallback } from 'react';
 import { panelVariants, innerContainerVariants, actionSetVariants } from './motion/variants.js';
 import { motion, useReducedMotion } from 'framer-motion';
 import { ActionSet } from '../../../../ActionSet/ActionSet.js';
@@ -21,6 +21,7 @@ import { rem } from '@carbon/layout';
 import useFilters from './hooks/useFilters.js';
 import useShouldDisableButtons from './hooks/useShouldDisableButtons.js';
 import useSubscribeToEventEmitter from './hooks/useSubscribeToEventEmitter.js';
+import { useIsomorphicEffect } from '../../../../../global/js/hooks/useIsomorphicEffect.js';
 
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 var componentClass = "".concat(blockClass, "-filter-panel");
@@ -102,7 +103,7 @@ var FilterPanel = function FilterPanel(_ref) {
   var filterHeadingRef = useRef();
   var filterSearchRef = useRef();
   var actionSetRef = useRef();
-
+  var innerContainerRef = useRef();
   /** State from hooks */
   var _useShouldDisableButt = useShouldDisableButtons({
       initialValue: true,
@@ -189,7 +190,7 @@ var FilterPanel = function FilterPanel(_ref) {
   useSubscribeToEventEmitter(CLEAR_FILTERS, function (tableId) {
     reset(tableId);
   });
-  var getScrollableContainerHeight = function getScrollableContainerHeight() {
+  var getScrollableContainerHeight = useCallback(function () {
     var _filterHeadingRef$cur, _filterSearchRef$curr, _actionSetRef$current;
     var filterHeadingHeight = (_filterHeadingRef$cur = filterHeadingRef.current) === null || _filterHeadingRef$cur === void 0 ? void 0 : _filterHeadingRef$cur.getBoundingClientRect().height;
     var filterSearchHeight = (_filterSearchRef$curr = filterSearchRef.current) === null || _filterSearchRef$curr === void 0 ? void 0 : _filterSearchRef$curr.getBoundingClientRect().height;
@@ -197,7 +198,13 @@ var FilterPanel = function FilterPanel(_ref) {
     var height = panelOpen ? "calc(100vh - ".concat(filterHeadingHeight, "px - ").concat( /* istanbul ignore next */
     showFilterSearch ? filterSearchHeight : 0, "px - ").concat(updateMethod === BATCH ? actionSetHeight : 0, "px)") : 0;
     return height;
-  };
+  }, [filterHeadingRef, filterSearchRef, actionSetRef, panelOpen, showFilterSearch, updateMethod]);
+  useIsomorphicEffect(function () {
+    var height = getScrollableContainerHeight();
+    if (innerContainerRef.current && innerContainerRef.current.style) {
+      innerContainerRef.current.style.height = height;
+    }
+  }, [getScrollableContainerHeight, innerContainerRef]);
   return /*#__PURE__*/React__default.createElement(motion.div, {
     ref: filterPanelRef,
     className: cx(componentClass, "".concat(componentClass, "__container"), _defineProperty(_defineProperty(_defineProperty({}, "".concat(componentClass, "--open"), panelOpen), "".concat(componentClass, "--batch"), showActionSet), "".concat(componentClass, "--instant"), !showActionSet)),
@@ -237,9 +244,7 @@ var FilterPanel = function FilterPanel(_ref) {
     size: "sm"
   })))), /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(componentClass, "__inner-container"),
-    style: {
-      height: getScrollableContainerHeight()
-    },
+    ref: innerContainerRef,
     onScroll: onInnerContainerScroll
   }, filterSections.map(function (_ref2, index) {
     var _ref2$categoryTitle = _ref2.categoryTitle,