@carbon/ibm-products 2.33.0 → 2.35.0

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

@@ -1,5 +1,147 @@
+/**
+ * Copyright IBM Corp. 2020, 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.
+ */
+/// <reference path="../../../src/custom-typings/index.d.ts" />
+import React, { ReactNode } from 'react';
+import { ButtonProps } from '@carbon/react';
+type SidePanelBaseProps = {
+    /**
+     * Sets the action toolbar buttons
+     */
+    actionToolbarButtons?: ButtonProps[];
+    /**
+     * The primary actions to be shown in the side panel. Each action is
+     * specified as an object that will render expressive Buttons. Any Button
+     * props can be passed in and any other fields in the object will be
+     * passed through to the button element as HTML attributes.
+     *
+     * See https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
+     */
+    actions?: ButtonProps[];
+    /**
+     * Determines if the title will animate on scroll
+     */
+    animateTitle?: boolean;
+    /**
+     * Sets the body content of the side panel
+     */
+    children: ReactNode;
+    /**
+     * Sets an optional className to be added to the side panel outermost element
+     */
+    className?: string;
+    /**
+     * Sets the close button icon description
+     */
+    closeIconDescription?: string;
+    /**
+     * Determines whether the side panel should render the condensed version (affects action buttons primarily)
+     */
+    condensedActions?: boolean;
+    /**
+     * Sets the current step of the side panel
+     */
+    currentStep?: number;
+    /**
+     * Unique identifier
+     */
+    id?: string;
+    /**
+     * Determines whether the side panel should render with an overlay
+     */
+    includeOverlay?: boolean;
+    /**
+     * Sets the label text which will display above the title text
+     */
+    labelText?: string;
+    /**
+     * Sets the icon description for the navigation back icon button
+     */
+    navigationBackIconDescription?: string;
+    /**
+     * Changes the current side panel page to the previous page
+     */
+    onNavigationBack?(): void;
+    /**
+     * Specify a handler for closing the side panel.
+     * This handler closes the modal, e.g. changing `open` prop.
+     */
+    onRequestClose?(): void;
+    /**
+     * Optional function called when the side panel exit animation is complete.
+     * This handler can be used for any state cleanup needed before the panel is removed from the DOM.
+     */
+    onUnmount?(): void;
+    /**
+     * Determines whether the side panel should render or not
+     */
+    open: boolean;
+    /**
+     * Determines if the side panel is on the right or left
+     */
+    placement?: 'left' | 'right';
+    /**
+     * Prevent closing on click outside of the panel
+     */
+    preventCloseOnClickOutside?: boolean;
+    /**
+     * This is the selector to the element that contains all of the page content that will shrink if the panel is a slide in.
+     * This prop is required when using the `slideIn` variant of the side panel.
+     */
+    selectorPageContent?: string;
+    /**
+     * Specify a CSS selector that matches the DOM element that should
+     * be focused when the side panel opens
+     */
+    selectorPrimaryFocus?: string;
+    /**
+     * Sets the size of the side panel
+     */
+    size: 'xs' | 'sm' | 'md' | 'lg' | '2xl';
+    /**
+     * Determines if this panel slides in
+     */
+    slideIn?: boolean;
+    /**
+     *  **Experimental:** Provide a `Slug` component to be rendered inside the `SidePanel` component
+     */
+    slug?: ReactNode;
+    /**
+     * Sets the subtitle text
+     */
+    subtitle?: ReactNode;
+    /**
+     * Sets the title text
+     */
+    title?: string;
+};
+type SidePanelSlideInProps = {
+    /**
+     * Determines if this panel slides in
+     */
+    slideIn?: false;
+    /**
+     * This is the selector to the element that contains all of the page content that will shrink if the panel is a slide in.
+     * This prop is required when using the `slideIn` variant of the side panel.
+     */
+    selectorPageContent?: string;
+} | {
+    /**
+     * Determines if this panel slides in
+     */
+    slideIn: true;
+    /**
+     * This is the selector to the element that contains all of the page content that will shrink if the panel is a slide in.
+     * This prop is required when using the `slideIn` variant of the side panel. Required for slideIn panels.
+     */
+    selectorPageContent: string;
+};
+type SidePanelProps = SidePanelBaseProps & SidePanelSlideInProps;
 /**
  * Side panels keep users in-context of a page while performing tasks like navigating, editing, viewing details, or configuring something new.
  */
-export let SidePanel: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+export declare let SidePanel: React.ForwardRefExoticComponent<SidePanelProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/lib/components/SidePanel/SidePanel.js

@@ -14,7 +14,6 @@ var React = require('react');
 var framerMotion = require('framer-motion');
 var index = require('../../node_modules/prop-types/index.js');
 var cx = require('classnames');
-var useResizeObserver = require('../../global/js/hooks/useResizeObserver.js');
 var carbonMotion = require('@carbon/motion');
 var devtools = require('../../global/js/utils/devtools.js');
 var propsHelper = require('../../global/js/utils/props-helper.js');
@@ -37,8 +36,8 @@ var _excluded = ["actionToolbarButtons", "actions", "animateTitle", "children",
   _excluded2 = ["label", "kind", "icon", "tooltipPosition", "tooltipAlignment", "leading", "disabled", "className", "onClick"];
 var blockClass = "".concat(settings.pkg.prefix, "--side-panel");
 var componentName = 'SidePanel';
-
-// NOTE: the component SCSS is not imported here: it is rolled up separately.
+// `any` is a work around until ActionSet is migrated to TS
+var MotionActionSet = framerMotion.motion(ActionSet.ActionSet);
 
 // Default values for props
 var defaults = {
@@ -49,7 +48,6 @@ var defaults = {
   placement: 'right',
   size: 'md'
 };
-var MotionActionSet = framerMotion.motion(ActionSet.ActionSet);
 
 /**
  * Side panels keep users in-context of a page while performing tasks like navigating, editing, viewing details, or configuring something new.
@@ -93,16 +91,16 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     animationComplete = _useState2[0],
     setAnimationComplete = _useState2[1];
-  var localRef = React.useRef();
+  var localRef = React.useRef(null);
   var sidePanelRef = ref || localRef;
-  var overlayRef = React.useRef();
-  var innerContentRef = React.useRef();
-  var closeRef = React.useRef();
-  var animatedScrollRef = React.useRef();
-  var headerRef = React.useRef();
-  var titleRef = React.useRef();
-  var labelTextRef = React.useRef();
-  var subtitleRef = React.useRef();
+  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
@@ -118,32 +116,70 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
   var _useFocus = useFocus.useFocus(sidePanelRef),
     firstElement = _useFocus.firstElement,
     keyDownListener = _useFocus.keyDownListener;
+  var panelRefValue = sidePanelRef.current;
   var shouldReduceMotion = framerMotion.useReducedMotion();
+
+  // Title animation on scroll related state
+  var _useState7 = React.useState(0),
+    _useState8 = _rollupPluginBabelHelpers.slicedToArray(_useState7, 2),
+    labelTextHeight = _useState8[0],
+    setLabelTextHeight = _useState8[1];
   React.useEffect(function () {
-    setDoAnimateTitle(animateTitle);
-  }, [animateTitle]);
+    if (open && !(titleRef !== null && titleRef !== void 0 && 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"));
+    }
+    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"));
+    }
+  }, [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));
+    }
+  }, [animateTitle, labelTextRef, open]);
   var handleScroll = React.useCallback(function () {
-    var scrollTop = animatedScrollRef.current.scrollTop;
-    sidePanelRef.current.style.setProperty("--".concat(blockClass, "--scroll-animation-progress"), Math.min(scrollTop, scrollAnimationDistance) / scrollAnimationDistance);
-  }, [scrollAnimationDistance, sidePanelRef]);
+    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());
+      titleItemsStyles(animationProgress);
+    }
+  }, [doAnimateTitle, panelRefValue === null || panelRefValue === void 0 ? void 0 : panelRefValue.style, scrollAnimationDistance, titleItemsStyles]);
   var reducedMotion = typeof window !== 'undefined' && (_window = window) !== null && _window !== void 0 && _window.matchMedia ? window.matchMedia('(prefers-reduced-motion: reduce)') : {
     matches: true
   };
 
   // scroll panel to top going between steps
   React.useEffect(function () {
-    if (sidePanelRef && sidePanelRef.current) {
+    if (sidePanelRef && panelRefValue) {
       var _animatedScrollRef$cu;
       var scrollableSection = (_animatedScrollRef$cu = animatedScrollRef.current) !== null && _animatedScrollRef$cu !== void 0 ? _animatedScrollRef$cu : innerContentRef.current;
-      scrollableSection.scrollTop = 0;
+      if (scrollableSection) {
+        scrollableSection.scrollTop = 0;
+      }
       // The size of the panel has changed while it is still opened
       // so we need to scroll it to the top and reset the header
       // height css custom property
-      if ((previousState === null || previousState === void 0 ? void 0 : previousState.size) !== size) {
+      if (previousState && previousState['size'] !== size && scrollableSection) {
         scrollableSection.scrollTop = 0;
       }
     }
-  }, [currentStep, sidePanelRef, size, previousState === null || previousState === void 0 ? void 0 : previousState.size, id]);
+  }, [currentStep, sidePanelRef, size, previousState, id, panelRefValue]);
 
   // Add console warning if labelText is provided without a title.
   // This combination is not allowed.
@@ -154,10 +190,10 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
   }, [labelText, title]);
   var checkSetDoAnimateTitle = function checkSetDoAnimateTitle() {
     var canDoAnimateTitle = false;
-    if (sidePanelRef !== null && sidePanelRef !== void 0 && sidePanelRef.current && open && animateTitle && animationComplete && titleRef !== null && titleRef !== void 0 && titleRef.current && title && title.length && !reducedMotion.matches) {
-      var _labelTextRef$current, _labelTextRef$current2, _subtitleRef$current$, _subtitleRef$current;
+    if (panelRefValue && open && animateTitle && animationComplete && titleRef !== null && titleRef !== void 0 && titleRef.current && title && title.length && !reducedMotion.matches) {
+      var _labelTextRef$current3, _labelTextRef$current4, _subtitleRef$current$, _subtitleRef$current;
       var titleEl = titleRef.current;
-      var labelHeight = (_labelTextRef$current = labelTextRef === null || labelTextRef === void 0 || (_labelTextRef$current2 = labelTextRef.current) === null || _labelTextRef$current2 === void 0 ? void 0 : _labelTextRef$current2.offsetHeight) !== null && _labelTextRef$current !== void 0 ? _labelTextRef$current : 0;
+      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;
 
       // Adjusts space at bottom of titles by changing where scrolling finishes
@@ -167,12 +203,8 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
       setScrollAnimationDistance(_scrollAnimationDistance);
 
       // used to calculate the header moves
-      sidePanelRef.current.style.setProperty("--".concat(blockClass, "--scroll-animation-distance"), _scrollAnimationDistance);
-      var scrollEl = animatedScrollRef.current;
-      if (!scrollEl && animateTitle && !doAnimateTitle) {
-        // may be switching back based on resize
-        scrollEl = innerContentRef.current;
-      }
+      panelRefValue === null || panelRefValue === void 0 || panelRefValue.style.setProperty("--".concat(blockClass, "--scroll-animation-distance"), _scrollAnimationDistance.toString());
+      var scrollEl = innerContentRef.current;
       if (scrollEl) {
         var _window2;
         var innerComputed = (_window2 = window) === null || _window2 === void 0 ? void 0 : _window2.getComputedStyle(innerContentRef.current);
@@ -186,34 +218,24 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
     }
   };
   React.useEffect(function () {
-    if (doAnimateTitle && animatedScrollRef.current) {
-      // only add scroll if the doAnimateTitle is already true
-      // should come back through if false and canDoAnimateTitle is true
-      animatedScrollRef.current.addEventListener('scroll', handleScroll);
-    }
     if (!doAnimateTitle && sidePanelRef.current) {
-      sidePanelRef.current.style.setProperty("--".concat(blockClass, "--scroll-animation-progress"), 0);
+      panelRefValue === null || panelRefValue === void 0 || panelRefValue.style.setProperty("--".concat(blockClass, "--scroll-animation-progress"), '0');
     }
-  }, [animatedScrollRef, doAnimateTitle, handleScroll, sidePanelRef]);
-
-  /* istanbul ignore next */
-  var handleResize = function handleResize() {
-    checkSetDoAnimateTitle();
-  };
+  }, [doAnimateTitle, handleScroll, sidePanelRef, innerContentRef, open, panelRefValue === null || panelRefValue === void 0 ? void 0 : panelRefValue.style]);
 
   // Calculate scroll distances
   React.useEffect(function () {
-    if (sidePanelRef !== null && sidePanelRef !== void 0 && sidePanelRef.current && open && animateTitle && animationComplete && titleRef !== null && titleRef !== void 0 && titleRef.current && title && title.length && !reducedMotion.matches) {
+    if (panelRefValue && open && animateTitle && animationComplete && titleRef !== null && titleRef !== void 0 && titleRef.current && title && title.length && !reducedMotion.matches) {
       checkSetDoAnimateTitle();
     }
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [open, doAnimateTitle /* use do instead of animateTitle directly */, animationComplete, handleScroll, title, size, reducedMotion.matches, id, animatedScrollRef.current]);
+  }, [open, doAnimateTitle /* use do instead of animateTitle directly */, animationComplete, handleScroll, title, size, reducedMotion.matches, id]);
 
   // click outside functionality if `includeOverlay` prop is set
   React.useEffect(function () {
     var handleOutsideClick = function handleOutsideClick(event) {
-      if (sidePanelRef.current && overlayRef.current && overlayRef.current.contains(event.target) && onRequestClose) {
+      if (panelRefValue && overlayRef.current && overlayRef.current.contains(event.target) && onRequestClose) {
         onRequestClose();
       }
     };
@@ -231,7 +253,7 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
       bodyElement.style.overflow = '';
       document.removeEventListener('click', handleOutsideClick);
     };
-  }, [includeOverlay, onRequestClose, open, preventCloseOnClickOutside, onUnmount, sidePanelRef]);
+  }, [includeOverlay, onRequestClose, open, preventCloseOnClickOutside, onUnmount, sidePanelRef, panelRefValue]);
 
   // initializes the side panel to close
   var onAnimationEnd = function onAnimationEnd() {
@@ -250,43 +272,43 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
   }, [reducedMotion.matches]);
 
   // initializes the side panel to open
-  var _onAnimationStart = function onAnimationStart() {
+  var onAnimationStart = function onAnimationStart() {
     setAnimationComplete(false);
   };
 
   // used to reset margins of the slide in panel when closed/closing
   React.useEffect(function () {
     if (!open && slideIn) {
-      var pageContentElement = document.querySelector(selectorPageContent);
+      var pageContentElement = selectorPageContent ? document.querySelector(selectorPageContent) : null;
       if (placement && placement === 'right' && pageContentElement) {
-        pageContentElement.style.marginInlineEnd = 0;
+        pageContentElement.style.marginInlineEnd = '0';
       } else if (pageContentElement) {
-        pageContentElement.style.marginInlineStart = 0;
+        pageContentElement.style.marginInlineStart = '0';
       }
     }
   }, [open, placement, selectorPageContent, slideIn]);
   React.useEffect(function () {
-    if (!open && previousState !== null && previousState !== void 0 && previousState.open && reducedMotion.matches) {
+    if (!open && previousState && previousState['open'] && reducedMotion.matches) {
       onUnmount === null || onUnmount === void 0 || onUnmount();
     }
-  }, [open, onUnmount, reducedMotion.matches, previousState === null || previousState === void 0 ? void 0 : previousState.open]);
+  }, [open, onUnmount, reducedMotion.matches, previousState]);
 
   // used to set margins of content for slide in panel version
   React.useEffect(function () {
     if (open && slideIn) {
-      var pageContentElement = document.querySelector(selectorPageContent);
+      var pageContentElement = selectorPageContent ? document.querySelector(selectorPageContent) : null;
       if (pageContentElement) {
         pageContentElement.style.inlineSize = 'auto';
       } else {
         pconsole["default"].warn('SidePanel prop `selectorPageContent` was not provided a selector that matches any element on your page. If an element is not found, the panel will render as a slide over.');
       }
       if (placement && placement === 'right' && pageContentElement) {
-        pageContentElement.style.marginInlineEnd = 0;
-        pageContentElement.style.transition = !reducedMotion.matches ? "margin-inline-end ".concat(carbonMotion.moderate02) : null;
+        pageContentElement.style.marginInlineEnd = '0';
+        pageContentElement.style.transition = !reducedMotion.matches ? "margin-inline-end ".concat(carbonMotion.moderate02) : '';
         pageContentElement.style.marginInlineEnd = constants.SIDE_PANEL_SIZES[size];
       } else if (pageContentElement) {
-        pageContentElement.style.marginInlineStart = 0;
-        pageContentElement.style.transition = !reducedMotion.matches ? "margin-inline-start ".concat(carbonMotion.moderate02) : null;
+        pageContentElement.style.marginInlineStart = '0';
+        pageContentElement.style.transition = !reducedMotion.matches ? "margin-inline-start ".concat(carbonMotion.moderate02) : '';
         pageContentElement.style.marginInlineStart = constants.SIDE_PANEL_SIZES[size];
       }
     }
@@ -294,10 +316,12 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
   React.useEffect(function () {
     if (open) {
       setTimeout(function () {
-        var _document;
-        var primeFocusEl = (_document = document) === null || _document === void 0 ? void 0 : _document.querySelector(selectorPrimaryFocus);
-        if (selectorPrimaryFocus && primeFocusEl) {
-          primeFocusEl.focus();
+        if (selectorPrimaryFocus) {
+          var _document;
+          var primeFocusEl = (_document = document) === null || _document === void 0 ? void 0 : _document.querySelector(selectorPrimaryFocus);
+          if (primeFocusEl) {
+            primeFocusEl === null || primeFocusEl === void 0 || primeFocusEl.focus();
+          }
         } else {
           firstElement === null || firstElement === void 0 || firstElement.focus();
         }
@@ -305,7 +329,7 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
     }
   }, [animationComplete, firstElement, open, selectorPrimaryFocus]);
   var primaryActionContainerClassNames = cx__default["default"](["".concat(blockClass, "__actions-container"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__actions-container--condensed"), condensedActions)]);
-  var mainPanelClassNames = cx__default["default"]([blockClass, className, "".concat(blockClass), "".concat(blockClass, "--").concat(size), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--right-placement"), placement === 'right'), "".concat(blockClass, "--left-placement"), placement === 'left'), "".concat(blockClass, "--slide-in"), slideIn), "".concat(blockClass, "--has-slug"), slug), "".concat(blockClass, "--condensed-actions"), condensedActions), "".concat(blockClass, "--animated-title"), doAnimateTitle), "".concat(blockClass, "--has-overlay"), includeOverlay)]);
+  var mainPanelClassNames = cx__default["default"]([blockClass, className, "".concat(blockClass), "".concat(blockClass, "--").concat(size), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--right-placement"), placement === 'right'), "".concat(blockClass, "--left-placement"), placement === 'left'), "".concat(blockClass, "--slide-in"), slideIn), "".concat(blockClass, "--has-slug"), slug), "".concat(blockClass, "--condensed-actions"), condensedActions), "".concat(blockClass, "--has-overlay"), includeOverlay)]);
   var renderTitle = function renderTitle() {
     return /*#__PURE__*/React__default["default"].createElement("div", {
       className: cx__default["default"]("".concat(blockClass, "__title"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__title--no-label"), !labelTextRef.current)),
@@ -324,7 +348,7 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
     var _slug$type;
     var slugCloseSize = actions && actions.length && /l/.test(size) ? 'md' : 'sm';
     var normalizedSlug;
-    if (slug && (slug === null || slug === void 0 || (_slug$type = slug.type) === null || _slug$type === void 0 ? void 0 : _slug$type.displayName) === 'Slug') {
+    if (slug && ((_slug$type = slug['type']) === null || _slug$type === void 0 ? void 0 : _slug$type.displayName) === 'Slug') {
       normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
         // slug size is sm unless actions and size > md
         size: slugCloseSize
@@ -398,10 +422,10 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
   var renderMain = function renderMain() {
     return /*#__PURE__*/React__default["default"].createElement("div", {
       ref: innerContentRef,
-      className: cx__default["default"]("".concat(blockClass, "__inner-content"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--scrolls"), !doAnimateTitle))
+      onScroll: handleScroll,
+      className: cx__default["default"]("".concat(blockClass, "__inner-content"), "".concat(blockClass, "--scrolls"), "".concat(!doAnimateTitle ? "".concat(blockClass, "__inner-content--no-animated-title") : ''))
     }, children);
   };
-  useResizeObserver.useResizeObserver(sidePanelRef, handleResize, [open]);
   return /*#__PURE__*/React__default["default"].createElement(framerMotion.AnimatePresence, null, open && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(framerMotion.motion.div, _rollupPluginBabelHelpers["extends"]({}, devtools.getDevtoolsProps(componentName), rest, {
     id: id,
     className: mainPanelClassNames,
@@ -409,9 +433,7 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
     role: "complementary",
     "aria-label": title,
     onAnimationComplete: onAnimationEnd,
-    onAnimationStart: function onAnimationStart(event) {
-      return _onAnimationStart();
-    },
+    onAnimationStart: onAnimationStart,
     variants: variants.panelVariants,
     initial: "hidden",
     animate: "visible",
@@ -421,11 +443,8 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
       shouldReduceMotion: shouldReduceMotion
     },
     onKeyDown: keyDownListener
-  }), doAnimateTitle ? /*#__PURE__*/React__default["default"].createElement("div", {
-    ref: animatedScrollRef,
-    className: "".concat(blockClass, "__animated-scroll-wrapper ").concat(blockClass, "--scrolls")
-  }, renderHeader(), renderMain()) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, renderHeader(), renderMain()), /*#__PURE__*/React__default["default"].createElement(MotionActionSet, {
-    actions: actions,
+  }), /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, renderHeader(), renderMain()), /*#__PURE__*/React__default["default"].createElement(MotionActionSet, {
+    actions: actions !== null && actions !== void 0 ? actions : [],
     className: primaryActionContainerClassNames,
     size: size === 'xs' ? 'sm' : size,
     custom: shouldReduceMotion,
@@ -471,7 +490,8 @@ exports.SidePanel.propTypes = {
    *
    * See https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
    */
-  actions: propsHelper.allPropTypes([ActionSet.ActionSet.validateActions(), index["default"].arrayOf(index["default"].shape(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, react.Button.propTypes), {}, {
+  actions: propsHelper.allPropTypes([/**@ts-ignore*/
+  ActionSet.ActionSet.validateActions(), index["default"].arrayOf(index["default"].shape(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, 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']),
@@ -550,6 +570,7 @@ exports.SidePanel.propTypes = {
    * This is the selector to the element that contains all of the page content that will shrink if the panel is a slide in.
    * 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;
     return slideIn;
@@ -558,14 +579,17 @@ exports.SidePanel.propTypes = {
    * Specify a CSS selector that matches the DOM element that should
    * be focused when the side panel opens
    */
+  /**@ts-ignore*/
   selectorPrimaryFocus: index["default"].string,
   /**
    * Sets the size of the side panel
    */
+  /**@ts-ignore*/
   size: index["default"].oneOf(['xs', 'sm', 'md', 'lg', '2xl']),
   /**
    * Determines if this panel slides in
    */
+  /**@ts-ignore*/
   slideIn: index["default"].bool,
   /**
    *  **Experimental:** Provide a `Slug` component to be rendered inside the `SidePanel` component
@@ -578,6 +602,7 @@ exports.SidePanel.propTypes = {
   /**
    * Sets the title text
    */
+  /**@ts-ignore*/
   title: index["default"].string.isRequired.if(function (_ref7) {
     var labelText = _ref7.labelText;
     return labelText;

package/lib/components/StatusIcon/StatusIcon.d.ts

@@ -1,3 +1,10 @@
+/**
+ * Copyright IBM Corp. 2021, 2022
+ *
+ * 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 React, { PropsWithChildren } from 'react';
 /**
 The `StatusIcon` component follows the Carbon guidelines for status icons with
 some added specifications around illustration usage. For additional usage
@@ -7,5 +14,30 @@ _Status icons_ are an important method of communicating severity level
 information to users. The shapes and colors, communicate severity that enable
 users to quickly assess and identify status and respond accordingly.
  */
-export let StatusIcon: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+type Size = 'sm' | 'md' | 'lg' | 'xl';
+type Theme = 'light' | 'dark';
+type Kind = 'fatal' | 'critical' | 'major-warning' | 'minor-warning' | 'undefined' | 'unknown' | 'normal' | 'info' | 'in-progress' | 'running' | 'pending';
+interface StatusIconProps extends PropsWithChildren {
+    /**
+     * Provide an optional class to be applied to the modal root node.
+     */
+    className?: string;
+    /**
+     * A required prop that provides a title element and tooltip for the icon for accessibility purposes
+     */
+    iconDescription: string;
+    /**
+     * A required prop that displays the respective icon associated with the status
+     */
+    kind: Kind;
+    /**
+     * A required prop that displays the size of the icon associate with the status
+     */
+    size: Size;
+    /**
+     * A required prop that displays the theme of the icon associated with the status
+     */
+    theme: Theme;
+}
+export declare let StatusIcon: React.ForwardRefExoticComponent<StatusIconProps & React.RefAttributes<React.ReactSVGElement | null>>;
+export {};