@carbon/ibm-products 1.19.1 → 1.20.2

package/lib/components/AddSelect/AddSelectSidebar.js

@@ -27,11 +27,15 @@ var _excluded = ["meta", "icon", "avatar"];
 var componentName = 'AddSelectSidebar';
 
 var AddSelectSidebar = function AddSelectSidebar(_ref) {
-  var closeIconDescription = _ref.closeIconDescription,
+  var _modifiers$options;
+
+  var appliedModifiers = _ref.appliedModifiers,
+      closeIconDescription = _ref.closeIconDescription,
       displayMetalPanel = _ref.displayMetalPanel,
       influencerTitle = _ref.influencerTitle,
       items = _ref.items,
       metaPanelTitle = _ref.metaPanelTitle,
+      modifiers = _ref.modifiers,
       multiSelection = _ref.multiSelection,
       noSelectionDescription = _ref.noSelectionDescription,
       noSelectionTitle = _ref.noSelectionTitle,
@@ -39,6 +43,8 @@ var AddSelectSidebar = function AddSelectSidebar(_ref) {
       setDisplayMetaPanel = _ref.setDisplayMetaPanel,
       setMultiSelection = _ref.setMultiSelection;
   var blockClass = "".concat(_settings.pkg.prefix, "--add-select__sidebar");
+  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 hasSelections = multiSelection.length > 0;
 
   var handleItemRemove = function handleItemRemove(id) {
     var newSelections = multiSelection.filter(function (v) {
@@ -61,24 +67,23 @@ var AddSelectSidebar = function AddSelectSidebar(_ref) {
     return acc;
   }, []);
 
-  var getTitle = function getTitle(_ref2) {
-    var title = _ref2.title,
-        subtitle = _ref2.subtitle,
-        id = _ref2.id;
+  var getTitle = function getTitle(item) {
     return /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(blockClass, "-accordion-title")
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(blockClass, "-selected-item")
     }, /*#__PURE__*/_react.default.createElement("p", {
       className: "".concat(blockClass, "-selected-item-title")
-    }, title), /*#__PURE__*/_react.default.createElement("p", {
+    }, item.title), /*#__PURE__*/_react.default.createElement("p", {
       className: "".concat(blockClass, "-selected-item-subtitle")
-    }, subtitle)), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
+    }, item.subtitle)), hasModifiers && /*#__PURE__*/_react.default.createElement("div", null, appliedModifiers.find(function (modifier) {
+      return modifier.id === item.id;
+    })[modifiers.id]), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
       renderIcon: _iconsReact.SubtractAlt32,
       iconDescription: removeIconDescription,
       hasIconOnly: true,
       onClick: function onClick() {
-        return handleItemRemove(id);
+        return handleItemRemove(item.id);
       },
       kind: "ghost",
       className: "".concat(blockClass, "-item-remove-button"),
@@ -104,7 +109,7 @@ var AddSelectSidebar = function AddSelectSidebar(_ref) {
   }, influencerTitle), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Tag, {
     type: "gray",
     size: "sm"
-  }, multiSelection.length)), multiSelection.length > 0 ? /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Accordion, {
+  }, multiSelection.length)), hasSelections ? /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Accordion, {
     align: "start"
   }, sidebarItems.map(function (item) {
     return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.AccordionItem, {
@@ -131,11 +136,13 @@ var AddSelectSidebar = function AddSelectSidebar(_ref) {
 
 exports.AddSelectSidebar = AddSelectSidebar;
 AddSelectSidebar.propTypes = {
+  appliedModifiers: _propTypes.default.array,
   closeIconDescription: _propTypes.default.string,
   displayMetalPanel: _propTypes.default.object,
   influencerTitle: _propTypes.default.string,
   items: _propTypes.default.array,
   metaPanelTitle: _propTypes.default.string,
+  modifiers: _propTypes.default.object,
   multiSelection: _propTypes.default.array,
   noSelectionDescription: _propTypes.default.string,
   noSelectionTitle: _propTypes.default.string,

package/lib/components/ComboButton/ComboButton.js

@@ -23,12 +23,12 @@ var _iconsReact = require("@carbon/icons-react");
 
 var _carbonComponentsReact = require("carbon-components-react");
 
-var _setupGetInstanceId = _interopRequireDefault(require("carbon-components-react/lib/tools/setupGetInstanceId"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _propTypes = require("prop-types");
 
+var _uuidv = _interopRequireDefault(require("../../global/js/utils/uuidv4"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _excluded = ["children", "className", "overflowMenu"],
@@ -43,7 +43,6 @@ 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; }
 
-var getInstanceId = (0, _setupGetInstanceId.default)();
 var blockClass = 'security--combo-button';
 /**
  * The combo button consolidates similar actions, while exposing the most commonly used one.
@@ -55,7 +54,7 @@ var ComboButton = function ComboButton(_ref) {
       overflowMenu = _ref.overflowMenu,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
 
-  var _useRef = (0, _react.useRef)(getInstanceId()),
+  var _useRef = (0, _react.useRef)((0, _uuidv.default)()),
       instanceId = _useRef.current;
 
   var _useState = (0, _react.useState)(false),

package/lib/components/CreateSidePanel/CreateSidePanel.js

@@ -27,8 +27,6 @@ var _carbonComponentsReact = require("carbon-components-react");
 
 var _SidePanel = require("../SidePanel");
 
-var _ActionSet = require("../ActionSet");
-
 var _excluded = ["className", "children", "disableSubmit", "formTitle", "formDescription", "onRequestClose", "onRequestSubmit", "open", "primaryButtonText", "secondaryButtonText", "selectorPageContent", "selectorPrimaryFocus", "subtitle", "title"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -37,7 +35,6 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(_settings.pkg.prefix, "--create-side-panel");
-var sidePanelBlockClass = "".concat(_settings.pkg.prefix, "--side-panel");
 var componentName = 'CreateSidePanel'; // NOTE: the component SCSS is not imported here: it is rolled up separately.
 
 /**
@@ -74,7 +71,6 @@ var CreateSidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
     onClick: onRequestClose,
     kind: 'secondary'
   }];
-  var actionContainerClassNames = (0, _classnames.default)(["".concat(blockClass, "__actions-container"), "".concat(sidePanelBlockClass, "__actions-container")]);
   return selectorPageContent && /*#__PURE__*/_react.default.createElement(_SidePanel.SidePanel, (0, _extends2.default)({}, rest, _objectSpread({
     open: open,
     ref: ref,
@@ -88,18 +84,15 @@ var CreateSidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
     slideIn: true,
     animateTitle: false,
     className: (0, _classnames.default)(blockClass, className),
-    size: "md"
+    size: "md",
+    actions: actions
   }), /*#__PURE__*/_react.default.createElement("h3", {
     className: "".concat(blockClass, "__form-title-text ").concat(blockClass, "__content-text")
   }, formTitle), /*#__PURE__*/_react.default.createElement("p", {
     className: "".concat(blockClass, "__form-description-text ").concat(blockClass, "__content-text")
   }, formDescription), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Form, {
     className: "".concat(blockClass, "__form")
-  }, children, /*#__PURE__*/_react.default.createElement(_ActionSet.ActionSet, {
-    actions: actions,
-    className: actionContainerClassNames,
-    size: "md"
-  })));
+  }, children));
 });
 
 exports.CreateSidePanel = CreateSidePanel;

package/lib/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js

@@ -19,8 +19,6 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _InlineCheckbox = _interopRequireDefault(require("carbon-components-react/lib/components/InlineCheckbox"));
-
 var _carbonComponentsReact = require("carbon-components-react");
 
 var _iconsReact = require("@carbon/icons-react");
@@ -81,7 +79,7 @@ var SelectAllWithToggle = function SelectAllWithToggle(_ref) {
     role: "columnheader",
     scope: "col",
     className: "".concat(blockClass, "__select-all-toggle-on")
-  }, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_InlineCheckbox.default, (0, _extends2.default)({}, selectProps, {
+  }, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Checkbox, (0, _extends2.default)({}, selectProps, {
     name: "".concat(tableId, "-select-all-checkbox-name"),
     onClick: function onClick(e) {
       onChange(e);

package/lib/components/EditSidePanel/EditSidePanel.js

@@ -27,8 +27,6 @@ var _carbonComponentsReact = require("carbon-components-react");
 
 var _SidePanel = require("../SidePanel");
 
-var _ActionSet = require("../ActionSet");
-
 require("../../global/js/utils/props-helper");
 
 var _excluded = ["children", "className", "disableSubmit", "formTitle", "formDescription", "onRequestClose", "onRequestSubmit", "open", "placement", "primaryButtonText", "secondaryButtonText", "selectorPrimaryFocus", "selectorPageContent", "size", "slideIn", "subtitle", "title"];
@@ -39,7 +37,6 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(_settings.pkg.prefix, "--edit-side-panel");
-var sidePanelBlockClass = "".concat(_settings.pkg.prefix, "--side-panel");
 var componentName = 'EditSidePanel'; // NOTE: the component SCSS is not imported here: it is rolled up separately.
 // Default values for props
 
@@ -86,7 +83,6 @@ var EditSidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
     onClick: onRequestClose,
     kind: 'secondary'
   }];
-  var actionContainerClassNames = (0, _classnames.default)(["".concat(blockClass, "__actions-container"), "".concat(sidePanelBlockClass, "__actions-container")]);
   return /*#__PURE__*/_react.default.createElement(_SidePanel.SidePanel, (0, _extends2.default)({}, rest, _objectSpread({
     open: open,
     ref: ref,
@@ -101,18 +97,15 @@ var EditSidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
     animateTitle: false,
     className: (0, _classnames.default)(blockClass, className),
     size: size,
-    preventCloseOnClickOutside: true
+    preventCloseOnClickOutside: true,
+    actions: actions
   }), formTitle && /*#__PURE__*/_react.default.createElement("h3", {
     className: "".concat(blockClass, "__form-title-text ").concat(blockClass, "__content-text")
   }, formTitle), formDescription && /*#__PURE__*/_react.default.createElement("p", {
     className: "".concat(blockClass, "__form-description-text ").concat(blockClass, "__content-text")
   }, formDescription), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Form, {
     className: "".concat(blockClass, "__form")
-  }, children, /*#__PURE__*/_react.default.createElement(_ActionSet.ActionSet, {
-    actions: actions,
-    className: actionContainerClassNames,
-    size: size
-  })));
+  }, children));
 }); // Return a placeholder if not released and not enabled by feature flag
 
 

package/lib/components/SidePanel/SidePanel.js

@@ -73,7 +73,7 @@ var defaults = {
  */
 
 var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
-  var _ref4, _cx4;
+  var _window, _ref4, _cx4;
 
   var actionToolbarButtons = _ref.actionToolbarButtons,
       actions = _ref.actions,
@@ -131,7 +131,7 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     size: size,
     open: open
   });
-  var reducedMotion = window && window.matchMedia ? window.matchMedia('(prefers-reduced-motion: reduce)') : {
+  var reducedMotion = typeof window !== 'undefined' && (_window = window) !== null && _window !== void 0 && _window.matchMedia ? window.matchMedia('(prefers-reduced-motion: reduce)') : {
     matches: true
   }; // scroll panel to top going between steps
 

package/lib/components/index.js

@@ -303,6 +303,90 @@ Object.defineProperty(exports, "WebTerminalContentWrapper", {
     return _WebTerminal.WebTerminalContentWrapper;
   }
 });
+Object.defineProperty(exports, "useActionsColumn", {
+  enumerable: true,
+  get: function get() {
+    return _Datagrid.useActionsColumn;
+  }
+});
+Object.defineProperty(exports, "useColumnRightAlign", {
+  enumerable: true,
+  get: function get() {
+    return _Datagrid.useColumnRightAlign;
+  }
+});
+Object.defineProperty(exports, "useCustomizeColumns", {
+  enumerable: true,
+  get: function get() {
+    return _Datagrid.useCustomizeColumns;
+  }
+});
+Object.defineProperty(exports, "useDatagrid", {
+  enumerable: true,
+  get: function get() {
+    return _Datagrid.useDatagrid;
+  }
+});
+Object.defineProperty(exports, "useDisableSelectRows", {
+  enumerable: true,
+  get: function get() {
+    return _Datagrid.useDisableSelectRows;
+  }
+});
+Object.defineProperty(exports, "useExpandedRow", {
+  enumerable: true,
+  get: function get() {
+    return _Datagrid.useExpandedRow;
+  }
+});
+Object.defineProperty(exports, "useInfiniteScroll", {
+  enumerable: true,
+  get: function get() {
+    return _Datagrid.useInfiniteScroll;
+  }
+});
+Object.defineProperty(exports, "useNestedRows", {
+  enumerable: true,
+  get: function get() {
+    return _Datagrid.useNestedRows;
+  }
+});
+Object.defineProperty(exports, "useOnRowClick", {
+  enumerable: true,
+  get: function get() {
+    return _Datagrid.useOnRowClick;
+  }
+});
+Object.defineProperty(exports, "useRowIsMouseOver", {
+  enumerable: true,
+  get: function get() {
+    return _Datagrid.useRowIsMouseOver;
+  }
+});
+Object.defineProperty(exports, "useSelectAllWithToggle", {
+  enumerable: true,
+  get: function get() {
+    return _Datagrid.useSelectAllWithToggle;
+  }
+});
+Object.defineProperty(exports, "useSelectRows", {
+  enumerable: true,
+  get: function get() {
+    return _Datagrid.useSelectRows;
+  }
+});
+Object.defineProperty(exports, "useSortableColumns", {
+  enumerable: true,
+  get: function get() {
+    return _Datagrid.useSortableColumns;
+  }
+});
+Object.defineProperty(exports, "useStickyColumn", {
+  enumerable: true,
+  get: function get() {
+    return _Datagrid.useStickyColumn;
+  }
+});
 
 var _AboutModal = require("./AboutModal");
 

package/lib/global/js/package-settings.js

@@ -39,6 +39,7 @@ var defaults = {
     HTTPError404: true,
     HTTPErrorOther: true,
     ImportModal: true,
+    InlineEdit: true,
     NotificationsPanel: true,
     NoDataEmptyState: true,
     NoTagsEmptyState: true,
@@ -67,7 +68,6 @@ var defaults = {
     WebTerminalContentWrapper: false,
     EditSidePanel: false,
     CancelableTextEdit: false,
-    InlineEdit: false,
     DataSpreadsheet: false,
     Datagrid: false
     /* new component flags here - comment used by generate CLI */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "1.19.1",
+  "version": "1.20.2",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -93,5 +93,5 @@
     "react": "^16.8.6 || ^17.0.1",
     "react-dom": "^16.8.6 || ^17.0.1"
   },
-  "gitHead": "eb1c96e096118d320eed2f197f85f675a7601b05"
+  "gitHead": "84bc700f2b70f195de681c50c6a35af56ca9b831"
 }

package/scss/components/Datagrid/styles/datagrid.scss

@@ -134,7 +134,14 @@
     }
   }
 }
+.#{$block-class}__grid-container::-webkit-scrollbar-thumb {
+  background-color: $text-03;
+}
 
+.#{$block-class}__grid-container::-webkit-scrollbar {
+  width: 6px;
+  background-color: $ui-background;
+}
 .#{$block-class}__grid-container {
   display: block;
   overflow: auto;
@@ -150,7 +157,7 @@
 
   .#{$block-class}__table-simple {
     display: flex;
-    overflow: hidden;
+    overflow: auto;
     max-height: 100%;
     flex-direction: column;
   }
@@ -302,6 +309,7 @@
 
 .#{$block-class}__simple-body {
   position: relative;
+  display: table;
   overflow-x: hidden;
   overflow-y: auto;
   //makes thin scrollbar in chrome and firefox
@@ -322,6 +330,14 @@
   min-width: 0 !important;
 }
 
+.#{$block-class}__table-simple::-webkit-scrollbar {
+  width: 6px;
+  background-color: $ui-background;
+}
+
+.#{$block-class}__table-simple::-webkit-scrollbar-thumb {
+  background-color: $text-03;
+}
 .#{$block-class}__sticky.#{$block-class}__simple-body {
   overflow: auto;
 }

package/scss/components/_index-released-only.scss

@@ -22,6 +22,7 @@
 @import './ExpressiveCard/index';
 @import './HTTPErrors/index';
 @import './ImportModal/index';
+@import './InlineEdit/index';
 @import './NotificationsPanel/index';
 @import './PageHeader/index';
 @import './ProductiveCard/index';