@vtex/styleguide/lib/EXPERIMENTAL_Table/Toolbar/PopoverMenu.js

> VTEX Styleguide React components ([Docs](https://vtex.github.io/styleguide))

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Alignment = exports.Item = exports.Box = undefined;
exports.default = usePopoverMenu;

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _classnames = require("classnames");

var _classnames2 = _interopRequireDefault(_classnames);

var _index = require("../../Button/index.js");

var _index2 = _interopRequireDefault(_index);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function usePopoverMenu() {
  var _useState = (0, _react.useState)(false),
      boxVisible = _useState[0],
      setBoxVisible = _useState[1];

  var buttonRef = (0, _react.useRef)(null);

  var handleOutsideClick = function handleOutsideClick(e) {
    return buttonRef && buttonRef.current && e.target instanceof Node && !buttonRef.current.contains(e.target) && setBoxVisible(false);
  };

  (0, _react.useLayoutEffect)(function () {
    if (boxVisible) {
      document.addEventListener('mousedown', handleOutsideClick);
    }

    return function () {
      return document.removeEventListener('mousedown', handleOutsideClick);
    };
  }, [boxVisible]);
  var toggleBox = (0, _react.useCallback)(function () {
    setBoxVisible(!boxVisible);
  }, [boxVisible]);
  return {
    boxVisible: boxVisible,
    setBoxVisible: setBoxVisible,
    buttonRef: buttonRef,
    toggleBox: toggleBox
  };
}

var Box = exports.Box = function Box(_ref) {
  var alignMenu = _ref.alignMenu,
      height = _ref.height,
      width = _ref.width,
      noMargin = _ref.noMargin,
      borderClasses = _ref.borderClasses,
      groupActions = _ref.groupActions,
      testId = _ref.testId,
      children = _ref.children;
  var isAlignRight = alignMenu === Alignment.Right;
  var className = (0, _classnames2.default)("absolute z-999 shadow-4 " + (borderClasses || 'b--muted-4 br2 ba'), {
    'right-0': isAlignRight,
    'left-0': !isAlignRight,
    'mt2 mh2': !noMargin
  });
  return _react2.default.createElement("div", {
    "data-testid": testId + "__box",
    className: className,
    style: {
      width: width
    }
  }, _react2.default.createElement("div", {
    className: "w-100 b2 br2 bg-base"
  }, groupActions && _react2.default.createElement("div", {
    "data-testid": testId + "__box__group-actions",
    className: "flex inline-flex bb b--muted-4 w-100 justify-center pv4"
  }, groupActions.map(function (action) {
    return _react2.default.createElement("div", {
      className: "mh2",
      key: action.id,
      "data-testid": testId + "__group-actions--" + action.id
    }, _react2.default.createElement(_index2.default, {
      variation: "secondary",
      size: "small" // eslint-disable-next-line react/jsx-handler-names
      ,
      onClick: action.onClick
    }, action.label));
  })), _react2.default.createElement("div", {
    "data-testid": testId + "__box__items",
    className: "overflow-auto",
    style: {
      height: height
    }
  }, children)));
};

var Item = exports.Item = function Item(_ref2) {
  var isSelected = _ref2.isSelected,
      onClick = _ref2.onClick,
      children = _ref2.children;
  var containerClassName = (0, _classnames2.default)('flex justify-between ph6 pv3 pointer hover-bg-muted-5 bl bw1', {
    'b--emphasis': isSelected,
    'b--transparent': !isSelected
  });
  var className = (0, _classnames2.default)('w-100 flex justify-between', {
    fw5: isSelected
  });
  return _react2.default.createElement("div", {
    className: containerClassName,
    onClick: onClick
  }, _react2.default.createElement("span", {
    className: className
  }, children));
};

var Alignment = exports.Alignment = undefined;

(function (Alignment) {
  Alignment["Left"] = "left";
  Alignment["Right"] = "right";
})(Alignment || (exports.Alignment = Alignment = {}));