@carbon/ibm-products 2.0.0-rc.0 → 2.0.0-rc.10

package/lib/components/AddSelect/AddSelectList.js

@@ -17,7 +17,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _react2 = require("@carbon/react");
 
-var _iconsReact = require("@carbon/icons-react");
+var _icons = require("@carbon/react/icons");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -28,7 +28,7 @@ var _settings = require("../../settings");
 var _UserProfileImage = require("../UserProfileImage");
 
 //
-// Copyright IBM Corp. 2022
+// 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.
@@ -40,6 +40,7 @@ var AddSelectList = function AddSelectList(_ref) {
   var _modifiers$options;
 
   var appliedModifiers = _ref.appliedModifiers,
+      displayMetalPanel = _ref.displayMetalPanel,
       filteredItems = _ref.filteredItems,
       metaIconDescription = _ref.metaIconDescription,
       modifiers = _ref.modifiers,
@@ -59,7 +60,10 @@ var AddSelectList = function AddSelectList(_ref) {
     setSingleSelection(value);
   };
 
-  var handleMultiSelection = function handleMultiSelection(id, checked) {
+  var handleMultiSelection = function handleMultiSelection(event, _ref2) {
+    var checked = _ref2.checked,
+        id = _ref2.id;
+
     if (checked) {
       var newValues = [].concat((0, _toConsumableArray2.default)(multiSelection), [id]);
       setMultiSelection(newValues);
@@ -72,25 +76,30 @@ var AddSelectList = function AddSelectList(_ref) {
     }
   };
 
-  var onNavigateItem = function onNavigateItem(_ref2) {
-    var id = _ref2.id,
-        title = _ref2.title;
+  var onNavigateItem = function onNavigateItem(_ref3) {
+    var id = _ref3.id,
+        title = _ref3.title;
     setParentSelected(id, title, parentId);
   };
 
   var isSelected = function isSelected(id) {
-    return multiSelection.includes(id);
+    if (multi) {
+      return multiSelection.includes(id);
+    }
+
+    return id === singleSelection;
   };
 
-  var getAvatarProps = function getAvatarProps(_ref3) {
-    var src = _ref3.src,
-        alt = _ref3.alt,
-        icon = _ref3.icon,
-        backgroundColor = _ref3.backgroundColor;
+  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: 'light',
+      theme: theme,
       image: src,
       imageDescription: alt,
       icon: icon,
@@ -98,8 +107,8 @@ var AddSelectList = function AddSelectList(_ref) {
     };
   };
 
-  var getItemIcon = function getItemIcon(_ref4) {
-    var Icon = _ref4.icon;
+  var getItemIcon = function getItemIcon(_ref5) {
+    var Icon = _ref5.icon;
     return /*#__PURE__*/_react.default.createElement(Icon, null);
   };
 
@@ -114,31 +123,59 @@ var AddSelectList = function AddSelectList(_ref) {
     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);
+  };
+
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(blockClass, "-wrapper")
+    className: (0, _classnames.default)("".concat(blockClass, "-wrapper"), (0, _defineProperty2.default)({}, "".concat(blockClass, "-wrapper-multi"), multi))
   }, /*#__PURE__*/_react.default.createElement(_react2.StructuredListWrapper, {
     selection: true,
     className: "".concat(blockClass)
   }, /*#__PURE__*/_react.default.createElement(_react2.StructuredListBody, null, filteredItems.map(function (item) {
+    var _cx2;
+
     return /*#__PURE__*/_react.default.createElement(_react2.StructuredListRow, {
       key: item.id,
-      className: (0, _classnames.default)("".concat(blockClass, "-row"), (0, _defineProperty2.default)({}, "".concat(blockClass, "-row-selected"), isSelected(item.id)))
-    }, /*#__PURE__*/_react.default.createElement(_react2.StructuredListCell, {
-      className: "".concat(blockClass, "-cell")
+      className: (0, _classnames.default)("".concat(blockClass, "-row"), (_cx2 = {}, (0, _defineProperty2.default)(_cx2, "".concat(blockClass, "-row--selected"), isSelected(item.id)), (0, _defineProperty2.default)(_cx2, "".concat(blockClass, "-row-meta--selected"), isInMetaPanel(item.id)), _cx2)),
+      onClick: function onClick(evt) {
+        return metaPanelHandler(item, evt);
+      }
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(blockClass, "-cell"),
+      onClick: function onClick() {
+        metaPanelHandler(item);
+      },
+      onKeyDown: function onKeyDown() {
+        metaPanelHandler(item);
+      },
+      role: "button",
+      tabIndex: "0"
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(blockClass, "-cell-wrapper")
     }, multi ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(blockClass, "-checkbox")
+    },
+    /*#__PURE__*/
+    // hacky way to prevent checkbox from triggering the meta onclick handler
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+    _react.default.createElement("div", {
+      onClick: function onClick(event) {
+        return event.stopPropagation();
+      }
     }, /*#__PURE__*/_react.default.createElement(_react2.Checkbox, {
-      onChange: function onChange(event, _ref5) {
-        var checked = _ref5.checked;
-        return handleMultiSelection(item.id, checked);
-      },
+      onChange: handleMultiSelection,
       labelText: item.title,
       id: item.id,
       checked: isSelected(item.id),
       className: "".concat(blockClass, "-checkbox-wrapper")
-    }), /*#__PURE__*/_react.default.createElement("div", {
+    })), /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(blockClass, "-checkbox-label-wrapper")
     }, item.avatar && /*#__PURE__*/_react.default.createElement(_UserProfileImage.UserProfileImage, getAvatarProps(item.avatar)), item.icon && /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(blockClass, "-cell-icon")
@@ -170,11 +207,11 @@ var AddSelectList = function AddSelectList(_ref) {
       onChange: function onChange() {
         return handleSingleSelection(item.id);
       },
-      selected: item.id === singleSelection
+      checked: isSelected(item.id)
     }), item.children && /*#__PURE__*/_react.default.createElement(_react2.Button, {
       className: "".concat(blockClass, "-view-children"),
       renderIcon: function renderIcon(props) {
-        return /*#__PURE__*/_react.default.createElement(_iconsReact.ChevronRight, (0, _extends2.default)({
+        return /*#__PURE__*/_react.default.createElement(_icons.ChevronRight, (0, _extends2.default)({
           size: 16
         }, props));
       },
@@ -192,7 +229,7 @@ var AddSelectList = function AddSelectList(_ref) {
     }, /*#__PURE__*/_react.default.createElement(_react2.Button, {
       className: "".concat(blockClass, "-view-meta"),
       renderIcon: function renderIcon(props) {
-        return /*#__PURE__*/_react.default.createElement(_iconsReact.View, (0, _extends2.default)({
+        return /*#__PURE__*/_react.default.createElement(_icons.View, (0, _extends2.default)({
           size: 16
         }, props));
       },
@@ -200,9 +237,6 @@ var AddSelectList = function AddSelectList(_ref) {
       tooltipPosition: "left",
       tooltipAlignment: "center",
       hasIconOnly: true,
-      onClick: function onClick() {
-        return setDisplayMetaPanel(item);
-      },
       kind: "ghost",
       size: "sm"
     })))));
@@ -212,6 +246,7 @@ var AddSelectList = function AddSelectList(_ref) {
 exports.AddSelectList = AddSelectList;
 AddSelectList.propTypes = {
   appliedModifiers: _propTypes.default.array,
+  displayMetalPanel: _propTypes.default.object,
   filteredItems: _propTypes.default.array,
   metaIconDescription: _propTypes.default.string,
   modifiers: _propTypes.default.object,

package/lib/components/AddSelect/AddSelectMetaPanel.js

@@ -15,7 +15,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _iconsReact = require("@carbon/icons-react");
+var _icons = require("@carbon/react/icons");
 
 var _react2 = require("@carbon/react");
 
@@ -25,6 +25,12 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+//
+// 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.
+//
 var blockClass = "".concat(_settings.pkg.prefix, "--add-select__meta-panel");
 var componentName = 'AddSelectMetaPanel';
 
@@ -46,7 +52,7 @@ var AddSelectMetaPanel = function AddSelectMetaPanel(_ref) {
     className: "".concat(blockClass, "-title")
   }, title), /*#__PURE__*/_react.default.createElement(_react2.Button, {
     renderIcon: function renderIcon(props) {
-      return /*#__PURE__*/_react.default.createElement(_iconsReact.Close, (0, _extends2.default)({
+      return /*#__PURE__*/_react.default.createElement(_icons.Close, (0, _extends2.default)({
         size: 16
       }, props));
     },

package/lib/components/AddSelect/AddSelectSidebar.js

@@ -31,6 +31,7 @@ var AddSelectSidebar = function AddSelectSidebar(_ref) {
   var appliedModifiers = _ref.appliedModifiers,
       closeIconDescription = _ref.closeIconDescription,
       displayMetalPanel = _ref.displayMetalPanel,
+      illustrationTheme = _ref.illustrationTheme,
       influencerTitle = _ref.influencerTitle,
       items = _ref.items,
       metaPanelTitle = _ref.metaPanelTitle,
@@ -116,7 +117,8 @@ var AddSelectSidebar = function AddSelectSidebar(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_NoDataEmptyState.NoDataEmptyState, {
     subtitle: noSelectionDescription,
     title: noSelectionTitle,
-    size: "sm"
+    size: "sm",
+    illustrationTheme: illustrationTheme
   })));
 };
 
@@ -125,6 +127,7 @@ AddSelectSidebar.propTypes = {
   appliedModifiers: _propTypes.default.array,
   closeIconDescription: _propTypes.default.string,
   displayMetalPanel: _propTypes.default.object,
+  illustrationTheme: _propTypes.default.oneOf(['light', 'dark']),
   influencerTitle: _propTypes.default.string,
   items: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.array]),
   metaPanelTitle: _propTypes.default.string,

package/lib/components/AddSelect/AddSelectSort.js

@@ -17,12 +17,12 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _react2 = require("@carbon/react");
 
-var _iconsReact = require("@carbon/icons-react");
+var _icons = require("@carbon/react/icons");
 
 var _settings = require("../../settings");
 
 //
-// Copyright IBM Corp. 2022
+// 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.
@@ -38,14 +38,14 @@ var AddSelectSort = function AddSelectSort(_ref) {
   var sortByOpts = sortBy ? sortBy.reduce(function (acc, cur) {
     var opts = [{
       id: "".concat(cur, "-asc"),
-      itemText: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_iconsReact.ArrowUp, {
+      itemText: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_icons.ArrowUp, {
         size: 16
       }), cur),
       direction: 'asc',
       attribute: cur
     }, {
       id: "".concat(cur, "-desc"),
-      itemText: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_iconsReact.ArrowDown, {
+      itemText: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_icons.ArrowDown, {
         size: 16
       }), cur),
       direction: 'desc',
@@ -65,7 +65,7 @@ var AddSelectSort = function AddSelectSort(_ref) {
     className: blockClass
   }, sortByOpts.length > 0 && /*#__PURE__*/_react.default.createElement(_react2.OverflowMenu, {
     renderIcon: function renderIcon(props) {
-      return /*#__PURE__*/_react.default.createElement(_iconsReact.ArrowsVertical, (0, _extends2.default)({
+      return /*#__PURE__*/_react.default.createElement(_icons.ArrowsVertical, (0, _extends2.default)({
         size: 32
       }, props));
     },

package/lib/components/AddSelect/add-select-utils.js

@@ -17,6 +17,13 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
+//
+// 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.
+//
+
 /**
  * to be able to more easily and efficiently the child entries the data needs to be
  * normalized. this function recursively goes through the data array to build a single
@@ -104,7 +111,7 @@ var getFilteredItems = function getFilteredItems(useNormalizedItems, normalizedI
 
     if (searchTerm || globalFiltersApplied) {
       var results = itemIds.reduce(function (prev, cur) {
-        if (normalizedItems[cur].title.toLowerCase().includes(searchTerm)) {
+        if (normalizedItems[cur].title.toLowerCase().includes(searchTerm.toLowerCase())) {
           prev.push(normalizedItems[cur]);
         }
 
@@ -151,7 +158,7 @@ var getFilteredItems = function getFilteredItems(useNormalizedItems, normalizedI
   } else {
     if (searchTerm) {
       return items.entries.filter(function (item) {
-        return item.title.toLowerCase().includes(searchTerm);
+        return item.title.toLowerCase().includes(searchTerm.toLowerCase());
       });
     }
 

package/lib/components/AddSelect/hooks/useItemSort.js

@@ -11,6 +11,12 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 
 var _react = require("react");
 
+//
+// 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.
+//
 var useItemSort = function useItemSort() {
   var _useState = (0, _react.useState)(''),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),

package/lib/components/AddSelect/hooks/useParentSelect.js

@@ -11,6 +11,12 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 
 var _react = require("react");
 
+//
+// 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.
+//
 var useParentSelect = function useParentSelect() {
   var _useState = (0, _react.useState)(null),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),

package/lib/components/AddSelect/hooks/usePath.js

@@ -64,10 +64,18 @@ var usePath = function usePath() {
     setPath((0, _toConsumableArray2.default)(pathCopy));
   };
 
+  var resetPath = function resetPath() {
+    setPath([{
+      id: 'base_of_path',
+      title: itemsLabel
+    }]);
+  };
+
   return {
     path: path,
     setPath: handler,
-    pathOnclick: pathClickHandler
+    pathOnclick: pathClickHandler,
+    resetPath: resetPath
   };
 };
 

package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js

@@ -23,13 +23,13 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _reactResizeDetector = require("react-resize-detector");
+
 var _react2 = require("@carbon/react");
 
 var _settings = require("../../settings");
 
-var _reactResizeDetector = require("react-resize-detector");
-
-var _iconsReact = require("@carbon/icons-react");
+var _icons = require("@carbon/react/icons");
 
 var _uuidv = _interopRequireDefault(require("../../global/js/utils/uuidv4"));
 
@@ -97,7 +97,7 @@ var BreadcrumbWithOverflow = function BreadcrumbWithOverflow(_ref) {
       iconDescription: overflowAriaLabel // also needs setting to avoid a11y "Accessible name does not match or contain the visible label text"
       ,
       renderIcon: function renderIcon(props) {
-        return /*#__PURE__*/_react.default.createElement(_iconsReact.OverflowMenuHorizontal, (0, _extends2.default)({
+        return /*#__PURE__*/_react.default.createElement(_icons.OverflowMenuHorizontal, (0, _extends2.default)({
           size: 32
         }, props));
       },
@@ -126,7 +126,7 @@ var BreadcrumbWithOverflow = function BreadcrumbWithOverflow(_ref) {
     }, /*#__PURE__*/_react.default.createElement(_react2.OverflowMenu, {
       ariaLabel: overflowAriaLabel,
       renderIcon: function renderIcon(props) {
-        return /*#__PURE__*/_react.default.createElement(_iconsReact.OverflowMenuHorizontal, (0, _extends2.default)({
+        return /*#__PURE__*/_react.default.createElement(_icons.OverflowMenuHorizontal, (0, _extends2.default)({
           size: 32
         }, props));
       }
@@ -316,7 +316,7 @@ var BreadcrumbWithOverflow = function BreadcrumbWithOverflow(_ref) {
       return /*#__PURE__*/_react.default.createElement(_react2.IconButton, {
         label: backItem.title || backItem.label,
         align: "right"
-      }, /*#__PURE__*/_react.default.createElement(_iconsReact.ArrowLeft, {
+      }, /*#__PURE__*/_react.default.createElement(_icons.ArrowLeft, {
         size: 16
       }));
     }

package/lib/components/Card/Card.js

@@ -29,7 +29,7 @@ var _CardFooter = require("./CardFooter");
 
 var _settings = require("../../settings");
 
-var _excluded = ["actionIcons", "actionsPlacement", "children", "className", "clickZone", "description", "label", "media", "mediaPosition", "onClick", "onKeyDown", "onPrimaryButtonClick", "overflowActions", "overflowAriaLabel", "onSecondaryButtonClick", "pictogram", "primaryButtonHref", "primaryButtonIcon", "primaryButtonKind", "primaryButtonText", "productive", "secondaryButtonHref", "secondaryButtonIcon", "secondaryButtonKind", "secondaryButtonText", "title", "titleSize"],
+var _excluded = ["actionIcons", "actionsPlacement", "children", "className", "clickZone", "description", "label", "media", "mediaPosition", "onClick", "onKeyDown", "onPrimaryButtonClick", "overflowActions", "overflowAriaLabel", "onSecondaryButtonClick", "pictogram", "primaryButtonHref", "primaryButtonIcon", "primaryButtonKind", "primaryButtonPlacement", "primaryButtonText", "productive", "secondaryButtonHref", "secondaryButtonIcon", "secondaryButtonKind", "secondaryButtonText", "title", "titleSize"],
     _excluded2 = ["id"],
     _excluded3 = ["id", "icon", "onClick", "iconDescription", "href"];
 
@@ -50,6 +50,7 @@ var defaults = {
   mediaPosition: 'top',
   overflowActions: Object.freeze([]),
   primaryButtonKind: 'primary',
+  primaryButtonPlacement: 'bottom',
   productive: false,
   secondaryButtonKind: 'secondary',
   titleSize: 'default'
@@ -80,6 +81,8 @@ var Card = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       primaryButtonIcon = _ref.primaryButtonIcon,
       _ref$primaryButtonKin = _ref.primaryButtonKind,
       primaryButtonKind = _ref$primaryButtonKin === void 0 ? defaults.primaryButtonKind : _ref$primaryButtonKin,
+      _ref$primaryButtonPla = _ref.primaryButtonPlacement,
+      primaryButtonPlacement = _ref$primaryButtonPla === void 0 ? defaults.primaryButtonPlacement : _ref$primaryButtonPla,
       primaryButtonText = _ref.primaryButtonText,
       _ref$productive = _ref.productive,
       productive = _ref$productive === void 0 ? defaults.productive : _ref$productive,
@@ -93,9 +96,9 @@ var Card = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       titleSize = _ref$titleSize === void 0 ? defaults.titleSize : _ref$titleSize,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var blockClass = "".concat(_settings.pkg.prefix, "--card");
-  var hasActions = actionIcons.length > 0 || overflowActions.length > 0;
+  var hasActions = actionIcons.length > 0 || overflowActions.length > 0 || !!primaryButtonText && primaryButtonPlacement === 'top';
   var hasFooterActions = hasActions && actionsPlacement === 'bottom';
-  var hasFooterButton = !!secondaryButtonText || !!primaryButtonText;
+  var hasFooterButton = !!secondaryButtonText || !!primaryButtonText && primaryButtonPlacement === 'bottom';
   var hasBottomBar = hasFooterActions || hasFooterButton;
   var hasClickEvent = !!onClick || !!onKeyDown;
   var clickableProps = {
@@ -195,10 +198,15 @@ var Card = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
 
   var getHeaderProps = function getHeaderProps() {
     return {
-      actions: getActions(),
+      actions: actionsPlacement === 'top' ? getActions() : '',
+      noActionIcons: actionIcons.length > 0 && actionsPlacement === 'top' ? false : true,
       actionsPlacement: actionsPlacement,
+      onPrimaryButtonClick: onPrimaryButtonClick,
+      primaryButtonIcon: primaryButtonIcon,
+      primaryButtonPlacement: primaryButtonPlacement,
+      primaryButtonText: primaryButtonText,
       description: description,
-      hasActions: hasActions && actionsPlacement === 'top',
+      hasActions: hasActions,
       label: label,
       title: title,
       titleSize: titleSize
@@ -217,7 +225,7 @@ var Card = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
 
   var getFooterProps = function getFooterProps() {
     return {
-      actions: getActions(),
+      actions: actionsPlacement === 'bottom' ? getActions() : '',
       actionsPlacement: actionsPlacement,
       hasActions: hasFooterActions,
       hasButton: hasFooterButton,
@@ -226,6 +234,7 @@ var Card = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       primaryButtonHref: primaryButtonHref,
       primaryButtonIcon: primaryButtonIcon,
       primaryButtonKind: primaryButtonKind,
+      primaryButtonPlacement: primaryButtonPlacement,
       primaryButtonText: primaryButtonText,
       productive: productive,
       secondaryButtonHref: secondaryButtonHref,
@@ -276,6 +285,7 @@ Card.propTypes = {
   primaryButtonHref: _propTypes.default.string,
   primaryButtonIcon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
   primaryButtonKind: _propTypes.default.oneOf(['primary', 'ghost']),
+  primaryButtonPlacement: _propTypes.default.oneOf(['top', 'bottom']),
   primaryButtonText: _propTypes.default.node,
   productive: _propTypes.default.bool,
   secondaryButtonHref: _propTypes.default.string,

package/lib/components/Card/CardFooter.js

@@ -44,6 +44,7 @@ var CardFooter = function CardFooter(_ref) {
       primaryButtonIcon = _ref.primaryButtonIcon,
       _ref$primaryButtonKin = _ref.primaryButtonKind,
       primaryButtonKind = _ref$primaryButtonKin === void 0 ? defaults.primaryButtonKind : _ref$primaryButtonKin,
+      primaryButtonPlacement = _ref.primaryButtonPlacement,
       primaryButtonText = _ref.primaryButtonText,
       _ref$productive = _ref.productive,
       productive = _ref$productive === void 0 ? defaults.productive : _ref$productive,
@@ -63,7 +64,7 @@ var CardFooter = function CardFooter(_ref) {
     size: "md",
     renderIcon: secondaryButtonIcon,
     href: secondaryButtonHref
-  }, secondaryButtonText), primaryButtonText && /*#__PURE__*/_react.default.createElement(_react2.Button, {
+  }, secondaryButtonText), primaryButtonText && primaryButtonPlacement === 'bottom' && /*#__PURE__*/_react.default.createElement(_react2.Button, {
     kind: productive ? 'ghost' : primaryButtonKind,
     onClick: onPrimaryButtonClick,
     size: "md",
@@ -84,6 +85,7 @@ CardFooter.propTypes = {
   primaryButtonHref: _propTypes.default.string,
   primaryButtonIcon: _propTypes.default.string,
   primaryButtonKind: _propTypes.default.oneOf(['primary', 'ghost']),
+  primaryButtonPlacement: _propTypes.default.oneOf(['top', 'bottom']),
   primaryButtonText: _propTypes.default.string,
   productive: _propTypes.default.bool,
   secondaryButtonHref: _propTypes.default.string,

package/lib/components/Card/CardHeader.js

@@ -17,6 +17,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _settings = require("../../settings");
 
+var _react2 = require("@carbon/react");
+
 //
 // Copyright IBM Corp. 2020, 2021
 //
@@ -33,6 +35,11 @@ var CardHeader = function CardHeader(_ref) {
   var _cx;
 
   var actions = _ref.actions,
+      noActionIcons = _ref.noActionIcons,
+      onPrimaryButtonClick = _ref.onPrimaryButtonClick,
+      primaryButtonIcon = _ref.primaryButtonIcon,
+      primaryButtonPlacement = _ref.primaryButtonPlacement,
+      primaryButtonText = _ref.primaryButtonText,
       description = _ref.description,
       _ref$hasActions = _ref.hasActions,
       hasActions = _ref$hasActions === void 0 ? defaults.hasActions : _ref$hasActions,
@@ -43,6 +50,8 @@ var CardHeader = function CardHeader(_ref) {
   var blockClass = "".concat(_settings.pkg.prefix, "--card");
   var headerClass = "".concat(blockClass, "__header");
   var headerClasses = (0, _classnames.default)(headerClass, (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(headerClass, "-label-only"), label && !title && !description), (0, _defineProperty2.default)(_cx, "".concat(headerClass, "-has-label"), !!label), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__title-lg"), titleSize === 'large'), _cx));
+  var actionGhostButton = "".concat(blockClass, "__actions-header-ghost-button");
+  var actionGhostButtonClass = (0, _classnames.default)(actionGhostButton, (0, _defineProperty2.default)({}, "".concat(actionGhostButton, "--only"), noActionIcons));
   return /*#__PURE__*/_react.default.createElement("div", {
     className: headerClasses
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -57,7 +66,13 @@ var CardHeader = function CardHeader(_ref) {
     className: "".concat(blockClass, "__description")
   }, description)), hasActions && /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__actions ").concat(blockClass, "__actions-header")
-  }, actions)));
+  }, actions, primaryButtonText && primaryButtonPlacement === 'top' && /*#__PURE__*/_react.default.createElement(_react2.Button, {
+    kind: "ghost",
+    size: "small",
+    renderIcon: primaryButtonIcon,
+    onClick: onPrimaryButtonClick,
+    className: actionGhostButtonClass
+  }, primaryButtonText))));
 };
 
 exports.CardHeader = CardHeader;
@@ -66,6 +81,11 @@ CardHeader.propTypes = {
   description: _propTypes.default.string,
   hasActions: _propTypes.default.bool,
   label: _propTypes.default.string,
+  noActionIcons: _propTypes.default.bool,
+  onPrimaryButtonClick: _propTypes.default.func,
+  primaryButtonIcon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+  primaryButtonPlacement: _propTypes.default.oneOf(['top', 'bottom']),
+  primaryButtonText: _propTypes.default.string,
   title: _propTypes.default.string,
   titleSize: _propTypes.default.oneOf(['default', 'large'])
 };

package/lib/components/ComboButton/ComboButton.js

@@ -19,7 +19,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _iconsReact = require("@carbon/icons-react");
+var _icons = require("@carbon/react/icons");
 
 var _react = require("@carbon/react");
 
@@ -91,11 +91,11 @@ var ComboButton = function ComboButton(_ref) {
     },
     renderIcon: function renderIcon() {
       return /*#__PURE__*/(0, _react2.createElement)(isOpen ? function (props) {
-        return /*#__PURE__*/_react2.default.createElement(_iconsReact.ChevronUp, (0, _extends2.default)({
+        return /*#__PURE__*/_react2.default.createElement(_icons.ChevronUp, (0, _extends2.default)({
           size: 16
         }, props));
       } : function (props) {
-        return /*#__PURE__*/_react2.default.createElement(_iconsReact.ChevronDown, (0, _extends2.default)({
+        return /*#__PURE__*/_react2.default.createElement(_icons.ChevronDown, (0, _extends2.default)({
           size: 16
         }, props));
       }, {

package/lib/components/CreateFullPage/CreateFullPage.js

@@ -220,7 +220,10 @@ var CreateFullPage = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
     className: "".concat(blockClass, "__modal"),
     size: "sm",
     open: modalIsOpen,
-    "aria-label": modalTitle
+    "aria-label": modalTitle,
+    onClose: function onClose() {
+      setModalIsOpen(false);
+    }
   }, /*#__PURE__*/_react.default.createElement(_react2.ModalHeader, {
     title: modalTitle
   }), /*#__PURE__*/_react.default.createElement(_react2.ModalBody, null, /*#__PURE__*/_react.default.createElement("p", null, modalDescription)), /*#__PURE__*/_react.default.createElement(_react2.ModalFooter, null, /*#__PURE__*/_react.default.createElement(_react2.Button, {

package/lib/components/CreateTearsheet/CreateTearsheet.js

@@ -37,6 +37,8 @@ var _devtools = require("../../global/js/utils/devtools");
 
 var _lastIndexInArray = require("../../global/js/utils/lastIndexInArray");
 
+var _getNumberOfHiddenSteps = require("../../global/js/utils/getNumberOfHiddenSteps");
+
 var _excluded = ["backButtonText", "cancelButtonText", "children", "className", "description", "influencerWidth", "initialStep", "label", "nextButtonText", "onClose", "onRequestSubmit", "open", "submitButtonText", "title", "verticalPosition"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -147,7 +149,12 @@ var CreateTearsheet = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     if (lastItem !== lastIncludedStep) {
       setLastIncludedStep(lastItem);
     }
-  }, [stepData, firstIncludedStep, lastIncludedStep]);
+
+    if (open && initialStep) {
+      var numberOfHiddenSteps = (0, _getNumberOfHiddenSteps.getNumberOfHiddenSteps)(stepData, initialStep);
+      setCurrentStep(Number(initialStep + numberOfHiddenSteps));
+    }
+  }, [stepData, firstIncludedStep, lastIncludedStep, initialStep, open]);
   (0, _hooks.useCreateComponentFocus)({
     previousState: previousState,
     currentStep: currentStep,
@@ -160,6 +167,7 @@ var CreateTearsheet = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     previousState: previousState,
     open: open,
     setCurrentStep: setCurrentStep,
+    stepData: stepData,
     initialStep: initialStep,
     totalSteps: stepData === null || stepData === void 0 ? void 0 : stepData.length,
     componentName: componentName