@carbon/ibm-products 2.65.0 → 2.66.0-rc.0

package/lib/components/SidePanel/SidePanel.js

@@ -25,12 +25,11 @@ var usePreviousValue = require('../../global/js/hooks/usePreviousValue.js');
 var usePrefersReducedMotion = require('../../global/js/hooks/usePrefersReducedMotion.js');
 var usePresence = require('../../global/js/hooks/usePresence.js');
 
-var _excluded = ["actionToolbarButtons", "actions", "aiLabel", "animateTitle", "children", "className", "closeIconDescription", "condensedActions", "currentStep", "decorator", "id", "includeOverlay", "labelText", "navigationBackIconDescription", "onNavigationBack", "onRequestClose", "onUnmount", "open", "placement", "preventCloseOnClickOutside", "selectorPageContent", "selectorPrimaryFocus", "size", "slideIn", "slug", "subtitle", "title", "launcherButtonRef"],
-  _excluded2 = ["label", "kind", "hasIconOnly", "icon", "renderIcon", "tooltipPosition", "tooltipAlignment", "leading", "disabled", "className", "onClick"];
-var blockClass = "".concat(settings.pkg.prefix, "--side-panel");
-var componentName = 'SidePanel';
+var _ArrowLeft;
+const blockClass = `${settings.pkg.prefix}--side-panel`;
+const componentName = 'SidePanel';
 // Default values for props
-var defaults = {
+const defaults = {
   animateTitle: true,
   closeIconDescription: 'Close',
   currentStep: 0,
@@ -42,133 +41,115 @@ var defaults = {
 /**
  * Side panels keep users in-context of a page while performing tasks like navigating, editing, viewing details, or configuring something new.
  */
-exports.SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var _ref3;
-  var actionToolbarButtons = _ref.actionToolbarButtons,
-    actions = _ref.actions,
-    aiLabel = _ref.aiLabel,
-    _ref$animateTitle = _ref.animateTitle,
-    animateTitle = _ref$animateTitle === void 0 ? defaults.animateTitle : _ref$animateTitle,
-    children = _ref.children,
-    className = _ref.className,
-    _ref$closeIconDescrip = _ref.closeIconDescription,
-    closeIconDescription = _ref$closeIconDescrip === void 0 ? defaults.closeIconDescription : _ref$closeIconDescrip,
-    condensedActions = _ref.condensedActions,
-    _ref$currentStep = _ref.currentStep,
-    currentStep = _ref$currentStep === void 0 ? defaults.currentStep : _ref$currentStep,
-    decorator = _ref.decorator,
-    _ref$id = _ref.id,
-    id = _ref$id === void 0 ? blockClass : _ref$id,
-    includeOverlay = _ref.includeOverlay,
-    labelText = _ref.labelText,
-    _ref$navigationBackIc = _ref.navigationBackIconDescription,
-    navigationBackIconDescription = _ref$navigationBackIc === void 0 ? defaults.navigationBackIconDescription : _ref$navigationBackIc,
-    onNavigationBack = _ref.onNavigationBack,
-    onRequestClose = _ref.onRequestClose,
-    onUnmount = _ref.onUnmount,
-    open = _ref.open,
-    _ref$placement = _ref.placement,
-    placement = _ref$placement === void 0 ? defaults.placement : _ref$placement,
-    preventCloseOnClickOutside = _ref.preventCloseOnClickOutside,
-    selectorPageContent = _ref.selectorPageContent,
-    selectorPrimaryFocus = _ref.selectorPrimaryFocus,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? defaults.size : _ref$size,
-    slideIn = _ref.slideIn,
-    slug = _ref.slug,
-    subtitle = _ref.subtitle,
-    title = _ref.title,
-    launcherButtonRef = _ref.launcherButtonRef,
-    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  var _useState = React.useState(false),
-    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-    animationComplete = _useState2[0],
-    setAnimationComplete = _useState2[1];
-  var localRef = React.useRef(null);
-  var sidePanelRef = ref || localRef;
-  var overlayRef = React.useRef(null);
-  var innerContentRef = React.useRef(null);
-  var closeRef = React.useRef(null);
-  var animatedScrollRef = React.useRef(null);
-  var headerRef = React.useRef(null);
-  var titleRef = React.useRef(null);
-  var labelTextRef = React.useRef(null);
-  var subtitleRef = React.useRef(null);
-  var previousState = usePreviousValue.usePreviousValue({
-    size: size,
-    open: open,
-    currentStep: currentStep
+const SidePanelBase = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    // The component props, in alphabetical order (for consistency).
+
+    actionToolbarButtons,
+    actions,
+    aiLabel,
+    animateTitle = defaults.animateTitle,
+    children,
+    className,
+    closeIconDescription = defaults.closeIconDescription,
+    condensedActions,
+    currentStep = defaults.currentStep,
+    decorator,
+    id = blockClass,
+    includeOverlay,
+    labelText,
+    navigationBackIconDescription = defaults.navigationBackIconDescription,
+    onNavigationBack,
+    onRequestClose,
+    onUnmount,
+    open,
+    placement = defaults.placement,
+    preventCloseOnClickOutside,
+    selectorPageContent,
+    selectorPrimaryFocus,
+    size = defaults.size,
+    slideIn,
+    slug,
+    subtitle,
+    title,
+    launcherButtonRef,
+    // Collect any other property values passed in.
+    ...rest
+  } = _ref;
+  const [animationComplete, setAnimationComplete] = React.useState(false);
+  const localRef = React.useRef(null);
+  const sidePanelRef = ref || localRef;
+  const overlayRef = React.useRef(null);
+  const innerContentRef = React.useRef(null);
+  const closeRef = React.useRef(null);
+  const animatedScrollRef = React.useRef(null);
+  const headerRef = React.useRef(null);
+  const titleRef = React.useRef(null);
+  const labelTextRef = React.useRef(null);
+  const subtitleRef = React.useRef(null);
+  const previousState = usePreviousValue.usePreviousValue({
+    size,
+    open,
+    currentStep
   });
-  var _useState3 = React.useState(-1),
-    _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
-    scrollAnimationDistance = _useState4[0],
-    setScrollAnimationDistance = _useState4[1];
-  var _useState5 = React.useState(true),
-    _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
-    doAnimateTitle = _useState6[0],
-    setDoAnimateTitle = _useState6[1];
-  var _useFocus = useFocus.useFocus(sidePanelRef),
-    firstElement = _useFocus.firstElement,
-    keyDownListener = _useFocus.keyDownListener;
-  var panelRefValue = sidePanelRef.current;
-  var previousOpen = usePreviousValue.usePreviousValue(open);
-  var shouldReduceMotion = usePrefersReducedMotion.usePrefersReducedMotion();
-  var exitAnimationName = shouldReduceMotion ? 'side-panel-exit-reduced' : placement === 'right' ? 'side-panel-exit-right' : 'side-panel-exit-left';
-  var _usePresence = usePresence.usePresence(open, sidePanelRef, exitAnimationName),
-    shouldRender = _usePresence.shouldRender;
+  const [scrollAnimationDistance, setScrollAnimationDistance] = React.useState(-1);
+  const [doAnimateTitle, setDoAnimateTitle] = React.useState(true);
+  const {
+    firstElement,
+    keyDownListener
+  } = useFocus.useFocus(sidePanelRef);
+  const panelRefValue = sidePanelRef.current;
+  const previousOpen = usePreviousValue.usePreviousValue(open);
+  const shouldReduceMotion = usePrefersReducedMotion.usePrefersReducedMotion();
+  const exitAnimationName = shouldReduceMotion ? 'side-panel-exit-reduced' : placement === 'right' ? 'side-panel-exit-right' : 'side-panel-exit-left';
+  const {
+    shouldRender
+  } = usePresence.usePresence(open, sidePanelRef, exitAnimationName);
 
   // Title animation on scroll related state
-  var _useState7 = React.useState(0),
-    _useState8 = _rollupPluginBabelHelpers.slicedToArray(_useState7, 2),
-    labelTextHeight = _useState8[0],
-    setLabelTextHeight = _useState8[1];
-  var handleEscapeKey = function handleEscapeKey(event) {
+  const [labelTextHeight, setLabelTextHeight] = React.useState(0);
+  const handleEscapeKey = event => {
     if (event.key === 'Escape' && open) {
-      onRequestClose === null || onRequestClose === void 0 || onRequestClose();
+      onRequestClose?.();
     }
   };
-  React.useEffect(function () {
-    if (open && !(titleRef !== null && titleRef !== void 0 && titleRef.current)) {
+  React.useEffect(() => {
+    if (open && !titleRef?.current) {
       setDoAnimateTitle(false);
     } else {
       setDoAnimateTitle(animateTitle);
     }
   }, [animateTitle, open]);
-  var titleItemsStyles = React.useCallback(function (progress) {
-    if (subtitleRef !== null && subtitleRef !== void 0 && subtitleRef.current) {
-      var _subtitleEl$style;
-      var subtitleEl = subtitleRef === null || subtitleRef === void 0 ? void 0 : subtitleRef.current;
-      var height = subtitleEl === null || subtitleEl === void 0 ? void 0 : subtitleEl.clientHeight;
-      var calculatedMargin = height * progress;
-      subtitleEl === null || subtitleEl === void 0 || (_subtitleEl$style = subtitleEl.style) === null || _subtitleEl$style === void 0 || _subtitleEl$style.setProperty('margin-top', "".concat(-calculatedMargin, "px"));
+  const titleItemsStyles = React.useCallback(progress => {
+    if (subtitleRef?.current) {
+      const subtitleEl = subtitleRef?.current;
+      const height = subtitleEl?.clientHeight;
+      const calculatedMargin = height * progress;
+      subtitleEl?.style?.setProperty('margin-top', `${-calculatedMargin}px`);
     }
-    if (labelTextRef !== null && labelTextRef !== void 0 && labelTextRef.current) {
-      var _labelTextRef$current;
-      var _calculatedMargin = labelTextHeight * progress;
-      labelTextRef === null || labelTextRef === void 0 || (_labelTextRef$current = labelTextRef.current) === null || _labelTextRef$current === void 0 || (_labelTextRef$current = _labelTextRef$current.style) === null || _labelTextRef$current === void 0 || _labelTextRef$current.setProperty('margin-top', "".concat(-_calculatedMargin, "px"));
+    if (labelTextRef?.current) {
+      const calculatedMargin = labelTextHeight * progress;
+      labelTextRef?.current?.style?.setProperty('margin-top', `${-calculatedMargin}px`);
     }
   }, [labelTextHeight]);
-  React.useEffect(function () {
-    if (open && animateTitle && labelTextRef !== null && labelTextRef !== void 0 && labelTextRef.current) {
-      var _labelTextRef$current2;
-      setLabelTextHeight(Number((labelTextRef === null || labelTextRef === void 0 || (_labelTextRef$current2 = labelTextRef.current) === null || _labelTextRef$current2 === void 0 ? void 0 : _labelTextRef$current2.clientHeight) || null));
+  React.useEffect(() => {
+    if (open && animateTitle && labelTextRef?.current) {
+      setLabelTextHeight(Number(labelTextRef?.current?.clientHeight || null));
     }
   }, [animateTitle, labelTextRef, open]);
-  var handleScroll = React.useCallback(function () {
-    if (doAnimateTitle && innerContentRef !== null && innerContentRef !== void 0 && innerContentRef.current) {
-      var _innerContentRef$curr;
-      var scrollTop = innerContentRef === null || innerContentRef === void 0 || (_innerContentRef$curr = innerContentRef.current) === null || _innerContentRef$curr === void 0 ? void 0 : _innerContentRef$curr.scrollTop;
-      var animationProgress = Math.min(Number(scrollTop), scrollAnimationDistance) / scrollAnimationDistance;
-      panelRefValue === null || panelRefValue === void 0 || panelRefValue.style.setProperty("--".concat(blockClass, "--scroll-animation-progress"), animationProgress.toString());
+  const handleScroll = React.useCallback(() => {
+    if (doAnimateTitle && innerContentRef?.current) {
+      const scrollTop = innerContentRef?.current?.scrollTop;
+      const animationProgress = Math.min(Number(scrollTop), scrollAnimationDistance) / scrollAnimationDistance;
+      panelRefValue?.style.setProperty(`--${blockClass}--scroll-animation-progress`, animationProgress.toString());
       titleItemsStyles(animationProgress);
     }
-  }, [doAnimateTitle, panelRefValue === null || panelRefValue === void 0 ? void 0 : panelRefValue.style, scrollAnimationDistance, titleItemsStyles]);
+  }, [doAnimateTitle, panelRefValue?.style, scrollAnimationDistance, titleItemsStyles]);
 
   // scroll panel to top going between steps
-  React.useEffect(function () {
+  React.useEffect(() => {
     if (sidePanelRef && panelRefValue) {
-      var _animatedScrollRef$cu;
-      var scrollableSection = (_animatedScrollRef$cu = animatedScrollRef.current) !== null && _animatedScrollRef$cu !== void 0 ? _animatedScrollRef$cu : innerContentRef.current;
+      const scrollableSection = animatedScrollRef.current ?? innerContentRef.current;
       if (previousState && previousState['currentStep'] !== currentStep && scrollableSection) {
         scrollableSection.scrollTop = 0;
       }
@@ -184,41 +165,38 @@ exports.SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 
   // Add console warning if labelText is provided without a title.
   // This combination is not allowed.
-  React.useEffect(function () {
+  React.useEffect(() => {
     if (!title && labelText) {
-      console.warn("".concat(componentName, ": The prop `labelText` was provided without a `title`. It is required to have a `title` when using the `labelText` prop."));
+      console.warn(`${componentName}: The prop \`labelText\` was provided without a \`title\`. It is required to have a \`title\` when using the \`labelText\` prop.`);
     }
   }, [labelText, title]);
-  React.useEffect(function () {
+  React.useEffect(() => {
     if (previousOpen && !open && launcherButtonRef) {
-      setTimeout(function () {
-        var _launcherButtonRef$cu;
-        launcherButtonRef === null || launcherButtonRef === void 0 || (_launcherButtonRef$cu = launcherButtonRef.current) === null || _launcherButtonRef$cu === void 0 || _launcherButtonRef$cu.focus();
+      setTimeout(() => {
+        launcherButtonRef?.current?.focus();
       }, 0);
     }
   }, [launcherButtonRef, open, previousOpen]);
-  var checkSetDoAnimateTitle = function checkSetDoAnimateTitle() {
-    var canDoAnimateTitle = false;
-    if (panelRefValue && open && animateTitle && animationComplete && titleRef !== null && titleRef !== void 0 && titleRef.current && title && title.length && !shouldReduceMotion) {
-      var _labelTextRef$current3, _labelTextRef$current4, _subtitleRef$current$, _subtitleRef$current;
-      var titleEl = titleRef.current;
-      var labelHeight = (_labelTextRef$current3 = labelTextRef === null || labelTextRef === void 0 || (_labelTextRef$current4 = labelTextRef.current) === null || _labelTextRef$current4 === void 0 ? void 0 : _labelTextRef$current4.offsetHeight) !== null && _labelTextRef$current3 !== void 0 ? _labelTextRef$current3 : 0;
-      var subtitleHeight = (_subtitleRef$current$ = subtitleRef === null || subtitleRef === void 0 || (_subtitleRef$current = subtitleRef.current) === null || _subtitleRef$current === void 0 ? void 0 : _subtitleRef$current.offsetHeight) !== null && _subtitleRef$current$ !== void 0 ? _subtitleRef$current$ : 0;
+  const checkSetDoAnimateTitle = () => {
+    let canDoAnimateTitle = false;
+    if (panelRefValue && open && animateTitle && animationComplete && titleRef?.current && title && title.length && !shouldReduceMotion) {
+      const titleEl = titleRef.current;
+      const labelHeight = labelTextRef?.current?.offsetHeight ?? 0;
+      const subtitleHeight = subtitleRef?.current?.offsetHeight ?? 0;
 
       // Adjusts space at bottom of titles by changing where scrolling finishes
       // Styles use border to save use of get computed style
-      var titleVerticalBorder = actionToolbarButtons ? titleEl.offsetHeight - titleEl.clientHeight : 0;
-      var _scrollAnimationDistance = labelHeight + subtitleHeight + titleVerticalBorder;
-      setScrollAnimationDistance(_scrollAnimationDistance);
+      const titleVerticalBorder = actionToolbarButtons ? titleEl.offsetHeight - titleEl.clientHeight : 0;
+      const scrollAnimationDistance = labelHeight + subtitleHeight + titleVerticalBorder;
+      setScrollAnimationDistance(scrollAnimationDistance);
 
       // used to calculate the header moves
-      panelRefValue === null || panelRefValue === void 0 || panelRefValue.style.setProperty("--".concat(blockClass, "--scroll-animation-distance"), _scrollAnimationDistance.toString());
-      var scrollEl = innerContentRef.current;
+      panelRefValue?.style.setProperty(`--${blockClass}--scroll-animation-distance`, scrollAnimationDistance.toString());
+      const scrollEl = innerContentRef.current;
       if (scrollEl) {
-        var _window;
-        var innerComputed = (_window = window) === null || _window === void 0 ? void 0 : _window.getComputedStyle(innerContentRef.current);
-        var innerPaddingHeight = innerComputed ? parseFloat(innerComputed === null || innerComputed === void 0 ? void 0 : innerComputed.paddingTop) + parseFloat(innerComputed === null || innerComputed === void 0 ? void 0 : innerComputed.paddingBottom) : 0;
-        canDoAnimateTitle = (!!labelText || !!actionToolbarButtons || !!subtitle) && scrollEl.scrollHeight - scrollEl.clientHeight >= _scrollAnimationDistance + innerPaddingHeight;
+        const innerComputed = window?.getComputedStyle(innerContentRef.current);
+        const innerPaddingHeight = innerComputed ? parseFloat(innerComputed?.paddingTop) + parseFloat(innerComputed?.paddingBottom) : 0;
+        canDoAnimateTitle = (!!labelText || !!actionToolbarButtons || !!subtitle) && scrollEl.scrollHeight - scrollEl.clientHeight >= scrollAnimationDistance + innerPaddingHeight;
       }
     }
     if (doAnimateTitle !== canDoAnimateTitle) {
@@ -226,15 +204,15 @@ exports.SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       setDoAnimateTitle(canDoAnimateTitle);
     }
   };
-  React.useEffect(function () {
+  React.useEffect(() => {
     if (!doAnimateTitle && sidePanelRef.current) {
-      panelRefValue === null || panelRefValue === void 0 || panelRefValue.style.setProperty("--".concat(blockClass, "--scroll-animation-progress"), '0');
+      panelRefValue?.style.setProperty(`--${blockClass}--scroll-animation-progress`, '0');
     }
-  }, [doAnimateTitle, handleScroll, sidePanelRef, innerContentRef, open, panelRefValue === null || panelRefValue === void 0 ? void 0 : panelRefValue.style]);
+  }, [doAnimateTitle, handleScroll, sidePanelRef, innerContentRef, open, panelRefValue?.style]);
 
   // Calculate scroll distances
-  React.useEffect(function () {
-    if (panelRefValue && open && animateTitle && animationComplete && titleRef !== null && titleRef !== void 0 && titleRef.current && title && title.length && !shouldReduceMotion) {
+  React.useEffect(() => {
+    if (panelRefValue && open && animateTitle && animationComplete && titleRef?.current && title && title.length && !shouldReduceMotion) {
       checkSetDoAnimateTitle();
     }
 
@@ -242,13 +220,13 @@ exports.SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, [open, doAnimateTitle /* use do instead of animateTitle directly */, animationComplete, handleScroll, title, size, shouldReduceMotion, id]);
 
   // click outside functionality if `includeOverlay` prop is set
-  React.useEffect(function () {
-    var handleOutsideClick = function handleOutsideClick(event) {
+  React.useEffect(() => {
+    const handleOutsideClick = event => {
       if (panelRefValue && overlayRef.current && overlayRef.current.contains(event.target) && onRequestClose) {
         onRequestClose();
       }
     };
-    var bodyElement = document.body;
+    const bodyElement = document.body;
     if (includeOverlay && open) {
       bodyElement.style.overflow = 'hidden';
     } else if (includeOverlay && !open) {
@@ -257,38 +235,38 @@ exports.SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     if (includeOverlay && !preventCloseOnClickOutside) {
       document.addEventListener('click', handleOutsideClick);
     }
-    return function () {
-      var bodyElement = document.body;
+    return () => {
+      const bodyElement = document.body;
       bodyElement.style.overflow = '';
       document.removeEventListener('click', handleOutsideClick);
     };
   }, [includeOverlay, onRequestClose, open, preventCloseOnClickOutside, onUnmount, sidePanelRef, panelRefValue]);
 
   // initializes the side panel to close
-  var onAnimationEnd = function onAnimationEnd() {
+  const onAnimationEnd = () => {
     if (!open) {
-      onUnmount === null || onUnmount === void 0 || onUnmount();
+      onUnmount?.();
     }
     setAnimationComplete(!animationComplete);
   };
 
   // Set the internal state `animationComplete` to true if
   // prefers reduced motion is true
-  React.useEffect(function () {
+  React.useEffect(() => {
     if (shouldReduceMotion) {
       setAnimationComplete(true);
     }
   }, [shouldReduceMotion]);
 
   // initializes the side panel to open
-  var onAnimationStart = function onAnimationStart() {
+  const onAnimationStart = () => {
     setAnimationComplete(false);
   };
 
   // used to reset margins of the slide in panel when closed/closing
-  React.useEffect(function () {
+  React.useEffect(() => {
     if (!open && slideIn) {
-      var pageContentElement = selectorPageContent ? document.querySelector(selectorPageContent) : null;
+      const pageContentElement = selectorPageContent ? document.querySelector(selectorPageContent) : null;
       if (placement && placement === 'right' && pageContentElement) {
         pageContentElement.style.marginInlineEnd = '0';
       } else if (pageContentElement) {
@@ -296,16 +274,16 @@ exports.SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       }
     }
   }, [open, placement, selectorPageContent, slideIn]);
-  React.useEffect(function () {
+  React.useEffect(() => {
     if (!open && previousState && previousState['open'] && shouldReduceMotion) {
-      onUnmount === null || onUnmount === void 0 || onUnmount();
+      onUnmount?.();
     }
   }, [open, onUnmount, shouldReduceMotion, previousState]);
 
   // used to set margins of content for slide in panel version
-  React.useEffect(function () {
+  React.useEffect(() => {
     if (open && slideIn) {
-      var pageContentElement = selectorPageContent ? document.querySelector(selectorPageContent) : null;
+      const pageContentElement = selectorPageContent ? document.querySelector(selectorPageContent) : null;
       if (pageContentElement) {
         pageContentElement.style.inlineSize = 'auto';
       } else {
@@ -313,128 +291,136 @@ exports.SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       }
       if (placement && placement === 'right' && pageContentElement) {
         pageContentElement.style.marginInlineEnd = '0';
-        pageContentElement.style.transition = !shouldReduceMotion ? "margin-inline-end ".concat(carbonMotion.moderate02) : '';
+        pageContentElement.style.transition = !shouldReduceMotion ? `margin-inline-end ${carbonMotion.moderate02}` : '';
         pageContentElement.style.marginInlineEnd = constants.SIDE_PANEL_SIZES[size];
       } else if (pageContentElement) {
         pageContentElement.style.marginInlineStart = '0';
-        pageContentElement.style.transition = !shouldReduceMotion ? "margin-inline-start ".concat(carbonMotion.moderate02) : '';
+        pageContentElement.style.transition = !shouldReduceMotion ? `margin-inline-start ${carbonMotion.moderate02}` : '';
         pageContentElement.style.marginInlineStart = constants.SIDE_PANEL_SIZES[size];
       }
     }
   }, [slideIn, selectorPageContent, placement, size, shouldReduceMotion, open]);
-  React.useEffect(function () {
+  React.useEffect(() => {
     if (open && animationComplete) {
-      if (selectorPrimaryFocus && useFocus.getSpecificElement(sidePanelRef === null || sidePanelRef === void 0 ? void 0 : sidePanelRef.current, selectorPrimaryFocus)) {
-        var _window2;
-        var primeFocusEl = useFocus.getSpecificElement(sidePanelRef === null || sidePanelRef === void 0 ? void 0 : sidePanelRef.current, selectorPrimaryFocus);
-        if (primeFocusEl && ((_window2 = window) === null || _window2 === void 0 || (_window2 = _window2.getComputedStyle(primeFocusEl)) === null || _window2 === void 0 ? void 0 : _window2.display) !== 'none') {
-          setTimeout(function () {
-            return primeFocusEl === null || primeFocusEl === void 0 ? void 0 : primeFocusEl.focus();
-          }, 0);
+      if (selectorPrimaryFocus && useFocus.getSpecificElement(sidePanelRef?.current, selectorPrimaryFocus)) {
+        const primeFocusEl = useFocus.getSpecificElement(sidePanelRef?.current, selectorPrimaryFocus);
+        if (primeFocusEl && window?.getComputedStyle(primeFocusEl)?.display !== 'none') {
+          setTimeout(() => primeFocusEl?.focus(), 0);
         }
       } else if (!slideIn) {
-        setTimeout(function () {
-          return firstElement === null || firstElement === void 0 ? void 0 : firstElement.focus();
-        }, 0);
+        setTimeout(() => firstElement?.focus(), 0);
       }
     }
   }, [animationComplete, firstElement, open, selectorPrimaryFocus, sidePanelRef, slideIn]);
-  var primaryActionContainerClassNames = cx(["".concat(blockClass, "__actions-container"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__actions-container--condensed"), condensedActions)]);
-  var mainPanelClassNames = cx([blockClass, className, "".concat(blockClass), "".concat(blockClass, "--").concat(size), (_ref3 = {}, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_ref3, "".concat(blockClass, "--right-placement"), placement === 'right'), "".concat(blockClass, "--left-placement"), placement === 'left'), "".concat(blockClass, "--slide-in"), slideIn), "".concat(blockClass, "--has-decorator"), decorator), "".concat(blockClass, "--has-slug"), slug), "".concat(blockClass, "--has-ai-label"), aiLabel), "".concat(blockClass, "--condensed-actions"), condensedActions), "".concat(blockClass, "--has-overlay"), includeOverlay), "".concat(blockClass, "--open"), open), "".concat(blockClass, "--closing"), !open), _rollupPluginBabelHelpers.defineProperty(_ref3, "".concat(blockClass, "--reduced-motion"), shouldReduceMotion))]);
-  var renderTitle = function renderTitle() {
-    return /*#__PURE__*/React.createElement("div", {
-      className: cx("".concat(blockClass, "__title"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__title--no-label"), !labelTextRef.current)),
-      ref: titleRef
-    }, /*#__PURE__*/React.createElement("h2", {
-      className: "".concat(blockClass, "__title-text"),
-      title: title,
-      "aria-hidden": false
-    }, title), doAnimateTitle && !shouldReduceMotion && /*#__PURE__*/React.createElement("h2", {
-      className: "".concat(blockClass, "__collapsed-title-text"),
-      title: title,
-      "aria-hidden": true
-    }, title));
-  };
-  var renderHeader = function renderHeader() {
-    var _slug$type, _aiLabel$type, _decorator$type;
-    var closeSize = actions && actions.length && /l/.test(size) ? 'md' : 'sm';
-    var normalizedDecorator;
+  const primaryActionContainerClassNames = cx([`${blockClass}__actions-container`, {
+    [`${blockClass}__actions-container--condensed`]: condensedActions
+  }]);
+  const mainPanelClassNames = cx([blockClass, className, `${blockClass}`, `${blockClass}--${size}`, {
+    [`${blockClass}--right-placement`]: placement === 'right',
+    [`${blockClass}--left-placement`]: placement === 'left',
+    [`${blockClass}--slide-in`]: slideIn,
+    [`${blockClass}--has-decorator`]: decorator,
+    [`${blockClass}--has-slug`]: slug,
+    [`${blockClass}--has-ai-label`]: aiLabel,
+    [`${blockClass}--condensed-actions`]: condensedActions,
+    [`${blockClass}--has-overlay`]: includeOverlay,
+    [`${blockClass}--open`]: open,
+    [`${blockClass}--closing`]: !open,
+    [`${blockClass}--reduced-motion`]: shouldReduceMotion
+  }]);
+  const renderTitle = () => /*#__PURE__*/React.createElement("div", {
+    className: cx(`${blockClass}__title`, {
+      [`${blockClass}__title--no-label`]: !labelTextRef.current
+    }),
+    ref: titleRef
+  }, /*#__PURE__*/React.createElement(react.Heading, {
+    className: `${blockClass}__title-text`,
+    title: title,
+    "aria-hidden": false
+  }, title), doAnimateTitle && !shouldReduceMotion && /*#__PURE__*/React.createElement(react.Heading, {
+    className: `${blockClass}__collapsed-title-text`,
+    title: title,
+    "aria-hidden": true
+  }, title));
+  const renderHeader = () => {
+    const closeSize = actions && actions.length && /l/.test(size) ? 'md' : 'sm';
+    let normalizedDecorator;
     /**
      * slug is deprecated
      * can remove this condition in future release
      */
-    if (slug && ((_slug$type = slug['type']) === null || _slug$type === void 0 ? void 0 : _slug$type.displayName) === 'AILabel') {
+    if (slug && slug['type']?.displayName === 'AILabel') {
       normalizedDecorator = /*#__PURE__*/React.cloneElement(slug, {
         // slug size is sm unless actions and size > md
         size: closeSize
       });
     }
-    if (aiLabel && ((_aiLabel$type = aiLabel['type']) === null || _aiLabel$type === void 0 ? void 0 : _aiLabel$type.displayName) === 'AILabel') {
+    if (aiLabel && aiLabel['type']?.displayName === 'AILabel') {
       normalizedDecorator = /*#__PURE__*/React.cloneElement(aiLabel, {
         // aiLabel size is sm unless actions and size > md
         size: closeSize
       });
     }
-    if ((decorator === null || decorator === void 0 || (_decorator$type = decorator['type']) === null || _decorator$type === void 0 ? void 0 : _decorator$type.displayName) === 'AILabel') {
+    if (decorator?.['type']?.displayName === 'AILabel') {
       normalizedDecorator = /*#__PURE__*/React.cloneElement(decorator, {
         // decorator size is sm unless actions and size > md
         size: closeSize
       });
     }
     return /*#__PURE__*/React.createElement("div", {
-      className: cx("".concat(blockClass, "__header"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__header--on-detail-step"), currentStep > 0), "".concat(blockClass, "__header--no-title-animation"), !animateTitle), "".concat(blockClass, "__header--reduced-motion"), shouldReduceMotion), "".concat(blockClass, "__header--has-title"), title)),
+      className: cx(`${blockClass}__header`, {
+        [`${blockClass}__header--on-detail-step`]: currentStep > 0,
+        [`${blockClass}__header--no-title-animation`]: !animateTitle,
+        [`${blockClass}__header--reduced-motion`]: shouldReduceMotion,
+        [`${blockClass}__header--has-title`]: title
+      }),
       ref: headerRef
-    }, currentStep > 0 && /*#__PURE__*/React.createElement(react.Button, {
+    }, currentStep > 0 && /*#__PURE__*/React.createElement(react.IconButton, {
       kind: "ghost",
       size: closeSize,
-      disabled: false,
-      renderIcon: function renderIcon(props) {
-        return /*#__PURE__*/React.createElement(icons.ArrowLeft, _rollupPluginBabelHelpers.extends({
-          size: 20
-        }, props));
-      },
-      iconDescription: navigationBackIconDescription,
-      className: "".concat(blockClass, "__navigation-back-button"),
-      onClick: onNavigationBack,
-      "aria-label": navigationBackIconDescription
-    }), title && title.length && labelText && labelText.length && /*#__PURE__*/React.createElement("p", {
-      className: "".concat(blockClass, "__label-text"),
+      align: "bottom",
+      label: navigationBackIconDescription,
+      className: `${blockClass}__navigation-back-button`,
+      onClick: onNavigationBack
+    }, _ArrowLeft || (_ArrowLeft = /*#__PURE__*/React.createElement(icons.ArrowLeft, null))), title && title.length && labelText && labelText.length && /*#__PURE__*/React.createElement("p", {
+      className: `${blockClass}__label-text`,
       ref: labelTextRef
     }, labelText), title && title.length && renderTitle(), /*#__PURE__*/React.createElement("div", {
-      className: "".concat(blockClass, "__decorator-and-close")
+      className: `${blockClass}__decorator-and-close`
     }, normalizedDecorator, /*#__PURE__*/React.createElement(react.IconButton, {
-      className: "".concat(blockClass, "__close-button"),
+      className: `${blockClass}__close-button`,
       label: closeIconDescription,
       onClick: onRequestClose,
       onKeyDown: slideIn ? undefined : handleEscapeKey,
-      title: closeIconDescription,
-      "aria-label": closeIconDescription,
       ref: closeRef,
       align: "left"
     }, /*#__PURE__*/React.createElement(icons.Close, {
       size: 20,
       "aria-hidden": "true",
       tabIndex: "-1",
-      className: "".concat(blockClass, "--btn__icon")
+      className: `${blockClass}--btn__icon`
     }))), subtitle && /*#__PURE__*/React.createElement("p", {
-      className: cx("".concat(blockClass, "__subtitle-text"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__subtitle-text-no-animation-no-action-toolbar"), !doAnimateTitle && (!actionToolbarButtons || !actionToolbarButtons.length))),
+      className: cx(`${blockClass}__subtitle-text`, {
+        [`${blockClass}__subtitle-text-no-animation-no-action-toolbar`]: !doAnimateTitle && (!actionToolbarButtons || !actionToolbarButtons.length)
+      }),
       ref: subtitleRef
     }, subtitle), actionToolbarButtons && actionToolbarButtons.length && /*#__PURE__*/React.createElement("div", {
-      className: "".concat(blockClass, "__action-toolbar")
-    }, actionToolbarButtons.map(function (_ref4) {
-      var label = _ref4.label,
-        kind = _ref4.kind,
-        _ref4$hasIconOnly = _ref4.hasIconOnly,
-        hasIconOnly = _ref4$hasIconOnly === void 0 ? false : _ref4$hasIconOnly,
-        icon = _ref4.icon,
-        renderIcon = _ref4.renderIcon,
-        tooltipPosition = _ref4.tooltipPosition,
-        tooltipAlignment = _ref4.tooltipAlignment,
-        leading = _ref4.leading,
-        disabled = _ref4.disabled,
-        className = _ref4.className,
-        onClick = _ref4.onClick,
-        rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref4, _excluded2);
+      className: `${blockClass}__action-toolbar`
+    }, actionToolbarButtons.map(_ref2 => {
+      let {
+        label,
+        kind,
+        hasIconOnly = false,
+        icon,
+        renderIcon,
+        tooltipPosition,
+        tooltipAlignment,
+        leading,
+        disabled,
+        className,
+        onClick,
+        ...rest
+      } = _ref2;
       return /*#__PURE__*/React.createElement(react.Button, _rollupPluginBabelHelpers.extends({}, rest, {
         key: label,
         kind: kind || 'ghost',
@@ -447,46 +433,50 @@ exports.SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       }, {
         hasIconOnly: hasIconOnly,
         disabled: disabled,
-        className: cx(["".concat(blockClass, "__action-toolbar-button"), className, _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__action-toolbar-leading-button"), leading)]),
+        className: cx([`${blockClass}__action-toolbar-button`, className, {
+          [`${blockClass}__action-toolbar-leading-button`]: leading
+        }]),
         onClick: onClick
       }), leading && label);
     })));
   };
-  var renderMain = function renderMain() {
+  const renderMain = () => {
     return /*#__PURE__*/React.createElement("div", {
       ref: innerContentRef,
       onScroll: handleScroll,
-      className: cx("".concat(blockClass, "__inner-content"), "".concat(blockClass, "--scrolls"), "".concat(!doAnimateTitle && !animateTitle ? "".concat(blockClass, "__inner-content--no-animated-title") : ''))
+      className: cx(`${blockClass}__inner-content`, `${blockClass}--scrolls`, `${!doAnimateTitle && !animateTitle ? `${blockClass}__inner-content--no-animated-title` : ''}`)
     }, children);
   };
-  var handleKeyDown = function handleKeyDown(event) {
+  const handleKeyDown = event => {
     if (!slideIn) {
       handleEscapeKey(event);
       keyDownListener(event);
     }
   };
-  return shouldRender ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, devtools.getDevtoolsProps(componentName), rest, {
+  return shouldRender ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(react.Section, _rollupPluginBabelHelpers.extends({}, devtools.getDevtoolsProps(componentName), rest, {
     id: id,
     className: mainPanelClassNames,
     ref: sidePanelRef,
-    role: "complementary",
+    as: "aside",
     "aria-label": title || rest['aria-label'],
     onAnimationEnd: onAnimationEnd,
     onAnimationStart: onAnimationStart,
     onKeyDown: handleKeyDown
   }), renderHeader(), renderMain(), /*#__PURE__*/React.createElement(ActionSet.ActionSet, {
-    actions: actions !== null && actions !== void 0 ? actions : [],
+    actions: actions ?? [],
     className: primaryActionContainerClassNames,
     size: size === 'xs' ? 'sm' : size
   })), includeOverlay && /*#__PURE__*/React.createElement("div", {
     ref: overlayRef,
-    className: cx("".concat(blockClass, "__overlay"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__overlay--closing"), !open))
+    className: cx(`${blockClass}__overlay`, {
+      [`${blockClass}__overlay--closing`]: !open
+    })
   })) : null;
 });
 
 // Return a placeholder if not released and not enabled by feature flag
-exports.SidePanel = settings.pkg.checkComponentEnabled(exports.SidePanel, componentName);
-var deprecatedProps = {
+const SidePanel = settings.pkg.checkComponentEnabled(SidePanelBase, componentName);
+const deprecatedProps = {
   /**
    * **deprecated**
    *  **Experimental:** Provide a `Slug` component to be rendered inside the `SidePanel` component
@@ -499,7 +489,7 @@ var deprecatedProps = {
    */
   aiLabel: index.default.node
 };
-exports.SidePanel.propTypes = _rollupPluginBabelHelpers.objectSpread2({
+SidePanel.propTypes = {
   /**
    * Sets the action toolbar buttons
    */
@@ -530,7 +520,9 @@ exports.SidePanel.propTypes = _rollupPluginBabelHelpers.objectSpread2({
    * See https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
    */
   actions: propsHelper.allPropTypes([/**@ts-ignore*/
-  ActionSet.ActionSet.validateActions(), index.default.arrayOf(index.default.shape(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, react.Button.propTypes), {}, {
+  ActionSet.ActionSet.validateActions(), index.default.arrayOf(index.default.shape({
+    /**@ts-ignore */
+    ...react.Button.propTypes,
     kind: index.default.oneOf(['ghost', 'danger--ghost', 'secondary', 'danger', 'primary']),
     tooltipPosition: index.default.oneOf(['top', 'right', 'bottom', 'left']),
     tooltipAlignment: index.default.oneOf(['start', 'center', 'end']),
@@ -539,7 +531,7 @@ exports.SidePanel.propTypes = _rollupPluginBabelHelpers.objectSpread2({
     // we duplicate this Button prop to improve the DocGen here
     /**@ts-ignore */
     onClick: react.Button.propTypes.onClick
-  })))]),
+  }))]),
   /**
    * Determines if the title will animate on scroll
    */
@@ -616,8 +608,10 @@ exports.SidePanel.propTypes = _rollupPluginBabelHelpers.objectSpread2({
    * This prop is required when using the `slideIn` variant of the side panel.
    */
   /**@ts-ignore*/
-  selectorPageContent: index.default.string.isRequired.if(function (_ref6) {
-    var slideIn = _ref6.slideIn;
+  selectorPageContent: index.default.string.isRequired.if(_ref3 => {
+    let {
+      slideIn
+    } = _ref3;
     return slideIn;
   }),
   /**
@@ -644,9 +638,14 @@ exports.SidePanel.propTypes = _rollupPluginBabelHelpers.objectSpread2({
    * Sets the title text
    */
   /**@ts-ignore*/
-  title: index.default.string.isRequired.if(function (_ref7) {
-    var labelText = _ref7.labelText;
+  title: index.default.string.isRequired.if(_ref4 => {
+    let {
+      labelText
+    } = _ref4;
     return labelText;
-  })
-}, deprecatedProps);
-exports.SidePanel.displayName = componentName;
+  }),
+  ...deprecatedProps
+};
+SidePanel.displayName = componentName;
+
+exports.SidePanel = SidePanel;