@carbon/ibm-products 2.44.0 → 2.45.0-rc.0

package/es/components/DataSpreadsheet/DataSpreadsheet.js

@@ -32,7 +32,7 @@ import { useSpreadsheetOutsideClick } from './hooks/useSpreadsheetOutsideClick.j
 import { useMoveActiveCell } from './hooks/useMoveActiveCell.js';
 import { useSpreadsheetEdit } from './hooks/useSpreadsheetEdit.js';
 
-var _excluded = ["cellSize", "className", "columns", "data", "defaultEmptyRowCount", "onDataUpdate", "id", "onActiveCellChange", "onSelectionAreaChange", "renderRowHeader", "renderRowHeaderDirection", "selectAllAriaLabel", "spreadsheetAriaLabel", "theme", "totalVisibleColumns"];
+var _excluded = ["cellSize", "className", "columns", "data", "defaultEmptyRowCount", "onDataUpdate", "id", "onActiveCellChange", "onSelectionAreaChange", "renderRowHeader", "renderRowHeaderDirection", "disableColumnSwapping", "readOnlyTable", "selectAllAriaLabel", "spreadsheetAriaLabel", "theme", "totalVisibleColumns"];
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(pkg.prefix, "--data-spreadsheet");
 var componentName = 'DataSpreadsheet';
@@ -69,6 +69,10 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
     onSelectionAreaChange = _ref$onSelectionAreaC === void 0 ? defaults.onSelectionAreaChange : _ref$onSelectionAreaC,
     renderRowHeader = _ref.renderRowHeader,
     renderRowHeaderDirection = _ref.renderRowHeaderDirection,
+    _ref$disableColumnSwa = _ref.disableColumnSwapping,
+    disableColumnSwapping = _ref$disableColumnSwa === void 0 ? false : _ref$disableColumnSwa,
+    _ref$readOnlyTable = _ref.readOnlyTable,
+    readOnlyTable = _ref$readOnlyTable === void 0 ? false : _ref$readOnlyTable,
     selectAllAriaLabel = _ref.selectAllAriaLabel,
     spreadsheetAriaLabel = _ref.spreadsheetAriaLabel,
     theme = _ref.theme,
@@ -427,8 +431,8 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
     }
   }, [handleInitialArrowPress, updateActiveCellCoordinates, activeCellCoordinates, columns, rows]);
   var handleKeyPressEvent = useCallback(function (event) {
-    handleKeyPress(event, activeCellInsideSelectionArea, updateActiveCellCoordinates, activeCellCoordinates, removeActiveCell, columns, rows, spreadsheetRef, currentMatcher, removeCellEditor, selectionAreas, handleHomeEndKey, keysPressedList, usingMac, updateData, checkForReturnCondition, handleArrowKeyPress, setSelectionAreas, setSelectionAreaData, setCurrentMatcher, activeCellRef, setActiveCellCoordinates, setContainerHasFocus, setActiveCellContent);
-  }, [activeCellInsideSelectionArea, updateActiveCellCoordinates, activeCellCoordinates, removeActiveCell, columns, rows, spreadsheetRef, currentMatcher, removeCellEditor, selectionAreas, handleHomeEndKey, keysPressedList, usingMac, updateData, checkForReturnCondition, handleArrowKeyPress]);
+    handleKeyPress(event, activeCellInsideSelectionArea, updateActiveCellCoordinates, activeCellCoordinates, removeActiveCell, columns, rows, spreadsheetRef, currentMatcher, removeCellEditor, selectionAreas, handleHomeEndKey, keysPressedList, usingMac, updateData, checkForReturnCondition, handleArrowKeyPress, setSelectionAreas, setSelectionAreaData, setCurrentMatcher, activeCellRef, setActiveCellCoordinates, setContainerHasFocus, setActiveCellContent, readOnlyTable);
+  }, [activeCellInsideSelectionArea, updateActiveCellCoordinates, activeCellCoordinates, removeActiveCell, columns, rows, spreadsheetRef, currentMatcher, removeCellEditor, selectionAreas, handleHomeEndKey, keysPressedList, usingMac, updateData, checkForReturnCondition, handleArrowKeyPress, readOnlyTable]);
   var startEditMode = function startEditMode() {
     setIsEditing(true);
     setClickAndHoldActive(false);
@@ -499,7 +503,7 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
   // Go into edit mode if 'Enter' key is pressed on activeCellRef
   var handleActiveCellKeyDown = function handleActiveCellKeyDown(event) {
     var key = event.key;
-    if (key === 'Enter' && !activeCellInsideSelectionArea) {
+    if (key === 'Enter' && !activeCellInsideSelectionArea && !readOnlyTable) {
       if ((activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) !== 'header' && (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) !== 'header') {
         startEditMode();
       }
@@ -555,8 +559,10 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
   };
 
   // Go into edit mode if double click is detected on activeCellRef
-  var handleActiveCellDoubleClick = function handleActiveCellDoubleClick() {
-    startEditMode();
+  var handleActiveCellDoubleClick = function handleActiveCellDoubleClick(readOnlyTable) {
+    if (!readOnlyTable) {
+      startEditMode();
+    }
   };
   useSpreadsheetEdit({
     isEditing: isEditing,
@@ -636,6 +642,8 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
     setSelectionAreas: setSelectionAreas,
     setCurrentMatcher: setCurrentMatcher,
     setSelectionAreaData: setSelectionAreaData,
+    disableColumnSwapping: disableColumnSwapping,
+    readOnlyTable: readOnlyTable,
     totalVisibleColumns: totalVisibleColumns,
     updateActiveCellCoordinates: updateActiveCellCoordinates,
     setHeaderCellHoldActive: setHeaderCellHoldActive,
@@ -684,7 +692,9 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
     onMouseUp: handleActiveCellMouseUp,
     onClick: handleActiveCellClick,
     onKeyDown: handleActiveCellKeyDown,
-    onDoubleClick: handleActiveCellDoubleClick,
+    onDoubleClick: function onDoubleClick() {
+      return handleActiveCellDoubleClick(readOnlyTable);
+    },
     onMouseEnter: handleActiveCellMouseEnter,
     ref: activeCellRef,
     className: cx("".concat(blockClass, "--interactive-cell-element"), "".concat(blockClass, "__active-cell--highlight"), _defineProperty({}, "".concat(blockClass, "__active-cell--with-selection"), activeCellInsideSelectionArea)),
@@ -760,6 +770,10 @@ DataSpreadsheet.propTypes = {
    * Sets the number of empty rows to be created when there is no data provided
    */
   defaultEmptyRowCount: PropTypes.number,
+  /**
+   * Disable column swapping, default false
+   */
+  disableColumnSwapping: PropTypes.bool,
   /**
    * Check if spreadsheet is using custom row header component attached
    */
@@ -780,6 +794,10 @@ DataSpreadsheet.propTypes = {
    * The event handler that is called when the selection area values change
    */
   onSelectionAreaChange: PropTypes.func,
+  /**
+   * Read-only table
+   */
+  readOnlyTable: PropTypes.bool,
   /**
    * Component next to numbering rows
    */

package/es/components/DataSpreadsheet/DataSpreadsheetHeader.d.ts

@@ -16,6 +16,10 @@ interface DataSpreadsheetHeaderProps {
      * Specifies the cell height
      */
     cellSize?: Size;
+    /**
+     * Disable column swapping, default false
+     */
+    disableColumnSwapping?: boolean;
     /**
      * All of the spreadsheet columns
      */
@@ -36,6 +40,10 @@ interface DataSpreadsheetHeaderProps {
      * Headers provided from useTable hook
      */
     headerGroups?: any[];
+    /**
+     * Read-only table
+     */
+    readOnlyTable?: boolean;
     /**
      * All of the spreadsheet row data
      */

package/es/components/DataSpreadsheet/DataSpreadsheetHeader.js

@@ -36,6 +36,8 @@ var DataSpreadsheetHeader = /*#__PURE__*/forwardRef(function (_ref, ref) {
     setActiveCellCoordinates = _ref.setActiveCellCoordinates,
     setCurrentMatcher = _ref.setCurrentMatcher,
     setSelectionAreas = _ref.setSelectionAreas,
+    readOnlyTable = _ref.readOnlyTable,
+    disableColumnSwapping = _ref.disableColumnSwapping,
     setSelectionAreaData = _ref.setSelectionAreaData,
     rows = _ref.rows,
     totalVisibleColumns = _ref.totalVisibleColumns,
@@ -194,8 +196,8 @@ var DataSpreadsheetHeader = /*#__PURE__*/forwardRef(function (_ref, ref) {
         "data-row-index": "header",
         "data-column-index": index,
         tabIndex: -1,
-        onMouseDown: selectedHeader ? handleHeaderMouseDown(index) : undefined,
-        onMouseUp: selectedHeader && typeof setSelectedHeaderReorderActive === 'function' ? function () {
+        onMouseDown: selectedHeader && !readOnlyTable && !disableColumnSwapping ? handleHeaderMouseDown(index) : undefined,
+        onMouseUp: selectedHeader && !readOnlyTable && !disableColumnSwapping && typeof setSelectedHeaderReorderActive === 'function' ? function () {
           return setSelectedHeaderReorderActive(false);
         } : undefined,
         onClick: !selectedHeader ? handleColumnHeaderClick(index) : undefined,
@@ -203,7 +205,7 @@ var DataSpreadsheetHeader = /*#__PURE__*/forwardRef(function (_ref, ref) {
           height: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeight,
           width: (column === null || column === void 0 ? void 0 : column.width) || (defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.width)
         },
-        className: cx("".concat(blockClass, "__th"), "".concat(blockClass, "--interactive-cell-element"), _defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "__th--active-header"), (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === index || checkActiveHeaderCell(index, selectionAreas, 'column')), "".concat(blockClass, "__th--selected-header"), selectedHeader), "".concat(blockClass, "__th--selected-header-reorder-active"), selectedHeaderReorderActive)),
+        className: cx("".concat(blockClass, "__th"), "".concat(blockClass, "--interactive-cell-element"), _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "__th--active-header"), (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === index || checkActiveHeaderCell(index, selectionAreas, 'column')), "".concat(blockClass, "__th--active-header-disabledSwapping"), disableColumnSwapping || readOnlyTable), "".concat(blockClass, "__th--selected-header"), selectedHeader), "".concat(blockClass, "__th--selected-header-reorder-active"), selectedHeaderReorderActive)),
         type: "button"
       }, column.render('Header')));
     }));
@@ -239,6 +241,10 @@ DataSpreadsheetHeader.propTypes = {
     rowHeaderWidth: PropTypes.number,
     width: PropTypes.number
   }),
+  /**
+   * Disable column swapping, default false
+   */
+  disableColumnSwapping: PropTypes.bool,
   /**
    * Whether or not a click/hold is active on a header cell
    */
@@ -247,6 +253,10 @@ DataSpreadsheetHeader.propTypes = {
    * Headers provided from useTable hook
    */
   headerGroups: PropTypes.arrayOf(PropTypes.object),
+  /**
+   * Read-only table
+   */
+  readOnlyTable: PropTypes.bool,
   /**
    * All of the spreadsheet row data
    */

package/es/components/Datagrid/Datagrid/Datagrid.d.ts

@@ -16,10 +16,6 @@ export interface DatagridProps {
      * The data grid state, much of it being supplied by the useDatagrid hook
      */
     datagridState: DataGridState;
-    /**
-     * Table title
-     */
-    title?: string;
 }
 /**
  * The `Datagrid` component is an extension of Carbon's DataTable component. At the most basic level, the `Datagrid` component takes in columns and rows and renders a data table. There is a set of data table extensions which this component provides support for, these can be found [here](https://pages.github.ibm.com/cdai-design/pal/components/data-table/overview/). This component is data driven and allows you to choose what pieces will be included based on the hooks/plugins that are provided.

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

@@ -16,7 +16,7 @@ import { DatagridContent } from './DatagridContent.js';
 import { FilterProvider } from './addons/Filtering/FilterProvider.js';
 import { InlineEditProvider } from './addons/InlineEdit/InlineEditContext/InlineEditContext.js';
 
-var _excluded = ["datagridState", "title", "ariaToolbarLabel"];
+var _excluded = ["datagridState", "ariaToolbarLabel"];
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 var componentName = 'Datagrid';
 /**
@@ -24,7 +24,6 @@ var componentName = 'Datagrid';
  */
 var Datagrid = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var datagridState = _ref.datagridState,
-    title = _ref.title,
     ariaToolbarLabel = _ref.ariaToolbarLabel,
     rest = _objectWithoutProperties(_ref, _excluded);
   if (!datagridState) {
@@ -40,7 +39,6 @@ var Datagrid = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     state = datagridState.state;
   var rows = DatagridPagination && datagridState.page || datagridState.rows;
   var props = {
-    title: title,
     datagridState: datagridState,
     ariaToolbarLabel: ariaToolbarLabel
   };
@@ -73,11 +71,7 @@ Datagrid.propTypes = {
    * The data grid state, much of it being supplied by the useDatagrid hook
    */
   /**@ts-ignore */
-  datagridState: PropTypes.object.isRequired,
-  /**
-   * Table title
-   */
-  title: PropTypes.string
+  datagridState: PropTypes.object.isRequired
 };
 
 export { Datagrid };

package/es/components/Datagrid/Datagrid/DatagridHeaderRow.js

@@ -23,10 +23,8 @@ var _excluded = ["className"],
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 var getAccessibilityProps = function getAccessibilityProps(header) {
   var props = {};
-  var title = getNodeTextContent(header.Header);
-  if (title) {
-    props.title = title;
-  } else {
+  var content = getNodeTextContent(header.Header);
+  if (!content) {
     props['aria-hidden'] = true;
   }
   return props;
@@ -82,6 +80,7 @@ var ResizeHeader = function ResizeHeader(_ref) {
     "aria-label": resizerAriaLabel || 'Resize column',
     disabled: isFetching
   })), /*#__PURE__*/React__default.createElement("span", {
+    role: "separator",
     className: "".concat(blockClass, "__col-resize-indicator")
   }));
 };
@@ -136,7 +135,9 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
     }
     onMouseDown === null || onMouseDown === void 0 || onMouseDown(event);
   };
-  var _headerGroup$getHeade = headerGroup.getHeaderGroupProps(),
+  var _headerGroup$getHeade = headerGroup.getHeaderGroupProps({
+      role: undefined
+    }),
     headerGroupClassName = _headerGroup$getHeade.className,
     headerGroupProps = _objectWithoutProperties(_headerGroup$getHeade, _excluded);
   var renderSlug = function renderSlug(slug) {
@@ -185,9 +186,13 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
     var _ref5 = columnResizing || {},
       columnWidths = _ref5.columnWidths;
     var originalCol = visibleColumns[index];
-    var _header$getHeaderProp = header.getHeaderProps(),
+    var _header$getHeaderProp = header.getHeaderProps({
+        role: undefined
+      }),
       headerProps = _extends({}, (_objectDestructuringEmpty(_header$getHeaderProp), _header$getHeaderProp));
-    var resizerProps = header === null || header === void 0 || (_header$getResizerPro = header.getResizerProps) === null || _header$getResizerPro === void 0 ? void 0 : _header$getResizerPro.call(header);
+    var resizerProps = header === null || header === void 0 || (_header$getResizerPro = header.getResizerProps) === null || _header$getResizerPro === void 0 ? void 0 : _header$getResizerPro.call(header, {
+      role: undefined
+    });
     var headerStyle = headerProps === null || headerProps === void 0 ? void 0 : headerProps.style;
     var lastVisibleIndex = withActionsColumn ? 2 : 1;
     var lastVisibleFlexStyle = index === visibleColumns.length - lastVisibleIndex ? '1 1 0' : '0 0 auto';

package/es/components/Datagrid/Datagrid/DatagridRow.js

@@ -108,7 +108,9 @@ var DatagridRow = function DatagridRow(datagridState) {
     }
     return {};
   };
-  var _row$getRowProps = row.getRowProps(),
+  var _row$getRowProps = row.getRowProps({
+      role: undefined
+    }),
     className = _row$getRowProps.className,
     rowProps = _objectWithoutProperties(_row$getRowProps, _excluded);
   var foundAIRow = rows.some(function (r) {
@@ -136,8 +138,10 @@ var DatagridRow = function DatagridRow(datagridState) {
   })) : /*#__PURE__*/React__default.createElement("td", {
     className: "".concat(blockClass, "__table-row-ai-spacer")
   }) : null, row.cells.map(function (cell, index) {
-    var _cell$column, _cell$column2, _content$props, _associatedHeader$;
-    var cellProps = cell.getCellProps();
+    var _cell$column, _cell$column2, _associatedHeader$;
+    var cellProps = cell.getCellProps({
+      role: undefined
+    });
     // eslint-disable-next-line no-unused-vars
     var _ref2 = cellProps,
       style = _ref2.style,
@@ -151,7 +155,6 @@ var DatagridRow = function DatagridRow(datagridState) {
         key: cell.column.id
       });
     }
-    var title = content === null || content === void 0 || (_content$props = content.props) === null || _content$props === void 0 || (_content$props = _content$props.children[0]) === null || _content$props === void 0 || (_content$props = _content$props.props) === null || _content$props === void 0 ? void 0 : _content$props.value;
     var associatedHeader = headers === null || headers === void 0 ? void 0 : headers.filter(function (h) {
       return h.id === cell.column.id;
     });
@@ -164,8 +167,7 @@ var DatagridRow = function DatagridRow(datagridState) {
       className: cx("".concat(blockClass, "__cell"), _defineProperty(_defineProperty(_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__*/isValidElement((_associatedHeader$ = associatedHeader[0]) === null || _associatedHeader$ === void 0 ? void 0 : _associatedHeader$.slug)), columnClassname)
     }, restProps, {
       style: style,
-      key: cell.column.id,
-      title: title
+      key: cell.column.id
     }), content);
   })), (renderExpandedRow === null || renderExpandedRow === void 0 ? void 0 : renderExpandedRow()) || undefined);
 };

package/es/components/Datagrid/Datagrid/DatagridSelectAll.js

@@ -16,11 +16,12 @@ var _excluded = ["onChange"];
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 var SelectAll = function SelectAll(datagridState) {
   var _columns$;
-  var _useState = useState(typeof window !== 'undefined' ? window.innerWidth : ''),
+  var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
     windowSize = _useState2[0],
     setWindowSize = _useState2[1];
   useLayoutEffect(function () {
+    setWindowSize(window.innerWidth);
     /* istanbul ignore next */
     function updateSize() {
       setWindowSize(window.innerWidth);

package/es/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js

@@ -43,11 +43,12 @@ var SelectAllWithToggle = function SelectAllWithToggle(_ref) {
       onSelectAllRows(isAllRowsSelected && selectAllMode === SELECT_ALL_ROWS);
     }
   }, [isAllRowsSelected, selectAllMode, onSelectAllRows]);
-  var _useState3 = useState(window.innerWidth),
+  var _useState3 = useState(),
     _useState4 = _slicedToArray(_useState3, 2),
     windowSize = _useState4[0],
     setWindowSize = _useState4[1];
   useLayoutEffect(function () {
+    setWindowSize(window.innerWidth);
     function updateSize() {
       setWindowSize(window.innerWidth);
     }
@@ -68,7 +69,7 @@ var SelectAllWithToggle = function SelectAllWithToggle(_ref) {
   var isFirstColumnStickyLeft = (columns === null || columns === void 0 || (_columns$ = columns[0]) === null || _columns$ === void 0 ? void 0 : _columns$.sticky) === 'left' && withStickyColumn;
   return /*#__PURE__*/React__default.createElement("th", {
     scope: "col",
-    className: cx("".concat(blockClass, "__select-all-toggle-on"), _defineProperty({}, "".concat(blockClass, "__select-all-sticky-left"), isFirstColumnStickyLeft && windowSize > 671))
+    className: cx("".concat(blockClass, "__select-all-toggle-on"), _defineProperty({}, "".concat(blockClass, "__select-all-sticky-left"), isFirstColumnStickyLeft && (windowSize !== null && windowSize !== void 0 ? windowSize : 0) > 671))
   }, /*#__PURE__*/React__default.createElement("span", null, /*#__PURE__*/React__default.createElement(Checkbox, _extends({}, selectProps, {
     name: "".concat(tableId, "-select-all-checkbox-name"),
     onClick: function onClick(e) {

package/es/components/Datagrid/Datagrid/addons/Filtering/FilterProvider.js

@@ -62,7 +62,7 @@ var clearSingleFilter = function clearSingleFilter(_ref, setAllFilters, state) {
           This checks if all the checkboxes are selected = false and removes it from the array
         */
         var valueIndex = filterValues.findIndex(function (val) {
-          return val.id === value;
+          return val.value === value;
         });
         filterValues[valueIndex].selected = false;
         var updatedFilterObject = _objectSpread2(_objectSpread2({}, f), {}, {

package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/InlineEditButton.js

@@ -27,8 +27,7 @@ var InlineEditButton = function InlineEditButton(_ref) {
     tabIndex: isActiveCell ? 0 : -1,
     "data-disabled": disabledCell,
     "aria-disabled": disabledCell,
-    role: "button",
-    title: label
+    role: "button"
   }, LabelIcon && /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(blockClass, "__label-icon")
   }, /*#__PURE__*/React__default.createElement(LabelIcon, null)), label !== '' ? /*#__PURE__*/React__default.createElement("span", {

package/es/components/Datagrid/types/index.d.ts

@@ -6,7 +6,7 @@ import { RadioButtonGroupProps } from '@carbon/react/lib/components/RadioButtonG
 import { CheckboxProps } from '@carbon/react/lib/components/Checkbox';
 import { NumberInputProps } from '@carbon/react/lib/components/NumberInput/NumberInput';
 import React, { CSSProperties, ComponentType, FunctionComponent, JSXElementConstructor, MutableRefObject, ReactNode, TouchEventHandler } from 'react';
-import { Cell, Column, ColumnInstance, FilterValue, Filters, HeaderGroup, Meta, Row, TableCommonProps, TableDispatch, TableInstance, TableToggleAllRowsSelectedProps, UseExpandedRowProps, UseFiltersInstanceProps, UsePaginationInstanceProps, UseResizeColumnsColumnProps, UseResizeColumnsState, UseRowSelectInstanceProps, UseRowSelectRowProps, UseRowSelectState, UseSortByColumnProps, UseSortByOptions, UseTableHooks } from 'react-table';
+import { Cell, Column, ColumnInstance, FilterValue, Filters, HeaderGroup, Meta, Row, TableCommonProps, TableDispatch, TableInstance, TableToggleAllRowsSelectedProps, UseExpandedRowProps, UseFiltersInstanceProps, UsePaginationInstanceProps, UseResizeColumnsColumnProps, UseResizeColumnsOptions, UseResizeColumnsState, UseRowSelectInstanceProps, UseRowSelectRowProps, UseRowSelectState, UseSortByColumnProps, UseSortByOptions, UseTableHooks } from 'react-table';
 import { CarbonIconType } from '@carbon/react/icons';
 import { IconButton, type ButtonProps } from '@carbon/react';
 import { TableBatchActionsProps } from '@carbon/react/lib/components/DataTable/TableBatchActions';
@@ -59,6 +59,18 @@ interface Labels {
     allPageRows?: object;
     allRows?: object;
 }
+interface ColumnLabels {
+    findColumnPlaceholderLabel?: string;
+    resetToDefaultLabel?: string;
+    customizeTearsheetHeadingLabel?: string;
+    primaryButtonTextLabel?: string;
+    secondaryButtonTextLabel?: string;
+    instructionsLabel?: string;
+    iconTooltipLabel?: string;
+    assistiveTextInstructionsLabel?: string;
+    assistiveTextDisabledInstructionsLabel?: string;
+    selectAllLabel?: string;
+}
 interface Section {
     categoryTitle?: string;
     filters?: DataGridFilter[];
@@ -85,7 +97,7 @@ export interface DataGridToggleAllRowsProps extends TableToggleAllRowsSelectedPr
 }
 export interface DatagridTableHooks<T extends object = any> extends UseTableHooks<T> {
 }
-export interface DatagridColumn<T extends object = any> extends ColumnInstance<T>, UseSortByOptions<T> {
+export interface DatagridColumn<T extends object = any> extends ColumnInstance<T>, UseSortByOptions<T>, Partial<UseResizeColumnsColumnProps<T>>, UseResizeColumnsOptions<T> {
     sticky?: 'left' | 'right';
     className?: string;
     rightAlignedColumn?: boolean;
@@ -112,15 +124,13 @@ export interface DataGridHeader<T extends object = any> extends ColumnInstance,
 }
 export interface DataGridHeaderGroup<T extends object = any> extends HeaderGroup<T>, UseResizeColumnsColumnProps<T> {
 }
-export interface TableProps {
-    className?: string;
-    role?: string;
-    style?: CSSStyleDeclaration;
+export interface DataGridTableProps extends TableCommonProps {
 }
 interface DataGridTableState extends UseResizeColumnsState<any>, UseRowSelectState<any> {
     filters: Filters<DataGridFilter>;
 }
 export interface DataGridTableInstance<T extends object = any> extends TableInstance<T> {
+    withSelectRows?: boolean;
 }
 export interface RowAction {
     id?: string;
@@ -210,11 +220,23 @@ export interface DataGridState<T extends object = any> extends TableCommonProps,
     expandedRowIds?: object;
     onRowClick?: (row: any, event: any) => void;
     onSort?: boolean;
+    customizeColumnsProps?: {
+        onSaveColumnPrefs?: (args: any) => void;
+        labels?: ColumnLabels;
+        isTearsheetOpen?: boolean;
+        setIsTearsheetOpen?: (args: boolean) => void;
+    };
+    CustomizeColumnsButton?: (args: any) => ReactNode;
     column?: DatagridColumn;
     expandedContentHeight?: number;
     onRowExpand?: (row: DatagridRow, event: React.MouseEvent<HTMLElement>) => void;
     ExpandedRowContentComponent?: JSXElementConstructor<any>;
 }
+export interface DataGridData {
+    instance?: DataGridTableInstance;
+    column?: DatagridColumn;
+    cell?: DataGridCell;
+}
 export interface ResizeHeaderProps {
     resizerProps?: ResizerProps;
     header: DataGridHeader;

package/es/components/Datagrid/useCustomizeColumns.d.ts

@@ -1,2 +1,9 @@
+/**
+ * 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.
+ */
+import { Hooks } from 'react-table';
+declare const useCustomizeColumns: (hooks: Hooks) => void;
 export default useCustomizeColumns;
-declare function useCustomizeColumns(hooks: any): void;

package/es/components/Datagrid/useCustomizeColumns.js

@@ -16,9 +16,10 @@ var useCustomizeColumns = function useCustomizeColumns(hooks) {
     isTearsheetOpen = _React$useState2[0],
     setIsTearsheetOpen = _React$useState2[1];
   hooks.useInstance.push(function (instance) {
-    var customizeColumnsProps = instance.customizeColumnsProps;
-    var _ref = customizeColumnsProps || {},
-      labels = _ref.labels;
+    var _ref = instance,
+      customizeColumnsProps = _ref.customizeColumnsProps;
+    var _ref2 = customizeColumnsProps || {},
+      labels = _ref2.labels;
     Object.assign(instance, {
       customizeColumnsProps: _objectSpread2(_objectSpread2({}, customizeColumnsProps), {}, {
         isTearsheetOpen: isTearsheetOpen,

package/es/components/Datagrid/useDefaultStringRenderer.js

@@ -21,7 +21,6 @@ var useDefaultStringRenderer = function useDefaultStringRenderer(hooks) {
   var HeaderRenderer = function HeaderRenderer(header, slug) {
     return /*#__PURE__*/React__default.createElement("div", {
       className: cx("".concat(blockClass, "__defaultStringRenderer"), _defineProperty({}, "".concat(blockClass, "__defaultStringRenderer--slug"), slug && /*#__PURE__*/React__default.isValidElement(slug))),
-      title: typeof header === 'string' ? header : '',
       key: typeof header === 'string' ? header : ''
     }, header);
   };

package/es/components/Datagrid/useNestedRowExpander.js

@@ -48,9 +48,7 @@ var useNestedRowExpander = function useNestedRowExpander(hooks) {
           type: "button",
           "aria-label": expanderTitle,
           className: cx("".concat(blockClass, "__row-expander"), "".concat(carbon.prefix, "--btn"), "".concat(carbon.prefix, "--btn--ghost"))
-        }, expanderButtonProps, {
-          title: expanderTitle
-        }), /*#__PURE__*/React__default.createElement(ChevronRight, {
+        }, expanderButtonProps), /*#__PURE__*/React__default.createElement(ChevronRight, {
           className: cx("".concat(blockClass, "__expander-icon"), _defineProperty(_defineProperty({}, "".concat(blockClass, "__expander-icon--not-open"), !row.isExpanded), "".concat(blockClass, "__expander-icon--open"), row.isExpanded))
         }));
       },

package/es/components/Datagrid/useRowExpander.js

@@ -50,9 +50,7 @@ var useRowExpander = function useRowExpander(hooks) {
           type: "button",
           "aria-label": expanderTitle,
           className: cx("".concat(blockClass, "__row-expander"), "".concat(carbon.prefix, "--btn"), "".concat(carbon.prefix, "--btn--ghost"))
-        }, expanderButtonProps, {
-          title: expanderTitle
-        }), row.isExpanded ? /*#__PURE__*/React__default.createElement(ChevronUp, {
+        }, expanderButtonProps), row.isExpanded ? /*#__PURE__*/React__default.createElement(ChevronUp, {
           className: "".concat(blockClass, "__row-expander--icon")
         }) : /*#__PURE__*/React__default.createElement(ChevronDown, {
           className: "".concat(blockClass, "__row-expander--icon")

package/es/components/Datagrid/useSelectRows.js

@@ -81,11 +81,12 @@ var SelectRow = function SelectRow(datagridState) {
     withStickyColumn = datagridState.withStickyColumn,
     dispatch = datagridState.dispatch,
     getRowId = datagridState.getRowId;
-  var _useState = useState(typeof window !== 'undefined' ? window.innerWidth : ''),
+  var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
     windowSize = _useState2[0],
     setWindowSize = _useState2[1];
   useLayoutEffect(function () {
+    setWindowSize(window.innerWidth);
     function updateSize() {
       setWindowSize(window.innerWidth);
     }

package/es/components/Datagrid/useStickyColumn.d.ts

@@ -1,2 +1,9 @@
+/**
+ * Copyright IBM Corp. 2021, 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.
+ */
+import { Hooks } from 'react-table';
+declare const useStickyColumn: (hooks: Hooks) => void;
 export default useStickyColumn;
-declare function useStickyColumn(hooks: any): void;

package/es/components/Datagrid/useStickyColumn.js

@@ -18,12 +18,13 @@ var OFFSET_SCROLL_CLASS = "".concat(styleClassPrefix, "-offset-scroll");
 var useStickyColumn = function useStickyColumn(hooks) {
   var tableBodyRef = useRef();
   var stickyHeaderCellRef = useRef();
-  var _useState = useState(null),
+  var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
     windowSize = _useState2[0],
     setWindowSize = _useState2[1];
   useEffect(function () {
-    setWindowSize(window.innerWidth);
+    var _window;
+    setWindowSize((_window = window) === null || _window === void 0 ? void 0 : _window.innerWidth);
   }, []);
   useLayoutEffect(function () {
     /* istanbul ignore next */
@@ -49,10 +50,11 @@ var useStickyColumn = function useStickyColumn(hooks) {
   var useEventListener = function useEventListener(instance) {
     useEffect(function () {
       var tableBodyElement = tableBodyRef.current;
-      var headerCellElement = stickyHeaderCellRef.current;
+      var headerCellElement = stickyHeaderCellRef === null || stickyHeaderCellRef === void 0 ? void 0 : stickyHeaderCellRef.current;
       /* istanbul ignore next */
       if (hasVertScroll(tableBodyElement) && headerCellElement) {
-        headerCellElement.classList.add(OFFSET_SCROLL_CLASS);
+        var _headerCellElement$cl;
+        headerCellElement === null || headerCellElement === void 0 || (_headerCellElement$cl = headerCellElement.classList) === null || _headerCellElement$cl === void 0 || _headerCellElement$cl.add(OFFSET_SCROLL_CLASS);
       }
       var boundListener = debounce(onBodyResize.bind(null, tableBodyElement, headerCellElement), 250);
       /* istanbul ignore next */
@@ -74,7 +76,7 @@ var useStickyColumn = function useStickyColumn(hooks) {
       };
       toggleStickyShadow(tableBodyElement, headerCellElement);
       if (tableBodyElement) {
-        tableBodyElement.addEventListener('scroll', listener);
+        tableBodyElement === null || tableBodyElement === void 0 || tableBodyElement.addEventListener('scroll', listener);
       }
       return function () {
         if (tableBodyElement) {
@@ -138,18 +140,19 @@ var addTableBodyProps = function addTableBodyProps(tableBodyRef, props) {
   }];
 };
 var changeProps = function changeProps(elementName, headerCellRef, windowSize, props, data) {
-  var column = data.column || data.cell.column;
-  if (column.sticky === 'right') {
+  var _data$cell;
+  var column = data.column || ((_data$cell = data.cell) === null || _data$cell === void 0 ? void 0 : _data$cell.column);
+  if ((column === null || column === void 0 ? void 0 : column.sticky) === 'right') {
     return [props, _objectSpread2({
       className: cx(_defineProperty(_defineProperty(_defineProperty({}, "".concat(styleClassPrefix, "-").concat(elementName), true), "".concat(blockClass, "__resizableColumn"), false), "".concat(blockClass, "__sortableColumn"), false))
     }, headerCellRef && {
       ref: headerCellRef
     })];
   }
-  if (column.sticky === 'left') {
+  if ((column === null || column === void 0 ? void 0 : column.sticky) === 'left') {
     var _data$instance;
     return [props, _objectSpread2({
-      className: cx(_defineProperty(_defineProperty({}, "".concat(leftStickyStyleClassPrefix, "-").concat(elementName), windowSize > 671), "".concat(leftStickyStyleClassPrefix, "-").concat(elementName, "--with-extra-select-column"), (data === null || data === void 0 || (_data$instance = data.instance) === null || _data$instance === void 0 ? void 0 : _data$instance.withSelectRows) && windowSize > 671))
+      className: cx(_defineProperty(_defineProperty({}, "".concat(leftStickyStyleClassPrefix, "-").concat(elementName), windowSize && windowSize > 671), "".concat(leftStickyStyleClassPrefix, "-").concat(elementName, "--with-extra-select-column"), (data === null || data === void 0 || (_data$instance = data.instance) === null || _data$instance === void 0 ? void 0 : _data$instance.withSelectRows) && windowSize && windowSize > 671))
     }, headerCellRef && {
       ref: headerCellRef
     })];

package/es/components/EditInPlace/EditInPlace.d.ts

@@ -50,6 +50,10 @@ interface EditInplaceProps extends PropsWithChildren {
      * Provide the text that will be read by a screen reader when visiting this control
      */
     labelText: string;
+    /**
+     * handler to add custom onBlur event
+     */
+    onBlur?: (value: string) => void;
     /**
      * handler that is called when the cancel button is pressed or when the user removes focus from the input and there is no new value
      */