'use client'; import _extends from "@babel/runtime/helpers/esm/extends"; import * as React from 'react'; import { unstable_useForkRef as useForkRef, unstable_useId as useId } from '@mui/utils'; import { extractEventHandlers } from '../utils/extractEventHandlers'; import { useListItem } from '../useList'; import { useCompoundItem } from '../useCompound'; import { useButton } from '../useButton'; import { combineHooksSlotProps } from '../utils/combineHooksSlotProps'; /** * * Demos: * * - [Select](https://mui.com/base-ui/react-select/#hooks) * * API: * * - [useOption API](https://mui.com/base-ui/react-select/hooks-api/#use-option) */ export function useOption(params) { const { value, label, disabled, rootRef: optionRefParam, id: idParam } = params; const { getRootProps: getListItemProps, highlighted, selected } = useListItem({ item: value }); const { getRootProps: getButtonProps, rootRef: buttonRefHandler } = useButton({ disabled, focusableWhenDisabled: true }); const id = useId(idParam); const optionRef = React.useRef(null); const selectOption = React.useMemo(() => ({ disabled, label, value, ref: optionRef, id }), [disabled, label, value, id]); const { index } = useCompoundItem(value, selectOption); const handleRef = useForkRef(optionRefParam, optionRef, buttonRefHandler); const createHandleKeyDown = otherHandlers => event => { var _otherHandlers$onKeyD; (_otherHandlers$onKeyD = otherHandlers.onKeyDown) == null || _otherHandlers$onKeyD.call(otherHandlers, event); if (event.defaultMuiPrevented) { return; } if ([' ', 'Enter'].includes(event.key)) { event.defaultMuiPrevented = true; // prevent listbox onKeyDown } }; const getOwnHandlers = (otherHandlers = {}) => ({ onKeyDown: createHandleKeyDown(otherHandlers) }); return { getRootProps: (externalProps = {}) => { const externalEventHandlers = extractEventHandlers(externalProps); const getCombinedRootProps = combineHooksSlotProps(getListItemProps, combineHooksSlotProps(getButtonProps, getOwnHandlers)); return _extends({}, externalProps, externalEventHandlers, getCombinedRootProps(externalEventHandlers), { id, ref: handleRef, role: 'option', 'aria-selected': selected }); }, highlighted, index, selected, rootRef: handleRef }; }