@carbon/ibm-products 2.43.2-canary.16 → 2.43.2-canary.162

package/lib/components/ProductiveCard/ProductiveCard.js

@@ -13,22 +13,24 @@ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelper
 var React = require('react');
 var index = require('../../node_modules/prop-types/index.js');
 var devtools = require('../../global/js/utils/devtools.js');
-var propsHelper = require('../../global/js/utils/props-helper.js');
 var settings = require('../../settings.js');
+var propsHelper = require('../../global/js/utils/props-helper.js');
 var Card = require('../Card/Card.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var _excluded = ["actionsPlacement"];
+var _excluded = ["actionsPlacement", "iconDescription"];
 var componentName = 'ProductiveCard';
 exports.ProductiveCard = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$actionsPlacement = _ref.actionsPlacement,
     actionsPlacement = _ref$actionsPlacement === void 0 ? 'top' : _ref$actionsPlacement,
+    iconDescription = _ref.iconDescription,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   var validProps = propsHelper.prepareProps(rest, ['media', 'mediaPosition', 'pictogram', 'primaryButtonClick', 'productive', 'secondaryButtonKind']);
   return /*#__PURE__*/React__default["default"].createElement(Card.Card, _rollupPluginBabelHelpers["extends"]({}, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, validProps), {}, {
+    iconDescription: iconDescription,
     actionsPlacement: actionsPlacement,
     ref: ref,
     productive: true
@@ -70,6 +72,10 @@ exports.ProductiveCard.propTypes = {
    * Optional header description
    */
   description: index["default"].oneOfType([index["default"].string, index["default"].object, index["default"].node]),
+  /**
+   * Tooltip icon description
+   */
+  iconDescription: index["default"].string,
   /**
    * Optional label for the top of the card
    */

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

@@ -1 +1,2 @@
-export { ProductiveCard } from "./ProductiveCard";
+export { ProductiveCard } from './ProductiveCard';
+export type { ProductiveCardProps } from './ProductiveCard';

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

@@ -1,11 +1,11 @@
 /// <reference path="../../../src/custom-typings/index.d.ts" />
-import React, { ReactNode } from 'react';
 import { ComposedModal } from '@carbon/react';
-interface RemoveModalProps extends React.ComponentProps<typeof ComposedModal> {
+import React, { ReactNode } from 'react';
+export interface RemoveModalProps extends React.ComponentProps<typeof ComposedModal> {
     /**
      * The content to be displayed in the body of the modal
      */
-    body: string;
+    body: ReactNode;
     /**
      * Optional classname
      */
@@ -58,6 +58,10 @@ interface RemoveModalProps extends React.ComponentProps<typeof ComposedModal> {
      * Specify the text for the primary button
      */
     primaryButtonText?: string;
+    /**
+     * Specify the danger description on the primary button
+     */
+    primaryDangerDescription?: string;
     /**
      * The name of the resource being acted upon
      */
@@ -78,4 +82,3 @@ interface RemoveModalProps extends React.ComponentProps<typeof ComposedModal> {
 export declare let RemoveModal: React.ForwardRefExoticComponent<RemoveModalProps & {
     children?: React.ReactNode;
 } & React.RefAttributes<unknown>>;
-export {};

package/lib/components/RemoveModal/RemoveModal.js

@@ -10,14 +10,14 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
-var React = require('react');
-var cx = require('classnames');
 var react = require('@carbon/react');
+var React = require('react');
 var index = require('../../node_modules/prop-types/index.js');
+var cx = require('classnames');
 var devtools = require('../../global/js/utils/devtools.js');
-var uuidv4 = require('../../global/js/utils/uuidv4.js');
 var settings = require('../../settings.js');
 var usePortalTarget = require('../../global/js/hooks/usePortalTarget.js');
+var uuidv4 = require('../../global/js/utils/uuidv4.js');
 var usePreviousValue = require('../../global/js/hooks/usePreviousValue.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -25,7 +25,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _excluded = ["body", "className", "iconDescription", "inputInvalidText", "inputLabelText", "inputPlaceholderText", "label", "onClose", "onRequestSubmit", "open", "portalTarget", "preventCloseOnClickOutside", "primaryButtonDisabled", "primaryButtonText", "resourceName", "secondaryButtonText", "textConfirmation", "title"];
+var _excluded = ["body", "className", "iconDescription", "inputInvalidText", "inputLabelText", "inputPlaceholderText", "label", "onClose", "onRequestSubmit", "open", "portalTarget", "preventCloseOnClickOutside", "primaryButtonDisabled", "primaryButtonText", "primaryDangerDescription", "resourceName", "secondaryButtonText", "textConfirmation", "title"];
 var componentName = 'RemoveModal';
 
 /**
@@ -49,6 +49,7 @@ exports.RemoveModal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     preventCloseOnClickOutside = _ref.preventCloseOnClickOutside,
     primaryButtonDisabled = _ref.primaryButtonDisabled,
     primaryButtonText = _ref.primaryButtonText,
+    primaryDangerDescription = _ref.primaryDangerDescription,
     resourceName = _ref.resourceName,
     secondaryButtonText = _ref.secondaryButtonText,
     textConfirmation = _ref.textConfirmation,
@@ -99,9 +100,9 @@ exports.RemoveModal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     title: title,
     label: label,
     iconDescription: iconDescription
-  }), /*#__PURE__*/React__default["default"].createElement(react.ModalBody, null, /*#__PURE__*/React__default["default"].createElement("p", {
+  }), /*#__PURE__*/React__default["default"].createElement(react.ModalBody, null, typeof body === 'string' ? /*#__PURE__*/React__default["default"].createElement("p", {
     className: "".concat(blockClass, "__body")
-  }, body), textConfirmation && /*#__PURE__*/React__default["default"].createElement(react.TextInput, {
+  }, body) : body, textConfirmation && /*#__PURE__*/React__default["default"].createElement(react.TextInput, {
     id: "".concat(idRef.current, "-confirmation-input"),
     className: "".concat(blockClass, "__input"),
     invalidText: inputInvalidText,
@@ -118,6 +119,7 @@ exports.RemoveModal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, secondaryButtonText), /*#__PURE__*/React__default["default"].createElement(react.Button, {
     type: "submit",
     kind: "danger",
+    dangerDescription: primaryDangerDescription,
     onClick: onRequestSubmit,
     disabled: primaryButtonStatus
   }, primaryButtonText))));
@@ -129,7 +131,7 @@ exports.RemoveModal.propTypes = {
   /**
    * The content to be displayed in the body of the modal
    */
-  body: index["default"].string.isRequired,
+  body: index["default"].node.isRequired,
   /**
    * Optional classname
    */
@@ -182,6 +184,10 @@ exports.RemoveModal.propTypes = {
    * Specify the text for the primary button
    */
   primaryButtonText: index["default"].string,
+  /**
+   * Specify the danger description on the primary button
+   */
+  primaryDangerDescription: index["default"].string,
   /**
    * The name of the resource being acted upon
    */

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

@@ -1 +1,2 @@
-export { RemoveModal } from "./RemoveModal";
+export { RemoveModal } from './RemoveModal';
+export type { RemoveModalProps } from './RemoveModal';

package/lib/components/Saving/Saving.d.ts

@@ -7,7 +7,7 @@
 import React from 'react';
 type Type = 'manual' | 'auto';
 type Status = 'default' | 'in-progress' | 'success' | 'fail';
-interface SavingProps {
+export interface SavingProps {
     /**
      * Provide an optional class to be applied to the containing node.
      */

package/lib/components/Saving/Saving.js

@@ -10,11 +10,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
-var React = require('react');
-var cx = require('classnames');
 var react = require('@carbon/react');
 var icons = require('@carbon/react/icons');
+var React = require('react');
 var index = require('../../node_modules/prop-types/index.js');
+var cx = require('classnames');
 var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');
 

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

@@ -1 +1,2 @@
-export { Saving } from "./Saving";
+export { Saving } from './Saving';
+export type { SavingProps } from './Saving';

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

@@ -7,7 +7,7 @@
 import React, { PropsWithChildren } from 'react';
 import PropTypes from 'prop-types';
 type Scopes = string[] | object[];
-interface SearchBarProps extends PropsWithChildren {
+export interface SearchBarProps extends PropsWithChildren {
     /** @type {string} Optional additional class name. */
     className?: string;
     /** @type {string} The label text for the search text input. */
@@ -17,7 +17,7 @@ interface SearchBarProps extends PropsWithChildren {
      */
     hideScopesLabel?: boolean;
     /** @type {string} The label text for the search text input. */
-    labelText?: string;
+    labelText: string;
     /** @type {Function} Function handler for when the user changes their query search. */
     onChange?: (event: any) => void;
     /** @type {Function} Function handler for when the user submits a search. */

package/lib/components/SearchBar/SearchBar.js

@@ -10,12 +10,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var react = require('@carbon/react');
 var React = require('react');
 var index = require('../../node_modules/prop-types/index.js');
 var cx = require('classnames');
 var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');
-var react = require('@carbon/react');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -144,7 +144,7 @@ exports.SearchBar = /*#__PURE__*/React__default["default"].forwardRef(function (
   })) : null, /*#__PURE__*/React__default["default"].createElement(react.Search, {
     className: "".concat(blockClass, "__input"),
     closeButtonLabelText: clearButtonLabelText,
-    labelText: labelText || '',
+    labelText: labelText,
     name: "search-input",
     onChange: handleInputChange,
     placeholder: placeholderText,
@@ -197,7 +197,7 @@ exports.SearchBar.propTypes = _rollupPluginBabelHelpers.objectSpread2({
    */
   hideScopesLabel: index["default"].bool,
   /** @type {string} The label text for the search text input. */
-  labelText: index["default"].string,
+  labelText: index["default"].string.isRequired,
   /** @type {Function} Function handler for when the user changes their query search. */
   onChange: index["default"].func,
   /** @type {Function} Function handler for when the user submits a search. */

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

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

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

@@ -143,7 +143,7 @@ type SidePanelSlideInProps = {
      */
     selectorPageContent: string;
 };
-type SidePanelProps = SidePanelBaseProps & SidePanelSlideInProps;
+export type SidePanelProps = SidePanelBaseProps & SidePanelSlideInProps;
 /**
  * Side panels keep users in-context of a page while performing tasks like navigating, editing, viewing details, or configuring something new.
  */

package/lib/components/SidePanel/SidePanel.js

@@ -10,20 +10,21 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
-var React = require('react');
 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('../../node_modules/prop-types/index.js');
+var constants = require('./constants.js');
+var propsHelper = require('../../global/js/utils/props-helper.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 variants = require('./motion/variants.js');
+var carbonMotion = require('@carbon/motion');
 var pconsole = require('../../global/js/utils/pconsole.js');
-var ActionSet = require('../ActionSet/ActionSet.js');
+var settings = require('../../settings.js');
+var usePrefersReducedMotion = require('../../global/js/hooks/usePrefersReducedMotion.js');
 var usePreviousValue = require('../../global/js/hooks/usePreviousValue.js');
 var useFocus = require('../../global/js/hooks/useFocus.js');
 
@@ -53,7 +54,6 @@ 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;
   var actionToolbarButtons = _ref.actionToolbarButtons,
     actions = _ref.actions,
     _ref$animateTitle = _ref.animateTitle,
@@ -120,13 +120,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 +168,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 +204,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 +220,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 +239,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 +280,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 +302,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 () {
@@ -316,15 +318,15 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
       }
       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 () {
@@ -350,7 +352,7 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
       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__default["default"].createElement("h2", {
       className: "".concat(blockClass, "__collapsed-title-text"),
       title: title,
       "aria-hidden": true
@@ -367,10 +369,9 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
       });
     }
     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)),
+      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"), shouldReduceMotion), "".concat(blockClass, "__header--has-title"), title)),
       ref: headerRef
     }, currentStep > 0 && /*#__PURE__*/React__default["default"].createElement(react.Button, {
-      "aria-label": navigationBackIconDescription,
       kind: "ghost",
       size: slugCloseSize,
       disabled: false,
@@ -391,6 +392,7 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
       className: "".concat(blockClass, "__close-button"),
       label: closeIconDescription,
       onClick: onRequestClose,
+      onKeyDown: slideIn ? undefined : handleEscapeKey,
       title: closeIconDescription,
       "aria-label": closeIconDescription,
       ref: closeRef,
@@ -443,6 +445,12 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
       className: cx__default["default"]("".concat(blockClass, "__inner-content"), "".concat(blockClass, "--scrolls"), "".concat(!doAnimateTitle ? "".concat(blockClass, "__inner-content--no-animated-title") : ''))
     }, children);
   };
+  var handleKeyDown = function handleKeyDown(event) {
+    if (!slideIn) {
+      handleEscapeKey(event);
+      keyDownListener(event);
+    }
+  };
   return /*#__PURE__*/React__default["default"].createElement(framerMotion.AnimatePresence, null, open && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(framerMotion.motion.div, _rollupPluginBabelHelpers["extends"]({}, devtools.getDevtoolsProps(componentName), rest, {
     id: id,
     className: mainPanelClassNames,
@@ -459,7 +467,7 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
       placement: placement,
       shouldReduceMotion: shouldReduceMotion
     },
-    onKeyDown: slideIn ? undefined : keyDownListener
+    onKeyDown: handleKeyDown
   }), /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, renderHeader(), renderMain()), /*#__PURE__*/React__default["default"].createElement(MotionActionSet, {
     actions: actions !== null && actions !== void 0 ? actions : [],
     className: primaryActionContainerClassNames,

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 };
 }

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

@@ -27,35 +27,34 @@ var overlayVariants = {
   }
 };
 var panelVariants = {
-  visible: function visible(_ref) {
-    var shouldReduceMotion = _ref.shouldReduceMotion;
+  visible: function visible() {
     return {
       x: 0,
       transition: {
         duration: motionConstants.DURATIONS.moderate02,
         ease: motionConstants.EASINGS.productive.standard
       },
-      opacity: shouldReduceMotion && 1
+      opacity: 1
     };
   },
-  hidden: function hidden(_ref2) {
-    var placement = _ref2.placement,
-      shouldReduceMotion = _ref2.shouldReduceMotion;
+  hidden: function hidden(_ref) {
+    var placement = _ref.placement,
+      shouldReduceMotion = _ref.shouldReduceMotion;
     return {
       x: placement === 'right' ? shouldReduceMotion ? 0 : '100%' : shouldReduceMotion ? 0 : -320,
-      opacity: shouldReduceMotion && 0
+      opacity: shouldReduceMotion ? 0 : 1
     };
   },
-  exit: function exit(_ref3) {
-    var placement = _ref3.placement,
-      shouldReduceMotion = _ref3.shouldReduceMotion;
+  exit: function exit(_ref2) {
+    var placement = _ref2.placement,
+      shouldReduceMotion = _ref2.shouldReduceMotion;
     return {
       x: placement === 'right' ? shouldReduceMotion ? 0 : '100%' : shouldReduceMotion ? 0 : -320,
       transition: {
         duration: motionConstants.DURATIONS.moderate01,
         ease: motionConstants.EASINGS.productive.exit
       },
-      opacity: shouldReduceMotion && 0
+      opacity: shouldReduceMotion ? 0 : 1
     };
   }
 };

package/lib/components/SingleAddSelect/SingleAddSelect.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Entry } from '../AddSelect/types';
-interface SingleAddSelectProps {
+export interface SingleAddSelectProps {
     /**
      * optional class name
      */
@@ -69,4 +69,3 @@ interface SingleAddSelectProps {
  * Used to add or select one or more items from larger lists or hierarchies.
  */
 export declare let SingleAddSelect: React.ForwardRefExoticComponent<SingleAddSelectProps & React.RefAttributes<HTMLDivElement>>;
-export {};

package/lib/components/SingleAddSelect/SingleAddSelect.js

@@ -11,11 +11,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
+var AddSelect = require('../AddSelect/AddSelect.js');
 var index = require('../../node_modules/prop-types/index.js');
 var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');
 var propsHelper = require('../../global/js/utils/props-helper.js');
-var AddSelect = require('../AddSelect/AddSelect.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

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

@@ -1 +1,2 @@
-export { SingleAddSelect } from "./SingleAddSelect";
+export { SingleAddSelect } from './SingleAddSelect';
+export type { SingleAddSelectProps } from './SingleAddSelect';

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

@@ -17,7 +17,7 @@ users to quickly assess and identify status and respond accordingly.
 type Size = 'sm' | 'md' | 'lg' | 'xl';
 type Theme = 'light' | 'dark';
 type Kind = 'fatal' | 'critical' | 'major-warning' | 'minor-warning' | 'undefined' | 'unknown' | 'normal' | 'info' | 'in-progress' | 'running' | 'pending';
-interface StatusIconProps extends PropsWithChildren {
+export interface StatusIconProps extends PropsWithChildren {
     /**
      * Provide an optional class to be applied to the modal root node.
      */

package/lib/components/StatusIcon/StatusIcon.js

@@ -10,10 +10,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var icons = require('@carbon/react/icons');
 var React = require('react');
 var index = require('../../node_modules/prop-types/index.js');
 var cx = require('classnames');
-var icons = require('@carbon/react/icons');
 var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');
 

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

@@ -1 +1,8 @@
-export { StatusIcon } from "./StatusIcon";
+/**
+ * Copyright IBM Corp. 2021, 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 { StatusIcon } from './StatusIcon';
+export type { StatusIconProps } from './StatusIcon';