@carbon/ibm-products
Version:
Carbon for IBM Products
669 lines (667 loc) • 26.8 kB
JavaScript
/**
* Copyright IBM Corp. 2020, 2026
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
const require_runtime = require("../../_virtual/_rolldown/runtime.js");
const require_index = require("../../node_modules/classnames/index.js");
const require_settings = require("../../settings.js");
const require_useActiveElement = require("../../global/js/hooks/useActiveElement.js");
const require_usePreviousValue = require("../../global/js/hooks/usePreviousValue.js");
const require_devtools = require("../../global/js/utils/devtools.js");
const require_uuidv4 = require("../../global/js/utils/uuidv4.js");
const require_getNodeTextContent = require("../../global/js/utils/getNodeTextContent.js");
const require_useMoveActiveCell = require("./hooks/useMoveActiveCell.js");
const require_deepCloneObject = require("../../global/js/utils/deepCloneObject.js");
const require_removeCellSelections = require("./utils/removeCellSelections.js");
const require_selectAllCells = require("./utils/selectAllCells.js");
const require_useMultipleKeyTracking = require("./hooks/useMultipleKeyTracking.js");
const require_useResetSpreadsheetFocus = require("./hooks/useResetSpreadsheetFocus.js");
const require_useSpreadsheetOutsideClick = require("./hooks/useSpreadsheetOutsideClick.js");
const require_useSpreadsheetEdit = require("./hooks/useSpreadsheetEdit.js");
const require_handleHeaderCellSelection = require("./utils/handleHeaderCellSelection.js");
const require_commonEventHandlers = require("./utils/commonEventHandlers.js");
const require_DataSpreadsheetBody = require("./DataSpreadsheetBody.js");
const require_DataSpreadsheetHeader = require("./DataSpreadsheetHeader.js");
const require_createActiveCellFn = require("./utils/createActiveCellFn.js");
const require_getCellSize = require("./utils/getCellSize.js");
const require_getScrollbarWidth = require("../../global/js/utils/getScrollbarWidth.js");
const require_handleEditSubmit = require("./utils/handleEditSubmit.js");
let react = require("react");
react = require_runtime.__toESM(react);
let prop_types = require("prop-types");
prop_types = require_runtime.__toESM(prop_types);
let react_table = require("react-table");
//#region src/components/DataSpreadsheet/DataSpreadsheet.tsx
var import_classnames = /* @__PURE__ */ require_runtime.__toESM(require_index.default);
const blockClass = `${require_settings.pkg.prefix}--data-spreadsheet`;
const componentName = "DataSpreadsheet";
const defaults = {
columns: Object.freeze([]),
data: Object.freeze([]),
defaultEmptyRowCount: 16,
onDataUpdate: Object.freeze(() => {}),
onColDrag: Object.freeze(() => {}),
onActiveCellChange: Object.freeze(() => {}),
onSelectionAreaChange: Object.freeze(() => {}),
theme: "light"
};
/**
* DataSpreadsheet: used to organize and display large amounts of structured data, separated by columns and rows in a grid-like format.
* @deprecated This component is deprecated and will be removed in a future major version. Please migrate to AG Grid, TanStack Table, or Carbon DataTable.
*/
const DataSpreadsheet = react.default.forwardRef(({ cellSize = "sm", className, columns = defaults.columns, data = defaults.data, defaultEmptyRowCount = defaults.defaultEmptyRowCount, onDataUpdate = defaults.onDataUpdate, onColDrag = defaults.onColDrag, id, onActiveCellChange = defaults.onActiveCellChange, onSelectionAreaChange = defaults.onSelectionAreaChange, renderRowHeader, renderRowHeaderDirection, disableColumnSwapping = false, readOnlyTable = false, selectAllAriaLabel, spreadsheetAriaLabel, theme, totalVisibleColumns, ...rest }, ref) => {
const multiKeyTrackingRef = (0, react.useRef)(null);
const localRef = (0, react.useRef)(void 0);
const spreadsheetRef = ref || localRef;
const focusedElement = require_useActiveElement.useActiveElement();
const [currentColumns, setCurrentColumns] = (0, react.useState)(columns);
const [pastColumns, setPastColumns] = (0, react.useState)([]);
const [containerHasFocus, setContainerHasFocus] = (0, react.useState)(false);
const [activeCellCoordinates, setActiveCellCoordinates] = (0, react.useState)(null);
const [selectionAreas, setSelectionAreas] = (0, react.useState)([]);
const [selectionAreaData, setSelectionAreaData] = (0, react.useState)([]);
const [clickAndHoldActive, setClickAndHoldActive] = (0, react.useState)(false);
const [currentMatcher, setCurrentMatcher] = (0, react.useState)("");
const [isEditing, setIsEditing] = (0, react.useState)(false);
const [cellEditorValue, setCellEditorValue] = (0, react.useState)("");
const [headerCellHoldActive, setHeaderCellHoldActive] = (0, react.useState)(false);
const [selectedHeaderReorderActive, setSelectedHeaderReorderActive] = (0, react.useState)(false);
const isBlurSpreadsheet = (0, react.useRef)(false);
const [isActiveHeaderCellChanged, setIsActiveHeaderCellChanged] = (0, react.useState)(false);
const [activeCellInsideSelectionArea, setActiveCellInsideSelectionArea] = (0, react.useState)(false);
const previousState = require_usePreviousValue.usePreviousValue({
activeCellCoordinates,
isEditing,
cellEditorValue,
selectedHeaderReorderActive
}) || {};
const cellSizeValue = require_getCellSize.getCellSize(cellSize);
const cellEditorRef = (0, react.useRef)(void 0);
const [activeCellContent, setActiveCellContent] = (0, react.useState)();
const activeCellRef = (0, react.useRef)(void 0);
const cellEditorRulerRef = (0, react.useRef)(void 0);
const hasCustomRowHeader = typeof renderRowHeader === "function";
const maxNumRowsCount = data.length.toString().length;
const defaultColumn = (0, react.useMemo)(() => ({
width: 150,
rowHeaderWidth: hasCustomRowHeader ? 40 + maxNumRowsCount * 8.56 : 64,
rowHeight: cellSizeValue
}), [
cellSizeValue,
hasCustomRowHeader,
maxNumRowsCount
]);
const { keysPressedList, usingMac } = require_useMultipleKeyTracking.useMultipleKeyTracking({
ref: multiKeyTrackingRef,
containerHasFocus,
isEditing
});
const scrollBarSize = (0, react.useMemo)(() => require_getScrollbarWidth.getScrollbarWidth(), []);
const { getTableProps, getTableBodyProps, headerGroups, rows, totalColumnsWidth, prepareRow, setColumnOrder, visibleColumns } = (0, react_table.useTable)({
columns,
data,
defaultColumn
}, react_table.useBlockLayout, react_table.useColumnOrder);
const updateData = (0, react.useCallback)((rowIndex, columnId, newValue) => {
onDataUpdate((prev) => prev.map((row, index) => {
if (index === rowIndex) return {
...prev[rowIndex],
[columnId]: cellEditorValue || newValue
};
return row;
}));
}, [cellEditorValue, onDataUpdate]);
(0, react.useEffect)(() => {
const currentHeaders = [];
if (Object.keys(currentColumns).length > 0) Object.keys(currentColumns).forEach((itemIndex) => {
if (typeof currentColumns[itemIndex].Header === "object") if (currentColumns[itemIndex].column_name) currentHeaders.push(currentColumns[itemIndex].column_name);
else currentHeaders.push(require_getNodeTextContent.getNodeTextContent(currentColumns[itemIndex].Header));
else if (currentColumns[itemIndex].Header) currentHeaders.push(currentColumns[itemIndex].Header);
});
if (previousState.selectedHeaderReorderActive) setPastColumns(currentHeaders);
if (!previousState.selectedHeaderReorderActive && pastColumns.length > 0 && !headerCellHoldActive && JSON.stringify(currentHeaders) !== JSON.stringify(pastColumns)) {
onColDrag({
headers: currentHeaders,
data: activeCellContent.props.data
});
if (currentHeaders.length === 0) setPastColumns([]);
}
}, [
previousState?.selectedHeaderReorderActive,
currentColumns,
headerCellHoldActive,
columns,
activeCellContent,
onColDrag,
pastColumns
]);
const removeActiveCell = (0, react.useCallback)(() => {
const activeCellHighlight = spreadsheetRef?.current?.querySelector(`.${blockClass}__active-cell--highlight`);
if (activeCellHighlight) activeCellHighlight.style.display = "none";
}, [spreadsheetRef]);
const removeCellEditor = (0, react.useCallback)(() => {
setCellEditorValue("");
setIsEditing(false);
if (cellEditorRef?.current) cellEditorRef.current.style.display = "none";
}, []);
(0, react.useEffect)(() => {
const prevCoords = previousState?.activeCellCoordinates;
if ((prevCoords?.row !== activeCellCoordinates?.row || prevCoords?.column !== activeCellCoordinates?.column) && isEditing) {
const cellProps = rows[Number(prevCoords?.row)].cells[Number(prevCoords?.column)];
removeCellEditor();
updateData(prevCoords?.row, cellProps.column.id, void 0);
if (cellEditorRulerRef?.current) cellEditorRulerRef.current.textContent = "";
}
if (prevCoords?.row !== activeCellCoordinates?.row || prevCoords?.column !== activeCellCoordinates?.column) {
if (activeCellCoordinates && activeCellCoordinates?.row !== "header" && activeCellCoordinates?.column !== "header") {
const activeCellFullData = typeof activeCellCoordinates?.column === "number" && typeof activeCellCoordinates?.row === "number" ? rows[activeCellCoordinates?.row].cells[activeCellCoordinates?.column] : null;
if (activeCellFullData) setActiveCellContent(activeCellFullData.render("Cell"));
else setActiveCellContent(null);
}
if (activeCellCoordinates && activeCellCoordinates?.row === "header" || activeCellCoordinates?.column === "header") {
setActiveCellContent(null);
setIsActiveHeaderCellChanged((prev) => !prev);
}
}
if (isEditing && previousState.activeCellCoordinates && isBlurSpreadsheet.current) {
setActiveCellContent(previousState.cellEditorValue);
isBlurSpreadsheet.current = false;
removeCellEditor();
}
}, [
isBlurSpreadsheet,
activeCellCoordinates,
previousState?.activeCellCoordinates,
previousState?.cellEditorValue,
updateData,
rows,
isEditing,
removeCellEditor,
activeCellContent
]);
const createActiveCell = (0, react.useCallback)(({ placementElement, coords, addToHeader = false }) => {
const activeCellFullData = typeof coords?.column === "number" && typeof coords?.row === "number" ? rows[coords?.row].cells[coords?.column] : null;
require_createActiveCellFn.createActiveCellFn({
placementElement,
coords,
addToHeader,
contextRef: spreadsheetRef,
blockClass,
onActiveCellChange,
activeCellValue: activeCellFullData ? Object.values(activeCellFullData.row.values)[coords?.column] : null,
activeCellRef,
cellEditorRef,
defaultColumn
});
}, [
spreadsheetRef,
rows,
onActiveCellChange,
defaultColumn
]);
require_useResetSpreadsheetFocus.useResetSpreadsheetFocus({
focusedElement,
removeActiveCell,
setContainerHasFocus
});
require_useSpreadsheetOutsideClick.useSpreadsheetOutsideClick({
isBlurSpreadsheet,
spreadsheetRef,
setActiveCellCoordinates,
setSelectionAreas,
removeActiveCell,
setContainerHasFocus,
removeCellEditor
});
require_useMoveActiveCell.useMoveActiveCell({
spreadsheetRef,
activeCellCoordinates,
containerHasFocus,
createActiveCell,
activeCellContent,
isActiveHeaderCellChanged
});
const handleInitialArrowPress = (0, react.useCallback)(() => {
setActiveCellInsideSelectionArea(false);
if (!activeCellCoordinates) setActiveCellCoordinates({
column: "header",
row: "header"
});
}, [activeCellCoordinates]);
const updateActiveCellCoordinates = (0, react.useCallback)(({ coords = { ...activeCellCoordinates }, updatedValue, optOutOfSelectionAreaUpdate = false }) => {
const newActiveCell = {
...coords,
...updatedValue
};
setActiveCellCoordinates(newActiveCell);
if (newActiveCell.row !== "header" && newActiveCell.column !== "header" && !optOutOfSelectionAreaUpdate) {
const tempMatcher = require_uuidv4.default();
setSelectionAreas([{
point1: newActiveCell,
matcher: tempMatcher
}]);
setCurrentMatcher(tempMatcher);
}
}, [activeCellCoordinates]);
const handleHomeEndKey = (0, react.useCallback)(({ type }) => {
updateActiveCellCoordinates({
coords: { ...activeCellCoordinates },
updatedValue: { column: type === "Home" ? 0 : columns.length - 1 }
});
require_removeCellSelections.removeCellSelections({
matcher: void 0,
spreadsheetRef
});
}, [
activeCellCoordinates,
updateActiveCellCoordinates,
spreadsheetRef,
columns.length
]);
const checkForReturnCondition = (0, react.useCallback)((key) => {
return isEditing || key === "Meta" || key === "Control";
}, [isEditing]);
const handleArrowKeyPress = (0, react.useCallback)((arrowKey) => {
event?.preventDefault();
handleInitialArrowPress();
const coordinatesClone = { ...activeCellCoordinates };
let updatedValue;
switch (arrowKey) {
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;
case "ArrowUp":
if (coordinatesClone.row === "header") return;
if (typeof coordinatesClone.row === "number") if (coordinatesClone.row === 0) updatedValue = { row: "header" };
else updatedValue = { row: coordinatesClone.row - 1 };
break;
case "ArrowRight":
if (coordinatesClone.column === "header") updatedValue = { column: 0 };
if (typeof coordinatesClone.column === "number") if (columns.length - 1 === coordinatesClone.column) return;
else updatedValue = { column: coordinatesClone.column + 1 };
break;
case "ArrowDown":
if (coordinatesClone.row === "header") updatedValue = { row: 0 };
if (typeof coordinatesClone.row === "number") if (rows.length - 1 === coordinatesClone.row) return;
else updatedValue = { row: coordinatesClone.row + 1 };
break;
}
if (updatedValue) updateActiveCellCoordinates({
coords: coordinatesClone,
updatedValue
});
}, [
handleInitialArrowPress,
updateActiveCellCoordinates,
activeCellCoordinates,
columns,
rows
]);
const handleKeyPressEvent = (0, react.useCallback)((event) => {
require_commonEventHandlers.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
]);
const startEditMode = () => {
setIsEditing(true);
setClickAndHoldActive(false);
const activeCellValue = (typeof activeCellCoordinates?.column === "number" && typeof activeCellCoordinates?.row === "number" ? rows[activeCellCoordinates?.row].cells[activeCellCoordinates?.column] : null)?.row?.cells?.[Number(activeCellCoordinates?.column)]?.value;
setCellEditorValue(activeCellValue || "");
if (cellEditorRulerRef?.current) cellEditorRulerRef.current.textContent = activeCellValue;
if (cellEditorRef?.current && activeCellRef?.current) cellEditorRef.current.style.width = activeCellRef?.current?.style?.width;
};
(0, react.useEffect)(() => {
if (isEditing && !previousState?.isEditing) {
cellEditorRef?.current?.setSelectionRange(Number(cellEditorRulerRef?.current?.textContent?.length), Number(cellEditorRulerRef?.current?.textContent?.length));
cellEditorRef?.current?.focus();
}
}, [isEditing, previousState?.isEditing]);
const handleActiveCellClick = () => {
if (activeCellCoordinates?.row === "header" || activeCellCoordinates?.column === "header") {
const indexValue = activeCellCoordinates?.row === "header" ? activeCellCoordinates?.column : activeCellCoordinates?.row;
if (activeCellCoordinates?.row === "header" && activeCellCoordinates?.column === "header") return;
handleRowColumnHeaderClick({
isKeyboard: false,
index: Number(indexValue)
});
}
};
const handleActiveCellMouseUp = () => {
setClickAndHoldActive(false);
};
const handleActiveCellMouseDown = () => {
if (activeCellCoordinates?.row !== "header" || activeCellCoordinates?.column !== "header") {
const tempMatcher = require_uuidv4.default();
setClickAndHoldActive(true);
require_removeCellSelections.removeCellSelections({
matcher: null,
spreadsheetRef
});
setSelectionAreas([{
point1: activeCellCoordinates,
matcher: tempMatcher
}]);
setCurrentMatcher(tempMatcher);
setSelectionAreaData([]);
setActiveCellInsideSelectionArea(false);
}
};
const handleActiveCellKeyDown = (event) => {
const { key } = event;
if (key === "Enter" && !activeCellInsideSelectionArea && !readOnlyTable) {
if (activeCellCoordinates?.column !== "header" && activeCellCoordinates?.row !== "header") startEditMode();
if (activeCellCoordinates?.row === "header" || activeCellCoordinates?.column === "header") handleRowColumnHeaderClick({ isKeyboard: true });
}
};
const handleRowColumnHeaderClick = ({ isKeyboard, index = -1 }) => {
const handleHeaderCellProps = {
activeCellCoordinates,
rows,
columns,
currentMatcher,
setActiveCellCoordinates,
setCurrentMatcher,
setSelectionAreas,
spreadsheetRef,
index,
isKeyboard,
setSelectionAreaData,
isHoldingCommandKey: null,
isHoldingShiftKey: null
};
if (activeCellCoordinates?.row === "header" && activeCellCoordinates?.column !== "header") require_handleHeaderCellSelection.handleHeaderCellSelection({
type: "column",
...handleHeaderCellProps
});
if (activeCellCoordinates?.column === "header" && activeCellCoordinates?.row !== "header") require_handleHeaderCellSelection.handleHeaderCellSelection({
type: "row",
...handleHeaderCellProps
});
if (activeCellCoordinates?.column === "header" && activeCellCoordinates?.row === "header") require_selectAllCells.selectAllCells({
ref: spreadsheetRef,
setCurrentMatcher,
setSelectionAreas,
rows,
columns,
activeCellCoordinates,
updateActiveCellCoordinates
});
};
const handleActiveCellDoubleClick = (readOnlyTable) => {
if (!readOnlyTable) startEditMode();
};
require_useSpreadsheetEdit.useSpreadsheetEdit({
isEditing,
rows,
activeCellCoordinates,
activeCellRef,
cellEditorRef,
cellEditorRulerRef,
visibleColumns,
defaultColumn,
cellEditorValue
});
const handleActiveCellMouseEnterCallback = (0, react.useCallback)((areas, clickHold) => {
if (!currentMatcher) return;
if (areas && areas.length && clickHold && currentMatcher) setSelectionAreas((prev) => {
const selectionAreaClone = require_deepCloneObject.deepCloneObject(prev);
const indexOfItemToUpdate = selectionAreaClone.findIndex((item) => item.matcher === currentMatcher);
if (indexOfItemToUpdate === -1) return prev;
if (typeof selectionAreaClone[indexOfItemToUpdate].point2 === "object" && selectionAreaClone[indexOfItemToUpdate].areaCreated) {
selectionAreaClone[indexOfItemToUpdate].point2 = selectionAreaClone[indexOfItemToUpdate].point1;
selectionAreaClone[indexOfItemToUpdate].areaCreated = false;
setActiveCellInsideSelectionArea(false);
require_removeCellSelections.removeCellSelections({
matcher: currentMatcher,
spreadsheetRef
});
return selectionAreaClone;
}
return prev;
});
}, [spreadsheetRef, currentMatcher]);
const handleActiveCellMouseEnter = (0, react.useCallback)(() => {
handleActiveCellMouseEnterCallback(selectionAreas, clickAndHoldActive);
}, [
clickAndHoldActive,
selectionAreas,
handleActiveCellMouseEnterCallback
]);
return /* @__PURE__ */ react.default.createElement("div", {
...rest,
...getTableProps(),
...require_devtools.getDevtoolsProps(componentName),
className: (0, import_classnames.default)(blockClass, className, `${blockClass}--interactive-cell-element`, {
[`${blockClass}__container-has-focus`]: containerHasFocus,
[`${blockClass}__${theme}`]: theme === "dark"
}),
ref: spreadsheetRef,
role: "grid",
tabIndex: 0,
"aria-rowcount": rows?.length || 0,
"aria-colcount": columns?.length || 0,
"aria-label": spreadsheetAriaLabel,
onKeyDown: handleKeyPressEvent,
onFocus: () => setContainerHasFocus(true)
}, /* @__PURE__ */ react.default.createElement("div", { ref: multiKeyTrackingRef }, /* @__PURE__ */ react.default.createElement(require_DataSpreadsheetHeader.DataSpreadsheetHeader, {
ref: spreadsheetRef,
activeCellCoordinates,
cellSize,
columns,
currentMatcher,
defaultColumn,
selectedHeaderReorderActive,
setSelectedHeaderReorderActive,
headerGroups,
rows,
scrollBarSize,
selectionAreas,
setActiveCellCoordinates,
setSelectionAreas,
setCurrentMatcher,
setSelectionAreaData,
disableColumnSwapping,
readOnlyTable,
totalVisibleColumns,
updateActiveCellCoordinates,
setHeaderCellHoldActive,
headerCellHoldActive,
visibleColumns,
selectAllAriaLabel
}), /* @__PURE__ */ react.default.createElement(require_DataSpreadsheetBody.DataSpreadsheetBody, {
activeCellRef,
activeCellCoordinates,
setCurrentColumns,
ref: spreadsheetRef,
clickAndHoldActive,
setClickAndHoldActive,
currentMatcher,
setCurrentMatcher,
setContainerHasFocus,
selectedHeaderReorderActive,
setSelectedHeaderReorderActive,
selectionAreas,
setSelectionAreas,
headerGroups,
defaultColumn,
getTableBodyProps,
hasCustomRowHeader,
onDataUpdate,
renderRowHeaderDirection,
renderRowHeader,
onActiveCellChange,
onSelectionAreaChange,
prepareRow,
rows,
selectionAreaData,
setSelectionAreaData,
setActiveCellCoordinates,
scrollBarSize,
totalColumnsWidth,
id,
columns,
defaultEmptyRowCount,
setActiveCellInsideSelectionArea,
totalVisibleColumns,
setHeaderCellHoldActive,
setColumnOrder,
visibleColumns
}), /* @__PURE__ */ react.default.createElement("button", {
onMouseDown: handleActiveCellMouseDown,
onMouseUp: handleActiveCellMouseUp,
onClick: handleActiveCellClick,
onKeyDown: handleActiveCellKeyDown,
onDoubleClick: () => handleActiveCellDoubleClick(readOnlyTable),
onMouseEnter: handleActiveCellMouseEnter,
ref: activeCellRef,
className: (0, import_classnames.default)(`${blockClass}--interactive-cell-element`, `${blockClass}__active-cell--highlight`, { [`${blockClass}__active-cell--with-selection`]: activeCellInsideSelectionArea }),
type: "button"
}, activeCellContent), /* @__PURE__ */ react.default.createElement("textarea", {
id: `${blockClass}__cell-editor-text-area`,
value: cellEditorValue,
onKeyDown: require_handleEditSubmit.handleEditSubmit({
activeCellCoordinates,
cellEditorRulerRef,
columns,
previousState,
removeCellEditor,
rows,
setActiveCellCoordinates,
setCurrentMatcher,
setSelectionAreas,
spreadsheetRef,
updateData
}),
onChange: (event) => {
if (previousState.isEditing) {
setCellEditorValue(event.target.value);
if (cellEditorRulerRef?.current) cellEditorRulerRef.current.textContent = event.target.value;
}
},
ref: cellEditorRef,
"aria-labelledby": activeCellCoordinates ? `${blockClass}__cell--${activeCellCoordinates?.row}--${activeCellCoordinates?.column}` : "",
className: (0, import_classnames.default)(`${blockClass}__cell-editor`, `${blockClass}--interactive-cell-element`, `${blockClass}__cell-editor--${cellSize}`, { [`${blockClass}__cell-editor--active`]: isEditing })
}), /* @__PURE__ */ react.default.createElement("pre", {
"aria-hidden": true,
ref: cellEditorRulerRef,
className: `${blockClass}__cell-editor-ruler`
})));
});
/**@ts-ignore*/
DataSpreadsheet.deprecated = {
level: "warn",
details: `${componentName} is deprecated and will be removed in a future major version. Please migrate to AG Grid (https://www.ag-grid.com/), TanStack Table (https://tanstack.com/table/), or Carbon DataTable.`
};
DataSpreadsheet.displayName = componentName;
DataSpreadsheet.propTypes = {
/**
* Specifies the cell height
*/
cellSize: prop_types.default.oneOf([
"xs",
"sm",
"md",
"lg"
]),
/**
* Provide an optional class to be applied to the containing node.
*/
className: prop_types.default.string,
/**
* The data that will build the column headers
*/
/**@ts-ignore */
columns: prop_types.default.arrayOf(prop_types.default.shape({
Header: prop_types.default.string,
accessor: prop_types.default.oneOfType([prop_types.default.string, prop_types.default.func]),
Cell: prop_types.default.func
})),
/**
* The spreadsheet data that will be rendered in the body of the spreadsheet component
*/
/**@ts-ignore */
data: prop_types.default.arrayOf(prop_types.default.shape),
/**
* Sets the number of empty rows to be created when there is no data provided
*/
defaultEmptyRowCount: prop_types.default.number,
/**
* Disable column swapping, default false
*/
disableColumnSwapping: prop_types.default.bool,
/**
* Check if spreadsheet is using custom row header component attached
*/
hasCustomRowHeader: prop_types.default.bool,
/**
* The spreadsheet id
*/
id: prop_types.default.oneOfType([prop_types.default.number, prop_types.default.string]),
/**
* The event handler that is called when the active cell changes
*/
onActiveCellChange: prop_types.default.func,
/**
* Callback for when columns are dropped after dragged
*/
onColDrag: prop_types.default.func,
/**
* The setter fn for the data prop
*/
onDataUpdate: prop_types.default.func,
/**
* The event handler that is called when the selection area values change
*/
onSelectionAreaChange: prop_types.default.func,
/**
* Read-only table
*/
readOnlyTable: prop_types.default.bool,
/**
* Component next to numbering rows
*/
renderRowHeader: prop_types.default.func,
/**
* Component next to numbering rows
*/
renderRowHeaderDirection: prop_types.default.oneOf(["left", "right"]),
/**
* The aria label applied to the Select all button
*/
selectAllAriaLabel: prop_types.default.string.isRequired,
/**
* The aria label applied to the Data spreadsheet component
*/
spreadsheetAriaLabel: prop_types.default.string.isRequired,
/**
* The theme the DataSpreadsheet should use (only used to render active cell/selection area colors on dark theme)
*/
theme: prop_types.default.oneOf(["light", "dark"]),
/**
* The total number of columns to be initially visible, additional columns will be rendered and
* visible via horizontal scrollbar
*/
totalVisibleColumns: prop_types.default.number
};
//#endregion
exports.DataSpreadsheet = DataSpreadsheet;