@carbon/ibm-products 2.43.2-canary.3 → 2.43.2-canary.300

package/lib/components/SidePanel/SidePanel.js

@@ -7,32 +7,26 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
-var React = require('react');
 var framerMotion = require('framer-motion');
-var index = require('../../node_modules/prop-types/index.js');
-var cx = require('classnames');
-var carbonMotion = require('@carbon/motion');
-var devtools = require('../../global/js/utils/devtools.js');
-var propsHelper = require('../../global/js/utils/props-helper.js');
-var settings = require('../../settings.js');
-var constants = require('./constants.js');
-var react = require('@carbon/react');
 var icons = require('@carbon/react/icons');
+var react = require('@carbon/react');
+var React = require('react');
 var variants = require('./motion/variants.js');
-var pconsole = require('../../global/js/utils/pconsole.js');
 var ActionSet = require('../ActionSet/ActionSet.js');
-var usePreviousValue = require('../../global/js/hooks/usePreviousValue.js');
+var index = require('../../_virtual/index.js');
+var constants = require('./constants.js');
+var propsHelper = require('../../global/js/utils/props-helper.js');
+var cx = require('classnames');
+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');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
-
-var _excluded = ["actionToolbarButtons", "actions", "animateTitle", "children", "className", "closeIconDescription", "condensedActions", "currentStep", "id", "includeOverlay", "labelText", "navigationBackIconDescription", "onNavigationBack", "onRequestClose", "onUnmount", "open", "placement", "preventCloseOnClickOutside", "selectorPageContent", "selectorPrimaryFocus", "size", "slideIn", "slug", "subtitle", "title", "launcherButtonRef"],
+var _excluded = ["actionToolbarButtons", "actions", "aiLabel", "animateTitle", "children", "className", "closeIconDescription", "condensedActions", "currentStep", "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';
@@ -52,10 +46,10 @@ 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__default["default"].forwardRef(function (_ref, ref) {
-  var _window;
+exports.SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var actionToolbarButtons = _ref.actionToolbarButtons,
     actions = _ref.actions,
+    aiLabel = _ref.aiLabel,
     _ref$animateTitle = _ref.animateTitle,
     animateTitle = _ref$animateTitle === void 0 ? defaults.animateTitle : _ref$animateTitle,
     children = _ref.children,
@@ -120,13 +114,18 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
     keyDownListener = _useFocus.keyDownListener;
   var panelRefValue = sidePanelRef.current;
   var previousOpen = usePreviousValue.usePreviousValue(open);
-  var shouldReduceMotion = framerMotion.useReducedMotion();
+  var shouldReduceMotion = usePrefersReducedMotion.default();
 
   // Title animation on scroll related state
   var _useState7 = React.useState(0),
     _useState8 = _rollupPluginBabelHelpers.slicedToArray(_useState7, 2),
     labelTextHeight = _useState8[0],
     setLabelTextHeight = _useState8[1];
+  var handleEscapeKey = function handleEscapeKey(event) {
+    if (event.key === 'Escape' && open) {
+      onRequestClose === null || onRequestClose === void 0 || onRequestClose();
+    }
+  };
   React.useEffect(function () {
     if (open && !(titleRef !== null && titleRef !== void 0 && titleRef.current)) {
       setDoAnimateTitle(false);
@@ -163,9 +162,6 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
       titleItemsStyles(animationProgress);
     }
   }, [doAnimateTitle, panelRefValue === null || panelRefValue === void 0 ? void 0 : panelRefValue.style, scrollAnimationDistance, titleItemsStyles]);
-  var reducedMotion = typeof document !== '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 () {
@@ -202,7 +198,7 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
   }, [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 && !reducedMotion.matches) {
+    if (panelRefValue && open && animateTitle && animationComplete && titleRef !== null && titleRef !== void 0 && titleRef.current && title && title.length && !shouldReduceMotion) {
       var _labelTextRef$current3, _labelTextRef$current4, _subtitleRef$current$, _subtitleRef$current;
       var titleEl = titleRef.current;
       var labelHeight = (_labelTextRef$current3 = labelTextRef === null || labelTextRef === void 0 || (_labelTextRef$current4 = labelTextRef.current) === null || _labelTextRef$current4 === void 0 ? void 0 : _labelTextRef$current4.offsetHeight) !== null && _labelTextRef$current3 !== void 0 ? _labelTextRef$current3 : 0;
@@ -218,8 +214,8 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
       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);
+        var _window;
+        var innerComputed = (_window = window) === null || _window === void 0 ? void 0 : _window.getComputedStyle(innerContentRef.current);
         var innerPaddingHeight = innerComputed ? parseFloat(innerComputed === null || innerComputed === void 0 ? void 0 : innerComputed.paddingTop) + parseFloat(innerComputed === null || innerComputed === void 0 ? void 0 : innerComputed.paddingBottom) : 0;
         canDoAnimateTitle = (!!labelText || !!actionToolbarButtons || !!subtitle) && scrollEl.scrollHeight - scrollEl.clientHeight >= _scrollAnimationDistance + innerPaddingHeight;
       }
@@ -237,12 +233,12 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
 
   // Calculate scroll distances
   React.useEffect(function () {
-    if (panelRefValue && 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 && !shouldReduceMotion) {
       checkSetDoAnimateTitle();
     }
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [open, doAnimateTitle /* use do instead of animateTitle directly */, animationComplete, handleScroll, title, size, reducedMotion.matches, id]);
+  }, [open, doAnimateTitle /* use do instead of animateTitle directly */, animationComplete, handleScroll, title, size, shouldReduceMotion, id]);
 
   // click outside functionality if `includeOverlay` prop is set
   React.useEffect(function () {
@@ -278,10 +274,10 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
   // Set the internal state `animationComplete` to true if
   // prefers reduced motion is true
   React.useEffect(function () {
-    if (reducedMotion.matches) {
+    if (shouldReduceMotion) {
       setAnimationComplete(true);
     }
-  }, [reducedMotion.matches]);
+  }, [shouldReduceMotion]);
 
   // initializes the side panel to open
   var onAnimationStart = function onAnimationStart() {
@@ -300,10 +296,10 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
     }
   }, [open, placement, selectorPageContent, slideIn]);
   React.useEffect(function () {
-    if (!open && previousState && previousState['open'] && reducedMotion.matches) {
+    if (!open && previousState && previousState['open'] && shouldReduceMotion) {
       onUnmount === null || onUnmount === void 0 || onUnmount();
     }
-  }, [open, onUnmount, reducedMotion.matches, previousState]);
+  }, [open, onUnmount, shouldReduceMotion, previousState]);
 
   // used to set margins of content for slide in panel version
   React.useEffect(function () {
@@ -312,26 +308,26 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
       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.');
+        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) : '';
+        pageContentElement.style.transition = !shouldReduceMotion ? "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) : '';
+        pageContentElement.style.transition = !shouldReduceMotion ? "margin-inline-start ".concat(carbonMotion.moderate02) : '';
         pageContentElement.style.marginInlineStart = constants.SIDE_PANEL_SIZES[size];
       }
     }
-  }, [slideIn, selectorPageContent, placement, size, reducedMotion.matches, open]);
+  }, [slideIn, selectorPageContent, placement, size, shouldReduceMotion, open]);
   React.useEffect(function () {
     if (open) {
       setTimeout(function () {
-        if (selectorPrimaryFocus) {
-          var _document;
-          var primeFocusEl = (_document = document) === null || _document === void 0 ? void 0 : _document.querySelector(selectorPrimaryFocus);
-          if (primeFocusEl) {
+        if (selectorPrimaryFocus && useFocus.getSpecificElement(sidePanelRef === null || sidePanelRef === void 0 ? void 0 : sidePanelRef.current, selectorPrimaryFocus)) {
+          var _window2;
+          var primeFocusEl = useFocus.getSpecificElement(sidePanelRef === null || sidePanelRef === void 0 ? void 0 : sidePanelRef.current, selectorPrimaryFocus);
+          if (primeFocusEl && ((_window2 = window) === null || _window2 === void 0 || (_window2 = _window2.getComputedStyle(primeFocusEl)) === null || _window2 === void 0 ? void 0 : _window2.display) !== 'none') {
             primeFocusEl === null || primeFocusEl === void 0 || primeFocusEl.focus();
           }
         } else if (!slideIn) {
@@ -339,71 +335,81 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
         }
       }, 0);
     }
-  }, [animationComplete, firstElement, open, selectorPrimaryFocus, slideIn]);
-  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({}, "".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)]);
+  }, [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({}, "".concat(blockClass, "--right-placement"), placement === 'right'), "".concat(blockClass, "--left-placement"), placement === 'left'), "".concat(blockClass, "--slide-in"), slideIn), "".concat(blockClass, "--has-ai-label"), !!aiLabel || !!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)),
+    return /*#__PURE__*/React.createElement("div", {
+      className: cx("".concat(blockClass, "__title"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__title--no-label"), !labelTextRef.current)),
       ref: titleRef
-    }, /*#__PURE__*/React__default["default"].createElement("h2", {
+    }, /*#__PURE__*/React.createElement("h2", {
       className: "".concat(blockClass, "__title-text"),
       title: title,
       "aria-hidden": false
-    }, title), doAnimateTitle && !reducedMotion.matches && /*#__PURE__*/React__default["default"].createElement("h2", {
+    }, title), doAnimateTitle && !shouldReduceMotion && /*#__PURE__*/React.createElement("h2", {
       className: "".concat(blockClass, "__collapsed-title-text"),
       title: title,
       "aria-hidden": true
     }, title));
   };
   var renderHeader = function renderHeader() {
-    var _slug$type;
-    var slugCloseSize = actions && actions.length && /l/.test(size) ? 'md' : 'sm';
-    var normalizedSlug;
+    var _slug$type, _aiLabel$type;
+    var aiLabelCloseSize = actions && actions.length && /l/.test(size) ? 'md' : 'sm';
+    var normalizedAILabel;
+    /**
+     * 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) === 'Slug') {
-      normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
+      normalizedAILabel = /*#__PURE__*/React.cloneElement(slug, {
         // slug size is sm unless actions and size > md
-        size: slugCloseSize
+        size: aiLabelCloseSize
       });
     }
-    return /*#__PURE__*/React__default["default"].createElement("div", {
-      className: cx__default["default"]("".concat(blockClass, "__header"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__header--on-detail-step"), currentStep > 0), "".concat(blockClass, "__header--no-title-animation"), !animateTitle), "".concat(blockClass, "__header--reduced-motion"), reducedMotion.matches), "".concat(blockClass, "__header--has-title"), title)),
+    if (aiLabel && ((_aiLabel$type = aiLabel['type']) === null || _aiLabel$type === void 0 ? void 0 : _aiLabel$type.displayName) === 'AILabel') {
+      normalizedAILabel = /*#__PURE__*/React.cloneElement(aiLabel, {
+        // aiLabel size is sm unless actions and size > md
+        size: aiLabelCloseSize
+      });
+    }
+    return /*#__PURE__*/React.createElement("div", {
+      className: cx("".concat(blockClass, "__header"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__header--on-detail-step"), currentStep > 0), "".concat(blockClass, "__header--no-title-animation"), !animateTitle), "".concat(blockClass, "__header--reduced-motion"), shouldReduceMotion), "".concat(blockClass, "__header--has-title"), title)),
       ref: headerRef
-    }, currentStep > 0 && /*#__PURE__*/React__default["default"].createElement(react.Button, {
-      "aria-label": navigationBackIconDescription,
+    }, currentStep > 0 && /*#__PURE__*/React.createElement(react.Button, {
       kind: "ghost",
-      size: slugCloseSize,
+      size: aiLabelCloseSize,
       disabled: false,
       renderIcon: function renderIcon(props) {
-        return /*#__PURE__*/React__default["default"].createElement(icons.ArrowLeft, _rollupPluginBabelHelpers["extends"]({
+        return /*#__PURE__*/React.createElement(icons.ArrowLeft, _rollupPluginBabelHelpers.extends({
           size: 20
         }, props));
       },
       iconDescription: navigationBackIconDescription,
       className: "".concat(blockClass, "__navigation-back-button"),
       onClick: onNavigationBack
-    }), title && title.length && labelText && labelText.length && /*#__PURE__*/React__default["default"].createElement("p", {
+    }), title && title.length && labelText && labelText.length && /*#__PURE__*/React.createElement("p", {
       className: "".concat(blockClass, "__label-text"),
       ref: labelTextRef
-    }, labelText), title && title.length && renderTitle(), /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "".concat(blockClass, "__slug-and-close")
-    }, normalizedSlug, /*#__PURE__*/React__default["default"].createElement(react.IconButton, {
+    }, labelText), title && title.length && renderTitle(), /*#__PURE__*/React.createElement("div", {
+      className: "".concat(blockClass, "__ai-label-and-close")
+    }, normalizedAILabel, /*#__PURE__*/React.createElement(react.IconButton, {
       className: "".concat(blockClass, "__close-button"),
       label: closeIconDescription,
       onClick: onRequestClose,
+      onKeyDown: slideIn ? undefined : handleEscapeKey,
       title: closeIconDescription,
       "aria-label": closeIconDescription,
       ref: closeRef,
       align: "left"
-    }, /*#__PURE__*/React__default["default"].createElement(icons.Close, {
+    }, /*#__PURE__*/React.createElement(icons.Close, {
       size: 20,
       "aria-hidden": "true",
       tabIndex: "-1",
       className: "".concat(blockClass, "--btn__icon")
-    }))), subtitle && /*#__PURE__*/React__default["default"].createElement("p", {
-      className: cx__default["default"]("".concat(blockClass, "__subtitle-text"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__subtitle-text-no-animation-no-action-toolbar"), !doAnimateTitle && (!actionToolbarButtons || !actionToolbarButtons.length))),
+    }))), subtitle && /*#__PURE__*/React.createElement("p", {
+      className: cx("".concat(blockClass, "__subtitle-text"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__subtitle-text-no-animation-no-action-toolbar"), !doAnimateTitle && (!actionToolbarButtons || !actionToolbarButtons.length))),
       ref: subtitleRef
-    }, subtitle), actionToolbarButtons && actionToolbarButtons.length && /*#__PURE__*/React__default["default"].createElement("div", {
+    }, subtitle), actionToolbarButtons && actionToolbarButtons.length && /*#__PURE__*/React.createElement("div", {
       className: "".concat(blockClass, "__action-toolbar")
     }, actionToolbarButtons.map(function (_ref4) {
       var label = _ref4.label,
@@ -419,7 +425,7 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
         className = _ref4.className,
         onClick = _ref4.onClick,
         rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref4, _excluded2);
-      return /*#__PURE__*/React__default["default"].createElement(react.Button, _rollupPluginBabelHelpers["extends"]({}, rest, {
+      return /*#__PURE__*/React.createElement(react.Button, _rollupPluginBabelHelpers.extends({}, rest, {
         key: label,
         kind: kind || 'ghost',
         size: "sm",
@@ -431,19 +437,25 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
       }, {
         hasIconOnly: hasIconOnly,
         disabled: disabled,
-        className: cx__default["default"](["".concat(blockClass, "__action-toolbar-button"), className, _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__action-toolbar-leading-button"), leading)]),
+        className: cx(["".concat(blockClass, "__action-toolbar-button"), className, _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__action-toolbar-leading-button"), leading)]),
         onClick: onClick
       }), leading && label);
     })));
   };
   var renderMain = function renderMain() {
-    return /*#__PURE__*/React__default["default"].createElement("div", {
+    return /*#__PURE__*/React.createElement("div", {
       ref: innerContentRef,
       onScroll: handleScroll,
-      className: cx__default["default"]("".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 ? "".concat(blockClass, "__inner-content--no-animated-title") : ''))
     }, children);
   };
-  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, {
+  var handleKeyDown = function handleKeyDown(event) {
+    if (!slideIn) {
+      handleEscapeKey(event);
+      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, {
     id: id,
     className: mainPanelClassNames,
     ref: sidePanelRef,
@@ -459,14 +471,14 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
       placement: placement,
       shouldReduceMotion: shouldReduceMotion
     },
-    onKeyDown: slideIn ? undefined : keyDownListener
-  }), /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, renderHeader(), renderMain()), /*#__PURE__*/React__default["default"].createElement(MotionActionSet, {
+    onKeyDown: handleKeyDown
+  }), /*#__PURE__*/React.createElement(React.Fragment, null, renderHeader(), renderMain()), /*#__PURE__*/React.createElement(MotionActionSet, {
     actions: actions !== null && actions !== void 0 ? actions : [],
     className: primaryActionContainerClassNames,
     size: size === 'xs' ? 'sm' : size,
     custom: shouldReduceMotion,
     variants: variants.actionSetVariants
-  })), /*#__PURE__*/React__default["default"].createElement(framerMotion.AnimatePresence, null, includeOverlay && /*#__PURE__*/React__default["default"].createElement(framerMotion.motion.div, {
+  })), /*#__PURE__*/React.createElement(framerMotion.AnimatePresence, null, includeOverlay && /*#__PURE__*/React.createElement(framerMotion.motion.div, {
     variants: variants.overlayVariants,
     initial: "hidden",
     animate: "visible",
@@ -478,19 +490,26 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
 
 // Return a placeholder if not released and not enabled by feature flag
 exports.SidePanel = settings.pkg.checkComponentEnabled(exports.SidePanel, componentName);
-exports.SidePanel.propTypes = {
+var deprecatedProps = {
+  /**
+   * **deprecated**
+   *  **Experimental:** Provide a `Slug` component to be rendered inside the `SidePanel` component
+   */
+  slug: index.default.node
+};
+exports.SidePanel.propTypes = _rollupPluginBabelHelpers.objectSpread2({
   /**
    * Sets the action toolbar buttons
    */
   /**@ts-ignore */
-  actionToolbarButtons: index["default"].arrayOf(index["default"].shape({
-    label: index["default"].string,
-    leading: index["default"].bool,
-    icon: index["default"].oneOfType([index["default"].object, index["default"].func]),
-    onClick: index["default"].func,
-    kind: index["default"].oneOf(['ghost', 'tertiary', 'secondary', 'primary']),
-    tooltipAlignment: index["default"].oneOf(['top', 'right', 'bottom', 'left']),
-    tooltipPosition: index["default"].oneOf(['start', 'center', 'end'])
+  actionToolbarButtons: index.default.arrayOf(index.default.shape({
+    label: index.default.string,
+    leading: index.default.bool,
+    icon: index.default.oneOfType([index.default.object, index.default.func]),
+    onClick: index.default.func,
+    kind: index.default.oneOf(['ghost', 'tertiary', 'secondary', 'primary']),
+    tooltipAlignment: index.default.oneOf(['top', 'right', 'bottom', 'left']),
+    tooltipPosition: index.default.oneOf(['start', 'center', 'end'])
   })),
   /**
    * The primary actions to be shown in the side panel. Each action is
@@ -509,12 +528,12 @@ exports.SidePanel.propTypes = {
    * See https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
    */
   actions: propsHelper.allPropTypes([/**@ts-ignore*/
-  ActionSet.ActionSet.validateActions(), index["default"].arrayOf(index["default"].shape(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, react.Button.propTypes), {}, {
-    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']),
-    label: index["default"].string,
-    loading: index["default"].bool,
+  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']),
+    label: index.default.string,
+    loading: index.default.bool,
     // we duplicate this Button prop to improve the DocGen here
     /**@ts-ignore */
     onClick: react.Button.propTypes.onClick
@@ -522,80 +541,80 @@ exports.SidePanel.propTypes = {
   /**
    * Determines if the title will animate on scroll
    */
-  animateTitle: index["default"].bool,
+  animateTitle: index.default.bool,
   /**
    * Sets the body content of the side panel
    */
-  children: index["default"].oneOfType([index["default"].arrayOf(index["default"].node), index["default"].node]).isRequired,
+  children: index.default.oneOfType([index.default.arrayOf(index.default.node), index.default.node]).isRequired,
   /**
    * Sets an optional className to be added to the side panel outermost element
    */
-  className: index["default"].string,
+  className: index.default.string,
   /**
    * Sets the close button icon description
    */
-  closeIconDescription: index["default"].string,
+  closeIconDescription: index.default.string,
   /**
    * Determines whether the side panel should render the condensed version (affects action buttons primarily)
    */
-  condensedActions: index["default"].bool,
+  condensedActions: index.default.bool,
   /**
    * Sets the current step of the side panel
    */
-  currentStep: index["default"].number,
+  currentStep: index.default.number,
   /**
    * Unique identifier
    */
-  id: index["default"].string,
+  id: index.default.string,
   /**
    * Determines whether the side panel should render with an overlay
    */
-  includeOverlay: index["default"].bool,
+  includeOverlay: index.default.bool,
   /**
    * Sets the label text which will display above the title text
    */
-  labelText: index["default"].string,
+  labelText: index.default.string,
   /**
    * Provide a ref to return focus to once the modal is closed.
    */
   /**@ts-ignore */
-  launcherButtonRef: index["default"].any,
+  launcherButtonRef: index.default.any,
   /**
    * Sets the icon description for the navigation back icon button
    */
-  navigationBackIconDescription: index["default"].string,
+  navigationBackIconDescription: index.default.string,
   /**
    * Changes the current side panel page to the previous page
    */
-  onNavigationBack: index["default"].func,
+  onNavigationBack: index.default.func,
   /**
    * Specify a handler for closing the side panel.
    * This handler closes the modal, e.g. changing `open` prop.
    */
-  onRequestClose: index["default"].func,
+  onRequestClose: index.default.func,
   /**
    * 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: index["default"].func,
+  onUnmount: index.default.func,
   /**
    * Determines whether the side panel should render or not
    */
-  open: index["default"].bool.isRequired,
+  open: index.default.bool.isRequired,
   /**
    * Determines if the side panel is on the right or left
    */
-  placement: index["default"].oneOf(['left', 'right']),
+  placement: index.default.oneOf(['left', 'right']),
   /**
    * Prevent closing on click outside of the panel
    */
-  preventCloseOnClickOutside: index["default"].bool,
+  preventCloseOnClickOutside: index.default.bool,
   /**
    * 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) {
+  selectorPageContent: index.default.string.isRequired.if(function (_ref6) {
     var slideIn = _ref6.slideIn;
     return slideIn;
   }),
@@ -604,32 +623,28 @@ exports.SidePanel.propTypes = {
    * be focused when the side panel opens
    */
   /**@ts-ignore*/
-  selectorPrimaryFocus: index["default"].string,
+  selectorPrimaryFocus: index.default.string,
   /**
    * Sets the size of the side panel
    */
   /**@ts-ignore*/
-  size: index["default"].oneOf(['xs', 'sm', 'md', 'lg', 'xl', '2xl']),
+  size: index.default.oneOf(['xs', 'sm', 'md', 'lg', 'xl', '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
-   */
-  slug: index["default"].node,
+  slideIn: index.default.bool,
   /**
    * Sets the subtitle text
    */
-  subtitle: index["default"].node,
+  subtitle: index.default.node,
   /**
    * Sets the title text
    */
   /**@ts-ignore*/
-  title: index["default"].string.isRequired.if(function (_ref7) {
+  title: index.default.string.isRequired.if(function (_ref7) {
     var labelText = _ref7.labelText;
     return labelText;
   })
-};
+}, deprecatedProps);
 exports.SidePanel.displayName = componentName;

package/lib/components/SidePanel/constants.js

@@ -7,8 +7,6 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var SIDE_PANEL_SIZES = {
   xs: '16rem',
   sm: '20rem',

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

@@ -1 +1,8 @@
-export { SidePanel } from "./SidePanel";
+/**
+ * Copyright IBM Corp. 2020, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export { SidePanel } from './SidePanel';
+export type { SidePanelProps } from './SidePanel';

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

@@ -16,15 +16,13 @@ export namespace overlayVariants {
     }
 }
 export namespace panelVariants {
-    export function visible_1({ shouldReduceMotion }: {
-        shouldReduceMotion: any;
-    }): {
+    export function visible_1(): {
         x: number;
         transition: {
             duration: number;
             ease: number[];
         };
-        opacity: any;
+        opacity: number;
     };
     export { visible_1 as visible };
     export function hidden_1({ placement, shouldReduceMotion }: {
@@ -32,7 +30,7 @@ export namespace panelVariants {
         shouldReduceMotion: any;
     }): {
         x: string | number;
-        opacity: any;
+        opacity: number;
     };
     export { hidden_1 as hidden };
     export function exit_1({ placement, shouldReduceMotion }: {
@@ -44,7 +42,7 @@ export namespace panelVariants {
             duration: number;
             ease: number[];
         };
-        opacity: any;
+        opacity: number;
     };
     export { exit_1 as exit };
 }