@carbon/ibm-products 2.65.0 → 2.66.0

package/lib/components/CreateTearsheet/CreateTearsheetStep.js

@@ -18,12 +18,11 @@ var pconsole = require('../../global/js/utils/pconsole.js');
 var usePreviousValue = require('../../global/js/hooks/usePreviousValue.js');
 var useRetrieveStepData = require('../../global/js/hooks/useRetrieveStepData.js');
 
-var _excluded = ["children", "className", "description", "disableSubmit", "experimentalSecondarySubmit", "fieldsetLegendText", "hasFieldset", "includeStep", "introStep", "invalid", "onMount", "onNext", "onPrevious", "secondaryLabel", "subtitle", "title"];
-var componentName = 'CreateTearsheetStep';
-var blockClass = "".concat(settings.pkg.prefix, "--tearsheet-create__step");
+const componentName = 'CreateTearsheetStep';
+const blockClass = `${settings.pkg.prefix}--tearsheet-create__step`;
 
 // Default values for props
-var defaults = {
+const defaults = {
   hasFieldset: true,
   includeStep: true
 };
@@ -37,64 +36,64 @@ var defaults = {
  * @property {() => void} [onClick] - Optional click handler function to be executed when the button is clicked.
  */
 
-exports.CreateTearsheetStep = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var children = _ref.children,
-    className = _ref.className,
-    description = _ref.description,
-    disableSubmit = _ref.disableSubmit,
-    experimentalSecondarySubmit = _ref.experimentalSecondarySubmit,
-    fieldsetLegendText = _ref.fieldsetLegendText,
-    _ref$hasFieldset = _ref.hasFieldset,
-    hasFieldset = _ref$hasFieldset === void 0 ? defaults.hasFieldset : _ref$hasFieldset,
-    _ref$includeStep = _ref.includeStep,
-    includeStep = _ref$includeStep === void 0 ? defaults.includeStep : _ref$includeStep,
-    introStep = _ref.introStep,
-    invalid = _ref.invalid,
-    onMount = _ref.onMount,
-    onNext = _ref.onNext,
-    onPrevious = _ref.onPrevious,
-    secondaryLabel = _ref.secondaryLabel,
-    subtitle = _ref.subtitle,
-    title = _ref.title,
-    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  var localRef = React.useRef(null);
-  var stepRef = ref || localRef;
-  var stepRefValue = stepRef.current;
-  var stepsContext = React.useContext(CreateTearsheet.StepsContext);
-  var stepNumber = React.useContext(CreateTearsheet.StepNumberContext);
-  var _useState = React.useState(includeStep),
-    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-    shouldIncludeStep = _useState2[0],
-    setShouldIncludeStep = _useState2[1];
-  var previousState = usePreviousValue.usePreviousValue({
-    currentStep: stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep
+exports.CreateTearsheetStep = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    // The component props, in alphabetical order (for consistency).
+
+    children,
+    className,
+    description,
+    disableSubmit,
+    experimentalSecondarySubmit,
+    fieldsetLegendText,
+    hasFieldset = defaults.hasFieldset,
+    includeStep = defaults.includeStep,
+    introStep,
+    invalid,
+    onMount,
+    onNext,
+    onPrevious,
+    secondaryLabel,
+    subtitle,
+    title,
+    // Collect any other property values passed in.
+    ...rest
+  } = _ref;
+  const localRef = React.useRef(null);
+  const stepRef = ref || localRef;
+  const stepRefValue = stepRef.current;
+  const stepsContext = React.useContext(CreateTearsheet.StepsContext);
+  const stepNumber = React.useContext(CreateTearsheet.StepNumberContext);
+  const [shouldIncludeStep, setShouldIncludeStep] = React.useState(includeStep);
+  const previousState = usePreviousValue.usePreviousValue({
+    currentStep: stepsContext?.currentStep
   });
   useRetrieveStepData.useRetrieveStepData({
-    stepsContext: stepsContext,
-    stepNumber: stepNumber,
+    stepsContext,
+    stepNumber,
     introStep: !!introStep,
-    shouldIncludeStep: shouldIncludeStep,
+    shouldIncludeStep,
     secondaryLabel: secondaryLabel || '',
-    title: title,
+    title,
     invalid: !!invalid
   });
 
   // This useEffect reports back the onMount value so that they can be used
   // in the appropriate custom hooks.
-  React.useEffect(function () {
-    if (stepNumber === (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep) && (previousState === null || previousState === void 0 ? void 0 : previousState.currentStep) !== (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep)) {
-      stepsContext === null || stepsContext === void 0 || stepsContext.setOnMount(onMount);
-      stepsContext === null || stepsContext === void 0 || stepsContext.setExperimentalSecondarySubmit(experimentalSecondarySubmit);
+  React.useEffect(() => {
+    if (stepNumber === stepsContext?.currentStep && previousState?.currentStep !== stepsContext?.currentStep) {
+      stepsContext?.setOnMount(onMount);
+      stepsContext?.setExperimentalSecondarySubmit(experimentalSecondarySubmit);
     }
-  }, [onMount, experimentalSecondarySubmit, stepsContext, stepNumber, previousState === null || previousState === void 0 ? void 0 : previousState.currentStep]);
+  }, [onMount, experimentalSecondarySubmit, stepsContext, stepNumber, previousState?.currentStep]);
 
   // Used to take the `includeStep` prop and use it as a local state value
-  React.useEffect(function () {
+  React.useEffect(() => {
     setShouldIncludeStep(includeStep);
   }, [includeStep, stepsContext, title]);
-  var setFocusChildrenTabIndex = function setFocusChildrenTabIndex(childInputs, value) {
-    if (childInputs !== null && childInputs !== void 0 && childInputs.length) {
-      childInputs.forEach(function (child) {
+  const setFocusChildrenTabIndex = (childInputs, value) => {
+    if (childInputs?.length) {
+      childInputs.forEach(child => {
         child.tabIndex = value;
       });
     }
@@ -102,39 +101,39 @@ exports.CreateTearsheetStep = /*#__PURE__*/React.forwardRef(function (_ref, ref)
 
   // Whenever we are the current step, supply our disableSubmit and onNext values to the
   // steps container context so that it can manage the 'Next' button appropriately.
-  React.useEffect(function () {
-    var focusElementQuery = "button, input, select, textarea, a";
-    if (stepNumber !== (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep)) {
+  React.useEffect(() => {
+    const focusElementQuery = `button, input, select, textarea, a`;
+    if (stepNumber !== stepsContext?.currentStep) {
       // Specify tab-index -1 for focusable elements not contained
       // in the current step so that the useFocus hook can exclude
       // from the focus trap
-      var childInputs = stepRefValue === null || stepRefValue === void 0 ? void 0 : stepRefValue.querySelectorAll(focusElementQuery);
+      const childInputs = stepRefValue?.querySelectorAll(focusElementQuery);
       setFocusChildrenTabIndex(childInputs, -1);
     }
-    if (stepNumber === (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep)) {
+    if (stepNumber === stepsContext?.currentStep) {
       // Specify tab-index 0 for current step focusable elements
       // for the useFocus hook to know which elements to include
       // in focus trap
-      var _childInputs = stepRefValue === null || stepRefValue === void 0 ? void 0 : stepRefValue.querySelectorAll(focusElementQuery);
-      setFocusChildrenTabIndex(_childInputs, 0);
+      const childInputs = stepRefValue?.querySelectorAll(focusElementQuery);
+      setFocusChildrenTabIndex(childInputs, 0);
       stepsContext.setIsDisabled(!!disableSubmit);
-      stepsContext === null || stepsContext === void 0 || stepsContext.setOnNext(onNext); // needs to be updated here otherwise there could be stale state values from only initially setting onNext
-      stepsContext === null || stepsContext === void 0 || stepsContext.setOnPrevious(onPrevious);
+      stepsContext?.setOnNext(onNext); // needs to be updated here otherwise there could be stale state values from only initially setting onNext
+      stepsContext?.setOnPrevious(onPrevious);
 
       //Handle props for experimentalSecondarySubmit button, depending on state change
-      stepsContext === null || stepsContext === void 0 || stepsContext.setExperimentalSecondarySubmit(experimentalSecondarySubmit);
+      stepsContext?.setExperimentalSecondarySubmit(experimentalSecondarySubmit);
     }
   }, [stepsContext, stepNumber, disableSubmit, onNext, onPrevious, stepRef, stepRefValue, experimentalSecondarySubmit]);
-  var renderDescription = function renderDescription() {
+  const renderDescription = () => {
     if (description) {
       if (typeof description === 'string') {
         return /*#__PURE__*/React.createElement("p", {
-          className: "".concat(blockClass, "--description")
+          className: `${blockClass}--description`
         }, description);
       }
       if (/*#__PURE__*/React.isValidElement(description)) {
         return /*#__PURE__*/React.createElement("div", {
-          className: "".concat(blockClass, "--description")
+          className: `${blockClass}--description`
         }, description);
       }
     }
@@ -143,22 +142,25 @@ exports.CreateTearsheetStep = /*#__PURE__*/React.forwardRef(function (_ref, ref)
   return stepsContext ? /*#__PURE__*/React.createElement("div", {
     ref: stepRef
   }, /*#__PURE__*/React.createElement(react.Grid, _rollupPluginBabelHelpers.extends({}, rest, {
-    className: cx(blockClass, className, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__step--hidden-step"), stepNumber !== (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep)), "".concat(blockClass, "__step--visible-step"), stepNumber === (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep)))
+    className: cx(blockClass, className, {
+      [`${blockClass}__step--hidden-step`]: stepNumber !== stepsContext?.currentStep,
+      [`${blockClass}__step--visible-step`]: stepNumber === stepsContext?.currentStep
+    })
   }), /*#__PURE__*/React.createElement(react.Column, {
     xlg: 12,
     lg: 12,
     md: 8,
     sm: 4
   }, /*#__PURE__*/React.createElement("h4", {
-    className: "".concat(blockClass, "--title")
+    className: `${blockClass}--title`
   }, title), subtitle && /*#__PURE__*/React.createElement("h6", {
-    className: "".concat(blockClass, "--subtitle")
+    className: `${blockClass}--subtitle`
   }, subtitle), renderDescription()), /*#__PURE__*/React.createElement(react.Column, {
     span: 100
   }, hasFieldset ? /*#__PURE__*/React.createElement(react.FormGroup, {
     legendText: fieldsetLegendText,
-    className: "".concat(blockClass, "--fieldset")
-  }, children) : children))) : pconsole.default.warn("You have tried using a ".concat(componentName, " component outside of a CreateTearsheet. This is not allowed. ").concat(componentName, "s should always be children of the CreateTearsheet"));
+    className: `${blockClass}--fieldset`
+  }, children) : children))) : pconsole.default.warn(`You have tried using a ${componentName} component outside of a CreateTearsheet. This is not allowed. ${componentName}s should always be children of the CreateTearsheet`);
 });
 
 // Return a placeholder if not released and not enabled by feature flag
@@ -201,8 +203,10 @@ exports.CreateTearsheetStep.propTypes = {
    * Otherwise, use CSS to hide/remove this label text.
    */
   /**@ts-ignore*/
-  fieldsetLegendText: index.default.string.isRequired.if(function (_ref2) {
-    var hasFieldset = _ref2.hasFieldset;
+  fieldsetLegendText: index.default.string.isRequired.if(_ref2 => {
+    let {
+      hasFieldset
+    } = _ref2;
     return !!hasFieldset;
   }),
   /**

package/lib/components/CreateTearsheetNarrow/CreateTearsheetNarrow.js

@@ -17,11 +17,9 @@ var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');
 var uuidv4 = require('../../global/js/utils/uuidv4.js');
 
-var _excluded = ["children", "className", "description", "disableSubmit", "formDescription", "formTitle", "label", "open", "onRequestClose", "onRequestSubmit", "primaryButtonText", "secondaryButtonText", "selectorPrimaryFocus", "title", "verticalPosition"];
-
 // The block part of our conventional BEM class names (blockClass__E--M).
-var blockClass = "".concat(settings.pkg.prefix, "--create-tearsheet-narrow");
-var componentName = 'CreateTearsheetNarrow';
+const blockClass = `${settings.pkg.prefix}--create-tearsheet-narrow`;
+const componentName = 'CreateTearsheetNarrow';
 
 // NOTE: the component SCSS is not imported here: it is rolled up separately.
 
@@ -29,24 +27,26 @@ var componentName = 'CreateTearsheetNarrow';
  * Use a narrow tearsheet as an alternative to a modal when there is scrolling.
  * Use when the form fields can be broken down into sections using section headers.
  */
-exports.CreateTearsheetNarrow = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var children = _ref.children,
-    className = _ref.className,
-    description = _ref.description,
-    disableSubmit = _ref.disableSubmit,
-    formDescription = _ref.formDescription,
-    formTitle = _ref.formTitle,
-    label = _ref.label,
-    open = _ref.open,
-    onRequestClose = _ref.onRequestClose,
-    onRequestSubmit = _ref.onRequestSubmit,
-    primaryButtonText = _ref.primaryButtonText,
-    secondaryButtonText = _ref.secondaryButtonText,
-    selectorPrimaryFocus = _ref.selectorPrimaryFocus,
-    title = _ref.title,
-    verticalPosition = _ref.verticalPosition,
-    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  var actions = [{
+exports.CreateTearsheetNarrow = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    children,
+    className,
+    description,
+    disableSubmit,
+    formDescription,
+    formTitle,
+    label,
+    open,
+    onRequestClose,
+    onRequestSubmit,
+    primaryButtonText,
+    secondaryButtonText,
+    selectorPrimaryFocus,
+    title,
+    verticalPosition,
+    ...rest
+  } = _ref;
+  const actions = [{
     label: primaryButtonText,
     onClick: onRequestSubmit,
     kind: 'primary',
@@ -56,8 +56,8 @@ exports.CreateTearsheetNarrow = /*#__PURE__*/React.forwardRef(function (_ref, re
     onClick: onRequestClose,
     kind: 'secondary'
   }];
-  var formTextClass = "".concat(blockClass, "__content-text");
-  var formTitleId = uuidv4.default();
+  const formTextClass = `${blockClass}__content-text`;
+  const formTitleId = uuidv4.default();
   return /*#__PURE__*/React.createElement(TearsheetNarrow.TearsheetNarrow, _rollupPluginBabelHelpers.extends({}, rest, {
     title: title,
     description: description,
@@ -65,8 +65,8 @@ exports.CreateTearsheetNarrow = /*#__PURE__*/React.forwardRef(function (_ref, re
     actions: actions,
     open: open,
     ref: ref,
-    onClose: function onClose() {
-      onRequestClose === null || onRequestClose === void 0 || onRequestClose();
+    onClose: () => {
+      onRequestClose?.();
       return false;
     },
     label: label,
@@ -74,12 +74,12 @@ exports.CreateTearsheetNarrow = /*#__PURE__*/React.forwardRef(function (_ref, re
     verticalPosition: verticalPosition,
     role: "presentation"
   }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement("h3", {
-    className: cx("".concat(blockClass, "__form-title-text"), formTextClass),
+    className: cx(`${blockClass}__form-title-text`, formTextClass),
     id: formTitleId
   }, formTitle), /*#__PURE__*/React.createElement("p", {
-    className: cx("".concat(blockClass, "__form-description-text"), formTextClass)
+    className: cx(`${blockClass}__form-description-text`, formTextClass)
   }, formDescription), /*#__PURE__*/React.createElement(react.Form, {
-    className: "".concat(blockClass, "__form"),
+    className: `${blockClass}__form`,
     "aria-labelledby": formTitleId
   }, children));
 });