/** @jsx jsx */
import { useEffect, useRef } from 'react';
import { css, jsx } from '@emotion/react';
import { ButtonItem, Section } from '@atlaskit/menu';
var itemBefore = css({
  width: '40px',
  height: '40px',
  boxSizing: 'border-box',
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
  marginRight: "var(--ds-space-050, 4px)"
});
export var ViewMore = function ViewMore(_ref) {
  var item = _ref.item,
    focus = _ref.focus;
  var ref = useRef(null);
  useEffect(function () {
    if (ref.current && focus) {
      ref.current.focus();
    }
  }, [focus]);
  return jsx(Section, {
    hasSeparator: true
  }, jsx(ButtonItem, {
    onClick: item.action,
    iconBefore: jsx("div", {
      css: itemBefore
    }, item.icon()),
    "aria-describedby": item.title,
    "data-testid": "view-more-elements-item"
    // @ts-ignore Overriding Menu styles is not supported
    ,
    css: css({
      padding: "0px ".concat("var(--ds-space-150, 12px)")
    }),
    ref: ref
  }, item.title));
};