@carbon/ibm-products 2.0.0-rc.2 → 2.0.0-rc.4

package/es/global/js/utils/uuidv4.spec.js

@@ -4,11 +4,15 @@ describe('uuidv4', function () {
     jest.resetAllMocks();
   });
   it('Uses Math.random when window is not defined', function () {
+    var _window = window,
+        crypto = _window.crypto;
+    delete window.crypto;
     var mockMath = Object.create(global.Math);
     var mockMathRandom = jest.fn().mockReturnValue(0.5);
     mockMath.random = mockMathRandom;
     global.Math = mockMath;
     expect(uuidv4()).toEqual('98888888-9888-4888-a888-988888888888');
+    window.crypto = crypto;
   });
   it('Uses crypto from window when window is defined', function () {
     var mGetRandomValues = jest.fn().mockReturnValue(new Uint32Array(10));

package/lib/components/APIKeyModal/APIKeyModal.js

@@ -29,7 +29,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _react2 = require("@carbon/react");
 
-var _iconsReact = require("@carbon/icons-react");
+var _icons = require("@carbon/react/icons");
 
 var _APIKeyDownloader = require("./APIKeyDownloader");
 
@@ -128,7 +128,7 @@ var APIKeyModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var hasPreviousStep = hasSteps && currentStep !== 0;
   var copyButtonProps = {
     renderIcon: function renderIcon(props) {
-      return /*#__PURE__*/_react.default.createElement(_iconsReact.Copy, (0, _extends2.default)({
+      return /*#__PURE__*/_react.default.createElement(_icons.Copy, (0, _extends2.default)({
         size: 16
       }, props));
     },
@@ -334,13 +334,13 @@ var APIKeyModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     className: "".concat(blockClass, "__messaging")
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__error-icon")
-  }, /*#__PURE__*/_react.default.createElement(_iconsReact.ErrorFilled, {
+  }, /*#__PURE__*/_react.default.createElement(_icons.ErrorFilled, {
     size: 16
   })), /*#__PURE__*/_react.default.createElement("p", {
     className: "".concat(blockClass, "__messaging-text")
   }, copyError ? copyErrorText : errorText)), apiKeyLoaded && /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__messaging")
-  }, /*#__PURE__*/_react.default.createElement(_iconsReact.InformationFilled, {
+  }, /*#__PURE__*/_react.default.createElement(_icons.InformationFilled, {
     size: 16
   }), hasDownloadLink ? /*#__PURE__*/_react.default.createElement(_APIKeyDownloader.APIKeyDownloader, {
     apiKey: apiKey,

package/lib/components/AddSelect/AddSelect.js

@@ -21,8 +21,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _AddSelectBody = require("./AddSelectBody");
 
-var _settings = require("../../settings");
-
 var _addSelectUtils = require("./add-select-utils");
 
 var _excluded = ["items", "globalFilters"];
@@ -31,7 +29,6 @@ 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; }
 
-var blockClass = "".concat(_settings.pkg.prefix, "--add-select");
 var componentName = 'AddSelect';
 var AddSelect = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var items = _ref.items,
@@ -49,7 +46,6 @@ var AddSelect = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     }, modifierAttribute, item[modifierAttribute]);
   }) : [];
   return /*#__PURE__*/_react.default.createElement(_AddSelectBody.AddSelectBody, (0, _extends2.default)({}, props, {
-    className: blockClass,
     ref: ref,
     items: items,
     normalizedItems: normalizedItems,

package/lib/components/AddSelect/AddSelectBody.js

@@ -148,6 +148,19 @@ var AddSelectBody = function AddSelectBody(_ref) {
       setPath = _usePath.setPath,
       pathOnclick = _usePath.pathOnclick;
 
+  var resetState = function resetState() {
+    setSingleSelection('');
+    setMultiSelection([]);
+    setSearchTerm('');
+    setAppliedGlobalFilters({});
+    setDisplayMetaPanel({});
+  };
+
+  var onCloseHandler = function onCloseHandler() {
+    resetState();
+    onClose();
+  };
+
   var classNames = (0, _classnames.default)(className, blockClass, (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__single"), !multi), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__multi"), multi), _cx));
   var globalFilterKeys = Object.keys(appliedGlobalFilters);
   var globalFiltersApplied = globalFilterKeys.length > 0; // handlers
@@ -173,6 +186,8 @@ var AddSelectBody = function AddSelectBody(_ref) {
     } else {
       onSubmit(singleSelection);
     }
+
+    onCloseHandler();
   };
 
   var setShowBreadsCrumbs = function setShowBreadsCrumbs() {
@@ -207,6 +222,7 @@ var AddSelectBody = function AddSelectBody(_ref) {
   var showSort = (searchTerm || globalFiltersApplied) && hasResults;
   var showTags = setShowTags();
   var commonListProps = {
+    displayMetalPanel: displayMetalPanel,
     metaIconDescription: metaIconDescription,
     multi: multi,
     multiSelection: multiSelection,
@@ -228,7 +244,7 @@ var AddSelectBody = function AddSelectBody(_ref) {
     actions: [{
       label: onCloseButtonText,
       kind: 'secondary',
-      onClick: onClose
+      onClick: onCloseHandler
     }, {
       label: onSubmitButtonText,
       kind: 'primary',
@@ -270,12 +286,13 @@ var AddSelectBody = function AddSelectBody(_ref) {
     hasFiltersApplied: globalFiltersApplied,
     clearFiltersText: clearFiltersText
   }), /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(blockClass, "__sub-header")
+    className: (0, _classnames.default)("".concat(blockClass, "__sub-header"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__sub-header-multi"), multi))
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__tag-container")
   }, showBreadsCrumbs ? /*#__PURE__*/_react.default.createElement(_AddSelectBreadcrumbs.AddSelectBreadcrumbs, {
     path: path,
-    onClick: pathOnclick
+    onClick: pathOnclick,
+    multi: multi
   }) : /*#__PURE__*/_react.default.createElement("p", {
     className: "".concat(blockClass, "__tag-container-label")
   }, searchTerm ? searchResultsLabel : itemsLabel), showTags && /*#__PURE__*/_react.default.createElement(_react2.Tag, {
@@ -346,11 +363,11 @@ AddSelectBody.propTypes = {
     entries: _propTypes.default.arrayOf(_propTypes.default.shape({
       avatar: _propTypes.default.shape({
         alt: _propTypes.default.string,
-        icon: _propTypes.default.func,
+        icon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
         src: _propTypes.default.string
       }),
       children: _propTypes.default.object,
-      icon: _propTypes.default.func,
+      icon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
       id: _propTypes.default.string.isRequired,
       meta: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.shape({
         id: _propTypes.default.string,

package/lib/components/AddSelect/AddSelectBreadcrumbs.js

@@ -7,30 +7,40 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.AddSelectBreadcrumbs = void 0;
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var _react2 = require("@carbon/react");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _settings = require("../../settings");
+
 //
 // Copyright IBM Corp. 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__breadcrumbs");
 var componentName = 'AddSelectBreadcrumbs';
 
 var AddSelectBreadcrumbs = function AddSelectBreadcrumbs(_ref) {
-  var path = _ref.path,
-      onClick = _ref.onClick;
+  var multi = _ref.multi,
+      onClick = _ref.onClick,
+      path = _ref.path;
 
   var clickHandler = function clickHandler(idx) {
     onClick(idx);
   };
 
+  var classNames = (0, _classnames.default)(blockClass, (0, _defineProperty2.default)({}, "".concat(blockClass, "-multi"), multi));
   return /*#__PURE__*/_react.default.createElement(_react2.Breadcrumb, {
-    noTrailingSlash: true
+    noTrailingSlash: true,
+    className: classNames
   }, path.map(function (entry, idx) {
     var isCurrentPage = idx === path.length - 1;
     return /*#__PURE__*/_react.default.createElement(_react2.BreadcrumbItem, {
@@ -45,6 +55,7 @@ var AddSelectBreadcrumbs = function AddSelectBreadcrumbs(_ref) {
 
 exports.AddSelectBreadcrumbs = AddSelectBreadcrumbs;
 AddSelectBreadcrumbs.propTypes = {
+  multi: _propTypes.default.bool,
   onClick: _propTypes.default.func,
   path: _propTypes.default.array
 };

package/lib/components/AddSelect/AddSelectColumn.js

@@ -23,7 +23,7 @@ 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");
 
@@ -189,16 +189,16 @@ var AddSelectColumn = function AddSelectColumn(_ref) {
     className: colClass
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(colClass, "-search-bar")
-  }, /*#__PURE__*/_react.default.createElement(_react2.TextInput, {
+  }, /*#__PURE__*/_react.default.createElement(_react2.Search, {
     value: searchTerm,
     onChange: function onChange(e) {
       return setSearchTerm(e.target.value);
     },
-    light: true,
     placeholder: columnInputPlaceholder,
     className: "".concat(colClass, "-input"),
     id: (0, _uuidv.default)(),
-    labelText: columnInputPlaceholder
+    labelText: columnInputPlaceholder,
+    size: "md"
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(colClass, "-sort-filter")
   }, /*#__PURE__*/_react.default.createElement(_AddSelectSort.AddSelectSort, {
@@ -210,7 +210,7 @@ var AddSelectColumn = function AddSelectColumn(_ref) {
     sortBy: sortBy
   }), filterByOpts.length > 0 && /*#__PURE__*/_react.default.createElement(_react2.OverflowMenu, {
     renderIcon: function renderIcon(props) {
-      return /*#__PURE__*/_react.default.createElement(_iconsReact.Filter, (0, _extends2.default)({
+      return /*#__PURE__*/_react.default.createElement(_icons.Filter, (0, _extends2.default)({
         size: 32
       }, props));
     },

package/lib/components/AddSelect/AddSelectFilter.js

@@ -23,7 +23,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _iconsReact = require("@carbon/icons-react");
+var _icons = require("@carbon/react/icons");
 
 var _settings = require("../../settings");
 
@@ -112,7 +112,7 @@ var AddSelectFilter = function AddSelectFilter(_ref) {
   var dirtyInput = Object.keys(filters).length > 0;
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "-search")
-  }, /*#__PURE__*/_react.default.createElement(_react2.TextInput, {
+  }, /*#__PURE__*/_react.default.createElement(_react2.Search, {
     id: "temp-id",
     labelText: inputLabel,
     placeholder: inputPlaceholder,
@@ -120,7 +120,7 @@ var AddSelectFilter = function AddSelectFilter(_ref) {
     onChange: searchHandler
   }), showFilter && /*#__PURE__*/_react.default.createElement(_react2.Button, {
     renderIcon: function renderIcon(props) {
-      return /*#__PURE__*/_react.default.createElement(_iconsReact.Filter, (0, _extends2.default)({
+      return /*#__PURE__*/_react.default.createElement(_icons.Filter, (0, _extends2.default)({
         size: 16
       }, props));
     },
@@ -131,7 +131,8 @@ var AddSelectFilter = function AddSelectFilter(_ref) {
     },
     iconDescription: iconDescription,
     className: filterBtnClassnames,
-    size: "md"
+    size: "lg",
+    tooltipPosition: "left"
   }), open && /*#__PURE__*/_react.default.createElement("div", {
     className: blockClass
   }, /*#__PURE__*/_react.default.createElement("div", {

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"));
 
@@ -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,21 +76,25 @@ 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;
     return {
       className: "".concat(blockClass, "-cell-avatar"),
       size: 'lg',
@@ -98,8 +106,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 +122,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 +206,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 +228,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 +236,6 @@ var AddSelectList = function AddSelectList(_ref) {
       tooltipPosition: "left",
       tooltipAlignment: "center",
       hasIconOnly: true,
-      onClick: function onClick() {
-        return setDisplayMetaPanel(item);
-      },
       kind: "ghost",
       size: "sm"
     })))));
@@ -212,6 +245,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");
 
@@ -46,7 +46,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/AddSelectSort.js

@@ -17,7 +17,7 @@ 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");
 
@@ -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/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,