@carbon/ibm-products 2.0.0-rc.2 → 2.0.0-rc.4

package/lib/components/NotificationsPanel/NotificationsPanel.js

@@ -35,7 +35,7 @@ var _NotificationsEmptyState = require("../EmptyStates/NotificationsEmptyState")
 
 var _react2 = require("@carbon/react");
 
-var _iconsReact = require("@carbon/icons-react");
+var _icons = require("@carbon/react/icons");
 
 var _excluded = ["className", "data", "daysAgoText", "dismissAllLabel", "dismissSingleNotificationIconDescription", "doNotDisturbDefaultToggled", "doNotDisturbLabel", "emptyStateLabel", "hourAgoText", "hoursAgoText", "minuteAgoText", "minutesAgoText", "monthAgoText", "monthsAgoText", "nowText", "onClickOutside", "onDismissAllNotifications", "onDismissSingleNotification", "onDoNotDisturbChange", "onSettingsClick", "onViewAllClick", "open", "previousLabel", "readLessLabel", "readMoreLabel", "secondsAgoText", "settingsIconDescription", "title", "todayLabel", "viewAllLabel", "yearAgoText", "yearsAgoText", "yesterdayAtText", "yesterdayLabel"];
 
@@ -250,7 +250,7 @@ var NotificationsPanel = /*#__PURE__*/_react.default.forwardRef(function (_ref,
       kind: "ghost",
       size: "sm",
       renderIcon: function renderIcon(props) {
-        return /*#__PURE__*/_react.default.createElement(_iconsReact.ChevronDown, (0, _extends2.default)({
+        return /*#__PURE__*/_react.default.createElement(_icons.ChevronDown, (0, _extends2.default)({
           size: 16
         }, props));
       },
@@ -293,16 +293,16 @@ var NotificationsPanel = /*#__PURE__*/_react.default.forwardRef(function (_ref,
 
         event.which === 13 && notification.onNotificationClick(notification);
       }
-    }, notification.type === 'error' && /*#__PURE__*/_react.default.createElement(_iconsReact.ErrorFilled, {
+    }, notification.type === 'error' && /*#__PURE__*/_react.default.createElement(_icons.ErrorFilled, {
       size: 16,
       className: (0, _classnames.default)(["".concat(blockClass, "__notification-status-icon"), "".concat(blockClass, "__notification-status-icon-error")])
-    }), notification.type === 'success' && /*#__PURE__*/_react.default.createElement(_iconsReact.CheckmarkFilled, {
+    }), notification.type === 'success' && /*#__PURE__*/_react.default.createElement(_icons.CheckmarkFilled, {
       size: 16,
       className: (0, _classnames.default)(["".concat(blockClass, "__notification-status-icon"), "".concat(blockClass, "__notification-status-icon-success")])
-    }), notification.type === 'warning' && /*#__PURE__*/_react.default.createElement(_iconsReact.WarningAltFilled, {
+    }), notification.type === 'warning' && /*#__PURE__*/_react.default.createElement(_icons.WarningAltFilled, {
       size: 16,
       className: (0, _classnames.default)(["".concat(blockClass, "__notification-status-icon"), "".concat(blockClass, "__notification-status-icon-warning")])
-    }), notification.type === 'informational' && /*#__PURE__*/_react.default.createElement(_iconsReact.InformationSquareFilled, {
+    }), notification.type === 'informational' && /*#__PURE__*/_react.default.createElement(_icons.InformationSquareFilled, {
       size: 16,
       className: (0, _classnames.default)(["".concat(blockClass, "__notification-status-icon"), "".concat(blockClass, "__notification-status-icon-informational")])
     }), /*#__PURE__*/_react.default.createElement("div", {
@@ -337,7 +337,7 @@ var NotificationsPanel = /*#__PURE__*/_react.default.forwardRef(function (_ref,
       onClick: function onClick(event) {
         return dismissSingleNotification(event, notification);
       }
-    }, /*#__PURE__*/_react.default.createElement(_iconsReact.Close, {
+    }, /*#__PURE__*/_react.default.createElement(_icons.Close, {
       size: 16
     })));
   };
@@ -413,7 +413,7 @@ var NotificationsPanel = /*#__PURE__*/_react.default.forwardRef(function (_ref,
     size: "sm",
     className: "".concat(blockClass, "__settings-button"),
     renderIcon: function renderIcon(props) {
-      return /*#__PURE__*/_react.default.createElement(_iconsReact.Settings, (0, _extends2.default)({
+      return /*#__PURE__*/_react.default.createElement(_icons.Settings, (0, _extends2.default)({
         size: 16
       }, props));
     },

package/lib/components/OptionsTile/OptionsTile.js

@@ -31,7 +31,7 @@ var _settings = require("../../settings");
 
 var _react2 = require("@carbon/react");
 
-var _iconsReact = require("@carbon/icons-react");
+var _icons = require("@carbon/react/icons");
 
 var carbonMotion = _interopRequireWildcard(require("@carbon/motion"));
 
@@ -194,15 +194,15 @@ var OptionsTile = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     var summaryClasses = ["".concat(blockClass, "__summary")];
 
     if (invalid) {
-      Icon = _iconsReact.WarningFilled;
+      Icon = _icons.WarningFilled;
       text = invalidText;
       summaryClasses.push("".concat(blockClass, "__summary--invalid"));
     } else if (warn) {
-      Icon = _iconsReact.WarningAltFilled;
+      Icon = _icons.WarningAltFilled;
       text = warnText;
       summaryClasses.push("".concat(blockClass, "__summary--warn"));
     } else if (locked) {
-      Icon = _iconsReact.Locked;
+      Icon = _icons.Locked;
       summaryClasses.push("".concat(blockClass, "__summary--locked"));
 
       if (!text) {
@@ -256,7 +256,7 @@ var OptionsTile = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   }, /*#__PURE__*/_react.default.createElement("summary", {
     className: "".concat(blockClass, "__header"),
     onClick: toggle
-  }, /*#__PURE__*/_react.default.createElement(_iconsReact.ChevronDown, {
+  }, /*#__PURE__*/_react.default.createElement(_icons.ChevronDown, {
     size: 16,
     className: "".concat(blockClass, "__chevron")
   }), renderTitle()), /*#__PURE__*/_react.default.createElement("div", {
@@ -264,7 +264,7 @@ var OptionsTile = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     ref: contentRef
   }, isLocked && /*#__PURE__*/_react.default.createElement("p", {
     className: "".concat(blockClass, "__locked-text")
-  }, /*#__PURE__*/_react.default.createElement(_iconsReact.Locked, {
+  }, /*#__PURE__*/_react.default.createElement(_icons.Locked, {
     size: 16
   }), lockedText), children)) : /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__static-content")

package/lib/components/PageHeader/PageHeader.js

@@ -45,7 +45,7 @@ var _TagSet = require("../TagSet/TagSet");
 
 var _ButtonSetWithOverflow = require("../ButtonSetWithOverflow");
 
-var _iconsReact = require("@carbon/icons-react");
+var _icons = require("@carbon/react/icons");
 
 var _PageHeaderUtils = require("./PageHeaderUtils");
 
@@ -484,7 +484,7 @@ var PageHeader = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     kind: "ghost",
     onClick: handleCollapseToggle,
     renderIcon: function renderIcon(props) {
-      return /*#__PURE__*/_react.default.createElement(_iconsReact.ChevronUp, (0, _extends2.default)({
+      return /*#__PURE__*/_react.default.createElement(_icons.ChevronUp, (0, _extends2.default)({
         size: 16
       }, props));
     },

package/lib/components/PageHeader/PageHeaderTitle.js

@@ -84,7 +84,9 @@ var PageHeaderTitle = function PageHeaderTitle(_ref) {
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)("".concat(blockClass, "__title"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__title--editable"), isEditable), (0, _defineProperty2.default)({}, "".concat(blockClass, "__title--fades"), hasBreadcrumbRow)),
     title: titleText
-  }, titleInnards);
+  }, /*#__PURE__*/_react.default.createElement("h1", {
+    className: "".concat(blockClass, "__title-wrapper")
+  }, titleInnards));
 };
 
 exports.PageHeaderTitle = PageHeaderTitle;

package/lib/components/ProductiveCard/ProductiveCard.js

@@ -135,6 +135,11 @@ ProductiveCard.propTypes = {
    */
   primaryButtonIcon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
 
+  /**
+   * Determines if the primary button is on the top or bottom of the card
+   */
+  primaryButtonPlacement: _propTypes.default.oneOf(['top', 'bottom']),
+
   /**
    * The text that's displayed in the primary button
    */

package/lib/components/Saving/Saving.js

@@ -21,7 +21,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _react2 = require("@carbon/react");
 
-var _iconsReact = require("@carbon/icons-react");
+var _icons = require("@carbon/react/icons");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -59,7 +59,7 @@ var Saving = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       text: defaultText,
       iconDescription: defaultIconDescription,
       icon: function icon(props) {
-        return /*#__PURE__*/_react.default.createElement(_iconsReact.CheckmarkOutline, (0, _extends2.default)({
+        return /*#__PURE__*/_react.default.createElement(_icons.CheckmarkOutline, (0, _extends2.default)({
           size: 16
         }, props));
       }
@@ -76,7 +76,7 @@ var Saving = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     text: successText,
     iconDescription: successIconDescription,
     icon: function icon(props) {
-      return /*#__PURE__*/_react.default.createElement(_iconsReact.Save, (0, _extends2.default)({
+      return /*#__PURE__*/_react.default.createElement(_icons.Save, (0, _extends2.default)({
         size: 16
       }, props));
     }
@@ -84,7 +84,7 @@ var Saving = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     text: failText,
     iconDescription: failIconDescription,
     icon: function icon(props) {
-      return /*#__PURE__*/_react.default.createElement(_iconsReact.ErrorOutline, (0, _extends2.default)({
+      return /*#__PURE__*/_react.default.createElement(_icons.ErrorOutline, (0, _extends2.default)({
         size: 16
       }, props));
     }
@@ -97,7 +97,7 @@ var Saving = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     className: "".concat(blockClass, "__message")
   }, status === 'fail' && /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__error-icon")
-  }, /*#__PURE__*/_react.default.createElement(_iconsReact.ErrorFilled, {
+  }, /*#__PURE__*/_react.default.createElement(_icons.ErrorFilled, {
     size: 16
   })), /*#__PURE__*/_react.default.createElement("p", {
     className: "".concat(blockClass, "__text")

package/lib/components/SidePanel/SidePanel.js

@@ -19,6 +19,8 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _framerMotion = require("framer-motion");
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -41,10 +43,12 @@ var _hooks = require("../../global/js/hooks");
 
 var _react2 = require("@carbon/react");
 
-var _iconsReact = require("@carbon/icons-react");
+var _icons = require("@carbon/react/icons");
 
 var _ActionSet = require("../ActionSet");
 
+var _variants = require("./motion/variants");
+
 var _excluded = ["actionToolbarButtons", "actions", "animateTitle", "children", "className", "closeIconDescription", "condensedActions", "currentStep", "includeOverlay", "labelText", "navigationBackIconDescription", "onNavigationBack", "onRequestClose", "onUnmount", "open", "placement", "preventCloseOnClickOutside", "selectorPageContent", "selectorPrimaryFocus", "size", "slideIn", "subtitle", "title"],
     _excluded2 = ["label", "kind", "icon", "leading", "disabled", "className", "onClick"];
 
@@ -106,20 +110,15 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
       title = _ref.title,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
 
-  var _useState = (0, _react.useState)(open),
+  var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      shouldRender = _useState2[0],
-      setRender = _useState2[1];
+      animationComplete = _useState2[0],
+      setAnimationComplete = _useState2[1];
 
-  var _useState3 = (0, _react.useState)(false),
+  var _useState3 = (0, _react.useState)(0),
       _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      animationComplete = _useState4[0],
-      setAnimationComplete = _useState4[1];
-
-  var _useState5 = (0, _react.useState)(0),
-      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-      panelHeight = _useState6[0],
-      setPanelHeight = _useState6[1];
+      panelHeight = _useState4[0],
+      setPanelHeight = _useState4[1];
 
   var sidePanelRef = (0, _react.useRef)();
   var sidePanelOverlayRef = (0, _react.useRef)();
@@ -149,8 +148,10 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
       // height css custom property
 
       if ((previousState === null || previousState === void 0 ? void 0 : previousState.size) !== size) {
+        var _sidePanelOuter$style;
+
         scrollableSection.scrollTop = 0;
-        sidePanelOuter.style.setProperty("--".concat(blockClass, "--title-container-height"), "".concat(Number(initialTitleHeight), "px"));
+        sidePanelOuter === null || sidePanelOuter === void 0 ? void 0 : (_sidePanelOuter$style = sidePanelOuter.style) === null || _sidePanelOuter$style === void 0 ? void 0 : _sidePanelOuter$style.setProperty("--".concat(blockClass, "--title-container-height"), "".concat(Number(initialTitleHeight), "px"));
       }
     }
   }, [currentStep, ref, size, previousState === null || previousState === void 0 ? void 0 : previousState.size]); // set initial focus when side panel opens
@@ -178,12 +179,14 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   }, [selectorPrimaryFocus, open, animationComplete]);
   (0, _react.useEffect)(function () {
     if (open && actions && actions.length && animationComplete) {
+      var _sidePanelOuter$style2;
+
       var sidePanelOuter = document.querySelector("#".concat(blockClass, "-outer"));
       var actionsContainer = getActionsContainerElement();
       var actionsHeight = (actionsContainer === null || actionsContainer === void 0 ? void 0 : actionsContainer.offsetHeight) + 16; // add additional 1rem spacing to bottom padding
 
       actionsHeight = "".concat(Math.round(actionsHeight / 16), "rem");
-      sidePanelOuter === null || sidePanelOuter === void 0 ? void 0 : sidePanelOuter.style.setProperty("--".concat(blockClass, "--content-bottom-padding"), actionsHeight);
+      sidePanelOuter === null || sidePanelOuter === void 0 ? void 0 : (_sidePanelOuter$style2 = sidePanelOuter.style) === null || _sidePanelOuter$style2 === void 0 ? void 0 : _sidePanelOuter$style2.setProperty("--".concat(blockClass, "--content-bottom-padding"), actionsHeight);
     }
   }, [actions, condensedActions, open, animationComplete]); // Add console warning if labelText is provided without a title.
   // This combination is not allowed.
@@ -196,13 +199,15 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   /* istanbul ignore next */
 
   var handleResize = function handleResize(width, height) {
+    var _sidePanelOuter$style3;
+
     setPanelHeight(height);
     var sidePanelOuter = document.querySelector("#".concat(blockClass, "-outer"));
     var actionsContainer = getActionsContainerElement();
-    var actionsHeight = actionsContainer.offsetHeight + 16; // add additional 1rem spacing to bottom padding
+    var actionsHeight = (actionsContainer === null || actionsContainer === void 0 ? void 0 : actionsContainer.offsetHeight) + 16; // add additional 1rem spacing to bottom padding
 
     actionsHeight = "".concat(Math.round(actionsHeight / 16), "rem");
-    sidePanelOuter.style.setProperty("--".concat(blockClass, "--content-bottom-padding"), actionsHeight);
+    sidePanelOuter === null || sidePanelOuter === void 0 ? void 0 : (_sidePanelOuter$style3 = sidePanelOuter.style) === null || _sidePanelOuter$style3 === void 0 ? void 0 : _sidePanelOuter$style3.setProperty("--".concat(blockClass, "--content-bottom-padding"), actionsHeight);
   };
 
   var getActionsContainerElement = function getActionsContainerElement() {
@@ -287,7 +292,7 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
       });
     }
 
-    if (open && shouldRender && !animateTitle) {
+    if (open && !animateTitle) {
       var _sidePanelOuter = document.querySelector("#".concat(blockClass, "-outer"));
 
       var _sidePanelTitleElement = document.querySelector(".".concat(blockClass, "__title-container .").concat(blockClass, "__title-text"));
@@ -308,7 +313,7 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
       _sidePanelOuter === null || _sidePanelOuter === void 0 ? void 0 : _sidePanelOuter.style.setProperty("--".concat(blockClass, "--action-bar-container-height"), "".concat(sidePanelActionBarElementHeight, "px"));
       _sidePanelOuter === null || _sidePanelOuter === void 0 ? void 0 : _sidePanelOuter.style.setProperty("--".concat(blockClass, "--label-text-height"), "".concat(labelHeight, "px"));
     }
-  }, [open, animateTitle, animationComplete, shouldRender, panelHeight, title, size, reducedMotion.matches]); // click outside functionality if `includeOverlay` prop is set
+  }, [open, animateTitle, animationComplete, panelHeight, title, size, reducedMotion.matches]); // click outside functionality if `includeOverlay` prop is set
 
   (0, _react.useEffect)(function () {
     var handleOutsideClick = function handleOutsideClick(event) {
@@ -334,18 +339,11 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     return function () {
       document.removeEventListener('click', handleOutsideClick);
     };
-  }, [includeOverlay, onRequestClose, open, preventCloseOnClickOutside, ref, onUnmount]); // initialize the side panel to open
-
-  (0, _react.useEffect)(function () {
-    if (open) {
-      setRender(true);
-    }
-  }, [open]); // initializes the side panel to close
+  }, [includeOverlay, onRequestClose, open, preventCloseOnClickOutside, ref, onUnmount]); // initializes the side panel to close
 
   var onAnimationEnd = function onAnimationEnd() {
     if (!open) {
       onUnmount === null || onUnmount === void 0 ? void 0 : onUnmount();
-      setRender(false);
     }
 
     setAnimationComplete(true);
@@ -359,13 +357,8 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     }
   }, [reducedMotion.matches]); // initializes the side panel to open
 
-  var _onAnimationStart = function onAnimationStart(event) {
-    event.persist();
-    var isPanelTarget = event.target.id === "".concat(blockClass, "-outer");
-
-    if (isPanelTarget) {
-      setAnimationComplete(false);
-    }
+  var _onAnimationStart = function onAnimationStart() {
+    setAnimationComplete(false);
   }; // used to reset margins of the slide in panel when closed/closing
 
 
@@ -382,13 +375,12 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   }, [open, placement, selectorPageContent, slideIn]);
   (0, _react.useEffect)(function () {
     if (!open && previousState !== null && previousState !== void 0 && previousState.open && reducedMotion.matches) {
-      setRender(false);
       onUnmount === null || onUnmount === void 0 ? void 0 : onUnmount();
     }
   }, [open, onUnmount, reducedMotion.matches, previousState === null || previousState === void 0 ? void 0 : previousState.open]); // used to set margins of content for slide in panel version
 
   (0, _react.useEffect)(function () {
-    if (shouldRender && slideIn) {
+    if (open && slideIn) {
       var pageContentElement = document.querySelector(selectorPageContent);
 
       if (placement && placement === 'right' && pageContentElement) {
@@ -401,7 +393,7 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
         pageContentElement.style.marginLeft = _constants.SIDE_PANEL_SIZES[size];
       }
     }
-  }, [slideIn, selectorPageContent, placement, shouldRender, size, reducedMotion.matches]); // adds focus trap functionality
+  }, [slideIn, selectorPageContent, placement, size, reducedMotion.matches, open]); // adds focus trap functionality
 
   /* istanbul ignore next */
 
@@ -435,7 +427,7 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
       size: "sm",
       disabled: false,
       renderIcon: function renderIcon(props) {
-        return /*#__PURE__*/_react.default.createElement(_iconsReact.ArrowLeft, (0, _extends2.default)({
+        return /*#__PURE__*/_react.default.createElement(_icons.ArrowLeft, (0, _extends2.default)({
           size: 20
         }, props));
       },
@@ -449,7 +441,7 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
       kind: "ghost",
       size: "sm",
       renderIcon: function renderIcon(props) {
-        return /*#__PURE__*/_react.default.createElement(_iconsReact.Close, (0, _extends2.default)({
+        return /*#__PURE__*/_react.default.createElement(_icons.Close, (0, _extends2.default)({
           size: 20
         }, props));
       },
@@ -506,20 +498,22 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     onResize: handleResize,
     targetRef: contentRef
   });
-  return shouldRender && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, (0, _devtools.getDevtoolsProps)(componentName), rest, {
+  return /*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, null, open && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_framerMotion.motion.div, (0, _extends2.default)({}, (0, _devtools.getDevtoolsProps)(componentName), rest, {
     id: "".concat(blockClass, "-outer"),
     className: mainPanelClassNames,
-    style: {
-      animation: !reducedMotion.matches ? "".concat(open ? placement === 'right' ? "side-panel-entrance-right ".concat(_motion.moderate02) : "side-panel-entrance-left ".concat(_motion.moderate02) : placement === 'right' ? "side-panel-exit-right ".concat(_motion.moderate02) : "side-panel-exit-left ".concat(_motion.moderate02)) : null
-    },
-    onAnimationEnd: onAnimationEnd,
-    onAnimationStart: function onAnimationStart(event) {
-      return _onAnimationStart(event);
-    },
     onBlur: handleBlur,
     ref: contentRef,
     role: "complementary",
-    "aria-label": title
+    "aria-label": title,
+    onAnimationComplete: onAnimationEnd,
+    onAnimationStart: function onAnimationStart(event) {
+      return _onAnimationStart(event);
+    },
+    variants: _variants.panelVariants,
+    initial: "hidden",
+    animate: "visible",
+    exit: "exit",
+    custom: placement
   }), /*#__PURE__*/_react.default.createElement("span", {
     ref: startTrapRef,
     tabIndex: "0",
@@ -539,13 +533,14 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     tabIndex: "0",
     role: "link",
     className: "".concat(blockClass, "__visually-hidden")
-  }, "Focus sentinel")), includeOverlay && /*#__PURE__*/_react.default.createElement("div", {
+  }, "Focus sentinel")), /*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, null, includeOverlay && /*#__PURE__*/_react.default.createElement(_framerMotion.motion.div, {
+    variants: _variants.overlayVariants,
+    initial: "hidden",
+    animate: "visible",
+    exit: "exit",
     ref: sidePanelOverlayRef,
-    className: "".concat(blockClass, "__overlay"),
-    style: {
-      animation: !reducedMotion.matches ? "".concat(open ? "side-panel-overlay-entrance ".concat(_motion.moderate02) : "side-panel-overlay-exit ".concat(_motion.moderate02)) : null
-    }
-  }));
+    className: "".concat(blockClass, "__overlay")
+  }))));
 }); // Return a placeholder if not released and not enabled by feature flag
 
 

package/lib/components/SidePanel/motion/variants.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.panelVariants = exports.overlayVariants = void 0;
+
+var _motionConstants = require("../../../global/js/utils/motionConstants");
+
+/**
+ * Copyright IBM Corp. 2022, 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.
+ */
+var overlayVariants = {
+  visible: {
+    opacity: 1,
+    transition: {
+      duration: _motionConstants.DURATIONS.moderate02,
+      ease: _motionConstants.EASINGS.productive.standard
+    }
+  },
+  hidden: {
+    opacity: 0
+  },
+  exit: {
+    opacity: 0
+  }
+};
+exports.overlayVariants = overlayVariants;
+var panelVariants = {
+  visible: {
+    x: 0,
+    transition: {
+      duration: _motionConstants.DURATIONS.moderate02,
+      ease: _motionConstants.EASINGS.productive.standard
+    }
+  },
+  hidden: function hidden(placement) {
+    return {
+      x: placement === 'right' ? '100%' : -320
+    };
+  },
+  exit: function exit(placement) {
+    return {
+      x: placement === 'right' ? '100%' : -320,
+      transition: {
+        duration: _motionConstants.DURATIONS.moderate01,
+        ease: _motionConstants.EASINGS.productive.exit
+      }
+    };
+  }
+};
+exports.panelVariants = panelVariants;