@carbon/ibm-products 1.43.0 → 1.44.0

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

@@ -42,6 +42,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,
@@ -121,9 +122,9 @@ var DraggableElement = function DraggableElement(_ref) {
     className: (0, _classnames.default)({
       disabled: disabled
     }, "".concat(blockClass, "__draggable-handleStyle"))
-  }, /*#__PURE__*/React.createElement(_iconsReact.Draggable16, null)), children);
+  }, isSticky ? /*#__PURE__*/React.createElement(_iconsReact.Locked16, null) : /*#__PURE__*/React.createElement(_iconsReact.Draggable16, null)), 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",
@@ -171,6 +172,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

@@ -101,9 +101,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.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Checkbox, {
       wrapperClassName: "".concat(blockClass, "__customize-columns-checkbox-wrapper"),
       checked: (0, _common.isColumnVisible)(colDef),
+      disabled: isFrozenColumn,
       onChange: onSelectColumn.bind(null, colDef),
       id: "".concat(blockClass, "__customization-column-").concat(colDef.id),
       labelText: colDef.Header.props.title,
@@ -122,17 +124,18 @@ 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,
       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({
@@ -141,6 +144,7 @@ var Columns = function Columns(_ref) {
           }
         }
       },
+      isSticky: isFrozenColumn,
       selected: (0, _common.isColumnVisible)(colDef)
     }, listContents);
   }))));

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

@@ -59,7 +59,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) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "1.43.0",
+  "version": "1.44.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -95,5 +95,5 @@
     "react": "^16.8.6 || ^17.0.1",
     "react-dom": "^16.8.6 || ^17.0.1"
   },
-  "gitHead": "5227b2c4f26128f471144febc117c9e8cb607c7a"
+  "gitHead": "7a190362168c0c36b5d34269e75adb9c122286a6"
 }

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

@@ -70,6 +70,10 @@
   color: $text-01;
 }
 
+.#{$block-class}__draggable-handleHolder--sticky {
+  color: $disabled-03;
+}
+
 .#{$block-class}__shared-ui--assistive-text {
   // hide the assistive text. can not use display: none which will also hide from ARIA
   position: absolute;