@carbon/ibm-products 1.4.0 → 1.7.0

package/es/components/PageHeader/PageHeaderTitle.js

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["text", "content", "loading", "icon", "asText", "onChange", "editDescription", "editableLabel", "revertDescription", "saveDescription"];
+var _excluded = ["text", "content", "loading", "icon", "asText", "onChange", "onSave", "editDescription", "editableLabel", "revertDescription", "saveDescription"];
 import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
@@ -26,6 +26,7 @@ export var PageHeaderTitle = function PageHeaderTitle(_ref) {
       icon = title.icon,
       asText = title.asText,
       onChange = title.onChange,
+      onSave = title.onSave,
       editDescription = title.editDescription,
       editableLabel = title.editableLabel,
       revertDescription = title.revertDescription,
@@ -33,7 +34,7 @@ export var PageHeaderTitle = function PageHeaderTitle(_ref) {
       rest = _objectWithoutProperties(title, _excluded);
 
   var titleText;
-  var isEditable = !!onChange;
+  var isEditable = !!onSave;
 
   if (text || !content) {
     if (text === undefined && typeof title === 'string') {
@@ -51,6 +52,7 @@ export var PageHeaderTitle = function PageHeaderTitle(_ref) {
       value: text,
       editDescription: editDescription,
       onChange: onChange,
+      onSave: onSave,
       labelText: editableLabel,
       revertDescription: revertDescription,
       saveDescription: saveDescription
@@ -68,8 +70,8 @@ export var PageHeaderTitle = function PageHeaderTitle(_ref) {
   }, titleInnards);
 };
 export var inlineEditRequired = function inlineEditRequired(_ref2) {
-  var onChange = _ref2.onChange;
-  return !!onChange;
+  var onSave = _ref2.onSave;
+  return !!onSave;
 };
 PageHeaderTitle.propTypes = {
   // passed from page header
@@ -89,9 +91,10 @@ PageHeaderTitle.propTypes = {
    *    - text: title string
    *    - icon: optional icon
    *    - loading: boolean shows loading indicator if true
-   *    - onChange: function to process edits only supply if in place edit is desired
+   *    - onChange: function to process the live value (React change === HTML Input)
+   *    - onSave: function to process a confirmed change
    *    - editDescription: description for edit button
-   *    - editableLabel: label for edit required if onChange supplied
+   *    - editableLabel: label for edit required if onSave supplied
    *    - revertDescription: description for edit revert button
    *    - saveDescription: description for edit save button
    * - Object containing user defined contents. These must fit within the area defined for the title in both main part of the header and the breadcrumb.
@@ -109,6 +112,7 @@ PageHeaderTitle.propTypes = {
     editableLabel: PropTypes.string.isRequired.if(inlineEditRequired),
     id: PropTypes.string.isRequired.if(inlineEditRequired),
     onChange: PropTypes.func,
+    onSave: PropTypes.func,
     revertDescription: PropTypes.string.isRequired.if(inlineEditRequired),
     saveDescription: PropTypes.string.isRequired.if(inlineEditRequired) // Update docgen if changed
 

package/es/components/SidePanel/SidePanel.js

@@ -89,8 +89,12 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var sidePanelInnerRef = useRef();
   var sidePanelCloseRef = useRef();
   var previousState = usePreviousValue({
-    size: size
-  }); // scroll panel to top going between steps
+    size: size,
+    open: open
+  });
+  var reducedMotion = window && window.matchMedia ? window.matchMedia('(prefers-reduced-motion: reduce)') : {
+    matches: true
+  }; // scroll panel to top going between steps
 
   useEffect(function () {
     var panelRef = ref || sidePanelRef;
@@ -169,7 +173,7 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 
 
   useEffect(function () {
-    if (open && animateTitle && animationComplete && title && title.length) {
+    if (open && animateTitle && animationComplete && title && title.length && !reducedMotion.matches) {
       var _document$querySelect2, _document$querySelect3, _document$querySelect4;
 
       var sidePanelOuter = document.querySelector("#".concat(blockClass, "-outer"));
@@ -261,7 +265,7 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       _sidePanelOuter === null || _sidePanelOuter === void 0 ? void 0 : _sidePanelOuter.style.setProperty("--".concat(blockClass, "--subtitle-container-height"), "".concat(_sidePanelSubtitleElementHeight, "px"));
       _sidePanelOuter === null || _sidePanelOuter === void 0 ? void 0 : _sidePanelOuter.style.setProperty("--".concat(blockClass, "--action-bar-container-height"), "".concat(sidePanelActionBarElementHeight, "px"));
     }
-  }, [open, animateTitle, animationComplete, shouldRender, panelHeight, title, size]); // click outside functionality if `includeOverlay` prop is set
+  }, [open, animateTitle, animationComplete, shouldRender, panelHeight, title, size, reducedMotion.matches]); // click outside functionality if `includeOverlay` prop is set
 
   useEffect(function () {
     var handleOutsideClick = function handleOutsideClick(event) {
@@ -287,7 +291,7 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     return function () {
       document.removeEventListener('click', handleOutsideClick);
     };
-  }, [includeOverlay, onRequestClose, open, preventCloseOnClickOutside, ref]); // initialize the side panel to open
+  }, [includeOverlay, onRequestClose, open, preventCloseOnClickOutside, ref, onUnmount]); // initialize the side panel to open
 
   useEffect(function () {
     if (open) {
@@ -297,14 +301,21 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 
   var onAnimationEnd = function onAnimationEnd() {
     if (!open) {
-      onUnmount && onUnmount();
+      onUnmount === null || onUnmount === void 0 ? void 0 : onUnmount();
       setRender(false);
     }
 
     setAnimationComplete(true);
-  }; // initializes the side panel to open
+  }; // Set the internal state `animationComplete` to true if
+  // prefers reduced motion is true
 
 
+  useEffect(function () {
+    if (reducedMotion.matches) {
+      setAnimationComplete(true);
+    }
+  }, [reducedMotion.matches]); // initializes the side panel to open
+
   var _onAnimationStart = function onAnimationStart(event) {
     event.persist();
     var isPanelTarget = event.target.id === "".concat(blockClass, "-outer");
@@ -325,7 +336,13 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         pageContentElement.style.marginLeft = 0;
       }
     }
-  }, [open, placement, selectorPageContent, slideIn]); // used to set margins of content for slide in panel version
+  }, [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) {
@@ -333,15 +350,15 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 
       if (placement && placement === 'right' && pageContentElement) {
         pageContentElement.style.marginRight = 0;
-        pageContentElement.style.transition = "margin-right ".concat(moderate02);
+        pageContentElement.style.transition = !reducedMotion.matches ? "margin-right ".concat(moderate02) : null;
         pageContentElement.style.marginRight = SIDE_PANEL_SIZES[size];
       } else if (pageContentElement) {
         pageContentElement.style.marginLeft = 0;
-        pageContentElement.style.transition = "margin-left ".concat(moderate02);
+        pageContentElement.style.transition = !reducedMotion.matches ? "margin-left ".concat(moderate02) : null;
         pageContentElement.style.marginLeft = SIDE_PANEL_SIZES[size];
       }
     }
-  }, [slideIn, selectorPageContent, placement, shouldRender, size]); // adds focus trap functionality
+  }, [slideIn, selectorPageContent, placement, shouldRender, size, reducedMotion.matches]); // adds focus trap functionality
 
   /* istanbul ignore next */
 
@@ -368,7 +385,7 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var _cx, _cx2;
 
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-      className: cx("".concat(blockClass, "__title-container"), (_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__on-detail-step"), currentStep > 0), _defineProperty(_cx, "".concat(blockClass, "__on-detail-step-without-title"), currentStep > 0 && !title), _defineProperty(_cx, "".concat(blockClass, "__title-container--no-title-animation"), !animateTitle), _defineProperty(_cx, "".concat(blockClass, "__title-container-is-animating"), !animationComplete || !open), _defineProperty(_cx, "".concat(blockClass, "__title-container-without-title"), !title), _cx))
+      className: cx("".concat(blockClass, "__title-container"), (_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__on-detail-step"), currentStep > 0), _defineProperty(_cx, "".concat(blockClass, "__on-detail-step-without-title"), currentStep > 0 && !title), _defineProperty(_cx, "".concat(blockClass, "__title-container--no-title-animation"), !animateTitle), _defineProperty(_cx, "".concat(blockClass, "__title-container-is-animating"), !animationComplete || !open), _defineProperty(_cx, "".concat(blockClass, "__title-container-without-title"), !title), _defineProperty(_cx, "".concat(blockClass, "__title-container--reduced-motion"), reducedMotion.matches), _cx))
     }, currentStep > 0 && /*#__PURE__*/React.createElement(Button, {
       "aria-label": navigationBackIconDescription,
       kind: "ghost",
@@ -426,7 +443,7 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       className: "".concat(blockClass, "__title-text"),
       title: title,
       "aria-hidden": false
-    }, title), animateTitle && title && title.length && /*#__PURE__*/React.createElement("h2", {
+    }, title), animateTitle && title && title.length && !reducedMotion.matches && /*#__PURE__*/React.createElement("h2", {
       className: "".concat(blockClass, "__collapsed-title-text"),
       title: title,
       "aria-hidden": true
@@ -443,7 +460,7 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     id: "".concat(blockClass, "-outer"),
     className: mainPanelClassNames,
     style: {
-      animation: "".concat(open ? placement === 'right' ? "sidePanelEntranceRight ".concat(moderate02) : "sidePanelEntranceLeft ".concat(moderate02) : placement === 'right' ? "sidePanelExitRight ".concat(moderate02) : "sidePanelExitLeft ".concat(moderate02))
+      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) {
@@ -476,7 +493,7 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     ref: sidePanelOverlayRef,
     className: "".concat(blockClass, "__overlay"),
     style: {
-      animation: "".concat(open ? "sidePanelOverlayEntrance ".concat(moderate02) : "sidePanelOverlayExit ".concat(moderate02))
+      animation: !reducedMotion.matches ? "".concat(open ? "side-panel-overlay-entrance ".concat(moderate02) : "side-panel-overlay-exit ".concat(moderate02)) : null
     }
   }));
 }); // Return a placeholder if not released and not enabled by feature flag
@@ -508,7 +525,7 @@ SidePanel.propTypes = {
    * See https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
    */
   actions: allPropTypes([ActionSet.validateActions(), PropTypes.arrayOf(PropTypes.shape(_objectSpread(_objectSpread({}, Button.propTypes), {}, {
-    kind: PropTypes.oneOf(['ghost', 'secondary', 'primary']),
+    kind: PropTypes.oneOf(['ghost', 'danger--ghost', 'secondary', 'danger', 'primary']),
     label: PropTypes.string,
     loading: PropTypes.bool,
     // we duplicate this Button prop to improve the DocGen here

package/es/components/Tearsheet/Tearsheet.js

@@ -82,7 +82,7 @@ Tearsheet.propTypes = _objectSpread({
   actions: allPropTypes([ActionSet.validateActions(function () {
     return 'max';
   }), PropTypes.arrayOf(PropTypes.shape(_objectSpread(_objectSpread({}, Button.propTypes), {}, {
-    kind: PropTypes.oneOf(['ghost', 'secondary', 'primary']),
+    kind: PropTypes.oneOf(['ghost', 'danger--ghost', 'secondary', 'danger', 'primary']),
     label: PropTypes.string,
     loading: PropTypes.bool,
     // we duplicate this Button prop to improve the DocGen here

package/es/components/Tearsheet/TearsheetNarrow.js

@@ -78,7 +78,7 @@ TearsheetNarrow.propTypes = _objectSpread({
   actions: allPropTypes([ActionSet.validateActions(function () {
     return 'lg';
   }), PropTypes.arrayOf(PropTypes.shape(_objectSpread(_objectSpread({}, Button.propTypes), {}, {
-    kind: PropTypes.oneOf(['ghost', 'secondary', 'primary']),
+    kind: PropTypes.oneOf(['ghost', 'danger--ghost', 'secondary', 'danger', 'primary']),
     label: PropTypes.string,
     loading: PropTypes.bool,
     // we duplicate this Button prop to improve the DocGen here

package/es/components/Tearsheet/TearsheetShell.js

@@ -15,7 +15,7 @@ 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, { useEffect, useLayoutEffect, useState, useRef } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import { useResizeDetector } from 'react-resize-detector'; // Other standard imports.
 
 import PropTypes from 'prop-types';
@@ -120,10 +120,9 @@ export var TearsheetShell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     setTimeout(function () {
       return element.focus();
     }, 1);
-  }; // Hook called whenever the tearsheet mounts, unmounts, or 'open' changes.
+  };
 
-
-  useLayoutEffect(function () {
+  useEffect(function () {
     var notify = function notify() {
       return stack.all.forEach(function (handler) {
         handler(Math.min(stack.open.length, maxDepth), stack.open.indexOf(handler) + 1);
@@ -281,7 +280,7 @@ TearsheetShell.propTypes = _objectSpread({
   actions: PropTypes.arrayOf( // NB we don't include the validator here, as the component wrapping this
   // one should ensure appropriate validation is done.
   PropTypes.shape(_objectSpread(_objectSpread({}, Button.propTypes), {}, {
-    kind: PropTypes.oneOf(['ghost', 'secondary', 'primary']),
+    kind: PropTypes.oneOf(['ghost', 'danger--ghost', 'secondary', 'danger', 'primary']),
     label: PropTypes.string,
     loading: PropTypes.bool,
     // we duplicate this Button prop to improve the DocGen here

package/es/components/WebTerminal/WebTerminal.js

@@ -63,7 +63,7 @@ export var WebTerminal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     ref: ref,
     className: cx([blockClass, (_ref2 = {}, _defineProperty(_ref2, "".concat(blockClass, "--open"), open), _defineProperty(_ref2, "".concat(blockClass, "--closed"), !open), _defineProperty(_ref2, className, className), _ref2)]),
     style: {
-      animation: "".concat(open ? 'webTerminalEntrance 250ms' : 'webTerminalExit 250ms')
+      animation: "".concat(open ? 'web-terminal-entrance 250ms' : 'web-terminal-exit 250ms')
     },
     onAnimationEnd: onAnimationEnd
   }), /*#__PURE__*/React.createElement("header", {

package/es/components/index.js

@@ -37,4 +37,5 @@ export { WebTerminal } from './WebTerminal';
 export { EditSidePanel } from './EditSidePanel';
 export { OptionsTile } from './OptionsTile';
 export { CancelableTextEdit } from './CancelableTextEdit';
-export { InlineEdit } from './InlineEdit';
+export { InlineEdit } from './InlineEdit';
+export { DataSpreadsheet } from './DataSpreadsheet';

package/es/global/js/hooks/index.js

@@ -11,4 +11,5 @@ export { useCreateComponentFocus } from './useCreateComponentFocus';
 export { useCreateComponentStepChange } from './useCreateComponentStepChange';
 export { usePreviousValue } from './usePreviousValue';
 export { useResetCreateComponent } from './useResetCreateComponent';
+export { useRetrieveStepData } from './useRetrieveStepData';
 export { useValidCreateStepCount } from './useValidCreateStepCount';

package/es/global/js/hooks/useCreateComponentStepChange.js

@@ -2,14 +2,16 @@ import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 
 /**
- * Copyright IBM Corp. 2021, 2021
+ * Copyright IBM Corp. 2021, 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 { useCallback, useEffect } from 'react';
 export var useCreateComponentStepChange = function useCreateComponentStepChange(_ref) {
-  var totalStepCount = _ref.totalStepCount,
+  var firstIncludedStep = _ref.firstIncludedStep,
+      lastIncludedStep = _ref.lastIncludedStep,
+      stepData = _ref.stepData,
       onNext = _ref.onNext,
       isSubmitDisabled = _ref.isSubmitDisabled,
       setCurrentStep = _ref.setCurrentStep,
@@ -174,20 +176,29 @@ export var useCreateComponentStepChange = function useCreateComponentStepChange(
       };
     }();
 
-    if (totalStepCount > 0) {
+    if ((stepData === null || stepData === void 0 ? void 0 : stepData.length) > 0) {
       var buttons = [];
 
-      if (totalStepCount > 1 && !shouldViewAll) {
+      if ((stepData === null || stepData === void 0 ? void 0 : stepData.length) > 1 && !shouldViewAll) {
         buttons.push({
           key: 'create-action-button-back',
           label: backButtonText,
           onClick: function onClick() {
             return setCurrentStep(function (prev) {
-              return prev - 1;
+              // Find previous included step to render
+              // There will always be a previous step otherwise we will
+              // have disabled the back button since we have reached the first visible step
+              do {
+                var _stepData;
+
+                prev--;
+              } while (!((_stepData = stepData[prev - 1]) !== null && _stepData !== void 0 && _stepData.shouldIncludeStep));
+
+              return prev;
             });
           },
           kind: 'secondary',
-          disabled: currentStep === 1
+          disabled: currentStep === firstIncludedStep
         });
       }
 
@@ -201,8 +212,8 @@ export var useCreateComponentStepChange = function useCreateComponentStepChange(
       });
       buttons.push({
         key: 'create-action-button-submit',
-        label: shouldViewAll ? submitButtonText : currentStep < totalStepCount ? nextButtonText : submitButtonText,
-        onClick: shouldViewAll ? handleSubmit : currentStep < totalStepCount ? handleNext : handleSubmit,
+        label: shouldViewAll ? submitButtonText : currentStep < lastIncludedStep ? nextButtonText : submitButtonText,
+        onClick: shouldViewAll ? handleSubmit : currentStep < lastIncludedStep ? handleNext : handleSubmit,
         disabled: isSubmitDisabled,
         kind: 'primary',
         loading: isSubmitting,
@@ -210,11 +221,20 @@ export var useCreateComponentStepChange = function useCreateComponentStepChange(
       });
       setCreateComponentActions(buttons);
     }
-  }, [totalStepCount, onNext, isSubmitDisabled, backButtonText, cancelButtonText, currentStep, onClose, nextButtonText, submitButtonText, onRequestSubmit, isSubmitting, shouldViewAll, componentBlockClass, componentName, continueToNextStep, setCurrentStep, setCreateComponentActions, setIsSubmitting, setShouldViewAll, setModalIsOpen]);
+  }, [firstIncludedStep, lastIncludedStep, stepData, onNext, isSubmitDisabled, backButtonText, cancelButtonText, currentStep, onClose, nextButtonText, submitButtonText, onRequestSubmit, isSubmitting, shouldViewAll, componentBlockClass, componentName, continueToNextStep, setCurrentStep, setCreateComponentActions, setIsSubmitting, setShouldViewAll, setModalIsOpen]);
   var continueToNextStep = useCallback(function () {
     setIsSubmitting(false);
     setCurrentStep(function (prev) {
-      return prev + 1;
+      // Find next included step to render
+      // There will always be a next step otherwise we will
+      // have reach the onSubmit
+      do {
+        var _stepData2;
+
+        prev++;
+      } while (!((_stepData2 = stepData[prev - 1]) !== null && _stepData2 !== void 0 && _stepData2.shouldIncludeStep));
+
+      return prev;
     });
-  }, [setCurrentStep, setIsSubmitting]);
+  }, [setCurrentStep, setIsSubmitting, stepData]);
 };

package/es/global/js/hooks/useResetCreateComponent.js

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2021, 2021
+ * Copyright IBM Corp. 2021, 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.
@@ -8,6 +8,7 @@ import { useEffect } from 'react';
 /**
  * Resets the current step of the create component if it has been closed.
  * @param {object} useResetCreateComponent - Create component that uses this custom hook
+ * @param {object} useResetCreateComponent.firstIncludedStep
  * @param {object} useResetCreateComponent.previousState
  * @param {boolean} useResetCreateComponent.open
  * @param {Function} useResetCreateComponent.setCurrentStep
@@ -17,7 +18,8 @@ import { useEffect } from 'react';
  */
 
 export var useResetCreateComponent = function useResetCreateComponent(_ref) {
-  var previousState = _ref.previousState,
+  var firstIncludedStep = _ref.firstIncludedStep,
+      previousState = _ref.previousState,
       open = _ref.open,
       setCurrentStep = _ref.setCurrentStep,
       initialStep = _ref.initialStep,
@@ -28,7 +30,8 @@ export var useResetCreateComponent = function useResetCreateComponent(_ref) {
       if (initialStep && totalSteps && Number(initialStep) <= Number(totalSteps) && Number(initialStep) > 0) {
         setCurrentStep(Number(initialStep));
       } else {
-        setCurrentStep(1);
+        // default should be fist includedStep instead of just 1
+        setCurrentStep(firstIncludedStep);
       } // An invalid initialStep value was provided, we'll default to rendering the first step in this scenario
 
 
@@ -36,5 +39,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."));
       }
     }
-  }, [open, previousState, setCurrentStep, initialStep, totalSteps, componentName]);
+  }, [firstIncludedStep, open, previousState, setCurrentStep, initialStep, totalSteps, componentName]);
 };

package/es/global/js/hooks/useRetrieveStepData.js

@@ -0,0 +1,51 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+
+/**
+ * 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 { useEffect } from 'react';
+/**
+ * This useEffect makes sure that every CreateTearsheetStep/CreateFullPageStep reports back it's
+ * title, secondaryLabel, introStep, and shouldIncludeStep data so that it can be sent to the CreateInfluencer.
+ * @param {object} useResetCreateComponent
+ * @param {object} useResetCreateComponent.stepsContext
+ * @param {number} useResetCreateComponent.stepNumber
+ * @param {boolean} useResetCreateComponent.introStep
+ * @param {boolean} useResetCreateComponent.shouldIncludeStep
+ * @param {string} useResetCreateComponent.secondaryLabel
+ * @param {string} useResetCreateComponent.title
+ */
+
+export var useRetrieveStepData = function useRetrieveStepData(_ref) {
+  var stepsContext = _ref.stepsContext,
+      stepNumber = _ref.stepNumber,
+      introStep = _ref.introStep,
+      shouldIncludeStep = _ref.shouldIncludeStep,
+      secondaryLabel = _ref.secondaryLabel,
+      title = _ref.title;
+  useEffect(function () {
+    if (stepsContext) {
+      stepsContext.setStepData(function (prev) {
+        var stepItem = {
+          title: title,
+          secondaryLabel: secondaryLabel,
+          introStep: introStep,
+          shouldIncludeStep: shouldIncludeStep
+        };
+        var previousItem = prev[stepNumber - 1];
+
+        if ((previousItem === null || previousItem === void 0 ? void 0 : previousItem.title) !== stepItem.title || (previousItem === null || previousItem === void 0 ? void 0 : previousItem.secondaryLabel) !== stepItem.secondaryLabel || (previousItem === null || previousItem === void 0 ? void 0 : previousItem.introStep) !== stepItem.introStep || (previousItem === null || previousItem === void 0 ? void 0 : previousItem.shouldIncludeStep) !== stepItem.shouldIncludeStep) {
+          var clone = _toConsumableArray(prev);
+
+          clone[stepNumber - 1] = stepItem;
+          return clone;
+        }
+
+        return prev;
+      });
+    }
+  }, [shouldIncludeStep, title, secondaryLabel, introStep, stepsContext, stepNumber]);
+};

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

@@ -63,7 +63,8 @@ var defaults = {
     EditSidePanel: false,
     OptionsTile: false,
     CancelableTextEdit: false,
-    InlineEdit: false
+    InlineEdit: false,
+    DataSpreadsheet: false
     /* new component flags here - comment used by generate CLI */
 
   },

package/es/global/js/utils/getScrollbarWidth.js

@@ -0,0 +1,14 @@
+/**
+ * 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 getScrollbarWidth = function getScrollbarWidth() {
+  var scrollDiv = document.createElement('div');
+  scrollDiv.setAttribute('style', 'width: 100px; height: 100px; overflow: scroll; position:absolute; top:-9999px;');
+  document.body.appendChild(scrollDiv);
+  var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
+  document.body.removeChild(scrollDiv);
+  return scrollbarWidth;
+};

package/es/global/js/utils/lastIndexInArray.js

@@ -0,0 +1,26 @@
+/**
+ * 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.
+ */
+
+/**
+ * This utility will return the index of the last instance of an
+ * item in the given array of objects whose key is equal to the value
+ * parameter. If there are no matches, -1 is returned as similar to findIndex
+ * @param {Array<Object.*>} array
+ * @param {string} key
+ * @param {string|boolean|number} value
+ */
+export var lastIndexInArray = function lastIndexInArray(array, key, value) {
+  for (var i = array.length - 1; i >= 0; i--) {
+    var _array$i;
+
+    if (((_array$i = array[i]) === null || _array$i === void 0 ? void 0 : _array$i[key]) === value) {
+      return i + 1;
+    }
+  }
+
+  return -1;
+};

package/es/settings.js

@@ -1,5 +1,4 @@
 import { Canary } from './components/_Canary';
-import featureFlags from './generated/feature-flags/feature-flags';
 import pkgSettings from './global/js/package-settings';
 import { settings as carbonSettings } from 'carbon-components';
 import React from 'react';
@@ -13,10 +12,6 @@ export var carbon = {
     carbonSettings.prefix = val;
   },
 
-  get flags() {
-    return featureFlags;
-  },
-
   get themes() {
     return themes;
   }

package/lib/components/ActionSet/ActionSet.js

@@ -46,7 +46,7 @@ var ActionSetButton = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, (0, _extends2.default)({}, rest, {
     isExpressive: true,
-    className: (0, _classnames.default)(className, ["".concat(blockClass, "__action-button"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__action-button--ghost"), kind === 'ghost')]),
+    className: (0, _classnames.default)(className, ["".concat(blockClass, "__action-button"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__action-button--ghost"), kind === 'ghost' || kind === 'danger--ghost')]),
     disabled: disabled || loading || false,
     kind: kind,
     onClick: onClick,
@@ -57,11 +57,11 @@ var ActionSetButton = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
 
 ActionSetButton.displayName = 'ActionSetButton';
 ActionSetButton.propTypes = _objectSpread(_objectSpread({}, _carbonComponentsReact.Button.PropTypes), {}, {
-  kind: _propTypes.default.oneOf(['ghost', 'secondary', 'primary']),
+  kind: _propTypes.default.oneOf(['ghost', 'danger--ghost', 'secondary', 'danger', 'primary']),
   label: _propTypes.default.string,
   loading: _propTypes.default.bool
 });
-var defaultKind = _carbonComponentsReact.Button.defaultProps.kind;
+var defaultKind = 'primary';
 
 var willStack = function willStack(size, numberOfActions) {
   return size === 'xs' || size === 'sm' || size === 'md' && numberOfActions > 2;
@@ -90,13 +90,24 @@ var ActionSet = /*#__PURE__*/_react.default.forwardRef(function (_ref3, ref) {
       rest = (0, _objectWithoutProperties2.default)(_ref3, _excluded2);
   var buttons = actions && ((_actions$slice = actions.slice) === null || _actions$slice === void 0 ? void 0 : _actions$slice.call(actions, 0)) || []; // We stack the buttons in a xs/sm set, or if there are three or more in a md set.
 
-  var stacking = willStack(size, buttons.length); // order the actions with ghost buttons first and primary buttons last
-  // (and the opposite way if we're stacking)
+  var stacking = willStack(size, buttons.length); // Order of button kinds: ghost first, then danger--ghost, then most other types,
+  // then danger, and finally primary
+
+  var buttonOrder = function buttonOrder(kind) {
+    var _ghost$dangerGhost$;
+
+    return (_ghost$dangerGhost$ = {
+      ghost: 1,
+      'danger--ghost': 2,
+      danger: 4,
+      primary: 5
+    }[kind]) !== null && _ghost$dangerGhost$ !== void 0 ? _ghost$dangerGhost$ : 3;
+  }; // order the actions with ghost/ghost-danger buttons first and primary/danger buttons last
+  // (or the opposite way if we're stacking)
+
 
   buttons.sort(function (action1, action2) {
-    var kind1 = action1.kind || defaultKind;
-    var kind2 = action2.kind || defaultKind;
-    return kind1 === 'ghost' || kind2 === 'primary' ? stacking ? 1 : -1 : kind1 === 'primary' || kind2 === 'ghost' ? stacking ? -1 : 1 : 0;
+    return (buttonOrder(action1.kind || defaultKind) - buttonOrder(action2.kind || defaultKind)) * (stacking ? -1 : 1);
   });
   return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.ButtonSet, (0, _extends2.default)({}, rest, {
     className: (0, _classnames.default)(blockClass, className, (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "--row-single"), !stacking && buttons.length === 1), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "--row-double"), !stacking && buttons.length === 2), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "--row-triple"), !stacking && buttons.length === 3), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "--row-quadruple"), !stacking && buttons.length >= 4), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "--stacking"), stacking), _cx), "".concat(blockClass, "--").concat(size)),
@@ -147,13 +158,14 @@ ActionSet.validateActions = function (sizeFn) {
 
       var primaryActions = countActions('primary');
       var secondaryActions = countActions('secondary');
-      var ghostActions = countActions('ghost');
+      var dangerActions = countActions('danger');
+      var ghostActions = countActions('ghost') + countActions('danger--ghost');
       stacking && actions > 3 && problems.push("you cannot have more than three actions in this size of ".concat(componentName));
       actions > 4 && problems.push("you cannot have more than four actions in a ".concat(componentName));
       primaryActions > 1 && problems.push("you cannot have more than one 'primary' action in a ".concat(componentName));
       ghostActions > 1 && problems.push("you cannot have more than one 'ghost' action in a ".concat(componentName));
       stacking && actions > 1 && ghostActions > 0 && problems.push("you cannot have a 'ghost' button in conjunction with other action types in this size of ".concat(componentName));
-      actions > primaryActions + secondaryActions + ghostActions && problems.push("you can only have 'primary', 'secondary' and 'ghost' buttons in a ".concat(componentName));
+      actions > primaryActions + secondaryActions + dangerActions + ghostActions && problems.push("you can only have 'primary', 'danger', 'secondary', 'ghost' and 'danger--ghost' buttons in a ".concat(componentName));
     }
 
     return problems.length > 0 ? new Error("Invalid ".concat(location, " `").concat(name, "` supplied to `").concat(componentName, "`: ").concat(problems.join(', and '), ".")) : null;
@@ -174,7 +186,7 @@ ActionSet.propTypes = {
    * See https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
    */
   actions: (0, _propsHelper.allPropTypes)([ActionSet.validateActions(), _propTypes.default.arrayOf(_propTypes.default.shape(_objectSpread(_objectSpread({}, _carbonComponentsReact.Button.propTypes), {}, {
-    kind: _propTypes.default.oneOf(['ghost', 'secondary', 'primary']),
+    kind: _propTypes.default.oneOf(['ghost', 'danger--ghost', 'secondary', 'danger', 'primary']),
     label: _propTypes.default.string,
     loading: _propTypes.default.bool,
     // we duplicate this Button prop to improve the DocGen here