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

package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsModal.js

@@ -159,8 +159,7 @@ var CustomizeColumnsModal = function CustomizeColumnsModal(_ref) {
     primaryButtonDisabled: !isDirty,
     onRequestClose: onRequestClose,
     onRequestSubmit: onRequestSubmit,
-    size: "sm",
-    hasForm: true
+    size: "sm"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__customize-columns-instructions")
   }, instructionsLabel), /*#__PURE__*/_react.default.createElement(_Actions.default, {

package/lib/components/Datagrid/useInfiniteScroll.js

@@ -30,7 +30,10 @@ var useInfiniteScroll = function useInfiniteScroll(hooks) {
     var isFetching = instance.isFetching,
         tableHeight = instance.tableHeight,
         innerListRef = instance.innerListRef,
-        fetchMoreData = instance.fetchMoreData;
+        fetchMoreData = instance.fetchMoreData,
+        tableId = instance.tableId;
+    var tableElement = document.querySelector("#".concat(tableId));
+    var totalTableHeight = tableHeight || (tableElement === null || tableElement === void 0 ? void 0 : tableElement.clientHeight);
     var loadMoreThreshold = 200;
 
     var emptyFetchData = function emptyFetchData() {}; // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -46,7 +49,7 @@ var useInfiniteScroll = function useInfiniteScroll(hooks) {
           scrollOffset = _ref.scrollOffset;
 
       if (innerListRef && innerListRef.current) {
-        if (!isFetching && scrollDirection === 'forward' && scrollOffset + tableHeight >= innerListRef.current.clientHeight - loadMoreThreshold) {
+        if (!isFetching && scrollDirection === 'forward' && scrollOffset + totalTableHeight >= innerListRef.current.clientHeight - loadMoreThreshold) {
           if (fetchMoreData) {
             fetchMore();
           }

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

@@ -88,6 +88,10 @@ 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._'
   }
 };
 exports.ARG_TYPES = ARG_TYPES;

package/lib/components/EditUpdateCards/EditUpdateCards.js

@@ -0,0 +1,152 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EditUpdateCards = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _devtools = require("../../global/js/utils/devtools");
+
+var _settings = require("../../settings");
+
+var _ProductiveCard = require("../ProductiveCard");
+
+var _excluded = ["actionIcons", "actionsPlacement", "className", "description", "editChildren", "editMode", "label", "previewChildren", "title", "titleSize"];
+// 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(_settings.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.
+ */
+
+var EditUpdateCards = /*#__PURE__*/_react.default.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 = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  // const [editMode, setEditMode] = useState(false);
+  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, {
+    className: (0, _classnames.default)(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}`,
+    (0, _defineProperty2.default)({}, "".concat(blockClass, "__actions-bottom"), actionsPlacement === 'bottom')),
+    ref: ref,
+    role: "main"
+  }, (0, _devtools.getDevtoolsProps)(componentName)), /*#__PURE__*/_react.default.createElement(_ProductiveCard.ProductiveCard, {
+    actionIcons: actionIcons,
+    actionsPlacement: actionsPlacement,
+    className: className,
+    description: description,
+    label: label,
+    title: title,
+    titleSize: titleSize
+  }, editMode === false && /*#__PURE__*/_react.default.createElement("div", null, previewChildren), editMode && /*#__PURE__*/_react.default.createElement("div", null, editChildren)));
+}); // Return a placeholder if not released and not enabled by feature flag
+
+
+exports.EditUpdateCards = EditUpdateCards;
+exports.EditUpdateCards = EditUpdateCards = _settings.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.default.arrayOf(_propTypes.default.shape({
+    id: _propTypes.default.string,
+    icon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    onKeyDown: _propTypes.default.func,
+    onClick: _propTypes.default.func,
+    iconDescription: _propTypes.default.string,
+    href: _propTypes.default.string
+  })),
+
+  /**
+   * Determines if the action icons are on the top or bottom of the card
+   */
+  actionsPlacement: _propTypes.default.oneOf(['top', 'bottom']),
+
+  /**
+   * Optional label for the top of the card.
+   */
+  className: _propTypes.default.string,
+
+  /**
+   * Optional header description
+   */
+  description: _propTypes.default.string,
+
+  /**
+   * Edit mode children
+   */
+  editChildren: _propTypes.default.node,
+
+  /**
+   * Edit mode
+   */
+  editMode: _propTypes.default.bool,
+
+  /**
+   * Optional label for the top of the card
+   */
+  label: _propTypes.default.string,
+
+  /**
+   * Preview mode children
+   */
+  previewChildren: _propTypes.default.node,
+
+  /**
+   * Title that's displayed at the top of the card
+   */
+  title: _propTypes.default.string,
+
+  /**
+   * Determines title size
+   */
+  titleSize: _propTypes.default.oneOf(['default', 'large'])
+  /* TODO: add types and DocGen for all props. */
+
+};

package/lib/components/EditUpdateCards/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "EditUpdateCards", {
+  enumerable: true,
+  get: function get() {
+    return _EditUpdateCards.EditUpdateCards;
+  }
+});
+
+var _EditUpdateCards = require("./EditUpdateCards");

package/lib/components/PageHeader/PageHeaderTitle.js

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

package/lib/components/SidePanel/SidePanel.js

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

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

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.panelVariants = exports.overlayVariants = void 0;
+
+var _motionConstants = require("../../../global/js/utils/motionConstants");
+
+/**
+ * Copyright IBM Corp. 2022, 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var overlayVariants = {
+  visible: {
+    opacity: 1,
+    transition: {
+      duration: _motionConstants.DURATIONS.moderate02,
+      ease: _motionConstants.EASINGS.productive.standard
+    }
+  },
+  hidden: {
+    opacity: 0
+  },
+  exit: {
+    opacity: 0
+  }
+};
+exports.overlayVariants = overlayVariants;
+var panelVariants = {
+  visible: {
+    x: 0,
+    transition: {
+      duration: _motionConstants.DURATIONS.moderate02,
+      ease: _motionConstants.EASINGS.productive.standard
+    }
+  },
+  hidden: function hidden(placement) {
+    return {
+      x: placement === 'right' ? '100%' : -320
+    };
+  },
+  exit: function exit(placement) {
+    return {
+      x: placement === 'right' ? '100%' : -320,
+      transition: {
+        duration: _motionConstants.DURATIONS.moderate01,
+        ease: _motionConstants.EASINGS.productive.exit
+      }
+    };
+  }
+};
+exports.panelVariants = panelVariants;

package/lib/components/index.js

@@ -117,6 +117,12 @@ Object.defineProperty(exports, "EditTearsheetNarrow", {
     return _EditTearsheetNarrow.EditTearsheetNarrow;
   }
 });
+Object.defineProperty(exports, "EditUpdateCards", {
+  enumerable: true,
+  get: function get() {
+    return _EditUpdateCards.EditUpdateCards;
+  }
+});
 Object.defineProperty(exports, "EmptyState", {
   enumerable: true,
   get: function get() {
@@ -502,4 +508,6 @@ var _EditTearsheet = require("./EditTearsheet");
 
 var _EditTearsheetNarrow = require("./EditTearsheetNarrow");
 
-var _EditFullPage = require("./EditFullPage");
+var _EditFullPage = require("./EditFullPage");
+
+var _EditUpdateCards = require("./EditUpdateCards");

package/lib/global/js/package-settings.js

@@ -73,7 +73,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/lib/global/js/utils/getBezierValues.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getBezierValues = void 0;
+
+var _motion = require("@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'
+ */
+var getBezierValues = function getBezierValues(type, mode) {
+  var cubicBezier = (0, _motion.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 [];
+};
+
+exports.getBezierValues = getBezierValues;

package/lib/global/js/utils/motionConstants.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EASINGS = exports.DURATIONS = void 0;
+
+var _getBezierValues = require("./getBezierValues");
+
+var _motion = require("@carbon/motion");
+
+/**
+ * Copyright IBM Corp. 2022, 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var cleanMotionValue = function cleanMotionValue(val) {
+  return parseInt(val) / 1000;
+};
+
+var DURATIONS = {
+  // Micro-interactions such as button and toggle
+  fast01: cleanMotionValue(_motion.fast01),
+  // '70ms'
+  // Micro-interactions such as fade
+  fast02: cleanMotionValue(_motion.fast02),
+  // '110ms'
+  // Micro-interactions, small expansion, short distance movements
+  moderate01: cleanMotionValue(_motion.moderate01),
+  // '150ms'
+  // Expansion, system communication, toast
+  moderate02: cleanMotionValue(_motion.moderate02),
+  // '240ms'
+  // Large expansion, important system notifications
+  slow01: cleanMotionValue(_motion.slow01),
+  // '400ms'
+  //  Background dimming
+  slow02: cleanMotionValue(_motion.slow02) // '700ms'
+
+};
+exports.DURATIONS = DURATIONS;
+var EASINGS = {
+  productive: {
+    entrance: (0, _getBezierValues.getBezierValues)('entrance', 'productive'),
+    standard: (0, _getBezierValues.getBezierValues)('standard', 'productive'),
+    exit: (0, _getBezierValues.getBezierValues)('exit', 'productive')
+  },
+  expressive: {
+    entrance: (0, _getBezierValues.getBezierValues)('entrance', 'expressive'),
+    standard: (0, _getBezierValues.getBezierValues)('standard', 'expressive'),
+    exit: (0, _getBezierValues.getBezierValues)('exit', 'expressive')
+  }
+};
+exports.EASINGS = EASINGS;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.0.0-rc.3",
+  "version": "2.0.0-rc.4",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -36,11 +36,12 @@
     "access": "public"
   },
   "scripts": {
-    "build": "run-s clean build-first build-all",
+    "build": "run-s clean build-first build-all build-css-update-maps",
     "build-all": "run-p 'build:*'",
     "build-first": "copyfiles 'src/**/*.scss' scss -u 1",
     "build:css-dev": "sass --style=expanded --load-path node_modules --load-path ../../node_modules scss:css",
     "build:css-min": "sass --style=compressed --load-path node_modules --load-path ../../node_modules scss/index.scss:css/index.min.css scss/index-full-carbon.scss:css/index-full-carbon.min.css scss/index-without-carbon.scss:css/index-without-carbon.min.css scss/index-without-carbon-released-only.scss:css/index-without-carbon-released-only.min.css",
+    "build-css-update-maps": "node ../../scripts/updateSourceMaps.js",
     "build:js-esm": "cross-env BABEL_ENV=esm yarn build:js:modules -d es",
     "build:js-cjs": "cross-env BABEL_ENV=cjs yarn build:js:modules -d lib",
     "build:js:modules": "babel src --ignore '**/__tests__','**/*.test.js','**/*.stories.js','src/utils/**/*'",
@@ -75,6 +76,7 @@
   "dependencies": {
     "@babel/runtime": "^7.18.9",
     "@carbon/telemetry": "^0.1.0",
+    "framer-motion": "^6.5.1",
     "immutability-helper": "^3.1.1",
     "react-dnd": "^15.1.2",
     "react-dnd-html5-backend": "^15.1.3",
@@ -92,5 +94,5 @@
     "react": "^16.8.6 || ^17.0.1",
     "react-dom": "^16.8.6 || ^17.0.1"
   },
-  "gitHead": "5bffa40c7782ff89a267cd2f2f727b223a12ba50"
+  "gitHead": "77ce950cb5a0d555417788ed808509aa4e3c52c8"
 }

package/scss/components/AddSelect/_add-select.scss

@@ -484,7 +484,7 @@ button.#{$block-class}__global-filter-toggle {
   margin-top: $spacing-03;
 }
 
-.#{$carbon-prefix}--tooltip,
-.#{$carbon-prefix}--overflow-menu-options {
+.#{$block-class} .#{$carbon-prefix}--tooltip,
+.#{$block-class} .#{$carbon-prefix}--overflow-menu-options {
   z-index: 9000;
 }