@tecsinapse/react-web-kit 1.21.1 → 1.22.0-beta.11

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

@@ -1,29 +1,39 @@
-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";
+import { StyledText, StyledRightComponent } from '../../styled.js';
+import { StyledContainerItem, DummyBorder } from './styled.js';
 
-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, {
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+const SubMenuBlock = ({ data, toggle }) => {
+  const { Component, props, rightComponents, title } = data;
+  const noTextDecoration = { textDecoration: "none" };
+  return /* @__PURE__ */ React.createElement(StyledContainerItem, null, /* @__PURE__ */ React.createElement(DummyBorder, null), /* @__PURE__ */ React.createElement(Component, __spreadProps(__spreadValues({}, props), {
     style: noTextDecoration,
     onClick: toggle
-  }), React.createElement(Text, {
+  }), /* @__PURE__ */ React.createElement(Text, {
     colorVariant: "secondary",
     colorTone: "medium",
     typography: "sub"
-  }, React.createElement(StyledText, null, title))), rightComponents && React.createElement(StyledRightComponent, null, rightComponents));
+  }, /* @__PURE__ */ React.createElement(StyledText, null, title))), rightComponents && /* @__PURE__ */ React.createElement(StyledRightComponent, null, rightComponents));
 };
 
-export default SubMenuBlock;
-//# sourceMappingURL=SubMenuBlock.js.map
+export { SubMenuBlock as default };
+//# sourceMappingURL=SubMenuBlock.js.map

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

@@ -1 +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"}
+{"version":3,"file":"SubMenuBlock.js","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"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAWA,MAAM,YAA4C,GAAA,CAAC,EAAE,IAAA,EAAM,QAAa,KAAA;AACtE,EAAA,MAAM,EAAE,SAAA,EAAW,KAAO,EAAA,eAAA,EAAiB,OAAU,GAAA,IAAA,CAAA;AAErD,EAAM,MAAA,gBAAA,GAAmB,EAAE,cAAA,EAAgB,MAAO,EAAA,CAAA;AAElD,EAAA,2CACG,mBACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,iBAAY,CACb,kBAAA,KAAA,CAAA,aAAA,CAAC,4CAAc,KAAd,CAAA,EAAA;AAAA,IAAqB,KAAO,EAAA,gBAAA;AAAA,IAAkB,OAAS,EAAA,MAAA;AAAA,GAAA,CAAA,kBACrD,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA;AAAA,IAAK,YAAa,EAAA,WAAA;AAAA,IAAY,SAAU,EAAA,QAAA;AAAA,IAAS,UAAW,EAAA,KAAA;AAAA,GAC3D,kBAAA,KAAA,CAAA,aAAA,CAAC,UAAY,EAAA,IAAA,EAAA,KAAM,CACrB,CACF,GACC,eACC,oBAAA,KAAA,CAAA,aAAA,CAAC,oBAAsB,EAAA,IAAA,EAAA,eAAgB,CAE3C,CAAA,CAAA;AAEJ;;;;"}

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

@@ -1,17 +1,14 @@
-var _templateObject, _templateObject2;
+import styled from '@emotion/styled';
 
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+const StyledContainerItem = styled("div")`
+  display: flex;
+  align-items: center;
+`;
+const DummyBorder = styled("div")`
+  height: ${({ theme }) => theme.typography.sub.fontSize};
+  border-left: ${({ theme }) => `${theme.borderWidth.pico} solid ${theme.color.primary.medium}`};
+  margin-right: ${({ theme }) => theme.spacing.mili};
+`;
 
-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
+export { DummyBorder, StyledContainerItem };
+//# sourceMappingURL=styled.js.map

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

@@ -1 +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"}
+{"version":3,"file":"styled.js","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"],"names":[],"mappings":";;AAGa,MAAA,mBAAA,GAAsB,OAAO,KAAK,CAAA,CAAA;AAAA;AAAA;AAAA,EAAA;AAKlC,MAAA,WAAA,GAAc,OAAO,KAAK,CAAA,CAAA;AAAA,UAAA,EAC3B,CAAC,EAAE,KAAA,EAAY,KAAA,KAAA,CAAM,WAAW,GAAI,CAAA,QAAA,CAAA;AAAA,eAC/B,EAAA,CAAC,EAAE,KAAA,EAChB,KAAA,CAAA,EAAG,MAAM,WAAY,CAAA,IAAA,CAAA,OAAA,EAAc,KAAM,CAAA,KAAA,CAAM,OAAQ,CAAA,MAAA,CAAA,CAAA,CAAA;AAAA,gBAAA,EACzC,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,OAAQ,CAAA,IAAA,CAAA;AAAA;;;;"}

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

@@ -1,17 +1,18 @@
-var _templateObject, _templateObject2;
+import styled from '@emotion/styled';
 
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+const StyledContainerItemText = styled("div")`
+  margin-top: ${({ theme }) => theme.spacing.mili};
+  display: flex;
+  align-items: center;
+`;
+const StyledSubButton = styled("span")`
+  padding-top: ${({ theme }) => theme.spacing.nano} 0 0 0;
+  margin-left: ${({ theme }) => theme.spacing.mili};
+  cursor: pointer;
+  & * {
+    user-select: none;
+  }
+`;
 
-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
+export { StyledContainerItemText, StyledSubButton };
+//# sourceMappingURL=styled.js.map

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

@@ -1 +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"}
+{"version":3,"file":"styled.js","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"],"names":[],"mappings":";;AAGa,MAAA,uBAAA,GAA0B,OAAO,KAAK,CAAA,CAAA;AAAA,cAAA,EACnC,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,OAAQ,CAAA,IAAA,CAAA;AAAA;AAAA;AAAA,EAAA;AAKhC,MAAA,eAAA,GAAkB,OAAO,MAAM,CAAA,CAAA;AAAA,eAAA,EAC3B,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,OAAQ,CAAA,IAAA,CAAA;AAAA,eAAA,EAC7B,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,OAAQ,CAAA,IAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;"}

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

@@ -1,27 +1,32 @@
-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
+
+const StyledLeftComponent = styled("div")`
+  margin-right: ${({ theme }) => theme.spacing.mili};
+`;
+const StyledRightComponent = styled("div")`
+  margin-left: ${({ theme }) => theme.spacing.mili};
+`;
+const StyledContainerMenu = styled("div")`
+  flex-direction: row;
+  display: flex;
+  align-items: center;
+  border-bottom: ${({ theme }) => `${theme.borderWidth.pico} solid ${hex2rgba(
+  theme.miscellaneous.shadow,
+  0.05
+)}`};
+  width: 100%;
+  padding-bottom: ${({ theme }) => theme.spacing.mili};
+`;
+const StyledContainerItems = styled("div")`
+  display: flex;
+  flex-direction: column;
+`;
+const StyledText = styled("span")`
+  &:hover {
+    color: ${({ theme }) => theme.font.color.orange};
+  }
+`;
+
+export { StyledContainerItems, StyledContainerMenu, StyledLeftComponent, StyledRightComponent, StyledText };
+//# sourceMappingURL=styled.js.map

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

@@ -1 +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"}
+{"version":3,"file":"styled.js","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"],"names":[],"mappings":";;;AAGa,MAAA,mBAAA,GAAsB,OAAO,KAAK,CAAA,CAAA;AAAA,gBAAA,EAC7B,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,OAAQ,CAAA,IAAA,CAAA;AAAA,EAAA;AAGlC,MAAA,oBAAA,GAAuB,OAAO,KAAK,CAAA,CAAA;AAAA,eAAA,EAC/B,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,OAAQ,CAAA,IAAA,CAAA;AAAA,EAAA;AAGjC,MAAA,mBAAA,GAAsB,OAAO,KAAK,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA,iBAAA,EAI5B,CAAC,EAAE,KAAA,OAClB,CAAG,EAAA,KAAA,CAAM,YAAY,IAAc,CAAA,OAAA,EAAA,QAAA;AAAA,EACjC,MAAM,aAAc,CAAA,MAAA;AAAA,EACpB,IAAA;AACF,CAAA,CAAA,CAAA,CAAA;AAAA;AAAA,kBAAA,EAEgB,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,OAAQ,CAAA,IAAA,CAAA;AAAA,EAAA;AAGpC,MAAA,oBAAA,GAAuB,OAAO,KAAK,CAAA,CAAA;AAAA;AAAA;AAAA,EAAA;AAKnC,MAAA,UAAA,GAAa,OAAO,MAAM,CAAA,CAAA;AAAA;AAAA,WAAA,EAE1B,CAAC,EAAE,KAAA,EAAY,KAAA,KAAA,CAAM,KAAK,KAAM,CAAA,MAAA,CAAA;AAAA;AAAA;;;;"}

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

@@ -1,138 +1,127 @@
-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 { useDebouncedState, Icon, Text } 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;
+import { StyledMenuBar, StyledMenuButton, StyledInputContainer, StyledInput, StyledIconInput, StyledContainerOpenMenu, StyledSearchResultsContainer, StyledSearchTextContainer } from './styled.js';
+import MostUsed from './MostUsed/MostUsed.js';
+import MenuBlock from './MenuBlock/MenuBlock.js';
+import SearchResultItem from './SearchResultItem/SearchResultItem.js';
+import { filterAndTransform } from './utils.js';
+import { getInputContainerStyles, getContainerOpenMenuStyles } from './animations.js';
+import { useClickAwayListener } from '../../../hooks/useClickAwayListener.js';
+
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+const Menubar = (_a) => {
+  var _b = _a, {
+    leftComponents,
+    rightComponents,
+    searchPlaceholder = "O qu\xEA voc\xEA deseja buscar?",
+    options,
+    mostUsed,
+    mostUsedLabel = "Mais acessados",
+    searchResultsLabel = "Resultados da busca",
+    searchable = true
+  } = _b, rest = __objRest(_b, [
+    "leftComponents",
+    "rightComponents",
+    "searchPlaceholder",
+    "options",
+    "mostUsed",
+    "mostUsedLabel",
+    "searchResultsLabel",
+    "searchable"
+  ]);
+  const [search, setSearch] = React.useState("");
+  const [results, setResults] = React.useState([]);
+  const [input, setInput] = useDebouncedState("", setSearch);
+  const [open, setOpen] = React.useState(false);
+  const menuRef = useRef(null);
+  useClickAwayListener(menuRef, setOpen, "mouseup");
+  const toggleOpen = React.useCallback(
+    () => setOpen((state) => !state),
+    [setOpen]
+  );
+  React.useEffect(() => {
+    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, {
+  return /* @__PURE__ */ React.createElement("div", __spreadValues({
+    ref: (ref) => menuRef.current = ref
+  }, rest), /* @__PURE__ */ React.createElement(StyledMenuBar, null, /* @__PURE__ */ React.createElement(StyledMenuButton, {
     variant: "filled",
     color: "primary",
     onPress: toggleOpen
-  }, !open ? React.createElement(Icon, {
+  }, !open ? /* @__PURE__ */ React.createElement(Icon, {
     size: "deca",
     name: "menu",
     type: "material-community",
     fontColor: "light"
-  }) : React.createElement(Icon, {
+  }) : /* @__PURE__ */ React.createElement(Icon, {
     size: "deca",
     name: "close",
     type: "material-community",
     fontColor: "light"
-  })), leftComponents, React.createElement(Transition, {
-    "in": open,
+  })), leftComponents, /* @__PURE__ */ 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,
+  }, (state) => /* @__PURE__ */ React.createElement(StyledInputContainer, {
+    style: getInputContainerStyles(state)
+  }, searchable && /* @__PURE__ */ React.createElement(StyledInput, {
+    placeholder: searchPlaceholder,
+    leftComponent: /* @__PURE__ */ React.createElement(StyledIconInput, null, /* @__PURE__ */ React.createElement(Icon, {
+      name: "magnify",
+      type: "material-community"
+    })),
+    value: input,
+    onChange: setInput
+  }))), rightComponents), /* @__PURE__ */ 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
-      });
-    })));
-  }));
+  }, (state) => /* @__PURE__ */ React.createElement(StyledContainerOpenMenu, {
+    style: getContainerOpenMenuStyles(state)
+  }, !search ? /* @__PURE__ */ React.createElement(React.Fragment, null, mostUsed && /* @__PURE__ */ React.createElement(MostUsed, {
+    label: mostUsedLabel,
+    data: mostUsed,
+    toggle: toggleOpen
+  }), /* @__PURE__ */ React.createElement(MenuBlock, {
+    options,
+    toggle: toggleOpen
+  })) : /* @__PURE__ */ React.createElement(StyledSearchResultsContainer, null, /* @__PURE__ */ React.createElement(StyledSearchTextContainer, null, /* @__PURE__ */ React.createElement(Text, {
+    fontWeight: "bold"
+  }, searchResultsLabel)), results.map((result) => /* @__PURE__ */ React.createElement(SearchResultItem, {
+    key: `${result.title}-${result.category}`,
+    data: result,
+    searchTerm: search,
+    toggle: toggleOpen
+  }))))));
 };
 
-export default Menubar;
-//# sourceMappingURL=Menubar.js.map
+export { Menubar as default };
+//# sourceMappingURL=Menubar.js.map

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

@@ -1 +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":"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"}
+{"version":3,"file":"Menubar.js","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"],"names":[],"mappings":"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"}