@tecsinapse/react-web-kit 1.5.0 → 1.6.3

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/molecules/Drawer/Drawer.tsx"],"names":["Drawer","open","anchorPosition","onClose","children","getStyles","state","stylesLeftRight","transitionLeftRight","stylesTopBottom","transitionTopBottom","includes","defaultStyleOverlay","transitionStylesOverlay","undefined"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;;;AAeA,MAAMA,MAAuB,GAAG,CAAC;AAC/BC,EAAAA,IAD+B;AAE/BC,EAAAA,cAAc,GAAG,OAFc;AAG/BC,EAAAA,OAH+B;AAI/BC,EAAAA;AAJ+B,CAAD,KAK1B;AACJ,QAAMC,SAAS,GAAG,CAACH,cAAD,EAAyBI,KAAzB,KAAwC;AACxD,UAAMC,eAAe,GAAG,wCAAuBL,cAAvB,CAAxB;AACA,UAAMM,mBAAmB,GAAG,2CAA0BN,cAA1B,CAA5B;AACA,UAAMO,eAAe,GAAG,wCAAuBP,cAAvB,CAAxB;AACA,UAAMQ,mBAAmB,GAAG,2CAA0BR,cAA1B,CAA5B;;AAEA,QAAI,CAAC,MAAD,EAAS,OAAT,EAAkBS,QAAlB,CAA2BT,cAA3B,CAAJ,EAAgD;AAC9C,aAAO,EACL,GAAGK,eADE;AAEL,WAAGC,mBAAmB,CAACF,KAAD;AAFjB,OAAP;AAID,KALD,MAKO;AACL,aAAO,EACL,GAAGG,eADE;AAEL,WAAGC,mBAAmB,CAACJ,KAAD;AAFjB,OAAP;AAID;AACF,GAjBD;;AAmBA,SACE,4DACE,6BAAC,gCAAD;AAAY,IAAA,EAAE,EAAEL,IAAhB;AAAsB,IAAA,OAAO,EAAE;AAA/B,KACGK,KAAK,IACJ;AACE,IAAA,KAAK,EAAE,EACL,GAAGM,+BADE;AAEL,SAAGC,oCAAwBP,KAAxB;AAFE;AADT,KAME,6BAAC,qBAAD;AAAe,IAAA,OAAO,EAAEL,IAAI,GAAGE,OAAH,GAAaW,SAAzC;AAAoD,IAAA,IAAI,EAAEb;AAA1D,IANF,CAFJ,CADF,EAaE,6BAAC,gCAAD;AAAY,IAAA,EAAE,EAAEA,IAAhB;AAAsB,IAAA,OAAO,EAAE;AAA/B,KACGK,KAAK,IACJ,6BAAC,6BAAD;AACE,IAAA,KAAK,EAAED,SAAS,CAACH,cAAD,EAAiBI,KAAjB,CADlB;AAEE,IAAA,cAAc,EAAEJ,cAFlB;AAGE,IAAA,OAAO,EAAEC,OAHX;AAIE,IAAA,IAAI,EAAEF;AAJR,KAMGG,QANH,CAFJ,CAbF,CADF;AA4BD,CArDD;;eAuDeJ,M","sourcesContent":["import React, { FC } from 'react';\nimport { StyledContainerDrawer, StyledOverlay } from './styled';\nimport { Transition } from 'react-transition-group';\nimport {\n  transitionStylesTopBottom,\n  defaultStylesTopBottom,\n  defaultStylesLeftRight,\n  transitionStylesOverlay,\n  transitionStylesLeftRight,\n  defaultStyleOverlay,\n} from './animations';\n\nexport interface DrawerProps {\n  open: boolean;\n  onClose: () => void;\n  anchorPosition: 'left' | 'right' | 'top' | 'bottom';\n}\n\nconst Drawer: FC<DrawerProps> = ({\n  open,\n  anchorPosition = 'right',\n  onClose,\n  children,\n}) => {\n  const getStyles = (anchorPosition: string, state: any) => {\n    const stylesLeftRight = defaultStylesLeftRight(anchorPosition);\n    const transitionLeftRight = transitionStylesLeftRight(anchorPosition);\n    const stylesTopBottom = defaultStylesTopBottom(anchorPosition);\n    const transitionTopBottom = transitionStylesTopBottom(anchorPosition);\n\n    if (['left', 'right'].includes(anchorPosition)) {\n      return {\n        ...stylesLeftRight,\n        ...transitionLeftRight[state],\n      };\n    } else {\n      return {\n        ...stylesTopBottom,\n        ...transitionTopBottom[state],\n      };\n    }\n  };\n\n  return (\n    <>\n      <Transition in={open} timeout={300}>\n        {state => (\n          <div\n            style={{\n              ...defaultStyleOverlay,\n              ...transitionStylesOverlay[state],\n            }}\n          >\n            <StyledOverlay onClick={open ? onClose : undefined} show={open} />\n          </div>\n        )}\n      </Transition>\n      <Transition in={open} timeout={300}>\n        {state => (\n          <StyledContainerDrawer\n            style={getStyles(anchorPosition, state)}\n            anchorPosition={anchorPosition}\n            onClose={onClose}\n            open={open}\n          >\n            {children}\n          </StyledContainerDrawer>\n        )}\n      </Transition>\n    </>\n  );\n};\n\nexport default Drawer;\n"],"file":"Drawer.js"}
+{"version":3,"sources":["../../../../src/components/molecules/Drawer/Drawer.tsx"],"names":["Drawer","open","anchorPosition","onClose","children","getStyles","state","stylesLeftRight","transitionLeftRight","stylesTopBottom","transitionTopBottom","includes"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;AAaA,MAAMA,MAAuB,GAAG,CAAC;AAC/BC,EAAAA,IAD+B;AAE/BC,EAAAA,cAAc,GAAG,OAFc;AAG/BC,EAAAA,OAH+B;AAI/BC,EAAAA;AAJ+B,CAAD,KAK1B;AACJ,QAAMC,SAAS,GAAG,CAACH,cAAD,EAAyBI,KAAzB,KAAwC;AACxD,UAAMC,eAAe,GAAG,wCAAuBL,cAAvB,CAAxB;AACA,UAAMM,mBAAmB,GAAG,2CAA0BN,cAA1B,CAA5B;AACA,UAAMO,eAAe,GAAG,wCAAuBP,cAAvB,CAAxB;AACA,UAAMQ,mBAAmB,GAAG,2CAA0BR,cAA1B,CAA5B;;AAEA,QAAI,CAAC,MAAD,EAAS,OAAT,EAAkBS,QAAlB,CAA2BT,cAA3B,CAAJ,EAAgD;AAC9C,aAAO,EACL,GAAGK,eADE;AAEL,WAAGC,mBAAmB,CAACF,KAAD;AAFjB,OAAP;AAID,KALD,MAKO;AACL,aAAO,EACL,GAAGG,eADE;AAEL,WAAGC,mBAAmB,CAACJ,KAAD;AAFjB,OAAP;AAID;AACF,GAjBD;;AAmBA,SACE,4DACE,6BAAC,gBAAD;AAAS,IAAA,OAAO,EAAE,GAAlB;AAAuB,IAAA,IAAI,EAAEL,IAA7B;AAAmC,IAAA,OAAO,EAAEE,OAA5C;AAAqD,IAAA,MAAM,EAAC;AAA5D,IADF,EAEE,6BAAC,gCAAD;AAAY,IAAA,EAAE,EAAEF,IAAhB;AAAsB,IAAA,OAAO,EAAE;AAA/B,KACGK,KAAK,IACJ,6BAAC,6BAAD;AACE,IAAA,KAAK,EAAED,SAAS,CAACH,cAAD,EAAiBI,KAAjB,CADlB;AAEE,IAAA,cAAc,EAAEJ,cAFlB;AAGE,IAAA,OAAO,EAAEC,OAHX;AAIE,IAAA,IAAI,EAAEF;AAJR,KAMGG,QANH,CAFJ,CAFF,CADF;AAiBD,CA1CD;;eA4CeJ,M","sourcesContent":["import React, { FC } from 'react';\nimport { StyledContainerDrawer } from './styled';\nimport { Transition } from 'react-transition-group';\nimport { Overlay } from '../../atoms/Overlay';\nimport {\n  transitionStylesTopBottom,\n  defaultStylesTopBottom,\n  defaultStylesLeftRight,\n  transitionStylesLeftRight,\n} from './animations';\n\nexport interface DrawerProps {\n  open: boolean;\n  onClose: () => void;\n  anchorPosition: 'left' | 'right' | 'top' | 'bottom';\n}\n\nconst Drawer: FC<DrawerProps> = ({\n  open,\n  anchorPosition = 'right',\n  onClose,\n  children,\n}) => {\n  const getStyles = (anchorPosition: string, state: any) => {\n    const stylesLeftRight = defaultStylesLeftRight(anchorPosition);\n    const transitionLeftRight = transitionStylesLeftRight(anchorPosition);\n    const stylesTopBottom = defaultStylesTopBottom(anchorPosition);\n    const transitionTopBottom = transitionStylesTopBottom(anchorPosition);\n\n    if (['left', 'right'].includes(anchorPosition)) {\n      return {\n        ...stylesLeftRight,\n        ...transitionLeftRight[state],\n      };\n    } else {\n      return {\n        ...stylesTopBottom,\n        ...transitionTopBottom[state],\n      };\n    }\n  };\n\n  return (\n    <>\n      <Overlay timeout={300} open={open} onClose={onClose} zIndex=\"drawer\" />\n      <Transition in={open} timeout={300}>\n        {state => (\n          <StyledContainerDrawer\n            style={getStyles(anchorPosition, state)}\n            anchorPosition={anchorPosition}\n            onClose={onClose}\n            open={open}\n          >\n            {children}\n          </StyledContainerDrawer>\n        )}\n      </Transition>\n    </>\n  );\n};\n\nexport default Drawer;\n"],"file":"Drawer.js"}

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

@@ -1,21 +1,3 @@
-export declare const defaultStyleOverlay: {
-    transition: string;
-    opacity: number;
-};
-export declare const transitionStylesOverlay: {
-    entering: {
-        opacity: number;
-    };
-    entered: {
-        opacity: number;
-    };
-    exiting: {
-        opacity: number;
-    };
-    exited: {
-        opacity: number;
-    };
-};
 export declare const transformLeftRigthClose: (anchorPosition: string) => "translateX(100%)" | "translateX(-100%)";
 export declare const transformLeftRigthOpen = "translateX(0)";
 export declare const transformTopBottomClose: (anchorPosition: string) => "translateY(-100%)" | "translateY(100%)";

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

@@ -3,27 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.transitionStylesTopBottom = exports.defaultStylesTopBottom = exports.transitionStylesLeftRight = exports.defaultStylesLeftRight = exports.transformTopBottomOpen = exports.transformTopBottomClose = exports.transformLeftRigthOpen = exports.transformLeftRigthClose = exports.transitionStylesOverlay = exports.defaultStyleOverlay = void 0;
-const defaultStyleOverlay = {
-  transition: `opacity 700ms ease-in-out`,
-  opacity: 0
-};
-exports.defaultStyleOverlay = defaultStyleOverlay;
-const transitionStylesOverlay = {
-  entering: {
-    opacity: 1
-  },
-  entered: {
-    opacity: 1
-  },
-  exiting: {
-    opacity: 0
-  },
-  exited: {
-    opacity: 0
-  }
-};
-exports.transitionStylesOverlay = transitionStylesOverlay;
+exports.transitionStylesTopBottom = exports.defaultStylesTopBottom = exports.transitionStylesLeftRight = exports.defaultStylesLeftRight = exports.transformTopBottomOpen = exports.transformTopBottomClose = exports.transformLeftRigthOpen = exports.transformLeftRigthClose = void 0;
 
 const transformLeftRigthClose = anchorPosition => anchorPosition === 'right' ? 'translateX(100%)' : 'translateX(-100%)';
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/molecules/Drawer/animations.ts"],"names":["defaultStyleOverlay","transition","opacity","transitionStylesOverlay","entering","entered","exiting","exited","transformLeftRigthClose","anchorPosition","transformLeftRigthOpen","transformTopBottomClose","transformTopBottomOpen","defaultStylesLeftRight","transform","overflow","transitionStylesLeftRight","defaultStylesTopBottom","transitionStylesTopBottom"],"mappings":";;;;;;AAAO,MAAMA,mBAAmB,GAAG;AACjCC,EAAAA,UAAU,EAAG,2BADoB;AAEjCC,EAAAA,OAAO,EAAE;AAFwB,CAA5B;;AAIA,MAAMC,uBAAuB,GAAG;AACrCC,EAAAA,QAAQ,EAAE;AAAEF,IAAAA,OAAO,EAAE;AAAX,GAD2B;AAErCG,EAAAA,OAAO,EAAE;AAAEH,IAAAA,OAAO,EAAE;AAAX,GAF4B;AAGrCI,EAAAA,OAAO,EAAE;AAAEJ,IAAAA,OAAO,EAAE;AAAX,GAH4B;AAIrCK,EAAAA,MAAM,EAAE;AAAEL,IAAAA,OAAO,EAAE;AAAX;AAJ6B,CAAhC;;;AAOA,MAAMM,uBAAuB,GAAIC,cAAD,IACrCA,cAAc,KAAK,OAAnB,GAA6B,kBAA7B,GAAkD,mBAD7C;;;AAGA,MAAMC,sBAAsB,GAAG,eAA/B;;;AAEA,MAAMC,uBAAuB,GAAIF,cAAD,IACrCA,cAAc,KAAK,KAAnB,GAA2B,mBAA3B,GAAiD,kBAD5C;;;AAGA,MAAMG,sBAAsB,GAAG,gBAA/B;;;AAEA,MAAMC,sBAAsB,GAAIJ,cAAD,IAA4B;AAChE,SAAO;AACLR,IAAAA,UAAU,EAAE,6BADP;AAELa,IAAAA,SAAS,EAAE,MAAMN,uBAAuB,CAACC,cAAD,CAFnC;AAGLM,IAAAA,QAAQ,EAAE;AAHL,GAAP;AAKD,CANM;;;;AAQA,MAAMC,yBAAyB,GAAIP,cAAD,IAA4B;AACnE,SAAO;AACLL,IAAAA,QAAQ,EAAE;AAAEU,MAAAA,SAAS,EAAEN,uBAAuB,CAACC,cAAD;AAApC,KADL;AAELJ,IAAAA,OAAO,EAAE;AACPS,MAAAA,SAAS,EAAEJ;AADJ,KAFJ;AAKLJ,IAAAA,OAAO,EAAE;AACPQ,MAAAA,SAAS,EAAEJ;AADJ,KALJ;AAQLH,IAAAA,MAAM,EAAE;AAAEO,MAAAA,SAAS,EAAEN,uBAAuB,CAACC,cAAD;AAApC;AARH,GAAP;AAUD,CAXM;;;;AAaA,MAAMQ,sBAAsB,GAAIR,cAAD,IAA4B;AAChE,SAAO;AACLR,IAAAA,UAAU,EAAE,6BADP;AAELa,IAAAA,SAAS,EAAEH,uBAAuB,CAACF,cAAD,CAF7B;AAGLM,IAAAA,QAAQ,EAAE;AAHL,GAAP;AAKD,CANM;;;;AAOA,MAAMG,yBAAyB,GAAIT,cAAD,IAA4B;AACnE,SAAO;AACLL,IAAAA,QAAQ,EAAE;AAAEU,MAAAA,SAAS,EAAEH,uBAAuB,CAACF,cAAD;AAApC,KADL;AAELJ,IAAAA,OAAO,EAAE;AACPS,MAAAA,SAAS,EAAEF;AADJ,KAFJ;AAKLN,IAAAA,OAAO,EAAE;AACPQ,MAAAA,SAAS,EAAEF;AADJ,KALJ;AAQLL,IAAAA,MAAM,EAAE;AAAEO,MAAAA,SAAS,EAAEH,uBAAuB,CAACF,cAAD;AAApC;AARH,GAAP;AAUD,CAXM","sourcesContent":["export const defaultStyleOverlay = {\n  transition: `opacity 700ms ease-in-out`,\n  opacity: 0,\n};\nexport const transitionStylesOverlay = {\n  entering: { opacity: 1 },\n  entered: { opacity: 1 },\n  exiting: { opacity: 0 },\n  exited: { opacity: 0 },\n};\n\nexport const transformLeftRigthClose = (anchorPosition: string) =>\n  anchorPosition === 'right' ? 'translateX(100%)' : 'translateX(-100%)';\n\nexport const transformLeftRigthOpen = 'translateX(0)';\n\nexport const transformTopBottomClose = (anchorPosition: string) =>\n  anchorPosition === 'top' ? 'translateY(-100%)' : 'translateY(100%)';\n\nexport const transformTopBottomOpen = 'translateY(0%)';\n\nexport const defaultStylesLeftRight = (anchorPosition: string) => {\n  return {\n    transition: 'transform 300ms ease-in-out',\n    transform: () => transformLeftRigthClose(anchorPosition),\n    overflow: 'hidden',\n  };\n};\n\nexport const transitionStylesLeftRight = (anchorPosition: string) => {\n  return {\n    entering: { transform: transformLeftRigthClose(anchorPosition) },\n    entered: {\n      transform: transformLeftRigthOpen,\n    },\n    exiting: {\n      transform: transformLeftRigthOpen,\n    },\n    exited: { transform: transformLeftRigthClose(anchorPosition) },\n  };\n};\n\nexport const defaultStylesTopBottom = (anchorPosition: string) => {\n  return {\n    transition: 'transform 300ms ease-in-out',\n    transform: transformTopBottomClose(anchorPosition),\n    overflow: 'hidden',\n  };\n};\nexport const transitionStylesTopBottom = (anchorPosition: string) => {\n  return {\n    entering: { transform: transformTopBottomClose(anchorPosition) },\n    entered: {\n      transform: transformTopBottomOpen,\n    },\n    exiting: {\n      transform: transformTopBottomOpen,\n    },\n    exited: { transform: transformTopBottomClose(anchorPosition) },\n  };\n};\n"],"file":"animations.js"}
+{"version":3,"sources":["../../../../src/components/molecules/Drawer/animations.ts"],"names":["transformLeftRigthClose","anchorPosition","transformLeftRigthOpen","transformTopBottomClose","transformTopBottomOpen","defaultStylesLeftRight","transition","transform","overflow","transitionStylesLeftRight","entering","entered","exiting","exited","defaultStylesTopBottom","transitionStylesTopBottom"],"mappings":";;;;;;;AAAO,MAAMA,uBAAuB,GAAIC,cAAD,IACrCA,cAAc,KAAK,OAAnB,GAA6B,kBAA7B,GAAkD,mBAD7C;;;AAGA,MAAMC,sBAAsB,GAAG,eAA/B;;;AAEA,MAAMC,uBAAuB,GAAIF,cAAD,IACrCA,cAAc,KAAK,KAAnB,GAA2B,mBAA3B,GAAiD,kBAD5C;;;AAGA,MAAMG,sBAAsB,GAAG,gBAA/B;;;AAEA,MAAMC,sBAAsB,GAAIJ,cAAD,IAA4B;AAChE,SAAO;AACLK,IAAAA,UAAU,EAAE,6BADP;AAELC,IAAAA,SAAS,EAAE,MAAMP,uBAAuB,CAACC,cAAD,CAFnC;AAGLO,IAAAA,QAAQ,EAAE;AAHL,GAAP;AAKD,CANM;;;;AAQA,MAAMC,yBAAyB,GAAIR,cAAD,IAA4B;AACnE,SAAO;AACLS,IAAAA,QAAQ,EAAE;AAAEH,MAAAA,SAAS,EAAEP,uBAAuB,CAACC,cAAD;AAApC,KADL;AAELU,IAAAA,OAAO,EAAE;AACPJ,MAAAA,SAAS,EAAEL;AADJ,KAFJ;AAKLU,IAAAA,OAAO,EAAE;AACPL,MAAAA,SAAS,EAAEL;AADJ,KALJ;AAQLW,IAAAA,MAAM,EAAE;AAAEN,MAAAA,SAAS,EAAEP,uBAAuB,CAACC,cAAD;AAApC;AARH,GAAP;AAUD,CAXM;;;;AAaA,MAAMa,sBAAsB,GAAIb,cAAD,IAA4B;AAChE,SAAO;AACLK,IAAAA,UAAU,EAAE,6BADP;AAELC,IAAAA,SAAS,EAAEJ,uBAAuB,CAACF,cAAD,CAF7B;AAGLO,IAAAA,QAAQ,EAAE;AAHL,GAAP;AAKD,CANM;;;;AAOA,MAAMO,yBAAyB,GAAId,cAAD,IAA4B;AACnE,SAAO;AACLS,IAAAA,QAAQ,EAAE;AAAEH,MAAAA,SAAS,EAAEJ,uBAAuB,CAACF,cAAD;AAApC,KADL;AAELU,IAAAA,OAAO,EAAE;AACPJ,MAAAA,SAAS,EAAEH;AADJ,KAFJ;AAKLQ,IAAAA,OAAO,EAAE;AACPL,MAAAA,SAAS,EAAEH;AADJ,KALJ;AAQLS,IAAAA,MAAM,EAAE;AAAEN,MAAAA,SAAS,EAAEJ,uBAAuB,CAACF,cAAD;AAApC;AARH,GAAP;AAUD,CAXM","sourcesContent":["export const transformLeftRigthClose = (anchorPosition: string) =>\n  anchorPosition === 'right' ? 'translateX(100%)' : 'translateX(-100%)';\n\nexport const transformLeftRigthOpen = 'translateX(0)';\n\nexport const transformTopBottomClose = (anchorPosition: string) =>\n  anchorPosition === 'top' ? 'translateY(-100%)' : 'translateY(100%)';\n\nexport const transformTopBottomOpen = 'translateY(0%)';\n\nexport const defaultStylesLeftRight = (anchorPosition: string) => {\n  return {\n    transition: 'transform 300ms ease-in-out',\n    transform: () => transformLeftRigthClose(anchorPosition),\n    overflow: 'hidden',\n  };\n};\n\nexport const transitionStylesLeftRight = (anchorPosition: string) => {\n  return {\n    entering: { transform: transformLeftRigthClose(anchorPosition) },\n    entered: {\n      transform: transformLeftRigthOpen,\n    },\n    exiting: {\n      transform: transformLeftRigthOpen,\n    },\n    exited: { transform: transformLeftRigthClose(anchorPosition) },\n  };\n};\n\nexport const defaultStylesTopBottom = (anchorPosition: string) => {\n  return {\n    transition: 'transform 300ms ease-in-out',\n    transform: transformTopBottomClose(anchorPosition),\n    overflow: 'hidden',\n  };\n};\nexport const transitionStylesTopBottom = (anchorPosition: string) => {\n  return {\n    entering: { transform: transformTopBottomClose(anchorPosition) },\n    entered: {\n      transform: transformTopBottomOpen,\n    },\n    exiting: {\n      transform: transformTopBottomOpen,\n    },\n    exited: { transform: transformTopBottomClose(anchorPosition) },\n  };\n};\n"],"file":"animations.js"}

package/dist/components/molecules/Drawer/index.js

@@ -18,7 +18,7 @@ Object.defineProperty(exports, "DrawerProps", {
 
 var _Drawer = _interopRequireWildcard(require("./Drawer"));
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 //# sourceMappingURL=index.js.map

package/dist/components/molecules/Drawer/styled.d.ts

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

package/dist/components/molecules/Drawer/styled.js

@@ -3,33 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledContainerDrawer = exports.StyledOverlay = void 0;
+exports.StyledContainerDrawer = void 0;
 
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 
-var _reactCore = require("@tecsinapse/react-core");
-
 var _react = require("@emotion/react");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const StyledOverlay = (0, _styled.default)('div')`
-  background: ${({
-  theme
-}) => (0, _reactCore.hex2rgba)(theme.miscellaneous.overlay, 0.5)};
-  width: 100vw;
-  height: 100vh;
-  z-index: ${({
-  theme,
-  show
-}) => show ? theme.zIndex.drawer : theme.zIndex.default};
-  cursor: ${({
-  show
-}) => show ? 'pointer' : 'default'};
-  position: absolute;
-`;
-exports.StyledOverlay = StyledOverlay;
-
 const anchorLeft = ({
   theme,
   anchorPosition
@@ -90,7 +71,7 @@ const baseStyles = ({
     position: fixed;
     overflow: hidden;
     background-color: ${theme.miscellaneous.bodyColor};
-    z-index: ${theme.zIndex.drawer + 1};
+    z-index: ${theme.zIndex.drawer};
   `;
 };
 

package/dist/components/molecules/Drawer/styled.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/molecules/Drawer/styled.ts"],"names":["StyledOverlay","theme","miscellaneous","overlay","show","zIndex","drawer","default","anchorLeft","anchorPosition","borderRadius","centi","anchorRight","anchorTop","anchorBottom","baseStyles","includes","bodyColor","StyledContainerDrawer","props"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;;;AAEO,MAAMA,aAAa,GAAG,qBAAO,KAAP,CAE3B;AACF,gBAAgB,CAAC;AAAEC,EAAAA;AAAF,CAAD,KACZ,yBAASA,KAAK,CAACC,aAAN,CAAoBC,OAA7B,EAAsC,GAAtC,CAA2C;AAC/C;AACA;AACA,aAAa,CAAC;AAAEF,EAAAA,KAAF;AAASG,EAAAA;AAAT,CAAD,KACTA,IAAI,GAAGH,KAAK,CAACI,MAAN,CAAaC,MAAhB,GAAyBL,KAAK,CAACI,MAAN,CAAaE,OAAQ;AACtD,YAAY,CAAC;AAAEH,EAAAA;AAAF,CAAD,KAAeA,IAAI,GAAG,SAAH,GAAe,SAAW;AACzD;AACA,CAXO;;;AAaP,MAAMI,UAAU,GAAG,CAAC;AAAEP,EAAAA,KAAF;AAASQ,EAAAA;AAAT,CAAD,KAAyD;AAC1E,SACEA,cAAc,KAAK,MAAnB,IACA,eAAI;AACR;AACA;AACA,iCAAiCR,KAAK,CAACS,YAAN,CAAmBC,KAAM;AAC1D,oCAAoCV,KAAK,CAACS,YAAN,CAAmBC,KAAM;AAC7D,KAPE;AASD,CAVD;;AAWA,MAAMC,WAAW,GAAG,CAAC;AAAEX,EAAAA,KAAF;AAASQ,EAAAA;AAAT,CAAD,KAAyD;AAC3E,SACEA,cAAc,KAAK,OAAnB,IACA,eAAI;AACR;AACA;AACA,gCAAgCR,KAAK,CAACS,YAAN,CAAmBC,KAAM;AACzD,mCAAmCV,KAAK,CAACS,YAAN,CAAmBC,KAAM;AAC5D,KAPE;AASD,CAVD;;AAYA,MAAME,SAAS,GAAG,CAAC;AAAEZ,EAAAA,KAAF;AAASQ,EAAAA;AAAT,CAAD,KAAyD;AACzE,SACEA,cAAc,KAAK,KAAnB,IACA,eAAI;AACR;AACA;AACA;AACA,oCAAoCR,KAAK,CAACS,YAAN,CAAmBC,KAAM;AAC7D,mCAAmCV,KAAK,CAACS,YAAN,CAAmBC,KAAM;AAC5D,KARE;AAUD,CAXD;;AAaA,MAAMG,YAAY,GAAG,CAAC;AAAEb,EAAAA,KAAF;AAASQ,EAAAA;AAAT,CAAD,KAAyD;AAC5E,SACEA,cAAc,KAAK,QAAnB,IACA,eAAI;AACR;AACA;AACA;AACA,iCAAiCR,KAAK,CAACS,YAAN,CAAmBC,KAAM;AAC1D,gCAAgCV,KAAK,CAACS,YAAN,CAAmBC,KAAM;AACzD,KARE;AAUD,CAXD;;AAaA,MAAMI,UAAU,GAAG,CAAC;AAAEd,EAAAA,KAAF;AAASQ,EAAAA;AAAT,CAAD,KAAyD;AAC1E,SAAO,eAAI;AACb,cAAc,CAAC,MAAD,EAAS,OAAT,EAAkBO,QAAlB,CAA2BP,cAA3B,KAA8C,OAAQ;AACpE,aAAa,CAAC,KAAD,EAAQ,QAAR,EAAkBO,QAAlB,CAA2BP,cAA3B,KAA8C,OAAQ;AACnE;AACA;AACA,wBAAwBR,KAAK,CAACC,aAAN,CAAoBe,SAAU;AACtD,eAAehB,KAAK,CAACI,MAAN,CAAaC,MAAb,GAAsB,CAAE;AACvC,GAPE;AAQD,CATD;;AAWO,MAAMY,qBAAqB,GAAG,qBAAO,KAAP,EAGnCC,KAAK,IAAI,eAAI;AACf,MAAMJ,UAAU,CAACI,KAAD,CAAQ;AACxB,MAAML,YAAY,CAACK,KAAD,CAAQ;AAC1B,MAAMN,SAAS,CAACM,KAAD,CAAQ;AACvB,MAAMX,UAAU,CAACW,KAAD,CAAQ;AACxB,MAAMP,WAAW,CAACO,KAAD,CAAQ;AACzB,GATqC,CAA9B","sourcesContent":["import styled from '@emotion/styled';\nimport { hex2rgba, StyleProps } from '@tecsinapse/react-core';\nimport { DrawerProps } from './Drawer';\nimport { css } from '@emotion/react';\n\nexport const StyledOverlay = styled('div')<\n  Partial<StyleProps> & { show: boolean }\n>`\n  background: ${({ theme }: StyleProps) =>\n    hex2rgba(theme.miscellaneous.overlay, 0.5)};\n  width: 100vw;\n  height: 100vh;\n  z-index: ${({ theme, show }: StyleProps & { show: boolean }) =>\n    show ? theme.zIndex.drawer : theme.zIndex.default};\n  cursor: ${({ show }) => (show ? 'pointer' : 'default')};\n  position: absolute;\n`;\n\nconst anchorLeft = ({ theme, anchorPosition }: StyleProps & DrawerProps) => {\n  return (\n    anchorPosition === 'left' &&\n    css`\n      left: 0;\n      top: 0;\n      border-top-right-radius: ${theme.borderRadius.centi};\n      border-bottom-right-radius: ${theme.borderRadius.centi};\n    `\n  );\n};\nconst anchorRight = ({ theme, anchorPosition }: StyleProps & DrawerProps) => {\n  return (\n    anchorPosition === 'right' &&\n    css`\n      right: 0;\n      top: 0;\n      border-top-left-radius: ${theme.borderRadius.centi};\n      border-bottom-left-radius: ${theme.borderRadius.centi};\n    `\n  );\n};\n\nconst anchorTop = ({ theme, anchorPosition }: StyleProps & DrawerProps) => {\n  return (\n    anchorPosition === 'top' &&\n    css`\n      left: 0;\n      right: 0;\n      top: 0;\n      border-bottom-right-radius: ${theme.borderRadius.centi};\n      border-bottom-left-radius: ${theme.borderRadius.centi};\n    `\n  );\n};\n\nconst anchorBottom = ({ theme, anchorPosition }: StyleProps & DrawerProps) => {\n  return (\n    anchorPosition === 'bottom' &&\n    css`\n      left: 0;\n      right: 0;\n      bottom: 0;\n      border-top-right-radius: ${theme.borderRadius.centi};\n      border-top-left-radius: ${theme.borderRadius.centi};\n    `\n  );\n};\n\nconst baseStyles = ({ theme, anchorPosition }: StyleProps & DrawerProps) => {\n  return css`\n    height: ${['left', 'right'].includes(anchorPosition) && '100vh'};\n    width: ${['top', 'bottom'].includes(anchorPosition) && '100wh'};\n    position: fixed;\n    overflow: hidden;\n    background-color: ${theme.miscellaneous.bodyColor};\n    z-index: ${theme.zIndex.drawer + 1};\n  `;\n};\n\nexport const StyledContainerDrawer = styled('div')<\n  DrawerProps & Partial<StyleProps>\n>(\n  props => css`\n    ${baseStyles(props)}\n    ${anchorBottom(props)}\n    ${anchorTop(props)}\n    ${anchorLeft(props)}\n    ${anchorRight(props)}\n  `\n);\n"],"file":"styled.js"}
+{"version":3,"sources":["../../../../src/components/molecules/Drawer/styled.ts"],"names":["anchorLeft","theme","anchorPosition","borderRadius","centi","anchorRight","anchorTop","anchorBottom","baseStyles","includes","miscellaneous","bodyColor","zIndex","drawer","StyledContainerDrawer","props"],"mappings":";;;;;;;AAAA;;AAGA;;;;AAEA,MAAMA,UAAU,GAAG,CAAC;AAAEC,EAAAA,KAAF;AAASC,EAAAA;AAAT,CAAD,KAAyD;AAC1E,SACEA,cAAc,KAAK,MAAnB,IACA,eAAI;AACR;AACA;AACA,iCAAiCD,KAAK,CAACE,YAAN,CAAmBC,KAAM;AAC1D,oCAAoCH,KAAK,CAACE,YAAN,CAAmBC,KAAM;AAC7D,KAPE;AASD,CAVD;;AAWA,MAAMC,WAAW,GAAG,CAAC;AAAEJ,EAAAA,KAAF;AAASC,EAAAA;AAAT,CAAD,KAAyD;AAC3E,SACEA,cAAc,KAAK,OAAnB,IACA,eAAI;AACR;AACA;AACA,gCAAgCD,KAAK,CAACE,YAAN,CAAmBC,KAAM;AACzD,mCAAmCH,KAAK,CAACE,YAAN,CAAmBC,KAAM;AAC5D,KAPE;AASD,CAVD;;AAYA,MAAME,SAAS,GAAG,CAAC;AAAEL,EAAAA,KAAF;AAASC,EAAAA;AAAT,CAAD,KAAyD;AACzE,SACEA,cAAc,KAAK,KAAnB,IACA,eAAI;AACR;AACA;AACA;AACA,oCAAoCD,KAAK,CAACE,YAAN,CAAmBC,KAAM;AAC7D,mCAAmCH,KAAK,CAACE,YAAN,CAAmBC,KAAM;AAC5D,KARE;AAUD,CAXD;;AAaA,MAAMG,YAAY,GAAG,CAAC;AAAEN,EAAAA,KAAF;AAASC,EAAAA;AAAT,CAAD,KAAyD;AAC5E,SACEA,cAAc,KAAK,QAAnB,IACA,eAAI;AACR;AACA;AACA;AACA,iCAAiCD,KAAK,CAACE,YAAN,CAAmBC,KAAM;AAC1D,gCAAgCH,KAAK,CAACE,YAAN,CAAmBC,KAAM;AACzD,KARE;AAUD,CAXD;;AAaA,MAAMI,UAAU,GAAG,CAAC;AAAEP,EAAAA,KAAF;AAASC,EAAAA;AAAT,CAAD,KAAyD;AAC1E,SAAO,eAAI;AACb,cAAc,CAAC,MAAD,EAAS,OAAT,EAAkBO,QAAlB,CAA2BP,cAA3B,KAA8C,OAAQ;AACpE,aAAa,CAAC,KAAD,EAAQ,QAAR,EAAkBO,QAAlB,CAA2BP,cAA3B,KAA8C,OAAQ;AACnE;AACA;AACA,wBAAwBD,KAAK,CAACS,aAAN,CAAoBC,SAAU;AACtD,eAAeV,KAAK,CAACW,MAAN,CAAaC,MAAO;AACnC,GAPE;AAQD,CATD;;AAWO,MAAMC,qBAAqB,GAAG,qBAAO,KAAP,EAGnCC,KAAK,IAAI,eAAI;AACf,MAAMP,UAAU,CAACO,KAAD,CAAQ;AACxB,MAAMR,YAAY,CAACQ,KAAD,CAAQ;AAC1B,MAAMT,SAAS,CAACS,KAAD,CAAQ;AACvB,MAAMf,UAAU,CAACe,KAAD,CAAQ;AACxB,MAAMV,WAAW,CAACU,KAAD,CAAQ;AACzB,GATqC,CAA9B","sourcesContent":["import styled from '@emotion/styled';\nimport { hex2rgba, StyleProps } from '@tecsinapse/react-core';\nimport { DrawerProps } from './Drawer';\nimport { css } from '@emotion/react';\n\nconst anchorLeft = ({ theme, anchorPosition }: StyleProps & DrawerProps) => {\n  return (\n    anchorPosition === 'left' &&\n    css`\n      left: 0;\n      top: 0;\n      border-top-right-radius: ${theme.borderRadius.centi};\n      border-bottom-right-radius: ${theme.borderRadius.centi};\n    `\n  );\n};\nconst anchorRight = ({ theme, anchorPosition }: StyleProps & DrawerProps) => {\n  return (\n    anchorPosition === 'right' &&\n    css`\n      right: 0;\n      top: 0;\n      border-top-left-radius: ${theme.borderRadius.centi};\n      border-bottom-left-radius: ${theme.borderRadius.centi};\n    `\n  );\n};\n\nconst anchorTop = ({ theme, anchorPosition }: StyleProps & DrawerProps) => {\n  return (\n    anchorPosition === 'top' &&\n    css`\n      left: 0;\n      right: 0;\n      top: 0;\n      border-bottom-right-radius: ${theme.borderRadius.centi};\n      border-bottom-left-radius: ${theme.borderRadius.centi};\n    `\n  );\n};\n\nconst anchorBottom = ({ theme, anchorPosition }: StyleProps & DrawerProps) => {\n  return (\n    anchorPosition === 'bottom' &&\n    css`\n      left: 0;\n      right: 0;\n      bottom: 0;\n      border-top-right-radius: ${theme.borderRadius.centi};\n      border-top-left-radius: ${theme.borderRadius.centi};\n    `\n  );\n};\n\nconst baseStyles = ({ theme, anchorPosition }: StyleProps & DrawerProps) => {\n  return css`\n    height: ${['left', 'right'].includes(anchorPosition) && '100vh'};\n    width: ${['top', 'bottom'].includes(anchorPosition) && '100wh'};\n    position: fixed;\n    overflow: hidden;\n    background-color: ${theme.miscellaneous.bodyColor};\n    z-index: ${theme.zIndex.drawer};\n  `;\n};\n\nexport const StyledContainerDrawer = styled('div')<\n  DrawerProps & Partial<StyleProps>\n>(\n  props => css`\n    ${baseStyles(props)}\n    ${anchorBottom(props)}\n    ${anchorTop(props)}\n    ${anchorLeft(props)}\n    ${anchorRight(props)}\n  `\n);\n"],"file":"styled.js"}

package/dist/components/molecules/InputPassword/InputPassword.js

@@ -11,9 +11,9 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _Input = require("../../atoms/Input");
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 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); }
 

package/dist/components/molecules/InputPassword/index.js

@@ -18,7 +18,7 @@ Object.defineProperty(exports, "InputPasswordWebProps", {
 
 var _InputPassword = _interopRequireWildcard(require("./InputPassword"));
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 //# sourceMappingURL=index.js.map

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,38 @@ 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
-  })))))));
+    searchTerm: search,
+    toggle: toggleOpen
+  }))))));
 };
 
 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                    toggle={toggleOpen}\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