import { t as useIsVisible } from "./useIsVisible.js";
import { t as useSize } from "./useSize.js";
import { t as useStopPropagation } from "./usestopPropagation.js";
import classNames from "classnames";
import { useRef } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import styles from "./components/HorizontalScroll/styles.module.scss";
var ROOT_MARGIN_OFFSET = "3px";
const HorizontalScroll = ({ children, childWidth, testId, ...rest }) => {
	const viewportRef = useRef(null);
	const leftRef = useRef(null);
	const rightRef = useRef(null);
	const leftIsVisible = useIsVisible(leftRef, 1, {
		root: viewportRef?.current,
		rootMargin: ROOT_MARGIN_OFFSET
	}, true);
	const rightIsVisible = useIsVisible(rightRef, 1, {
		root: viewportRef?.current,
		rootMargin: ROOT_MARGIN_OFFSET
	}, true);
	const { width: viewPortWidth = 0 } = useSize(viewportRef) || {};
	const isOverflowing = childWidth > viewPortWidth;
	const viewportClasses = classNames(styles.horizontalscroll__viewport, isOverflowing && styles["horizontalscroll__viewport--overflow"]);
	const hasAriaAttributes = rest["aria-label"] || rest["aria-labelledby"];
	useStopPropagation(viewportRef, ["touchstart", "touchmove"]);
	return /* @__PURE__ */ jsx("div", {
		className: styles.horizontalscroll,
		"data-testid": testId,
		children: /* @__PURE__ */ jsxs("div", {
			className: viewportClasses,
			ref: viewportRef,
			tabIndex: hasAriaAttributes ? 0 : void 0,
			role: hasAriaAttributes ? "region" : void 0,
			...rest,
			children: [
				/* @__PURE__ */ jsx("div", { className: classNames(styles.horizontalscroll__indicator, styles["horizontalscroll__indicator--left"], !leftIsVisible && styles["horizontalscroll__indicator--visible"]) }),
				/* @__PURE__ */ jsx("div", { className: classNames(styles.horizontalscroll__indicator, styles["horizontalscroll__indicator--right"], !rightIsVisible && styles["horizontalscroll__indicator--visible"]) }),
				/* @__PURE__ */ jsx("div", { ref: leftRef }),
				children,
				/* @__PURE__ */ jsx("div", { ref: rightRef })
			]
		})
	});
};
var HorizontalScroll_default$1 = HorizontalScroll;
export { HorizontalScroll as n, HorizontalScroll_default$1 as t };

//# sourceMappingURL=HorizontalScroll.js.map