@hypothesis/frontend-shared/lib/components/data/Scroll.js

Shared components, styles and utilities for Hypothesis projects

var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/components/data/Scroll.tsx";
import classnames from 'classnames';
import { useMemo } from 'preact/hooks';
import { useSyncedRef } from '../../hooks/use-synced-ref';
import { downcastRef } from '../../util/typing';
import ScrollContext from './ScrollContext';
import { jsxDEV as _jsxDEV } from "preact/jsx-dev-runtime";
/**
 * Render a fluid container that scrolls on overflow.
 */
export default function Scroll({
  children,
  classes,
  elementRef,
  variant = 'raised',
  ...htmlAttributes
}) {
  const ref = useSyncedRef(elementRef);
  const scrollContext = useMemo(() => ({
    scrollRef: ref
  }), [ref]);
  return _jsxDEV(ScrollContext.Provider, {
    value: scrollContext,
    children: _jsxDEV("div", {
      "data-component": "Scroll",
      ...htmlAttributes,
      ref: downcastRef(ref),
      className: classnames(
      // Prevent overflow by overriding `min-height: auto`.
      // See https://stackoverflow.com/a/66689926/434243.
      'min-h-0', 'h-full w-full overflow-auto', {
        'scroll-shadows': variant === 'raised'
      }, classes),
      children: children
    }, void 0, false, {
      fileName: _jsxFileName,
      lineNumber: 39,
      columnNumber: 7
    }, this)
  }, void 0, false, {
    fileName: _jsxFileName,
    lineNumber: 38,
    columnNumber: 5
  }, this);
}
//# sourceMappingURL=Scroll.js.map