@tecsinapse/react-web-kit 1.20.0 → 1.21.0

package/esm/components/molecules/Masonry/styled.js

@@ -0,0 +1,21 @@
+var _templateObject, _templateObject2, _templateObject3;
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+import styled from '@emotion/styled';
+export var StyledColumnItem = styled('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-content: stretch;\n  flex: 1;\n  width: 0;\n  margin-left: ", ";\n"])), function (_ref) {
+  var theme = _ref.theme,
+      index = _ref.index,
+      _ref$spacingLeft = _ref.spacingLeft,
+      spacingLeft = _ref$spacingLeft === void 0 ? 'nano' : _ref$spacingLeft;
+  return index > 0 ? theme.spacing[spacingLeft] : 'initial';
+});
+export var StyledMasonry = styled('div')(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-content: stretch;\n  box-sizing: border-box;\n  width: 100%;\n"])));
+export var StyledRowItem = styled('div')(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin-top: ", ";\n"])), function (_ref2) {
+  var theme = _ref2.theme,
+      index = _ref2.index,
+      _ref2$spacingTop = _ref2.spacingTop,
+      spacingTop = _ref2$spacingTop === void 0 ? 'nano' : _ref2$spacingTop;
+  return index > 0 ? theme.spacing[spacingTop] : 'initial';
+});
+//# sourceMappingURL=styled.js.map

package/esm/components/molecules/Masonry/styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styled.js","names":["styled","StyledColumnItem","theme","index","spacingLeft","spacing","StyledMasonry","StyledRowItem","spacingTop"],"sources":["../../../../src/components/molecules/Masonry/styled.ts"],"sourcesContent":["import styled from '@emotion/styled';\nimport { StyleProps } from '@tecsinapse/react-core';\nimport { MasonryProps } from './Masonry';\n\nexport const StyledColumnItem = styled('div')<\n  Partial<StyleProps> & { index: number } & Partial<MasonryProps>\n>`\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-content: stretch;\n  flex: 1;\n  width: 0;\n  margin-left: ${({ theme, index, spacingLeft = 'nano' }) =>\n    index > 0 ? theme.spacing[spacingLeft] : 'initial'};\n`;\n\nexport const StyledMasonry = styled('div')`\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-content: stretch;\n  box-sizing: border-box;\n  width: 100%;\n`;\n\nexport const StyledRowItem = styled('div')<\n  Partial<StyleProps> & { index: number } & Partial<MasonryProps>\n>`\n  margin-top: ${({ theme, index, spacingTop = 'nano' }) =>\n    index > 0 ? theme.spacing[spacingTop] : 'initial'};\n`;\n"],"mappings":";;;;AAAA,OAAOA,MAAP,MAAmB,iBAAnB;AAIA,OAAO,IAAMC,gBAAgB,GAAGD,MAAM,CAAC,KAAD,CAAT,+NASZ;EAAA,IAAGE,KAAH,QAAGA,KAAH;EAAA,IAAUC,KAAV,QAAUA,KAAV;EAAA,4BAAiBC,WAAjB;EAAA,IAAiBA,WAAjB,iCAA+B,MAA/B;EAAA,OACbD,KAAK,GAAG,CAAR,GAAYD,KAAK,CAACG,OAAN,CAAcD,WAAd,CAAZ,GAAyC,SAD5B;AAAA,CATY,CAAtB;AAaP,OAAO,IAAME,aAAa,GAAGN,MAAM,CAAC,KAAD,CAAT,qNAAnB;AASP,OAAO,IAAMO,aAAa,GAAGP,MAAM,CAAC,KAAD,CAAT,+FAGV;EAAA,IAAGE,KAAH,SAAGA,KAAH;EAAA,IAAUC,KAAV,SAAUA,KAAV;EAAA,6BAAiBK,UAAjB;EAAA,IAAiBA,UAAjB,iCAA8B,MAA9B;EAAA,OACZL,KAAK,GAAG,CAAR,GAAYD,KAAK,CAACG,OAAN,CAAcG,UAAd,CAAZ,GAAwC,SAD5B;AAAA,CAHU,CAAnB"}

package/esm/components/molecules/Menubar/MenuBlock/MenuBlock.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { OptionsType } from '../types';
+interface MenuBlockProps {
+    toggle: () => void;
+    options: OptionsType[];
+}
+declare const _default: React.NamedExoticComponent<MenuBlockProps>;
+export default _default;

package/esm/components/molecules/Menubar/MenuBlock/MenuBlock.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Text } from '@tecsinapse/react-core';
+import { MenuItem } from "./MenuItem";
+import { StyledContainerItems, StyledContainerMenu, StyledLeftComponent } from "./styled";
+import { Masonry } from "../../Masonry";
+
+var MenuBlock = function MenuBlock(_ref) {
+  var options = _ref.options,
+      toggle = _ref.toggle;
+  return React.createElement(Masonry, {
+    columns: 4,
+    spacingTop: "kilo",
+    spacingLeft: "mega"
+  }, options.map(function (data) {
+    return React.createElement(React.Fragment, {
+      key: "".concat(data.title)
+    }, React.createElement(StyledContainerMenu, null, data.leftComponents && React.createElement(StyledLeftComponent, null, data.leftComponents), React.createElement(Text, {
+      fontWeight: "bold"
+    }, data.title)), React.createElement(StyledContainerItems, null, data.items.map(function (_ref2) {
+      var title = _ref2.title,
+          Component = _ref2.Component,
+          props = _ref2.props,
+          rightComponents = _ref2.rightComponents,
+          items = _ref2.items;
+      return React.createElement(MenuItem, {
+        items: items,
+        key: title,
+        title: title,
+        Component: Component,
+        rightComponents: rightComponents,
+        props: props,
+        toggle: toggle
+      });
+    })));
+  }));
+};
+
+export default React.memo(MenuBlock);
+//# sourceMappingURL=MenuBlock.js.map

package/esm/components/molecules/Menubar/MenuBlock/MenuBlock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuBlock.js","names":["React","Text","MenuItem","StyledContainerItems","StyledContainerMenu","StyledLeftComponent","Masonry","MenuBlock","options","toggle","map","data","title","leftComponents","items","Component","props","rightComponents","memo"],"sources":["../../../../../src/components/molecules/Menubar/MenuBlock/MenuBlock.tsx"],"sourcesContent":["import React from 'react';\nimport { Text } from '@tecsinapse/react-core';\nimport { MenuItem } from './MenuItem';\nimport {\n  StyledContainerItems,\n  StyledContainerMenu,\n  StyledLeftComponent,\n} from './styled';\nimport { ItemsOptions, OptionsType } from '../types';\nimport { Masonry } from '../../Masonry';\n\ninterface MenuBlockProps {\n  toggle: () => void;\n  options: OptionsType[];\n}\n\nconst MenuBlock: React.FC<MenuBlockProps> = ({ options, toggle }) => {\n  return (\n    <Masonry columns={4} spacingTop=\"kilo\" spacingLeft=\"mega\">\n      {options.map(data => (\n        <React.Fragment key={`${data.title}`}>\n          <StyledContainerMenu>\n            {data.leftComponents && (\n              <StyledLeftComponent>{data.leftComponents}</StyledLeftComponent>\n            )}\n            <Text fontWeight=\"bold\">{data.title}</Text>\n          </StyledContainerMenu>\n          <StyledContainerItems>\n            {data.items.map(\n              ({\n                title,\n                Component,\n                props,\n                rightComponents,\n                items,\n              }: ItemsOptions) => (\n                <MenuItem\n                  items={items}\n                  key={title}\n                  title={title}\n                  Component={Component}\n                  rightComponents={rightComponents}\n                  props={props}\n                  toggle={toggle}\n                />\n              )\n            )}\n          </StyledContainerItems>\n        </React.Fragment>\n      ))}\n    </Masonry>\n  );\n};\n\nexport default React.memo(MenuBlock);\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,QAAqB,wBAArB;AACA,SAASC,QAAT;AACA,SACEC,oBADF,EAEEC,mBAFF,EAGEC,mBAHF;AAMA,SAASC,OAAT;;AAOA,IAAMC,SAAmC,GAAG,SAAtCA,SAAsC,OAAyB;EAAA,IAAtBC,OAAsB,QAAtBA,OAAsB;EAAA,IAAbC,MAAa,QAAbA,MAAa;EACnE,OACE,oBAAC,OAAD;IAAS,OAAO,EAAE,CAAlB;IAAqB,UAAU,EAAC,MAAhC;IAAuC,WAAW,EAAC;EAAnD,GACGD,OAAO,CAACE,GAAR,CAAY,UAAAC,IAAI;IAAA,OACf,oBAAC,KAAD,CAAO,QAAP;MAAgB,GAAG,YAAKA,IAAI,CAACC,KAAV;IAAnB,GACE,oBAAC,mBAAD,QACGD,IAAI,CAACE,cAAL,IACC,oBAAC,mBAAD,QAAsBF,IAAI,CAACE,cAA3B,CAFJ,EAIE,oBAAC,IAAD;MAAM,UAAU,EAAC;IAAjB,GAAyBF,IAAI,CAACC,KAA9B,CAJF,CADF,EAOE,oBAAC,oBAAD,QACGD,IAAI,CAACG,KAAL,CAAWJ,GAAX,CACC;MAAA,IACEE,KADF,SACEA,KADF;MAAA,IAEEG,SAFF,SAEEA,SAFF;MAAA,IAGEC,KAHF,SAGEA,KAHF;MAAA,IAIEC,eAJF,SAIEA,eAJF;MAAA,IAKEH,KALF,SAKEA,KALF;MAAA,OAOE,oBAAC,QAAD;QACE,KAAK,EAAEA,KADT;QAEE,GAAG,EAAEF,KAFP;QAGE,KAAK,EAAEA,KAHT;QAIE,SAAS,EAAEG,SAJb;QAKE,eAAe,EAAEE,eALnB;QAME,KAAK,EAAED,KANT;QAOE,MAAM,EAAEP;MAPV,EAPF;IAAA,CADD,CADH,CAPF,CADe;EAAA,CAAhB,CADH,CADF;AAmCD,CApCD;;AAsCA,eAAeT,KAAK,CAACkB,IAAN,CAAWX,SAAX,CAAf"}

package/esm/components/molecules/Menubar/MenuBlock/MenuItem/MenuItem.d.ts

@@ -0,0 +1,12 @@
+import React, { ElementType } from 'react';
+import { ItemsOptions } from '../../types';
+interface MenuItemProps {
+    title: string;
+    Component: ElementType;
+    props: any;
+    toggle: () => void;
+    rightComponents?: React.ReactNode;
+    items?: ItemsOptions[];
+}
+declare const MenuItem: React.FC<MenuItemProps>;
+export default MenuItem;

package/esm/components/molecules/Menubar/MenuBlock/MenuItem/MenuItem.js

@@ -0,0 +1,72 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+import React from 'react';
+import { Icon, Text } from '@tecsinapse/react-core';
+import { SubMenuBlock } from "./SubMenuBlock";
+import { StyledRightComponent, StyledText } from "../styled";
+import { StyledContainerItemText, StyledSubButton } from "./styled";
+
+var MenuItem = function MenuItem(_ref) {
+  var title = _ref.title,
+      _ref$Component = _ref.Component,
+      Component = _ref$Component === void 0 ? 'a' : _ref$Component,
+      _ref$props = _ref.props,
+      props = _ref$props === void 0 ? {} : _ref$props,
+      rightComponents = _ref.rightComponents,
+      items = _ref.items,
+      toggle = _ref.toggle;
+
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      open = _React$useState2[0],
+      setOpen = _React$useState2[1];
+
+  var noTextDecoration = {
+    textDecoration: 'none'
+  };
+
+  var getIconName = function getIconName() {
+    return open ? 'arrow-up-drop-circle-outline' : 'arrow-down-drop-circle-outline';
+  };
+
+  var handleMenuAction = function handleMenuAction() {
+    return setOpen(!open);
+  };
+
+  return React.createElement(React.Fragment, null, React.createElement(StyledContainerItemText, {
+    key: title
+  }, React.createElement(Component, _extends({}, props, {
+    style: noTextDecoration,
+    onClick: toggle
+  }), React.createElement(Text, {
+    colorVariant: open ? 'primary' : 'secondary',
+    colorTone: open ? 'medium' : 'dark'
+  }, React.createElement(StyledText, null, title))), rightComponents && !items && React.createElement(StyledRightComponent, null, rightComponents), items && React.createElement(StyledSubButton, {
+    onClick: handleMenuAction
+  }, React.createElement(Icon, {
+    name: getIconName(),
+    type: "material-community",
+    fontColor: "orange"
+  }))), open && (items === null || items === void 0 ? void 0 : items.map(function (subItem) {
+    return React.createElement(SubMenuBlock, {
+      key: subItem.title,
+      data: subItem,
+      toggle: toggle
+    });
+  })));
+};
+
+export default MenuItem;
+//# sourceMappingURL=MenuItem.js.map

package/esm/components/molecules/Menubar/MenuBlock/MenuItem/MenuItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuItem.js","names":["React","Icon","Text","SubMenuBlock","StyledRightComponent","StyledText","StyledContainerItemText","StyledSubButton","MenuItem","title","Component","props","rightComponents","items","toggle","useState","open","setOpen","noTextDecoration","textDecoration","getIconName","handleMenuAction","map","subItem"],"sources":["../../../../../../src/components/molecules/Menubar/MenuBlock/MenuItem/MenuItem.tsx"],"sourcesContent":["import React, { ElementType } from 'react';\nimport { Icon, Text } from '@tecsinapse/react-core';\nimport { SubMenuBlock } from './SubMenuBlock';\nimport { StyledRightComponent, StyledText } from '../styled';\nimport { StyledContainerItemText, StyledSubButton } from './styled';\nimport { ItemsOptions } from '../../types';\n\ninterface MenuItemProps {\n  title: string;\n  /** Wrapping component for element. This is used for navigation */\n  Component: ElementType;\n  /** Properties spread to wrapping Component */\n  props: any;\n  toggle: () => void;\n  rightComponents?: React.ReactNode;\n  items?: ItemsOptions[];\n}\n\nconst MenuItem: React.FC<MenuItemProps> = ({\n  title,\n  Component = 'a',\n  props = {},\n  rightComponents,\n  items,\n  toggle,\n}) => {\n  const [open, setOpen] = React.useState<boolean>(false);\n\n  const noTextDecoration = { textDecoration: 'none' };\n\n  const getIconName = () =>\n    open ? 'arrow-up-drop-circle-outline' : 'arrow-down-drop-circle-outline';\n\n  const handleMenuAction = () => setOpen(!open);\n\n  return (\n    <>\n      <StyledContainerItemText key={title}>\n        <Component {...props} style={noTextDecoration} onClick={toggle}>\n          <Text\n            colorVariant={open ? 'primary' : 'secondary'}\n            colorTone={open ? 'medium' : 'dark'}\n          >\n            <StyledText>{title}</StyledText>\n          </Text>\n        </Component>\n        {rightComponents && !items && (\n          <StyledRightComponent>{rightComponents}</StyledRightComponent>\n        )}\n        {items && (\n          <StyledSubButton onClick={handleMenuAction}>\n            <Icon\n              name={getIconName()}\n              type=\"material-community\"\n              fontColor=\"orange\"\n            />\n          </StyledSubButton>\n        )}\n      </StyledContainerItemText>\n      {open &&\n        items?.map(subItem => (\n          <SubMenuBlock key={subItem.title} data={subItem} toggle={toggle} />\n        ))}\n    </>\n  );\n};\n\nexport default MenuItem;\n"],"mappings":";;;;;;;;;;;;;;AAAA,OAAOA,KAAP,MAAmC,OAAnC;AACA,SAASC,IAAT,EAAeC,IAAf,QAA2B,wBAA3B;AACA,SAASC,YAAT;AACA,SAASC,oBAAT,EAA+BC,UAA/B;AACA,SAASC,uBAAT,EAAkCC,eAAlC;;AAcA,IAAMC,QAAiC,GAAG,SAApCA,QAAoC,OAOpC;EAAA,IANJC,KAMI,QANJA,KAMI;EAAA,0BALJC,SAKI;EAAA,IALJA,SAKI,+BALQ,GAKR;EAAA,sBAJJC,KAII;EAAA,IAJJA,KAII,2BAJI,EAIJ;EAAA,IAHJC,eAGI,QAHJA,eAGI;EAAA,IAFJC,KAEI,QAFJA,KAEI;EAAA,IADJC,MACI,QADJA,MACI;;EACJ,sBAAwBd,KAAK,CAACe,QAAN,CAAwB,KAAxB,CAAxB;EAAA;EAAA,IAAOC,IAAP;EAAA,IAAaC,OAAb;;EAEA,IAAMC,gBAAgB,GAAG;IAAEC,cAAc,EAAE;EAAlB,CAAzB;;EAEA,IAAMC,WAAW,GAAG,SAAdA,WAAc;IAAA,OAClBJ,IAAI,GAAG,8BAAH,GAAoC,gCADtB;EAAA,CAApB;;EAGA,IAAMK,gBAAgB,GAAG,SAAnBA,gBAAmB;IAAA,OAAMJ,OAAO,CAAC,CAACD,IAAF,CAAb;EAAA,CAAzB;;EAEA,OACE,0CACE,oBAAC,uBAAD;IAAyB,GAAG,EAAEP;EAA9B,GACE,oBAAC,SAAD,eAAeE,KAAf;IAAsB,KAAK,EAAEO,gBAA7B;IAA+C,OAAO,EAAEJ;EAAxD,IACE,oBAAC,IAAD;IACE,YAAY,EAAEE,IAAI,GAAG,SAAH,GAAe,WADnC;IAEE,SAAS,EAAEA,IAAI,GAAG,QAAH,GAAc;EAF/B,GAIE,oBAAC,UAAD,QAAaP,KAAb,CAJF,CADF,CADF,EASGG,eAAe,IAAI,CAACC,KAApB,IACC,oBAAC,oBAAD,QAAuBD,eAAvB,CAVJ,EAYGC,KAAK,IACJ,oBAAC,eAAD;IAAiB,OAAO,EAAEQ;EAA1B,GACE,oBAAC,IAAD;IACE,IAAI,EAAED,WAAW,EADnB;IAEE,IAAI,EAAC,oBAFP;IAGE,SAAS,EAAC;EAHZ,EADF,CAbJ,CADF,EAuBGJ,IAAI,KACHH,KADG,aACHA,KADG,uBACHA,KAAK,CAAES,GAAP,CAAW,UAAAC,OAAO;IAAA,OAChB,oBAAC,YAAD;MAAc,GAAG,EAAEA,OAAO,CAACd,KAA3B;MAAkC,IAAI,EAAEc,OAAxC;MAAiD,MAAM,EAAET;IAAzD,EADgB;EAAA,CAAlB,CADG,CAvBP,CADF;AA8BD,CA/CD;;AAiDA,eAAeN,QAAf"}

package/esm/components/molecules/Menubar/MenuBlock/MenuItem/SubMenuBlock/SubMenuBlock.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ItemsOptions } from '../../../types';
+interface SubMenuBlockProps {
+    data: ItemsOptions;
+    toggle: () => void;
+}
+declare const SubMenuBlock: React.FC<SubMenuBlockProps>;
+export default SubMenuBlock;

package/esm/components/molecules/Menubar/MenuBlock/MenuItem/SubMenuBlock/SubMenuBlock.js

@@ -0,0 +1,29 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React from 'react';
+import { Text } from '@tecsinapse/react-core';
+import { StyledRightComponent, StyledText } from "../../styled";
+import { DummyBorder, StyledContainerItem } from "./styled";
+
+var SubMenuBlock = function SubMenuBlock(_ref) {
+  var data = _ref.data,
+      toggle = _ref.toggle;
+  var Component = data.Component,
+      props = data.props,
+      rightComponents = data.rightComponents,
+      title = data.title;
+  var noTextDecoration = {
+    textDecoration: 'none'
+  };
+  return React.createElement(StyledContainerItem, null, React.createElement(DummyBorder, null), React.createElement(Component, _extends({}, props, {
+    style: noTextDecoration,
+    onClick: toggle
+  }), React.createElement(Text, {
+    colorVariant: "secondary",
+    colorTone: "medium",
+    typography: "sub"
+  }, React.createElement(StyledText, null, title))), rightComponents && React.createElement(StyledRightComponent, null, rightComponents));
+};
+
+export default SubMenuBlock;
+//# sourceMappingURL=SubMenuBlock.js.map

package/esm/components/molecules/Menubar/MenuBlock/MenuItem/SubMenuBlock/SubMenuBlock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SubMenuBlock.js","names":["React","Text","StyledRightComponent","StyledText","DummyBorder","StyledContainerItem","SubMenuBlock","data","toggle","Component","props","rightComponents","title","noTextDecoration","textDecoration"],"sources":["../../../../../../../src/components/molecules/Menubar/MenuBlock/MenuItem/SubMenuBlock/SubMenuBlock.tsx"],"sourcesContent":["import React from 'react';\nimport { Text } from '@tecsinapse/react-core';\nimport { StyledRightComponent, StyledText } from '../../styled';\nimport { ItemsOptions } from '../../../types';\nimport { DummyBorder, StyledContainerItem } from './styled';\n\ninterface SubMenuBlockProps {\n  data: ItemsOptions;\n  toggle: () => void;\n}\n\nconst SubMenuBlock: React.FC<SubMenuBlockProps> = ({ data, toggle }) => {\n  const { Component, props, rightComponents, title } = data;\n\n  const noTextDecoration = { textDecoration: 'none' };\n\n  return (\n    <StyledContainerItem>\n      <DummyBorder />\n      <Component {...props} style={noTextDecoration} onClick={toggle}>\n        <Text colorVariant=\"secondary\" colorTone=\"medium\" typography=\"sub\">\n          <StyledText>{title}</StyledText>\n        </Text>\n      </Component>\n      {rightComponents && (\n        <StyledRightComponent>{rightComponents}</StyledRightComponent>\n      )}\n    </StyledContainerItem>\n  );\n};\n\nexport default SubMenuBlock;\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,QAAqB,wBAArB;AACA,SAASC,oBAAT,EAA+BC,UAA/B;AAEA,SAASC,WAAT,EAAsBC,mBAAtB;;AAOA,IAAMC,YAAyC,GAAG,SAA5CA,YAA4C,OAAsB;EAAA,IAAnBC,IAAmB,QAAnBA,IAAmB;EAAA,IAAbC,MAAa,QAAbA,MAAa;EACtE,IAAQC,SAAR,GAAqDF,IAArD,CAAQE,SAAR;EAAA,IAAmBC,KAAnB,GAAqDH,IAArD,CAAmBG,KAAnB;EAAA,IAA0BC,eAA1B,GAAqDJ,IAArD,CAA0BI,eAA1B;EAAA,IAA2CC,KAA3C,GAAqDL,IAArD,CAA2CK,KAA3C;EAEA,IAAMC,gBAAgB,GAAG;IAAEC,cAAc,EAAE;EAAlB,CAAzB;EAEA,OACE,oBAAC,mBAAD,QACE,oBAAC,WAAD,OADF,EAEE,oBAAC,SAAD,eAAeJ,KAAf;IAAsB,KAAK,EAAEG,gBAA7B;IAA+C,OAAO,EAAEL;EAAxD,IACE,oBAAC,IAAD;IAAM,YAAY,EAAC,WAAnB;IAA+B,SAAS,EAAC,QAAzC;IAAkD,UAAU,EAAC;EAA7D,GACE,oBAAC,UAAD,QAAaI,KAAb,CADF,CADF,CAFF,EAOGD,eAAe,IACd,oBAAC,oBAAD,QAAuBA,eAAvB,CARJ,CADF;AAaD,CAlBD;;AAoBA,eAAeL,YAAf"}

package/esm/components/molecules/Menubar/MenuBlock/MenuItem/SubMenuBlock/index.d.ts

@@ -0,0 +1 @@
+export { default as SubMenuBlock } from './SubMenuBlock';

package/esm/components/molecules/Menubar/MenuBlock/MenuItem/SubMenuBlock/index.js

@@ -0,0 +1,2 @@
+export { default as SubMenuBlock } from "./SubMenuBlock";
+//# sourceMappingURL=index.js.map

package/esm/components/molecules/Menubar/MenuBlock/MenuItem/SubMenuBlock/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["default","SubMenuBlock"],"sources":["../../../../../../../src/components/molecules/Menubar/MenuBlock/MenuItem/SubMenuBlock/index.ts"],"sourcesContent":["export { default as SubMenuBlock } from './SubMenuBlock';\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,YAApB"}

package/esm/components/molecules/Menubar/MenuBlock/MenuItem/SubMenuBlock/styled.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const StyledContainerItem: import("@emotion/styled").StyledComponent<any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const DummyBorder: import("@emotion/styled").StyledComponent<any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/esm/components/molecules/Menubar/MenuBlock/MenuItem/SubMenuBlock/styled.js

@@ -0,0 +1,17 @@
+var _templateObject, _templateObject2;
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+import styled from '@emotion/styled';
+export var StyledContainerItem = styled('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n"])));
+export var DummyBorder = styled('div')(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  height: ", ";\n  border-left: ", ";\n  margin-right: ", ";\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return theme.typography.sub.fontSize;
+}, function (_ref2) {
+  var theme = _ref2.theme;
+  return "".concat(theme.borderWidth.pico, " solid ").concat(theme.color.primary.medium);
+}, function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.spacing.mili;
+});
+//# sourceMappingURL=styled.js.map

package/esm/components/molecules/Menubar/MenuBlock/MenuItem/SubMenuBlock/styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styled.js","names":["styled","StyledContainerItem","DummyBorder","theme","typography","sub","fontSize","borderWidth","pico","color","primary","medium","spacing","mili"],"sources":["../../../../../../../src/components/molecules/Menubar/MenuBlock/MenuItem/SubMenuBlock/styled.ts"],"sourcesContent":["import styled from '@emotion/styled';\nimport { StyleProps } from '@tecsinapse/react-core';\n\nexport const StyledContainerItem = styled('div')<Partial<StyleProps>>`\n  display: flex;\n  align-items: center;\n`;\n\nexport const DummyBorder = styled('div')<Partial<StyleProps>>`\n  height: ${({ theme }) => theme.typography.sub.fontSize};\n  border-left: ${({ theme }) =>\n    `${theme.borderWidth.pico} solid ${theme.color.primary.medium}`};\n  margin-right: ${({ theme }) => theme.spacing.mili};\n`;\n"],"mappings":";;;;AAAA,OAAOA,MAAP,MAAmB,iBAAnB;AAGA,OAAO,IAAMC,mBAAmB,GAAGD,MAAM,CAAC,KAAD,CAAT,iHAAzB;AAKP,OAAO,IAAME,WAAW,GAAGF,MAAM,CAAC,KAAD,CAAT,wIACZ;EAAA,IAAGG,KAAH,QAAGA,KAAH;EAAA,OAAeA,KAAK,CAACC,UAAN,CAAiBC,GAAjB,CAAqBC,QAApC;AAAA,CADY,EAEP;EAAA,IAAGH,KAAH,SAAGA,KAAH;EAAA,iBACVA,KAAK,CAACI,WAAN,CAAkBC,IADR,oBACsBL,KAAK,CAACM,KAAN,CAAYC,OAAZ,CAAoBC,MAD1C;AAAA,CAFO,EAIN;EAAA,IAAGR,KAAH,SAAGA,KAAH;EAAA,OAAeA,KAAK,CAACS,OAAN,CAAcC,IAA7B;AAAA,CAJM,CAAjB"}

package/esm/components/molecules/Menubar/MenuBlock/MenuItem/index.d.ts

@@ -0,0 +1 @@
+export { default as MenuItem } from './MenuItem';

package/esm/components/molecules/Menubar/MenuBlock/MenuItem/index.js

@@ -0,0 +1,2 @@
+export { default as MenuItem } from "./MenuItem";
+//# sourceMappingURL=index.js.map

package/esm/components/molecules/Menubar/MenuBlock/MenuItem/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["default","MenuItem"],"sources":["../../../../../../src/components/molecules/Menubar/MenuBlock/MenuItem/index.ts"],"sourcesContent":["export { default as MenuItem } from './MenuItem';\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,QAApB"}

package/esm/components/molecules/Menubar/MenuBlock/MenuItem/styled.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const StyledContainerItemText: import("@emotion/styled").StyledComponent<any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledSubButton: import("@emotion/styled").StyledComponent<any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;

package/esm/components/molecules/Menubar/MenuBlock/MenuItem/styled.js

@@ -0,0 +1,17 @@
+var _templateObject, _templateObject2;
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+import styled from '@emotion/styled';
+export var StyledContainerItemText = styled('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin-top: ", ";\n  display: flex;\n  align-items: center;\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return theme.spacing.mili;
+});
+export var StyledSubButton = styled('span')(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding-top: ", " 0 0 0;\n  margin-left: ", ";\n  cursor: pointer;\n  & * {\n    user-select: none;\n  }\n"])), function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.spacing.nano;
+}, function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.spacing.mili;
+});
+//# sourceMappingURL=styled.js.map

package/esm/components/molecules/Menubar/MenuBlock/MenuItem/styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styled.js","names":["styled","StyledContainerItemText","theme","spacing","mili","StyledSubButton","nano"],"sources":["../../../../../../src/components/molecules/Menubar/MenuBlock/MenuItem/styled.ts"],"sourcesContent":["import styled from '@emotion/styled';\nimport { StyleProps } from '@tecsinapse/react-core';\n\nexport const StyledContainerItemText = styled('div')<Partial<StyleProps>>`\n  margin-top: ${({ theme }) => theme.spacing.mili};\n  display: flex;\n  align-items: center;\n`;\n\nexport const StyledSubButton = styled('span')<Partial<StyleProps>>`\n  padding-top: ${({ theme }) => theme.spacing.nano} 0 0 0;\n  margin-left: ${({ theme }) => theme.spacing.mili};\n  cursor: pointer;\n  & * {\n    user-select: none;\n  }\n`;\n"],"mappings":";;;;AAAA,OAAOA,MAAP,MAAmB,iBAAnB;AAGA,OAAO,IAAMC,uBAAuB,GAAGD,MAAM,CAAC,KAAD,CAAT,uIACpB;EAAA,IAAGE,KAAH,QAAGA,KAAH;EAAA,OAAeA,KAAK,CAACC,OAAN,CAAcC,IAA7B;AAAA,CADoB,CAA7B;AAMP,OAAO,IAAMC,eAAe,GAAGL,MAAM,CAAC,MAAD,CAAT,sLACX;EAAA,IAAGE,KAAH,SAAGA,KAAH;EAAA,OAAeA,KAAK,CAACC,OAAN,CAAcG,IAA7B;AAAA,CADW,EAEX;EAAA,IAAGJ,KAAH,SAAGA,KAAH;EAAA,OAAeA,KAAK,CAACC,OAAN,CAAcC,IAA7B;AAAA,CAFW,CAArB"}

package/esm/components/molecules/Menubar/MenuBlock/index.d.ts

@@ -0,0 +1 @@
+export { default as MenuBlock } from './MenuBlock';

package/esm/components/molecules/Menubar/MenuBlock/index.js

@@ -0,0 +1,2 @@
+export { default as MenuBlock } from "./MenuBlock";
+//# sourceMappingURL=index.js.map

package/esm/components/molecules/Menubar/MenuBlock/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["default","MenuBlock"],"sources":["../../../../../src/components/molecules/Menubar/MenuBlock/index.ts"],"sourcesContent":["export { default as MenuBlock } from './MenuBlock';\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,SAApB"}

package/esm/components/molecules/Menubar/MenuBlock/styled.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare const StyledLeftComponent: import("@emotion/styled").StyledComponent<any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledRightComponent: import("@emotion/styled").StyledComponent<any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledContainerMenu: import("@emotion/styled").StyledComponent<any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledContainerItems: import("@emotion/styled").StyledComponent<any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledText: import("@emotion/styled").StyledComponent<any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;

package/esm/components/molecules/Menubar/MenuBlock/styled.js

@@ -0,0 +1,27 @@
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+import styled from '@emotion/styled';
+import { hex2rgba } from '@tecsinapse/react-core';
+export var StyledLeftComponent = styled('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin-right: ", ";\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return theme.spacing.mili;
+});
+export var StyledRightComponent = styled('div')(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-left: ", ";\n"])), function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.spacing.mili;
+});
+export var StyledContainerMenu = styled('div')(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  flex-direction: row;\n  display: flex;\n  align-items: center;\n  border-bottom: ", ";\n  width: 100%;\n  padding-bottom: ", ";\n"])), function (_ref3) {
+  var theme = _ref3.theme;
+  return "".concat(theme.borderWidth.pico, " solid ").concat(hex2rgba(theme.miscellaneous.shadow, 0.05));
+}, function (_ref4) {
+  var theme = _ref4.theme;
+  return theme.spacing.mili;
+});
+export var StyledContainerItems = styled('div')(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n"])));
+export var StyledText = styled('span')(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  &:hover {\n    color: ", ";\n  }\n"])), function (_ref5) {
+  var theme = _ref5.theme;
+  return theme.font.color.orange;
+});
+//# sourceMappingURL=styled.js.map

package/esm/components/molecules/Menubar/MenuBlock/styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styled.js","names":["styled","hex2rgba","StyledLeftComponent","theme","spacing","mili","StyledRightComponent","StyledContainerMenu","borderWidth","pico","miscellaneous","shadow","StyledContainerItems","StyledText","font","color","orange"],"sources":["../../../../../src/components/molecules/Menubar/MenuBlock/styled.ts"],"sourcesContent":["import styled from '@emotion/styled';\nimport { hex2rgba, StyleProps } from '@tecsinapse/react-core';\n\nexport const StyledLeftComponent = styled('div')<Partial<StyleProps>>`\n  margin-right: ${({ theme }) => theme.spacing.mili};\n`;\n\nexport const StyledRightComponent = styled('div')<Partial<StyleProps>>`\n  margin-left: ${({ theme }) => theme.spacing.mili};\n`;\n\nexport const StyledContainerMenu = styled('div')<Partial<StyleProps>>`\n  flex-direction: row;\n  display: flex;\n  align-items: center;\n  border-bottom: ${({ theme }) =>\n    `${theme.borderWidth.pico} solid ${hex2rgba(\n      theme.miscellaneous.shadow,\n      0.05\n    )}`};\n  width: 100%;\n  padding-bottom: ${({ theme }) => theme.spacing.mili};\n`;\n\nexport const StyledContainerItems = styled('div')<Partial<StyleProps>>`\n  display: flex;\n  flex-direction: column;\n`;\n\nexport const StyledText = styled('span')<Partial<StyleProps>>`\n  &:hover {\n    color: ${({ theme }) => theme.font.color.orange};\n  }\n`;\n"],"mappings":";;;;AAAA,OAAOA,MAAP,MAAmB,iBAAnB;AACA,SAASC,QAAT,QAAqC,wBAArC;AAEA,OAAO,IAAMC,mBAAmB,GAAGF,MAAM,CAAC,KAAD,CAAT,+FACd;EAAA,IAAGG,KAAH,QAAGA,KAAH;EAAA,OAAeA,KAAK,CAACC,OAAN,CAAcC,IAA7B;AAAA,CADc,CAAzB;AAIP,OAAO,IAAMC,oBAAoB,GAAGN,MAAM,CAAC,KAAD,CAAT,gGAChB;EAAA,IAAGG,KAAH,SAAGA,KAAH;EAAA,OAAeA,KAAK,CAACC,OAAN,CAAcC,IAA7B;AAAA,CADgB,CAA1B;AAIP,OAAO,IAAME,mBAAmB,GAAGP,MAAM,CAAC,KAAD,CAAT,6MAIb;EAAA,IAAGG,KAAH,SAAGA,KAAH;EAAA,iBACZA,KAAK,CAACK,WAAN,CAAkBC,IADN,oBACoBR,QAAQ,CACzCE,KAAK,CAACO,aAAN,CAAoBC,MADqB,EAEzC,IAFyC,CAD5B;AAAA,CAJa,EAUZ;EAAA,IAAGR,KAAH,SAAGA,KAAH;EAAA,OAAeA,KAAK,CAACC,OAAN,CAAcC,IAA7B;AAAA,CAVY,CAAzB;AAaP,OAAO,IAAMO,oBAAoB,GAAGZ,MAAM,CAAC,KAAD,CAAT,sHAA1B;AAKP,OAAO,IAAMa,UAAU,GAAGb,MAAM,CAAC,MAAD,CAAT,8GAEV;EAAA,IAAGG,KAAH,SAAGA,KAAH;EAAA,OAAeA,KAAK,CAACW,IAAN,CAAWC,KAAX,CAAiBC,MAAhC;AAAA,CAFU,CAAhB"}

package/esm/components/molecules/Menubar/Menubar.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { MostUsedType, OptionsType } from './types';
+export interface MenubarProps extends React.HTMLAttributes<HTMLDivElement> {
+    options: OptionsType[];
+    leftComponents?: React.ReactNode;
+    rightComponents?: React.ReactNode;
+    mostUsed?: MostUsedType[];
+    mostUsedLabel?: string;
+    searchable?: boolean;
+    searchPlaceholder?: string;
+    searchResultsLabel?: string;
+}
+declare const Menubar: React.FC<MenubarProps>;
+export default Menubar;

package/esm/components/molecules/Menubar/Menubar.js

@@ -0,0 +1,138 @@
+var _excluded = ["leftComponents", "rightComponents", "searchPlaceholder", "options", "mostUsed", "mostUsedLabel", "searchResultsLabel", "searchable"];
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+import React, { useRef } from 'react';
+import { Icon, Text, useDebouncedState } from '@tecsinapse/react-core';
+import { Transition } from 'react-transition-group';
+import { StyledIconInput, StyledMenuBar, StyledMenuButton, StyledContainerOpenMenu, StyledInput, StyledInputContainer, StyledSearchResultsContainer, StyledSearchTextContainer } from "./styled";
+import { MostUsed } from "./MostUsed";
+import { MenuBlock } from "./MenuBlock";
+import { SearchResultItem } from "./SearchResultItem";
+import { filterAndTransform } from "./utils";
+import { getContainerOpenMenuStyles, getInputContainerStyles } from "./animations";
+import { useClickAwayListener } from "../../../hooks";
+
+var Menubar = function Menubar(_ref) {
+  var leftComponents = _ref.leftComponents,
+      rightComponents = _ref.rightComponents,
+      _ref$searchPlaceholde = _ref.searchPlaceholder,
+      searchPlaceholder = _ref$searchPlaceholde === void 0 ? 'O quê você deseja buscar?' : _ref$searchPlaceholde,
+      options = _ref.options,
+      mostUsed = _ref.mostUsed,
+      _ref$mostUsedLabel = _ref.mostUsedLabel,
+      mostUsedLabel = _ref$mostUsedLabel === void 0 ? 'Mais acessados' : _ref$mostUsedLabel,
+      _ref$searchResultsLab = _ref.searchResultsLabel,
+      searchResultsLabel = _ref$searchResultsLab === void 0 ? 'Resultados da busca' : _ref$searchResultsLab,
+      _ref$searchable = _ref.searchable,
+      searchable = _ref$searchable === void 0 ? true : _ref$searchable,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var _React$useState = React.useState(''),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      search = _React$useState2[0],
+      setSearch = _React$useState2[1];
+
+  var _React$useState3 = React.useState([]),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      results = _React$useState4[0],
+      setResults = _React$useState4[1];
+
+  var _useDebouncedState = useDebouncedState('', setSearch),
+      _useDebouncedState2 = _slicedToArray(_useDebouncedState, 2),
+      input = _useDebouncedState2[0],
+      setInput = _useDebouncedState2[1];
+
+  var _React$useState5 = React.useState(false),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      open = _React$useState6[0],
+      setOpen = _React$useState6[1];
+
+  var menuRef = useRef(null);
+  useClickAwayListener(menuRef, setOpen, 'mouseup');
+  var toggleOpen = React.useCallback(function () {
+    return setOpen(function (state) {
+      return !state;
+    });
+  }, [setOpen]);
+  React.useEffect(function () {
+    if (search === '') return;
+    setResults(filterAndTransform(options, search));
+  }, [search]);
+  return React.createElement("div", _extends({
+    ref: function ref(_ref2) {
+      return menuRef.current = _ref2;
+    }
+  }, rest), React.createElement(StyledMenuBar, null, React.createElement(StyledMenuButton, {
+    variant: "filled",
+    color: "primary",
+    onPress: toggleOpen
+  }, !open ? React.createElement(Icon, {
+    size: "deca",
+    name: "menu",
+    type: "material-community",
+    fontColor: "light"
+  }) : React.createElement(Icon, {
+    size: "deca",
+    name: "close",
+    type: "material-community",
+    fontColor: "light"
+  })), leftComponents, React.createElement(Transition, {
+    "in": open,
+    timeout: 250
+  }, function (state) {
+    return React.createElement(StyledInputContainer, {
+      style: getInputContainerStyles(state)
+    }, searchable && React.createElement(StyledInput, {
+      placeholder: searchPlaceholder,
+      leftComponent: React.createElement(StyledIconInput, null, React.createElement(Icon, {
+        name: "magnify",
+        type: "material-community"
+      })),
+      value: input,
+      onChange: setInput
+    }));
+  }), rightComponents), React.createElement(Transition, {
+    "in": open,
+    timeout: 250
+  }, function (state) {
+    return React.createElement(StyledContainerOpenMenu, {
+      style: getContainerOpenMenuStyles(state)
+    }, !search ? React.createElement(React.Fragment, null, mostUsed && React.createElement(MostUsed, {
+      label: mostUsedLabel,
+      data: mostUsed,
+      toggle: toggleOpen
+    }), React.createElement(MenuBlock, {
+      options: options,
+      toggle: toggleOpen
+    })) : React.createElement(StyledSearchResultsContainer, null, React.createElement(StyledSearchTextContainer, null, React.createElement(Text, {
+      fontWeight: "bold"
+    }, searchResultsLabel)), results.map(function (result) {
+      return React.createElement(SearchResultItem, {
+        key: "".concat(result.title, "-").concat(result.category),
+        data: result,
+        searchTerm: search,
+        toggle: toggleOpen
+      });
+    })));
+  }));
+};
+
+export default Menubar;
+//# sourceMappingURL=Menubar.js.map

package/esm/components/molecules/Menubar/Menubar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menubar.js","names":["React","useRef","Icon","Text","useDebouncedState","Transition","StyledIconInput","StyledMenuBar","StyledMenuButton","StyledContainerOpenMenu","StyledInput","StyledInputContainer","StyledSearchResultsContainer","StyledSearchTextContainer","MostUsed","MenuBlock","SearchResultItem","filterAndTransform","getContainerOpenMenuStyles","getInputContainerStyles","useClickAwayListener","Menubar","leftComponents","rightComponents","searchPlaceholder","options","mostUsed","mostUsedLabel","searchResultsLabel","searchable","rest","useState","search","setSearch","results","setResults","input","setInput","open","setOpen","menuRef","toggleOpen","useCallback","state","useEffect","ref","current","map","result","title","category"],"sources":["../../../../src/components/molecules/Menubar/Menubar.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport { Icon, Text, useDebouncedState } from '@tecsinapse/react-core';\nimport { Transition } from 'react-transition-group';\nimport {\n  StyledIconInput,\n  StyledMenuBar,\n  StyledMenuButton,\n  StyledContainerOpenMenu,\n  StyledInput,\n  StyledInputContainer,\n  StyledSearchResultsContainer,\n  StyledSearchTextContainer,\n} from './styled';\nimport { MostUsedType, OptionsType } from './types';\nimport { MostUsed } from './MostUsed';\nimport { MenuBlock } from './MenuBlock';\nimport { SearchResultItem } from './SearchResultItem';\nimport { filterAndTransform } from './utils';\nimport {\n  getContainerOpenMenuStyles,\n  getInputContainerStyles,\n} from './animations';\nimport { useClickAwayListener } from '../../../hooks';\n\nexport interface MenubarProps extends React.HTMLAttributes<HTMLDivElement> {\n  options: OptionsType[];\n  leftComponents?: React.ReactNode;\n  rightComponents?: React.ReactNode;\n  /** Limited to first 4 elements */\n  mostUsed?: MostUsedType[];\n  mostUsedLabel?: string;\n  searchable?: boolean;\n  searchPlaceholder?: string;\n  searchResultsLabel?: string;\n}\n\nconst Menubar: React.FC<MenubarProps> = ({\n  leftComponents,\n  rightComponents,\n  searchPlaceholder = 'O quê você deseja buscar?',\n  options,\n  mostUsed,\n  mostUsedLabel = 'Mais acessados',\n  searchResultsLabel = 'Resultados da busca',\n  searchable = true,\n  ...rest\n}) => {\n  const [search, setSearch] = React.useState<string>('');\n  const [results, setResults] = React.useState<MostUsedType[]>([]);\n  const [input, setInput] = useDebouncedState<string>('', setSearch);\n  const [open, setOpen] = React.useState<boolean>(false);\n  const menuRef = useRef<HTMLDivElement | null>(null);\n  useClickAwayListener(menuRef, setOpen, 'mouseup');\n\n  const toggleOpen = React.useCallback(\n    () => setOpen(state => !state),\n    [setOpen]\n  );\n\n  React.useEffect(() => {\n    if (search === '') return;\n    setResults(filterAndTransform(options, search));\n  }, [search]);\n\n  return (\n    <div ref={ref => (menuRef.current = ref)} {...rest}>\n      <StyledMenuBar>\n        <StyledMenuButton variant=\"filled\" color=\"primary\" onPress={toggleOpen}>\n          {!open ? (\n            <Icon\n              size=\"deca\"\n              name=\"menu\"\n              type=\"material-community\"\n              fontColor=\"light\"\n            />\n          ) : (\n            <Icon\n              size=\"deca\"\n              name=\"close\"\n              type=\"material-community\"\n              fontColor=\"light\"\n            />\n          )}\n        </StyledMenuButton>\n        {leftComponents}\n        <Transition in={open} timeout={250}>\n          {state => (\n            <StyledInputContainer style={getInputContainerStyles(state)}>\n              {searchable && (\n                <StyledInput\n                  placeholder={searchPlaceholder}\n                  leftComponent={\n                    <StyledIconInput>\n                      <Icon name=\"magnify\" type=\"material-community\" />\n                    </StyledIconInput>\n                  }\n                  value={input}\n                  onChange={setInput}\n                />\n              )}\n            </StyledInputContainer>\n          )}\n        </Transition>\n        {rightComponents}\n      </StyledMenuBar>\n      <Transition in={open} timeout={250}>\n        {state => (\n          <StyledContainerOpenMenu style={getContainerOpenMenuStyles(state)}>\n            {!search ? (\n              <>\n                {mostUsed && (\n                  <MostUsed\n                    label={mostUsedLabel}\n                    data={mostUsed}\n                    toggle={toggleOpen}\n                  />\n                )}\n                <MenuBlock options={options} toggle={toggleOpen} />\n              </>\n            ) : (\n              <StyledSearchResultsContainer>\n                <StyledSearchTextContainer>\n                  <Text fontWeight=\"bold\">{searchResultsLabel}</Text>\n                </StyledSearchTextContainer>\n                {results.map(result => (\n                  <SearchResultItem\n                    key={`${result.title}-${result.category}`}\n                    data={result}\n                    searchTerm={search}\n                    toggle={toggleOpen}\n                  />\n                ))}\n              </StyledSearchResultsContainer>\n            )}\n          </StyledContainerOpenMenu>\n        )}\n      </Transition>\n    </div>\n  );\n};\n\nexport default Menubar;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA,OAAOA,KAAP,IAAgBC,MAAhB,QAA8B,OAA9B;AACA,SAASC,IAAT,EAAeC,IAAf,EAAqBC,iBAArB,QAA8C,wBAA9C;AACA,SAASC,UAAT,QAA2B,wBAA3B;AACA,SACEC,eADF,EAEEC,aAFF,EAGEC,gBAHF,EAIEC,uBAJF,EAKEC,WALF,EAMEC,oBANF,EAOEC,4BAPF,EAQEC,yBARF;AAWA,SAASC,QAAT;AACA,SAASC,SAAT;AACA,SAASC,gBAAT;AACA,SAASC,kBAAT;AACA,SACEC,0BADF,EAEEC,uBAFF;AAIA,SAASC,oBAAT;;AAcA,IAAMC,OAA+B,GAAG,SAAlCA,OAAkC,OAUlC;EAAA,IATJC,cASI,QATJA,cASI;EAAA,IARJC,eAQI,QARJA,eAQI;EAAA,iCAPJC,iBAOI;EAAA,IAPJA,iBAOI,sCAPgB,2BAOhB;EAAA,IANJC,OAMI,QANJA,OAMI;EAAA,IALJC,QAKI,QALJA,QAKI;EAAA,8BAJJC,aAII;EAAA,IAJJA,aAII,mCAJY,gBAIZ;EAAA,iCAHJC,kBAGI;EAAA,IAHJA,kBAGI,sCAHiB,qBAGjB;EAAA,2BAFJC,UAEI;EAAA,IAFJA,UAEI,gCAFS,IAET;EAAA,IADDC,IACC;;EACJ,sBAA4B9B,KAAK,CAAC+B,QAAN,CAAuB,EAAvB,CAA5B;EAAA;EAAA,IAAOC,MAAP;EAAA,IAAeC,SAAf;;EACA,uBAA8BjC,KAAK,CAAC+B,QAAN,CAA+B,EAA/B,CAA9B;EAAA;EAAA,IAAOG,OAAP;EAAA,IAAgBC,UAAhB;;EACA,yBAA0B/B,iBAAiB,CAAS,EAAT,EAAa6B,SAAb,CAA3C;EAAA;EAAA,IAAOG,KAAP;EAAA,IAAcC,QAAd;;EACA,uBAAwBrC,KAAK,CAAC+B,QAAN,CAAwB,KAAxB,CAAxB;EAAA;EAAA,IAAOO,IAAP;EAAA,IAAaC,OAAb;;EACA,IAAMC,OAAO,GAAGvC,MAAM,CAAwB,IAAxB,CAAtB;EACAmB,oBAAoB,CAACoB,OAAD,EAAUD,OAAV,EAAmB,SAAnB,CAApB;EAEA,IAAME,UAAU,GAAGzC,KAAK,CAAC0C,WAAN,CACjB;IAAA,OAAMH,OAAO,CAAC,UAAAI,KAAK;MAAA,OAAI,CAACA,KAAL;IAAA,CAAN,CAAb;EAAA,CADiB,EAEjB,CAACJ,OAAD,CAFiB,CAAnB;EAKAvC,KAAK,CAAC4C,SAAN,CAAgB,YAAM;IACpB,IAAIZ,MAAM,KAAK,EAAf,EAAmB;IACnBG,UAAU,CAAClB,kBAAkB,CAACQ,OAAD,EAAUO,MAAV,CAAnB,CAAV;EACD,CAHD,EAGG,CAACA,MAAD,CAHH;EAKA,OACE;IAAK,GAAG,EAAE,aAAAa,KAAG;MAAA,OAAKL,OAAO,CAACM,OAAR,GAAkBD,KAAvB;IAAA;EAAb,GAA8Cf,IAA9C,GACE,oBAAC,aAAD,QACE,oBAAC,gBAAD;IAAkB,OAAO,EAAC,QAA1B;IAAmC,KAAK,EAAC,SAAzC;IAAmD,OAAO,EAAEW;EAA5D,GACG,CAACH,IAAD,GACC,oBAAC,IAAD;IACE,IAAI,EAAC,MADP;IAEE,IAAI,EAAC,MAFP;IAGE,IAAI,EAAC,oBAHP;IAIE,SAAS,EAAC;EAJZ,EADD,GAQC,oBAAC,IAAD;IACE,IAAI,EAAC,MADP;IAEE,IAAI,EAAC,OAFP;IAGE,IAAI,EAAC,oBAHP;IAIE,SAAS,EAAC;EAJZ,EATJ,CADF,EAkBGhB,cAlBH,EAmBE,oBAAC,UAAD;IAAY,MAAIgB,IAAhB;IAAsB,OAAO,EAAE;EAA/B,GACG,UAAAK,KAAK;IAAA,OACJ,oBAAC,oBAAD;MAAsB,KAAK,EAAExB,uBAAuB,CAACwB,KAAD;IAApD,GACGd,UAAU,IACT,oBAAC,WAAD;MACE,WAAW,EAAEL,iBADf;MAEE,aAAa,EACX,oBAAC,eAAD,QACE,oBAAC,IAAD;QAAM,IAAI,EAAC,SAAX;QAAqB,IAAI,EAAC;MAA1B,EADF,CAHJ;MAOE,KAAK,EAAEY,KAPT;MAQE,QAAQ,EAAEC;IARZ,EAFJ,CADI;EAAA,CADR,CAnBF,EAqCGd,eArCH,CADF,EAwCE,oBAAC,UAAD;IAAY,MAAIe,IAAhB;IAAsB,OAAO,EAAE;EAA/B,GACG,UAAAK,KAAK;IAAA,OACJ,oBAAC,uBAAD;MAAyB,KAAK,EAAEzB,0BAA0B,CAACyB,KAAD;IAA1D,GACG,CAACX,MAAD,GACC,0CACGN,QAAQ,IACP,oBAAC,QAAD;MACE,KAAK,EAAEC,aADT;MAEE,IAAI,EAAED,QAFR;MAGE,MAAM,EAAEe;IAHV,EAFJ,EAQE,oBAAC,SAAD;MAAW,OAAO,EAAEhB,OAApB;MAA6B,MAAM,EAAEgB;IAArC,EARF,CADD,GAYC,oBAAC,4BAAD,QACE,oBAAC,yBAAD,QACE,oBAAC,IAAD;MAAM,UAAU,EAAC;IAAjB,GAAyBb,kBAAzB,CADF,CADF,EAIGM,OAAO,CAACa,GAAR,CAAY,UAAAC,MAAM;MAAA,OACjB,oBAAC,gBAAD;QACE,GAAG,YAAKA,MAAM,CAACC,KAAZ,cAAqBD,MAAM,CAACE,QAA5B,CADL;QAEE,IAAI,EAAEF,MAFR;QAGE,UAAU,EAAEhB,MAHd;QAIE,MAAM,EAAES;MAJV,EADiB;IAAA,CAAlB,CAJH,CAbJ,CADI;EAAA,CADR,CAxCF,CADF;AA2ED,CAvGD;;AAyGA,eAAepB,OAAf"}

package/esm/components/molecules/Menubar/MostUsed/MostUsed.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { MostUsedType } from '../types';
+interface MostUsedProps {
+    data: MostUsedType[];
+    label: string;
+    toggle: () => void;
+}
+declare const _default: React.NamedExoticComponent<MostUsedProps>;
+export default _default;

package/esm/components/molecules/Menubar/MostUsed/MostUsed.js

@@ -0,0 +1,42 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React from 'react';
+import { Text } from '@tecsinapse/react-core';
+import { StyledCard, StyledCardContainer } from "./styled";
+
+var MostUsed = function MostUsed(_ref) {
+  var data = _ref.data,
+      label = _ref.label,
+      toggle = _ref.toggle;
+  var noTextDecoration = {
+    textDecoration: 'none'
+  };
+  return React.createElement(React.Fragment, null, React.createElement(Text, {
+    fontWeight: "bold"
+  }, label), React.createElement(StyledCardContainer, null, data.slice(0, 4).map(function (_ref2) {
+    var title = _ref2.title,
+        category = _ref2.category,
+        _ref2$Component = _ref2.Component,
+        Component = _ref2$Component === void 0 ? 'a' : _ref2$Component,
+        _ref2$props = _ref2.props,
+        props = _ref2$props === void 0 ? {} : _ref2$props;
+    return React.createElement(Component, _extends({}, props, {
+      style: noTextDecoration,
+      key: "".concat(title, "-").concat(category),
+      onClick: toggle
+    }), React.createElement(StyledCard, {
+      elevated: true,
+      key: "".concat(title, "-").concat(category)
+    }, React.createElement(Text, {
+      fontWeight: "bold",
+      colorVariant: "primary"
+    }, title), React.createElement(Text, {
+      fontWeight: "bold",
+      colorVariant: "secondary",
+      typography: "label"
+    }, category)));
+  })));
+};
+
+export default React.memo(MostUsed);
+//# sourceMappingURL=MostUsed.js.map

package/esm/components/molecules/Menubar/MostUsed/MostUsed.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MostUsed.js","names":["React","Text","StyledCard","StyledCardContainer","MostUsed","data","label","toggle","noTextDecoration","textDecoration","slice","map","title","category","Component","props","memo"],"sources":["../../../../../src/components/molecules/Menubar/MostUsed/MostUsed.tsx"],"sourcesContent":["import React from 'react';\nimport { Text } from '@tecsinapse/react-core';\nimport { StyledCard, StyledCardContainer } from './styled';\nimport { MostUsedType } from '../types';\n\ninterface MostUsedProps {\n  data: MostUsedType[];\n  label: string;\n  toggle: () => void;\n}\n\nconst MostUsed: React.FC<MostUsedProps> = ({ data, label, toggle }) => {\n  const noTextDecoration = { textDecoration: 'none' };\n\n  return (\n    <>\n      <Text fontWeight=\"bold\">{label}</Text>\n      <StyledCardContainer>\n        {data\n          .slice(0, 4)\n          .map(\n            ({\n              title,\n              category,\n              Component = 'a',\n              props = {},\n            }: MostUsedType) => (\n              <Component\n                {...props}\n                style={noTextDecoration}\n                key={`${title}-${category}`}\n                onClick={toggle}\n              >\n                <StyledCard elevated key={`${title}-${category}`}>\n                  <Text fontWeight=\"bold\" colorVariant=\"primary\">\n                    {title}\n                  </Text>\n                  <Text\n                    fontWeight=\"bold\"\n                    colorVariant=\"secondary\"\n                    typography=\"label\"\n                  >\n                    {category}\n                  </Text>\n                </StyledCard>\n              </Component>\n            )\n          )}\n      </StyledCardContainer>\n    </>\n  );\n};\n\nexport default React.memo(MostUsed);\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,QAAqB,wBAArB;AACA,SAASC,UAAT,EAAqBC,mBAArB;;AASA,IAAMC,QAAiC,GAAG,SAApCA,QAAoC,OAA6B;EAAA,IAA1BC,IAA0B,QAA1BA,IAA0B;EAAA,IAApBC,KAAoB,QAApBA,KAAoB;EAAA,IAAbC,MAAa,QAAbA,MAAa;EACrE,IAAMC,gBAAgB,GAAG;IAAEC,cAAc,EAAE;EAAlB,CAAzB;EAEA,OACE,0CACE,oBAAC,IAAD;IAAM,UAAU,EAAC;EAAjB,GAAyBH,KAAzB,CADF,EAEE,oBAAC,mBAAD,QACGD,IAAI,CACFK,KADF,CACQ,CADR,EACW,CADX,EAEEC,GAFF,CAGG;IAAA,IACEC,KADF,SACEA,KADF;IAAA,IAEEC,QAFF,SAEEA,QAFF;IAAA,4BAGEC,SAHF;IAAA,IAGEA,SAHF,gCAGc,GAHd;IAAA,wBAIEC,KAJF;IAAA,IAIEA,KAJF,4BAIU,EAJV;IAAA,OAME,oBAAC,SAAD,eACMA,KADN;MAEE,KAAK,EAAEP,gBAFT;MAGE,GAAG,YAAKI,KAAL,cAAcC,QAAd,CAHL;MAIE,OAAO,EAAEN;IAJX,IAME,oBAAC,UAAD;MAAY,QAAQ,MAApB;MAAqB,GAAG,YAAKK,KAAL,cAAcC,QAAd;IAAxB,GACE,oBAAC,IAAD;MAAM,UAAU,EAAC,MAAjB;MAAwB,YAAY,EAAC;IAArC,GACGD,KADH,CADF,EAIE,oBAAC,IAAD;MACE,UAAU,EAAC,MADb;MAEE,YAAY,EAAC,WAFf;MAGE,UAAU,EAAC;IAHb,GAKGC,QALH,CAJF,CANF,CANF;EAAA,CAHH,CADH,CAFF,CADF;AAqCD,CAxCD;;AA0CA,eAAeb,KAAK,CAACgB,IAAN,CAAWZ,QAAX,CAAf"}