@carbon/ibm-products 2.0.0-rc.3 → 2.0.0-rc.5

package/es/components/Datagrid/utils/getArgTypes.js

@@ -81,5 +81,9 @@ export var ARG_TYPES = {
       type: 'number'
     },
     description: 'This value controls the height of the expanded content area. _This value is set/passed inside of the `datagridState` object._'
+  },
+  customizeColumnsProps: {
+    control: 'object',
+    description: 'This is an object containing all of the props used with the column customization extension. _This value is set/passed inside of the `datagridState` object._'
   }
 };

package/es/components/EditUpdateCards/EditUpdateCards.js

@@ -0,0 +1,144 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["actionIcons", "actionsPlacement", "className", "description", "editChildren", "editMode", "label", "previewChildren", "title", "titleSize"];
+
+/**
+ * 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 portions of React that are needed.
+import React from 'react'; // Other standard imports.
+
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { getDevtoolsProps } from '../../global/js/utils/devtools';
+import { pkg
+/*, carbon */
+} from '../../settings';
+import { ProductiveCard } from '../ProductiveCard'; // import { children } from 'cheerio/lib/api/traversing';
+// Carbon and package components we use.
+
+/* TODO: @import(s) of carbon components and other package components. */
+// The block part of our conventional BEM class names (blockClass__E--M).
+
+var blockClass = "".concat(pkg.prefix, "--edit-update-cards");
+var componentName = 'EditUpdateCards'; // NOTE: the component SCSS is not imported here: it is rolled up separately.
+// Default values can be included here and then assigned to the prop params,
+// e.g. prop = defaults.prop,
+// This gathers default values together neatly and ensures non-primitive
+// values are initialized early to avoid react making unnecessary re-renders.
+// Note that default values are not required for props that are 'required',
+// nor for props where the component can apply undefined values reasonably.
+// Default values should be provided when the component needs to make a choice
+// or assumption when a prop is not supplied.
+// Default values for props
+// const defaults = {
+//   /* TODO: add defaults for relevant props if needed */
+// };
+
+/**
+ * TODO: A description of the component.
+ */
+
+export var EditUpdateCards = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var actionIcons = _ref.actionIcons,
+      actionsPlacement = _ref.actionsPlacement,
+      className = _ref.className,
+      description = _ref.description,
+      editChildren = _ref.editChildren,
+      editMode = _ref.editMode,
+      label = _ref.label,
+      previewChildren = _ref.previewChildren,
+      title = _ref.title,
+      titleSize = _ref.titleSize,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  // const [editMode, setEditMode] = useState(false);
+  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+    className: cx(blockClass, // Apply the block class to the main HTML element
+    className, // Apply any supplied class names to the main HTML element.
+    // example: `${blockClass}__template-string-class-${kind}-n-${size}`,
+    _defineProperty({}, "".concat(blockClass, "__actions-bottom"), actionsPlacement === 'bottom')),
+    ref: ref,
+    role: "main"
+  }, getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(ProductiveCard, {
+    actionIcons: actionIcons,
+    actionsPlacement: actionsPlacement,
+    className: className,
+    description: description,
+    label: label,
+    title: title,
+    titleSize: titleSize
+  }, editMode === false && /*#__PURE__*/React.createElement("div", null, previewChildren), editMode && /*#__PURE__*/React.createElement("div", null, editChildren)));
+}); // Return a placeholder if not released and not enabled by feature flag
+
+EditUpdateCards = pkg.checkComponentEnabled(EditUpdateCards, componentName); // The display name of the component, used by React. Note that displayName
+// is used in preference to relying on function.name.
+
+EditUpdateCards.displayName = componentName; // The types and DocGen commentary for the component props,
+// in alphabetical order (for consistency).
+// See https://www.npmjs.com/package/prop-types#usage.
+
+EditUpdateCards.propTypes = {
+  /**
+   * Icons that are displayed on card. Refer to design documentation for implementation guidelines
+   */
+  actionIcons: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string,
+    icon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    onKeyDown: PropTypes.func,
+    onClick: PropTypes.func,
+    iconDescription: PropTypes.string,
+    href: PropTypes.string
+  })),
+
+  /**
+   * Determines if the action icons are on the top or bottom of the card
+   */
+  actionsPlacement: PropTypes.oneOf(['top', 'bottom']),
+
+  /**
+   * Optional label for the top of the card.
+   */
+  className: PropTypes.string,
+
+  /**
+   * Optional header description
+   */
+  description: PropTypes.string,
+
+  /**
+   * Edit mode children
+   */
+  editChildren: PropTypes.node,
+
+  /**
+   * Edit mode
+   */
+  editMode: PropTypes.bool,
+
+  /**
+   * Optional label for the top of the card
+   */
+  label: PropTypes.string,
+
+  /**
+   * Preview mode children
+   */
+  previewChildren: PropTypes.node,
+
+  /**
+   * Title that's displayed at the top of the card
+   */
+  title: PropTypes.string,
+
+  /**
+   * Determines title size
+   */
+  titleSize: PropTypes.oneOf(['default', 'large'])
+  /* TODO: add types and DocGen for all props. */
+
+};

package/es/components/EditUpdateCards/index.js

@@ -0,0 +1,7 @@
+/**
+ * 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.
+ */
+export { EditUpdateCards } from './EditUpdateCards';

package/es/components/PageHeader/PageHeader.js

@@ -301,7 +301,7 @@ export var PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var current = _ref5.current;
     // on window resize and other updates some values may have changed
     checkUpdateVerticalSpace();
-    setWidthIsNarrow(current.innerWidth < breakpoints.md.width); // small (below medium) media query
+    setWidthIsNarrow(current.innerWidth / 16 < parseInt(breakpoints.md.width)); // small (below medium) media query
   }, [actionBarItems, children, breadcrumbs, enableBreadcrumbScroll, navigation, pageActions, subtitle, tags, title]);
   useEffect(function () {
     checkUpdateVerticalSpace(); // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -344,7 +344,7 @@ export var PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   };
 
   useEffect(function () {
-    if (typeof collapseHeader === 'boolean') {
+    if (collapseHeader === true) {
       utilSetCollapsed(collapseHeader, metrics.headerOffset, metrics.headerTopValue);
     }
   }, [collapseHeader, metrics.headerOffset, metrics.headerTopValue]);
@@ -484,7 +484,7 @@ export var PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         onWidthChange: handleWidthChange,
         buttons: pageActions,
         buttonSetOverflowLabel: pageActionsOverflowLabel,
-        rightAlign: true
+        rightAlign: !widthIsNarrow
       })));
     }
   }

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/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';
@@ -32,6 +33,7 @@ import { usePreviousValue } from '../../global/js/hooks'; // Carbon and package
 import { Button } from '@carbon/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/index.js

@@ -40,4 +40,5 @@ export { DataSpreadsheet } from './DataSpreadsheet';
 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/useResetCreateComponent.js

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { useEffect } from 'react';
+import { getNumberOfHiddenSteps } from '../utils/getNumberOfHiddenSteps';
 /**
  * Resets the current step of the create component if it has been closed.
  * @param {object} useResetCreateComponent - Create component that uses this custom hook
@@ -12,6 +13,7 @@ import { useEffect } from 'react';
  * @param {object} useResetCreateComponent.previousState
  * @param {boolean} useResetCreateComponent.open
  * @param {Function} useResetCreateComponent.setCurrentStep
+ * @param {object} useResetCreateComponent.stepData
  * @param {number} useResetCreateComponent.initialStep
  * @param {number} useResetCreateComponent.totalSteps
  * @param {string} useResetCreateComponent.componentName
@@ -22,13 +24,15 @@ export var useResetCreateComponent = function useResetCreateComponent(_ref) {
       previousState = _ref.previousState,
       open = _ref.open,
       setCurrentStep = _ref.setCurrentStep,
+      stepData = _ref.stepData,
       initialStep = _ref.initialStep,
       totalSteps = _ref.totalSteps,
       componentName = _ref.componentName;
   useEffect(function () {
     if (!(previousState !== null && previousState !== void 0 && previousState.open) && open) {
       if (initialStep && totalSteps && Number(initialStep) <= Number(totalSteps) && Number(initialStep) > 0) {
-        setCurrentStep(Number(initialStep));
+        var numberOfHiddenSteps = getNumberOfHiddenSteps(stepData, initialStep);
+        setCurrentStep(Number(initialStep + numberOfHiddenSteps));
       } else {
         // default should be fist includedStep instead of just 1
         setCurrentStep(firstIncludedStep);
@@ -39,5 +43,5 @@ export var useResetCreateComponent = function useResetCreateComponent(_ref) {
         console.warn("".concat(componentName, ": An invalid `initialStep` prop was supplied. The `initialStep` prop should be a number that is greater than 0 or less than or equal to the number of steps your ").concat(componentName, " has."));
       }
     }
-  }, [firstIncludedStep, open, previousState, setCurrentStep, initialStep, totalSteps, componentName]);
+  }, [firstIncludedStep, open, previousState, setCurrentStep, stepData, initialStep, totalSteps, componentName]);
 };

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

@@ -69,7 +69,8 @@ var defaults = {
     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/getNumberOfHiddenSteps.js

@@ -0,0 +1,19 @@
+/**
+ * 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.
+ */
+export var getNumberOfHiddenSteps = function getNumberOfHiddenSteps(stepData, initialStep) {
+  var numberOfHiddenSteps = 0;
+  stepData.forEach(function (step, stepIndex) {
+    if (stepIndex + 1 > initialStep) {
+      return;
+    }
+
+    if (step.shouldIncludeStep === false) {
+      numberOfHiddenSteps += 1;
+    }
+  });
+  return numberOfHiddenSteps;
+};

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/lib/components/AddSelect/AddSelectBody.js

@@ -363,11 +363,11 @@ AddSelectBody.propTypes = {
     entries: _propTypes.default.arrayOf(_propTypes.default.shape({
       avatar: _propTypes.default.shape({
         alt: _propTypes.default.string,
-        icon: _propTypes.default.func,
+        icon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
         src: _propTypes.default.string
       }),
       children: _propTypes.default.object,
-      icon: _propTypes.default.func,
+      icon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
       id: _propTypes.default.string.isRequired,
       meta: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.shape({
         id: _propTypes.default.string,

package/lib/components/CreateTearsheet/CreateTearsheet.js

@@ -37,6 +37,8 @@ var _devtools = require("../../global/js/utils/devtools");
 
 var _lastIndexInArray = require("../../global/js/utils/lastIndexInArray");
 
+var _getNumberOfHiddenSteps = require("../../global/js/utils/getNumberOfHiddenSteps");
+
 var _excluded = ["backButtonText", "cancelButtonText", "children", "className", "description", "influencerWidth", "initialStep", "label", "nextButtonText", "onClose", "onRequestSubmit", "open", "submitButtonText", "title", "verticalPosition"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -147,7 +149,12 @@ var CreateTearsheet = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     if (lastItem !== lastIncludedStep) {
       setLastIncludedStep(lastItem);
     }
-  }, [stepData, firstIncludedStep, lastIncludedStep]);
+
+    if (open && initialStep) {
+      var numberOfHiddenSteps = (0, _getNumberOfHiddenSteps.getNumberOfHiddenSteps)(stepData, initialStep);
+      setCurrentStep(Number(initialStep + numberOfHiddenSteps));
+    }
+  }, [stepData, firstIncludedStep, lastIncludedStep, initialStep, open]);
   (0, _hooks.useCreateComponentFocus)({
     previousState: previousState,
     currentStep: currentStep,
@@ -160,6 +167,7 @@ var CreateTearsheet = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     previousState: previousState,
     open: open,
     setCurrentStep: setCurrentStep,
+    stepData: stepData,
     initialStep: initialStep,
     totalSteps: stepData === null || stepData === void 0 ? void 0 : stepData.length,
     componentName: componentName