@tecsinapse/react-web-kit 1.3.2 → 1.6.1

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/MenuBlock/MenuItem/styled.js

@@ -25,6 +25,9 @@ const StyledSubButton = (0, _styled.default)('span')`
   theme
 }) => theme.spacing.mili};
   cursor: pointer;
+  & * {
+    user-select: none;
+  }
 `;
 exports.StyledSubButton = StyledSubButton;
 //# sourceMappingURL=styled.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/components/molecules/Menubar/MenuBlock/MenuItem/styled.ts"],"names":["StyledContainerItemText","theme","spacing","mili","StyledSubButton","nano"],"mappings":";;;;;;;AAAA;;;;AAGO,MAAMA,uBAAuB,GAAG,qBAAO,KAAP,CAAmC;AAC1E,gBAAgB,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcC,IAAK;AAClD;AACA;AACA,CAJO;;AAMA,MAAMC,eAAe,GAAG,qBAAO,MAAP,CAAoC;AACnE,iBAAiB,CAAC;AAAEH,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcG,IAAK;AACnD,iBAAiB,CAAC;AAAEJ,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcC,IAAK;AACnD;AACA,CAJO","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"],"file":"styled.js"}
+{"version":3,"sources":["../../../../../../src/components/molecules/Menubar/MenuBlock/MenuItem/styled.ts"],"names":["StyledContainerItemText","theme","spacing","mili","StyledSubButton","nano"],"mappings":";;;;;;;AAAA;;;;AAGO,MAAMA,uBAAuB,GAAG,qBAAO,KAAP,CAAmC;AAC1E,gBAAgB,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcC,IAAK;AAClD;AACA;AACA,CAJO;;AAMA,MAAMC,eAAe,GAAG,qBAAO,MAAP,CAAoC;AACnE,iBAAiB,CAAC;AAAEH,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcG,IAAK;AACnD,iBAAiB,CAAC;AAAEJ,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcC,IAAK;AACnD;AACA;AACA;AACA;AACA,CAPO","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"],"file":"styled.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

@@ -9,9 +9,9 @@ var _react = _interopRequireDefault(require("react"));
 
 var _reactCore = require("@tecsinapse/react-core");
 
-var _styled = require("./styled");
+var _reactTransitionGroup = require("react-transition-group");
 
-var _Masonry = require("../Masonry");
+var _styled = require("./styled");
 
 var _MostUsed = require("./MostUsed");
 
@@ -21,25 +21,30 @@ var _SearchResultItem = require("./SearchResultItem");
 
 var _utils = require("./utils");
 
+var _animations = require("./animations");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 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 [menuOpen, setMenuOpen] = _react.default.useState(true);
-
   const [search, setSearch] = _react.default.useState('');
 
   const [results, setResults] = _react.default.useState([]);
 
   const [input, setInput] = (0, _reactCore.useDebouncedState)('', state => setSearch(state));
 
+  const [open, setOpen] = _react.default.useState(false);
+
+  const toggleOpen = _react.default.useCallback(() => setOpen(state => !state), [setOpen]);
+
   _react.default.useEffect(() => {
     if (search === '') return;
     setResults((0, _utils.filterAndTransform)(options, search));
@@ -48,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: () => setMenuOpen(!menuOpen)
-  }, !menuOpen ? _react.default.createElement(_reactCore.Icon, {
+    onPress: toggleOpen
+  }, !open ? _react.default.createElement(_reactCore.Icon, {
     size: "deca",
     name: "menu",
     type: "material-community",
@@ -59,31 +64,38 @@ const Menubar = ({
     name: "close",
     type: "material-community",
     fontColor: "light"
-  })), leftComponents, menuOpen && _react.default.createElement(_styled.StyledInputContainer, null, _react.default.createElement(_styled.StyledInput, {
-    placeholder: inputPlaceholder,
+  })), leftComponents, _react.default.createElement(_reactTransitionGroup.Transition, {
+    in: open,
+    timeout: 250
+  }, 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), menuOpen && _react.default.createElement(_styled.StyledContainerOpenMenu, null, !search ? _react.default.createElement(_react.default.Fragment, null, mostUsed && _react.default.createElement(_MostUsed.MostUsed, {
+  }))), rightComponents), _react.default.createElement(_reactTransitionGroup.Transition, {
+    in: open,
+    timeout: 250
+  }, state => _react.default.createElement(_styled.StyledContainerOpenMenu, {
+    style: (0, _animations.getContainerOpenMenuStyles)(state)
+  }, !search ? _react.default.createElement(_react.default.Fragment, null, mostUsed && _react.default.createElement(_MostUsed.MostUsed, {
     label: mostUsedLabel,
-    data: mostUsed
-  }), _react.default.createElement(_Masonry.Masonry, {
-    columns: 4,
-    spacingTop: "kilo",
-    spacingLeft: "mega"
-  }, options.map(option => _react.default.createElement(_MenuBlock.MenuBlock, {
-    data: option,
-    key: option.title
-  })))) : _react.default.createElement(_styled.StyledSearchResultsContainer, null, _react.default.createElement(_styled.StyledSearchTextContainer, null, _react.default.createElement(_reactCore.Text, {
+    data: mostUsed,
+    toggle: toggleOpen
+  }), _react.default.createElement(_MenuBlock.MenuBlock, {
+    options: options,
+    toggle: toggleOpen
+  })) : _react.default.createElement(_styled.StyledSearchResultsContainer, null, _react.default.createElement(_styled.StyledSearchTextContainer, null, _react.default.createElement(_reactCore.Text, {
     fontWeight: "bold"
   }, searchResultsLabel)), results.map(result => _react.default.createElement(_SearchResultItem.SearchResultItem, {
     key: `${result.title}-${result.category}`,
     data: result,
     searchTerm: search
-  })))));
+  }))))));
 };
 
 var _default = Menubar;

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getContainerOpenMenuStyles = exports.getInputContainerStyles = void 0;
+const getDefaultInputContainerStyles = {
+  transitionDuration: '250ms',
+  transitionProperty: 'opacity scale transform',
+  transitionTimingFunction: 'ease-in-out'
+};
+const getDefaultContainerOpenMenuStyles = {
+  transitionDuration: '250ms',
+  transitionProperty: 'opacity scale transform',
+  transitionTimingFunction: 'ease-in-out'
+};
+const getInputContainerTransform = {
+  entered: {
+    transform: 'scale(1, 1) translateY(0px)'
+  },
+  entering: {
+    opacity: 0.5,
+    transform: 'scale(0.99, 0.99) translateY(-5px)'
+  },
+  exited: {
+    opacity: 0,
+    transform: 'scale(0.99, 0.99) translateY(-50px)'
+  },
+  exiting: {
+    opacity: 0.5,
+    transform: 'scale(0.99, 0.99) translateY(-5px)'
+  }
+};
+const getContainerOpenMenuTransform = {
+  entered: {
+    transform: 'scale(1, 1) translateY(0px) '
+  },
+  entering: {
+    opacity: 0.95,
+    transform: 'scale(0.99, 0.99) translateY(0px)'
+  },
+  exited: {
+    opacity: 0,
+    transform: 'scale(0.99, 0.99) translateY(-600px)'
+  },
+  exiting: {
+    opacity: 0.95,
+    transform: 'scale(0.99, 0.99) translateY(0px)'
+  }
+};
+
+const getInputContainerStyles = state => ({ ...getDefaultInputContainerStyles,
+  ...getInputContainerTransform[state]
+});
+
+exports.getInputContainerStyles = getInputContainerStyles;
+
+const getContainerOpenMenuStyles = state => ({ ...getDefaultContainerOpenMenuStyles,
+  ...getContainerOpenMenuTransform[state]
+});
+
+exports.getContainerOpenMenuStyles = getContainerOpenMenuStyles;
+//# sourceMappingURL=animations.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/molecules/Menubar/animations.ts"],"names":["getDefaultInputContainerStyles","transitionDuration","transitionProperty","transitionTimingFunction","getDefaultContainerOpenMenuStyles","getInputContainerTransform","entered","transform","entering","opacity","exited","exiting","getContainerOpenMenuTransform","getInputContainerStyles","state","getContainerOpenMenuStyles"],"mappings":";;;;;;AAGA,MAAMA,8BAA8B,GAAG;AACrCC,EAAAA,kBAAkB,EAAE,OADiB;AAErCC,EAAAA,kBAAkB,EAAE,yBAFiB;AAGrCC,EAAAA,wBAAwB,EAAE;AAHW,CAAvC;AAMA,MAAMC,iCAAiC,GAAG;AACxCH,EAAAA,kBAAkB,EAAE,OADoB;AAExCC,EAAAA,kBAAkB,EAAE,yBAFoB;AAGxCC,EAAAA,wBAAwB,EAAE;AAHc,CAA1C;AAMA,MAAME,0BAA0B,GAAG;AACjCC,EAAAA,OAAO,EAAE;AACPC,IAAAA,SAAS,EAAE;AADJ,GADwB;AAIjCC,EAAAA,QAAQ,EAAE;AACRC,IAAAA,OAAO,EAAE,GADD;AAERF,IAAAA,SAAS,EAAE;AAFH,GAJuB;AAQjCG,EAAAA,MAAM,EAAE;AACND,IAAAA,OAAO,EAAE,CADH;AAENF,IAAAA,SAAS,EAAE;AAFL,GARyB;AAYjCI,EAAAA,OAAO,EAAE;AACPF,IAAAA,OAAO,EAAE,GADF;AAEPF,IAAAA,SAAS,EAAE;AAFJ;AAZwB,CAAnC;AAkBA,MAAMK,6BAA6B,GAAG;AACpCN,EAAAA,OAAO,EAAE;AACPC,IAAAA,SAAS,EAAE;AADJ,GAD2B;AAIpCC,EAAAA,QAAQ,EAAE;AACRC,IAAAA,OAAO,EAAE,IADD;AAERF,IAAAA,SAAS,EAAE;AAFH,GAJ0B;AAQpCG,EAAAA,MAAM,EAAE;AACND,IAAAA,OAAO,EAAE,CADH;AAENF,IAAAA,SAAS,EAAE;AAFL,GAR4B;AAYpCI,EAAAA,OAAO,EAAE;AACPF,IAAAA,OAAO,EAAE,IADF;AAEPF,IAAAA,SAAS,EAAE;AAFJ;AAZ2B,CAAtC;;AAkBO,MAAMM,uBAAuB,GAClCC,KADqC,KAElB,EACnB,GAAGd,8BADgB;AAEnB,KAAGK,0BAA0B,CAACS,KAAD;AAFV,CAFkB,CAAhC;;;;AAOA,MAAMC,0BAA0B,GACrCD,KADwC,KAErB,EACnB,GAAGV,iCADgB;AAEnB,KAAGQ,6BAA6B,CAACE,KAAD;AAFb,CAFqB,CAAnC","sourcesContent":["import { CSSProperties } from 'react';\nimport { TransitionStatus } from 'react-transition-group';\n\nconst getDefaultInputContainerStyles = {\n  transitionDuration: '250ms',\n  transitionProperty: 'opacity scale transform',\n  transitionTimingFunction: 'ease-in-out',\n};\n\nconst getDefaultContainerOpenMenuStyles = {\n  transitionDuration: '250ms',\n  transitionProperty: 'opacity scale transform',\n  transitionTimingFunction: 'ease-in-out',\n};\n\nconst getInputContainerTransform = {\n  entered: {\n    transform: 'scale(1, 1) translateY(0px)',\n  },\n  entering: {\n    opacity: 0.5,\n    transform: 'scale(0.99, 0.99) translateY(-5px)',\n  },\n  exited: {\n    opacity: 0,\n    transform: 'scale(0.99, 0.99) translateY(-50px)',\n  },\n  exiting: {\n    opacity: 0.5,\n    transform: 'scale(0.99, 0.99) translateY(-5px)',\n  },\n};\n\nconst getContainerOpenMenuTransform = {\n  entered: {\n    transform: 'scale(1, 1) translateY(0px) ',\n  },\n  entering: {\n    opacity: 0.95,\n    transform: 'scale(0.99, 0.99) translateY(0px)',\n  },\n  exited: {\n    opacity: 0,\n    transform: 'scale(0.99, 0.99) translateY(-600px)',\n  },\n  exiting: {\n    opacity: 0.95,\n    transform: 'scale(0.99, 0.99) translateY(0px)',\n  },\n};\n\nexport const getInputContainerStyles = (\n  state: TransitionStatus\n): CSSProperties => ({\n  ...getDefaultInputContainerStyles,\n  ...getInputContainerTransform[state],\n});\n\nexport const getContainerOpenMenuStyles = (\n  state: TransitionStatus\n): CSSProperties => ({\n  ...getDefaultContainerOpenMenuStyles,\n  ...getContainerOpenMenuTransform[state],\n});\n"],"file":"animations.js"}

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

@@ -27,7 +27,7 @@ Object.keys(_Menubar).forEach(function (key) {
   });
 });
 
-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/styled.js

@@ -33,6 +33,10 @@ const StyledIconInput = (0, _styled.default)('div')`
 `;
 exports.StyledIconInput = StyledIconInput;
 const StyledMenuBar = (0, _styled.default)('div')`
+    position: relative;
+    z-index: ${({
+  theme
+}) => theme.zIndex.absolute};
     background-color: ${({
   theme
 }) => theme.miscellaneous.surfaceColor};
@@ -63,6 +67,9 @@ const StyledMenuButton = (0, _native.default)(_Button.Button)`
     margin-right: ${({
   theme
 }) => theme.spacing.kilo};
+    & * {
+      user-select: none;
+    }
 `;
 exports.StyledMenuButton = StyledMenuButton;
 const StyledContainerOpenMenu = (0, _styled.default)('div')`
@@ -71,7 +78,13 @@ const StyledContainerOpenMenu = (0, _styled.default)('div')`
 }) => `${theme.borderWidth.pico} solid ${(0, _reactCore.hex2rgba)(theme.miscellaneous.shadow, 0.08)}`};
     background-color: ${({
   theme
-}) => theme.miscellaneous.surfaceColor};
+}) => theme.miscellaneous.surfaceColor}; 
+    border-bottom-left-radius: ${({
+  theme
+}) => theme.borderRadius.mili}; 
+    border-bottom-right-radius: ${({
+  theme
+}) => theme.borderRadius.mili};
     box-shadow: 0px 2px 8px ${({
   theme
 }) => (0, _reactCore.hex2rgba)(theme.miscellaneous.shadow, 0.08)};

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/molecules/Menubar/styled.ts"],"names":["StyledIconInput","theme","spacing","centi","StyledMenuBar","miscellaneous","surfaceColor","deca","kilo","shadow","StyledMenuButton","Button","StyledContainerOpenMenu","borderWidth","pico","mega","StyledInput","Input","StyledInputContainer","StyledSearchResultsContainer","StyledSearchTextContainer","mili"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;AAEO,MAAMA,eAAe,GAAG,qBAAU,KAAV,CAAsC;AACrE,sBAAsB,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcC,KAAM;AACzD,kBAAkB,CAAC;AAAEF,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcC,KAAM;AACrD,yBAAyB,CAAC;AAAEF,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcC,KAAM;AAC5D,mBAAmB,CAAC;AAAEF,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcC,KAAM;AACtD,CALO;;AAOA,MAAMC,aAAa,GAAG,qBAAU,KAAV,CAAsC;AACnE,wBAAwB,CAAC;AAAEH,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACI,aAAN,CAAoBC,YAAa;AACxE;AACA;AACA;AACA,eAAe,CAAC;AAAEL,EAAAA;AAAF,CAAD,KAAgB,GAAEA,KAAK,CAACC,OAAN,CAAcK,IAAK,IAAGN,KAAK,CAACC,OAAN,CAAcM,IAAK,EAAE;AAC5E,8BAA8B,CAAC;AAAEP,EAAAA;AAAF,CAAD,KACxB,yBAASA,KAAK,CAACI,aAAN,CAAoBI,MAA7B,EAAqC,IAArC,CAA2C;AACjD,CARO;;AAUA,MAAMC,gBAAgB,GAAG,qBAAaC,cAAb,CAA0C;AAC1E,wBAAwB,CAAC;AAAEV,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcC,KAAM;AAC3D,0BAA0B,CAAC;AAAEF,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcC,KAAM;AAC7D,2BAA2B,CAAC;AAAEF,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcC,KAAM;AAC9D,yBAAyB,CAAC;AAAEF,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcC,KAAM;AAC5D,oBAAoB,CAAC;AAAEF,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcM,IAAK;AACtD,CANO;;AAQA,MAAMI,uBAAuB,GAAG,qBAAU,KAAV,CAAsC;AAC7E,kBAAkB,CAAC;AAAEX,EAAAA;AAAF,CAAD,KACX,GAAEA,KAAK,CAACY,WAAN,CAAkBC,IAAK,UAAS,yBACjCb,KAAK,CAACI,aAAN,CAAoBI,MADa,EAEjC,IAFiC,CAGjC,EAAE;AACV,wBAAwB,CAAC;AAAER,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACI,aAAN,CAAoBC,YAAa;AACxE,8BAA8B,CAAC;AAAEL,EAAAA;AAAF,CAAD,KACxB,yBAASA,KAAK,CAACI,aAAN,CAAoBI,MAA7B,EAAqC,IAArC,CAA2C;AACjD;AACA;AACA,mBAAmB,CAAC;AAAER,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcM,IAAK;AACrD,sBAAsB,CAAC;AAAEP,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAca,IAAK;AACxD;AACA;AACA;AACA,CAhBO;;AAkBA,MAAMC,WAAW,GAAG,qBAAaC,YAAb,CAAyC;AACpE;AACA,CAFO;;AAIA,MAAMC,oBAAoB,GAAG,qBAAU,KAAV,CAAiB;AACrD;AACA;AACA,CAHO;;AAKA,MAAMC,4BAA4B,GAAG,qBAAU,KAAV,CAAiB;AAC7D;AACA;AACA,CAHO;;AAKA,MAAMC,yBAAyB,GAAG,qBAAU,KAAV,CAAsC;AAC/E,qBAAqB,CAAC;AAAEnB,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcmB,IAAK;AACvD,CAFO","sourcesContent":["import { default as webStyled } from '@emotion/styled';\nimport { default as nativeStyled } from '@emotion/native';\nimport { hex2rgba, StyleProps } from '@tecsinapse/react-core';\nimport { Button } from '../../atoms/Button';\nimport { Input } from '../../atoms/Input';\n\nexport const StyledIconInput = webStyled('div')<Partial<StyleProps>>`\n  padding-top: calc(${({ theme }) => theme.spacing.centi} + 2px);\n  padding-left: ${({ theme }) => theme.spacing.centi};\n  padding-bottom: calc(${({ theme }) => theme.spacing.centi} - 2px);\n  padding-right: ${({ theme }) => theme.spacing.centi};\n`;\n\nexport const StyledMenuBar = webStyled('div')<Partial<StyleProps>>`\n    background-color: ${({ theme }) => theme.miscellaneous.surfaceColor};\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    padding: ${({ theme }) => `${theme.spacing.deca} ${theme.spacing.kilo}`};\n    box-shadow: 0px 2px 8px ${({ theme }) =>\n      hex2rgba(theme.miscellaneous.shadow, 0.08)};\n`;\n\nexport const StyledMenuButton = nativeStyled(Button)<Partial<StyleProps>>`\n    padding-top: calc(${({ theme }) => theme.spacing.centi} + 2px);\n    padding-right: calc(${({ theme }) => theme.spacing.centi} + 2px);\n    padding-bottom: calc(${({ theme }) => theme.spacing.centi} + 2px);\n    padding-left: calc(${({ theme }) => theme.spacing.centi} + 2px);\n    margin-right: ${({ theme }) => theme.spacing.kilo};\n`;\n\nexport const StyledContainerOpenMenu = webStyled('div')<Partial<StyleProps>>`\n    border-top: ${({ theme }) =>\n      `${theme.borderWidth.pico} solid ${hex2rgba(\n        theme.miscellaneous.shadow,\n        0.08\n      )}`};\n    background-color: ${({ theme }) => theme.miscellaneous.surfaceColor};\n    box-shadow: 0px 2px 8px ${({ theme }) =>\n      hex2rgba(theme.miscellaneous.shadow, 0.08)};\n    padding-right: 8vw;\n    padding-left: 8vw;\n    padding-top: ${({ theme }) => theme.spacing.kilo};\n    padding-bottom: ${({ theme }) => theme.spacing.mega};\n    position: absolute;\n    width: -webkit-fill-available;\n    width: -moz-available;\n`;\n\nexport const StyledInput = nativeStyled(Input)<Partial<StyleProps>>`\n     width: 100%;\n`;\n\nexport const StyledInputContainer = webStyled('div')`\n    display: flex;\n    flex: 1\n`;\n\nexport const StyledSearchResultsContainer = webStyled('div')`\n    display: flex;\n    flex-direction: column;\n`;\n\nexport const StyledSearchTextContainer = webStyled('div')<Partial<StyleProps>>`\n    margin-bottom: ${({ theme }) => theme.spacing.mili};\n`;\n"],"file":"styled.js"}
+{"version":3,"sources":["../../../../src/components/molecules/Menubar/styled.ts"],"names":["StyledIconInput","theme","spacing","centi","StyledMenuBar","zIndex","absolute","miscellaneous","surfaceColor","deca","kilo","shadow","StyledMenuButton","Button","StyledContainerOpenMenu","borderWidth","pico","borderRadius","mili","mega","StyledInput","Input","StyledInputContainer","StyledSearchResultsContainer","StyledSearchTextContainer"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;AAEO,MAAMA,eAAe,GAAG,qBAAU,KAAV,CAAsC;AACrE,sBAAsB,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcC,KAAM;AACzD,kBAAkB,CAAC;AAAEF,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcC,KAAM;AACrD,yBAAyB,CAAC;AAAEF,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcC,KAAM;AAC5D,mBAAmB,CAAC;AAAEF,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcC,KAAM;AACtD,CALO;;AAOA,MAAMC,aAAa,GAAG,qBAAU,KAAV,CAAsC;AACnE;AACA,eAAe,CAAC;AAAEH,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACI,MAAN,CAAaC,QAAS;AACpD,wBAAwB,CAAC;AAAEL,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACM,aAAN,CAAoBC,YAAa;AACxE;AACA;AACA;AACA,eAAe,CAAC;AAAEP,EAAAA;AAAF,CAAD,KAAgB,GAAEA,KAAK,CAACC,OAAN,CAAcO,IAAK,IAAGR,KAAK,CAACC,OAAN,CAAcQ,IAAK,EAAE;AAC5E,8BAA8B,CAAC;AAAET,EAAAA;AAAF,CAAD,KACxB,yBAASA,KAAK,CAACM,aAAN,CAAoBI,MAA7B,EAAqC,IAArC,CAA2C;AACjD,CAVO;;AAYA,MAAMC,gBAAgB,GAAG,qBAAaC,cAAb,CAA0C;AAC1E,wBAAwB,CAAC;AAAEZ,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcC,KAAM;AAC3D,0BAA0B,CAAC;AAAEF,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcC,KAAM;AAC7D,2BAA2B,CAAC;AAAEF,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcC,KAAM;AAC9D,yBAAyB,CAAC;AAAEF,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcC,KAAM;AAC5D,oBAAoB,CAAC;AAAEF,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcQ,IAAK;AACtD;AACA;AACA;AACA,CATO;;AAWA,MAAMI,uBAAuB,GAAG,qBAAU,KAAV,CAAsC;AAC7E,kBAAkB,CAAC;AAAEb,EAAAA;AAAF,CAAD,KACX,GAAEA,KAAK,CAACc,WAAN,CAAkBC,IAAK,UAAS,yBACjCf,KAAK,CAACM,aAAN,CAAoBI,MADa,EAEjC,IAFiC,CAGjC,EAAE;AACV,wBAAwB,CAAC;AAAEV,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACM,aAAN,CAAoBC,YAAa;AACxE,iCAAiC,CAAC;AAAEP,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACgB,YAAN,CAAmBC,IAAK;AACxE,kCAAkC,CAAC;AAAEjB,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACgB,YAAN,CAAmBC,IAAK;AACzE,8BAA8B,CAAC;AAAEjB,EAAAA;AAAF,CAAD,KACxB,yBAASA,KAAK,CAACM,aAAN,CAAoBI,MAA7B,EAAqC,IAArC,CAA2C;AACjD;AACA;AACA,mBAAmB,CAAC;AAAEV,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcQ,IAAK;AACrD,sBAAsB,CAAC;AAAET,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAciB,IAAK;AACxD;AACA;AACA;AACA,CAlBO;;AAoBA,MAAMC,WAAW,GAAG,qBAAaC,YAAb,CAAyC;AACpE;AACA,CAFO;;AAIA,MAAMC,oBAAoB,GAAG,qBAAU,KAAV,CAAiB;AACrD;AACA;AACA,CAHO;;AAKA,MAAMC,4BAA4B,GAAG,qBAAU,KAAV,CAAiB;AAC7D;AACA;AACA,CAHO;;AAKA,MAAMC,yBAAyB,GAAG,qBAAU,KAAV,CAAsC;AAC/E,qBAAqB,CAAC;AAAEvB,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcgB,IAAK;AACvD,CAFO","sourcesContent":["import { default as webStyled } from '@emotion/styled';\nimport { default as nativeStyled } from '@emotion/native';\nimport { hex2rgba, StyleProps } from '@tecsinapse/react-core';\nimport { Button } from '../../atoms/Button';\nimport { Input } from '../../atoms/Input';\n\nexport const StyledIconInput = webStyled('div')<Partial<StyleProps>>`\n  padding-top: calc(${({ theme }) => theme.spacing.centi} + 2px);\n  padding-left: ${({ theme }) => theme.spacing.centi};\n  padding-bottom: calc(${({ theme }) => theme.spacing.centi} - 2px);\n  padding-right: ${({ theme }) => theme.spacing.centi};\n`;\n\nexport const StyledMenuBar = webStyled('div')<Partial<StyleProps>>`\n    position: relative;\n    z-index: ${({ theme }) => theme.zIndex.absolute};\n    background-color: ${({ theme }) => theme.miscellaneous.surfaceColor};\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    padding: ${({ theme }) => `${theme.spacing.deca} ${theme.spacing.kilo}`};\n    box-shadow: 0px 2px 8px ${({ theme }) =>\n      hex2rgba(theme.miscellaneous.shadow, 0.08)};\n`;\n\nexport const StyledMenuButton = nativeStyled(Button)<Partial<StyleProps>>`\n    padding-top: calc(${({ theme }) => theme.spacing.centi} + 2px);\n    padding-right: calc(${({ theme }) => theme.spacing.centi} + 2px);\n    padding-bottom: calc(${({ theme }) => theme.spacing.centi} + 2px);\n    padding-left: calc(${({ theme }) => theme.spacing.centi} + 2px);\n    margin-right: ${({ theme }) => theme.spacing.kilo};\n    & * {\n      user-select: none;\n    }\n`;\n\nexport const StyledContainerOpenMenu = webStyled('div')<Partial<StyleProps>>`\n    border-top: ${({ theme }) =>\n      `${theme.borderWidth.pico} solid ${hex2rgba(\n        theme.miscellaneous.shadow,\n        0.08\n      )}`};\n    background-color: ${({ theme }) => theme.miscellaneous.surfaceColor}; \n    border-bottom-left-radius: ${({ theme }) => theme.borderRadius.mili}; \n    border-bottom-right-radius: ${({ theme }) => theme.borderRadius.mili};\n    box-shadow: 0px 2px 8px ${({ theme }) =>\n      hex2rgba(theme.miscellaneous.shadow, 0.08)};\n    padding-right: 8vw;\n    padding-left: 8vw;\n    padding-top: ${({ theme }) => theme.spacing.kilo};\n    padding-bottom: ${({ theme }) => theme.spacing.mega};\n    position: absolute;\n    width: -webkit-fill-available;\n    width: -moz-available;\n`;\n\nexport const StyledInput = nativeStyled(Input)<Partial<StyleProps>>`\n     width: 100%;\n`;\n\nexport const StyledInputContainer = webStyled('div')`\n    display: flex;\n    flex: 1\n`;\n\nexport const StyledSearchResultsContainer = webStyled('div')`\n    display: flex;\n    flex-direction: column;\n`;\n\nexport const StyledSearchTextContainer = webStyled('div')<Partial<StyleProps>>`\n    margin-bottom: ${({ theme }) => theme.spacing.mili};\n`;\n"],"file":"styled.js"}

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

@@ -1,2 +1,6 @@
 "use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 //# sourceMappingURL=types.js.map

package/dist/components/molecules/Select/Dropdown/Dropdown.d.ts

@@ -0,0 +1,7 @@
+import { CSSProperties } from 'react';
+import { SelectProps } from '../Select';
+declare const Dropdown: <Data, Type extends "single" | "multi">({ options, onSearch, type, hideSearchBar, onSelect, value, keyExtractor, labelExtractor, setDropDownVisible, style, }: SelectProps<Data, Type> & {
+    setDropDownVisible: (t: boolean) => void;
+    style: CSSProperties;
+}) => JSX.Element;
+export default Dropdown;

package/dist/components/molecules/Select/Dropdown/Dropdown.js

@@ -0,0 +1,90 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactCore = require("@tecsinapse/react-core");
+
+var _Input = require("../../../atoms/Input");
+
+var _SelectItem = require("../SelectItem");
+
+var _styled = require("./styled");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const Dropdown = ({
+  options,
+  onSearch,
+  type,
+  hideSearchBar,
+  onSelect,
+  value,
+  keyExtractor,
+  labelExtractor,
+  setDropDownVisible,
+  style
+}) => {
+  const [searchArg, setSearchArg] = (0, _reactCore.useDebouncedState)('', onSearch);
+  const lengthOptions = options.length;
+
+  const [checkedAll, setCheckedAll] = _react.default.useState(type === 'multi' && (value === null || value === void 0 ? void 0 : value.length) === lengthOptions);
+
+  const onClickCheckAll = () => {
+    const items = options.map(option => option);
+    setCheckedAll(!checkedAll);
+    const aux = !checkedAll;
+    const auxArray = [];
+    !aux ? onSelect(auxArray) : onSelect(items);
+  };
+
+  return _react.default.createElement(_styled.StyledContainerDropdown, {
+    lengthOptions: lengthOptions,
+    style: style
+  }, type === 'multi' && _react.default.createElement(_styled.StyledContainerCheckAll, {
+    onClick: hideSearchBar ? onClickCheckAll : undefined
+  }, _react.default.createElement(_reactCore.Checkbox, {
+    checked: checkedAll,
+    onChange: onClickCheckAll
+  }), !hideSearchBar ? _react.default.createElement(_styled.SearchBarContainer, null, _react.default.createElement(_Input.Input, {
+    style: {
+      width: '100%'
+    },
+    placeholder: "Busque a op\xE7\xE3o desejada",
+    value: searchArg,
+    leftComponent: _react.default.createElement(_reactCore.Icon, {
+      name: "magnify",
+      type: "material-community",
+      size: "centi",
+      style: {
+        marginHorizontal: 12
+      }
+    }),
+    onChange: text => setSearchArg(text)
+  })) : _react.default.createElement(_styled.StyledContainerTextLabel, null, _react.default.createElement(_reactCore.Text, {
+    fontWeight: "bold"
+  }, _react.default.createElement(_styled.StyledSpan, null, "Selecionar todos")))), _react.default.createElement(_styled.StyledTest, {
+    lenghtOptions: options.length
+  }, options.map((item, index) => _react.default.createElement(_SelectItem.ItemSelect, {
+    type: type,
+    key: index,
+    item: item,
+    onSelect: onSelect,
+    value: value,
+    keyExtractor: keyExtractor,
+    index: index,
+    labelExtractor: labelExtractor,
+    setDropDownVisible: setDropDownVisible,
+    checkedAll: checkedAll,
+    setCheckedAll: setCheckedAll,
+    lenghtOptions: options.length
+  }))));
+};
+
+var _default = Dropdown;
+exports.default = _default;
+//# sourceMappingURL=Dropdown.js.map

package/dist/components/molecules/Select/Dropdown/Dropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/molecules/Select/Dropdown/Dropdown.tsx"],"names":["Dropdown","options","onSearch","type","hideSearchBar","onSelect","value","keyExtractor","labelExtractor","setDropDownVisible","style","searchArg","setSearchArg","lengthOptions","length","checkedAll","setCheckedAll","React","useState","onClickCheckAll","items","map","option","aux","auxArray","undefined","width","marginHorizontal","text","item","index"],"mappings":"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","sourcesContent":["import React, { CSSProperties } from 'react';\nimport {\n  Checkbox,\n  Text,\n  Icon,\n  useDebouncedState,\n} from '@tecsinapse/react-core';\nimport { Input } from '../../../atoms/Input';\nimport { ItemSelect } from '../SelectItem';\nimport { SelectProps } from '../Select';\nimport {\n  SearchBarContainer,\n  StyledContainerCheckAll,\n  StyledContainerDropdown,\n  StyledContainerTextLabel,\n  StyledSpan,\n  StyledTest,\n} from './styled';\n\nconst Dropdown = <Data, Type extends 'single' | 'multi'>({\n  options,\n  onSearch,\n  type,\n  hideSearchBar,\n  onSelect,\n  value,\n  keyExtractor,\n  labelExtractor,\n  setDropDownVisible,\n  style,\n}: SelectProps<Data, Type> & {\n  setDropDownVisible: (t: boolean) => void;\n  style: CSSProperties;\n}): JSX.Element => {\n  const [searchArg, setSearchArg] = useDebouncedState<string>('', onSearch);\n  const lengthOptions = options.length;\n\n  const [checkedAll, setCheckedAll] = React.useState<boolean>(\n    type === 'multi' && (value as Data[])?.length === lengthOptions\n  );\n\n  const onClickCheckAll = () => {\n    const items = options.map(option => option);\n    setCheckedAll(!checkedAll);\n    const aux = !checkedAll;\n    type OnSelectArg = Parameters<typeof onSelect>[0];\n    const auxArray: Data[] = [];\n    !aux ? onSelect(auxArray as OnSelectArg) : onSelect(items as OnSelectArg);\n  };\n\n  return (\n    <StyledContainerDropdown lengthOptions={lengthOptions} style={style}>\n      {type === 'multi' && (\n        <StyledContainerCheckAll\n          onClick={hideSearchBar ? onClickCheckAll : undefined}\n        >\n          <Checkbox checked={checkedAll} onChange={onClickCheckAll} />\n          {!hideSearchBar ? (\n            <SearchBarContainer>\n              <Input\n                style={{ width: '100%' }}\n                placeholder=\"Busque a opção desejada\"\n                value={searchArg}\n                leftComponent={\n                  <Icon\n                    name=\"magnify\"\n                    type=\"material-community\"\n                    size=\"centi\"\n                    style={{ marginHorizontal: 12 }}\n                  />\n                }\n                onChange={text => setSearchArg(text)}\n              />\n            </SearchBarContainer>\n          ) : (\n            <StyledContainerTextLabel>\n              <Text fontWeight=\"bold\">\n                <StyledSpan>Selecionar todos</StyledSpan>\n              </Text>\n            </StyledContainerTextLabel>\n          )}\n        </StyledContainerCheckAll>\n      )}\n      <StyledTest lenghtOptions={options.length}>\n        {options.map((item, index) => (\n          <ItemSelect\n            type={type}\n            key={index}\n            item={item}\n            onSelect={onSelect}\n            value={value}\n            keyExtractor={keyExtractor}\n            index={index}\n            labelExtractor={labelExtractor}\n            setDropDownVisible={setDropDownVisible}\n            checkedAll={checkedAll}\n            setCheckedAll={setCheckedAll}\n            lenghtOptions={options.length}\n          />\n        ))}\n      </StyledTest>\n    </StyledContainerDropdown>\n  );\n};\n\nexport default Dropdown;\n"],"file":"Dropdown.js"}

package/dist/components/molecules/Select/Dropdown/index.d.ts

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

package/dist/components/molecules/Select/Dropdown/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Dropdown", {
+  enumerable: true,
+  get: function () {
+    return _Dropdown.default;
+  }
+});
+
+var _Dropdown = _interopRequireDefault(require("./Dropdown"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+//# sourceMappingURL=index.js.map