'use strict';

var _defineProperty = require('@babel/runtime/helpers/defineProperty');
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
var classnames = require('classnames');
var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
var Typography = require('@bigbinary/neetoui/Typography');
var Plus = require('@bigbinary/neeto-icons/Plus');
var Button = require('@bigbinary/neetoui/Button');
var injectCss = require('./inject-css-B6qYtOJe.js');
var jsxRuntime = require('react/jsx-runtime');
var neetoCist = require('@bigbinary/neeto-cist');
var general = require('@bigbinary/neeto-commons-frontend/utils/general');
var reactRouterDom = require('react-router-dom');
var withT = require('@bigbinary/neeto-commons-frontend/react-utils/withT');
var Search$1 = require('@bigbinary/neeto-icons/Search');
var Close = require('@bigbinary/neeto-icons/Close');
var Input = require('@bigbinary/neetoui/Input');
var index = require('./index-JY2zVpnv.js');
var ramda = require('ramda');
var CSSTransition = require('./CSSTransition-D_jVZ_GR.js');
require('./_commonjsHelpers-BJu3ubxk.js');
require('@babel/runtime/helpers/esm/extends');
require('@babel/runtime/helpers/esm/objectWithoutPropertiesLoose');
require('@babel/runtime/helpers/esm/inheritsLoose');
require('react');
require('react-dom');

var css = ".neeto-molecules-menubar__wrapper{background-color:rgb(var(--neeto-ui-white))!important;border-inline-end:1px solid rgb(var(--neeto-ui-gray-200));flex-shrink:0;overflow:hidden;transition:all .3s}@media (prefers-reduced-motion:reduce){.neeto-molecules-menubar__wrapper{transition:none}}.neeto-molecules-menubar__container{height:100vh;height:100dvh;overflow-y:auto;padding:2rem!important;width:20.25rem}@media screen and (max-width:1024px){.neeto-molecules-menubar__container{padding:2.5rem 1.5rem 1.5rem!important;width:17.5rem}}@media screen and (max-width:768px){.neeto-molecules-menubar__container{padding:2.5rem 1.25rem 1.5rem!important;width:15rem}}.neeto-molecules-menubar__title{margin-bottom:1rem}.neeto-molecules-menubar__search{align-items:center;display:flex;gap:.25rem;margin-bottom:1.25rem}.neeto-molecules-menubar__subtitle{align-items:center;display:flex;justify-content:space-between;margin-bottom:1.25rem;margin-top:1.25rem}.neeto-molecules-menubar__subtitle-actions{align-items:center;display:flex;gap:.25rem}.neeto-molecules-menubar__add-new-wrap,.neeto-molecules-menubar__block{margin-bottom:.5rem;padding:.4375rem .5rem}.neeto-molecules-menubar__block{align-items:center;border:thin solid transparent;border-radius:var(--neeto-ui-rounded);cursor:pointer;display:flex;justify-content:space-between;text-align:start;transition:all .3s;width:100%}@media (prefers-reduced-motion:reduce){.neeto-molecules-menubar__block{transition:none}}.neeto-molecules-menubar__block:active,.neeto-molecules-menubar__block:focus,.neeto-molecules-menubar__block:focus-visible,.neeto-molecules-menubar__block:hover{background-color:rgb(var(--neeto-ui-gray-200));outline:none;text-decoration:none}.neeto-molecules-menubar__block--active{background-color:rgb(var(--neeto-ui-primary-100));border-color:rgb(var(--neeto-ui-primary-100));box-shadow:none;position:relative}.neeto-molecules-menubar__block--active:after{background-color:rgb(var(--neeto-ui-primary-500));border-end-start-radius:var(--neeto-ui-rounded);border-start-start-radius:var(--neeto-ui-rounded);content:\"\";height:100%;inset-inline-start:-1px;position:absolute;top:0;width:.1875rem}.neeto-molecules-menubar__block--active:active,.neeto-molecules-menubar__block--active:focus,.neeto-molecules-menubar__block--active:focus-visible,.neeto-molecules-menubar__block--active:hover{background-color:rgb(var(--neeto-ui-primary-100))}.neeto-molecules-menubar__block .neeto-molecules-menubar__block-label{align-items:center;display:flex}.neeto-molecules-menubar__block .neeto-molecules-menubar__block-icon{margin-inline-end:.25rem}.neeto-molecules-menubar__item{border:thin solid transparent;border-radius:var(--neeto-ui-rounded);cursor:pointer;margin-bottom:.5rem;padding:.75rem;text-align:start;transition:all .3s;width:100%}@media (prefers-reduced-motion:reduce){.neeto-molecules-menubar__item{transition:none}}@media screen and (max-width:1024px){.neeto-molecules-menubar__item{padding:.625rem}}@media screen and (max-width:768px){.neeto-molecules-menubar__item{padding:.5rem}}.neeto-molecules-menubar__item:active,.neeto-molecules-menubar__item:focus,.neeto-molecules-menubar__item:focus-visible,.neeto-molecules-menubar__item:hover{background-color:rgb(var(--neeto-ui-gray-200));outline:none}.neeto-molecules-menubar__item--active{background-color:rgb(var(--neeto-ui-white));border-color:rgb(var(--neeto-ui-gray-300));box-shadow:var(--neeto-ui-shadow-xs);color:rgb(var(--neeto-ui-gray-800))}.neeto-molecules-menubar__item--active:active,.neeto-molecules-menubar__item--active:focus,.neeto-molecules-menubar__item--active:focus-visible,.neeto-molecules-menubar__item--active:hover{background-color:rgb(var(--neeto-ui-white))}.neeto-molecules-menubar-enter.neeto-molecules-menubar__wrapper{width:0}.neeto-molecules-menubar-enter-active.neeto-molecules-menubar__wrapper,.neeto-molecules-menubar-enter-done.neeto-molecules-menubar__wrapper,.neeto-molecules-menubar-exit.neeto-molecules-menubar__wrapper{width:20.25rem}.neeto-molecules-menubar-exit-active.neeto-molecules-menubar__wrapper{width:0}@media (prefers-reduced-motion:reduce){.neeto-molecules-menubar-enter-active.neeto-molecules-menubar__wrapper,.neeto-molecules-menubar-enter-done.neeto-molecules-menubar__wrapper,.neeto-molecules-menubar-enter.neeto-molecules-menubar__wrapper,.neeto-molecules-menubar-exit-active.neeto-molecules-menubar__wrapper,.neeto-molecules-menubar-exit.neeto-molecules-menubar__wrapper{transition:none}}";
injectCss.n(css,{});

var _excluded$5 = ["label", "onClick"];
function ownKeys$4(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread$4(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$4(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$4(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var AddNew = function AddNew(_ref) {
  var _ref$label = _ref.label,
    label = _ref$label === void 0 ? "" : _ref$label,
    onClick = _ref.onClick,
    otherProps = _objectWithoutProperties(_ref, _excluded$5);
  return /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread$4(_objectSpread$4({
    className: "neeto-molecules-menubar__add-new-wrap"
  }, otherProps), {}, {
    children: /*#__PURE__*/jsxRuntime.jsx(Button, {
      label: label,
      onClick: onClick,
      icon: Plus,
      iconPosition: "left",
      iconSize: 16,
      size: "small",
      style: "link"
    })
  }));
};

var _excluded$4 = ["url", "icon", "label", "count", "active", "onEdit", "onClick", "className"];
function ownKeys$3(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var Block = function Block(_ref) {
  var url = _ref.url,
    icon = _ref.icon,
    label = _ref.label,
    count = _ref.count,
    _ref$active = _ref.active,
    active = _ref$active === void 0 ? false : _ref$active,
    onEdit = _ref.onEdit,
    _ref$onClick = _ref.onClick,
    onClick = _ref$onClick === void 0 ? neetoCist.noop : _ref$onClick,
    className = _ref.className,
    otherProps = _objectWithoutProperties(_ref, _excluded$4);
  var handleEdit = function handleEdit(e) {
    e.stopPropagation();
    onEdit && onEdit();
  };
  var Parent = url ? reactRouterDom.Link : function (props) {
    return /*#__PURE__*/jsxRuntime.jsx("button", _objectSpread$3({}, props));
  };
  return /*#__PURE__*/jsxRuntime.jsxs(Parent, _objectSpread$3(_objectSpread$3({
    "data-testid": otherProps["data-testid"] || "menubar-block",
    to: url,
    className: classnames("neeto-molecules-menubar__block", _defineProperty({
      "neeto-molecules-menubar__block--editable": !!onEdit,
      "neeto-molecules-menubar__block--active": active
    }, className, className))
  }, _objectSpread$3({
    onClick: onClick
  }, otherProps)), {}, {
    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
      className: "neeto-molecules-menubar__block-label",
      "data-testid": general.joinHyphenCase("menubar-block-label", label),
      children: [icon && /*#__PURE__*/jsxRuntime.jsx("i", {
        className: "neeto-molecules-menubar__block-icon",
        children: icon
      }), /*#__PURE__*/jsxRuntime.jsx(Typography, {
        component: "span",
        style: "h5",
        title: label,
        weight: "medium",
        children: label
      })]
    }), Number.isInteger(count) && /*#__PURE__*/jsxRuntime.jsx("div", {
      onClick: handleEdit,
      children: /*#__PURE__*/jsxRuntime.jsx(Typography, {
        component: "span",
        style: "h5",
        weight: "medium",
        children: count
      })
    })]
  }));
};

var _excluded$3 = ["label", "description", "active", "className"];
function ownKeys$2(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var Item = function Item(_ref) {
  var _ref$label = _ref.label,
    label = _ref$label === void 0 ? "" : _ref$label,
    _ref$description = _ref.description,
    description = _ref$description === void 0 ? "" : _ref$description,
    _ref$active = _ref.active,
    active = _ref$active === void 0 ? false : _ref$active,
    _ref$className = _ref.className,
    className = _ref$className === void 0 ? "" : _ref$className,
    otherProps = _objectWithoutProperties(_ref, _excluded$3);
  return /*#__PURE__*/jsxRuntime.jsxs("button", _objectSpread$2(_objectSpread$2({
    className: classnames("neeto-molecules-menubar__item", _defineProperty({
      "neeto-molecules-menubar__item--active": active
    }, className, className))
  }, otherProps), {}, {
    children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
      className: "neeto-molecules-menubar__item-header",
      component: "h5",
      style: "h4",
      children: label
    }), /*#__PURE__*/jsxRuntime.jsx(Typography, {
      className: "neeto-molecules-menubar__item-desc",
      style: "body3",
      children: description
    })]
  }));
};

var UNSUPPORTED_INPUT_PROPS = ["tReady"];

var _excluded$2 = ["t", "isCollapsed", "onCollapse"];
function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var Search = withT(function (_ref) {
  var t = _ref.t,
    _ref$isCollapsed = _ref.isCollapsed,
    isCollapsed = _ref$isCollapsed === void 0 ? true : _ref$isCollapsed,
    onCollapse = _ref.onCollapse,
    props = _objectWithoutProperties(_ref, _excluded$2);
  return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
    children: !isCollapsed && /*#__PURE__*/jsxRuntime.jsxs("div", {
      className: "neeto-molecules-menubar__search",
      children: [/*#__PURE__*/jsxRuntime.jsx(Input, _objectSpread$1({
        placeholder: t("neetoMolecules.common.actions.search"),
        prefix: /*#__PURE__*/jsxRuntime.jsx(Search$1, {}),
        type: "search"
      }, ramda.omit(UNSUPPORTED_INPUT_PROPS, props))), /*#__PURE__*/jsxRuntime.jsx(Button, {
        "data-testid": "menubar-search-close-icon",
        icon: Close,
        style: "text",
        onClick: onCollapse
      })]
    })
  });
});
Search.propTypes = {
  /**
   * To specify whether the search field is collapsed.
   */
  isCollapsed: index.PropTypes.bool,
  /**
   * To provide a callback function on collapse of the search field.
   */
  onCollapse: index.PropTypes.func
};

var _excluded$1 = ["children", "iconProps"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var SubTitle = function SubTitle(_ref) {
  var children = _ref.children,
    iconProps = _ref.iconProps,
    otherProps = _objectWithoutProperties(_ref, _excluded$1);
  return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({
    className: "neeto-molecules-menubar__subtitle",
    "data-testid": otherProps["data-testid"] || "menubar-subtitle-heading"
  }, otherProps), {}, {
    children: [children, /*#__PURE__*/jsxRuntime.jsx("div", {
      className: "neeto-molecules-menubar__subtitle-actions",
      children: iconProps === null || iconProps === void 0 ? void 0 : iconProps.map(function (iconProp, index) {
        return /*#__PURE__*/jsxRuntime.jsx(Button, _objectSpread({
          style: "text"
        }, iconProp), index);
      })
    })]
  }));
};

var _excluded = ["title", "children", "showMenu", "className"];
var MenuBar = function MenuBar(_ref) {
  var _ref$title = _ref.title,
    title = _ref$title === void 0 ? "" : _ref$title,
    children = _ref.children,
    _ref$showMenu = _ref.showMenu,
    showMenu = _ref$showMenu === void 0 ? false : _ref$showMenu,
    _ref$className = _ref.className,
    className = _ref$className === void 0 ? "" : _ref$className,
    otherProps = _objectWithoutProperties(_ref, _excluded);
  var prefersReducedMotion = reactUtils.usePrefersReducedMotion();
  return /*#__PURE__*/jsxRuntime.jsx(CSSTransition.CSSTransition, {
    unmountOnExit: true,
    classNames: "neeto-molecules-menubar",
    "in": showMenu,
    timeout: prefersReducedMotion ? 0 : 300,
    children: /*#__PURE__*/jsxRuntime.jsx("div", {
      className: classnames("neeto-molecules-menubar__wrapper", _defineProperty({}, className, className)),
      children: /*#__PURE__*/jsxRuntime.jsxs("div", {
        className: "neeto-molecules-menubar__container",
        "data-testid": "menubar-container",
        children: [title && /*#__PURE__*/jsxRuntime.jsx(Typography, {
          className: "neeto-molecules-menubar__title",
          "data-testid": otherProps["data-testid"] || "menubar-heading",
          lineHeight: "tight",
          style: "h2",
          weight: "semibold",
          children: title
        }), children]
      })
    })
  });
};
MenuBar.Block = Block;
MenuBar.Item = Item;
MenuBar.SubTitle = SubTitle;
MenuBar.Search = Search;
MenuBar.AddNew = AddNew;

module.exports = MenuBar;
//# sourceMappingURL=MenuBar.js.map
