"use client";
import { jsx as _jsx } from "react/jsx-runtime";
import { forwardRef, useMemo } from "react";
import { useEnsuredRef } from "../useEnsuredRef.js";
import { TableContainerProvider } from "./TableContainerProvider.js";
import { tableContainer } from "./tableContainerStyles.js";
/**
 * **Client Component**
 *
 * An extremely "useful" component that should be used with the `Table`
 * component if you want to make a responsive table within the page. If you
 * don't want to use this component, you can just apply `overflow: auto` to a
 * parent element of the table.
 */ export const TableContainer = /*#__PURE__*/ forwardRef(function TableContainer(props, ref) {
    const { className, children, ...remaining } = props;
    const [nodeRef, refCallback] = useEnsuredRef(ref);
    const value = useMemo(()=>({
            exists: true,
            containerRef: nodeRef
        }), [
        nodeRef
    ]);
    return /*#__PURE__*/ _jsx(TableContainerProvider, {
        value: value,
        children: /*#__PURE__*/ _jsx("div", {
            ...remaining,
            ref: refCallback,
            className: tableContainer({
                className
            }),
            children: children
        })
    });
});

//# sourceMappingURL=TableContainer.js.map