/** @license MIT | @cube-dev/ui-kit v0.142.7 | Cube Dev Team */
import { useCombinedRefs } from "../utils/react/useCombinedRefs.js";
import { filterBaseProps, tasty } from "@tenphi/tasty";
import { forwardRef, useCallback, useEffect, useState } from "react";
import { jsx } from "react/jsx-runtime";

//#region src/components/GridProvider.tsx
const GridElement = tasty({ styles: { display: "contents" } });
const COLUMN_WIDTH = "(($grid-width - ($column-gap * ($columns-amount - 1))) / $columns-amount)";
const GridProvider = forwardRef(function GridProvider(props, outerRef) {
	let ref = useCombinedRefs(outerRef);
	let { children, columns = 2, gap = "0", width: forcedWidth, initialWidth } = props;
	let [width, setWidth] = useState(forcedWidth || initialWidth || "100vw");
	const resizeCallback = useCallback(() => {
		const el = ref?.current?.parentElement;
		if (!el) return;
		const computedStyle = getComputedStyle(el);
		setWidth(`${el.clientWidth - parseFloat(computedStyle.paddingLeft) - parseFloat(computedStyle.paddingRight)}px`);
	}, [
		ref,
		columns,
		gap
	]);
	useEffect(() => {
		if (forcedWidth) return;
		const el = ref && ref.current && ref.current.parentNode;
		if (!el) return;
		let sensor;
		import("../utils/ResizeSensor.js").then((module) => module.ResizeSensor).then((ResizeSensor) => {
			sensor = new ResizeSensor(el, resizeCallback);
		});
		return () => {
			if (sensor) sensor.detach();
		};
	}, [resizeCallback]);
	useEffect(() => {
		if (forcedWidth) return;
		resizeCallback();
	}, [resizeCallback]);
	return /* @__PURE__ */ jsx(GridElement, {
		...filterBaseProps(props, { eventProps: true }),
		ref,
		styles: {
			"--grid-width": width,
			"--columns-amount": columns,
			"--column-gap": gap,
			"--column-width": COLUMN_WIDTH
		},
		children
	});
});

//#endregion
export { GridProvider };
//# sourceMappingURL=GridProvider.js.map