How to use @zendeskgarden/container-selection - 5 common examples

export function useButtonGroup(
  options: IUseButtonGroupProps
): UseButtonGroupReturnValue {
  const { selectedItem, focusedItem, getContainerProps, getItemProps } = useSelection(
    options
  );

  const getGroupProps = ({ role = 'group', ...other } = {}) => {
    return {
      role,
      'data-garden-container-id': 'containers.buttongroup',
      'data-garden-container-version': PACKAGE_VERSION,
      ...other
    };
  };

  const getButtonProps = ({ role = 'button', selectedAriaKey = 'aria-pressed', ...other } = {}) => {
    return {
      role,
      selectedAriaKey,

export function useTabs({
  vertical,
  idPrefix,
  ...options
}: IUseTabsProps = {}): IUseTabsReturnValue {
  const { selectedItem, focusedItem, getContainerProps, getItemProps } = useSelection({
    direction: vertical ? 'vertical' : 'horizontal',
    defaultSelectedIndex: 0,
    ...options
  });
  const [_id] = useState(idPrefix || generateId('garden-tabs-container'));
  const PANEL_ID = `${_id}--panel`;
  const TAB_ID = `${_id}--tab`;

  const getTabListProps = ({ role = 'tablist', ...other }: React.HTMLProps = {}) => {
    return {
      role,
      'aria-orientation': vertical ? 'vertical' : 'horizontal',
      'data-garden-container-id': 'containers.tabs',
      'data-garden-container-version': PACKAGE_VERSION,
      ...other
    };

export function usePagination(
  options: IUsePaginationProps
): IUsePaginationReturnValue {
  const {
    selectedItem,
    focusedItem,
    getContainerProps: getControlledContainerProps,
    getItemProps
  } = useSelection(options);

  const getContainerProps = ({ ...props } = {} as any) => {
    return {
      'data-garden-container-id': 'containers.pagination',
      'data-garden-container-version': PACKAGE_VERSION,
      ...props
    };
  };

  const getPreviousPageProps = ({ ariaLabel, ...props } = {} as any) => {
    return {
      'aria-label': ariaLabel || 'Previous Page',
      ...props
    };
  };

({ onMouseEnter, onMouseLeave, ...other }, ref) => {
    const {
      downshift: { getLabelProps }
    } = useDropdownContext();
    const { setIsLabelHovered } = useFieldContext();

    const labelProps = getLabelProps({
      onMouseEnter: composeEventHandlers(onMouseEnter, () => {
        setIsLabelHovered(true);
      }),
      onMouseLeave: composeEventHandlers(onMouseLeave, () => {
        setIsLabelHovered(false);
      }),
      ...other
    });

    return ;
  }
) as React.FunctionComponent;

({ onMouseEnter, onMouseLeave, ...other }, ref) => {
    const {
      downshift: { getLabelProps }
    } = useDropdownContext();
    const { setIsLabelHovered } = useFieldContext();

    const labelProps = getLabelProps({
      onMouseEnter: composeEventHandlers(onMouseEnter, () => {
        setIsLabelHovered(true);
      }),
      onMouseLeave: composeEventHandlers(onMouseLeave, () => {
        setIsLabelHovered(false);
      }),
      ...other
    });

    return ;
  }
) as React.FunctionComponent;