text: /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
  import React from 'react';
  import PropTypes from 'prop-types';
  import classNames from '../../utilities/classnames';
  import { compose, withState, withHandlers } from 'recompose';
  import { sidebarMenu, sidebarMenuItem, active as activeStyle } from './index.module.css.js';
  function SidebarMenuComponent(props) {
      var menuItems = props.menuItems, handleClick = props.handleClick, active = props.active;
      return (React.createElement("ul", { className: sidebarMenu }, menuItems.map(function (item, i) {
          var _a;
          return (React.createElement("li", { key: "SidebarMenuItem-" + item.title + "-" + i, className: classNames(sidebarMenuItem, (_a = {},
                  _a[activeStyle] = active === item.title + "_" + i,
                  _a)), onClick: handleClick({ key: item.title + "_" + i, item: item }), onKeyDown: handleClick({ key: item.title + "_" + i, item: item }) }, item.title));
      })));
  }
  SidebarMenuComponent.propTypes = {
      /** Function that runs onClick in each nav item */
      onItemClick: PropTypes.func,
      /** An array of navigation items */
      menuItems: PropTypes.arrayOf(PropTypes.shape({
          title: PropTypes.string,
      })),
  };
  export var SidebarMenu = compose(withState('active', 'setActive', undefined), withHandlers({
      handleClick: function (_a) {
          var setActive = _a.setActive, onItemClick = _a.onItemClick;
          return function (_a) {
              var key = _a.key, item = _a.item;
              return function (event) {
                  setActive(key);
                  if (onItemClick)
                      onItemClick(item, event);
              };
          };
      },
  }))(SidebarMenuComponent);
  