@wordpress/components/build-module/item-group/item/hook.js

UI components for WordPress.

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

/**
 * Internal dependencies
 */

import { useContextSystem } from '../../context';
import * as styles from '../styles';
import { useItemGroupContext } from '../context';
import { useCx } from '../../utils/hooks/use-cx';
export function useItem(props) {
  const {
    as: asProp,
    className,
    onClick,
    role = 'listitem',
    size: sizeProp,
    ...otherProps
  } = useContextSystem(props, 'Item');
  const {
    spacedAround,
    size: contextSize
  } = useItemGroupContext();
  const size = sizeProp || contextSize;
  const as = asProp || (typeof onClick !== 'undefined' ? 'button' : 'div');
  const cx = useCx();
  const classes = useMemo(() => cx((as === 'button' || as === 'a') && styles.unstyledButton(as), styles.itemSizes[size] || styles.itemSizes.medium, styles.item, spacedAround && styles.spacedAround, className), [as, className, cx, size, spacedAround]);
  const wrapperClassName = cx(styles.itemWrapper);
  return {
    as,
    className: classes,
    onClick,
    wrapperClassName,
    role,
    ...otherProps
  };
}
//# sourceMappingURL=hook.js.map