@carbon/ibm-products 2.43.2-canary.300 → 2.43.2-canary.302

package/es/components/CoachmarkStack/CoachmarkStack.js

@@ -89,7 +89,7 @@ var CoachmarkStack = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
     setParentHeight = _useState6[1];
   // parent height = child height when stacked behind a child that is shorter
   var childArray = Children.toArray(children);
-  var mountedRef = useRef();
+  var mountedRef = useRef(undefined);
   // same value as CSS animation speed
   var delayMs = 240;
 

package/es/components/DataSpreadsheet/DataSpreadsheet.js

@@ -84,7 +84,7 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
     totalVisibleColumns = _ref.totalVisibleColumns,
     rest = _objectWithoutProperties(_ref, _excluded);
   var multiKeyTrackingRef = useRef(null);
-  var localRef = useRef();
+  var localRef = useRef(undefined);
   var spreadsheetRef = ref || localRef;
   var focusedElement = useActiveElement();
   var _useState = useState(columns),
@@ -151,13 +151,13 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
     selectedHeaderReorderActive: selectedHeaderReorderActive
   }) || {};
   var cellSizeValue = getCellSize(cellSize);
-  var cellEditorRef = useRef();
+  var cellEditorRef = useRef(undefined);
   var _useState29 = useState(),
     _useState30 = _slicedToArray(_useState29, 2),
     activeCellContent = _useState30[0],
     setActiveCellContent = _useState30[1];
-  var activeCellRef = useRef();
-  var cellEditorRulerRef = useRef();
+  var activeCellRef = useRef(undefined);
+  var cellEditorRulerRef = useRef(undefined);
   var hasCustomRowHeader = typeof renderRowHeader === 'function';
   var maxNumRowsCount = data.length.toString().length;
   var defaultColumn = useMemo(function () {

package/es/components/DataSpreadsheet/DataSpreadsheetBody.js

@@ -65,7 +65,7 @@ var DataSpreadsheetBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
     _useState2 = _slicedToArray(_useState, 2),
     validStartingPoint = _useState2[0],
     setValidStartingPoint = _useState2[1];
-  var contentScrollRef = useRef();
+  var contentScrollRef = useRef(undefined);
   var previousState = usePreviousValue({
     selectionAreaData: selectionAreaData,
     clickAndHoldActive: clickAndHoldActive,
@@ -377,7 +377,7 @@ var DataSpreadsheetBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
       }));
     }
   }, [prepareRow, renderRowHeader, renderRowHeaderDirection, rows, hasCustomRowHeader, activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row, selectionAreas, handleRowHeaderClickEvent, handleBodyCellClickEvent, handleBodyCellHoverEvent, defaultColumn, columns]);
-  var spreadsheetBodyRef = useRef();
+  var spreadsheetBodyRef = useRef(undefined);
   return /*#__PURE__*/React__default.createElement("div", _extends({
     ref: spreadsheetBodyRef,
     className: cx("".concat(blockClass, "__body--container"))

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

@@ -59,7 +59,7 @@ var CustomizeColumnsTearsheet = function CustomizeColumnsTearsheet(_ref) {
     _useState10 = _slicedToArray(_useState9, 2),
     isDirty = _useState10[0],
     setIsDirty = _useState10[1];
-  var prevColumnDefinitions = useRef();
+  var prevColumnDefinitions = useRef(undefined);
   var onRequestClose = function onRequestClose() {
     setColumnObjects(columnDefinitions);
     setIsTearsheetOpen(false);

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

@@ -103,11 +103,11 @@ var FilterPanel = function FilterPanel(_ref) {
     lastAppliedFilters = _useFilters.lastAppliedFilters;
 
   /** Refs */
-  var filterPanelRef = useRef();
-  var filterHeadingRef = useRef();
-  var filterSearchRef = useRef();
-  var actionSetRef = useRef();
-  var innerContainerRef = useRef();
+  var filterPanelRef = useRef(undefined);
+  var filterHeadingRef = useRef(undefined);
+  var filterSearchRef = useRef(undefined);
+  var actionSetRef = useRef(undefined);
+  var innerContainerRef = useRef(undefined);
   /** State from hooks */
   var _useShouldDisableButt = useShouldDisableButtons({
       initialValue: true,

package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js

@@ -49,13 +49,13 @@ var useFilters = function useFilters(_ref) {
   var previousState = usePreviousValue({
     panelOpen: panelOpen
   });
-  var filteredItemsRef = useRef();
+  var filteredItemsRef = useRef(undefined);
 
   // When using batch actions we have to store the filters to then apply them later
   var prevFiltersRef = useRef(JSON.stringify(filtersState));
   var lastAppliedFilters = useRef(JSON.stringify(reactTableFiltersState));
   var prevFiltersObjectArrayRef = useRef(JSON.stringify(filtersObjectArray));
-  var holdingPrevFiltersRef = useRef();
+  var holdingPrevFiltersRef = useRef(undefined);
   var holdingLastAppliedFiltersRef = useRef([]);
   var holdingPrevFiltersObjectArrayRef = useRef([]);
 

package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js

@@ -66,11 +66,11 @@ var InlineEditCell = function InlineEditCell(_ref) {
   });
   var _ref2 = config || {},
     inputProps = _ref2.inputProps;
-  var textInputRef = useRef();
-  var checkboxRef = useRef();
-  var numberInputRef = useRef();
-  var dropdownRef = useRef();
-  var outerButtonElement = useRef();
+  var textInputRef = useRef(undefined);
+  var checkboxRef = useRef(undefined);
+  var numberInputRef = useRef(undefined);
+  var dropdownRef = useRef(undefined);
+  var outerButtonElement = useRef(undefined);
   var rowSize = instance.rowSize,
     onDataUpdate = instance.onDataUpdate;
   var saveCellData;

package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js

@@ -23,7 +23,7 @@ var RowSizeDropdown = function RowSizeDropdown(_ref) {
     _ref$legendText = _ref.legendText,
     legendText = _ref$legendText === void 0 ? 'Row settings' : _ref$legendText,
     props = _objectWithoutProperties(_ref, _excluded);
-  var radioGroupRef = useRef();
+  var radioGroupRef = useRef(undefined);
   var _React$useState = React__default.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     isOpen = _React$useState2[0],

package/es/components/Datagrid/useNestedRowExpander.js

@@ -15,8 +15,8 @@ import { handleDynamicRowCheck } from './Datagrid/addons/stateReducer.js';
 
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 var useNestedRowExpander = function useNestedRowExpander(hooks) {
-  var tempState = useRef();
-  var lastExpandedRowIndex = useRef();
+  var tempState = useRef(undefined);
+  var lastExpandedRowIndex = useRef(undefined);
   var useInstance = function useInstance(instance) {
     tempState.current = instance;
   };

package/es/components/Datagrid/useParentDimensions.js

@@ -9,11 +9,11 @@ import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBab
 import { useRef, useState } from 'react';
 
 var useParentDimensions = function useParentDimensions(hooks) {
-  var rootRef = useRef();
-  var headRef = useRef();
-  var innerListRef = useRef();
-  var listRef = useRef();
-  var gridRef = useRef();
+  var rootRef = useRef(undefined);
+  var headRef = useRef(undefined);
+  var innerListRef = useRef(undefined);
+  var listRef = useRef(undefined);
+  var gridRef = useRef(undefined);
   var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
     tableHeight = _useState2[0],

package/es/components/Datagrid/useRowExpander.js

@@ -14,8 +14,8 @@ import { useFocusRowExpander } from './useFocusRowExpander.js';
 
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 var useRowExpander = function useRowExpander(hooks) {
-  var tempState = useRef();
-  var lastExpandedRowIndex = useRef();
+  var tempState = useRef(undefined);
+  var lastExpandedRowIndex = useRef(undefined);
   var useInstance = function useInstance(instance) {
     tempState.current = instance;
   };

package/es/components/Datagrid/useStickyColumn.js

@@ -16,9 +16,9 @@ var styleClassPrefix = "".concat(blockClass, "__right-sticky-column");
 var leftStickyStyleClassPrefix = "".concat(blockClass, "__left-sticky-column");
 var OFFSET_SCROLL_CLASS = "".concat(styleClassPrefix, "-offset-scroll");
 var useStickyColumn = function useStickyColumn(hooks) {
-  var tableBodyRef = useRef();
-  var stickyHeaderCellRef = useRef();
-  var _useState = useState(),
+  var tableBodyRef = useRef(undefined);
+  var stickyHeaderCellRef = useRef(undefined);
+  var _useState = useState(undefined),
     _useState2 = _slicedToArray(_useState, 2),
     windowSize = _useState2[0],
     setWindowSize = _useState2[1];

package/es/components/FilterPanel/FilterPanelCheckboxWithOverflow/FilterPanelCheckboxWithOverflow.js

@@ -51,7 +51,7 @@ var FilterPanelCheckboxWithOverflow = /*#__PURE__*/React__default.forwardRef(fun
     setShowMenuButton = _useState4[1];
   // Destructure overflow menu properties.
   var other = _extends({}, (_objectDestructuringEmpty(overflowMenuProps), overflowMenuProps));
-  var backupRef = useRef();
+  var backupRef = useRef(undefined);
   var localRef = ref || backupRef;
   var setHideButton = function setHideButton(activeElement) {
     if (!menuIsOpen && !localRef.current.contains(activeElement)) {

package/es/components/InterstitialScreen/InterstitialScreen.js

@@ -90,11 +90,11 @@ var InterstitialScreen = /*#__PURE__*/React__default.forwardRef(function (_ref,
     _ref$skipButtonLabel = _ref.skipButtonLabel,
     skipButtonLabel = _ref$skipButtonLabel === void 0 ? defaults.skipButtonLabel : _ref$skipButtonLabel,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var backupRef = useRef();
+  var backupRef = useRef(undefined);
   var _forwardedRef = ref || backupRef;
-  var scrollRef = useRef();
-  var startButtonRef = useRef();
-  var nextButtonRef = useRef();
+  var scrollRef = useRef(undefined);
+  var startButtonRef = useRef(undefined);
+  var nextButtonRef = useRef(undefined);
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     isVisibleClass = _useState2[0],

package/es/components/ScrollGradient/ScrollGradient.js

@@ -50,8 +50,8 @@ var ScrollGradient = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
     _useState4 = _slicedToArray(_useState3, 2),
     horizontalPosition = _useState4[0],
     setHorizontalPosition = _useState4[1];
-  var scrollContainer = useRef();
-  var contentChildrenContainer = useRef();
+  var scrollContainer = useRef(undefined);
+  var contentChildrenContainer = useRef(undefined);
   var updateScrollState = throttle(function () {
     var updatedVerticalVal = getScrollState(scrollContainer.current, ScrollDirection.Y);
     var updatedHorizontalVal = getScrollState(scrollContainer.current, ScrollDirection.X);

package/es/components/SteppedAnimatedMedia/SteppedAnimatedMedia.js

@@ -39,7 +39,7 @@ var SteppedAnimatedMedia = /*#__PURE__*/React__default.forwardRef(function (_ref
     _useState2 = _slicedToArray(_useState, 2),
     jsonData = _useState2[0],
     setJsonData = _useState2[1];
-  var animRef = useRef();
+  var animRef = useRef(undefined);
   var backupRef = useRef(null);
   var localRef = ref !== null && ref !== void 0 ? ref : backupRef;
   var localRefValue = localRef.current;

package/es/components/Tearsheet/TearsheetShell.d.ts

@@ -10,6 +10,11 @@ import PropTypes from 'prop-types';
 import { type ButtonProps } from '@carbon/react';
 interface TearsheetShellProps extends PropsWithChildren {
     actions?: ButtonProps<'button'>[];
+    /**
+     * Optional prop that is intended for any scenario where something is being generated by AI to reinforce AI transparency,
+     * accountability, and explainability at the UI level.
+     */
+    aiLabel?: ReactNode;
     ariaLabel?: string;
     /**
      * An optional class or classes to be added to the outermost element.
@@ -96,15 +101,15 @@ interface TearsheetShellProps extends PropsWithChildren {
      * Specifies the width of the tearsheet, 'narrow' or 'wide'.
      */
     size: 'narrow' | 'wide';
-    /**
-     *  **Experimental:** Provide a `Slug` component to be rendered inside the `Tearsheet` component
-     */
-    slug?: ReactNode;
     /**
      * The main title of the tearsheet, displayed in the header area.
      */
     title?: ReactNode;
     verticalPosition?: 'normal' | 'lower';
+    /**
+     * @deprecated Property replaced by `aiLabel`
+     */
+    slug?: ReactNode;
 }
 export type CloseIconDescriptionTypes = {
     hasCloseIcon?: false;
@@ -126,6 +131,10 @@ export declare const tearsheetHasCloseIcon: (actions: any, hasCloseIcon: any) =>
 export declare const TearsheetShell: React.ForwardRefExoticComponent<(TearsheetShellProps & CloseIconDescriptionTypes) & React.RefAttributes<HTMLDivElement>>;
 export declare const portalType: PropTypes.Requireable<object>;
 export declare const deprecatedProps: {
+    /**
+     *  @deprecated Property replaced by `aiLabel`
+     */
+    slug: (props: any, propName: any, comp: any, loc: any, propFullName: any, secret: any) => any;
     /**
      * **Deprecated**
      *

package/es/components/Tearsheet/TearsheetShell.js

@@ -13,6 +13,7 @@ import cx from 'classnames';
 import { pkg } from '../../settings.js';
 import pconsole from '../../global/js/utils/pconsole.js';
 import { getNodeTextContent } from '../../global/js/utils/getNodeTextContent.js';
+import { deprecateProp } from '../../global/js/utils/props-helper.js';
 import { Button, usePrefix, unstable_FeatureFlags, ComposedModal, ModalHeader, Layer } from '@carbon/react';
 import { ActionSet } from '../ActionSet/ActionSet.js';
 import { Wrap } from '../../global/js/utils/Wrap.js';
@@ -20,7 +21,7 @@ import { usePortalTarget } from '../../global/js/hooks/usePortalTarget.js';
 import { useFocus, getSpecificElement } from '../../global/js/hooks/useFocus.js';
 import { usePreviousValue } from '../../global/js/hooks/usePreviousValue.js';
 
-var _excluded = ["actions", "ariaLabel", "children", "className", "closeIconDescription", "description", "hasCloseIcon", "headerActions", "influencer", "influencerPosition", "influencerWidth", "label", "navigation", "onClose", "open", "portalTarget", "selectorPrimaryFocus", "selectorsFloatingMenus", "size", "slug", "title", "verticalPosition", "launcherButtonRef"];
+var _excluded = ["actions", "aiLabel", "ariaLabel", "children", "className", "closeIconDescription", "description", "hasCloseIcon", "headerActions", "influencer", "influencerPosition", "influencerWidth", "label", "navigation", "onClose", "open", "portalTarget", "selectorPrimaryFocus", "selectorsFloatingMenus", "size", "slug", "title", "verticalPosition", "launcherButtonRef"];
 
 // The block part of our conventional BEM class names (bc__E--M).
 var bc = "".concat(pkg.prefix, "--tearsheet");
@@ -63,6 +64,7 @@ var tearsheetHasCloseIcon = function tearsheetHasCloseIcon(actions, hasCloseIcon
  * */
 var TearsheetShell = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var actions = _ref.actions,
+    aiLabel = _ref.aiLabel,
     ariaLabel = _ref.ariaLabel,
     children = _ref.children,
     className = _ref.className,
@@ -82,7 +84,7 @@ var TearsheetShell = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
     _ref$selectorsFloatin = _ref.selectorsFloatingMenus,
     selectorsFloatingMenus = _ref$selectorsFloatin === void 0 ? [] : _ref$selectorsFloatin,
     size = _ref.size,
-    slug = _ref.slug,
+    deprecated_slug = _ref.slug,
     title = _ref.title,
     verticalPosition = _ref.verticalPosition,
     launcherButtonRef = _ref.launcherButtonRef,
@@ -90,7 +92,7 @@ var TearsheetShell = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
   var carbonPrefix = usePrefix();
   var bcModalHeader = "".concat(carbonPrefix, "--modal-header");
   var renderPortalUse = usePortalTarget(portalTargetIn);
-  var localRef = useRef();
+  var localRef = useRef(undefined);
   var resizer = useRef(null);
   var modalBodyRef = useRef(null);
   var modalRef = ref || localRef;
@@ -121,7 +123,7 @@ var TearsheetShell = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
     setPosition = _useState4[1];
 
   // Keep a record of the previous value of depth.
-  var prevDepth = useRef();
+  var prevDepth = useRef(undefined);
   useEffect(function () {
     prevDepth.current = depth;
   });
@@ -263,10 +265,10 @@ var TearsheetShell = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
       }
     }, /*#__PURE__*/React__default.createElement(ComposedModal, _extends({}, rest, {
       "aria-label": ariaLabel || getNodeTextContent(title),
-      className: cx(bc, className, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(bc, "--stacked-").concat(position, "-of-").concat(depth),
+      className: cx(bc, className, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(bc, "--stacked-").concat(position, "-of-").concat(depth),
       // Don't apply this on the initial open of a single tearsheet.
-      depth > 1 || depth === 1 && ((_prevDepth$current = prevDepth === null || prevDepth === void 0 ? void 0 : prevDepth.current) !== null && _prevDepth$current !== void 0 ? _prevDepth$current : 0) > 1), "".concat(bc, "--wide"), wide), "".concat(bc, "--narrow"), !wide), "".concat(bc, "--has-slug"), slug), "".concat(bc, "--has-close"), effectiveHasCloseIcon)),
-      slug: slug,
+      depth > 1 || depth === 1 && ((_prevDepth$current = prevDepth === null || prevDepth === void 0 ? void 0 : prevDepth.current) !== null && _prevDepth$current !== void 0 ? _prevDepth$current : 0) > 1), "".concat(bc, "--wide"), wide), "".concat(bc, "--narrow"), !wide), "".concat(bc, "--has-slug"), deprecated_slug), "".concat(bc, "--has-ai-label"), aiLabel), "".concat(bc, "--has-close"), effectiveHasCloseIcon)),
+      slug: aiLabel || deprecated_slug,
       style: setScaleValues(),
       containerClassName: cx("".concat(bc, "__container"), _defineProperty(_defineProperty({}, "".concat(bc, "__container--lower"), verticalPosition === 'lower'), "".concat(bc, "__container--mixed-size-stacking"), !areAllSameSizeVariant())),
       onClose: onClose,
@@ -344,6 +346,10 @@ var portalType = typeof Element === 'undefined' ? PropTypes.object :
 // eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope
 PropTypes.instanceOf(Element);
 var deprecatedProps = {
+  /**
+   *  @deprecated Property replaced by `aiLabel`
+   */
+  slug: deprecateProp(PropTypes.node, 'Property replaced by `aiLabel`'),
   /**
    * **Deprecated**
    *
@@ -388,6 +394,11 @@ TearsheetShell.propTypes = _objectSpread2({
     /**@ts-ignore*/
     onClick: Button.propTypes.onClick
   }))),
+  /**
+   * Optional prop that is intended for any scenario where something is being generated by AI to reinforce AI transparency,
+   * accountability, and explainability at the UI level.
+   */
+  aiLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.bool]),
   /**
    * The main content of the tearsheet.
    */
@@ -494,10 +505,6 @@ TearsheetShell.propTypes = _objectSpread2({
    */
   /**@ts-ignore*/
   size: PropTypes.oneOf(['narrow', 'wide']).isRequired,
-  /**
-   *  **Experimental:** Provide a `Slug` component to be rendered inside the `Tearsheet` component
-   */
-  slug: PropTypes.node,
   /**
    * The main title of the tearsheet, displayed in the header area.
    */

package/es/components/Toolbar/Toolbar.js

@@ -25,7 +25,7 @@ var Toolbar = /*#__PURE__*/forwardRef(function (_ref, r) {
     className = _ref.className,
     vertical = _ref.vertical,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var focusableElements = useRef();
+  var focusableElements = useRef(undefined);
   var getFocusableElements$1 = useCallback(function () {
     return focusableElements.current;
   }, [focusableElements]);

package/es/components/TruncatedList/TruncatedList.js

@@ -67,7 +67,7 @@ var TruncatedList = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
     _useState4 = _slicedToArray(_useState3, 2),
     listHeight = _useState4[0],
     setListHeight = _useState4[1];
-  var listRef = useRef();
+  var listRef = useRef(undefined);
   var handleToggle = function handleToggle() {
     setIsCollapsed(function (prev) {
       return !prev;

package/es/global/js/hooks/usePreviousValue.js

@@ -13,7 +13,7 @@ import { useRef, useEffect } from 'react';
  * @returns {T | undefined} - The previous value of the same type, or undefined if there is none
  */
 var usePreviousValue = function usePreviousValue(value) {
-  var ref = useRef();
+  var ref = useRef(undefined);
   useEffect(function () {
     ref.current = value;
   });

package/lib/components/APIKeyModal/APIKeyModal.js

@@ -93,7 +93,7 @@ exports.APIKeyModal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _useState8 = _rollupPluginBabelHelpers.slicedToArray(_useState7, 2),
     currentStep = _useState8[0],
     setCurrentStep = _useState8[1];
-  var copyRef = React.useRef();
+  var copyRef = React.useRef(undefined);
   var apiKeyInputId = React.useRef(uuidv4.default());
   var nameInputId = React.useRef(uuidv4.default());
   var renderPortalUse = usePortalTarget.usePortalTarget(portalTargetIn);

package/lib/components/AboutModal/AboutModal.js

@@ -48,7 +48,7 @@ exports.AboutModal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     version = _ref.version,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   var bodyRef = React.useRef(null);
-  var localRef = React.useRef();
+  var localRef = React.useRef(undefined);
   var modalRef = ref || localRef;
   var contentRef = React.useRef(null);
   var contentId = uuidv4.default();

package/lib/components/Coachmark/Coachmark.js

@@ -80,8 +80,8 @@ exports.Coachmark = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _useState8 = _rollupPluginBabelHelpers.slicedToArray(_useState7, 2),
     targetOffset = _useState8[0],
     setTargetOffset = _useState8[1];
-  var overlayBackupRef = React.useRef();
-  var backupRef = React.useRef();
+  var overlayBackupRef = React.useRef(undefined);
+  var backupRef = React.useRef(undefined);
   var _coachmarkRef = ref || backupRef;
   var _overlayRef = overlayRef || overlayBackupRef;
   var portalNode = React.useRef(null);

package/lib/components/Coachmark/utils/hooks.js

@@ -19,7 +19,7 @@ var enums = require('./enums.js');
  */
 
 function useClickOutsideElement(coachmarkRef, overlayRef, overlayKind, callback) {
-  var cb = React.useRef();
+  var cb = React.useRef(undefined);
   var isTooltip = overlayKind === enums.COACHMARK_OVERLAY_KIND.TOOLTIP;
   React.useLayoutEffect(function () {
     cb.current = callback;

package/lib/components/CoachmarkOverlayElements/CoachmarkOverlayElements.js

@@ -62,8 +62,8 @@ exports.CoachmarkOverlayElements = /*#__PURE__*/React.forwardRef(function (_ref,
     _ref$closeButtonLabel = _ref.closeButtonLabel,
     closeButtonLabel = _ref$closeButtonLabel === void 0 ? defaults.closeButtonLabel : _ref$closeButtonLabel,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  var buttonFocusRef = React.useRef();
-  var scrollRef = React.useRef();
+  var buttonFocusRef = React.useRef(undefined);
+  var scrollRef = React.useRef(undefined);
   var _useState = React.useState(0),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     scrollPosition = _useState2[0],

package/lib/components/CoachmarkStack/CoachmarkStack.js

@@ -91,7 +91,7 @@ exports.CoachmarkStack = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     setParentHeight = _useState6[1];
   // parent height = child height when stacked behind a child that is shorter
   var childArray = React.Children.toArray(children);
-  var mountedRef = React.useRef();
+  var mountedRef = React.useRef(undefined);
   // same value as CSS animation speed
   var delayMs = 240;
 

package/lib/components/DataSpreadsheet/DataSpreadsheet.js

@@ -86,7 +86,7 @@ exports.DataSpreadsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     totalVisibleColumns = _ref.totalVisibleColumns,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   var multiKeyTrackingRef = React.useRef(null);
-  var localRef = React.useRef();
+  var localRef = React.useRef(undefined);
   var spreadsheetRef = ref || localRef;
   var focusedElement = useActiveElement.useActiveElement();
   var _useState = React.useState(columns),
@@ -153,13 +153,13 @@ exports.DataSpreadsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     selectedHeaderReorderActive: selectedHeaderReorderActive
   }) || {};
   var cellSizeValue = getCellSize.getCellSize(cellSize);
-  var cellEditorRef = React.useRef();
+  var cellEditorRef = React.useRef(undefined);
   var _useState29 = React.useState(),
     _useState30 = _rollupPluginBabelHelpers.slicedToArray(_useState29, 2),
     activeCellContent = _useState30[0],
     setActiveCellContent = _useState30[1];
-  var activeCellRef = React.useRef();
-  var cellEditorRulerRef = React.useRef();
+  var activeCellRef = React.useRef(undefined);
+  var cellEditorRulerRef = React.useRef(undefined);
   var hasCustomRowHeader = typeof renderRowHeader === 'function';
   var maxNumRowsCount = data.length.toString().length;
   var defaultColumn = React.useMemo(function () {

package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js

@@ -67,7 +67,7 @@ var DataSpreadsheetBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     validStartingPoint = _useState2[0],
     setValidStartingPoint = _useState2[1];
-  var contentScrollRef = React.useRef();
+  var contentScrollRef = React.useRef(undefined);
   var previousState = usePreviousValue.usePreviousValue({
     selectionAreaData: selectionAreaData,
     clickAndHoldActive: clickAndHoldActive,
@@ -379,7 +379,7 @@ var DataSpreadsheetBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       }));
     }
   }, [prepareRow, renderRowHeader, renderRowHeaderDirection, rows, hasCustomRowHeader, activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row, selectionAreas, handleRowHeaderClickEvent, handleBodyCellClickEvent, handleBodyCellHoverEvent, defaultColumn, columns]);
-  var spreadsheetBodyRef = React.useRef();
+  var spreadsheetBodyRef = React.useRef(undefined);
   return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({
     ref: spreadsheetBodyRef,
     className: cx("".concat(blockClass, "__body--container"))

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

@@ -63,7 +63,7 @@ var CustomizeColumnsTearsheet = function CustomizeColumnsTearsheet(_ref) {
     _useState10 = _rollupPluginBabelHelpers.slicedToArray(_useState9, 2),
     isDirty = _useState10[0],
     setIsDirty = _useState10[1];
-  var prevColumnDefinitions = React.useRef();
+  var prevColumnDefinitions = React.useRef(undefined);
   var onRequestClose = function onRequestClose() {
     setColumnObjects(columnDefinitions);
     setIsTearsheetOpen(false);

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

@@ -107,11 +107,11 @@ var FilterPanel = function FilterPanel(_ref) {
     lastAppliedFilters = _useFilters.lastAppliedFilters;
 
   /** Refs */
-  var filterPanelRef = React.useRef();
-  var filterHeadingRef = React.useRef();
-  var filterSearchRef = React.useRef();
-  var actionSetRef = React.useRef();
-  var innerContainerRef = React.useRef();
+  var filterPanelRef = React.useRef(undefined);
+  var filterHeadingRef = React.useRef(undefined);
+  var filterSearchRef = React.useRef(undefined);
+  var actionSetRef = React.useRef(undefined);
+  var innerContainerRef = React.useRef(undefined);
   /** State from hooks */
   var _useShouldDisableButt = useShouldDisableButtons.default({
       initialValue: true,

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

@@ -53,13 +53,13 @@ var useFilters = function useFilters(_ref) {
   var previousState = usePreviousValue.usePreviousValue({
     panelOpen: panelOpen
   });
-  var filteredItemsRef = React.useRef();
+  var filteredItemsRef = React.useRef(undefined);
 
   // When using batch actions we have to store the filters to then apply them later
   var prevFiltersRef = React.useRef(JSON.stringify(filtersState));
   var lastAppliedFilters = React.useRef(JSON.stringify(reactTableFiltersState));
   var prevFiltersObjectArrayRef = React.useRef(JSON.stringify(filtersObjectArray));
-  var holdingPrevFiltersRef = React.useRef();
+  var holdingPrevFiltersRef = React.useRef(undefined);
   var holdingLastAppliedFiltersRef = React.useRef([]);
   var holdingPrevFiltersObjectArrayRef = React.useRef([]);
 

package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js

@@ -68,11 +68,11 @@ var InlineEditCell = function InlineEditCell(_ref) {
   });
   var _ref2 = config || {},
     inputProps = _ref2.inputProps;
-  var textInputRef = React.useRef();
-  var checkboxRef = React.useRef();
-  var numberInputRef = React.useRef();
-  var dropdownRef = React.useRef();
-  var outerButtonElement = React.useRef();
+  var textInputRef = React.useRef(undefined);
+  var checkboxRef = React.useRef(undefined);
+  var numberInputRef = React.useRef(undefined);
+  var dropdownRef = React.useRef(undefined);
+  var outerButtonElement = React.useRef(undefined);
   var rowSize = instance.rowSize,
     onDataUpdate = instance.onDataUpdate;
   var saveCellData;

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

@@ -27,7 +27,7 @@ var RowSizeDropdown = function RowSizeDropdown(_ref) {
     _ref$legendText = _ref.legendText,
     legendText = _ref$legendText === void 0 ? 'Row settings' : _ref$legendText,
     props = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  var radioGroupRef = React.useRef();
+  var radioGroupRef = React.useRef(undefined);
   var _React$useState = React.useState(false),
     _React$useState2 = _rollupPluginBabelHelpers.slicedToArray(_React$useState, 2),
     isOpen = _React$useState2[0],

package/lib/components/Datagrid/useNestedRowExpander.js

@@ -19,8 +19,8 @@ var stateReducer = require('./Datagrid/addons/stateReducer.js');
 
 var blockClass = "".concat(settings.pkg.prefix, "--datagrid");
 var useNestedRowExpander = function useNestedRowExpander(hooks) {
-  var tempState = React.useRef();
-  var lastExpandedRowIndex = React.useRef();
+  var tempState = React.useRef(undefined);
+  var lastExpandedRowIndex = React.useRef(undefined);
   var useInstance = function useInstance(instance) {
     tempState.current = instance;
   };

package/lib/components/Datagrid/useParentDimensions.js

@@ -13,11 +13,11 @@ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelper
 var React = require('react');
 
 var useParentDimensions = function useParentDimensions(hooks) {
-  var rootRef = React.useRef();
-  var headRef = React.useRef();
-  var innerListRef = React.useRef();
-  var listRef = React.useRef();
-  var gridRef = React.useRef();
+  var rootRef = React.useRef(undefined);
+  var headRef = React.useRef(undefined);
+  var innerListRef = React.useRef(undefined);
+  var listRef = React.useRef(undefined);
+  var gridRef = React.useRef(undefined);
   var _useState = React.useState(),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     tableHeight = _useState2[0],