"use client";
import * as React from "react";
import { useStableCallback } from "../../../../utils/esm/useStableCallback.js";
import { useSelectRootContext } from "../root/SelectRootContext.js";
import { useSelectPositionerContext } from "../positioner/SelectPositionerContext.js";
import { useRenderElement } from "../../utils/useRenderElement.js";
import { styleDisableScrollbar } from "../../utils/styles.js";
import { LIST_FUNCTIONAL_STYLES } from "../popup/utils.js";
import { selectors } from "../store.js";
import { useStore } from "../../../../utils/esm/store/useStore.js";
const SelectList = /* @__PURE__ */ React.forwardRef(function SelectList2(componentProps, forwardedRef) {
  const {
    className,
    render,
    ...elementProps
  } = componentProps;
  const {
    store,
    scrollHandlerRef
  } = useSelectRootContext();
  const {
    alignItemWithTriggerActive
  } = useSelectPositionerContext();
  const hasScrollArrows = useStore(store, selectors.hasScrollArrows);
  const openMethod = useStore(store, selectors.openMethod);
  const multiple = useStore(store, selectors.multiple);
  const id = useStore(store, selectors.id);
  const defaultProps = {
    id: `${id}-list`,
    role: "listbox",
    "aria-multiselectable": multiple || void 0,
    onScroll(event) {
      scrollHandlerRef.current?.(event.currentTarget);
    },
    ...alignItemWithTriggerActive && {
      style: LIST_FUNCTIONAL_STYLES
    },
    className: hasScrollArrows && openMethod !== "touch" ? styleDisableScrollbar.className : void 0
  };
  const setListElement = useStableCallback((element) => {
    store.set("listElement", element);
  });
  return useRenderElement("div", componentProps, {
    ref: [forwardedRef, setListElement],
    props: [defaultProps, elementProps]
  });
});
if (process.env.NODE_ENV !== "production") SelectList.displayName = "SelectList";
export {
  SelectList
};
//# sourceMappingURL=SelectList.js.map
