@hypothesis/frontend-shared/lib/components/navigation/TabList.js

Shared components, styles and utilities for Hypothesis projects

var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/components/navigation/TabList.tsx";
import classnames from 'classnames';
import { useArrowKeyNavigation } from '../../hooks/use-arrow-key-navigation';
import { useSyncedRef } from '../../hooks/use-synced-ref';
import { downcastRef } from '../../util/typing';
import { jsxDEV as _jsxDEV } from "preact/jsx-dev-runtime";
/**
 * Render a tablist container for a set of tabs, with arrow key navigation per
 * https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/
 */
export default function TabList({
  children,
  classes,
  elementRef,
  vertical = false,
  ...htmlAttributes
}) {
  const tabListRef = useSyncedRef(elementRef);
  useArrowKeyNavigation(tabListRef, {
    selector: 'button',
    horizontal: true,
    vertical
  });
  return _jsxDEV("div", {
    "data-component": "TabList",
    ...htmlAttributes,
    ref: downcastRef(tabListRef),
    className: classnames('flex focus-visible-ring', {
      'flex-col': vertical
    }, classes),
    role: "tablist",
    "aria-orientation": vertical ? 'vertical' : 'horizontal',
    children: children
  }, void 0, false, {
    fileName: _jsxFileName,
    lineNumber: 45,
    columnNumber: 5
  }, this);
}
//# sourceMappingURL=TabList.js.map