@carbon/ibm-products 2.6.0 → 2.7.0

package/es/components/Datagrid/Datagrid/DatagridContent.js

@@ -7,27 +7,28 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
  * LICENSE file in the root directory of this source tree.
  */
 
+import { FilterContext, FilterPanel } from './addons/Filtering';
 import React, { useContext, useEffect, useRef } from 'react';
-import cx from 'classnames';
-import PropTypes from 'prop-types';
-import { TableContainer, Table } from '@carbon/react';
-import { px } from '@carbon/layout';
-import DatagridHead from './DatagridHead';
+import { Table, TableContainer } from '@carbon/react';
+import { carbon, pkg } from '../../../settings';
+import { CLEAR_FILTERS } from './addons/Filtering/constants';
 import DatagridBody from './DatagridBody';
+import DatagridHead from './DatagridHead';
 import DatagridToolbar from './DatagridToolbar';
-import { handleGridKeyPress } from './addons/InlineEdit/handleGridKeyPress';
-import { carbon, pkg } from '../../../settings';
+import { FilterSummary } from '../../FilterSummary';
 import { InlineEditContext } from './addons/InlineEdit/InlineEditContext';
-import { FilterContext, FilterPanel } from './addons/Filtering';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
 import { handleGridFocus } from './addons/InlineEdit/handleGridFocus';
+import { handleGridKeyPress } from './addons/InlineEdit/handleGridKeyPress';
+import { px } from '@carbon/layout';
 import { useClickOutside } from '../../../global/js/hooks';
 import { useMultipleKeyTracking } from '../../DataSpreadsheet/hooks';
-import { FilterSummary } from '../../FilterSummary';
-import { CLEAR_FILTERS } from './addons/Filtering/constants';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 export var DatagridContent = function DatagridContent(_ref) {
   var _cx4;
-  var datagridState = _ref.datagridState;
+  var datagridState = _ref.datagridState,
+    title = _ref.title;
   var _useContext = useContext(InlineEditContext),
     inlineEditState = _useContext.state,
     dispatch = _useContext.dispatch;
@@ -95,7 +96,8 @@ export var DatagridContent = function DatagridContent(_ref) {
       } : null,
       onFocus: withInlineEdit ? function () {
         return handleGridFocus(inlineEditState, dispatch);
-      } : null
+      } : null,
+      title: title
     }), !withVirtualScroll ? /*#__PURE__*/React.createElement(DatagridHead, datagridState) : null, /*#__PURE__*/React.createElement(DatagridBody, _extends({}, datagridState, {
       rows: rows
     })));
@@ -126,7 +128,8 @@ export var DatagridContent = function DatagridContent(_ref) {
       filters: filterTags,
       clearFilters: function clearFilters() {
         return EventEmitter.dispatch(CLEAR_FILTERS);
-      }
+      },
+      renderLabel: filterProps.renderLabel
     });
   };
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TableContainer, {
@@ -177,5 +180,6 @@ DatagridContent.propTypes = {
     setAllFilters: PropTypes.func,
     getFilterProps: PropTypes.func,
     state: PropTypes.object
-  })
+  }),
+  title: PropTypes.string
 };

package/es/components/Datagrid/Datagrid/DatagridHeaderRow.js

@@ -13,7 +13,18 @@ import cx from 'classnames';
 import { TableHeader, TableRow } from '@carbon/react';
 import { selectionColumnId } from '../common-column-ids';
 import { pkg } from '../../../settings';
+import getColTitle from '../utils/getColTitle';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
+var getAccessibilityProps = function getAccessibilityProps(header) {
+  var props = {};
+  var title = getColTitle(header);
+  if (title) {
+    props.title = title;
+  } else {
+    props['aria-hidden'] = true;
+  }
+  return props;
+};
 var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
   return /*#__PURE__*/React.createElement(TableRow, _extends({}, headerGroup.getHeaderGroupProps({
     role: false
@@ -36,7 +47,7 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
     }), {
       className: cx((_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__resizableColumn"), header.getResizerProps), _defineProperty(_cx, "".concat(blockClass, "__isResizing"), header.isResizing), _defineProperty(_cx, "".concat(blockClass, "__sortableColumn"), datagridState.isTableSortable), _defineProperty(_cx, "".concat(blockClass, "__isSorted"), header.isSorted), _cx), header.getHeaderProps().className),
       key: header.id
-    }), header.render('Header'), header.getResizerProps && /*#__PURE__*/React.createElement("div", _extends({}, header.getResizerProps(), {
+    }, getAccessibilityProps(header)), header.render('Header'), header.getResizerProps && /*#__PURE__*/React.createElement("div", _extends({}, header.getResizerProps(), {
       className: "".concat(blockClass, "__resizer")
     })));
   }));

package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js

@@ -35,8 +35,7 @@ var Columns = function Columns(_ref) {
     onSelectColumn = _ref.onSelectColumn,
     assistiveTextInstructionsLabel = _ref.assistiveTextInstructionsLabel,
     assistiveTextDisabledInstructionsLabel = _ref.assistiveTextDisabledInstructionsLabel,
-    selectAllLabel = _ref.selectAllLabel,
-    isTableSortable = _ref.isTableSortable;
+    selectAllLabel = _ref.selectAllLabel;
   var _React$useState = React.useState(''),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     ariaRegionText = _React$useState2[0],
@@ -92,7 +91,6 @@ var Columns = function Columns(_ref) {
     filterString: filterString,
     focusIndex: focusIndex,
     getNextIndex: getNextIndex,
-    isTableSortable: isTableSortable,
     moveElement: moveElement,
     onSelectColumn: onSelectColumn,
     setAriaRegionText: setAriaRegionText,
@@ -108,7 +106,6 @@ Columns.propTypes = {
   filterString: PropTypes.string.isRequired,
   getVisibleColumnsCount: PropTypes.func.isRequired,
   instructionsLabel: PropTypes.string,
-  isTableSortable: PropTypes.bool.isRequired,
   onSelectColumn: PropTypes.func.isRequired,
   selectAllLabel: PropTypes.string,
   setColumnStatus: PropTypes.func,

package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.js

@@ -41,8 +41,7 @@ var CustomizeColumnsTearsheet = function CustomizeColumnsTearsheet(_ref) {
     _ref$assistiveTextDis = _ref.assistiveTextDisabledInstructionsLabel,
     assistiveTextDisabledInstructionsLabel = _ref$assistiveTextDis === void 0 ? 'Reordering columns are disabled because they are filtered currently.' : _ref$assistiveTextDis,
     _ref$selectAllLabel = _ref.selectAllLabel,
-    selectAllLabel = _ref$selectAllLabel === void 0 ? 'Column name' : _ref$selectAllLabel,
-    isTableSortable = _ref.isTableSortable;
+    selectAllLabel = _ref$selectAllLabel === void 0 ? 'Column name' : _ref$selectAllLabel;
   var _useState = useState(''),
     _useState2 = _slicedToArray(_useState, 2),
     visibleColumnsCount = _useState2[0],
@@ -152,8 +151,7 @@ var CustomizeColumnsTearsheet = function CustomizeColumnsTearsheet(_ref) {
       setColumnObjects(cols);
       setDirty();
     },
-    selectAllLabel: selectAllLabel,
-    isTableSortable: isTableSortable
+    selectAllLabel: selectAllLabel
   }));
 };
 CustomizeColumnsTearsheet.propTypes = {
@@ -164,7 +162,6 @@ CustomizeColumnsTearsheet.propTypes = {
   findColumnPlaceholderLabel: PropTypes.string,
   instructionsLabel: PropTypes.string,
   isOpen: PropTypes.bool.isRequired,
-  isTableSortable: PropTypes.bool.isRequired,
   onSaveColumnPrefs: PropTypes.func.isRequired,
   originalColumnDefinitions: PropTypes.array.isRequired,
   primaryButtonTextLabel: PropTypes.string,

package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/DraggableItemsList.js

@@ -11,13 +11,13 @@ import { Checkbox } from '@carbon/react';
 import { isColumnVisible } from './common';
 import DraggableElement from '../../DraggableElement';
 import { pkg } from '../../../../../settings';
+import getColTitle from '../../../utils/getColTitle';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 export var DraggableItemsList = function DraggableItemsList(_ref) {
   var columns = _ref.columns,
     filterString = _ref.filterString,
     focusIndex = _ref.focusIndex,
     getNextIndex = _ref.getNextIndex,
-    isTableSortable = _ref.isTableSortable,
     moveElement = _ref.moveElement,
     onSelectColumn = _ref.onSelectColumn,
     setAriaRegionText = _ref.setAriaRegionText,
@@ -26,23 +26,18 @@ export var DraggableItemsList = function DraggableItemsList(_ref) {
   return /*#__PURE__*/React.createElement(React.Fragment, null, columns
   // hide the columns without Header, e.g the sticky actions, spacer
   .filter(function (colDef) {
-    var _colDef$Header$props$, _colDef$Header$props;
-    var sortableTitle = isTableSortable && ((_colDef$Header$props$ = colDef.Header().props.children.props) === null || _colDef$Header$props$ === void 0 ? void 0 : _colDef$Header$props$.title);
-    return !!colDef.Header.props && !!((_colDef$Header$props = colDef.Header.props) !== null && _colDef$Header$props !== void 0 && _colDef$Header$props.title) || isTableSortable && !!sortableTitle;
-  }).filter(function (colDef) {
+    return !!getColTitle(colDef);
+  }).filter(Boolean).filter(function (colDef) {
     return !colDef.isAction;
   }).filter(function (colDef) {
-    var _colDef$Header$props$2, _colDef$Header$props2;
-    var sortableTitle = isTableSortable && ((_colDef$Header$props$2 = colDef.Header().props.children.props) === null || _colDef$Header$props$2 === void 0 ? void 0 : _colDef$Header$props$2.title);
-    return filterString.length === 0 || (isTableSortable ? sortableTitle === null || sortableTitle === void 0 ? void 0 : sortableTitle.toLowerCase().includes(filterString) : (_colDef$Header$props2 = colDef.Header.props) === null || _colDef$Header$props2 === void 0 || (_colDef$Header$props2 = _colDef$Header$props2.title) === null || _colDef$Header$props2 === void 0 ? void 0 : _colDef$Header$props2.toLowerCase().includes(filterString)) && colDef.id !== 'spacer';
+    var _getColTitle;
+    return filterString.length === 0 || ((_getColTitle = getColTitle(colDef)) === null || _getColTitle === void 0 ? void 0 : _getColTitle.toLowerCase().includes(filterString)) && colDef.id !== 'spacer';
   }).map(function (colDef, i) {
-    var _colDef$Header$props$3, _colDef$Header$props3, _colDef$Header$props4, _colDef$Header$props5, _colDef$Header$props6;
-    var isSortableColumn = !!colDef.canSort && !!isTableSortable;
-    var sortableTitle = isTableSortable && ((_colDef$Header$props$3 = colDef.Header().props.children.props) === null || _colDef$Header$props$3 === void 0 ? void 0 : _colDef$Header$props$3.title);
+    var colHeaderTitle = getColTitle(colDef);
     var searchString = new RegExp('(' + filterString + ')');
-    var res = filterString.length ? isSortableColumn ? sortableTitle.toLowerCase().split(searchString) : colDef.Header.props.title.toLowerCase().split(searchString) : null;
+    var res = filterString.length ? colHeaderTitle.toLowerCase().split(searchString) : null;
     var firstWord = res !== null ? res[0] === '' ? res[1].charAt(0).toUpperCase() + res[1].substring(1) : res[0].charAt(0).toUpperCase() + res[0].substring(1) : null;
-    var highlightedText = res !== null ? res[0] === '' ? "<strong>".concat(firstWord, "</strong>") + res[2] : firstWord + "<strong>".concat(res[1], "</strong>") + res[2] : isSortableColumn ? sortableTitle : (_colDef$Header$props3 = colDef.Header.props) === null || _colDef$Header$props3 === void 0 ? void 0 : _colDef$Header$props3.title;
+    var highlightedText = res !== null ? res[0] === '' ? "<strong>".concat(firstWord, "</strong>") + res[2] : firstWord + "<strong>".concat(res[1], "</strong>") + res[2] : colHeaderTitle;
     var isFrozenColumn = !!colDef.sticky;
     var listContents = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Checkbox, {
       wrapperClassName: "".concat(blockClass, "__customize-columns-checkbox-wrapper"),
@@ -53,8 +48,8 @@ export var DraggableItemsList = function DraggableItemsList(_ref) {
         return onSelectColumn(colDef, checked);
       },
       id: "".concat(blockClass, "__customization-column-").concat(colDef.id),
-      labelText: isSortableColumn ? sortableTitle : (_colDef$Header$props4 = colDef.Header.props) === null || _colDef$Header$props4 === void 0 ? void 0 : _colDef$Header$props4.title,
-      title: isSortableColumn ? sortableTitle : (_colDef$Header$props5 = colDef.Header.props) === null || _colDef$Header$props5 === void 0 ? void 0 : _colDef$Header$props5.title,
+      labelText: colHeaderTitle,
+      title: colHeaderTitle,
       className: "".concat(blockClass, "__customize-columns-checkbox"),
       hideLabel: true
     }), /*#__PURE__*/React.createElement("div", {
@@ -71,7 +66,7 @@ export var DraggableItemsList = function DraggableItemsList(_ref) {
       id: "dnd-datagrid-columns-".concat(colDef.id),
       type: "column-customization",
       disabled: filterString.length > 0 || isFrozenColumn,
-      ariaLabel: isSortableColumn ? sortableTitle : (_colDef$Header$props6 = colDef.Header.props) === null || _colDef$Header$props6 === void 0 ? void 0 : _colDef$Header$props6.title,
+      ariaLabel: colHeaderTitle,
       onGrab: setAriaRegionText,
       isFocused: focusIndex === i,
       moveElement: moveElement,
@@ -100,7 +95,6 @@ DraggableItemsList.propTypes = {
   filterString: PropTypes.string.isRequired,
   focusIndex: PropTypes.number.isRequired,
   getNextIndex: PropTypes.func.isRequired,
-  isTableSortable: PropTypes.bool,
   moveElement: PropTypes.func.isRequired,
   onSelectColumn: PropTypes.func.isRequired,
   setAriaRegionText: PropTypes.func.isRequired,

package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/TearsheetWrapper.js

@@ -20,7 +20,6 @@ var TearsheetWrapper = function TearsheetWrapper(_ref) {
     rest = _objectWithoutProperties(_instance$customizeCo, _excluded);
   return /*#__PURE__*/React.createElement(CustomizeColumnsTearsheet, _extends({}, rest, labels, {
     isOpen: isTearsheetOpen,
-    isTableSortable: (instance === null || instance === void 0 ? void 0 : instance.isTableSortable) || false,
     setIsTearsheetOpen: setIsTearsheetOpen,
     columnDefinitions: instance.allColumns,
     originalColumnDefinitions: instance.columns,

package/es/components/Datagrid/useDefaultStringRenderer.js

@@ -24,7 +24,8 @@ var useDefaultStringRenderer = function useDefaultStringRenderer(hooks) {
   var HeaderRenderer = function HeaderRenderer(header) {
     return /*#__PURE__*/React.createElement("div", {
       className: "".concat(blockClass, "__defaultStringRenderer"),
-      title: typeof header === 'string' ? header : ''
+      title: typeof header === 'string' ? header : '',
+      key: typeof header === 'string' ? header : ''
     }, header);
   };
   var visibleColumns = function visibleColumns(columns) {

package/es/components/Datagrid/useSortableColumns.js

@@ -25,8 +25,12 @@ var getAriaSortValue = function getAriaSortValue(col, _ref) {
   var ascendingSortableLabelText = _ref.ascendingSortableLabelText,
     descendingSortableLabelText = _ref.descendingSortableLabelText,
     defaultSortableLabelText = _ref.defaultSortableLabelText;
-  var isSorted = col.isSorted,
-    isSortedDesc = col.isSortedDesc;
+  if (!col) {
+    return;
+  }
+  var _ref2 = col || {},
+    isSorted = _ref2.isSorted,
+    isSortedDesc = _ref2.isSortedDesc;
   if (!isSorted) {
     return defaultSortableLabelText || 'none';
   }
@@ -38,16 +42,20 @@ var getAriaSortValue = function getAriaSortValue(col, _ref) {
   }
 };
 var getAriaPressedValue = function getAriaPressedValue(col) {
-  var isSorted = col.isSorted;
+  if (!col) {
+    return;
+  }
+  var _ref3 = col || {},
+    isSorted = _ref3.isSorted;
   if (isSorted) {
     return 'true';
   }
   return 'false';
 };
 var useSortableColumns = function useSortableColumns(hooks) {
-  var sortableVisibleColumns = function sortableVisibleColumns(visibleColumns, _ref2) {
+  var sortableVisibleColumns = function sortableVisibleColumns(visibleColumns, _ref4) {
     var _instance$customizeCo;
-    var instance = _ref2.instance;
+    var instance = _ref4.instance;
     var onSort = instance.onSort,
       ascendingSortableLabelText = instance.ascendingSortableLabelText,
       descendingSortableLabelText = instance.descendingSortableLabelText,

package/es/components/Datagrid/utils/getColTitle.js

@@ -0,0 +1,25 @@
+// This function recursively looks for the nested header element until we can find the key which contains the title.
+// This can happen if multiple hooks are used together that manipulate the rendering of the column
+// header, such as `useColumnCenterAlign` and `useSortableColumns`.
+var getNestedTitle = function getNestedTitle(component) {
+  if (component && !component.key) {
+    return getNestedTitle(component.children);
+  }
+  if (component && component.key && typeof component.key === 'string') {
+    return component.key;
+  }
+};
+var getColTitle = function getColTitle(col) {
+  var _col$Header;
+  if (!col) {
+    return;
+  }
+  var checkTitle = function checkTitle() {
+    if (col.Header().props.children.props && col.Header().props.children.props.title) {
+      return col.Header().props.children.props.title;
+    }
+    return getNestedTitle(col.Header().props.children.props);
+  };
+  return typeof (col === null || col === void 0 ? void 0 : col.Header) === 'function' ? checkTitle() : col === null || col === void 0 || (_col$Header = col.Header) === null || _col$Header === void 0 || (_col$Header = _col$Header.props) === null || _col$Header === void 0 ? void 0 : _col$Header.title;
+};
+export default getColTitle;

package/es/components/NotificationsPanel/NotificationsPanel.js

@@ -331,7 +331,7 @@ export var NotificationsPanel = /*#__PURE__*/React.forwardRef(function (_ref, re
     className: "".concat(blockClass, "__header-container")
   }, /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__header-flex")
-  }, /*#__PURE__*/React.createElement("h1", {
+  }, /*#__PURE__*/React.createElement("h2", {
     className: "".concat(blockClass, "__header")
   }, title), /*#__PURE__*/React.createElement(Button, {
     size: "sm",
@@ -340,7 +340,7 @@ export var NotificationsPanel = /*#__PURE__*/React.forwardRef(function (_ref, re
     onClick: function onClick() {
       return onDismissAllNotifications();
     }
-  }, dismissAllLabel)), /*#__PURE__*/React.createElement(Toggle, {
+  }, dismissAllLabel)), onDoNotDisturbChange && /*#__PURE__*/React.createElement(Toggle, {
     size: "sm",
     className: "".concat(blockClass, "__do-not-disturb-toggle"),
     id: "".concat(blockClass, "__do-not-disturb-toggle-component"),
@@ -441,11 +441,11 @@ NotificationsPanel.propTypes = {
    */
   dismissSingleNotificationIconDescription: PropTypes.string,
   /**
-   * Determines if the `Do not disturb` toggle is on or off when the component is rendered
+   * Optional: Determines if the `Do not disturb` toggle is on or off when the component is rendered
    */
   doNotDisturbDefaultToggled: PropTypes.bool,
   /**
-   * Label for Do not disturb toggle
+   * Optional: Label for Do not disturb toggle
    */
   doNotDisturbLabel: PropTypes.string,
   /**
@@ -493,7 +493,7 @@ NotificationsPanel.propTypes = {
    */
   onDismissSingleNotification: PropTypes.func,
   /**
-   * Function that returns the current selected value of the disable notification toggle
+   * Optional: function that returns the current selected value of the disable notification toggle
    */
   onDoNotDisturbChange: PropTypes.func,
   /**

package/es/components/OptionsTile/OptionsTile.js

@@ -217,13 +217,11 @@ export var OptionsTile = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     id: "".concat(id, "-toggle"),
     className: "".concat(blockClass, "__toggle"),
     toggled: enabled,
-    labelA: "",
-    labelB: "",
     "aria-labelledby": titleId,
+    hideLabel: true,
     onToggle: onToggle,
     size: "sm",
-    disabled: isLocked,
-    labelText: title
+    disabled: isLocked
   })), isExpandable ? /*#__PURE__*/React.createElement("details", {
     open: isOpen,
     ref: detailsRef

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

@@ -1,7 +1,7 @@
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 /**
- * Copyright IBM Corp. 2021, 2022
+ * Copyright IBM Corp. 2021, 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.
@@ -12,16 +12,19 @@ export var useCreateComponentStepChange = function useCreateComponentStepChange(
   var firstIncludedStep = _ref.firstIncludedStep,
     lastIncludedStep = _ref.lastIncludedStep,
     stepData = _ref.stepData,
+    onPrevious = _ref.onPrevious,
     onNext = _ref.onNext,
     isSubmitDisabled = _ref.isSubmitDisabled,
     setCurrentStep = _ref.setCurrentStep,
     setIsSubmitting = _ref.setIsSubmitting,
-    setShouldViewAll = _ref.setShouldViewAll,
+    _ref$setLoadingPrevio = _ref.setLoadingPrevious,
+    setLoadingPrevious = _ref$setLoadingPrevio === void 0 ? null : _ref$setLoadingPrevio,
+    _ref$loadingPrevious = _ref.loadingPrevious,
+    loadingPrevious = _ref$loadingPrevious === void 0 ? false : _ref$loadingPrevious,
     onClose = _ref.onClose,
     onRequestSubmit = _ref.onRequestSubmit,
     componentName = _ref.componentName,
     currentStep = _ref.currentStep,
-    shouldViewAll = _ref.shouldViewAll,
     backButtonText = _ref.backButtonText,
     cancelButtonText = _ref.cancelButtonText,
     submitButtonText = _ref.submitButtonText,
@@ -43,6 +46,21 @@ export var useCreateComponentStepChange = function useCreateComponentStepChange(
       return prev;
     });
   }, [setCurrentStep, setIsSubmitting, stepData]);
+  var moveToPreviousStep = useCallback(function () {
+    if (componentName !== 'CreateFullPage') {
+      setLoadingPrevious(false);
+    }
+    setCurrentStep(function (prev) {
+      // 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 _stepData2;
+        prev--;
+      } while (!((_stepData2 = stepData[prev - 1]) !== null && _stepData2 !== void 0 && _stepData2.shouldIncludeStep));
+      return prev;
+    });
+  }, [setCurrentStep, stepData, setLoadingPrevious, componentName]);
 
   // useEffect to handle multi step logic
   useEffect(function () {
@@ -51,7 +69,6 @@ export var useCreateComponentStepChange = function useCreateComponentStepChange(
         setCurrentStep(0);
       }
       setIsSubmitting(false);
-      setShouldViewAll(false);
       onClose();
     };
     var handleOnRequestSubmit = /*#__PURE__*/function () {
@@ -81,104 +98,136 @@ export var useCreateComponentStepChange = function useCreateComponentStepChange(
         return _ref2.apply(this, arguments);
       };
     }();
-    var handleNext = /*#__PURE__*/function () {
+    var handlePrevious = /*#__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:
+              if (!(componentName === 'CreateFullPage')) {
+                _context2.next = 2;
+                break;
+              }
+              return _context2.abrupt("return");
+            case 2:
+              setLoadingPrevious(true);
+              if (!(typeof onPrevious === 'function')) {
+                _context2.next = 15;
+                break;
+              }
+              _context2.prev = 4;
+              _context2.next = 7;
+              return onPrevious();
+            case 7:
+              moveToPreviousStep();
+              _context2.next = 13;
+              break;
+            case 10:
+              _context2.prev = 10;
+              _context2.t0 = _context2["catch"](4);
+              console.warn("".concat(componentName, " onBack error: ").concat(_context2.t0));
+            case 13:
+              _context2.next = 16;
+              break;
+            case 15:
+              moveToPreviousStep();
+            case 16:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2, null, [[4, 10]]);
+      }));
+      return function handlePrevious() {
+        return _ref3.apply(this, arguments);
+      };
+    }();
+    var handleNext = /*#__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);
               if (!(typeof onNext === 'function')) {
-                _context2.next = 14;
+                _context3.next = 14;
                 break;
               }
-              _context2.prev = 2;
-              _context2.next = 5;
+              _context3.prev = 2;
+              _context3.next = 5;
               return onNext();
             case 5:
               continueToNextStep();
-              _context2.next = 12;
+              _context3.next = 12;
               break;
             case 8:
-              _context2.prev = 8;
-              _context2.t0 = _context2["catch"](2);
+              _context3.prev = 8;
+              _context3.t0 = _context3["catch"](2);
               setIsSubmitting(false);
-              console.warn("".concat(componentName, " onNext error: ").concat(_context2.t0));
+              console.warn("".concat(componentName, " onNext error: ").concat(_context3.t0));
             case 12:
-              _context2.next = 15;
+              _context3.next = 15;
               break;
             case 14:
               continueToNextStep();
             case 15:
             case "end":
-              return _context2.stop();
+              return _context3.stop();
           }
-        }, _callee2, null, [[2, 8]]);
+        }, _callee3, null, [[2, 8]]);
       }));
       return function handleNext() {
-        return _ref3.apply(this, arguments);
+        return _ref4.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) {
+      var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
+        return _regeneratorRuntime.wrap(function _callee4$(_context4) {
+          while (1) switch (_context4.prev = _context4.next) {
             case 0:
               setIsSubmitting(true);
               // last step should have onNext as well
               if (!(typeof onNext === 'function')) {
-                _context3.next = 15;
+                _context4.next = 15;
                 break;
               }
-              _context3.prev = 2;
-              _context3.next = 5;
+              _context4.prev = 2;
+              _context4.next = 5;
               return onNext();
             case 5:
-              _context3.next = 7;
+              _context4.next = 7;
               return handleOnRequestSubmit();
             case 7:
-              _context3.next = 13;
+              _context4.next = 13;
               break;
             case 9:
-              _context3.prev = 9;
-              _context3.t0 = _context3["catch"](2);
+              _context4.prev = 9;
+              _context4.t0 = _context4["catch"](2);
               setIsSubmitting(false);
-              console.warn("".concat(componentName, " onNext error: ").concat(_context3.t0));
+              console.warn("".concat(componentName, " onNext error: ").concat(_context4.t0));
             case 13:
-              _context3.next = 17;
+              _context4.next = 17;
               break;
             case 15:
-              _context3.next = 17;
+              _context4.next = 17;
               return handleOnRequestSubmit();
             case 17:
             case "end":
-              return _context3.stop();
+              return _context4.stop();
           }
-        }, _callee3, null, [[2, 9]]);
+        }, _callee4, null, [[2, 9]]);
       }));
       return function handleSubmit() {
-        return _ref4.apply(this, arguments);
+        return _ref5.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) {
+      if ((stepData === null || stepData === void 0 ? void 0 : stepData.length) > 1) {
         buttons.push({
           key: 'create-action-button-back',
           label: backButtonText,
-          onClick: function onClick() {
-            return setCurrentStep(function (prev) {
-              // 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 _stepData2;
-                prev--;
-              } while (!((_stepData2 = stepData[prev - 1]) !== null && _stepData2 !== void 0 && _stepData2.shouldIncludeStep));
-              return prev;
-            });
-          },
+          onClick: handlePrevious,
           kind: 'secondary',
-          disabled: currentStep === firstIncludedStep
+          disabled: currentStep === firstIncludedStep,
+          loading: loadingPrevious
         });
       }
       buttons.push({
@@ -191,8 +240,8 @@ export var useCreateComponentStepChange = function useCreateComponentStepChange(
       });
       buttons.push({
         key: 'create-action-button-submit',
-        label: shouldViewAll ? submitButtonText : currentStep < lastIncludedStep ? nextButtonText : submitButtonText,
-        onClick: shouldViewAll ? handleSubmit : currentStep < lastIncludedStep ? handleNext : handleSubmit,
+        label: currentStep < lastIncludedStep ? nextButtonText : submitButtonText,
+        onClick: currentStep < lastIncludedStep ? handleNext : handleSubmit,
         disabled: isSubmitDisabled,
         kind: 'primary',
         loading: isSubmitting,
@@ -200,5 +249,5 @@ export var useCreateComponentStepChange = function useCreateComponentStepChange(
       });
       setCreateComponentActions(buttons);
     }
-  }, [firstIncludedStep, lastIncludedStep, stepData, 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, componentBlockClass, componentName, continueToNextStep, setCurrentStep, setCreateComponentActions, setIsSubmitting, setModalIsOpen, moveToPreviousStep, onPrevious, setLoadingPrevious, loadingPrevious]);
 };

package/es/global/js/hooks/useResizeObserver.js

@@ -18,11 +18,25 @@ export var useResizeObserver = function useResizeObserver(ref, callback) {
   var entriesToHandle = useRef(null);
   var cb = useRef(callback);
   useEffect(function () {
-    // ref for callback removes it as dependency fro useLayoutEffect
+    // ref for callback removes it as dependency from useLayoutEffect
     // This significantly reduces repeated calls if a function is redefined on every
     // render
     cb.current = callback;
   }, [callback]);
+  useEffect(function () {
+    var getInitialSize = function getInitialSize() {
+      if (ref.current) {
+        var _ref$current;
+        var refComputedStyle = window.getComputedStyle(ref.current);
+        var initialWidth = (((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.offsetWidth) || 0) - (parseFloat((refComputedStyle === null || refComputedStyle === void 0 ? void 0 : refComputedStyle.paddingLeft) || 0), parseFloat((refComputedStyle === null || refComputedStyle === void 0 ? void 0 : refComputedStyle.paddingRight) || 0));
+        setWidth(initialWidth);
+      }
+    };
+    if (!(ref !== null && ref !== void 0 && ref.current) && width !== 0) {
+      return;
+    }
+    getInitialSize();
+  }, [width, ref]);
   useLayoutEffect(function () {
     if (!(ref !== null && ref !== void 0 && ref.current)) {
       return;