import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__ from "react/jsx-runtime";
import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
import * as __WEBPACK_EXTERNAL_MODULE__index_mjs__ from "../../../index.mjs";
import * as __WEBPACK_EXTERNAL_MODULE__built_in_scroll_assistant_useJoystick_mjs__ from "../../../built-in/scroll-assistant/useJoystick.mjs";
const ScrollArea = ()=>{
    const ref = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
    const { t } = (0, __WEBPACK_EXTERNAL_MODULE__index_mjs__.useTranslation)();
    (0, __WEBPACK_EXTERNAL_MODULE__built_in_scroll_assistant_useJoystick_mjs__.useJoystick)(ref);
    (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
        const child = ref.current;
        const handlerScroll = (e)=>{
            if (e.target === child) {
                e.preventDefault();
                e.stopPropagation();
            }
        };
        if (child) child.addEventListener('mousewheel', handlerScroll, {
            passive: false
        });
        return ()=>{
            if (child) child.removeEventListener('mousewheel', handlerScroll);
        };
    }, [
        ref
    ]);
    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)("div", {
        ref: ref,
        style: {
            display: 'grid',
            placeItems: 'center',
            minWidth: '150px',
            height: '30px',
            padding: '2px 10px',
            border: '2px dashed rgba(0, 0, 0, 0.2)',
            color: 'rgba(0, 0, 0, 0.2)',
            cursor: 'pointer',
            userSelect: 'none'
        },
        children: t('Horizontal scrolling area')
    });
};
const ScrollArea_rslib_entry_ = ScrollArea;
export { ScrollArea, ScrollArea_rslib_entry_ as default };
