@carbon/ibm-products 2.0.0-rc.17 → 2.0.0-rc.18

package/es/components/Datagrid/Datagrid/DraggableElement.js

@@ -11,7 +11,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
  */
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { Draggable } from '@carbon/react/icons';
+import { Draggable, Locked } from '@carbon/react/icons';
 import { useDrag, useDrop } from 'react-dnd';
 import cx from 'classnames';
 import { pkg } from '../../../settings';
@@ -34,6 +34,7 @@ var DraggableElement = function DraggableElement(_ref) {
       onGrab = _ref.onGrab,
       onArrowKeyDown = _ref.onArrowKeyDown,
       isFocused = _ref.isFocused,
+      isSticky = _ref.isSticky,
       moveElement = _ref.moveElement,
       selected = _ref.selected,
       _ref$positionLabel = _ref.positionLabel,
@@ -120,11 +121,13 @@ var DraggableElement = function DraggableElement(_ref) {
     className: cx({
       disabled: disabled
     }, "".concat(blockClass, "__draggable-handleStyle"))
-  }, /*#__PURE__*/React.createElement(Draggable, {
+  }, isSticky ? /*#__PURE__*/React.createElement(Locked, {
+    size: 16
+  }) : /*#__PURE__*/React.createElement(Draggable, {
     size: 16
   })), children);
   return /*#__PURE__*/React.createElement("li", {
-    className: cx((_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__draggable-handleHolder-isOver"), isOver && !disabled), _defineProperty(_cx, "".concat(blockClass, "__draggable-handleHolder-grabbed"), isGrabbed), _defineProperty(_cx, "".concat(blockClass, "__draggable-handleHolder-selected"), selected), _defineProperty(_cx, "".concat(blockClass, "__draggable-handleHolder"), !selected), _cx)),
+    className: cx((_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__draggable-handleHolder-isOver"), isOver && !disabled), _defineProperty(_cx, "".concat(blockClass, "__draggable-handleHolder-grabbed"), isGrabbed), _defineProperty(_cx, "".concat(blockClass, "__draggable-handleHolder-selected"), selected), _defineProperty(_cx, "".concat(blockClass, "__draggable-handleHolder--sticky"), isSticky), _defineProperty(_cx, "".concat(blockClass, "__draggable-handleHolder"), !selected), _cx)),
     ref: ref,
     "aria-selected": isFocused,
     role: "option",
@@ -173,6 +176,7 @@ DraggableElement.propTypes = {
   id: PropTypes.string.isRequired,
   index: PropTypes.number.isRequired,
   isFocused: PropTypes.bool.isRequired,
+  isSticky: PropTypes.bool,
   listData: PropTypes.array.isRequired,
   moveElement: PropTypes.func.isRequired,
   onArrowKeyDown: PropTypes.func.isRequired,

package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js

@@ -103,9 +103,11 @@ var Columns = function Columns(_ref) {
     var res = filterString.length ? colDef.Header.props.title.toLowerCase().split(searchString) : null;
     var firstWord = res !== null ? res[0] === '' ? res[1].charAt(0).toUpperCase() + res[1].substring(1) : res[0].charAt(0).toUpperCase() + res[0].substring(1) : null;
     var highlightedText = res !== null ? res[0] === '' ? "<strong>".concat(firstWord, "</strong>") + res[2] : firstWord + "<strong>".concat(res[1], "</strong>") + res[2] : colDef.Header.props.title;
+    var isFrozenColumn = !!colDef.sticky;
     var listContents = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Checkbox, {
       className: cx("".concat(blockClass, "__customize-columns-checkbox-wrapper"), "".concat(blockClass, "__customize-columns-checkbox")),
       checked: isColumnVisible(colDef),
+      disabled: isFrozenColumn,
       onChange: function onChange(_, _ref2) {
         var checked = _ref2.checked;
         return onSelectColumn(colDef, checked);
@@ -126,18 +128,21 @@ var Columns = function Columns(_ref) {
       setListData: setColumnsObject,
       id: "dnd-datagrid-columns-".concat(colDef.id),
       type: "column-customization",
-      disabled: filterString.length > 0,
+      disabled: filterString.length > 0 || isFrozenColumn,
       ariaLabel: colDef.Header.props.title,
       onGrab: setAriaRegionText,
       isFocused: focusIndex === i,
+      isSticky: isFrozenColumn,
       moveElement: moveElement,
       onArrowKeyDown: function onArrowKeyDown(e, isGrabbed, currentIndex) {
         if (isGrabbed) {
+          var _columns$nextIndex;
+
           var nextIndex = getNextIndex(columns, currentIndex, e.key);
           e.preventDefault();
           e.stopPropagation();
 
-          if (nextIndex >= 0) {
+          if (nextIndex >= 0 && !((_columns$nextIndex = columns[nextIndex]) !== null && _columns$nextIndex !== void 0 && _columns$nextIndex.sticky)) {
             setFocusIndex(nextIndex);
             moveElement(currentIndex, nextIndex);
             e.target.scrollIntoView({

package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.js

@@ -63,7 +63,7 @@ var CustomizeColumnsTearsheet = function CustomizeColumnsTearsheet(_ref) {
 
   var _useState7 = useState(columnDefinitions // hide the columns without Header, e.g the sticky actions, spacer
   .filter(function (colDef) {
-    return !!colDef.Header.props;
+    return !!colDef.Header.props && !colDef.isAction;
   }) // only sort the hidden column to the end when modal reopen
   .sort(function (defA, defB) {
     var isVisibleA = isColumnVisible(defA);

package/es/global/js/package-settings.js

@@ -37,6 +37,7 @@ var defaults = {
     ImportModal: true,
     InlineEdit: true,
     InlineEditV1: true,
+    MultiAddSelect: true,
     NotificationsPanel: true,
     NoDataEmptyState: true,
     NoTagsEmptyState: true,
@@ -48,6 +49,7 @@ var defaults = {
     RemoveModal: true,
     Saving: true,
     SidePanel: true,
+    SingleAddSelect: true,
     StatusIcon: true,
     TagSet: true,
     Tearsheet: true,
@@ -58,8 +60,6 @@ var defaults = {
     WebTerminalContentWrapper: true,
     WebTerminalProvider: true,
     // other public components not yet reviewed and released:
-    MultiAddSelect: false,
-    SingleAddSelect: false,
     ModifiedTabs: false,
     Toolbar: false,
     ToolbarButton: false,

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

@@ -57,6 +57,7 @@ var DraggableElement = function DraggableElement(_ref) {
       onGrab = _ref.onGrab,
       onArrowKeyDown = _ref.onArrowKeyDown,
       isFocused = _ref.isFocused,
+      isSticky = _ref.isSticky,
       moveElement = _ref.moveElement,
       selected = _ref.selected,
       _ref$positionLabel = _ref.positionLabel,
@@ -143,11 +144,13 @@ var DraggableElement = function DraggableElement(_ref) {
     className: (0, _classnames.default)({
       disabled: disabled
     }, "".concat(blockClass, "__draggable-handleStyle"))
-  }, /*#__PURE__*/React.createElement(_icons.Draggable, {
+  }, isSticky ? /*#__PURE__*/React.createElement(_icons.Locked, {
+    size: 16
+  }) : /*#__PURE__*/React.createElement(_icons.Draggable, {
     size: 16
   })), children);
   return /*#__PURE__*/React.createElement("li", {
-    className: (0, _classnames.default)((_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__draggable-handleHolder-isOver"), isOver && !disabled), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__draggable-handleHolder-grabbed"), isGrabbed), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__draggable-handleHolder-selected"), selected), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__draggable-handleHolder"), !selected), _cx)),
+    className: (0, _classnames.default)((_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__draggable-handleHolder-isOver"), isOver && !disabled), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__draggable-handleHolder-grabbed"), isGrabbed), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__draggable-handleHolder-selected"), selected), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__draggable-handleHolder--sticky"), isSticky), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__draggable-handleHolder"), !selected), _cx)),
     ref: ref,
     "aria-selected": isFocused,
     role: "option",
@@ -196,6 +199,7 @@ DraggableElement.propTypes = {
   id: _propTypes.default.string.isRequired,
   index: _propTypes.default.number.isRequired,
   isFocused: _propTypes.default.bool.isRequired,
+  isSticky: _propTypes.default.bool,
   listData: _propTypes.default.array.isRequired,
   moveElement: _propTypes.default.func.isRequired,
   onArrowKeyDown: _propTypes.default.func.isRequired,

package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js

@@ -124,10 +124,12 @@ var Columns = function Columns(_ref) {
     var res = filterString.length ? colDef.Header.props.title.toLowerCase().split(searchString) : null;
     var firstWord = res !== null ? res[0] === '' ? res[1].charAt(0).toUpperCase() + res[1].substring(1) : res[0].charAt(0).toUpperCase() + res[0].substring(1) : null;
     var highlightedText = res !== null ? res[0] === '' ? "<strong>".concat(firstWord, "</strong>") + res[2] : firstWord + "<strong>".concat(res[1], "</strong>") + res[2] : colDef.Header.props.title;
+    var isFrozenColumn = !!colDef.sticky;
 
     var listContents = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_react2.Checkbox, {
       className: (0, _classnames.default)("".concat(blockClass, "__customize-columns-checkbox-wrapper"), "".concat(blockClass, "__customize-columns-checkbox")),
       checked: (0, _common.isColumnVisible)(colDef),
+      disabled: isFrozenColumn,
       onChange: function onChange(_, _ref2) {
         var checked = _ref2.checked;
         return onSelectColumn(colDef, checked);
@@ -149,18 +151,21 @@ var Columns = function Columns(_ref) {
       setListData: setColumnsObject,
       id: "dnd-datagrid-columns-".concat(colDef.id),
       type: "column-customization",
-      disabled: filterString.length > 0,
+      disabled: filterString.length > 0 || isFrozenColumn,
       ariaLabel: colDef.Header.props.title,
       onGrab: setAriaRegionText,
       isFocused: focusIndex === i,
+      isSticky: isFrozenColumn,
       moveElement: moveElement,
       onArrowKeyDown: function onArrowKeyDown(e, isGrabbed, currentIndex) {
         if (isGrabbed) {
+          var _columns$nextIndex;
+
           var nextIndex = getNextIndex(columns, currentIndex, e.key);
           e.preventDefault();
           e.stopPropagation();
 
-          if (nextIndex >= 0) {
+          if (nextIndex >= 0 && !((_columns$nextIndex = columns[nextIndex]) !== null && _columns$nextIndex !== void 0 && _columns$nextIndex.sticky)) {
             setFocusIndex(nextIndex);
             moveElement(currentIndex, nextIndex);
             e.target.scrollIntoView({

package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.js

@@ -79,7 +79,7 @@ var CustomizeColumnsTearsheet = function CustomizeColumnsTearsheet(_ref) {
 
   var _useState7 = (0, _react.useState)(columnDefinitions // hide the columns without Header, e.g the sticky actions, spacer
   .filter(function (colDef) {
-    return !!colDef.Header.props;
+    return !!colDef.Header.props && !colDef.isAction;
   }) // only sort the hidden column to the end when modal reopen
   .sort(function (defA, defB) {
     var isVisibleA = (0, _common.isColumnVisible)(defA);

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

@@ -41,6 +41,7 @@ var defaults = {
     ImportModal: true,
     InlineEdit: true,
     InlineEditV1: true,
+    MultiAddSelect: true,
     NotificationsPanel: true,
     NoDataEmptyState: true,
     NoTagsEmptyState: true,
@@ -52,6 +53,7 @@ var defaults = {
     RemoveModal: true,
     Saving: true,
     SidePanel: true,
+    SingleAddSelect: true,
     StatusIcon: true,
     TagSet: true,
     Tearsheet: true,
@@ -62,8 +64,6 @@ var defaults = {
     WebTerminalContentWrapper: true,
     WebTerminalProvider: true,
     // other public components not yet reviewed and released:
-    MultiAddSelect: false,
-    SingleAddSelect: false,
     ModifiedTabs: false,
     Toolbar: false,
     ToolbarButton: false,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.0.0-rc.17",
+  "version": "2.0.0-rc.18",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -94,5 +94,5 @@
     "react": "^16.8.6 || ^17.0.1",
     "react-dom": "^16.8.6 || ^17.0.1"
   },
-  "gitHead": "021be71196091ea4e51acabe6718f8f680ba7604"
+  "gitHead": "2d00db04e59349f364cc19790a25abbe6760aad9"
 }

package/scss/components/Datagrid/styles/_draggableElement.scss

@@ -23,7 +23,7 @@
 }
 
 .#{variables.$block-class}__draggable-handleStyle.disabled svg {
-  fill: $icon-disabled;
+  fill: $icon-on-color-disabled;
 }
 
 .#{variables.$block-class}__draggable-handleHolder {
@@ -74,6 +74,10 @@
   color: $text-primary;
 }
 
+.#{variables.$block-class}__draggable-handleHolder--sticky {
+  color: $text-on-color-disabled;
+}
+
 .#{variables.$block-class}__shared-ui--assistive-text {
   // hide the assistive text. can not use display: none which will also hide from ARIA
   position: absolute;

package/scss/components/MultiAddSelect/_multi-add-select.scss

@@ -5,4 +5,4 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@use '../AddSelect/add-select';
+@use '../AddSelect/add-select' as *;

package/scss/components/SingleAddSelect/_single-add-select.scss

@@ -5,4 +5,4 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@use '../AddSelect/add-select';
+@use '../AddSelect/add-select' as *;

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

@@ -23,12 +23,14 @@
 @use './HTTPErrors/index-with-carbon' as *;
 @use './InlineEditV1/index-with-carbon' as *;
 @use './ImportModal/index-with-carbon' as *;
+@use './MultiAddSelect/index-with-carbon' as *;
 @use './NotificationsPanel/index-with-carbon' as *;
 @use './PageHeader/index-with-carbon' as *;
 @use './ProductiveCard/index-with-carbon' as *;
 @use './RemoveModal/index-with-carbon' as *;
 @use './Saving/index-with-carbon' as *;
 @use './SidePanel/index-with-carbon' as *;
+@use './SingleAddSelect/index-with-carbon' as *;
 @use './StatusIcon/index-with-carbon' as *;
 @use './TagSet/index-with-carbon' as *;
 @use './Tearsheet/index-with-carbon' as *;

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

@@ -23,12 +23,14 @@
 @use './HTTPErrors';
 @use './InlineEditV1';
 @use './ImportModal';
+@use './MultiAddSelect';
 @use './NotificationsPanel';
 @use './PageHeader';
 @use './ProductiveCard';
 @use './RemoveModal';
 @use './Saving';
 @use './SidePanel';
+@use './SingleAddSelect';
 @use './StatusIcon';
 @use './TagSet';
 @use './Tearsheet';