@carbon/ibm-products 1.19.0 → 1.20.1

package/lib/components/Datagrid/Datagrid/DraggableElement.js

@@ -9,6 +9,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
 var React = _interopRequireWildcard(require("react"));
@@ -21,6 +23,8 @@ var _reactDnd = require("react-dnd");
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _settings = require("../../../settings");
+
 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); }
 
 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; }
@@ -37,7 +41,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var useEffect = React.useEffect,
     useRef = React.useRef,
     useState = React.useState;
-var DRAG_TYPE = 'wkc-shared-ui-draggable-element';
+var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
+var DRAG_TYPE = "".concat(blockClass, "__shared-ui-draggable-element");
 
 var DraggableElement = function DraggableElement(_ref) {
   var id = _ref.id,
@@ -134,14 +139,10 @@ var DraggableElement = function DraggableElement(_ref) {
   var content = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: (0, _classnames.default)({
       disabled: disabled
-    }, 'wkc-draggable-handleStyle')
+    }, "".concat(blockClass, "__draggable-handleStyle"))
   }, /*#__PURE__*/React.createElement(_iconsReact.Draggable16, null)), children);
   return /*#__PURE__*/React.createElement("li", {
-    className: (0, _classnames.default)({
-      'wkc-draggable-handleHolder-isOver': isOver && !disabled
-    }, {
-      'wkc-draggable-handleHolder--grabbed': isGrabbed
-    }, 'wkc-draggable-handleHolder'),
+    className: (0, _classnames.default)((0, _defineProperty2.default)({}, "".concat(blockClass, "__draggable-handleHolder-isOver"), isOver && !disabled), (0, _defineProperty2.default)({}, "".concat(blockClass, "__wkc-draggable-handleHolder--grabbed"), isGrabbed), "".concat(blockClass, "__draggable-handleHolder")),
     ref: ref,
     "aria-selected": isFocused,
     role: "option",
@@ -169,17 +170,15 @@ var DraggableElement = function DraggableElement(_ref) {
       setIsFocusedOnItem(e.currentTarget === e.target);
     }
   }, /*#__PURE__*/React.createElement("span", {
-    className: "wkc-shared-ui--assistive-text"
+    className: "".concat(blockClass, "__shared-ui--assistive-text")
   }, ariaLabel), isDragging && !isOver ? /*#__PURE__*/React.createElement("div", {
     ref: preview,
-    className: "wkc-draggable-handleHolder-droppable"
+    className: "${blockClass}__draggable-handleHolder-droppable"
   }, content) : /*#__PURE__*/React.createElement("div", {
     ref: drag,
     "aria-hidden": isFocused && isFocusedOnItem // if focus on li, hide the children from aria
     ,
-    className: (0, _classnames.default)({
-      'wkc-draggable-handleStyle': !disabled
-    }, 'wkc-draggable-handleHolder-droppable')
+    className: (0, _classnames.default)((0, _defineProperty2.default)({}, "".concat(blockClass, "__draggable-handleStyle"), !disabled), ["".concat(blockClass, "__draggable-handleHolder-droppable")])
   }, (!isOver || disabled) && content));
 };
 

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.0",
+  "version": "1.20.1",
   "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": "0b3c895c53963a176ff7e274639c5cce460c0ef1"
+  "gitHead": "66afdf73400e366e86129784abf42909d36ff058"
 }

package/scss/components/ComboButton/_combo-button.scss

@@ -25,7 +25,8 @@
     @include text-overflow;
   }
 
-  .#{$security--prefix}--combo-button__overflow-menu {
+  .#{$security--prefix}--combo-button
+    .#{$security--prefix}--combo-button__overflow-menu {
     width: carbon--mini-units($count: 6);
     height: auto;
     border-left: carbon--rem($px: 1px) solid $ui-03;

package/scss/components/Datagrid/_datagrid.scss

@@ -9,16 +9,7 @@
 @import '../../global/styles/project-settings';
 @import '../../global/styles/mixins';
 
-@import './styles/datagrid';
-@import './styles/useNestedRows';
-//@import './styles/useNestedTable';
-@import './styles/useSortableColumns';
-@import './styles/useColumnRightAlign';
-@import './styles/useStickyColumn';
-@import './styles/useActionsColumn';
-@import './styles/addons/CustomizeColumnsModal';
-@import './styles/addons/RowSizeDropdown';
-@import './styles/useSelectAllToggle';
+@import './styles/index';
 
 // Other Carbon settings.
 // TODO: @import 'carbon-components/scss/globals/grid/grid'; if needed

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/Datagrid/styles/draggableElement.scss

@@ -0,0 +1,58 @@
+/*
+* Licensed Materials - Property of IBM
+* 5724-Q36
+* (c) Copyright IBM Corp. 2021
+* US Government Users Restricted Rights - Use, duplication or disclosure
+* restricted by GSA ADP Schedule Contract with IBM Corp.
+*/
+@import './variables';
+
+.#{$block-class}__draggable-handleStyle {
+  display: flex;
+  align-items: center;
+  margin-right: $spacing-03;
+  cursor: grab;
+}
+
+.#{$block-class}__draggable-handleStyle.disabled {
+  pointer-events: none;
+}
+
+svg.#{$block-class}__draggable-handleStyle.disable {
+  fill: $disabled-02;
+}
+
+.#{$block-class}__draggable-handleHolder {
+  display: flex;
+  height: $spacing-07;
+  padding-left: $spacing-02;
+  margin-bottom: $spacing-03;
+  background: $ui-02;
+  &.#{$block-class}__draggable-handleHolder-isOver {
+    border: 2px dashed $focus;
+    background-color: $highlight;
+  }
+}
+
+.#{$block-class}__draggable-handleHolder-droppable {
+  display: flex;
+  width: 100%;
+}
+
+.#{$block-class}__draggable-handleHolder--grabbed {
+  background-color: $highlight;
+  color: $text-01;
+}
+
+.#{$block-class}__shared-ui--assistive-text {
+  // hide the assistive text. can not use display: none which will also hide from ARIA
+  position: absolute;
+  overflow: hidden;
+  width: 0;
+  height: 0;
+  padding: 0;
+  border: 0;
+  clip: rect(0 0 0 0);
+  text-transform: none;
+  white-space: nowrap;
+}

package/scss/components/Datagrid/styles/index.scss

@@ -7,7 +7,7 @@
 */
 @import './datagrid';
 @import './useNestedRows';
-//@import './useNestedTable';
+@import './useNestedTable';
 @import './useSortableColumns';
 @import './useColumnRightAlign';
 @import './useStickyColumn';
@@ -15,3 +15,4 @@
 @import './addons/CustomizeColumnsModal';
 @import './addons/RowSizeDropdown';
 @import './useSelectAllToggle';
+@import './draggableElement';

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';