@base-ui-components/react/esm/composite/root/CompositeRoot.js

Base UI is a library of headless ('unstyled') React components and low-level hooks. You gain complete control over your app's CSS and accessibility features.

'use client';

import * as React from 'react';
import PropTypes from 'prop-types';
import { CompositeList } from '../list/CompositeList.js';
import { useCompositeRoot } from './useCompositeRoot.js';
import { CompositeRootContext } from './CompositeRootContext.js';
import { refType } from '../../utils/proptypes.js';
import { useComponentRenderer } from '../../utils/useComponentRenderer.js';
import { jsx as _jsx } from "react/jsx-runtime";
/**
 * @ignore - internal component.
 */
function CompositeRoot(props) {
  const {
    render,
    className,
    highlightedIndex: highlightedIndexProp,
    onHighlightedIndexChange: onHighlightedIndexChangeProp,
    orientation,
    dense,
    itemSizes,
    loop,
    cols,
    direction,
    enableHomeAndEndKeys,
    onMapChange,
    stopEventPropagation,
    rootRef,
    ...otherProps
  } = props;
  const {
    getRootProps,
    highlightedIndex,
    onHighlightedIndexChange,
    elementsRef
  } = useCompositeRoot({
    itemSizes,
    cols,
    loop,
    dense,
    orientation,
    highlightedIndex: highlightedIndexProp,
    onHighlightedIndexChange: onHighlightedIndexChangeProp,
    rootRef,
    stopEventPropagation,
    enableHomeAndEndKeys,
    direction
  });
  const {
    renderElement
  } = useComponentRenderer({
    propGetter: getRootProps,
    render: render ?? 'div',
    state: {},
    className,
    extraProps: otherProps
  });
  const contextValue = React.useMemo(() => ({
    highlightedIndex,
    onHighlightedIndexChange
  }), [highlightedIndex, onHighlightedIndexChange]);
  return /*#__PURE__*/_jsx(CompositeRootContext.Provider, {
    value: contextValue,
    children: /*#__PURE__*/_jsx(CompositeList, {
      elementsRef: elementsRef,
      onMapChange: onMapChange,
      children: renderElement()
    })
  });
}
export { CompositeRoot };
process.env.NODE_ENV !== "production" ? CompositeRoot.propTypes /* remove-proptypes */ = {
  // ┌────────────────────────────── Warning ──────────────────────────────┐
  // │ These PropTypes are generated from the TypeScript type definitions. │
  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
  // └─────────────────────────────────────────────────────────────────────┘
  /**
   * @ignore
   */
  children: PropTypes.node,
  /**
   * CSS class applied to the element, or a function that
   * returns a class based on the component’s state.
   */
  className: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
  /**
   * @ignore
   */
  cols: PropTypes.number,
  /**
   * @ignore
   */
  dense: PropTypes.bool,
  /**
   * @ignore
   */
  direction: PropTypes.oneOf(['ltr', 'rtl']),
  /**
   * @ignore
   */
  enableHomeAndEndKeys: PropTypes.bool,
  /**
   * @ignore
   */
  highlightedIndex: PropTypes.number,
  /**
   * @ignore
   */
  itemSizes: PropTypes.arrayOf(PropTypes.shape({
    height: PropTypes.number.isRequired,
    width: PropTypes.number.isRequired
  })),
  /**
   * @ignore
   */
  loop: PropTypes.bool,
  /**
   * @ignore
   */
  onHighlightedIndexChange: PropTypes.func,
  /**
   * @ignore
   */
  onMapChange: PropTypes.func,
  /**
   * @ignore
   */
  orientation: PropTypes.oneOf(['both', 'horizontal', 'vertical']),
  /**
   * Allows you to replace the component’s HTML element
   * with a different tag, or compose it with another component.
   *
   * Accepts a `ReactElement` or a function that returns the element to render.
   */
  render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
  /**
   * @ignore
   */
  rootRef: refType,
  /**
   * @ignore
   */
  stopEventPropagation: PropTypes.bool
} : void 0;