import React from "react";
import { getDataTableDetailsPanelId, useDataTableDetailsPanel, } from "../hooks/useTableDetailsPanel.js";
import { useDataTableContext } from "../root/DataTableRoot.context.js";
function DataTableDetailsPanelRow({ rowId, rowData, }) {
    const { tableId, totalColSpan } = useDataTableContext();
    const { enableDetailsPanel, isExpanded, getDetailsPanelContent, getDetailsPanelHeight, } = useDataTableDetailsPanel();
    if (!enableDetailsPanel) {
        return null;
    }
    if (!isExpanded(rowId)) {
        return null;
    }
    const content = getDetailsPanelContent === null || getDetailsPanelContent === void 0 ? void 0 : getDetailsPanelContent(rowData);
    const expansionId = getDataTableDetailsPanelId(tableId, rowId);
    if (!content) {
        return null;
    }
    const panelHeight = getDetailsPanelHeight === null || getDetailsPanelHeight === void 0 ? void 0 : getDetailsPanelHeight(rowData);
    const style = panelHeight
        ? { height: panelHeight, overflow: "auto" }
        : { height: "auto" };
    return (React.createElement("tr", { className: "aksel-data-table__details-panel-row" },
        React.createElement("td", { id: expansionId, colSpan: totalColSpan, className: "aksel-data-table__details-panel-row-cell" },
            React.createElement("div", { style: style }, content))));
}
export { DataTableDetailsPanelRow };
//# sourceMappingURL=DataTableDetailsPanelRow.js.map