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

package/es/components/index.js

@@ -1,9 +1,10 @@
 //
-// Copyright IBM Corp. 2020, 2021
+// Copyright IBM Corp. 2020, 2023
 //
 // 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 { AboutModal } from './AboutModal';
 export { APIKeyModal } from './APIKeyModal';
 export { Cascade } from './Cascade';
@@ -18,7 +19,6 @@ export { ExportModal } from './ExportModal';
 export { ExpressiveCard } from './ExpressiveCard';
 export { HTTPError403, HTTPError404, HTTPErrorOther } from './HTTPErrors';
 export { ImportModal } from './ImportModal';
-export { ModifiedTabs } from './ModifiedTabs';
 export { MultiAddSelect } from './MultiAddSelect';
 export { NotificationsPanel } from './NotificationsPanel';
 export { PageHeader } from './PageHeader';
@@ -35,9 +35,10 @@ export { UserProfileImage } from './UserProfileImage';
 export { WebTerminal, WebTerminalContentWrapper, useWebTerminal, WebTerminalProvider } from './WebTerminal';
 export { EditSidePanel } from './EditSidePanel';
 export { OptionsTile } from './OptionsTile';
-export { InlineEdit } from './InlineEdit';
+export { EditInPlace } from './EditInPlace';
 export { DataSpreadsheet } from './DataSpreadsheet';
-export { Datagrid, useDatagrid, useInfiniteScroll, useNestedRows, useSelectRows, useExpandedRow, useOnRowClick, useSortableColumns, useRowIsMouseOver, useColumnRightAlign, useDisableSelectRows, useStickyColumn, useActionsColumn, useCustomizeColumns, useSelectAllWithToggle, useColumnOrder, useInlineEdit } from './Datagrid';
+export { Datagrid, useDatagrid, useInfiniteScroll, useNestedRows, useSelectRows, useExpandedRow, useOnRowClick, useSortableColumns, useRowIsMouseOver, useColumnCenterAlign, useColumnRightAlign, useDisableSelectRows, useStickyColumn, useActionsColumn, useCustomizeColumns, useSelectAllWithToggle, useColumnOrder, useInlineEdit, useFiltering, getAutoSizedColumnWidth } from './Datagrid';
 export { EditTearsheet } from './EditTearsheet';
 export { EditTearsheetNarrow } from './EditTearsheetNarrow';
-export { EditFullPage } from './EditFullPage';
+export { EditFullPage } from './EditFullPage';
+export { EditUpdateCards } from './EditUpdateCards';

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

@@ -4,6 +4,7 @@
  * 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 { useActiveElement } from './useActiveElement';
 export { useNearestScroll, useWindowScroll } from './useWindowScroll';
 export { useWindowResize } from './useWindowResize';
@@ -13,4 +14,5 @@ export { useCreateComponentStepChange } from './useCreateComponentStepChange';
 export { usePreviousValue } from './usePreviousValue';
 export { useResetCreateComponent } from './useResetCreateComponent';
 export { useRetrieveStepData } from './useRetrieveStepData';
-export { useValidCreateStepCount } from './useValidCreateStepCount';
+export { useValidCreateStepCount } from './useValidCreateStepCount';
+export { useControllableState } from './useControllableState';

package/es/global/js/hooks/useActiveElement.js

@@ -1,22 +1,20 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-
 /**
  * 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 { useState, useEffect } from 'react';
 export var useActiveElement = function useActiveElement() {
   var _useState = useState(document.activeElement),
-      _useState2 = _slicedToArray(_useState, 2),
-      active = _useState2[0],
-      setActive = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    active = _useState2[0],
+    setActive = _useState2[1];
   var handleFocusIn = function handleFocusIn() {
     setActive(document.activeElement);
   };
-
   useEffect(function () {
     document.addEventListener('focusin', handleFocusIn);
     return function () {

package/es/global/js/hooks/useClickOutside.js

@@ -4,6 +4,7 @@
  * 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';
 export var useClickOutside = function useClickOutside(ref, callback) {
   var handleClick = function handleClick(event) {
@@ -11,7 +12,6 @@ export var useClickOutside = function useClickOutside(ref, callback) {
       callback(event.target);
     }
   };
-
   useEffect(function () {
     document.addEventListener('click', handleClick);
     return function () {

package/es/global/js/hooks/useControllableState.js

@@ -0,0 +1,74 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+/**
+ * Copyright IBM Corp. 2016, 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, useRef, useState } from 'react';
+import pconsole from '../utils/pconsole';
+
+/**
+ * This custom hook simplifies the behavior of a component if it has state that
+ * can be both controlled and uncontrolled. It functions identical to a
+ * useState() hook and provides [state, setState] for you to use. You can use
+ * the `onChange` argument to allow updates to the `state` to be communicated to
+ * owners of controlled components.
+ *
+ * Note: this hook will warn if a component is switching from controlled to
+ * uncontrolled, or vice-versa.
+ *
+ * @param {object} config
+ * @param {string} config.name - the name of the custom component
+ * @param {any} config.defaultValue - the default value used for the state. This will be
+ * the fallback value used if `value` is not defined.
+ * @param {Function} config.onChange - an optional function that is called when
+ * the value of the state changes. This is useful for communicating to parents of
+ * controlled components that the value is requesting to be changed.
+ * @param {any} config.value - a controlled value. Omitting this means that the state is
+ * uncontrolled
+ * @returns {[any, Function]}
+ */
+export function useControllableState(_ref) {
+  var defaultValue = _ref.defaultValue,
+    _ref$name = _ref.name,
+    name = _ref$name === void 0 ? 'custom' : _ref$name,
+    onChange = _ref.onChange,
+    value = _ref.value;
+  var _useState = useState(value !== null && value !== void 0 ? value : defaultValue),
+    _useState2 = _slicedToArray(_useState, 2),
+    state = _useState2[0],
+    internalSetState = _useState2[1];
+  var controlled = useRef(null);
+  if (controlled.current === null) {
+    controlled.current = value !== undefined;
+  }
+  function setState(stateOrUpdater) {
+    var value = typeof stateOrUpdater === 'function' ? stateOrUpdater(state) : stateOrUpdater;
+    if (controlled.current === false) {
+      internalSetState(value);
+    }
+    if (onChange) {
+      onChange(value);
+    }
+  }
+  useEffect(function () {
+    var controlledValue = value !== undefined;
+    // Uncontrolled -> Controlled
+    // If the component prop is uncontrolled, the prop value should be undefined
+    if (controlled.current === false && controlledValue) {
+      pconsole.warn("A component is changing an uncontrolled %s component to be controlled.\n          This is likely caused by the value changing to a defined value\n          from undefined. Decide between using a controlled or uncontrolled\n          value for the lifetime of the component.\n          More info: https://reactjs.org/link/controlled-components");
+    }
+
+    // Controlled -> Uncontrolled
+    // If the component prop is controlled, the prop value should be defined
+    if (controlled.current === true && !controlledValue) {
+      pconsole.warn("A component is changing a controlled %s component to be uncontrolled.\n        'This is likely caused by the value changing to an undefined value\n        'from a defined one. Decide between using a controlled or\n        'uncontrolled value for the lifetime of the component.\n        'More info: https://reactjs.org/link/controlled-components");
+    }
+  }, [name, value]);
+  if (controlled.current === true) {
+    return [value, setState];
+  }
+  return [state, setState];
+}

package/es/global/js/hooks/useCreateComponentFocus.js

@@ -1,33 +1,55 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
 /**
  * Copyright IBM Corp. 2021, 2021
  *
  * 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';
-import { getFocusableElements } from '../utils/getFocusableElements'; // Focus the first focusable element and call the onMount prop for the current step if one is provided
+import wait from '../utils/wait';
 
+// Focus the first focusable element and call the onMount prop for the current step if one is provided
 export var useCreateComponentFocus = function useCreateComponentFocus(_ref) {
   var previousState = _ref.previousState,
-      currentStep = _ref.currentStep,
-      blockClass = _ref.blockClass,
-      onMount = _ref.onMount;
+    currentStep = _ref.currentStep,
+    blockClass = _ref.blockClass,
+    onMount = _ref.onMount,
+    firstFocusElement = _ref.firstFocusElement;
   useEffect(function () {
     if (typeof onMount === 'function') {
       onMount();
     }
   }, [onMount]);
   useEffect(function () {
+    // because of how handleStackChange.claimFocus in TearsheetShell works a timeout is required to focus on specific elements
+    var awaitFocus = /*#__PURE__*/function () {
+      var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(elm) {
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return wait(10);
+            case 2:
+              elm.focus();
+            case 3:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }));
+      return function awaitFocus(_x) {
+        return _ref2.apply(this, arguments);
+      };
+    }();
     if ((previousState === null || previousState === void 0 ? void 0 : previousState.currentStep) !== currentStep && currentStep > 0) {
-      var visibleStepInnerContent = document.querySelector(".".concat(blockClass, "__step.").concat(blockClass, "__step__step--visible-step"));
-      var focusableStepElements = visibleStepInnerContent ? getFocusableElements(visibleStepInnerContent) : [];
-
-      if (focusableStepElements && focusableStepElements.length) {
-        focusableStepElements[0].focus();
-      } else {
-        var nextButton = document.querySelector(".".concat(blockClass, "__create-button"));
-        nextButton === null || nextButton === void 0 ? void 0 : nextButton.focus();
+      if (firstFocusElement) {
+        var elm = document.querySelector(firstFocusElement);
+        if (elm) {
+          awaitFocus(elm);
+        }
       }
     }
-  }, [currentStep, previousState, blockClass, onMount]);
+  }, [currentStep, previousState, blockClass, onMount, firstFocusElement]);
 };

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

@@ -1,184 +1,152 @@
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
-
 /**
  * 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 firstIncludedStep = _ref.firstIncludedStep,
-      lastIncludedStep = _ref.lastIncludedStep,
-      stepData = _ref.stepData,
-      onNext = _ref.onNext,
-      isSubmitDisabled = _ref.isSubmitDisabled,
-      setCurrentStep = _ref.setCurrentStep,
-      setIsSubmitting = _ref.setIsSubmitting,
-      setShouldViewAll = _ref.setShouldViewAll,
-      onClose = _ref.onClose,
-      onRequestSubmit = _ref.onRequestSubmit,
-      componentName = _ref.componentName,
-      currentStep = _ref.currentStep,
-      shouldViewAll = _ref.shouldViewAll,
-      backButtonText = _ref.backButtonText,
-      cancelButtonText = _ref.cancelButtonText,
-      submitButtonText = _ref.submitButtonText,
-      nextButtonText = _ref.nextButtonText,
-      isSubmitting = _ref.isSubmitting,
-      componentBlockClass = _ref.componentBlockClass,
-      setCreateComponentActions = _ref.setCreateComponentActions,
-      setModalIsOpen = _ref.setModalIsOpen;
+    lastIncludedStep = _ref.lastIncludedStep,
+    stepData = _ref.stepData,
+    onNext = _ref.onNext,
+    isSubmitDisabled = _ref.isSubmitDisabled,
+    setCurrentStep = _ref.setCurrentStep,
+    setIsSubmitting = _ref.setIsSubmitting,
+    setShouldViewAll = _ref.setShouldViewAll,
+    onClose = _ref.onClose,
+    onRequestSubmit = _ref.onRequestSubmit,
+    componentName = _ref.componentName,
+    currentStep = _ref.currentStep,
+    shouldViewAll = _ref.shouldViewAll,
+    backButtonText = _ref.backButtonText,
+    cancelButtonText = _ref.cancelButtonText,
+    submitButtonText = _ref.submitButtonText,
+    nextButtonText = _ref.nextButtonText,
+    isSubmitting = _ref.isSubmitting,
+    componentBlockClass = _ref.componentBlockClass,
+    setCreateComponentActions = _ref.setCreateComponentActions,
+    setModalIsOpen = _ref.setModalIsOpen;
   // useEffect to handle multi step logic
   useEffect(function () {
     var onUnmount = function onUnmount() {
       if (componentName !== 'CreateFullPage') {
         setCurrentStep(0);
       }
-
       setIsSubmitting(false);
       setShouldViewAll(false);
       onClose();
     };
-
     var handleOnRequestSubmit = /*#__PURE__*/function () {
       var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
         return _regeneratorRuntime.wrap(function _callee$(_context) {
-          while (1) {
-            switch (_context.prev = _context.next) {
-              case 0:
-                _context.prev = 0;
-                _context.next = 3;
-                return onRequestSubmit();
-
-              case 3:
-                onUnmount();
-                _context.next = 10;
-                break;
-
-              case 6:
-                _context.prev = 6;
-                _context.t0 = _context["catch"](0);
-                setIsSubmitting(false);
-                console.warn("".concat(componentName, " submit error: ").concat(_context.t0));
-
-              case 10:
-              case "end":
-                return _context.stop();
-            }
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _context.prev = 0;
+              _context.next = 3;
+              return onRequestSubmit();
+            case 3:
+              onUnmount();
+              _context.next = 10;
+              break;
+            case 6:
+              _context.prev = 6;
+              _context.t0 = _context["catch"](0);
+              setIsSubmitting(false);
+              console.warn("".concat(componentName, " submit error: ").concat(_context.t0));
+            case 10:
+            case "end":
+              return _context.stop();
           }
         }, _callee, null, [[0, 6]]);
       }));
-
       return function handleOnRequestSubmit() {
         return _ref2.apply(this, arguments);
       };
     }();
-
     var handleNext = /*#__PURE__*/function () {
       var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
         return _regeneratorRuntime.wrap(function _callee2$(_context2) {
-          while (1) {
-            switch (_context2.prev = _context2.next) {
-              case 0:
-                setIsSubmitting(true);
-
-                if (!(typeof onNext === 'function')) {
-                  _context2.next = 14;
-                  break;
-                }
-
-                _context2.prev = 2;
-                _context2.next = 5;
-                return onNext();
-
-              case 5:
-                continueToNextStep();
-                _context2.next = 12;
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              setIsSubmitting(true);
+              if (!(typeof onNext === 'function')) {
+                _context2.next = 14;
                 break;
-
-              case 8:
-                _context2.prev = 8;
-                _context2.t0 = _context2["catch"](2);
-                setIsSubmitting(false);
-                console.warn("".concat(componentName, " onNext error: ").concat(_context2.t0));
-
-              case 12:
-                _context2.next = 15;
-                break;
-
-              case 14:
-                continueToNextStep();
-
-              case 15:
-              case "end":
-                return _context2.stop();
-            }
+              }
+              _context2.prev = 2;
+              _context2.next = 5;
+              return onNext();
+            case 5:
+              continueToNextStep();
+              _context2.next = 12;
+              break;
+            case 8:
+              _context2.prev = 8;
+              _context2.t0 = _context2["catch"](2);
+              setIsSubmitting(false);
+              console.warn("".concat(componentName, " onNext error: ").concat(_context2.t0));
+            case 12:
+              _context2.next = 15;
+              break;
+            case 14:
+              continueToNextStep();
+            case 15:
+            case "end":
+              return _context2.stop();
           }
         }, _callee2, null, [[2, 8]]);
       }));
-
       return function handleNext() {
         return _ref3.apply(this, arguments);
       };
     }();
-
     var handleSubmit = /*#__PURE__*/function () {
       var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
         return _regeneratorRuntime.wrap(function _callee3$(_context3) {
-          while (1) {
-            switch (_context3.prev = _context3.next) {
-              case 0:
-                setIsSubmitting(true); // last step should have onNext as well
-
-                if (!(typeof onNext === 'function')) {
-                  _context3.next = 15;
-                  break;
-                }
-
-                _context3.prev = 2;
-                _context3.next = 5;
-                return onNext();
-
-              case 5:
-                _context3.next = 7;
-                return handleOnRequestSubmit();
-
-              case 7:
-                _context3.next = 13;
+          while (1) switch (_context3.prev = _context3.next) {
+            case 0:
+              setIsSubmitting(true);
+              // last step should have onNext as well
+              if (!(typeof onNext === 'function')) {
+                _context3.next = 15;
                 break;
-
-              case 9:
-                _context3.prev = 9;
-                _context3.t0 = _context3["catch"](2);
-                setIsSubmitting(false);
-                console.warn("".concat(componentName, " onNext error: ").concat(_context3.t0));
-
-              case 13:
-                _context3.next = 17;
-                break;
-
-              case 15:
-                _context3.next = 17;
-                return handleOnRequestSubmit();
-
-              case 17:
-              case "end":
-                return _context3.stop();
-            }
+              }
+              _context3.prev = 2;
+              _context3.next = 5;
+              return onNext();
+            case 5:
+              _context3.next = 7;
+              return handleOnRequestSubmit();
+            case 7:
+              _context3.next = 13;
+              break;
+            case 9:
+              _context3.prev = 9;
+              _context3.t0 = _context3["catch"](2);
+              setIsSubmitting(false);
+              console.warn("".concat(componentName, " onNext error: ").concat(_context3.t0));
+            case 13:
+              _context3.next = 17;
+              break;
+            case 15:
+              _context3.next = 17;
+              return handleOnRequestSubmit();
+            case 17:
+            case "end":
+              return _context3.stop();
           }
         }, _callee3, null, [[2, 9]]);
       }));
-
       return function handleSubmit() {
         return _ref4.apply(this, arguments);
       };
     }();
-
     if ((stepData === null || stepData === void 0 ? void 0 : stepData.length) > 0) {
       var buttons = [];
-
       if ((stepData === null || stepData === void 0 ? void 0 : stepData.length) > 1 && !shouldViewAll) {
         buttons.push({
           key: 'create-action-button-back',
@@ -190,10 +158,8 @@ export var useCreateComponentStepChange = function useCreateComponentStepChange(
               // 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;
             });
           },
@@ -201,7 +167,6 @@ export var useCreateComponentStepChange = function useCreateComponentStepChange(
           disabled: currentStep === firstIncludedStep
         });
       }
-
       buttons.push({
         key: 'create-action-button-cancel',
         label: cancelButtonText,
@@ -230,10 +195,8 @@ export var useCreateComponentStepChange = function useCreateComponentStepChange(
       // have reach the onSubmit
       do {
         var _stepData2;
-
         prev++;
       } while (!((_stepData2 = stepData[prev - 1]) !== null && _stepData2 !== void 0 && _stepData2.shouldIncludeStep));
-
       return prev;
     });
   }, [setCurrentStep, setIsSubmitting, stepData]);

package/es/global/js/hooks/usePreviousValue.js

@@ -4,12 +4,13 @@
  * 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, useRef } from 'react';
+
 /**
  * Returns the previous state values included in the param
  * @param {object} value
  */
-
 export var usePreviousValue = function usePreviousValue(value) {
   var ref = useRef();
   useEffect(function () {

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

@@ -4,7 +4,10 @@
  * 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';
+import { getNumberOfHiddenSteps } from '../utils/getNumberOfHiddenSteps';
+
 /**
  * Resets the current step of the create component if it has been closed.
  * @param {object} useResetCreateComponent - Create component that uses this custom hook
@@ -12,32 +15,34 @@ import { useEffect } from 'react';
  * @param {object} useResetCreateComponent.previousState
  * @param {boolean} useResetCreateComponent.open
  * @param {Function} useResetCreateComponent.setCurrentStep
+ * @param {object} useResetCreateComponent.stepData
  * @param {number} useResetCreateComponent.initialStep
  * @param {number} useResetCreateComponent.totalSteps
  * @param {string} useResetCreateComponent.componentName
  */
-
 export var useResetCreateComponent = function useResetCreateComponent(_ref) {
   var firstIncludedStep = _ref.firstIncludedStep,
-      previousState = _ref.previousState,
-      open = _ref.open,
-      setCurrentStep = _ref.setCurrentStep,
-      initialStep = _ref.initialStep,
-      totalSteps = _ref.totalSteps,
-      componentName = _ref.componentName;
+    previousState = _ref.previousState,
+    open = _ref.open,
+    setCurrentStep = _ref.setCurrentStep,
+    stepData = _ref.stepData,
+    initialStep = _ref.initialStep,
+    totalSteps = _ref.totalSteps,
+    componentName = _ref.componentName;
   useEffect(function () {
     if (!(previousState !== null && previousState !== void 0 && previousState.open) && open) {
       if (initialStep && totalSteps && Number(initialStep) <= Number(totalSteps) && Number(initialStep) > 0) {
-        setCurrentStep(Number(initialStep));
+        var numberOfHiddenSteps = getNumberOfHiddenSteps(stepData, initialStep);
+        setCurrentStep(Number(initialStep + numberOfHiddenSteps));
       } else {
         // 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
-
+      }
 
+      // An invalid initialStep value was provided, we'll default to rendering the first step in this scenario
       if (initialStep && totalSteps && Number(initialStep) > Number(totalSteps) || Number(initialStep) <= 0) {
         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."));
       }
     }
-  }, [firstIncludedStep, open, previousState, setCurrentStep, initialStep, totalSteps, componentName]);
+  }, [firstIncludedStep, open, previousState, setCurrentStep, stepData, initialStep, totalSteps, componentName]);
 };