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

package/lib/components/RemoveModal/RemoveModal.js

@@ -33,7 +33,7 @@ var _settings = require("../../settings");
 
 var _hooks = require("../../global/js/hooks");
 
-var _excluded = ["body", "className", "iconDescription", "inputInvalidText", "inputLabelText", "inputPlaceholderText", "label", "onClose", "onRequestSubmit", "open", "preventCloseOnClickOutside", "primaryButtonText", "resourceName", "secondaryButtonText", "textConfirmation", "title"];
+var _excluded = ["body", "className", "iconDescription", "inputInvalidText", "inputLabelText", "inputPlaceholderText", "label", "onClose", "onRequestSubmit", "open", "preventCloseOnClickOutside", "primaryButtonDisabled", "primaryButtonText", "resourceName", "secondaryButtonText", "textConfirmation", "title"];
 
 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); }
 
@@ -56,6 +56,7 @@ var RemoveModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       onRequestSubmit = _ref.onRequestSubmit,
       open = _ref.open,
       preventCloseOnClickOutside = _ref.preventCloseOnClickOutside,
+      primaryButtonDisabled = _ref.primaryButtonDisabled,
       primaryButtonText = _ref.primaryButtonText,
       resourceName = _ref.resourceName,
       secondaryButtonText = _ref.secondaryButtonText,
@@ -77,7 +78,18 @@ var RemoveModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     setUserInput(e.target.value);
   };
 
-  var primaryButtonDisabled = textConfirmation && userInput !== resourceName;
+  var checkPrimaryButtonDisabled = function checkPrimaryButtonDisabled() {
+    // user control should be used primarily
+    if (primaryButtonDisabled) {
+      return true;
+    } else if (textConfirmation && userInput !== resourceName) {
+      return true;
+    }
+
+    return false;
+  };
+
+  var primaryButtonStatus = checkPrimaryButtonDisabled();
   var blockClass = "".concat(_settings.pkg.prefix, "--remove-modal"); // Clear the user input this way so that if the onRequestSubmit handler fails for some reason
   // the value of the input will still remain: we only want to empty the input value
   // when open actually changes to false.
@@ -120,7 +132,7 @@ var RemoveModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     type: "submit",
     kind: "danger",
     onClick: onRequestSubmit,
-    disabled: primaryButtonDisabled
+    disabled: primaryButtonStatus
   }, primaryButtonText)));
 }); // Return a placeholder if not released and not enabled by feature flag
 
@@ -182,6 +194,11 @@ RemoveModal.propTypes = {
    */
   preventCloseOnClickOutside: _propTypes.default.bool,
 
+  /**
+   * Specify whether the primary button should be disabled. This value will override textConfirmation
+   */
+  primaryButtonDisabled: _propTypes.default.bool,
+
   /**
    * Specify the text for the primary button
    */

package/lib/components/Saving/Saving.js

@@ -21,7 +21,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _react2 = require("@carbon/react");
 
-var _iconsReact = require("@carbon/icons-react");
+var _icons = require("@carbon/react/icons");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -59,7 +59,7 @@ var Saving = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       text: defaultText,
       iconDescription: defaultIconDescription,
       icon: function icon(props) {
-        return /*#__PURE__*/_react.default.createElement(_iconsReact.CheckmarkOutline, (0, _extends2.default)({
+        return /*#__PURE__*/_react.default.createElement(_icons.CheckmarkOutline, (0, _extends2.default)({
           size: 16
         }, props));
       }
@@ -76,7 +76,7 @@ var Saving = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     text: successText,
     iconDescription: successIconDescription,
     icon: function icon(props) {
-      return /*#__PURE__*/_react.default.createElement(_iconsReact.Save, (0, _extends2.default)({
+      return /*#__PURE__*/_react.default.createElement(_icons.Save, (0, _extends2.default)({
         size: 16
       }, props));
     }
@@ -84,7 +84,7 @@ var Saving = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     text: failText,
     iconDescription: failIconDescription,
     icon: function icon(props) {
-      return /*#__PURE__*/_react.default.createElement(_iconsReact.ErrorOutline, (0, _extends2.default)({
+      return /*#__PURE__*/_react.default.createElement(_icons.ErrorOutline, (0, _extends2.default)({
         size: 16
       }, props));
     }
@@ -97,7 +97,7 @@ var Saving = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     className: "".concat(blockClass, "__message")
   }, status === 'fail' && /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__error-icon")
-  }, /*#__PURE__*/_react.default.createElement(_iconsReact.ErrorFilled, {
+  }, /*#__PURE__*/_react.default.createElement(_icons.ErrorFilled, {
     size: 16
   })), /*#__PURE__*/_react.default.createElement("p", {
     className: "".concat(blockClass, "__text")

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"));
@@ -41,10 +43,12 @@ var _hooks = require("../../global/js/hooks");
 
 var _react2 = require("@carbon/react");
 
-var _iconsReact = require("@carbon/icons-react");
+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 */
 
@@ -435,7 +427,7 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
       size: "sm",
       disabled: false,
       renderIcon: function renderIcon(props) {
-        return /*#__PURE__*/_react.default.createElement(_iconsReact.ArrowLeft, (0, _extends2.default)({
+        return /*#__PURE__*/_react.default.createElement(_icons.ArrowLeft, (0, _extends2.default)({
           size: 20
         }, props));
       },
@@ -449,7 +441,7 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
       kind: "ghost",
       size: "sm",
       renderIcon: function renderIcon(props) {
-        return /*#__PURE__*/_react.default.createElement(_iconsReact.Close, (0, _extends2.default)({
+        return /*#__PURE__*/_react.default.createElement(_icons.Close, (0, _extends2.default)({
           size: 20
         }, props));
       },
@@ -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/SingleAddSelect/SingleAddSelect.js

@@ -27,6 +27,12 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+//
+// Copyright IBM Corp. 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 componentName = 'SingleAddSelect';
 var SingleAddSelect = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   // remove multi add select specific props