import React from "react";
import { ChevronDownIcon, ChevronRightIcon } from "@navikt/aksel-icons";
import { Button } from "../../../button/index.js";
import { useDataTableContext } from "../root/DataTableRoot.context.js";
function DataTableSubRowToggle({ details }) {
    const { tableItems } = useDataTableContext();
    const subRows = details.children;
    const hasSubRows = subRows && subRows.length > 0;
    const isRowExpanded = tableItems.isSubRowExpanded(details.id);
    return (React.createElement("div", { className: "aksel-data-table__nested-toggle" }, hasSubRows && (React.createElement(Button, { variant: "tertiary", "data-color": "neutral", size: "small", onClick: (e) => {
            e.stopPropagation();
            tableItems.onExpandedRowIdsChange(details.id);
        }, "aria-expanded": isRowExpanded, "aria-label": isRowExpanded ? "Skjul under-rader" : "Vis under-rader", icon: isRowExpanded ? (React.createElement(ChevronDownIcon, { "aria-hidden": true })) : (React.createElement(ChevronRightIcon, { "aria-hidden": true })) }))));
}
export { DataTableSubRowToggle };
//# sourceMappingURL=DataTableSubRowToggle.js.map