@base-ui-components/react/esm/composite/list/CompositeList.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.

/* eslint-disable no-bitwise */
'use client';

import * as React from 'react';
import PropTypes from 'prop-types';
import { fastObjectShallowCompare } from '../../utils/fastObjectShallowCompare.js';
import { useEnhancedEffect } from '../../utils/useEnhancedEffect.js';
import { CompositeListContext } from './CompositeListContext.js';
import { jsx as _jsx } from "react/jsx-runtime";
function sortByDocumentPosition(a, b) {
  const position = a.compareDocumentPosition(b);
  if (position & Node.DOCUMENT_POSITION_FOLLOWING || position & Node.DOCUMENT_POSITION_CONTAINED_BY) {
    return -1;
  }
  if (position & Node.DOCUMENT_POSITION_PRECEDING || position & Node.DOCUMENT_POSITION_CONTAINS) {
    return 1;
  }
  return 0;
}
function areMapsEqual(map1, map2) {
  if (map1.size !== map2.size) {
    return false;
  }
  for (const [key, value] of map1.entries()) {
    const value2 = map2.get(key);
    // compare the index before comparing everything else
    if (value?.index !== value2?.index) {
      return false;
    }
    if (value2 !== undefined && !fastObjectShallowCompare(value, value2)) {
      return false;
    }
  }
  return true;
}

/**
 * Provides context for a list of items in a composite component.
 * @ignore - internal component.
 */
function CompositeList(props) {
  const {
    children,
    elementsRef,
    labelsRef,
    onMapChange
  } = props;
  const [map, setMap] = React.useState(() => new Map());
  const register = React.useCallback((node, metadata) => {
    setMap(prevMap => new Map(prevMap).set(node, metadata ?? null));
  }, []);
  const unregister = React.useCallback(node => {
    setMap(prevMap => {
      const nextMap = new Map(prevMap);
      nextMap.delete(node);
      return nextMap;
    });
  }, []);
  useEnhancedEffect(() => {
    const newMap = new Map(map);
    const nodes = Array.from(newMap.keys()).sort(sortByDocumentPosition);
    nodes.forEach((node, index) => {
      const metadata = map.get(node) ?? {};
      newMap.set(node, {
        ...metadata,
        index
      });
    });
    if (!areMapsEqual(map, newMap)) {
      setMap(newMap);
      onMapChange?.(newMap);
    }
  }, [map, onMapChange]);
  const contextValue = React.useMemo(() => ({
    register,
    unregister,
    map,
    elementsRef,
    labelsRef
  }), [register, unregister, map, elementsRef, labelsRef]);
  return /*#__PURE__*/_jsx(CompositeListContext.Provider, {
    value: contextValue,
    children: children
  });
}
export { CompositeList };
process.env.NODE_ENV !== "production" ? CompositeList.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,
  /**
   * A ref to the list of HTML elements, ordered by their index.
   * `useListNavigation`'s `listRef` prop.
   */
  elementsRef: PropTypes /* @typescript-to-proptypes-ignore */.any,
  /**
   * A ref to the list of element labels, ordered by their index.
   * `useTypeahead`'s `listRef` prop.
   */
  labelsRef: PropTypes.shape({
    current: PropTypes.arrayOf(PropTypes.string).isRequired
  }),
  /**
   * @ignore
   */
  onMapChange: PropTypes.func
} : void 0;