@base-ui-components/react/cjs/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.

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

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.CompositeList = CompositeList;
var React = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _fastObjectShallowCompare = require("../../utils/fastObjectShallowCompare");
var _useEnhancedEffect = require("../../utils/useEnhancedEffect");
var _CompositeListContext = require("./CompositeListContext");
var _jsxRuntime = require("react/jsx-runtime");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
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 && !(0, _fastObjectShallowCompare.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;
    });
  }, []);
  (0, _useEnhancedEffect.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__*/(0, _jsxRuntime.jsx)(_CompositeListContext.CompositeListContext.Provider, {
    value: contextValue,
    children: children
  });
}
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.default.node,
  /**
   * A ref to the list of HTML elements, ordered by their index.
   * `useListNavigation`'s `listRef` prop.
   */
  elementsRef: _propTypes.default /* @typescript-to-proptypes-ignore */.any,
  /**
   * A ref to the list of element labels, ordered by their index.
   * `useTypeahead`'s `listRef` prop.
   */
  labelsRef: _propTypes.default.shape({
    current: _propTypes.default.arrayOf(_propTypes.default.string).isRequired
  }),
  /**
   * @ignore
   */
  onMapChange: _propTypes.default.func
} : void 0;