@wordpress/components/build-module/composite/item.js

UI components for WordPress.

/**
 * External dependencies
 */
import * as Ariakit from '@ariakit/react';

/**
 * WordPress dependencies
 */
import { forwardRef } from '@wordpress/element';

/**
 * Internal dependencies
 */

import { useCompositeContext } from './context';
import { jsx as _jsx } from "react/jsx-runtime";
export const CompositeItem = forwardRef(function CompositeItem(props, ref) {
  var _props$store;
  const context = useCompositeContext();

  // @ts-expect-error The store prop is undocumented and only used by the
  // legacy compat layer. The `store` prop is documented, but its type is
  // obfuscated to discourage its use outside of the component's internals.
  const store = (_props$store = props.store) !== null && _props$store !== void 0 ? _props$store : context.store;

  // If the active item is not connected, Composite may end up in a state
  // where none of the items are tabbable. In this case, we force all items to
  // be tabbable, so that as soon as an item received focus, it becomes active
  // and Composite goes back to working as expected.
  const tabbable = Ariakit.useStoreState(store, state => {
    return state?.activeId !== null && !store?.item(state?.activeId)?.element?.isConnected;
  });
  return /*#__PURE__*/_jsx(Ariakit.CompositeItem, {
    store: store,
    tabbable: tabbable,
    ...props,
    ref: ref
  });
});
//# sourceMappingURL=item.js.map