import React, { useEffect, useRef, useState } from 'react';
import ResizeObserver from 'resize-observer-polyfill';
import classnames from 'classnames';
import { COLUMN_SIZE } from '../types';
import { jsx as _jsx } from "react/jsx-runtime";
const DEFAULT_TABLE_WIDTH = process.env.NODE_ENV === 'test' ? 600 : undefined;
export const TableWrapper = ({
  className,
  testId,
  children,
  defaultWidth = DEFAULT_TABLE_WIDTH
}) => {
  const [width, setWidth] = useState(defaultWidth);
  const wrapper = useRef(null);
  useEffect(() => {
    const outputWidth = () => {
      setWidth((wrapper.current?.offsetWidth || 0) - COLUMN_SIZE.BORDER_OFFSET);
    };
    if (wrapper.current) {
      const observer = new ResizeObserver(() => window.requestAnimationFrame(outputWidth));
      observer.observe(wrapper.current);
      return () => observer.disconnect();
    }
  }, []);
  return /*#__PURE__*/_jsx("div", {
    className: classnames('react-table-wrapper', className),
    "test-id": testId,
    ref: wrapper,
    children: width ? children({
      width
    }) : null
  });
};