@tecsinapse/react-web-kit 1.6.0 → 1.6.1

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.6.1](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-web-kit@1.6.0...@tecsinapse/react-web-kit@1.6.1) (2021-09-15)
+
+
+### Bug Fixes
+
+* **menubar:** fixing right components ([efc933d](https://github.com/tecsinapse/design-system/commit/efc933d5a716be0c8f07b4c06a86c52db2f85077))
+
+
+
+
+
 # [1.6.0](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-web-kit@1.5.0...@tecsinapse/react-web-kit@1.6.0) (2021-09-14)
 
 

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

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

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

@@ -13,12 +13,19 @@ var _MenuItem = require("./MenuItem");
 
 var _styled = require("./styled");
 
+var _Masonry = require("../../Masonry");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const MenuBlock = ({
-  data
+  options,
+  toggle
 }) => {
-  return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_styled.StyledContainerMenu, null, data.leftComponents && _react.default.createElement(_styled.StyledLeftComponent, null, data.leftComponents), _react.default.createElement(_reactCore.Text, {
+  return _react.default.createElement(_Masonry.Masonry, {
+    columns: 4,
+    spacingTop: "kilo",
+    spacingLeft: "mega"
+  }, options.map(data => _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_styled.StyledContainerMenu, null, data.leftComponents && _react.default.createElement(_styled.StyledLeftComponent, null, data.leftComponents), _react.default.createElement(_reactCore.Text, {
     fontWeight: "bold"
   }, data.title)), _react.default.createElement(_styled.StyledContainerItems, null, data.items.map(({
     title,
@@ -32,10 +39,12 @@ const MenuBlock = ({
     title: title,
     Component: Component,
     rightComponents: rightComponents,
-    props: props
-  }))));
+    props: props,
+    toggle: toggle
+  }))))));
 };
 
-var _default = MenuBlock;
+var _default = _react.default.memo(MenuBlock);
+
 exports.default = _default;
 //# sourceMappingURL=MenuBlock.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/molecules/Menubar/MenuBlock/MenuBlock.tsx"],"names":["MenuBlock","data","leftComponents","title","items","map","Component","props","rightComponents"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;;;AAWA,MAAMA,SAAmC,GAAG,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAc;AACxD,SACE,4DACE,6BAAC,2BAAD,QACGA,IAAI,CAACC,cAAL,IACC,6BAAC,2BAAD,QAAsBD,IAAI,CAACC,cAA3B,CAFJ,EAIE,6BAAC,eAAD;AAAM,IAAA,UAAU,EAAC;AAAjB,KAAyBD,IAAI,CAACE,KAA9B,CAJF,CADF,EAOE,6BAAC,4BAAD,QACGF,IAAI,CAACG,KAAL,CAAWC,GAAX,CACC,CAAC;AACCF,IAAAA,KADD;AAECG,IAAAA,SAFD;AAGCC,IAAAA,KAHD;AAICC,IAAAA,eAJD;AAKCJ,IAAAA;AALD,GAAD,KAOE,6BAAC,kBAAD;AACE,IAAA,KAAK,EAAEA,KADT;AAEE,IAAA,GAAG,EAAED,KAFP;AAGE,IAAA,KAAK,EAAEA,KAHT;AAIE,IAAA,SAAS,EAAEG,SAJb;AAKE,IAAA,eAAe,EAAEE,eALnB;AAME,IAAA,KAAK,EAAED;AANT,IARH,CADH,CAPF,CADF;AA8BD,CA/BD;;eAiCeP,S","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';\n\ninterface MenuBlockProps {\n  data: OptionsType;\n}\n\nconst MenuBlock: React.FC<MenuBlockProps> = ({ data }) => {\n  return (\n    <>\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            />\n          )\n        )}\n      </StyledContainerItems>\n    </>\n  );\n};\n\nexport default MenuBlock;\n"],"file":"MenuBlock.js"}
+{"version":3,"sources":["../../../../../src/components/molecules/Menubar/MenuBlock/MenuBlock.tsx"],"names":["MenuBlock","options","toggle","map","data","leftComponents","title","items","Component","props","rightComponents","React","memo"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AAMA;;;;AAOA,MAAMA,SAAmC,GAAG,CAAC;AAAEC,EAAAA,OAAF;AAAWC,EAAAA;AAAX,CAAD,KAAyB;AACnE,SACE,6BAAC,gBAAD;AAAS,IAAA,OAAO,EAAE,CAAlB;AAAqB,IAAA,UAAU,EAAC,MAAhC;AAAuC,IAAA,WAAW,EAAC;AAAnD,KACGD,OAAO,CAACE,GAAR,CAAYC,IAAI,IACf,4DACE,6BAAC,2BAAD,QACGA,IAAI,CAACC,cAAL,IACC,6BAAC,2BAAD,QAAsBD,IAAI,CAACC,cAA3B,CAFJ,EAIE,6BAAC,eAAD;AAAM,IAAA,UAAU,EAAC;AAAjB,KAAyBD,IAAI,CAACE,KAA9B,CAJF,CADF,EAOE,6BAAC,4BAAD,QACGF,IAAI,CAACG,KAAL,CAAWJ,GAAX,CACC,CAAC;AACCG,IAAAA,KADD;AAECE,IAAAA,SAFD;AAGCC,IAAAA,KAHD;AAICC,IAAAA,eAJD;AAKCH,IAAAA;AALD,GAAD,KAOE,6BAAC,kBAAD;AACE,IAAA,KAAK,EAAEA,KADT;AAEE,IAAA,GAAG,EAAED,KAFP;AAGE,IAAA,KAAK,EAAEA,KAHT;AAIE,IAAA,SAAS,EAAEE,SAJb;AAKE,IAAA,eAAe,EAAEE,eALnB;AAME,IAAA,KAAK,EAAED,KANT;AAOE,IAAA,MAAM,EAAEP;AAPV,IARH,CADH,CAPF,CADD,CADH,CADF;AAmCD,CApCD;;eAsCeS,eAAMC,IAAN,CAAWZ,SAAX,C","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        <>\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        </>\n      ))}\n    </Masonry>\n  );\n};\n\nexport default React.memo(MenuBlock);\n"],"file":"MenuBlock.js"}

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

@@ -4,6 +4,7 @@ interface MenuItemProps {
     title: string;
     Component: ElementType;
     props: any;
+    toggle: () => void;
     rightComponents?: React.ReactNode;
     items?: ItemsOptions[];
 }

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

@@ -24,7 +24,8 @@ const MenuItem = ({
   Component = 'a',
   props = {},
   rightComponents,
-  items
+  items,
+  toggle
 }) => {
   const [open, setOpen] = _react.default.useState(false);
 
@@ -39,7 +40,8 @@ const MenuItem = ({
   return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_styled2.StyledContainerItemText, {
     key: title
   }, _react.default.createElement(Component, _extends({}, props, {
-    style: noTextDecoration
+    style: noTextDecoration,
+    onClick: toggle
   }), _react.default.createElement(_reactCore.Text, {
     colorVariant: open ? 'primary' : 'secondary',
     colorTone: open ? 'medium' : 'dark'
@@ -51,7 +53,8 @@ const MenuItem = ({
     fontColor: "orange"
   }))), open && (items === null || items === void 0 ? void 0 : items.map(subItem => _react.default.createElement(_SubMenuBlock.SubMenuBlock, {
     key: subItem.title,
-    data: subItem
+    data: subItem,
+    toggle: toggle
   }))));
 };
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/components/molecules/Menubar/MenuBlock/MenuItem/MenuItem.tsx"],"names":["MenuItem","title","Component","props","rightComponents","items","open","setOpen","React","useState","noTextDecoration","textDecoration","getIconName","handleMenuAction","map","subItem"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;AAaA,MAAMA,QAAiC,GAAG,CAAC;AACzCC,EAAAA,KADyC;AAEzCC,EAAAA,SAAS,GAAG,GAF6B;AAGzCC,EAAAA,KAAK,GAAG,EAHiC;AAIzCC,EAAAA,eAJyC;AAKzCC,EAAAA;AALyC,CAAD,KAMpC;AACJ,QAAM,CAACC,IAAD,EAAOC,OAAP,IAAkBC,eAAMC,QAAN,CAAwB,KAAxB,CAAxB;;AAEA,QAAMC,gBAAgB,GAAG;AAAEC,IAAAA,cAAc,EAAE;AAAlB,GAAzB;;AAEA,QAAMC,WAAW,GAAG,MAClBN,IAAI,GAAG,8BAAH,GAAoC,gCAD1C;;AAGA,QAAMO,gBAAgB,GAAG,MAAMN,OAAO,CAAC,CAACD,IAAF,CAAtC;;AAEA,SACE,4DACE,6BAAC,gCAAD;AAAyB,IAAA,GAAG,EAAEL;AAA9B,KACE,6BAAC,SAAD,eAAeE,KAAf;AAAsB,IAAA,KAAK,EAAEO;AAA7B,MACE,6BAAC,eAAD;AACE,IAAA,YAAY,EAAEJ,IAAI,GAAG,SAAH,GAAe,WADnC;AAEE,IAAA,SAAS,EAAEA,IAAI,GAAG,QAAH,GAAc;AAF/B,KAIE,6BAAC,kBAAD,QAAaL,KAAb,CAJF,CADF,CADF,EASGG,eAAe,IAAI,CAACC,KAApB,IACC,6BAAC,4BAAD,QAAuBD,eAAvB,CAVJ,EAYGC,KAAK,IACJ,6BAAC,wBAAD;AAAiB,IAAA,OAAO,EAAEQ;AAA1B,KACE,6BAAC,eAAD;AACE,IAAA,IAAI,EAAED,WAAW,EADnB;AAEE,IAAA,IAAI,EAAC,oBAFP;AAGE,IAAA,SAAS,EAAC;AAHZ,IADF,CAbJ,CADF,EAuBGN,IAAI,KACHD,KADG,aACHA,KADG,uBACHA,KAAK,CAAES,GAAP,CAAWC,OAAO,IAChB,6BAAC,0BAAD;AAAc,IAAA,GAAG,EAAEA,OAAO,CAACd,KAA3B;AAAkC,IAAA,IAAI,EAAEc;AAAxC,IADF,CADG,CAvBP,CADF;AA8BD,CA9CD;;eAgDef,Q","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  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}) => {\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}>\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} />\n        ))}\n    </>\n  );\n};\n\nexport default MenuItem;\n"],"file":"MenuItem.js"}
+{"version":3,"sources":["../../../../../../src/components/molecules/Menubar/MenuBlock/MenuItem/MenuItem.tsx"],"names":["MenuItem","title","Component","props","rightComponents","items","toggle","open","setOpen","React","useState","noTextDecoration","textDecoration","getIconName","handleMenuAction","map","subItem"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;AAcA,MAAMA,QAAiC,GAAG,CAAC;AACzCC,EAAAA,KADyC;AAEzCC,EAAAA,SAAS,GAAG,GAF6B;AAGzCC,EAAAA,KAAK,GAAG,EAHiC;AAIzCC,EAAAA,eAJyC;AAKzCC,EAAAA,KALyC;AAMzCC,EAAAA;AANyC,CAAD,KAOpC;AACJ,QAAM,CAACC,IAAD,EAAOC,OAAP,IAAkBC,eAAMC,QAAN,CAAwB,KAAxB,CAAxB;;AAEA,QAAMC,gBAAgB,GAAG;AAAEC,IAAAA,cAAc,EAAE;AAAlB,GAAzB;;AAEA,QAAMC,WAAW,GAAG,MAClBN,IAAI,GAAG,8BAAH,GAAoC,gCAD1C;;AAGA,QAAMO,gBAAgB,GAAG,MAAMN,OAAO,CAAC,CAACD,IAAF,CAAtC;;AAEA,SACE,4DACE,6BAAC,gCAAD;AAAyB,IAAA,GAAG,EAAEN;AAA9B,KACE,6BAAC,SAAD,eAAeE,KAAf;AAAsB,IAAA,KAAK,EAAEQ,gBAA7B;AAA+C,IAAA,OAAO,EAAEL;AAAxD,MACE,6BAAC,eAAD;AACE,IAAA,YAAY,EAAEC,IAAI,GAAG,SAAH,GAAe,WADnC;AAEE,IAAA,SAAS,EAAEA,IAAI,GAAG,QAAH,GAAc;AAF/B,KAIE,6BAAC,kBAAD,QAAaN,KAAb,CAJF,CADF,CADF,EASGG,eAAe,IAAI,CAACC,KAApB,IACC,6BAAC,4BAAD,QAAuBD,eAAvB,CAVJ,EAYGC,KAAK,IACJ,6BAAC,wBAAD;AAAiB,IAAA,OAAO,EAAES;AAA1B,KACE,6BAAC,eAAD;AACE,IAAA,IAAI,EAAED,WAAW,EADnB;AAEE,IAAA,IAAI,EAAC,oBAFP;AAGE,IAAA,SAAS,EAAC;AAHZ,IADF,CAbJ,CADF,EAuBGN,IAAI,KACHF,KADG,aACHA,KADG,uBACHA,KAAK,CAAEU,GAAP,CAAWC,OAAO,IAChB,6BAAC,0BAAD;AAAc,IAAA,GAAG,EAAEA,OAAO,CAACf,KAA3B;AAAkC,IAAA,IAAI,EAAEe,OAAxC;AAAiD,IAAA,MAAM,EAAEV;AAAzD,IADF,CADG,CAvBP,CADF;AA8BD,CA/CD;;eAiDeN,Q","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"],"file":"MenuItem.js"}

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

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

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

@@ -18,7 +18,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _extends() { _extends = Object.assign || 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); }
 
 const SubMenuBlock = ({
-  data
+  data,
+  toggle
 }) => {
   const {
     Component,
@@ -30,7 +31,8 @@ const SubMenuBlock = ({
     textDecoration: 'none'
   };
   return _react.default.createElement(_styled2.StyledContainerItem, null, _react.default.createElement(_styled2.DummyBorder, null), _react.default.createElement(Component, _extends({}, props, {
-    style: noTextDecoration
+    style: noTextDecoration,
+    onClick: toggle
   }), _react.default.createElement(_reactCore.Text, {
     colorVariant: "secondary",
     colorTone: "medium",

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../src/components/molecules/Menubar/MenuBlock/MenuItem/SubMenuBlock/SubMenuBlock.tsx"],"names":["SubMenuBlock","data","Component","props","rightComponents","title","noTextDecoration","textDecoration"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAEA;;;;;;AAMA,MAAMA,YAAyC,GAAG,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAc;AAC9D,QAAM;AAAEC,IAAAA,SAAF;AAAaC,IAAAA,KAAb;AAAoBC,IAAAA,eAApB;AAAqCC,IAAAA;AAArC,MAA+CJ,IAArD;AAEA,QAAMK,gBAAgB,GAAG;AAAEC,IAAAA,cAAc,EAAE;AAAlB,GAAzB;AAEA,SACE,6BAAC,4BAAD,QACE,6BAAC,oBAAD,OADF,EAEE,6BAAC,SAAD,eAAeJ,KAAf;AAAsB,IAAA,KAAK,EAAEG;AAA7B,MACE,6BAAC,eAAD;AAAM,IAAA,YAAY,EAAC,WAAnB;AAA+B,IAAA,SAAS,EAAC,QAAzC;AAAkD,IAAA,UAAU,EAAC;AAA7D,KACE,6BAAC,kBAAD,QAAaD,KAAb,CADF,CADF,CAFF,EAOGD,eAAe,IACd,6BAAC,4BAAD,QAAuBA,eAAvB,CARJ,CADF;AAaD,CAlBD;;eAoBeJ,Y","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}\n\nconst SubMenuBlock: React.FC<SubMenuBlockProps> = ({ data }) => {\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}>\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"],"file":"SubMenuBlock.js"}
+{"version":3,"sources":["../../../../../../../src/components/molecules/Menubar/MenuBlock/MenuItem/SubMenuBlock/SubMenuBlock.tsx"],"names":["SubMenuBlock","data","toggle","Component","props","rightComponents","title","noTextDecoration","textDecoration"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAEA;;;;;;AAOA,MAAMA,YAAyC,GAAG,CAAC;AAAEC,EAAAA,IAAF;AAAQC,EAAAA;AAAR,CAAD,KAAsB;AACtE,QAAM;AAAEC,IAAAA,SAAF;AAAaC,IAAAA,KAAb;AAAoBC,IAAAA,eAApB;AAAqCC,IAAAA;AAArC,MAA+CL,IAArD;AAEA,QAAMM,gBAAgB,GAAG;AAAEC,IAAAA,cAAc,EAAE;AAAlB,GAAzB;AAEA,SACE,6BAAC,4BAAD,QACE,6BAAC,oBAAD,OADF,EAEE,6BAAC,SAAD,eAAeJ,KAAf;AAAsB,IAAA,KAAK,EAAEG,gBAA7B;AAA+C,IAAA,OAAO,EAAEL;AAAxD,MACE,6BAAC,eAAD;AAAM,IAAA,YAAY,EAAC,WAAnB;AAA+B,IAAA,SAAS,EAAC,QAAzC;AAAkD,IAAA,UAAU,EAAC;AAA7D,KACE,6BAAC,kBAAD,QAAaI,KAAb,CADF,CADF,CAFF,EAOGD,eAAe,IACd,6BAAC,4BAAD,QAAuBA,eAAvB,CARJ,CADF;AAaD,CAlBD;;eAoBeL,Y","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"],"file":"SubMenuBlock.js"}

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

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

package/dist/components/molecules/Menubar/Menubar.js

@@ -11,12 +11,8 @@ var _reactCore = require("@tecsinapse/react-core");
 
 var _reactTransitionGroup = require("react-transition-group");
 
-var _react2 = require("@emotion/react");
-
 var _styled = require("./styled");
 
-var _Masonry = require("../Masonry");
-
 var _MostUsed = require("./MostUsed");
 
 var _MenuBlock = require("./MenuBlock");
@@ -32,11 +28,12 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 const Menubar = ({
   leftComponents,
   rightComponents,
-  inputPlaceholder = 'O quê você deseja buscar?',
+  searchPlaceholder = 'O quê você deseja buscar?',
   options,
   mostUsed,
   mostUsedLabel = 'Mais acessados',
-  searchResultsLabel = 'Resultados da busca'
+  searchResultsLabel = 'Resultados da busca',
+  searchable = true
 }) => {
   const [search, setSearch] = _react.default.useState('');
 
@@ -44,11 +41,9 @@ const Menubar = ({
 
   const [input, setInput] = (0, _reactCore.useDebouncedState)('', state => setSearch(state));
 
-  const [isOpen, setOpen] = _react.default.useState(false);
-
-  const theme = (0, _react2.useTheme)();
+  const [open, setOpen] = _react.default.useState(false);
 
-  const toggleOpenClose = () => setOpen(!isOpen);
+  const toggleOpen = _react.default.useCallback(() => setOpen(state => !state), [setOpen]);
 
   _react.default.useEffect(() => {
     if (search === '') return;
@@ -58,8 +53,8 @@ const Menubar = ({
   return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_styled.StyledMenuBar, null, _react.default.createElement(_styled.StyledMenuButton, {
     variant: "filled",
     color: "primary",
-    onPress: toggleOpenClose
-  }, !isOpen ? _react.default.createElement(_reactCore.Icon, {
+    onPress: toggleOpen
+  }, !open ? _react.default.createElement(_reactCore.Icon, {
     size: "deca",
     name: "menu",
     type: "material-community",
@@ -70,40 +65,37 @@ const Menubar = ({
     type: "material-community",
     fontColor: "light"
   })), leftComponents, _react.default.createElement(_reactTransitionGroup.Transition, {
-    in: isOpen,
+    in: open,
     timeout: 250
-  }, state => _react.default.createElement("div", {
-    style: (0, _animations.getInputContainerStyles)(state, theme)
-  }, _react.default.createElement(_styled.StyledInputContainer, null, _react.default.createElement(_styled.StyledInput, {
-    placeholder: inputPlaceholder,
+  }, state => _react.default.createElement(_styled.StyledInputContainer, {
+    style: (0, _animations.getInputContainerStyles)(state)
+  }, searchable && _react.default.createElement(_styled.StyledInput, {
+    placeholder: searchPlaceholder,
     leftComponent: _react.default.createElement(_styled.StyledIconInput, null, _react.default.createElement(_reactCore.Icon, {
       name: "magnify",
       type: "material-community"
     })),
     value: input,
     onChange: setInput
-  })), rightComponents))), _react.default.createElement(_reactTransitionGroup.Transition, {
-    in: isOpen,
+  }))), rightComponents), _react.default.createElement(_reactTransitionGroup.Transition, {
+    in: open,
     timeout: 250
-  }, state => _react.default.createElement("div", {
-    style: (0, _animations.getContainerOpenMenuStyles)(state, theme)
-  }, _react.default.createElement(_styled.StyledContainerOpenMenu, null, !search ? _react.default.createElement("div", null, mostUsed && _react.default.createElement(_MostUsed.MostUsed, {
+  }, state => _react.default.createElement(_styled.StyledContainerOpenMenu, {
+    style: (0, _animations.getContainerOpenMenuStyles)(state)
+  }, !search ? _react.default.createElement(_react.default.Fragment, null, mostUsed && _react.default.createElement(_MostUsed.MostUsed, {
     label: mostUsedLabel,
-    data: mostUsed
-  }), _react.default.createElement(_Masonry.Masonry, {
-    columns: 4,
-    spacingTop: "kilo",
-    spacingLeft: "mega"
-  }, options.map(option => _react.default.createElement(_MenuBlock.MenuBlock, {
-    data: option,
-    key: option.title
-  })))) : _react.default.createElement(_styled.StyledSearchResultsContainer, null, _react.default.createElement(_styled.StyledSearchTextContainer, null, _react.default.createElement(_reactCore.Text, {
+    data: mostUsed,
+    toggle: toggleOpen
+  }), _react.default.createElement(_MenuBlock.MenuBlock, {
+    options: options,
+    toggle: toggleOpen
+  })) : _react.default.createElement(_styled.StyledSearchResultsContainer, null, _react.default.createElement(_styled.StyledSearchTextContainer, null, _react.default.createElement(_reactCore.Text, {
     fontWeight: "bold"
   }, searchResultsLabel)), results.map(result => _react.default.createElement(_SearchResultItem.SearchResultItem, {
     key: `${result.title}-${result.category}`,
     data: result,
     searchTerm: search
-  })))))));
+  }))))));
 };
 
 var _default = Menubar;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/molecules/Menubar/Menubar.tsx"],"names":["Menubar","leftComponents","rightComponents","inputPlaceholder","options","mostUsed","mostUsedLabel","searchResultsLabel","search","setSearch","React","useState","results","setResults","input","setInput","state","isOpen","setOpen","theme","toggleOpenClose","useEffect","map","option","title","result","category"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {\n  Icon,\n  Text,\n  ThemeProp,\n  useDebouncedState,\n} from '@tecsinapse/react-core';\nimport { Transition } from 'react-transition-group';\nimport { useTheme } from '@emotion/react';\nimport {\n  StyledIconInput,\n  StyledMenuBar,\n  StyledMenuButton,\n  StyledContainerOpenMenu,\n  StyledInput,\n  StyledInputContainer,\n  StyledSearchResultsContainer,\n  StyledSearchTextContainer,\n} from './styled';\nimport { Masonry } from '../Masonry';\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';\n\nexport interface MenubarProps {\n  leftComponents?: React.ReactNode;\n  rightComponents?: React.ReactNode;\n  inputPlaceholder?: string;\n  options: OptionsType[];\n  /** Limited to first 4 elements */\n  mostUsed?: MostUsedType[];\n  mostUsedLabel?: string;\n  searchResultsLabel?: string;\n}\n\nconst Menubar: React.FC<MenubarProps> = ({\n  leftComponents,\n  rightComponents,\n  inputPlaceholder = 'O quê você deseja buscar?',\n  options,\n  mostUsed,\n  mostUsedLabel = 'Mais acessados',\n  searchResultsLabel = 'Resultados da busca',\n}) => {\n  const [search, setSearch] = React.useState<string>('');\n  const [results, setResults] = React.useState<MostUsedType[]>([]);\n  const [input, setInput] = useDebouncedState('', state => setSearch(state));\n  const [isOpen, setOpen] = React.useState<boolean>(false);\n  const theme = useTheme() as ThemeProp;\n\n  const toggleOpenClose = () => setOpen(!isOpen);\n\n  React.useEffect(() => {\n    if (search === '') return;\n    setResults(filterAndTransform(options, search));\n  }, [search]);\n\n  return (\n    <>\n      <StyledMenuBar>\n        <StyledMenuButton\n          variant=\"filled\"\n          color=\"primary\"\n          onPress={toggleOpenClose}\n        >\n          {!isOpen ? (\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={isOpen} timeout={250}>\n          {state => (\n            <div style={getInputContainerStyles(state, theme)}>\n              <StyledInputContainer>\n                <StyledInput\n                  placeholder={inputPlaceholder}\n                  leftComponent={\n                    <StyledIconInput>\n                      <Icon name=\"magnify\" type=\"material-community\" />\n                    </StyledIconInput>\n                  }\n                  value={input}\n                  onChange={setInput}\n                />\n              </StyledInputContainer>\n              {rightComponents}\n            </div>\n          )}\n        </Transition>\n      </StyledMenuBar>\n      <Transition in={isOpen} timeout={250}>\n        {state => (\n          <div style={getContainerOpenMenuStyles(state, theme)}>\n            <StyledContainerOpenMenu>\n              {!search ? (\n                <div>\n                  {mostUsed && (\n                    <MostUsed label={mostUsedLabel} data={mostUsed} />\n                  )}\n                  <Masonry columns={4} spacingTop=\"kilo\" spacingLeft=\"mega\">\n                    {options.map(option => (\n                      <MenuBlock data={option} key={option.title} />\n                    ))}\n                  </Masonry>\n                </div>\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                    />\n                  ))}\n                </StyledSearchResultsContainer>\n              )}\n            </StyledContainerOpenMenu>\n          </div>\n        )}\n      </Transition>\n    </>\n  );\n};\n\nexport default Menubar;\n"],"file":"Menubar.js"}
+{"version":3,"sources":["../../../../src/components/molecules/Menubar/Menubar.tsx"],"names":["Menubar","leftComponents","rightComponents","searchPlaceholder","options","mostUsed","mostUsedLabel","searchResultsLabel","searchable","search","setSearch","React","useState","results","setResults","input","setInput","state","open","setOpen","toggleOpen","useCallback","useEffect","map","result","title","category"],"mappings":"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","sourcesContent":["import React 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';\n\nexport interface MenubarProps {\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}) => {\n  const [search, setSearch] = React.useState<string>('');\n  const [results, setResults] = React.useState<MostUsedType[]>([]);\n  const [input, setInput] = useDebouncedState('', state => setSearch(state));\n  const [open, setOpen] = React.useState<boolean>(false);\n\n  const toggleOpen = React.useCallback(() => 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    <>\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                  />\n                ))}\n              </StyledSearchResultsContainer>\n            )}\n          </StyledContainerOpenMenu>\n        )}\n      </Transition>\n    </>\n  );\n};\n\nexport default Menubar;\n"],"file":"Menubar.js"}

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

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

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

@@ -17,7 +17,8 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 const MostUsed = ({
   data,
-  label
+  label,
+  toggle
 }) => {
   const noTextDecoration = {
     textDecoration: 'none'
@@ -31,7 +32,8 @@ const MostUsed = ({
     props = {}
   }) => _react.default.createElement(Component, _extends({}, props, {
     style: noTextDecoration,
-    key: `${title}-${category}`
+    key: `${title}-${category}`,
+    onClick: toggle
   }), _react.default.createElement(_styled.StyledCard, {
     elevated: true,
     key: `${title}-${category}`
@@ -45,6 +47,7 @@ const MostUsed = ({
   }, category))))));
 };
 
-var _default = MostUsed;
+var _default = _react.default.memo(MostUsed);
+
 exports.default = _default;
 //# sourceMappingURL=MostUsed.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/molecules/Menubar/MostUsed/MostUsed.tsx"],"names":["MostUsed","data","label","noTextDecoration","textDecoration","slice","map","title","category","Component","props"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;;;AAQA,MAAMA,QAAiC,GAAG,CAAC;AAAEC,EAAAA,IAAF;AAAQC,EAAAA;AAAR,CAAD,KAAqB;AAC7D,QAAMC,gBAAgB,GAAG;AAAEC,IAAAA,cAAc,EAAE;AAAlB,GAAzB;AAEA,SACE,4DACE,6BAAC,eAAD;AAAM,IAAA,UAAU,EAAC;AAAjB,KAAyBF,KAAzB,CADF,EAEE,6BAAC,2BAAD,QACGD,IAAI,CACFI,KADF,CACQ,CADR,EACW,CADX,EAEEC,GAFF,CAGG,CAAC;AACCC,IAAAA,KADD;AAECC,IAAAA,QAFD;AAGCC,IAAAA,SAAS,GAAG,GAHb;AAICC,IAAAA,KAAK,GAAG;AAJT,GAAD,KAME,6BAAC,SAAD,eACMA,KADN;AAEE,IAAA,KAAK,EAAEP,gBAFT;AAGE,IAAA,GAAG,EAAG,GAAEI,KAAM,IAAGC,QAAS;AAH5B,MAKE,6BAAC,kBAAD;AAAY,IAAA,QAAQ,MAApB;AAAqB,IAAA,GAAG,EAAG,GAAED,KAAM,IAAGC,QAAS;AAA/C,KACE,6BAAC,eAAD;AAAM,IAAA,UAAU,EAAC,MAAjB;AAAwB,IAAA,YAAY,EAAC;AAArC,KACGD,KADH,CADF,EAIE,6BAAC,eAAD;AACE,IAAA,UAAU,EAAC,MADb;AAEE,IAAA,YAAY,EAAC,WAFf;AAGE,IAAA,UAAU,EAAC;AAHb,KAKGC,QALH,CAJF,CALF,CATL,CADH,CAFF,CADF;AAoCD,CAvCD;;eAyCeR,Q","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}\n\nconst MostUsed: React.FC<MostUsedProps> = ({ data, label }) => {\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              >\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 MostUsed;\n"],"file":"MostUsed.js"}
+{"version":3,"sources":["../../../../../src/components/molecules/Menubar/MostUsed/MostUsed.tsx"],"names":["MostUsed","data","label","toggle","noTextDecoration","textDecoration","slice","map","title","category","Component","props","React","memo"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;;;AASA,MAAMA,QAAiC,GAAG,CAAC;AAAEC,EAAAA,IAAF;AAAQC,EAAAA,KAAR;AAAeC,EAAAA;AAAf,CAAD,KAA6B;AACrE,QAAMC,gBAAgB,GAAG;AAAEC,IAAAA,cAAc,EAAE;AAAlB,GAAzB;AAEA,SACE,4DACE,6BAAC,eAAD;AAAM,IAAA,UAAU,EAAC;AAAjB,KAAyBH,KAAzB,CADF,EAEE,6BAAC,2BAAD,QACGD,IAAI,CACFK,KADF,CACQ,CADR,EACW,CADX,EAEEC,GAFF,CAGG,CAAC;AACCC,IAAAA,KADD;AAECC,IAAAA,QAFD;AAGCC,IAAAA,SAAS,GAAG,GAHb;AAICC,IAAAA,KAAK,GAAG;AAJT,GAAD,KAME,6BAAC,SAAD,eACMA,KADN;AAEE,IAAA,KAAK,EAAEP,gBAFT;AAGE,IAAA,GAAG,EAAG,GAAEI,KAAM,IAAGC,QAAS,EAH5B;AAIE,IAAA,OAAO,EAAEN;AAJX,MAME,6BAAC,kBAAD;AAAY,IAAA,QAAQ,MAApB;AAAqB,IAAA,GAAG,EAAG,GAAEK,KAAM,IAAGC,QAAS;AAA/C,KACE,6BAAC,eAAD;AAAM,IAAA,UAAU,EAAC,MAAjB;AAAwB,IAAA,YAAY,EAAC;AAArC,KACGD,KADH,CADF,EAIE,6BAAC,eAAD;AACE,IAAA,UAAU,EAAC,MADb;AAEE,IAAA,YAAY,EAAC,WAFf;AAGE,IAAA,UAAU,EAAC;AAHb,KAKGC,QALH,CAJF,CANF,CATL,CADH,CAFF,CADF;AAqCD,CAxCD;;eA0CeG,eAAMC,IAAN,CAAWb,QAAX,C","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"],"file":"MostUsed.js"}

package/dist/components/molecules/Menubar/animations.d.ts

@@ -1,4 +1,4 @@
 import { CSSProperties } from 'react';
 import { TransitionStatus } from 'react-transition-group';
-export declare const getInputContainerStyles: (state: TransitionStatus, theme: any) => CSSProperties;
-export declare const getContainerOpenMenuStyles: (state: TransitionStatus, theme: any) => CSSProperties;
+export declare const getInputContainerStyles: (state: TransitionStatus) => CSSProperties;
+export declare const getContainerOpenMenuStyles: (state: TransitionStatus) => CSSProperties;

package/dist/components/molecules/Menubar/animations.js

@@ -4,24 +4,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getContainerOpenMenuStyles = exports.getInputContainerStyles = void 0;
-
-const getDefaultInputContainerStyles = theme => ({
-  display: 'flex',
-  flex: 1,
+const getDefaultInputContainerStyles = {
   transitionDuration: '250ms',
   transitionProperty: 'opacity scale transform',
-  transitionTimingFunction: 'ease-in-out',
-  zIndex: theme.zIndex.default
-});
-
-const getDefaultContainerOpenMenuStyles = theme => ({
+  transitionTimingFunction: 'ease-in-out'
+};
+const getDefaultContainerOpenMenuStyles = {
   transitionDuration: '250ms',
   transitionProperty: 'opacity scale transform',
-  transitionTimingFunction: 'ease-in-out',
-  zIndex: theme.zIndex.default
-});
-
-const getInputContainerTransform = () => ({
+  transitionTimingFunction: 'ease-in-out'
+};
+const getInputContainerTransform = {
   entered: {
     transform: 'scale(1, 1) translateY(0px)'
   },
@@ -37,9 +30,8 @@ const getInputContainerTransform = () => ({
     opacity: 0.5,
     transform: 'scale(0.99, 0.99) translateY(-5px)'
   }
-});
-
-const getContainerOpenMenuTransform = () => ({
+};
+const getContainerOpenMenuTransform = {
   entered: {
     transform: 'scale(1, 1) translateY(0px) '
   },
@@ -55,16 +47,16 @@ const getContainerOpenMenuTransform = () => ({
     opacity: 0.95,
     transform: 'scale(0.99, 0.99) translateY(0px)'
   }
-});
+};
 
-const getInputContainerStyles = (state, theme) => ({ ...getDefaultInputContainerStyles(theme),
-  ...getInputContainerTransform()[state]
+const getInputContainerStyles = state => ({ ...getDefaultInputContainerStyles,
+  ...getInputContainerTransform[state]
 });
 
 exports.getInputContainerStyles = getInputContainerStyles;
 
-const getContainerOpenMenuStyles = (state, theme) => ({ ...getDefaultContainerOpenMenuStyles(theme),
-  ...getContainerOpenMenuTransform()[state]
+const getContainerOpenMenuStyles = state => ({ ...getDefaultContainerOpenMenuStyles,
+  ...getContainerOpenMenuTransform[state]
 });
 
 exports.getContainerOpenMenuStyles = getContainerOpenMenuStyles;

package/dist/components/molecules/Menubar/animations.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/molecules/Menubar/animations.ts"],"names":["getDefaultInputContainerStyles","theme","display","flex","transitionDuration","transitionProperty","transitionTimingFunction","zIndex","default","getDefaultContainerOpenMenuStyles","getInputContainerTransform","entered","transform","entering","opacity","exited","exiting","getContainerOpenMenuTransform","getInputContainerStyles","state","getContainerOpenMenuStyles"],"mappings":";;;;;;;AAIA,MAAMA,8BAA8B,GAAIC,KAAD,KAAuB;AAC5DC,EAAAA,OAAO,EAAE,MADmD;AAE5DC,EAAAA,IAAI,EAAE,CAFsD;AAG5DC,EAAAA,kBAAkB,EAAE,OAHwC;AAI5DC,EAAAA,kBAAkB,EAAE,yBAJwC;AAK5DC,EAAAA,wBAAwB,EAAE,aALkC;AAM5DC,EAAAA,MAAM,EAAEN,KAAK,CAACM,MAAN,CAAaC;AANuC,CAAvB,CAAvC;;AASA,MAAMC,iCAAiC,GAAIR,KAAD,KAAuB;AAC/DG,EAAAA,kBAAkB,EAAE,OAD2C;AAE/DC,EAAAA,kBAAkB,EAAE,yBAF2C;AAG/DC,EAAAA,wBAAwB,EAAE,aAHqC;AAI/DC,EAAAA,MAAM,EAAEN,KAAK,CAACM,MAAN,CAAaC;AAJ0C,CAAvB,CAA1C;;AAOA,MAAME,0BAA0B,GAAG,OAAO;AACxCC,EAAAA,OAAO,EAAE;AACPC,IAAAA,SAAS,EAAE;AADJ,GAD+B;AAIxCC,EAAAA,QAAQ,EAAE;AACRC,IAAAA,OAAO,EAAE,GADD;AAERF,IAAAA,SAAS,EAAE;AAFH,GAJ8B;AAQxCG,EAAAA,MAAM,EAAE;AACND,IAAAA,OAAO,EAAE,CADH;AAENF,IAAAA,SAAS,EAAE;AAFL,GARgC;AAYxCI,EAAAA,OAAO,EAAE;AACPF,IAAAA,OAAO,EAAE,GADF;AAEPF,IAAAA,SAAS,EAAE;AAFJ;AAZ+B,CAAP,CAAnC;;AAkBA,MAAMK,6BAA6B,GAAG,OAAO;AAC3CN,EAAAA,OAAO,EAAE;AACPC,IAAAA,SAAS,EAAE;AADJ,GADkC;AAI3CC,EAAAA,QAAQ,EAAE;AACRC,IAAAA,OAAO,EAAE,IADD;AAERF,IAAAA,SAAS,EAAE;AAFH,GAJiC;AAQ3CG,EAAAA,MAAM,EAAE;AACND,IAAAA,OAAO,EAAE,CADH;AAENF,IAAAA,SAAS,EAAE;AAFL,GARmC;AAY3CI,EAAAA,OAAO,EAAE;AACPF,IAAAA,OAAO,EAAE,IADF;AAEPF,IAAAA,SAAS,EAAE;AAFJ;AAZkC,CAAP,CAAtC;;AAkBO,MAAMM,uBAAuB,GAAG,CACrCC,KADqC,EAErClB,KAFqC,MAGlB,EACnB,GAAGD,8BAA8B,CAACC,KAAD,CADd;AAEnB,KAAGS,0BAA0B,GAAGS,KAAH;AAFV,CAHkB,CAAhC;;;;AAQA,MAAMC,0BAA0B,GAAG,CACxCD,KADwC,EAExClB,KAFwC,MAGrB,EACnB,GAAGQ,iCAAiC,CAACR,KAAD,CADjB;AAEnB,KAAGgB,6BAA6B,GAAGE,KAAH;AAFb,CAHqB,CAAnC","sourcesContent":["import { CSSProperties } from 'react';\nimport { TransitionStatus } from 'react-transition-group';\nimport { ThemeProp } from '@tecsinapse/react-core';\n\nconst getDefaultInputContainerStyles = (theme: ThemeProp) => ({\n  display: 'flex',\n  flex: 1,\n  transitionDuration: '250ms',\n  transitionProperty: 'opacity scale transform',\n  transitionTimingFunction: 'ease-in-out',\n  zIndex: theme.zIndex.default,\n});\n\nconst getDefaultContainerOpenMenuStyles = (theme: ThemeProp) => ({\n  transitionDuration: '250ms',\n  transitionProperty: 'opacity scale transform',\n  transitionTimingFunction: 'ease-in-out',\n  zIndex: theme.zIndex.default,\n});\n\nconst getInputContainerTransform = () => ({\n  entered: {\n    transform: 'scale(1, 1) translateY(0px)',\n  },\n  entering: {\n    opacity: 0.5,\n    transform: 'scale(0.99, 0.99) translateY(-5px)',\n  },\n  exited: {\n    opacity: 0,\n    transform: 'scale(0.99, 0.99) translateY(-50px)',\n  },\n  exiting: {\n    opacity: 0.5,\n    transform: 'scale(0.99, 0.99) translateY(-5px)',\n  },\n});\n\nconst getContainerOpenMenuTransform = () => ({\n  entered: {\n    transform: 'scale(1, 1) translateY(0px) ',\n  },\n  entering: {\n    opacity: 0.95,\n    transform: 'scale(0.99, 0.99) translateY(0px)',\n  },\n  exited: {\n    opacity: 0,\n    transform: 'scale(0.99, 0.99) translateY(-600px)',\n  },\n  exiting: {\n    opacity: 0.95,\n    transform: 'scale(0.99, 0.99) translateY(0px)',\n  },\n});\n\nexport const getInputContainerStyles = (\n  state: TransitionStatus,\n  theme: ThemeProp\n): CSSProperties => ({\n  ...getDefaultInputContainerStyles(theme),\n  ...getInputContainerTransform()[state],\n});\n\nexport const getContainerOpenMenuStyles = (\n  state: TransitionStatus,\n  theme: ThemeProp\n): CSSProperties => ({\n  ...getDefaultContainerOpenMenuStyles(theme),\n  ...getContainerOpenMenuTransform()[state],\n});\n"],"file":"animations.js"}
+{"version":3,"sources":["../../../../src/components/molecules/Menubar/animations.ts"],"names":["getDefaultInputContainerStyles","transitionDuration","transitionProperty","transitionTimingFunction","getDefaultContainerOpenMenuStyles","getInputContainerTransform","entered","transform","entering","opacity","exited","exiting","getContainerOpenMenuTransform","getInputContainerStyles","state","getContainerOpenMenuStyles"],"mappings":";;;;;;AAGA,MAAMA,8BAA8B,GAAG;AACrCC,EAAAA,kBAAkB,EAAE,OADiB;AAErCC,EAAAA,kBAAkB,EAAE,yBAFiB;AAGrCC,EAAAA,wBAAwB,EAAE;AAHW,CAAvC;AAMA,MAAMC,iCAAiC,GAAG;AACxCH,EAAAA,kBAAkB,EAAE,OADoB;AAExCC,EAAAA,kBAAkB,EAAE,yBAFoB;AAGxCC,EAAAA,wBAAwB,EAAE;AAHc,CAA1C;AAMA,MAAME,0BAA0B,GAAG;AACjCC,EAAAA,OAAO,EAAE;AACPC,IAAAA,SAAS,EAAE;AADJ,GADwB;AAIjCC,EAAAA,QAAQ,EAAE;AACRC,IAAAA,OAAO,EAAE,GADD;AAERF,IAAAA,SAAS,EAAE;AAFH,GAJuB;AAQjCG,EAAAA,MAAM,EAAE;AACND,IAAAA,OAAO,EAAE,CADH;AAENF,IAAAA,SAAS,EAAE;AAFL,GARyB;AAYjCI,EAAAA,OAAO,EAAE;AACPF,IAAAA,OAAO,EAAE,GADF;AAEPF,IAAAA,SAAS,EAAE;AAFJ;AAZwB,CAAnC;AAkBA,MAAMK,6BAA6B,GAAG;AACpCN,EAAAA,OAAO,EAAE;AACPC,IAAAA,SAAS,EAAE;AADJ,GAD2B;AAIpCC,EAAAA,QAAQ,EAAE;AACRC,IAAAA,OAAO,EAAE,IADD;AAERF,IAAAA,SAAS,EAAE;AAFH,GAJ0B;AAQpCG,EAAAA,MAAM,EAAE;AACND,IAAAA,OAAO,EAAE,CADH;AAENF,IAAAA,SAAS,EAAE;AAFL,GAR4B;AAYpCI,EAAAA,OAAO,EAAE;AACPF,IAAAA,OAAO,EAAE,IADF;AAEPF,IAAAA,SAAS,EAAE;AAFJ;AAZ2B,CAAtC;;AAkBO,MAAMM,uBAAuB,GAClCC,KADqC,KAElB,EACnB,GAAGd,8BADgB;AAEnB,KAAGK,0BAA0B,CAACS,KAAD;AAFV,CAFkB,CAAhC;;;;AAOA,MAAMC,0BAA0B,GACrCD,KADwC,KAErB,EACnB,GAAGV,iCADgB;AAEnB,KAAGQ,6BAA6B,CAACE,KAAD;AAFb,CAFqB,CAAnC","sourcesContent":["import { CSSProperties } from 'react';\nimport { TransitionStatus } from 'react-transition-group';\n\nconst getDefaultInputContainerStyles = {\n  transitionDuration: '250ms',\n  transitionProperty: 'opacity scale transform',\n  transitionTimingFunction: 'ease-in-out',\n};\n\nconst getDefaultContainerOpenMenuStyles = {\n  transitionDuration: '250ms',\n  transitionProperty: 'opacity scale transform',\n  transitionTimingFunction: 'ease-in-out',\n};\n\nconst getInputContainerTransform = {\n  entered: {\n    transform: 'scale(1, 1) translateY(0px)',\n  },\n  entering: {\n    opacity: 0.5,\n    transform: 'scale(0.99, 0.99) translateY(-5px)',\n  },\n  exited: {\n    opacity: 0,\n    transform: 'scale(0.99, 0.99) translateY(-50px)',\n  },\n  exiting: {\n    opacity: 0.5,\n    transform: 'scale(0.99, 0.99) translateY(-5px)',\n  },\n};\n\nconst getContainerOpenMenuTransform = {\n  entered: {\n    transform: 'scale(1, 1) translateY(0px) ',\n  },\n  entering: {\n    opacity: 0.95,\n    transform: 'scale(0.99, 0.99) translateY(0px)',\n  },\n  exited: {\n    opacity: 0,\n    transform: 'scale(0.99, 0.99) translateY(-600px)',\n  },\n  exiting: {\n    opacity: 0.95,\n    transform: 'scale(0.99, 0.99) translateY(0px)',\n  },\n};\n\nexport const getInputContainerStyles = (\n  state: TransitionStatus\n): CSSProperties => ({\n  ...getDefaultInputContainerStyles,\n  ...getInputContainerTransform[state],\n});\n\nexport const getContainerOpenMenuStyles = (\n  state: TransitionStatus\n): CSSProperties => ({\n  ...getDefaultContainerOpenMenuStyles,\n  ...getContainerOpenMenuTransform[state],\n});\n"],"file":"animations.js"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tecsinapse/react-web-kit",
   "description": "TecSinapse React components",
-  "version": "1.6.0",
+  "version": "1.6.1",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "license": "MIT",
@@ -14,7 +14,7 @@
     "@emotion/native": "^11.0.0",
     "@emotion/react": "^11.4.1",
     "@emotion/styled": "^11.3.0",
-    "@tecsinapse/react-core": "^1.6.0",
+    "@tecsinapse/react-core": "^1.6.1",
     "react-native-vector-icons": "^8.1.0",
     "react-transition-group": "^4.4.2"
   },
@@ -32,5 +32,5 @@
     "react-dom": ">=16.8.0",
     "react-native-web": "^0.17.1"
   },
-  "gitHead": "2c7ce32c1dfd2abf5a139e13c2aca6f4ff639921"
+  "gitHead": "2f0c4cdbd33faad24cc6d51cfbd01e976543e4ab"
 }

package/src/components/molecules/Menubar/MenuBlock/MenuBlock.tsx

@@ -7,42 +7,49 @@ import {
   StyledLeftComponent,
 } from './styled';
 import { ItemsOptions, OptionsType } from '../types';
+import { Masonry } from '../../Masonry';
 
 interface MenuBlockProps {
-  data: OptionsType;
+  toggle: () => void;
+  options: OptionsType[];
 }
 
-const MenuBlock: React.FC<MenuBlockProps> = ({ data }) => {
+const MenuBlock: React.FC<MenuBlockProps> = ({ options, toggle }) => {
   return (
-    <>
-      <StyledContainerMenu>
-        {data.leftComponents && (
-          <StyledLeftComponent>{data.leftComponents}</StyledLeftComponent>
-        )}
-        <Text fontWeight="bold">{data.title}</Text>
-      </StyledContainerMenu>
-      <StyledContainerItems>
-        {data.items.map(
-          ({
-            title,
-            Component,
-            props,
-            rightComponents,
-            items,
-          }: ItemsOptions) => (
-            <MenuItem
-              items={items}
-              key={title}
-              title={title}
-              Component={Component}
-              rightComponents={rightComponents}
-              props={props}
-            />
-          )
-        )}
-      </StyledContainerItems>
-    </>
+    <Masonry columns={4} spacingTop="kilo" spacingLeft="mega">
+      {options.map(data => (
+        <>
+          <StyledContainerMenu>
+            {data.leftComponents && (
+              <StyledLeftComponent>{data.leftComponents}</StyledLeftComponent>
+            )}
+            <Text fontWeight="bold">{data.title}</Text>
+          </StyledContainerMenu>
+          <StyledContainerItems>
+            {data.items.map(
+              ({
+                title,
+                Component,
+                props,
+                rightComponents,
+                items,
+              }: ItemsOptions) => (
+                <MenuItem
+                  items={items}
+                  key={title}
+                  title={title}
+                  Component={Component}
+                  rightComponents={rightComponents}
+                  props={props}
+                  toggle={toggle}
+                />
+              )
+            )}
+          </StyledContainerItems>
+        </>
+      ))}
+    </Masonry>
   );
 };
 
-export default MenuBlock;
+export default React.memo(MenuBlock);

package/src/components/molecules/Menubar/MenuBlock/MenuItem/MenuItem.tsx

@@ -11,6 +11,7 @@ interface MenuItemProps {
   Component: ElementType;
   /** Properties spread to wrapping Component */
   props: any;
+  toggle: () => void;
   rightComponents?: React.ReactNode;
   items?: ItemsOptions[];
 }
@@ -21,6 +22,7 @@ const MenuItem: React.FC<MenuItemProps> = ({
   props = {},
   rightComponents,
   items,
+  toggle,
 }) => {
   const [open, setOpen] = React.useState<boolean>(false);
 
@@ -34,7 +36,7 @@ const MenuItem: React.FC<MenuItemProps> = ({
   return (
     <>
       <StyledContainerItemText key={title}>
-        <Component {...props} style={noTextDecoration}>
+        <Component {...props} style={noTextDecoration} onClick={toggle}>
           <Text
             colorVariant={open ? 'primary' : 'secondary'}
             colorTone={open ? 'medium' : 'dark'}
@@ -57,7 +59,7 @@ const MenuItem: React.FC<MenuItemProps> = ({
       </StyledContainerItemText>
       {open &&
         items?.map(subItem => (
-          <SubMenuBlock key={subItem.title} data={subItem} />
+          <SubMenuBlock key={subItem.title} data={subItem} toggle={toggle} />
         ))}
     </>
   );

package/src/components/molecules/Menubar/MenuBlock/MenuItem/SubMenuBlock/SubMenuBlock.tsx

@@ -6,9 +6,10 @@ import { DummyBorder, StyledContainerItem } from './styled';
 
 interface SubMenuBlockProps {
   data: ItemsOptions;
+  toggle: () => void;
 }
 
-const SubMenuBlock: React.FC<SubMenuBlockProps> = ({ data }) => {
+const SubMenuBlock: React.FC<SubMenuBlockProps> = ({ data, toggle }) => {
   const { Component, props, rightComponents, title } = data;
 
   const noTextDecoration = { textDecoration: 'none' };
@@ -16,7 +17,7 @@ const SubMenuBlock: React.FC<SubMenuBlockProps> = ({ data }) => {
   return (
     <StyledContainerItem>
       <DummyBorder />
-      <Component {...props} style={noTextDecoration}>
+      <Component {...props} style={noTextDecoration} onClick={toggle}>
         <Text colorVariant="secondary" colorTone="medium" typography="sub">
           <StyledText>{title}</StyledText>
         </Text>

package/src/components/molecules/Menubar/Menubar.stories.tsx

@@ -2,7 +2,7 @@ import React, { ElementType } from 'react';
 import Menubar, { MenubarProps } from './Menubar';
 import { Story } from '@storybook/react';
 import styled from '@emotion/styled';
-import { Icon, Text } from '@tecsinapse/react-core';
+import { Avatar, Icon, Text } from '@tecsinapse/react-core';
 
 export default {
   title: 'Components/Menu Bar',
@@ -253,20 +253,27 @@ const StyledImage = styled('img')`
   margin-right: 35px;
 `;
 
-// Import type manually
 const Template: Story<MenubarProps> = args => {
   return (
-    <Menubar
-      {...args}
-      options={EXAMPLE_MENU}
-      mostUsed={MOST_USED}
-      leftComponents={
-        <StyledImage
-          src="https://www.tecsinapse.com.br/wp-content/themes/tecsinapse/img/logo.svg"
-          alt="TecSinapse"
-        />
-      }
-    />
+    <>
+      <Menubar
+        {...args}
+        options={EXAMPLE_MENU}
+        mostUsed={MOST_USED}
+        leftComponents={
+          <StyledImage
+            src="https://www.tecsinapse.com.br/wp-content/themes/tecsinapse/img/logo.svg"
+            alt="TecSinapse"
+          />
+        }
+        rightComponents={
+          <div style={{ marginLeft: 24 }}>
+            <Avatar name="Design System" />
+          </div>
+        }
+      />
+      Content
+    </>
   );
 };
 

package/src/components/molecules/Menubar/Menubar.tsx

@@ -1,12 +1,6 @@
 import React from 'react';
-import {
-  Icon,
-  Text,
-  ThemeProp,
-  useDebouncedState,
-} from '@tecsinapse/react-core';
+import { Icon, Text, useDebouncedState } from '@tecsinapse/react-core';
 import { Transition } from 'react-transition-group';
-import { useTheme } from '@emotion/react';
 import {
   StyledIconInput,
   StyledMenuBar,
@@ -17,7 +11,6 @@ import {
   StyledSearchResultsContainer,
   StyledSearchTextContainer,
 } from './styled';
-import { Masonry } from '../Masonry';
 import { MostUsedType, OptionsType } from './types';
 import { MostUsed } from './MostUsed';
 import { MenuBlock } from './MenuBlock';
@@ -29,32 +22,35 @@ import {
 } from './animations';
 
 export interface MenubarProps {
+  options: OptionsType[];
   leftComponents?: React.ReactNode;
   rightComponents?: React.ReactNode;
-  inputPlaceholder?: string;
-  options: OptionsType[];
   /** Limited to first 4 elements */
   mostUsed?: MostUsedType[];
   mostUsedLabel?: string;
+  searchable?: boolean;
+  searchPlaceholder?: string;
   searchResultsLabel?: string;
 }
 
 const Menubar: React.FC<MenubarProps> = ({
   leftComponents,
   rightComponents,
-  inputPlaceholder = 'O quê você deseja buscar?',
+  searchPlaceholder = 'O quê você deseja buscar?',
   options,
   mostUsed,
   mostUsedLabel = 'Mais acessados',
   searchResultsLabel = 'Resultados da busca',
+  searchable = true,
 }) => {
   const [search, setSearch] = React.useState<string>('');
   const [results, setResults] = React.useState<MostUsedType[]>([]);
   const [input, setInput] = useDebouncedState('', state => setSearch(state));
-  const [isOpen, setOpen] = React.useState<boolean>(false);
-  const theme = useTheme() as ThemeProp;
+  const [open, setOpen] = React.useState<boolean>(false);
 
-  const toggleOpenClose = () => setOpen(!isOpen);
+  const toggleOpen = React.useCallback(() => setOpen(state => !state), [
+    setOpen,
+  ]);
 
   React.useEffect(() => {
     if (search === '') return;
@@ -64,12 +60,8 @@ const Menubar: React.FC<MenubarProps> = ({
   return (
     <>
       <StyledMenuBar>
-        <StyledMenuButton
-          variant="filled"
-          color="primary"
-          onPress={toggleOpenClose}
-        >
-          {!isOpen ? (
+        <StyledMenuButton variant="filled" color="primary" onPress={toggleOpen}>
+          {!open ? (
             <Icon
               size="deca"
               name="menu"
@@ -86,12 +78,12 @@ const Menubar: React.FC<MenubarProps> = ({
           )}
         </StyledMenuButton>
         {leftComponents}
-        <Transition in={isOpen} timeout={250}>
+        <Transition in={open} timeout={250}>
           {state => (
-            <div style={getInputContainerStyles(state, theme)}>
-              <StyledInputContainer>
+            <StyledInputContainer style={getInputContainerStyles(state)}>
+              {searchable && (
                 <StyledInput
-                  placeholder={inputPlaceholder}
+                  placeholder={searchPlaceholder}
                   leftComponent={
                     <StyledIconInput>
                       <Icon name="magnify" type="material-community" />
@@ -100,43 +92,41 @@ const Menubar: React.FC<MenubarProps> = ({
                   value={input}
                   onChange={setInput}
                 />
-              </StyledInputContainer>
-              {rightComponents}
-            </div>
+              )}
+            </StyledInputContainer>
           )}
         </Transition>
+        {rightComponents}
       </StyledMenuBar>
-      <Transition in={isOpen} timeout={250}>
+      <Transition in={open} timeout={250}>
         {state => (
-          <div style={getContainerOpenMenuStyles(state, theme)}>
-            <StyledContainerOpenMenu>
-              {!search ? (
-                <div>
-                  {mostUsed && (
-                    <MostUsed label={mostUsedLabel} data={mostUsed} />
-                  )}
-                  <Masonry columns={4} spacingTop="kilo" spacingLeft="mega">
-                    {options.map(option => (
-                      <MenuBlock data={option} key={option.title} />
-                    ))}
-                  </Masonry>
-                </div>
-              ) : (
-                <StyledSearchResultsContainer>
-                  <StyledSearchTextContainer>
-                    <Text fontWeight="bold">{searchResultsLabel}</Text>
-                  </StyledSearchTextContainer>
-                  {results.map(result => (
-                    <SearchResultItem
-                      key={`${result.title}-${result.category}`}
-                      data={result}
-                      searchTerm={search}
-                    />
-                  ))}
-                </StyledSearchResultsContainer>
-              )}
-            </StyledContainerOpenMenu>
-          </div>
+          <StyledContainerOpenMenu style={getContainerOpenMenuStyles(state)}>
+            {!search ? (
+              <>
+                {mostUsed && (
+                  <MostUsed
+                    label={mostUsedLabel}
+                    data={mostUsed}
+                    toggle={toggleOpen}
+                  />
+                )}
+                <MenuBlock options={options} toggle={toggleOpen} />
+              </>
+            ) : (
+              <StyledSearchResultsContainer>
+                <StyledSearchTextContainer>
+                  <Text fontWeight="bold">{searchResultsLabel}</Text>
+                </StyledSearchTextContainer>
+                {results.map(result => (
+                  <SearchResultItem
+                    key={`${result.title}-${result.category}`}
+                    data={result}
+                    searchTerm={search}
+                  />
+                ))}
+              </StyledSearchResultsContainer>
+            )}
+          </StyledContainerOpenMenu>
         )}
       </Transition>
     </>

package/src/components/molecules/Menubar/MostUsed/MostUsed.tsx

@@ -6,9 +6,10 @@ import { MostUsedType } from '../types';
 interface MostUsedProps {
   data: MostUsedType[];
   label: string;
+  toggle: () => void;
 }
 
-const MostUsed: React.FC<MostUsedProps> = ({ data, label }) => {
+const MostUsed: React.FC<MostUsedProps> = ({ data, label, toggle }) => {
   const noTextDecoration = { textDecoration: 'none' };
 
   return (
@@ -28,6 +29,7 @@ const MostUsed: React.FC<MostUsedProps> = ({ data, label }) => {
                 {...props}
                 style={noTextDecoration}
                 key={`${title}-${category}`}
+                onClick={toggle}
               >
                 <StyledCard elevated key={`${title}-${category}`}>
                   <Text fontWeight="bold" colorVariant="primary">
@@ -49,4 +51,4 @@ const MostUsed: React.FC<MostUsedProps> = ({ data, label }) => {
   );
 };
 
-export default MostUsed;
+export default React.memo(MostUsed);

package/src/components/molecules/Menubar/animations.ts

@@ -1,24 +1,19 @@
 import { CSSProperties } from 'react';
 import { TransitionStatus } from 'react-transition-group';
-import { ThemeProp } from '@tecsinapse/react-core';
 
-const getDefaultInputContainerStyles = (theme: ThemeProp) => ({
-  display: 'flex',
-  flex: 1,
+const getDefaultInputContainerStyles = {
   transitionDuration: '250ms',
   transitionProperty: 'opacity scale transform',
   transitionTimingFunction: 'ease-in-out',
-  zIndex: theme.zIndex.default,
-});
+};
 
-const getDefaultContainerOpenMenuStyles = (theme: ThemeProp) => ({
+const getDefaultContainerOpenMenuStyles = {
   transitionDuration: '250ms',
   transitionProperty: 'opacity scale transform',
   transitionTimingFunction: 'ease-in-out',
-  zIndex: theme.zIndex.default,
-});
+};
 
-const getInputContainerTransform = () => ({
+const getInputContainerTransform = {
   entered: {
     transform: 'scale(1, 1) translateY(0px)',
   },
@@ -34,9 +29,9 @@ const getInputContainerTransform = () => ({
     opacity: 0.5,
     transform: 'scale(0.99, 0.99) translateY(-5px)',
   },
-});
+};
 
-const getContainerOpenMenuTransform = () => ({
+const getContainerOpenMenuTransform = {
   entered: {
     transform: 'scale(1, 1) translateY(0px) ',
   },
@@ -52,20 +47,18 @@ const getContainerOpenMenuTransform = () => ({
     opacity: 0.95,
     transform: 'scale(0.99, 0.99) translateY(0px)',
   },
-});
+};
 
 export const getInputContainerStyles = (
-  state: TransitionStatus,
-  theme: ThemeProp
+  state: TransitionStatus
 ): CSSProperties => ({
-  ...getDefaultInputContainerStyles(theme),
-  ...getInputContainerTransform()[state],
+  ...getDefaultInputContainerStyles,
+  ...getInputContainerTransform[state],
 });
 
 export const getContainerOpenMenuStyles = (
-  state: TransitionStatus,
-  theme: ThemeProp
+  state: TransitionStatus
 ): CSSProperties => ({
-  ...getDefaultContainerOpenMenuStyles(theme),
-  ...getContainerOpenMenuTransform()[state],
+  ...getDefaultContainerOpenMenuStyles,
+  ...getContainerOpenMenuTransform[state],
 });