@carbon/ibm-products 2.59.0 → 2.60.0

package/lib/components/PageHeader/PageHeaderUtils.js

@@ -165,7 +165,7 @@ var utilGetBreadcrumbItemForTitle = function utilGetBreadcrumbItemForTitle(block
       var _ref, _title$breadcrumbCont;
       // user defined content
       breadcrumbTitle = {
-        label: (_ref = (_title$breadcrumbCont = title.breadcrumbContent) !== null && _title$breadcrumbCont !== void 0 ? _title$breadcrumbCont : title.content) !== null && _ref !== void 0 ? _ref : title.asText,
+        label: (_ref = (_title$breadcrumbCont = title.breadcrumbContent) !== null && _title$breadcrumbCont !== undefined ? _title$breadcrumbCont : title.content) !== null && _ref !== undefined ? _ref : title.asText,
         title: title.asText
       };
     } else {

package/lib/components/ProductiveCard/ProductiveCard.js

@@ -19,7 +19,7 @@ var _excluded = ["actionsPlacement"];
 var componentName = 'ProductiveCard';
 exports.ProductiveCard = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$actionsPlacement = _ref.actionsPlacement,
-    actionsPlacement = _ref$actionsPlacement === void 0 ? 'top' : _ref$actionsPlacement,
+    actionsPlacement = _ref$actionsPlacement === undefined ? 'top' : _ref$actionsPlacement,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   var validProps = propsHelper.prepareProps(rest, ['media', 'mediaPosition', 'pictogram', 'primaryButtonClick', 'productive', 'secondaryButtonKind']);
   return /*#__PURE__*/React.createElement(Card.Card, _rollupPluginBabelHelpers.extends({}, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, validProps), {}, {

package/lib/components/RemoveModal/RemoveModal.d.ts

@@ -1,4 +1,3 @@
-/// <reference path="../../../src/custom-typings/index.d.ts" />
 import { ComposedModal } from '@carbon/react';
 import React, { ReactNode } from 'react';
 export interface RemoveModalProps extends React.ComponentProps<typeof ComposedModal> {
@@ -80,5 +79,5 @@ export interface RemoveModalProps extends React.ComponentProps<typeof ComposedMo
     title: string;
 }
 export declare let RemoveModal: React.ForwardRefExoticComponent<RemoveModalProps & {
-    children?: React.ReactNode;
+    children?: ReactNode | undefined;
 } & React.RefAttributes<unknown>>;

package/lib/components/RemoveModal/RemoveModal.js

@@ -76,11 +76,11 @@ exports.RemoveModal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   // the value of the input will still remain: we only want to empty the input value
   // when open actually changes to false.
   React.useEffect(function () {
-    if (!open && previousState !== null && previousState !== void 0 && previousState.open) {
+    if (!open && previousState !== null && previousState !== undefined && previousState.open) {
       setUserInput('');
     }
-  }, [open, previousState === null || previousState === void 0 ? void 0 : previousState.open]);
-  return renderPortalUse( /*#__PURE__*/React.createElement(react.ComposedModal, _rollupPluginBabelHelpers.extends({}, rest, {
+  }, [open, previousState === null || previousState === undefined ? undefined : previousState.open]);
+  return renderPortalUse(/*#__PURE__*/React.createElement(react.ComposedModal, _rollupPluginBabelHelpers.extends({}, rest, {
     className: cx(blockClass, className),
     size: "sm",
     "aria-label": title

package/lib/components/Saving/Saving.js

@@ -83,7 +83,7 @@ exports.Saving = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     size: 16
   }))), /*#__PURE__*/React.createElement("p", {
     className: "".concat(blockClass, "__text")
-  }, (_statusObj$status = statusObj[status]) === null || _statusObj$status === void 0 ? void 0 : _statusObj$status.text)) : /*#__PURE__*/React.createElement("div", {
+  }, (_statusObj$status = statusObj[status]) === null || _statusObj$status === undefined ? undefined : _statusObj$status.text)) : /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__buttons")
   }, /*#__PURE__*/React.createElement(react.Button, {
     onClick: onRequestCancel,
@@ -93,11 +93,11 @@ exports.Saving = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, secondaryButtonText), /*#__PURE__*/React.createElement(react.Button, {
     onClick: onRequestSave,
     kind: "primary",
-    renderIcon: (_statusObj$status2 = statusObj[status]) === null || _statusObj$status2 === void 0 ? void 0 : _statusObj$status2.icon,
-    iconDescription: (_statusObj$status3 = statusObj[status]) === null || _statusObj$status3 === void 0 ? void 0 : _statusObj$status3.iconDescription,
+    renderIcon: (_statusObj$status2 = statusObj[status]) === null || _statusObj$status2 === undefined ? undefined : _statusObj$status2.icon,
+    iconDescription: (_statusObj$status3 = statusObj[status]) === null || _statusObj$status3 === undefined ? undefined : _statusObj$status3.iconDescription,
     disabled: status === 'in-progress',
     type: "button"
-  }, (_statusObj$status4 = statusObj[status]) === null || _statusObj$status4 === void 0 ? void 0 : _statusObj$status4.text)));
+  }, (_statusObj$status4 = statusObj[status]) === null || _statusObj$status4 === undefined ? undefined : _statusObj$status4.text)));
 });
 exports.Saving = settings.pkg.checkComponentEnabled(exports.Saving, componentName);
 exports.Saving.propTypes = {

package/lib/components/ScrollGradient/ScrollGradient.js

@@ -36,14 +36,14 @@ exports.ScrollGradient = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
     _ref$color = _ref.color,
-    color = _ref$color === void 0 ? defaults.color : _ref$color,
+    color = _ref$color === undefined ? defaults.color : _ref$color,
     _ref$onScroll = _ref.onScroll,
-    onScroll = _ref$onScroll === void 0 ? defaults.onScroll : _ref$onScroll,
+    onScroll = _ref$onScroll === undefined ? defaults.onScroll : _ref$onScroll,
     scrollElementClassName = _ref.scrollElementClassName,
     _ref$getScrollElement = _ref.getScrollElementRef,
-    getScrollElementRef = _ref$getScrollElement === void 0 ? defaults.getScrollElementRef : _ref$getScrollElement,
+    getScrollElementRef = _ref$getScrollElement === undefined ? defaults.getScrollElementRef : _ref$getScrollElement,
     _ref$hideStartGradien = _ref.hideStartGradient,
-    hideStartGradient = _ref$hideStartGradien === void 0 ? defaults.hideStartGradient : _ref$hideStartGradien,
+    hideStartGradient = _ref$hideStartGradien === undefined ? defaults.hideStartGradient : _ref$hideStartGradien,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   var scrollContainer = React.useRef(undefined);
   var contentChildrenContainer = React.useRef(undefined);

package/lib/components/SearchBar/SearchBar.d.ts

@@ -5,7 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, { PropsWithChildren } from 'react';
-import PropTypes from 'prop-types';
 type Scopes = string[] | object[];
 export interface SearchBarProps extends PropsWithChildren {
     /** @type {string} Optional additional class name. */
@@ -50,13 +49,13 @@ export interface SearchBarProps extends PropsWithChildren {
     value?: string;
 }
 export declare let SearchBar: React.ForwardRefExoticComponent<SearchBarProps & React.RefAttributes<HTMLFormElement>>;
-declare const conditionalScopePropValidator: (props: any, propName: any, componentName: any, ...rest: any[]) => Error | null;
+declare const conditionalScopePropValidator: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
 export declare const deprecatedProps: {
     /**
      * **Deprecated**
      *
      * Provide accessible label text for the scopes MultiSelect.
      */
-    titleText: PropTypes.Requireable<string>;
+    titleText: any;
 };
 export {};

package/lib/components/SearchBar/SearchBar.js

@@ -27,27 +27,25 @@ var componentName = 'SearchBar';
 var defaults = {
   onSubmit: function onSubmit() {},
   onChange: function onChange() {},
-  scopes: [],
-  selectedScopes: [],
   hideScopesLabel: true
 };
 exports.SearchBar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     clearButtonLabelText = _ref.clearButtonLabelText,
     _ref$hideScopesLabel = _ref.hideScopesLabel,
-    hideScopesLabel = _ref$hideScopesLabel === void 0 ? defaults.hideScopesLabel : _ref$hideScopesLabel,
+    hideScopesLabel = _ref$hideScopesLabel === undefined ? defaults.hideScopesLabel : _ref$hideScopesLabel,
     labelText = _ref.labelText,
     _ref$onChange = _ref.onChange,
-    onChange = _ref$onChange === void 0 ? defaults.onChange : _ref$onChange,
+    onChange = _ref$onChange === undefined ? defaults.onChange : _ref$onChange,
     _ref$onSubmit = _ref.onSubmit,
-    onSubmit = _ref$onSubmit === void 0 ? defaults.onSubmit : _ref$onSubmit,
+    onSubmit = _ref$onSubmit === undefined ? defaults.onSubmit : _ref$onSubmit,
     placeholderText = _ref.placeholderText,
     _ref$scopes = _ref.scopes,
-    scopes = _ref$scopes === void 0 ? [] : _ref$scopes,
+    scopes = _ref$scopes === undefined ? [] : _ref$scopes,
     scopesTypeLabel = _ref.scopesTypeLabel,
     scopeToString = _ref.scopeToString,
     _ref$selectedScopes = _ref.selectedScopes,
-    selectedScopes = _ref$selectedScopes === void 0 ? [] : _ref$selectedScopes,
+    selectedScopes = _ref$selectedScopes === undefined ? [] : _ref$selectedScopes,
     sortItems = _ref.sortItems,
     submitLabel = _ref.submitLabel,
     translateWithId = _ref.translateWithId,
@@ -128,7 +126,7 @@ exports.SearchBar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, devtools.getDevtoolsProps(componentName), {
     className: cx(blockClass, className, _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--hide-scopes-label"), hideScopesLabel)),
     onSubmit: handleSubmit
-  }), scopes !== null && scopes !== void 0 && scopes.length ? /*#__PURE__*/React.createElement(react.MultiSelect, _rollupPluginBabelHelpers.extends({}, multiSelectProps, {
+  }), scopes !== null && scopes !== undefined && scopes.length ? /*#__PURE__*/React.createElement(react.MultiSelect, _rollupPluginBabelHelpers.extends({}, multiSelectProps, {
     id: "".concat(blockClass, "__multi-select"),
     name: "search-scopes",
     className: "".concat(blockClass, "__scopes"),
@@ -203,7 +201,6 @@ exports.SearchBar.propTypes = _rollupPluginBabelHelpers.objectSpread2({
   /**@ts-ignore */
   scopes: index.default.arrayOf(index.default.oneOfType([index.default.string, index.default.object])),
   /** @type {string} The name text for the search scope type. */
-  // eslint-disable-next-line react/require-default-props
   scopesTypeLabel: conditionalScopePropValidator,
   /** @type {Array<any> Array of initially selected search scopes. */
   /**@ts-ignore */
@@ -214,14 +211,10 @@ exports.SearchBar.propTypes = _rollupPluginBabelHelpers.objectSpread2({
    * with "selected" items moved to the start of the scope items array.
    */
   sortItems: index.default.func,
-  // eslint-disable-line react/require-default-props
-
   /** @type {string} The label text for the search submit button. */
   submitLabel: index.default.string.isRequired,
   /** @type {func} Callback function for translating MultiSelect's child ListBoxMenuIcon SVG title. */
   translateWithId: index.default.func,
-  // eslint-disable-line react/require-default-props
-
   /** @type {string} Search query value. */
   value: index.default.string
 }, deprecatedProps);

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

@@ -1,10 +1,9 @@
 /**
- * Copyright IBM Corp. 2020, 2024
+ * Copyright IBM Corp. 2020, 2025
  *
  * 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, RefObject } from 'react';
 import { ButtonProps } from '@carbon/react';
 type SidePanelBaseProps = {

package/lib/components/SidePanel/SidePanel.js

@@ -8,11 +8,9 @@
 'use strict';
 
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
-var framerMotion = require('framer-motion');
 var icons = require('@carbon/react/icons');
 var react = require('@carbon/react');
 var React = require('react');
-var variants = require('./motion/variants.js');
 var ActionSet = require('../ActionSet/ActionSet.js');
 var index = require('../../_virtual/index.js');
 var constants = require('./constants.js');
@@ -22,17 +20,15 @@ var devtools = require('../../global/js/utils/devtools.js');
 var carbonMotion = require('@carbon/motion');
 var pconsole = require('../../global/js/utils/pconsole.js');
 var settings = require('../../settings.js');
-var usePrefersReducedMotion = require('../../global/js/hooks/usePrefersReducedMotion.js');
 var useFocus = require('../../global/js/hooks/useFocus.js');
 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';
-// `any` is a work around until ActionSet is migrated to TS
-var MotionActionSet = framerMotion.motion(ActionSet.ActionSet);
-
 // Default values for props
 var defaults = {
   animateTitle: true,
@@ -47,36 +43,37 @@ 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,
+    animateTitle = _ref$animateTitle === undefined ? defaults.animateTitle : _ref$animateTitle,
     children = _ref.children,
     className = _ref.className,
     _ref$closeIconDescrip = _ref.closeIconDescription,
-    closeIconDescription = _ref$closeIconDescrip === void 0 ? defaults.closeIconDescription : _ref$closeIconDescrip,
+    closeIconDescription = _ref$closeIconDescrip === undefined ? defaults.closeIconDescription : _ref$closeIconDescrip,
     condensedActions = _ref.condensedActions,
     _ref$currentStep = _ref.currentStep,
-    currentStep = _ref$currentStep === void 0 ? defaults.currentStep : _ref$currentStep,
+    currentStep = _ref$currentStep === undefined ? defaults.currentStep : _ref$currentStep,
     decorator = _ref.decorator,
     _ref$id = _ref.id,
-    id = _ref$id === void 0 ? blockClass : _ref$id,
+    id = _ref$id === undefined ? blockClass : _ref$id,
     includeOverlay = _ref.includeOverlay,
     labelText = _ref.labelText,
     _ref$navigationBackIc = _ref.navigationBackIconDescription,
-    navigationBackIconDescription = _ref$navigationBackIc === void 0 ? defaults.navigationBackIconDescription : _ref$navigationBackIc,
+    navigationBackIconDescription = _ref$navigationBackIc === undefined ? 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,
+    placement = _ref$placement === undefined ? 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,
+    size = _ref$size === undefined ? defaults.size : _ref$size,
     slideIn = _ref.slideIn,
     slug = _ref.slug,
     subtitle = _ref.subtitle,
@@ -115,7 +112,10 @@ exports.SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     keyDownListener = _useFocus.keyDownListener;
   var panelRefValue = sidePanelRef.current;
   var previousOpen = usePreviousValue.usePreviousValue(open);
-  var shouldReduceMotion = usePrefersReducedMotion.default();
+  var shouldReduceMotion = usePrefersReducedMotion.usePrefersReducedMotion();
+  var exitAnimationName = placement === 'right' ? 'side-panel-exit-right' : 'side-panel-exit-left';
+  var _usePresence = usePresence.usePresence(open, sidePanelRef, exitAnimationName),
+    shouldRender = _usePresence.shouldRender;
 
   // Title animation on scroll related state
   var _useState7 = React.useState(0),
@@ -124,51 +124,51 @@ exports.SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     setLabelTextHeight = _useState8[1];
   var handleEscapeKey = function handleEscapeKey(event) {
     if (event.key === 'Escape' && open) {
-      onRequestClose === null || onRequestClose === void 0 || onRequestClose();
+      onRequestClose === null || onRequestClose === undefined || onRequestClose();
     }
   };
   React.useEffect(function () {
-    if (open && !(titleRef !== null && titleRef !== void 0 && titleRef.current)) {
+    if (open && !(titleRef !== null && titleRef !== undefined && titleRef.current)) {
       setDoAnimateTitle(false);
     } else {
       setDoAnimateTitle(animateTitle);
     }
   }, [animateTitle, open]);
   var titleItemsStyles = React.useCallback(function (progress) {
-    if (subtitleRef !== null && subtitleRef !== void 0 && subtitleRef.current) {
+    if (subtitleRef !== null && subtitleRef !== undefined && 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 subtitleEl = subtitleRef === null || subtitleRef === undefined ? undefined : subtitleRef.current;
+      var height = subtitleEl === null || subtitleEl === undefined ? undefined : 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"));
+      subtitleEl === null || subtitleEl === undefined || (_subtitleEl$style = subtitleEl.style) === null || _subtitleEl$style === undefined || _subtitleEl$style.setProperty('margin-top', "".concat(-calculatedMargin, "px"));
     }
-    if (labelTextRef !== null && labelTextRef !== void 0 && labelTextRef.current) {
+    if (labelTextRef !== null && labelTextRef !== undefined && 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"));
+      labelTextRef === null || labelTextRef === undefined || (_labelTextRef$current = labelTextRef.current) === null || _labelTextRef$current === undefined || (_labelTextRef$current = _labelTextRef$current.style) === null || _labelTextRef$current === undefined || _labelTextRef$current.setProperty('margin-top', "".concat(-_calculatedMargin, "px"));
     }
   }, [labelTextHeight]);
   React.useEffect(function () {
-    if (open && animateTitle && labelTextRef !== null && labelTextRef !== void 0 && labelTextRef.current) {
+    if (open && animateTitle && labelTextRef !== null && labelTextRef !== undefined && 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));
+      setLabelTextHeight(Number((labelTextRef === null || labelTextRef === undefined || (_labelTextRef$current2 = labelTextRef.current) === null || _labelTextRef$current2 === undefined ? undefined : _labelTextRef$current2.clientHeight) || null));
     }
   }, [animateTitle, labelTextRef, open]);
   var handleScroll = React.useCallback(function () {
-    if (doAnimateTitle && innerContentRef !== null && innerContentRef !== void 0 && innerContentRef.current) {
+    if (doAnimateTitle && innerContentRef !== null && innerContentRef !== undefined && 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 scrollTop = innerContentRef === null || innerContentRef === undefined || (_innerContentRef$curr = innerContentRef.current) === null || _innerContentRef$curr === undefined ? undefined : _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());
+      panelRefValue === null || panelRefValue === undefined || panelRefValue.style.setProperty("--".concat(blockClass, "--scroll-animation-progress"), animationProgress.toString());
       titleItemsStyles(animationProgress);
     }
-  }, [doAnimateTitle, panelRefValue === null || panelRefValue === void 0 ? void 0 : panelRefValue.style, scrollAnimationDistance, titleItemsStyles]);
+  }, [doAnimateTitle, panelRefValue === null || panelRefValue === undefined ? undefined : panelRefValue.style, scrollAnimationDistance, titleItemsStyles]);
 
   // scroll panel to top going between steps
   React.useEffect(function () {
     if (sidePanelRef && panelRefValue) {
       var _animatedScrollRef$cu;
-      var scrollableSection = (_animatedScrollRef$cu = animatedScrollRef.current) !== null && _animatedScrollRef$cu !== void 0 ? _animatedScrollRef$cu : innerContentRef.current;
+      var scrollableSection = (_animatedScrollRef$cu = animatedScrollRef.current) !== null && _animatedScrollRef$cu !== undefined ? _animatedScrollRef$cu : innerContentRef.current;
       if (previousState && previousState['currentStep'] !== currentStep && scrollableSection) {
         scrollableSection.scrollTop = 0;
       }
@@ -193,17 +193,17 @@ exports.SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     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();
+        launcherButtonRef === null || launcherButtonRef === undefined || (_launcherButtonRef$cu = launcherButtonRef.current) === null || _launcherButtonRef$cu === undefined || _launcherButtonRef$cu.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) {
+    if (panelRefValue && open && animateTitle && animationComplete && titleRef !== null && titleRef !== undefined && 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;
+      var labelHeight = (_labelTextRef$current3 = labelTextRef === null || labelTextRef === undefined || (_labelTextRef$current4 = labelTextRef.current) === null || _labelTextRef$current4 === undefined ? undefined : _labelTextRef$current4.offsetHeight) !== null && _labelTextRef$current3 !== undefined ? _labelTextRef$current3 : 0;
+      var subtitleHeight = (_subtitleRef$current$ = subtitleRef === null || subtitleRef === undefined || (_subtitleRef$current = subtitleRef.current) === null || _subtitleRef$current === undefined ? undefined : _subtitleRef$current.offsetHeight) !== null && _subtitleRef$current$ !== undefined ? _subtitleRef$current$ : 0;
 
       // Adjusts space at bottom of titles by changing where scrolling finishes
       // Styles use border to save use of get computed style
@@ -212,12 +212,12 @@ exports.SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       setScrollAnimationDistance(_scrollAnimationDistance);
 
       // used to calculate the header moves
-      panelRefValue === null || panelRefValue === void 0 || panelRefValue.style.setProperty("--".concat(blockClass, "--scroll-animation-distance"), _scrollAnimationDistance.toString());
+      panelRefValue === null || panelRefValue === undefined || panelRefValue.style.setProperty("--".concat(blockClass, "--scroll-animation-distance"), _scrollAnimationDistance.toString());
       var 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;
+        var innerComputed = (_window = window) === null || _window === undefined ? undefined : _window.getComputedStyle(innerContentRef.current);
+        var innerPaddingHeight = innerComputed ? parseFloat(innerComputed === null || innerComputed === undefined ? undefined : innerComputed.paddingTop) + parseFloat(innerComputed === null || innerComputed === undefined ? undefined : innerComputed.paddingBottom) : 0;
         canDoAnimateTitle = (!!labelText || !!actionToolbarButtons || !!subtitle) && scrollEl.scrollHeight - scrollEl.clientHeight >= _scrollAnimationDistance + innerPaddingHeight;
       }
     }
@@ -228,13 +228,13 @@ exports.SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   };
   React.useEffect(function () {
     if (!doAnimateTitle && sidePanelRef.current) {
-      panelRefValue === null || panelRefValue === void 0 || panelRefValue.style.setProperty("--".concat(blockClass, "--scroll-animation-progress"), '0');
+      panelRefValue === null || panelRefValue === undefined || panelRefValue.style.setProperty("--".concat(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 === null || panelRefValue === undefined ? undefined : panelRefValue.style]);
 
   // Calculate scroll distances
   React.useEffect(function () {
-    if (panelRefValue && open && animateTitle && animationComplete && titleRef !== null && titleRef !== void 0 && titleRef.current && title && title.length && !shouldReduceMotion) {
+    if (panelRefValue && open && animateTitle && animationComplete && titleRef !== null && titleRef !== undefined && titleRef.current && title && title.length && !shouldReduceMotion) {
       checkSetDoAnimateTitle();
     }
 
@@ -267,7 +267,7 @@ exports.SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   // initializes the side panel to close
   var onAnimationEnd = function onAnimationEnd() {
     if (!open) {
-      onUnmount === null || onUnmount === void 0 || onUnmount();
+      onUnmount === null || onUnmount === undefined || onUnmount();
     }
     setAnimationComplete(!animationComplete);
   };
@@ -298,7 +298,7 @@ exports.SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, [open, placement, selectorPageContent, slideIn]);
   React.useEffect(function () {
     if (!open && previousState && previousState['open'] && shouldReduceMotion) {
-      onUnmount === null || onUnmount === void 0 || onUnmount();
+      onUnmount === null || onUnmount === undefined || onUnmount();
     }
   }, [open, onUnmount, shouldReduceMotion, previousState]);
 
@@ -324,23 +324,23 @@ exports.SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, [slideIn, selectorPageContent, placement, size, shouldReduceMotion, open]);
   React.useEffect(function () {
     if (open && animationComplete) {
-      if (selectorPrimaryFocus && useFocus.getSpecificElement(sidePanelRef === null || sidePanelRef === void 0 ? void 0 : sidePanelRef.current, selectorPrimaryFocus)) {
+      if (selectorPrimaryFocus && useFocus.getSpecificElement(sidePanelRef === null || sidePanelRef === undefined ? undefined : 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') {
+        var primeFocusEl = useFocus.getSpecificElement(sidePanelRef === null || sidePanelRef === undefined ? undefined : sidePanelRef.current, selectorPrimaryFocus);
+        if (primeFocusEl && ((_window2 = window) === null || _window2 === undefined || (_window2 = _window2.getComputedStyle(primeFocusEl)) === null || _window2 === undefined ? undefined : _window2.display) !== 'none') {
           setTimeout(function () {
-            return primeFocusEl === null || primeFocusEl === void 0 ? void 0 : primeFocusEl.focus();
+            return primeFocusEl === null || primeFocusEl === undefined ? undefined : primeFocusEl.focus();
           }, 0);
         }
       } else if (!slideIn) {
         setTimeout(function () {
-          return firstElement === null || firstElement === void 0 ? void 0 : firstElement.focus();
+          return firstElement === null || firstElement === undefined ? undefined : 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), _rollupPluginBabelHelpers.defineProperty(_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-decorator"), decorator), "".concat(blockClass, "--has-slug"), slug), "".concat(blockClass, "--has-ai-label"), aiLabel), "".concat(blockClass, "--condensed-actions"), condensedActions), "".concat(blockClass, "--has-overlay"), includeOverlay)]);
+  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)),
@@ -363,19 +363,19 @@ exports.SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
      * 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 = slug['type']) === null || _slug$type === undefined ? undefined : _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 = aiLabel['type']) === null || _aiLabel$type === undefined ? undefined : _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 === null || decorator === undefined || (_decorator$type = decorator['type']) === null || _decorator$type === undefined ? undefined : _decorator$type.displayName) === 'AILabel') {
       normalizedDecorator = /*#__PURE__*/React.cloneElement(decorator, {
         // decorator size is sm unless actions and size > md
         size: closeSize
@@ -424,7 +424,7 @@ exports.SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       var label = _ref4.label,
         kind = _ref4.kind,
         _ref4$hasIconOnly = _ref4.hasIconOnly,
-        hasIconOnly = _ref4$hasIconOnly === void 0 ? false : _ref4$hasIconOnly,
+        hasIconOnly = _ref4$hasIconOnly === undefined ? false : _ref4$hasIconOnly,
         icon = _ref4.icon,
         renderIcon = _ref4.renderIcon,
         tooltipPosition = _ref4.tooltipPosition,
@@ -455,7 +455,7 @@ exports.SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     return /*#__PURE__*/React.createElement("div", {
       ref: innerContentRef,
       onScroll: handleScroll,
-      className: cx("".concat(blockClass, "__inner-content"), "".concat(blockClass, "--scrolls"), "".concat(!doAnimateTitle ? "".concat(blockClass, "__inner-content--no-animated-title") : ''))
+      className: cx("".concat(blockClass, "__inner-content"), "".concat(blockClass, "--scrolls"), "".concat(!doAnimateTitle && !animateTitle ? "".concat(blockClass, "__inner-content--no-animated-title") : ''))
     }, children);
   };
   var handleKeyDown = function handleKeyDown(event) {
@@ -464,37 +464,23 @@ exports.SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       keyDownListener(event);
     }
   };
-  return /*#__PURE__*/React.createElement(framerMotion.AnimatePresence, null, open && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(framerMotion.motion.div, _rollupPluginBabelHelpers.extends({}, devtools.getDevtoolsProps(componentName), rest, {
+  return shouldRender ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, devtools.getDevtoolsProps(componentName), rest, {
     id: id,
     className: mainPanelClassNames,
     ref: sidePanelRef,
     role: "complementary",
     "aria-label": title,
-    onAnimationComplete: onAnimationEnd,
+    onAnimationEnd: onAnimationEnd,
     onAnimationStart: onAnimationStart,
-    variants: variants.panelVariants,
-    initial: "hidden",
-    animate: "visible",
-    exit: "exit",
-    custom: {
-      placement: placement,
-      shouldReduceMotion: shouldReduceMotion
-    },
     onKeyDown: handleKeyDown
-  }), /*#__PURE__*/React.createElement(React.Fragment, null, renderHeader(), renderMain()), /*#__PURE__*/React.createElement(MotionActionSet, {
-    actions: actions !== null && actions !== void 0 ? actions : [],
+  }), renderHeader(), renderMain(), /*#__PURE__*/React.createElement(ActionSet.ActionSet, {
+    actions: actions !== null && actions !== undefined ? actions : [],
     className: primaryActionContainerClassNames,
-    size: size === 'xs' ? 'sm' : size,
-    custom: shouldReduceMotion,
-    variants: variants.actionSetVariants
-  })), /*#__PURE__*/React.createElement(framerMotion.AnimatePresence, null, includeOverlay && /*#__PURE__*/React.createElement(framerMotion.motion.div, {
-    variants: variants.overlayVariants,
-    initial: "hidden",
-    animate: "visible",
-    exit: "exit",
+    size: size === 'xs' ? 'sm' : size
+  })), includeOverlay && /*#__PURE__*/React.createElement("div", {
     ref: overlayRef,
-    className: "".concat(blockClass, "__overlay")
-  }))));
+    className: cx("".concat(blockClass, "__overlay"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__overlay--closing"), !open))
+  })) : null;
 });
 
 // Return a placeholder if not released and not enabled by feature flag

package/lib/components/SimpleHeader/SimpleHeader.d.ts

@@ -23,25 +23,13 @@ export function SimpleHeader({ breadcrumbs, className, title, noTrailingSlash, m
 }): React.JSX.Element;
 export namespace SimpleHeader {
     namespace propTypes {
-        export let breadcrumbs: PropTypes.Requireable<(PropTypes.InferProps<{
-            /** breadcrumb item key */
-            key: PropTypes.Validator<string>;
-            /** breadcrumb item label */
-            label: PropTypes.Validator<string>;
-            /** breadcrumb item link */
-            href: PropTypes.Requireable<string>;
-            /** breadcrumb item title tooltip */
-            title: PropTypes.Requireable<string>;
-            /** Provide if this breadcrumb item represents the current page */
-            isCurrentPage: PropTypes.Requireable<boolean>;
-        }> | null | undefined)[]>;
-        export let className: PropTypes.Requireable<string>;
-        export let maxVisible: PropTypes.Requireable<number>;
-        export let noTrailingSlash: PropTypes.Requireable<boolean>;
+        export let breadcrumbs: any;
+        export let className: any;
+        export let maxVisible: any;
+        export let noTrailingSlash: any;
         export { overflowAriaLabel_required_if_breadcrumbs_exist as overflowAriaLabel };
         export let overflowTooltipAlign: any;
-        export let title: PropTypes.Requireable<string>;
+        export let title: any;
     }
 }
 import React from 'react';
-import PropTypes from 'prop-types';

package/lib/components/SimpleHeader/SimpleHeader.js

@@ -37,13 +37,13 @@ var SimpleHeader = function SimpleHeader(_ref) {
     className = _ref.className,
     title = _ref.title,
     _ref$noTrailingSlash = _ref.noTrailingSlash,
-    noTrailingSlash = _ref$noTrailingSlash === void 0 ? true : _ref$noTrailingSlash,
+    noTrailingSlash = _ref$noTrailingSlash === undefined ? true : _ref$noTrailingSlash,
     maxVisible = _ref.maxVisible,
     overflowAriaLabel = _ref.overflowAriaLabel,
     overflowTooltipAlign = _ref.overflowTooltipAlign,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   var warnIfNoTitleOrBreadcrumbs = React.useCallback(function () {
-    if (!title && !(breadcrumbs !== null && breadcrumbs !== void 0 && breadcrumbs.length)) {
+    if (!title && !(breadcrumbs !== null && breadcrumbs !== undefined && breadcrumbs.length)) {
       pconsole.default.error("Warning: You have tried using a ".concat(componentName, " component without specifying a title or breadcrumbs props"));
     }
   }, [breadcrumbs, title]);
@@ -52,7 +52,7 @@ var SimpleHeader = function SimpleHeader(_ref) {
   }, [title, breadcrumbs, warnIfNoTitleOrBreadcrumbs]);
   return /*#__PURE__*/React.createElement("header", _rollupPluginBabelHelpers.extends({
     className: cx(blockClass, className)
-  }, rest), (breadcrumbs === null || breadcrumbs === void 0 ? void 0 : breadcrumbs.length) > 0 && /*#__PURE__*/React.createElement(BreadcrumbWithOverflow.BreadcrumbWithOverflow, {
+  }, rest), (breadcrumbs === null || breadcrumbs === undefined ? undefined : breadcrumbs.length) > 0 && /*#__PURE__*/React.createElement(BreadcrumbWithOverflow.BreadcrumbWithOverflow, {
     noTrailingSlash: noTrailingSlash,
     className: cx("".concat(blockClass, "__breadcrumbs")),
     breadcrumbs: breadcrumbs,
@@ -65,7 +65,7 @@ var SimpleHeader = function SimpleHeader(_ref) {
 };
 var overflowAriaLabel_required_if_breadcrumbs_exist = propsHelper.isRequiredIf(index.default.string, function (props) {
   var _props$breadcrumbs;
-  return ((_props$breadcrumbs = props.breadcrumbs) === null || _props$breadcrumbs === void 0 ? void 0 : _props$breadcrumbs.length) > 0;
+  return ((_props$breadcrumbs = props.breadcrumbs) === null || _props$breadcrumbs === undefined ? undefined : _props$breadcrumbs.length) > 0;
 });
 SimpleHeader.propTypes = {
   /** Header breadcrumbs */