"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ViewMore = void 0;
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
var _react = require("react");
var _react2 = require("@emotion/react");
var _menu = require("@atlaskit/menu");
var _templateObject, _templateObject2;
/** @jsx jsx */
var itemBefore = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 40px;\n  height: 40px;\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  margin-right: ", ";\n"])), "var(--ds-space-050, 4px)");
var ViewMore = exports.ViewMore = function ViewMore(_ref) {
  var item = _ref.item,
    focus = _ref.focus;
  var ref = (0, _react.useRef)(null);
  (0, _react.useEffect)(function () {
    if (ref.current && focus) {
      ref.current.focus();
    }
  }, [focus]);
  return (0, _react2.jsx)(_menu.Section, {
    hasSeparator: true
  }, (0, _react2.jsx)(_menu.ButtonItem, {
    onClick: item.action,
    iconBefore: (0, _react2.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: (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n          padding: 0px ", ";\n        "])), "var(--ds-space-150, 12px)"),
    ref: ref
  }, item.title));
};