@carbon/ibm-products 2.67.0-rc.0 → 2.68.0-rc.0

package/es/global/js/hooks/useResizeObserver.js

@@ -7,24 +7,23 @@
 
 import { useState, useRef, useEffect, useLayoutEffect } from 'react';
 
-const useResizeObserver = function (ref, callback) {
-  let deps = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
+const useResizeObserver = (ref, onResize) => {
   const [width, setWidth] = useState(-1);
   const [height, setHeight] = useState(-1);
   const entriesToHandle = useRef(null);
-  const cb = useRef(callback);
+  const cb = useRef(onResize);
   useEffect(() => {
-    // ref for callback removes it as dependency from useLayoutEffect
+    // ref for onResize removes it as dependency from useLayoutEffect
     // This significantly reduces repeated calls if a function is redefined on every
     // render
-    cb.current = callback;
-  }, [callback]);
+    cb.current = onResize;
+  }, [onResize]);
   useEffect(() => {
     const getInitialSize = () => {
       if (ref.current) {
         const refComputedStyle = window.getComputedStyle(ref.current);
-        const initialWidth = (ref.current?.offsetWidth || 0) - (parseFloat(refComputedStyle?.paddingLeft || 0), parseFloat(refComputedStyle?.paddingRight || 0));
-        const initialHeight = (ref.current?.offsetHeight || 0) - (parseFloat(refComputedStyle?.paddingTop || 0), parseFloat(refComputedStyle?.paddingLeft || 0));
+        const initialWidth = (ref.current?.offsetWidth ?? 0) - (typeof refComputedStyle?.paddingLeft === 'string' && refComputedStyle?.paddingLeft.length ? parseFloat(refComputedStyle?.paddingLeft) : 0) - (typeof refComputedStyle?.paddingRight === 'string' && refComputedStyle?.paddingRight.length ? parseFloat(refComputedStyle?.paddingRight) : 0);
+        const initialHeight = (ref.current?.offsetHeight ?? 0) - (typeof refComputedStyle?.paddingTop === 'string' && refComputedStyle?.paddingTop.length ? parseFloat(refComputedStyle?.paddingTop) : 0) - (typeof refComputedStyle?.paddingBottom === 'string' && refComputedStyle?.paddingBottom.length ? parseFloat(refComputedStyle?.paddingBottom) : 0);
         setWidth(initialWidth);
         setHeight(initialHeight);
       }
@@ -33,8 +32,9 @@ const useResizeObserver = function (ref, callback) {
       return;
     }
     getInitialSize();
+    // Ignoring exhaustive-deps as we do NOT want to include the ref in dep array
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [width, height, ref.current, ...deps]);
+  }, [width, height]);
   useLayoutEffect(() => {
     if (!ref?.current) {
       return;
@@ -48,7 +48,7 @@ const useResizeObserver = function (ref, callback) {
       setHeight(entry.contentRect.height);
       cb.current && cb.current(entry.contentRect);
     };
-    let observer = new ResizeObserver(entries => {
+    const observer = new ResizeObserver(entries => {
       // always update entriesToHandle
       entriesToHandle.current = entries;
       window.requestAnimationFrame(() => {
@@ -60,11 +60,10 @@ const useResizeObserver = function (ref, callback) {
     // observe all refs passed
     observer.observe(ref.current);
     return () => {
-      observer?.disconnect();
-      observer = null;
+      observer.disconnect();
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [ref.current, ...deps]);
+  }, [ref.current]);
   return {
     width,
     height

package/lib/components/Carousel/Carousel.d.ts

@@ -45,6 +45,12 @@ export interface CarouselProps {
      * Additional props passed to the component.
      */
     [key: string]: any;
+    /**
+     * enable scroll mode when only scroll functionality is required, more than one items will be visible at a time
+     * when isScrollMode is false, component behaves like a carousal and on item will be active at a time
+     * and other items will be hidden and inactive.
+     */
+    isScrollMode?: boolean;
 }
 /**
  * The Carousel acts as a scaffold for other Onboarding content.

package/lib/components/Carousel/Carousel.js

@@ -14,6 +14,7 @@ var CarouselItem = require('./CarouselItem.js');
 var cx = require('classnames');
 var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');
+var react = require('@carbon/react');
 var useIsomorphicEffect = require('../../global/js/hooks/useIsomorphicEffect.js');
 
 // The block part of our conventional BEM class names (blockClass__E--M).
@@ -51,6 +52,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((props, ref) => {
     fadedEdgeColor,
     onChangeIsScrollable = defaults.onChangeIsScrollable,
     onScroll = defaults.onScroll,
+    isScrollMode = false,
     ...rest
   } = props;
   const carouselRef = React.useRef(null);
@@ -61,6 +63,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((props, ref) => {
   const childElementsRef = React.useRef(Array(React.Children.count(children)).fill(React.useRef(null)));
   const leftFadedEdgeColor = typeof fadedEdgeColor === 'object' ? fadedEdgeColor?.left : fadedEdgeColor;
   const rightFadedEdgeColor = typeof fadedEdgeColor === 'object' ? fadedEdgeColor?.right : fadedEdgeColor;
+  const carbonPrefix = react.usePrefix();
 
   // Trigger callbacks to report state of the carousel
   const handleOnScroll = React.useCallback(() => {
@@ -158,8 +161,42 @@ const Carousel = /*#__PURE__*/React.forwardRef((props, ref) => {
     handleOnScroll();
   }, [handleOnScroll]);
   const handleScrollToView = React.useCallback(itemNumber => {
+    updateAriaHiddenTabIndex(itemNumber);
     childElementsRef.current[itemNumber].scrollIntoView();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
+  const getFocusableElements = container => {
+    const notQuery = `:not(.${carbonPrefix}--visually-hidden,.${carbonPrefix}--btn--disabled,[aria-hidden="true"],[disabled])`;
+    // Queries to include element types button, input, select, textarea
+    const queryButton = `button${notQuery}`;
+    const queryInput = `input${notQuery}`;
+    const querySelect = `select${notQuery}`;
+    const queryTextarea = `textarea${notQuery}`;
+    const queryLink = `[href]${notQuery}`;
+    const queryAnchor = `a${notQuery}`;
+    const queryTabIndex = `[tabindex="0"]${notQuery}`;
+    // Final query
+    const query = `${queryButton},${queryLink},${queryAnchor},${queryInput},${querySelect},${queryTextarea},${queryTabIndex}`;
+    return container?.querySelectorAll(`${query}`) ?? [];
+  };
+  const updateAriaHiddenTabIndex = itemNumber => {
+    //aria-hidden need to updated based on the active item, otherwise screen reader will reset to first item while
+    //interact with element via Control + Option + Down Arrow
+    // aria-hidden is set to true to inactive carousal items
+    // tab-index is set to -1 for all inputs in in active elements
+
+    !isScrollMode && childElementsRef.current?.forEach((item, idx) => {
+      const isActive = idx === itemNumber;
+      // Set aria-hidden based on active state
+      item?.setAttribute('aria-hidden', String(!isActive));
+
+      // Update tabIndex for all focusable elements within the item
+      const focusableElements = getFocusableElements(item);
+      focusableElements.forEach(el => {
+        el.tabIndex = isActive ? 0 : -1;
+      });
+    });
+  };
 
   // Trigger a callback after first render (and applied CSS).
   React.useEffect(() => {
@@ -170,6 +207,8 @@ const Carousel = /*#__PURE__*/React.forwardRef((props, ref) => {
     setTimeout(() => {
       // But, because we are making calculations based on the final,
       // applied CSS, we must wait for one more "tick".
+
+      updateAriaHiddenTabIndex(0);
       handleOnScroll();
     }, 0);
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -318,6 +357,12 @@ Carousel.propTypes = {
     left: index.default.string,
     right: index.default.string
   })]),
+  /**
+   * enable scroll mode when only scroll functionality is required, more than one items will be visible at a time
+   * when isScrollMode is false, component behaves like a carousal and on item will be active at a time
+   * and other items will be hidden and inactive.
+   */
+  isScrollMode: index.default.bool,
   /**
    * An optional callback function that returns `true`
    * when the carousel has enough content to be scrollable,

package/lib/components/CreateFullPage/CreateFullPage.d.ts

@@ -20,6 +20,7 @@ interface HeaderBreadcrumb {
     /** Provide if this breadcrumb item represents the current page */
     isCurrentPage?: boolean;
 }
+type MaybePromise<T> = Promise<T> | T;
 type CreateFullPageBreadcrumbsProps = {
     /** The header breadcrumbs */
     breadcrumbs?: null | undefined;
@@ -107,9 +108,9 @@ type CreateFullPageBaseProps = {
      *
      * @returns Object - if you want to prevent the modal from closing, return an object with the property preventClose set to true
      */
-    onRequestSubmit: () => {
+    onRequestSubmit: () => MaybePromise<{
         preventClose?: boolean;
-    } | void;
+    } | void>;
     /**
      * A secondary title of the full page, displayed in the influencer area
      */

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

@@ -15,6 +15,9 @@ interface DraggableElementProps extends PropsWithChildren {
     isSticky?: boolean;
     selected?: boolean;
 }
+/**
+ * Single row in the DraggableItemsList used by CustomizeColumnsTearsheet.
+ */
 declare const DraggableElement: {
     ({ id, elementId, children, classList, disabled, ariaLabel, isSticky, selected, }: DraggableElementProps): React.JSX.Element;
     propTypes: {

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

@@ -20,6 +20,9 @@ var sortable = require('@dnd-kit/sortable');
 
 var _Locked, _DraggableIcon;
 const blockClass = `${settings.pkg.prefix}--datagrid`;
+/**
+ * Single row in the DraggableItemsList used by CustomizeColumnsTearsheet.
+ */
 const DraggableElement = _ref => {
   let {
     id,
@@ -42,20 +45,33 @@ const DraggableElement = _ref => {
     disabled,
     id
   });
-  const content = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+
+  // Most of the attributes (ex: role, tabIndex, aria-disabled) are unnecessary for a <button>, so just get the ones we need.
+  const {
+    'aria-pressed': ariaPressed,
+    'aria-describedby': ariaDescribedby
+  } = attributes;
+  const dragHandle = isSticky ? /*#__PURE__*/React.createElement("div", {
     className: cx({
       disabled
     }, `${blockClass}__draggable-handleStyle`)
-  }, isSticky ? _Locked || (_Locked = /*#__PURE__*/React.createElement(icons.Locked, {
+  }, _Locked || (_Locked = /*#__PURE__*/React.createElement(icons.Locked, {
     size: 16
-  })) : _DraggableIcon || (_DraggableIcon = /*#__PURE__*/React.createElement(icons.Draggable, {
+  })), ' ') : /*#__PURE__*/React.createElement("button", _rollupPluginBabelHelpers.extends({
+    className: `${blockClass}__draggable-handleStyle`,
+    type: "button",
+    "aria-label": ariaLabel,
+    "aria-describedby": ariaDescribedby,
+    "aria-pressed": ariaPressed
+  }, listeners), _DraggableIcon || (_DraggableIcon = /*#__PURE__*/React.createElement(icons.Draggable, {
     size: 16
-  }))), children);
+  })));
+  const content = /*#__PURE__*/React.createElement(React.Fragment, null, dragHandle, children);
   const style = {
     transform: !disabled ? utilities.CSS.Transform.toString(transform) : undefined,
     transition
   };
-  return /*#__PURE__*/React.createElement("li", _rollupPluginBabelHelpers.extends({
+  return /*#__PURE__*/React.createElement("li", {
     className: cx(classList, `${blockClass}__draggable-handleHolder`, {
       [`${blockClass}__draggable-handleHolder--selected`]: selected,
       [`${blockClass}__draggable-handleHolder--sticky`]: isSticky,
@@ -64,16 +80,8 @@ const DraggableElement = _ref => {
     id: elementId ? elementId : id,
     ref: setNodeRef,
     style: style
-  }, attributes, listeners, {
-    "aria-disabled": undefined,
-    "aria-selected": selected,
-    role: "option"
-  }), /*#__PURE__*/React.createElement("span", {
-    className: `${blockClass}__shared-ui--assistive-text`
-  }, ariaLabel), /*#__PURE__*/React.createElement("div", {
-    className: cx({
-      [`${blockClass}__draggable-handleStyle`]: !disabled
-    }, [`${blockClass}__draggable-handleHolder-droppable`])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cx([`${blockClass}__draggable-handleHolder-droppable`])
   }, content));
 };
 DraggableElement.propTypes = {

package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/ButtonWrapper.d.ts

@@ -1,21 +1,17 @@
-export default ButtonWrapper;
-declare function ButtonWrapper({ onClick, setIsTearsheetOpen, isTearsheetOpen, iconTooltipLabel, ...rest }: {
-    [x: string]: any;
-    onClick: any;
-    setIsTearsheetOpen: any;
-    isTearsheetOpen: any;
-    iconTooltipLabel?: string | undefined;
-}): React.JSX.Element;
-declare namespace ButtonWrapper {
-    namespace defaultProps {
-        function onClick(): void;
-    }
-    namespace propTypes {
-        export let iconTooltipLabel: any;
-        export let isTearsheetOpen: any;
-        let onClick_1: any;
-        export { onClick_1 as onClick };
-        export let setIsTearsheetOpen: any;
-    }
-}
+/**
+ * Copyright IBM Corp. 2022, 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 * as React from 'react';
+import { Button } from '@carbon/react';
+import { ComponentProps } from 'react';
+interface ButtonWrapperProps extends ComponentProps<typeof Button> {
+    isTearsheetOpen: boolean;
+    iconTooltipLabel?: string;
+    onClick?: () => void;
+    setIsTearsheetOpen: (open: boolean) => void;
+}
+declare const ButtonWrapper: React.ForwardRefExoticComponent<ButtonWrapperProps & React.RefAttributes<HTMLButtonElement>>;
+export default ButtonWrapper;

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

@@ -36,7 +36,7 @@ function _interopNamespaceDefault(e) {
 var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
 const blockClass = `${settings.pkg.prefix}--datagrid`;
-const ButtonWrapper = _ref => {
+const ButtonWrapper = /*#__PURE__*/React__namespace.forwardRef((_ref, ref) => {
   let {
     onClick,
     setIsTearsheetOpen,
@@ -53,6 +53,7 @@ const ButtonWrapper = _ref => {
     kind: "ghost",
     hasIconOnly: true,
     "test-id": `${blockClass}__customize-columns-trigger`,
+    ref: ref,
     onClick: () => {
       setIsTearsheetOpen(!isTearsheetOpen);
       if (typeof onClick === 'function') {
@@ -60,10 +61,7 @@ const ButtonWrapper = _ref => {
       }
     }
   }));
-};
-ButtonWrapper.defaultProps = {
-  onClick: () => {}
-};
+});
 ButtonWrapper.propTypes = {
   iconTooltipLabel: index.default.string,
   isTearsheetOpen: index.default.bool.isRequired,

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

@@ -49,10 +49,8 @@ const Columns = _ref => {
     ref: listRef
   }, /*#__PURE__*/React.createElement("ol", {
     className: `${blockClass}__customize-columns-column-list--focus`,
-    role: "listbox",
     "aria-label": customizeTearsheetHeadingLabel,
-    "aria-describedby": `${blockClass}__customize-columns--instructions`,
-    tabIndex: 0
+    "aria-describedby": `${blockClass}__customize-columns--instructions`
   }, /*#__PURE__*/React.createElement("span", {
     "aria-live": "assertive",
     className: `${blockClass}__shared-ui--assistive-text`

package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.d.ts

@@ -1,7 +1,8 @@
 export default CustomizeColumnsTearsheet;
-declare function CustomizeColumnsTearsheet({ isOpen, setIsTearsheetOpen, onSaveColumnPrefs, columnDefinitions, originalColumnDefinitions, customizeTearsheetHeadingLabel, primaryButtonTextLabel, secondaryButtonTextLabel, instructionsLabel, findColumnPlaceholderLabel, resetToDefaultLabel, assistiveTextInstructionsLabel, assistiveTextDisabledInstructionsLabel, selectAllLabel, }: {
+declare function CustomizeColumnsTearsheet({ isOpen, setIsTearsheetOpen, launcherButtonRef, onSaveColumnPrefs, columnDefinitions, originalColumnDefinitions, customizeTearsheetHeadingLabel, primaryButtonTextLabel, secondaryButtonTextLabel, instructionsLabel, findColumnPlaceholderLabel, resetToDefaultLabel, assistiveTextInstructionsLabel, assistiveTextDisabledInstructionsLabel, selectAllLabel, }: {
     isOpen: any;
     setIsTearsheetOpen: any;
+    launcherButtonRef: any;
     onSaveColumnPrefs: any;
     columnDefinitions: any;
     originalColumnDefinitions: any;

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

@@ -22,6 +22,7 @@ const CustomizeColumnsTearsheet = _ref => {
   let {
     isOpen,
     setIsTearsheetOpen,
+    launcherButtonRef,
     onSaveColumnPrefs,
     columnDefinitions,
     originalColumnDefinitions,
@@ -110,6 +111,7 @@ const CustomizeColumnsTearsheet = _ref => {
     open: isOpen,
     title: `${customizeTearsheetHeadingLabel} (${visibleColumnsCount}/${totalColumns})`,
     description: instructionsLabel,
+    launcherButtonRef: launcherButtonRef,
     actions: [{
       kind: 'secondary',
       label: secondaryButtonTextLabel,

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

@@ -150,10 +150,10 @@ const DraggableItemsList = _ref => {
   }, visibleCols.map(colDef => {
     const colHeaderTitle = getNodeTextContent.getNodeTextContent(colDef.Header);
     const parts = colHeaderTitle.split(new RegExp(`(${filterString})`, 'gi'));
-    const highlightedText = parts.map(part => part.toLowerCase() === filterString.toLowerCase() ? `<strong>${part}</strong>` : part).join('');
+    const highlightedText = parts.map(part => part.toLowerCase() === filterString.toLowerCase() ? /*#__PURE__*/React.createElement("strong", null, part) : part);
     const isFrozenColumn = !!colDef.sticky;
     const isDisabled = colDef.disabled;
-    const listContents = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(react.Checkbox, {
+    const listContents = /*#__PURE__*/React.createElement(react.Checkbox, {
       checked: common.isColumnVisible(colDef),
       disabled: isDisabled || isFrozenColumn,
       onChange: (_, _ref2) => {
@@ -163,17 +163,10 @@ const DraggableItemsList = _ref => {
         return onSelectColumn(colDef, checked);
       },
       id: `${blockClass}__customization-column-${colDef.id}`,
-      labelText: colHeaderTitle,
-      title: colHeaderTitle,
+      labelText: highlightedText,
       className: `${blockClass}__customize-columns-checkbox`,
-      hideLabel: true,
       onKeyDown: event => handleCheckboxKeydown(event, colDef)
-    }), /*#__PURE__*/React.createElement("div", {
-      dangerouslySetInnerHTML: {
-        __html: highlightedText
-      },
-      className: `${blockClass}__customize-columns-checkbox-visible-label`
-    }));
+    });
     return /*#__PURE__*/React.createElement(DraggableElement.default, {
       classList: draggableClass,
       key: colDef.id,

package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/TearsheetWrapper.d.ts

@@ -1,6 +1,7 @@
 export default TearsheetWrapper;
-declare function TearsheetWrapper({ instance }: {
+declare function TearsheetWrapper({ instance, launcherButtonRef }: {
     instance: any;
+    launcherButtonRef: any;
 }): React.JSX.Element;
 declare namespace TearsheetWrapper {
     namespace propTypes {

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

@@ -18,7 +18,8 @@ var InlineEditContext = require('../InlineEdit/InlineEditContext/InlineEditConte
 
 const TearsheetWrapper = _ref => {
   let {
-    instance
+    instance,
+    launcherButtonRef
   } = _ref;
   const {
     onSaveColumnPrefs,
@@ -41,6 +42,7 @@ const TearsheetWrapper = _ref => {
   return /*#__PURE__*/React.createElement(CustomizeColumnsTearsheet.default, _rollupPluginBabelHelpers.extends({}, rest, labels, {
     isOpen: isTearsheetOpen,
     setIsTearsheetOpen: setIsTearsheetOpen,
+    launcherButtonRef: launcherButtonRef,
     columnDefinitions: instance.allColumns,
     originalColumnDefinitions: instance.columns,
     onSaveColumnPrefs: updatedColDefs => {

package/lib/components/Datagrid/useCustomizeColumns.js

@@ -11,8 +11,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
-var TearsheetWrapper = require('./Datagrid/addons/CustomizeColumns/TearsheetWrapper.js');
 var ButtonWrapper = require('./Datagrid/addons/CustomizeColumns/ButtonWrapper.js');
+var TearsheetWrapper = require('./Datagrid/addons/CustomizeColumns/TearsheetWrapper.js');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -33,29 +33,36 @@ function _interopNamespaceDefault(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
-const useCustomizeColumns = hooks => {
+const useInstance = instance => {
+  const {
+    customizeColumnsProps
+  } = instance;
+  const {
+    labels
+  } = customizeColumnsProps || {};
   const [isTearsheetOpen, setIsTearsheetOpen] = React__namespace.useState(false);
-  hooks.useInstance.push(instance => {
-    const {
-      customizeColumnsProps
-    } = instance;
-    const {
-      labels
-    } = customizeColumnsProps || {};
-    Object.assign(instance, {
-      customizeColumnsProps: {
-        ...customizeColumnsProps,
-        isTearsheetOpen,
-        setIsTearsheetOpen
-      },
-      CustomizeColumnsButton: props => /*#__PURE__*/React__namespace.createElement(ButtonWrapper.default, _rollupPluginBabelHelpers.extends({
-        iconTooltipLabel: labels?.iconTooltipLabel,
-        isTearsheetOpen: isTearsheetOpen,
-        setIsTearsheetOpen: setIsTearsheetOpen
-      }, props)),
-      CustomizeColumnsTearsheet: TearsheetWrapper.default
-    });
+  const launcherButtonRef = React__namespace.useRef(null);
+  const CustomizeColumnsButton = React__namespace.useCallback(props => /*#__PURE__*/React__namespace.createElement(ButtonWrapper.default, _rollupPluginBabelHelpers.extends({}, props, {
+    iconTooltipLabel: labels?.iconTooltipLabel,
+    isTearsheetOpen: isTearsheetOpen,
+    setIsTearsheetOpen: setIsTearsheetOpen,
+    ref: launcherButtonRef
+  })), [isTearsheetOpen, labels?.iconTooltipLabel]);
+  const CustomizeColumnsTearsheet = React__namespace.useCallback(props => /*#__PURE__*/React__namespace.createElement(TearsheetWrapper.default, _rollupPluginBabelHelpers.extends({}, props, {
+    launcherButtonRef: launcherButtonRef
+  })), [launcherButtonRef]);
+  Object.assign(instance, {
+    customizeColumnsProps: {
+      ...customizeColumnsProps,
+      isTearsheetOpen,
+      setIsTearsheetOpen
+    },
+    CustomizeColumnsButton,
+    CustomizeColumnsTearsheet
   });
 };
+const useCustomizeColumns = hooks => {
+  hooks.useInstance.push(useInstance);
+};
 
 exports.default = useCustomizeColumns;

package/lib/components/Guidebanner/Guidebanner.js

@@ -90,7 +90,8 @@ exports.Guidebanner = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     },
     onScroll: scrollPercent => {
       setScrollPosition(scrollPercent);
-    }
+    },
+    isScrollMode: true
   }, children), /*#__PURE__*/React.createElement("div", {
     className: cx([collapsible || showNavigation ? `${blockClass}__navigation` : null])
   }, collapsible && /*#__PURE__*/React.createElement(react.Button, {

package/lib/components/InterstitialScreen/InterstitialScreen.d.ts

@@ -35,6 +35,10 @@ export interface InterstitialScreenProps {
      * Function to call when the close button is clicked.
      */
     onClose?: (value: ActionType) => void;
+    /**
+     * Provide a ref to return focus to once the interstitial is closed.
+     */
+    launcherButtonRef?: RefObject<HTMLElement>;
 }
 type InterstitialScreenComponent = React.ForwardRefExoticComponent<InterstitialScreenProps & React.RefAttributes<HTMLDivElement>> & {
     Header: React.FC<InterstitialScreenHeaderProps>;

package/lib/components/InterstitialScreen/InterstitialScreen.js

@@ -52,6 +52,7 @@ exports.InterstitialScreen = /*#__PURE__*/React.forwardRef((props, ref) => {
     interstitialAriaLabel = 'Interstitial screen',
     isFullScreen = false,
     isOpen = false,
+    launcherButtonRef,
     onClose,
     ...rest
   } = props;
@@ -86,7 +87,12 @@ exports.InterstitialScreen = /*#__PURE__*/React.forwardRef((props, ref) => {
     // for modal only, "is-visible" triggers animation
     setIsVisibleClass(!isFullScreen && isOpen ? 'is-visible' : null);
     nextButtonRef?.current?.focus();
-  }, [isFullScreen, isOpen]);
+    if (!isOpen && launcherButtonRef) {
+      setTimeout(() => {
+        launcherButtonRef.current.focus();
+      }, 0);
+    }
+  }, [launcherButtonRef, isFullScreen, isOpen]);
 
   // hitting escape key also closes this component
   React.useEffect(() => {
@@ -105,7 +111,9 @@ exports.InterstitialScreen = /*#__PURE__*/React.forwardRef((props, ref) => {
     return null;
   }
   const renderModal = () => {
-    return /*#__PURE__*/React.createElement(react.ComposedModal, _rollupPluginBabelHelpers.extends({}, rest, {
+    return /*#__PURE__*/React.createElement(react.unstable_FeatureFlags, {
+      enableExperimentalFocusWrapWithoutSentinels: true
+    }, /*#__PURE__*/React.createElement(react.ComposedModal, _rollupPluginBabelHelpers.extends({}, rest, {
       preventCloseOnClickOutside: true,
       className: cx(blockClass,
       // Apply the block class to the main HTML element
@@ -116,7 +124,7 @@ exports.InterstitialScreen = /*#__PURE__*/React.forwardRef((props, ref) => {
       open: isOpen,
       ref: _forwardedRef,
       "aria-label": interstitialAriaLabel
-    }, devtools.getDevtoolsProps(componentName)), children);
+    }, devtools.getDevtoolsProps(componentName)), children));
   };
   const renderFullScreen = () => {
     return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
@@ -197,6 +205,10 @@ exports.InterstitialScreen.propTypes = {
    * Specifies whether the component is currently open.
    */
   isOpen: index.default.bool,
+  /**
+   * Provide a ref to return focus to once the interstitial is closed.
+   */
+  launcherButtonRef: index.default.any,
   /**
    * Function to call when the close button is clicked.
    */

package/lib/components/InterstitialScreen/InterstitialScreenBody.js

@@ -26,7 +26,7 @@ const InterstitialScreenBody = /*#__PURE__*/React.forwardRef(props => {
   } = props;
   const blockClass = `${settings.pkg.prefix}--interstitial-screen`;
   const bodyBlockClass = `${blockClass}--internal-body`;
-  const [isMultiStep, setIsMultiStep] = React.useState(false);
+  const [stepType, setStepType] = React.useState();
   const {
     setBodyChildrenData,
     bodyChildrenData,
@@ -52,12 +52,12 @@ const InterstitialScreenBody = /*#__PURE__*/React.forwardRef(props => {
 
     // Set body children data
     setBodyChildrenData?.(children);
-
     // If the children is an array, treat it as a multiStep
     if (isElement && Array.isArray(children)) {
-      const stepLength = children.length;
-      setIsMultiStep(!!stepLength);
-      setStepCount?.(stepLength);
+      setStepType('multi');
+      setStepCount?.(children.length);
+    } else {
+      setStepType('single');
     }
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -82,13 +82,13 @@ const InterstitialScreenBody = /*#__PURE__*/React.forwardRef(props => {
     ref: bodyScrollRef
   }, rest), /*#__PURE__*/React.createElement("div", {
     className: `${blockClass}--content`
-  }, isMultiStep ? /*#__PURE__*/React.createElement("div", {
+  }, stepType === 'multi' ? /*#__PURE__*/React.createElement("div", {
     className: `${blockClass}__carousel`
   }, /*#__PURE__*/React.createElement(Carousel.Carousel, {
     disableArrowScroll: true,
     ref: scrollRef,
     onScroll: onScrollHandler
-  }, bodyChildrenData)) : bodyChildrenData));
+  }, bodyChildrenData)) : stepType === 'single' ? bodyChildrenData : ''));
   return isFullScreen ? renderBody() : /*#__PURE__*/React.createElement(react.ModalBody, {
     className: bodyBlockClass
   }, renderBody());

package/lib/components/InterstitialScreen/InterstitialScreenFooter.js

@@ -44,6 +44,13 @@ const InterstitialScreenFooter = /*#__PURE__*/React.forwardRef(props => {
   const isMultiStep = !!stepCount;
   const progStepFloor = 0;
   const progStepCeil = stepCount - 1;
+  //this will focus the start button on last step when next button is hidden and start button is shown
+  React.useEffect(() => {
+    if (progStep + 1 === stepCount && startButtonRef.current) {
+      startButtonRef.current.focus();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [progStep]);
   const handleAction = async actionType => {
     setLoadingAction(actionType);
     await onAction?.(actionType, {