@carbon/ibm-products 2.0.0-rc.24 → 2.0.0-rc.26

package/es/components/AddSelect/AddSelectList.js

@@ -1,6 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["filteredItems", "multi"];
 //
 // Copyright IBM Corp. 2022, 2022
 //
@@ -8,218 +10,47 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 // LICENSE file in the root directory of this source tree.
 //
 import React from 'react';
-import { Button, Checkbox, Dropdown, RadioButton } from '@carbon/react';
-import { ChevronRight, View } from '@carbon/react/icons';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { pkg } from '../../settings';
-import { UserProfileImage } from '../UserProfileImage';
+import { AddSelectRow } from './AddSelectRow';
+import useFocus from './hooks/useFocus';
 var blockClass = "".concat(pkg.prefix, "--add-select__selections");
 var componentName = 'AddSelectList';
 export var AddSelectList = function AddSelectList(_ref) {
-  var _modifiers$options;
-
-  var appliedModifiers = _ref.appliedModifiers,
-      displayMetalPanel = _ref.displayMetalPanel,
-      filteredItems = _ref.filteredItems,
-      metaIconDescription = _ref.metaIconDescription,
-      modifiers = _ref.modifiers,
+  var filteredItems = _ref.filteredItems,
       multi = _ref.multi,
-      multiSelection = _ref.multiSelection,
-      navIconDescription = _ref.navIconDescription,
-      parentId = _ref.parentId,
-      setAppliedModifiers = _ref.setAppliedModifiers,
-      setDisplayMetaPanel = _ref.setDisplayMetaPanel,
-      setMultiSelection = _ref.setMultiSelection,
-      setParentSelected = _ref.setParentSelected,
-      setSingleSelection = _ref.setSingleSelection,
-      singleSelection = _ref.singleSelection;
-  var hasModifiers = (modifiers === null || modifiers === void 0 ? void 0 : (_modifiers$options = modifiers.options) === null || _modifiers$options === void 0 ? void 0 : _modifiers$options.length) > 0;
-
-  var handleSingleSelection = function handleSingleSelection(value) {
-    setSingleSelection(value);
-  };
-
-  var handleMultiSelection = function handleMultiSelection(event, _ref2) {
-    var checked = _ref2.checked,
-        id = _ref2.id;
-
-    if (checked) {
-      var newValues = [].concat(_toConsumableArray(multiSelection), [id]);
-      setMultiSelection(newValues);
-    } else {
-      var _newValues = multiSelection.filter(function (v) {
-        return v !== id;
-      });
-
-      setMultiSelection(_newValues);
-    }
-  };
-
-  var onNavigateItem = function onNavigateItem(_ref3) {
-    var id = _ref3.id,
-        title = _ref3.title;
-    setParentSelected(id, title, parentId);
-  };
-
-  var isSelected = function isSelected(id) {
-    if (multi) {
-      return multiSelection.includes(id);
-    }
+      rest = _objectWithoutProperties(_ref, _excluded);
 
-    return id === singleSelection;
-  };
-
-  var getAvatarProps = function getAvatarProps(_ref4) {
-    var src = _ref4.src,
-        alt = _ref4.alt,
-        icon = _ref4.icon,
-        backgroundColor = _ref4.backgroundColor,
-        theme = _ref4.theme;
-    return {
-      className: "".concat(blockClass, "-cell-avatar"),
-      size: 'lg',
-      theme: theme,
-      image: src,
-      imageDescription: alt,
-      icon: icon,
-      backgroundColor: backgroundColor
-    };
-  };
-
-  var getItemIcon = function getItemIcon(_ref5) {
-    var Icon = _ref5.icon;
-    return /*#__PURE__*/React.createElement(Icon, null);
-  };
-
-  var modifierHandler = function modifierHandler(id, selectedItem) {
-    var modifiersClone = _toConsumableArray(appliedModifiers);
-
-    var modifierIdx = modifiersClone.findIndex(function (item) {
-      return item.id === id;
-    });
-    modifiersClone[modifierIdx] = _defineProperty({
-      id: id
-    }, modifiers.id, selectedItem);
-    setAppliedModifiers(modifiersClone);
-  };
-
-  var metaPanelHandler = function metaPanelHandler(item) {
-    if (item.meta) {
-      setDisplayMetaPanel(item);
-    }
-  };
-
-  var isInMetaPanel = function isInMetaPanel(id) {
-    return id === (displayMetalPanel === null || displayMetalPanel === void 0 ? void 0 : displayMetalPanel.id);
-  };
+  var _useFocus = useFocus(filteredItems.length),
+      _useFocus2 = _slicedToArray(_useFocus, 2),
+      focus = _useFocus2[0],
+      setFocus = _useFocus2[1];
 
   return /*#__PURE__*/React.createElement("div", {
+    id: "add-select-focus",
     className: cx("".concat(blockClass, "-wrapper"), _defineProperty({}, "".concat(blockClass, "-wrapper-multi"), multi))
   }, /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass)
   }, /*#__PURE__*/React.createElement("div", {
-    className: "".concat(blockClass, "-body")
-  }, filteredItems.map(function (item) {
-    var _cx2;
-
-    return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(blockClass, "-body"),
+    role: "treegrid",
+    "aria-label": "add select tree label"
+  }, filteredItems.map(function (item, index) {
+    return /*#__PURE__*/React.createElement(AddSelectRow, _extends({
       key: item.id,
-      className: cx("".concat(blockClass, "-row"), (_cx2 = {}, _defineProperty(_cx2, "".concat(blockClass, "-row--selected"), isSelected(item.id)), _defineProperty(_cx2, "".concat(blockClass, "-row-meta--selected"), isInMetaPanel(item.id)), _cx2))
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "".concat(blockClass, "-cell")
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "".concat(blockClass, "-cell-wrapper")
-    }, multi ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-      className: "".concat(blockClass, "-checkbox")
-    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Checkbox, {
-      onChange: handleMultiSelection,
-      labelText: item.title,
-      id: item.id,
-      checked: isSelected(item.id),
-      className: "".concat(blockClass, "-checkbox-wrapper")
-    })), /*#__PURE__*/React.createElement("div", {
-      className: "".concat(blockClass, "-checkbox-label-wrapper")
-    }, item.avatar && /*#__PURE__*/React.createElement(UserProfileImage, getAvatarProps(item.avatar)), item.icon && /*#__PURE__*/React.createElement("div", {
-      className: "".concat(blockClass, "-cell-icon")
-    }, getItemIcon(item)), /*#__PURE__*/React.createElement("div", {
-      className: "".concat(blockClass, "-checkbox-label-text")
-    }, /*#__PURE__*/React.createElement("span", {
-      className: "".concat(blockClass, "-cell-title")
-    }, item.title), item.subtitle && /*#__PURE__*/React.createElement("span", {
-      className: "".concat(blockClass, "-cell-subtitle")
-    }, item.subtitle)))), hasModifiers && /*#__PURE__*/React.createElement(Dropdown, {
-      id: "add-select-modifier-".concat(item.id),
-      type: "inline",
-      items: modifiers.options,
-      label: modifiers.label,
-      disabled: !isSelected(item.id),
-      className: "".concat(blockClass, "-dropdown"),
-      initialSelectedItem: item[modifiers.id],
-      onChange: function onChange(_ref6) {
-        var selectedItem = _ref6.selectedItem;
-        return modifierHandler(item.id, selectedItem);
-      }
-    })) : /*#__PURE__*/React.createElement(RadioButton, {
-      className: "".concat(blockClass, "-radio"),
-      name: "add-select-selections",
-      id: item.id,
-      value: item.value,
-      labelText: item.title,
-      onChange: function onChange() {
-        return handleSingleSelection(item.id);
-      },
-      checked: isSelected(item.id)
-    }), item.children && /*#__PURE__*/React.createElement(Button, {
-      className: "".concat(blockClass, "-view-children"),
-      renderIcon: function renderIcon(props) {
-        return /*#__PURE__*/React.createElement(ChevronRight, _extends({
-          size: 16
-        }, props));
-      },
-      iconDescription: navIconDescription,
-      tooltipPosition: "left",
-      tooltipAlignment: "center",
-      hasIconOnly: true,
-      onClick: function onClick() {
-        return onNavigateItem(item);
-      },
-      kind: "ghost",
-      size: "sm"
-    }), item.meta && /*#__PURE__*/React.createElement(Button, {
-      className: "".concat(blockClass, "-view-meta"),
-      renderIcon: function renderIcon(props) {
-        return /*#__PURE__*/React.createElement(View, _extends({
-          size: 16
-        }, props));
-      },
-      iconDescription: metaIconDescription,
-      tooltipPosition: "left",
-      tooltipAlignment: "center",
-      hasIconOnly: true,
-      kind: "ghost",
-      size: "sm",
-      onClick: function onClick() {
-        return metaPanelHandler(item);
-      }
-    }))));
+      index: index,
+      focus: focus,
+      setSize: filteredItems.length,
+      item: item,
+      multi: multi,
+      setFocus: setFocus
+    }, rest));
   }))));
 };
 AddSelectList.propTypes = {
-  appliedModifiers: PropTypes.array,
-  displayMetalPanel: PropTypes.object,
   filteredItems: PropTypes.array,
-  metaIconDescription: PropTypes.string,
-  modifiers: PropTypes.object,
-  multi: PropTypes.bool,
-  multiSelection: PropTypes.array,
-  navIconDescription: PropTypes.string,
-  parentId: PropTypes.string,
-  setAppliedModifiers: PropTypes.func,
-  setDisplayMetaPanel: PropTypes.func,
-  setMultiSelection: PropTypes.func,
-  setParentSelected: PropTypes.func,
-  setSingleSelection: PropTypes.func,
-  singleSelection: PropTypes.string
+  focus: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  multi: PropTypes.bool
 };
 AddSelectList.displayName = componentName;

package/es/components/AddSelect/AddSelectRow.js

@@ -0,0 +1,220 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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 React, { useRef, useEffect, useCallback } from 'react';
+import { Button, Dropdown } from '@carbon/react';
+import { ChevronRight, View } from '@carbon/react/icons';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { pkg } from '../../settings';
+import { AddSelectFormControl } from './AddSelectFormControl';
+var blockClass = "".concat(pkg.prefix, "--add-select__selections");
+var componentName = 'AddSelectList';
+export var AddSelectRow = function AddSelectRow(_ref) {
+  var _modifiers$options, _cx;
+
+  var appliedModifiers = _ref.appliedModifiers,
+      displayMetalPanel = _ref.displayMetalPanel,
+      index = _ref.index,
+      focus = _ref.focus,
+      item = _ref.item,
+      metaIconDescription = _ref.metaIconDescription,
+      modifiers = _ref.modifiers,
+      multi = _ref.multi,
+      multiSelection = _ref.multiSelection,
+      navIconDescription = _ref.navIconDescription,
+      parentId = _ref.parentId,
+      setAppliedModifiers = _ref.setAppliedModifiers,
+      setDisplayMetaPanel = _ref.setDisplayMetaPanel,
+      setFocus = _ref.setFocus,
+      setMultiSelection = _ref.setMultiSelection,
+      setParentSelected = _ref.setParentSelected,
+      setSingleSelection = _ref.setSingleSelection,
+      singleSelection = _ref.singleSelection;
+  var ref = useRef(null);
+  useEffect(function () {
+    if (focus === index) {
+      ref.current.focus();
+    }
+  }, [focus, index]);
+
+  var isSelected = function isSelected() {
+    if (multi) {
+      return multiSelection.includes(item.id);
+    }
+
+    return item.id === singleSelection;
+  };
+
+  var getTabIndex = function getTabIndex() {
+    // on initial load make the first item tabbable
+    if (index === 0 && focus === '') {
+      return 0;
+    } // make it so only the last focused item is tabbable
+
+
+    if (focus === index && focus !== '') {
+      return 0;
+    } // make unfocused items un-tabbable
+
+
+    return -1;
+  };
+
+  var focusHandler = useCallback(function (reset) {
+    setFocus(reset ? '' : index);
+  }, [setFocus, index]);
+
+  var handleSingleSelection = function handleSingleSelection() {
+    setSingleSelection(item.id);
+  };
+
+  var onSelectKeyDown = function onSelectKeyDown(_ref2) {
+    var key = _ref2.key;
+
+    if (key === 'Enter' || key === ' ') {
+      if (multi) {
+        handleMultiSelection();
+      } else {
+        handleSingleSelection();
+      }
+    } else if (key === 'ArrowRight' && item.children) {
+      onNavigateItem();
+    }
+  };
+
+  var handleMultiSelection = function handleMultiSelection() {
+    var checked = isSelected();
+
+    if (!checked) {
+      var newValues = [].concat(_toConsumableArray(multiSelection), [item.id]);
+      setMultiSelection(newValues);
+    } else {
+      var _newValues = multiSelection.filter(function (v) {
+        return v !== item.id;
+      });
+
+      setMultiSelection(_newValues);
+    }
+  };
+
+  var onNavigateItem = function onNavigateItem() {
+    focusHandler(true);
+    setParentSelected(item.id, item.title, parentId);
+  };
+
+  var modifierHandler = function modifierHandler(id, selectedItem) {
+    var modifiersClone = _toConsumableArray(appliedModifiers);
+
+    var modifierIdx = modifiersClone.findIndex(function (item) {
+      return item.id === id;
+    });
+    modifiersClone[modifierIdx] = _defineProperty({
+      id: id
+    }, modifiers.id, selectedItem);
+    setAppliedModifiers(modifiersClone);
+  };
+
+  var metaPanelHandler = function metaPanelHandler() {
+    if (item.meta) {
+      setDisplayMetaPanel(item);
+    }
+  };
+
+  var isInMetaPanel = function isInMetaPanel(id) {
+    return id === (displayMetalPanel === null || displayMetalPanel === void 0 ? void 0 : displayMetalPanel.id);
+  };
+
+  var hasModifiers = (modifiers === null || modifiers === void 0 ? void 0 : (_modifiers$options = modifiers.options) === null || _modifiers$options === void 0 ? void 0 : _modifiers$options.length) > 0;
+  var tabIndex = getTabIndex();
+  var selected = isSelected();
+  return /*#__PURE__*/React.createElement("div", {
+    className: cx("".concat(blockClass, "-row"), (_cx = {}, _defineProperty(_cx, "".concat(blockClass, "-row--selected"), isSelected(item.id)), _defineProperty(_cx, "".concat(blockClass, "-row-meta--selected"), isInMetaPanel(item.id)), _cx)),
+    onKeyDown: onSelectKeyDown,
+    tabIndex: tabIndex,
+    ref: ref,
+    role: "row"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(blockClass, "-cell")
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(blockClass, "-cell-wrapper")
+  }, multi ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AddSelectFormControl, {
+    type: "checkbox",
+    item: item,
+    selected: selected,
+    onClick: handleMultiSelection
+  }), hasModifiers && /*#__PURE__*/React.createElement(Dropdown, {
+    id: "add-select-modifier-".concat(item.id),
+    type: "inline",
+    items: modifiers.options,
+    label: modifiers.label,
+    disabled: !isSelected(item.id),
+    className: "".concat(blockClass, "-dropdown"),
+    initialSelectedItem: item[modifiers.id],
+    onChange: function onChange(_ref3) {
+      var selectedItem = _ref3.selectedItem;
+      return modifierHandler(item.id, selectedItem);
+    }
+  })) : /*#__PURE__*/React.createElement(AddSelectFormControl, {
+    type: "radio",
+    item: item,
+    selected: selected,
+    onClick: handleSingleSelection
+  }), item.children && /*#__PURE__*/React.createElement(Button, {
+    className: "".concat(blockClass, "-view-children"),
+    renderIcon: function renderIcon(props) {
+      return /*#__PURE__*/React.createElement(ChevronRight, _extends({
+        size: 16
+      }, props));
+    },
+    iconDescription: navIconDescription,
+    tooltipPosition: "left",
+    tooltipAlignment: "center",
+    hasIconOnly: true,
+    onClick: onNavigateItem,
+    kind: "ghost",
+    size: "sm"
+  }), item.meta && /*#__PURE__*/React.createElement(Button, {
+    className: "".concat(blockClass, "-view-meta"),
+    renderIcon: function renderIcon(props) {
+      return /*#__PURE__*/React.createElement(View, _extends({
+        size: 16
+      }, props));
+    },
+    iconDescription: metaIconDescription,
+    tooltipPosition: "left",
+    tooltipAlignment: "center",
+    hasIconOnly: true,
+    kind: "ghost",
+    size: "sm",
+    onClick: metaPanelHandler
+  }))));
+};
+AddSelectRow.propTypes = {
+  appliedModifiers: PropTypes.array,
+  displayMetalPanel: PropTypes.object,
+  filteredItems: PropTypes.array,
+  focus: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  index: PropTypes.number,
+  item: PropTypes.object,
+  metaIconDescription: PropTypes.string,
+  modifiers: PropTypes.object,
+  multi: PropTypes.bool,
+  multiSelection: PropTypes.array,
+  navIconDescription: PropTypes.string,
+  parentId: PropTypes.string,
+  setAppliedModifiers: PropTypes.func,
+  setDisplayMetaPanel: PropTypes.func,
+  setFocus: PropTypes.func,
+  setMultiSelection: PropTypes.func,
+  setParentSelected: PropTypes.func,
+  setSingleSelection: PropTypes.func,
+  singleSelection: PropTypes.string
+};
+AddSelectRow.displayName = componentName;

package/es/components/AddSelect/hooks/useFocus.js

@@ -0,0 +1,35 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { useCallback, useState, useEffect } from 'react';
+
+var useFocus = function useFocus(size) {
+  // the state should represent the location of the item in the array
+  // make it '' initially so that it doesn't automatically focus the first item
+  var _useState = useState(''),
+      _useState2 = _slicedToArray(_useState, 2),
+      currentFocus = _useState2[0],
+      setCurrentFocus = _useState2[1];
+
+  var handleKeyDown = useCallback(function (e) {
+    var focus = currentFocus === '' ? 0 : currentFocus;
+
+    if (e.keyCode === 40) {
+      // Down arrow
+      e.preventDefault();
+      setCurrentFocus(focus === size - 1 ? 0 : focus + 1);
+    } else if (e.keyCode === 38) {
+      // Up arrow
+      e.preventDefault();
+      setCurrentFocus(focus === 0 ? size - 1 : focus - 1);
+    }
+  }, [size, currentFocus, setCurrentFocus]);
+  useEffect(function () {
+    var el = document.querySelector('#add-select-focus');
+    el.addEventListener('keydown', handleKeyDown, false);
+    return function () {
+      el.removeEventListener('keydown', handleKeyDown, false);
+    };
+  }, [handleKeyDown]);
+  return [currentFocus, setCurrentFocus];
+};
+
+export default useFocus;

package/es/components/CreateFullPage/CreateFullPageStep.js

@@ -5,7 +5,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["children", "className", "subtitle", "description", "disableSubmit", "includeStep", "introStep", "title", "hasFieldset", "fieldsetLegendText", "onNext", "onMount", "secondaryLabel"];
 
 /**
- * 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.
@@ -14,7 +14,7 @@ import React, { forwardRef, useContext, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { pkg } from '../../settings';
-import { FormGroup } from '@carbon/react';
+import { Column, FormGroup, Grid } from '@carbon/react';
 import { StepsContext, StepNumberContext } from './CreateFullPage';
 import { usePreviousValue, useRetrieveStepData } from '../../global/js/hooks';
 import pconsole from '../../global/js/utils/pconsole';
@@ -80,16 +80,23 @@ export var CreateFullPageStep = /*#__PURE__*/forwardRef(function (_ref, ref) {
       stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.setOnNext(onNext); // needs to be updated here otherwise there could be stale state values from only initially setting onNext
     }
   }, [stepsContext, stepNumber, disableSubmit, onNext]);
+  var span = {
+    span: 50
+  }; // Half.
+
   return stepsContext ? /*#__PURE__*/React.createElement("section", _extends({}, rest, {
     className: cx(blockClass, className, (_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__step--hidden-step"), stepNumber !== (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep)), _defineProperty(_cx, "".concat(blockClass, "__step--visible-step"), stepNumber === (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep)), _cx)),
     ref: ref
-  }), /*#__PURE__*/React.createElement("h5", {
-    className: "".concat(blockClass, "-title")
-  }, title), subtitle && /*#__PURE__*/React.createElement("h6", {
-    className: "".concat(blockClass, "-subtitle")
-  }, subtitle), description && /*#__PURE__*/React.createElement("p", {
-    className: "".concat(blockClass, "-description")
-  }, description), hasFieldset ? /*#__PURE__*/React.createElement(FormGroup, {
+  }), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Column, span, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Column, _extends({
+    className: "".concat(blockClass, "-title"),
+    as: "h5"
+  }, span), title), subtitle && /*#__PURE__*/React.createElement(Column, _extends({
+    className: "".concat(blockClass, "-subtitle"),
+    as: "h6"
+  }, span), subtitle), description && /*#__PURE__*/React.createElement(Column, _extends({
+    className: "".concat(blockClass, "-description"),
+    as: "p"
+  }, span), description)))), hasFieldset ? /*#__PURE__*/React.createElement(FormGroup, {
     legendText: fieldsetLegendText,
     className: "".concat(blockClass, "-fieldset")
   }, children) : children) : pconsole.warn("You have tried using a ".concat(componentName, " component outside of a CreateFullPage. This is not allowed. ").concat(componentName, "s should always be children of the CreateFullPage"));

package/es/components/CreateTearsheet/CreateTearsheetStep.js

@@ -5,7 +5,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["children", "className", "description", "disableSubmit", "fieldsetLegendText", "hasFieldset", "includeStep", "introStep", "onNext", "onMount", "secondaryLabel", "subtitle", "title"];
 
 /**
- * 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.
@@ -83,26 +83,26 @@ export var CreateTearsheetStep = /*#__PURE__*/forwardRef(function (_ref, ref) {
       stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.setOnNext(onNext); // needs to be updated here otherwise there could be stale state values from only initially setting onNext
     }
   }, [stepsContext, stepNumber, disableSubmit, onNext]);
-  return stepsContext ? /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+  return stepsContext ? /*#__PURE__*/React.createElement(Grid, _extends({}, rest, {
     className: cx(blockClass, className, (_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__step--hidden-step"), stepNumber !== (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep)), _defineProperty(_cx, "".concat(blockClass, "__step--visible-step"), stepNumber === (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep)), _cx)),
     ref: ref
-  }), /*#__PURE__*/React.createElement(Grid, {
-    narrow: true
-  }, /*#__PURE__*/React.createElement(Column, {
+  }), /*#__PURE__*/React.createElement(Column, {
     xlg: 12,
     lg: 12,
     md: 8,
-    sm: 8
+    sm: 4
   }, /*#__PURE__*/React.createElement("h4", {
     className: "".concat(blockClass, "--title")
   }, title), subtitle && /*#__PURE__*/React.createElement("h6", {
     className: "".concat(blockClass, "--subtitle")
   }, subtitle), description && /*#__PURE__*/React.createElement("p", {
     className: "".concat(blockClass, "--description")
-  }, description))), hasFieldset ? /*#__PURE__*/React.createElement(FormGroup, {
+  }, description)), /*#__PURE__*/React.createElement(Column, {
+    span: 100
+  }, hasFieldset ? /*#__PURE__*/React.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"));
+  }, 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"));
 }); // Return a placeholder if not released and not enabled by feature flag
 
 CreateTearsheetStep = pkg.checkComponentEnabled(CreateTearsheetStep, componentName);

package/es/components/CreateTearsheet/preview-components/MultiStepTearsheet.js

@@ -6,7 +6,7 @@ var _excluded = ["value1", "setValue1"];
 /* eslint-disable react/prop-types */
 
 /**
- * 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.
@@ -26,13 +26,11 @@ var CustomStep = function CustomStep(_ref) {
 
   return /*#__PURE__*/React.createElement(CreateTearsheetStep, _extends({}, rest, {
     disableSubmit: !value1
-  }), /*#__PURE__*/React.createElement(Grid, {
-    narrow: true
-  }, /*#__PURE__*/React.createElement(Column, {
+  }), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Column, {
     xlg: 8,
     lg: 8,
     md: 8,
-    sm: 8
+    sm: 4
   }, /*#__PURE__*/React.createElement(TextInput, {
     value: value1,
     onChange: function onChange(event) {
@@ -174,13 +172,11 @@ export var MultiStepTearsheet = function MultiStepTearsheet(_ref2) {
     disableSubmit: !stepOneTextInputValue,
     subtitle: "This is the unique name used to recognize your topic",
     description: "It will also be used by your producers and consumers as part of the connection information, so make it something easy to recognize."
-  }, /*#__PURE__*/React.createElement(Grid, {
-    narrow: true
-  }, /*#__PURE__*/React.createElement(Column, {
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Column, {
     xlg: 8,
     lg: 8,
     md: 8,
-    sm: 8
+    sm: 4
   }, /*#__PURE__*/React.createElement(TextInput, {
     labelText: "Topic name",
     placeholder: "Enter topic name",
@@ -253,11 +249,11 @@ export var MultiStepTearsheet = function MultiStepTearsheet(_ref2) {
     subtitle: "One or more partitions make up a topic. A partition is an ordered list of messages.",
     description: "Partitions are distributed across the brokers in order to increase the scalability of your topic. You can also use them to distribute messages across the members of a consumer group.",
     fieldsetLegendText: "Partition information"
-  }, /*#__PURE__*/React.createElement(Grid, {
-    narrow: true
-  }, /*#__PURE__*/React.createElement(Column, {
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Column, {
     xlg: 3,
-    lg: 3
+    lg: 3,
+    md: 8,
+    sm: 4
   }, /*#__PURE__*/React.createElement(NumberInput, {
     iconDescription: "Choose a number",
     id: "carbon-number",
@@ -279,13 +275,11 @@ export var MultiStepTearsheet = function MultiStepTearsheet(_ref2) {
     subtitle: "This is how long messages are retained before they are deleted.",
     description: "If your messages are not read by a consumer within this time, they will be missed.",
     fieldsetLegendText: "Message retention scheduling"
-  }, /*#__PURE__*/React.createElement(Grid, {
-    narrow: true
-  }, /*#__PURE__*/React.createElement(Column, {
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Column, {
     xlg: 8,
     lg: 8,
     md: 8,
-    sm: 8
+    sm: 4
   }, /*#__PURE__*/React.createElement(RadioButtonGroup, {
     legendText: "Message retention",
     name: "radio-button-group",