/**
 * WordPress dependencies
 */
import { Button, privateApis as componentsPrivateApis } from '@wordpress/components';
import { forwardRef } from '@wordpress/element';

/**
 * Internal dependencies
 */
import { unlock } from '../../lock-unlock';
import { jsx as _jsx } from "react/jsx-runtime";
const {
  CompositeItemV2: CompositeItem
} = unlock(componentsPrivateApis);
function InserterListboxItem({
  isFirst,
  as: Component,
  children,
  ...props
}, ref) {
  return /*#__PURE__*/_jsx(CompositeItem, {
    ref: ref,
    role: "option"
    // Use the CompositeItem `accessibleWhenDisabled` prop
    // over Button's `isFocusable`. The latter was shown to
    // cause an issue with tab order in the inserter list.
    ,
    accessibleWhenDisabled: true,
    ...props,
    render: htmlProps => {
      const propsWithTabIndex = {
        ...htmlProps,
        tabIndex: isFirst ? 0 : htmlProps.tabIndex
      };
      if (Component) {
        return /*#__PURE__*/_jsx(Component, {
          ...propsWithTabIndex,
          children: children
        });
      }
      if (typeof children === 'function') {
        return children(propsWithTabIndex);
      }
      return /*#__PURE__*/_jsx(Button, {
        ...propsWithTabIndex,
        children: children
      });
    }
  });
}
export default forwardRef(InserterListboxItem);
//# sourceMappingURL=item.js.map