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

package/es/components/ImportModal/ImportModal.js

@@ -18,7 +18,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 // LICENSE file in the root directory of this source tree.
 //
 import React, { useState, forwardRef } from 'react';
-import { Add } from '@carbon/icons-react';
+import { Add } from '@carbon/react/icons';
 import { ComposedModal, ModalHeader, ModalFooter, ModalBody, FileUploaderDropContainer, FileUploaderItem, TextInput, Button, usePrefix } from '@carbon/react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
@@ -77,9 +77,9 @@ export var ImportModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
     var acceptSet = new Set(accept);
     var name = file.name;
     var mimeType = file.type;
-    var extension = name.split('.').pop();
+    var extension = ".".concat(name.split('.').pop());
 
-    if (acceptSet.has(mimeType) || acceptSet.has(extension)) {
+    if (acceptSet.has(mimeType) || acceptSet.has(extension) || accept.length === 0) {
       return false;
     }
 

package/es/components/InlineEdit/InlineEdit.js

@@ -22,7 +22,7 @@ import { pkg } from '../../settings'; // Carbon and package components we use.
 /* TODO: @use(s) of carbon components and other package components. */
 
 import { Button, IconButton, usePrefix } from '@carbon/react';
-import { Close, Edit, EditOff, Checkmark, WarningFilled } from '@carbon/icons-react'; // The block part of our conventional BEM class names (blockClass__E--M).
+import { Close, Edit, EditOff, Checkmark, WarningFilled } from '@carbon/react/icons'; // The block part of our conventional BEM class names (blockClass__E--M).
 
 var blockClass = "".concat(pkg.prefix, "--inline-edit");
 var componentName = 'InlineEdit'; // NOTE: the component SCSS is not imported here: it is rolled up separately.
@@ -40,7 +40,7 @@ var buttons = ['cancel', 'edit', 'save'];
  */
 
 export var InlineEdit = /*#__PURE__*/React.forwardRef(function (_ref, refIn) {
-  var _cx, _refInput$current, _refInput$current$inn, _cx3;
+  var _cx, _refInput$current, _refInput$current$tex, _cx3;
 
   var buttonTooltipAlignment = _ref.buttonTooltipAlignment,
       buttonTooltipPosition = _ref.buttonTooltipPosition,
@@ -66,7 +66,9 @@ export var InlineEdit = /*#__PURE__*/React.forwardRef(function (_ref, refIn) {
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var carbonPrefix = usePrefix();
-  var refInput = useRef(null);
+  var refInput = useRef({
+    textContent: value
+  });
   var localRef = useRef(null);
   var ref = refIn || localRef;
 
@@ -149,15 +151,15 @@ export var InlineEdit = /*#__PURE__*/React.forwardRef(function (_ref, refIn) {
     document.getSelection().removeAllRanges();
 
     if (onSave) {
-      onSave(refInput.current.innerText);
+      onSave(refInput.current.textContent);
     }
   };
 
   var handleInput = function handleInput() {
-    setInternalValue(refInput.current.innerText);
+    setInternalValue(refInput.current.textContent);
 
     if (onChange) {
-      onChange(refInput.current.innerText);
+      onChange(refInput.current.textContent);
     }
   }; // pasting into contentEditable not supported by userEvent
 
@@ -192,7 +194,7 @@ export var InlineEdit = /*#__PURE__*/React.forwardRef(function (_ref, refIn) {
   };
 
   var handleCancel = function handleCancel() {
-    refInput.current.innerText = value;
+    refInput.current.textContent = value;
     handleInput(value);
     doSetEditing(false);
     document.getSelection().removeAllRanges();
@@ -260,7 +262,7 @@ export var InlineEdit = /*#__PURE__*/React.forwardRef(function (_ref, refIn) {
     }, /*#__PURE__*/React.createElement("div", _extends({}, rest, getDevtoolsProps(componentName), {
       id: id,
       size: size,
-      className: cx("".concat(blockClass, "__input"), _defineProperty({}, "".concat(blockClass, "__input--empty"), ((_refInput$current = refInput.current) === null || _refInput$current === void 0 ? void 0 : (_refInput$current$inn = _refInput$current.innerText) === null || _refInput$current$inn === void 0 ? void 0 : _refInput$current$inn.length) === 0)),
+      className: cx("".concat(blockClass, "__input"), _defineProperty({}, "".concat(blockClass, "__input--empty"), ((_refInput$current = refInput.current) === null || _refInput$current === void 0 ? void 0 : (_refInput$current$tex = _refInput$current.textContent) === null || _refInput$current$tex === void 0 ? void 0 : _refInput$current$tex.length) === 0)),
       contentEditable: true,
       "aria-label": labelText,
       role: "textbox",
@@ -271,7 +273,7 @@ export var InlineEdit = /*#__PURE__*/React.forwardRef(function (_ref, refIn) {
       onPaste: handlePaste,
       suppressContentEditableWarning: true,
       ref: refInput,
-      "data-placeholder": placeholder !== null && placeholder !== void 0 ? placeholder : labelText
+      "data-placeholder": placeholder
     }), value), /*#__PURE__*/React.createElement("div", {
       className: cx("".concat(blockClass, "__after-input-elements")) // tabindex -1 fixes blur target test when clicking on after-input-elements background
       ,

package/es/components/ModifiedTabs/ModifiedTabLabelNew.js

@@ -6,7 +6,7 @@
 //
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Add } from '@carbon/icons-react';
+import { Add } from '@carbon/react/icons';
 import { pkg } from '../../settings';
 var blockClass = "".concat(pkg.prefix, "--modified-tabs");
 export var ModifiedTabLabelNew = function ModifiedTabLabelNew(_ref) {

package/es/components/ModifiedTabs/ModifiedTabLabelWithClose.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Close, CloseFilled } from '@carbon/icons-react';
+import { Close, CloseFilled } from '@carbon/react/icons';
 import { pkg } from '../../settings';
 var blockClass = "".concat(pkg.prefix, "--modified-tabs");
 export var ModifiedTabLabelWithClose = function ModifiedTabLabelWithClose(_ref) {

package/es/components/NotificationsPanel/NotificationsPanel.js

@@ -22,7 +22,7 @@ import { timeAgo } from './utils';
 import { NotificationsEmptyState } from '../EmptyStates/NotificationsEmptyState'; // Carbon and package components we use.
 
 import { Button, Link, Toggle, IconButton } from '@carbon/react';
-import { ErrorFilled, WarningAltFilled, CheckmarkFilled, InformationSquareFilled, ChevronDown, Close, Settings } from '@carbon/icons-react';
+import { ErrorFilled, WarningAltFilled, CheckmarkFilled, InformationSquareFilled, ChevronDown, Close, Settings } from '@carbon/react/icons';
 import { usePreviousValue } from '../../global/js/hooks'; // The block part of our conventional BEM class names (blockClass__E--M).
 
 var componentName = 'NotificationsPanel';

package/es/components/OptionsTile/OptionsTile.js

@@ -20,7 +20,7 @@ import uuidv4 from '../../global/js/utils/uuidv4';
 import { pkg } from '../../settings'; // Carbon and package components we use.
 
 import { Toggle } from '@carbon/react';
-import { ChevronDown, Locked, WarningAltFilled, WarningFilled } from '@carbon/icons-react';
+import { ChevronDown, Locked, WarningAltFilled, WarningFilled } from '@carbon/react/icons';
 import * as carbonMotion from '@carbon/motion'; // The block part of our conventional BEM class names (blockClass__E--M).
 
 var blockClass = "".concat(pkg.prefix, "--options-tile");

package/es/components/PageHeader/PageHeader.js

@@ -29,7 +29,7 @@ import { ActionBar } from '../ActionBar/';
 import { BreadcrumbWithOverflow } from '../BreadcrumbWithOverflow';
 import { TagSet, string_required_if_more_than_10_tags } from '../TagSet/TagSet';
 import { ButtonSetWithOverflow } from '../ButtonSetWithOverflow';
-import { ChevronUp } from '@carbon/icons-react';
+import { ChevronUp } from '@carbon/react/icons';
 var componentName = 'PageHeader';
 import { blockClass, utilCheckUpdateVerticalSpace, utilGetBreadcrumbItemForTitle, utilSetCollapsed } from './PageHeaderUtils';
 import { PageHeaderTitle } from './PageHeaderTitle'; // Default values for props

package/es/components/PageHeader/PageHeaderTitle.js

@@ -68,7 +68,9 @@ export var PageHeaderTitle = function PageHeaderTitle(_ref) {
   return /*#__PURE__*/React.createElement("div", {
     className: cx("".concat(blockClass, "__title"), _defineProperty({}, "".concat(blockClass, "__title--editable"), isEditable), _defineProperty({}, "".concat(blockClass, "__title--fades"), hasBreadcrumbRow)),
     title: titleText
-  }, titleInnards);
+  }, /*#__PURE__*/React.createElement("h1", {
+    className: "".concat(blockClass, "__title-wrapper")
+  }, titleInnards));
 };
 export var inlineEditRequired = function inlineEditRequired(_ref2) {
   var onSave = _ref2.onSave;

package/es/components/ProductiveCard/ProductiveCard.js

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

package/es/components/Saving/Saving.js

@@ -12,7 +12,7 @@ var _excluded = ["secondaryButtonText", "className", "defaultIconDescription", "
 import React, { forwardRef } from 'react';
 import cx from 'classnames';
 import { Button, InlineLoading } from '@carbon/react';
-import { Save, CheckmarkOutline, ErrorOutline, ErrorFilled } from '@carbon/icons-react';
+import { Save, CheckmarkOutline, ErrorOutline, ErrorFilled } from '@carbon/react/icons';
 import PropTypes from 'prop-types';
 import { getDevtoolsProps } from '../../global/js/utils/devtools';
 import { pkg } from '../../settings';

package/es/components/SidePanel/SidePanel.js

@@ -16,7 +16,8 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  * LICENSE file in the root directory of this source tree.
  */
 // Import portions of React that are needed.
-import React, { useState, useEffect, useRef } from 'react'; // Other standard imports.
+import React, { useState, useEffect, useRef } from 'react';
+import { motion, AnimatePresence } from 'framer-motion'; // Other standard imports.
 
 import PropTypes from 'prop-types';
 import cx from 'classnames';
@@ -30,8 +31,9 @@ import { SIDE_PANEL_SIZES } from './constants';
 import { usePreviousValue } from '../../global/js/hooks'; // Carbon and package components we use.
 
 import { Button } from '@carbon/react';
-import { Close, ArrowLeft } from '@carbon/icons-react';
+import { Close, ArrowLeft } from '@carbon/react/icons';
 import { ActionSet } from '../ActionSet';
+import { overlayVariants, panelVariants } from './motion/variants';
 var blockClass = "".concat(pkg.prefix, "--side-panel");
 var componentName = 'SidePanel'; // NOTE: the component SCSS is not imported here: it is rolled up separately.
 // Default values for props
@@ -82,20 +84,15 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       title = _ref.title,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  var _useState = useState(open),
+  var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
-      shouldRender = _useState2[0],
-      setRender = _useState2[1];
+      animationComplete = _useState2[0],
+      setAnimationComplete = _useState2[1];
 
-  var _useState3 = useState(false),
+  var _useState3 = useState(0),
       _useState4 = _slicedToArray(_useState3, 2),
-      animationComplete = _useState4[0],
-      setAnimationComplete = _useState4[1];
-
-  var _useState5 = useState(0),
-      _useState6 = _slicedToArray(_useState5, 2),
-      panelHeight = _useState6[0],
-      setPanelHeight = _useState6[1];
+      panelHeight = _useState4[0],
+      setPanelHeight = _useState4[1];
 
   var sidePanelRef = useRef();
   var sidePanelOverlayRef = useRef();
@@ -125,8 +122,10 @@ export var SidePanel = /*#__PURE__*/React.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
@@ -154,12 +153,14 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, [selectorPrimaryFocus, open, animationComplete]);
   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.
@@ -172,13 +173,15 @@ export var SidePanel = /*#__PURE__*/React.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() {
@@ -263,7 +266,7 @@ export var SidePanel = /*#__PURE__*/React.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"));
@@ -284,7 +287,7 @@ export var SidePanel = /*#__PURE__*/React.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
 
   useEffect(function () {
     var handleOutsideClick = function handleOutsideClick(event) {
@@ -310,18 +313,11 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     return function () {
       document.removeEventListener('click', handleOutsideClick);
     };
-  }, [includeOverlay, onRequestClose, open, preventCloseOnClickOutside, ref, onUnmount]); // initialize the side panel to open
-
-  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);
@@ -335,13 +331,8 @@ export var SidePanel = /*#__PURE__*/React.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
 
 
@@ -358,13 +349,12 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, [open, placement, selectorPageContent, slideIn]);
   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
 
   useEffect(function () {
-    if (shouldRender && slideIn) {
+    if (open && slideIn) {
       var pageContentElement = document.querySelector(selectorPageContent);
 
       if (placement && placement === 'right' && pageContentElement) {
@@ -377,7 +367,7 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         pageContentElement.style.marginLeft = 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 */
 
@@ -483,20 +473,22 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onResize: handleResize,
     targetRef: contentRef
   });
-  return shouldRender && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", _extends({}, getDevtoolsProps(componentName), rest, {
+  return /*#__PURE__*/React.createElement(AnimatePresence, null, open && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(motion.div, _extends({}, getDevtoolsProps(componentName), rest, {
     id: "".concat(blockClass, "-outer"),
     className: mainPanelClassNames,
-    style: {
-      animation: !reducedMotion.matches ? "".concat(open ? placement === 'right' ? "side-panel-entrance-right ".concat(moderate02) : "side-panel-entrance-left ".concat(moderate02) : placement === 'right' ? "side-panel-exit-right ".concat(moderate02) : "side-panel-exit-left ".concat(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: panelVariants,
+    initial: "hidden",
+    animate: "visible",
+    exit: "exit",
+    custom: placement
   }), /*#__PURE__*/React.createElement("span", {
     ref: startTrapRef,
     tabIndex: "0",
@@ -516,13 +508,14 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     tabIndex: "0",
     role: "link",
     className: "".concat(blockClass, "__visually-hidden")
-  }, "Focus sentinel")), includeOverlay && /*#__PURE__*/React.createElement("div", {
+  }, "Focus sentinel")), /*#__PURE__*/React.createElement(AnimatePresence, null, includeOverlay && /*#__PURE__*/React.createElement(motion.div, {
+    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(moderate02) : "side-panel-overlay-exit ".concat(moderate02)) : null
-    }
-  }));
+    className: "".concat(blockClass, "__overlay")
+  }))));
 }); // Return a placeholder if not released and not enabled by feature flag
 
 SidePanel = pkg.checkComponentEnabled(SidePanel, componentName);

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

@@ -0,0 +1,45 @@
+/**
+ * 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.
+ */
+import { DURATIONS, EASINGS } from '../../../global/js/utils/motionConstants';
+export var overlayVariants = {
+  visible: {
+    opacity: 1,
+    transition: {
+      duration: DURATIONS.moderate02,
+      ease: EASINGS.productive.standard
+    }
+  },
+  hidden: {
+    opacity: 0
+  },
+  exit: {
+    opacity: 0
+  }
+};
+export var panelVariants = {
+  visible: {
+    x: 0,
+    transition: {
+      duration: DURATIONS.moderate02,
+      ease: 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: DURATIONS.moderate01,
+        ease: EASINGS.productive.exit
+      }
+    };
+  }
+};

package/es/components/StatusIcon/StatusIcon.js

@@ -12,7 +12,7 @@ var _excluded = ["kind", "theme", "size", "className", "iconDescription"];
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { Misuse, ErrorFilled, WarningAltInvertedFilled, WarningAltFilled, UndefinedFilled, UnknownFilled, CheckmarkFilled, InformationSquareFilled, Renew, Time } from '@carbon/icons-react';
+import { Misuse, ErrorFilled, WarningAltInvertedFilled, WarningAltFilled, UndefinedFilled, UnknownFilled, CheckmarkFilled, InformationSquareFilled, Renew, Time } from '@carbon/react/icons';
 import { getDevtoolsProps } from '../../global/js/utils/devtools';
 import { pkg } from '../../settings';
 var blockClass = "".concat(pkg.prefix, "--status-icon");

package/es/components/UserProfileImage/UserProfileImage.js

@@ -17,7 +17,7 @@ import { getDevtoolsProps } from '../../global/js/utils/devtools';
 import '../../global/js/utils/props-helper';
 import { pkg } from '../../settings'; // Carbon and package components we use.
 
-import { User, Group } from '@carbon/icons-react';
+import { User, Group } from '@carbon/react/icons';
 import { IconButton } from '@carbon/react'; // The block part of our conventional BEM class names (blockClass__E--M).
 
 var blockClass = "".concat(pkg.prefix, "--user-profile-image");

package/es/components/WebTerminal/WebTerminal.js

@@ -21,7 +21,7 @@ import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { pkg } from '../../settings'; // Carbon and package components we use.
 
-import { Close, Help } from '@carbon/icons-react';
+import { Close, Help } from '@carbon/react/icons';
 import { Button, OverflowMenu, OverflowMenuItem } from '@carbon/react';
 import { moderate02 } from '@carbon/motion';
 import { useWebTerminal } from './hooks';

package/es/components/WebTerminal/preview-components/Navigation.js

@@ -6,7 +6,7 @@
 //
 import React from 'react';
 import { Header, HeaderName, HeaderGlobalAction, HeaderGlobalBar } from '@carbon/react';
-import { Terminal, Search, User } from '@carbon/icons-react';
+import { Terminal, Search, User } from '@carbon/react/icons';
 import { useWebTerminal } from '../hooks';
 
 var Navigation = function Navigation() {

package/es/components/index.js

@@ -37,7 +37,8 @@ export { EditSidePanel } from './EditSidePanel';
 export { OptionsTile } from './OptionsTile';
 export { InlineEdit } from './InlineEdit';
 export { DataSpreadsheet } from './DataSpreadsheet';
-export { Datagrid, useDatagrid, useInfiniteScroll, useNestedRows, useSelectRows, useExpandedRow, useOnRowClick, useSortableColumns, useRowIsMouseOver, useColumnRightAlign, useDisableSelectRows, useStickyColumn, useActionsColumn, useCustomizeColumns, useSelectAllWithToggle } from './Datagrid';
+export { Datagrid, useDatagrid, useInfiniteScroll, useNestedRows, useSelectRows, useExpandedRow, useOnRowClick, useSortableColumns, useRowIsMouseOver, useColumnRightAlign, useDisableSelectRows, useStickyColumn, useActionsColumn, useCustomizeColumns, useSelectAllWithToggle, useColumnOrder, useInlineEdit } from './Datagrid';
 export { EditTearsheet } from './EditTearsheet';
 export { EditTearsheetNarrow } from './EditTearsheetNarrow';
-export { EditFullPage } from './EditFullPage';
+export { EditFullPage } from './EditFullPage';
+export { EditUpdateCards } from './EditUpdateCards';

package/es/global/js/hooks/useClickOutside.js

@@ -8,7 +8,7 @@ import { useEffect } from 'react';
 export var useClickOutside = function useClickOutside(ref, callback) {
   var handleClick = function handleClick(event) {
     if (ref.current && !ref.current.contains(event.target)) {
-      callback();
+      callback(event.target);
     }
   };
 

package/es/global/js/package-settings.js

@@ -53,6 +53,9 @@ var defaults = {
     TearsheetNarrow: true,
     UnauthorizedEmptyState: true,
     UserProfileImage: true,
+    WebTerminal: true,
+    WebTerminalContentWrapper: true,
+    WebTerminalProvider: true,
     // other public components not yet reviewed and released:
     MultiAddSelect: false,
     SingleAddSelect: false,
@@ -60,16 +63,14 @@ var defaults = {
     Toolbar: false,
     ToolbarButton: false,
     ToolbarGroup: false,
-    WebTerminal: false,
-    WebTerminalContentWrapper: false,
-    WebTerminalProvider: false,
     EditSidePanel: false,
     CancelableTextEdit: false,
     DataSpreadsheet: false,
     Datagrid: false,
     EditTearsheet: false,
     EditTearsheetNarrow: false,
-    EditFullPage: false
+    EditFullPage: false,
+    EditUpdateCards: false
     /* new component flags here - comment used by generate CLI */
 
   },

package/es/global/js/utils/getBezierValues.js

@@ -0,0 +1,20 @@
+import { motion } from '@carbon/motion';
+/**
+ * This function turns a cubic-bezier() string to an
+ * array of values that we can use with framer-motion
+ * @param {string} type - The carbon motion type, either 'standard', 'entrance', or 'exit'
+ * @param {string} mode - The carbon motion mode, either 'productive', or 'expressive'
+ */
+
+export var getBezierValues = function getBezierValues(type, mode) {
+  var cubicBezier = motion(type, mode);
+  var extractStringFromParens = /\(([^)]+)\)/;
+  var desiredBezierStrings = extractStringFromParens.exec(cubicBezier)[1];
+  var formattedDesiredBezierStrings = desiredBezierStrings.trim().split(',').map(Number);
+
+  if (Array.isArray(formattedDesiredBezierStrings)) {
+    return formattedDesiredBezierStrings;
+  }
+
+  return [];
+};

package/es/global/js/utils/motionConstants.js

@@ -0,0 +1,45 @@
+/**
+ * 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.
+ */
+import { getBezierValues } from './getBezierValues';
+import { fast01, fast02, moderate01, moderate02, slow01, slow02 } from '@carbon/motion';
+
+var cleanMotionValue = function cleanMotionValue(val) {
+  return parseInt(val) / 1000;
+};
+
+export var DURATIONS = {
+  // Micro-interactions such as button and toggle
+  fast01: cleanMotionValue(fast01),
+  // '70ms'
+  // Micro-interactions such as fade
+  fast02: cleanMotionValue(fast02),
+  // '110ms'
+  // Micro-interactions, small expansion, short distance movements
+  moderate01: cleanMotionValue(moderate01),
+  // '150ms'
+  // Expansion, system communication, toast
+  moderate02: cleanMotionValue(moderate02),
+  // '240ms'
+  // Large expansion, important system notifications
+  slow01: cleanMotionValue(slow01),
+  // '400ms'
+  //  Background dimming
+  slow02: cleanMotionValue(slow02) // '700ms'
+
+};
+export var EASINGS = {
+  productive: {
+    entrance: getBezierValues('entrance', 'productive'),
+    standard: getBezierValues('standard', 'productive'),
+    exit: getBezierValues('exit', 'productive')
+  },
+  expressive: {
+    entrance: getBezierValues('entrance', 'expressive'),
+    standard: getBezierValues('standard', 'expressive'),
+    exit: getBezierValues('exit', 'expressive')
+  }
+};

package/es/global/js/utils/rangeWithCallback.js

@@ -0,0 +1,13 @@
+/**
+ * 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.
+ */
+// Iterates through a numeric range and calls callback
+// function for each iteration
+export var rangeWithCallback = function rangeWithCallback(start, end, fn) {
+  for (var i = start; i <= end; i++) {
+    fn(i);
+  }
+};

package/es/global/js/utils/story-helper.js

@@ -29,7 +29,11 @@ export var getStoryTitle = function getStoryTitle(componentName) {
  * @returns The story id.
  */
 
-export var getStoryId = function getStoryId(componentName, scenario) {
+export var getStoryId = function getStoryId(componentName, scenario, subdirectory) {
+  if (subdirectory) {
+    return "".concat(sanitize(getStoryTitle(componentName)), "-").concat(sanitize(subdirectory), "--").concat(scenario);
+  }
+
   return "".concat(sanitize(getStoryTitle(componentName)), "--").concat(scenario);
 };
 /**