@carbon/ibm-products 2.65.0 → 2.66.0

package/es/components/CreateTearsheet/CreateTearsheetStep.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { forwardRef, useRef, useContext, useState, useEffect, isValidElement } from 'react';
 import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
@@ -16,12 +16,11 @@ import pconsole from '../../global/js/utils/pconsole.js';
 import { usePreviousValue } from '../../global/js/hooks/usePreviousValue.js';
 import { useRetrieveStepData } from '../../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(pkg.prefix, "--tearsheet-create__step");
+const componentName = 'CreateTearsheetStep';
+const blockClass = `${pkg.prefix}--tearsheet-create__step`;
 
 // Default values for props
-var defaults = {
+const defaults = {
   hasFieldset: true,
   includeStep: true
 };
@@ -35,64 +34,64 @@ var defaults = {
  * @property {() => void} [onClick] - Optional click handler function to be executed when the button is clicked.
  */
 
-var CreateTearsheetStep = /*#__PURE__*/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 = _objectWithoutProperties(_ref, _excluded);
-  var localRef = useRef(null);
-  var stepRef = ref || localRef;
-  var stepRefValue = stepRef.current;
-  var stepsContext = useContext(StepsContext);
-  var stepNumber = useContext(StepNumberContext);
-  var _useState = useState(includeStep),
-    _useState2 = _slicedToArray(_useState, 2),
-    shouldIncludeStep = _useState2[0],
-    setShouldIncludeStep = _useState2[1];
-  var previousState = usePreviousValue({
-    currentStep: stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep
+let CreateTearsheetStep = /*#__PURE__*/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 = useRef(null);
+  const stepRef = ref || localRef;
+  const stepRefValue = stepRef.current;
+  const stepsContext = useContext(StepsContext);
+  const stepNumber = useContext(StepNumberContext);
+  const [shouldIncludeStep, setShouldIncludeStep] = useState(includeStep);
+  const previousState = usePreviousValue({
+    currentStep: stepsContext?.currentStep
   });
   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.
-  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);
+  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
-  useEffect(function () {
+  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;
       });
     }
@@ -100,39 +99,39 @@ var CreateTearsheetStep = /*#__PURE__*/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.
-  useEffect(function () {
-    var focusElementQuery = "button, input, select, textarea, a";
-    if (stepNumber !== (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep)) {
+  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__default.createElement("p", {
-          className: "".concat(blockClass, "--description")
+          className: `${blockClass}--description`
         }, description);
       }
       if (/*#__PURE__*/isValidElement(description)) {
         return /*#__PURE__*/React__default.createElement("div", {
-          className: "".concat(blockClass, "--description")
+          className: `${blockClass}--description`
         }, description);
       }
     }
@@ -141,22 +140,25 @@ var CreateTearsheetStep = /*#__PURE__*/forwardRef(function (_ref, ref) {
   return stepsContext ? /*#__PURE__*/React__default.createElement("div", {
     ref: stepRef
   }, /*#__PURE__*/React__default.createElement(Grid, _extends({}, rest, {
-    className: cx(blockClass, className, _defineProperty(_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__default.createElement(Column, {
     xlg: 12,
     lg: 12,
     md: 8,
     sm: 4
   }, /*#__PURE__*/React__default.createElement("h4", {
-    className: "".concat(blockClass, "--title")
+    className: `${blockClass}--title`
   }, title), subtitle && /*#__PURE__*/React__default.createElement("h6", {
-    className: "".concat(blockClass, "--subtitle")
+    className: `${blockClass}--subtitle`
   }, subtitle), renderDescription()), /*#__PURE__*/React__default.createElement(Column, {
     span: 100
   }, hasFieldset ? /*#__PURE__*/React__default.createElement(FormGroup, {
     legendText: fieldsetLegendText,
-    className: "".concat(blockClass, "--fieldset")
-  }, children) : children))) : pconsole.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.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
@@ -199,8 +201,10 @@ CreateTearsheetStep.propTypes = {
    * Otherwise, use CSS to hide/remove this label text.
    */
   /**@ts-ignore*/
-  fieldsetLegendText: PropTypes.string.isRequired.if(function (_ref2) {
-    var hasFieldset = _ref2.hasFieldset;
+  fieldsetLegendText: PropTypes.string.isRequired.if(_ref2 => {
+    let {
+      hasFieldset
+    } = _ref2;
     return !!hasFieldset;
   }),
   /**

package/es/components/CreateTearsheetNarrow/CreateTearsheetNarrow.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
 import { Form } from '@carbon/react';
 import PropTypes from '../../_virtual/index.js';
@@ -15,11 +15,9 @@ import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg } from '../../settings.js';
 import uuidv4 from '../../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(pkg.prefix, "--create-tearsheet-narrow");
-var componentName = 'CreateTearsheetNarrow';
+const blockClass = `${pkg.prefix}--create-tearsheet-narrow`;
+const componentName = 'CreateTearsheetNarrow';
 
 // NOTE: the component SCSS is not imported here: it is rolled up separately.
 
@@ -27,24 +25,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.
  */
-var CreateTearsheetNarrow = /*#__PURE__*/React__default.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 = _objectWithoutProperties(_ref, _excluded);
-  var actions = [{
+let CreateTearsheetNarrow = /*#__PURE__*/React__default.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',
@@ -54,8 +54,8 @@ var CreateTearsheetNarrow = /*#__PURE__*/React__default.forwardRef(function (_re
     onClick: onRequestClose,
     kind: 'secondary'
   }];
-  var formTextClass = "".concat(blockClass, "__content-text");
-  var formTitleId = uuidv4();
+  const formTextClass = `${blockClass}__content-text`;
+  const formTitleId = uuidv4();
   return /*#__PURE__*/React__default.createElement(TearsheetNarrow, _extends({}, rest, {
     title: title,
     description: description,
@@ -63,8 +63,8 @@ var CreateTearsheetNarrow = /*#__PURE__*/React__default.forwardRef(function (_re
     actions: actions,
     open: open,
     ref: ref,
-    onClose: function onClose() {
-      onRequestClose === null || onRequestClose === void 0 || onRequestClose();
+    onClose: () => {
+      onRequestClose?.();
       return false;
     },
     label: label,
@@ -72,12 +72,12 @@ var CreateTearsheetNarrow = /*#__PURE__*/React__default.forwardRef(function (_re
     verticalPosition: verticalPosition,
     role: "presentation"
   }, getDevtoolsProps(componentName)), /*#__PURE__*/React__default.createElement("h3", {
-    className: cx("".concat(blockClass, "__form-title-text"), formTextClass),
+    className: cx(`${blockClass}__form-title-text`, formTextClass),
     id: formTitleId
   }, formTitle), /*#__PURE__*/React__default.createElement("p", {
-    className: cx("".concat(blockClass, "__form-description-text"), formTextClass)
+    className: cx(`${blockClass}__form-description-text`, formTextClass)
   }, formDescription), /*#__PURE__*/React__default.createElement(Form, {
-    className: "".concat(blockClass, "__form"),
+    className: `${blockClass}__form`,
     "aria-labelledby": formTitleId
   }, children));
 });