@carbon/ibm-products 2.29.0 → 2.30.0-alpha.11

package/lib/components/DataSpreadsheet/DataSpreadsheet.js

@@ -301,29 +301,121 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
     updateActiveCellCoordinates({
       coords: coordinatesClone,
       updatedValue: {
-        column: type === 'home' ? 0 : columns.length - 1
+        column: type === 'Home' ? 0 : columns.length - 1
       }
     });
     removeCellSelections.removeCellSelections({
       spreadsheetRef: spreadsheetRef
     });
   }, [activeCellCoordinates, updateActiveCellCoordinates, spreadsheetRef, columns.length]);
+  var checkforReturnConditon = React.useCallback(function (key) {
+    return isEditing || key === 'Meta' || key === 'Control';
+  }, [isEditing]);
+  var handleArrowkeyPress = React.useCallback(function (arrowKey) {
+    event.preventDefault();
+    handleInitialArrowPress();
+    var coordinatesClone = _rollupPluginBabelHelpers.objectSpread2({}, activeCellCoordinates);
+    var updatedValue;
+    switch (arrowKey) {
+      // Left
+      case 'ArrowLeft':
+        {
+          if (coordinatesClone.column === 'header') {
+            return;
+          }
+          if (typeof coordinatesClone.column === 'number') {
+            if (coordinatesClone.column === 0) {
+              updatedValue = {
+                column: 'header'
+              };
+            } else {
+              updatedValue = {
+                column: coordinatesClone.column - 1
+              };
+            }
+          }
+          break;
+        }
+      // Up
+      case 'ArrowUp':
+        {
+          if (coordinatesClone.row === 'header') {
+            return;
+          }
+          if (typeof coordinatesClone.row === 'number') {
+            // set row back to header if we are at index 0
+            if (coordinatesClone.row === 0) {
+              updatedValue = {
+                row: 'header'
+              };
+            } else {
+              // if we are at any other index than 0, subtract 1 from current row index
+              updatedValue = {
+                row: coordinatesClone.row - 1
+              };
+            }
+          }
+          break;
+        }
+      // Right
+      case 'ArrowRight':
+        {
+          if (coordinatesClone.column === 'header') {
+            updatedValue = {
+              column: 0
+            };
+          }
+          if (typeof coordinatesClone.column === 'number') {
+            // Prevent active cell coordinates from updating if the active
+            // cell is in the last column, ie we can't go any further to the right
+            if (columns.length - 1 === coordinatesClone.column) {
+              return;
+            } else {
+              updatedValue = {
+                column: coordinatesClone.column + 1
+              };
+            }
+          }
+          break;
+        }
+      // Down
+      case 'ArrowDown':
+        {
+          if (coordinatesClone.row === 'header') {
+            updatedValue = {
+              row: 0
+            };
+          }
+          if (typeof coordinatesClone.row === 'number') {
+            // Prevent active cell coordinates from updating if the active
+            // cell is in the last row, ie we can't go any further down since
+            // we are in the last row
+            if (rows.length - 1 === coordinatesClone.row) {
+              return;
+            } else {
+              updatedValue = {
+                row: coordinatesClone.row + 1
+              };
+            }
+          }
+          break;
+        }
+    }
+    if (updatedValue) {
+      updateActiveCellCoordinates({
+        coords: coordinatesClone,
+        updatedValue: updatedValue
+      });
+    }
+  }, [handleInitialArrowPress, updateActiveCellCoordinates, activeCellCoordinates, columns, rows]);
   var handleKeyPress = React.useCallback(function (event) {
     var key = event.key;
-    if (isEditing) {
-      return;
-    }
     // Command keys need to be returned as there is default browser behavior with these keys
-    if (key === 'Meta' || key === 'Control') {
-      return;
-    }
-    // Prevent arrow keys, home key, and end key from scrolling the page when the data spreadsheet container has focus
-    if (['End', 'Home', 'ArrowLeft', 'ArrowUp', 'ArrowRight', 'ArrowDown'].indexOf(key) > -1 && !isEditing) {
-      event.preventDefault();
-    }
-    if (['Tab'].indexOf(key) > -1 && isEditing) {
+    // Needs to be returned in editing mode
+    if (checkforReturnConditon(key)) {
       return;
     }
+
     // Clear out all cell selection areas if user uses any arrow key, except if the shift key is being held
     if (['ArrowLeft', 'ArrowUp', 'ArrowRight', 'ArrowDown'].indexOf(key) > -1) {
       if (selectionAreas !== null && selectionAreas !== void 0 && selectionAreas.length && keysPressedList.length < 2 && !handleMultipleKeys.includesShift(keysPressedList)) {
@@ -334,7 +426,7 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
         });
       }
     }
-    if (!isEditing && (keysPressedList === null || keysPressedList === void 0 ? void 0 : keysPressedList.length) > 1) {
+    if ((keysPressedList === null || keysPressedList === void 0 ? void 0 : keysPressedList.length) > 1) {
       handleMultipleKeys.handleMultipleKeys({
         activeCellCoordinates: activeCellCoordinates,
         event: event,
@@ -352,27 +444,24 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
         usingMac: usingMac
       });
     }
-    var deleteParams = {
-      selectionAreas: selectionAreas,
-      currentMatcher: currentMatcher,
-      rows: rows,
-      setActiveCellContent: setActiveCellContent,
-      updateData: updateData,
-      activeCellCoordinates: activeCellCoordinates
-    };
+
     // Allow arrow key navigation if there are less than two activeKeys OR
     // if one of the activeCellCoordinates is in a header position
+    // Prevent arrow keys, home key, and end key from scrolling the page when the data spreadsheet container has focus
+
     if (keysPressedList.length < 2 && !handleMultipleKeys.includesShift(keysPressedList) || activeCellCoordinates.row === 'header' || activeCellCoordinates.column === 'header') {
       switch (key) {
-        // Backspace
         case 'Backspace':
-          {
-            handleCellDeletion.handleCellDeletion(deleteParams);
-            break;
-          }
-        // Delete
         case 'Delete':
           {
+            var deleteParams = {
+              selectionAreas: selectionAreas,
+              currentMatcher: currentMatcher,
+              rows: rows,
+              setActiveCellContent: setActiveCellContent,
+              updateData: updateData,
+              activeCellCoordinates: activeCellCoordinates
+            };
             handleCellDeletion.handleCellDeletion(deleteParams);
             break;
           }
@@ -390,22 +479,14 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
           }
         // HOME
         case 'Home':
-          {
-            if (handleMultipleKeys.includesResourceKey(keysPressedList, usingMac)) {
-              return;
-            }
-            handleHomeEndKey({
-              type: 'home'
-            });
-            break;
-          }
         case 'End':
           {
+            event.preventDefault();
             if (handleMultipleKeys.includesResourceKey(keysPressedList, usingMac)) {
               return;
             }
             handleHomeEndKey({
-              type: 'end'
+              type: key
             });
             break;
           }
@@ -429,122 +510,16 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
             setActiveCellCoordinates(null);
             break;
           }
-        // Left
         case 'ArrowLeft':
-          {
-            handleInitialArrowPress();
-            var coordinatesClone = _rollupPluginBabelHelpers.objectSpread2({}, activeCellCoordinates);
-            if (coordinatesClone.column === 'header') {
-              return;
-            }
-            if (typeof coordinatesClone.column === 'number') {
-              if (coordinatesClone.column === 0) {
-                updateActiveCellCoordinates({
-                  coords: coordinatesClone,
-                  updatedValue: {
-                    column: 'header'
-                  }
-                });
-                return;
-              }
-              updateActiveCellCoordinates({
-                coords: coordinatesClone,
-                updatedValue: {
-                  column: coordinatesClone.column - 1
-                }
-              });
-            }
-            break;
-          }
-        // Up
         case 'ArrowUp':
-          {
-            handleInitialArrowPress();
-            var _coordinatesClone = _rollupPluginBabelHelpers.objectSpread2({}, activeCellCoordinates);
-            if (_coordinatesClone.row === 'header') {
-              return;
-            }
-            if (typeof _coordinatesClone.row === 'number') {
-              // set row back to header if we are at index 0
-              if (_coordinatesClone.row === 0) {
-                updateActiveCellCoordinates({
-                  coords: _coordinatesClone,
-                  updatedValue: {
-                    row: 'header'
-                  }
-                });
-                return;
-              }
-              // if we are at any other index than 0, subtract 1 from current row index
-              updateActiveCellCoordinates({
-                coords: _coordinatesClone,
-                updatedValue: {
-                  row: _coordinatesClone.row - 1
-                }
-              });
-            }
-            break;
-          }
-        // Right
         case 'ArrowRight':
-          {
-            handleInitialArrowPress();
-            var _coordinatesClone2 = _rollupPluginBabelHelpers.objectSpread2({}, activeCellCoordinates);
-            if (_coordinatesClone2.column === 'header') {
-              updateActiveCellCoordinates({
-                coords: _coordinatesClone2,
-                updatedValue: {
-                  column: 0
-                }
-              });
-            }
-            if (typeof _coordinatesClone2.column === 'number') {
-              // Prevent active cell coordinates from updating if the active
-              // cell is in the last column, ie we can't go any further to the right
-              if (columns.length - 1 === _coordinatesClone2.column) {
-                return;
-              }
-              updateActiveCellCoordinates({
-                coords: _coordinatesClone2,
-                updatedValue: {
-                  column: _coordinatesClone2.column + 1
-                }
-              });
-            }
-            break;
-          }
-        // Down
         case 'ArrowDown':
           {
-            handleInitialArrowPress();
-            var _coordinatesClone3 = _rollupPluginBabelHelpers.objectSpread2({}, activeCellCoordinates);
-            if (_coordinatesClone3.row === 'header') {
-              updateActiveCellCoordinates({
-                coords: _coordinatesClone3,
-                updatedValue: {
-                  row: 0
-                }
-              });
-            }
-            if (typeof _coordinatesClone3.row === 'number') {
-              // Prevent active cell coordinates from updating if the active
-              // cell is in the last row, ie we can't go any further down since
-              // we are in the last row
-              if (rows.length - 1 === _coordinatesClone3.row) {
-                return;
-              }
-              updateActiveCellCoordinates({
-                coords: _coordinatesClone3,
-                updatedValue: {
-                  row: _coordinatesClone3.row + 1
-                }
-              });
-            }
-            break;
+            handleArrowkeyPress(key);
           }
       }
     }
-  }, [activeCellInsideSelectionArea, updateActiveCellCoordinates, handleInitialArrowPress, activeCellCoordinates, removeActiveCell, columns, rows, spreadsheetRef, currentMatcher, isEditing, removeCellEditor, selectionAreas, handleHomeEndKey, keysPressedList, usingMac, updateData]);
+  }, [activeCellInsideSelectionArea, updateActiveCellCoordinates, activeCellCoordinates, removeActiveCell, columns, rows, spreadsheetRef, currentMatcher, removeCellEditor, selectionAreas, handleHomeEndKey, keysPressedList, usingMac, updateData, checkforReturnConditon, handleArrowkeyPress]);
   var startEditMode = function startEditMode() {
     setIsEditing(true);
     setClickAndHoldActive(false);

package/lib/components/Datagrid/Datagrid/DatagridRow.js

@@ -162,7 +162,7 @@ var DatagridRow = function DatagridRow(datagridState) {
       return h.id === cell.column.id;
     });
     return /*#__PURE__*/React__default["default"].createElement(react.TableCell, _rollupPluginBabelHelpers["extends"]({
-      className: cx__default["default"]("".concat(blockClass, "__cell"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__expandable-row-cell"), row.canExpand && index === 0), "".concat(blockClass, "__slug--cell"), associatedHeader && associatedHeader.length && /*#__PURE__*/React.isValidElement((_associatedHeader$ = associatedHeader[0]) === null || _associatedHeader$ === void 0 ? void 0 : _associatedHeader$.slug)))
+      className: cx__default["default"]("".concat(blockClass, "__cell"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__expandable-row-cell"), row.canExpand && index === 0), "".concat(blockClass, "__expandable-row-cell--is-expanded"), row.isExpanded && index === 0), "".concat(blockClass, "__slug--cell"), associatedHeader && associatedHeader.length && /*#__PURE__*/React.isValidElement((_associatedHeader$ = associatedHeader[0]) === null || _associatedHeader$ === void 0 ? void 0 : _associatedHeader$.slug)))
     }, restProps, {
       key: cell.column.id,
       title: title

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

@@ -16,9 +16,10 @@ var react = require('@carbon/react');
 var common = require('./common.js');
 var DraggableElement = require('../../DraggableElement.js');
 var settings = require('../../../../../settings.js');
+var getNodeTextContent = require('../../../../../global/js/utils/getNodeTextContent.js');
 var core = require('@dnd-kit/core');
 var sortable = require('@dnd-kit/sortable');
-var getNodeTextContent = require('../../../../../global/js/utils/getNodeTextContent.js');
+var modifiers = require('@dnd-kit/modifiers');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -152,7 +153,8 @@ var DraggableItemsList = function DraggableItemsList(_ref) {
     onDragEnd: handleDragEnd,
     onDragStart: handleDragStart,
     onDragMove: handleDragUpdate,
-    sensors: sensors
+    sensors: sensors,
+    modifiers: [modifiers.restrictToParentElement, modifiers.restrictToVerticalAxis]
   }, /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(blockClass, "__draggable-underlay"),
     "aria-hidden": "true",

package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js

@@ -411,9 +411,12 @@ var useFilters = function useFilters(_ref) {
         });
         return updatedFilters[0];
       };
-      setFiltersObjectArray(savedFilters);
-      var filterStateCopy = cleanFilters(filtersState);
-      setFiltersState(filterStateCopy);
+      if (savedFilters && savedFilters.length) {
+        var _cleanFilters;
+        setFiltersObjectArray(savedFilters);
+        var filterStateCopy = (_cleanFilters = cleanFilters(filtersState)) !== null && _cleanFilters !== void 0 ? _cleanFilters : [];
+        setFiltersState(filterStateCopy);
+      }
     }
     if (!isFetching) {
       setFetchingReset(false);

package/lib/components/Datagrid/useActionsColumn.js

@@ -21,7 +21,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _excluded = ["align", "id", "itemText", "onClick", "icon", "shouldHideMenuItem"],
+var _excluded = ["align", "id", "itemText", "onClick", "icon", "shouldHideMenuItem", "shouldDisableMenuItem", "disabled"],
   _excluded2 = ["id", "onClick", "shouldHideMenuItem", "shouldDisableMenuItem", "disabled"];
 var blockClass = "".concat(settings.pkg.prefix, "--datagrid");
 var useActionsColumn = function useActionsColumn(hooks) {
@@ -63,8 +63,11 @@ var useActionsColumn = function useActionsColumn(hooks) {
                 _onClick = preparedActionProps.onClick,
                 icon = preparedActionProps.icon,
                 shouldHideMenuItem = preparedActionProps.shouldHideMenuItem,
+                shouldDisableMenuItem = preparedActionProps.shouldDisableMenuItem,
+                disabled = preparedActionProps.disabled,
                 rest = _rollupPluginBabelHelpers.objectWithoutProperties(preparedActionProps, _excluded);
               var hidden = typeof shouldHideMenuItem === 'function' && shouldHideMenuItem(row);
+              var isDisabledByRow = typeof shouldDisableMenuItem === 'function' ? shouldDisableMenuItem(row) : disabled;
               if (hidden) {
                 return null;
               }
@@ -86,7 +89,8 @@ var useActionsColumn = function useActionsColumn(hooks) {
                   }
                   e.stopPropagation();
                   _onClick(id, row, e);
-                }
+                },
+                disabled: isDisabledByRow
               }), /*#__PURE__*/React__default["default"].createElement(Icon, null)));
             })), !isFetching && (rowActions.length > 2 || isColumnSticky) && /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(react.OverflowMenu, {
               align: "left",

package/lib/components/Toolbar/ToolbarButton.d.ts

@@ -1,4 +1,25 @@
-export const blockClass: string;
-/** Toolbar buttons are common functions performed as part of a products interface or an open window.  */
-export let ToolbarButton: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+/**
+ * Copyright IBM Corp. 2021, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/// <reference path="../../../src/custom-typings/index.d.ts" />
+import { IconButton } from '@carbon/react';
 import React from 'react';
+export declare const blockClass: string;
+interface ToolbarButtonProps extends React.ComponentProps<typeof IconButton> {
+    /** Determines whether the caret is rendered */
+    caret?: boolean;
+    /** Provide an optional class to be applied to the containing node */
+    className?: string;
+    /** Specifies the label for the icon button */
+    iconDescription: string;
+    /** Specifies the icon to be used by the ToolbarButton component */
+    renderIcon: React.ElementType;
+}
+/** Toolbar buttons are common functions performed as part of a products interface or an open window.  */
+export declare let ToolbarButton: React.ForwardRefExoticComponent<ToolbarButtonProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<unknown>>;
+export {};

package/lib/components/Toolbar/ToolbarButton.js

@@ -24,11 +24,11 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var _excluded = ["caret", "children", "className", "renderIcon", "iconDescription"];
 var blockClass = "".concat(Toolbar.blockClass, "__button");
-
 /** Toolbar buttons are common functions performed as part of a products interface or an open window.  */
 exports.ToolbarButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _useContext;
-  var caret = _ref.caret,
+  var _ref$caret = _ref.caret,
+    caret = _ref$caret === void 0 ? false : _ref$caret,
     children = _ref.children,
     className = _ref.className,
     renderIcon = _ref.renderIcon,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.29.0",
+  "version": "2.30.0-alpha.11+d4b18eedf",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -93,6 +93,7 @@
     "@carbon/ibm-products-styles": "^2.28.0",
     "@carbon/telemetry": "^0.1.0",
     "@dnd-kit/core": "^6.0.8",
+    "@dnd-kit/modifiers": "^7.0.0",
     "@dnd-kit/sortable": "^8.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@ibm/telemetry-js": "^1.2.0",
@@ -107,11 +108,11 @@
     "@carbon/grid": "^11.21.1",
     "@carbon/layout": "^11.20.1",
     "@carbon/motion": "^11.16.1",
-    "@carbon/react": "^1.51.0",
+    "@carbon/react": "^1.51.1",
     "@carbon/themes": "^11.32.0",
     "@carbon/type": "^11.25.1",
     "react": "^16.8.6 || ^17.0.1 || ^18.2.0",
     "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
   },
-  "gitHead": "b42dcb92fc964b2cbc0f93891937da118da01f60"
+  "gitHead": "d4b18eedf920c19fdba0b230a2e30638a346a3f6"
 }

package/scss/components/AboutModal/_about-modal.scss

@@ -41,9 +41,14 @@ $block-class: #{c4p-settings.$pkg-prefix}--about-modal;
 
   overflow: hidden auto;
   min-height: $spacing-10;
-  padding: 0 20% 0 $spacing-05;
-  margin-bottom: $spacing-06;
   grid-row: auto;
+  padding-block-start: 0;
+  padding-inline: $spacing-05 20%;
+
+  &:not(.#{c4p-settings.$carbon-prefix}--modal-scroll-content) {
+    margin-bottom: $spacing-06;
+    padding-block-end: 0;
+  }
 }
 
 .#{$block-class}

package/scss/components/Datagrid/styles/_useExpandedRow.scss

@@ -69,6 +69,7 @@
 .#{variables.$block-class}
   .#{variables.$block-class}__expandable-row--hover
   td {
+  border-top: none;
   background: $layer-hover;
 }
 
@@ -87,6 +88,13 @@
   border: none;
 }
 
+.#{variables.$block-class}
+  .#{c4p-settings.$carbon-prefix}--data-table
+  .#{variables.$block-class}__carbon-row-expanded:hover
+  td:not(.#{variables.$block-class}__expandable-row-cell) {
+  border-bottom: 1px solid $border-subtle-02;
+}
+
 .#{variables.$block-class}
   .#{c4p-settings.$carbon-prefix}--data-table
   td.#{variables.$block-class}__expanded-row-cell-wrapper {

package/scss/components/Datagrid/styles/_useNestedRows.scss

@@ -64,6 +64,60 @@
   padding-left: $spacing-03;
 }
 
+.#{c4p-settings.$carbon-prefix}--data-table
+  td.#{$block-class}__expandable-row-cell
+  + td,
+.#{c4p-settings.$carbon-prefix}--data-table
+  .#{$block-class}__carbon-nested-row:not(
+    .#{$block-class}__carbon-row-expandable
+  )
+  td.#{$block-class}__cell:nth-of-type(2) {
+  position: relative;
+}
+
+.#{c4p-settings.$carbon-prefix}--data-table
+  td.#{$block-class}__expandable-row-cell.#{$block-class}__expandable-row-cell--is-expanded
+  + td::before,
+.#{c4p-settings.$carbon-prefix}--data-table
+  .#{$block-class}__carbon-nested-row:not(
+    .#{$block-class}__carbon-row-expandable
+  )
+  td.#{$block-class}__cell:nth-of-type(2)::before,
+.#{c4p-settings.$carbon-prefix}--data-table
+  .#{$block-class}__carbon-nested-row
+  td.#{$block-class}__expandable-row-cell
+  + td::before {
+  position: absolute;
+  /* stylelint-disable-next-line carbon/layout-token-use */
+  bottom: -1px;
+  left: 0;
+  width: 1rem;
+  height: 1px;
+  background-color: $layer-01;
+  content: '';
+  transition: background-color $duration-fast-01 motion(entrance, productive);
+}
+
+.#{c4p-settings.$carbon-prefix}--data-table
+  tr:hover
+  td.#{$block-class}__expandable-row-cell.#{$block-class}__expandable-row-cell--is-expanded
+  + td::before,
+.#{c4p-settings.$carbon-prefix}--data-table
+  .#{$block-class}__carbon-nested-row:hover
+  td.#{$block-class}__expandable-row-cell
+  + td::before,
+.#{c4p-settings.$carbon-prefix}--data-table
+  .#{$block-class}__expandable-row--hover
+  td.#{$block-class}__expandable-row-cell
+  + td::before,
+.#{c4p-settings.$carbon-prefix}--data-table
+  .#{$block-class}__carbon-nested-row:hover:not(
+    .#{$block-class}__carbon-row-expandable
+  )
+  td.#{$block-class}__cell:nth-of-type(2)::before {
+  background-color: $layer-hover;
+}
+
 .#{$block-class}__carbon-row-expanded {
   .#{$block-class}__expandable-row-cell {
     border-bottom: none;

package/scss/components/Datagrid/styles/_useStickyColumn.scss

@@ -41,6 +41,11 @@
   position: sticky !important;
   z-index: 1;
   left: 0;
+  border-right: 1px solid $layer-active-02;
+}
+
+.#{variables.$block-class}__right-sticky-column-header {
+  border-left: 1px solid $layer-active-02;
 }
 
 .#{variables.$block-class}__left-sticky-column-cell.#{variables.$block-class}__left-sticky-column-cell--with-extra-select-column,

package/scss/components/Datagrid/styles/addons/_FilterPanel.scss

@@ -41,7 +41,7 @@
   position: relative;
   z-index: 0;
   overflow: auto;
-  padding: 0 $spacing-05;
+  padding: 0 $spacing-05 $spacing-10 $spacing-05;
   overscroll-behavior: contain;
 }
 

package/scss/components/TagSet/_tag-set.scss

@@ -146,6 +146,7 @@ $block-class-modal: #{$_block-class}-modal;
 
   .#{$block-class-overflow}__show-all-tags-link {
     margin-top: $spacing-03;
+    color: $link-inverse;
   }
 
   .#{$block-class-overflow}__tag-item.#{$block-class-overflow}__tag-item--tag