@carbon/ibm-products 1.56.0 → 1.57.0

package/lib/components/Datagrid/Datagrid/DatagridHeaderRow.js

@@ -1,19 +1,26 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = _interopRequireDefault(require("react"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _carbonComponentsReact = require("carbon-components-react");
+var _layout = require("@carbon/layout");
 var _commonColumnIds = require("../common-column-ids");
 var _settings = require("../../../settings");
+var _stateReducer = require("./addons/stateReducer");
+var _getColTitle = _interopRequireDefault(require("../utils/getColTitle"));
+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; }
 /**
- * Copyright IBM Corp. 2020, 2022
+ * Copyright IBM Corp. 2020, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -22,16 +29,86 @@ var _settings = require("../../../settings");
 // @flow
 
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
+var getAccessibilityProps = function getAccessibilityProps(header) {
+  var props = {};
+  var title = (0, _getColTitle.default)(header);
+  if (title) {
+    props.title = title;
+  } else {
+    props['aria-hidden'] = true;
+  }
+  return props;
+};
 var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
+  // Used to measure the height of the table and uses that value
+  // to display a vertical line to indicate the column you are resizing
+  (0, _react.useEffect)(function () {
+    var tableId = datagridState.tableId;
+    if (tableId) {
+      var gridElement = document.querySelector("#".concat(tableId));
+      var tableElement = gridElement.querySelector('table');
+      var headerRowElement = document.querySelector("#".concat(tableId, " .").concat(blockClass, "__head"));
+      var hasHorizontalScrollbar = tableElement.scrollWidth > tableElement.clientWidth;
+      var scrollBuffer = hasHorizontalScrollbar ? 18 : 2;
+      var tableToolbar = gridElement.querySelector(".".concat(blockClass, "__table-toolbar"));
+      var tableToolbarHeight = (tableToolbar === null || tableToolbar === void 0 ? void 0 : tableToolbar.offsetHeight) || 0;
+      var setCustomValues = function setCustomValues(_ref) {
+        var _ref$rowHeight = _ref.rowHeight,
+          rowHeight = _ref$rowHeight === void 0 ? 48 : _ref$rowHeight,
+          gridHeight = _ref.gridHeight;
+        headerRowElement.style.setProperty("--".concat(blockClass, "--row-height"), (0, _layout.px)(rowHeight));
+        headerRowElement.style.setProperty("--".concat(blockClass, "--grid-height"), (0, _layout.px)(gridHeight - scrollBuffer - tableToolbarHeight));
+      };
+      setCustomValues({
+        gridHeight: gridElement.offsetHeight,
+        rowHeight: headerRowElement.clientHeight
+      });
+    }
+  }, [datagridState.rowSize, datagridState.tableId, datagridState]);
+  var _useState = (0, _react.useState)(2),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 1),
+    incrementAmount = _useState2[0];
+  var getClientXPosition = function getClientXPosition(event) {
+    var isTouchEvent = false;
+    if (event.type === 'touchstart') {
+      // Do not respond to multiple touches (e.g. 2 or 3 fingers)
+      if (event.touches && event.touches.length > 1) {
+        return;
+      }
+      isTouchEvent = true;
+    }
+    var clientX = isTouchEvent ? Math.round(event.touches[0].clientX) : event.clientX;
+    var closestHeader = event.target.closest('th');
+    var closestHeaderCoords = closestHeader.getBoundingClientRect();
+    var headerOffset = closestHeaderCoords.left;
+    var offsetValue = clientX - headerOffset;
+    return offsetValue;
+  };
+  (0, _react.useEffect)(function () {
+    var isResizing = datagridState.state.isResizing;
+    if (isResizing) {
+      var onColResizeEnd = datagridState.onColResizeEnd;
+      document.addEventListener('mouseup', function () {
+        (0, _stateReducer.handleColumnResizeEndEvent)(datagridState.dispatch, onColResizeEnd, isResizing);
+        document.activeElement.blur();
+      });
+    }
+    return function () {
+      document.removeEventListener('mouseup', function () {
+        return (0, _stateReducer.handleColumnResizeEndEvent)(datagridState.dispatch);
+      });
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [datagridState.state.isResizing]);
   return /*#__PURE__*/_react.default.createElement(TableRow, (0, _extends2.default)({}, headerGroup.getHeaderGroupProps({
     role: false
   }), {
     className: (0, _classnames.default)("".concat(blockClass, "__head"), headerGroup.getHeaderGroupProps().className),
     ref: headRef
-  }), datagridState.headers.filter(function (_ref) {
-    var isVisible = _ref.isVisible;
+  }), datagridState.headers.filter(function (_ref2) {
+    var isVisible = _ref2.isVisible;
     return isVisible;
-  }).map(function (header) {
+  }).map(function (header, index) {
     var _cx;
     if (header.id === _commonColumnIds.selectionColumnId) {
       // render directly without the wrapper TableHeader
@@ -39,13 +116,59 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
         key: header.id
       });
     }
+    var _ref3 = header || 50,
+      minWidth = _ref3.minWidth;
+    var visibleColumns = datagridState.visibleColumns,
+      state = datagridState.state,
+      dispatch = datagridState.dispatch,
+      onColResizeEnd = datagridState.onColResizeEnd;
+    var columnResizing = state.columnResizing,
+      isResizing = state.isResizing;
+    var columnWidths = columnResizing.columnWidths;
+    var originalCol = visibleColumns[index];
     return /*#__PURE__*/_react.default.createElement(TableHeader, (0, _extends2.default)({}, header.getHeaderProps({
       role: false
     }), {
       className: (0, _classnames.default)((_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__resizableColumn"), header.getResizerProps), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__isResizing"), header.isResizing), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__sortableColumn"), datagridState.isTableSortable), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__isSorted"), header.isSorted), _cx), header.getHeaderProps().className),
       key: header.id
-    }), header.render('Header'), header.getResizerProps && /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, header.getResizerProps(), {
-      className: "".concat(blockClass, "__resizer")
+    }, getAccessibilityProps(header)), header.render('Header'), header.getResizerProps && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({}, header.getResizerProps(), {
+      onMouseMove: function onMouseMove(event) {
+        if (isResizing) {
+          var newWidth = getClientXPosition(event);
+          // Sets a min width for resizing so at least one character from the column header is visible
+          if (newWidth >= 50) {
+            (0, _stateReducer.handleColumnResizingEvent)(dispatch, header, newWidth);
+          }
+        }
+      },
+      onMouseDown: function onMouseDown() {
+        return (0, _stateReducer.handleColumnResizeStartEvent)(dispatch, header.id);
+      },
+      onKeyDown: function onKeyDown(event) {
+        var key = event.key;
+        if (key === 'ArrowLeft' || key === 'ArrowRight') {
+          var currentColumnWidth = columnWidths[header.id] || (datagridState.isTableSortable && originalCol.width < 90 ? 90 : originalCol.width);
+          if (key === 'ArrowLeft') {
+            if (currentColumnWidth - incrementAmount > Math.max(minWidth, 50)) {
+              var newWidth = currentColumnWidth - incrementAmount;
+              (0, _stateReducer.handleColumnResizingEvent)(dispatch, header, newWidth, true);
+            }
+          }
+          if (key === 'ArrowRight') {
+            var _newWidth = currentColumnWidth + incrementAmount;
+            (0, _stateReducer.handleColumnResizingEvent)(dispatch, header, _newWidth, true);
+          }
+        }
+      },
+      onKeyUp: function onKeyUp() {
+        return (0, _stateReducer.handleColumnResizeEndEvent)(dispatch, onColResizeEnd, header.id);
+      },
+      className: (0, _classnames.default)("".concat(blockClass, "__col-resizer-range")),
+      type: "range",
+      defaultValue: originalCol.width,
+      "aria-label": "Resize column"
+    })), /*#__PURE__*/_react.default.createElement("span", {
+      className: "".concat(blockClass, "__col-resize-indicator")
     })));
   }));
 };

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

@@ -11,6 +11,7 @@ var _carbonComponentsReact = require("carbon-components-react");
 var _common = require("./common");
 var _DraggableElement = _interopRequireDefault(require("../../DraggableElement"));
 var _settings = require("../../../../../settings");
+var _getColTitle2 = _interopRequireDefault(require("../../../utils/getColTitle"));
 /**
  * Copyright IBM Corp. 2023, 2023
  *
@@ -29,40 +30,17 @@ var DraggableItemsList = function DraggableItemsList(_ref) {
     setAriaRegionText = _ref.setAriaRegionText,
     setColumnsObject = _ref.setColumnsObject,
     setFocusIndex = _ref.setFocusIndex;
-  // This function recursively looks for the nested header element until we can find the key which contains the title.
-  // This can happen if multiple hooks are used together that manipulate the rendering of the column
-  // header, such as `useColumnCenterAlign` and `useSortableColumns`.
-  var getNestedTitle = function getNestedTitle(component) {
-    if (component && !component.key) {
-      return getNestedTitle(component.children);
-    }
-    if (component && component.key && typeof component.key === 'string') {
-      return component.key;
-    }
-  };
-  var getColTitle = function getColTitle(col) {
-    if (!col) {
-      return;
-    }
-    var checkTitle = function checkTitle() {
-      if (col.Header().props.children.props && col.Header().props.children.props.title) {
-        return col.Header().props.children.props.title;
-      }
-      return getNestedTitle(col.Header().props.children.props);
-    };
-    return typeof (col === null || col === void 0 ? void 0 : col.Header) === 'function' ? checkTitle() : col.Header.props.title;
-  };
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, columns
   // hide the columns without Header, e.g the sticky actions, spacer
   .filter(function (colDef) {
-    return !!getColTitle(colDef);
+    return !!(0, _getColTitle2.default)(colDef);
   }).filter(Boolean).filter(function (colDef) {
     return !colDef.isAction;
   }).filter(function (colDef) {
     var _getColTitle;
-    return filterString.length === 0 || ((_getColTitle = getColTitle(colDef)) === null || _getColTitle === void 0 ? void 0 : _getColTitle.toLowerCase().includes(filterString)) && colDef.id !== 'spacer';
+    return filterString.length === 0 || ((_getColTitle = (0, _getColTitle2.default)(colDef)) === null || _getColTitle === void 0 ? void 0 : _getColTitle.toLowerCase().includes(filterString)) && colDef.id !== 'spacer';
   }).map(function (colDef, i) {
-    var colHeaderTitle = getColTitle(colDef);
+    var colHeaderTitle = (0, _getColTitle2.default)(colDef);
     var searchString = new RegExp('(' + filterString + ')');
     var res = filterString.length ? colHeaderTitle.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;

package/lib/components/Datagrid/Datagrid/addons/stateReducer.js

@@ -0,0 +1,122 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.stateReducer = exports.handleColumnResizingEvent = exports.handleColumnResizeStartEvent = exports.handleColumnResizeEndEvent = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+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; }
+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; }
+/**
+ * Copyright IBM Corp. 2023, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var COLUMN_RESIZE_START = 'columnStartResizing';
+var COLUMN_RESIZING = 'columnResizing';
+var COLUMN_RESIZE_END = 'columnDoneResizing';
+var INIT = 'init';
+var handleColumnResizeStartEvent = function handleColumnResizeStartEvent(dispatch, headerId) {
+  dispatch({
+    type: COLUMN_RESIZE_START,
+    payload: {
+      headerId: headerId
+    }
+  });
+};
+exports.handleColumnResizeStartEvent = handleColumnResizeStartEvent;
+var handleColumnResizeEndEvent = function handleColumnResizeEndEvent(dispatch, onColResizeEnd, headerId) {
+  dispatch({
+    type: COLUMN_RESIZE_END,
+    payload: {
+      onColResizeEnd: onColResizeEnd,
+      headerId: headerId
+    }
+  });
+};
+exports.handleColumnResizeEndEvent = handleColumnResizeEndEvent;
+var handleColumnResizingEvent = function handleColumnResizingEvent(dispatch, header, newWidth, isKeyEvent) {
+  if (isKeyEvent) {
+    dispatch({
+      type: COLUMN_RESIZE_START,
+      payload: {
+        newWidth: newWidth,
+        headerId: header.id,
+        defaultWidth: header.originalWidth
+      }
+    });
+  }
+  dispatch({
+    type: COLUMN_RESIZING,
+    payload: {
+      newWidth: newWidth,
+      headerId: header.id,
+      defaultWidth: header.originalWidth
+    }
+  });
+};
+exports.handleColumnResizingEvent = handleColumnResizingEvent;
+var stateReducer = function stateReducer(newState, action) {
+  switch (action.type) {
+    case INIT:
+      {
+        return _objectSpread(_objectSpread({}, newState), {}, {
+          isResizing: false
+        });
+      }
+    case COLUMN_RESIZE_START:
+      {
+        var headerId = action.payload.headerId;
+        return _objectSpread(_objectSpread({}, newState), {}, {
+          isResizing: headerId
+        });
+      }
+    case COLUMN_RESIZING:
+      {
+        var _ref = action.payload || {},
+          _headerId = _ref.headerId,
+          newWidth = _ref.newWidth,
+          defaultWidth = _ref.defaultWidth;
+        var newColumnWidth = {};
+        if (typeof _headerId === 'undefined') {
+          return _objectSpread({}, newState);
+        }
+        newColumnWidth[_headerId] = newWidth;
+        var cleanedWidths = Object.fromEntries(Object.entries(newState.columnResizing.columnWidths).filter(function (_ref2) {
+          var _ref3 = (0, _slicedToArray2.default)(_ref2, 2),
+            _ = _ref3[0],
+            value = _ref3[1];
+          return !isNaN(value);
+        }));
+        return _objectSpread(_objectSpread({}, newState), {}, {
+          isResizing: _headerId,
+          columnResizing: _objectSpread(_objectSpread({}, newState.columnResizing), {}, {
+            columnWidth: defaultWidth,
+            columnWidths: _objectSpread(_objectSpread({}, cleanedWidths), newColumnWidth),
+            headerIdWidths: [_headerId, newWidth]
+          })
+        });
+      }
+    case COLUMN_RESIZE_END:
+      {
+        var _action$payload = action.payload,
+          onColResizeEnd = _action$payload.onColResizeEnd,
+          _headerId2 = _action$payload.headerId;
+        var currentColumn = {};
+        currentColumn[_headerId2] = newState.columnResizing.columnWidths[_headerId2];
+        var allChangedColumns = newState.columnResizing.columnWidths;
+        var isResizing = newState.isResizing;
+        if (isResizing) {
+          onColResizeEnd === null || onColResizeEnd === void 0 ? void 0 : onColResizeEnd(currentColumn, allChangedColumns);
+        }
+        return _objectSpread(_objectSpread({}, newState), {}, {
+          isResizing: false
+        });
+      }
+  }
+};
+exports.stateReducer = stateReducer;

package/lib/components/Datagrid/useDatagrid.js

@@ -17,6 +17,7 @@ var _useRowSize = _interopRequireDefault(require("./useRowSize"));
 var _DatagridHeaderRow = _interopRequireDefault(require("./Datagrid/DatagridHeaderRow"));
 var _useFlexResize = _interopRequireDefault(require("./useFlexResize"));
 var _useFloatingScroll = _interopRequireDefault(require("./useFloatingScroll"));
+var _stateReducer = require("./Datagrid/addons/stateReducer");
 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; }
 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 useDatagrid = function useDatagrid(params) {
@@ -29,9 +30,11 @@ var useDatagrid = function useDatagrid(params) {
   for (var _len = arguments.length, plugins = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
     plugins[_key - 1] = arguments[_key];
   }
-  var tableState = _reactTable.useTable.apply(void 0, [_objectSpread({
+  var tableState = _reactTable.useTable.apply(void 0, [_objectSpread(_objectSpread({
     tableId: tableId
-  }, params)].concat(defaultPlugins, plugins, defaultEndPlugins, (0, _toConsumableArray2.default)(clientEndPlugins)));
+  }, params), {}, {
+    stateReducer: _stateReducer.stateReducer
+  })].concat(defaultPlugins, plugins, defaultEndPlugins, (0, _toConsumableArray2.default)(clientEndPlugins)));
   return tableState;
 };
 var _default = useDatagrid;

package/lib/components/Datagrid/utils/getColTitle.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+// This function recursively looks for the nested header element until we can find the key which contains the title.
+// This can happen if multiple hooks are used together that manipulate the rendering of the column
+// header, such as `useColumnCenterAlign` and `useSortableColumns`.
+var getNestedTitle = function getNestedTitle(component) {
+  if (component && !component.key) {
+    return getNestedTitle(component.children);
+  }
+  if (component && component.key && typeof component.key === 'string') {
+    return component.key;
+  }
+};
+var getColTitle = function getColTitle(col) {
+  var _col$Header, _col$Header$props;
+  if (!col) {
+    return;
+  }
+  var checkTitle = function checkTitle() {
+    if (col.Header().props.children.props && col.Header().props.children.props.title) {
+      return col.Header().props.children.props.title;
+    }
+    return getNestedTitle(col.Header().props.children.props);
+  };
+  return typeof (col === null || col === void 0 ? void 0 : col.Header) === 'function' ? checkTitle() : col === null || col === void 0 ? void 0 : (_col$Header = col.Header) === null || _col$Header === void 0 ? void 0 : (_col$Header$props = _col$Header.props) === null || _col$Header$props === void 0 ? void 0 : _col$Header$props.title;
+};
+var _default = getColTitle;
+exports.default = _default;

package/lib/global/js/hooks/useResizeObserver.js

@@ -15,22 +15,38 @@ var _react = require("react");
  */
 
 var useResizeObserver = function useResizeObserver(ref, callback) {
-  var _useState = (0, _react.useState)(0),
+  var _useState = (0, _react.useState)(-1),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     width = _useState2[0],
     setWidth = _useState2[1];
-  var _useState3 = (0, _react.useState)(0),
+  var _useState3 = (0, _react.useState)(-1),
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     height = _useState4[0],
     setHeight = _useState4[1];
   var entriesToHandle = (0, _react.useRef)(null);
   var cb = (0, _react.useRef)(callback);
   (0, _react.useEffect)(function () {
-    // ref for callback removes it as dependency fro useLayoutEffect
+    // ref for callback removes it as dependency from useLayoutEffect
     // This significantly reduces repeated calls if a function is redefined on every
     // render
     cb.current = callback;
   }, [callback]);
+  (0, _react.useEffect)(function () {
+    var getInitialSize = function getInitialSize() {
+      if (ref.current) {
+        var _ref$current, _ref$current2;
+        var refComputedStyle = window.getComputedStyle(ref.current);
+        var initialWidth = (((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.offsetWidth) || 0) - (parseFloat((refComputedStyle === null || refComputedStyle === void 0 ? void 0 : refComputedStyle.paddingLeft) || 0), parseFloat((refComputedStyle === null || refComputedStyle === void 0 ? void 0 : refComputedStyle.paddingRight) || 0));
+        var initialHeight = (((_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.offsetHeight) || 0) - (parseFloat((refComputedStyle === null || refComputedStyle === void 0 ? void 0 : refComputedStyle.paddingTop) || 0), parseFloat((refComputedStyle === null || refComputedStyle === void 0 ? void 0 : refComputedStyle.paddingLeft) || 0));
+        setWidth(initialWidth);
+        setHeight(initialHeight);
+      }
+    };
+    if (!(ref !== null && ref !== void 0 && ref.current) || width >= 0 && height >= 0) {
+      return;
+    }
+    getInitialSize();
+  }, [width, height, ref]);
   (0, _react.useLayoutEffect)(function () {
     if (!(ref !== null && ref !== void 0 && ref.current)) {
       return;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "1.56.0",
+  "version": "1.57.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -96,5 +96,5 @@
     "react": "^16.8.6 || ^17.0.1",
     "react-dom": "^16.8.6 || ^17.0.1"
   },
-  "gitHead": "9f4bc491efe9aa02b6e038c0d13ba4a0757395f1"
+  "gitHead": "1d221bb1501e276983498e37ed58599c841fa202"
 }

package/scss/components/Datagrid/styles/_datagrid.scss

@@ -612,3 +612,68 @@
 .#{$block-class} .#{$pkg-prefix}--datagrid__head-wrap {
   background-color: $ui-03;
 }
+
+.#{$block-class} .#{$block-class}__col-resizer-range {
+  position: absolute;
+  z-index: 2;
+  top: 0;
+  right: calc(#{$spacing-03} * -1);
+  width: 1rem;
+  height: 100%;
+  margin: 0;
+  -webkit-appearance: none;
+  appearance: none;
+  background: transparent;
+}
+
+.#{$block-class} .#{$block-class}__col-resizer-range:focus {
+  outline: 0;
+}
+
+.#{$block-class} .#{$block-class}__col-resizer-range:focus::before {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 2px;
+  height: 100%;
+  background-color: $focus;
+  content: '';
+  transform: translate(-50%, -50%);
+}
+
+.#{$block-class}
+  .#{$block-class}__col-resizer-range:focus
+  + .#{$block-class}__col-resize-indicator {
+  position: absolute;
+  z-index: 2;
+  right: calc(#{$spacing-03} * -1);
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 100%;
+  margin: 0;
+  background-color: $focus;
+  transform: translate(-50%, 0);
+}
+
+.#{$block-class} .#{$block-class}__col-resizer-range:focus::after {
+  position: absolute;
+  /* stylelint-disable-next-line carbon/layout-token-use */
+  top: var(--#{$block-class}--row-height);
+  right: $spacing-03;
+  width: 1px;
+  height: calc(
+    var(--#{$block-class}--grid-height) - var(--#{$block-class}--row-height)
+  );
+  background-color: $active-ui;
+  content: '';
+}
+
+.#{$block-class} .#{$block-class}__col-resizer-range::-webkit-slider-thumb {
+  width: 16px;
+  height: 16px;
+  border: none;
+  border-radius: 50%;
+  -webkit-appearance: none;
+  appearance: none;
+  background: transparent;
+}