@carbon/ibm-products 2.69.0 → 2.70.0-rc.0

package/es/components/CreateFullPage/CreateFullPage.js

@@ -7,7 +7,7 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { Tooltip, Form, ComposedModal, ModalHeader, ModalBody, ModalFooter, Button } from '@carbon/react';
-import React__default, { useState, useRef, useEffect, createContext } from 'react';
+import React__default, { useState, isValidElement, useEffect, createContext } from 'react';
 import { overflowAriaLabel_required_if_breadcrumbs_exist, SimpleHeader } from '../SimpleHeader/SimpleHeader.js';
 import { ActionSet } from '../ActionSet/ActionSet.js';
 import PropTypes from '../../_virtual/index.js';
@@ -86,7 +86,7 @@ let CreateFullPage = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   const [stepData, setStepData] = useState([]);
   const [firstIncludedStep, setFirstIncludedStep] = useState(1);
   const [lastIncludedStep, setLastIncludedStep] = useState();
-  const invalidInitialStepWarned = useRef(false);
+  const stepLength = React__default.Children.toArray(children).filter(item => /*#__PURE__*/isValidElement(item) && item.props.includeStep !== false).length;
   useEffect(() => {
     const firstItem = stepData.findIndex(item => item?.shouldIncludeStep) + 1;
     const lastItem = lastIndexInArray(stepData, 'shouldIncludeStep', true);
@@ -96,20 +96,18 @@ let CreateFullPage = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     if (lastItem !== lastIncludedStep) {
       setLastIncludedStep(lastItem);
     }
-
-    /**@ts-ignore */
-    if (initialStep) {
+    if (Number(initialStep) > stepLength || Number(initialStep) <= 0) {
+      setCurrentStep(1);
+    } else if (initialStep) {
       const numberOfHiddenSteps = getNumberOfHiddenSteps(stepData, initialStep);
       setCurrentStep(Number(initialStep + numberOfHiddenSteps));
     }
-  }, [stepData, firstIncludedStep, lastIncludedStep, initialStep, modalIsOpen]);
+  }, [stepData, firstIncludedStep, lastIncludedStep, initialStep, modalIsOpen, stepLength]);
   useEffect(() => {
-    if (!invalidInitialStepWarned?.current) {
-      checkForValidInitialStep();
-    }
+    checkForValidInitialStep();
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [initialStep, stepData]);
+  }, [initialStep]);
   useCreateComponentFocus({
     previousState,
     currentStep,
@@ -141,11 +139,7 @@ let CreateFullPage = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     setModalIsOpen
   });
   const checkForValidInitialStep = () => {
-    // An invalid initialStep value was provided, we'll default to rendering the first step or last step
-
-    if (initialStep && stepData?.length && Number(initialStep) > Number(stepData?.length) || Number(initialStep) <= 0) {
-      invalidInitialStepWarned.current = true;
-      setCurrentStep(1);
+    if (initialStep && stepLength && Number(initialStep) > stepLength || Number(initialStep) <= 0) {
       console.warn(`${componentName}: An invalid \`initialStep\` prop was supplied. The \`initialStep\` prop should be a number that is greater than 0 or less than or equal to the number of steps your ${componentName} has.`);
     }
   };

package/es/components/CreateTearsheet/CreateTearsheet.js

@@ -82,7 +82,7 @@ let CreateTearsheet = /*#__PURE__*/forwardRef((_ref, ref) => {
   });
   const contentRef = useRef(null);
   useEffect(() => {
-    const firstItem = stepData.findIndex(item => item.shouldIncludeStep === true) + 1;
+    const firstItem = stepData.findIndex(item => item?.shouldIncludeStep) + 1;
     const lastItem = lastIndexInArray(stepData, 'shouldIncludeStep', true);
     if (firstItem !== firstIncludedStep) {
       setCurrentStep(firstItem);

package/es/components/CreateTearsheet/CreateTearsheetStep.d.ts

@@ -18,6 +18,7 @@ type fieldsetLegendTextProps = {
      * Otherwise, use CSS to hide/remove this label text.
      */
     fieldsetLegendText?: string;
+    fieldsetLegendId?: React.ReactNode;
 } | {
     /**
      * This optional prop will render your form content inside of a fieldset html element
@@ -31,6 +32,7 @@ type fieldsetLegendTextProps = {
      * Otherwise, use CSS to hide/remove this label text.
      */
     fieldsetLegendText: string;
+    fieldsetLegendId: React.ReactNode;
 };
 interface CreateTearsheetStepBaseProps extends PropsWithChildren {
     /**

package/es/components/CreateTearsheet/CreateTearsheetStep.js

@@ -44,6 +44,7 @@ let CreateTearsheetStep = /*#__PURE__*/forwardRef((_ref, ref) => {
     disableSubmit,
     experimentalSecondarySubmit,
     fieldsetLegendText,
+    fieldsetLegendId,
     hasFieldset = defaults.hasFieldset,
     includeStep = defaults.includeStep,
     introStep,
@@ -151,13 +152,14 @@ let CreateTearsheetStep = /*#__PURE__*/forwardRef((_ref, ref) => {
     sm: 4
   }, /*#__PURE__*/React__default.createElement("h4", {
     className: `${blockClass}--title`
-  }, title), subtitle && /*#__PURE__*/React__default.createElement("h6", {
+  }, title), subtitle && /*#__PURE__*/React__default.createElement("h5", {
     className: `${blockClass}--subtitle`
   }, subtitle), renderDescription()), /*#__PURE__*/React__default.createElement(Column, {
     span: 100
   }, hasFieldset ? /*#__PURE__*/React__default.createElement(FormGroup, {
     legendText: fieldsetLegendText,
-    className: `${blockClass}--fieldset`
+    className: `${blockClass}--fieldset`,
+    legendId: fieldsetLegendId
   }, children) : children))) : pconsole.warn(`You have tried using a ${componentName} component outside of a CreateTearsheet. This is not allowed. ${componentName}s should always be children of the CreateTearsheet`);
 });
 
@@ -195,16 +197,26 @@ CreateTearsheetStep.propTypes = {
     hideSecondarySubmit: PropTypes.bool,
     onClick: PropTypes.func
   }),
+  /**
+   * This is the required legend id that appears as the aria-labelledby of fieldset for accessibility purposes.
+   */
+  /**@ts-ignore*/
+  fieldsetLegendId: PropTypes.node.isRequired.if(_ref2 => {
+    let {
+      hasFieldset
+    } = _ref2;
+    return !!hasFieldset;
+  }),
   /**
    * This is the required legend text that appears above a fieldset html element for accessibility purposes.
    * You can set the `hasFieldset` prop to false if you have multiple fieldset elements or want to control the children of your Full Page's step content.
    * Otherwise, use CSS to hide/remove this label text.
    */
   /**@ts-ignore*/
-  fieldsetLegendText: PropTypes.string.isRequired.if(_ref2 => {
+  fieldsetLegendText: PropTypes.string.isRequired.if(_ref3 => {
     let {
       hasFieldset
-    } = _ref2;
+    } = _ref3;
     return !!hasFieldset;
   }),
   /**

package/es/components/NotificationsPanel/NotificationsPanel.js

@@ -143,7 +143,13 @@ let NotificationsPanel = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     // Set the notifications passed to the state within this component
     setAllNotifications(data);
   }, [data]);
-  useClickOutside(ref || notificationPanelRef, () => {
+  useClickOutside(ref || notificationPanelRef, target => {
+    const element = target;
+    if (!isActionableElement(element)) {
+      setTimeout(() => {
+        triggerButtonRef?.current?.focus();
+      }, 100);
+    }
     onClickOutside?.();
   });
   const handleKeydown = event => {
@@ -303,6 +309,17 @@ let NotificationsPanel = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
       size: 16
     }))));
   };
+  const isActionableElement = el => {
+    if (!el) {
+      return false;
+    }
+    const interactiveRoles = new Set(['button', 'link', 'textbox', 'checkbox', 'radio', 'slider', 'spinbutton', 'combobox', 'switch', 'menuitem']);
+    const actionableAncestor = el.closest('button, a, input, select, textarea, [tabindex], [contenteditable="true"], [role]');
+    if (!actionableAncestor) {
+      return false;
+    }
+    return actionableAncestor instanceof HTMLButtonElement || actionableAncestor instanceof HTMLAnchorElement || actionableAncestor instanceof HTMLInputElement || actionableAncestor instanceof HTMLSelectElement || actionableAncestor instanceof HTMLTextAreaElement || actionableAncestor.tabIndex >= 0 || actionableAncestor.isContentEditable || interactiveRoles.has(actionableAncestor.getAttribute('role')?.toLowerCase() ?? '');
+  };
   const dismissSingleNotification = (event, notification) => {
     event.preventDefault();
     event.stopPropagation();

package/es/components/SidePanel/SidePanel.d.ts

@@ -44,6 +44,10 @@ type SidePanelBaseProps = {
      * Sets the current step of the side panel
      */
     currentStep?: number;
+    /**
+     * Show/hide the "X" close button.
+     */
+    hideCloseButton?: boolean;
     /**
      * Unique identifier
      */

package/es/components/SidePanel/SidePanel.js

@@ -33,6 +33,7 @@ const defaults = {
   animateTitle: true,
   closeIconDescription: 'Close',
   currentStep: 0,
+  hideCloseButton: false,
   navigationBackIconDescription: 'Back',
   placement: 'right',
   size: 'md'
@@ -55,6 +56,7 @@ const SidePanelBase = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     condensedActions,
     currentStep = defaults.currentStep,
     decorator,
+    hideCloseButton = defaults.hideCloseButton,
     id = blockClass,
     includeOverlay,
     labelText,
@@ -452,7 +454,7 @@ const SidePanelBase = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
       ref: labelTextRef
     }, labelText), title && title.length && renderTitle(), /*#__PURE__*/React__default.createElement("div", {
       className: `${blockClass}__decorator-and-close`
-    }, normalizedDecorator, /*#__PURE__*/React__default.createElement(IconButton, {
+    }, normalizedDecorator, !hideCloseButton && /*#__PURE__*/React__default.createElement(IconButton, {
       className: `${blockClass}__close-button`,
       label: closeIconDescription,
       onClick: onRequestClose,
@@ -628,6 +630,10 @@ SidePanel.propTypes = {
    * Sets the current step of the side panel
    */
   currentStep: PropTypes.number,
+  /**
+   * Show/hide the "X" close button.
+   */
+  hideCloseButton: PropTypes.bool,
   /**
    * Unique identifier
    */

package/es/components/Tearsheet/TearsheetShell.js

@@ -269,7 +269,7 @@ const TearsheetShell = /*#__PURE__*/React__default.forwardRef((_ref2, ref) => {
         [`${bc}__header--no-close-icon`]: !effectiveHasCloseIcon
       }),
       closeModal: onClose,
-      iconDescription: closeIconDescription
+      iconDescription: effectiveHasCloseIcon ? closeIconDescription : undefined
     }, /*#__PURE__*/React__default.createElement(Wrap, {
       className: `${bc}__header-content`,
       element: wide ? Layer : undefined
@@ -297,7 +297,9 @@ const TearsheetShell = /*#__PURE__*/React__default.forwardRef((_ref2, ref) => {
       }),
       neverRender: influencerPosition === 'right',
       element: SectionLevel3
-    }, influencer), /*#__PURE__*/React__default.createElement(Wrap, {
+    }, /*#__PURE__*/React__default.createElement(Wrap, {
+      element: Layer
+    }, influencer)), /*#__PURE__*/React__default.createElement(Wrap, {
       className: `${bc}__right`
     }, /*#__PURE__*/React__default.createElement(Wrap, {
       className: `${bc}__main`,
@@ -306,14 +308,18 @@ const TearsheetShell = /*#__PURE__*/React__default.forwardRef((_ref2, ref) => {
       className: `${bc}__content`,
       alwaysRender: !!(influencer && influencerPosition === 'right'),
       element: SectionLevel3
-    }, children), /*#__PURE__*/React__default.createElement(Wrap, {
+    }, /*#__PURE__*/React__default.createElement(Wrap, {
+      element: !wide ? Layer : undefined
+    }, children)), /*#__PURE__*/React__default.createElement(Wrap, {
       className: cx({
         [`${bc}__influencer`]: true,
         [`${bc}__influencer--wide`]: influencerWidth === 'wide'
       }),
       neverRender: influencerPosition !== 'right',
       element: SectionLevel3
-    }, influencer)), includeActions && /*#__PURE__*/React__default.createElement(Wrap, {
+    }, /*#__PURE__*/React__default.createElement(Wrap, {
+      element: Layer
+    }, influencer))), includeActions && /*#__PURE__*/React__default.createElement(Wrap, {
       className: `${bc}__button-container`
     }, /*#__PURE__*/React__default.createElement(ActionSet, {
       actions: actions,

package/es/node_modules/@carbon/icons-react/es/Icon.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { getAttributes } from '../../icon-helpers/es/index.js';
+import { getAttributes } from '../node_modules/@carbon/icon-helpers/es/index.js';
 import PropTypes from '../../../../_virtual/index.js';
 import React__default from 'react';
 

package/lib/components/Card/Card.js

@@ -99,14 +99,15 @@ const Card = /*#__PURE__*/React.forwardRef((_ref, ref) => {
           id,
           itemText,
           onKeyDown,
-          onClick
+          onClick,
+          ...rest
         } = _ref2;
-        return /*#__PURE__*/React.createElement(react.MenuItem, {
+        return /*#__PURE__*/React.createElement(react.MenuItem, _rollupPluginBabelHelpers.extends({}, rest, {
           key: id,
           label: itemText ?? '',
           onKeyDown: onKeyDown,
           onClick: onClick
-        });
+        }));
       }))));
     }
     const icons = getIcons().map(_ref3 => {

package/lib/components/CreateFullPage/CreateFullPage.js

@@ -88,7 +88,7 @@ exports.CreateFullPage = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   const [stepData, setStepData] = React.useState([]);
   const [firstIncludedStep, setFirstIncludedStep] = React.useState(1);
   const [lastIncludedStep, setLastIncludedStep] = React.useState();
-  const invalidInitialStepWarned = React.useRef(false);
+  const stepLength = React.Children.toArray(children).filter(item => /*#__PURE__*/React.isValidElement(item) && item.props.includeStep !== false).length;
   React.useEffect(() => {
     const firstItem = stepData.findIndex(item => item?.shouldIncludeStep) + 1;
     const lastItem = lastIndexInArray.lastIndexInArray(stepData, 'shouldIncludeStep', true);
@@ -98,20 +98,18 @@ exports.CreateFullPage = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     if (lastItem !== lastIncludedStep) {
       setLastIncludedStep(lastItem);
     }
-
-    /**@ts-ignore */
-    if (initialStep) {
+    if (Number(initialStep) > stepLength || Number(initialStep) <= 0) {
+      setCurrentStep(1);
+    } else if (initialStep) {
       const numberOfHiddenSteps = getNumberOfHiddenSteps.getNumberOfHiddenSteps(stepData, initialStep);
       setCurrentStep(Number(initialStep + numberOfHiddenSteps));
     }
-  }, [stepData, firstIncludedStep, lastIncludedStep, initialStep, modalIsOpen]);
+  }, [stepData, firstIncludedStep, lastIncludedStep, initialStep, modalIsOpen, stepLength]);
   React.useEffect(() => {
-    if (!invalidInitialStepWarned?.current) {
-      checkForValidInitialStep();
-    }
+    checkForValidInitialStep();
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [initialStep, stepData]);
+  }, [initialStep]);
   useCreateComponentFocus.useCreateComponentFocus({
     previousState,
     currentStep,
@@ -143,11 +141,7 @@ exports.CreateFullPage = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     setModalIsOpen
   });
   const checkForValidInitialStep = () => {
-    // An invalid initialStep value was provided, we'll default to rendering the first step or last step
-
-    if (initialStep && stepData?.length && Number(initialStep) > Number(stepData?.length) || Number(initialStep) <= 0) {
-      invalidInitialStepWarned.current = true;
-      setCurrentStep(1);
+    if (initialStep && stepLength && Number(initialStep) > stepLength || Number(initialStep) <= 0) {
       console.warn(`${componentName}: An invalid \`initialStep\` prop was supplied. The \`initialStep\` prop should be a number that is greater than 0 or less than or equal to the number of steps your ${componentName} has.`);
     }
   };

package/lib/components/CreateTearsheet/CreateTearsheet.js

@@ -84,7 +84,7 @@ exports.CreateTearsheet = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   });
   const contentRef = React.useRef(null);
   React.useEffect(() => {
-    const firstItem = stepData.findIndex(item => item.shouldIncludeStep === true) + 1;
+    const firstItem = stepData.findIndex(item => item?.shouldIncludeStep) + 1;
     const lastItem = lastIndexInArray.lastIndexInArray(stepData, 'shouldIncludeStep', true);
     if (firstItem !== firstIncludedStep) {
       setCurrentStep(firstItem);

package/lib/components/CreateTearsheet/CreateTearsheetStep.d.ts

@@ -18,6 +18,7 @@ type fieldsetLegendTextProps = {
      * Otherwise, use CSS to hide/remove this label text.
      */
     fieldsetLegendText?: string;
+    fieldsetLegendId?: React.ReactNode;
 } | {
     /**
      * This optional prop will render your form content inside of a fieldset html element
@@ -31,6 +32,7 @@ type fieldsetLegendTextProps = {
      * Otherwise, use CSS to hide/remove this label text.
      */
     fieldsetLegendText: string;
+    fieldsetLegendId: React.ReactNode;
 };
 interface CreateTearsheetStepBaseProps extends PropsWithChildren {
     /**

package/lib/components/CreateTearsheet/CreateTearsheetStep.js

@@ -46,6 +46,7 @@ exports.CreateTearsheetStep = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     disableSubmit,
     experimentalSecondarySubmit,
     fieldsetLegendText,
+    fieldsetLegendId,
     hasFieldset = defaults.hasFieldset,
     includeStep = defaults.includeStep,
     introStep,
@@ -153,13 +154,14 @@ exports.CreateTearsheetStep = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     sm: 4
   }, /*#__PURE__*/React.createElement("h4", {
     className: `${blockClass}--title`
-  }, title), subtitle && /*#__PURE__*/React.createElement("h6", {
+  }, title), subtitle && /*#__PURE__*/React.createElement("h5", {
     className: `${blockClass}--subtitle`
   }, subtitle), renderDescription()), /*#__PURE__*/React.createElement(react.Column, {
     span: 100
   }, hasFieldset ? /*#__PURE__*/React.createElement(react.FormGroup, {
     legendText: fieldsetLegendText,
-    className: `${blockClass}--fieldset`
+    className: `${blockClass}--fieldset`,
+    legendId: fieldsetLegendId
   }, children) : children))) : pconsole.default.warn(`You have tried using a ${componentName} component outside of a CreateTearsheet. This is not allowed. ${componentName}s should always be children of the CreateTearsheet`);
 });
 
@@ -197,16 +199,26 @@ exports.CreateTearsheetStep.propTypes = {
     hideSecondarySubmit: index.default.bool,
     onClick: index.default.func
   }),
+  /**
+   * This is the required legend id that appears as the aria-labelledby of fieldset for accessibility purposes.
+   */
+  /**@ts-ignore*/
+  fieldsetLegendId: index.default.node.isRequired.if(_ref2 => {
+    let {
+      hasFieldset
+    } = _ref2;
+    return !!hasFieldset;
+  }),
   /**
    * This is the required legend text that appears above a fieldset html element for accessibility purposes.
    * You can set the `hasFieldset` prop to false if you have multiple fieldset elements or want to control the children of your Full Page's step content.
    * Otherwise, use CSS to hide/remove this label text.
    */
   /**@ts-ignore*/
-  fieldsetLegendText: index.default.string.isRequired.if(_ref2 => {
+  fieldsetLegendText: index.default.string.isRequired.if(_ref3 => {
     let {
       hasFieldset
-    } = _ref2;
+    } = _ref3;
     return !!hasFieldset;
   }),
   /**

package/lib/components/NotificationsPanel/NotificationsPanel.js

@@ -145,7 +145,13 @@ exports.NotificationsPanel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     // Set the notifications passed to the state within this component
     setAllNotifications(data);
   }, [data]);
-  useClickOutside.useClickOutside(ref || notificationPanelRef, () => {
+  useClickOutside.useClickOutside(ref || notificationPanelRef, target => {
+    const element = target;
+    if (!isActionableElement(element)) {
+      setTimeout(() => {
+        triggerButtonRef?.current?.focus();
+      }, 100);
+    }
     onClickOutside?.();
   });
   const handleKeydown = event => {
@@ -305,6 +311,17 @@ exports.NotificationsPanel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       size: 16
     }))));
   };
+  const isActionableElement = el => {
+    if (!el) {
+      return false;
+    }
+    const interactiveRoles = new Set(['button', 'link', 'textbox', 'checkbox', 'radio', 'slider', 'spinbutton', 'combobox', 'switch', 'menuitem']);
+    const actionableAncestor = el.closest('button, a, input, select, textarea, [tabindex], [contenteditable="true"], [role]');
+    if (!actionableAncestor) {
+      return false;
+    }
+    return actionableAncestor instanceof HTMLButtonElement || actionableAncestor instanceof HTMLAnchorElement || actionableAncestor instanceof HTMLInputElement || actionableAncestor instanceof HTMLSelectElement || actionableAncestor instanceof HTMLTextAreaElement || actionableAncestor.tabIndex >= 0 || actionableAncestor.isContentEditable || interactiveRoles.has(actionableAncestor.getAttribute('role')?.toLowerCase() ?? '');
+  };
   const dismissSingleNotification = (event, notification) => {
     event.preventDefault();
     event.stopPropagation();

package/lib/components/SidePanel/SidePanel.d.ts

@@ -44,6 +44,10 @@ type SidePanelBaseProps = {
      * Sets the current step of the side panel
      */
     currentStep?: number;
+    /**
+     * Show/hide the "X" close button.
+     */
+    hideCloseButton?: boolean;
     /**
      * Unique identifier
      */

package/lib/components/SidePanel/SidePanel.js

@@ -35,6 +35,7 @@ const defaults = {
   animateTitle: true,
   closeIconDescription: 'Close',
   currentStep: 0,
+  hideCloseButton: false,
   navigationBackIconDescription: 'Back',
   placement: 'right',
   size: 'md'
@@ -57,6 +58,7 @@ const SidePanelBase = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     condensedActions,
     currentStep = defaults.currentStep,
     decorator,
+    hideCloseButton = defaults.hideCloseButton,
     id = blockClass,
     includeOverlay,
     labelText,
@@ -454,7 +456,7 @@ const SidePanelBase = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       ref: labelTextRef
     }, labelText), title && title.length && renderTitle(), /*#__PURE__*/React.createElement("div", {
       className: `${blockClass}__decorator-and-close`
-    }, normalizedDecorator, /*#__PURE__*/React.createElement(react.IconButton, {
+    }, normalizedDecorator, !hideCloseButton && /*#__PURE__*/React.createElement(react.IconButton, {
       className: `${blockClass}__close-button`,
       label: closeIconDescription,
       onClick: onRequestClose,
@@ -630,6 +632,10 @@ SidePanel.propTypes = {
    * Sets the current step of the side panel
    */
   currentStep: index.default.number,
+  /**
+   * Show/hide the "X" close button.
+   */
+  hideCloseButton: index.default.bool,
   /**
    * Unique identifier
    */

package/lib/components/Tearsheet/TearsheetShell.js

@@ -271,7 +271,7 @@ const TearsheetShell = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
         [`${bc}__header--no-close-icon`]: !effectiveHasCloseIcon
       }),
       closeModal: onClose,
-      iconDescription: closeIconDescription
+      iconDescription: effectiveHasCloseIcon ? closeIconDescription : undefined
     }, /*#__PURE__*/React.createElement(Wrap.Wrap, {
       className: `${bc}__header-content`,
       element: wide ? react.Layer : undefined
@@ -299,7 +299,9 @@ const TearsheetShell = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
       }),
       neverRender: influencerPosition === 'right',
       element: SectionLevel3
-    }, influencer), /*#__PURE__*/React.createElement(Wrap.Wrap, {
+    }, /*#__PURE__*/React.createElement(Wrap.Wrap, {
+      element: react.Layer
+    }, influencer)), /*#__PURE__*/React.createElement(Wrap.Wrap, {
       className: `${bc}__right`
     }, /*#__PURE__*/React.createElement(Wrap.Wrap, {
       className: `${bc}__main`,
@@ -308,14 +310,18 @@ const TearsheetShell = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
       className: `${bc}__content`,
       alwaysRender: !!(influencer && influencerPosition === 'right'),
       element: SectionLevel3
-    }, children), /*#__PURE__*/React.createElement(Wrap.Wrap, {
+    }, /*#__PURE__*/React.createElement(Wrap.Wrap, {
+      element: !wide ? react.Layer : undefined
+    }, children)), /*#__PURE__*/React.createElement(Wrap.Wrap, {
       className: cx({
         [`${bc}__influencer`]: true,
         [`${bc}__influencer--wide`]: influencerWidth === 'wide'
       }),
       neverRender: influencerPosition !== 'right',
       element: SectionLevel3
-    }, influencer)), includeActions && /*#__PURE__*/React.createElement(Wrap.Wrap, {
+    }, /*#__PURE__*/React.createElement(Wrap.Wrap, {
+      element: react.Layer
+    }, influencer))), includeActions && /*#__PURE__*/React.createElement(Wrap.Wrap, {
       className: `${bc}__button-container`
     }, /*#__PURE__*/React.createElement(ActionSet.ActionSet, {
       actions: actions,

package/lib/node_modules/@carbon/icons-react/es/Icon.js

@@ -9,7 +9,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('../../icon-helpers/es/index.js');
+var index = require('../node_modules/@carbon/icon-helpers/es/index.js');
 var index$1 = require('../../../../_virtual/index.js');
 var React = require('react');
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.69.0",
+  "version": "2.70.0-rc.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -83,7 +83,6 @@
     "@storybook/addon-docs": "^8.6.12",
     "@storybook/addon-essentials": "^8.6.12",
     "@storybook/addon-links": "^8.6.12",
-    "@storybook/addon-storysource": "^8.6.12",
     "@storybook/addon-viewport": "^8.6.12",
     "@storybook/components": "^8.6.12",
     "@storybook/core-events": "^8.6.12",
@@ -91,11 +90,10 @@
     "@storybook/manager-api": "^8.6.12",
     "@storybook/react": "^8.6.12",
     "@storybook/react-vite": "^8.6.12",
-    "@storybook/source-loader": "^8.6.12",
     "@storybook/theming": "^8.6.12",
     "@types/react-table": "^7.7.20",
     "babel-plugin-dev-expression": "^0.2.3",
-    "babel-preset-ibm-cloud-cognitive": "^0.27.0",
+    "babel-preset-ibm-cloud-cognitive": "^0.28.0-rc.0",
     "chalk": "^4.1.2",
     "change-case": "5.4.4",
     "classnames": "^2.5.1",
@@ -104,7 +102,7 @@
     "fs-extra": "^11.3.0",
     "glob": "^11.0.1",
     "jest": "^29.7.0",
-    "jest-config-ibm-cloud-cognitive": "^1.28.0",
+    "jest-config-ibm-cloud-cognitive": "^1.29.0-rc.0",
     "jest-environment-jsdom": "^29.7.0",
     "namor": "^1.1.2",
     "npm-check-updates": "^18.0.0",
@@ -119,11 +117,11 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.26.10",
-    "@carbon/feature-flags": "^0.26.0",
-    "@carbon/ibm-products-styles": "^2.65.0",
+    "@carbon/feature-flags": "^0.27.0",
+    "@carbon/ibm-products-styles": "^2.66.0-rc.0",
     "@carbon/telemetry": "^0.1.0",
-    "@carbon/utilities": "^0.6.0",
-    "@carbon/utilities-react": "0.8.0",
+    "@carbon/utilities": "^0.7.0",
+    "@carbon/utilities-react": "0.9.0",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
@@ -133,14 +131,14 @@
     "react-window": "^1.8.11"
   },
   "peerDependencies": {
-    "@carbon/grid": "^11.36.0",
-    "@carbon/layout": "^11.34.0",
-    "@carbon/motion": "^11.28.0",
-    "@carbon/react": "^1.83.0",
-    "@carbon/themes": "^11.53.0",
-    "@carbon/type": "^11.40.0",
+    "@carbon/grid": "^11.37.0",
+    "@carbon/layout": "^11.35.0",
+    "@carbon/motion": "^11.29.0",
+    "@carbon/react": "^1.84.0",
+    "@carbon/themes": "^11.54.0",
+    "@carbon/type": "^11.41.0",
     "react": "^16.8.6 || ^17.0.1 || ^18.2.0 || ^19.0.0",
     "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0 || ^19.0.0"
   },
-  "gitHead": "4aec9b9d0c951b243025b3266cc9084e3a37578d"
+  "gitHead": "a0df8e9f8fd3416467f69d3798933a850e9e0fad"
 }

package/scss/components/SidePanel/_side-panel.scss

@@ -531,9 +531,9 @@ $clabs-prefix: 'clabs'; // TODO: remove when resizer available in labs
     position: absolute;
     z-index: 10; /* must be higher than title container border bottom */
     display: flex;
+    block-size: $spacing-07;
     inset-block-start: 0;
     inset-inline-end: 0;
-
     /* stylelint-disable-next-line max-nesting-depth */
     @media (prefers-reduced-motion) {
       position: absolute;

package/scss/components/Tearsheet/_tearsheet.scss

@@ -363,6 +363,7 @@ $motion-duration: $duration-moderate-02;
   }
 
   .#{$block-class}__main .#{$block-class}__influencer {
+    background-color: $layer;
     border-inline-end: none;
     border-inline-start: 1px solid $border-subtle-01;
   }