@carbon/ibm-products 2.60.0-rc.0 → 2.61.0-rc.0

package/lib/components/ActionBar/ActionBar.d.ts

@@ -41,9 +41,9 @@ interface ActionBarProps extends PropsWithChildren {
     /**
      * onItemCountChange - event reporting maxWidth
      */
-    onWidthChange?: (sizes: {
-        minWidth: number;
-        maxWidth: number;
+    onWidthChange?: (sizes?: {
+        minWidth?: number;
+        maxWidth?: number;
     }) => void;
     /**
      * overflowAriaLabel label for open close button overflow used for action bar items that do nto fit.

package/lib/components/ActionBar/ActionBar.js

@@ -12,16 +12,17 @@ var React = require('react');
 var index = require('../../_virtual/index.js');
 var cx = require('classnames');
 var settings = require('../../settings.js');
-var useResizeObserver = require('../../global/js/hooks/useResizeObserver.js');
 var react = require('@carbon/react');
 var uuidv4 = require('../../global/js/utils/uuidv4.js');
 var propsHelper = require('../../global/js/utils/props-helper.js');
 var ActionBarItem = require('./ActionBarItem.js');
 var ActionBarOverflowItems = require('./ActionBarOverflowItems.js');
+var useOverflowItems = require('../../global/js/hooks/useOverflowItems.js');
 
 var _excluded = ["actions", "className", "maxVisible", "menuOptionsClass", "onWidthChange", "overflowAriaLabel", "overflowMenuRef", "rightAlign"],
-  _excluded2 = ["key", "id"],
-  _excluded3 = ["key"];
+  _excluded2 = ["id"],
+  _excluded3 = ["key", "id"];
+
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(settings.pkg.prefix, "--action-bar");
 var componentName = 'ActionBar';
@@ -46,160 +47,56 @@ exports.ActionBar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     overflowMenuRef = _ref.overflowMenuRef,
     rightAlign = _ref.rightAlign,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  var _useState = React.useState(0),
-    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-    displayCount = _useState2[0],
-    setDisplayCount = _useState2[1];
-  var _useState3 = React.useState([]),
-    _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
-    displayedItems = _useState4[0],
-    setDisplayedItems = _useState4[1];
-  var _useState5 = React.useState(null),
-    _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
-    hiddenSizingItems = _useState6[0],
-    setHiddenSizingItems = _useState6[1];
   var internalId = React.useRef(uuidv4.default());
   var refDisplayedItems = React.useRef(null);
-  var sizingRef = React.useRef(null);
-  var sizes = React.useRef({});
   var backupRef = React.useRef(null);
   var localRef = ref || backupRef;
-
-  // create hidden sizing items
-  React.useEffect(function () {
-    // Hidden action bar and items used to calculate sizes
-    setHiddenSizingItems(/*#__PURE__*/React.createElement("div", {
-      className: "".concat(blockClass, "__hidden-sizing-items"),
-      "aria-hidden": true,
-      ref: sizingRef
-    }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(ActionBarOverflowItems.ActionBarOverflowItems, {
-      className: "".concat(blockClass, "__hidden-sizing-item"),
-      overflowAriaLabel: "hidden sizing overflow items",
-      overflowMenuRef: overflowMenuRef,
-      overflowItems: [],
-      key: "hidden-overflow-menu",
-      tabIndex: -1
-    }), actions.map(function (_ref2) {
-      var key = _ref2.key,
-        id = _ref2.id,
-        rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref2, _excluded2);
-      return /*#__PURE__*/React.createElement(ActionBarItem.ActionBarItem, _rollupPluginBabelHelpers.extends({}, rest, {
-        // ensure id is not duplicated
-        "data-original-id": id,
-        key: "hidden-item-".concat(key),
-        className: "".concat(blockClass, "__hidden-sizing-item"),
-        tabIndex: -1
-      }));
-    }))));
-  }, [actions, overflowMenuRef]);
-
-  // creates displayed items based on actions, displayCount and alignment
-  React.useEffect(function () {
-    // Calculate the displayed items
-    var newDisplayedItems = actions.map(function (_ref3) {
-      var key = _ref3.key,
-        rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref3, _excluded3);
-      return /*#__PURE__*/React.createElement(ActionBarItem.ActionBarItem, _rollupPluginBabelHelpers.extends({}, rest, {
-        key: key
-      }));
-    });
-
-    // extract any there is not enough room for into newOverflowItems
-    var newOverflowItems = newDisplayedItems.splice(displayCount);
-
-    // add overflow menu if needed
-    if (newOverflowItems.length) {
-      newDisplayedItems.push(/*#__PURE__*/React.createElement(ActionBarOverflowItems.ActionBarOverflowItems, {
-        menuOptionsClass: menuOptionsClass,
-        overflowAriaLabel: overflowAriaLabel,
-        overflowMenuRef: overflowMenuRef,
-        overflowItems: newOverflowItems,
-        key: "overflow-menu-".concat(internalId.current)
-      }));
-    }
-    setDisplayedItems(newDisplayedItems);
-  }, [actions, displayCount, overflowAriaLabel, menuOptionsClass, overflowMenuRef]);
-
-  // determine display count based on space available and width of pageActions
-  var checkFullyVisibleItems = function checkFullyVisibleItems() {
-    /* istanbul ignore if */
-    if (sizingRef.current) {
-      var _refDisplayedItems$cu;
-      var sizingItems = Array.from(sizingRef.current.querySelectorAll(".".concat(blockClass, "__hidden-sizing-item")));
-
-      // first item is always the overflow even if nothing else is rendered
-      var overflowItem = sizingItems.shift();
-
-      // determine how many will fit
-      var spaceAvailable = (_refDisplayedItems$cu = refDisplayedItems.current) === null || _refDisplayedItems$cu === undefined ? undefined : _refDisplayedItems$cu.offsetWidth;
-      var willFit = 0;
-      var maxVisibleWidth = 0;
-      var fitLimit = maxVisible ? Math.min(maxVisible, sizingItems.length) : sizingItems.length;
-
-      // loop checking the space available
-      for (var i = 0; i < fitLimit; i++) {
-        var newSpaceAvailable = spaceAvailable && spaceAvailable - sizingItems[i].offsetWidth;
-
-        // update maxVisibleWidth for later use by onWidthChange
-        maxVisibleWidth += sizingItems[i].offsetWidth;
-        if (newSpaceAvailable && newSpaceAvailable >= 0) {
-          spaceAvailable = newSpaceAvailable;
-          willFit += 1;
-        }
-      }
-
-      // if not enough space for all items then make room for the overflow
-      var overflowWidth = overflowItem.offsetWidth;
-      if (willFit < sizingItems.length) {
-        // Check space for overflow
-        while (willFit > 0 && spaceAvailable && spaceAvailable < overflowWidth) {
-          willFit -= 1;
-
-          // Highly unlikely that any action bar item is narrower than the overflow item
-
-          // Make sure by removing items in reverse order
-          spaceAvailable += sizingItems[willFit].offsetWidth;
-        }
-      }
-      if (onWidthChange && (sizes.current.minWidth !== overflowWidth || sizes.current.maxWidth !== maxVisibleWidth)) {
-        sizes.current.minWidth = overflowWidth;
-        sizes.current.maxWidth = maxVisibleWidth;
-        // emit onWidthChange
-        onWidthChange({
-          minWidth: overflowWidth,
-          maxWidth: maxVisibleWidth
-        });
-      }
-      if (willFit < 1) {
-        setDisplayCount(0);
-      } else {
-        setDisplayCount(willFit);
-      }
-    }
-  };
-  React.useEffect(function () {
-    checkFullyVisibleItems();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [maxVisible, hiddenSizingItems]);
-
-  // /* istanbul ignore next */ // not sure how to fake window resize
-  var handleResize = function handleResize() {
-    // when the hidden sizing items change size
-    /* istanbul ignore next */
-    // not sure how to fake window resize
-    checkFullyVisibleItems();
-  };
-
-  // // resize of the items
-  useResizeObserver.useResizeObserver(sizingRef, handleResize);
-  useResizeObserver.useResizeObserver(localRef, handleResize);
+  var _offsetRef = React.useRef(null);
+  var offsetRef = overflowMenuRef || _offsetRef;
+  var _items = actions.map(function (action) {
+    return _rollupPluginBabelHelpers.objectSpread2({
+      id: action === null || action === undefined ? undefined : action.key
+    }, action);
+  });
+  var _useOverflowItems = useOverflowItems.useOverflowItems(_items, localRef, offsetRef, maxVisible, onWidthChange),
+    visibleItems = _useOverflowItems.visibleItems,
+    hiddenItems = _useOverflowItems.hiddenItems,
+    itemRefHandler = _useOverflowItems.itemRefHandler,
+    offsetRefHandler = _useOverflowItems.offsetRefHandler;
+  var overflowMenuItems = hiddenItems === null || hiddenItems === undefined ? undefined : hiddenItems.map(function (_ref2) {
+    var key = _ref2.id,
+      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref2, _excluded2);
+    return /*#__PURE__*/React.createElement(ActionBarItem.ActionBarItem, _rollupPluginBabelHelpers.extends({}, rest, {
+      key: key
+    }));
+  });
   return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
     className: cx([blockClass, className]),
     ref: localRef
-  }), hiddenSizingItems, /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", {
     ref: refDisplayedItems,
     className: cx(["".concat(blockClass, "__displayed-items"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__displayed-items--right"), rightAlign)])
-  }, displayedItems));
+  }, visibleItems.map(function (_ref4) {
+    var key = _ref4.key,
+      id = _ref4.id,
+      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref4, _excluded3);
+    return /*#__PURE__*/React.createElement(ActionBarItem.ActionBarItem, _rollupPluginBabelHelpers.extends({}, _rollupPluginBabelHelpers.objectSpread2({
+      id: id
+    }, rest), {
+      key: key,
+      ref: function ref(node) {
+        itemRefHandler(id, node);
+      }
+    }));
+  }), (overflowMenuItems === null || overflowMenuItems === undefined ? undefined : overflowMenuItems.length) > 0 && /*#__PURE__*/React.createElement(ActionBarOverflowItems.ActionBarOverflowItems, {
+    menuOptionsClass: menuOptionsClass,
+    overflowAriaLabel: overflowAriaLabel,
+    overflowMenuRef: function overflowMenuRef(node) {
+      return offsetRef.current = offsetRefHandler(node);
+    },
+    overflowItems: overflowMenuItems,
+    key: "overflow-menu-".concat(internalId.current)
+  })));
 });
 exports.ActionBar = settings.pkg.checkComponentEnabled(exports.ActionBar, componentName);
 exports.ActionBar.displayName = componentName;

package/lib/components/ActionBar/ActionBarOverflowItems.js

@@ -82,7 +82,7 @@ ActionBarOverflowItems.propTypes = {
   /**@ts-ignore */
   overflowMenuRef: index.default.oneOfType([index.default.shape({
     current: index.default.elementType
-  }), index.default.object]),
+  }), index.default.object, index.default.func]),
   /**
    * Optional tab index
    */

package/lib/components/Checklist/ChecklistChart.js

@@ -11,11 +11,11 @@ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelper
 var React = require('react');
 var index$1 = require('../../_virtual/index.js');
 var cx = require('classnames');
-var clamp = require('lodash/clamp');
 var index = require('../../node_modules/@carbon/colors/es/index.js');
 var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');
 var Checklist_types = require('./Checklist.types.js');
+var clamp = require('../../global/js/utils/clamp.js');
 
 var _excluded = ["className", "value", "theme"];
 var blockClass = "".concat(settings.pkg.prefix, "--checklist__chart");
@@ -37,7 +37,7 @@ function (_ref, ref) {
     _ref$theme = _ref.theme,
     theme = _ref$theme === undefined ? defaults.theme : _ref$theme,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  var numDegrees = clamp(value * 360, 0, 360);
+  var numDegrees = clamp.clamp(value * 360, 0, 360);
   var circleColor = theme === Checklist_types.Themes.light ? index.gray20 : index.gray70; // $ui-03 (-ish)
   var progressColor = index.purple50;
   React.useEffect(function () {

package/lib/components/Coachmark/Coachmark.js

@@ -18,7 +18,7 @@ var reactDom = require('react-dom');
 var cx = require('classnames');
 var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');
-var lodash = require('lodash');
+var throttle = require('../../global/js/utils/throttle.js');
 var react = require('@carbon/react');
 var useIsomorphicEffect = require('../../global/js/hooks/useIsomorphicEffect.js');
 
@@ -151,7 +151,7 @@ exports.Coachmark = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     positionTune: positionTune,
     isOpen: isOpen
   };
-  var handleResize = lodash.throttle(function () {
+  var handleResize = throttle.throttle(function () {
     closeOverlay();
   }, 2000);
 

package/lib/components/CoachmarkOverlayElements/CoachmarkOverlayElements.js

@@ -14,7 +14,7 @@ var Carousel = require('../Carousel/Carousel.js');
 require('../Carousel/CarouselItem.js');
 var index = require('../../_virtual/index.js');
 var SteppedAnimatedMedia = require('../SteppedAnimatedMedia/SteppedAnimatedMedia.js');
-var lodash = require('lodash');
+var clamp = require('../../global/js/utils/clamp.js');
 var cx = require('classnames');
 var devtools = require('../../global/js/utils/devtools.js');
 var pconsole = require('../../global/js/utils/pconsole.js');
@@ -105,7 +105,7 @@ exports.CoachmarkOverlayElements = /*#__PURE__*/React.forwardRef(function (_ref,
     var _scrollRef$current, _scrollRef$current$sc;
     // When current step is set by props
     // scroll to the appropriate view on the carrousel
-    var targetStep = lodash.clamp(currentStep, progStepFloor, progStepCeil);
+    var targetStep = clamp.clamp(currentStep, progStepFloor, progStepCeil);
     scrollRef === null || scrollRef === undefined || (_scrollRef$current = scrollRef.current) === null || _scrollRef$current === undefined || (_scrollRef$current$sc = _scrollRef$current.scrollToView) === null || _scrollRef$current$sc === undefined || _scrollRef$current$sc.call(_scrollRef$current, targetStep);
     // Avoid circular call to this hook
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -166,7 +166,7 @@ exports.CoachmarkOverlayElements = /*#__PURE__*/React.forwardRef(function (_ref,
     disabled: scrollPosition === 0,
     onClick: function onClick() {
       var _scrollRef$current2, _scrollRef$current2$s;
-      var targetStep = lodash.clamp(currentProgStep - 1, progStepFloor, progStepCeil);
+      var targetStep = clamp.clamp(currentProgStep - 1, progStepFloor, progStepCeil);
       scrollRef === null || scrollRef === undefined || (_scrollRef$current2 = scrollRef.current) === null || _scrollRef$current2 === undefined || (_scrollRef$current2$s = _scrollRef$current2.scrollToView) === null || _scrollRef$current2$s === undefined || _scrollRef$current2$s.call(_scrollRef$current2, targetStep);
       setCurrentProgStep(targetStep);
       onBack === null || onBack === undefined || onBack();
@@ -178,7 +178,7 @@ exports.CoachmarkOverlayElements = /*#__PURE__*/React.forwardRef(function (_ref,
     disabled: scrollPosition === 1,
     onClick: function onClick() {
       var _scrollRef$current3, _scrollRef$current3$s;
-      var targetStep = lodash.clamp(currentProgStep + 1, progStepFloor, progStepCeil);
+      var targetStep = clamp.clamp(currentProgStep + 1, progStepFloor, progStepCeil);
       scrollRef === null || scrollRef === undefined || (_scrollRef$current3 = scrollRef.current) === null || _scrollRef$current3 === undefined || (_scrollRef$current3$s = _scrollRef$current3.scrollToView) === null || _scrollRef$current3$s === undefined || _scrollRef$current3$s.call(_scrollRef$current3, targetStep);
       setCurrentProgStep(targetStep);
       onNext === null || onNext === undefined || onNext();

package/lib/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItem.js

@@ -191,11 +191,11 @@ var ConditionBuilderItem = function ConditionBuilderItem(_ref) {
     role: "dialog",
     "aria-label": title,
     onKeyDown: handleKeyDownHandler
-  }, /*#__PURE__*/React.createElement(react.Layer, null, /*#__PURE__*/React.createElement("h1", {
+  }, /*#__PURE__*/React.createElement(react.Layer, null, /*#__PURE__*/React.createElement(react.Section, null, /*#__PURE__*/React.createElement(react.Heading, {
     className: "".concat(util.blockClass, "__item__title")
   }, title), /*#__PURE__*/React.createElement("div", {
     className: "".concat(util.blockClass, "__popover-content")
-  }, renderChildren ? renderChildren(popoverRef) : children))));
+  }, renderChildren ? renderChildren(popoverRef) : children)))));
 };
 ConditionBuilderItem.propTypes = {
   /**

package/lib/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemDate/ConditionBuilderItemDate.js

@@ -13,6 +13,7 @@ var react = require('@carbon/react');
 var index = require('../../../../_virtual/index.js');
 var useTranslations = require('../../utils/useTranslations.js');
 var util = require('../../utils/util.js');
+var ConditionBuilderProvider = require('../../ConditionBuilderContext/ConditionBuilderProvider.js');
 
 var ConditionBuilderItemDate = function ConditionBuilderItemDate(_ref) {
   var conditionState = _ref.conditionState,
@@ -23,6 +24,8 @@ var ConditionBuilderItemDate = function ConditionBuilderItemDate(_ref) {
     _useTranslations2 = _rollupPluginBabelHelpers.slicedToArray(_useTranslations, 2),
     startText = _useTranslations2[0],
     endText = _useTranslations2[1];
+  var _useContext = React.useContext(ConditionBuilderProvider.ConditionBuilderContext);
+    _useContext.conditionBuilderRef;
   var datePickerType = conditionState.operator == 'between' ? 'range' : 'single';
   var onCloseHandler = function onCloseHandler(selectedDate) {
     onChange(selectedDate && selectedDate.length > 0 ? selectedDate : 'INVALID');

package/lib/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemOption/ItemOption.js

@@ -29,6 +29,8 @@ var ItemOption = function ItemOption(_ref) {
     _useTranslations2 = _rollupPluginBabelHelpers.slicedToArray(_useTranslations, 2),
     propertyText = _useTranslations2[0],
     clearSearchText = _useTranslations2[1];
+  var _useContext2 = React.useContext(ConditionBuilderProvider.ConditionBuilderContext),
+    conditionBuilderRef = _useContext2.conditionBuilderRef;
   var allOptions = config.options;
   var _useState = React.useState(''),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
@@ -77,7 +79,10 @@ var ItemOption = function ItemOption(_ref) {
     size: "sm",
     labelText: clearSearchText,
     closeButtonLabelText: clearSearchText,
-    onChange: onSearchChangeHandler
+    onChange: onSearchChangeHandler,
+    onKeyDown: function onKeyDown(evt) {
+      return util.onKeyDownHandlerForSearch(evt, conditionBuilderRef);
+    }
   })), /*#__PURE__*/React.createElement("ul", {
     "aria-label": getAriaLabel(),
     role: "listbox"

package/lib/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemOption/ItemOptionForValueField.js

@@ -32,6 +32,8 @@ var ItemOptionForValueField = function ItemOptionForValueField(_ref) {
     _useTranslations2 = _rollupPluginBabelHelpers.slicedToArray(_useTranslations, 2),
     propertyText = _useTranslations2[0],
     clearSearchText = _useTranslations2[1];
+  var _useContext2 = React.useContext(ConditionBuilderProvider.ConditionBuilderContext),
+    conditionBuilderRef = _useContext2.conditionBuilderRef;
   var contentRef = React.useRef(null);
   var _useState = React.useState(config.options),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
@@ -151,7 +153,10 @@ var ItemOptionForValueField = function ItemOptionForValueField(_ref) {
     size: "sm",
     labelText: clearSearchText,
     closeButtonLabelText: clearSearchText,
-    onChange: onSearchChangeHandler
+    onChange: onSearchChangeHandler,
+    onKeyDown: function onKeyDown(evt) {
+      return util.onKeyDownHandlerForSearch(evt, conditionBuilderRef);
+    }
   })), multiSelectable && /*#__PURE__*/React.createElement("div", {
     className: "".concat(util.blockClass, "__multiselectSelectionStatusContainer")
   }, /*#__PURE__*/React.createElement("label", null, selection.length, "/", allOptions.length, " Selected"), /*#__PURE__*/React.createElement(react.Button, {

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

@@ -26,7 +26,7 @@ var handleKeyDownForPopover = function handleKeyDownForPopover(evt, conditionBui
 
 //skipping keyboard handling for date and time fields to get take carbon's
 var excludeKeyPress = function excludeKeyPress(evt) {
-  return !['Escape'].includes(evt.key) && (evt.target.closest(".".concat(util.blockClass, "__item-date")) || evt.target.closest(".".concat(util.blockClass, "__item-time")));
+  return !['Escape'].includes(evt.key) && evt.target.closest(".".concat(util.blockClass, "__item-date"));
 };
 var handleKeyPressForPopover = function handleKeyPressForPopover(evt, parentContainer, conditionBuilderRef) {
   var _parentContainer$quer, _parentContainer$quer2, _evt$target$closest$q, _evt$target$closest;
@@ -82,23 +82,23 @@ var handleKeyPressForPopover = function handleKeyPressForPopover(evt, parentCont
         }
         break;
       case 'Enter':
-        if (isMultiSelect === 'true') {
-          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 === undefined || _document$activeEleme2.click();
-          }
-        } else {
-          if (document.activeElement.type !== 'button') {
-            var _document$activeEleme3;
-            //for button , enter key is click which already handled by framework, else trigger click
-            util.focusThisField(evt, conditionBuilderRef);
-            (_document$activeEleme3 = document.activeElement) === null || _document$activeEleme3 === undefined || _document$activeEleme3.click();
-          }
+        if (document.activeElement.type !== 'button') {
+          var _document$activeEleme2;
+          //for button , enter key is click which already handled by framework, else trigger click
+          util.focusThisField(evt, conditionBuilderRef);
+          (_document$activeEleme2 = document.activeElement) === null || _document$activeEleme2 === undefined || _document$activeEleme2.click();
         }
         break;
     }
+  } else {
+    if (key === 'Enter' && !isHoldingShiftKey) {
+      if (document.activeElement.type !== 'button') {
+        var _document$activeEleme3;
+        //for button , enter key is click which already handled by framework, else trigger click
+        util.focusThisField(evt, conditionBuilderRef);
+        (_document$activeEleme3 = document.activeElement) === null || _document$activeEleme3 === undefined || _document$activeEleme3.click();
+      }
+    }
   }
 };
 var handleKeyPressForMainContent = function handleKeyPressForMainContent(evt, conditionBuilderRef, variant) {

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

@@ -10,3 +10,4 @@ export function checkIsValid(item: any): any;
 export function manageTabIndexAndFocus(currentElement: any, conditionBuilderRef: any): void;
 export function getValue(type: any, value: any, config: any): any;
 export function checkForMultiSelectOperator(condition: any, config: any): any;
+export function onKeyDownHandlerForSearch(evt: any, conditionBuilderRef: any): void;

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

@@ -123,6 +123,12 @@ var checkForMultiSelectOperator = function checkForMultiSelectOperator(condition
     return (condition === null || condition === undefined ? undefined : condition.operator) === operator.id && operator.isMultiSelect;
   }));
 };
+//this will close the popover on escape key on search box
+var onKeyDownHandlerForSearch = function onKeyDownHandlerForSearch(evt, conditionBuilderRef) {
+  if (!evt.currentTarget.value && evt.key === 'Escape') {
+    focusThisField(evt, conditionBuilderRef);
+  }
+};
 
 exports.HIERARCHICAL_VARIANT = HIERARCHICAL_VARIANT;
 exports.NON_HIERARCHICAL_VARIANT = NON_HIERARCHICAL_VARIANT;
@@ -134,5 +140,6 @@ exports.focusThisField = focusThisField;
 exports.focusThisItem = focusThisItem;
 exports.getValue = getValue;
 exports.manageTabIndexAndFocus = manageTabIndexAndFocus;
+exports.onKeyDownHandlerForSearch = onKeyDownHandlerForSearch;
 exports.traverseClockVise = traverseClockVise;
 exports.traverseReverse = traverseReverse;

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

@@ -7,10 +7,8 @@
 
 'use strict';
 
-var isBoolean = require('lodash/isBoolean');
-
 var isColumnVisible = function isColumnVisible(colDef) {
-  return isBoolean(colDef.isVisible) ? colDef.isVisible : true;
+  return typeof colDef.isVisible === 'boolean' ? colDef.isVisible : true;
 };
 
 exports.isColumnVisible = isColumnVisible;

package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useShouldDisableButtons.js

@@ -11,7 +11,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
-var isEqual = require('lodash/isEqual');
+var deepCompareObject = require('../../../../../../global/js/utils/deepCompareObject.js');
 
 /**
  * Keeps track of the button disabled state
@@ -29,7 +29,7 @@ var useShouldDisableButtons = function useShouldDisableButtons(_ref) {
     shouldDisableButtons = _useState2[0],
     setShouldDisableButtons = _useState2[1];
   React.useEffect(function updateDisabledButtonsState() {
-    setShouldDisableButtons(isEqual(filtersState, JSON.parse(prevFiltersRef.current)));
+    setShouldDisableButtons(deepCompareObject.deepCompareObject(filtersState, JSON.parse(prevFiltersRef.current)));
   }, [filtersState, prevFiltersRef]);
   return [shouldDisableButtons, setShouldDisableButtons];
 };

package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js

@@ -12,7 +12,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var index = require('../../../../../_virtual/index.js');
 var react = require('@carbon/react');
-var isArray = require('lodash/isArray');
 var settings = require('../../../../../settings.js');
 
 var blockClass = "".concat(settings.pkg.prefix, "--datagrid__row-size");
@@ -40,7 +39,7 @@ var RowSizeRadioGroup = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     orientation: "vertical",
     defaultSelected: getBackwardCompatibleRowSize(selectedOption),
     onChange: onChange
-  }, rowSizes && isArray(rowSizes) && rowSizes.map(function (option) {
+  }, rowSizes && Array.isArray(rowSizes) && rowSizes.map(function (option) {
     var labelText;
     try {
       labelText = option.labelText || rowSizeLabels[option.value];

package/lib/components/Datagrid/useDatagrid.js

@@ -12,7 +12,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 var reactTable = require('react-table');
-var uniqueId = require('lodash/uniqueId');
 var useSkeletonRows = require('./useSkeletonRows.js');
 var useDefaultStringRenderer = require('./useDefaultStringRenderer.js');
 var useRowRenderer = require('./useRowRenderer.js');
@@ -21,6 +20,7 @@ var DatagridHeaderRow = require('./Datagrid/DatagridHeaderRow.js');
 var useFlexResize = require('./useFlexResize.js');
 var useFloatingScroll = require('./useFloatingScroll.js');
 var stateReducer = require('./Datagrid/addons/stateReducer.js');
+var uuidv4 = require('../../global/js/utils/uuidv4.js');
 
 var useDatagrid = function useDatagrid(params) {
   var defaultPlugins = [reactTable.useFlexLayout, DatagridHeaderRow.default, useSkeletonRows.default, reactTable.useResizeColumns, useRowRenderer.default, useDefaultStringRenderer.default, useRowSize.default, reactTable.useFilters, reactTable.useGlobalFilter, reactTable.useSortBy, reactTable.useExpanded];
@@ -38,7 +38,7 @@ var useDatagrid = function useDatagrid(params) {
     minWidth: 50
   };
   var tableId = React.useMemo(function () {
-    return uniqueId('datagrid-table-id');
+    return uuidv4.default('datagrid-table-id');
   }, []);
   for (var _len = arguments.length, plugins = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
     plugins[_key - 1] = arguments[_key];

package/lib/components/Datagrid/useInfiniteScroll.js

@@ -10,7 +10,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var debounce = require('lodash/debounce');
+var debounce = require('../../global/js/utils/debounce.js');
 var useParentDimensions = require('./useParentDimensions.js');
 var useResizeTable = require('./useResizeTable.js');
 
@@ -34,10 +34,7 @@ var useInfiniteScroll = function useInfiniteScroll(hooks) {
     var loadMoreThresholdValue = typeof loadMoreThreshold === 'number' ? loadMoreThreshold : 200;
     var emptyFetchData = function emptyFetchData() {};
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    var fetchMore = React.useCallback(debounce(fetchMoreData || emptyFetchData, 3000, {
-      leading: true,
-      trailing: false
-    }), [fetchMoreData]);
+    var fetchMore = React.useCallback(debounce.debounce(fetchMoreData || emptyFetchData, 3000), [fetchMoreData]);
     var onScroll = function onScroll(_ref2) {
       var scrollDirection = _ref2.scrollDirection,
         scrollOffset = _ref2.scrollOffset;

package/lib/components/Datagrid/useRowIsMouseOver.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2024
+ * Copyright IBM Corp. 2024, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.

package/lib/components/Datagrid/useRowIsMouseOver.js

@@ -11,7 +11,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
-var debounce = require('lodash/debounce');
+var debounce = require('../../global/js/utils/debounce.js');
 
 var useRowIsMouseOver = function useRowIsMouseOver(hooks) {
   var useInstance = function useInstance(instance) {
@@ -24,6 +24,7 @@ var useRowIsMouseOver = function useRowIsMouseOver(hooks) {
       setMouseOverRowIndex(row === null || row === undefined ? undefined : row.index);
     }, 100);
     var getRowProps = function getRowProps(props, datagridState) {
+      // @ts-expect-error
       var onMouseOver = function onMouseOver() {
         return onMouseChange(datagridState);
       };
@@ -49,7 +50,7 @@ var useRowIsMouseOver = function useRowIsMouseOver(hooks) {
 var useDebounce = function useDebounce(fn, wait) {
   return (
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    React.useCallback(debounce(fn, wait), [])
+    React.useCallback(debounce.debounce(fn, wait), [])
   );
 };
 

package/lib/components/Datagrid/useStickyColumn.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2021, 2023
+ * Copyright IBM Corp. 2021, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.

package/lib/components/Datagrid/useStickyColumn.js

@@ -11,7 +11,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
-var debounce = require('lodash/debounce');
+var debounce = require('../../global/js/utils/debounce.js');
 var cx = require('classnames');
 var settings = require('../../settings.js');
 
@@ -60,7 +60,7 @@ var useStickyColumn = function useStickyColumn(hooks) {
         var _headerCellElement$cl;
         headerCellElement === null || headerCellElement === undefined || (_headerCellElement$cl = headerCellElement.classList) === null || _headerCellElement$cl === undefined || _headerCellElement$cl.add(OFFSET_SCROLL_CLASS);
       }
-      var boundListener = debounce(onBodyResize.bind(null, tableBodyElement, headerCellElement), 250);
+      var boundListener = debounce.debounce(onBodyResize.bind(null, tableBodyElement, headerCellElement), 250);
       /* istanbul ignore next */
       if (typeof window !== 'undefined') {
         window.addEventListener('resize', boundListener);